/* ==========================================================================
   Wykeham — site.css
   Layout and component CSS for the static site. Chunk 1: shell, Home, About.

   Rules this file obeys:
   - Every measurement is a token from /tokens/*.css. No raw hex, px, or spacing
     value appears below except inside the local scaffolding vars at the top,
     which only ever hold other tokens.
   - tokens/base.css already styles body type, h1-h4, paragraph rhythm, links,
     focus rings, rules and form controls. Nothing here re-declares those; where
     a component needs a different treatment (nav links, footer links, buttons)
     it overrides deliberately and says so.
   - Square corners and no shadows, everywhere, always.
   - The only literal numbers below are the three breakpoint widths (1200, 900,
     600). CSS media queries cannot read custom properties, so those cannot be
     tokenised; every value they switch between is a token.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Local scaffolding
   Three responsive values used by every section. They are composed entirely
   from design-system tokens; the breakpoints simply reassign which token is
   in force. Prefixed --site- so they are never mistaken for DS tokens.
   -------------------------------------------------------------------------- */
:root{
  --site-page-pad:var(--page-x);        /* page side padding          */
  --site-section-pad:var(--section-y);  /* section vertical padding   */
  --site-header-h:var(--header-h);      /* live header height         */
  --site-reveal-rise:var(--space-3);    /* entry animation translate  */
}

/* About runs a wider section rhythm. That plus the imagery is the whole
   register shift — no change to type, palette or grid. */
body.page--about{ --site-section-pad:var(--space-32); }


/* --------------------------------------------------------------------------
   2. Layout primitives
   -------------------------------------------------------------------------- */
body{ padding-top:var(--site-header-h); }   /* clears the fixed header */

.wrap{ max-width:var(--content-max); margin-inline:auto; }

.section{ padding:var(--site-section-pad) var(--site-page-pad); }
.section--flush-top{ padding-top:0; }   /* the module below supplies its own rule */

/* The 12-column grid. Everything full-measure sits on it. */
.grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:var(--gutter);
}

/* The three measures. Nothing runs full-width as prose. */
.measure{ max-width:var(--measure-prose); }        /* running body copy   */
.measure-lead{ max-width:var(--measure-lead); }    /* standfirst / intro  */
.measure-display{ max-width:var(--measure-display); } /* display wrap        */

/* .measure-lead is unused by chunk 1's modules but is one of the three declared
   measures and is already wired into the <=900 breakpoint; the page intros and
   pull statements in later chunks take it. */

.section__body{ margin-top:var(--stack-heading); }
.section__body > p:last-child{ margin-bottom:0; }
.section__foot{ margin-top:var(--space-12); }

/* Skip link — visible only on focus. */
.skip-link{
  position:absolute; left:var(--space-4); top:var(--space-4);
  z-index:60;
  padding:var(--space-3) var(--space-4);
  background:var(--surface-page); color:var(--text-body);
  border:var(--border-strong);
  font-size:var(--type-body-sm-size);
  transform:translateY(calc(-1 * var(--space-24)));
}
.skip-link:focus{ transform:none; }


/* --------------------------------------------------------------------------
   3. Motion — exactly three behaviours, nothing else.
   (a) fade-and-rise on section entry, once
   (b) link / button hover colour, arrow nudge
   (c) mobile nav panel slide
   The entry animation is gated on prefers-reduced-motion at the CSS level and
   again in JS, rather than relying on the zeroed durations alone.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:no-preference){
  .js-reveal .reveal{
    opacity:0;
    transform:translateY(var(--site-reveal-rise));
    transition:opacity var(--duration-slow) var(--ease-out),
               transform var(--duration-slow) var(--ease-out);
  }
  .js-reveal .reveal.is-visible{ opacity:1; transform:none; }
}


/* --------------------------------------------------------------------------
   4. Wordmark lockup
   "Wykeham" in Newsreader 400 at --wordmark-ls, with assets/mark.svg set
   terminally after the final m: top edge flush to the cap line, .30em gap,
   mark ~5.5% of the lockup width. Geometry tokens transcribed from
   components/brand/Wordmark.jsx.
   -------------------------------------------------------------------------- */
.wordmark{
  display:inline-flex;
  align-items:baseline;
  font-family:var(--font-display);
  font-weight:var(--weight-regular);
  line-height:1;
  letter-spacing:var(--wordmark-ls);
  white-space:nowrap;
  text-decoration:none;
  border-bottom:0;          /* override the base.css link rule */
  color:var(--text-display);
}
.wordmark:hover,
.wordmark:active{ color:var(--text-display); border-bottom:0; }

.wordmark--on-dark,
.wordmark--on-dark:hover,
.wordmark--on-dark:active{ color:var(--text-on-dark); }

.wordmark__word{ display:block; }

.wordmark__mark{
  display:block;
  flex:none;
  width:var(--wordmark-mark-w);
  height:var(--wordmark-mark-h);
  margin-left:var(--wordmark-mark-gap);
  margin-bottom:var(--wordmark-mark-lift);
}

.wordmark--nav{ font-size:var(--wordmark-size-nav); }
.wordmark--footer{ font-size:var(--wordmark-size-footer); }


/* --------------------------------------------------------------------------
   5. Buttons — square, unshadowed, copper reserved for the primary action.
   Treatment from components/core/Button.jsx.
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:var(--space-3);
  font-family:var(--font-body);
  font-weight:var(--weight-medium);
  letter-spacing:var(--type-nav-ls);
  border:var(--rule-weight) solid transparent;
  border-radius:var(--radius);
  box-shadow:var(--shadow-none);
  text-decoration:none;
  white-space:nowrap;
  cursor:pointer;
  transition:var(--transition-color);
}
.btn--md{ font-size:var(--type-button-md-size); padding:var(--btn-pad-y-md) var(--btn-pad-x-md); }
.btn--lg{ font-size:var(--type-button-lg-size); padding:var(--btn-pad-y-lg) var(--btn-pad-x-lg); }

.btn--primary,
.btn--primary:hover,
.btn--primary:active{
  background:var(--interactive-accent);
  border-color:var(--interactive-accent);
  color:var(--text-on-dark);
}
.btn--primary:hover,
.btn--primary:active{
  background:var(--interactive-accent-pressed);
  border-color:var(--interactive-accent-pressed);
}

.btn:focus-visible{ outline:var(--rule-weight) solid var(--focus-ring); outline-offset:var(--focus-ring-offset); }


/* --------------------------------------------------------------------------
   6. Arrow link — the house link. Inter 500, accent, trailing arrow.
   Uses --text-link (the darker accent) because these render at body size and
   must clear AA; --interactive-accent is reserved for buttons, rules and
   large accent type. Colour is constant across states so contrast never dips;
   hover adds the rule and the nudge.
   -------------------------------------------------------------------------- */
.arrow-link{
  display:inline-flex; align-items:baseline;
  gap:var(--space-3);
  font-family:var(--font-body);
  font-weight:var(--weight-medium);
  font-size:var(--type-body-sm-size);
  line-height:var(--type-body-sm-lh);
  letter-spacing:var(--type-nav-ls);
  color:var(--text-link);
  text-decoration:none;
  white-space:nowrap;
  border-bottom:var(--rule-weight) solid transparent;
  transition:var(--transition-color);
}
.arrow-link:hover,
.arrow-link:active{ color:var(--text-link); border-bottom-color:currentColor; }

.arrow-link__arrow{ transition:transform var(--duration) var(--ease); }
.arrow-link:hover .arrow-link__arrow{ transform:translateX(var(--arrow-nudge)); }


/* --------------------------------------------------------------------------
   7. Eyebrow — Inter 500, uppercase, wide tracking.
   -------------------------------------------------------------------------- */
.eyebrow{
  font-family:var(--font-body);
  font-weight:var(--weight-medium);
  font-size:var(--type-eyebrow-size);
  line-height:var(--type-eyebrow-lh);
  letter-spacing:var(--type-eyebrow-ls);
  text-transform:uppercase;
  color:var(--text-label);
  margin:0;
}
.eyebrow--on-dark{ color:var(--text-on-dark-muted); }


/* --------------------------------------------------------------------------
   8. Header and navigation
   Fixed. Always on --surface-page, including over the dark hero — never
   transparent. The hairline rule appears once the page has scrolled.
   -------------------------------------------------------------------------- */
.site-header{
  position:fixed; inset:0 0 auto 0;
  z-index:40;
  height:var(--site-header-h);
  display:flex; align-items:center;
  gap:var(--space-12);
  padding-inline:var(--site-page-pad);
  background:var(--surface-page);
  border-bottom:var(--rule-weight) solid transparent;
  transition:var(--transition-color);
}
.site-header.is-scrolled{ border-bottom-color:var(--line-hairline); }

.site-header__home{ flex:none; }   /* display comes from .wordmark */

.site-nav{ margin-left:auto; align-self:stretch; display:flex; align-items:center; gap:var(--space-8); }

.site-nav__link{
  font-family:var(--font-body);
  font-weight:var(--weight-medium);
  font-size:var(--type-nav-size);
  line-height:var(--type-nav-lh);
  letter-spacing:var(--type-nav-ls);
  color:var(--text-muted);
  text-decoration:none;
  padding-bottom:var(--space-2);
  border-bottom:var(--rule-weight-heavy) solid transparent;
  transition:var(--transition-color);
}
.site-nav__link:hover,
.site-nav__link:active{ color:var(--interactive-accent); border-bottom-color:transparent; }

/* Active: heavy accent rule set below the baseline. */
.site-nav__link[aria-current],
.site-nav__link[aria-current]:hover{
  color:var(--interactive-accent);
  border-bottom-color:var(--interactive-accent);
}

.site-nav__cta{ margin-left:var(--space-4); }

/* Services dropdown. The nav item stays a real link to /services/; the panel is
   opened by pointer, by focus, and by ArrowDown, and js/nav.js keeps
   aria-expanded in step. With JS off the link still navigates. */
.site-nav__item{
  position:relative;
  align-self:stretch;
  display:flex; align-items:center;
}

/* Anchored to the trigger's RIGHT edge, not its left. Every nav item sits in
   the right-hand portion of the header, so a panel that grows leftwards can
   never cross the viewport edge — a left-anchored panel put Industries 32px
   past it at ~1000px wide. */
.nav-menu{
  position:absolute; top:100%; right:0; left:auto;
  z-index:41;
  width:var(--nav-menu-w);
  margin:0; padding:var(--space-6);
  list-style:none;
  background:var(--surface-page);
  border:var(--border-hairline);
  border-radius:var(--radius);
  box-shadow:var(--shadow-none);
  opacity:0;
  visibility:hidden;
  transition:opacity var(--duration) var(--ease), visibility 0s linear var(--duration);
}
.site-nav__item.is-open .nav-menu{
  opacity:1;
  visibility:visible;
  transition:opacity var(--duration) var(--ease), visibility 0s;
}

.nav-menu__item + .nav-menu__item{ margin-top:var(--space-5); }

.nav-menu__link{
  display:block;
  text-decoration:none;
  border-bottom:0;
  color:var(--text-body);
  transition:var(--transition-color);
}
.nav-menu__link:hover,
.nav-menu__link:active,
.nav-menu__link[aria-current="page"]{ color:var(--interactive-accent); border-bottom:0; }

.nav-menu__name{
  display:block;
  font-family:var(--font-body);
  font-weight:var(--weight-medium);
  font-size:var(--type-nav-size);
  line-height:var(--type-nav-lh);
  letter-spacing:var(--type-nav-ls);
  color:inherit;
}
.nav-menu__desc{
  display:block;
  margin-top:var(--space-2);
  font-size:var(--type-body-sm-size);
  line-height:var(--type-body-sm-lh);
  color:var(--text-muted);
}

/* Sub-list inside the mobile panel. Rendered inline and already open — a
   slide-out panel has room for it, and the system has no icon to hang a
   disclosure control on. */
.nav-panel__sub{
  list-style:none;
  margin:var(--space-5) 0 0;
  padding-left:var(--space-5);
  border-left:var(--border-hairline);
  display:flex; flex-direction:column; gap:var(--space-4);
}
.nav-panel__sublink{
  font-family:var(--font-body);
  font-size:var(--type-body-size);
  line-height:var(--type-body-lh);
  color:var(--text-muted);
  text-decoration:none;
  border-bottom:0;
  transition:var(--transition-color);
}
.nav-panel__sublink:hover,
.nav-panel__sublink[aria-current="page"]{ color:var(--interactive-accent); border-bottom:0; }

/* Text toggle. No hamburger, no icon of any kind. */
.nav-toggle{
  display:none;
  margin-left:auto;
  background:none; border:0; padding:0;
  font-family:var(--font-body);
  font-weight:var(--weight-medium);
  font-size:var(--type-nav-size);
  letter-spacing:var(--type-nav-ls);
  color:var(--text-body);
  cursor:pointer;
  transition:var(--transition-color);
}
.nav-toggle:hover{ color:var(--interactive-accent); }
.nav-toggle:focus-visible{ outline:var(--rule-weight) solid var(--focus-ring); outline-offset:var(--focus-ring-offset); }

/* Mobile panel — slides from the right. */
.nav-panel{
  display:none;
  position:fixed; inset:var(--site-header-h) 0 0 auto;
  z-index:39;
  width:var(--menu-panel-w);
  padding:var(--space-10) var(--site-page-pad) var(--space-10);
  background:var(--surface-page);
  border-left:var(--border-hairline);
  overflow-y:auto;
  transform:translateX(100%);
  visibility:hidden;
  transition:transform var(--duration-slow) var(--ease-out),
             visibility 0s linear var(--duration-slow);
}
.nav-panel.is-open{
  transform:none;
  visibility:visible;
  transition:transform var(--duration-slow) var(--ease-out), visibility 0s;
}
.nav-panel__list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--space-6); }
.nav-panel__link{
  font-family:var(--font-body);
  font-weight:var(--weight-medium);
  font-size:var(--type-heading-3-size);
  line-height:var(--type-heading-3-lh);
  color:var(--text-body);
  text-decoration:none;
  border-bottom:0;
  transition:var(--transition-color);
}
.nav-panel__link:hover,
.nav-panel__link[aria-current="page"]{ color:var(--interactive-accent); border-bottom:0; }
.nav-panel__cta{ margin-top:var(--space-10); }

body.nav-open{ overflow:hidden; }


/* --------------------------------------------------------------------------
   9. Hero
   Full-bleed dark field, abstract at 100% cover, no overlay tint — the
   abstracts are generated dark enough. Hero copy is never animated: it must be
   complete on first paint.
   -------------------------------------------------------------------------- */
.hero{
  position:relative;
  background:var(--surface-dark);
  color:var(--text-on-dark);
  overflow:hidden;
}
.hero__bg{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
.hero__inner{
  position:relative;
  min-height:var(--hero-h);
  display:flex; align-items:center;
  padding:var(--space-10) var(--site-page-pad);
}
.hero__grid{ width:100%; max-width:var(--content-max); margin-inline:auto; }

.hero__eyebrow{ margin-bottom:var(--stack-label); }
.hero__title{
  font-size:var(--type-display-2-fluid);   /* handles the mobile step-down alone */
  line-height:var(--type-display-2-lh);
  letter-spacing:var(--type-display-2-ls);
  color:var(--text-on-dark);
  max-width:var(--measure-display);
}
.hero__sub{
  margin-top:var(--stack-heading);
  font-size:var(--type-body-lg-size);
  line-height:var(--type-body-lg-lh);
  color:var(--text-on-dark-muted);
  max-width:var(--measure-lead);
}
.hero__value{
  margin-top:var(--stack-para);
  margin-bottom:0;
  font-size:var(--type-body-size);
  line-height:var(--type-body-lh);
  color:var(--text-on-dark-muted);
  max-width:var(--measure-prose);
}

/* Home hero: content on 8 columns, vertically centred but bottom-weighted so
   it clears the credential band overlapping the hero's lower edge. */
.hero--home .hero__content{ grid-column:span 8; }
.hero--home .hero__inner{ padding-bottom:calc(var(--space-10) + var(--card-overlap)); }

/* About hero: narrow measure on 6 columns, lower-contrast abstract, display
   size steps down to --type-display-3 and there is no sub-heading layer. */
.hero--about .hero__inner{ min-height:var(--hero-h-about); }
.hero--about .hero__content{ grid-column:span 6; }
.hero--about .hero__title{
  font-size:var(--type-display-3-size);
  line-height:var(--type-display-3-lh);
  letter-spacing:var(--type-display-3-ls);
  max-width:none;
}
.hero--about .hero__lede{
  margin-top:var(--stack-heading);
  margin-bottom:0;
  font-size:var(--type-body-lg-size);
  line-height:var(--type-body-lg-lh);
  color:var(--text-on-dark);
  max-width:var(--measure-prose);
}

/* On dark, the focus outline switches to the ground colour. */
.hero :focus-visible,
.cta :focus-visible,
.precedent :focus-visible,
.site-footer :focus-visible{ outline:var(--rule-weight) solid var(--text-on-dark); outline-offset:var(--focus-ring-offset); }


/* --------------------------------------------------------------------------
   10. Cards
   One card treatment, used by the hero underslot and the industries grid:
   paper-white on ground, hairline border, --card-pad, no shadow.
   -------------------------------------------------------------------------- */
.card-grid{
  list-style:none;
  margin-block:0;   /* block only, so .wrap's margin-inline:auto still centres it */
  padding:0;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--space-6);
}
.card{
  display:flex; flex-direction:column;
  background:var(--surface-card);
  border:var(--border-hairline);
  border-radius:var(--radius);
  box-shadow:var(--shadow-none);
  padding:var(--card-pad);
}
.card__title{
  font-size:var(--type-heading-2-size);
  line-height:var(--type-heading-2-lh);
  letter-spacing:var(--type-heading-2-ls);
}
.card__body{
  margin-top:var(--stack-heading);
  margin-bottom:0;
  font-size:var(--type-body-size);
  line-height:var(--type-body-lh);
  color:var(--text-body);
}
/* Equal heights with the links baseline-aligned across the row. */
.card__foot{ margin-top:var(--space-8); padding-top:0; }
.card--linked .card__foot{ margin-top:auto; padding-top:var(--space-8); }

/* The credential band: three cards overlapping the hero's lower edge. */
.underslot{
  position:relative; z-index:2;
  margin-top:calc(-1 * var(--card-overlap));
  padding-inline:var(--site-page-pad);
}
.underslot__fact{
  margin-top:var(--stack-label);
  margin-bottom:0;
  font-size:var(--type-body-size);
  line-height:var(--type-body-lh);
}


/* --------------------------------------------------------------------------
   11. Stacked rows — the capabilities treatment.
   Not a grid: rows on the text measure with a hairline rule between.
   -------------------------------------------------------------------------- */
.rows{ border-top:var(--rule-weight) solid var(--line-hairline); }
.row{
  padding-block:var(--space-10);
  border-bottom:var(--rule-weight) solid var(--line-hairline);
}
.row__title{
  font-size:var(--type-heading-2-size);
  line-height:var(--type-heading-2-lh);
  letter-spacing:var(--type-heading-2-ls);
}
.row__body{
  margin-top:var(--stack-heading);
  margin-bottom:var(--stack-heading);
  font-size:var(--type-body-size);
  line-height:var(--type-body-lh);
}


/* --------------------------------------------------------------------------
   12. Five-item list — Delivery Guarantee (Home) and Our Values (About).
   Two columns, items filling the left column then the right. No borders, no
   cards, no numbering. A description list: lead phrase is the term.
   -------------------------------------------------------------------------- */
.pairs{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-rows:repeat(3,auto);
  grid-auto-flow:column;
  column-gap:var(--space-12);
  row-gap:var(--space-10);
  margin:0;
}
.pairs__item{ display:flex; flex-direction:column; }
.pairs__term{
  font-family:var(--font-body);
  font-weight:var(--weight-medium);
  font-size:var(--type-body-lg-size);
  line-height:var(--type-body-lg-lh);
  color:var(--text-body);
}
.pairs__def{
  margin:var(--space-3) 0 0;
  font-size:var(--type-body-size);
  line-height:var(--type-body-lh);
  color:var(--text-body);
  max-width:var(--measure-prose);
}


/* --------------------------------------------------------------------------
   13. Terminal CTA band — closes Home and About.
   -------------------------------------------------------------------------- */
.cta{
  background:var(--surface-dark);
  padding:var(--space-32) var(--site-page-pad);
  text-align:center;
}
.cta__title{
  font-size:var(--type-display-3-size);
  line-height:var(--type-display-3-lh);
  letter-spacing:var(--type-display-3-ls);
  color:var(--text-on-dark);
}
.cta__action{ margin-top:var(--space-10); }


/* --------------------------------------------------------------------------
   14. Footer
   -------------------------------------------------------------------------- */
.site-footer{
  background:var(--surface-dark);
  color:var(--text-on-dark);
  padding:var(--space-20) var(--site-page-pad) var(--space-10);
}
.site-footer__cols{
  display:grid;
  grid-template-columns:2fr repeat(3,1fr);
  gap:var(--gutter);
  align-items:start;
}
.site-footer__blurb{
  margin:var(--space-6) 0 0;
  font-size:var(--type-body-sm-size);
  line-height:var(--type-body-sm-lh);
  color:var(--text-on-dark-muted);
  max-width:var(--measure-lead);
}
.site-footer__coltitle{
  padding-bottom:var(--space-4);
  border-bottom:var(--rule-weight) solid var(--line-on-dark);
  color:var(--text-on-dark-muted);
}
.site-footer__list{
  list-style:none;
  margin:var(--space-4) 0 0;
  padding:0;
  display:flex; flex-direction:column; gap:var(--space-3);
}
.site-footer__link{
  font-size:var(--type-body-sm-size);
  line-height:var(--type-body-sm-lh);
  color:var(--text-on-dark-muted);
  text-decoration:none;
  border-bottom:var(--rule-weight) solid transparent;   /* override the base.css link rule */
  transition:var(--transition-color);
}
.site-footer__link:hover,
.site-footer__link:active{ color:var(--text-on-dark); border-bottom-color:transparent; }

.site-footer__legal{
  margin-top:var(--space-16);
  padding-top:var(--space-6);
  border-top:var(--rule-weight) solid var(--line-on-dark);
  display:flex; flex-wrap:wrap; justify-content:space-between;
  gap:var(--space-4) var(--space-8);
  font-size:var(--type-caption-size);
  line-height:var(--type-caption-lh);
  letter-spacing:var(--type-caption-ls);
  color:var(--text-on-dark-muted);
}
.site-footer__legal p{ margin:0; }
.site-footer__legal-links{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:var(--space-6);
}


/* --------------------------------------------------------------------------
   15. Legal stubs — text measure, H1, one paragraph.
   -------------------------------------------------------------------------- */
.legal__body{ margin-top:var(--stack-heading); }


/* ==========================================================================
   16. Service pages (chunk 2)
   All four service pages and the Services landing share these modules.
   ========================================================================== */

/* --------------------------------------------------------------------------
   16.1 Page head — H1, sub-heading, qualifier strip
   -------------------------------------------------------------------------- */
.page-head__title{
  font-size:var(--type-display-3-size);
  line-height:var(--type-display-3-lh);
  letter-spacing:var(--type-display-3-ls);
  max-width:var(--measure-display);
}
.page-head__sub{
  margin:var(--stack-heading) 0 0;
  font-family:var(--font-display);
  font-weight:var(--weight-regular);
  font-size:var(--type-heading-1-size);
  line-height:var(--type-heading-1-lh);
  letter-spacing:var(--type-heading-1-ls);
  color:var(--text-muted);
  max-width:var(--measure-lead);
}
/* Services landing standfirst: body-size, narrow measure. */
.page-head__standfirst{
  margin:var(--stack-heading) 0 0;
  font-size:var(--type-body-lg-size);
  line-height:var(--type-body-lg-lh);
  color:var(--text-body);
  max-width:var(--measure-lead);
}
.page-head__standfirst > p{ margin:0; }
.page-head__standfirst > p + p{ margin-top:var(--stack-para); }

/* Qualifier strip — middot-separated, hairline above and below. */
.qualifier{
  list-style:none;
  margin:var(--stack-heading) 0 0;
  padding:var(--space-5) 0;
  border-top:var(--border-hairline);
  border-bottom:var(--border-hairline);
  display:flex; flex-wrap:wrap;
  max-width:var(--measure-prose);
  font-size:var(--type-body-sm-size);
  line-height:var(--type-body-sm-lh);
  letter-spacing:var(--type-body-ls-sm);
  color:var(--text-body);
}
/* Separator trails the item it follows, so a wrap never starts a line on the
   middot. */
.qualifier li:not(:last-child)::after{ content:"\00B7"; padding-inline:var(--space-3); }

/* Framing paragraphs between the qualifier strip and the first section. */
.framing{ margin-top:var(--space-12); }
.framing > p:last-child{ margin-bottom:0; }

/* --------------------------------------------------------------------------
   16.2 Lead phrase — the Inter 500 opener shared by commission triggers,
   outcome lists and the VoC deliverables list. Runs inline, on the same
   paragraph as the body that follows it.
   -------------------------------------------------------------------------- */
.lead-phrase{
  font-family:var(--font-body);
  font-weight:var(--weight-medium);
  font-size:var(--type-body-lg-size);
  color:var(--text-body);
}

/* --------------------------------------------------------------------------
   16.3 Commission triggers — two columns, no borders, no numbering.
   Multi-column rather than grid so the module takes 5, 6 or any other count
   without a per-page modifier: the first column fills, then the second.
   -------------------------------------------------------------------------- */
.triggers{
  column-count:2;
  column-gap:var(--space-8);
  margin:0;
  max-width:var(--content-max);
}
.triggers__item{
  break-inside:avoid;
  margin:0 0 var(--space-8);
  font-size:var(--type-body-size);
  line-height:var(--type-body-lh);
  max-width:var(--measure-prose);
}
.triggers__item:last-child{ margin-bottom:0; }

/* --------------------------------------------------------------------------
   16.4 Workstream stack
   Structure from components/content/WorkstreamList.jsx: a hairline top rule
   per row and a copper numeral in the left column, no cards. The numeral is
   one of the five places the accent is permitted.
   -------------------------------------------------------------------------- */
.workstreams{
  list-style:none;
  margin:0;
  padding:0;
  border-bottom:var(--rule-weight) solid var(--line-hairline);
}
.workstream{
  display:grid;
  grid-template-columns:var(--space-12) minmax(0,1fr);
  gap:var(--space-5);
  padding-block:var(--space-8);
  border-top:var(--border-hairline);
}
.workstream__num{
  font-family:var(--font-body);
  font-weight:var(--weight-medium);
  font-size:var(--type-label-size);
  line-height:var(--type-label-lh);
  letter-spacing:var(--type-label-ls);
  color:var(--interactive-accent);
  padding-top:var(--workstream-num-offset);
}
.workstream__title{
  font-family:var(--font-display);
  font-weight:var(--weight-regular);
  font-size:var(--type-heading-3-size);
  line-height:var(--type-heading-3-lh);
  letter-spacing:var(--type-heading-3-ls);
  color:var(--text-display);
}
.workstream__body{
  margin:var(--space-3) 0 0;
  font-size:var(--type-body-size);
  line-height:var(--type-body-lh);
  color:var(--text-muted);
  max-width:var(--measure-prose);
}
.workstream__deliverable{
  margin-top:var(--space-5);
  padding-top:var(--space-4);
  border-top:var(--border-hairline);
  max-width:var(--measure-prose);
}
.workstream__deliverable-label{
  display:block;
  margin-bottom:var(--space-2);
}
.workstream__deliverable-text{
  display:block;
  font-size:var(--type-body-sm-size);
  line-height:var(--type-body-sm-lh);
  color:var(--text-body);
}

/* Phase variant — "How the Work Runs" on Voice of the Customer. The day range
   takes the numeral's slot, so the column widens and the type steps up. No
   deliverable line. */
.workstream--phase{ grid-template-columns:var(--space-32) minmax(0,1fr); }
.workstream--phase .workstream__num{
  font-size:var(--type-heading-2-size);
  line-height:var(--type-heading-2-lh);
  letter-spacing:var(--type-heading-2-ls);
  padding-top:0;
}

/* --------------------------------------------------------------------------
   16.5 Engagement grid — the chunk 1 .card-grid / .card geometry, with a
   labelled specification block pinned to the base of every card.
   -------------------------------------------------------------------------- */
.engagement__title{
  font-family:var(--font-body);
  font-weight:var(--weight-medium);
  font-size:var(--type-body-lg-size);
  line-height:var(--type-body-lg-lh);
  color:var(--text-body);
}
.engagement__body{
  margin:var(--stack-para) 0 0;
  font-size:var(--type-body-size);
  line-height:var(--type-body-lh);
  color:var(--text-body);
}
.engagement__spec{
  margin:var(--space-8) 0 0;
  padding-top:var(--space-5);
  border-top:var(--border-hairline);
}
.card--engagement .engagement__spec{ margin-top:auto; }   /* bottom-aligned */
.engagement__spec-row + .engagement__spec-row{ margin-top:var(--space-4); }
.engagement__spec-label{
  display:block;
  margin-bottom:var(--space-1);
}
.engagement__spec-value{
  display:block;
  margin:0;
  font-size:var(--type-body-sm-size);
  line-height:var(--type-body-sm-lh);
  color:var(--text-body);
}

/* --------------------------------------------------------------------------
   16.6 Outcome list — lead phrase then body on the same paragraph.
   Also carries the Voice of the Customer deliverables list.
   -------------------------------------------------------------------------- */
.outcomes{ margin:0; max-width:var(--measure-prose); }
.outcomes__item{
  margin:0 0 var(--space-8);
  font-size:var(--type-body-size);
  line-height:var(--type-body-lh);
}
.outcomes__item:last-child{ margin-bottom:0; }

/* --------------------------------------------------------------------------
   16.7 Institutional block — closes every service page. The heading steps
   down from the display size used by every other section on the page.
   -------------------------------------------------------------------------- */
.institutional{
  padding-top:var(--space-12);
  border-top:var(--rule-weight) solid var(--line-hairline);
}
.institutional__title{
  font-size:var(--type-heading-1-size);
  line-height:var(--type-heading-1-lh);
  letter-spacing:var(--type-heading-1-ls);
  max-width:var(--measure-display);
}

/* --------------------------------------------------------------------------
   16.8 Precedent band — Pricing Architecture only. The single secondary-dark
   band anywhere on an institutional page.
   -------------------------------------------------------------------------- */
.precedent{
  background:var(--surface-dark-alt);
  color:var(--text-on-dark);
  padding:var(--space-24) var(--site-page-pad);
}
.precedent__eyebrow{ margin-bottom:var(--stack-label); }
.precedent__title{
  font-size:var(--type-display-3-size);
  line-height:var(--type-display-3-lh);
  letter-spacing:var(--type-display-3-ls);
  color:var(--text-on-dark);
  max-width:var(--measure-display);
}
.precedent__list{
  list-style:none;
  margin:var(--space-12) 0 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--gutter);
  font-size:var(--type-body-size);
  line-height:var(--type-body-lh);
  color:var(--text-on-dark);
}

/* --------------------------------------------------------------------------
   16.9 Services landing — the position line is the only italic in the system.
   Newsreader's italic axis is loaded in tokens/fonts.css, so this is the real
   italic, never a synthesised oblique. Not set in the accent colour: the
   accent belongs to links, buttons, arrows, active nav and workstream
   numerals only, and the italic alone carries the distinction.
   -------------------------------------------------------------------------- */
.row__position{
  margin:var(--space-3) 0 0;
  font-family:var(--font-display);
  font-style:italic;
  font-synthesis-style:none;
  font-weight:var(--weight-regular);
  font-size:var(--type-body-lg-size);
  line-height:var(--type-body-lg-lh);
  color:var(--text-body);
  max-width:var(--measure-prose);
}


/* ==========================================================================
   17. Industries, Contact and legal (chunk 3)
   ========================================================================== */

/* --------------------------------------------------------------------------
   17.1 Industry cards — the chunk 1 .card geometry with a full-bleed image.
   The image meets the card edge on three sides; --card-pad applies only to
   the text below it.
   -------------------------------------------------------------------------- */
.card--media{ padding:0; overflow:hidden; }
.card--media .card__media{
  display:block;
  width:100%;
  aspect-ratio:var(--card-media-ratio);
  object-fit:cover;
  object-position:var(--card-media-position);
}
.card--media .card__inner{
  display:flex; flex-direction:column;
  flex:1;
  padding:var(--card-pad);
}

/* --------------------------------------------------------------------------
   17.2 Industry hero
   Matches the service-page register: full width on --surface-dark at
   --hero-h, the abstract at 100% cover, no overlay tint, copy on 8 columns.
   Removing this block and moving the h1/sub into the first .section on the
   page ground is the whole reversal, should the dark hero be dropped.
   -------------------------------------------------------------------------- */
.hero--industry .hero__content{ grid-column:span 8; }
.hero--industry .hero__title{
  font-size:var(--type-display-3-size);
  line-height:var(--type-display-3-lh);
  letter-spacing:var(--type-display-3-ls);
  max-width:var(--measure-display);
}
/* Set upright. The italic in the source document is markup, not a type
   instruction — the Services landing position lines are the only italic. */
.hero--industry .hero__sub{
  font-family:var(--font-display);
  font-style:normal;
  font-size:var(--type-heading-1-size);
  line-height:var(--type-heading-1-lh);
  letter-spacing:var(--type-heading-1-ls);
  color:var(--text-on-dark-muted);
  max-width:var(--measure-lead);
}

/* --------------------------------------------------------------------------
   17.3 Scope exclusion line — a stated boundary, not a footnote.
   -------------------------------------------------------------------------- */
.scope-note{
  margin:var(--space-8) 0 0;
  padding-top:var(--space-8);
  border-top:var(--rule-weight) solid var(--line-hairline);
  max-width:var(--measure-prose);
  font-size:var(--type-body-sm-size);
  line-height:var(--type-body-sm-lh);
  color:var(--text-muted);
}

/* --------------------------------------------------------------------------
   17.4 Contact — form left on 7 columns, detail rail right on 5.
   -------------------------------------------------------------------------- */
.contact__form{ grid-column:span 7; }
.contact__rail{ grid-column:span 5; }

.contact__rail-block + .contact__rail-block{ margin-top:var(--space-10); }
.contact__rail-label{ margin-bottom:var(--space-3); }
.contact__rail-value{
  margin:0;
  font-size:var(--type-body-size);
  line-height:var(--type-body-lh);
  color:var(--text-body);
}
/* Reserved portrait slot. Sized but never rendered — see the commented block
   in the markup. No placeholder image, no grey box. */
.contact__portrait{
  margin-top:var(--space-10);
  width:100%;
  aspect-ratio:var(--portrait-ratio);
  object-fit:cover;
}

/* --------------------------------------------------------------------------
   17.5 Form controls
   From components/forms/*. Underline only: transparent ground, no box, no
   border on three sides, one bottom rule that darkens on focus. No fixed
   height — the padding carries the vertical rhythm. Copper appears in exactly
   one place, the invalid rule, and there is no red anywhere.
   -------------------------------------------------------------------------- */
.field{ display:flex; flex-direction:column; gap:var(--space-3); }
.field + .field{ margin-top:var(--space-8); }

.field__label{
  font-family:var(--font-body);
  font-weight:var(--weight-medium);
  font-size:var(--type-eyebrow-size);
  line-height:var(--type-eyebrow-lh);
  letter-spacing:var(--type-eyebrow-ls);
  text-transform:uppercase;
  color:var(--text-label);
}
/* The asterisk is decoration (the `required` attribute is what carries the
   meaning), but it is still accent type, so it takes the AA-safe --text-link
   and sits at the --type-body-sm-size floor rather than the 11px label size. */
.field__required{ color:var(--text-link); font-size:var(--type-body-sm-size); }

.field__control{
  font-family:var(--font-body);
  font-weight:var(--weight-regular);
  font-size:var(--type-body-size);
  line-height:var(--type-field-lh);
  color:var(--text-body);
  background:transparent;
  border:0;
  border-bottom:var(--rule-weight) solid var(--wyk-navy-900-16);
  border-radius:var(--radius);
  box-shadow:var(--shadow-none);
  padding:var(--field-pad-y) 0;
  width:100%;
  transition:var(--transition-color);
}
.field__control:focus{
  outline:none;
  border-bottom-color:var(--line-strong);
}
.field__control:focus-visible{
  outline:var(--rule-weight) solid var(--focus-ring);
  outline-offset:var(--focus-ring-offset);
}
.field__control[aria-invalid="true"]{ border-bottom-color:var(--interactive-accent); }

textarea.field__control{ resize:vertical; }

/* Native select, appearance stripped, with a typographic caret in copper. */
.field__select{ position:relative; display:block; }
.field__select .field__control{
  appearance:none;
  -webkit-appearance:none;
  padding-right:var(--space-6);
  cursor:pointer;
}
.field__caret{
  position:absolute; right:0; top:50%;
  transform:translateY(-60%);
  color:var(--interactive-accent);
  font-size:var(--type-body-sm-size);
  pointer-events:none;
}

/* The invalid state IS the bottom rule — that is the one place copper appears
   on a form. The message beneath is ordinary body copy: accent here would be
   a second error colour, and at caption size it would fail AA besides. */
.field__error{
  font-size:var(--type-body-sm-size);
  line-height:var(--type-body-sm-lh);
  color:var(--text-body);
}
.field__error:empty{ display:none; }

/* Square checkbox: hairline box, copper fill and tick when selected. */
.consent{
  display:flex; align-items:flex-start;
  gap:var(--space-3);
  margin-top:var(--space-10);
  cursor:pointer;
}
.consent__input{
  position:absolute;
  width:var(--rule-weight); height:var(--rule-weight);
  opacity:0;
}
.consent__box{
  flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  width:var(--space-4); height:var(--space-4);
  margin-top:var(--checkbox-offset);
  border:var(--rule-weight) solid var(--wyk-navy-900-40);
  border-radius:var(--radius);
  background:transparent;
  color:var(--text-on-dark);
  font-size:var(--type-eyebrow-size);
  transition:var(--transition-color);
}
.consent__box::before{ content:""; }
.consent__input:checked + .consent__box{
  background:var(--interactive-accent);
  border-color:var(--interactive-accent);
}
.consent__input:checked + .consent__box::before{ content:"\2713"; }
.consent__input:focus-visible + .consent__box{
  outline:var(--rule-weight) solid var(--focus-ring);
  outline-offset:var(--focus-ring-offset);
}
.consent__input[aria-invalid="true"] + .consent__box{ border-color:var(--interactive-accent); }
.consent__text{
  font-size:var(--type-body-sm-size);
  line-height:var(--type-body-sm-lh);
  color:var(--text-body);
}

.form__submit{ margin-top:var(--space-10); }
/* Announced to assistive tech on a failed submit; carries no colour of its
   own beyond the accent already used by the invalid rule. */
.form__status{
  margin-top:var(--space-5);
  font-size:var(--type-body-sm-size);
  line-height:var(--type-body-sm-lh);
  color:var(--interactive-accent-pressed);
}
.form__status:empty{ display:none; }

/* --------------------------------------------------------------------------
   17.6 Legal pages
   Section headings are h2 elements so no heading level is skipped, set at the
   smaller subheading size the brief asks for rather than the display size.
   -------------------------------------------------------------------------- */
.legal__heading{
  margin-top:var(--space-12);
  font-size:var(--type-heading-2-size);
  line-height:var(--type-heading-2-lh);
  letter-spacing:var(--type-heading-2-ls);
  max-width:var(--measure-prose);
}
.legal__body > p{ max-width:var(--measure-prose); }
.legal__body > p:last-child{ margin-bottom:0; }
.legal__meta{
  margin:0 0 var(--space-10);
  font-size:var(--type-body-sm-size);
  line-height:var(--type-body-sm-lh);
  color:var(--text-muted);
}


/* ==========================================================================
   18. People (chunk 4)
   The About principal block, the Team page, and the individual profiles.
   Treatment follows components/content/PersonCard.jsx, with one deliberate
   departure: PersonCard falls back to a navy initials field when no photograph
   exists. Nothing here does. An unpopulated module is worse than an absent
   one, so a missing portrait removes the column rather than filling it.
   ========================================================================== */

/* --------------------------------------------------------------------------
   18.1 Inline links in running copy
   tokens/base.css colours every <a> --interactive-accent, which measures
   3.82:1 on the warm ground — right for the large accent type it was written
   for, short of AA at body size. Prose links take the AA-safe --text-link
   (4.98:1). Scoped to unclassed anchors so no componentised link is touched.
   -------------------------------------------------------------------------- */
main a:not([class]),
.text-link{
  color:var(--text-link);
  border-bottom:var(--rule-weight) solid var(--wyk-copper-12);
  text-decoration:none;
  transition:var(--transition-color);
}
main a:not([class]):hover,
.text-link:hover{ color:var(--text-link); border-bottom-color:var(--text-link); }

.text-link{
  font-family:var(--font-body);
  font-weight:var(--weight-medium);
  font-size:var(--type-body-sm-size);
  line-height:var(--type-body-sm-lh);
  letter-spacing:var(--type-nav-ls);
}

/* --------------------------------------------------------------------------
   18.2 Portrait
   4:5, no border, no rounding. Shared by all three placements.
   -------------------------------------------------------------------------- */
.portrait{
  display:block;
  width:100%;
  aspect-ratio:var(--portrait-ratio);
  object-fit:cover;
  border:0;
  border-radius:var(--radius);
  box-shadow:var(--shadow-none);
}

/* --------------------------------------------------------------------------
   18.3 About — named principal block
   Default state is portrait-less: the content runs on the text measure and no
   empty column is rendered. Adding a photograph is a single class change —
   put .principal--portrait on the block and uncomment the <img>.
   -------------------------------------------------------------------------- */
.principal{
  margin-top:var(--space-16);
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:var(--gutter);
}
.principal__portrait{ display:none; }
.principal__content{ grid-column:span 12; max-width:var(--measure-prose); }

.principal--portrait .principal__portrait{ display:block; grid-column:span 4; }
.principal--portrait .principal__content{ grid-column:span 6; max-width:none; }

.principal__name{
  font-size:var(--type-heading-1-size);
  line-height:var(--type-heading-1-lh);
  letter-spacing:var(--type-heading-1-ls);
}
/* Seat/title line. --interactive-accent measures 3.82:1 at this size, so the
   accent here is the AA-safe --text-link — same hue family, already in the
   palette, and the colour every other body-size accent on the site uses. */
.principal__title{
  margin:var(--space-3) 0 0;
  font-family:var(--font-body);
  font-weight:var(--weight-medium);
  font-size:var(--type-body-sm-size);
  line-height:var(--type-body-sm-lh);
  letter-spacing:var(--type-nav-ls);
  color:var(--text-link);
}
.principal__bio{
  margin:var(--stack-heading) 0 0;
  font-size:var(--type-body-size);
  line-height:var(--type-body-lh);
}
.principal__links{
  margin-top:var(--space-6);
  display:flex; flex-wrap:wrap; align-items:baseline;
  gap:var(--space-6);
}

/* --------------------------------------------------------------------------
   18.4 Team page — principals grid
   Two across, driven by however many entries exist. One principal renders as
   a single left-aligned entry; nothing renders an empty cell.
   -------------------------------------------------------------------------- */
.principals{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--space-6);
}
.principal-card{ display:flex; flex-direction:column; }
/* Same portrait-less default as the About block and the profile: the column is
   absent rather than empty. Add .principal-card--portrait to the <li> and
   uncomment the <img> to populate it. */
.principal-card__portrait{ display:none; }
.principal-card--portrait .principal-card__portrait{ display:block; }
.principal-card__body{
  margin-top:var(--space-5);
  padding-top:var(--space-4);
  border-top:var(--border-hairline);
  display:flex; flex-direction:column;
  flex:1;
}
.principal-card__name{
  font-size:var(--type-heading-2-size);
  line-height:var(--type-heading-2-lh);
  letter-spacing:var(--type-heading-2-ls);
}
.principal-card__seat{
  margin:var(--space-1) 0 0;
  font-family:var(--font-body);
  font-weight:var(--weight-medium);
  font-size:var(--type-body-sm-size);
  line-height:var(--type-body-sm-lh);
  letter-spacing:var(--type-nav-ls);
  color:var(--text-link);
}
.principal-card__precis{
  margin:var(--space-4) 0 0;
  font-size:var(--type-body-size);
  line-height:var(--type-body-lh);
}
.principal-card__links{
  margin-top:auto;
  padding-top:var(--space-6);
  display:flex; flex-wrap:wrap; align-items:baseline;
  gap:var(--space-6);
}

/* --------------------------------------------------------------------------
   18.5 Team page — individual profile
   Portrait 5 columns left, content 7 right. Same portrait-less fallback.
   -------------------------------------------------------------------------- */
.profile{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:var(--gutter);
}
.profile__portrait{ display:none; }
.profile__content{ grid-column:span 12; max-width:var(--measure-prose); }

.profile--portrait .profile__portrait{ display:block; grid-column:span 5; }
.profile--portrait .profile__content{ grid-column:span 7; max-width:none; }

.profile__seat{
  margin:var(--space-4) 0 0;
  font-family:var(--font-body);
  font-weight:var(--weight-medium);
  font-size:var(--type-body-sm-size);
  line-height:var(--type-body-sm-lh);
  letter-spacing:var(--type-nav-ls);
  color:var(--text-link);
}
.profile__block{ margin-top:var(--space-12); }
.profile__block-label{
  padding-top:var(--space-4);
  border-top:var(--border-hairline);
  margin-bottom:var(--space-5);
}
.profile__list{
  list-style:none;
  margin:0;
  padding:0;
}
.profile__list li{
  padding-block:var(--space-4);
  border-bottom:var(--border-hairline);
  font-size:var(--type-body-size);
  line-height:var(--type-body-lh);
}
.profile__foot{ margin-top:var(--space-12); }

/* --------------------------------------------------------------------------
   18.6 A hairline rule above a block, with --space-12 clear.
   -------------------------------------------------------------------------- */
.ruled-top{
  padding-top:var(--space-12);
  border-top:var(--rule-weight) solid var(--line-hairline);
}


/* ==========================================================================
   19. Breakpoints — 1200, 900, 600
   ========================================================================== */

/* 900-1200: section padding steps down, hero height reduces, page padding
   contracts off the desktop value. The grid itself is untouched. */
@media (max-width:1200px){
  :root{
    --site-page-pad:var(--space-12);
    --site-section-pad:var(--section-y-tight);
  }
  body.page--about{ --site-section-pad:var(--space-24); }
  .hero__inner{ min-height:var(--hero-h-sm); }
  .hero--about .hero__inner{ min-height:var(--hero-h-about-sm); }
}

/* 600-900: three-across grids become two, the text measure goes full width,
   five-item lists go single column, the nav collapses to a text toggle. */
@media (max-width:900px){
  :root{ --site-page-pad:var(--space-8); }
  body.page--about{ --site-section-pad:var(--space-20); }

  .measure,
  .measure-lead,
  .hero__sub,
  .hero__value,
  .hero--about .hero__lede,
  .pairs__def,
  .site-footer__blurb{ max-width:none; }

  .card-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }

  .pairs{
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:none;
    grid-auto-flow:row;
    row-gap:var(--space-10);
  }

  .hero--home .hero__content,
  .hero--about .hero__content{ grid-column:span 12; }

  .site-nav{ display:none; }
  .nav-toggle{ display:block; }
  .nav-panel{ display:block; }

  .site-footer__cols{ grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:var(--space-12); }

  /* Service-page modules */
  .qualifier,
  .triggers__item,
  .workstream__body,
  .workstream__deliverable,
  .outcomes,
  .institutional__title,
  .row__position{ max-width:none; }

  .triggers{ column-count:1; }

  /* The numeral moves above the title rather than beside it. */
  .workstream,
  .workstream--phase{
    grid-template-columns:minmax(0,1fr);
    gap:var(--space-3);
  }

  .precedent__list{ grid-template-columns:repeat(2,minmax(0,1fr)); }

  /* Chunk 3 */
  .scope-note,
  .legal__heading,
  .legal__body > p,
  .contact__rail-value{ max-width:none; }

  /* 3:2 loses too much vertical subject at narrow widths. */
  .card--media .card__media{ aspect-ratio:var(--card-media-ratio-sm); }

  .contact__form,
  .contact__rail{ grid-column:span 12; }
  .contact__rail{ margin-top:var(--space-16); }

  .hero--industry .hero__content{ grid-column:span 12; }

  /* Chunk 4 */
  .principal__content,
  .profile__content{ max-width:none; }
  .principal--portrait .principal__portrait,
  .principal--portrait .principal__content,
  .profile--portrait .profile__portrait,
  .profile--portrait .profile__content{ grid-column:span 12; }
  .principals{ grid-template-columns:minmax(0,1fr); }
}

/* Below 600: everything single column, card grids stack, hero overlap halves,
   header height reduces. */
@media (max-width:600px){
  :root{
    --site-page-pad:var(--page-x-sm);
    --site-header-h:var(--header-h-sm);
  }
  /* Stays a step above Home's --section-y-tight at every width, so the About
     register shift survives all the way down to the smallest viewport. */
  body.page--about{ --site-section-pad:var(--space-20); }

  .card-grid{ grid-template-columns:minmax(0,1fr); }

  .underslot{ margin-top:calc(-1 * var(--card-overlap) / 2); }
  .hero--home .hero__inner{
    padding-bottom:calc(var(--space-10) + var(--card-overlap) / 2);
  }

  .site-footer__cols{ grid-template-columns:minmax(0,1fr); }
  .site-footer__legal{ flex-direction:column; }
  .cta{ padding-block:var(--space-24); }

  .precedent{ padding-block:var(--space-20); }
  .precedent__list{ grid-template-columns:minmax(0,1fr); row-gap:var(--space-6); }
}