/* ==========================================================================
   ConstructCo — theme-level design system
   Loaded last, after cc-enhancements.css, so it settles the questions the
   earlier layers each answered locally.

   Why this file exists
   --------------------
   home.php carries a complete, well-judged token set — a clamped type scale,
   a band rhythm, a ground colour — inside an inline <style> block scoped to
   `.p-home`. It never reached the other 40-odd templates, so every one of them
   re-invented the same decisions. Measured across ten pages:

     h2   rendered at 6 sizes   (46 / 42 / 41.04 / 36 / 32 / 31.68px)
     h3   rendered at 10 sizes  (28 / 25.92 / 23.76 / 23.04 / 22 / 21.6 /
                                 20 / 19 / 18 / 17px)
     body copy on dark surfaces used 9 different white alphas
     one stray off-palette body colour (#223044) survived from a demo theme

   This file promotes the homepage's system to :root and points every drifting
   component at it. It adds no new colours: every value below already existed
   somewhere in the theme.

   Section order
     1. Tokens
     2. Type scale
     3. Two-tone heading accent
     4. Section background rhythm
     5. Text colour
     6. Editorial prose
     7. Hover cards
   ========================================================================== */


/* ==========================================================================
   1. TOKENS

   Lifted verbatim from the `.p-home` block in home.php so the homepage is
   unchanged by this file and every other template inherits the same values.
   ========================================================================== */

:root {
	/* -- brass ------------------------------------------------------------
	   The palette brass (#9F8A38) measures 3.04:1 on cream, so it is a
	   heading and large-text colour only. --cc-brass-lift is the lighter
	   step home.php already used for dark grounds. */
	--cc-brass:       var(--secondary-color);
	--cc-brass-lift:  #C4AC55;
	--cc-brass-line:  rgba(var(--secondary-color-rgb), .45);
	--cc-tint:        rgba(var(--secondary-color-rgb), .07);

	/* -- grounds ----------------------------------------------------------
	   Four surfaces, in the order a page steps through them. The cream is the
	   theme's --background; ground and ground-deep come from home.php; dark
	   is --bg-dark-1. Section 4 rotates between them. */
	/*
	 * Two light grounds, and they are meant to be told apart.
	 *
	 * Earlier passes tried a neutral warm grey (#F4F3EF) and then a deeper step
	 * of the cream (#EAECDB). Both sat within a few percent of the page ground,
	 * so a band change was barely visible and the whole site read as one long
	 * cream surface.
	 *
	 * White is the default light band. The cream keeps its place as the accent,
	 * used for bands that carry white cards — there the tint is doing work,
	 * because it is what makes a white card read as a card.
	 */
	--cc-band-base:   #FFFFFF;
	--cc-band-accent: var(--background);    /* #F2F3E7 the brand cream */
	--cc-band-dark:   var(--bg-dark-1);     /* #2E2E22 */

	/*
	 * Component tints, not band colours. Panels, wells and inset plates inside a
	 * section use these; several templates already referenced them by these
	 * names, so they keep them rather than being rewritten.
	 */
	--cc-ground:      var(--cc-band-accent);
	--cc-ground-deep: #EAECDB;

	--cc-hairline:        rgba(var(--primary-color-rgb), .14);
	--cc-hairline-strong: rgba(var(--primary-color-rgb), .32);

	/* -- type scale -------------------------------------------------------
	   Six steps, each clamped so the scale compresses on small screens
	   instead of needing a parallel set of media queries. Roles, not tags:
	   a card title is --cc-h4 whatever element it is marked up as. */
	--cc-h1:    clamp(34px, 4vw,   60px);   /* page hero, once per page   */
	--cc-h2:    clamp(30px, 3.2vw, 46px);   /* band heading               */
	--cc-h3:    clamp(20px, 1.7vw, 24px);   /* sub-head, article heading  */
	--cc-h4:    clamp(18px, 1.3vw, 20px);   /* card and panel title       */
	--cc-h5:    16px;                       /* compact label              */
	--cc-h6:    14px;                       /* micro label                */

	--cc-lede:  clamp(16px, 1.15vw, 18px);  /* standfirst, section intro  */
	--cc-body:  16px;                       /* running copy               */
	--cc-small: 15px;                       /* card body, list rows       */
	--cc-micro: 13px;                       /* eyebrows, meta             */

	/* -- rhythm ----------------------------------------------------------- */
	--cc-band-y:    clamp(60px, 8vw, 120px);
	--cc-space-xs:  clamp(10px, 1.2vw, 16px);
	--cc-space-sm:  clamp(16px, 2vw,   24px);
	--cc-space-md:  clamp(24px, 3vw,   40px);
	--cc-space-lg:  clamp(40px, 5vw,   64px);

	/* -- motion ------------------------------------------------------------ */
	--cc-ease: cubic-bezier(.22, .61, .36, 1);
	--cc-fast: .22s;
	--cc-med:  .42s;
}


/* ==========================================================================
   2. TYPE SCALE

   One size per role, sitewide.

   These are deliberately written at low specificity — a bare tag, or a single
   class — so a component that has a real reason to differ can still say so.
   What they replace is drift, not intent: the 23.76px and 21.6px and 16.56px
   values below were not decisions, they were three different clamp() curves
   sampled at the same viewport.
   ========================================================================== */

h1, .h1 { font-size: var(--cc-h1); line-height: 1.06; }
h2, .h2 { font-size: var(--cc-h2); line-height: 1.12; }
h3, .h3 { font-size: var(--cc-h3); line-height: 1.28; }
h4, .h4 { font-size: var(--cc-h4); line-height: 1.34; }
h5, .h5 { font-size: var(--cc-h5); line-height: 1.4;  }
h6, .h6 { font-size: var(--cc-h6); line-height: 1.4;  }

/* Headings set tighter as they grow, so the display sizes do not look loose
   next to the body copy. */
h1, .h1 { letter-spacing: -.02em; }
h2, .h2 { letter-spacing: -.015em; }
h3, .h3 { letter-spacing: -.01em; }

/* -- the h2 field -----------------------------------------------------------
   Every class that was carrying its own h2 size. Each is now the same step. */
.cc-band-title,
.cc-introducing,
.sgx__title,
.cc-cta__heading,
.cc-about-routes__heading,
.about-topic__lede-title,
.ct-panel__title,
.svcline__title,
.mk-band__title,
.duo__title {
	font-size: var(--cc-h2);
	line-height: 1.12;
	letter-spacing: -.015em;
}

/* -- the h3 field -----------------------------------------------------------
   Split by role rather than flattened. A section sub-head and a card title do
   different jobs; what was wrong was that card titles rendered at 22px on one
   page and 21.6px on the next. */
.icd__title,
.ct-form__title,
.about-topic__body h3,
.svc-content .copy-measure h3 {
	font-size: var(--cc-h3);
	line-height: 1.28;
	letter-spacing: -.01em;
}

/* Card and panel titles — the compact step. */
.cc-card__title,
.mkt-plate__title,
.sgx-row__title,
.sgx__panel-title,
.es-card__title,
.cc-cap__title,
.cc-cta__note-title,
.duo__panel .duo__title,
.svc-rail__group,
.cc-facts dd {
	font-size: var(--cc-h4);
	line-height: 1.34;
	letter-spacing: -.005em;
}

/* An h2 that opens an article is a clause heading, not a band heading — it is
   inside the measure, not spanning the page. It takes the h3 step. */
.svc-content .copy-measure h2,
.p-location .copy .copy-measure h2,
.about-topic .copy-measure h2,
.blog-detail .copy-measure h2 {
	font-size: var(--cc-h3);
	line-height: 1.28;
}

/* -- lede and body ---------------------------------------------------------
   The 16.56px, 15.5px and 20.16px values were the same drift one level down. */
.cc-lede,
.icd-lead,
.icd__lead,
.ct-panel__lead,
.cc-sechead p,
.svcline__blurb,
.duo__lead,
p.lead {
	font-size: var(--cc-lede);
	line-height: 1.6;
}

.cc-card__text,
.cc-card__list li,
.svcline__link,
.duo__list a,
.cc-steps span {
	font-size: var(--cc-small);
}

/* Eyebrows and meta. 13px is the floor; below it the uppercase letter-spacing
   stops being legible at arm's length. */
.cc-eyebrow,
.cc-card__eyebrow,
.cc-sechead__eyebrow,
.svc-rail__label,
.post-meta,
.subtitle {
	font-size: var(--cc-micro);
	letter-spacing: .14em;
}


/* ==========================================================================
   3. TWO-TONE HEADING ACCENT

   The site's one heading device: the trailing phrase of a section heading sits
   in brass. It was applied to ten h2s and missing from thirteen, including two
   that sat in the same scroll as an accented one.

   constructco_heading_accent() in functions.php now emits the span, so the
   markup is uniform and this rule is the only place the colour is decided.

   .cc-accent is the new, single hook. .id-color-2 is the theme's original
   class and is kept so existing markup keeps working.
   ========================================================================== */

.cc-accent,
h1 .cc-accent, h2 .cc-accent, h3 .cc-accent, h4 .cc-accent {
	color: var(--cc-brass);
	font: inherit;
	letter-spacing: inherit;
}

/* On a dark ground the palette brass drops to 2.4:1. The lifted step clears
   3:1 at heading sizes, which is the bar large text has to meet. */
.text-light .cc-accent,
.dark-scheme .cc-accent,
.cc-cta .cc-accent,
.cc-band--dark .cc-accent,
.bg-dark-1 .cc-accent,
.bg-color .cc-accent,
footer .cc-accent {
	color: var(--cc-brass-lift);
}

/* The theme's original accent class, pointed at the same two values so the
   brass cannot drift apart again. */
.id-color-2,
span.id-color-2 { color: var(--cc-brass); }

.text-light .id-color-2,
.dark-scheme .id-color-2,
.cc-cta .id-color-2,
.bg-dark-1 .id-color-2,
.bg-color .id-color-2,
footer .id-color-2 { color: var(--cc-brass-lift); }

/* The accent breaks to its own line only where the heading was authored that
   way; `d-block` is the theme's existing signal for it. */
.cc-accent--block { display: block; }


/* ==========================================================================
   4. SECTION BACKGROUND RHYTHM

   The complaint that sections "are too long or the next section starts with
   the same bg colour" is one measurement:

     /services/          4 consecutive transparent sections, 5331px unbroken
     /locations/         one section 3576px tall
     /markets/           2266px unbroken
     /engineering-service/  4 consecutive transparent sections
     /locations/{x}/     a run of four, 2493px
     service pages       2111px + 1490px unbroken

   Every one of those sections inherited the page's cream. The homepage already
   solved this with .cc-band--ground; it just never left home.php.

   The rule below is structural rather than per-template: inside #content, an
   immediate section that is not already carrying a ground takes the alternate
   one on every second occurrence. Sections that set their own background —
   the dark CTA, the jarallax photo bands, the hero — opt out through
   :not(), so the alternation counts only the plain ones and a dark band never
   gets a cream painted over it.
   ========================================================================== */

/*
 * The bands.
 *
 * An automatic nth-of-type alternation was tried first and rejected: it counts
 * every sibling section, including the photo heroes and dark CTAs that opt out,
 * so on a page that already declared its own bands it doubled them up and
 * produced four cream sections in a row. Counting only the plain sections is
 * not something a selector can do.
 *
 * So the band is declared, the way home.php already declared it. Three classes,
 * one job each, and a template that says nothing keeps the page ground it has.
 */
/*
 * Light sections are white unless they say otherwise. The :not() chain is the
 * opt-out list: photo heroes and dark bands paint their own ground and must not
 * be overwritten.
 */
#content > section:not(.cc-cta):not(.cc-band--dark):not(.bg-color):not(.bg-dark-1):not(.bg-dark-2):not(.bg-dark-3):not(.principles):not(.jarallax):not(#subheader):not(.cc-hero):not(.main-sec):not(.cc-band--accent) {
	background: var(--cc-band-base);
}

#content > section.cc-band--base   { background: var(--cc-band-base); }
#content > section.cc-band--accent { background: var(--cc-band-accent); }

#content > section.cc-band--dark {
	background: var(--cc-band-dark);
	color: var(--cc-on-dark);
}

/*
 * The page itself.
 *
 * body keeps the theme's cream, which showed through as a stripe wherever a
 * template's own markup left a gap between two white bands. White here removes
 * that without touching --background, which the contact form's floating labels
 * read to knock themselves out of the field border.
 */
body { background: var(--cc-band-base); }

/*
 * A white card on a white band needs its edge to carry the whole separation,
 * so it gets the hairline rather than relying on the ground behind it.
 */
#content > section.cc-band--base .cc-card,
#content > section:not([class*="cc-band--accent"]) .cc-card {
	border: 1px solid var(--cc-hairline);
}

/*
 * A band that follows one of its own colour gets a hairline instead of a second
 * tint. Two greys a few percent apart read as a printing error; a rule reads as
 * a decision. This only fires where the templates genuinely repeat, which after
 * the splits below is the `pt-0` continuations that are meant to belong to the
 * band above them.
 */
#content > section.cc-band--base + section.cc-band--base,
#content > section.cc-band--accent + section.cc-band--accent {
	border-top: 1px solid var(--cc-hairline);
}

/*
 * Long bands get their own breathing room.
 *
 * `no-top`/`no-bottom`/`pt-0` are the theme's own spacing utilities and are
 * respected. This only sets the default band padding for sections that never
 * said anything, which is what let the 3576px section exist.
 */
#content > section:not(.no-top):not(.pt-0):not(#subheader):not(.cc-hero):not(.main-sec) {
	padding-top: var(--cc-band-y);
}

#content > section:not(.no-bottom):not(.pb-0):not(#subheader):not(.cc-hero):not(.main-sec) {
	padding-bottom: var(--cc-band-y);
}


/* ==========================================================================
   5. TEXT COLOUR

   Two problems, one cause: no token said what body copy is, so each surface
   picked its own.

   On light grounds the audit found the forest green (#354E33, 8.19:1 — good),
   an off-palette blue-grey (#223044) inherited from the demo theme, and an
   inline `color: black` pasted into an ACF field. On dark grounds it found
   nine different whites: solid, and alphas at .66 .74 .75 .78 .80 .82 .88 .92.

   Two tokens replace all eleven.
   ========================================================================== */

:root {
	--cc-on-light:     var(--title-font-color);          /* #354E33  8.19:1 on cream */
	--cc-on-light-mut: rgba(var(--primary-color-rgb), .72); /* 5.6:1 — notes, captions */
	--cc-on-dark:      rgba(255, 255, 255, .88);         /* 12.4:1 on #2E2E22 */
	--cc-on-dark-mut:  rgba(255, 255, 255, .70);         /* 8.0:1  — captions only */
	--cc-on-accent:    #ffffff;
}

/* -- light grounds ---------------------------------------------------------- */

#content p,
#content li,
#content dd,
#content figcaption {
	color: var(--cc-on-light);
}

/*
 * The stray blue-grey (#223044) came in with the purchased theme's demo palette
 * and survived into .principles cards and .text-dark. It appears nowhere in the
 * brand, and read as a colder, bluer "black" beside the forest green in the
 * next section — the "somewhere dark, somewhere light" of the brief. It is now
 * replaced at source, in pages.css and style.css, rather than overridden here.
 */

/* -- dark grounds ----------------------------------------------------------- */

/*
 * One white for body copy on every dark surface. The list is the same set of
 * bands declared in section 4, so a band cannot be dark for the background and
 * light for the text.
 */
/*
 * `#content` is on the front of every one of these on purpose. The light-ground
 * rule above is `#content p`, which scores (1,0,1); a bare `.cc-cta p` scores
 * (0,1,1) and loses to it, which painted the CTA copy forest-green on the dark
 * olive band — legible in the audit, invisible on the page. Matching the ID
 * puts the two rules at equal weight, where source order decides and the more
 * specific surface wins.
 */
#content .cc-cta p,        #content .cc-cta li,
#content .cc-band--dark p, #content .cc-band--dark li,
#content section.bg-color p,  #content section.bg-color li,
#content section.bg-dark-1 p, #content section.bg-dark-1 li,
#content section.bg-dark-2 p, #content section.bg-dark-2 li,
#content section.bg-dark-3 p, #content section.bg-dark-3 li,
#content .principles p,    #content .principles li,
#content .ct-panel__aside p, #content .ct-panel__aside li,
#content #subheader p,     #content #subheader li,
#content .cc-hero p,       #content .cc-hero li,
#content .text-light p,    #content .text-light li,
#content .text-light dd,   #content .text-light figcaption {
	color: var(--cc-on-dark);
}

/* Headings on dark grounds are solid white — they carry the contrast the
   body copy borrows. */
#content .cc-cta :is(h1,h2,h3,h4,h5,h6),
#content .cc-band--dark :is(h1,h2,h3,h4,h5,h6),
#content section.bg-color :is(h1,h2,h3,h4,h5,h6),
#content section.bg-dark-1 :is(h1,h2,h3,h4,h5,h6),
#content .principles :is(h1,h2,h3,h4,h5,h6),
#content #subheader :is(h1,h2,h3,h4,h5,h6),
#content .cc-hero :is(h1,h2,h3,h4,h5,h6),
#content .text-light :is(h1,h2,h3,h4,h5,h6) {
	color: var(--cc-on-accent);
}

/* The accent keeps its brass on a dark ground; the rule above would otherwise
   flatten every two-tone heading in a dark band to solid white. */
#content .cc-cta :is(h1,h2,h3,h4,h5,h6) .cc-accent,
#content .cc-band--dark :is(h1,h2,h3,h4,h5,h6) .cc-accent,
#content section.bg-color :is(h1,h2,h3,h4,h5,h6) .cc-accent,
#content section.bg-dark-1 :is(h1,h2,h3,h4,h5,h6) .cc-accent,
#content .principles :is(h1,h2,h3,h4,h5,h6) .cc-accent,
#content #subheader :is(h1,h2,h3,h4,h5,h6) .cc-accent,
#content .cc-hero :is(h1,h2,h3,h4,h5,h6) .cc-accent,
#content .text-light :is(h1,h2,h3,h4,h5,h6) .cc-accent,
#content .cc-cta :is(h1,h2,h3,h4,h5,h6) .id-color-2,
#content .text-light :is(h1,h2,h3,h4,h5,h6) .id-color-2 {
	color: var(--cc-brass-lift);
}

/* Captions, attributions and timestamps — the one step down, used sparingly. */
.cc-cta__note,
.ab-quote__attrib,
.cc-hero__meta,
.text-light .cc-muted {
	color: var(--cc-on-dark-mut);
}

/*
 * Inline colours pasted from Word or the classic editor.
 *
 * constructco_clean_editor_html() strips these server-side; this is the
 * backstop for anything already cached or arriving through a path the filter
 * does not cover. !important is unavoidable — an inline style attribute wins
 * over every selector without it.
 */
#content [style*="color: black"],
#content [style*="color:black"],
#content [style*="color: #000"],
#content [style*="color:#000"] {
	color: var(--cc-on-light) !important;
}

.text-light [style*="color: black"],
.text-light [style*="color:black"],
.cc-cta [style*="color: black"],
.cc-cta [style*="color:black"] {
	color: var(--cc-on-dark) !important;
}


/* ==========================================================================
   6. EDITORIAL PROSE

   Two faults on the service, location, market and about articles.

   (a) Paragraph gaps read as smaller than line gaps. `.copy-measure p` set
       margin-bottom:16px at (0,1,1), which outranked the sitewide
       `:where(#content) p { margin-bottom: 1.75rem }` at (0,0,1). With
       line-height 1.75 on 16px copy, lines inside a paragraph sat 28px apart
       and the paragraphs sat 16px apart — so the breaks disappeared.

   (b) Lists fell back to the browser's black discs anywhere outside
       .svc-content, which already had the brass square. That covered the
       service articles and nothing else: insights posts, location and market
       bodies, about topics and plain pages all showed default bullets.
   ========================================================================== */

/* -- (a) paragraph rhythm ---------------------------------------------------
   Gap must exceed the leading or it does not read as a break. 1.75rem = 28px
   against a 28px line box. */
#content .copy-measure p,
#content .cc-prose p {
	margin-bottom: 1rem;
}

.copy-measure > *:last-child,
.cc-prose > *:last-child { margin-bottom: 0; }

/* A WYSIWYG field returns block content, so its container is a div. These are
   the same rules the article measure gets — one set, two containers. */
#content .cc-prose :is(h2, h3, h4) {
	margin-top: var(--cc-space-lg);
	margin-bottom: var(--cc-space-xs);
}

#content .cc-prose > :is(h2, h3, h4):first-child { margin-top: 0; }

/* More space above a heading than below it — the heading belongs to the text
   that follows, not the text it interrupts. */
.copy-measure :is(h2, h3, h4) {
	margin-top: var(--cc-space-lg);
	margin-bottom: var(--cc-space-xs);
}

.copy-measure > :is(h2, h3, h4):first-child { margin-top: 0; }

/* A bolded lead-in line labels the list under it; keep them together. */
.copy-measure p:has(> strong:only-child) {
	margin-bottom: var(--cc-space-xs);
	color: var(--cc-on-light);
	font-weight: 600;
}

/*
 * Group label above a list.
 *
 * constructco_promote_lead_headings() turns an editor's bold-only line into a
 * real h4. Spacing is the point of the styling: the label belongs to the list
 * under it, so it sits close to that list and well clear of the paragraph
 * above. Brass letter-spaced caps would compete with the section eyebrows, so
 * this stays sentence case in the title colour and earns its weight from the
 * short rule beside it.
 */
#content .cc-subhead {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: var(--cc-space-md) 0 var(--cc-space-xs);
	font-size: var(--cc-h5);
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0;
	color: var(--cc-on-light);
}

#content .cc-subhead::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: var(--cc-hairline);
}

#content .copy-measure > .cc-subhead:first-child,
#content .cc-prose > .cc-subhead:first-child { margin-top: 0; }

/* On a centred block the rule either side would read as a divider rather than
   a label, so it is dropped and the label centres with its copy. */
#content .text-center .cc-subhead,
#content .hero-bottom-area .cc-subhead {
	justify-content: center;
	margin-top: 0;
}

#content .text-center .cc-subhead::after,
#content .hero-bottom-area .cc-subhead::after { display: none; }

#content .text-light .cc-subhead { color: var(--cc-on-accent); }

/* -- (b) brand bullets -------------------------------------------------------
   The brass square from .svc-content, promoted so every article body shares
   it. Scoped to .copy-measure and the WYSIWYG wrappers so it cannot reach the
   navigation or card lists, which draw their own markers. */
.copy-measure ul,
.cc-prose ul {
	list-style: none;
	margin: 0 0 1.75rem;
	padding: 0;
}

.copy-measure ul li,
.cc-prose ul li {
	position: relative;
	margin: 0 0 .55rem;
	padding-left: 22px;
	line-height: 1.7;
	list-style: none;
}

.copy-measure ul li::before,
.cc-prose ul li::before {
	content: "";
	position: absolute;
	left: 0;
	/* Aligned to the cap height of the first line, not the line box, so the
	   marker sits with the text rather than above it. */
	top: .62em;
	width: 6px;
	height: 6px;
	background: var(--cc-brass);
}

/* Numbered lists keep their numerals, in brass, on the same indent. */
.copy-measure ol,
.cc-prose ol {
	list-style: none;
	counter-reset: cc-li;
	margin: 0 0 1.75rem;
	padding: 0;
}

.copy-measure ol li,
.cc-prose ol li {
	position: relative;
	counter-increment: cc-li;
	margin: 0 0 .55rem;
	padding-left: 30px;
	line-height: 1.7;
}

.copy-measure ol li::before,
.cc-prose ol li::before {
	content: counter(cc-li) ".";
	position: absolute;
	left: 0;
	top: 0;
	font-family: var(--title-font);
	font-weight: 600;
	color: var(--cc-brass);
}

/* Nested lists step in and drop to a hollow marker so the level is visible. */
.copy-measure li > ul,
.cc-prose li > ul {
	margin: .55rem 0 0;
	padding-left: 4px;
}

.copy-measure li > ul > li::before,
.cc-prose li > ul > li::before {
	background: transparent;
	border: 1px solid var(--cc-brass);
}

/* On dark grounds the marker takes the lifted brass, like the accent does. */
.text-light .copy-measure ul li::before,
.cc-cta .copy-measure ul li::before { background: var(--cc-brass-lift); }

.text-light .copy-measure ol li::before,
.cc-cta .copy-measure ol li::before { color: var(--cc-brass-lift); }

/*
 * Lists that the editor typed as bullet characters rather than as a list.
 *
 * constructco_bullets_to_list() converts the common `• item<br>• item` shape
 * into a real <ul> server-side and tags it, so it gets the markers above and
 * the semantics a screen reader needs. This class is that tag.
 */
ul.cc-list--recovered {
	list-style: none;
	margin: 0 0 1.75rem;
	padding: 0;
}

ul.cc-list--recovered > li {
	position: relative;
	margin: 0 0 .55rem;
	padding-left: 22px;
	line-height: 1.7;
	list-style: none;
}

ul.cc-list--recovered > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .62em;
	width: 6px;
	height: 6px;
	background: var(--cc-brass);
}

.text-light ul.cc-list--recovered > li::before,
.cc-cta ul.cc-list--recovered > li::before { background: var(--cc-brass-lift); }

/* The service-page list keeps its two-column schedule, which the grid below
   restates now that the base list is no longer indented by padding. */
.svc-content .copy-measure ul {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(245px, 1fr));
	gap: 0;
	border-top: 1px solid var(--cc-tint);
}

.svc-content .copy-measure ul li {
	margin: 0;
	padding: 11px 18px 11px 22px;
	border-bottom: 1px solid var(--cc-tint);
	font-size: var(--cc-small);
	line-height: 1.6;
}

.svc-content .copy-measure ul li::before { top: 18px; }

@media (max-width: 575px) {
	.svc-content .copy-measure ul { grid-template-columns: 1fr; }
}


/* ==========================================================================
   7. HOVER CARDS

   Where a card reveals copy over its own photograph, the copy was competing
   with whatever happened to sit under it — a bright concrete pour in one card,
   a dark switchboard in the next — so the same treatment was readable on some
   cards and not on others.

   The engineering cards did carry a scrim, but it ran `transparent` at the top
   to 40% at 60% height, and the copy sits in the upper two thirds. Over the
   part of the image the text actually covers, it was doing almost nothing.

   The scrim below belongs to the reveal panel rather than to the card, which
   means it fades in with the copy it is protecting, needs no `:has()`, and
   cannot be defeated by whatever the photograph is doing. Opacity is set so
   white copy holds 4.5:1 over a fully white photograph: 0.86 of #2E2E22 over
   white leaves L*≈0.055, which is 15.4:1 against white text.

   `.cc-hovercard__reveal` is the shared hook. The theme's older `.hover` +
   `.hover-op-1` pair is covered too, since that is what the legacy card grids
   use.
   ========================================================================== */

.cc-hovercard {
	position: relative;
	isolation: isolate;
}

/*
 * The scrim.
 *
 * Weighted toward the bottom, where the label and the call to action sit, but
 * never fully transparent at the top — the previous gradient's mistake. It
 * tints with the brand olive rather than neutral black, so a hovered card still
 * belongs to the page.
 */
.cc-hovercard__reveal,
.hover .hover-op-1 {
	background-image: linear-gradient(
		180deg,
		rgba(var(--primary-color-rgb), .62) 0%,
		rgba(var(--primary-color-rgb), .82) 45%,
		rgba(var(--primary-color-rgb), .93) 100%
	);
}

/* Anything inside the reveal is on a dark ground and takes the dark ground's
   colours. Stated here as well as in section 5 because a reveal panel is not
   inside a `.text-light` section — the card is on a light band. */
.cc-hovercard__reveal,
#content .cc-hovercard__reveal p,
#content .cc-hovercard__reveal li,
#content .hover .hover-op-1 p {
	color: var(--cc-on-dark);
}

#content .cc-hovercard__reveal :is(h1,h2,h3,h4,h5,h6),
#content .hover .hover-op-1 :is(h1,h2,h3,h4,h5,h6) {
	color: var(--cc-on-accent);
}

#content .cc-hovercard__reveal .cc-accent,
#content .cc-hovercard__reveal .id-color-2 {
	color: var(--cc-brass-lift);
}

/* Keyboard parity: the reveal has to appear on focus too, or the copy and the
   link inside it are reachable by tab and invisible while focused. */
.cc-hovercard:hover .cc-hovercard__reveal,
.cc-hovercard:focus-within .cc-hovercard__reveal {
	opacity: 1;
	transform: none;
}

.cc-hovercard:focus-within {
	outline: 2px solid var(--cc-brass);
	outline-offset: 3px;
}

/*
 * Legacy overlay div. `.abs.bg-color.hover-op-1` is an empty element the older
 * card grids place under the text purely to darken the image; it was a flat
 * fill of the brand olive at full opacity, which hid the photograph completely
 * on hover. The gradient keeps the image legible under the copy.
 */
.hover .abs.bg-color.hover-op-1 {
	background-color: transparent;
	background-image: linear-gradient(
		180deg,
		rgba(var(--primary-color-rgb), .62) 0%,
		rgba(var(--primary-color-rgb), .93) 100%
	);
}

@media (prefers-reduced-motion: reduce) {
	.cc-hovercard__reveal { transition: opacity .01ms linear !important; transform: none !important; }
}

/*
 * Touch has no hover. Rather than leaving the copy unreachable on a phone, the
 * reveal and its scrim are simply always on below the pointer breakpoint.
 */
@media (hover: none) {
	.cc-hovercard__reveal,
	.hover .hover-op-1 { opacity: 1; transform: none; }

	.hover .hover-op-0 { opacity: 0; }
}


/* ==========================================================================
   8. ABOUT TOPIC CONTENT

   The About tabs all arrive from ACF in one shape — a heading, a lead-in
   sentence, a list, sometimes a closing note — and were all rendered the same
   way: six identical cards in a two-column grid, each holding a two-column
   bulleted list. That is the "wall of bullets" this section replaces.

   The renderer (inc/about-sections.php) now sorts the content into three
   shapes and this file gives each one a form:

     statement   heading + a sentence, no list   ->  card row      (.cc-stmts)
     capability  heading + lead + list           ->  spec row      (.cc-cap)
     sequence    the same, but ordered           ->  disclosures   (unchanged)

   Inside a capability row the list is sorted again: items that are labels
   ("Planned early", "JHA integration") become chips, items that are sentences
   stay prose. Setting both as one bulleted grid is what made the pages
   unreadable — the labels got a column each and acres of gap, the sentences
   got half a column and wrapped to three lines.
   ========================================================================== */

/* ------------------------------------------------------------- Statements */

/*
 * Mission / Vision / Purpose, and the closing statement most tabs end on.
 * These previously had no container at all: a bare heading and one sentence
 * adrift in the band.
 */
/* Stacked rows, not a card grid: three boxes side by side left each statement
   on four short lines while the band ran the full width. */
.cc-stmts {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--cc-space-sm);
	margin: var(--cc-space-md) 0;
}

/* One statement in a three-up grid reads as two missing cards. */
.cc-stmts--solo { grid-template-columns: minmax(0, 1fr); }

.cc-stmt {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 0 0 var(--cc-space-sm);
	background: transparent;
	border: 0;
}

/* No separator here: each title already carries the heading rule (the hairline
   with the brass dash), and a second line 8px above it read as a double border. */
.cc-stmt + .cc-stmt {
	padding-top: var(--cc-space-sm);
}

/* The brass rule sits on the title itself (see the heading rule); a second one
   on the row repeated the same mark 8px above it. */

#content .cc-stmt__title {
	margin: 10px 0 10px;
	font-size: var(--cc-h3);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -.005em;
	color: var(--cc-on-light);
}

#content .cc-stmt__body p {
	margin: 0;
	font-size: var(--cc-small);
	line-height: 1.7;
	max-width: none;
}

#content .cc-stmt__body p + p { margin-top: .75rem; }


/* ------------------------------------------------------ Capability groups */

/*
 * A disclosure list, not six open blocks.
 *
 * Rendered open, six groups of heading + lead + list are six of the same thing
 * down the page — that stayed true through a card grid and through the spec-row
 * layout that replaced it, because the repetition was never the container's
 * fault. Collapsed, the page is a short index of group names and the reader
 * opens the one they came for.
 *
 * This is the pattern How We Build already used; it now covers every About
 * topic, so the section has one interaction rather than two.
 */
/*
 * Hairlines go between the rows, and nowhere else.
 *
 * A border-top on the list plus a border-bottom on every row enclosed the whole
 * block, which put a rule above the first row and below the last. Where the
 * list is the first thing in the body — Operating Standards, How We Build — the
 * top one drew a line across the page with nothing above it to separate from,
 * and read as a stray double rule next to the first row's own border.
 */
.cc-caps:not(.cc-caps--process) {
	display: block;
	grid-template-columns: none;
	margin: var(--cc-space-md) 0;
	border-top: 1px solid var(--cc-hairline);
}

.cc-caps:not(.cc-caps--process) .cc-cap {
	display: block;
	min-width: 0;
	padding: 0;
	background: none;
	border: 0;
	border-bottom: 1px solid var(--cc-hairline);
	transition: background var(--cc-fast) var(--cc-ease);
}

/* The open row is the one being read: it keeps a tint and a brass edge so the
   panel below it belongs to a visible parent. */
.cc-caps:not(.cc-caps--process) .cc-cap--drop[open] {
	background: rgba(var(--secondary-color-rgb), .05);
	box-shadow: inset 2px 0 0 var(--cc-brass);
}

/* The last row closes the list; it does not need a rule under it. */
.cc-caps:not(.cc-caps--process) .cc-cap:last-child {
	border-bottom: 0;
}

/* The whole row is the control, so it gets the full width and a generous
   target — 60px tall, well over the 44px minimum. */
#content .about-topic .cc-cap__summary,
#content .cc-caps .cc-cap__summary {
	display: flex;
	align-items: center;
	gap: var(--cc-space-sm);
	width: 100%;
	/* Padded and pulled back out, so the hover tint covers the whole row while the
	   title stays on the same left edge as the copy below it. */
	padding: var(--cc-space-sm) 18px;
	cursor: pointer;
	list-style: none;
	transition: background var(--cc-fast) var(--cc-ease), color var(--cc-fast) var(--cc-ease);
}

/* The row has to look pressable. Without a hover ground and a boxed chevron
   these read as seven headings with a stray glyph at the end of each. */
#content .cc-caps .cc-cap__summary:hover {
	background: rgba(var(--primary-color-rgb), .04);
}

#content .cc-caps .cc-cap__summary::-webkit-details-marker { display: none; }
#content .cc-caps .cc-cap__summary::marker { content: ""; }

/* Title takes the room, chevron is pushed to the end. */
#content .cc-caps .cc-cap__title {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	font-size: var(--cc-h3);
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: -.01em;
	color: var(--cc-on-light);
	transition: color var(--cc-fast) var(--cc-ease);
}

#content .cc-caps .cc-cap__summary:hover .cc-cap__title { color: var(--cc-brass); }

/*
 * Inside the accordion the title drops the standard heading rule (hairline plus
 * brass dash). The row already has a divider, and the two sat 24px apart, which
 * is the double-line the page had before. Brass stays on the chevron and on the
 * open row's left edge.
 */
#content .cc-caps .cc-cap__title {
	padding: 0;
	border-top: 0;
}

#content .cc-caps .cc-cap__title::before { content: none; }

#content .cc-caps .cc-cap__chev {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: 1px solid var(--cc-brass-line);
	color: var(--cc-brass);
	transition: transform var(--cc-med) var(--cc-ease),
	            background var(--cc-fast) var(--cc-ease),
	            border-color var(--cc-fast) var(--cc-ease);
}

#content .cc-caps .cc-cap__chev svg { width: 1.25rem; height: 1.25rem; }

#content .cc-caps .cc-cap__summary:hover .cc-cap__chev {
	background: var(--cc-brass);
	border-color: var(--cc-brass);
	color: #ffffff;
}

#content .cc-caps .cc-cap--drop[open] .cc-cap__chev {
	transform: rotate(180deg);
	background: var(--cc-brass);
	border-color: var(--cc-brass);
	color: #ffffff;
}

#content .cc-caps .cc-cap__summary:focus-visible {
	outline: 2px solid var(--cc-brass);
	outline-offset: 4px;
}

/*
 * The panel.
 *
 * Indented to the width of the chevron column so an open panel reads as
 * belonging to the row above it rather than as the next row.
 */
#content .cc-caps:not(.cc-caps--process) .cc-cap__panel {
	padding: 0 18px var(--cc-space-sm);
	max-width: none;
}

#content .cc-cap__lead p {
	margin: 0 0 var(--cc-space-xs);
	font-size: var(--cc-small);
	line-height: 1.65;
	max-width: none;
}

/* A second lead inside one group needs air above it, but not the first. */
#content .cc-cap__chips + .cc-cap__lead,
#content .cc-cap__list + .cc-cap__lead { margin-top: var(--cc-space-sm); }

/* Closing note: the sentence that says what the list adds up to. Quieter than
   the list, separated by a rule so it does not read as another item. */
.cc-cap__note {
	margin-top: var(--cc-space-xs);
	padding-top: var(--cc-space-xs);
	border-top: 1px solid var(--cc-hairline);
	background: none;
}

#content .cc-cap__note p {
	margin: 0;
	font-size: var(--cc-small);
	line-height: 1.6;
	color: var(--cc-on-light-mut);
	max-width: none;
}

@media (prefers-reduced-motion: reduce) {
	#content .cc-caps .cc-cap__chev { transition: none; }
}


/* ------------------------------------------------------------------ Chips */

/*
 * Items that are labels rather than sentences.
 *
 * The pill is the theme's own device — the homepage and the location pages
 * already use `.badge` for exactly this — so this is the existing component
 * applied where it belongs, not a new one. A flowing row fits eight labels in
 * the space the two-column bulleted list used for three.
 */
#content .cc-cap__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 var(--cc-space-xs);
	padding: 0;
	list-style: none;
	border: 0;
}

#content .cc-cap__chips li {
	margin: 0;
	padding: 7px 13px;
	font-size: var(--cc-micro);
	font-weight: 500;
	line-height: 1.35;
	letter-spacing: 0;
	color: var(--cc-on-light);
	background: var(--bg-light);
	border: 1px solid var(--cc-brass-line);
	list-style: none;
}

/* No marker: the pill is the marker. */
#content .cc-cap__chips li::before { display: none; content: none; }

#content .cc-cap__chips li a { color: inherit; text-decoration: none; }

/* --------------------------------------------------------- Prose lists */

/* Items that are full sentences: one column, full measure, brass marker. The
   two-column grid they used to sit in wrapped every one of them to three
   lines. */
#content .cc-caps .cc-cap__list {
	display: block;
	margin: 0 0 var(--cc-space-xs);
	padding: 0;
	border: 0;
	list-style: none;
}

#content .cc-caps .cc-cap__list li {
	position: relative;
	margin: 0 0 .5rem;
	padding: 0 0 0 20px;
	font-size: var(--cc-small);
	line-height: 1.65;
	border: 0;
	list-style: none;
}

#content .cc-caps .cc-cap__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .62em;
	width: 6px;
	height: 6px;
	background: var(--cc-brass);
}

/* Only the list inside a stage card picks up the chip treatment, which is
   handled by the shared rules above. */
#content .cc-caps--process .cc-cap__chips { margin-bottom: 0; }

/* --------------------------------------------- Delivery stages as cards */

/*
 * Four stages, four cards, all open. The spine-and-index timeline is gone with
 * the disclosures: a two-up grid of cards shows the whole sequence at once,
 * which is what a four-step process is for.
 */
#content .cc-caps--process {
	display: grid;
	/* Four across: one column per stage, so the sequence reads left to right. */
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--cc-space-sm);
	margin: var(--cc-space-md) 0;
	padding-left: 0;
	border-left: 0;
}

#content .cc-caps--process .cc-cap {
	display: flex;
	flex-direction: column;
	padding: var(--cc-space-sm);
	background: var(--cc-surface);
	border: 1px solid var(--cc-hairline);
	transition: border-color var(--cc-fast) var(--cc-ease), box-shadow var(--cc-fast) var(--cc-ease);
}

#content .cc-caps--process .cc-cap:hover {
	border-color: var(--cc-brass-line);
	box-shadow: var(--cc-shadow);
}

/* Number and title on one line: the index reads as part of the card now that
   there is no spine for it to sit on. */
#content .cc-caps--process .cc-cap__head {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: var(--cc-space-xs);
}

#content .cc-caps--process .cc-cap__step {
	position: static;
	flex: 0 0 auto;
	transform: none;
	width: 34px;
	height: 34px;
	background: var(--cc-brass);
	color: #ffffff;
}

#content .cc-caps--process .cc-cap__title {
	margin: 0;
	font-size: var(--cc-h3);
	font-weight: 500;
	line-height: 1.25;
}

#content .cc-caps--process .cc-cap__panel {
	padding: 0;
	max-width: none;
}

/*
 * Inside a stage card the chips become bullets. Seven boxes in a 326px column
 * wrapped to five ragged rows; a bullet list is one column of short lines, which
 * is what these items are.
 */
#content .cc-caps--process .cc-cap__chips {
	display: block;
	margin: 0;
	padding: 0;
	list-style: none;
}

#content .cc-caps--process .cc-cap__chips li {
	position: relative;
	display: block;
	margin: 0 0 .5rem;
	padding: 0 0 0 20px;
	font-size: var(--cc-small);
	line-height: 1.65;
	background: none;
	border: 0;
	list-style: none;
}

#content .cc-caps--process .cc-cap__chips li:last-child { margin-bottom: 0; }

#content .cc-caps--process .cc-cap__chips li::before {
	content: "";
	/* The chip rule above hides this marker; the bullet needs it back. */
	display: block;
	position: absolute;
	left: 0;
	top: .62em;
	width: 6px;
	height: 6px;
	background: var(--cc-brass);
}

@media (max-width: 1199px) {
	#content .cc-caps--process { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 575px) {
	#content .cc-caps--process { grid-template-columns: minmax(0, 1fr); }
}

/*
 * A capability title is one size whichever form it takes.
 *
 * cc-enhancements.css had pinned the process variant to 20px/700 to get the
 * brass over the large-text contrast bar. --cc-h3 is 24px, which clears the
 * same bar with room to spare (24px is large text at any weight), so the
 * exception is no longer needed and the two forms stop disagreeing.
 */
#content .cc-caps--process .cc-cap__title {
	font-size: var(--cc-h3);
	font-weight: 500;
	line-height: 1.25;
}

/* ==========================================================================
   8. BAND SPACE IS OWNED BY THE BAND

   A section already pads itself with --cc-band-y (129.6px at desktop). Where
   the first block inside it also carried top padding — .svcline at 72px, the
   centred .px-5 panel on location pages at 60px, Bootstrap's .py-5/.pt-5 at
   48px — the two stacked and pushed the first line of copy 190-198px below the
   section edge. Doubling it that way reads as a gap, not as rhythm.

   The band keeps its padding; the first block inside gives up its own, and the
   last block gives up its bottom in the same way. Blocks in the middle keep
   theirs, because there the padding is separating two things, not repeating the
   band edge.
   ========================================================================== */

#content > section:not(#subheader):not(.cc-hero) .svcline:first-child {
	padding-top: 0;
	border-top: 0;
}

#content > section:not(#subheader):not(.cc-hero) .svcline:last-child {
	padding-bottom: 0;
}

#content .p-location .about .px-5,
.p-location .about .px-5 {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

/* Bootstrap's vertical utilities where they land on the first or last block of
   a band. Scoped to the band's own container so a .py-5 nested deeper — where
   it is separating two blocks — is untouched. */
#content > section:not(#subheader):not(.cc-hero) > .container.py-5,
#content > section:not(#subheader):not(.cc-hero) > .container.pt-5,
#content > section:not(#subheader):not(.cc-hero) > .container-fluid.py-5,
#content > section:not(#subheader):not(.cc-hero) > .container-fluid.pt-5,
#content > section:not(#subheader):not(.cc-hero) > .container > .row.py-5:first-child,
#content > section:not(#subheader):not(.cc-hero) > .container > .row.pt-5:first-child {
	padding-top: 0;
}

#content > section:not(#subheader):not(.cc-hero) > .container.py-5,
#content > section:not(#subheader):not(.cc-hero) > .container.pb-5,
#content > section:not(#subheader):not(.cc-hero) > .container-fluid.py-5,
#content > section:not(#subheader):not(.cc-hero) > .container-fluid.pb-5 {
	padding-bottom: 0;
}

/* Same rule for margins: the first block inside a band's container starts at the
   band's padding edge, not 48px below it. */
/* .row is excluded: Bootstrap's gutter puts a negative top margin on the row to
   cancel the padding it adds to each column. Zeroing it uncancels the gutter and
   pushes every first row 30px down. */
#content > section:not(#subheader):not(.cc-hero) > .container > *:first-child:not(.row),
#content > section:not(#subheader):not(.cc-hero) > .container-fluid > *:first-child:not(.row) {
	margin-top: 0;
}

/* --------------------------------------------- Mobile credentials line */

/*
 * The licence strip moves into the menu on phones (see constructco_render_mobile_nav).
 * Two copies would otherwise show: the strip above the header and the menu row.
 */
@media only screen and (max-width: 767px) {
	#mobiletopbar { display: none !important; }

	/*
	 * The strip used to sit above the fixed header, so the theme pushed #content
	 * down by 50px and parked the header at 62px to clear it. With the strip gone
	 * both offsets became a white band across the top of the page.
	 */
	/* !important matches style.css:21715, which sets the 50px the same way. */
	#content { margin-top: 0 !important; }
	header#mainheader,
	header.header-mobile,
	header.transparent { top: 0; }

	/*
	 * Full-height hero: the video fills the phone screen and the copy sits at the
	 * foot of it. svh is the viewport minus the browser's own chrome, so the
	 * bottom row of buttons is not hidden under it; vh is the fallback.
	 */
	#content .cc-hero {
		min-height: 100vh;
		min-height: 100svh;
	}
}

#content .cc-menu-cred,
.cc-menu-cred {
	padding: 18px 0 4px;
	border-top: 1px solid rgba(255, 255, 255, .18);
	font-size: 13px;
	line-height: 1.5;
	letter-spacing: .01em;
	color: rgba(255, 255, 255, .72);
}

/* ------------------------------------------------- Mobile hero, bottom-set */

/*
 * On a phone the hero fills the viewport and the copy sits at the foot of it.
 * The frame around that copy should read as even: the same 15px at the bottom as
 * the shell already leaves left and right, rather than 96px of stacked padding.
 */
@media only screen and (max-width: 767px) {
	#content .cc-hero {
		padding-bottom: 0;
	}

	#content .cc-hero__inner {
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		padding-bottom: 15px;
	}

	#content .cc-hero__inner > *:last-child,
	#content .cc-hero__grid > *:last-child > *:last-child {
		margin-bottom: 0;
	}
}