/* ==========================================================================
   Elevate 360 — Home (v2, Bill's structure)
   Opener: photographic hero -> The five -> The Snapshot.
   Reads from tokens.css and DESIGN.md. No raw values.
   ========================================================================== */

/* --- Header over the hero ------------------------------------------------ */

.page-home .site-header {
  background: transparent;
  border-bottom-color: transparent;
  transition: background var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}

.page-home .site-header.is-over-hero,
.page-home .site-header.is-over-hero.is-stuck { box-shadow: none; }

.page-home .site-header.is-over-hero .brand { color: var(--on-navy); }
.page-home .site-header.is-over-hero .brand__mark-img--light { opacity: 0; }
.page-home .site-header.is-over-hero .brand__mark-img--hero  { opacity: 1; }
.page-home .site-header.is-over-hero .brand__360 { color: var(--gold-light); }
.page-home .site-header.is-over-hero .brand__sub { color: var(--text-inverse-muted); }
.page-home .site-header.is-over-hero .menu-toggle__bars span { background: var(--on-navy); }
.page-home .site-header.is-over-hero .site-nav__list > li > a,
.page-home .site-header.is-over-hero .site-nav__parent { color: var(--on-navy-muted); }
.page-home .site-header.is-over-hero .site-nav__list > li > a:hover,
.page-home .site-header.is-over-hero .site-nav__item:hover .site-nav__parent,
.page-home .site-header.is-over-hero .site-nav__item:focus-within .site-nav__parent,
.page-home .site-header.is-over-hero .site-nav__parent[aria-expanded="true"] { color: var(--on-navy); }
/* the dropdown panel is paper whatever the header is doing, so its links keep their own colours */
.page-home .site-header.is-over-hero .site-nav__sub a { color: var(--text); }
.page-home .site-header.is-over-hero .site-nav__sub a:hover,
.page-home .site-header.is-over-hero .site-nav__sub a[aria-current="page"] { color: var(--navy); }

.page-home .site-header:not(.is-over-hero) {
  background: var(--paper);
  border-bottom-color: var(--rule);
}

/* ==========================================================================
   1. HERO — photograph, one line, one italic
   ========================================================================== */

.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(560px, 88vh, 900px);
  min-height: clamp(560px, 88svh, 900px);
  margin-top: calc(var(--header-h) * -1);
  padding-block: calc(var(--header-h) + var(--space-3xl)) var(--space-2xl);
  background: var(--navy);
  color: var(--on-navy);
  overflow: hidden;
  isolation: isolate;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  margin: 0;
}

.hero__media picture,
.hero__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The figure's head sits in the top tenth of the frame. On wide, short
     viewports the photo is cropped top and bottom, so bias the crop upward:
     lose table, never head. */
  object-position: 70% 4%;
}

/* Grade: navy pulled up from the bottom-left so the type reads. The
   photograph is already graded; this is the last 20%. */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(15, 41, 66, 0.35) 0%, rgba(15, 41, 66, 0) 30%, rgba(15, 41, 66, 0.55) 100%),
    linear-gradient(90deg, rgba(15, 41, 66, 0.72) 0%, rgba(15, 41, 66, 0.25) 55%, rgba(15, 41, 66, 0) 100%);
}

.hero__media .slot-note { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

.hero__inner { position: relative; width: 100%; }

.hero__title {
  max-width: 18ch;
  margin-bottom: var(--space-lg);
  font-size: var(--step-5);
  font-weight: var(--weight-regular);
  font-stretch: var(--width-normal);
  line-height: 1.02;
  letter-spacing: -0.022em;
  color: var(--on-navy);
  text-shadow: 0 1px 24px rgba(15, 41, 66, 0.35);
}

.hero__title em { font-style: italic; font-weight: inherit; }

.hero__lede strong { font-weight: var(--weight-bold); color: var(--on-navy); }

.hero__lede {
  max-width: 46ch;
  margin-bottom: var(--space-2xl);
  font-size: var(--step-1);
  line-height: 1.4;
  color: var(--on-navy);
  opacity: 0.88;
}

.hero__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-lg) var(--space-2xl);
}

.hero__go {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--on-navy);
  text-decoration: none;
}

.hero__go-label {
  font-size: var(--step--1);
  font-weight: var(--weight-medium);
  font-stretch: var(--width-narrow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero__go svg { width: 12px; transition: transform var(--dur-base) var(--ease-emph); }
.hero__go:hover svg { transform: translateY(4px); }

.hero__skip {
  font-size: var(--step--1);
  color: var(--on-navy-muted);
  text-decoration: underline;
  text-decoration-color: var(--on-navy-line);
  text-underline-offset: 0.2em;
  transition: color var(--dur-fast) var(--ease-out);
}

.hero__skip:hover { color: var(--gold-light); }

/* Phones (11/3, Brandon picked option B): the wide photo can't hold both the
   man and the words on a narrow screen, so the photo sits on top with him
   fully in frame and the words follow on navy, nothing overlapping. */
@media (max-width: 767px) {
  .hero { display: block; min-height: 0; padding: 0 0 var(--space-2xl); }
  .hero__media { position: relative; inset: auto; height: 58svh; min-height: 340px; z-index: 0; }
  .hero__media img { object-position: 80% 20%; }
  .hero__media::after {
    background: linear-gradient(180deg, rgba(15, 41, 66, 0.45) 0%, rgba(15, 41, 66, 0) 28%, rgba(15, 41, 66, 0) 70%, rgba(15, 41, 66, 1) 100%);
  }
  .hero__inner { margin-top: calc(var(--space-xl) * -1); }
  .hero__title { max-width: 14ch; font-size: var(--step-4); }
  .hero__lede { font-size: var(--step-0); }
}

@media (min-width: 768px) {
  .hero {
    margin-top: calc(var(--header-h-lg) * -1);
    padding-block: calc(var(--header-h-lg) + var(--space-4xl)) var(--space-3xl);
  }
}

/* ==========================================================================
   2. THE FIVE — numbered list with a pinned guide
   data-active="0..4" on the section is written by home.js from whichever
   item is nearest the middle of the viewport. --progress follows it.
   ========================================================================== */

.five { padding-block: var(--section-y); }

.five__inner { display: grid; gap: var(--space-2xl); }

/* Guide (desktop only). data-guide="ledger" | "numeral" on .five picks the
   variant; to go back to the big counting number, change that attribute. */

.five__guide { display: none; }

.five[data-guide="ledger"] .guide__count,
.five[data-guide="ledger"] .guide__rail { display: none; }
.five[data-guide="numeral"] .ledger { display: none; }

/* Ledger: five tabs. The active one extends in gold and names the item. */
.ledger { display: grid; gap: var(--space-md); margin: 0; padding: 0; list-style: none; }
.ledger__row { display: flex; align-items: center; gap: var(--space-md); min-height: 1.5rem; }
.ledger__bar {
  flex: none;
  width: 22px;
  height: 2px;
  background: var(--rule);
  transition: width var(--dur-slow) var(--ease-emph), background-color var(--dur-base) var(--ease-out);
}
.ledger__label {
  font-size: var(--step--1);
  font-weight: var(--weight-regular);
  line-height: 1.2;
  color: var(--text-meta);
  transition: color var(--dur-base) var(--ease-out), transform var(--dur-slow) var(--ease-emph);
}
.ledger__label b {
  margin-right: 0.35em;
  font-weight: var(--weight-medium);
  font-stretch: var(--width-narrow);
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}
.five[data-active="0"] .ledger__row[data-ledger="0"] .ledger__bar,
.five[data-active="1"] .ledger__row[data-ledger="1"] .ledger__bar,
.five[data-active="2"] .ledger__row[data-ledger="2"] .ledger__bar,
.five[data-active="3"] .ledger__row[data-ledger="3"] .ledger__bar,
.five[data-active="4"] .ledger__row[data-ledger="4"] .ledger__bar { width: 64px; background: var(--gold); }
.five[data-active="0"] .ledger__row[data-ledger="0"] .ledger__label,
.five[data-active="1"] .ledger__row[data-ledger="1"] .ledger__label,
.five[data-active="2"] .ledger__row[data-ledger="2"] .ledger__label,
.five[data-active="3"] .ledger__row[data-ledger="3"] .ledger__label,
.five[data-active="4"] .ledger__row[data-ledger="4"] .ledger__label { color: var(--ink); font-weight: var(--weight-medium); }
.five[data-active="0"] .ledger__row[data-ledger="0"] .ledger__label b,
.five[data-active="1"] .ledger__row[data-ledger="1"] .ledger__label b,
.five[data-active="2"] .ledger__row[data-ledger="2"] .ledger__label b,
.five[data-active="3"] .ledger__row[data-ledger="3"] .ledger__label b,
.five[data-active="4"] .ledger__row[data-ledger="4"] .ledger__label b { color: var(--gold); }

/* With the ledger, the list itself steps too: items not in focus recede. */
@media (min-width: 1024px) {
  .five[data-guide="ledger"] .item { transition: opacity var(--dur-slow) var(--ease-out); opacity: 0.42; }
  .five[data-guide="ledger"][data-active="0"] .item[data-item="0"],
  .five[data-guide="ledger"][data-active="1"] .item[data-item="1"],
  .five[data-guide="ledger"][data-active="2"] .item[data-item="2"],
  .five[data-guide="ledger"][data-active="3"] .item[data-item="3"],
  .five[data-guide="ledger"][data-active="4"] .item[data-item="4"] { opacity: 1; }
}

.guide__count {
  position: relative;
  height: 1em;
  font-size: clamp(6rem, 9vw, 9rem);
  font-weight: var(--weight-bold);
  font-stretch: var(--width-wide);
  letter-spacing: -0.05em;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.guide__num {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  transform: translate3d(0, 0.18em, 0);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-emph);
}

.five[data-active="0"] .guide__num[data-guide-num="0"],
.five[data-active="1"] .guide__num[data-guide-num="1"],
.five[data-active="2"] .guide__num[data-guide-num="2"],
.five[data-active="3"] .guide__num[data-guide-num="3"],
.five[data-active="4"] .guide__num[data-guide-num="4"] { opacity: 1; transform: none; }

.guide__label {
  max-width: 18ch;
  margin: var(--space-md) 0 var(--space-xl);
  font-size: var(--step--1);
  line-height: var(--leading-snug);
  color: var(--text-muted);
}

.guide__rail {
  position: relative;
  width: 2px;
  height: 160px;
  background: var(--rule);
}

.guide__fill {
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  height: calc(var(--progress, 0) * 100%);
  background: var(--gold);
  transition: height var(--dur-slow) var(--ease-emph);
}

.guide__tick {
  position: absolute;
  left: -3px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--rule);
  transform: translateY(-50%);
  transition: border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}

.guide__tick[data-guide-tick="0"] { top: 0; }
.guide__tick[data-guide-tick="1"] { top: 25%; }
.guide__tick[data-guide-tick="2"] { top: 50%; }
.guide__tick[data-guide-tick="3"] { top: 75%; }
.guide__tick[data-guide-tick="4"] { top: 100%; }

.five[data-active="0"] .guide__tick[data-guide-tick="0"],
.five[data-active="1"] .guide__tick[data-guide-tick="1"],
.five[data-active="2"] .guide__tick[data-guide-tick="2"],
.five[data-active="3"] .guide__tick[data-guide-tick="3"],
.five[data-active="4"] .guide__tick[data-guide-tick="4"] { border-color: var(--gold); background: var(--gold); }

.five[data-active="0"] { --progress: 0; }
.five[data-active="1"] { --progress: 0.25; }
.five[data-active="2"] { --progress: 0.5; }
.five[data-active="3"] { --progress: 0.75; }
.five[data-active="4"] { --progress: 1; }

/* Line: no aside. One rule down the left of the list; the gold part grows
   with the scroll (home.js writes --line, 0..1, from the list's position). */
.five[data-guide="line"] .five__guide { display: none; }
.five[data-guide="line"] .five__list { position: relative; padding-left: var(--space-lg); }
.five[data-guide="line"] .five__list::before,
.five[data-guide="line"] .five__list::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
}
.five[data-guide="line"] .five__list::before { bottom: 0; background: var(--rule); }
.five[data-guide="line"] .five__list::after {
  height: calc(var(--line, 0) * 100%);
  background: var(--gold);
  transition: height 160ms linear;
}
.five[data-guide="line"] .five__list .line__tip {
  position: absolute;
  left: -3px;
  top: calc(var(--line, 0) * 100%);
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--gold);
  transform: translateY(-50%);
  transition: top 160ms linear;
}
@media (min-width: 1024px) {
  .five[data-guide="line"] .five__inner { grid-template-columns: minmax(0, 1fr); }
  /* Numerals hug the gold line; the copy stays out at the same x as before
     (2rem + column + 3rem = the old 9vw offset + 10rem). */
  .five[data-guide="line"] .five__list { max-width: 96ch; padding-left: 2rem; }
  .five[data-guide="line"] .item { grid-template-columns: calc(clamp(5rem, 9vw, 8.5rem) + 5rem) minmax(0, 1fr); column-gap: var(--space-2xl); }
  .five[data-guide="line"] .item__num { font-size: var(--step-3); padding-top: 0.12em; }
  .five[data-guide="line"] .item__title { font-size: var(--step-3); max-width: 20ch; }
  .five[data-guide="line"] .item__body { max-width: 58ch; font-size: var(--step-0); }
  .five[data-guide="line"] .item { transition: opacity var(--dur-slow) var(--ease-out); opacity: 0.42; }
  /* Under the pointer an item grows a little from its left edge and comes fully up. */
  .five[data-guide="line"] .item.is-in { transform-origin: left center; transition: opacity var(--dur-slow) var(--ease-out), transform 420ms var(--ease-emph); }
  .five[data-guide="line"] .item.is-in:hover { opacity: 1; transform: scale(1.025); }
  .five[data-guide="line"] .item:hover .item__num { color: var(--gold); }
  /* Once the line has finished its journey the five settle at full strength, none of them lit. */
  .five[data-guide="line"].is-done .item { opacity: 1; }
  .five[data-guide="line"][data-active="0"] .item[data-item="0"],
  .five[data-guide="line"][data-active="1"] .item[data-item="1"],
  .five[data-guide="line"][data-active="2"] .item[data-item="2"],
  .five[data-guide="line"][data-active="3"] .item[data-item="3"],
  .five[data-guide="line"][data-active="4"] .item[data-item="4"] { opacity: 1; }
}

/* The payoff at the end of the five. data-bridge on .five picks the version:
   "five" (the line carries on, the numerals dim) or "plain" (centred). */
.five[data-bridge="five"] .bridge--plain, .five[data-bridge="five"] .bridge--wrap { display: none; }
.five[data-bridge="plain"] .bridge--five, .five[data-bridge="plain"] .bridge--wrap { display: none; }
.five[data-bridge="wrap"] .bridge--five, .five[data-bridge="wrap"] .bridge--plain { display: none; }

/* -- plain: centred, one rule, two lines, an arrow -- */
.bridge--plain {
  display: grid;
  justify-items: center;
  gap: var(--space-sm);
  max-width: 38ch;
  margin: var(--space-3xl) auto 0;
  text-align: center;
}
.bridge__rule { width: 40px; height: 2px; margin-bottom: var(--space-md); background: var(--gold); }
.bridge__line { margin: 0; font-size: var(--step-0); color: var(--text-muted); }
.bridge__ask {
  margin: 0;
  font-size: var(--step-3);
  font-weight: var(--weight-regular);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.bridge__ask em { font-style: italic; }
.bridge__arrow {
  display: inline-flex;
  margin-top: var(--space-lg);
  color: var(--navy);
  animation: bridge-bob 2.4s var(--ease-in-out) infinite;
}
.bridge__arrow svg { width: 12px; }
@keyframes bridge-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .bridge__arrow { animation: none; } }

/* -- five: beside the line, which carries on down to the band -- */
.bridge--five {
  position: relative;
  display: grid;
  gap: var(--space-sm);
  max-width: 96ch;
  margin: 0;
  padding: calc(var(--space-3xl) + var(--space-xl)) 0 var(--space-md) var(--space-lg);
  text-align: left;
}
/* The line: the rule, then the gold that fills with the scroll, then the dot. */
.bridge--five::before,
.bridge--five::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
}
.bridge--five::before { bottom: 0; background: var(--rule); }
.bridge--five::after { height: calc(var(--bridge-line, 0) * 100%); background: var(--gold); transition: height 160ms linear; }
.bridge--five .bridge__dot {
  position: absolute;
  left: -3px;
  top: calc(var(--bridge-line, 0) * 100%);
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--gold);
  transform: translateY(-50%);
  transition: top 160ms linear;
}
.bridge--five .bridge__ask { max-width: 20ch; }
.bridge__five {
  display: flex;
  gap: clamp(0.6rem, 2.4vw, 1.6rem);
  margin: var(--space-md) 0 var(--space-sm);
}
.bridge__n {
  font-size: clamp(2.4rem, 1.6rem + 3vw, 4rem);
  letter-spacing: -0.04em;
  color: var(--gold);
  transition: color 700ms var(--ease-out), opacity 700ms var(--ease-out);
}
/* On arrival 05, 04, 03 go out one by one, right to left; 01 and 02 stay. */
.js .bridge--five.is-in .bridge__n[style*="--k:4"] { animation: bridge-out 700ms var(--ease-out) 1500ms forwards; }
.js .bridge--five.is-in .bridge__n[style*="--k:3"] { animation: bridge-out 700ms var(--ease-out) 2050ms forwards; }
.js .bridge--five.is-in .bridge__n[style*="--k:2"] { animation: bridge-out 700ms var(--ease-out) 2600ms forwards; }
@keyframes bridge-out { to { color: var(--text-meta); opacity: 0.45; } }
.bridge__then { margin: 0; max-width: 34ch; font-size: var(--step-0); color: var(--text-muted); }
.bridge--five .bridge__arrow { margin-top: var(--space-sm); justify-self: start; }
@media (min-width: 1024px) {
  .bridge--five { padding-left: calc(clamp(5rem, 9vw, 8.5rem) + 5rem + 2rem + 3rem); }
}
@media (prefers-reduced-motion: reduce) {
  .js .bridge--five.is-in .bridge__n { animation: none; }
  .js .bridge--five.is-in .bridge__n[style*="--k:4"], .js .bridge--five.is-in .bridge__n[style*="--k:3"], .js .bridge--five.is-in .bridge__n[style*="--k:2"] { color: var(--text-meta); opacity: 0.45; }
}

/* -- wrap: the line carries on, turns, and draws itself around the
   question: along the top, down the right, back along the foot, ending in
   a dot under the first word, open on the left. Two fainter echoes ripple
   outward from the far corner. home.js builds the paths from the words'
   box and advances the strokes with the scroll. -- */
.five[data-bridge="wrap"] .five__inner { row-gap: 0; }
.five[data-bridge="wrap"] .line__tip { transition: top 160ms linear, opacity 200ms var(--ease-out); }
.five[data-bridge="wrap"].line-handed .line__tip { opacity: 0; }
.bridge--wrap {
  --wpad: 1.25rem;
  position: relative;
  min-width: 0;
  max-width: 96ch;
  margin: 0;
  padding: calc(var(--space-3xl) + var(--space-2xl)) 2.5rem var(--space-md) 3.25rem;
  text-align: left;
}
.bridge__trace {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  overflow: visible;
  pointer-events: none;
}
.bridge__trace path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.bridge__trace .trace__rule { stroke: var(--rule); stroke-width: 2; }
.bridge__trace .trace__gold { stroke: var(--gold); stroke-width: 2; transition: stroke-dashoffset 160ms linear; }
.bridge__trace .trace__echo { stroke: var(--gold); stroke-width: 1.25; opacity: 0.38; transition: stroke-dashoffset 220ms linear; }
.bridge__trace .trace__echo--2 { stroke-width: 1; opacity: 0.18; }
.bridge__words {
  position: relative;
  display: grid;
  gap: var(--space-sm);
  width: fit-content;
  max-width: 100%;
  padding: var(--wpad) var(--wpad) calc(var(--wpad) + 0.15rem);
}
.bridge--wrap .bridge__ask { max-width: 20ch; }
.bridge--wrap .bridge__arrow { margin: 2.9rem 0 0 calc(var(--wpad) - 6px); }
@media (min-width: 1024px) {
  /* Text at the five's copy x: the old offset less the words' own padding. */
  .bridge--wrap { --wpad: 2.25rem; padding-left: calc(clamp(5rem, 9vw, 8.5rem) + 5rem + 2rem + 3rem - 2.25rem); padding-right: 0; }
  .bridge__words { padding-top: 1.75rem; padding-bottom: 1.9rem; }
}

/* Rise from the line — the page's one way of bringing text on. A riser's
   direct children arrive from the left in order: the first (a numeral, a
   rule, an eyebrow) a short way, the rest 18px, each a beat after the last.
   home.js sets is-in on [data-rise] at ~35% visible. data-rise-up rises
   from below instead, for centred blocks. */
.js [data-rise] > * {
  opacity: 0;
  transform: translate3d(-18px, 0, 0);
  transition: opacity 620ms var(--ease-out), transform 720ms var(--ease-emph);
}
.js [data-rise] > :first-child { transform: translate3d(-8px, 0, 0); }
.js [data-rise][data-rise-up] > * { transform: translate3d(0, 14px, 0); }
.js [data-rise].is-in > * { opacity: 1; transform: none; }
.js [data-rise].is-in > :nth-child(2) { transition-delay: 120ms; }
.js [data-rise].is-in > :nth-child(3) { transition-delay: 280ms; }
.js [data-rise].is-in > :nth-child(4) { transition-delay: 440ms; }
.js [data-rise].is-in > :nth-child(5) { transition-delay: 600ms; }
@media (prefers-reduced-motion: reduce) {
  .js [data-rise] > * { opacity: 1; transform: none; transition: none; }
  .js .person[data-reveal] .person__photo { clip-path: none; transition: none; }
  .js .irr__name[data-track-in] { letter-spacing: var(--irr-ls, 0.02em); transition: none; }
}

/* The bridge's rule draws from its centre rather than sliding. */
.js .bridge--plain[data-rise] > .bridge__rule { transform: scaleX(0); transform-origin: center; }
.js .bridge--plain[data-rise].is-in > .bridge__rule { transform: none; }

/* The list */

.five__list { display: grid; }

.item {
  display: grid;
  gap: var(--space-sm);
  padding-block: var(--space-2xl);
  border-top: 1px solid var(--rule);
}

.item:last-child { border-bottom: 1px solid var(--rule); }

.item__num {
  font-size: var(--step-2);
  font-weight: var(--weight-bold);
  font-stretch: var(--width-wide);
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--text-meta);
  font-variant-numeric: tabular-nums;
  transition: color var(--dur-base) var(--ease-out);
}

.five[data-active="0"] .item[data-item="0"] .item__num,
.five[data-active="1"] .item[data-item="1"] .item__num,
.five[data-active="2"] .item[data-item="2"] .item__num,
.five[data-active="3"] .item[data-item="3"] .item__num,
.five[data-active="4"] .item[data-item="4"] .item__num { color: var(--gold); }

.item__title {
  max-width: 22ch;
  font-size: var(--step-2);
  font-weight: var(--weight-medium);
  line-height: 1.1;
  letter-spacing: -0.018em;
}

.item__body { max-width: 56ch; color: var(--text); }






@media (min-width: 1024px) {
  .five__inner {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: var(--space-4xl);
    align-items: start;
  }
  .five__guide {
    display: block;
    position: sticky;
    top: calc(var(--header-h-lg) + var(--space-3xl));
  }
  .item {
    grid-template-columns: 4rem minmax(0, 1fr);
    column-gap: var(--space-lg);
    row-gap: var(--space-sm);
  }
  .item__num { grid-row: 1 / span 3; padding-top: 0.2em; }
  .item__title, .item__body { grid-column: 2; }
  .item:first-child { padding-top: var(--space-md); border-top: 0; }
}

/* ==========================================================================
   3. THE SNAPSHOT — navy holding one luminous object
   ========================================================================== */

.snap {
  padding-block: var(--section-y);
  overflow: hidden;   /* the blades extend past the mark's box */
  background: var(--navy);
  background-image: radial-gradient(ellipse at 78% 50%, rgba(29, 63, 95, 0.9) 0%, rgba(15, 41, 66, 0) 55%);
}

.snap__inner {
  display: grid;
  gap: var(--space-2xl);
  align-items: center;
}

.snap__title {
  max-width: 16ch;
  margin-bottom: var(--space-lg);
  font-size: var(--step-4);
  font-weight: var(--weight-regular);
  line-height: 1.04;
  letter-spacing: -0.022em;
}

.snap__title em { font-style: italic; }

.snap__body { max-width: 50ch; margin-bottom: var(--space-xl); color: var(--text-inverse-muted); }

.snap__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
}

.snap__note { margin: 0; font-size: var(--step--1); color: var(--on-navy-muted); }

.snap__mark {
  margin: 0;
  justify-self: center;
  width: min(60vw, 260px);
  filter: drop-shadow(0 24px 48px rgba(0, 0, 0, 0.35));
  transition: transform var(--dur-slow) var(--ease-emph);
}

.snap__mark .aperture { display: block; width: 100%; height: auto; overflow: visible; }

/* The blades turn with the page (about a third of a turn across the
   section) and a little further on hover; the buildings stay upright. */
.aperture__blades {
  transform-origin: 120px 120px;
  transform-box: view-box;
  transform: rotate(calc((var(--sp, 0.5) - 0.5) * 70deg));
  transition: transform var(--dur-slow) var(--ease-emph);
  will-change: transform;
}

.aperture__centre { transform-box: view-box; transform-origin: 120px 120px; transition: transform var(--dur-slow) var(--ease-emph); }
/* Hovering the mark, or the Snapshot button, lifts the mark, turns the
   blades a little further and brings the buildings closer. */
.snap__mark:hover, .snap:has(.snap__actions .btn:hover) .snap__mark { transform: scale(1.035); }
.snap__mark:hover .aperture__blades, .snap:has(.snap__actions .btn:hover) .aperture__blades { transform: rotate(calc((var(--sp, 0.5) - 0.5) * 70deg + 24deg)); }
.snap__mark:hover .aperture__centre, .snap:has(.snap__actions .btn:hover) .aperture__centre { transform: scale(1.14); }

@media (max-width: 767px) {
  .snap__actions .btn { width: 100%; }
  .snap__mark { order: -1; }
}

@media (min-width: 768px) {
  .snap__inner { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-3xl); }
  .snap__mark { width: min(100%, 320px); justify-self: end; }
  .snap__actions { flex-direction: row; align-items: center; gap: var(--space-lg); }
}

@media (min-width: 1024px) {
  .snap__mark { width: min(100%, 380px); }
}

/* ==========================================================================
   4. REAL CHALLENGES — three cards: the problem, then what changed
   The only cards on the site. Closed, a card states the problem in one
   sentence. Open (hover, focus or tap), it turns navy and says what
   changed. The two states share one grid cell, so the card is always as
   tall as its taller state: nothing overlays the page and nothing moves.
   ========================================================================== */

.cases { padding-block: var(--section-y); background: var(--paper-warm); }

.cases__head { max-width: 56ch; margin-bottom: var(--space-2xl); }

.cases__title {
  margin-bottom: var(--space-md);
  font-size: var(--step-3);
  font-weight: var(--weight-regular);
  line-height: 1.06;
  letter-spacing: -0.022em;
}

.cases__title em { font-style: italic; }

.cases__lede { max-width: 56ch; margin: 0; color: var(--text-muted); }

.cards {
  display: grid;
  gap: var(--space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}

.card {
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  color: var(--text);
  transition: background-color var(--dur-slow) var(--ease-out), border-color var(--dur-slow) var(--ease-out), color var(--dur-slow) var(--ease-out);
}

.card__face {
  display: grid;
  align-content: start;
  gap: var(--space-md);
  width: 100%;
  padding: var(--space-xl) var(--space-xl) var(--space-md);
  margin: 0;
  background: none;
  border: 0;
  border-radius: inherit;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.card__face:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }

.card__name {
  display: block;
  padding-right: 2.5rem;
  font-size: var(--step-1);
  font-weight: var(--weight-medium);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--navy);
  transition: color var(--dur-slow) var(--ease-out);
}
.card.is-open .card__name, .card:focus-within .card__name,
.card.is-open .card__title, .card:focus-within .card__title { color: var(--on-navy); }
@media (hover: hover) { .card:hover .card__name { color: var(--on-navy); } }


/* Both states in one cell. */
.card__stack { display: grid; }
.card__problem,
.card__changed {
  grid-area: 1 / 1;
  display: grid;
  gap: var(--space-xs);
  align-content: start;
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out), visibility 0s linear 0s;
}
.card__changed { opacity: 0; visibility: hidden; transform: translateY(10px); transition-delay: 0s, 0s, var(--dur-slow); }

.card__label {
  display: block;
  margin-bottom: var(--space-2xs);
  font-size: var(--step--2);
  font-weight: var(--weight-medium);
  font-stretch: var(--width-narrow);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
}

.card__title {
  display: block;
  font-size: var(--step-0);
  line-height: var(--leading-loose);
  color: var(--text);
  transition: color var(--dur-slow) var(--ease-out);
}

/* The figure that leads the open state. */
.card__figure {
  display: block;
  margin-top: var(--space-2xs);
  font-size: clamp(2.5rem, 2rem + 1.6vw, 3.25rem);
  font-weight: var(--weight-bold);
  font-stretch: var(--width-wide);
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--gold-light);
  font-variant-numeric: tabular-nums;
}
.card__figure-what {
  display: block;
  margin-bottom: var(--space-sm);
  font-size: var(--step--1);
  line-height: var(--leading-snug);
  color: var(--on-navy);
}
.card__changed .card__text { font-size: var(--step--1); color: var(--on-navy-muted); }

.card__text {
  display: block;
  font-size: var(--step-0);
  line-height: var(--leading-loose);
}

/* The "+" top right; "×" while open. (Fades in with the face, no slide.) */
.js .card__face[data-rise] > .card__more { transform: none; }
.card__more {
  position: absolute;
  top: var(--space-xl);
  right: var(--space-xl);
  width: 1.125rem;
  height: 1.125rem;
  color: var(--gold);
}
.card__more i { position: absolute; inset: 0; transition: transform var(--dur-base) var(--ease-out); }
.card__more i::before,
.card__more i::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transform: translateY(-50%);
}
.card__more i::after { transform: translateY(-50%) rotate(90deg); }

/* The link lives outside the button (a link can't sit inside one) and
   shows with the open state. */
.card__link {
  justify-self: start;
  margin: 0 var(--space-xl) var(--space-xl);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-slow) var(--ease-out), visibility 0s linear var(--dur-slow), color var(--dur-slow) var(--ease-out);
}

/* ---- open ---- */
.card.is-open,
.card:focus-within { background: var(--navy); border-color: var(--navy); color: var(--on-navy); }
.card.is-open .card__label, .card:focus-within .card__label { color: var(--gold-light); }
.card.is-open .card__problem, .card:focus-within .card__problem { opacity: 0; visibility: hidden; transform: translateY(-10px); transition-delay: 0s, 0s, var(--dur-slow); }
.card.is-open .card__changed, .card:focus-within .card__changed { opacity: 1; visibility: visible; transform: none; transition-delay: 120ms, 120ms, 0s; }
.card.is-open .card__more, .card:focus-within .card__more { color: var(--gold-light); }
.card.is-open .card__more i, .card:focus-within .card__more i { transform: rotate(45deg); }
.card.is-open .card__link, .card:focus-within .card__link { opacity: 1; visibility: visible; color: var(--on-navy); transition-delay: 200ms, 0s, 0s; }
.card.is-open .card__link:hover { color: var(--gold-light); }

@media (hover: hover) {
  .card:hover { background: var(--navy); border-color: var(--navy); color: var(--on-navy); }
  .card:hover .card__label { color: var(--gold-light); }
  .card:hover .card__problem { opacity: 0; visibility: hidden; transform: translateY(-10px); transition-delay: 0s, 0s, var(--dur-slow); }
  .card:hover .card__changed { opacity: 1; visibility: visible; transform: none; transition-delay: 120ms, 120ms, 0s; }
  .card:hover .card__more { color: var(--gold-light); }
  .card:hover .card__more i { transform: rotate(45deg); }
  .card:hover .card__link { opacity: 1; visibility: visible; color: var(--on-navy); transition-delay: 200ms, 0s, 0s; }
  .card:hover .card__link:hover { color: var(--gold-light); }
}

.cases__foot {
  display: flex;
  max-width: none;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-md);
  margin-top: var(--space-xl);
}

@media (min-width: 768px) {
  .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); }
}

/* One column: the card is sized by whichever state is showing and grows
   in place on tap. The crossfade is a three-across affair. */
@media (max-width: 767px) {
  .card__stack { display: block; }
  .card__problem, .card__changed { transition: none; transform: none; }
  .card__changed { display: none; opacity: 1; visibility: visible; }
  .card.is-open .card__changed, .card:focus-within .card__changed { display: grid; }
  .card.is-open .card__problem, .card:focus-within .card__problem { display: none; }
  .card__link { display: none; transition: none; }
  .card.is-open .card__link, .card:focus-within .card__link { display: inline-flex; }
}

@media (prefers-reduced-motion: reduce) {
}

/* ==========================================================================
   5. WHAT ELEVATE 360 DOES — four drivers, set as type (10/6)
   The divider label, then Bill's four drivers as columns (2×2 on tablet,
   stacked on phone). Hovering a driver draws its hairline gold. No graphic.
   ========================================================================== */

.system { padding-block: var(--section-y-tight) var(--section-y); background: var(--paper-warm); }

.drivers4 { display: grid; gap: var(--space-xl) var(--space-2xl); margin: 0; padding: 0; list-style: none; }
.d4 { position: relative; display: grid; align-content: start; gap: var(--space-xs); padding-top: var(--space-md); }
/* The hairline above each driver, and the gold one that draws over it. */
.d4::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: var(--rule); }
.d4::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: left center; transition: transform var(--dur-slow) var(--ease-emph); }
.d4__n { font-size: var(--step-0); font-weight: var(--weight-medium); letter-spacing: 0.06em; color: var(--gold); }
.d4__title { margin: 0; font-size: var(--step-2); font-weight: var(--weight-medium); line-height: 1.1; letter-spacing: -0.018em; color: var(--navy); }
.d4__body { margin: 0; max-width: 30ch; font-size: var(--step--1); line-height: var(--leading-loose); color: var(--text-muted); }
.system__foot { margin: var(--space-2xl) 0 0; }

@media (hover: hover) {
  .d4:hover::after { transform: scaleX(1); }
}
@media (min-width: 640px) {
  .drivers4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .drivers4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-xl); }
  .d4 { padding-top: var(--space-lg); }
  .d4__title { max-width: 11ch; }
}
@media (prefers-reduced-motion: reduce) {
  .d4::after { transition: none; }
}

/* ==========================================================================
   5b. WHY ELEVATE 360 — a photograph and three claims on warm paper
   ========================================================================== */

.why { padding-block: var(--section-y); background: var(--paper); }

.why__inner { display: grid; gap: var(--space-2xl); }
.why__media { margin: 0; }
/* The map fills its column: it stretches to the row and
   the plate scales to that height (its width follows, max the column). */
.why__map { height: 100%; display: flex; justify-content: center; }
.rmap { height: 100%; width: auto; max-width: 100%; }

/* ---- The route map ----------------------------------------------------- */
.rmap { display: block; overflow: visible; }
/* Stacked (tablet and phone): the map comes first, above the claims. */
@media (max-width: 1023px) { .why__media { order: -1; } .why__map { height: auto; } .rmap { height: auto; width: min(100%, 420px); } }
.rmap__plate { fill: var(--paper-warm); }

/* Contours draw themselves in when the map arrives, in a shuffled order. */
.js .rmap__contours path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js [data-map].is-in .rmap__contours path {
  animation: rmap-draw 1100ms var(--ease-out) forwards;
  animation-delay: calc(var(--o, 0) * 22ms + 120ms);
}
@keyframes rmap-draw { to { stroke-dashoffset: 0; } }

/* The route draws once, start to summit, when the map is well into view
   (home.js adds is-drawn to the section at ~22% visible). One 2.8s stroke,
   eased in and out like a pen; the waypoints and their labels appear as the
   stroke reaches them (0.24 / 0.63 / 1 of the path → 1.35s / 2.1s / 3.25s; the stroke waits 0.5s for the contours). */
.rmap__route { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-width var(--dur-base) var(--ease-out); }
.why.is-drawn .rmap__route { stroke-dashoffset: 0; transition: stroke-dashoffset 2800ms cubic-bezier(0.45, 0.05, 0.55, 0.95) 500ms, stroke-width var(--dur-base) var(--ease-out); }

.rmap__wp { opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(0.6); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-emph); }
.rmap__wp .rmap__halo { opacity: 0; transition: opacity 900ms var(--ease-out); }
.why.is-drawn .rmap__wp { opacity: 1; transform: none; }
.why.is-drawn .rmap__wp[data-wp="0"] { transition-delay: 1350ms; }
.why.is-drawn .rmap__wp[data-wp="1"] { transition-delay: 2080ms; }
.why.is-drawn .rmap__wp[data-wp="2"] { transition-delay: 3250ms; }
.why.is-drawn .rmap__wp--summit .rmap__halo { opacity: 1; transition-delay: 3600ms; animation: rmap-pulse 3.2s var(--ease-in-out) 4300ms infinite; }
@keyframes rmap-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.22); } }

/* Trail markers: each step's label follows its waypoint in; the trailhead
   ("Start here · the Snapshot") is always there and links to the Snapshot. */
.rmap text { font-family: var(--font-sans, "Archivo", sans-serif); }
.rmap__label {
  opacity: 0;
  pointer-events: all;
  cursor: default;
  transform-box: fill-box;
  transform-origin: left center;
  transition: opacity 700ms var(--ease-out), transform 380ms var(--ease-emph);
}
.rmap__label[text-anchor="middle"] { transform-origin: center top; }
.rmap__label[text-anchor="end"] { transform-origin: right center; }
.why.is-drawn .rmap__label { opacity: 1; }
/* The intro delay is on opacity only, so hover answers at once. */
.why.is-drawn .rmap__label[data-wp="0"] { transition-delay: 1600ms, 0ms; }
.why.is-drawn .rmap__label[data-wp="1"] { transition-delay: 2330ms, 0ms; }
.why.is-drawn .rmap__label[data-wp="2"] { transition-delay: 3500ms, 0ms; }
/* Under the pointer a step grows, its name goes gold, its marker swells,
   and the claim it belongs to lights up on the left; hovering the claim or
   the marker does the same in reverse. */
.rmap__name, .rmap__sub { transition: fill var(--dur-base) var(--ease-out); }
.rmap__wp-ring { transform-box: fill-box; transform-origin: center; transition: transform 380ms var(--ease-emph), stroke-width var(--dur-base) var(--ease-out); }
.rmap__label:hover,
.rmap:has(.rmap__wp[data-wp="0"]:hover) .rmap__label[data-wp="0"],
.rmap:has(.rmap__wp[data-wp="1"]:hover) .rmap__label[data-wp="1"],
.rmap:has(.rmap__wp[data-wp="2"]:hover) .rmap__label[data-wp="2"],
.why:has(.claim:nth-child(1):hover) .rmap__label[data-wp="0"],
.why:has(.claim:nth-child(2):hover) .rmap__label[data-wp="1"],
.why:has(.claim:nth-child(3):hover) .rmap__label[data-wp="2"] { transform: scale(1.18); }
.rmap__label:hover .rmap__name,
.rmap:has(.rmap__wp[data-wp="0"]:hover) .rmap__label[data-wp="0"] .rmap__name,
.rmap:has(.rmap__wp[data-wp="1"]:hover) .rmap__label[data-wp="1"] .rmap__name,
.rmap:has(.rmap__wp[data-wp="2"]:hover) .rmap__label[data-wp="2"] .rmap__name,
.why:has(.claim:nth-child(1):hover) .rmap__label[data-wp="0"] .rmap__name,
.why:has(.claim:nth-child(2):hover) .rmap__label[data-wp="1"] .rmap__name,
.why:has(.claim:nth-child(3):hover) .rmap__label[data-wp="2"] .rmap__name { fill: var(--gold); }
.rmap__wp:hover .rmap__wp-ring,
.rmap:has(.rmap__label[data-wp="0"]:hover) .rmap__wp[data-wp="0"] .rmap__wp-ring,
.rmap:has(.rmap__label[data-wp="1"]:hover) .rmap__wp[data-wp="1"] .rmap__wp-ring,
.rmap:has(.rmap__label[data-wp="2"]:hover) .rmap__wp[data-wp="2"] .rmap__wp-ring,
.why:has(.claim:nth-child(1):hover) .rmap__wp[data-wp="0"] .rmap__wp-ring,
.why:has(.claim:nth-child(2):hover) .rmap__wp[data-wp="1"] .rmap__wp-ring,
.why:has(.claim:nth-child(3):hover) .rmap__wp[data-wp="2"] .rmap__wp-ring { transform: scale(1.35); stroke-width: 2.2; }
.rmap__wp { pointer-events: all; cursor: default; }
.claim__title { transition: color var(--dur-base) var(--ease-out); }
.why:has(.rmap__label[data-wp="0"]:hover) .claim:nth-child(1) .claim__title,
.why:has(.rmap__label[data-wp="1"]:hover) .claim:nth-child(2) .claim__title,
.why:has(.rmap__label[data-wp="2"]:hover) .claim:nth-child(3) .claim__title,
.why:has(.rmap__wp[data-wp="0"]:hover) .claim:nth-child(1) .claim__title,
.why:has(.rmap__wp[data-wp="1"]:hover) .claim:nth-child(2) .claim__title,
.why:has(.rmap__wp[data-wp="2"]:hover) .claim:nth-child(3) .claim__title { color: var(--gold); }
.rmap__start-link { pointer-events: all; cursor: pointer; }
.rmap__start-ul { opacity: 0; transition: opacity var(--dur-base) var(--ease-out); }
.rmap__start-link:hover .rmap__start-ul { opacity: 1; }
.rmap__start-link:hover .rmap__name { fill: var(--gold); }

/* Under the pointer the route and the frame come forward. */
.rmap__frame, .rmap__contours { transition: stroke-opacity var(--dur-base) var(--ease-out); }
@media (hover: hover) {
  .why__media:hover .rmap__route { stroke-width: 3.2; }
  .why__media:hover .rmap__frame { stroke-opacity: 0.9; }
}

@media (prefers-reduced-motion: reduce) {
  .js .rmap__contours path { stroke-dashoffset: 0; animation: none; }
  .rmap__route, .rmap__wp, .rmap__halo, .rmap__label, .rmap__wp-ring { transition: none; animation: none; }
  .rmap__route { stroke-dashoffset: 0; }
  .rmap__wp { opacity: 1; transform: none; }
  .rmap__wp--summit .rmap__halo { opacity: 1; }
  .rmap__label { opacity: 1; }
}

.claims {
  display: grid;
  gap: var(--space-xl);
  margin: 0;
  padding: 0;
  list-style: none;
}
.claim {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--space-xs);
  padding-top: var(--space-md);
}
/* The rule above each claim draws in from the left as the claim arrives. */
.claim::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 1px;
  background: var(--rule);
}
.claim::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 48px;
  height: 2px;
  background: var(--gold);
  transform-origin: left center;
}
.js .claim[data-rise]::after { transform: scaleX(0); transition: transform var(--dur-scroll) var(--ease-emph) 60ms, width 700ms var(--ease-emph); }
.js .claim[data-rise].is-in::after { transform: scaleX(1); }
/* Under the pointer the gold rule runs the full width of the claim
   (Brandon, 10/10; the same move as the pillars and the domain rows). */
.claim { transition: padding-left var(--dur-slow) var(--ease-emph); }
.claim:hover::after { width: 100%; }
.claim:hover .claim__title { color: var(--navy); }
.claim__title {
  font-size: var(--step-2);
  font-weight: var(--weight-regular);
  line-height: 1.1;
  letter-spacing: -0.018em;
  color: var(--ink);
}
.claim__body { margin: 0; max-width: 40ch; font-size: var(--step--1); line-height: var(--leading-loose); color: var(--text-muted); }

@media (min-width: 1024px) {
  .why__inner { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--space-3xl); align-items: stretch; }
  /* The map sets the row height now (a tall plate, most of the viewport);
     it fills its cell without ever adding to it (absolute inside), its
     width following. The claims spread down the column beside it. */
  .why__media { position: relative; align-self: stretch; min-height: clamp(640px, 92vh, 920px); }
  .why__map { position: absolute; inset: 0; }
  .why__copy { display: flex; flex-direction: column; }
  .claims { flex: 1; gap: var(--space-2xl); align-content: space-evenly; }
  .claim { padding-top: var(--space-lg); }
}
@media (min-width: 1280px) {
  .why__inner { gap: var(--space-4xl); }
}

/* ==========================================================================
   6. THE PEOPLE — four portraits, navy-toned until you reach them
   Bill's credibility section without the word. The number is the claim;
   the faces are the proof. Portraits sit as navy monotones on warm paper
   and come to colour under the pointer (or as they arrive, on touch).
   ========================================================================== */

.team {
  padding-block: var(--section-y);
  background: var(--paper);
}

.team__inner { display: grid; gap: var(--space-3xl); }

.team__title { margin-bottom: var(--space-lg); font-weight: var(--weight-regular); }

.team__years {
  display: flex;
  align-items: baseline;
  gap: 0.05em;
  margin-bottom: var(--space-sm);
  color: var(--gold);
  line-height: 0.9;
}
.team__num {
  font-size: clamp(4.5rem, 3rem + 7vw, 8rem);
  letter-spacing: -0.05em;
}
.team__plus {
  font-size: clamp(2.25rem, 1.5rem + 3.5vw, 4rem);
  font-weight: var(--weight-medium);
  font-stretch: var(--width-wide);
}
.team__years-label {
  display: block;
  max-width: 22ch;
  font-size: var(--step-2);
  line-height: 1.15;
  letter-spacing: -0.018em;
  color: var(--ink);
}
.team__years-label em { font-style: italic; }

.team__body { max-width: 44ch; margin-bottom: var(--space-xl); font-size: var(--step-1); color: var(--text-muted); }
/* The tally: two figures side by side, counting up on arrival. */
.tally { display: flex; flex-wrap: wrap; gap: var(--space-lg) var(--space-2xl); margin: 0 0 var(--space-md); }
.tally__item { display: grid; gap: var(--space-2xs); }
.tally__num {
  font-size: clamp(2.25rem, 1.75rem + 2vw, 3.25rem);
  letter-spacing: -0.045em;
  line-height: 1;
  color: var(--gold);
}
.tally__what { margin: 0; font-size: var(--step--1); color: var(--text-muted); }
.team__decades { max-width: 36ch; margin: 0 0 var(--space-lg); color: var(--text-muted); }
.team__note { max-width: 44ch; margin: var(--space-lg) 0 0; font-size: var(--step--2); line-height: var(--leading-snug); color: var(--text-meta); }

.team__foot { margin-bottom: var(--space-md); }
.team .slot-note { max-width: 40ch; }

/* Anything Bill still owes reads as a fill-in, not as a fact. */
[data-slot] { color: var(--text-meta); text-decoration: underline dotted var(--gold); text-underline-offset: 0.2em; }

.roster {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xl) var(--space-lg);
  margin: 0;
  padding: 0;
  list-style: none;
}

.person { display: grid; gap: var(--space-md); }

/* At rest the portraits are a navy duotone: grayscale screened over navy, so
   shadows go navy and highlights stay light (the classic two-tone, brighter
   than a tint), with a faint gold light across the top-left. They read as
   one set in the page's own colours. Colour arrives under the pointer. */
.person__photo {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--navy);
}
.js .person[data-reveal] .person__photo { clip-path: inset(100% 0 0 0); transition: clip-path 900ms var(--ease-emph); }
.js .person[data-reveal].is-in .person__photo { clip-path: inset(0 0 0 0); }
.person__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 20%;
  filter: grayscale(1) contrast(1.18) brightness(1.02);
  mix-blend-mode: screen;
  opacity: 1;
  transform: scale(1.001);
  transition: filter var(--dur-slow) var(--ease-out), opacity var(--dur-slow) var(--ease-out), transform 900ms var(--ease-emph);
}
.person__photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(210, 163, 67, 0.28), rgba(210, 163, 67, 0.04) 50%, rgba(15, 41, 66, 0));
  mix-blend-mode: overlay;
  transition: opacity var(--dur-slow) var(--ease-out);
}
.person__photo::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-slow) var(--ease-emph);
}

.person__cap { display: grid; gap: var(--space-2xs); }
.person__name { font-size: var(--step-0); font-weight: var(--weight-medium); color: var(--navy); }
/* Each card opens the bio: the name is the link, stretched over the whole card (10/23). */
.person { position: relative; }
.person__link { text-decoration: none; transition: color var(--dur-base) var(--ease-out); }
.person__link::after { content: ""; position: absolute; inset: 0; z-index: 3; }
.person__link:focus-visible { outline: none; }
.person:focus-within { outline: 2px solid var(--gold); outline-offset: 6px; border-radius: var(--radius-sm); }
.person__role {
  font-size: var(--step--2);
  font-weight: var(--weight-medium);
  font-stretch: var(--width-narrow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.person__line { margin-top: var(--space-2xs); font-size: var(--step--1); line-height: var(--leading-snug); color: var(--text-muted); }

/* Colour arrives under the pointer; on touch it arrives with the scroll. */
@media (hover: hover) {
  .person:hover .person__photo img { filter: none; mix-blend-mode: normal; opacity: 1; transform: scale(1.035); }
  .person:hover .person__photo::before { opacity: 0; }
  .person:hover .person__photo::after { transform: scaleX(1); }
}
@media (hover: none) {
  .person.is-in .person__photo img { filter: none; mix-blend-mode: normal; opacity: 1; transition-delay: 300ms; }
  .person.is-in .person__photo::before { opacity: 0; transition-delay: 300ms; }
  .person.is-in .person__photo::after { transform: scaleX(1); transition-delay: 500ms; }
}

/* Five in two columns: the odd one out sits centred under the pairs (10/23). */
.roster .person:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc((100% - var(--space-lg)) / 2); }
.person { align-content: start; }

@media (min-width: 768px) {
  .roster { gap: var(--space-2xl) var(--space-xl); }
  .person:nth-child(2n) { margin-top: var(--space-3xl); }
  .roster .person:last-child:nth-child(odd) { width: calc((100% - var(--space-xl)) / 2); }
}

@media (min-width: 1024px) {
  .team__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-4xl); align-items: start; }
  .team__copy { position: sticky; top: calc(var(--header-h-lg) + var(--space-2xl)); }
}

@media (prefers-reduced-motion: reduce) {
  .person__photo img, .person__photo::after { transition: none; }
}

/* ==========================================================================
   7. IRREPLACEABLE — the print, the name, the callback
   ========================================================================== */

.irr { padding-block: var(--section-y-tight) calc(var(--section-y) * 1.15); background: var(--paper-warm); }

.irr__inner {
  display: grid;
  gap: var(--space-2xl);
  align-items: center;
}

.irr__mark { margin: 0; width: min(64vw, 280px); }
.irr__mark .print { display: block; width: 100%; height: auto; overflow: visible; }

/* Enrolment. The whole print is there from the first frame as a faint
   ghost; each press inks a region over it; the gold ridges are the seventh
   and last press. Only under .js so no-JS gets the finished print. */
/* The ghost is a <use> of the same ridges. The clone picks up the same CSS,
   so the hidden state and the animation are driven by custom properties
   that the ghost overrides on itself and that inherit into the clone. */
.print__ghost {
  opacity: 0;
  --ink-o: 1;
  --ink-d: 0;
  --ink-anim: none;
}
.js .print__ghost { opacity: 0.16; transition: opacity var(--dur-slow) var(--ease-out); }
.js .irr__mark.is-in .print__ghost { opacity: 0.10; transition-delay: calc(var(--press-gap) * 7); }

.js .print__ridges path {
  stroke-dasharray: 1;
  stroke-dashoffset: var(--ink-d, 1);
  stroke-width: var(--ink-w, var(--sw, 2.2));
  opacity: var(--ink-o, 0);
}

/* The ghost is hairline; inked ridges start hairline and thicken as they
   draw, so the print builds pressure rather than appearing. */
.print__ghost { --ink-w: 0.75; }

.js .irr__mark.is-in .print__ridges path {
  animation-name: var(--ink-anim, print-ink);
  animation-duration: 620ms;
  animation-timing-function: var(--ease-out);
  animation-fill-mode: forwards;
  animation-delay: calc(var(--press-gap) * var(--g, 0) + var(--o, 0) * 22ms + 240ms);
}

.print__press {
  opacity: 0;
  transform-origin: 120px 124px;
  transform-box: view-box;
}

.js .irr__mark.is-in .print__press {
  animation: print-press var(--press-gap) var(--ease-out) 7;
  animation-delay: 160ms;
}

.irr__mark { --press-gap: 540ms; }

@keyframes print-ink {
  0%   { stroke-dashoffset: 1; opacity: 0; stroke-width: 0.6; }
  15%  { opacity: 1; }
  60%  { stroke-width: 1.2; }
  100% { stroke-dashoffset: 0; opacity: 1; stroke-width: var(--sw, 2.2); }
}

@keyframes print-press {
  0%   { opacity: 0;   transform: scale(0.74); }
  22%  { opacity: 1; }
  100% { opacity: 0;   transform: scale(1.06); }
}

/* After the enrolment, hover brightens the gold and gilds the marked
   ridges (data-gilt, ~a third of the navy ones), each on its own beat. */
.print__ridges path { transition: stroke var(--dur-slow) var(--ease-out), stroke-width var(--dur-slow) var(--ease-out); }
.print__ridges path[data-gilt] { transition-delay: calc(var(--h, 0) * 45ms); }
/* Only once the enrolment has finished (is-done, set by home.js): a cursor
   resting on the print while it draws in would otherwise gild ridges early
   and un-gild them when it moved, which reads as gold flickering about. */
.irr__mark.is-done:hover .print__ridges path[data-gilt] { stroke: var(--gold); }
.irr__mark.is-done:hover .print__ridges path[data-gold] { stroke: var(--gold-light); --sw: 2.9; }
.irr__mark.is-done .print__ridges path[data-gold] { --sw: 2.6; }


.irr__copy { min-width: 0; }

.irr__name {
  margin-bottom: var(--space-xs);
  font-size: clamp(1.8rem, 8.6vw, 3.55rem);
  font-weight: var(--weight-bold);
  font-stretch: var(--width-wide);
  letter-spacing: var(--irr-ls, 0.02em);
  text-transform: uppercase;
  line-height: 1;
  color: var(--navy);
}
.js .irr__name[data-track-in] { letter-spacing: 0.22em; transition: opacity var(--dur-scroll) var(--ease-out), transform var(--dur-scroll) var(--ease-emph), letter-spacing 1400ms var(--ease-out); }
.js .irr__name[data-track-in].is-in { letter-spacing: var(--irr-ls, 0.02em); }

.irr__tag {
  margin-bottom: var(--space-lg);
  font-size: var(--step-1);
  color: var(--gold);
}

.irr__tag em { font-style: italic; }

.irr__body { max-width: 46ch; margin-bottom: var(--space-md); color: var(--text); }
.irr__meta { max-width: 54ch; margin-bottom: var(--space-lg); font-size: var(--step--1); color: var(--text-muted); }



@media (max-width: 559px) {
  .irr__name { font-stretch: var(--width-normal); --irr-ls: 0.04em; }
}

@media (min-width: 768px) {
  .irr__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); }
  .irr__mark { width: min(100%, 340px); justify-self: center; }
  /* The name is one word and must never wrap or spill: sized to the column. */
  .irr__name { font-size: clamp(1.8rem, 4vw, 3.55rem); }
}

@media (min-width: 1024px) {
  .irr__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); }
  .irr__mark { width: min(100%, 380px); }
}

/* --- Reduced motion ------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .hero__go svg { transition: none; }
  .guide__num, .guide__fill, .guide__tick, .item__num { transition: none; }
  .aperture__blades { transform: none; transition: none; }
  .js .print__ridges path { stroke-dashoffset: 0; opacity: 1; animation: none; }
  .js .irr__mark.is-in .print__ridges path { animation-name: none; }
  .js .irr__mark.is-in .print__press { animation: none; }
  .js .print__ghost { opacity: 0; }
  .snap__mark, .snap__mark:hover, .aperture__centre { transform: none; transition: none; }
}