/* ==========================================================================
   ConstructCo — appearance / readability enhancements
   Loaded last, after pages.css, so it can override the theme without editing
   style.css or any vendor sheet. Delete this file, its <link> in header.php
   and the <script> in footer.php to revert everything in it.

   Rules for this file:
     - no copy changes of any kind (text, alt, ARIA, meta)
     - no new colours; only the palette custom properties from
       css/colors/scheme-01.css
     - no border-radius; components.css squares every corner sitewide and its
       comment records that as an explicit instruction
   ========================================================================== */


/* --------------------------------------------------------------------------
   Integrated Construction Delivery — image cards with a drop-down panel

   Was: three columns of image plus heading plus three paragraphs, all visible
   at once — 204 words competing for attention.

   Now: each card shows its image and heading only. Hovering, focusing or
   tapping drops a panel down beneath the image carrying the longer copy. The
   panel is the same tone as the section background and is separated from it by
   a shadow rather than by a colour change.
   -------------------------------------------------------------------------- */

/* Section intro ---------------------------------------------------------- */

/* The intro ran 147 characters per line at 1280px. Comfortable measure is
   45-75, so it is capped and stepped up in size to give the section a clear
   starting point above the card copy. Left-aligned rather than centred:
   components.css overrides Bootstrap's .text-center sitewide. */
.icd-section .icd-lead {
  max-width: 66ch;
  font-size: 1.1875rem;   /* 19px against the 16px card copy */
  line-height: 1.65;
}

.icd-section > .container > .row > .col-md-12 { margin-bottom: 2rem; }


/* The grid --------------------------------------------------------------- */

/* Cards sit at the top of the row rather than stretching, so an open card
   grows downward on its own without dragging the other two with it. The
   reserved height below keeps the page from reflowing when one opens. */
.icd-grid { align-items: flex-start; }

.icd-card {
  position: relative;
  display: block;
  color: inherit;
  outline: none;
}

/* The photographs are 960x460 — a 2.09:1 letterbox. Displaying them at that
   ratio means the browser only ever scales them down (about 424px wide in a
   three-column row, and still inside the source at 2x), so they stay sharp and
   nothing is cropped or stretched. */
.icd-card__media {
  display: block;
  width: 100%;
  aspect-ratio: 96 / 46;
  object-fit: cover;
  object-position: center;
}


/* The drop-down panel ---------------------------------------------------- */

/* Same tone as the section background, per the brand palette — the shadow is
   what separates it, not a second colour. */
.icd-card__panel {
  position: relative;
  z-index: 1;
  background-color: var(--bg-dark-1);
  padding: 1.25rem 1.25rem 1.5rem;
  box-shadow: 0 1.125rem 2.25rem -0.875rem rgba(0, 0, 0, .6);
  transition: box-shadow .4s cubic-bezier(.22, .61, .36, 1);
}

.icd-card:hover .icd-card__panel,
.icd-card:focus-visible .icd-card__panel,
.icd-card.is-open .icd-card__panel {
  box-shadow: 0 1.75rem 3.25rem -0.875rem rgba(0, 0, 0, .7);
}

.icd-card:focus-visible .icd-card__panel {
  outline: 2px solid var(--secondary-color);
  outline-offset: -2px;
}

/* 20px/700 is 15pt bold, over WCAG's 14pt-bold bar for "large text", so the
   3:1 threshold applies rather than 4.5:1. The gold measures 4.04:1 on this
   ground, so the heading passes on size and weight rather than on a palette
   change. min-height holds two lines in every card, so the three panels line
   up whether the heading wraps or not. */
.icd-card__title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  min-height: 2.6em;
}


/* The reveal ------------------------------------------------------------- */

/* 0fr -> 1fr animates to the copy's own height without that height having to
   be known in advance, which a max-height transition would require. */
.icd-card__reveal {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .45s cubic-bezier(.22, .61, .36, 1);
}

.icd-card:hover .icd-card__reveal,
.icd-card:focus-within .icd-card__reveal,
.icd-card.is-open .icd-card__reveal { grid-template-rows: 1fr; }

.icd-card__clip {
  overflow: hidden;
  min-height: 0;   /* required, or the grid track will not collapse to zero */
}

.icd-card__text {
  padding-top: 1rem;
  opacity: 0;
  transform: translateY(-.375rem);
  transition: opacity .3s ease, transform .35s ease;
}

.icd-card:hover .icd-card__text,
.icd-card:focus-within .icd-card__text,
.icd-card.is-open .icd-card__text {
  opacity: 1;
  transform: translateY(0);
  transition-delay: .1s;
}

/* Paragraph gap was 20px against a 27.2px line-height — tighter than the line
   spacing itself, so separate paragraphs fused into one block. Raising the gap
   above the line-height is what makes them read as distinct chunks. */
.icd-card__text p {
  margin-bottom: 1.375rem;
  color: var(--dark-body-font-color);
  line-height: 1.7;
}

.icd-card__text p:last-child { margin-bottom: 0; }


/* Height ----------------------------------------------------------------- */

/* No reserved height. The section is sized by whichever card is open and
   returns to the closed height when the pointer leaves, so the background
   follows the interaction instead of holding a shape nobody is looking at.

   There was a min-height here fed by a measured --icd-reserve, meant to stop
   the page moving on hover. It ratcheted: an open card taller than the reserve
   grew the grid, which fired the ResizeObserver that set the reserve, which
   re-measured the already-open card and counted its copy twice. The section
   then stayed stretched after the card closed. */
.icd-grid { min-height: 0; }


/* Two-up and stacked ----------------------------------------------------- */

@media (max-width: 991.98px) {
  /* Two columns, then one. Reflow on hover is harmless here because touch
     opens a card on tap rather than on pointer movement. */
  .icd-card__title { font-size: 1.1875rem; min-height: 0; }
  .icd-card__panel { padding: 1.125rem 1.125rem 1.375rem; }
}

@media (max-width: 575.98px) {
  .icd-section .icd-lead { font-size: 1.0625rem; }
}


/* Motion ----------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .icd-card__reveal,
  .icd-card__text,
  .icd-card__panel { transition: none; }
}


/* --------------------------------------------------------------------------
   "Introducing ConstructCo" heading

   The span carried Bootstrap's .d-block, which forced "ConstructCo" onto its
   own line. It is .d-inline now — matching how the other headings in this
   theme mark up their coloured second half — so the two words read across.

   Sized with clamp rather than a flat value: at one line the heading is much
   wider than it was stacked, and a fixed size large enough to look right at
   1440 would wrap again at 992. This scales between the two.
   -------------------------------------------------------------------------- */
/* The floor is 28px, not 32px: at exactly 992px the two-column layout gives the
   heading only 451px and it needs 476px at 32px, so a higher floor pushed it
   back onto two lines at the one width where the column is narrowest. */
.cc-introducing {
  font-size: var(--cc-h2);   /* 28px -> 42px, was a flat 36px */
  line-height: 1.14;
  letter-spacing: -0.01em;
}


/* --------------------------------------------------------------------------
   Primary nav dropdowns — hover tolerance
   -------------------------------------------------------------------------- */

/* The card closed the instant the pointer left the item. It is centred under a
   narrow link, so it is wider than its own hover target and a diagonal move
   towards an outer entry crosses dead space on the way. Two fixes: the card
   lingers briefly on the way out, and an invisible bridge spans the full card
   width across the gap above it.

   The delay sits on the hidden state, so it applies on the way out only —
   opening stays immediate. */
#mainmenu .mega-menu {
  transition: opacity .2s ease .35s,
              transform .2s ease .35s,
              visibility .2s ease .35s;
}

#mainmenu .has-mega:hover > .mega-menu,
#mainmenu .has-mega:focus-within > .mega-menu {
  transition-delay: 0s;
}

/* Bridge. Full card width rather than just the caret, which was only 18px
   across, so the pointer can leave the link anywhere along the top edge. */
#mainmenu .mega-menu::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 1.25rem;
}


/* --------------------------------------------------------------------------
   About dropdown — one item per row, separated
   -------------------------------------------------------------------------- */

/* One straight column. The length rule in constructco_render_nav_card() already
   keeps About out of the two-column layout; this holds the single column even
   if an item is added later. */
#mainmenu .has-mega--about .nav-card__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-flow: row;
  grid-template-rows: none;
  gap: 0;
}

/* Every entry is its own row, divided by the theme's one hairline token, and
   tinted on hover so it reads as a section rather than a line of text. The
   negative inline margin pulls the hit area out to the card's padding edge, so
   the whole row is a target instead of just the words.

   :last-child drops the closing rule; the list would otherwise end on a line
   with nothing under it. About has no "All …" foot link, so the last entry is
   genuinely the last thing in the card. */
#mainmenu .has-mega--about .nav-card__link {
  padding: .75rem 1rem;
  margin-inline: -1rem;
  border-bottom: 1px solid var(--cc-border);
  transition: background-color .18s ease, color .18s ease;
}

#mainmenu .has-mega--about .nav-card__link:last-child {
  border-bottom: 0;
}

#mainmenu .has-mega--about .nav-card__link:hover,
#mainmenu .has-mega--about .nav-card__link:focus {
  background-color: rgba(var(--primary-color-rgb), .05);
}

/* Nothing wraps and nothing is cut: the card sizes to the longest label
   ("Leadership & Organizational Commitment") and only starts constraining at
   the viewport edge. */
#mainmenu .has-mega--about .nav-card__list { white-space: nowrap; }

#mainmenu .has-mega--about > .mega-menu {
  width: max-content;
  max-width: min(34rem, calc(100vw - 2.5rem));
}


/* --------------------------------------------------------------------------
   About topic pages — the topic is the whole page

   The sibling rail is gone from the template, so the copy has the full column.
   These rules make the title carry the weight the rail used to share, and give
   the body a comfortable measure now that nothing constrains it.
   -------------------------------------------------------------------------- */

/* No type overrides on the title. It inherits the theme h1 — 60px, weight 500,
   normal tracking, uppercase — which is exactly what the About page's own h1
   renders at, so the two read as the same page family. An earlier version set
   this to 800 with negative tracking; that was the one thing on these pages
   that came from nowhere in the design system. */
.about-topic__title {
  margin-bottom: 0;
}

/* .svc-layout is a 320px rail plus content. With the rail gone the grid
   collapses to the single content column, otherwise the plate lands in the
   rail's 320px track and comes out a third of its proper width.

   Two class names deep on purpose: components.css sets these columns again at
   `.about-page .svc-layout` inside a media query, and a single class loses to
   it however late this file loads.

   The cap holds the plate near the width it had beside the rail
   (1320 - 320 - 52 = 948px) instead of running the full container, and keeps
   it left-aligned under the title rather than floating mid-page. */
.about-page .svc-layout.about-topic__layout {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  max-width: 100rem;
}

/* The copy sits on the cream, not on a white plate.

   .svc-content paints a white document plate — background, hairline border,
   shadow and heavy padding. On the About page that plate was the tab panel,
   one component among prose that sat directly on the cream. A whole page of it
   reads as a different template, so it is unpainted here while the class stays
   for the card-grid rules that hang off it.

   Scoped to .about-topic: .svc-content is also the Services layout, which
   should keep its plate. */
.about-topic .svc-content {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

/* Prose matches the About page's body exactly: 16px at 1.7. .svc-content sets
   its lead paragraph to 17px, which was right for a tab panel opening under a
   rail but leaves these pages a size out of step with the page they belong to.

   The measure runs to 88 characters rather than the 68 it had. 68 left the
   opening paragraphs as a narrow column running down a page with most of its
   width unused; 88 spends that width and takes roughly a fifth off their
   height. It is past the 45-75 that reads most comfortably, so it is applied
   to these loose paragraphs only — the lead and the closing line after a list.
   The card lists below are already two-column and set their own width. */
.about-topic .copy-measure > p,
.about-topic .copy-measure > p:first-child {
  max-width: 88ch;
  font-size: 1rem;
  line-height: 1.7;
}

/* The heading sits between the banner and the copy, so it needs air above the
   paragraphs without pushing the section open. */
.about-topic__lede-title {
  margin-bottom: 1.25rem;
}

.about-topic {
  padding-top: 4.5rem;
  padding-bottom: 5rem;
}

@media (max-width: 575.98px) {
  .about-topic { padding-top: 3rem; padding-bottom: 3.5rem; }
}


/* --------------------------------------------------------------------------
   How We Build — stages read straight down

   The stage lists were two columns. components.css set that when these were
   tab panes, to stop a three-column auto-fill grid fragmenting the row
   separators inside a narrow card. The card is a full page now, so the reason
   is gone, and two columns fought the thing the numbered spine is there to
   show: that the stages are a sequence. One column per stage means the eye
   goes straight down 01 -> 02 -> 03 without tracking back up.

   The same single column already applied under 768px; this is that rule at
   every width.
   -------------------------------------------------------------------------- */
.about-topic .svc-content .copy-measure .cc-caps--process .cc-cap__list {
  grid-template-columns: minmax(0, 1fr);
  /* Sized to the content, not the container. The rows were running 910px while
     the longest entry measures 306px and the median 142px, so every separator
     trailed three to six times the length of the phrase above it. 30rem clears
     the longest with room and pulls the rules back into a list. */
  max-width: 30rem;
}


/* --------------------------------------------------------------------------
   Engineering Services — service cards

   Was: the title sat on top of the photograph in a blurred bar, and everything
   else appeared only on hover. Now the photograph is the top of the card and
   the title sits below it on its own surface, with an arrow marking the card
   as a destination. Square corners throughout, per the sitewide rule in
   components.css.

   The excerpt and "View Details" are unchanged and still revealed on hover —
   they are over the image only now, so the title stays readable underneath.
   -------------------------------------------------------------------------- */

.es-card {
  height: 100%;
  background-color: var(--cc-surface);
  box-shadow: 0 .75rem 1.75rem -.875rem rgba(0, 0, 0, .18);
  transition: box-shadow .35s cubic-bezier(.22, .61, .36, 1),
              transform .35s cubic-bezier(.22, .61, .36, 1);
}

.es-card:hover,
.es-card:focus-within {
  transform: translateY(-.25rem);
  box-shadow: 0 1.25rem 2.5rem -.875rem rgba(0, 0, 0, .28);
}

/* Column, full height, so every footer in a row lines up however many lines
   the title runs to. */
.es-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.es-card__link:focus-visible {
  outline: 2px solid var(--secondary-color);
  outline-offset: 2px;
}


/* Photograph ------------------------------------------------------------- */

/* 3:4 to match the reference. The sources are 1080x1080, so a portrait crop
   takes a quarter off the width and still downscales — sharp at 2x in a
   four-column row. */
.es-card__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 4;
}

.es-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform .6s cubic-bezier(.22, .61, .36, 1);
}

.es-card:hover .es-card__img,
.es-card:focus-within .es-card__img { transform: scale(1.05); }


/* Hover copy -------------------------------------------------------------- */

.es-card__reveal {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
  padding: 1.5rem 1.375rem;
  background-color: rgba(var(--bg-dark-1-rgb), .93);
  opacity: 0;
  transition: opacity .35s ease;
}

.es-card:hover .es-card__reveal,
.es-card:focus-within .es-card__reveal { opacity: 1; }

.es-card__reveal p {
  margin: 0;
  color: var(--dark-body-font-color);
  font-size: .9375rem;
  line-height: 1.65;
}

/* White, not brass. Brass measures 3.23:1 against this scrim and at 13px it is
   normal-size text, so it needs 4.5:1 — it fails. White gives 11:1, and it is
   also what this label was before: the theme sets .btn-line to #fff wherever it
   sits on a dark surface. Uppercase, tracked and underlined already mark it as
   the action without leaning on colour. */
.es-card__more {
  align-self: flex-start;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--bg-light);
  border-bottom: 1px solid rgba(255, 255, 255, .55);
  padding-bottom: .125rem;
}


/* Footer ------------------------------------------------------------------ */

.es-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex: 1 0 auto;
  padding: 1.125rem 1.25rem;
}

.es-card__title {
  margin: 0;
  font-size: 1rem;
  line-height: 1.35;
  color: var(--title-font-color);
}

/* Square, not the reference's circle: components.css squares every corner
   sitewide and the brief for this card was to keep sharp rectangles. */
.es-card__arrow {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2.375rem;
  height: 2.375rem;
  border: 1px solid var(--cc-border);
  color: var(--primary-color);
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

.es-card__arrow svg { width: 1.0625rem; height: 1.0625rem; }

.es-card:hover .es-card__arrow,
.es-card:focus-within .es-card__arrow {
  background-color: var(--secondary-color);
  border-color: var(--secondary-color);
  color: var(--bg-light);
}


@media (max-width: 575.98px) {
  .es-card__media { aspect-ratio: 4 / 3; }
  .es-card__foot { padding: 1rem 1rem; }
}


@media (prefers-reduced-motion: reduce) {
  .es-card,
  .es-card__img,
  .es-card__reveal,
  .es-card__arrow { transition: none; }
  .es-card:hover,
  .es-card:focus-within { transform: none; }
  .es-card:hover .es-card__img,
  .es-card:focus-within .es-card__img { transform: none; }
}


/* --------------------------------------------------------------------------
   Markets archive — intro prose

   The three market pages open with a lead set at 20px/500. The archive opened
   at 16px/400, which read as body copy rather than as the page's opening
   statement, and left the left column 179px shorter than the "Who We Work
   With" panel beside it — a block of empty cream halfway down the page.

   Matching the market pages' lead size fixes both: the intro carries the
   weight it should, and the extra lines close most of that gap.
   -------------------------------------------------------------------------- */
.mk-intro__lead p {

  font-weight: 500;
  line-height: 1.55;
  /* 103 characters a line before; 76 is about the most that still tracks
     comfortably, and it still runs nearly the full column. */
  max-width: 80ch;
}


/* --------------------------------------------------------------------------
   How We Build — each stage is a dropdown

   The stage heading is the control and the bullets are the panel. Built on
   <details>/<summary> in about-sections.php, so this is presentation only:
   the marker is removed, the row is laid out, and the chevron turns.
   -------------------------------------------------------------------------- */

.about-topic .cc-cap--drop { padding-bottom: 0; }

/*
 * Layout for this row now lives in css/cc-system.css section 8, where the
 * disclosure covers every About topic rather than only the process tabs.
 *
 * The `max-width: 30rem` that used to sit here is deliberately gone. It capped
 * the row at 480px so the chevron would land on the edge of the narrow list
 * below it. Now the row is the control for the whole group and spans the
 * column, so the cap only squeezed the titles — two of the six on Leadership
 * wrapped to a second line and the closed rows came out uneven.
 */
.about-topic .cc-cap__summary {
  cursor: pointer;
  list-style: none;                 /* Firefox */
}

/* Safari and Chrome draw their own triangle unless this is removed. */
.about-topic .cc-cap__summary::-webkit-details-marker { display: none; }
.about-topic .cc-cap__summary::marker { content: ""; }

.about-topic .cc-cap__summary:hover .cc-cap__title { color: var(--secondary-color); }

.about-topic .cc-cap__summary:focus-visible {
  outline: 2px solid var(--secondary-color);
  outline-offset: 3px;
}

/* The title carried a bottom margin for the list that used to sit under it;
   inside the summary that margin only pushed the row open. The panel spaces
   itself now. */
.about-topic .cc-cap--drop .cc-cap__title {
  margin: 0;
  flex: 1 1 auto;
  transition: color .2s ease;
}

.about-topic .cc-cap__chev {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--secondary-color);
  transition: transform .3s cubic-bezier(.22, .61, .36, 1);
}

.about-topic .cc-cap__chev svg { width: 1.125rem; height: 1.125rem; }

.about-topic .cc-cap--drop[open] .cc-cap__chev { transform: rotate(180deg); }

.about-topic .cc-cap__panel {
  padding-top: .25rem;
  padding-bottom: .75rem;
  animation: ccCapOpen .3s cubic-bezier(.22, .61, .36, 1) both;
}

@keyframes ccCapOpen {
  from { opacity: 0; transform: translateY(-.25rem); }
  to   { opacity: 1; transform: translateY(0); }
}

/* The index is absolutely placed against .cc-cap, which is the <details> now,
   so it needs to line up with the summary row rather than with a block of copy. */
.about-topic .cc-cap--drop .cc-cap__step { top: 1rem; }
.about-topic .cc-caps--process .cc-cap--drop:first-child .cc-cap__step { top: .375rem; }

@media (prefers-reduced-motion: reduce) {
  .about-topic .cc-cap__chev { transition: none; }
  .about-topic .cc-cap__panel { animation: none; }
}


/* --------------------------------------------------------------------------
   About topics — prev / next pager
   -------------------------------------------------------------------------- */

.about-topic__pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 2.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--cc-border);
}

/* .a-ico pads the right for the forward arrow the theme places there; the back
   arrow needs the mirror of that, and there is no left-hand equivalent in the
   theme's utilities. */
.about-topic__prev {
  position: relative;
  padding-left: 3.125rem !important;
}

.about-topic__prev .icofont-long-arrow-left {
  position: absolute;
  left: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
}

/* Forward is the primary move, so the next button keeps its solid fill and the
   back control is the outline of the pair. */
.about-topic__pager .btn-main:not(.btn-line) { margin-left: auto; }

@media (max-width: 575.98px) {
  .about-topic__pager { flex-direction: column; align-items: stretch; }
  .about-topic__pager .btn-main { text-align: center; }
  .about-topic__pager .btn-main:not(.btn-line) { margin-left: 0; }
}


/* ==========================================================================
   SITEWIDE READABILITY PASS

   Six measured problems, fixed here rather than in the theme so the whole set
   reverts by deleting this block. Numbers come from auditing 118 paragraphs
   across ten pages.

   Most rules are written as `:where(#content) x`. :where() contributes no
   specificity, so these land at the weight of a bare element or single class —
   strong enough to beat the theme's own defaults, weak enough that any tuned
   component rule still wins. That is deliberate: this raises the floor for
   plain prose without overriding components that were spaced on purpose.
   ========================================================================== */


/* 1 -------------------------------------------------------- paragraph breaks

   86 of 118 paragraphs had a bottom margin smaller than their own line-height
   (20px against 27.2px), so lines inside a paragraph sat further apart than the
   paragraphs sat from each other and the breaks stopped registering. 28px puts
   the gap just over the leading. */
:where(#content) p { margin-bottom: 1.75rem; }


/* 2 --------------------------------------------------------------- measure

   Line lengths reached 172 characters on Services and Locations and 170 on
   Engineering Services, against a comfortable 45-75. Capping the paragraph
   rather than its container leaves card grids and two-column blocks alone, and
   does nothing where the copy is already narrow. */
:where(#content) p { max-width: 70ch; }

/* .copy-measure is the theme's own name for this idea, but it computes to
   max-width:none — the mechanism was there and switched off. */
:where(#content) .copy-measure > p { max-width: 70ch; }


/* 3 ------------------------------------------------------------- type scale

   Body copy rendered at 15, 15.5, 16, 16.56, 17, 19, 20 and 21px. Steps that
   close together read as drift rather than intent. These four collapse it to
   15 / 16 / 17 / 20. */
:root { --cc-text-sm: 15px; }          /* was 15.5px, joins the existing 15px */
:where(#content) .ct-panel__lead { font-size: 1rem; }      /* was 16.56px */
:where(#content) .ab-quote__text  { font-size: 1.25rem; }  /* was 21px */
.icd-section .icd-lead            { font-size: 1.25rem; }  /* was 19px */


/* 4 + 5 ------------------------------------------- brass at small sizes, 12px

   The brass measures 3.04:1 on cream and 3.40:1 on white. That clears the 3:1
   for large text but not the 4.5:1 normal-size text needs, and it was carrying
   27 labels at 12px. Since the palette is fixed, the way out is the other brand
   colour: these become the title green (8.19:1) and go up to 13px. Uppercase
   and letter-spacing already mark them as eyebrows, so nothing is lost but the
   hue. Brass stays on headings, where it is large enough to pass.

   Delete this rule to put the brass back. */
:where(#content) .cc-card__eyebrow,
:where(#content) .cc-sechead__eyebrow,
:where(#content) .ab-quote__label,
:where(#content) .svcnav__num {
  color: var(--title-font-color);
  font-size: .8125rem;   /* 13px, up from the 12px floor */
}


/* 6 ---------------------------------------------------------- link affordance

   In-body links were told apart by colour alone. Underlining them is the fix
   for that; the offset keeps the rule off the descenders. Brass links at 16px
   fail contrast for the same reason as the labels above, so they take the
   title green too. */
:where(#content) p a,
:where(#content) li a {
  text-decoration: underline;
  text-underline-offset: .15em;
  text-decoration-thickness: .06em;
}

:where(#content) p a { color: var(--title-font-color); }
:where(#content) p a:hover,
:where(#content) p a:focus { color: var(--secondary-color); }


/* -------------------------------------------------- readability pass: leftovers

   Re-auditing after the block above turned up eight cases the low-specificity
   rules could not reach, each beaten by a more specific rule in the theme.
   These carry the specificity needed and nothing more. */

/* The How We Build stage headings were brass at 18px/400 — normal-size text, so
   3.04:1 against 4.5:1 required. 20px/700 is 15pt bold, over the large-text bar,
   where 3:1 applies and the brass clears it. It also matches the 20px/700 the
   Integrated Construction Delivery card titles already use. */
/* Size and weight now come from css/cc-system.css, where --cc-h3 clears the
   large-text contrast bar this rule was raising 20px/700 to meet. Keeping it
   here made the process tabs' titles disagree with every other capability
   title on the site. */

/* Eyebrow that kept its brass because a more specific rule set the colour. */
#content .cc-card__eyebrow { color: var(--title-font-color); }

/* Prose links outside a <p>. Buttons and nav items all carry classes, so an
   unclassed anchor inside the content area is body copy. */
#content a:not([class]) {
  color: var(--title-font-color);
  text-decoration: underline;
  text-underline-offset: .15em;
  text-decoration-thickness: .06em;
}

#content a:not([class]):hover,
#content a:not([class]):focus { color: var(--secondary-color); }

/* Last two below the 13px floor. */
#content .ab-quote__attrib { font-size: .8125rem; }   /* was 12.5px */
#content .cc-cap__step     { font-size: .8125rem; }   /* was 12px, badge fits it */

/* The one paragraph still off the scale. */
#content .ct-panel__lead { font-size: 1rem; }         /* was 16.56px */

/* Hero standfirsts sat at a 28px gap against a 32px line-height — the same
   too-tight relationship as the body copy, just further up the page. */
#content p.lead { margin-bottom: 1rem; }

/* A heading that is itself a link is not body copy. The unclassed-anchor rule
   above was underlining section headings like "Engineering Services & Design"
   on the Services page. Both nestings occur in this theme — the anchor inside
   the heading, and the heading inside the anchor — so both are excluded. */
#content :is(h1, h2, h3, h4, h5, h6) a:not([class]),
#content a:not([class]):has(:is(h1, h2, h3, h4, h5, h6)) {
  text-decoration: none;
  color: inherit;
}

/* A list of links is not running text. WCAG's "don't rely on colour alone"
   applies to a link that has to be told apart from the prose around it — in a
   list where every row is a link, the form already says so, and underlining
   each row turns a clean index into noise. So the underline stays on links
   inside paragraphs and comes off list rows; the colour correction stays on
   both, because that was a contrast fix, not a decoration one. */
/* `li a`, not `li > a`: several of these lists wrap the anchor in a span, so
   the direct-child form missed 23 of them. */
#content li a { text-decoration: none; }

/* Needs the :not([class]) too. `#content a:not([class])` above scores
   (1,1,1) because :not() carries its argument's weight, which outranks a
   plain `#content li a` at (1,0,2). Matching the shape is what lets the
   reset win. */
#content li a:not([class]) {
  text-decoration: none;
  color: var(--title-font-color);
}


/* --------------------------------------------------------------------------
   Contact form — micro-copy under the primary action

   Step 16.3 asks for one line under every conversion button answering "what
   happens next". Sized down and muted so it supports the button rather than
   competing with it.
   -------------------------------------------------------------------------- */
.ct-form__micro {
  margin: .625rem 0 0;
  font-size: .8125rem;
  line-height: 1.5;
  opacity: .72;
}


/* --------------------------------------------------------------------------
   Skip link (WCAG 2.1 AA, 2.4.1 Bypass Blocks)

   Off-screen until focused, then pinned to the top-left over the header. Uses
   the palette's own tokens rather than introducing a colour.
   -------------------------------------------------------------------------- */
.cc-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  padding: .75rem 1.25rem;
  background: #fff;
  color: #111;
  font-weight: 700;
  text-decoration: none;
}
.cc-skip-link:focus {
  left: 0;
  outline: 3px solid currentColor;
  outline-offset: 2px;
}


/* --------------------------------------------------------------------------
   /about/ — routing grid for the seven topic pages

   The hub had no links to its own children after the tab rail was replaced by
   standalone pages. These seven are parallel and independent, which is the one
   shape a card grid is actually right for.

   No new colours: the card ground is the same tint the theme already uses for
   panels, and the rule picks up the body colour at low opacity. Square corners,
   per the sitewide instruction recorded in components.css.
   -------------------------------------------------------------------------- */
.cc-about-routes { padding: 0 0 4.5rem; }

.cc-about-routes__heading {
  margin: 0 0 1.75rem;
  font-size: 2rem;
  line-height: 1.5;
}

.cc-about-routes__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;                  

}

.cc-about-routes__item { display: flex; }

.cc-about-routes__link {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  width: 100%;
  padding: 1.375rem 1.5rem 1.5rem;
  background: #fff;
  color: inherit;
  text-decoration: none;
  transition: background .18s ease;
}

.cc-about-routes__title {
  font-family: var(--title-font);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.3;
}

.cc-about-routes__text {
  font-size: .9375rem;
  line-height: 1.55;
  opacity: .78;
  max-width: 46ch;                /* keeps the measure comfortable in a wide cell */
}

.cc-about-routes__link:hover,
.cc-about-routes__link:focus-visible {
     background: var(--cc-accent-tint);
    border-color: var(--cc-accent-line);
    color: var(--title-font-color);
}

.cc-about-routes__link:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: -3px;
}

@media (prefers-reduced-motion: reduce) {
  .cc-about-routes__link { transition: none; }
}


/* --------------------------------------------------------------------------
   Breadcrumbs on the page hero

   The trail sits on a photograph behind a 40% black overlay, and was rendering
   in the brand green (#354e33) against it.

   The source was the body-link contrast fix higher up this file. `#subheader`
   sits inside `#content`, and the crumb anchors carry no class and live in an
   `li`, so `#content li a:not([class])` matched them and painted them
   `--title-font-color`. That rule is right for body copy on a light ground and
   wrong on a dark hero; it simply had no idea it was reaching in there.

   Specificity is the whole fight. `#content li a:not([class])` scores (1,1,2),
   so a plain `#subheader .crumb a` at (1,1,1) loses no matter how late it is
   loaded. These match the shape of that rule and add a class, giving (1,2,2),
   which is the same tactic the comment above the body-link reset describes.

   Links go solid white. The current page keeps a step below them, because it is
   a label rather than something to click, and the chevrons sit lower again so
   the separators do not compete with the words.
   -------------------------------------------------------------------------- */

#subheader .crumb li a,
#subheader .crumb li a:not([class]) {
  color: #fff;
  opacity: 1;
}

#subheader .crumb li a:hover,
#subheader .crumb li a:focus-visible,
#subheader .crumb li a:not([class]):hover,
#subheader .crumb li a:not([class]):focus-visible {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

#subheader .crumb li a:focus-visible,
#subheader .crumb li a:not([class]):focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
  text-decoration: none;
}

/* The current page: still legible, clearly not a link. */
#subheader .crumb li.active,
#subheader .crumb li.active span,
#subheader .crumb li .active {
  color: var(--cc-on-dark-mut);
  font-weight: 500;
}

/* Separators step down again so the trail reads as words, not punctuation. */
#subheader .crumb li:after {
  color: var(--cc-on-dark-mut);
  opacity: 1;
}

/* Any other unclassed link that lands in the hero has the same problem. */
#subheader li a:not([class]),
#subheader p a:not([class]) {
  color: #fff;
}