/* ============================================================
   STANFORDS TRAINING — UI SYSTEM
   ------------------------------------------------------------
   Direction: "Constructed Craft".
   An institutional, engineered aesthetic derived from the
   Stanfords chevron mark — the folded triangle that gives the
   site its fold motif, its rail, and its colour.

   Display : Archivo      (variable grotesque, width axis)
   Body    : Public Sans  (institutional workhorse)
   Utility : IBM Plex Mono (labels, indices, specs, captions)

   Colour is taken from the logo itself: burgundy sails,
   navy wings, gold as the single warm accent.
   ============================================================ */

/* ---------------------------------------------------------
   1. TOKENS
   --------------------------------------------------------- */
:root {
  /* brand — sampled from the Stanfords mark */
  --brand-red:      #9E1C37;
  --brand-navy:     #28388B;

  /* primary ramp */
  --primary:        #8A1F38;
  --primary-deep:   #5E1426;
  --primary-lift:   #A93049;
  --primary-pale:   #F8EBED;
  --primary-tint:   rgba(138, 31, 56, 0.08);

  /* secondary ramp (navy) */
  --navy:           #22357F;
  --navy-deep:      #16224F;
  --navy-pale:      #EDEFF8;

  /* accent */
  --gold:           #B08334;
  --gold-soft:      #D9B570;
  --gold-pale:      #F7F0E1;

  /* ink */
  --ink:            #17130F;
  --ink-2:          #3B342E;
  --ink-soft:       #5E564E;
  --ink-faint:      #726A61;

  /* surfaces */
  --paper:          #FFFFFF;
  --warm:           #F8F5F0;
  --warm-deep:      #F1EBE2;
  --line:           #E5DCD1;
  --line-soft:      #EFE8DE;

  /* type */
  --display: 'Archivo', 'Arial Narrow', system-ui, sans-serif;
  --body:    'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* scale */
  --max: 1280px;
  --gutter: 40px;

  /* rhythm */
  --sp-section: 108px;
  --sp-tight: 76px;

  /* radius */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;

  /* elevation */
  --sh-1: 0 1px 2px rgba(23,19,15,.05), 0 2px 8px rgba(23,19,15,.04);
  --sh-2: 0 2px 6px rgba(23,19,15,.06), 0 14px 32px rgba(23,19,15,.08);
  --sh-3: 0 4px 12px rgba(23,19,15,.07), 0 28px 60px rgba(23,19,15,.12);
  --sh-brand: 0 14px 34px rgba(138,31,56,.26);

  /* motion */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --t-fast: 160ms;
  --t-base: 260ms;
  --t-slow: 520ms;

  /* the fold — signature offset */
  --eyebrow-space: 43px;
  --fold: 22px;
}

@media (max-width: 900px) {
  :root { --gutter: 22px; --sp-section: 76px; --sp-tight: 56px; --fold: 13px; }
}

/* ---------------------------------------------------------
   2. BASE
   --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* keep in-page anchors clear of the sticky header */
  scroll-padding-top: 96px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-soft);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

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

:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute; top: -100px; left: var(--gutter); z-index: 500;
  background: var(--ink); color: #fff;
  font: 600 14px/1 var(--body);
  padding: 14px 20px; border-radius: 0 0 var(--r-sm) var(--r-sm);
  transition: top var(--t-fast) var(--ease);
}
.skip-link:focus { top: 0; }

/* ---------------------------------------------------------
   3. TYPOGRAPHY
   --------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--display);
  margin: 0;
  color: var(--ink);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

/* the display voice: wide, engineered, confident */
h1, .h1 {
  font-size: clamp(2.6rem, 5.4vw, 4.6rem);
  font-stretch: 105%;
  line-height: 1.02;
  letter-spacing: -0.03em;
}
h2, .h2 { font-size: clamp(1.85rem, 3.3vw, 2.9rem); font-stretch: 103%; }
h3      { font-size: 1.22rem; letter-spacing: -0.015em; }
h4      { font-size: 1.05rem; letter-spacing: -0.012em; }

p { margin: 0 0 1.05rem; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

strong { color: var(--ink-2); font-weight: 700; }

.lede {
  font-size: clamp(1.05rem, 1.35vw, 1.2rem);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 56ch;
}
.hero .lede { margin: 26px 0 30px; }

/* ---------------------------------------------------------
   4. EYEBROW — the chevron marker (signature)
   --------------------------------------------------------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono);
  font-size: 11.5px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 18px;
}
.eyebrow::before {
  content: "";
  width: 14px; height: 8px;
  background: currentColor;
  /* the ribbon from the mark, in miniature */
  clip-path: polygon(24% 0, 100% 0, 76% 100%, 0 100%);
  flex-shrink: 0;
}
.eyebrow.on-dark { color: var(--gold-soft); }
.eyebrow.center { justify-content: center; }

/* ---------------------------------------------------------
   5. LAYOUT
   --------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.wrap.narrow { max-width: 900px; }
.wrap.mid    { max-width: 1060px; }

section { padding: var(--sp-section) 0; }
.section-tight { padding: var(--sp-tight) 0; }
.section-soft  { background: var(--warm); }
/* the hero and a soft section share a background: mark the join
   and drop the doubled padding so it reads as a step, not a void */
.hero + .section-soft,
.hero + .cred-strip + .section-soft { border-top: 1px solid var(--line); }
.hero + .section-soft { padding-top: clamp(52px, 5vw, 76px); }

.section-dark {
  background: var(--ink);
  color: rgba(255,255,255,.72);
  position: relative;
  overflow: hidden;
}
/* ambient depth on dark sections */
.section-dark::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 90% at 12% 0%, rgba(138,31,56,.38), transparent 62%),
    radial-gradient(50% 80% at 92% 100%, rgba(34,53,127,.34), transparent 60%);
  pointer-events: none;
}
.section-dark > * { position: relative; z-index: 1; }
.section-dark h1, .section-dark h2,
.section-dark h3, .section-dark h4 { color: #fff; }
.section-dark p { color: rgba(255,255,255,.7); }

.two-col {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
}
.two-col.rev { grid-template-columns: 1.08fr 0.92fr; }
.two-col.even { grid-template-columns: 1fr 1fr; align-items: start; }
@media (max-width: 900px) {
  .two-col, .two-col.rev, .two-col.even { grid-template-columns: 1fr; gap: 34px; }
  /* keep the image below the prose on stacked layouts */
  .two-col.rev > .media-frame,
  .two-col.rev > .media-figure { order: 2; }
}

.mt-lg { margin-top: 54px; }
.center { text-align: center; }

/* ---------------------------------------------------------
   6. SECTION HEAD — mono index on a rail
   --------------------------------------------------------- */
.section-head { max-width: 760px; margin: 0 auto 58px; text-align: center; }
.section-head.left { margin: 0 0 52px; text-align: left; max-width: 720px; }
.section-head h2 { margin-bottom: 0; }
.section-head p { font-size: 1.05rem; margin-top: 18px; color: var(--ink-soft); }
.section-head.center .eyebrow { justify-content: center; }

/* ---------------------------------------------------------
   7. HEADER / NAVIGATION
   --------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 200;
  background: rgba(255,255,255,.86);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-base) var(--ease),
              box-shadow var(--t-base) var(--ease),
              background var(--t-base) var(--ease);
}
.site-header.is-stuck {
  border-bottom-color: var(--line);
  box-shadow: 0 1px 0 rgba(23,19,15,.02), 0 10px 30px rgba(23,19,15,.05);
}

/* scroll progress: a hairline of brand colour */
.scroll-progress {
  position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%;
  transform: scaleX(var(--progress, 0)); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--primary), var(--brand-red) 60%, var(--gold));
  will-change: transform;
}

.nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  max-width: var(--max); margin: 0 auto;
  padding: 16px var(--gutter);
  transition: padding var(--t-base) var(--ease);
}
.site-header.is-stuck .nav { padding-top: 11px; padding-bottom: 11px; }

/* the mark */
.logo { display: inline-flex; align-items: center; flex-shrink: 0; min-height: 44px; }
.logo-lockup {
  height: 42px; width: auto;
  transition: opacity var(--t-fast) var(--ease), transform var(--t-base) var(--ease-out);
}
.logo:hover .logo-lockup { opacity: .84; transform: translateY(-1px); }
.site-header.is-stuck .logo-lockup { height: 36px; }
@media (max-width: 720px) { .logo-lockup { height: 34px; } }

/* links */
.nav-links { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav-links > li { position: relative; }

.nav-links a.top-link {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 14px; font-weight: 600; color: var(--ink-2);
  padding: 10px 13px; border-radius: var(--r-sm);
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
  white-space: nowrap;
}
.nav-links a.top-link:hover { color: var(--primary); background: var(--primary-tint); }

.nav-links a.top-link.active { color: var(--primary); }
.nav-links a.top-link.active::after {
  content: ""; position: absolute; left: 13px; right: 13px; bottom: 2px;
  height: 2px; background: var(--primary); border-radius: 2px;
}

/* caret for dropdown parents */
.has-dropdown > .top-link::before {
  content: ""; order: 2;
  width: 7px; height: 7px; margin-left: 1px;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  opacity: .5;
  transition: transform var(--t-base) var(--ease), opacity var(--t-fast) var(--ease);
}
.has-dropdown:hover > .top-link::before,
.has-dropdown.is-open > .top-link::before { opacity: 1; transform: rotate(225deg) translateY(-2px); }

/* dropdown */
.dropdown {
  position: absolute; top: calc(100% + 6px); left: 50%;
  width: 268px; padding: 8px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-3);
  opacity: 0; visibility: hidden;
  transform: translateX(-50%) translateY(8px);
  transition: opacity var(--t-base) var(--ease),
              transform var(--t-base) var(--ease-out),
              visibility 0s linear var(--t-base);
}
.has-dropdown:hover > .dropdown,
.has-dropdown:focus-within > .dropdown,
.has-dropdown.is-open > .dropdown {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
  transition: opacity var(--t-base) var(--ease),
              transform var(--t-base) var(--ease-out),
              visibility 0s;
}
.dropdown a {
  position: relative;
  display: block; padding: 10px 14px;
  font-size: 13.5px; font-weight: 600; color: var(--ink-2);
  border-radius: var(--r-sm);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), padding-left var(--t-fast) var(--ease);
}
.dropdown a::before {
  content: ""; position: absolute; left: 6px; top: 50%;
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--primary);
  opacity: 0; transform: translateY(-50%);
  transition: opacity var(--t-fast) var(--ease);
}
.dropdown a:hover { background: var(--warm); color: var(--primary); padding-left: 20px; }
.dropdown a:hover::before { opacity: 1; }

/* header CTA */
.nav-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--primary); color: #fff;
  font-size: 13.5px; font-weight: 700;
  padding: 12px 22px; border-radius: var(--r-sm);
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(94,20,38,.28);
  transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), box-shadow var(--t-base) var(--ease);
}
.nav-cta:hover { background: var(--primary-deep); transform: translateY(-1px); box-shadow: var(--sh-brand); }
.nav-cta:active { transform: translateY(0); }

/* burger */
.nav-toggle {
  display: none;
  width: 46px; height: 46px;
  align-items: center; justify-content: center;
  background: none; border: 1px solid var(--line); border-radius: var(--r-sm);
  cursor: pointer; padding: 0;
}
.nav-toggle span {
  display: block; width: 19px; height: 2px; background: var(--ink); border-radius: 2px;
  position: relative;
  transition: transform var(--t-base) var(--ease-out), opacity var(--t-fast) var(--ease);
}
.nav-toggle span::before, .nav-toggle span::after {
  content: ""; position: absolute; left: 0; width: 19px; height: 2px;
  background: var(--ink); border-radius: 2px;
  transition: transform var(--t-base) var(--ease-out);
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }
.nav-toggle[aria-expanded="true"] span { transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(-90deg); }
.nav-toggle[aria-expanded="true"] span::after { opacity: 0; }

/* between the breakpoint and a roomy desktop, seven items plus a
   CTA need tighter tracking or they overflow the bar */
@media (max-width: 1320px) {
  .nav { gap: 12px; padding-left: 24px; padding-right: 24px; }
  .nav-links { gap: 0; }
  .nav-links a.top-link { font-size: 13px; padding: 10px 8px; }
  .nav-links a.top-link.active::after { left: 8px; right: 8px; }
  .nav-cta { padding: 12px 16px; font-size: 13px; }
  .logo-lockup { height: 34px; }
}

/* mobile panel */
.mobile-panel { display: none; }
.nav-scrim { display: none; }

@media (max-width: 1140px) {
  .nav-links { display: none; }
  .nav-cta.desktop-only { display: none; }
  .nav-toggle { display: flex; }

  .mobile-panel {
    display: block;
    position: fixed; inset: 0 0 0 auto;
    width: min(400px, 88vw);
    background: var(--paper);
    border-left: 1px solid var(--line);
    box-shadow: -30px 0 70px rgba(23,19,15,.16);
    padding: 96px var(--gutter) 40px;
    overflow-y: auto;
    z-index: 190;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform var(--t-slow) var(--ease-out), visibility 0s linear var(--t-slow);
  }
  .mobile-panel.open {
    transform: translateX(0); visibility: visible;
    transition: transform var(--t-slow) var(--ease-out), visibility 0s;
  }

  .mobile-panel a {
    display: block; padding: 15px 0;
    border-bottom: 1px solid var(--line-soft);
    font-family: var(--display);
    font-size: 19px; font-weight: 600; font-stretch: 102%;
    letter-spacing: -0.015em; color: var(--ink);
    opacity: 0; transform: translateX(18px);
    transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease-out), color var(--t-fast) var(--ease);
  }
  .mobile-panel.open a { opacity: 1; transform: translateX(0); }
  .mobile-panel a:hover, .mobile-panel a:focus-visible { color: var(--primary); }

  .mobile-panel .nav-cta {
    display: flex; margin-bottom: 26px; padding: 15px 22px;
    font-family: var(--body); font-size: 14.5px; color: #fff;
    border-bottom: 0;
  }
  .mobile-panel .nav-cta:hover { color: #fff; }

  .nav-scrim {
    display: block;
    position: fixed; inset: 0; z-index: 180;
    background: rgba(23,19,15,.5);
    backdrop-filter: blur(3px);
    opacity: 0; visibility: hidden;
    transition: opacity var(--t-base) var(--ease), visibility 0s linear var(--t-base);
  }
  .nav-scrim.show {
    opacity: 1; visibility: visible;
    transition: opacity var(--t-base) var(--ease), visibility 0s;
  }
  body.nav-open { overflow: hidden; }
}

/* ---------------------------------------------------------
   8. BUTTONS & LINKS
   --------------------------------------------------------- */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px;
  font-family: var(--body); font-weight: 700; font-size: 15px;
  letter-spacing: -0.005em;
  padding: 14px 28px;
  border: 1.5px solid transparent; border-radius: var(--r-sm);
  cursor: pointer;
  text-align: center;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease),
              box-shadow var(--t-base) var(--ease);
}
.btn::after {
  content: ""; width: 6px; height: 6px;
  border-right: 1.8px solid currentColor; border-top: 1.8px solid currentColor;
  transform: rotate(45deg);
  opacity: .55;
  transition: transform var(--t-base) var(--ease-out), opacity var(--t-fast) var(--ease);
}
.btn:hover::after { transform: rotate(45deg) translate(2px, -2px); opacity: 1; }
.btn.no-arrow::after { display: none; }

.btn-primary { background: var(--primary); color: #fff; box-shadow: 0 1px 2px rgba(94,20,38,.3); }
.btn-primary:hover { background: var(--primary-deep); transform: translateY(-2px); box-shadow: var(--sh-brand); }
.btn-primary:active { transform: translateY(0); }

.btn-outline { border-color: var(--line); color: var(--ink); background: var(--paper); }
.btn-outline:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-pale); transform: translateY(-2px); }

.btn-ghost-dark { border-color: rgba(255,255,255,.32); color: #fff; }
.btn-ghost-dark:hover { border-color: #fff; background: rgba(255,255,255,.1); transform: translateY(-2px); }

.cta-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
/* on a phone, ragged button widths read as an accident */
@media (max-width: 560px) {
  .cta-row { flex-direction: column; align-items: stretch; }
  .cta-row .btn { width: 100%; }
}

.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 700; color: var(--primary);
  padding: 11px 0;
}
.link-arrow svg { width: 15px; height: 15px; transition: transform var(--t-base) var(--ease-out); }
.link-arrow:hover svg { transform: translateX(4px); }

/* ---------------------------------------------------------
   9. MEDIA — the fold (signature)
   ------------------------------------------------------------
   Every feature image sits in front of a burgundy triangular
   fold, offset behind it: the Stanfords mark peeking out from
   behind the photograph. The fold and the image parallax at
   slightly different rates, so the two planes separate as the
   page scrolls.
   --------------------------------------------------------- */
.media-frame { position: relative; isolation: isolate; }

/* the plane: a brand-coloured block set behind the photograph and
   offset outward, so the picture reads as mounted rather than
   pasted on. It drifts at its own rate as the page scrolls. */
.media-frame::before {
  content: "";
  position: absolute; z-index: 0;
  inset: var(--fold) calc(var(--fold) * -1) calc(var(--fold) * -1) var(--fold);
  border-radius: var(--r-md);
  background: linear-gradient(150deg, var(--primary-lift), var(--primary-deep));
  transform: translate3d(0, var(--fold-shift, 0px), 0);
  will-change: transform;
}
/* mirrored, for pictures that sit on the left of a split */
.media-frame.fold-left::before {
  inset: var(--fold) var(--fold) calc(var(--fold) * -1) calc(var(--fold) * -1);
}
.media-frame.fold-navy::before { background: linear-gradient(150deg, var(--navy), var(--navy-deep)); }
.media-frame.fold-gold::before { background: linear-gradient(150deg, var(--gold-soft), var(--gold)); }
.media-frame.no-fold::before { display: none; }

/* the picture itself */
.media {
  position: relative; z-index: 1;
  overflow: hidden;
  border-radius: var(--r-md);
  background-color: var(--warm-deep);
  background-image: var(--lqip);
  background-size: cover;
  background-position: center;
  box-shadow: var(--sh-2);
}
.media::after {
  /* a whisper of brand warmth so stock photography reads as one set */
  content: "";
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(165deg, rgba(138,31,56,.10), rgba(22,34,79,.13));
  mix-blend-mode: multiply;
  pointer-events: none;
}
.media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--focal, 50% 45%);
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 700ms var(--ease), transform 1200ms var(--ease-out);
}
.media img.is-loaded { opacity: 1; transform: scale(1); }

.media.r-4-3  { aspect-ratio: 4 / 3; }
.media.r-3-4  { aspect-ratio: 3 / 4; }
.media.r-16-9 { aspect-ratio: 16 / 9; }
.media.r-1-1  { aspect-ratio: 1 / 1; }
.media.r-5-4  { aspect-ratio: 5 / 4; }
.media.fill   { height: 100%; min-height: 300px; }

/* figure wrapper: keeps the caption clear of the plane's overhang */
.media-figure { margin: 0; }
.media-figure .media-cap { margin-top: calc(var(--fold) + 16px); }

/* caption, in the utility voice */
.media-cap {
  display: flex; align-items: flex-start; gap: 9px;
  margin-top: 14px;
  font-family: var(--mono); font-size: 10.5px; font-weight: 400;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-faint);
  line-height: 1.5;
}
.media-cap::before {
  content: ""; flex-shrink: 0;
  width: 14px; height: 1px; margin-top: 8px;
  background: var(--gold);
}
.section-dark .media-cap { color: rgba(255,255,255,.62); }
.section-dark .media-cap::before { background: var(--gold-soft); }

/* parallax hook */
.parallax { will-change: transform; }

/* ---------------------------------------------------------
   10. HERO
   --------------------------------------------------------- */
.hero {
  position: relative;
  padding: clamp(52px, 6vw, 88px) 0 clamp(56px, 6vw, 88px);
  background: var(--warm);
  overflow: hidden;
}
/* a quiet architectural grid, the kind you find on a spec sheet */
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(23,19,15,.028) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(23,19,15,.028) 1px, transparent 1px);
  background-size: 84px 84px;
  mask-image: radial-gradient(120% 100% at 50% 0%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(120% 100% at 50% 0%, #000 20%, transparent 78%);
  pointer-events: none;
}
.hero > * { position: relative; z-index: 1; }

.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(40px, 4.6vw, 68px);
  /* top-aligned, not centred: centring makes the headline sit at a
     different height on every page depending on how much copy follows
     it, so the heroes stop lining up with each other */
  align-items: start;
}
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; gap: 42px; } }

/* headline: masked line reveal */
.hero h1 { font-size: clamp(2.35rem, 4.35vw, 3.85rem); }
.hero h1 .line { display: block; overflow: hidden; padding-bottom: 0.06em; }
.hero h1 .line > span {
  display: block;
  transform: translateY(105%);
  transition: transform 900ms var(--ease-out);
}
.is-ready .hero h1 .line > span { transform: translateY(0); }
.is-ready .hero h1 .line:nth-child(2) > span { transition-delay: 90ms; }
.is-ready .hero h1 .line:nth-child(3) > span { transition-delay: 180ms; }

/* the rest of the hero follows the headline in */
.hero .hero-step {
  opacity: 0; transform: translateY(20px);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease-out);
}
.is-ready .hero .hero-step { opacity: 1; transform: translateY(0); }
.is-ready .hero .hero-step.s1 { transition-delay: 260ms; }
.is-ready .hero .hero-step.s2 { transition-delay: 360ms; }
.is-ready .hero .hero-step.s3 { transition-delay: 450ms; }
.is-ready .hero .hero-step.s4 { transition-delay: 540ms; }

/* Most heroes open with an eyebrow label above the headline. The
   homepage does not, so its heading would start ~43px higher than
   every other page. Reserve the space the label would have taken so
   all eleven headlines begin at the same height. */
.hero h1:first-child { margin-top: var(--eyebrow-space); }

/* text-only hero (interior pages) */
.hero-lead { max-width: 900px; }
.hero-lead h1 { font-size: clamp(2.3rem, 4.6vw, 3.9rem); }
.hero-lead .lede { max-width: 62ch; }
.hero-lead .lede + .lede { margin-top: -8px; }

/* hero with a photographic bed */
.hero-shot {
  background: var(--ink);
  /* top padding matches .hero so every headline starts at the same
     height; the extra room goes at the bottom, where the photograph
     needs it and nothing is competing for the fold */
  padding: clamp(52px, 6vw, 88px) 0 clamp(72px, 8vw, 116px);
}
.hero-shot::before { display: none; }
.hero-shot .hero-bg {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
}
.hero-shot .hero-bg img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: var(--focal, 50% 42%);
  opacity: 0; transform: scale(1.08);
  transition: opacity 1000ms var(--ease), transform 1600ms var(--ease-out);
}
.hero-shot .hero-bg img.is-loaded { opacity: 1; transform: scale(1); }
.hero-shot .hero-bg::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(105deg, rgba(23,19,15,.94) 8%, rgba(23,19,15,.80) 42%, rgba(23,19,15,.44) 100%),
    linear-gradient(to top, rgba(94,20,38,.42), transparent 58%);
}
.hero-shot h1, .hero-shot h2 { color: #fff; }
.hero-shot .lede { color: rgba(255,255,255,.78); }
.hero-shot .eyebrow { color: var(--gold-soft); }
.hero-shot .btn-outline {
  background: transparent; border-color: rgba(255,255,255,.34); color: #fff;
}
.hero-shot .btn-outline:hover { background: rgba(255,255,255,.1); border-color: #fff; color: #fff; }

/* ---------------------------------------------------------
   11. CREDIBILITY STRIP — marquee
   --------------------------------------------------------- */
.cred-strip {
  background: var(--paper);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 20px 0;
  overflow: hidden;
}
.cred-viewport {
  position: relative;
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.cred-track {
  display: flex; width: max-content;
  animation: cred-scroll 46s linear infinite;
}
.cred-viewport:hover .cred-track { animation-play-state: paused; }
@keyframes cred-scroll { to { transform: translateX(-50%); } }

.cred-row { display: flex; align-items: center; gap: 0; padding-right: 0; }
.cred-item {
  display: flex; align-items: center; gap: 10px;
  padding: 0 26px;
  font-family: var(--mono); font-size: 12.5px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-2); white-space: nowrap;
}
.cred-item .dot {
  width: 9px; height: 6px; flex-shrink: 0;
  background: var(--gold);
  clip-path: polygon(24% 0, 100% 0, 76% 100%, 0 100%);
}

/* static variant (used inside cards, where motion would be noise) */
.cred-strip.is-static { overflow: visible; }
.cred-strip.is-static .cred-viewport { mask-image: none; -webkit-mask-image: none; }
.cred-strip.is-static .cred-track { animation: none; width: 100%; display: block; }
.cred-strip.is-static .cred-row { flex-wrap: wrap; justify-content: center; row-gap: 12px; }
/* the marquee duplicates its row to loop seamlessly; a static strip
   must not show the copy */
.cred-strip.is-static .cred-row[aria-hidden="true"] { display: none; }
/* nowrap is what keeps the marquee on one line; once the row wraps, the
   longest credential is wider than a phone and has to break */
.cred-strip.is-static .cred-item { white-space: normal; padding: 0 16px; text-align: center; }

/* ---------------------------------------------------------
   12. PILLAR CARDS
   --------------------------------------------------------- */
.pillar-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
/* item counts that do not divide by four get their own column count,
   so no row is ever left with empty cells */
.pillar-grid.cols-3 { grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 1000px) { .pillar-grid, .pillar-grid.cols-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px)  { .pillar-grid, .pillar-grid.cols-3 { grid-template-columns: 1fr; } }

.pillar-card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 28px 24px 30px;
  overflow: hidden;
  transition: transform var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease);
}
/* a fold that grows out of the corner on hover */
.pillar-card::after {
  content: "";
  position: absolute; top: 0; right: 0;
  width: 46px; height: 46px;
  background: linear-gradient(225deg, var(--primary-pale) 50%, transparent 50%);
  opacity: 0;
  transform: translate(10px, -10px);
  transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease-out);
}
.pillar-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-2);
  border-color: var(--primary-pale);
}
.pillar-card:hover::after { opacity: 1; transform: translate(0, 0); }

.pillar-card .num {
  display: block;
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--ink-faint);
  margin-bottom: 16px;
}
.pillar-card h3 { font-size: 1.05rem; margin-bottom: 10px; line-height: 1.25; }
.pillar-card p { font-size: 14.5px; line-height: 1.6; margin-bottom: 0; }
.pillar-card > h3:only-child { margin-bottom: 0; }

/* a rule that draws in under the heading */
.pillar-card h3::after {
  content: "";
  display: block; width: 22px; height: 2px;
  margin-top: 12px;
  background: var(--gold);
  transform: scaleX(1); transform-origin: 0 50%;
  transition: transform var(--t-base) var(--ease-out), background var(--t-base) var(--ease);
}
.pillar-card:hover h3::after { transform: scaleX(2.1); background: var(--primary); }

/* ---------------------------------------------------------
   13. CHIPS
   --------------------------------------------------------- */
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; }
.chip-row.center { justify-content: center; }

.chip {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px;
  padding: 11px 20px;
  font-size: 14px; font-weight: 600;
  color: var(--ink-2);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease-out),
              box-shadow var(--t-base) var(--ease);
}
a.chip:hover, .chip:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-pale);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(138,31,56,.12);
}
.chip.status {
  border-style: dashed; border-color: var(--gold-soft);
  background: var(--gold-pale); color: #6E5423;
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  min-height: 34px; padding: 7px 14px;
}
.chip.status:hover { transform: none; box-shadow: none; border-color: var(--gold-soft); color: #6E5423; background: var(--gold-pale); }

.chip.on-dark {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.22);
  color: rgba(255,255,255,.92);
}
.chip.on-dark:hover {
  background: rgba(255,255,255,.12);
  border-color: var(--gold-soft);
  color: #fff;
}
.meet-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

/* ---------------------------------------------------------
   14. SECTOR CARDS
   --------------------------------------------------------- */
.sector-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 940px) { .sector-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .sector-grid { grid-template-columns: 1fr; } }

.sector-card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: transform var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease);
}
.sector-card:hover { transform: translateY(-5px); box-shadow: var(--sh-3); border-color: transparent; }

.sector-thumb {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background-color: var(--warm-deep);
  background-image: var(--lqip);
  background-size: cover; background-position: center;
}
.sector-thumb img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: var(--focal, 50% 45%);
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 600ms var(--ease), transform 900ms var(--ease-out);
}
.sector-thumb img.is-loaded { opacity: 1; transform: scale(1); }
.sector-card:hover .sector-thumb img.is-loaded { transform: scale(1.07); }
.sector-thumb::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(138,31,56,.13), rgba(22,34,79,.15));
  mix-blend-mode: multiply;
  transition: opacity var(--t-base) var(--ease);
}
.sector-card:hover .sector-thumb::after { opacity: .55; }

.sector-body { padding: 24px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.sector-body h3 { font-size: 1.08rem; margin-bottom: 10px; }
.sector-body p { font-size: 14.5px; line-height: 1.62; margin-bottom: 18px; }
.sector-body .link-arrow { margin-top: auto; font-size: 13.5px; }

/* the whole card is the target, but the visible link keeps the label */
.sector-body .link-arrow::before {
  content: ""; position: absolute; inset: 0; z-index: 3;
}

/* ---------------------------------------------------------
   15. FLOW — a real sequence, so the numbers earn their place
   --------------------------------------------------------- */
.flow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0; }
@media (max-width: 1000px) { .flow { grid-template-columns: repeat(3, 1fr); row-gap: 34px; } }
@media (max-width: 580px)  { .flow { grid-template-columns: repeat(2, 1fr); row-gap: 30px; } }

.flow-step { position: relative; text-align: center; padding: 0 10px; }
.flow-step .num-badge {
  position: relative; z-index: 1;
  width: 46px; height: 46px; margin: 0 auto 16px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--paper);
  border: 1.5px solid var(--line);
  font-family: var(--mono); font-size: 13px; font-weight: 500;
  color: var(--primary);
  transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease), transform var(--t-base) var(--ease-out);
}
.flow-step:hover .num-badge {
  background: var(--primary); color: #fff; border-color: var(--primary);
  transform: translateY(-3px) scale(1.06);
}
/* the connector: drawn left-to-right as the row reveals */
.flow-step:not(:last-child)::after {
  content: "";
  position: absolute; top: 23px; left: 50%; width: 100%; height: 1.5px;
  background: var(--line); z-index: 0;
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 620ms var(--ease-out);
}
.flow.in .flow-step:not(:last-child)::after { transform: scaleX(1); }
.flow.in .flow-step:nth-child(1)::after { transition-delay: 120ms; }
.flow.in .flow-step:nth-child(2)::after { transition-delay: 240ms; }
.flow.in .flow-step:nth-child(3)::after { transition-delay: 360ms; }
.flow.in .flow-step:nth-child(4)::after { transition-delay: 480ms; }
.flow.in .flow-step:nth-child(5)::after { transition-delay: 600ms; }
.flow.in .flow-step:nth-child(6)::after { transition-delay: 720ms; }
@media (max-width: 1000px) { .flow-step:nth-child(3n)::after { display: none; } }
@media (max-width: 580px)  { .flow-step:nth-child(2n)::after { display: none; } }

.flow-step h3 {
  font-family: var(--body); font-size: 13.5px; font-weight: 700;
  letter-spacing: 0; line-height: 1.35; color: var(--ink-2);
}
.flow-step p { font-size: 12px; margin-top: 5px; }

/* ---------------------------------------------------------
   16. DEVICE MOCKUP
   --------------------------------------------------------- */
.device-frame {
  background: var(--ink);
  border-radius: var(--r-lg);
  padding: 14px;
  box-shadow: var(--sh-3), 0 60px 110px rgba(23,19,15,.2);
}
.device-screen { background: var(--paper); border-radius: 9px; overflow: hidden; }
.device-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 11px 15px;
  border-bottom: 1px solid var(--line);
  background: var(--warm);
}
.device-bar span { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.device-bar span:first-child { background: #E0C3C9; }
.device-body { padding: 22px; }
.device-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.device-row .device-label {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint);
}
.device-chip {
  font-family: var(--mono); font-size: 9.5px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--primary); background: var(--primary-pale);
  padding: 5px 10px; border-radius: 999px;
}
.device-bars { display: flex; align-items: flex-end; gap: 8px; height: 78px; margin-bottom: 20px; }
.device-bars div {
  flex: 1; border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, var(--gold), rgba(176,131,52,.22));
  transform: scaleY(0); transform-origin: 50% 100%;
  transition: transform 760ms var(--ease-out);
}
.device-frame.in .device-bars div { transform: scaleY(1); }
.device-frame.in .device-bars div:nth-child(1) { transition-delay: 60ms; }
.device-frame.in .device-bars div:nth-child(2) { transition-delay: 130ms; }
.device-frame.in .device-bars div:nth-child(3) { transition-delay: 200ms; }
.device-frame.in .device-bars div:nth-child(4) { transition-delay: 270ms; }
.device-frame.in .device-bars div:nth-child(5) { transition-delay: 340ms; }
.device-frame.in .device-bars div:nth-child(6) { transition-delay: 410ms; }
.device-list { display: grid; gap: 11px; }
.device-list-item {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: var(--ink-soft);
  opacity: 0; transform: translateX(-8px);
  transition: opacity 520ms var(--ease), transform 520ms var(--ease-out);
}
.device-frame.in .device-list-item { opacity: 1; transform: translateX(0); }
.device-frame.in .device-list-item:nth-child(1) { transition-delay: 460ms; }
.device-frame.in .device-list-item:nth-child(2) { transition-delay: 540ms; }
.device-frame.in .device-list-item:nth-child(3) { transition-delay: 620ms; }
.device-list-item .ic {
  width: 9px; height: 6px; flex-shrink: 0;
  background: var(--primary);
  clip-path: polygon(24% 0, 100% 0, 76% 100%, 0 100%);
}

/* ---------------------------------------------------------
   17. CTA BANNER
   --------------------------------------------------------- */
.cta-banner {
  position: relative;
  border-radius: var(--r-lg);
  padding: clamp(38px, 5vw, 64px) clamp(28px, 4vw, 58px);
  background: linear-gradient(125deg, var(--primary) 0%, var(--primary-deep) 58%, var(--navy-deep) 130%);
  color: #fff;
  display: flex; justify-content: space-between; align-items: center;
  gap: 34px; flex-wrap: wrap;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(94,20,38,.26);
}
/* the mark, oversized and cropped, as ambient structure */
.cta-banner::before {
  content: "";
  position: absolute; right: -60px; top: -70px;
  width: 380px; aspect-ratio: 143 / 87;
  background: rgba(255,255,255,.055);
  clip-path: polygon(24% 0, 100% 0, 76% 100%, 0 100%);
  pointer-events: none;
}
.cta-banner::after {
  content: "";
  position: absolute; right: 90px; bottom: -110px;
  width: 260px; aspect-ratio: 143 / 87;
  background: rgba(255,255,255,.04);
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  pointer-events: none;
}
.cta-banner > * { position: relative; z-index: 1; }
.cta-banner h2 { color: #fff; font-size: clamp(1.6rem, 2.9vw, 2.35rem); max-width: 22ch; }
.cta-banner p { color: rgba(255,255,255,.8); max-width: 48ch; margin-top: 14px; font-size: 15.5px; }
.cta-banner .btn-primary {
  background: #fff; color: var(--primary); flex-shrink: 0;
  box-shadow: 0 10px 26px rgba(23,19,15,.22);
}
.cta-banner .btn-primary:hover { background: var(--warm); color: var(--primary-deep); box-shadow: 0 16px 36px rgba(23,19,15,.3); }

/* ---------------------------------------------------------
   18. NEWS / FEATURE CARD
   --------------------------------------------------------- */
.news-card {
  display: grid; grid-template-columns: 1fr 1fr;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--paper);
  box-shadow: var(--sh-1);
}
@media (max-width: 820px) { .news-card { grid-template-columns: 1fr; } }
.news-card .media { border-radius: 0; box-shadow: none; height: 100%; min-height: 300px; }
.news-card .media-frame::before { display: none; }
.news-body-lg { padding: clamp(28px, 4vw, 46px); display: flex; flex-direction: column; justify-content: center; }
.news-body-lg h2 { font-size: clamp(1.4rem, 2.3vw, 1.85rem); }

/* ---------------------------------------------------------
   19. LISTS, NOTES, TILES
   --------------------------------------------------------- */
.value-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.value-list li {
  display: flex; gap: 13px; align-items: flex-start;
  font-size: 15.5px; color: var(--ink-soft); line-height: 1.6;
}
.value-list li::before {
  content: ""; flex-shrink: 0;
  width: 10px; height: 7px; margin-top: 9px;
  background: var(--gold);
  clip-path: polygon(24% 0, 100% 0, 76% 100%, 0 100%);
}

.status-note {
  display: flex; gap: 13px; align-items: flex-start;
  background: var(--gold-pale);
  border: 1px solid rgba(176,131,52,.32);
  border-left: 3px solid var(--gold);
  border-radius: var(--r-sm);
  padding: 17px 20px;
  font-size: 13.5px; line-height: 1.6; color: #6B5321;
}
.status-note svg { width: 17px; height: 17px; stroke: var(--gold); fill: none; flex-shrink: 0; margin-top: 2px; }

.route-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
@media (max-width: 1199px) { .route-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 899px)  { .route-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 599px)  { .route-grid { grid-template-columns: 1fr; } }
.route-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 26px 24px;
  border-top: 3px solid var(--primary);
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease);
}
.route-card:hover { transform: translateY(-4px); box-shadow: var(--sh-2); }
.route-card h3 { font-size: 1.02rem; margin-bottom: 10px; }
a.route-card { display: block; }
a.route-card:hover h3 { color: var(--primary); }
.route-card p { font-size: 14px; margin-bottom: 0; line-height: 1.6; }

.strength-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px 22px; }
@media (max-width: 940px) { .strength-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .strength-grid { grid-template-columns: 1fr; } }
.strength-tile { position: relative; border-top: 1px solid var(--line); padding: 20px 0 0; }
.strength-tile::before {
  content: ""; position: absolute; top: -1px; left: 0;
  width: 34px; height: 2px; background: var(--gold);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 520ms var(--ease-out);
}
.strength-grid.in .strength-tile::before { transform: scaleX(1); }
.strength-tile h3 {
  font-family: var(--body); font-size: 15px; font-weight: 700;
  color: var(--ink); margin-bottom: 7px; line-height: 1.35;
}
.strength-tile p { font-size: 13.5px; margin-bottom: 0; line-height: 1.6; }

/* spec table — the assessment-criteria voice */
.spec-table {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--paper);
  box-shadow: var(--sh-1);
}
.spec-row {
  display: grid; grid-template-columns: 190px 1fr;
  gap: 20px;
  padding: 15px 22px;
  border-bottom: 1px solid var(--line-soft);
  transition: background var(--t-fast) var(--ease);
}
.spec-row:last-child { border-bottom: 0; }
.spec-row:hover { background: var(--warm); }
.spec-row .k {
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--primary); padding-top: 3px;
}
.spec-row .v { font-size: 14.5px; color: var(--ink-2); line-height: 1.55; }
@media (max-width: 560px) {
  .spec-row { grid-template-columns: 1fr; gap: 6px; padding: 14px 18px; }
}

.stat-block { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
@media (max-width: 700px) { .stat-block { grid-template-columns: repeat(2, 1fr); } }
.stat-block .stat .num { font-family: var(--display); font-size: 2rem; font-weight: 700; color: var(--primary); }
.stat-block .stat .lbl { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); margin-top: 6px; }

/* ---------------------------------------------------------
   20. FORMS & CONTACT
   --------------------------------------------------------- */
.contact-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(40px, 5vw, 68px); align-items: start; }
.contact-grid > * { min-width: 0; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

.form-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(26px, 3.4vw, 40px);
  box-shadow: var(--sh-1);
}

.form-field { margin-bottom: 20px; }
.form-field label {
  display: block;
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 9px;
}
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  min-height: 50px;
  font-family: var(--body); font-size: 15.5px; color: var(--ink);
  padding: 13px 16px;
  background: var(--warm);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
  appearance: none; -webkit-appearance: none;
}
.form-field select {
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%),
                    linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%);
  background-position: calc(100% - 21px) 22px, calc(100% - 15px) 22px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 44px;
}
.form-field textarea { resize: vertical; min-height: 128px; padding-top: 14px; }
.form-field input:hover,
.form-field select:hover,
.form-field textarea:hover { border-color: var(--ink-faint); }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  background: var(--paper);
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(138,31,56,.14);
}
.form-field input::placeholder, .form-field textarea::placeholder { color: var(--ink-faint); }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
@media (max-width: 620px) { .form-row { grid-template-columns: 1fr; } }

/* honeypot: hidden from people, filled in by most bots. Not
   display:none, which some bots skip. */
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.form-note { font-size: 13px; color: var(--ink-faint); margin-top: 16px; line-height: 1.55; }

button[type="submit"]:disabled { opacity: .72; cursor: default; transform: none; }
button[type="submit"].is-sent { background: #2E6B45; border-color: #2E6B45; }
button[type="submit"].is-sent:hover { background: #2E6B45; transform: none; box-shadow: none; }
button[type="submit"].is-failed { background: var(--primary-deep); }

.form-note.is-ok    { color: #2E6B45; font-weight: 600; }
.form-note.is-error { color: var(--primary); font-weight: 600; }

.contact-detail {
  display: flex; gap: 18px; align-items: baseline;
  padding: 15px 0;
  border-bottom: 1px solid var(--line-soft);
}
.contact-detail:first-of-type { padding-top: 0; }
.contact-detail:last-of-type { border-bottom: 0; }
.contact-detail .k {
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--primary);
  width: 92px; flex-shrink: 0;
}
.contact-detail .v {
  font-size: 15.5px; color: var(--ink); line-height: 1.55;
  /* the email address is a single unbreakable token; without this it
     sets a floor on the grid column and pushes the page wider than a
     small phone */
  min-width: 0; overflow-wrap: anywhere;
}
@media (max-width: 430px) {
  .contact-detail { flex-direction: column; gap: 5px; }
  .contact-detail .k { width: auto; }
}
.contact-detail .v a { border-bottom: 1px solid var(--line); transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.contact-detail .v a:hover { color: var(--primary); border-color: var(--primary); }

.contact-block { margin-top: 34px; padding-top: 28px; border-top: 1px solid var(--line); }

/* ---------------------------------------------------------
   21. FOOTER
   --------------------------------------------------------- */
.site-footer {
  position: relative;
  background: var(--ink);
  color: rgba(255,255,255,.62);
  padding: 78px 0 32px;
  overflow: hidden;
}
.site-footer::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(52% 78% at 6% 0%, rgba(138,31,56,.3), transparent 62%),
    radial-gradient(46% 70% at 96% 96%, rgba(34,53,127,.26), transparent 62%);
  pointer-events: none;
}
.site-footer .wrap { position: relative; z-index: 1; }

.footer-top {
  display: grid;
  grid-template-columns: 1.35fr repeat(4, 1fr);
  gap: 34px 26px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
@media (max-width: 1040px) { .footer-top { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 680px)  { .footer-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 430px)  { .footer-top { grid-template-columns: 1fr; } }

.footer-brand .logo-lockup { height: 42px; }
.footer-tagline {
  font-family: var(--display);
  font-size: 16px; font-weight: 600; font-stretch: 102%;
  letter-spacing: -0.015em;
  color: rgba(255,255,255,.8);
  margin-top: 20px; max-width: 26ch; line-height: 1.35;
}
.footer-meta { font-size: 13.5px; color: rgba(255,255,255,.5); margin-top: 16px; line-height: 1.6; }

.footer-col h2 {
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255,255,255,.56);
  margin: 0 0 18px;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.footer-col a {
  font-size: 14px; color: rgba(255,255,255,.66);
  transition: color var(--t-fast) var(--ease);
}
.footer-col a:hover { color: #fff; }

.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 14px;
  padding-top: 26px;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.05em;
  color: rgba(255,255,255,.58);
}

/* ---------------------------------------------------------
   22. REVEAL
   --------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(26px); }
.reveal.in { opacity: 1; transform: none; transition: opacity 780ms var(--ease), transform 780ms var(--ease-out); }

/* children stagger where the parent asks for it */
.stagger > * { opacity: 0; transform: translateY(24px); }
.stagger.in > * { opacity: 1; transform: none; transition: opacity 640ms var(--ease), transform 640ms var(--ease-out); }
.stagger.in > *:nth-child(1) { transition-delay: 0ms; }
.stagger.in > *:nth-child(2) { transition-delay: 65ms; }
.stagger.in > *:nth-child(3) { transition-delay: 130ms; }
.stagger.in > *:nth-child(4) { transition-delay: 195ms; }
.stagger.in > *:nth-child(5) { transition-delay: 260ms; }
.stagger.in > *:nth-child(6) { transition-delay: 325ms; }
.stagger.in > *:nth-child(7) { transition-delay: 390ms; }
.stagger.in > *:nth-child(8) { transition-delay: 455ms; }
.stagger.in > *:nth-child(9) { transition-delay: 520ms; }

/* ---------------------------------------------------------
   23. REDUCED MOTION
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal, .stagger > * { opacity: 1 !important; transform: none !important; }
  .hero h1 .line > span { transform: none !important; }
  .hero .hero-step { opacity: 1 !important; transform: none !important; }
  .media img, .hero-shot .hero-bg img { opacity: 1 !important; transform: none !important; }
  .cred-track { animation: none !important; width: 100% !important; display: block !important; }
  .cred-viewport { mask-image: none !important; -webkit-mask-image: none !important; }
  .cred-row { flex-wrap: wrap; justify-content: center; row-gap: 12px; }
  .cred-row[aria-hidden="true"] { display: none !important; }
  .cred-item { white-space: normal; padding: 0 16px; }
  .flow-step::after { transform: scaleX(1) !important; }
  .device-bars div { transform: scaleY(1) !important; }
  .device-list-item { opacity: 1 !important; transform: none !important; }
  .strength-tile::before { transform: scaleX(1) !important; }
  .parallax { transform: none !important; }
  .media-frame::before { transform: none !important; }
}

/* ---------------------------------------------------------
   25. WHATSAPP BUTTON
   ------------------------------------------------------------
   A circle that grows into a pill on hover. WhatsApp's own green
   is used deliberately: people scan for that colour and glyph,
   and a control nobody recognises is a control nobody presses.
   --------------------------------------------------------- */
.wa-float {
  --wa: #25D366;
  --wa-deep: #128C7E;

  position: fixed;
  right: clamp(16px, 2.2vw, 28px);
  bottom: clamp(16px, 2.2vw, 28px);
  z-index: 150;

  display: inline-flex; align-items: center; gap: 0;
  height: 56px; padding: 0 16px;
  border-radius: 999px;
  background: var(--wa);
  color: #fff;
  box-shadow: 0 6px 18px rgba(18,140,126,.34), 0 2px 4px rgba(23,19,15,.12);

  opacity: 0; transform: translateY(14px) scale(.9);
  transition: opacity 420ms var(--ease), transform 420ms var(--ease-out),
              background 200ms var(--ease), box-shadow 260ms var(--ease);
}
.is-ready .wa-float { opacity: 1; transform: none; transition-delay: 900ms; }

.wa-float .wa-glyph { width: 26px; height: 26px; fill: currentColor; flex-shrink: 0; }

/* the label is folded away until the pointer arrives */
.wa-float .wa-label {
  font-family: var(--body); font-size: 14.5px; font-weight: 700;
  letter-spacing: -0.005em; white-space: nowrap;
  max-width: 0; opacity: 0; overflow: hidden;
  transition: max-width 320ms var(--ease-out), opacity 200ms var(--ease),
              margin-left 320ms var(--ease-out);
}
.wa-float:hover, .wa-float:focus-visible {
  background: var(--wa-deep);
  box-shadow: 0 10px 26px rgba(18,140,126,.42), 0 2px 6px rgba(23,19,15,.16);
  transition-delay: 0s;
}
.wa-float:hover .wa-label,
.wa-float:focus-visible .wa-label { max-width: 160px; opacity: 1; margin-left: 10px; }
.wa-float:active { transform: scale(.96); }

/* the slide-over menu owns the screen while it is open */
body.nav-open .wa-float { opacity: 0; pointer-events: none; transition-delay: 0s; }

/* On a phone there is no hover, so it stays a circle and the label
   would only ever cover content. */
@media (max-width: 720px) {
  .wa-float { height: 52px; width: 52px; padding: 0; justify-content: center; }
  .wa-float .wa-label { display: none; }
  .wa-float .wa-glyph { width: 25px; height: 25px; }
}

@media (prefers-reduced-motion: reduce) {
  .wa-float { opacity: 1 !important; transform: none !important; }
}

@media print { .wa-float { display: none !important; } }

/* ---------------------------------------------------------
   24. PRINT
   --------------------------------------------------------- */
@media print {
  .site-header, .mobile-panel, .nav-scrim, .cta-banner, .scroll-progress { display: none !important; }
  body { color: #000; font-size: 12pt; }
  .reveal, .stagger > * { opacity: 1 !important; transform: none !important; }
  section { padding: 24pt 0; }
  a { text-decoration: underline; }
}