/* =========================================================================
   IceBerg - design prototype
   Palette is confirmed: Deep Ocean, Ice Blue, Ice Light, Snow.
   Deep Indigo is an open question in the brand docs, so it appears exactly
   once, as the far end of one background gradient, behind --use-indigo. Set
   that token to 0 and it leaves the site entirely.
   ========================================================================= */

:root {
  --ocean:        #021332;
  --ocean-lift:   #041c45;
  --ocean-raise:  #062354;
  --indigo:       #0e035f;
  --use-indigo:   1;

  --ice:          #99d0ee;
  --ice-light:    #c4f8ff;
  --snow:         #ffffff;

  --text:         #eaf4fb;
  --text-2:       #a9c2d8;
  --text-3:       #8ba4bd;

  --line:         rgba(153, 208, 238, 0.16);
  --line-strong:  rgba(153, 208, 238, 0.34);

  /* One family, chosen for presence on a dark ground and for real tabular
     figures - the product is mostly numeric limits and timeframes. The exact
     family is still an open decision in the brand docs, so it lives in one
     token and swaps in one line. */
  --font: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI",
          Inter, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  --t-display: clamp(2.6rem, 6.4vw, 5rem);
  --t-h1:      clamp(2.25rem, 4.4vw, 3.4rem);
  --t-h2:      clamp(1.7rem, 2.7vw, 2.35rem);
  --t-h3:      clamp(1.12rem, 1.5vw, 1.32rem);
  --t-kicker:  clamp(0.9rem, 1.05vw, 1.05rem);
  --t-body:    clamp(1rem, 0.35vw + 0.94rem, 1.125rem);
  --t-small:   0.9375rem;
  --t-micro:   0.8125rem;

  --gap:   clamp(1rem, 2.5vw, 2rem);
  --pad-x: clamp(1.25rem, 5vw, 3.5rem);
  --sec-y: clamp(4.5rem, 9vw, 8.5rem);
  --wrap:  1220px;
  --measure: 66ch;

  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 18px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { font-optical-sizing: auto; }

html {
  background: var(--ocean);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ocean);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--t-body);
  line-height: 1.6;
  font-feature-settings: "tnum" 1, "ss01" 1;
  /* Nothing on this site is allowed to push the viewport sideways. */
  overflow-x: hidden;
}

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

a { color: var(--ice-light); text-decoration-color: rgba(196, 248, 255, 0.4); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }

:where(a, button, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--ice-light);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

h1, h2, h3, h4 {
  margin: 0;
  line-height: 1.06;
  letter-spacing: -0.022em;
  font-weight: 600;
  color: var(--snow);
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); letter-spacing: -0.012em; line-height: 1.25; }

p { margin: 0 0 1em; max-width: var(--measure); }
ul, ol { margin: 0 0 1em; padding-left: 1.15em; }
li { margin: 0.35em 0; }
strong { color: var(--snow); font-weight: 600; }

.wrap { width: min(100% - var(--pad-x) * 2, var(--wrap)); margin-inline: auto; }
.lede { font-size: clamp(1.06rem, 1.4vw, 1.3rem); color: var(--text-2); }
.muted { color: var(--text-2); }
.micro { font-size: var(--t-micro); color: var(--text-3); line-height: 1.55; }
.num { font-variant-numeric: tabular-nums; }
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ocean-raise); color: var(--snow); padding: 0.75rem 1rem; border-radius: var(--r-sm);
}
.skip:focus { left: 1rem; top: 1rem; }
.vh {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* --- the waterline: one hairline with a bright core, reused everywhere ---- */
.waterline {
  height: 1px; border: 0; margin: 0;
  background: linear-gradient(90deg,
    transparent, var(--line-strong) 12%, rgba(196, 248, 255, 0.85) 50%, var(--line-strong) 88%, transparent);
}
.kicker {
  display: inline-block;
  font-size: var(--t-kicker); font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase;
  background: linear-gradient(100deg, var(--ice) 0%, var(--ice-light) 55%, var(--snow) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-bottom: 1.15rem;
}

/* ------------------------------- header ---------------------------------- */
.header {
  position: fixed; inset: 0 0 auto; z-index: 50;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease), backdrop-filter 0.3s var(--ease);
  border-bottom: 1px solid transparent;
}
.header.is-lifted {
  background: rgba(2, 19, 50, 0.78);
  backdrop-filter: blur(16px) saturate(1.5);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
}
/* where content meets the floating chrome the edge fades instead of ruling a line */
.header::after {
  content: ""; position: absolute; inset: 100% 0 auto 0; height: 22px; pointer-events: none;
  background: linear-gradient(rgba(2, 19, 50, 0.5), transparent);
  opacity: 0; transition: opacity 0.3s var(--ease);
}
.header.is-lifted::after { opacity: 1; }
@media (prefers-reduced-transparency: reduce) {
  .header.is-lifted { background: rgba(2, 19, 50, 0.98); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
.header__in {
  display: flex; align-items: center; gap: var(--gap);
  min-height: 72px; padding-block: 0.75rem;
}
.brand { display: inline-flex; align-items: center; gap: 0.7rem; text-decoration: none; color: var(--snow); }
.brand img { width: 28px; height: 28px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35)); }
.brand span { font-weight: 650; letter-spacing: -0.02em; font-size: 1.15rem; }
.nav { margin-left: auto; display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); }
.nav a { color: var(--text-2); text-decoration: none; font-size: var(--t-small); font-weight: 500; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--snow); }
/* `.nav a` (0,1,1) outranks `.btn` (0,1,0), which repainted the button label in
   link colour on a near-white pill - measured at 1.6:1. Two-class selectors put
   the button's own colours back in charge wherever a button sits inside a
   colour-setting context. */
.nav .btn { color: #021332; }
.nav .btn--ghost { color: var(--text); }
.nav__toggle { display: none; }

/* ------------------------------- buttons --------------------------------- */
.btn {
  --btn-bg: var(--ice-light);
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  padding: 0.85rem 1.4rem; border-radius: 999px; border: 1px solid transparent;
  font: inherit; font-size: var(--t-small); font-weight: 600; letter-spacing: -0.005em;
  text-decoration: none; cursor: pointer; position: relative; overflow: hidden;
  background: var(--btn-bg); color: #021332;
  transition: transform 0.2s var(--ease), box-shadow 0.25s var(--ease), scale 0.1s ease-out;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 8px 30px -12px rgba(196, 248, 255, 0.7);
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 14px 36px -12px rgba(196,248,255,.85); }
/* One restrained light pass across the primary action - the only shimmer on
   the site, so it stays a signal rather than decoration. */
.btn--primary::before, .btn--primary::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,0.55) 50%, transparent 65%);
  transform: translateX(-120%);
}
/* two passes after load, on the hero's CTA only - the header pill stays still */
.hero .btn--primary::after { animation: sheen 5.5s var(--ease) 1.5s 2; }
/* hover pass: a one-way transition that snaps back unseen, never re-arming the load passes */
.btn--primary:hover::before { transform: translateX(120%); transition: transform 0.9s var(--ease); }
@keyframes sheen { 0%, 62% { transform: translateX(-120%); } 88%, 100% { transform: translateX(120%); } }
/* the press is acknowledged the instant it lands, not when the finger lifts */
.btn:active { scale: 0.97; transition-duration: 0.2s, 0.25s, 0.06s; }
.btn--ghost {
  background: transparent; color: var(--text); border-color: var(--line-strong); box-shadow: none;
}
.btn--ghost:hover { background: rgba(153, 208, 238, 0.08); border-color: var(--ice); box-shadow: none; }
.btn__ext { font-size: 0.9em; opacity: 0.75; }

/* --------------------------------- hero ---------------------------------- */
.hero { position: relative; background: var(--ocean); }
.hero__viewport { position: relative; }
.hero__canvas { display: none; width: 100%; height: 100%; background: var(--ocean); }
.hero__rail { display: none; }

/* Fallback / no-JS / reduced motion: the walk as a read-through. Copy leads,
   the still follows it as evidence, and each stop sits on its own card so the
   stack reads as chapters rather than as a photo roll. */
/* in the stack there is no .wrap around the stops, so the column sets its own
   gutter and clears the fixed header */
.hero:not(.is-scrub) .hero__stops {
  width: min(100% - var(--pad-x) * 2, var(--wrap)); margin-inline: auto;
  padding-top: clamp(5.5rem, 14vw, 7.5rem);
}
.stop {
  position: relative; padding-block: clamp(1.5rem, 4vw, 2.5rem);
  display: flex; flex-direction: column-reverse; gap: clamp(1.1rem, 2.5vw, 1.6rem);
}
.stop + .stop { border-top: 1px solid var(--line); }
.stop__still {
  width: 100%; border-radius: var(--r-md); display: block;
  aspect-ratio: 16 / 9; object-fit: cover; max-height: 42vh;
}
.stop__copy { max-width: 44rem; padding-top: 0; }
.stop__copy > :last-child { margin-bottom: 0; }
.hero:not(.is-scrub) .stop:first-child { padding-top: 0; }
/* A stop title is a <p> (the H1 is the only heading in the walk), so it takes
   the heading treatment explicitly - otherwise it renders at body weight next to
   600-weight section headings. */
.stop__title {
  font-size: var(--t-h2); font-weight: 600; color: var(--snow);
  line-height: 1.06; letter-spacing: -0.022em; text-wrap: balance; margin-bottom: 0.9rem;
}
.stop__title a { color: inherit; text-decoration-color: rgba(196, 248, 255, 0.35); }
.stop__line { font-size: clamp(1.05rem, 1.5vw, 1.32rem); color: var(--text-2); }
.hero.is-scrub .stop__line, .hero.is-scrub .hero__sub { color: var(--text); }
/* Ice Blue is the section-kicker colour on the page ground; over the picture
   it is the dimmest thing in the frame, so the hero uses the brighter tint. */
/* over the picture the tint starts brighter, where Ice Blue would sink into the ice */
.hero.is-scrub .kicker { background: linear-gradient(100deg, var(--ice-light) 0%, #eafcff 55%, var(--snow) 100%); -webkit-background-clip: text; background-clip: text; }

/* Scrubbed mode: the canvas is pinned and the copy floats over it. */
.hero.is-scrub { height: calc(var(--hero-screens, 8) * 100svh); }
.hero.is-scrub .hero__viewport {
  position: sticky; top: 0; height: 100svh; overflow: hidden;
}
.hero.is-scrub .hero__canvas { display: block; position: absolute; inset: 0; }
/* The legibility scrim is painted into the canvas by hero.js, not layered here:
   that keeps it measurable from the canvas pixels and keeps one set of numbers
   driving both the look and the contrast check. */
.hero.is-scrub .hero__stops { position: absolute; inset: 0; z-index: 2; }
.hero.is-scrub .stop {
  position: absolute; inset: 0; padding: 0;
  display: grid; align-content: center;
  opacity: 0; pointer-events: none;
}
.hero.is-scrub .stop.is-active { pointer-events: auto; }
.hero.is-scrub .stop__still { display: none; }
.hero.is-scrub .stop__copy {
  width: min(100% - var(--pad-x) * 2, var(--wrap));
  margin-inline: auto; max-width: none; padding-top: 0;
}
.hero.is-scrub .stop__copy > * { max-width: 40rem; }
.hero.is-scrub .stop__copy .trust { max-width: none; }

.hero.is-scrub .hero__rail {
  display: grid; gap: 0.75rem; position: absolute; z-index: 3;
  right: clamp(1rem, 2.4vw, 2rem); top: 50%; translate: 0 -50%;
}
.hero__dot {
  width: 10px; height: 10px; padding: 0; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line-strong); background: transparent;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease), scale 0.3s var(--ease);
}
.hero__dot.is-on { background: var(--ice-light); border-color: var(--ice-light); scale: 1.25; }

.hero__h1 {
  font-size: var(--t-display); letter-spacing: -0.03em;
  /* two layers: a passing cold light on top of a still Snow -> Ice Light tint;
     both ends of the moving layer are transparent, so the loop has no seam */
  background:
    linear-gradient(100deg, transparent 0%, transparent 36%, rgba(196, 248, 255, 0.9) 44%, rgba(153, 208, 238, 0.95) 50%, rgba(196, 248, 255, 0.9) 56%, transparent 64%, transparent 100%) 100% 50% / 300% 100% no-repeat,
    linear-gradient(118deg, var(--snow) 0%, #eefbff 55%, var(--ice-light) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero.is-scrub .hero__h1 { animation: h1-light 10s ease-in-out infinite; }
/* stop painting it once the first caption has faded */
.hero.is-scrub .stop:not(.is-active) .hero__h1 { animation-play-state: paused; }
@keyframes h1-light {
  0% { background-position: 100% 50%, 0 0; }
  62%, 100% { background-position: 0% 50%, 0 0; }
}
.hero__sub { font-size: clamp(1.05rem, 1.5vw, 1.3rem); color: var(--text-2); margin-top: 1.25rem; }

/* The one gradient accent on the site: the strategy names under the H1. Without
   JS (or with reduced motion) all three read as a static line; site.js stacks
   them in one grid cell so the block never changes width while it cycles. */
.hero__rotor {
  /* its own line, not a clause squeezed between the H1 and the subline: air above
     and below, and a size that holds the first screen on its own */
  margin-top: clamp(1.1rem, 2vw, 1.75rem); font-size: clamp(1.5rem, 2.6vw, 2.3rem); font-weight: 600;
  letter-spacing: -0.016em; line-height: 1.2; color: var(--text);
}
.hero__rotor + .hero__sub { margin-top: clamp(1.4rem, 2.2vw, 2rem); }
.rotor__item { display: inline-flex; align-items: baseline; white-space: nowrap; }
.hero__rotor:not(.is-rotor) { font-size: clamp(1.05rem, 1.5vw, 1.3rem); }
.rotor__item:not(:last-child)::after { content: "·"; content: "·" / ""; color: var(--text-3); margin-inline: 0.55em 0.45em; }
.rotor__word {
  background: linear-gradient(100deg, var(--ice) 0%, var(--ice-light) 55%, var(--snow) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero__rotor.is-rotor { display: grid; }
/* the three items stay in the cell to size it; two layers morph on top */
.hero__rotor.is-rotor .rotor__item { grid-area: 1 / 1; visibility: hidden; }
.hero__rotor.is-rotor .rotor__item::after { content: none; }
.hero__rotor.is-rotor .rotor__layer { visibility: visible; opacity: 0; will-change: filter, opacity; }
/* the gooey pass: blurred glyphs are re-thresholded on alpha, so two names
   merge and split like one body instead of cross-fading (the Magic UI morph) */
.hero__rotor.is-morphing { filter: url(#rotor-threshold) blur(0.6px); }
.hero__cta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }

/* trust rail - four verifiable facts */
.trust {
  list-style: none; margin: 2.5rem 0 0; padding: 0;
  display: grid; gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.trust li { margin: 0; padding: 0.95rem 1.1rem; background: rgba(2, 19, 50, 0.72); }
.trust b { display: block; font-size: var(--t-small); color: var(--snow); font-weight: 600; }
.trust span { display: block; font-size: var(--t-micro); color: var(--text-3); margin-top: 0.2rem; }
.trust a { color: inherit; }

/* ------------------------------- sections -------------------------------- */
.section { padding-block: var(--sec-y); position: relative; scroll-margin-top: 72px; }
.section--tint {
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(153, 208, 238, 0.07), transparent 70%),
    var(--ocean);
  border-top: 1px solid var(--line);
}
/* The corridor from the walk (stop 1233) sits far below the cards: the same
   world the hero moved through, held at a strength where the type stays on the
   page ground rather than on a picture. */
.section--depth { overflow: hidden; }
.section--depth::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url("../img/stop-1c-sm.jpg") center 40% / cover no-repeat;
  opacity: 0.13;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 70%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 70%, transparent 100%);
}
.section--depth > .wrap { position: relative; z-index: 1; }
.section__head { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
/* A section that is only words is centred: nothing to align a left edge against. */
.section--center { text-align: center; }
.section--center .wrap > * { margin-inline: auto; }
.section--center h1, .section--center h2 { text-wrap: balance; }
.section--center p, .section--center .lede { max-width: 54rem; }

.section--center .note { border-left: 0; padding-left: 0; padding-right: 0; max-width: 54rem; }
.section--center .section__head { max-width: none; }
/* a key/value list stays a two-column list, but the list itself is centred */
/* standing alone in a centred section the list is the content, so it reads at body
   size with the label as its micro caption */
.section--center .spec { max-width: 36rem; margin-inline: auto; text-align: left; gap: 0.85rem; }
.section--center .spec li { grid-template-columns: 1fr auto; gap: 1.25rem; padding-bottom: 0.85rem; border-bottom: 1px solid var(--line); }
.section--center .spec li:last-child { border-bottom: 0; padding-bottom: 0; }
.section--center .spec .k { font-size: var(--t-micro); }
.section--center .spec .v { text-align: right; font-size: var(--t-body); color: var(--text); }
.section--center ul:not(.spec), .section--center ol { max-width: 34rem; margin-inline: auto; text-align: left; }
.section--center .btn { margin-inline: auto; }

/* a page head is a heading and its lead - nothing to align a left edge against */
.page-head { text-align: center; }
.page-head > * { margin-inline: auto; }
.page-head h1 { text-wrap: balance; }
.page-head .lede, .page-head .muted, .page-head p { max-width: 54rem; }
.crumbs ol { justify-content: center; }
/* a section whose only wide element is a schematic: the words centre, the panel keeps its width */
.section--center-head > .wrap > h2, .section--center-head .section__head { text-align: center; margin-inline: auto; }
.section--center-head .section__head { max-width: none; }

.section--center-head figcaption { text-align: center; margin-inline: auto; }
/* every section head reads centred; only the block below it keeps its own alignment */
.section > .wrap > h2:first-child, .section__head { text-align: center; margin-inline: auto; }
.section__head { max-width: 52rem; }

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

.grid { display: grid; gap: var(--gap); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }

.card {
  position: relative; padding: clamp(1.35rem, 2.4vw, 1.9rem);
  border: 1px solid var(--line); border-radius: var(--r-md);
  /* ice as a material: a cold light entering at the top-left corner, one faint
     facet plane across the submerged half, the dark ground underneath */
  background:
    radial-gradient(70% 45% at 0% 0%, rgba(196, 248, 255, 0.09), transparent 65%),
    linear-gradient(112deg, transparent 52%, rgba(196, 248, 255, 0.035) 52%, rgba(196, 248, 255, 0.012) 78%, transparent 78%),
    linear-gradient(180deg, rgba(6, 35, 84, 0.55), rgba(2, 19, 50, 0.6));
  display: flex; flex-direction: column;
  --mx: 50%; --my: 0%; --spot: 0;
  transition: border-color 0.35s var(--ease), transform 0.35s var(--ease), box-shadow 0.35s var(--ease), --spot 0.4s var(--ease);
}
/* inherits: the ::after edge light and the .card__glow child read the value */
@property --spot { syntax: "<number>"; inherits: true; initial-value: 0; }
/* the pointer is a cold light held close to the ice: it lights the edge it is
   nearest to and a little of the surface under it */
.card::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  padding: 1px;
  background: radial-gradient(240px circle at var(--mx) var(--my), rgba(196, 248, 255, 0.5), transparent 62%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: var(--spot);
}
.card:hover { --spot: 1; }
@media (hover: none) {
  .card { --mx: 50%; --my: 42%; }
  .card:active { --spot: 1; transition-duration: 0.35s, 0.35s, 0.35s, 0.12s; }
}
.card > .card__glow {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(320px circle at var(--mx) var(--my), rgba(196, 248, 255, 0.07), transparent 70%);
  opacity: var(--spot);
}
.meta-row a::after { content: "\2192"; content: "\2192" / ""; display: inline-block; margin-left: 0.35em; transition: translate 0.3s var(--ease); }
.card:hover .meta-row a::after { translate: 3px 0; }
.card:hover {
  border-color: var(--line-strong); transform: translateY(-3px);
  box-shadow: 0 24px 48px -28px rgba(0, 0, 0, 0.7), inset 0 0 0 1px rgba(196, 248, 255, 0.06);
}
.card::before { transition: opacity 0.35s var(--ease); opacity: 0.8; }
.card:hover::before { opacity: 1; }
.card__head { display: flex; align-items: center; margin-bottom: 1.25rem; }
.card__icon {
  width: 42px; height: 42px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 10px;
  background: linear-gradient(180deg, rgba(153, 208, 238, 0.10), rgba(153, 208, 238, 0.03));
}
.card__icon svg { width: 24px; height: 24px; fill: none; stroke: var(--ice-light); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.card__icon .i-wl { stroke: var(--ice); opacity: 0.55; }
@media (min-width: 600px) and (max-width: 952px) {
  #strategies .grid--3 { grid-template-columns: 1fr; }
  #strategies .card {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); column-gap: clamp(1.5rem, 4vw, 2.75rem);
    align-content: start;
  }
  #strategies .card > * { grid-column: 1; }
  #strategies .card > .spec { grid-column: 2; grid-row: 1 / span 3; margin-bottom: 1.25rem; }
  #strategies .card > .meta-row { grid-column: 1 / -1; max-width: none; }
}
.has-reveal .card[data-reveal].is-revealed {
  transition: opacity 0.7s var(--ease) var(--d, 0s), translate 0.7s var(--ease) var(--d, 0s),
              border-color 0.35s var(--ease), transform 0.35s var(--ease), box-shadow 0.35s var(--ease), --spot 0.4s var(--ease);
}
.has-reveal .grid > .card:nth-child(2) { --d: 0.12s; }
.has-reveal .grid > .card:nth-child(3) { --d: 0.24s; }
.card::before {
  /* the waterline again, as the top edge of every card */
  content: ""; position: absolute; inset: -1px auto auto 0; height: 1px; width: 100%;
  background: linear-gradient(90deg, transparent, var(--line-strong) 30%, rgba(196,248,255,.6) 50%, var(--line-strong) 70%, transparent);
}
.card > .meta-row { margin-bottom: 0; margin-top: auto; }
.card h3 { margin-bottom: 0.5rem; }
.card__role { color: var(--text-2); font-size: var(--t-small); margin-bottom: 1.25rem; }

.spec { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: 0.6rem; }
.spec li { display: grid; grid-template-columns: 1fr auto; gap: 0.75rem; margin: 0; align-items: baseline; font-size: var(--t-small); }
/* Inside a card the column is narrow, and a right-aligned value wraps into a
   ragged block beside a label that has wrapped too. Stacked, both stay whole. */
.card .spec li { grid-template-columns: 1fr; gap: 0.15rem; }
.card .spec .v { text-align: left; }
.spec dt, .spec .k { color: var(--text-3); font-size: var(--t-micro); text-transform: uppercase; letter-spacing: 0.08em; }
.spec .v { color: var(--text); text-align: right; }

.meta-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem;
  padding-top: 1.1rem; border-top: 1px solid var(--line); font-size: var(--t-micro); color: var(--text-3);
}
.meta-row a { margin-left: auto; font-weight: 600; text-decoration: none; color: var(--ice-light); }
.meta-row a:hover { text-decoration: underline; }

.note {
  border-left: 2px solid var(--line-strong); padding: 0.15rem 0 0.15rem 1.1rem;
  color: var(--text-2); font-size: var(--t-small); max-width: var(--measure);
}
.note + .note { margin-top: 1.25rem; }
/* in a grid the notes are columns, not a stack: no sibling offset, all tops equal */
.grid > .note + .note, .grid > .note { margin-top: 0; }
.grid > .note { align-self: start; }
.note--after-grid { margin-top: 2rem; }
.more { margin-top: 1.75rem; }
.steps__notes { margin-top: 2.5rem; }
.band__lede { margin-top: 1.1rem; }
.band__link { margin-bottom: 0; }
.note strong { color: var(--snow); }

/* published limits as figures - the only place a number counts up */
.facts {
  list-style: none; margin: clamp(2.5rem, 5vw, 4rem) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden;
}
.facts li { margin: 0; padding: 1.25rem 1.35rem 1.3rem; background: var(--ocean); position: relative; }
.facts li::before {
  content: ""; position: absolute; inset: 0 auto auto 0; height: 1px; width: 100%;
  background: linear-gradient(90deg, rgba(196,248,255,.45), transparent 70%);
}
.facts__n { display: block; font-size: clamp(1.9rem, 3vw, 2.5rem); font-weight: 600; letter-spacing: -0.02em; color: var(--snow); line-height: 1.1; }
.facts__n small { font-size: 0.5em; font-weight: 500; color: var(--ice); letter-spacing: 0; }
.facts__n [data-ticker] { display: inline-block; }
.facts__l { display: block; margin-top: 0.45rem; font-size: var(--t-small); color: var(--text-2); }

.steps { list-style: none; counter-reset: s; margin: 0; padding: 0; display: grid; gap: var(--gap); }
.steps > li { margin: 0; counter-increment: s; padding-left: 3.4rem; position: relative; }
.steps > li::before {
  content: counter(s); position: absolute; left: 0; top: -0.15rem;
  width: 2.35rem; height: 2.35rem; border-radius: 999px;
  display: grid; place-items: center;
  border: 1px solid var(--line-strong); color: var(--ice-light);
  font-size: var(--t-small); font-weight: 600; font-variant-numeric: tabular-nums;
}
.steps h3 { margin-bottom: 0.4rem; }

/* tables must scroll inside their own box, never the page */
.table-scroll {
  overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); position: relative;
  background:
    radial-gradient(70% 45% at 0% 0%, rgba(196, 248, 255, 0.07), transparent 65%),
    linear-gradient(112deg, transparent 54%, rgba(196, 248, 255, 0.03) 54%, rgba(196, 248, 255, 0.01) 80%, transparent 80%),
    linear-gradient(180deg, rgba(6, 35, 84, 0.5), rgba(2, 19, 50, 0.6));
  transition: border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.table-scroll::before {
  /* the waterline again, along the top edge */
  content: ""; position: absolute; inset: 0 auto auto 0; height: 1px; width: 100%; z-index: 2;
  background: linear-gradient(90deg, transparent, var(--line-strong) 30%, rgba(196,248,255,.6) 50%, var(--line-strong) 70%, transparent);
}
.table-scroll:hover { border-color: var(--line-strong); box-shadow: 0 24px 48px -30px rgba(0, 0, 0, 0.7); }
table[data-compare] tbody tr { transition: background 0.25s var(--ease); }
table[data-compare] tbody tr:hover { background: rgba(153, 208, 238, 0.04); }
table[data-compare] a { position: relative; }
table[data-compare] a::after { content: "\2192"; content: "\2192" / ""; display: inline-block; margin-left: 0.4em; transition: translate 0.3s var(--ease); }
table[data-compare] th:hover a::after, table[data-compare] td:hover a::after { translate: 3px 0; }
/* rows arrive one after another when the table comes into view */
.has-reveal [data-reveal="rows"] tbody tr { opacity: 0; translate: 0 10px; transition: opacity 0.55s var(--ease) var(--d, 0s), translate 0.55s var(--ease) var(--d, 0s); }
.has-reveal [data-reveal="rows"].is-revealed tbody tr { opacity: 1; translate: none; }
.has-reveal [data-reveal="rows"] tbody tr:nth-child(2) { --d: 0.05s; }
.has-reveal [data-reveal="rows"] tbody tr:nth-child(3) { --d: 0.10s; }
.has-reveal [data-reveal="rows"] tbody tr:nth-child(4) { --d: 0.15s; }
.has-reveal [data-reveal="rows"] tbody tr:nth-child(5) { --d: 0.20s; }
.has-reveal [data-reveal="rows"] tbody tr:nth-child(6) { --d: 0.25s; }
.has-reveal [data-reveal="rows"] tbody tr:nth-child(7) { --d: 0.30s; }
.has-reveal [data-reveal="rows"] tbody tr:nth-child(8) { --d: 0.35s; }
.has-reveal [data-reveal="rows"] tbody tr:nth-child(9) { --d: 0.40s; }
.has-reveal [data-reveal="rows"] tbody tr:nth-child(2) { --d: 0.05s; }
table { border-collapse: collapse; width: 100%; min-width: 640px; font-size: var(--t-small); }
th, td { text-align: left; padding: 0.9rem 1rem; border-bottom: 1px solid var(--line); vertical-align: top; }
thead th { color: var(--snow); font-weight: 600; background: rgba(6, 35, 84, 0.6); white-space: nowrap; }
tbody th { color: var(--text-3); font-weight: 500; font-size: var(--t-micro); text-transform: uppercase; letter-spacing: 0.07em; white-space: nowrap; }
td { color: var(--text-2); }
tr:last-child th, tr:last-child td { border-bottom: 0; }

/* FAQ */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq details.is-animating { overflow: hidden; }
.faq summary {
  cursor: pointer; list-style: none; padding: 1.15rem 2.5rem 1.15rem 0; position: relative;
  font-weight: 600; color: var(--snow); font-size: clamp(1rem, 1.2vw, 1.1rem);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 0.5rem; top: 50%; width: 11px; height: 11px;
  border-right: 1.5px solid var(--ice); border-bottom: 1.5px solid var(--ice);
  translate: 0 -60%; rotate: 45deg; transition: rotate 0.25s var(--ease);
}
.faq details[open] summary::after { rotate: 225deg; translate: 0 -20%; }
.faq .faq__a { padding: 0 0 1.4rem; color: var(--text-2); }
.faq .faq__a > :last-child { margin-bottom: 0; }

/* Priority band */
.band {
  border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1.75rem, 4vw, 3rem);
  background:
    radial-gradient(100% 140% at 100% 0%, rgba(153, 208, 238, 0.1), transparent 60%),
    linear-gradient(180deg, rgba(6, 35, 84, 0.55), rgba(2, 19, 50, 0.55));
}
.tag {
  display: inline-block; font-size: var(--t-micro); font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ice-light);
  border: 1px solid var(--line-strong); border-radius: 999px; padding: 0.3rem 0.75rem; margin-bottom: 1.1rem;
}

/* closing call to action */
/* closing brand object: the primary mark inside a slowly turning ring of text */
.orbit { position: relative; width: 184px; height: 184px; margin: 0 auto 1.75rem; }
.orbit img {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 74px; height: 74px;
  filter: drop-shadow(0 0 18px rgba(153, 208, 238, 0.35));
}
.orbit svg { width: 100%; height: 100%; animation: orbit 48s linear infinite; animation-play-state: paused; }
.orbit.is-on svg { animation-play-state: running; }
.orbit text { font-size: 11.5px; font-weight: 600; letter-spacing: 0.3em; fill: var(--ice); }
@keyframes orbit { to { rotate: 360deg; } }

.close { text-align: center; }
.close .wrap > * { margin-inline: auto; }
.close h2 { font-size: clamp(1.9rem, 4vw, 3rem); }
.close p { margin-top: 1rem; color: var(--text-2); }
.close .btn { margin-top: 2rem; }

/* breadcrumbs, page header */
.crumbs { font-size: var(--t-micro); color: var(--text-3); padding-top: 8rem; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0; padding: 0; }
.crumbs li + li::before { content: "/"; margin-right: 0.45rem; opacity: 0.5; }
.crumbs a { color: var(--text-2); text-decoration: none; }
.crumbs a:hover { color: var(--snow); }

.page-head { padding-block: clamp(2rem, 4vw, 3.25rem) clamp(2.5rem, 5vw, 4rem); }
.page-head h1 { font-size: var(--t-h1); }
.page-head .lede { margin-top: 1.25rem; font-size: clamp(1.08rem, 1.35vw, 1.28rem); }
.page-hero {
  position: relative; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line);
  aspect-ratio: 21 / 9; margin-bottom: clamp(2rem, 4vw, 3rem);
}
.page-hero img { width: 100%; height: 100%; object-fit: cover; }
.page-hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(2,19,50,.1), rgba(2,19,50,.75));
}
.page-hero--left img { object-position: 12% 50%; }
.page-hero--mid img  { object-position: 50% 50%; }
.page-hero--right img { object-position: 88% 50%; }

/* ------------------- strategies key visual (drawn, not shot) -------------- */
.rig-fig { position: relative; margin: 0 0 clamp(2.5rem, 5vw, 4rem); }
.rig-fig figcaption { margin-top: clamp(1.5rem, 3vw, 2.25rem); padding-top: 1.25rem; border-top: 1px solid var(--line); }
/* phone: a card that reads label, drawing, label - the panel itself is a short
   strip there. From 861px the labels move onto the drawing, at the waterline. */
.rig-panel {
  position: relative; display: grid; gap: 0.6rem; padding: 1.1rem 1.15rem 1.25rem;
  border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
  background:
    radial-gradient(80% 60% at 18% 0%, rgba(196, 248, 255, 0.07), transparent 62%),
    linear-gradient(180deg, rgba(6, 35, 84, 0.5), rgba(2, 19, 50, 0.72));
}
.rig { display: block; width: 100%; height: auto; }
.rig--tall { display: none; }
.rig--tall .rig__min { font-size: 22px; }
.rig--tall .rig__peak-grain { fill: url(#rig-t-grain-lit); }
.rig--tall .rig__body-grain { fill: url(#rig-t-grain-deep); }
.rig--tall .rig__body-fade { fill: url(#rig-t-fade); }
@media (max-width: 640px) {
  .rig--wide { display: none; }
  .rig--tall { display: block; }
  .rig--tall .rig__min { display: block; }
}
/* shared pointer light: the panel and the schematic answer the cursor the way the
   strategy cards do, one mechanism for all three */
[data-light] { --mx: 50%; --my: 0%; --spot: 0; position: relative; }
[data-light] > .card__glow {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1;
  background: radial-gradient(340px circle at var(--mx) var(--my), rgba(196, 248, 255, 0.06), transparent 70%);
  opacity: var(--spot);
}
.rig-fig[data-light] { --spot: 0; }
.rig-panel { transition: border-color 0.35s var(--ease); }
.rig-fig:hover .rig-panel, .diagram--light:hover { border-color: var(--line-strong); }
.diagram--light { overflow: hidden; transition: border-color 0.35s var(--ease); }
.rig__grid path { stroke: rgba(153, 208, 238, 0.07); stroke-width: 1; fill: none; }
/* the mark's own construction: bright ice above the line, the larger cold mass below */
/* each core is a flat facet plus a grain of points, so it reads as built rather
   than shaded; the fade takes the light away with depth */
.rig__peak-base { fill: rgba(196, 248, 255, 0.12); }
.rig__peak-grain { fill: url(#rig-grain-lit); }
.rig__peak-edge { fill: none; stroke: rgba(255, 255, 255, 0.75); stroke-width: 1; }
.rig__body-base { fill: rgba(153, 208, 238, 0.10); }
.rig__body-grain { fill: url(#rig-grain-deep); }
/* A/B: the same silhouettes filled with the generated ice material instead of the dot grain. */
.rig-fig.is-photo .rig__body-grain, .rig-fig.is-photo .rig__peak-grain { fill: url(#rig-photo); }
.rig-fig.is-photo .rig__peak-grain { opacity: 0.55; }
/* hybrid: the generated material sits under the dot grain, as depth only */
.rig-fig.is-hybrid .rig__body-base, .rig-fig.is-hybrid .rig__peak-base { fill: url(#rig-photo); opacity: 0.5; }
.rig-fig.is-hybrid .rig__peak-base { opacity: 0.32; }
.rig__body-fade { fill: url(#rig-fade); }
.rig__body-edge { fill: none; stroke: rgba(196, 248, 255, 0.5); stroke-width: 1; }
.rig__seam { stroke: rgba(2, 19, 50, 0.5); stroke-width: 2; fill: none; }
.rig__facet { stroke: rgba(2, 19, 50, 0.22); stroke-width: 1.5; fill: none; }
.rig__crease { stroke: rgba(196, 248, 255, 0.2); stroke-width: 1; fill: none; }
.rig__tick--faint { stroke: rgba(153, 208, 238, 0.3); stroke-width: 1.5; }
/* On a strategy page its own core is lit and the other two are held back, so the
   page's subject is obvious while the comparison stays visible. */
.rig__core.is-held { opacity: 0.32; }
.rig__core.is-held .rig__body-grain, .rig__core.is-held .rig__peak-grain { opacity: 0.5; }
.rig__core.is-lit { filter: brightness(1.28) drop-shadow(0 0 18px rgba(153, 208, 238, 0.45)); }
.rig__core.is-lit .rig__peak-base { fill: rgba(196, 248, 255, 0.3); }
.rig__core.is-lit .rig__body-base { fill: rgba(153, 208, 238, 0.22); }
.rig__core.is-lit .rig__body-fade { opacity: 0.55; }
.rig__core.is-lit .rig__peak-edge { stroke: #fff; stroke-width: 1.4; }
.rig__core.is-lit .rig__body-edge { stroke: var(--ice-light); stroke-width: 1.4; }
.rig__core.is-lit .rig__crease { stroke: rgba(196, 248, 255, 0.45); }
.rig__core.is-lit .rig__axis { stroke: var(--ice-light); }
.rig__core.is-lit .rig__tick { stroke: rgba(196, 248, 255, 0.85); }
.rig__core.is-lit .rig__min { fill: var(--text); }
.rig__core.is-lit .rig__hit { fill: #fff; filter: drop-shadow(0 0 6px rgba(196, 248, 255, 0.9)); }
/* while a pointer is picking, the page's own highlight steps aside */
.rig-fig.is-picking .rig__core.is-lit:not(.is-pick) { filter: none; }
/* Pointing at a core follows it through the whole page: the core lights, its name
   lights, and its column in the comparison table lights with it. Clicking opens it. */
.rig__link { cursor: pointer; }
.rig-fig.is-picking .rig__core { opacity: 0.22; }
/* the chosen core does not merely stay - it lights: the ice brightens, the grain
   comes forward and a cold halo forms around it */
.rig-fig.is-picking .rig__core.is-pick {
  opacity: 1;
  filter: brightness(1.28) drop-shadow(0 0 18px rgba(153, 208, 238, 0.45));
}
.rig__core { transition: opacity 0.3s var(--ease), filter 0.3s var(--ease); }
.rig__core.is-pick .rig__peak-base { fill: rgba(196, 248, 255, 0.3); }
.rig__core.is-pick .rig__body-base { fill: rgba(153, 208, 238, 0.22); }
.rig__core.is-pick .rig__body-fade { opacity: 0.55; }
.rig__core.is-pick .rig__peak-edge { stroke: #fff; stroke-width: 1.4; }
.rig__core.is-pick .rig__body-edge { stroke: var(--ice-light); stroke-width: 1.4; }
.rig__core.is-pick .rig__crease { stroke: rgba(196, 248, 255, 0.45); }
.rig__core.is-pick .rig__axis { stroke: var(--ice-light); }
.rig__core.is-pick .rig__tick { stroke: rgba(196, 248, 255, 0.85); }
.rig__core.is-pick .rig__min { fill: var(--text); }
.rig__core.is-pick .rig__hit { fill: #fff; filter: drop-shadow(0 0 6px rgba(196, 248, 255, 0.95)); }
.rig__link:focus-visible { outline: none; }
.rig__link:focus-visible .rig__zone { fill: rgba(153, 208, 238, 0.08); stroke: var(--ice); stroke-width: 2; rx: 12; }
.rig-key li { transition: opacity 0.3s var(--ease); }
.rig-fig.is-picking .rig-key li { opacity: 0.4; }
.rig-fig.is-picking .rig-key li.is-pick { opacity: 1; }
.rig-key li.is-pick b, .rig-key li.is-pick b a { color: var(--ice-light); }
/* the matching column of the comparison table */
table[data-compare] th, table[data-compare] td { transition: background 0.25s var(--ease), color 0.25s var(--ease); }
table[data-compare][data-active="1"] tr > :nth-child(2),
table[data-compare][data-active="2"] tr > :nth-child(3),
table[data-compare][data-active="3"] tr > :nth-child(4) {
  background: rgba(153, 208, 238, 0.09); color: var(--snow);
}
table[data-compare][data-active] thead tr > :nth-child(n) { color: var(--text-3); }
table[data-compare][data-active="1"] thead tr > :nth-child(2),
table[data-compare][data-active="2"] thead tr > :nth-child(3),
table[data-compare][data-active="3"] thead tr > :nth-child(4) { color: var(--ice-light); }
.rig__min, .rig__span, .rig__side {
  font-family: var(--font); font-size: 13px; font-variant-numeric: tabular-nums;
  fill: var(--text-3); letter-spacing: 0.04em;
}
.rig__span, .rig__side { font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; }
.rig__side { fill: var(--text-2); }
.rig__water { stroke: var(--ice-light); stroke-width: 2; fill: none; filter: drop-shadow(0 0 6px rgba(196, 248, 255, 0.55)); }
.rig__axis { stroke: var(--line-strong); stroke-width: 1; fill: none; }
.rig__tick { stroke: rgba(153, 208, 238, 0.55); stroke-width: 2; fill: none; }
.rig__hit { fill: var(--ice-light); }
/* On a phone the panel is a short strip, so the two marks read as lines above
   and below it; from 861px they move onto the drawing, at the waterline. */
.rig-mark {
  margin: 0; display: flex; align-items: center; gap: 0.6rem;
  font-size: var(--t-micro); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2);
}
.rig-mark::before { content: ""; width: 1.5rem; height: 1px; background: currentColor; opacity: 0.6; flex: none; }
.rig-mark--above { color: var(--ice-light); }
@media (min-width: 861px) {
  .rig-panel { display: block; padding: 0; }
  .rig-mark {
    position: absolute; left: clamp(1rem, 2.4vw, 2rem); margin: 0;
    max-width: 15ch; line-height: 1.35; display: block;
  }
  .rig-mark::before { content: none; }
  /* the waterline sits at 200 of the 460-unit viewBox */
  .rig-mark--above { top: calc(43.48% - 0.9rem); translate: 0 -100%; }
  .rig-mark--below { top: calc(43.48% + 0.7rem); }
}
.rig-key { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 0.85rem; }
.rig-key li { margin: 0; display: grid; grid-template-columns: auto 1fr; column-gap: 0.7rem; align-items: baseline; }
.rig-key__n { color: var(--text-3); font-size: var(--t-micro); letter-spacing: 0.08em; }
.rig-key b { color: var(--snow); font-weight: 600; }
.rig-key a { color: var(--text-2); text-decoration: none; border-bottom: 1px solid var(--line-strong); }
.rig-key a:hover { color: var(--snow); border-bottom-color: var(--ice); }
.rig-key li[aria-current] b { color: var(--ice-light); }
.rig-key li[aria-current] .rig-key__n { color: var(--ice); }
.rig-key__c { grid-column: 2; color: var(--text-2); font-size: var(--t-small); margin-top: 0.15rem; }
@media (min-width: 861px) {
  /* each name stands under its own core, not in an evenly spaced row */
  .rig-key { position: relative; display: block; height: 4.75rem; margin-top: 1.25rem; }
  .rig-key li {
    position: absolute; top: 0; translate: -50% 0; width: 15rem; max-width: 26vw;
    display: block; text-align: center;
  }
  .rig-key li:nth-child(1) { left: var(--x1); }
  .rig-key li:nth-child(2) { left: var(--x2); }
  .rig-key li:nth-child(3) { left: var(--x3); }
  .rig-key__n { display: block; margin-bottom: 0.15rem; }
  .rig-key__c { display: block; margin-top: 0.2rem; }
}
/* the figure assembles itself once: waterline draws across, cores rise, marks land */
.has-reveal [data-reveal="rig"] .rig__water,
.has-reveal [data-reveal="rig"] .rig__axis,
.has-reveal [data-reveal="rig"] .rig__seam { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s var(--ease) 0.15s; }
.has-reveal [data-reveal="rig"].is-revealed .rig__water,
.has-reveal [data-reveal="rig"].is-revealed .rig__axis,
.has-reveal [data-reveal="rig"].is-revealed .rig__seam { stroke-dashoffset: 0; }
.has-reveal [data-reveal="rig"] .rig__core { opacity: 0; translate: 0 14px; transition: opacity 0.7s var(--ease) calc(0.25s + var(--i) * 0.12s), translate 0.7s var(--ease) calc(0.25s + var(--i) * 0.12s); }
.has-reveal [data-reveal="rig"].is-revealed .rig__core { opacity: 1; translate: none; }
.has-reveal [data-reveal="rig"] .rig__hit { opacity: 0; transition: opacity 0.5s var(--ease) calc(0.7s + var(--i) * 0.12s); }
.has-reveal [data-reveal="rig"].is-revealed .rig__core.is-lit .rig__hit { animation: hit-land 0.5s var(--ease) calc(0.7s + var(--i) * 0.12s) both; }
@keyframes hit-land { from { scale: 0.2; } to { scale: 1; } }
.has-reveal [data-reveal="flow"] li { opacity: 0; translate: 0 10px; transition: opacity 0.6s var(--ease) var(--d, 0s), translate 0.6s var(--ease) var(--d, 0s); }
.has-reveal [data-reveal="flow"].is-revealed li { opacity: 1; translate: none; }
.has-reveal [data-reveal="flow"] li:nth-child(2) { --d: 0.08s; }
.has-reveal [data-reveal="flow"] li:nth-child(3) { --d: 0.16s; }
.has-reveal [data-reveal="flow"] li:nth-child(4) { --d: 0.24s; }
.has-reveal [data-reveal="flow"] li:nth-child(5) { --d: 0.32s; }
.has-reveal [data-reveal="flow"] li:nth-child(6) { --d: 0.40s; }
.has-reveal [data-reveal="rig"].is-revealed .rig__hit { opacity: 1; }
@media (max-width: 860px) {
  .rig-key { grid-template-columns: 1fr; gap: 0.85rem; }
  .rig__min, .rig__span, .rig__side { display: none; }
}

/* diagram */
.diagram { border: 1px solid var(--line); border-radius: var(--r-md); padding: clamp(1.25rem, 3vw, 2rem); background: rgba(2, 19, 50, 0.55); }
.diagram svg { width: 100%; height: auto; }
figcaption { color: var(--text-2); font-size: var(--t-small); margin-top: 1.1rem; max-width: var(--measure); }

/* footer */
.footer {
  border-top: 1px solid var(--line); padding-block: clamp(3rem, 6vw, 4.5rem) 2.5rem;
  background:
    radial-gradient(120% 100% at 50% 120%, rgba(14, 3, 95, calc(0.5 * var(--use-indigo))), transparent 62%),
    var(--ocean);
}
.footer__cols { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
.footer h2 { font-size: var(--t-micro); text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-3); font-weight: 600; margin-bottom: 0.9rem; }
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin: 0.5rem 0; }
.footer a { color: var(--text-2); text-decoration: none; font-size: var(--t-small); }
.footer a:hover { color: var(--snow); text-decoration: underline; }
.footer__base { margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: 1.75rem; border-top: 1px solid var(--line); }
.footer__base p { max-width: 62ch; }

/* reveal */
.has-reveal [data-reveal] { opacity: 0; translate: 0 18px; }
.has-reveal [data-reveal].is-revealed {
  opacity: 1; translate: none;
  transition: opacity 0.7s var(--ease) var(--d, 0s), translate 0.7s var(--ease) var(--d, 0s);
}
/* a keyboard user never tabs onto something still invisible (site.js commits the reveal on focusin) */
.has-reveal [data-reveal]:focus-within { opacity: 1; translate: none; }
/* section head: the kicker's line draws itself once the head is on screen */
.has-reveal [data-reveal="head"] .kicker::before { width: 0; transition: width 0.7s var(--ease) 0.2s; }
.has-reveal [data-reveal="head"].is-revealed .kicker::before { width: 2rem; }
/* cards: the icon strokes draw after the card has landed */
.has-reveal [data-reveal="card"] .card__icon svg * { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s var(--ease) 0.35s; }
.has-reveal [data-reveal="card"].is-revealed .card__icon svg * { stroke-dashoffset: 0; }
/* steps: arrive from the left, the number ring settles into place */
.has-reveal [data-reveal="step"] { translate: -16px 0; }
.has-reveal [data-reveal="step"]::before { scale: 0.6; opacity: 0; transition: scale 0.6s var(--ease) 0.15s, opacity 0.6s var(--ease) 0.15s; }
.has-reveal [data-reveal="step"].is-revealed::before { scale: 1; opacity: 1; }
.has-reveal .steps > li:nth-child(2) { --d: 0.12s; }
.has-reveal .steps > li:nth-child(3) { --d: 0.24s; }
/* risk notes: the rule on the left draws top to bottom */
.note { position: relative; }
.has-reveal [data-reveal="draw"] { border-left-color: transparent; }
.has-reveal [data-reveal="draw"]::before {
  content: ""; position: absolute; left: -2px; top: 0; width: 2px; height: 100%;
  background: var(--line-strong); transform: scaleY(0); transform-origin: top;
  transition: transform 0.8s var(--ease) 0.2s;
}
.has-reveal [data-reveal="draw"].is-revealed::before { transform: scaleY(1); }
.has-reveal .grid--2 > .note:nth-child(2) { --d: 0.08s; }
.has-reveal .grid--2 > .note:nth-child(3) { --d: 0.16s; }
.has-reveal .grid--2 > .note:nth-child(4) { --d: 0.24s; }
.has-reveal .grid--2 > .note:nth-child(5) { --d: 0.32s; }
/* priority band: the tag settles after the panel */
.has-reveal [data-reveal="band"] .tag { scale: 0.85; opacity: 0; transition: scale 0.5s var(--ease) 0.3s, opacity 0.5s var(--ease) 0.3s; }
.has-reveal [data-reveal="band"].is-revealed .tag { scale: 1; opacity: 1; }

/* ------------------------------- responsive ------------------------------ */
@media (max-width: 860px) {
  .nav__toggle {
    display: inline-flex; margin-left: auto; align-items: center; gap: 0.5rem;
    background: transparent; border: 1px solid var(--line-strong); color: var(--text);
    border-radius: 999px; padding: 0.55rem 0.95rem; font: inherit; font-size: var(--t-micro); cursor: pointer;
  }
  .nav {
    position: fixed; inset: 72px 0 auto; margin: 0; display: flex;
    opacity: 0; visibility: hidden; pointer-events: none;
    translate: 0 -10px; scale: 0.985; filter: blur(8px);
    transform-origin: top center;
    transition: opacity 0.32s var(--ease), translate 0.32s var(--ease), scale 0.32s var(--ease),
                filter 0.32s var(--ease), visibility 0.32s;
    flex-direction: column; align-items: stretch; gap: 0;
    background: rgba(2, 19, 50, 0.97); backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--line); padding: 0.5rem var(--pad-x) 1.5rem;
  }
  .nav.is-open { opacity: 1; visibility: visible; pointer-events: auto; translate: none; scale: 1; filter: none; }
  @media (prefers-reduced-transparency: reduce) { .nav { backdrop-filter: none; background: var(--ocean); } }
  .nav a { padding: 0.9rem 0; border-bottom: 1px solid var(--line); font-size: 1rem; }
  .nav .btn { margin-top: 1rem; border-bottom: 0; }
  .is-nav-open, .is-nav-open body { overflow: hidden; }

  /* Captions stop floating in the middle of the picture and sit in a panel at
     the foot of the frame, where they cannot cover the subject. */
  .hero.is-scrub .stop { align-content: end; padding-bottom: clamp(2rem, 8vw, 4rem); }
  /* Display size is a desktop luxury. At 375px the full display scale pushed the
     H1 to four lines and up into the bright ice, where no honest scrim saves it. */
  .hero.is-scrub .hero__h1 { font-size: clamp(1.95rem, 8vw, 2.6rem); }
  .hero:not(.is-scrub) .stop__still { aspect-ratio: 3 / 2; max-height: 32vh; }
  .hero:not(.is-scrub) .stop { padding-block: 1.25rem; }
  .hero.is-scrub .hero__rotor { font-size: clamp(1.2rem, 5.6vw, 1.55rem); margin-top: 0.85rem; }
  .hero.is-scrub .hero__rotor + .hero__sub { margin-top: 1rem; }
  .facts { grid-template-columns: 1fr 1fr; }
  .facts li { padding: 1rem 1.1rem 1.05rem; }
  /* "7,500 pUSD" stays on one line in a half-width cell down to 320 px */
  .facts__n { font-size: clamp(1.35rem, 7vw, 1.65rem); white-space: nowrap; }
  .orbit { width: 150px; height: 150px; }
  .orbit img { width: 60px; height: 60px; }
  /* static fallback on a phone: three lines, no separators */
  .hero__rotor:not(.is-rotor) .rotor__item { display: flex; }
  .hero__rotor:not(.is-rotor) .rotor__item::after { content: none; }
  .hero.is-scrub .hero__sub { font-size: 1rem; margin-top: 0.9rem; }
  .hero.is-scrub .hero__cta { margin-top: 1.25rem; gap: 0.6rem; }
  .hero.is-scrub .trust { margin-top: 1.25rem; }
  .hero.is-scrub .hero__rail { top: auto; bottom: 1rem; right: 50%; translate: 50% 0; grid-auto-flow: column; }
  .hero.is-scrub .stop { padding-bottom: 3.5rem; }
  .trust { grid-template-columns: 1fr 1fr; }
  .crumbs { padding-top: 6.5rem; }
}

@media (max-width: 460px) {
  /* Two columns, not one: stacked into four rows the trust rail runs so far up
     the phone frame that no reasonable scrim can keep it legible over the ice. */
  .trust { grid-template-columns: 1fr 1fr; }
  .trust li { padding: 0.75rem 0.85rem; }
  /* "3 Multi-Timeframe" runs the full column at 320px, so the smallest phones get slack */
  .hero.is-scrub .hero__rotor { font-size: 1.05rem; }
  .btn { width: 100%; }
  .hero__cta .btn { width: 100%; }
  .spec li { grid-template-columns: 1fr; gap: 0.15rem; }
  .spec .v { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rig__core, .rig-key li, table[data-compare] th, table[data-compare] td { transition: none; }
  .rig-fig.is-picking .rig__core.is-pick { filter: none; }
  .has-reveal [data-reveal="rig"].is-revealed .rig__core.is-lit .rig__hit { animation: none; }
  .hero.is-scrub .hero__h1 { animation: none; }
  .orbit svg { animation: none; }
  .card, .card:hover { transform: none; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .has-reveal [data-reveal] { opacity: 1; translate: none; }
}

@media print {
  .header, .hero__rail, .hero__canvas { display: none !important; }
  body { background: #fff; color: #000; }
  .hero__h1, .rotor__word { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #000; }
}

/* --------------------------- strategy flow diagram ----------------------- */
.flow { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 0; align-items: stretch; }
.flow li {
  margin: 0; flex: 1 1 9.5rem; min-width: 9rem; position: relative;
  padding: 0.9rem 1rem 0.9rem 1.1rem;
  border-top: 1px solid var(--line);
  font-size: var(--t-small); color: var(--text-2); line-height: 1.4;
}
.flow li::before {
  content: ""; position: absolute; left: 0; top: -3px; width: 5px; height: 5px;
  border-radius: 999px; background: var(--ice); box-shadow: 0 0 10px rgba(196, 248, 255, 0.8);
}
.flow li:first-child { border-top-color: var(--line-strong); }
.flow li:last-child::after {
  content: ""; position: absolute; right: 0; top: -3.5px; width: 6px; height: 6px;
  border-right: 1px solid var(--ice-light); border-top: 1px solid var(--ice-light);
  rotate: 45deg;
}
.flow li b { display: block; color: var(--snow); font-weight: 600; margin-bottom: 0.15rem; }
@media (max-width: 640px) {
  .flow li { flex-basis: 100%; border-top: 0; border-left: 1px solid var(--line); padding: 0.55rem 0 0.55rem 1.1rem; }
  .flow li::before { left: -3px; top: 0.9rem; }
  .flow li:last-child::after { right: auto; left: -3.5px; top: auto; bottom: -3px; rotate: 135deg; }
}