/* ============================================================
   PRACTICAL REASON — v2 design system ("The Reasoning Page, shot like a film")
   Scene-based editorial system. Source of truth: practical-reason-DESIGN.md
   + 12 Jun 2026 research brief (scene logic, giant numerals, hard colour
   flips, single-CTA discipline, destination footer, artifacts-as-photography).
   Used by every page in concepts/v2/.
   ============================================================ */

:root{
  /* surfaces */
  --cinema:#0A1711;          /* cinematic dark bookends (hero, closing, footer) */
  --ink-green:#0E2118;       /* flat deep-green chapter scenes */
  --raised-dark:#14342A;
  --raised-dark-2:#163528;
  --paper:#F3EEE3;
  --paper-raised:#ECE4D5;
  --paper-sage:#EBE4D2;   /* warm oat second-paper (was cold green #E9EDDA) */
  --sage-raised:#E1D8C2;  /* warm raised stone (was green #DFE5CB) */

  /* text on paper */
  --p-heading:#1A1714; --p-body:#4A433B; --p-tertiary:#756B5E;
  /* text on dark */
  --d-heading:#F3EEE3; --d-body:#C9D2CB; --d-tertiary:#8FA396;

  /* greens */
  --green-deep:#14342A; --green:#1F4A38; --green-mid:#2E6450;
  --green-text:#1A4231;          /* accent text on paper (AAA) */
  --sage:#6FB39A;                /* accent on dark (AAA) */
  --sage-bright:#A9D9C6;
  --sage-mid:#4E8A6C;
  --accent-soft:#C3D6CB;

  /* warm DATA accent (brass) — used ONLY on numbers, prices and infographic data,
     never on body copy or chrome. Keeps the green/cream/sage core intact. */
  --brass:#B0892F; --brass-deep:#8A6A1E; --brass-bright:#D8B257;
  --data:var(--brass-bright);            /* default = on dark surfaces */

  /* type */
  --ff-serif:'Instrument Serif',Georgia,serif;
  --ff-sans:'Schibsted Grotesk',system-ui,-apple-system,sans-serif;
  --ff-mono:'Fira Code',ui-monospace,monospace;
  --t-display:clamp(56px,8.6vw,128px);
  --t-h1-inner:clamp(40px,5.4vw,80px);
  --t-h2:clamp(38px,5vw,68px);
  --t-h3:clamp(24px,2.6vw,32px);
  --t-stand:clamp(19px,1.8vw,24px);
  --t-body:17px;
  --t-sm:14px;
  --t-kicker:12.5px;
  --t-mono:12.5px;
  --t-num:clamp(120px,17vw,240px);

  /* rhythm — identical everywhere (premium signal) */
  --pad-scene:clamp(120px,16vh,208px);
  --gutter:clamp(24px,6vw,96px);
  --w:1240px; --w-read:720px; --w-narrow:560px;

  --ease:cubic-bezier(.16,1,.3,1);
  --dur:320ms; --dur-slow:640ms;
  --radius:14px;
}

*{box-sizing:border-box;margin:0;padding:0}
/* film grain — site-wide, pure CSS/SVG; hides glow banding on dark, gives paper tooth on light */
body::after{content:"";position:fixed;inset:0;z-index:80;pointer-events:none;opacity:.05;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--cinema);color:var(--d-body);font-family:var(--ff-sans);font-size:var(--t-body);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden;
  /* dark-scene vars at root so hero/footer/anything outside a .scene resolves correctly */
  --heading:var(--d-heading);--body-c:var(--d-body);--tert:var(--d-tertiary);
  --accent:var(--sage);--accent-strong:var(--sage-bright);
  --surface-raised:var(--raised-dark);--surface-raised-2:var(--raised-dark-2);
  --line:rgba(243,238,227,.13);--line-2:rgba(243,238,227,.07)}
.lenis.lenis-smooth{scroll-behavior:auto!important}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.container{width:100%;max-width:var(--w);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.read{max-width:var(--w-read)}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--green);color:var(--paper);padding:10px 18px;border-radius:0 0 8px 0}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--sage);outline-offset:3px;border-radius:3px}

/* ============================================================
   SCENES — every section is a scene with one surface.
   The hard colour flip at scene boundaries IS the transition.
   ============================================================ */
.scene{position:relative;padding:var(--pad-scene) 0;overflow:clip;
  --heading:var(--d-heading);--body-c:var(--d-body);--tert:var(--d-tertiary);
  --accent:var(--sage);--accent-strong:var(--sage-bright);
  --surface-raised:var(--raised-dark);--surface-raised-2:var(--raised-dark-2);
  --line:rgba(243,238,227,.13);--line-2:rgba(243,238,227,.07);
  background:linear-gradient(180deg,var(--cinema),#0C2018 52%,var(--cinema));color:var(--body-c)}
.scene--ink{background:linear-gradient(180deg,var(--ink-green),#10271C 55%,var(--ink-green))}
.scene--paper,.scene--sage{
  --heading:var(--p-heading);--body-c:var(--p-body);--tert:var(--p-tertiary);
  --accent:var(--green);--accent-strong:var(--green-text);--data:var(--brass-deep);
  --surface-raised:var(--paper-raised);--surface-raised-2:#E6DCC9;
  --line:rgba(26,23,20,.14);--line-2:rgba(26,23,20,.08);
  background:var(--paper);color:var(--body-c)}
.scene--sage{background:var(--paper-sage);--surface-raised:var(--sage-raised)}
.scene--quiet{padding:clamp(72px,9vh,120px) 0}
.scene>.container{position:relative;z-index:2}
/* a scene that hosts a sticky pin must NOT clip — overflow clipping breaks position:sticky */
.scene:has(.arg-wrap){overflow:visible}
/* hairline seam where two light scenes meet (the colour flip alone is too quiet) */
.scene--paper+.scene--sage,.scene--sage+.scene--paper,.scene--paper+.scene--paper{border-top:1px solid rgba(26,23,20,.1)}
/* ambient light — dark scenes get a faint sage glow so they breathe instead of sitting flat */
.scene:not(.scene--paper):not(.scene--sage)::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(85% 70% at 78% 18%,rgba(111,179,154,.075),transparent 62%)}
.scene--ink:nth-of-type(odd)::before{background:radial-gradient(80% 75% at 20% 72%,rgba(111,179,154,.07),transparent 60%)}
/* quiet contour accent in the corner of ink chapter breaks — eases in as the scene enters */
.scene--ink::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,23,17,.45),rgba(10,23,17,.05) 50%) ,
             url(/assets/dusk/chapter-band.webp) center bottom/cover no-repeat;
  opacity:0;transform:translateY(26px);transition:opacity 1.3s var(--ease),transform 1.3s var(--ease)}
.scene--ink.scene-in::after{opacity:1;transform:none}
/* ambient glow on dark scenes also breathes once the scene is on screen */
.scene:not(.scene--paper):not(.scene--sage).scene-in::before{animation:breathe 10s ease-in-out infinite alternate}
@media(prefers-reduced-motion:reduce){
  .scene--ink::after{opacity:.5!important;transform:none!important;transition:none!important}
  .scene.scene-in::before{animation:none!important}
}

/* texture slot — cinema scenes only, corner-confined, never full-bleed */
.scene-tex{position:absolute;inset:0;z-index:0;pointer-events:none;background-repeat:no-repeat}

h1,h2,h3{font-family:var(--ff-serif);font-weight:400;color:var(--heading);line-height:1.0;letter-spacing:-.01em;text-wrap:balance}
h2{font-size:var(--t-h2);max-width:16ch}
h3{font-size:var(--t-h3);line-height:1.12}
h4{font-family:var(--ff-sans);font-weight:600;font-size:17px;color:var(--heading)}
em,.gi{font-style:italic;color:var(--accent-strong)}
/* the green-italic emphasis phrase sits on its OWN line in every heading (editorial rule).
   Opt out per-heading with em.gi-inline (e.g. the email hero "Is it?"). */
h1 em,h2 em,h3 em{display:block;font-style:italic;color:var(--accent-strong)}
h1 em.gi-inline,h2 em.gi-inline,h3 em.gi-inline{display:inline}
.stand{font-size:var(--t-stand);line-height:1.5;color:var(--body-c);max-width:54ch}
.stand em,p em{font-family:var(--ff-serif);font-style:italic;font-size:1.08em;line-height:1}
::selection{background:rgba(111,179,154,.35);color:inherit}
p{max-width:65ch}
strong{color:var(--heading);font-weight:600}

/* chrome: kicker + crest rule + folio */
.kicker{display:block;font-size:var(--t-kicker);font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--tert)}
.crest{display:flex;align-items:center;gap:14px;margin-bottom:26px}
.crest .rule{width:54px;height:2px;background:var(--accent);flex:none}
.mono{font-family:var(--ff-mono);font-size:var(--t-mono);letter-spacing:.04em;color:var(--tert)}
.folio{position:absolute;right:var(--gutter);bottom:28px;z-index:2;font-family:var(--ff-mono);font-size:12px;color:var(--tert);letter-spacing:.06em}

/* the ∴ mark — three tonal greens, inverts per surface */
.mark .apex{fill:var(--green)}
.mark .base:nth-of-type(2){fill:var(--green-deep)}
.mark .base:nth-of-type(3){fill:var(--green-mid)}
.scene .mark .apex,.on-dark .mark .apex{fill:var(--sage-bright)}
.scene .mark .base:nth-of-type(2),.on-dark .mark .base:nth-of-type(2){fill:var(--sage-mid)}
.scene .mark .base:nth-of-type(3),.on-dark .mark .base:nth-of-type(3){fill:var(--sage)}
.scene--paper .mark .apex,.scene--sage .mark .apex{fill:var(--green)}
.scene--paper .mark .base:nth-of-type(2),.scene--sage .mark .base:nth-of-type(2){fill:var(--green-deep)}
.scene--paper .mark .base:nth-of-type(3),.scene--sage .mark .base:nth-of-type(3){fill:var(--green-mid)}

/* ============================================================
   GIANT SCENE NUMERALS — funnel wayfinding (01 audit / 02 sprint / 03 run).
   Half-cropped off the section edge; always the same way (left), by intent.
   ============================================================ */
.scene-num{position:absolute;z-index:1;top:clamp(28px,6vh,72px);left:-.14em;
  font-family:var(--ff-serif);font-size:var(--t-num);line-height:.8;
  color:var(--accent);opacity:.16;letter-spacing:-.04em;pointer-events:none;user-select:none}
.scene--paper .scene-num,.scene--sage .scene-num{opacity:.13}

/* ============================================================
   NAV — transparent over dark heroes, blurs on scroll. One CTA.
   ============================================================ */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;border-bottom:1px solid transparent;transition:background .4s var(--ease),border-color .4s,backdrop-filter .4s}
.nav.scrolled{background:rgba(10,23,17,.78);backdrop-filter:blur(16px) saturate(1.15);border-bottom-color:rgba(243,238,227,.08)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;max-width:var(--w);margin:0 auto;padding:15px var(--gutter)}
.lockup{display:flex;align-items:center;gap:11px}
@keyframes apexPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
.lockup:hover .mark .apex{animation:apexPulse 1.5s var(--ease) infinite;transform-origin:50% 26%}
@media(prefers-reduced-motion:reduce){.lockup:hover .mark .apex{animation:none}}
.wordmark{font-family:var(--ff-serif);font-size:22px;letter-spacing:-.02em;color:var(--d-heading)}
.nav-links{display:flex;align-items:center;gap:28px}
.nav-links a{font-size:14.5px;color:var(--d-body);transition:color .2s}
.nav-links a:hover{color:var(--d-heading)}
.nav-cta{padding:10px 20px;font-size:14px;font-weight:600;border:1px solid rgba(243,238,227,.25);border-radius:5px;color:var(--d-heading)!important;transition:background .2s,border-color .2s,color .2s}
.nav-cta:hover{background:var(--paper);color:#10231A!important;border-color:var(--paper)}
.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.nav-toggle span{width:24px;height:2px;background:var(--d-heading);border-radius:2px;transition:.3s}

/* ============================================================
   BUTTONS — one primary action per scene; secondary = text link
   ============================================================ */
.btn{display:inline-flex;align-items:center;gap:.55em;font-family:var(--ff-sans);font-weight:600;font-size:15px;line-height:1;border-radius:5px;padding:17px 30px;border:0;cursor:pointer;transition:transform .2s var(--ease),background .2s var(--ease)}
.btn .arrow{transition:transform .25s var(--ease)}
.btn:hover .arrow{transform:translateX(4px)}
.btn:hover{transform:translateY(-2px)}
.btn,.scene .btn,.on-dark .btn{background:var(--paper);color:#10231A;box-shadow:0 10px 36px -14px rgba(169,217,198,.45)}
.scene--paper .btn,.scene--sage .btn{box-shadow:0 14px 30px -14px rgba(31,74,56,.45)}
.scene--paper .btn,.scene--sage .btn{background:var(--green);color:var(--paper)}
.scene--paper .btn:hover,.scene--sage .btn:hover{background:#143026}
.link-arrow{display:inline;font-weight:600;font-size:15px;color:var(--accent-strong);padding-bottom:3px;transition:color .2s;
  background-image:linear-gradient(currentColor,currentColor),linear-gradient(currentColor,currentColor);
  background-repeat:no-repeat;background-size:100% 2px,0 2px;background-position:right bottom,left bottom;
  transition:color .2s,background-size .4s var(--ease)}
.link-arrow:hover{color:var(--heading);background-size:0 2px,100% 2px}
.cta-note{margin-top:18px;font-family:var(--ff-mono);font-size:12.5px;color:var(--tert);letter-spacing:.03em}

/* ============================================================
   LAYOUT — editorial asymmetry. Break the grid the same way each time.
   ============================================================ */
.split{display:grid;grid-template-columns:1.55fr 1fr;gap:clamp(40px,6vw,88px);align-items:start}
.split--rev{grid-template-columns:1fr 1.55fr}
.offset{margin-left:8.333%}          /* content starts at col 2 — intent, repeated */
.scene-head{max-width:820px;margin-bottom:clamp(44px,7vh,80px)}
.scene-head .stand{margin-top:24px}
.scene-head h2{margin-top:18px}

/* ============================================================
   INDEX STRIPS — hairline editorial rows. Replaces card grids.
   ============================================================ */
.index{border-top:1px solid var(--line)}
.index-row{display:grid;grid-template-columns:56px 1.05fr 1.6fr auto;gap:clamp(18px,3vw,44px);align-items:baseline;padding:30px 0;border-bottom:1px solid var(--line);transition:background .25s,padding-left .3s var(--ease)}
a.index-row:hover{padding-left:14px;background:linear-gradient(90deg,var(--line-2),transparent 60%)}
a.index-row:hover .t{color:var(--accent-strong)}
.index-row .t{transition:color .25s}
.index-row .n{font-family:var(--ff-mono);font-size:13px;color:var(--accent);letter-spacing:.08em}
.index-row .t{font-family:var(--ff-serif);font-size:clamp(22px,2.4vw,30px);color:var(--heading);line-height:1.1}
.index-row .d{font-size:15px;color:var(--body-c);line-height:1.55;max-width:52ch}
.index-row .aux{font-family:var(--ff-mono);font-size:12.5px;color:var(--tert);white-space:nowrap;justify-self:end}

/* ============================================================
   PULL QUOTE + BRACKET STATS
   ============================================================ */
.pull{position:relative;font-family:var(--ff-serif);font-style:italic;font-size:clamp(26px,3.4vw,46px);line-height:1.25;color:var(--heading);max-width:24ch;padding-left:clamp(22px,3vw,38px)}
.pull::before{content:"";position:absolute;left:0;top:.18em;bottom:.18em;width:3px;background:var(--accent)}
.pull em{color:var(--accent-strong);font-style:italic}
.stat-row{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:clamp(20px,2.6vw,48px)}
.stat-b{position:relative;padding:6px 22px}
.stat-b::before,.stat-b::after{content:"";position:absolute;top:0;bottom:0;width:12px;border:1.5px solid var(--accent);opacity:.85}
.stat-b::before{left:0;border-right:0}
.stat-b::after{right:0;border-left:0}
.stat-b .v{font-family:var(--ff-serif);font-size:clamp(44px,5.6vw,76px);color:var(--heading);line-height:1;font-variant-numeric:tabular-nums lining-nums}
.stat-b .l{display:block;font-family:var(--ff-mono);font-size:12px;color:var(--tert);margin-top:10px;letter-spacing:.05em}

/* ============================================================
   ARTIFACT — the real product, rendered in HTML/CSS (sanctioned imagery).
   Deep-green report panel: mono labels, serif metrics, sage deltas.
   ============================================================ */
.artifact{background:var(--ink-green);border:1px solid rgba(243,238,227,.14);border-radius:var(--radius);overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(243,238,227,.07),0 1px 0 rgba(26,23,20,.05),0 32px 64px -24px rgba(14,33,24,.45)}
.scene--paper .artifact,.scene--sage .artifact{box-shadow:0 1px 0 rgba(26,23,20,.04),0 36px 72px -28px rgba(26,23,20,.35)}
.artifact-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 22px;border-bottom:1px solid rgba(243,238,227,.1)}
.artifact-bar .ttl{display:flex;align-items:center;gap:10px;font-family:var(--ff-mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:#8FA396}
.artifact-bar .when{font-family:var(--ff-mono);font-size:11px;color:#8FA396}
.artifact-body{padding:8px 22px 20px}
.metric{display:grid;grid-template-columns:1fr auto auto;gap:18px;align-items:baseline;padding:15px 0;border-bottom:1px solid rgba(243,238,227,.07)}
.metric:last-child{border-bottom:0}
.metric .ml{font-size:13.5px;color:#C9D2CB}
.metric .mv{font-family:var(--ff-serif);font-size:24px;color:#F3EEE3;font-variant-numeric:tabular-nums lining-nums}
.metric .md{font-family:var(--ff-mono);font-size:12px;color:var(--sage)}
.metric .md.down{color:#8FA396}
.flagged{margin:14px 0 4px;padding:13px 16px;background:rgba(111,179,154,.08);border:1px solid rgba(111,179,154,.22);border-radius:9px;font-size:13px;color:#C9D2CB;line-height:1.5}
.flagged .fl{font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--sage);display:block;margin-bottom:5px}

/* ============================================================
   WORK ARTIFACTS — show the deliverable. Built in HTML/CSS so text is crisp;
   only the photography is a generated image. Framed as a sample on dark scenes.
   ============================================================ */
.showcase{display:grid;grid-template-columns:1fr .9fr;gap:clamp(40px,6vw,84px);align-items:center}
.showcase--rev{grid-template-columns:.9fr 1fr}
@media(max-width:960px){.showcase,.showcase--rev{grid-template-columns:1fr;gap:44px}}

/* device frame */
.device{position:relative;background:#F3EEE3;border-radius:16px;overflow:hidden;
  box-shadow:0 1px 0 rgba(243,238,227,.06),0 40px 80px -30px rgba(0,0,0,.6);max-width:440px;width:100%;justify-self:center}
.device-bar{display:flex;align-items:center;gap:10px;padding:11px 16px;background:#E7DFD0;border-bottom:1px solid rgba(26,23,20,.08)}
.device-bar .dots{display:flex;gap:6px}
.device-bar .dots i{width:9px;height:9px;border-radius:50%;background:rgba(26,23,20,.18)}
.device-bar .lbl{font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#8a7f6f;margin-left:4px}

/* the email itself (warm cream, a fictional client brand) */
.mail{color:#2a2620;font-family:var(--ff-sans)}
.mail-brand{text-align:center;padding:26px 24px 18px}
.mail-brand .bw{font-family:var(--ff-serif);font-size:25px;letter-spacing:.12em;color:#2a2620}
.mail-brand .bt{font-family:var(--ff-mono);font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;color:#9a8f7d;margin-top:3px}
.mail-hero{display:block;width:100%;aspect-ratio:16/10;object-fit:cover}
.mail-body{padding:26px 30px 12px;text-align:center}
.mail-body h5{font-family:var(--ff-serif);font-weight:400;font-size:27px;line-height:1.12;color:#2a2620;margin-bottom:10px}
.mail-body p{font-size:13.5px;line-height:1.6;color:#5b5347;max-width:34ch;margin:0 auto}
.mail-btn{display:inline-block;margin-top:18px;background:#2F5142;color:#F3EEE3;font-weight:600;font-size:12.5px;letter-spacing:.04em;padding:13px 26px;border-radius:4px}
.mail-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:22px 30px 4px}
.mail-grid figure{margin:0}
.mail-grid img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:8px}
.mail-grid figcaption{font-family:var(--ff-mono);font-size:9.5px;letter-spacing:.08em;color:#9a8f7d;margin-top:7px;text-transform:uppercase}
.mail-foot{padding:20px 30px 26px;text-align:center;font-size:10.5px;color:#a99e8c;line-height:1.5;border-top:1px solid rgba(26,23,20,.07);margin-top:18px}

/* social grid mock — three tiles in a soft frame */
.social-mock{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:520px}
.social-mock figure{margin:0;position:relative;border-radius:12px;overflow:hidden;background:var(--surface-raised);box-shadow:0 24px 48px -24px rgba(0,0,0,.5)}
.social-mock img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}
.social-mock .tag{position:absolute;left:9px;bottom:9px;font-family:var(--ff-mono);font-size:9px;letter-spacing:.08em;color:#F3EEE3;background:rgba(10,23,17,.55);padding:3px 7px;border-radius:20px;backdrop-filter:blur(4px)}
@media(max-width:560px){.social-mock{max-width:none}}

/* sample-image strip for the AI imagery service */
.img-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.img-strip img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:12px;box-shadow:0 24px 48px -26px rgba(0,0,0,.5)}
@media(max-width:560px){.img-strip{grid-template-columns:1fr 1fr}.img-strip img:first-child{grid-column:1/-1;aspect-ratio:16/9}}

/* ============================================================
   PRICING — flagship emphasised, anchored; module price-lines, not card soup
   ============================================================ */
.flagship{display:grid;grid-template-columns:1.45fr 1fr;gap:clamp(36px,5vw,72px);background:var(--ink-green);border:1px solid rgba(169,217,198,.28);border-radius:var(--radius);padding:clamp(34px,4.5vw,60px);
  box-shadow:inset 0 1px 0 rgba(243,238,227,.08),0 36px 72px -28px rgba(14,33,24,.5)}
.scene--paper .flagship .stand,.scene--paper .flagship p{color:#C9D2CB}
.flagship .tag{font-family:var(--ff-mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--sage)}
.flagship h3{font-size:clamp(28px,3.4vw,44px);color:#F3EEE3;margin:14px 0 12px;max-width:18ch}
.flagship .fls{font-size:16px;color:#C9D2CB;max-width:50ch}
.price{font-family:var(--ff-serif);font-size:clamp(44px,5vw,64px);color:#F3EEE3;line-height:1;font-variant-numeric:tabular-nums lining-nums}
.price small{font-family:var(--ff-sans);font-size:15px;color:#8FA396}
.price-meta{font-size:13.5px;color:#8FA396;margin-top:12px;line-height:1.6}
.flagship ul{list-style:none;margin-top:22px;display:flex;flex-direction:column;gap:10px}
.flagship li{position:relative;padding-left:20px;font-size:14.5px;color:#C9D2CB}
.flagship li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;background:var(--sage)}
.price-lines{border-top:1px solid var(--line)}
.price-line{display:grid;grid-template-columns:1fr 2fr auto;gap:clamp(18px,3vw,44px);align-items:baseline;padding:24px 0;border-bottom:1px solid var(--line);transition:padding-left .3s var(--ease)}
a.price-line:hover{padding-left:14px}
.price-line .t{font-family:var(--ff-serif);font-size:clamp(21px,2.2vw,27px);color:var(--heading);transition:color .25s}
a.price-line:hover .t{color:var(--accent-strong)}
.price-line .d{font-size:14.5px;color:var(--body-c);max-width:52ch}
.price-line .p{font-family:var(--ff-serif);font-size:clamp(22px,2.4vw,30px);color:var(--heading);white-space:nowrap;font-variant-numeric:tabular-nums lining-nums;justify-self:end}
.price-line .p small{font-family:var(--ff-sans);font-size:13px;color:var(--tert)}

/* ============================================================
   FAQ — editorial accordion
   ============================================================ */
.faq{border-top:1px solid var(--line);max-width:860px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding:26px 0;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary .q{font-family:var(--ff-serif);font-size:clamp(20px,2vw,26px);color:var(--heading);line-height:1.2}
.faq summary .ind{font-family:var(--ff-mono);font-size:18px;color:var(--accent);transition:transform .3s var(--ease);flex:none}
.faq details[open] summary .ind{transform:rotate(45deg)}
.faq .a{padding:0 0 28px;max-width:60ch;color:var(--body-c);font-size:15.5px;line-height:1.7}

/* ============================================================
   FORMS (audit / contact)
   ============================================================ */
.field{display:flex;flex-direction:column;gap:8px;margin-bottom:20px}
.field label{font-size:13.5px;font-weight:600;color:var(--heading)}
.field input,.field select,.field textarea{font-family:var(--ff-sans);font-size:15.5px;color:var(--heading);background:var(--surface-raised);border:1px solid var(--line);border-radius:8px;padding:14px 16px;transition:border-color .2s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent)}
.field .hint{font-size:12.5px;color:var(--tert)}

/* ============================================================
   PAGE HERO (inner pages) — dark cinema opening, consistent nav backdrop
   ============================================================ */
.page-hero{position:relative;padding:calc(96px + clamp(72px,11vh,140px)) 0 clamp(84px,11vh,128px);background:var(--cinema);overflow:hidden}
/* bespoke contour art + ambient light on every inner-page hero.
   The art drifts gently with scroll (JS sets --hero-drift) and the light breathes. */
.page-hero::before{content:"";position:absolute;inset:-56px 0;z-index:0;pointer-events:none;
  background:var(--hero-art,url(/assets/dusk/home-hero.webp)) 100% 50%/cover no-repeat;
  transform:translateY(var(--hero-drift,0px));will-change:transform,background-position;
  animation:heroAmbient 52s ease-in-out infinite alternate}
/* ambient atmosphere — the mist/mountains drift very slowly on their own (background-position
   only, so it never fights the scroll-parallax transform). Subtle: felt, not watched. */
@keyframes heroAmbient{from{background-position:100% 50%}to{background-position:90% 45%}}
.page-hero::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:
  linear-gradient(90deg,rgba(10,23,17,.82) 0%,rgba(10,23,17,.45) 38%,rgba(10,23,17,.1) 68%,rgba(10,23,17,.3) 100%),
  linear-gradient(180deg,rgba(10,23,17,.5),rgba(10,23,17,0) 35%,rgba(10,23,17,.55) 100%),
  radial-gradient(52% 50% at 78% 30%,rgba(243,238,227,.06),transparent 62%),
  radial-gradient(60% 56% at 74% 38%,rgba(111,179,154,.10),transparent 66%)}
.page-hero>.container{position:relative;z-index:2}
/* shared contour ("wavy lines") overlay — drifts in from the right on every dark hero, fades out under the text */
.eh-tex{position:absolute;inset:0;z-index:1;pointer-events:none;background:url(/assets/contour-dark.webp) right -10% center/auto 130% no-repeat;opacity:.38;
  -webkit-mask-image:linear-gradient(90deg,transparent 34%,#000 68%);mask-image:linear-gradient(90deg,transparent 34%,#000 68%)}
@keyframes breathe{from{opacity:.75}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.page-hero::before{transform:none;animation:none}}
.page-hero h1{font-size:var(--t-h1-inner);color:var(--d-heading);max-width:27ch;margin-top:22px;line-height:1.06;text-wrap:normal}
.page-hero .stand{margin-top:26px;color:var(--d-body)}
.page-hero .hero-meta{display:flex;gap:30px;flex-wrap:wrap;margin-top:38px;font-family:var(--ff-mono);font-size:12.5px;color:var(--d-tertiary);letter-spacing:.04em}
.page-hero .hero-ctas{display:flex;gap:22px;align-items:center;flex-wrap:wrap;margin-top:40px}

/* ============================================================
   THE PATH — funnel wayfinding strip on inner pages (01 → 02 → 03)
   ============================================================ */
.path{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(243,238,227,.13);border:1px solid rgba(243,238,227,.13);border-radius:12px;overflow:hidden}
.path-step{background:var(--ink-green);padding:24px 26px;display:flex;flex-direction:column;gap:7px;transition:background .25s var(--ease)}
a.path-step:hover{background:var(--raised-dark)}
.path-step .pn{font-family:var(--ff-mono);font-size:11px;letter-spacing:.12em;color:var(--sage)}
.path-step .pt{font-family:var(--ff-serif);font-size:21px;color:var(--d-heading);line-height:1.15}
.path-step .pd{font-size:13.5px;color:var(--d-body);line-height:1.5}
.path-step .pp{font-family:var(--ff-mono);font-size:11px;color:var(--d-tertiary);margin-top:auto;padding-top:6px}
.path-step[aria-current="step"]{background:var(--raised-dark);box-shadow:inset 0 0 0 1px rgba(169,217,198,.35)}
.path-step[aria-current="step"] .pn::after{content:" · you are here";color:var(--sage-bright)}
@media(max-width:960px){.path{grid-template-columns:1fr}}

/* ============================================================
   DESTINATION FOOTER — the full stop. Giant wordmark, one CTA.
   ============================================================ */
.foot{position:relative;background:var(--cinema);color:var(--d-body);overflow:hidden;border-top:1px solid rgba(243,238,227,.08)}
.foot-cta{position:relative;padding:clamp(96px,14vh,180px) 0 clamp(40px,6vh,72px);text-align:left}
/* the warmest light of the page sits behind the final ask */
.foot::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:
  radial-gradient(64% 46% at 26% 22%,rgba(243,238,227,.065),transparent 62%),
  radial-gradient(70% 55% at 70% 80%,rgba(111,179,154,.08),transparent 65%)}
/* the horizon image is atmosphere, not a backdrop for text — calm it and lay a
   darkening scrim over it so the links and legal line stay readable */
.foot .scene-tex{opacity:.42!important}
.foot::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,23,17,.42) 0%,rgba(10,23,17,.8) 48%,rgba(10,23,17,.95) 100%)}
.foot-cta h2{font-size:clamp(40px,5.6vw,80px);color:var(--d-heading);max-width:17ch}
.foot-cta .stand{margin-top:22px;color:var(--d-body);max-width:46ch}
.foot-cta .cta-row{display:flex;gap:24px;align-items:center;flex-wrap:wrap;margin-top:42px}
.foot-word{display:flex;align-items:center;gap:.34em;font-family:var(--ff-serif);font-size:clamp(19px,2.2vw,32px);line-height:1;letter-spacing:-.01em;color:var(--d-heading);white-space:nowrap;margin:clamp(36px,5vh,64px) 0 0;opacity:.9}
.foot-word .therefore{color:var(--sage);text-shadow:0 0 38px rgba(111,179,154,.5)}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;padding:56px 0 0;margin-top:26px;border-top:1px solid rgba(243,238,227,.1)}
.foot-tag{font-size:14px;color:var(--d-body);max-width:34ch;margin-top:4px}
.foot-meta{font-size:13px;color:var(--d-tertiary);margin-top:16px}
.foot-meta a{color:var(--sage)}
.foot-col h4{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--d-tertiary);margin-bottom:14px;font-weight:500}
.foot-col a{display:block;font-size:14.5px;color:var(--d-body);padding:5px 0}
.foot-col a:hover{color:var(--d-heading)}
.foot-bottom{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:52px;padding:24px 0 36px;border-top:1px solid rgba(243,238,227,.07);font-size:12.5px;color:var(--d-tertiary)}
.foot-bottom nav{display:flex;gap:18px}

/* ============================================================
   MOTION — entrances vary by scene; reduced motion = everything visible
   ============================================================ */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal-l{opacity:0;transform:translateX(-30px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
.reveal-l.in{opacity:1;transform:none}
.reveal-wipe{clip-path:inset(-2% 100% -2% 0);transition:clip-path 1.1s var(--ease) .12s}
.reveal-wipe.in,.scene-in .reveal-wipe{clip-path:inset(-2% 0 -2% 0)}
.stagger>*{opacity:0;transform:translateY(22px)}
.stagger.in>*{opacity:1;transform:none;transition:opacity .75s var(--ease),transform .75s var(--ease)}
/* lists enter from the side — index rows, price lines, path steps */
.stagger--l>*{transform:translateX(-28px)}
/* artifact panels settle like objects */
.artifact.reveal{transform:translateY(34px) scale(.985);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.artifact.reveal.in{transform:none}
/* stat brackets draw around their numbers once visible */
.reveal .stat-b::before,.reveal .stat-b::after,.stat-row.reveal .stat-b::before,.stat-row.reveal .stat-b::after{transform:scaleY(0);transition:transform .8s var(--ease) .25s}
.reveal.in .stat-b::before,.reveal.in .stat-b::after{transform:scaleY(1)}
/* pull-quote marginalia rule draws downward */
.reveal-wipe.pull::before{transform:scaleY(0);transform-origin:top;transition:transform .9s var(--ease) .3s}
.reveal-wipe.pull.in::before,.scene-in .reveal-wipe.pull::before{transform:scaleY(1)}
/* inner page-hero entrance — load-time choreography, no JS dependency */
@keyframes pageRise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.page-hero .crest,.page-hero .kicker,.page-hero h1,.page-hero .stand,.page-hero .hero-meta,.page-hero .hero-ctas,.page-hero form{animation:pageRise .85s var(--ease) both}
.page-hero h1{animation-delay:.08s}
.page-hero .stand{animation-delay:.18s}
.page-hero .hero-meta{animation-delay:.3s}
.page-hero .hero-ctas,.page-hero form{animation-delay:.4s}
/* smooth FAQ expand where the browser supports it */
@supports (interpolate-size: allow-keywords){
  :root{interpolate-size:allow-keywords}
  .faq details::details-content{block-size:0;overflow:hidden;transition:block-size .45s var(--ease),content-visibility .45s allow-discrete}
  .faq details[open]::details-content{block-size:auto}
}

@media(prefers-reduced-motion:reduce){
  .reveal,.reveal-l,.reveal-wipe,.stagger>*,.artifact.reveal{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important;animation:none!important}
  .reveal .stat-b::before,.reveal .stat-b::after{transform:none!important;transition:none!important}
  .reveal-wipe.pull::before{transform:none!important}
  .page-hero .crest,.page-hero .kicker,.page-hero h1,.page-hero .stand,.page-hero .hero-meta,.page-hero .hero-ctas,.page-hero form{animation:none!important}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:960px){
  /* full-screen overlay menu — covers the page, logo + X stay on top */
  .nav-toggle{display:flex;position:relative;z-index:60}
  .lockup{position:relative;z-index:60}
  .nav.open{background:var(--cinema)}
  .nav-links{position:fixed;inset:0;height:100dvh;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;background:var(--cinema);padding:108px var(--gutter) 40px;transform:translateY(-8px);opacity:0;pointer-events:none;transition:opacity .35s var(--ease),transform .35s var(--ease);overflow-y:auto;z-index:55}
  .nav.open .nav-links{transform:none;opacity:1;pointer-events:auto}
  .nav-links a{width:100%;padding:18px 2px;font-family:var(--ff-serif);font-size:clamp(26px,7vw,34px);color:var(--d-heading);border-bottom:1px solid rgba(243,238,227,.08)}
  .nav-cta{margin-top:28px;width:100%;text-align:center;font-family:var(--ff-sans);font-size:16px;padding:18px;border-radius:6px;background:var(--sage);color:#0A1711!important;border:1px solid var(--sage)}
  /* hamburger morphs into an X */
  .nav.open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav.open .nav-toggle span:nth-child(2){opacity:0}
  .nav.open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .split,.split--rev{grid-template-columns:1fr;gap:44px}
  .offset{margin-left:0}
  .index-row{grid-template-columns:52px 1fr;grid-template-rows:auto auto;row-gap:8px}
  .index-row .d{grid-column:2}
  .index-row .aux{grid-column:2;justify-self:start}
  .flagship{grid-template-columns:1fr}
  .price-line{grid-template-columns:1fr auto;row-gap:6px}
  .price-line .d{grid-column:1 / -1}
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-word{white-space:normal}
  .scene-num{font-size:clamp(96px,22vw,150px)}
}
@media(max-width:560px){
  .stat-row{display:flex;flex-wrap:wrap;gap:22px}
  .foot-grid{grid-template-columns:1fr}
}