/* ══════════════════════════════════════════════════════════════════════════
   Qull — 2026c
   Very dark emerald · light cream · Inter throughout.
   ══════════════════════════════════════════════════════════════════════════ */

/* ─── Inter (self-hosted, variable: opsz 14–32, wght 100–900) ─────────────── */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/Inter-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/Inter-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
                 U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/Inter-var-latin-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ─── Tokens ──────────────────────────────────────────────────────────────── */
:root {
  /* emerald, darkest → lifted */
  --ink:        #04160E;
  --emerald-900:#051A12;
  --emerald-800:#072318;
  --emerald-700:#0A2F21;
  --emerald-600:#0E3E2B;
  --emerald-500:#12523A;

  /* cream */
  --cream:      #F4EEE0;
  --cream-2:    #E4DBC7;
  --cream-70:   rgba(244,238,224,.70);
  --cream-52:   rgba(244,238,224,.52);
  --cream-34:   rgba(244,238,224,.34);
  --cream-16:   rgba(244,238,224,.16);
  --line:       rgba(244,238,224,.13);
  --line-soft:  rgba(244,238,224,.07);

  /* accent */
  --jade:       #7BE3B2;
  --jade-2:     #A9F0CE;
  --jade-deep:  #2E9A6D;

  /* the wordmark's own ink, for any light-ground use of the logo */
  --logo-ink:   #1B2A26;

  --font: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto,
          'Helvetica Neue', Arial, sans-serif;

  --pad: clamp(1.25rem, 5vw, 3.5rem);
  --wrap: 1240px;
  --measure: 34rem;

  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-soft: cubic-bezier(.4, 0, .2, 1);

  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='.4'/></svg>");
}

/* ─── Reset ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

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

body {
  font-family: var(--font);
  font-optical-sizing: auto;
  font-synthesis-weight: none;
  font-weight: 390;
  color: var(--cream);
  background: var(--ink);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; text-decoration: none; }
li { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

::selection { background: var(--jade); color: var(--ink); }

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

.skip {
  position: fixed; top: 0; left: 50%; transform: translate(-50%, -140%);
  z-index: 200; padding: .75rem 1.25rem; border-radius: 0 0 12px 12px;
  background: var(--cream); color: var(--ink); font-size: .8rem; font-weight: 600;
  transition: transform .25s var(--ease);
}
.skip:focus { transform: translate(-50%, 0); }

/* ─── Arrival ─────────────────────────────────────────────────────────────
   The wordmark greets the visitor alone in the dark, lights up, then glides
   to its place in the nav, and the page follows it in. Pure choreography on
   top of a page that is complete without it: no JS shows nothing, reduced
   motion shows nothing, a repeat visit in the same session shows nothing.
   ────────────────────────────────────────────────────────────────────────── */
.arrival {
  position: fixed; inset: 0; z-index: 150;
  display: none;
  place-items: center;
  background: var(--ink);
  pointer-events: none;
}
/* only a page that is actually running the choreography shows the veil */
html.js:not(.arrived) .arrival { display: grid; }
.arrival img {
  width: min(38vw, 210px); height: auto;
  opacity: 0;
  transform: scale(.92);
  filter: blur(10px) drop-shadow(0 0 0 rgba(123,227,178,0));
  transition: opacity .8s var(--ease), transform .9s var(--ease), filter .8s var(--ease);
}
.arrival img.lit {
  opacity: 1; transform: none;
  filter: blur(0) drop-shadow(0 0 34px rgba(123,227,178,.28));
}
.arrival img.fly {
  transform: translate(var(--ax, 0), var(--ay, 0)) scale(var(--as, .2));
  filter: blur(0) drop-shadow(0 0 0 rgba(123,227,178,0));
  transition: transform .68s var(--ease), filter .5s var(--ease-soft);
}
html.flying .arrival { background: transparent; transition: background .55s var(--ease-soft); }
html.arriving .nav .brand img { opacity: 0; }
html.arrived .nav .brand img { opacity: 1; }
html.arriving .nav-cta { opacity: 0; transform: translateY(-8px); }
html.arrived .nav-cta {
  opacity: 1; transform: none;
  transition: opacity .7s var(--ease) .15s, transform .7s var(--ease) .15s,
              translate .7s var(--ease),
              background .4s var(--ease-soft), color .4s var(--ease-soft), border-color .4s var(--ease-soft);
}

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

/* ─── Ambient field ───────────────────────────────────────────────────────
   One light source above the fold, a soft bounce off the floor so the page
   never bottoms out flat, a vignette to hold the eye in the middle, and fine
   grain over the whole thing. Fixed, so content travels through a constant
   light instead of past a set of drifting patches.
   ────────────────────────────────────────────────────────────────────────── */
.field {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  background:
    radial-gradient(92% 64% at 50% -10%, rgba(29,122,85,.34), rgba(4,22,14,0) 68%),
    radial-gradient(124% 58% at 50% 110%, rgba(15,74,52,.24), rgba(4,22,14,0) 64%),
    var(--ink);
}
.field::before {
  content: ''; position: absolute; inset: -2%;
  background: radial-gradient(114% 90% at 50% 46%, rgba(1,9,6,0) 40%, rgba(1,9,6,.6) 100%);
}
.field::after {
  content: ''; position: absolute; inset: -50%;
  background-image: var(--grain);
  opacity: .085; mix-blend-mode: overlay;
  animation: grain 7s steps(7) infinite;
}
@keyframes grain {
  0%,100% { transform: translate(0,0); }
  20%     { transform: translate(-3%, 2%); }
  40%     { transform: translate(2%, -3%); }
  60%     { transform: translate(-2%, -2%); }
  80%     { transform: translate(3%, 1%); }
}

main, header, footer { position: relative; z-index: 1; }

/* ─── Shared layout ───────────────────────────────────────────────────────── */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); }
.wrap-tight { max-width: 900px; }

section { position: relative; }

/* ─── Type ────────────────────────────────────────────────────────────────── */
.eyebrow {
  font-size: .68rem; font-weight: 500; letter-spacing: .26em; text-transform: uppercase;
  color: var(--cream-34);
}

.d-1 {
  font-size: clamp(2.6rem, 6.2vw, 5.4rem);
  font-weight: 400; letter-spacing: -.032em; line-height: 1.03;
  text-wrap: balance;
}
.d-2 {
  font-size: clamp(1.95rem, 4.3vw, 3.5rem);
  font-weight: 390; letter-spacing: -.028em; line-height: 1.12;
  text-wrap: balance;
}
.d-3 {
  font-size: clamp(1.35rem, 2.5vw, 1.95rem);
  font-weight: 400; letter-spacing: -.018em; line-height: 1.3;
  text-wrap: balance;
}

.body {
  font-size: clamp(1rem, 1.15vw, 1.1rem);
  font-weight: 340; line-height: 1.7; color: var(--cream-70);
  max-width: var(--measure);
}
.fine {
  font-size: .875rem; font-weight: 340; line-height: 1.6; color: var(--cream-34);
  letter-spacing: -.005em;
}

/* ─── Reveal ──────────────────────────────────────────────────────────────── */
html.js [data-rv] {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  filter: blur(6px);
  transition: opacity .9s var(--ease), transform 1.1s var(--ease), filter .9s var(--ease);
}
html.js [data-rv].in { opacity: 1; transform: none; filter: none; }
html.js [data-rv="1"] { transition-delay: .09s; }
html.js [data-rv="2"] { transition-delay: .18s; }
html.js [data-rv="3"] { transition-delay: .27s; }
html.js [data-rv="4"] { transition-delay: .36s; }

/* ─── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
  --btn-bg: var(--cream);
  --btn-fg: var(--ink);
  position: relative; display: inline-flex; align-items: center; gap: .6rem;
  padding: 1.05rem 1.9rem; border-radius: 999px;
  font-size: .98rem; font-weight: 440; letter-spacing: -.012em;
  background: var(--btn-bg); color: var(--btn-fg);
  overflow: hidden; isolation: isolate;
  transition: transform .5s var(--ease), translate .7s var(--ease),
              box-shadow .5s var(--ease), color .35s var(--ease-soft);
  box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 14px 40px -18px rgba(0,0,0,.9);
}
.btn::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(120deg, var(--jade-2), var(--jade));
  transform: translate3d(0, 101%, 0);
  transition: transform .6s var(--ease);
}
.btn:hover, .btn:focus-visible { transform: translateY(-2px); box-shadow: 0 22px 50px -20px rgba(0,0,0,.95); }
.btn:hover::before, .btn:focus-visible::before { transform: translate3d(0,0,0); }
.btn .arw { transition: transform .5s var(--ease); }
.btn:hover .arw { transform: translateX(4px); }

.btn-lg { padding: 1.35rem 2.6rem; font-size: 1.05rem; }

.btn-ghost {
  --btn-bg: transparent; --btn-fg: var(--cream);
  border: 1px solid var(--line); box-shadow: none;
  backdrop-filter: blur(8px);
}
.btn-ghost:hover, .btn-ghost:focus-visible { color: var(--ink); box-shadow: none; }

/* text link with rule */
.tlink {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: 1rem; font-weight: 440; letter-spacing: -.012em; color: var(--cream-70);
  padding-bottom: .4rem;
  background-image: linear-gradient(var(--jade), var(--jade));
  background-repeat: no-repeat;
  background-size: 0% 1px;
  background-position: 0 100%;
  transition: color .4s var(--ease-soft), background-size .55s var(--ease);
}
.tlink:hover, .tlink:focus-visible { color: var(--cream); background-size: 100% 1px; }
.tlink .arw { transition: transform .5s var(--ease); }
.tlink:hover .arw { transform: translateX(4px); }

/* ─── Nav ─────────────────────────────────────────────────────────────────── */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: clamp(1rem, 2.2vw, 1.6rem) var(--pad);
  transition: background .5s var(--ease-soft), backdrop-filter .5s var(--ease-soft),
              transform .55s var(--ease),
              border-color .5s var(--ease-soft), padding .5s var(--ease-soft);
  border-bottom: 1px solid transparent;
}
.nav.veiled { transform: translateY(-110%); }
.nav.veiled:focus-within { transform: none; }
.nav.stuck {
  background: rgba(3,19,13,.94);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border-bottom-color: var(--line-soft);
  padding-block: clamp(.7rem, 1.4vw, 1rem);
}
.nav.stuck .brand img { height: 26px; }

.brand { display: inline-flex; align-items: center; }
.brand img {
  height: 30px; width: auto; display: block;
  transition: opacity .4s var(--ease-soft), height .5s var(--ease-soft);
}
.brand:hover img, .brand:focus-visible img { opacity: .78; }
.foot-brand .brand img { height: 36px; }
@keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .5; transform: scale(.78); } }

.nav-cta {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .62rem 1.15rem; border-radius: 999px;
  border: 1px solid var(--line);
  font-size: .86rem; font-weight: 410; letter-spacing: -.01em; color: var(--cream);
  transition: background .4s var(--ease-soft), color .4s var(--ease-soft),
              translate .7s var(--ease), border-color .4s var(--ease-soft);
}
.nav-cta:hover, .nav-cta:focus-visible { background: var(--cream); color: var(--ink); border-color: var(--cream); }

/* ══════════════════════════════════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════════════════════════════════ */
.hero {
  min-height: 100vh; min-height: 100svh;
  display: grid; align-items: center;
  padding: clamp(7rem, 16vh, 11rem) 0 clamp(4rem, 10vh, 7rem);
  overflow: hidden;
}
.hero .wrap { width: 100%; position: relative; }

.hero-h {
  font-weight: 400;
  font-size: clamp(1.9rem, 8.5vw, 7.75rem);
  letter-spacing: -.045em;
  line-height: .92;
  color: var(--cream);
}
.hero-h .l1, .hero-h .l2 { display: block; }
.hero-h .l2 { color: var(--cream); }

/* the headline waits for the wordmark to land, then rises letter by letter */
html.js .hero-h .l1 .ch {
  display: inline-block;
  opacity: 0;
  transform: translate3d(0, .42em, 0);
  filter: blur(10px);
  transition: opacity .7s var(--ease), transform .9s var(--ease), filter .7s var(--ease);
}
html.js .hero-h .l1 .ch.sp { width: .24em; }
html.js.arrived .hero-h .l1 .ch { opacity: 1; transform: none; filter: none; }
html.js .hero-h .l1 .ch:nth-child(1)  { transition-delay: .05s; }
html.js .hero-h .l1 .ch:nth-child(2)  { transition-delay: .08s; }
html.js .hero-h .l1 .ch:nth-child(3)  { transition-delay: .11s; }
html.js .hero-h .l1 .ch:nth-child(4)  { transition-delay: .14s; }
html.js .hero-h .l1 .ch:nth-child(5)  { transition-delay: .17s; }
html.js .hero-h .l1 .ch:nth-child(6)  { transition-delay: .20s; }
html.js .hero-h .l1 .ch:nth-child(7)  { transition-delay: .23s; }
html.js .hero-h .l1 .ch:nth-child(8)  { transition-delay: .26s; }
html.js .hero-h .l1 .ch:nth-child(9)  { transition-delay: .29s; }
html.js .hero-h .l1 .ch:nth-child(10) { transition-delay: .32s; }
html.js .hero-h .l1 .ch:nth-child(11) { transition-delay: .35s; }
html.js .hero-h .l1 .ch:nth-child(12) { transition-delay: .38s; }
html.js .hero-h .l1 .ch:nth-child(13) { transition-delay: .41s; }
html.js .hero-h .l1 .ch:nth-child(14) { transition-delay: .44s; }
html.js .hero-h .l1 .ch:nth-child(15) { transition-delay: .47s; }
html.js .hero-h .l1 .ch:nth-child(n+16) { transition-delay: .50s; }

/* the second line and the rotor follow the first line in */
html.js .hero-h .l2 {
  opacity: 0; transform: translate3d(0, 18px, 0); filter: blur(8px);
  transition: opacity .9s var(--ease) .5s, transform 1s var(--ease) .5s, filter .9s var(--ease) .5s;
}
html.js.arrived .hero-h .l2 { opacity: 1; transform: none; filter: none; }

/* rotor */
.rotor {
  position: relative; display: inline-block; vertical-align: top;
  white-space: nowrap;
}
.rotor-sizer { visibility: hidden; display: block; white-space: nowrap; }
.rotor-item {
  position: absolute; left: 0; top: 0; white-space: nowrap;
  color: var(--jade);
}

/* letter-level evaporation */
.rotor-item .ch {
  display: inline-block;
  opacity: 0;
  transform: translate3d(0, .5em, 0) scale(1.18);
  filter: blur(14px) brightness(1.7);
  transition: opacity .32s var(--ease), transform .46s var(--ease), filter .32s var(--ease);
}
.rotor-item .ch.sp { width: .26em; }
.rotor-item.is-in .ch { opacity: 1; transform: none; filter: none; }
.rotor-item.is-in { text-shadow: 0 0 24px rgba(123,227,178,.42); }
.rotor-item.is-out .ch {
  opacity: 0; transform: translate3d(0, -.44em, 0) scale(.95);
  filter: blur(12px) brightness(1.45);
  transition-duration: .24s, .36s, .24s;
}
.rotor-item .ch:nth-child(1)  { transition-delay: 0ms; }
.rotor-item .ch:nth-child(2)  { transition-delay: 15ms; }
.rotor-item .ch:nth-child(3)  { transition-delay: 30ms; }
.rotor-item .ch:nth-child(4)  { transition-delay: 45ms; }
.rotor-item .ch:nth-child(5)  { transition-delay: 60ms; }
.rotor-item .ch:nth-child(6)  { transition-delay: 75ms; }
.rotor-item .ch:nth-child(7)  { transition-delay: 90ms; }
.rotor-item .ch:nth-child(8)  { transition-delay: 105ms; }
.rotor-item .ch:nth-child(9)  { transition-delay: 120ms; }
.rotor-item .ch:nth-child(10) { transition-delay: 135ms; }
.rotor-item .ch:nth-child(11) { transition-delay: 150ms; }
.rotor-item .ch:nth-child(12) { transition-delay: 165ms; }
.rotor-item .ch:nth-child(13) { transition-delay: 180ms; }
.rotor-item .ch:nth-child(14) { transition-delay: 195ms; }
.rotor-item .ch:nth-child(15) { transition-delay: 210ms; }
.rotor-item .ch:nth-child(16) { transition-delay: 225ms; }
.rotor-item .ch:nth-child(17) { transition-delay: 240ms; }
.rotor-item .ch:nth-child(18) { transition-delay: 255ms; }
.rotor-item .ch:nth-child(n+19) { transition-delay: 270ms; }

/* no-JS: show the first phrase plainly */
html:not(.js) .rotor-sizer { visibility: visible; color: var(--jade); }
html:not(.js) .rotor-item { display: none; }

/* halo behind the rotating phrase */
.hero-halo {
  position: absolute; z-index: -1; left: -8%; top: 44%;
  width: min(70vw, 780px); aspect-ratio: 1;
  transform: translateY(-50%);
  background: radial-gradient(circle, rgba(123,227,178,.16), rgba(123,227,178,0) 62%);
  filter: blur(30px);
  animation: halo 9s var(--ease-soft) infinite alternate;
  pointer-events: none;
}
@keyframes halo { from { opacity: .55; transform: translateY(-50%) scale(.94); } to { opacity: 1; transform: translateY(-50%) scale(1.08); } }

/* a light that follows the pointer — the page reacts before it is touched */
.hero-spot {
  position: absolute; z-index: -1; left: 0; top: 0;
  width: 560px; aspect-ratio: 1; margin: -280px 0 0 -280px;
  border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(circle, rgba(169,240,206,.13), rgba(169,240,206,0) 64%);
  filter: blur(26px);
  translate: var(--sx, 34vw) var(--sy, 42vh);
  transition: translate 1.15s var(--ease), opacity .8s var(--ease-soft);
}
.hero-spot.lit { opacity: 1; }
@media (pointer: coarse) { .hero-spot { display: none; } }

.hero-foot {
  margin-top: clamp(2.75rem, 7vh, 5rem);
  display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem;
}
.scroll-cue {
  display: inline-flex; align-items: center; gap: .8rem;
  font-size: .68rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase;
  color: var(--cream-34);
}
.scroll-cue i {
  position: relative; display: block; width: 1px; height: 46px;
  background: var(--line); overflow: hidden;
}
.scroll-cue i::after {
  content: ''; position: absolute; inset: 0 0 auto; height: 40%;
  background: linear-gradient(var(--jade), transparent);
  animation: cue 2.4s var(--ease-soft) infinite;
}
@keyframes cue { 0% { transform: translateY(-100%); } 60%,100% { transform: translateY(250%); } }
.scroll-cue { transition: opacity .7s var(--ease-soft); }
html.js .scroll-cue {
  opacity: 0;
  transition: opacity .9s var(--ease-soft) 1.3s;
}
html.js.arrived .scroll-cue { opacity: 1; }
html.js .scroll-cue.hush { opacity: 0; transition-delay: 0s; }

/* ══════════════════════════════════════════════════════════════════════════
   FOUNDER
   ══════════════════════════════════════════════════════════════════════════ */
.founder { padding: clamp(3rem, 7vh, 5rem) 0; }
.founder .wrap { display: grid; justify-items: center; gap: clamp(1.75rem, 4vh, 2.75rem); }
.founder-head {
  display: grid; gap: clamp(.9rem, 2vh, 1.35rem); justify-items: center;
  text-align: center;
  margin-bottom: clamp(.5rem, 2vh, 1.5rem);
}
.founder-head h2 { max-width: 26ch; }

.vframe {
  position: relative; width: min(100%, 1000px);
  aspect-ratio: 16 / 9;
  border-radius: clamp(14px, 1.6vw, 22px);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--emerald-900);
  box-shadow: 0 50px 120px -60px rgba(0,0,0,1), 0 0 0 1px rgba(0,0,0,.4);
  transform: perspective(1400px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .5s var(--ease-soft);
  will-change: transform;
}
.vframe img, .vframe video {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.66) contrast(1.06) brightness(.92);
  transition: filter 1s var(--ease-soft), transform 1.2s var(--ease);
}
.vframe:hover img, .vframe:hover video { filter: none; transform: scale(1.012); }
.vframe::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(150deg, rgba(10,47,33,.5), rgba(3,19,13,.3));
  mix-blend-mode: multiply;
  transition: opacity .9s var(--ease-soft);
}
.vframe:hover::before { opacity: 0; }
.vframe::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% 110%, rgba(3,19,13,.65), transparent 60%),
    linear-gradient(180deg, rgba(3,19,13,.18), rgba(3,19,13,0) 30%);
  transition: opacity .7s var(--ease-soft);
}
.vframe:hover::after { opacity: .55; }

.vplay {
  position: absolute; z-index: 2; left: 50%; top: 50%;
  translate: -50% -50%;
  width: clamp(56px, 6vw, 82px); aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(244,238,224,.9);
  backdrop-filter: blur(6px);
  box-shadow: 0 18px 50px -14px rgba(0,0,0,.85);
  transition: transform .6s var(--ease), background .4s var(--ease-soft);
}
.vplay svg { width: 32%; fill: var(--ink); translate: 8% 0; }
.vframe:hover .vplay { transform: scale(1.07); background: var(--jade-2); }
.vplay::after {
  content: ''; position: absolute; inset: -14px; border-radius: 50%;
  border: 1px solid rgba(244,238,224,.3);
  animation: ring 3.6s var(--ease-soft) infinite;
}
@keyframes ring {
  0%   { transform: scale(.86); opacity: .9; }
  100% { transform: scale(1.3); opacity: 0; }
}

/* ══════════════════════════════════════════════════════════════════════════
   SOPHIA — one voice, one visual
   One scroll-pinned section, seven moments. Each moment says exactly ONE
   thing and shows exactly ONE thing, centred like a stage: the statement
   above, its visual below, nothing else on screen. The first moment is the
   introduction — her name and her face. Every moment after that is a single
   claim with a single drawing; her portrait never shares a frame with a
   diagram, and no two lines of copy ever compete.
   ══════════════════════════════════════════════════════════════════════════ */
.seq { position: relative; }
/* one short swipe per moment — the section reads fast, it does not toll */
html.js .seq { height: calc(var(--n, 7) * 34vh + 100vh); }
@supports (height: 100svh) {
  html.js .seq { height: calc(var(--n, 7) * 34svh + 100svh); }
}

/* stage: each moment pins to the viewport */
.seq-stage { display: grid; justify-items: center; gap: clamp(1.5rem, 4vh, 2.5rem); }
html.js .seq-stage {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: hidden;
  display: flex; flex-direction: column;
  padding: clamp(4.5rem, 10vh, 6rem) 0 0;
}
html.js .seq-stage::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(56% 42% at 50% 44%, rgba(32,126,88,.17), rgba(4,22,14,0) 72%);
}
html.js .seq-panels, html.js .seq-rail { position: relative; z-index: 1; }
/* the rail floats over the stage; as a flex child it would steal ~250px
   from the panels container and push every centred block off the top */
html.js .seq-rail { position: absolute; z-index: 3; }
html.js .seq-panels {
  flex: 1 1 auto; position: relative; width: 100%;
  list-style: none; margin: 0; padding: 0;
}

/* each panel: absolute, stacked, evaporates in and out */
.panel {
  width: 100%;
  display: grid; justify-items: center; gap: clamp(1.5rem, 4vh, 3rem);
  text-align: center; padding-inline: var(--pad);
}
html.js .panel {
  position: absolute; inset: 0;
  display: grid; align-items: center; align-content: center;
  padding-bottom: clamp(2.25rem, 6vh, 3.5rem); /* optical centre: clear the rail, lift the block */
  opacity: 0; visibility: hidden;
  transform: translate3d(0, 26px, 0);
  filter: blur(12px);
  transition: opacity .5s var(--ease), transform .5s var(--ease),
              filter .5s var(--ease), visibility 0s linear .5s;
  will-change: opacity, transform, filter;
}
html.js .panel.is-past { transform: translate3d(0, -20px, 0); filter: blur(14px); }
html.js .panel.is-live {
  opacity: 1; visibility: visible;
  transform: none; filter: none;
  transition: opacity .65s var(--ease) .08s, transform .65s var(--ease) .08s,
              filter .65s var(--ease) .08s, visibility 0s linear 0s;
}
html:not(.js) .panel { margin-block: clamp(4rem, 12vh, 8rem); }

.panel-h {
  font-size: clamp(1.6rem, 3.9vw, 3.2rem);
  font-weight: 380; letter-spacing: -.026em; line-height: 1.18;
  max-width: 17ch; text-wrap: balance;
}
.panel-h b { font-weight: 480; color: var(--jade); }

/* word-level evaporation inside the live headline */
html.js .panel-h .w {
  display: inline-block;
  opacity: 0; transform: translate3d(0, .5em, 0); filter: blur(8px);
  transition: opacity .6s var(--ease), transform .85s var(--ease), filter .6s var(--ease);
}
html.js .panel.is-live .panel-h .w { opacity: 1; transform: none; filter: none; }
html.js .panel-h .w:nth-child(1)  { transition-delay: .16s; }
html.js .panel-h .w:nth-child(2)  { transition-delay: .21s; }
html.js .panel-h .w:nth-child(3)  { transition-delay: .26s; }
html.js .panel-h .w:nth-child(4)  { transition-delay: .31s; }
html.js .panel-h .w:nth-child(5)  { transition-delay: .36s; }
html.js .panel-h .w:nth-child(6)  { transition-delay: .41s; }
html.js .panel-h .w:nth-child(7)  { transition-delay: .46s; }
html.js .panel-h .w:nth-child(8)  { transition-delay: .51s; }
html.js .panel-h .w:nth-child(9)  { transition-delay: .56s; }
html.js .panel-h .w:nth-child(10) { transition-delay: .61s; }
html.js .panel-h .w:nth-child(11) { transition-delay: .66s; }
html.js .panel-h .w:nth-child(12) { transition-delay: .71s; }
html.js .panel-h .w:nth-child(n+13) { transition-delay: .76s; }

/* ── the visual: ONE per moment, on a soft lit bloom ─────────────────────── */
.vis {
  position: relative;
  width: min(100%, 460px);
  justify-self: center;
}
.vis::before {
  content: ''; position: absolute; inset: -16%; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at 50% 50%, rgba(123,227,178,.07), transparent 68%);
}
.vis svg { width: 100%; height: auto; overflow: hidden; }
.vis text { font-family: var(--font); }

/* the days ring stands alone as its own drawing */
.vis-ring { width: min(100%, 380px); }

/* ── the introduction: her face, once — a deliberate medallion ───────────
   A true circle, cleanly cropped, held by a full quiet ring with one slow
   jade arc travelling it. Grounded, not floating: the photo is shaded into
   the circle's lower edge and the ring closes the composition. ──────────── */
.vis-portrait {
  position: relative; aspect-ratio: 1;
  width: min(58vw, 46svh, 420px);
}
.panel-intro { row-gap: clamp(1rem, 2.6vh, 1.75rem); }
.panel-eyebrow {
  color: var(--jade); letter-spacing: .32em; font-size: .64rem; opacity: .85;
}
.vis-portrait .face {
  position: absolute; inset: 4.5%; margin: 0; z-index: 2;
  border-radius: 50%; overflow: hidden;
  background: var(--emerald-800);
  box-shadow: 0 30px 80px -30px rgba(0,0,0,.9);
}
.face img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%;
  filter: saturate(.92) contrast(1.05) brightness(.96);
}
.face::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  box-shadow:
    inset 0 -46px 70px -18px rgba(4,22,14,.66),
    inset 0 0 0 1px rgba(244,238,224,.06);
}
.vis-portrait::before {
  content: ''; position: absolute; inset: -14%; z-index: 0; pointer-events: none;
  background: radial-gradient(circle, rgba(123,227,178,.10), transparent 62%);
}
.pring { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.pring-track { fill: none; stroke: rgba(244,238,224,.24); stroke-width: 1.5; }
.pring-arc {
  fill: none; stroke: var(--jade); stroke-width: 2.5; stroke-linecap: round;
  stroke-dasharray: 150 460;
  transform-origin: 50% 50%;
  animation: spin 16s linear infinite;
}

/* ring strokes (shared by the intro halo and the days-of-week drawing) */
.orbit-arcs path {
  fill: none; stroke: var(--jade); stroke-width: 3; opacity: .72; stroke-linecap: round;
}
.orbit-days text {
  font-size: 48px; font-weight: 800; fill: #CFFBE7;
  text-anchor: middle; dominant-baseline: middle; letter-spacing: .04em;
}

/* progress rail */
.seq-rail {
  position: absolute; z-index: 3; right: clamp(1rem, 3vw, 2.6rem); top: 50%;
  translate: 0 -50%;
  display: grid; gap: .8rem;
}
html:not(.js) .seq-rail { display: none; }
.seq-rail button {
  position: relative; display: block; width: 24px; height: 24px; border-radius: 50%;
}
.seq-rail button::after {
  content: ''; position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--cream-34);
  transition: background .45s var(--ease-soft), width .45s var(--ease), height .45s var(--ease),
              box-shadow .45s var(--ease-soft);
}
.seq-rail button[aria-current='true']::after {
  background: var(--jade); width: 9px; height: 9px;
  box-shadow: 0 0 14px var(--jade), 0 0 0 5px rgba(123,227,178,.14);
}

/* ─── Illustrations ───────────────────────────────────────────────────────
   One system. Every drawing sits in the same 440x360 stage, keeps the same
   two stroke weights, spends its single jade accent on the one thing the
   sentence is about, and labels in the same tracked caps. Base rules describe
   the FINISHED drawing so a reader without JavaScript sees a complete image;
   with JavaScript the initial state is held until the panel goes live, and
   then it plays — every time it comes back.
   ────────────────────────────────────────────────────────────────────────── */
.vis { color: var(--cream); }

html.js .panel:not(.is-live) .amb { animation-play-state: paused; }

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop-in  { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }
@keyframes draw    { to   { stroke-dashoffset: 0; } }
@keyframes rise    { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes spin    { to   { transform: rotate(360deg); } }
@keyframes float-y { 0%, 100% { transform: translateY(-6px); } 50% { transform: translateY(6px); } }
@keyframes twinkle { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
@keyframes scan {
  0%        { transform: translateX(-16%); opacity: 0; }
  14%, 86%  { opacity: 1; }
  100%      { transform: translateX(104%); opacity: 0; }
}
@keyframes lw-in   { from { opacity: 0; transform: scaleY(.12); } to { opacity: 1; transform: scaleY(1); } }
@keyframes pace    { 0%, 100% { opacity: .22; transform: scale(.72); } 50% { opacity: 1; transform: scale(1.18); } }

/* ── 01 · a week that closes on itself ────────────────────────────────────── */
.wk-track { fill: none; stroke: var(--cream-16); stroke-width: 14; stroke-linecap: round; }
.wk-fill  { fill: none; stroke: var(--jade); stroke-width: 14; stroke-linecap: round;
            stroke-dasharray: 85; stroke-dashoffset: 0; }
.wk-label { fill: var(--cream-52); font-size: 13px; font-weight: 500; letter-spacing: .12em; }

html.js .panel:not(.is-live) .wk-fill { stroke-dashoffset: 85; }
html.js .panel.is-live .wk-fill { animation: draw .5s var(--ease) both; }
.d1 .wk-fill { animation-delay: .18s; } .d2 .wk-fill { animation-delay: .30s; }
.d3 .wk-fill { animation-delay: .42s; } .d4 .wk-fill { animation-delay: .54s; }
.d5 .wk-fill { animation-delay: .66s; } .d6 .wk-fill { animation-delay: .78s; }
.d7 .wk-fill { animation-delay: .90s; }

/* ── 02 · block · repetition · prolongation ───────────────────────────────── */
.lw-bar     { fill: var(--cream-16); }
.lw-bar.rep { fill: rgba(123,227,178,.5); }
.lw-bar.on  { fill: var(--jade); }
.lw-bars    { transform-box: fill-box; transform-origin: center; }
.lw-tick    { stroke: var(--line); stroke-width: 1; fill: none; }
.lw-tag     { fill: var(--cream-52); font-size: 11px; font-weight: 500; letter-spacing: .14em; }
.lw-scan    { fill: url(#scan); animation: scan 3.4s var(--ease-soft) infinite; }

html.js .panel:not(.is-live) .lw-bars { opacity: 0; transform: scaleY(.12); }
html.js .panel:not(.is-live) .lw-tick,
html.js .panel:not(.is-live) .lw-tag  { opacity: 0; }
html.js .panel.is-live .lw-bars { animation: lw-in .8s var(--ease) .1s both; }
html.js .panel.is-live .lw-tick,
html.js .panel.is-live .lw-tag  { animation: fade-in .6s var(--ease) .6s both; }

/* ── 03 · progress ────────────────────────────────────────────────────────── */
.pg-grid { stroke: var(--line-soft); stroke-width: 1; }
.pg-bar  { fill: rgba(123,227,178,.2); transform-box: fill-box; transform-origin: bottom; }
.pg-line { stroke: var(--jade); stroke-width: 3; fill: none;
           stroke-linecap: round; stroke-linejoin: round;
           stroke-dasharray: 473; stroke-dashoffset: 0; }
.pg-node { fill: var(--ink); stroke: var(--jade); stroke-width: 2.5;
           transform-box: fill-box; transform-origin: center; }
.pg-cap  { fill: var(--cream-34); font-size: 11px; font-weight: 500; letter-spacing: .16em; }

html.js .panel:not(.is-live) .pg-bar  { transform: scaleY(0); }
html.js .panel:not(.is-live) .pg-line { stroke-dashoffset: 473; }
html.js .panel:not(.is-live) .pg-node { opacity: 0; }
html.js .panel.is-live .pg-bar  { animation: rise .6s var(--ease) both; }
html.js .panel.is-live .pg-line { animation: draw 1.15s var(--ease) .3s both; }
html.js .panel.is-live .pg-node { animation: pop-in .4s var(--ease) both; }
.b1 { animation-delay: .10s; } .b2 { animation-delay: .15s; } .b3 { animation-delay: .20s; }
.b4 { animation-delay: .25s; } .b5 { animation-delay: .30s; } .b6 { animation-delay: .35s; }
.b7 { animation-delay: .40s; } .b8 { animation-delay: .45s; } .b9 { animation-delay: .50s; }
.b10 { animation-delay: .55s; } .b11 { animation-delay: .60s; } .b12 { animation-delay: .65s; }
.n1 { animation-delay: .45s; } .n6 { animation-delay: .85s; } .n12 { animation-delay: 1.30s; }

/* ── 04 · play ────────────────────────────────────────────────────────────── */
.gm-orb  { fill: none; stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 8; }
.gm-card { fill: rgba(244,238,224,.05); stroke: var(--line); stroke-width: 1; }
.gm-word { fill: var(--cream); font-size: 32px; font-weight: 500; letter-spacing: -.02em; }
.gm-sub  { fill: var(--cream-34); font-size: 11px; font-weight: 500; letter-spacing: .22em; }
.gm-pace { fill: var(--jade); transform-box: fill-box; transform-origin: center;
           animation: pace 1.9s var(--ease-soft) infinite; }
.p1 { animation-delay: 0s; } .p2 { animation-delay: .2s; } .p3 { animation-delay: .4s; }
.gm-tok  { transform-box: fill-box; transform-origin: center; animation: float-y 6s var(--ease-soft) infinite; }
.gm-star { fill: var(--jade); animation: twinkle 3.2s var(--ease-soft) infinite; }
.t1 { animation-delay: -.4s;  animation-duration: 6.4s; }
.t2 { animation-delay: -1.9s; animation-duration: 7.1s; }
.t3 { animation-delay: -3.2s; animation-duration: 5.8s; }
.t4 { animation-delay: -2.4s; animation-duration: 6.9s; }
.t5 { animation-delay: -1.1s; animation-duration: 8.2s; }
.t6 { animation-delay: -4.0s; animation-duration: 7.6s; }

html.js .panel:not(.is-live) .gm-card,
html.js .panel:not(.is-live) .gm-word,
html.js .panel:not(.is-live) .gm-sub,
html.js .panel:not(.is-live) .gm-orb  { opacity: 0; }
html.js .panel.is-live .gm-orb  { animation: fade-in .7s var(--ease) .1s both; }
html.js .panel.is-live .gm-card { animation: fade-in .6s var(--ease) .16s both; }
html.js .panel.is-live .gm-sub  { animation: fade-in .6s var(--ease) .32s both; }
html.js .panel.is-live .gm-word { animation: fade-in .6s var(--ease) .4s both; }

/* ── 05 · what it costs ───────────────────────────────────────────────────── */
.vl-bar-old { fill: rgba(244,238,224,.1); transform-box: fill-box; transform-origin: bottom; }
.vl-bar-new { fill: var(--jade); transform-box: fill-box; transform-origin: bottom; }
.vl-base    { stroke: var(--line); stroke-width: 1; }
.vl-cap     { fill: var(--cream-34); font-size: 12px; font-weight: 500; letter-spacing: .18em; }
.vl-x       { fill: var(--cream); font-size: 86px; font-weight: 540; letter-spacing: -.05em;
              transform-box: fill-box; transform-origin: center; }

html.js .panel:not(.is-live) .vl-bar-old,
html.js .panel:not(.is-live) .vl-bar-new { transform: scaleY(0); }
html.js .panel:not(.is-live) .vl-x       { opacity: 0; }
html.js .panel.is-live .vl-bar-old { animation: rise .7s var(--ease) .1s both; }
html.js .panel.is-live .vl-bar-new { animation: rise .7s var(--ease) .28s both; }
html.js .panel.is-live .vl-x       { animation: pop-in .55s var(--ease) .5s both; }

/* ── what it costs: the same unit, ten against one ────────────────────────
   Both columns share a baseline and are built from the SAME money unit —
   the clinic stacks ten of it, Sophia costs exactly one. The eye can count
   the claim: this is what makes the 10x honest. */
.ct-cap  { fill: var(--cream-34); font-size: 12px; font-weight: 500; letter-spacing: .2em; }
.ct-base { stroke: var(--line); stroke-width: 1; }
.ct-unit { fill: rgba(244,238,224,.13); transform-box: fill-box; transform-origin: bottom; }
.ct-one  { fill: var(--jade); transform-box: fill-box; transform-origin: bottom; }
.ct-x    { fill: var(--jade); font-size: 30px; font-weight: 540; letter-spacing: -.02em; }

html.js .panel:not(.is-live) .ct-unit,
html.js .panel:not(.is-live) .ct-one { transform: scaleY(0); }
html.js .panel:not(.is-live) .ct-x   { opacity: 0; }
html.js .panel.is-live .ct-unit { animation: rise .34s var(--ease) both; }
html.js .panel.is-live .ct-one  { animation: rise .5s var(--ease) .96s both; }
html.js .panel.is-live .ct-x    { animation: pop-in .45s var(--ease) 1.3s both; }
.u1 { animation-delay: .10s; } .u2 { animation-delay: .18s; } .u3 { animation-delay: .26s; }
.u4 { animation-delay: .34s; } .u5 { animation-delay: .42s; } .u6 { animation-delay: .50s; }
.u7 { animation-delay: .58s; } .u8 { animation-delay: .66s; } .u9 { animation-delay: .74s; }
.u10 { animation-delay: .82s; }

/* ── 06 · any time, in any language ───────────────────────────────────────── */
.wl-globe { fill: none; stroke: rgba(244,238,224,.26); stroke-width: 1.5; }
.wl-tick  { stroke: rgba(244,238,224,.3); stroke-width: 2; stroke-linecap: round; }
.wl-sweep { fill: none; stroke: var(--jade); stroke-width: 3.5; stroke-linecap: round;
            stroke-dasharray: 214 640;
            transform-box: view-box; transform-origin: 220px 168px;
            animation: spin 11s linear infinite; }
.wl-glyph { fill: var(--jade); font-size: 19px; font-weight: 500;
            animation: soft-glow 4.4s var(--ease-soft) infinite; }
@keyframes soft-glow { 0%, 100% { opacity: .72; } 50% { opacity: 1; } }
.g1 { animation-delay: 0s; }    .g2 { animation-delay: -.3s; }
.g3 { animation-delay: -.6s; }  .g4 { animation-delay: -.9s; }
.g5 { animation-delay: -1.2s; } .g6 { animation-delay: -1.5s; }
.g7 { animation-delay: -1.8s; } .g8 { animation-delay: -2.1s; }
.g9 { animation-delay: -2.4s; } .g10 { animation-delay: -2.7s; }
.g11 { animation-delay: -3s; }  .g12 { animation-delay: -3.3s; }
.g13 { animation-delay: -3.6s; } .g14 { animation-delay: -3.9s; }

html.js .panel:not(.is-live) .wl-globe,
html.js .panel:not(.is-live) .wl-tick { opacity: 0; }
html.js .panel.is-live .wl-tick  { animation: fade-in .7s var(--ease) .1s both; }
html.js .panel.is-live .wl-globe { animation: fade-in .7s var(--ease) .28s both; }

/* ══════════════════════════════════════════════════════════════════════════
   MEET HER
   ══════════════════════════════════════════════════════════════════════════ */
.meet {
  padding: clamp(3.5rem, 9vh, 6.5rem) 0;
  display: grid; place-items: center;
}
.meet .wrap { display: grid; justify-items: center; gap: clamp(2rem, 5vh, 3rem); text-align: center; }
.meet-orb {
  position: relative; width: clamp(160px, 22vw, 240px); aspect-ratio: 1;
  display: grid; place-items: center;
}
.meet-orb svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.meet-orb .o-ring { fill: none; stroke: var(--line); stroke-width: 1; }
.meet-orb .o-arc {
  fill: none; stroke: var(--jade); stroke-width: 1.5; stroke-linecap: round;
  stroke-dasharray: 70 300; transform-origin: 50% 50%;
  animation: spin 14s linear infinite;
}
.meet-orb .o-core {
  fill: url(#coreg);
  animation: pulse 4.5s var(--ease-soft) infinite;
  transform-origin: 50% 50%;
}

/* ══════════════════════════════════════════════════════════════════════════
   TRUST
   Eight screens of dark emerald, and then the page turns over. Privacy is
   the one subject here where the reader is owed plain sight, so it gets the
   palette inverted and the only detailed copy on the page.
   ══════════════════════════════════════════════════════════════════════════ */
.trust {
  --t-ink:    #062016;
  --t-body:   rgba(6, 32, 22, .66);
  --t-dim:    rgba(6, 32, 22, .42);
  --t-line:   rgba(6, 32, 22, .12);
  --t-accent: #1F7C58;
  background: var(--cream);
  color: var(--t-body);
  padding: clamp(3.5rem, 9vh, 6.5rem) 0 clamp(3rem, 8vh, 5.5rem);
}
.trust .eyebrow { color: var(--t-accent); }
.trust h2 { color: var(--t-ink); }
.trust-head {
  display: grid; gap: clamp(.9rem, 2vh, 1.3rem);
  margin-bottom: clamp(2.75rem, 7vh, 4.5rem);
}
.trust-head h2 { max-width: 20ch; }

.pledges {
  display: grid; gap: clamp(1.75rem, 4vw, 2.75rem) clamp(2rem, 5vw, 4rem);
  grid-template-columns: 1fr;
}
.pledges li { display: grid; gap: .45rem; align-content: start; }
@media (pointer: fine) {
  .pledges li { transition: transform .6s var(--ease); }
  .pledges li:hover { transform: translateY(-4px); }
}
.pledges .num {
  font-size: .72rem; font-weight: 500; letter-spacing: .18em;
  color: var(--t-accent); font-variant-numeric: tabular-nums;
}
.pledges h3 {
  font-size: clamp(1.05rem, 1.55vw, 1.22rem); font-weight: 500;
  letter-spacing: -.015em; color: var(--t-ink); line-height: 1.32;
}
.pledges li > p:last-child {
  font-size: clamp(.95rem, 1.18vw, 1.02rem); font-weight: 360;
  line-height: 1.62; color: var(--t-body); max-width: 34ch;
}

.trust-foot {
  margin-top: clamp(3rem, 8vh, 5rem);
  padding-top: clamp(1.75rem, 4vh, 2.5rem);
  border-top: 1px solid var(--t-line);
  display: grid; gap: clamp(1.1rem, 3vh, 1.75rem);
  align-items: baseline;
}
.trust-line {
  font-size: clamp(1.1rem, 1.9vw, 1.45rem); font-weight: 420;
  letter-spacing: -.018em; line-height: 1.32; color: var(--t-ink);
  max-width: 30ch; text-wrap: balance;
}
.trust .tlink {
  color: var(--t-body);
  background-image: linear-gradient(var(--t-accent), var(--t-accent));
}
.trust .tlink:hover, .trust .tlink:focus-visible { color: var(--t-ink); }
.trust :focus-visible { outline-color: var(--t-accent); }

/* ══════════════════════════════════════════════════════════════════════════
   PRICING
   ══════════════════════════════════════════════════════════════════════════ */
.close { padding: clamp(3.5rem, 9vh, 6.5rem) 0 clamp(3.5rem, 9vh, 6.5rem); }
.close .wrap {
  display: grid; justify-items: center; gap: clamp(1rem, 2.4vh, 1.6rem); text-align: center;
}
.close h2 { max-width: 22ch; }
.close .fine { max-width: 46ch; color: var(--cream-52); }

.price {
  display: flex; align-items: baseline; justify-content: center; gap: .5rem;
  letter-spacing: -.05em;
}
.price b {
  font-size: clamp(3.4rem, 9vw, 6.6rem); font-weight: 400; line-height: 1;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(168deg, var(--cream) 18%, var(--jade-2) 96%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.price span { font-size: clamp(1rem, 1.8vw, 1.3rem); font-weight: 380; color: var(--cream-34); letter-spacing: -.02em; }

.close .btn { margin-top: clamp(1.5rem, 4vh, 2.4rem); }

/* ══════════════════════════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════════════════════════ */
footer {
  border-top: 1px solid var(--line-soft);
  background: linear-gradient(180deg, rgba(5,26,18,0), rgba(5,26,18,.7));
  padding: clamp(3.5rem, 9vh, 6rem) 0 clamp(2rem, 5vh, 3rem);
}
.foot {
  display: grid; gap: clamp(2.5rem, 6vw, 4rem);
  grid-template-columns: 1fr;
  align-items: start;
}
.foot-brand { display: grid; gap: 1.15rem; justify-items: start; }
.foot-brand p { max-width: 26ch; }

.foot-cols {
  display: grid; gap: clamp(2rem, 5vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.foot-col ul { display: grid; gap: .7rem; }
.foot-h {
  margin-bottom: 1.15rem;
  font-size: .68rem; font-weight: 500; letter-spacing: .2em;
  text-transform: uppercase; color: var(--cream-34);
}
.foot-col a {
  font-size: .95rem; font-weight: 380; color: var(--cream-70);
  transition: color .35s var(--ease-soft);
}
.foot-col a:hover, .foot-col a:focus-visible { color: var(--cream); }

.foot-base {
  margin-top: clamp(3rem, 7vh, 4.5rem);
  padding-top: 1.6rem; border-top: 1px solid var(--line-soft);
  display: flex; flex-wrap: wrap; gap: .6rem 2rem; justify-content: space-between;
  font-size: .78rem; line-height: 1.5; color: var(--cream-34);
}
.foot-base p:last-child { max-width: 46ch; }

/* ══════════════════════════════════════════════════════════════════════════
   ARTICLE (mission / privacy)
   ══════════════════════════════════════════════════════════════════════════ */
.art-hero { padding: clamp(8rem, 20vh, 13rem) 0 clamp(2.5rem, 6vh, 4rem); }
.art-hero .wrap { max-width: 780px; display: grid; gap: clamp(1.1rem, 3vh, 1.8rem); }
.art-hero h1 {
  font-size: clamp(2.15rem, 5.6vw, 4.2rem);
  font-weight: 440; letter-spacing: -.034em; line-height: 1.04; text-wrap: balance;
}
.art-lede {
  font-size: clamp(1.15rem, 1.9vw, 1.5rem); font-weight: 380; line-height: 1.5;
  color: var(--jade-2); font-style: italic; letter-spacing: -.018em;
  max-width: 30ch;
}
.art-meta {
  display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; align-items: center;
  font-size: .8rem; color: var(--cream-34); letter-spacing: .02em;
}
.art-meta span + span::before { content: '·'; margin-right: 1.2rem; color: var(--cream-16); }

.article { padding-bottom: clamp(4rem, 10vh, 7rem); }
.article .wrap { max-width: 780px; }
.prose { max-width: none; }
.prose > * + * { margin-top: 1.65em; }
.prose p {
  font-size: clamp(1.03rem, 1.25vw, 1.14rem);
  font-weight: 360; line-height: 1.78; color: var(--cream-70);
  letter-spacing: -.006em;
}
.prose p strong, .prose strong { color: var(--cream); font-weight: 560; }
.prose em { color: var(--cream); }
.prose h2 {
  margin-top: 2.6em;
  font-size: clamp(1.3rem, 2.1vw, 1.6rem); font-weight: 480; letter-spacing: -.022em;
  color: var(--cream);
}
.prose h3 {
  margin-top: 2.2em;
  font-size: 1.05rem; font-weight: 560; letter-spacing: -.018em; color: var(--cream);
}
.prose ul { display: grid; gap: .7em; }
.prose ul li {
  position: relative; padding-left: 1.4em;
  font-size: clamp(1.02rem, 1.2vw, 1.1rem); font-weight: 380; line-height: 1.7; color: var(--cream-70);
}
.prose ul li::before {
  content: ''; position: absolute; left: .15em; top: .72em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--jade-deep);
}
.prose .pull {
  margin-block: 2.6em;
  padding-left: clamp(1.1rem, 2.4vw, 1.8rem);
  border-left: 1px solid var(--jade-deep);
  font-size: clamp(1.2rem, 2.2vw, 1.65rem); font-weight: 420; line-height: 1.36;
  letter-spacing: -.026em; color: var(--cream);
}
.prose .note {
  margin-top: 3.4em; padding-top: 2.2em; border-top: 1px solid var(--line-soft);
}
.prose a:not(.tlink) {
  color: var(--jade-2);
  background-image: linear-gradient(var(--jade-deep), var(--jade-deep));
  background-repeat: no-repeat; background-size: 100% 1px; background-position: 0 100%;
  transition: background-size .4s var(--ease), color .3s var(--ease-soft);
}
.prose a:not(.tlink):hover { color: var(--jade); background-size: 100% 2px; }

.art-back { padding-bottom: clamp(4rem, 10vh, 7rem); }
.art-back .wrap { max-width: 780px; }

/* reading progress */
.read-bar {
  position: fixed; inset: 0 0 auto; z-index: 120; height: 2px;
  background: var(--jade); transform-origin: 0 50%; transform: scaleX(0);
  box-shadow: 0 0 14px var(--jade);
}

/* ─── 404 ─────────────────────────────────────────────────────────────────── */
.oops {
  min-height: 100vh; min-height: 100svh; display: grid; place-items: center;
  text-align: center;
}
.oops .wrap { display: grid; gap: 1.6rem; justify-items: center; }

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 700px) {
  .pledges { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 860px) {
  .foot { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
}

@media (min-width: 1100px) {
  .pledges { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .trust-foot { grid-template-columns: minmax(0, 1fr) auto; gap: 2.5rem; }
}

@media (min-width: 900px) {
  /* Every moment is a centred stage on every screen: one statement over one
     visual. On desktop the visuals may breathe a little wider. */
  .panel { row-gap: clamp(1.4rem, 3.6vh, 2.4rem); }
  .panel .panel-h { font-size: clamp(2.1rem, 3.8vw, 3.4rem); max-width: 22ch; }
  .panel .vis { width: min(46vw, 540px); }
  .panel .vis-ring { width: min(42svh, 440px); }
  .panel .vis-portrait { width: min(50svh, 470px); height: auto; }
}

/* ══════════════════════════════════════════════════════════════════════════
   PHONE
   A phone is tall and narrow, so the desktop scale leaves the type stranded
   in the middle of a dark screen. Here the statements grow to fill the
   column, the sections stop breathing like a desktop, and the hero is
   structured — headline centred, scroll cue anchored — instead of floating.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 899.98px) {

  /* ── Hero ──────────────────────────────────────────────────────────────
     The headline keeps a proper distance below the fixed nav — clear of the
     wordmark and CTA — but the section stays content-height so the founder
     section rises into view instead of a full viewport of empty ground. */
  .hero {
    min-height: auto;
    align-items: stretch;
    padding: clamp(6.5rem, 17vh, 10rem) 0 clamp(2rem, 5vh, 3rem);
  }
  .hero .wrap { display: grid; grid-template-rows: auto; gap: clamp(2rem, 5vh, 3rem); }
  .hero-h { align-self: start; font-size: min(9.4vw, 4.7rem); }
  .hero-halo { width: min(96vw, 460px); left: -14%; }

  /* ── Founder ─────────────────────────────────────────────────────────── */
  .founder { padding: clamp(2.25rem, 5vh, 3.25rem) 0; }
  .founder .wrap { gap: clamp(1.4rem, 3.5vh, 2rem); }

  /* ── The pinned sequence ─────────────────────────────────────────────── */
  .panel {
    justify-items: center; text-align: center;
    align-content: center;
    row-gap: clamp(1rem, 2.6vh, 1.6rem);
  }
  .panel .panel-h { font-size: min(8vw, 2.35rem); max-width: 18ch; }
  /* every visual answers to viewport HEIGHT so the centred block always fits
     the stage — one statement, one visual, no crowding (measured at 390x844) */
  .panel .vis { width: min(84vw, 48svh); }
  .panel .vis-ring { width: min(74vw, 42svh); }
  .panel .vis-portrait { width: min(76vw, 44svh, 360px); height: auto; }
  .seq-rail {
    right: auto; left: 50%; top: auto; bottom: clamp(1.1rem, 4vh, 2rem);
    translate: -50% 0; grid-auto-flow: column; gap: .5rem;
  }

  /* ── The close ───────────────────────────────────────────────────────── */
  .meet { padding: clamp(2.5rem, 6vh, 4rem) 0; }
  .meet .wrap { gap: clamp(1.5rem, 4vh, 2.25rem); }
  .trust { padding: clamp(2.5rem, 6vh, 4rem) 0 clamp(2.25rem, 5vh, 3.5rem); }
  .trust-head { margin-bottom: clamp(2rem, 5vh, 3rem); }
  .trust h2 { font-size: min(8.6vw, 3rem); }
  .founder-head h2 { font-size: min(7.8vw, 2.6rem); max-width: 20ch; }
  .trust-foot { margin-top: clamp(2.25rem, 6vh, 3.5rem); }
  .close { padding: clamp(2.5rem, 6vh, 4rem) 0 clamp(2.5rem, 6vh, 4rem); }

  /* ── Chrome ──────────────────────────────────────────────────────────── */
  .nav-cta { padding: .55rem .95rem; font-size: .8rem; }
  .brand img { height: 26px; }
  .nav.stuck .brand img { height: 24px; }
  .foot-brand .brand img { height: 32px; }
  footer { padding-top: clamp(2.5rem, 6vh, 3.5rem); }
}

/* short viewports: give the pinned stage room */
@media (max-height: 700px) and (min-width: 900px) {
  .panel-h { font-size: clamp(1.5rem, 3vw, 2.4rem); }
  .panel .vis { width: min(40vw, 46svh); }
  .panel .vis-ring { width: min(36svh, 360px); }
  .panel .vis-portrait { width: min(38svh, 380px); height: auto; }
}

/* ══════════════════════════════════════════════════════════════════════════
   REDUCED MOTION
   ══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .12s !important;
    transition-delay: 0s !important;
  }
  .field::after { animation: none; }
  .hero-spot { display: none; }
  .arrival { display: none; }
  html.js .hero-h .l1 .ch, html.js .hero-h .l2,
  html.js .scroll-cue { opacity: 1; transform: none; filter: none; }
  html.js .nav .brand img, html.js .nav-cta { opacity: 1; transform: none; }
  .vframe { transform: none; }
  html.js .panel,
  html.js .panel.is-past { transform: none; filter: none; }
  html.js [data-rv] { transform: none; filter: none; }
  .orbit-comet { animation: none; stroke-dashoffset: 12; }
  .rotor-item .ch, .panel-h .w { filter: none !important; transform: none !important; }
}