/* ==========================================================================
   AGENT IVAN — design system

   Concept: an operations dossier. "Agent" reads as logistics precision and
   accountability — a mission board, a manifest, a tracked route — never
   spy-thriller costume. The cold layer (mono data, grid, globe, numbered
   section tags) frames the LOGISTICS. The warm layer (real faces, children's
   letters, sand paper) carries the PEOPLE. That contrast is the design.

   Colour rule that matters: nothing sets colour by descendant context.
   Surfaces declare their own foreground via --fg tokens, so a light card can
   never inherit white text from a dark section. (That bug shipped once.)
   ========================================================================== */

/* --- Fonts --------------------------------------------------------------- */
@font-face { font-family: Inter; src: url("/assets/fonts/Inter-400-latin.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: Inter; src: url("/assets/fonts/Inter-600-latin.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: Inter; src: url("/assets/fonts/Inter-700-latin.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("/assets/fonts/SpaceGrotesk-600-latin.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("/assets/fonts/SpaceGrotesk-700-latin.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/assets/fonts/JetBrainsMono-500-latin.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap; }

/* --- Tokens -------------------------------------------------------------- */
:root {
  color-scheme: light;

  /* Dark stack */
  --void:     #040a13;
  --ink-950:  #06111f;
  --ink-900:  #0a1a2c;
  --ink-850:  #0e2338;
  --ink-800:  #143047;
  --ink-700:  #1d4265;

  /* Signal blue */
  --sig-400:  #7cc0ff;
  --sig-500:  #4da3ff;
  --sig-600:  #2f80ed;
  --sig-ink:  #17538f;   /* blue for TEXT on light surfaces — 6.6:1 on white */
  --sig-700:  #1a5fa8;
  --sig-050:  #e9f2fd;
  --sig-100:  #d2e4f9;

  /* Warm */
  --amber-400: #ffb761;
  --amber-500: #f0a03c;   /* CTA fill — paired with dark ink, 7.7:1 */
  --amber-600: #e08f28;   /* CTA hover */
  --amber-ink: #8c4d0b;   /* amber for TEXT on light surfaces — 6.3:1 on white */
  --amber-050: #fdf1e2;
  --clay-700:  #96501f;
  --on-amber:  #14212f;   /* ink used on top of amber fills */

  /* Paper */
  --paper:    #f8f5f0;
  --paper-2:  #f1ebe1;
  --paper-3:  #e6dccd;
  --white:    #fff;

  /* Foreground tokens — surfaces set these, components consume them.
     This is what makes "white heading on a white card" structurally
     impossible rather than a thing you have to remember. */
  --fg:       #0b1725;   /* headings   */
  --fg-body:  #3d4d61;   /* body       */
  --fg-mute:  #4f5f76;   /* meta — 6.6:1 on white, 4.8:1 on the darkest sand */
  --fg-line:  rgba(11, 23, 37, .12);   /* decorative hairlines only */
  --fg-line-2:rgba(11, 23, 37, .07);
  --fg-edge:  rgba(11, 23, 37, .62);   /* INTERACTIVE borders — 3.7:1 even on tinted surfaces */
  --surface:  var(--white);

  --shadow-1: 0 1px 2px rgba(6, 17, 31, .05), 0 2px 8px rgba(6, 17, 31, .05);
  --shadow-2: 0 6px 14px rgba(6, 17, 31, .07), 0 18px 44px rgba(6, 17, 31, .10);
  --shadow-3: 0 12px 28px rgba(6, 17, 31, .12), 0 40px 90px rgba(6, 17, 31, .18);
  --glow:     0 0 0 1px rgba(124, 192, 255, .18), 0 12px 40px rgba(47, 128, 237, .22);

  --r-xs: 6px; --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-xl: 34px;

  --display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --sans:    Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --t-hero: clamp(2.6rem, 1.2rem + 5.4vw, 5.4rem);
  --t-h1:   clamp(2.1rem, 1.4rem + 3vw, 3.7rem);
  --t-h2:   clamp(1.7rem, 1.25rem + 2vw, 2.85rem);
  --t-h3:   clamp(1.12rem, 1.02rem + .5vw, 1.38rem);
  --t-lead: clamp(1.06rem, .99rem + .45vw, 1.28rem);
  --t-body: 1.02rem;
  --t-sm:   .915rem;
  --t-xs:   .8rem;
  --t-mono: .735rem;

  --wrap: 1200px;
  --gap: clamp(1rem, .55rem + 1.7vw, 1.9rem);
  --sec: clamp(4rem, 2rem + 6.5vw, 8rem);
}

/* Dark surfaces flip the foreground tokens. Every component reads --fg. */
.on-dark {
  --fg:       #f2f7fd;
  --fg-body:  #b4c8dd;
  --fg-mute:  #9db3ca;
  --fg-line:  rgba(160, 200, 240, .16);
  --fg-line-2:rgba(160, 200, 240, .09);
  --fg-edge:  rgba(190, 220, 250, .62);
  --surface:  var(--ink-850);
  color: var(--fg-body);
}

/* --- Reset --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.66;
  color: var(--fg-body);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  font-feature-settings: "cv02","cv03","cv04","cv11";
}

img, svg, canvas, video, iframe { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4 {
  font-family: var(--display); font-weight: 700; color: var(--fg);
  line-height: 1.08; letter-spacing: -.022em; margin: 0 0 .5em; text-wrap: balance;
}
p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }
a { color: var(--sig-700); text-underline-offset: 3px; }
.on-dark a:not(.btn):not(.copy-btn) { color: var(--sig-400); }
ul, ol { margin: 0 0 1.05em; padding-left: 1.2em; }
li { margin-bottom: .38em; }
address { font-style: normal; }
strong, b { color: var(--fg); font-weight: 600; }
::selection { background: var(--sig-600); color: #fff; }

:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--sig-500); outline-offset: 3px; border-radius: 5px;
}

.skip {
  position: fixed; left: 10px; top: -70px; z-index: 300;
  background: var(--ink-900); color: #fff; padding: .8rem 1.2rem; font-weight: 600;
  border-radius: 0 0 var(--r-sm) var(--r-sm); text-decoration: none; transition: top .16s ease;
}
.skip:focus { top: 0; color: #fff; }

.wrap { width: min(100% - 2.2rem, var(--wrap)); margin-inline: auto; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- Mono data type ------------------------------------------------------ */
.mono {
  font-family: var(--mono); font-size: var(--t-mono); font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase; color: var(--fg-mute);
}

/* Numbered section tag: 01 / SUPPLY LINE */
.tag {
  display: inline-flex; align-items: center; gap: .7rem; margin: 0 0 1.15rem;
  font-family: var(--mono); font-size: var(--t-mono); font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--sig-ink);
}
.on-dark .tag { color: var(--sig-400); }
.tag::before {
  content: ""; width: 26px; height: 1px; background: currentColor; opacity: .5;
}
.tag__n { opacity: .55; }

/* Status chip with a live pulse */
.chip {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--mono); font-size: var(--t-mono); font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  padding: .5rem .9rem .5rem .8rem; border-radius: 999px;
  border: 1px solid var(--fg-line); color: var(--fg-body); background: var(--fg-line-2);
}
.chip__dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--amber-400);
  box-shadow: 0 0 0 0 rgba(255, 183, 97, .7); animation: ping 2.4s ease-out infinite;
}
@keyframes ping {
  0%   { box-shadow: 0 0 0 0 rgba(255, 183, 97, .65); }
  70%  { box-shadow: 0 0 0 9px rgba(255, 183, 97, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 183, 97, 0); }
}
@media (prefers-reduced-motion: reduce) { .chip__dot { animation: none; } }

/* --- Buttons ------------------------------------------------------------- */
.btn {
  --bg: var(--sig-700); --fgc: #fff; --bd: transparent;
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  gap: .55rem; min-height: 54px; padding: .9rem 1.7rem;
  font-family: var(--sans); font-size: 1rem; font-weight: 600; line-height: 1.15;
  color: var(--fgc); background: var(--bg); border: 1px solid var(--bd);
  border-radius: 999px; text-decoration: none; cursor: pointer; text-align: center;
  box-shadow: var(--shadow-1); overflow: hidden; isolation: isolate;
  transition: transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .22s ease, background-color .2s ease;
}
.btn::after {                       /* sheen sweep on hover */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.22) 50%, transparent 80%);
  transform: translateX(-120%); transition: transform .55s cubic-bezier(.2,.7,.3,1);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); color: var(--fgc); }
.btn:hover::after { transform: translateX(120%); }
.btn:active { transform: translateY(0); }

.btn--primary { --bg: var(--amber-500); --fgc: var(--on-amber); }
.btn--primary:hover { --bg: var(--amber-600); }
.btn--deep    { --bg: var(--ink-900); }
.btn--deep:hover { --bg: var(--ink-800); }
.btn--outline {
  --bg: var(--sig-050); --fgc: var(--sig-ink); --bd: color-mix(in srgb, var(--sig-ink) 62%, transparent);
  box-shadow: none;
}
.btn--outline:hover { --bg: #d7e6f8; --bd: var(--sig-ink); }
.on-dark .btn--outline {
  --bg: rgba(124,192,255,.14); --fgc: #d9eafd; --bd: rgba(190,220,250,.62);
}
.on-dark .btn--outline:hover { --bg: rgba(124,192,255,.22); }
.btn--glass   {
  --bg: rgba(255,255,255,.08); --fgc: #fff; --bd: rgba(255,255,255,.34);
  backdrop-filter: blur(8px);
}
.btn--glass:hover { --bg: rgba(255,255,255,.17); }
.btn--sm { min-height: 44px; padding: .55rem 1.15rem; font-size: .92rem; }
.btn--block { width: 100%; }
.btn svg { flex: none; }

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

/* --- Scroll progress ----------------------------------------------------- */
.progress {
  position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 120;
  background: linear-gradient(90deg, var(--sig-500), var(--amber-500));
  transform: scaleX(0); transform-origin: left; will-change: transform;
}

/* --- Header -------------------------------------------------------------- */
.topbar {
  background: var(--void); color: #9fb6ce; text-align: center;
  font-family: var(--mono); font-size: var(--t-mono); font-weight: 500; letter-spacing: .1em;
}
.topbar p { margin: 0; padding: .6rem 1.1rem; }

.site-header {
  position: sticky; top: 0; z-index: 100;
  /* 82% let the dark hero bleed through, dropping the subtitle to 4.0:1 and
     making the bar visibly change tone mid-scroll. 92% is stable everywhere. */
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent; transition: border-color .25s ease, box-shadow .25s ease;
}
.site-header.is-stuck { border-bottom-color: var(--fg-line); box-shadow: 0 6px 24px rgba(6,17,31,.06); }
.site-header__inner { display: flex; align-items: center; gap: 1rem; min-height: 70px; }

.brand { display: flex; align-items: center; gap: .65rem; text-decoration: none; margin-right: auto; }
.brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.brand__text b {
  font-family: var(--display); font-size: 1.2rem; font-weight: 700;
  color: var(--fg); letter-spacing: -.02em;
}
.brand__text small {
  font-family: var(--mono); font-size: .68rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--fg-mute);
}

.nav { display: flex; align-items: center; gap: 1.5rem; }
.nav__links { display: flex; align-items: center; gap: 1.4rem; }
.nav__link {
  position: relative; padding: .4rem 0; white-space: nowrap; text-decoration: none;
  font-size: .93rem; font-weight: 500; color: var(--fg-body);
}
.nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--amber-500); border-radius: 2px;
  transform: scaleX(0); transform-origin: left; transition: transform .22s cubic-bezier(.2,.7,.3,1);
}
.nav__link:hover, .nav__link[aria-current="page"] { color: var(--fg); }
.nav__link:hover::after, .nav__link[aria-current="page"]::after { transform: scaleX(1); }

.nav-toggle {
  display: none; width: 46px; height: 46px; padding: 12px;
  background: transparent; border: 1px solid var(--fg-line); border-radius: var(--r-sm); cursor: pointer;
}
.nav-toggle span { display: block; height: 2px; border-radius: 2px; background: var(--fg); transition: transform .22s ease, opacity .16s ease; }
.nav-toggle span + span { margin-top: 5px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 940px) {
  .nav-toggle { display: block; }
  .nav {
    position: absolute; inset: 100% 0 auto 0; display: none;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: .4rem 1.1rem 1.3rem; background: var(--paper);
    border-bottom: 1px solid var(--fg-line); box-shadow: var(--shadow-2);
  }
  .nav.is-open { display: flex; }
  .nav__links { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__link { padding: 1rem .15rem; border-bottom: 1px solid var(--fg-line-2); font-size: 1.04rem; }
  .nav__link::after { display: none; }
  .nav__cta { margin-top: 1rem; }
}

/* --- Hero ---------------------------------------------------------------- */
.hero {
  position: relative; isolation: isolate; overflow: clip;
  background: radial-gradient(120% 90% at 78% 18%, #10314f 0%, var(--ink-950) 46%, var(--void) 100%);
}
.hero__photo { position: absolute; inset: 0; z-index: -3; opacity: .3; }
.hero__photo img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.65); }
.hero::before {                                   /* scrim + technical grid */
  content: ""; position: absolute; inset: 0; z-index: -2;
  background:
    linear-gradient(92deg, var(--void) 8%, rgba(4,10,19,.92) 42%, rgba(4,10,19,.55) 78%),
    linear-gradient(0deg, var(--void) 2%, transparent 34%);
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(rgba(124,192,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124,192,255,.055) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(90% 70% at 50% 40%, #000 30%, transparent 78%);
}

.hero__grid {
  display: grid; gap: clamp(2rem, 1rem + 3vw, 3rem);
  padding-block: clamp(3rem, 1.5rem + 6vw, 6.5rem) clamp(2rem, 1rem + 3vw, 3.5rem);
  align-items: center;
}
@media (min-width: 1000px) { .hero__grid { grid-template-columns: 1.06fr .94fr; } }

.hero h1 { font-size: var(--t-hero); margin-bottom: .35em; letter-spacing: -.032em; }
.hero h1 .hl {
  background: linear-gradient(100deg, var(--amber-400), #ffd8a0);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero__lead { font-size: var(--t-lead); max-width: 34rem; margin-bottom: 2rem; }
.hero .chip { margin-bottom: 1.6rem; }

/* Globe stage.
   Hidden below the width at which site.js will even attempt the globe, so no
   one ever sees a stage waiting for something that isn't coming. The static
   SVG underneath is a designed graphic in its own right — it is what shows if
   WebGL is unavailable or the module fails, and it must not look like an error. */
.stage { display: none; }
@media (min-width: 760px) {
  .stage { display: block; position: relative; aspect-ratio: 1/1; width: 100%; max-width: 620px; margin-inline: auto; }
}
.stage__canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; transition: opacity 1.1s ease;
}
.stage__canvas.is-live { opacity: 1; }
.stage__static {
  position: absolute; inset: 0; opacity: .85; transition: opacity .9s ease;
}
.stage__canvas.is-live ~ .stage__static { opacity: 0; }
.stage__static svg { width: 100%; height: 100%; }
@keyframes dash { to { stroke-dashoffset: -260; } }
.stage__static .route { stroke-dasharray: 7 9; animation: dash 9s linear infinite; }
@media (prefers-reduced-motion: reduce) { .stage__static .route { animation: none; } }

.stage__route {
  position: absolute; left: 50%; bottom: 2%; transform: translateX(-50%);
  display: flex; align-items: center; gap: .7rem; white-space: nowrap;
  font-family: var(--mono); font-size: var(--t-mono); font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: #9fb6ce;
  background: rgba(4,10,19,.7); border: 1px solid rgba(160,200,240,.16);
  padding: .5rem .95rem; border-radius: 999px; backdrop-filter: blur(6px);
}
.stage__route b { color: #f2f7fd; font-weight: 500; }
.stage__route i { font-style: normal; color: var(--amber-400); }

/* Telemetry strip */
.telemetry {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  border-top: 1px solid rgba(160,200,240,.16);
  border-bottom: 1px solid rgba(160,200,240,.16);
}
.telemetry > div { padding: 1.35rem 1.4rem 1.5rem; border-left: 1px solid rgba(160,200,240,.10); }
.telemetry > div:first-child { border-left: 0; }
.telemetry dt {
  font-family: var(--mono); font-size: var(--t-mono); font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: #7f95ad; margin-bottom: .45rem;
}
.telemetry dd {
  margin: 0; font-family: var(--display); font-weight: 700; color: #fff;
  font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.6rem); line-height: 1; letter-spacing: -.03em;
}
.telemetry small { display: block; font-size: .78rem; color: #7f95ad; margin-top: .5rem; line-height: 1.45; }

/* --- Sections ------------------------------------------------------------ */
.section { padding-block: var(--sec); position: relative; }
.section--paper { background: var(--white); }
.section--sand  { background: var(--paper-2); }
.section--dark  { background: var(--ink-950); }
.section--deep  {
  background:
    radial-gradient(90% 70% at 20% 0%, #10304d 0%, transparent 60%), var(--void);
}

.section__head { max-width: 44rem; margin-bottom: clamp(2rem, 1rem + 3vw, 3.4rem); }
.section__head--center { margin-inline: auto; text-align: center; }
.section__head--center .tag { justify-content: center; }
.section__head h2 { font-size: var(--t-h2); }
.section__head p { font-size: var(--t-lead); color: var(--fg-mute); }

.lead { font-size: var(--t-lead); color: var(--fg-mute); }

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

.split { display: grid; gap: clamp(1.8rem, 1rem + 3.2vw, 3.8rem); align-items: center; }
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--wide { grid-template-columns: 1.15fr .85fr; }
  .split--flip > :first-child { order: 2; }
}

/* --- Cards --------------------------------------------------------------- */
.card {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--fg-line);
  border-radius: var(--r-lg); padding: clamp(1.4rem, 1rem + 1.1vw, 2rem);
  box-shadow: var(--shadow-1); position: relative; overflow: hidden;
  transition: transform .24s cubic-bezier(.2,.7,.3,1), box-shadow .28s ease, border-color .28s ease;
}
.card--hover:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); border-color: var(--sig-100); }
.on-dark .card--hover:hover { border-color: rgba(124,192,255,.34); }
.card h3 { font-size: var(--t-h3); margin-bottom: .45rem; }
.card p { color: var(--fg-mute); font-size: var(--t-sm); }
.card__foot { margin-top: auto; padding-top: 1.25rem; }
.card--lead { border-color: color-mix(in srgb, var(--amber-500) 45%, transparent); box-shadow: var(--shadow-2); }
.card--lead::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--amber-500), var(--amber-400));
}
.card__badge {
  align-self: flex-start; margin-bottom: .9rem;
  font-family: var(--mono); font-size: var(--t-mono); font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--on-amber); background: var(--amber-500); padding: .38rem .7rem; border-radius: 999px;
}

.ico {
  flex: none; width: 44px; height: 44px; border-radius: 12px;
  display: grid; place-items: center; margin-bottom: 1rem;
  background: var(--sig-050); color: var(--sig-700);
}
.on-dark .ico { background: rgba(124,192,255,.12); color: var(--sig-400); }
.ico svg { width: 22px; height: 22px; }
.ico--amber { background: var(--amber-050); color: var(--clay-700); }
.on-dark .ico--amber { background: rgba(255,183,97,.14); color: var(--amber-400); }

/* --- Steps (supply line) -------------------------------------------------- */
.steps { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); counter-reset: s; }
.step { position: relative; }
.step__media {
  position: relative; border-radius: var(--r-md); overflow: hidden;
  border: 1px solid var(--fg-line); margin-bottom: 1.1rem; background: var(--paper-3);
}
.step__media img {
  width: 100%; aspect-ratio: 1/1; object-fit: cover;
  transition: transform .6s cubic-bezier(.2,.7,.3,1);
}
.step:hover .step__media img { transform: scale(1.045); }
.step__no {
  counter-increment: s; position: absolute; left: .7rem; top: .7rem;
  width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  font-family: var(--mono); font-size: .78rem; font-weight: 500;
  color: #fff; background: rgba(6,17,31,.82); backdrop-filter: blur(4px);
  border: 1px solid rgba(160,200,240,.22);
}
.step__no::before { content: "0" counter(s); }
.step h3 { font-size: 1.14rem; margin-bottom: .4rem; }
.step p { font-size: var(--t-sm); color: var(--fg-mute); }

/* --- Framed photo (dossier corner ticks) ---------------------------------- */
.frame { position: relative; border-radius: var(--r-lg); overflow: hidden; background: var(--paper-3); box-shadow: var(--shadow-2); }
.frame img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.frame--tall img { aspect-ratio: 3/4; }
.frame--square img { aspect-ratio: 1/1; }
.frame--wide img { aspect-ratio: 16/9; }
.frame figcaption {
  font-family: var(--mono); font-size: var(--t-mono); font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--fg-mute);
  padding: .8rem 1rem; background: var(--surface); border-top: 1px solid var(--fg-line-2);
}
.frame--tick::before, .frame--tick::after {
  content: ""; position: absolute; width: 22px; height: 22px; z-index: 2; pointer-events: none;
  border: 2px solid rgba(255,255,255,.55);
}
.frame--tick::before { top: 12px; left: 12px; border-right: 0; border-bottom: 0; border-radius: 4px 0 0 0; }
.frame--tick::after  { top: 12px; right: 12px; border-left: 0; border-bottom: 0; border-radius: 0 4px 0 0; }

/* --- Address / copy ------------------------------------------------------- */
.addr {
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between;
  padding: 1.2rem 1.35rem; border-radius: var(--r-md);
  background: var(--fg-line-2); border: 1px dashed var(--fg-line);
}
.addr__label {
  font-family: var(--mono); font-size: var(--t-mono); font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--fg-mute); margin-bottom: .5rem;
}
.addr address { font-family: var(--display); font-weight: 600; font-size: 1.1rem; color: var(--fg); line-height: 1.5; }

.copy-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  min-height: 44px; padding: .5rem 1.05rem; cursor: pointer;
  font-family: var(--sans); font-size: .89rem; font-weight: 600;
  color: var(--fg); background: var(--surface);
  border: 1px solid var(--fg-edge); border-radius: 999px;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.copy-btn:hover { border-color: var(--sig-600); color: var(--sig-700); }
.on-dark .copy-btn:hover { color: var(--sig-400); }
.copy-btn.is-done { background: var(--sig-700); color: #fff; border-color: transparent; }

.pay { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; margin-top: .35rem; }
.pay__id { font-family: var(--mono); font-size: 1.02rem; font-weight: 500; color: var(--fg); letter-spacing: .01em; }

/* --- Trust strip ---------------------------------------------------------- */
.trust {
  display: grid; gap: .9rem 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
  padding: 1.3rem 1.5rem; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--fg-line); box-shadow: var(--shadow-1);
}
.trust__item { display: flex; align-items: flex-start; gap: .7rem; font-size: var(--t-sm); color: var(--fg-mute); }
.trust__item svg { width: 19px; height: 19px; flex: none; margin-top: .18em; color: var(--sig-600); }
.trust__item b { color: var(--fg); }

/* --- Tiers ---------------------------------------------------------------- */
.tiers { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); align-items: stretch; }
.tier {
  display: flex; flex-direction: column; gap: .4rem; text-align: center;
  padding: 1.35rem 1.05rem; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--fg-line);
}
.tier__amt { font-family: var(--display); font-weight: 700; font-size: 1.8rem; line-height: 1; color: var(--fg); letter-spacing: -.03em; }
.tier p { margin: 0; font-size: .87rem; color: var(--fg-mute); }
.tier--lead { background: var(--sig-700); border-color: transparent; box-shadow: var(--glow); }
.tier--lead .tier__amt { color: #fff; }
.tier--lead p { color: #cfe3fa; }

/* --- Phase cards ----------------------------------------------------------
   The site's whole argument in one component: phase one closed and honoured,
   phase two live and unfinished. Phase one is deliberately desaturated and
   phase two deliberately isn't — the eye should land on the open one first,
   without either reading as less important than it was. */
.phases { display: grid; gap: var(--gap); align-items: stretch; }
@media (min-width: 900px) { .phases { grid-template-columns: 1fr 1fr; } }

.phase {
  display: flex; flex-direction: column; position: relative; overflow: hidden;
  border-radius: var(--r-lg); border: 1px solid var(--fg-line);
  background: var(--surface); box-shadow: var(--shadow-1);
}
.phase__media { position: relative; overflow: hidden; }
.phase__media img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.phase__body { display: flex; flex-direction: column; flex: 1; padding: clamp(1.4rem,1rem + 1.1vw,2rem); }
.phase__body h3 { font-size: var(--t-h3); margin-bottom: .5rem; }
.phase__body p { color: var(--fg-mute); font-size: var(--t-sm); }
.phase__foot { margin-top: auto; padding-top: 1.4rem; }
.phase__body > p:last-of-type { margin-bottom: .4rem; }

.phase__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .55rem;
  font-family: var(--mono); font-size: var(--t-mono); font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; margin-bottom: .85rem;
}
.phase__no { color: var(--fg-mute); }
.phase__dates { color: var(--fg-mute); opacity: .75; }
.phase__status {
  display: inline-flex; align-items: center; gap: .42rem;
  padding: .32rem .68rem; border-radius: 999px; border: 1px solid currentColor;
}

/* Phase one — closed. Muted, but never sad: this is a record of a win. */
.phase--done .phase__media img { filter: saturate(.28) contrast(1.02) brightness(.96); }
.phase--done .phase__status { color: var(--fg-mute); }
.phase--done .phase__status::before {
  content: ""; width: 11px; height: 11px; flex: none;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Phase two — open. Full colour, amber edge, live pulse. */
.phase--live { border-color: color-mix(in srgb, var(--amber-500) 52%, transparent); box-shadow: var(--shadow-2); }
.phase--live::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; z-index: 2;
  background: linear-gradient(90deg, var(--amber-500), var(--amber-400));
}
.phase--live .phase__status { color: var(--amber-ink); }
.on-dark .phase--live .phase__status { color: var(--amber-400); }
.phase--live .phase__status::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: currentColor; animation: ping 2.4s ease-out infinite;
}
@media (prefers-reduced-motion: reduce) { .phase--live .phase__status::before { animation: none; } }

/* The arrow between the two phases */
.phase-turn {
  display: grid; place-items: center; padding: .4rem 0;
  font-family: var(--mono); font-size: var(--t-mono); letter-spacing: .18em;
  text-transform: uppercase; color: var(--fg-mute);
}
@media (min-width: 900px) { .phase-turn { display: none; } }

/* --- Sourced statistic block ----------------------------------------------
   Third-party numbers. The source line is part of the component, not an
   optional extra, so a stat can't be shipped without its attribution. */
.figures { display: grid; gap: 1px; background: var(--fg-line); border: 1px solid var(--fg-line); border-radius: var(--r-md); overflow: hidden; }
@media (min-width: 700px) { .figures { grid-template-columns: repeat(3, 1fr); } }
.figure-cell { background: var(--surface); padding: clamp(1.3rem,1rem + 1vw,1.9rem); }
.figure-cell dt {
  font-family: var(--mono); font-size: var(--t-mono); font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase; color: var(--fg-mute); margin-bottom: .55rem;
}
.figure-cell dd {
  margin: 0; font-family: var(--display); font-weight: 700; letter-spacing: -.03em;
  font-size: clamp(2rem,1.5rem + 1.8vw,2.9rem); line-height: 1; color: var(--fg);
}
.figure-cell dd .unit { font-size: .48em; letter-spacing: 0; color: var(--fg-mute); margin-left: .3em; }
.figure-cell p { margin: .7rem 0 0; font-size: var(--t-sm); color: var(--fg-mute); }
.figure-cell--alert dd { color: var(--amber-ink); }
.on-dark .figure-cell--alert dd { color: var(--amber-400); }
.source-note {
  margin-top: .9rem; font-family: var(--mono); font-size: var(--t-mono);
  letter-spacing: .06em; color: var(--fg-mute); line-height: 1.75;
}

/* --- Quote ---------------------------------------------------------------- */
.quote { position: relative; padding-left: clamp(1.1rem, .5rem + 1.6vw, 2rem); border-left: 3px solid var(--amber-500); }
.quote p {
  font-family: var(--display); font-weight: 600; letter-spacing: -.02em;
  font-size: clamp(1.2rem, 1rem + 1.1vw, 1.85rem); line-height: 1.36; color: var(--fg); text-wrap: pretty;
}
.quote cite { display: block; margin-top: .95rem; font-style: normal; font-family: var(--mono); font-size: var(--t-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-mute); }

/* --- Checklist ------------------------------------------------------------ */
.check { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; }
.check li { display: flex; gap: .75rem; align-items: flex-start; margin: 0; }
.check li::before {
  content: ""; flex: none; width: 21px; height: 21px; margin-top: .2em; border-radius: 6px;
  background: var(--sig-050) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a5fa8' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat;
}
.on-dark .check li::before { background-color: rgba(124,192,255,.14); }

/* Ordered checklist keeps its numbers */
.steps-list { list-style: none; counter-reset: n; padding: 0; margin: 0; display: grid; gap: .8rem; }
.steps-list li { counter-increment: n; display: flex; gap: .8rem; align-items: flex-start; margin: 0; }
.steps-list li::before {
  content: counter(n); flex: none; width: 26px; height: 26px; border-radius: 8px;
  display: grid; place-items: center; margin-top: .06em;
  font-family: var(--mono); font-size: .74rem; font-weight: 500;
  color: var(--sig-700); background: var(--sig-050);
}
.on-dark .steps-list li::before { color: var(--sig-400); background: rgba(124,192,255,.14); }

/* --- Pledge --------------------------------------------------------------- */
.pledge {
  padding: clamp(1.5rem, 1rem + 1.5vw, 2.3rem); border-radius: var(--r-lg);
  background: linear-gradient(155deg, var(--amber-050), var(--paper-2));
  border: 1px solid color-mix(in srgb, var(--amber-500) 30%, transparent);
}
.pledge h3 {
  font-family: var(--mono); font-size: var(--t-mono); font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--amber-ink); margin-bottom: .9rem;
}
.pledge__line { font-family: var(--display); font-weight: 600; font-size: clamp(1.15rem, .95rem + .9vw, 1.55rem); line-height: 1.38; color: var(--fg); }

/* --- Gallery (masonry) ----------------------------------------------------- */
.gallery { columns: 3 250px; column-gap: 1rem; }
.shot {
  margin: 0 0 1rem; break-inside: avoid; border-radius: var(--r-md); overflow: hidden;
  background: var(--surface); border: 1px solid var(--fg-line); box-shadow: var(--shadow-1);
  transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease;
}
.shot:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.shot img { width: 100%; }
.shot figcaption { padding: .7rem .85rem; font-size: var(--t-xs); color: var(--fg-mute); line-height: 1.45; }

/* Horizontal impact rail.
   Fixed HEIGHT, auto width — a forced 3/4 box was cropping up to 41% off
   photos that are square or landscape. A filmstrip of mixed widths shows each
   picture whole and reads as a contact sheet rather than a broken grid. */
.rail {
  display: flex; gap: .9rem; overflow-x: auto; padding-bottom: 1rem;
  scroll-snap-type: x proximity; scrollbar-width: thin;
}
.rail img {
  height: clamp(210px, 26vw, 320px); width: auto; flex: 0 0 auto;
  object-fit: contain; scroll-snap-align: start;
  border-radius: var(--r-md); border: 1px solid var(--fg-line); background: var(--paper-3);
}

/* --- Video facade ---------------------------------------------------------- */
.video { border-radius: var(--r-md); overflow: hidden; background: var(--surface); border: 1px solid var(--fg-line); }
.video__btn { display: block; position: relative; width: 100%; padding: 0; border: 0; cursor: pointer; background: #071120; line-height: 0; }
.video__btn img { width: 100%; aspect-ratio: 16/9; object-fit: cover; opacity: .82; transition: opacity .25s ease, transform .5s cubic-bezier(.2,.7,.3,1); }
.video__btn:hover img { opacity: 1; transform: scale(1.035); }
.video__play {
  position: absolute; inset: 0; margin: auto; width: 66px; height: 66px; border-radius: 50%;
  background: rgba(255,255,255,.94); box-shadow: var(--shadow-2);
}
.video__play::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 0; height: 0;
  border-style: solid; border-width: 12px 0 12px 20px;
  border-color: transparent transparent transparent var(--ink-900); transform: translateX(3px);
}
.video iframe { width: 100%; aspect-ratio: 16/9; border: 0; }
.video__cap { margin: 0; padding: .8rem .95rem; font-size: var(--t-sm); color: var(--fg-mute); }

/* --- CTA band -------------------------------------------------------------- */
.band {
  position: relative; overflow: hidden; text-align: center; border-radius: var(--r-xl);
  padding: clamp(2.2rem, 1.4rem + 3.4vw, 4rem);
  background: radial-gradient(110% 130% at 12% 0%, #164a76 0%, var(--ink-900) 55%, var(--void) 100%);
}
.band::after {
  content: ""; position: absolute; inset: 0; opacity: .5; pointer-events: none;
  background-image:
    linear-gradient(rgba(124,192,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124,192,255,.06) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: radial-gradient(80% 80% at 50% 40%, #000, transparent 75%);
}
.band > * { position: relative; z-index: 1; }
.band h2 { font-size: var(--t-h2); margin-bottom: .55rem; }
.band p { max-width: 42rem; margin-inline: auto; }
.band .btn-row { justify-content: center; margin-top: 1.9rem; }

/* --- Footer ---------------------------------------------------------------- */
.site-footer { background: var(--void); padding: clamp(3.2rem, 2rem + 3vw, 5rem) 0 7.5rem; font-size: var(--t-sm); }
.footer__grid { display: grid; gap: 2.2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 195px), 1fr)); }
.footer__brand { font-family: var(--display); font-weight: 700; font-size: 1.4rem; color: #fff; margin-bottom: .6rem; letter-spacing: -.02em; }
.footer__h { font-family: var(--mono); font-size: var(--t-mono); font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: #7f95ad; margin-bottom: .95rem; }
.footer__list { list-style: none; padding: 0; margin: 0; }
.footer__list li { margin-bottom: .55rem; }
.footer__list a { color: #b4c8dd; text-decoration: none; }
.footer__list a:hover { color: #fff; text-decoration: underline; }
.footer__addr { font-family: var(--display); font-weight: 600; font-size: 1rem; color: #b4c8dd; line-height: 1.6; }
.footer__legal { margin-top: 2.6rem; padding-top: 1.6rem; border-top: 1px solid rgba(160,200,240,.13); font-size: var(--t-xs); color: #7f95ad; }
.footer__legal a { color: #b4c8dd; }
.footer__fine { margin-top: .55rem; }

/* --- Sticky mobile action bar ---------------------------------------------- */
.actionbar {
  position: fixed; inset: auto 0 0 0; z-index: 95; display: none; gap: .6rem;
  padding: .7rem .9rem calc(.7rem + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--paper) 93%, transparent);
  backdrop-filter: blur(14px); border-top: 1px solid var(--fg-line);
}
.actionbar .btn { flex: 1; min-height: 50px; font-size: .95rem; padding-inline: .7rem; }
@media (max-width: 780px) { .actionbar { display: flex; } }
@media (min-width: 781px) { .site-footer { padding-bottom: clamp(2.5rem, 2rem + 2vw, 3.5rem); } }

/* --- Motion ----------------------------------------------------------------- */
/* Reveal-on-scroll, done entirely in CSS.

   No JavaScript, no IntersectionObserver, no class toggling. `.reveal` has NO
   hidden state of its own — the opacity:0 exists only inside a keyframe that
   is driven by a scroll timeline. Where animation-timeline isn't supported
   (Firefox today), the @supports block never applies and every element is
   simply visible, permanently. There is no code path that can leave content
   stuck at opacity 0, which is the only property that actually matters on a
   page whose job is to be read. */
@keyframes rise {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .reveal {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 22%;
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .card, .shot, .step__media img, .video__btn img { transition: none !important; }
  .btn::after { display: none; }
}

/* --- Print ------------------------------------------------------------------ */
@media print {
  .topbar, .site-header, .actionbar, .site-footer, .band, .btn, .progress, .stage { display: none !important; }
  body { background: #fff; color: #000; font-size: 12pt; }
  .section { padding-block: 1rem; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #444; }
}