/* ==========================================================================
   Dynamic Strategic Management Consulting — 2026 redesign
   Design system stylesheet. Hand-authored, no framework, no build step.

   Taken from the approved Prototype v3 (css/prototype.css). Two parts differ:
   this header, and 26.4, the owner page's detailed lifecycle rail, which was
   redesigned in review batch 1. Keep the rest that way: rules the Blazor
   integration needs go in integration.css, so this file stays comparable with
   the reference.

   Contents
     01  Tokens
     02  Reset and base
     03  Typography
     04  Layout primitives
     05  Buttons and links
     06  Header and navigation
     07  Hero
     08  Audience split
     09  Section furniture (eyebrow, rules, numbering)
     10  Cards
     11  Path panels (Owners / Contractors)
     12  Trigger list ("When contractors bring us in")
     13  Lifecycle rail
     14  Process steps
     15  Differentiators
     16  Projects and case studies
     17  Industries
     18  Stats and placeholders
     19  Contact band and form
     20  Footer
     21  Page hero (interior pages)
     22  Motion and reveal
     23  Print
   ========================================================================== */


/* 01  Tokens ============================================================== */

:root {
  /* Ink — the dark industrial foundation. Evolved from the current site's
     #080d10 / #111117 / #21333e, warmed slightly toward navy. */
  --ink-900: #0a1219;
  --ink-800: #0e1a23;
  --ink-700: #14242f;
  --ink-600: #1b2f3d;
  --ink-500: #24404f;
  --ink-400: #33556687;

  /* Light content surfaces */
  --paper:      #ffffff;
  --paper-alt:  #f3f6f8;
  --paper-deep: #e7edf1;
  --line:       #d8e1e7;
  --line-soft:  #e9eef2;

  /* Text */
  --text-strong: #0e1a23;
  --text:        #33454f;
  --text-muted:  #5f7280;
  --text-on-dark:        #ffffff;
  --text-on-dark-body:   #b9c8d2;
  --text-on-dark-muted:  #8ea2b0;

  /* Accents. Blue is the DSMC brand blue lifted from the logo (#1b75bb).
     Amber is used *only* as the wayfinding marker for the contractor track. */
  --accent:        #1b75bb;
  --accent-bright: #3f9ee2;
  --accent-deep:   #145a90;
  --amber:         #c9871a;
  --amber-bright:  #e5a637;

  --focus: #6cbcf5;

  /* Type */
  /* Body and headings share one family. IBM Plex Sans is the only shortlisted
     face where lowercase l carries a tail AND uppercase I carries crossbars, so
     i / l / I are all unmistakable in running text. See design-notes.md. */
  --font-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-heading: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* Condensed is reserved for small uppercase utility type only -- eyebrows,
     nav, buttons, badges, numerals. Never for prose. */
  --font-display: "IBM Plex Sans Condensed", "IBM Plex Sans", "Arial Narrow", system-ui, sans-serif;

  /* Rhythm */
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section-y: clamp(4.5rem, 8vw, 8rem);
  --section-y-tight: clamp(3rem, 5vw, 5rem);
  --container: 1280px;
  --container-narrow: 940px;

  --radius: 3px;
  --radius-lg: 5px;

  /* Header. The brand gets a generous presentation while the page is at the
     top, then the whole header compacts to a working navigation bar on scroll.
     Logo width and header height are paired tokens so the two always move
     together and the logo can never be squashed -- width drives it, height is
     always auto, so the 6.135:1 ratio is preserved at every size. */
  --header-h: 104px;
  --header-h-scrolled: 68px;
  --logo-w: 320px;
  --logo-w-stuck: 224px;

  --shadow-card: 0 1px 2px rgba(14, 26, 35, .05), 0 8px 24px -12px rgba(14, 26, 35, .18);
  --shadow-lift: 0 2px 4px rgba(14, 26, 35, .06), 0 22px 44px -20px rgba(14, 26, 35, .32);

  --ease: cubic-bezier(.2, .7, .3, 1);
}

@media (max-width: 1279px) { :root { --header-h: 96px; --logo-w: 292px; } }
@media (max-width: 1099px) { :root { --header-h: 92px; --logo-w: 268px; } }
@media (max-width: 767px) {
  :root { --header-h: 84px; --header-h-scrolled: 62px; --logo-w: 236px; --logo-w-stuck: 190px; }
}
@media (max-width: 479px) {
  :root { --header-h: 78px; --header-h-scrolled: 58px; --logo-w: 208px; --logo-w-stuck: 172px; }
}
@media (max-width: 359px) {
  :root { --header-h: 72px; --header-h-scrolled: 56px; --logo-w: 180px; --logo-w-stuck: 156px; }
}


/* 02  Reset and base ====================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h-scrolled) + 1.5rem);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.0625rem;      /* 17px */
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;        /* belt and braces; no element should need it */
}

body.nav-open { overflow: hidden; }

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

button { font: inherit; color: inherit; }

hr { border: 0; border-top: 1px solid var(--line); margin: 0; }

::selection { background: var(--accent); color: #fff; }

/* Focus: always visible, never hover-only, and legible on both grounds. */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: absolute; left: 1rem; top: -100px; z-index: 200;
  background: var(--accent); color: #fff;
  padding: .75rem 1.25rem; border-radius: var(--radius);
  font-family: var(--font-display); font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 1rem; }


/* 03  Typography ========================================================== */

h1, h2, h3, h4, h5 {
  margin: 0 0 .5em;
  color: var(--text-strong);
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -.014em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.3rem, 4.6vw, 3.85rem); font-weight: 700; line-height: 1.08; letter-spacing: -.028em; }
h2 { font-size: clamp(1.8rem, 3vw, 2.65rem); font-weight: 700; line-height: 1.12; letter-spacing: -.022em; }
h3 { font-size: clamp(1.22rem, 1.6vw, 1.5rem); font-weight: 600; letter-spacing: -.012em; }
h4 { font-size: 1.12rem; font-family: var(--font-body); font-weight: 600; line-height: 1.35; letter-spacing: 0; }
h5 { font-size: 1rem; font-family: var(--font-body); font-weight: 600; letter-spacing: 0; }

p { margin: 0 0 1.15rem; }
p:last-child { margin-bottom: 0; }

.lede {
  font-size: clamp(1.08rem, 1.35vw, 1.26rem);
  line-height: 1.55;
  color: var(--text);
  max-width: 62ch;
}

.measure     { max-width: 68ch; }
.measure-tight { max-width: 56ch; }

strong, b { font-weight: 600; color: var(--text-strong); }

a { color: var(--accent-deep); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--accent); }

ul, ol { margin: 0 0 1.15rem; padding-left: 1.15rem; }
li { margin-bottom: .4rem; }

blockquote { margin: 0; }


/* 04  Layout primitives =================================================== */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: var(--section-y-tight); }
.section--alt  { background: var(--paper-alt); }
.section--deep { background: var(--paper-deep); }

/* Dark sections. Colour inversion is handled once, here. */
.section--dark {
  background: var(--ink-800);
  color: var(--text-on-dark-body);
}
.section--darker { background: var(--ink-900); }
.section--dark h1, .section--dark h2, .section--dark h3,
.section--dark h4, .section--dark h5 { color: var(--text-on-dark); }
.section--dark strong, .section--dark b { color: var(--text-on-dark); }
.section--dark .lede { color: var(--text-on-dark-body); }
.section--dark a { color: var(--accent-bright); }
.section--dark hr { border-top-color: rgba(255, 255, 255, .12); }

/* Faint drafting grid — industrial texture without another image request. */
.section--grid::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .028) 1px, transparent 1px);
  background-size: 88px 88px;
  pointer-events: none;
}
.section--grid > .container { position: relative; }

.grid { display: grid; gap: clamp(1.25rem, 2.2vw, 2rem); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1023px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); }
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
@media (max-width: 899px) { .split { grid-template-columns: minmax(0, 1fr); } }

.stack-sm > * + * { margin-top: .75rem; }
.stack    > * + * { margin-top: 1.5rem; }
.stack-lg > * + * { margin-top: 2.5rem; }


/* 05  Buttons and links =================================================== */

.btn {
  --btn-bg: var(--accent);
  --btn-fg: #fff;
  --btn-bd: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .85rem 1.6rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background .18s var(--ease), border-color .18s var(--ease),
              color .18s var(--ease), transform .18s var(--ease);
}
.btn:hover { --btn-bg: var(--accent-deep); --btn-bd: var(--accent-deep); color: #fff; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--amber { --btn-bg: var(--amber); --btn-bd: var(--amber); }
.btn--amber:hover { --btn-bg: #a86f10; --btn-bd: #a86f10; }

.btn--ghost { --btn-bg: transparent; --btn-fg: var(--text-strong); --btn-bd: var(--line); }
.btn--ghost:hover { --btn-bg: var(--text-strong); --btn-bd: var(--text-strong); color: #fff; }

.btn--ghost-light { --btn-bg: transparent; --btn-fg: #fff; --btn-bd: rgba(255, 255, 255, .38); }
.btn--ghost-light:hover { --btn-bg: #fff; --btn-bd: #fff; color: var(--ink-900); }

.btn--lg { padding: 1rem 2rem; font-size: 1.15rem; }

.btn-row { display: flex; flex-wrap: wrap; gap: .875rem; }

/* Text link with an arrow that nudges. Never the only affordance. */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--accent-deep);
}
.link-arrow::after {
  content: "";
  width: 1.1em; height: .55em;
  background: currentColor;
  clip-path: polygon(0 42%, 62% 42%, 62% 12%, 100% 50%, 62% 88%, 62% 58%, 0 58%);
  transition: transform .2s var(--ease);
}
.link-arrow:hover::after { transform: translateX(4px); }
.section--dark .link-arrow { color: var(--accent-bright); }
.link-arrow--amber { color: var(--amber); }
.section--dark .link-arrow--amber { color: var(--amber-bright); }


/* 06  Header and navigation =============================================== */

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: height .25s var(--ease), background .25s var(--ease),
              border-color .25s var(--ease), backdrop-filter .25s var(--ease);
}

/* Solid, sticky state once the hero has scrolled past. */
.site-header.is-stuck {
  height: var(--header-h-scrolled);
  background: rgba(10, 18, 25, .96);
  border-bottom-color: rgba(255, 255, 255, .1);
  backdrop-filter: saturate(140%) blur(8px);
}

/* Interior pages open below a short hero, so they start solid. */
.site-header.is-solid {
  background: var(--ink-900);
  border-bottom-color: rgba(255, 255, 255, .1);
}

.site-header__inner {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.brand { display: inline-flex; align-items: center; margin-right: auto; }
.brand img {
  /* Width-driven with height:auto, so the 6.135:1 logo can never be squashed
     the way the current site squashes it below 440px. max-width lets it shrink
     rather than crowd the menu button at the very narrowest widths, and the
     ratio still holds because the height follows. */
  width: var(--logo-w);
  max-width: 100%;
  height: auto;
  transition: width .28s var(--ease);
}
.site-header.is-stuck .brand img { width: var(--logo-w-stuck); }

.primary-nav { display: flex; align-items: center; gap: .25rem; }

.primary-nav a {
  position: relative;
  display: inline-block;
  padding: .6rem .7rem;
  color: rgba(255, 255, 255, .86);
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: color .18s var(--ease);
}
.primary-nav a:hover { color: #fff; }
.primary-nav a::after {
  content: "";
  position: absolute;
  left: .7rem; right: .7rem; bottom: .28rem;
  height: 2px;
  background: var(--accent-bright);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .22s var(--ease);
}
.primary-nav a:hover::after,
.primary-nav a:focus-visible::after { transform: scaleX(1); }
.primary-nav a[aria-current="page"] { color: #fff; }
.primary-nav a[aria-current="page"]::after { transform: scaleX(1); }

/* Audience items carry their track colour so the two paths read at a glance. */
.primary-nav a[data-track="owners"]::after    { background: var(--accent-bright); }
.primary-nav a[data-track="contractors"]::after { background: var(--amber-bright); }

.nav-cta { margin-left: .75rem; padding: .6rem 1.15rem; font-size: 1rem; }

.nav-toggle {
  display: none;
  align-items: center;
  gap: .55rem;
  padding: .55rem .8rem;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .32);
  border-radius: var(--radius);
  color: #fff;
  font-family: var(--font-display);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
}
.nav-toggle__bars { display: grid; gap: 4px; width: 18px; }
.nav-toggle__bars span {
  display: block; height: 2px; background: currentColor;
  transition: transform .2s var(--ease), opacity .2s var(--ease);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Mobile drawer. Rendered in the document (not cloned by script), so it works
   even if prototype.js never loads. */
.mobile-nav {
  position: fixed;
  inset: var(--header-h) 0 0;
  z-index: 99;
  background: var(--ink-900);
  border-top: 1px solid rgba(255, 255, 255, .1);
  padding: 1.5rem var(--gutter) 3rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: none;
}
.mobile-nav.is-open { display: block; }
.mobile-nav ul { list-style: none; margin: 0; padding: 0; }
.mobile-nav li + li { border-top: 1px solid rgba(255, 255, 255, .09); }
.mobile-nav a {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: 1.05rem .25rem;
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-decoration: none;
}
.mobile-nav a::before {
  content: "";
  width: 3px; height: 1.1em;
  background: rgba(255, 255, 255, .22);
  flex: none;
}
.mobile-nav a[data-track="owners"]::before      { background: var(--accent-bright); }
.mobile-nav a[data-track="contractors"]::before { background: var(--amber-bright); }
.mobile-nav a[aria-current="page"] { color: var(--accent-bright); }
.mobile-nav__foot {
  margin-top: 2rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(255, 255, 255, .12);
  display: grid;
  gap: 1rem;
}
.mobile-nav__foot a.contact-line {
  display: flex; gap: .6rem; align-items: baseline;
  color: var(--text-on-dark-body);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  padding: .35rem .25rem;
}
.mobile-nav__foot a.contact-line::before { display: none; }
.mobile-nav__foot .btn { justify-content: center; }

@media (max-width: 1099px) {
  .primary-nav, .nav-cta { display: none; }
  .nav-toggle { display: inline-flex; }
}


/* 07  Hero ================================================================ */

.hero {
  position: relative;
  /* Centred rather than bottom-aligned, with the bottom padding deliberately
     larger than the top so the block sits above the optical centre. Centring
     (rather than a fixed top offset) is what keeps the composition safe on a
     short laptop viewport: min-height is a floor, so on a short screen the box
     simply grows and the content rests at padding-top instead of overlapping. */
  min-height: min(86vh, 800px);
  display: flex;
  align-items: center;
  padding-top: calc(var(--header-h) + clamp(1.5rem, 3vw, 2.5rem));
  padding-bottom: clamp(6rem, 13.5vw, 12rem);   /* biases the centred block upward; also clearance for the overlapping audience cards */
  background: var(--ink-900);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 68% center;   /* keeps the tank forms in frame when narrow */
}
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(100deg, rgba(10, 18, 25, .95) 0%, rgba(10, 18, 25, .82) 38%, rgba(10, 18, 25, .35) 72%, rgba(10, 18, 25, .55) 100%),
    linear-gradient(to top, rgba(10, 18, 25, .92) 0%, rgba(10, 18, 25, 0) 45%);
}

.hero__inner { max-width: 62rem; }

.hero h1 { color: #fff; margin-bottom: 1.25rem; }
.hero h1 .accent {
  display: block;
  color: var(--accent-bright);
}
.hero__lede {
  font-size: clamp(1.06rem, 1.4vw, 1.28rem);
  line-height: 1.55;
  color: #cfdce5;
  max-width: 56ch;
  margin-bottom: 2rem;
}
.hero .btn-row { margin-bottom: 0; }

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  margin-bottom: 1.5rem;
  color: #ffffff;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.hero__eyebrow::before {
  content: "";
  width: 2.5rem; height: 2px;
  background: var(--accent-bright);
}

/* Sub-page hero: shorter, same family. */
.page-hero {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(3rem, 6vw, 5rem));
  padding-bottom: clamp(3rem, 6vw, 5rem);
  background: var(--ink-900);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.page-hero__media { position: absolute; inset: 0; z-index: -2; }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.page-hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(95deg, rgba(10, 18, 25, .96) 0%, rgba(10, 18, 25, .86) 45%, rgba(10, 18, 25, .62) 100%);
}
.page-hero h1 { color: #fff; max-width: 22ch; }
.page-hero .lede { color: #cfdce5; margin-top: 1.25rem; }
.page-hero--plain { background: var(--ink-900); }
.page-hero--plain .page-hero__scrim {
  background: radial-gradient(120% 140% at 12% 0%, rgba(27, 117, 187, .28) 0%, rgba(10, 18, 25, 0) 60%);
}

/* Breadcrumbs were removed in v3. On a site this shallow "Home / About" only
   repeated what the nav and the h1 already said, and it cost about 55px above
   every page title. The pattern is still right for genuine second-level pages
   — "Home / Projects / <project name>" on an individual case study — so it
   should come back with those, scoped to them rather than applied to every
   sub-page. The original rules are intact in `Proto-type v2/css/prototype.css`
   if they are wanted again. */


/* 08  Audience split ====================================================== */

.audience-split {
  background: var(--ink-800);
  padding-bottom: var(--section-y);
}
.audience-split__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-top: calc(-1 * clamp(2.5rem, 6vw, 5rem));
  position: relative;
  z-index: 3;
}
@media (max-width: 767px) {
  .audience-split__grid { grid-template-columns: minmax(0, 1fr); margin-top: -2rem; }
}

.audience-card {
  --track: var(--accent);
  display: flex;
  flex-direction: column;
  padding: clamp(1.75rem, 3vw, 2.75rem);
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 4px solid var(--track);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
  text-decoration: none;
  color: inherit;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.audience-card--contractors { --track: var(--amber); }
.audience-card:hover { transform: translateY(-3px); }
.audience-card h2 {
  font-size: clamp(1.42rem, 2vw, 1.85rem);
  margin-bottom: .55rem;
}
.audience-card__label {
  display: block;
  margin-bottom: .6rem;
  color: var(--track);
  font-family: var(--font-display);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.audience-card p { color: var(--text); }
.audience-card ul {
  list-style: none;
  margin: 1.25rem 0 1.75rem;
  padding: 0;
  display: grid;
  gap: .45rem;
  color: var(--text);
  font-size: 1rem;
}
.audience-card li {
  position: relative;
  padding-left: 1.35rem;
  margin: 0;
}
.audience-card li::before {
  content: "";
  position: absolute;
  left: 0; top: .62em;
  width: .55rem; height: 2px;
  background: var(--track);
}
.audience-card .link-arrow { margin-top: auto; color: var(--track); }


/* 09  Section furniture =================================================== */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1rem;
  color: var(--accent-deep);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.eyebrow::before { content: ""; width: 2rem; height: 2px; background: currentColor; flex: none; }
.section--dark .eyebrow { color: var(--accent-bright); }
.eyebrow--amber { color: var(--amber); }
.section--dark .eyebrow--amber { color: var(--amber-bright); }

.section-head { max-width: 72ch; margin-bottom: clamp(2.5rem, 4vw, 3.75rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }
.section-head--center .lede { margin-inline: auto; }

.section-head--split {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.5rem;
  align-items: flex-end;
  justify-content: space-between;
  max-width: none;
}
.section-head--split > div:first-child { max-width: 62ch; }

.rule-num {
  font-family: var(--font-display);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .2em;
  color: var(--text-muted);
}


/* 10  Cards =============================================================== */

.card {
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 2.4vw, 2rem);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.card--linked { text-decoration: none; color: inherit; }
.card--linked:hover {
  border-color: #b9ccd8;
  box-shadow: var(--shadow-card);
  transform: translateY(-2px);
}
.card h3 { font-size: 1.18rem; margin-bottom: .5rem; }
.card p { color: var(--text-muted); font-size: 1rem; margin-bottom: 0; }
.card__num {
  display: block;
  margin-bottom: 1rem;
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .16em;
}
.card--amber .card__num { color: var(--amber); }
.card .link-arrow { margin-top: 1.25rem; font-size: 1rem; }

/* Dark-ground card */
.card--dark {
  background: var(--ink-700);
  border-color: rgba(255, 255, 255, .1);
  color: var(--text-on-dark-body);
}
.card--dark h3 { color: #fff; }
.card--dark p { color: var(--text-on-dark-muted); }
.card--dark.card--linked:hover { border-color: rgba(255, 255, 255, .28); }

/* Service card with a top-edge track rule that fills on hover */
.card--service { position: relative; overflow: hidden; }
.card--service::before {
  content: "";
  position: absolute; inset: 0 auto auto 0;
  width: 100%; height: 3px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s var(--ease);
}
.card--amber.card--service::before { background: var(--amber); }
.card--service:hover::before,
.card--service:focus-within::before { transform: scaleX(1); }


/* 11  Path panels ========================================================= */

.path {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(2rem, 4.5vw, 4rem);
  align-items: center;
}
.path + .path { margin-top: clamp(3.5rem, 7vw, 6rem); }
.path--reverse .path__media { order: -1; }
@media (max-width: 899px) {
  .path { grid-template-columns: minmax(0, 1fr); }
  .path--reverse .path__media { order: 0; }
}

.path__media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--ink-700);
}
.path__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.path__tag {
  position: absolute;
  left: 0; bottom: 0;
  padding: .7rem 1.25rem;
  background: var(--accent);
  color: #fff;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.path__tag--amber { background: var(--amber); }

.path__list {
  list-style: none;
  margin: 1.5rem 0 2rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .55rem 1.5rem;
}
@media (max-width: 479px) { .path__list { grid-template-columns: minmax(0, 1fr); } }
.path__list li {
  position: relative;
  margin: 0;
  padding-left: 1.5rem;
  font-weight: 500;
  color: var(--text-strong);
}
.section--dark .path__list li { color: #fff; }
.path__list li::before {
  content: "";
  position: absolute; left: 0; top: .55em;
  width: .7rem; height: 2px;
  background: var(--accent);
}
.path__list--amber li::before { background: var(--amber); }


/* 12  Trigger list ======================================================== */

.trigger-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid rgba(255, 255, 255, .13);
}
@media (max-width: 767px) { .trigger-grid { grid-template-columns: minmax(0, 1fr); } }

.trigger {
  display: flex;
  gap: 1.25rem;
  padding: clamp(1.5rem, 2.6vw, 2rem) 0;
  border-bottom: 1px solid rgba(255, 255, 255, .13);
}
@media (min-width: 768px) {
  .trigger:nth-child(odd)  { padding-right: clamp(1.5rem, 3vw, 3rem); border-right: 1px solid rgba(255, 255, 255, .13); }
  .trigger:nth-child(even) { padding-left: clamp(1.5rem, 3vw, 3rem); }
}
.trigger__mark {
  flex: none;
  width: 2.5rem;
  padding-top: .15rem;
  color: var(--amber-bright);
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .12em;
}
.trigger h3 { font-size: 1.1rem; font-family: var(--font-body); font-weight: 600; letter-spacing: 0; line-height: 1.35; margin-bottom: .4rem; color: #fff; }
.trigger p { color: var(--text-on-dark-muted); font-size: 1rem; margin: 0; }

.trigger-answer {
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  background: rgba(201, 135, 26, .1);
  border-left: 4px solid var(--amber);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}
.trigger-answer p {
  margin: 0;
  color: #fff;
  font-family: var(--font-heading);
  font-size: clamp(1.22rem, 1.9vw, 1.62rem);
  font-weight: 600;
  line-height: 1.25;
  max-width: 44ch;
}


/* 13  Lifecycle rail ====================================================== */

.lifecycle {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 0;
  counter-reset: stage;
}
@media (max-width: 1199px) { .lifecycle { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 599px)  { .lifecycle { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.lifecycle__stage {
  position: relative;
  padding: 2.25rem .85rem 1.25rem 0;
  border-top: 2px solid var(--line);
}
.section--dark .lifecycle__stage { border-top-color: rgba(255, 255, 255, .16); }
.lifecycle__stage::before {
  content: "";
  position: absolute;
  top: -6px; left: 0;
  width: 10px; height: 10px;
  background: var(--accent);
  border-radius: 50%;
}
.lifecycle__stage h3 {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
  margin: 0;
}
.lifecycle__num {
  display: block;
  margin-bottom: .4rem;
  color: var(--accent);
  font-family: var(--font-display);
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .16em;
}
.section--dark .lifecycle__num { color: var(--accent-bright); }
.section--dark .lifecycle__stage::before { background: var(--accent-bright); }


/* 14  Process steps ======================================================= */

.steps { counter-reset: step; display: grid; gap: 0; }
.step {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: clamp(1rem, 2.5vw, 2.5rem);
  padding: clamp(1.5rem, 2.6vw, 2rem) 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}
.step:first-child { border-top: 1px solid var(--line); }
.section--dark .step,
.section--dark .step:first-child { border-color: rgba(255, 255, 255, .13); }
.step__num {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 700;
  line-height: 1;
  color: var(--accent);
  letter-spacing: .02em;
}
.section--dark .step__num { color: var(--accent-bright); }
.step h3 { font-size: 1.18rem; margin-bottom: .35rem; }
.step p { margin: 0; color: var(--text-muted); }
.section--dark .step p { color: var(--text-on-dark-muted); }
@media (max-width: 479px) {
  .step { grid-template-columns: minmax(0, 1fr); gap: .5rem; }
}


/* 15  Differentiators ===================================================== */

.diff-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
@media (max-width: 1023px) { .diff-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px)  { .diff-grid { grid-template-columns: minmax(0, 1fr); } }

.diff {
  padding: clamp(1.5rem, 2.6vw, 2.25rem);
  border: 1px solid var(--line-soft);
  margin: -1px 0 0 -1px;   /* collapse into a single hairline matrix */
  background: var(--paper);
}
.diff h3 {
  font-family: var(--font-body);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.35;
  margin-bottom: .5rem;
}
.diff p { margin: 0; color: var(--text-muted); font-size: 1rem; }
.diff__mark {
  display: block;
  width: 1.75rem; height: 3px;
  margin-bottom: 1.1rem;
  background: var(--accent);
}
.diff:nth-child(3n+2) .diff__mark { background: var(--amber); }


/* 16  Projects and case studies =========================================== */

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 2.5rem;
}
.filter-bar__btn {
  padding: .6rem 1.15rem;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.filter-bar__btn:hover { border-color: var(--text-strong); }
.filter-bar__btn[aria-pressed="true"] {
  background: var(--ink-800);
  border-color: var(--ink-800);
  color: #fff;
}
/* No JS: the filter bar is meaningless, so it is hidden until script arrives. */
html:not(.js) .filter-bar { display: none; }

.project-card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
.project-card:hover {
  transform: translateY(-3px);
  border-color: #b9ccd8;
  box-shadow: var(--shadow-lift);
}
.project-card[hidden] { display: none; }

.project-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--ink-700);
  overflow: hidden;
}
.project-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s var(--ease);
}
.project-card:hover .project-card__media img { transform: scale(1.035); }
.project-card__media--contain {
  display: grid;
  place-items: center;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.project-card__media--contain img {
  width: auto; height: auto;
  max-width: 58%; max-height: 68%;
  object-fit: contain;
}
.project-card:hover .project-card__media--contain img { transform: none; }

.project-card__track {
  position: absolute;
  top: .85rem; left: .85rem;
  padding: .35rem .7rem;
  background: var(--accent);
  color: #fff;
  border-radius: 2px;
  font-family: var(--font-display);
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.project-card__track--amber { background: var(--amber); }

.project-card__body { padding: clamp(1.35rem, 2.2vw, 1.75rem); display: flex; flex-direction: column; flex: 1; }
.project-card__meta {
  display: flex; flex-wrap: wrap; gap: .4rem .9rem;
  margin-bottom: .75rem;
  color: var(--text-muted);
  font-family: var(--font-display);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.project-card h3 { font-size: 1.2rem; margin-bottom: .5rem; }
.project-card p { color: var(--text-muted); font-size: 1rem; }
.project-card .link-arrow { margin-top: auto; padding-top: 1.25rem; font-size: .95rem; }

/* Expanded case study record */
.case {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper);
  overflow: hidden;
}
.case + .case { margin-top: clamp(2rem, 3.5vw, 3rem); }
.case__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 0;
  align-items: stretch;
}
@media (max-width: 899px) { .case__head { grid-template-columns: minmax(0, 1fr); } }
.case__media { position: relative; background: var(--ink-700); min-height: 260px; }
.case__media img { width: 100%; height: 100%; object-fit: cover; }
.case__media--contain { display: grid; place-items: center; background: #fff; padding: 2.5rem; }
.case__media--contain img { width: auto; max-width: 260px; height: auto; object-fit: contain; }
.case__intro { padding: clamp(1.75rem, 3vw, 2.75rem); }
.case__intro h2 { font-size: clamp(1.35rem, 1.9vw, 1.72rem); }

.case__facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--line);
  background: var(--paper-alt);
}
@media (max-width: 899px) { .case__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 479px) { .case__facts { grid-template-columns: minmax(0, 1fr); } }
.case__fact {
  padding: 1.25rem clamp(1.25rem, 2.2vw, 1.75rem);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.case__fact dt {
  margin-bottom: .3rem;
  color: var(--text-muted);
  font-family: var(--font-display);
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.case__fact dd { margin: 0; font-weight: 600; color: var(--text-strong); line-height: 1.35; }

.case__body {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
  padding: clamp(1.75rem, 3vw, 2.75rem);
}
@media (max-width: 899px) { .case__body { grid-template-columns: minmax(0, 1fr); } }
.case__body h3 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin-bottom: .85rem;
}
.case__body ul { list-style: none; margin: 0; padding: 0; }
.case__body li {
  position: relative;
  padding-left: 1.3rem;
  margin-bottom: .5rem;
  font-size: 1rem;
}
.case__body li::before {
  content: "";
  position: absolute; left: 0; top: .6em;
  width: .55rem; height: 2px;
  background: var(--accent);
}
.case__body p { font-size: 1rem; }


/* 17  Industries ========================================================== */

.industry {
  padding: clamp(1.35rem, 2.2vw, 1.85rem);
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, .022);
}
.industry h3 { font-size: 1.1rem; font-family: var(--font-body); font-weight: 600; letter-spacing: 0; margin-bottom: .35rem; }
.industry p { margin: 0; color: var(--text-on-dark-muted); font-size: 1rem; }


/* 18  Stats and placeholders ============================================== */

/* Every unverified figure on this prototype is wrapped in .placeholder so the
   review team can see instantly what still needs their input. */
.placeholder {
  display: inline-block;
  padding: .12em .5em;
  background: repeating-linear-gradient(135deg, rgba(201, 135, 26, .16) 0 6px, rgba(201, 135, 26, .07) 6px 12px);
  border: 1px dashed rgba(201, 135, 26, .65);
  border-radius: 2px;
  color: #8a5c07;
  font-family: var(--font-body);
  font-size: .92em;
  font-weight: 600;
  font-style: normal;
  line-height: 1.35;
}
.section--dark .placeholder { color: var(--amber-bright); border-color: rgba(229, 166, 55, .6); }

.note {
  display: flex;
  gap: .85rem;
  padding: 1rem 1.25rem;
  background: rgba(201, 135, 26, .09);
  border-left: 3px solid var(--amber);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: .98rem;
  color: var(--text);
}
.note strong { color: #8a5c07; }
.section--dark .note { color: var(--text-on-dark-body); background: rgba(201, 135, 26, .13); }
.section--dark .note strong { color: var(--amber-bright); }


/* 19  Contact band and form =============================================== */

.cta-band {
  background: var(--accent-deep);
  background-image: linear-gradient(120deg, var(--accent-deep) 0%, #0f4670 100%);
  color: #fff;
  padding-block: clamp(2.75rem, 5vw, 4.5rem);
}
.cta-band--amber { background-image: linear-gradient(120deg, #8a5c07 0%, #6a4405 100%); }
.cta-band__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.75rem 2.5rem;
}
.cta-band h2 { color: #fff; margin: 0; font-size: clamp(1.45rem, 2.3vw, 2.05rem); max-width: 26ch; }
.cta-band p { margin: .6rem 0 0; color: rgba(255, 255, 255, .84); max-width: 52ch; }

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}
@media (max-width: 899px) { .contact-grid { grid-template-columns: minmax(0, 1fr); } }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; }
@media (max-width: 599px) { .form-grid { grid-template-columns: minmax(0, 1fr); } }
.field--full { grid-column: 1 / -1; }

.field label,
.fieldset legend {
  display: block;
  margin-bottom: .4rem;
  color: #fff;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.field .opt { color: var(--text-on-dark-muted); font-weight: 500; letter-spacing: .06em; }

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: .8rem .95rem;
  background: rgba(255, 255, 255, .055);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: var(--radius);
  color: #fff;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.4;
  transition: border-color .18s var(--ease), background .18s var(--ease);
}
.field textarea { min-height: 8rem; resize: vertical; }
.field input::placeholder,
.field textarea::placeholder { color: #7d919f; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: rgba(255, 255, 255, .38); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--accent-bright);
  background: rgba(255, 255, 255, .085);
  box-shadow: 0 0 0 3px rgba(63, 158, 226, .28);
}
.field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #b9c8d2 50%),
                    linear-gradient(135deg, #b9c8d2 50%, transparent 50%);
  background-position: calc(100% - 1.2rem) 1.25rem, calc(100% - .85rem) 1.25rem;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.5rem;
}
/* The native dropdown is drawn by the browser, not by this stylesheet's box
   model, so every colour inside it has to be stated outright. Options were
   given a ground and a foreground; <optgroup> was not, so its label inherited
   the select's own translucent white background and near-white text and was
   painted over the popup's default light ground — legible options separated by
   blank pale bands. Both parts are now explicit.

   Firefox also lets an <optgroup>'s own type styles inherit down into its
   <option> children, so the option rule restates weight, size, case and colour
   rather than relying on defaults. */
.field select option,
.field select optgroup option {
  background: var(--ink-800);
  color: #fff;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 400;
  font-style: normal;
  letter-spacing: normal;
  text-transform: none;
  padding: .3rem .95rem;
}

/* Heading, not choice: dimmer and tracked rather than brighter, on a darker
   ground, so the two group labels read as structure while the options stay the
   most prominent thing in the list. #b9c8d2 on #0a1219 is 11:1. */
.field select optgroup {
  background: var(--ink-900);
  color: #b9c8d2;
  font-family: var(--font-body);
  font-size: .82rem;
  font-weight: 700;
  font-style: normal;
  letter-spacing: .13em;
  text-transform: uppercase;
  padding: .5rem .95rem .3rem;
}

/* Windows high-contrast and any other forced-colours mode: stand aside and let
   the OS palette do it, keeping the heading distinct by weight and case alone. */
@media (forced-colors: active) {
  .field select option,
  .field select optgroup option,
  .field select optgroup {
    background: Canvas;
    color: CanvasText;
  }
}

.fieldset { border: 0; margin: 0; padding: 0; }
.radio-row { display: flex; flex-wrap: wrap; gap: .6rem; }
.radio-chip { position: relative; }
.radio-chip input {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: pointer;
}
.radio-chip span {
  display: block;
  padding: .7rem 1.1rem;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: var(--radius);
  color: var(--text-on-dark-body);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.radio-chip input:hover + span { border-color: rgba(255, 255, 255, .45); }
.radio-chip input:checked + span { background: var(--accent); border-color: var(--accent); color: #fff; }
.radio-chip input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 3px; }

.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-status {
  margin-top: 1.25rem;
  padding: 1rem 1.25rem;
  border-radius: var(--radius);
  background: rgba(63, 158, 226, .14);
  border-left: 3px solid var(--accent-bright);
  color: #fff;
  font-size: 1rem;
}
.form-status[hidden] { display: none; }

.contact-aside {
  padding: clamp(1.5rem, 2.6vw, 2.25rem);
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--radius-lg);
}
.contact-aside h3 { font-size: 1.2rem; }
.contact-list { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 1.15rem; }
.contact-list li { margin: 0; }
.contact-list dt,
.contact-list .lbl {
  margin-bottom: .15rem;
  color: var(--text-on-dark-muted);
  font-family: var(--font-display);
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.contact-list a { color: #fff; text-decoration: none; font-weight: 500; }
.contact-list a:hover { color: var(--accent-bright); text-decoration: underline; }
.contact-list address { font-style: normal; color: var(--text-on-dark-body); }


/* 20  Footer ============================================================== */

.site-footer {
  background: var(--ink-900);
  color: var(--text-on-dark-muted);
  padding-block: clamp(3rem, 5vw, 4.5rem) 0;
  border-top: 1px solid rgba(255, 255, 255, .1);
}
.site-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
}
@media (max-width: 999px) { .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 559px) { .site-footer__grid { grid-template-columns: minmax(0, 1fr); } }

.site-footer img.footer-logo { width: 232px; max-width: 100%; margin-bottom: 1.25rem; }
.site-footer h4 {
  color: #fff;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
  margin-bottom: 1.1rem;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: .6rem; }
.site-footer a { color: var(--text-on-dark-muted); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer address { font-style: normal; }

.site-footer__bar {
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
  padding-block: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, .1);
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 2rem;
  justify-content: space-between;
  font-size: .95rem;
}

.proto-flag {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .3rem .7rem;
  background: rgba(201, 135, 26, .16);
  border: 1px dashed rgba(229, 166, 55, .6);
  border-radius: 2px;
  color: var(--amber-bright);
  font-family: var(--font-display);
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}


/* 21  Interior page bits ================================================== */

.prose h2 { margin-top: 2.5rem; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 2rem; }
.prose ul li::marker { color: var(--accent); }

.value-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; }
.value-list li { margin: 0; padding-left: 1.5rem; border-left: 3px solid var(--accent); }
.value-list h3 { font-size: 1.1rem; font-family: var(--font-body); font-weight: 600; letter-spacing: 0; margin-bottom: .3rem; }
.value-list p { margin: 0; color: var(--text-muted); }
.section--dark .value-list p { color: var(--text-on-dark-muted); }

.pill-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem; }
.pill {
  padding: .4rem .85rem;
  border: 1px solid var(--line);
  border-radius: 100px;
  font-family: var(--font-display);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text);
}
.section--dark .pill { border-color: rgba(255, 255, 255, .2); color: var(--text-on-dark-body); }


/* 22  Motion and reveal =================================================== */

/* Reveal is opt-in from script: without JS nothing is ever hidden, so the page
   can never end up with invisible content the way an AOS-without-JS page does. */
html.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
html.js .reveal.is-in { opacity: 1; transform: none; }
html.js .reveal--d1 { transition-delay: .07s; }
html.js .reveal--d2 { transition-delay: .14s; }
html.js .reveal--d3 { transition-delay: .21s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  html.js .reveal { opacity: 1; transform: none; }
  .project-card:hover, .card--linked:hover, .audience-card:hover, .btn:hover { transform: none; }
}


/* 23  Print =============================================================== */

@media print {
  .site-header, .mobile-nav, .cta-band, .filter-bar, .skip-link { display: none !important; }
  body { color: #000; background: #fff; }
  .section--dark { background: #fff !important; color: #000 !important; }
  .section--dark h1, .section--dark h2, .section--dark h3 { color: #000 !important; }
}


/* 24  Context corrections =================================================
   Two things a dark section must not do: recolour buttons that carry their
   own palette, and recolour light-surfaced components nested inside it.
   ========================================================================== */

/* Buttons and the arrow link own their colour inside dark sections. */
.section--dark a.btn { color: var(--btn-fg); }
.section--dark a.btn:hover { color: var(--btn-fg); }

/* Light components keep their light-ground colours wherever they sit. */
.section--dark .card:not(.card--dark),
.section--dark .project-card,
.section--dark .case,
.section--dark .audience-card { color: var(--text); }

.section--dark .card:not(.card--dark) h2,
.section--dark .card:not(.card--dark) h3,
.section--dark .card:not(.card--dark) h4,
.section--dark .project-card h2,
.section--dark .project-card h3,
.section--dark .case h2,
.section--dark .case h3,
.section--dark .audience-card h2,
.section--dark .audience-card h3 { color: var(--text-strong); }

.section--dark .card:not(.card--dark) strong,
.section--dark .project-card strong,
.section--dark .case strong { color: var(--text-strong); }

.section--dark .card:not(.card--dark) p,
.section--dark .project-card p { color: var(--text-muted); }

.section--dark .project-card .link-arrow,
.section--dark .card:not(.card--dark) .link-arrow { color: var(--accent-deep); }
.section--dark .project-card .link-arrow--amber,
.section--dark .card:not(.card--dark) .link-arrow--amber { color: #8a5c07; }

/* Small corrections found during review at 1440 / 768 / 390. */
.rule-num { text-transform: uppercase; }

.trigger-answer { background: rgba(229, 166, 55, .1); }

.hero__scrim {
  background:
    linear-gradient(100deg, rgba(10, 18, 25, .93) 0%, rgba(10, 18, 25, .78) 40%, rgba(10, 18, 25, .28) 74%, rgba(10, 18, 25, .5) 100%),
    linear-gradient(to top, rgba(10, 18, 25, .9) 0%, rgba(10, 18, 25, 0) 48%);
}

/* The drawer is anchored to the unscrolled header height, so the header must
   not be in its shrunken state while the drawer is open or a sliver of page
   shows between them. */
body.nav-open .site-header { height: var(--header-h); }

/* At the narrowest widths the hero eyebrow would wrap and leave its rule
   floating between two lines. */
@media (max-width: 400px) {
  .hero__eyebrow { font-size: .9rem; letter-spacing: .14em; }
  .hero__eyebrow::before { width: 1.75rem; }
}


/* ==========================================================================
   25  v2 additions
       Components introduced in Prototype v2. Everything above is v1 with the
       typography, hero composition and nav breakpoint revised in place.

       25.1  Image provenance
       25.2  Both sides of the table
       25.3  People and credibility
       25.4  Micro-refinements
   ========================================================================== */


/* 25.1  Image provenance --------------------------------------------------
   Every photograph on this site is from a real DSMC project, and most of those
   projects are owner-side. Labelling one of them as contractor work would be a
   false association, so images that sit next to contractor content carry a
   plain credit instead of a role badge. */

.hero__credit,
.page-hero__credit {
  position: absolute;
  right: var(--gutter);
  bottom: 1rem;
  max-width: 44ch;
  text-align: right;
  color: rgba(255, 255, 255, .5);
  font-family: var(--font-display);
  font-size: .85rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  pointer-events: none;
}
@media (max-width: 767px) {
  .hero__credit, .page-hero__credit { position: static; text-align: left; margin-top: 2rem; max-width: none; }
}

.img-note {
  margin: .65rem 0 0;
  color: var(--text-muted);
  font-size: .92rem;
  line-height: 1.45;
}
.section--dark .img-note { color: var(--text-on-dark-muted); }


/* 25.2  Both sides of the table -------------------------------------------
   The differentiator gets its own composition rather than another card grid:
   two columns physically facing each other across a seam. */

.both-sides {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
  gap: 0;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: rgba(255, 255, 255, .022);
}
@media (max-width: 839px) {
  .both-sides { grid-template-columns: minmax(0, 1fr); }
}

.both-sides__side { padding: clamp(1.6rem, 3vw, 2.5rem); }
.both-sides__side--owner      { --side: var(--accent-bright); }
.both-sides__side--contractor { --side: var(--amber-bright); }

.both-sides__label {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-bottom: 1.15rem;
  color: var(--side);
  font-family: var(--font-display);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
}
.both-sides__label::before { content: ""; width: 1.6rem; height: 2px; background: currentColor; flex: none; }

.both-sides h3 {
  font-size: 1.18rem;
  line-height: 1.35;
  margin-bottom: .9rem;
  color: #fff;
}
.both-sides ul { list-style: none; margin: 0; padding: 0; }
.both-sides li {
  position: relative;
  margin: 0 0 .55rem;
  padding-left: 1.35rem;
  font-size: 1rem;
  color: var(--text-on-dark-body);
}
.both-sides li::before {
  content: "";
  position: absolute; left: 0; top: .62em;
  width: .6rem; height: 2px;
  background: var(--side);
}

.both-sides__seam {
  background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, .2) 12%, rgba(255, 255, 255, .2) 88%, transparent);
}
@media (max-width: 839px) {
  .both-sides__seam { height: 1px; background: rgba(255, 255, 255, .16); }
}

/* The payoff line beneath the two columns. */
.both-sides__payoff {
  grid-column: 1 / -1;
  padding: clamp(1.4rem, 2.4vw, 2rem) clamp(1.6rem, 3vw, 2.5rem);
  border-top: 1px solid rgba(255, 255, 255, .13);
  background: rgba(255, 255, 255, .026);
}
.both-sides__payoff p {
  margin: 0;
  max-width: 74ch;
  color: #fff;
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  line-height: 1.5;
  font-weight: 500;
}


/* 25.3  People and credibility --------------------------------------------
   The site has to answer "who are the people you would put on my project?".
   It cannot answer it yet, so the prototype shows the shape of the answer. */

.person {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 1.25rem;
  padding: clamp(1.35rem, 2.2vw, 1.85rem);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
@media (max-width: 479px) { .person { grid-template-columns: minmax(0, 1fr); } }

.person__portrait {
  width: 84px; height: 84px;
  display: grid; place-items: center;
  border: 1px dashed rgba(201, 135, 26, .65);
  border-radius: var(--radius);
  background: repeating-linear-gradient(135deg, rgba(201, 135, 26, .14) 0 6px, rgba(201, 135, 26, .06) 6px 12px);
  color: #8a5c07;
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-align: center;
  line-height: 1.2;
  padding: .4rem;
}

.person h3 { margin-bottom: .15rem; }
.person__role {
  margin: 0 0 1rem;
  color: var(--accent-deep);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.person dl { margin: 0; display: grid; gap: .55rem; }
.person dt {
  color: var(--text-muted);
  font-family: var(--font-display);
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.person dd { margin: .1rem 0 0; font-size: .98rem; line-height: 1.45; }


/* 25.4  Micro-refinements -------------------------------------------------- */

/* Condensed uppercase needs a touch more tracking at small sizes in Plex than
   it did in Barlow Condensed. */
.eyebrow, .hero__eyebrow { letter-spacing: .17em; }

/* Plex Sans sits slightly larger on the body than Barlow at the same size, so
   the measure is tightened a little to keep line length comfortable. */
.lede { max-width: 58ch; }
.measure { max-width: 64ch; }

/* Section heads on the homepage are centred where the section is a statement
   rather than a list. */
.section-head--center { text-align: center; }
.section-head--center .btn-row { justify-content: center; }

/* A quieter divider used between homepage blocks that share a background. */
.rule-soft { border: 0; border-top: 1px solid var(--line); margin-block: clamp(2.5rem, 5vw, 4rem); }
.section--dark .rule-soft { border-top-color: rgba(255, 255, 255, .12); }

/* Compact sector strip. The homepage lists industries as a rule-and-label row
   rather than four cards, which says the same thing in half the height. */
.sector { position: relative; padding: 1.6rem .85rem 0 0; border-top: 2px solid var(--line); }
.sector::before { content: ""; position: absolute; top: -6px; left: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.section--dark .sector { border-top-color: rgba(255, 255, 255, .16); }
.section--dark .sector::before { background: var(--accent-bright); }
.sector h3 { font-family: var(--font-body); font-size: 1.05rem; font-weight: 600; letter-spacing: 0; line-height: 1.3; margin-bottom: .3rem; }
.sector p { margin: 0; color: var(--text-muted); font-size: .98rem; line-height: 1.45; }
.section--dark .sector p { color: var(--text-on-dark-muted); }

/* Four differentiators read better as a 2x2 matrix than as 3 + 1 orphan. */
.diff-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 639px) { .diff-grid--2 { grid-template-columns: minmax(0, 1fr); } }

/* A button must never be wider than the screen. The contact page shows the full
   email address on a button, which needs the padding and tracking to give way
   at the narrowest widths rather than the label being clipped. */
.btn { max-width: 100%; overflow-wrap: anywhere; text-align: center; justify-content: center; }
@media (max-width: 430px) {
  .btn     { padding-inline: 1.1rem; letter-spacing: .05em; }
  .btn--lg { padding: .9rem 1.15rem; font-size: 1.05rem; }
}

/* Re-assert the narrow-width hero eyebrow sizing. The v2 tracking rule above
   is later in the cascade than the v1 media query, so it has to be restated
   here or the eyebrow wraps and leaves its rule stranded between two lines. */
@media (max-width: 430px) {
  .hero__eyebrow { font-size: .86rem; letter-spacing: .13em; }
  .hero__eyebrow::before { width: 1.5rem; }
}


/* ==========================================================================
   26  v3 additions
       26.1  Owner project lifecycle rail (replaces the v2 nine-stage rail)
   ========================================================================== */

/* The v2 rail listed nine equal stages, two of which were wrong: work
   packaging is a contractor service rather than an owner project phase, and
   permitting is not a sequential stage that waits for design to finish. v3
   groups eight accurate stages under three phases, so the eye reads three
   things before it reads eight. */

.lifecycle-rail {
  display: grid;
  grid-template-columns: 3fr 2fr 3fr;
  gap: 0;
}
@media (max-width: 1199px) { .lifecycle-rail { grid-template-columns: minmax(0, 1fr); } }

.lc-phase { padding-right: clamp(1rem, 2vw, 2.25rem); }
.lc-phase + .lc-phase {
  padding-left: clamp(1rem, 2vw, 2.25rem);
  border-left: 1px solid var(--line);
}
.section--dark .lc-phase + .lc-phase { border-left-color: rgba(255, 255, 255, .14); }

@media (max-width: 1199px) {
  .lc-phase { padding-right: 0; }
  .lc-phase + .lc-phase {
    padding-left: 0;
    border-left: 0;
    margin-top: clamp(1.75rem, 3vw, 2.5rem);
  }
}

.lc-phase__label {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-bottom: 1rem;
  color: var(--accent-deep);
  font-family: var(--font-display);
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .19em;
  text-transform: uppercase;
}
.lc-phase__label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}
.section--dark .lc-phase__label { color: var(--accent-bright); }
.section--dark .lc-phase__label::after { background: rgba(255, 255, 255, .16); }

.lc-stages {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.lc-stage {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  padding: 1.45rem .9rem 0 0;
  border-top: 2px solid var(--line);
}
.section--dark .lc-stage { border-top-color: rgba(255, 255, 255, .18); }
.lc-stage::before {
  content: "";
  position: absolute;
  top: -6px; left: 0;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--accent);
}
.section--dark .lc-stage::before { background: var(--accent-bright); }

.lc-num {
  display: block;
  margin-bottom: .35rem;
  color: var(--accent);
  font-family: var(--font-display);
  font-size: .88rem;
  font-weight: 700;
  letter-spacing: .17em;
}
.section--dark .lc-num { color: var(--accent-bright); }

.lc-name {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-strong);
}
.section--dark .lc-name { color: #fff; }

/* The owner page carries a short descriptor under each stage; the homepage
   does not, which is the whole difference in density between the two. */
.lc-detail {
  display: block;
  margin-top: .4rem;
  font-size: .93rem;
  line-height: 1.45;
  color: var(--text-muted);
}
.section--dark .lc-detail { color: var(--text-on-dark-muted); }

@media (max-width: 599px) {
  .lc-stage { flex: 1 1 50%; }
  .lc-stage:nth-child(odd)  { padding-right: .75rem; }
  .lc-stage:nth-child(even) { padding-right: 0; padding-left: .75rem; }
  .lc-stage:nth-child(n+3)  { margin-top: 1.25rem; }
}

/* Span caption: the rail's actual message is the span, not the eight labels. */
.lifecycle-span {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem 1rem;
  margin-top: clamp(1.5rem, 2.5vw, 2rem);
  color: var(--text-muted);
  font-size: 1rem;
}
.lifecycle-span strong { color: var(--text-strong); font-weight: 600; }
.section--dark .lifecycle-span { color: var(--text-on-dark-muted); }
.section--dark .lifecycle-span strong { color: #fff; }

/* 26.2  Narrow-width header ------------------------------------------------
   Below 360px the menu button is what stops the brand growing, so the button
   gives up some padding and tracking rather than the logo giving up size. */
@media (max-width: 359px) {
  .nav-toggle { padding: .5rem .6rem; gap: .45rem; font-size: .85rem; letter-spacing: .06em; }
  .nav-toggle__bars { width: 16px; }
}

/* 26.3  Lifecycle spacing once the rail stacks ----------------------------- */
@media (max-width: 1199px) {
  .lc-phase + .lc-phase { margin-top: clamp(1.25rem, 2.5vw, 1.9rem); }
  .lc-phase__label { margin-bottom: .8rem; }
}

/* Compact rail: a phase with an odd number of stages leaves the last one alone
   on its row with a half-width rule. Let it take the full width instead. */
@media (max-width: 599px) {
  .lc-stage:last-child:nth-child(odd) { flex-basis: 100%; padding-right: 0; padding-left: 0; }
}

/* 26.4  Detailed rail ------------------------------------------------------
   The owner page carries a descriptor under every stage. Review batch 1
   replaced the prototype's version, which stretched every phase across the
   full width: Deliver's two stages ran half again as wide as the rest, and on
   phones the third stage of Define and Transfer was stranded on its own row.

   Each phase is now a band of its own -- a ground, an accent edge and its
   name as a heading -- with its stages in equal columns sized to the phase:
   three, two, three. From 1200px the heading takes a fixed column, centred on
   its band, so stages 01, 04 and 06 share a left edge. Below that it sits
   above the stages, and below 900px the stages stack with the number in a
   gutter, as the trigger list does. The compact rail is untouched. */
.lifecycle-rail--detailed {
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(.75rem, 1.2vw, 1rem);
}

.lifecycle-rail--detailed .lc-phase,
.lifecycle-rail--detailed .lc-phase + .lc-phase {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  margin: 0;
  padding: clamp(1.4rem, 2.4vw, 2rem) clamp(1rem, 2.6vw, 2.25rem);
  background: var(--paper-alt);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}
.section--dark .lifecycle-rail--detailed .lc-phase {
  background: rgba(255, 255, 255, .035);
  border-color: rgba(255, 255, 255, .1);
  border-left-color: var(--accent-bright);
}

/* The label is an h3 here; restate what the heading rules would change. */
.lifecycle-rail--detailed .lc-phase__label {
  margin: 0;
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
  letter-spacing: .2em;
  line-height: 1.2;
}
.lifecycle-rail--detailed .lc-phase__label::after { content: none; }

/* One equal column per stage, however many the phase has. */
.lifecycle-rail--detailed .lc-stages {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 0 clamp(1.25rem, 2.4vw, 2.25rem);
}
.lifecycle-rail--detailed .lc-stages > .lc-stage {
  margin: 0;
  padding: 1.45rem 0 0;
}

@media (min-width: 1200px) {
  .lifecycle-rail--detailed .lc-phase,
  .lifecycle-rail--detailed .lc-phase + .lc-phase {
    grid-template-columns: 11rem minmax(0, 1fr);
    gap: 0 clamp(1.5rem, 2.5vw, 2.5rem);
  }
  .lifecycle-rail--detailed .lc-phase__label { align-self: center; }
}

@media (max-width: 899px) {
  .lifecycle-rail--detailed .lc-phase,
  .lifecycle-rail--detailed .lc-phase + .lc-phase { gap: .9rem; }
  .lifecycle-rail--detailed .lc-stages {
    grid-auto-flow: row;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .lifecycle-rail--detailed .lc-stages > .lc-stage {
    display: grid;
    grid-template-columns: 2.6rem minmax(0, 1fr);
    padding: 1rem 0;
    border-top-width: 1px;
  }
  .lifecycle-rail--detailed .lc-stages > .lc-stage:last-child { padding-bottom: 0; }
  .lifecycle-rail--detailed .lc-stage::before { content: none; }
  .lifecycle-rail--detailed .lc-num { grid-row: span 2; margin: 0; padding-top: .15rem; }
}

/* 26.5  Reduced motion for the header ---------------------------------------
   The global reduced-motion block already collapses every transition, but the
   header is the one element that now animates its own geometry, so it is
   restated explicitly rather than left to a wildcard. */
@media (prefers-reduced-motion: reduce) {
  .site-header,
  .brand img { transition: none !important; }
}