/* AGM — reference viewport: 1080 × 676. Source DPR is unknown.
   See _yank/IMPLEMENTATION.md for measurements and deliberate AGM substitutions. */

:root {
  --black: #000;
  --ink: #111;
  --ink-2: #4a4a4a;
  --ink-3: #6e6e6e;   /* 5:1 on the paper (the old #7a7a7a missed AA for the small grey copy) */
  --line: #dedede;
  --paper: #fdfdfd;
  --red: #eb4528;
  --red-deep: #d13a1f;
  --amber: #ff9a1f;
  --yellow: #ffe066;
  --green: #35e07a;
  --pink: #ff5fd6;
  --cyan: #7fe7ff;
  --zinc-50: #fafafa;    /* inner-page band tint */
  --zinc-900: #18181b;   /* dark badge (how it works) */

  --sans: "Mona Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --mono: "Martian Mono", "SF Mono", Menlo, Consolas, monospace;

  --ease-out: cubic-bezier(.22, 1, .36, 1);     /* power4.out — market heading, FITTED RMSE .011 */
  --ease-circ: cubic-bezier(.075, .82, .165, 1); /* circ.out — reveals, FITTED */
  --ease-expo: cubic-bezier(.19, 1, .22, 1);     /* expo.out — tablet heading/pills, FITTED */
  --ease-back: cubic-bezier(.34, 1.56, .64, 1);  /* back.out — step title scale, FITTED */
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --ease-quint: cubic-bezier(.16, 1, .3, 1);    /* settles without a visible tail: step hand-offs, cards */
}

*, *::before, *::after { box-sizing: border-box; }
/* 1.111vw is the 1440 design's 16px; the floor is the phones' 13px (reference.css): with the old 10px floor every
   rem-sized label on a tablet (701–1170px wide) came out at 6–7.5px */
html { scroll-behavior: auto; font-size: clamp(13px, 1.111111vw, 20px); }
body {
  margin: 0; font-family: var(--sans); font-size: 16px; line-height: 1.5; color: var(--ink);
  background: var(--paper); -webkit-font-smoothing: antialiased; overflow-x: clip;
}
body.theme-dark { color: #fff; }   /* the dark scenes paint their own black: a fast fling that outruns raster shows the root background, and that should be the paper most of the page is made of */
@media (pointer: fine) { html { overscroll-behavior-y: none; } }   /* no rubber band revealing it above the dark hero */
@media (pointer: coarse) { body.theme-dark { background: var(--black); } }   /* phones keep their pull-down bounce, and it should show black above the dark hero, not paper */
img, video, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
h1, h2, h3, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
::selection { background: var(--red); color: #fff; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
:focus:not(:focus-visible) { outline: none; }
.skip-link { position: fixed; left: 1rem; top: .75rem; z-index: 200; padding: .7rem 1rem; background: var(--ink); color: #fff; font-family: var(--mono); font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; transform: translateY(-160%); transition: transform .2s var(--ease-out); }
.skip-link:focus-visible { transform: none; }
main:focus-visible { outline: none; }
.u-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- type (h2 = 56px @1440 → 3.9vw, line pitch 1.0, measured on 5 headings) ---------- */
.h2 { font-size: clamp(2.1rem, 4.075vw, 5rem); line-height: .96; letter-spacing: -.045em; font-weight: 500; text-align: center; text-wrap: balance; }
.sub { font-size: 1.05rem; line-height: 1.45; color: var(--ink-3); text-align: center; letter-spacing: -.005em; text-wrap: pretty; }
.eyebrow { display: block; font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); text-align: center; font-weight: 500; }
.dark .sub { color: rgba(255, 255, 255, .6); }

/* ---------- mono buttons (171×48 @1440 measured: hero + manifesto) ---------- */
.btn-mono {
  display: inline-flex; align-items: center; justify-content: center; height: 3rem; padding: 0 2.3rem;
  font-family: var(--mono); font-size: .75rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
  border: 0; cursor: pointer; touch-action: manipulation; transition: transform .25s var(--ease-out), background-color .25s, box-shadow .25s;
}
.btn-mono:hover { transform: translateY(-1px); }
.btn-mono:active, .btn:active, .nav_cta:active, .cookies_btn:active { transform: translateY(0) scale(.98); transition-duration: .08s; }
.btn-mono.is-red { background: var(--red); color: #fff; box-shadow: 0 14px 34px -12px rgba(235, 69, 40, .75), 0 0 0 1px rgba(235, 69, 40, .2); }
.btn-mono.is-red:hover { background: var(--red-deep); box-shadow: 0 18px 40px -12px rgba(235, 69, 40, .85), 0 0 0 1px rgba(235, 69, 40, .25); }
.btn-mono.is-glass { background: #fff; color: var(--ink); box-shadow: 0 0 60px 14px rgba(255, 214, 160, .28); }
.btn-mono.is-glass:hover { background: #fff; box-shadow: 0 0 70px 18px rgba(255, 214, 160, .38); }
.btn-mono.is-dark { background: var(--ink); color: #fff; }
.btn-bracket {
  position: relative; display: inline-block; padding: .55rem 1.1rem; font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); font-weight: 500;
}
.btn-bracket i { position: absolute; width: .55rem; height: .55rem; border: 1px solid var(--ink-2); transition: transform .3s var(--ease-out); }
.btn-bracket i:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.btn-bracket i:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.btn-bracket i:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.btn-bracket i:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; }
.btn-bracket:hover i:nth-child(1) { transform: translate(-3px, -3px); }
.btn-bracket:hover i:nth-child(2) { transform: translate(3px, -3px); }
.btn-bracket:hover i:nth-child(3) { transform: translate(-3px, 3px); }
.btn-bracket:hover i:nth-child(4) { transform: translate(3px, 3px); }

/* ---------- connector lines (1px, --line; crossbar 40px; wide cross 615px) ---------- */
.vline { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.vline i { display: block; width: 1px; background: var(--line); transform-origin: top; }
.vline b { display: block; height: 1px; width: 2.5rem; background: var(--line); }
.vline.is-lead i { height: 15.5rem; }
.vline.is-lead::after, .vline.is-tail::after { content: ""; display: block; width: 2.5rem; height: 1px; background: var(--line); }
.vline.is-short i { height: 2.2rem; }
.vline.has-bar::after { content: ""; display: block; width: 2.5rem; height: 1px; background: var(--line); }
.vline.is-tiny { height: 1.25rem; }
.vline.is-tiny::before { content: ""; display: block; width: 1px; height: 100%; background: var(--line); }
.vline.is-tail i { height: 17.5rem; }
.vline.is-mid i { height: 9rem; }
.vline.is-cross i { height: 10.2rem; }
.vline.is-cross b { width: min(42.7vw, 38.5rem); }

/* ==========================================================================
   NAV — wordmark 20px from left; mono 12px links; red 124×41 button 13px from right
   ========================================================================== */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 100; display: flex; justify-content: space-between; align-items: center;
  height: 4rem; padding: 0 .8rem 0 1.25rem; color: #fff; transition: color .4s;
}
.nav.on-light { color: var(--ink); }
/* over the light sections a soft paper scrim fades in behind the row, so the links stay legible over photos and cards
   scrolling underneath (over the dark scenes the nav is light on black and needs none) */
.nav::before { content: ""; position: absolute; inset: 0 0 -1.75rem; z-index: -1; pointer-events: none; background: linear-gradient(rgba(253, 253, 253, .94), rgba(253, 253, 253, .7) 50%, rgba(253, 253, 253, 0)); opacity: 0; transition: opacity .4s; }
.nav.on-light::before { opacity: 1; }
.nav_brand { display: inline-flex; align-items: center; gap: .45rem; font-size: 2.2rem; letter-spacing: -.04em; font-weight: 600; opacity: .9; }
/* the AGM monogram, drawn in currentColor through its alpha so it flips light/dark with the rest of the nav */
.nav_logo { display: block; width: 2.75rem; height: 2.75rem; background: currentColor; -webkit-mask: url(/images/logo-icon.png) center / contain no-repeat; mask: url(/images/logo-icon.png) center / contain no-repeat; }
.nav_links { display: flex; align-items: center; gap: 2rem; }
.nav_link { font-family: var(--mono); font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; opacity: .95; white-space: nowrap; transition: opacity .2s; padding: .75rem .35rem; margin: 0 -.35rem; } /* padding = a finger-sized hit area; the margins cancel it so the spacing is unchanged */
.nav_link:hover { opacity: .6; }
.nav_cta { display: inline-flex; align-items: center; white-space: nowrap; height: 2.55rem; padding: 0 1.1rem; background: var(--red); color: #fff; font-family: var(--mono); font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; transition: background-color .2s; }
.nav_cta:hover { background: var(--red-deep); }
@media (max-width: 640px) { .nav { padding: 0 .75rem 0 1rem; } .nav_link--faq { display: none; } .nav_links { gap: 1rem; } .nav_link { font-size: .62rem; } .nav_cta { height: 2.2rem; padding: 0 .8rem; font-size: .62rem; } .nav_brand { font-size: 1.3rem; } }

/* ==========================================================================
   CINE — pinned hero (600vh)
   ========================================================================== */
.cine { position: relative; height: 600vh; background: var(--black); }
.cine_stage { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden; background: var(--black); }
.cine_photo { position: absolute; inset: 0; transform-origin: 53% 47%; will-change: transform, opacity; opacity: calc(var(--in, 1) * var(--out, 1)); }
.cine_photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.cine_film { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .6s; }
.cine_photo.has-film .cine_film { opacity: 1; }
.cine_photo.has-film img { opacity: 0; }
.cine_photo.has-film .cine_photo-grade { opacity: .35; }
.cine_photo.has-film .cine_photo-vignette { opacity: .7; }
.cine_photo-grade { position: absolute; inset: 0; background: radial-gradient(ellipse 60% 55% at 53% 47%, rgba(255, 170, 40, .45), rgba(190, 60, 0, .35) 45%, rgba(20, 5, 0, .75) 100%); mix-blend-mode: multiply; }
.cine_photo-vignette { position: absolute; inset: 0; background: radial-gradient(ellipse 70% 70% at 50% 50%, transparent 40%, rgba(0, 0, 0, .75) 100%), linear-gradient(90deg, rgba(0, 0, 0, .55), transparent 45%); }
/* the pupil: a soft black disc pinned to the eye inside the photo, so the push-in scales it with the footage and the
   iris texture sinks into black as the frame is swallowed (sized against the source: the dark of the eye is ~250px
   across on the last frame) */
.cine_pupil { position: absolute; left: 50%; top: 50%; width: 420px; height: 420px; margin: -210px 0 0 -210px; border-radius: 50%; background: radial-gradient(circle closest-side, #000 0, #000 32%, rgba(0, 0, 0, .8) 55%, rgba(0, 0, 0, .35) 78%, transparent 100%); opacity: 0; pointer-events: none; }
/* the ember: lights in the eye's reflection as a warm pinpoint and grows into the flash; a long soft tail so it never
   reads as a hard-edged flare against the black */
/* sized to the visible disc: the gradient used to end 28% along the farthest-corner ray of a 240vmax box (47.5vmax),
   so 84% of that layer was transparent texture. Same disc, stops rescaled ×3.5355 onto a 96vmax closest-side ray */
.cine_bloom { position: absolute; left: 50%; top: 50%; width: 96vmax; height: 96vmax; margin: -48vmax 0 0 -48vmax; border-radius: 50%; background: radial-gradient(circle closest-side, #fff 0, #fff3c4 5.66%, #ffd36b 15.91%, #ff9a1f 28.28%, rgba(220, 60, 0, .55) 45.96%, rgba(120, 20, 0, .22) 67.18%, transparent 98.99%); opacity: 0; transform: scale(.06); will-change: transform, opacity; pointer-events: none; }
.cine_canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; z-index: 6; }
.cine_white { position: absolute; inset: 0; background: var(--paper); opacity: 0; pointer-events: none; }

/* copy: left 16.2%, top 31%; title 56px/.98; sub 22px/1.3 max 30rem; button 52px below */
.cine_copy { position: absolute; left: 16.2%; top: 31%; max-width: 41rem; color: #fff; z-index: 3; }
.cine_title { font-size: clamp(2.4rem, 3.9vw, 3.5rem); line-height: .98; letter-spacing: -.03em; font-weight: 500; margin-bottom: 1.25rem; will-change: opacity, filter; }
.cine_sub { max-width: 30rem; font-size: clamp(1rem, 1.4vw, 1.25rem); line-height: 1.32; letter-spacing: -.01em; color: rgba(255, 255, 255, .88); margin-bottom: 3.25rem; will-change: opacity, filter; }
.cine_copy .btn-mono { will-change: opacity, filter; }
/* the intro (--in*) and the scroll-out (--out*) are separate tweens combined here, see initCine */
.cine_title, .cine_sub, .cine_copy .btn-mono { opacity: calc(var(--in, 1) * var(--out, 1)); filter: blur(calc(var(--in-blur, 0px) + var(--out-blur, 0px))); translate: 0 var(--in-y, 0px); }

/* the stage pieces that appear at the white snap rest at opacity .001, not 0: invisible, but already rastered (and their
   shaders compiled) while the hero plays, so the snap is not the frame that pays for them. Fully transparent they were
   first painted in that frame, a 60–100 ms hitch on a first visit */
/* tablet stage: heading top 58px, tablet 811×523 at y=187, pills at 747, caption at 824 (all @1440×900) */
.cine_tablet-wrap { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: max(6.4vh, 5.4rem); z-index: 4; pointer-events: none; }
.cine_heading { font-size: clamp(2rem, 4.075vw, 5rem); line-height: .94; letter-spacing: -.045em; font-weight: 500; text-align: center; color: var(--ink); opacity: .001; margin-bottom: 3.4vh; will-change: opacity, transform; }
.cine_caption { font-size: 1.125rem; line-height: 1.5; color: var(--ink-3); text-align: center; margin-top: 4.2vh; opacity: .001; }

/* the slab and the pills only take the pointer once the stage has gone light: before that they are invisible and
   sit above the hero copy (z-index 4 > 3), so they would swallow clicks on the title and the button */
.tablet_persp { perspective: 1400px; perspective-origin: 50% 50%; pointer-events: none; }
.cine_stage.is-light .tablet_persp { pointer-events: auto; }
.tablet { position: relative; width: min(56.3vw, 58.1vh * 1.55); aspect-ratio: 1.55; border-radius: 1.65rem; background: #080808; padding: 1.35rem; box-shadow: 0 1px 1px 2px #777, inset 0 0 0 2px #252525; opacity: .001; transform: scale(1.5); will-change: transform, opacity; }
.tablet_screen { position: relative; width: 100%; height: 100%; border-radius: .7rem; overflow: hidden; background: #f4f4f5; font-size: clamp(6px, .72vw, 12px); opacity: .001; }
/* glass: a faint diagonal reflection band across bezel and screen that slides with the pointer tilt (--gx/--gy/--go set
   per frame). Plain backgrounds on one box: a transformed child under a rounded overflow clip cost a 40–60 ms GPU
   raster the first time the tablet appeared */
.tablet_glare { position: absolute; inset: 0; border-radius: 1.65rem; pointer-events: none; z-index: 2; opacity: var(--go, .5);
  background:
    radial-gradient(60% 45% at calc(18% + var(--gx, 0%) * .35) calc(8% + var(--gy, 0%) * .5), rgba(255, 255, 255, .14), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, .06), transparent 30%),
    linear-gradient(112deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, .13) 45%, rgba(255, 255, 255, .2) 48.5%, rgba(255, 255, 255, .06) 52%, rgba(255, 255, 255, 0) 59%) calc(50% - var(--gx, 0%) * 1.6) calc(50% - var(--gy, 0%) * 1.6) / 160% 180% no-repeat; }
.scr { position: absolute; inset: 0; padding: 1.2em; opacity: .001; transition: opacity .25s var(--ease-io); pointer-events: none; }
.scr.is-active { opacity: 1; pointer-events: auto; }
.cine_stage:not(.is-light) .scr.is-active { pointer-events: none; }
/* screens: Higgsfield renders (public/images/tablet, 3:2) stretched to the slab's 1.55 — a 3% squash nobody can see, and it
   keeps the overlay cards' % coordinates exact. 1em = .72vw (10.4px @1440) */
.scr.scr-img { padding: 0; }
.scr-img > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; display: block; }
.scr-overlay { position: absolute; left: var(--l); top: var(--t); width: var(--w); height: var(--h); }
.scr-card { border-radius: 1em; padding: 1.3em; overflow: hidden; }
.scr-card.is-dark { background: #212833; color: #fff; }           /* the render's empty dark card */
.scr-card.is-light { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .05); }
.scr-h { display: block; font-size: 1.7em; letter-spacing: -.02em; }
.scr-small { display: block; font-size: .95em; opacity: .7; }
/* home: the chat card on the render's empty light slot */
.scr-home_chat { display: flex; flex-direction: column; padding: 1em 1.3em; }
.scr-home_chat .scr-chat { margin-top: auto; }
.scr-doc { display: flex; align-items: center; gap: .6em; font-size: .9em; margin-bottom: .6em; }
.scr-doc i { width: 2.4em; height: 2.4em; border-radius: .5em; background: linear-gradient(135deg, #d6b8a0, #6b4a35); }
.scr-doc span { display: flex; flex-direction: column; } .scr-doc small { opacity: .55; font-size: .85em; }
.scr-chat { display: flex; flex-direction: column; gap: .45em; }
.scr-bubble { max-width: 90%; padding: .55em .9em; border-radius: 1.1em; font-size: .95em; line-height: 1.3; }
.scr-bubble.is-out { align-self: flex-start; background: #f2f2f3; color: var(--ink); border-bottom-left-radius: .3em; }
.scr-bubble.is-in { align-self: flex-end; background: #111; color: #fff; border-bottom-right-radius: .3em; }
/* home: the pipeline card the canvas ring lands on (the SVG is the landed ring, see initCine) */
.scr-home_pipe { display: flex; align-items: center; gap: 1em; padding: 1em 1.4em; }
.scr-home_pipe-txt { display: flex; flex-direction: column; flex: 1; min-width: 0; align-self: stretch; }
.scr-legend { display: flex; flex-wrap: wrap; gap: .4em 1em; margin-top: auto; font-size: .85em; opacity: .7; }
.scr-legend span { display: inline-flex; align-items: center; gap: .4em; }
.scr-legend i { width: .6em; height: .6em; border-radius: 50%; }
.scr-legend .g { background: #35e07a; color: #35e07a; } .scr-legend .y { background: #ffe94d; color: #ffe94d; } .scr-legend .p { background: #ff5fd6; color: #ff5fd6; }
.scr-ring { position: relative; flex: 0 0 auto; height: 100%; aspect-ratio: 1; }
.scr-ring svg { width: 100%; height: 100%; display: block; }

/* tabs — bar 477×39 @1440, sliding highlight (Δ77px in 144ms measured) */
.tabs { position: relative; display: inline-flex; gap: .15rem; padding: .25rem; margin-top: 4.3vh; border-radius: 999px; background: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, .09), 0 0 0 1px rgba(0, 0, 0, .03); opacity: .001; pointer-events: none; will-change: opacity, transform; }
.cine_stage.is-light .tabs { pointer-events: auto; }
.tabs_glow { position: absolute; top: .25rem; bottom: .25rem; left: 0; width: 0; border-radius: 999px; background: var(--pink); box-shadow: 0 0 26px rgba(255, 95, 214, .6); transition: transform .15s ease, width .15s ease, background-color .2s, box-shadow .2s; }
.tabs_pill { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: .4rem; height: 2rem; padding: 0 .9rem; border: 0; border-radius: 999px; background: transparent; font-size: .95rem; color: var(--ink); cursor: pointer; transition: color .2s; }
.tabs_pill svg { width: .9rem; height: .9rem; flex: 0 0 auto; }
.tabs_pill.is-active { color: #fff; }
.tabs_pill:not(.is-active):hover { color: var(--ink-3); }
.tabs[data-active="home"] .tabs_glow { background: var(--pink); box-shadow: 0 0 26px rgba(255, 95, 214, .6); }
.tabs[data-active="services"] .tabs_glow { background: var(--red); box-shadow: 0 0 26px rgba(235, 69, 40, .55); }
.tabs[data-active="plan"] .tabs_glow { background: #22c55e; box-shadow: 0 0 26px rgba(34, 197, 94, .55); }
.tabs[data-active="results"] .tabs_glow { background: var(--amber); box-shadow: 0 0 26px rgba(255, 154, 31, .55); }
/* static hero (reduced motion / no GSAP): photo + copy as the first screen, the tablet section after it in the flow */
.cine.is-static { height: auto; }
.cine.is-static .cine_stage { position: relative; height: auto; overflow: visible; }
.cine.is-static .cine_photo { position: relative; height: 100vh; height: 100dvh; }
.cine.is-static .cine_copy { top: 31vh; bottom: auto; }
@media (max-width: 900px) { .cine.is-static .cine_copy { top: 48vh; } }
.cine.is-static .cine_bloom, .cine.is-static .cine_canvas, .cine.is-static .cine_white, .cine.is-static .cine_pupil { display: none; }
.cine.is-static .cine_tablet-wrap { position: relative; inset: auto; padding: 6rem 1.5rem 5rem; background: var(--paper); }
.cine.is-static .tablet_persp, .cine.is-static .tabs, .cine.is-static .scr.is-active { pointer-events: auto; }   /* the stage never turns .is-light here (the nav would read the photo as light) */
@media (max-width: 900px) {
  .cine { height: 520vh; }
  .cine_copy { left: 1.5rem; right: 1.5rem; top: auto; bottom: 14%; max-width: none; }
  .cine_tablet-wrap { padding-top: 5rem; }
  .cine_heading { font-size: 1.75rem; padding: 0 1rem; }
  .cine_heading br { display: none; }
  .tablet { width: min(92vw, 60vh * 1.55); }
  .tabs { max-width: calc(100vw - 2rem); }
  .tabs_pill { height: 1.7rem; padding: 0 .45rem; gap: .25rem; font-size: .68rem; white-space: nowrap; }
  .tabs_pill svg { width: .65rem; height: .65rem; }
  .cine_caption { font-size: .9rem; padding: 0 1.5rem; }
}
@media (max-width: 640px) { .h2 br, .sub br { display: none; } .h2 { padding: 0 .5rem; } }

/* ==========================================================================
   HIW — vertical timeline. Card 584×281 @1440 (40.5vw, aspect 2.08). Step title 28px.
   ========================================================================== */
.light { background: var(--paper); color: var(--ink); }
.dark { background: var(--black); color: #fff; }
.hiw { position: relative; padding: 0 1.5rem 0; display: flex; flex-direction: column; align-items: center; }
.hiw_head { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 2.6rem 0 1.5rem; }
/* every step keeps the same layout box whether it is open or not: the hand-off is a transform on the slide (scale +
   fade about its centre), so nothing above the reader reflows and the page never has to compensate the scroll. The
   old open/close resized the card rows, and the scroll-anchoring correction stalled the page and pulled it back up
   by up to 140px on every step */
.hiw_step { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; width: 100%; padding-top: .7rem; }
.hiw_slide { display: flex; flex-direction: column; align-items: center; width: 100%; transform: scale(.62); opacity: .34; transform-origin: 50% 50%; transition: transform .8s var(--ease-quint), opacity .6s var(--ease-quint); will-change: transform; }
.hiw_step.is-active .hiw_slide { transform: none; opacity: 1; }
.hiw_title { max-width: 36rem; font-size: 1.85rem; letter-spacing: -.03em; font-weight: 500; line-height: 1.15; text-wrap: balance; }
.hiw_sub { max-width: 34rem; font-size: 1rem; line-height: 1.45; color: var(--ink-3); margin: .85rem 0 2rem; text-wrap: pretty; opacity: 0; transition: opacity .35s ease-out; }
.hiw_step.is-active .hiw_sub { opacity: 1; transition-delay: .15s; }
.hiw_card-row { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; }
/* "(n) —" markers 24px off the card edges; they slide out a little as the step opens */
.hiw_marker { position: absolute; top: 50%; display: inline-flex; align-items: center; gap: .4rem; opacity: 0; transition: transform .8s var(--ease-quint), opacity .5s var(--ease-quint); }
.hiw_marker[data-marker="l"] { right: calc(50% + 19.85vw + 1.5rem); transform: translate(1.5rem, -50%); }
.hiw_marker[data-marker="r"] { left: calc(50% + 19.85vw + 1.5rem); transform: translate(-1.5rem, -50%); }
.hiw_step.is-active .hiw_marker { opacity: 1; transform: translate(0, -50%); }
.hiw_marker b { display: inline-flex; align-items: center; justify-content: center; width: 1.45rem; height: 1.45rem; border: 1px solid rgba(235, 69, 40, .55); border-radius: .3rem; font-family: var(--mono); font-size: .62rem; font-weight: 500; color: var(--red); background: var(--paper); font-variant-numeric: tabular-nums; }
.hiw_marker i { display: block; width: 1.6rem; height: 1px; background: var(--red); opacity: .5; }
.hiw_card { position: relative; width: 39.7vw; aspect-ratio: 2.03; border-radius: .8rem; overflow: hidden; background: var(--paper); box-shadow: 0 1px 2px rgba(20, 10, 5, .06), 0 24px 48px -18px rgba(40, 18, 8, .22); font-size: clamp(6px, .6vw, 10px); }
/* card art: Higgsfield renders (public/images/hiw, 21:9) cover the 2.08 card; the flow diagram sits in its own red so it
   letterboxes invisibly instead of losing its outer tiles */
.hc-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.hiw_card.is-website { background: #050605; }
.hiw_card.is-followup { background: #f36a12; }
.hiw_card.is-ads { background: #1b1f26; }
.hiw_card.is-oneplace { background: #6b0f02; }
.hiw_card.is-oneplace .hc-photo { object-fit: contain; }
@media (max-width: 640px) { .hiw_marker { display: none; } .hiw_card { font-size: 7px; } .hiw_title { font-size: 1.35rem; } .hiw_slide { transform: scale(.82); } }

/* ==========================================================================
   MARKET — floating cards, parallax ratio .83–.95 (measured), heading rises 50px power4.out
   ========================================================================== */
.market { position: relative; min-height: 145vh; padding: 0 1.5rem; overflow: hidden; }
.market_copy { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 1.25rem; padding-top: 62vh; }
.market_copy .h2 { max-width: 30rem; }
.market_cards { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.mcard { position: absolute; left: var(--x); top: var(--y); width: var(--w); transform: rotate(var(--r)); display: flex; flex-direction: column; align-items: center; gap: .5rem; will-change: transform, opacity; }
.mcard_img { width: 100%; height: var(--h, 8rem); border-radius: 1rem; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.mcard_img img { width: 100%; height: 100%; object-fit: cover; }
.mcard_img.is-amber img { filter: sepia(.9) saturate(3) contrast(1.15) brightness(.9); }
.mcard_img.is-dark { background: #111; }
.mcard_img.is-dark img { filter: saturate(1.3) contrast(1.1); }
.mcard_img.is-light { background: #f4f4f5; }
.mcard_img.is-teal img { filter: hue-rotate(160deg) saturate(1.6) contrast(1.15); }
.mcard span { font-size: .68rem; color: var(--ink-2); text-align: center; letter-spacing: 0; }
@media (max-width: 900px) { .market { min-height: 130vh; } .market_copy { padding-top: 52vh; } .mcard { width: calc(var(--w) * .5); opacity: .85; } .mcard_img { height: calc(var(--h, 8rem) * .5); } .mcard span { display: none; } }

/* ==========================================================================
   WHOLE — tile grid. Block 1380×400 @1440; rows 1:1 idle, 2:1 hovered; open tile flex 3.6
   ========================================================================== */
.whole { position: relative; padding: 0 1.5rem 0; display: flex; flex-direction: column; align-items: center; }
.whole_head { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; padding: 3.6rem 0 4.5rem; }
.whole .vline.is-short { margin-bottom: 1.6rem; }
.whole .vline.is-short:last-child { margin: 2rem 0 0; }
.tiles { width: 100%; max-width: 86.25rem; height: clamp(14rem, 27.8vw, 25rem); display: flex; flex-direction: column; gap: .8rem; }
.tiles_row { flex: 1; min-height: 0; display: flex; gap: .8rem; transition: flex .45s var(--ease-out); }
.tiles_row.is-active { flex: 2; }
.tile { position: relative; flex: 1; min-width: 0; display: flex; align-items: stretch; cursor: pointer; transition: flex .45s var(--ease-out); }
.tile.is-open { flex: 3.6; }
.tile_box { position: relative; flex: 1; min-width: 0; border-radius: .7rem; overflow: hidden; background: #111; }
.tile_box img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); transition: filter .45s, transform .6s var(--ease-out); }
.tile.is-open .tile_box img { filter: grayscale(0) saturate(1.15); transform: scale(1.03); }
.tile_box::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 45%, rgba(0, 0, 0, .65)); }
/* Phosphor (bold) icons, inline SVG */
.tile_icon { position: absolute; top: .75rem; left: 50%; transform: translateX(-50%); z-index: 1; display: block; width: 1.05rem; height: 1.05rem; color: #fff; opacity: .9; }
.tile_icon svg { width: 100%; height: 100%; }
.tile_box span { position: absolute; left: 0; right: 0; bottom: .8rem; z-index: 1; text-align: center; color: #fff; font-size: .78rem; line-height: 1.25; padding: 0 .4rem; }
.tile_side { flex: 0 0 0; min-width: 0; display: flex; flex-direction: column; justify-content: center; overflow: hidden; opacity: 0; transition: flex .45s var(--ease-out), opacity .3s .1s; }
.tile_side em { display: block; padding: 1rem .5rem; font-style: normal; font-size: .8rem; line-height: 1.3; color: var(--ink-2); text-align: center; white-space: normal; }
.tile_side.is-left em + em { border-top: 1px solid var(--line); }
.tile.is-open .tile_side { flex: 0 0 26%; opacity: 1; }
.tile.is-open .tile_box span { font-size: .85rem; }
.tiles_row .tile:first-child .tile_side.is-left, .tiles_row .tile:last-child .tile_side.is-right { display: none; }
.tiles_row .tile:first-child.is-open .tile_side.is-right, .tiles_row .tile:last-child.is-open .tile_side.is-left { flex-basis: 40%; }
@media (max-width: 900px) { .tile_side { display: none !important; } .tile_box span { font-size: .65rem; } .tiles { height: 14rem; } .tile.is-open { flex: 2; } }
@media (max-width: 640px) { .tiles { height: auto; } .tiles_row { flex-wrap: wrap; flex: none !important; } .tile { flex: 1 1 30%; height: 6rem; } .tile.is-open { flex: 1 1 30%; } }

/* ==========================================================================
   TICKER — bracket button, rule (80%), two static mono rows 46px, rule, line
   ========================================================================== */
.ticker { position: relative; display: flex; flex-direction: column; align-items: center; padding: 1.4rem 0 0; overflow: hidden; }
.ticker_rule { width: min(80rem, 80vw); height: 1px; background: var(--line); }
.ticker_rows { width: 100%; padding: 3.2rem 0 3rem; display: flex; flex-direction: column; gap: 1rem; will-change: transform, opacity; }
.ticker_row { display: flex; gap: 1.6rem; width: max-content; font-family: var(--mono); font-size: clamp(1.4rem, 3.2vw, 2.9rem); font-weight: 400; letter-spacing: -.01em; text-transform: uppercase; white-space: nowrap; line-height: 1; will-change: transform; }
.t-a { color: var(--ink); } .t-o { color: #e8622a; } .t-g { color: #2fbf71; } .t-p { color: var(--pink); }

/* ==========================================================================
   BACKED — two columns, rows 100px pitch, 69px squares
   ========================================================================== */
.backed { padding: 2.5rem 1.5rem 5rem; display: flex; flex-direction: column; align-items: center; }
.backed_head { display: flex; flex-direction: column; align-items: center; gap: 1.1rem; margin-bottom: 3.2rem; }
.backed_cols { position: relative; display: grid; grid-template-columns: 1fr 1px 1fr; gap: 0 1.5rem; width: 100%; max-width: 62rem; }
.backed_divider { background: var(--line); }
.backed_col { display: flex; flex-direction: column; }
.backed_col li { display: flex; gap: 1.1rem; align-items: center; height: 6.25rem; padding: 0; border-top: 1px solid var(--line); }
.backed_col li:first-child { border-top: 0; }
.backed_logo { flex-shrink: 0; width: 4.3rem; height: 4.3rem; border-radius: .35rem; background: #fff; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; padding: .7rem; }
.backed_logo img { max-height: 100%; width: auto; max-width: 100%; }
.backed_logo.is-text { font-weight: 600; letter-spacing: -.03em; font-size: 1.1rem; }
.backed_col b { display: block; font-weight: 500; font-size: 1.05rem; letter-spacing: -.01em; margin-bottom: .15rem; }
.backed_col p { font-size: .82rem; line-height: 1.35; color: var(--ink-3); }
@media (max-width: 720px) { .backed_cols { grid-template-columns: 1fr; } .backed_divider { display: none; } }

/* ==========================================================================
   QUOTES — bracket shutter: frame 573×497 @1440, closes to 80px, reopens; side lines stop 47px short
   ========================================================================== */
.quotes { position: relative; padding: 3rem 0 0; display: flex; flex-direction: column; align-items: center; overflow-x: clip; } /* the dome canvas is painted wider than the viewport; clip (not hidden) keeps the sticky dome working */
.quotes_stage { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 31rem; }
.quotes_side { position: absolute; top: 50%; height: 1px; background: var(--line); }
.quotes_side.is-left { left: 0; right: calc(50% + 17.9rem + 2.9rem); }
.quotes_side.is-right { right: 0; left: calc(50% + 17.9rem + 2.9rem); }
.quotes_frame { position: relative; width: 35.8rem; max-width: calc(100vw - 3rem); height: 100%; will-change: width; }
.corner { position: absolute; width: .8rem; height: .8rem; border: 1px solid var(--ink-2); }
.corner.tl { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.corner.tr { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.corner.bl { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.corner.br { bottom: 0; right: 0; border-left: 0; border-top: 0; }
.quotes_clip { position: absolute; inset: 0; overflow: hidden; }
.quotes_dots { position: absolute; top: .9rem; left: 50%; z-index: 2; transform: translateX(-50%); display: flex; gap: .55rem; }
.quotes_dots button { position: relative; display: block; width: .45rem; height: .45rem; padding: 0; -webkit-appearance: none; appearance: none; border: 1px solid var(--ink-3); border-radius: 0; background: transparent; cursor: pointer; transition: background-color .3s, border-color .3s; }
.quotes_dots button::after { content: ""; position: absolute; inset: -.35rem; }   /* finger-sized hit area around the 7px square */
.quotes_dots button.is-active { background: var(--red); border-color: var(--red); }
.quotes_track { position: absolute; left: 50%; top: 0; bottom: 0; width: 35.8rem; transform: translateX(-50%); }
.quote { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 3rem 1.5rem 2.6rem; opacity: 0; visibility: hidden; pointer-events: none; }
.quote.is-active { opacity: 1; visibility: visible; pointer-events: auto; }   /* hidden quotes are out of the tab order and the accessibility tree too (the swap happens while the frame is shut) */
.quote blockquote { text-wrap: balance; margin: -2.5rem 0 0; font-size: clamp(1.8rem, 3.9vw, 3.5rem); line-height: 1; letter-spacing: -.03em; font-weight: 500; max-width: 100%; }
.quote figcaption { position: absolute; bottom: 2.6rem; left: 0; right: 0; display: inline-flex; align-items: center; justify-content: center; gap: .6rem; font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; }
.quote figcaption img { width: 1.6rem; height: 1.6rem; border-radius: 50%; object-fit: cover; background: #eee; }
.quote figcaption a { text-decoration: underline; }
@media (max-width: 720px) { .quotes_stage { height: 26rem; } .quote blockquote { font-size: 1.7rem; } }

/* ==========================================================================
   SUN — the dome measured in the footage (35.6–38.8 s and 50.7–52.9 s): one fixed raster of a bell
   F(u) = exp(-(|u|/.733)^3.13) over the half-width, black below the curve, a glow band whose thickness is
   proportional to the local bell height (a stretched image, not a stroke), scaled vertically about its base.
   Rise: base stuck to the viewport bottom while scaleY 0 → 1, then it scrolls away as the top of the dark section.
   Set: it scrolls in as the hanging bottom of the dark section, sticks 6vh above the top and scaleY 1 → 0.
   ========================================================================== */
.sun { position: sticky; height: 0; width: 100%; z-index: 4; pointer-events: none; }
.sun-rise { bottom: 0; }
.sun-set { top: -6vh; }
/* the base sits 3px past the dark section's edge: the scaled image's edge is antialiased on a fractional pixel row and
   would otherwise let the paper behind it show as a hairline where the dome meets the black section */
.sun_img { position: absolute; left: 0; bottom: -3px; width: 100%; display: block; transform-origin: 50% 100%; will-change: transform; }
.sun_wrap { position: relative; width: 100%; height: 120vh; margin: 0; }
/* rise: the dome sits at the end of a 1.22H wrapper, so it sticks to the viewport bottom from the moment the wrapper
   enters until the wrapper's bottom (= the dark section's top) reaches the viewport bottom; it grows over that travel */
.sun_wrap-rise { height: 122vh; display: flex; flex-direction: column; justify-content: flex-end; }
.manifesto > .sun_wrap { margin-bottom: 0; }
/* set: sticky inside the manifesto itself (so it stays stuck through the whole collapse); the wrap is only the spacer
   that puts the heading .977H below the bell base; spans the viewport across the manifesto's side padding */
.sun-set { align-self: stretch; width: auto; margin: 0 -1.5rem; }
.sun-set .sun_img { bottom: 3px; } /* flipped about its base, so the 3px overlap has to sit above the section edge */

/* ==========================================================================
   LIFE — 3D spline flown through by a camera (canvas), sticky viewport, milestones projected to DOM
   ========================================================================== */
.life { position: relative; background: var(--black); color: #fff; height: 560vh; }
.life_pin { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.life_title { position: absolute; left: 0; right: 0; top: 7.7rem; z-index: 3; pointer-events: none; will-change: opacity, transform; }
.life_title .w { display: inline-block; will-change: opacity; }
.life_gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.life_nodes { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.life_node { position: absolute; left: 0; top: 0; width: 15rem; display: flex; flex-direction: column; gap: .3rem; padding-left: .9rem; transform-origin: 0 0; opacity: 0; will-change: transform, opacity; }
.life_node::before { content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 30rem; background: linear-gradient(rgba(255, 255, 255, .35), rgba(255, 255, 255, .25) 40%, transparent); }
.life_node::after { content: ""; position: absolute; left: -3px; top: 6.6rem; width: 7px; height: 7px; margin-top: -3px; border-radius: 50%; background: #ff8a3d; box-shadow: 0 0 10px #ff6a1f; opacity: 0; transition: opacity .3s; }
.life_node.is-hot::after { opacity: 1; }
.life_node[data-side="left"] { padding-left: 0; padding-right: .9rem; text-align: right; align-items: flex-end; }
.life_node[data-side="left"]::before { left: auto; right: 0; }
.life_node[data-side="left"]::after { left: auto; right: -3px; }
.life_tag { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: #fff; transition: color .4s, opacity .4s; }
.life_tag::before { content: ""; width: .6rem; height: .6rem; border: 1px solid currentColor; border-radius: .1rem; }
.life_node[data-side="left"] .life_tag { flex-direction: row-reverse; }
.life_node.is-hot .life_tag { color: #ff6a1f; }
.life_node.is-past .life_tag { opacity: .35; }
.life_body { display: flex; flex-direction: column; gap: .2rem; opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .4s var(--ease-out); }
.life_node.is-hot .life_body { opacity: 1; transform: none; }
.life_node b { font-weight: 500; font-size: 1.05rem; letter-spacing: -.01em; }
.life_node ul { display: flex; flex-direction: column; gap: .15rem; margin-top: .15rem; }
.life_node li { font-size: .8rem; color: rgba(255, 255, 255, .8); }
.life_node li::before { content: "› "; color: #ff6a1f; }
.life_node[data-side="left"] li::before { content: ""; }
.life_node[data-side="left"] li::after { content: " ‹"; color: #ff6a1f; }
@media (max-width: 900px) {
  .life { height: 455vh; }
  .life_node { width: 8.5rem; gap: .15rem; }
  .life_node b { font-size: .8rem; }
  .life_node ul { display: none; }
  .life_tag { font-size: .58rem; }
  .life_title { top: 5rem; font-size: 2rem; }
}

/* ==========================================================================
   MANIFESTO — h2 56px, paragraphs 21px/1.45 in a 39.4rem column, red button
   ========================================================================== */
/* clipped on both axes: the setting dome is a flipped 2.9×H canvas hanging from the section's top, and unclipped its
   invisible lower part stretched the page (by up to a viewport on tablets) until the dome had collapsed. clip is not a
   scroll container, so the sticky dome still sticks to the viewport */
.manifesto { position: relative; padding: 0 1.5rem 7rem; display: flex; flex-direction: column; align-items: center; gap: 1.85rem; text-align: center; overflow-x: clip; overflow: clip; }
.manifesto .h2 { margin-bottom: .4rem; }
.manifesto p { max-width: 39.4rem; font-size: 1.3rem; line-height: 1.45; letter-spacing: -.012em; color: var(--ink-2); will-change: opacity, filter, transform; }
.manifesto_close { color: var(--ink) !important; }
.manifesto_close a { text-decoration: underline; }
.manifesto .btn-mono { margin-top: .6rem; }

/* ==========================================================================
   FOOTER — wordmark 17.5vw (ink 185px @900), mono copyright, 3 link columns with orange chevrons
   ========================================================================== */
.footer { position: relative; padding: 1rem 1.9rem 3.2rem 2.5rem; background: var(--paper); color: var(--ink); overflow: hidden; }
.footer_word { line-height: .8; text-align: left; margin-left: -.06em; }
/* the gradient only paints inside the span's box, and the .8 line box ends above the descender — the g lost its tail
   and read as a q. The box now reaches .26em lower (the negative margin keeps the layout), and the gradient's vertical
   stops are rescaled by .8/1.06 so the colours sit on the letters exactly where they did */
.footer_word span {
  display: inline-block; font-size: clamp(5rem, 17.5vw, 16rem); font-weight: 500; letter-spacing: -.05em;
  padding-bottom: .26em; margin-bottom: -.26em;
  background: radial-gradient(45% 60.4% at 22% 22.6%, rgba(255, 190, 40, .95), transparent 62%), radial-gradient(50% 52.8% at 70% 45.3%, rgba(255, 110, 0, .95), transparent 65%), linear-gradient(100deg, #1a0a05 0%, #5a1200 22%, #ff5a00 48%, #ffa000 66%, #7a1f00 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.footer_row { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; margin-top: 1.4rem; }
.footer_copy { font-family: var(--mono); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); line-height: 1.9; }
.footer_links { display: flex; gap: 3.2rem; }
.footer_links ul { display: flex; flex-direction: column; gap: .45rem; }
.footer_links a { font-size: .95rem; }
.footer_links a::before { content: "› "; color: #e8622a; }
.footer_links a:hover { text-decoration: underline; }
@media (max-width: 900px) { .footer { padding: 2rem 1.25rem; } .footer_row { flex-direction: column; align-items: flex-start; } .footer_links { flex-wrap: wrap; gap: 1.5rem 2rem; } }

/* ---------- cookie notice: sharp paper card in the bottom-left corner, slides up once per visitor, snaps away ---------- */
.cookies { position: fixed; left: 1.25rem; bottom: 1.25rem; z-index: 60; width: min(22rem, calc(100vw - 2.5rem)); padding: 1.1rem 1.2rem 1.05rem; background: var(--paper); color: var(--ink); border: 1px solid var(--ink); border-radius: 0; box-shadow: 6px 6px 0 rgba(0, 0, 0, .08); transform: translateY(1rem); opacity: 0; transition: transform .45s var(--ease-out), opacity .35s ease-out; }
.cookies.is-in { transform: none; opacity: 1; }
.cookies.is-out { transform: translateY(.5rem); opacity: 0; transition: transform .16s ease-in, opacity .14s ease-in; }
.cookies_eyebrow { font-family: var(--mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: .45rem; }
.cookies_text { font-size: .86rem; line-height: 1.45; color: var(--ink-2); }
.cookies_text a { text-decoration: underline; text-underline-offset: 2px; color: var(--ink); }
.cookies_actions { display: flex; align-items: center; gap: .5rem; margin-top: .9rem; }
.cookies_btn { height: 2.15rem; padding: 0 1rem; border: 1px solid transparent; border-radius: 0; font-family: var(--mono); font-size: .66rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; }
.cookies_btn.is-accept { background: var(--red); color: #fff; }
.cookies_btn.is-accept:hover { background: var(--red-deep); }
.cookies_btn.is-decline { background: transparent; color: var(--ink-2); border-color: var(--ink-3); }
.cookies_btn.is-decline:hover { color: var(--ink); border-color: var(--ink); }
@media (max-width: 640px) { .cookies { left: .75rem; right: .75rem; bottom: .75rem; width: auto; } }

/* ---------- generic reveals (scroll-triggered by JS; hidden only when JS is ready) ---------- */
.js [data-reveal], .js [data-reveal-rows] > li, .js [data-blur-reveal] { opacity: 0; }
.js [data-market-copy] { opacity: 0; }
/* entrance-animated on load: hidden from the first paint so they never flash in, vanish and then fade in */
.js [data-stagger] > * { opacity: 0; }
.js [data-cine-title], .js [data-cine-sub], .js [data-cine-btn] { --in: 0; --in-y: 24px; --in-blur: 8px; }
.js [data-cine-photo] { --in: 0; }
.js [data-mask-reveal] { opacity: 0; }
/* masked line reveal: each line is clipped by its own wrapper while it rises; the padding/negative margins give ascenders
   and descenders room inside the clip without changing the heading's height, and the clip is dropped altogether once the
   reveal has played (.is-revealed, set by initMaskReveal) so no browser can shave a descender off a finished heading */
.rv-line { display: block; overflow: hidden; padding: .1em 0 .35em; margin: -.1em 0 -.35em; }
.rv-inner { display: block; will-change: transform; }
[data-mask-reveal].is-revealed .rv-line { overflow: visible; }
[data-mask-reveal].is-revealed .rv-inner { will-change: auto; }
/* floating cards: pointer parallax + entry warp (see initMarket) */
.mcard_img { position: relative; }
.mcard_img img.mcard_glow { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; pointer-events: none; mix-blend-mode: screen !important; filter: blur(9px) brightness(1.55) saturate(1.15) !important; will-change: opacity; }
.market.is-warp .mcard_img { filter: url(#chroma); }

/* ==========================================================================
   INNER PAGES (how-it-works, what-you-get, results, faq, contact, legal)
   ========================================================================== */
.page-padding { padding-left: 1.5rem; padding-right: 1.5rem; }
.container-large { width: 100%; max-width: 72rem; margin: 0 auto; }
.padding-section-large { padding-top: 6rem; padding-bottom: 6rem; }
.title_row { display: flex; flex-direction: column; gap: 1rem; max-width: 46rem; }
.title_row .eyebrow { text-align: left; }
.heading-h1 { font-size: clamp(2.25rem, 4.6vw, 3.75rem); line-height: 1.02; letter-spacing: -.035em; font-weight: 500; }
.heading-h2 { font-size: clamp(1.9rem, 3.4vw, 2.75rem); line-height: 1.08; letter-spacing: -.03em; font-weight: 500; }
.heading-h3 { font-size: 1.5rem; line-height: 1.2; letter-spacing: -.025em; font-weight: 500; }
.heading-h4 { font-size: 1.2rem; line-height: 1.25; letter-spacing: -.02em; font-weight: 500; }
.text-size-large { font-size: 1.125rem; line-height: 1.45; }
.text-color-secondary { color: var(--ink-3); }
.button-group { display: flex; flex-wrap: wrap; gap: .5rem; }
.btn { display: inline-flex; align-items: center; justify-content: center; padding: .9rem 1.5rem; font-family: var(--mono); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; border: 1px solid transparent; cursor: pointer; transition: background-color .2s, transform .2s; white-space: nowrap; }
.btn:hover { transform: translateY(-1px); }
.btn.is-dark { background: var(--red); color: #fff; }
.btn.is-dark:hover { background: var(--red-deep); }   /* same hover as the nav and homepage red buttons */
.btn.is-white { background: #fff; color: var(--ink); }
.btn.is-glass { background: rgba(255, 255, 255, .15); color: #fff; border-color: rgba(255, 255, 255, .3); }
.btn.is-outline { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn.is-full { width: 100%; }
.btn_content { display: inline-flex; align-items: center; gap: .4rem; }
.btn_loading { display: none; align-items: center; gap: .55rem; }
.btn.is-loading { cursor: progress; }
.btn.is-loading .btn_content { display: none; }
.btn.is-loading .btn_loading { display: inline-flex; }
.btn_spinner { width: .75rem; height: .75rem; border: 1.5px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: btn-spin .7s linear infinite; }
@keyframes btn-spin { to { transform: rotate(360deg); } }

.page-hero { padding: 8rem 0 3rem; }
.page-hero.is-dark { position: relative; overflow: hidden; margin: 0; padding: 10rem 0 6rem; background: var(--black); color: #fff; }
.page-hero.is-dark img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: sepia(.7) saturate(2) brightness(.55); }
.page-hero.is-dark::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .85), rgba(0, 0, 0, .35) 60%, rgba(0, 0, 0, .2)); }
.page-hero.is-dark .title_row { position: relative; z-index: 1; }
.page-hero.is-dark .text-color-secondary { color: rgba(255, 255, 255, .8); }
.page-hero.is-dark .eyebrow { color: var(--amber); }

.feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.feature-card { display: flex; flex-direction: column; gap: .6rem; padding: 2rem; background: #fff; scroll-margin-top: 5rem; }
.feature-card .eyebrow { text-align: left; color: var(--red); }
.fc-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; margin-bottom: .6rem; border-radius: .6rem; background: rgba(235, 69, 40, .08); color: var(--red); }
.fc-icon svg { width: 1.3rem; height: 1.3rem; }
.feature-card p { color: var(--ink-2); line-height: 1.5; }
.feature-card ul { display: flex; flex-direction: column; gap: .35rem; margin-top: .5rem; font-size: .9rem; color: var(--ink-2); }
.feature-card li::before { content: "› "; color: var(--red); }
.spec-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 3rem; max-width: 52rem; margin: 0; }
.spec { display: flex; flex-direction: column; gap: .25rem; padding: 1.1rem 0; border-top: 1px solid var(--line); }
.spec dt { font-family: var(--mono); font-size: .65rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.spec dd { margin: 0; font-size: 1.05rem; }
.fit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.fit-card { display: flex; flex-direction: column; gap: .5rem; padding: 1.75rem; background: #fff; }
.fit-card .eyebrow { text-align: left; color: var(--red); }
.fit-card p { color: var(--ink-2); font-size: .95rem; }
.fit-not { display: flex; flex-direction: column; gap: .75rem; margin-top: 2rem; padding: 1.75rem; background: var(--black); color: #fff; }
.fit-not li { color: rgba(255, 255, 255, .8); }
.fit-not li { position: relative; padding-left: 1.3rem; }
.fit-not li::before { content: ""; position: absolute; left: 0; top: .62em; width: .6rem; height: 1px; background: var(--red); }
.process_step { display: grid; grid-template-columns: 5rem 1fr; gap: 2rem; padding: 2rem 0; border-top: 1px solid var(--line); }
.process_step:last-child { border-bottom: 1px solid var(--line); }
.process_num { font-family: var(--mono); font-size: 1.5rem; color: var(--red); }
.process_step .eyebrow { text-align: left; color: var(--ink-3); margin-bottom: .3rem; }
.process_step p { color: var(--ink-2); max-width: 40rem; }
.results-empty { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px dashed var(--line); }
.results-card { padding: 1.75rem; background: #fff; min-height: 14rem; }
.results-card dl { display: flex; flex-direction: column; gap: .35rem; margin: 0; }
.results-card dt { font-family: var(--mono); font-size: .65rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.results-card dd { margin: 0 0 .5rem; color: #aaa; }
.video-card { position: relative; overflow: hidden; background: #000; aspect-ratio: 16 / 9; }
.video-card video { width: 100%; height: 100%; object-fit: cover; }
.video-card.is-portrait { aspect-ratio: 9 / 16; max-width: 22rem; }
.marquee_play { position: absolute; top: 50%; left: 50%; display: flex; align-items: center; justify-content: center; width: 4rem; height: 4rem; border: 0; border-radius: 50%; background: #fff; color: #000; cursor: pointer; transform: translate(-50%, -50%); transition: opacity .3s; }
.video-card.is-playing .marquee_play { opacity: 0; pointer-events: none; }
.accordion { display: flex; flex-direction: column; }
.accordion_item { border-top: 1px solid var(--line); }
.accordion_item:last-child { border-bottom: 1px solid var(--line); }
.accordion_header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; width: 100%; padding: 1.25rem 0; border: 0; background: transparent; text-align: left; cursor: pointer; font-size: 1.1rem; font-weight: 500; letter-spacing: -.01em; }
.accordion_icon { position: relative; flex-shrink: 0; width: 1.5rem; height: 1.5rem; }
.accordion_icon::before, .accordion_icon::after { content: ""; position: absolute; top: 50%; left: 50%; background: var(--ink); transform: translate(-50%, -50%); transition: transform .4s var(--ease-out), opacity .4s; }
.accordion_icon::before { width: .9rem; height: 1px; }
.accordion_icon::after { width: 1px; height: .9rem; }
.accordion_icon.is-active::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.accordion_panel { max-height: 0; overflow: hidden; transition: max-height .4s var(--ease-io); }
.accordion_content { padding: 0 0 1.25rem; opacity: 0; transition: opacity .4s; }
.accordion_content.is-visible { opacity: 1; }
.accordion_content p { color: var(--ink-2); line-height: 1.55; max-width: 44rem; }
.buybox_grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
.buybox_grid .eyebrow { text-align: left; }   /* the eyebrow sits over left-aligned copy here, not a centred section head */
/* ==========================================================================
   BOOKING PAGE — after obsidion.ai/demo @1440: 1280px container, two 576px columns 64px apart, h1 72/1.1/−.02em,
   lede 18/1.6, four icon rows 24px apart (40px icon tiles, 16/500 titles, 14/20 copy), a 2px-bordered note;
   the calendar column is sticky with a 25px drop shadow; tinted gradient field + drifting blurred blobs + noise
   ========================================================================== */
.book { position: relative; isolation: isolate; overflow: hidden; min-height: calc(100vh - 4rem); padding: 6rem 0 6rem; background: var(--paper); }
.book_bg { position: absolute; inset: 0; z-index: -3; pointer-events: none; background:
  radial-gradient(ellipse 120% 50% at 50% 8%, rgba(250, 243, 236, .55) 0%, transparent 55%),
  radial-gradient(ellipse 70% 42% at 10% 22%, rgba(252, 228, 215, .22) 0%, transparent 52%),
  radial-gradient(ellipse 70% 42% at 90% 28%, rgba(248, 225, 214, .2) 0%, transparent 52%),
  radial-gradient(ellipse 85% 40% at 75% 55%, rgba(252, 228, 215, .16) 0%, transparent 50%),
  radial-gradient(ellipse 80% 38% at 20% 68%, rgba(250, 243, 236, .2) 0%, transparent 50%),
  radial-gradient(ellipse 90% 44% at 50% 88%, rgba(248, 225, 214, .16) 0%, transparent 52%),
  linear-gradient(180deg, #fff 0%, #fff 13%, #fdfdfd 17%, #f9f9f9 21%, #f7f7f7 27%, #f6f6f6 33%, #f7f7f7 39%, #fafafa 43%, #fcfcfc 47%, #fff 51%, #fff 57%, #fdfdfd 61%, #f9f9f9 67%, #f7f7f7 73%, #f6f6f6 79%, #f7f7f7 85%, #fafafa 91%, #fcfcfc 95%, #fff 100%); }
.book_blobs { position: absolute; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.book_blobs i { position: absolute; display: block; border-radius: 50%; filter: blur(64px); }
.book_blobs .is-a { left: -10%; top: 12%; height: min(30vh, 280px); width: min(50vw, 520px); background: rgba(252, 228, 215, .55); animation: book-blob-a 16s ease-in-out infinite; }
.book_blobs .is-b { right: -8%; top: 32%; height: min(28vh, 260px); width: min(48vw, 480px); background: rgba(248, 225, 214, .5); animation: book-blob-b 20s ease-in-out infinite; animation-delay: -8s; }
.book_blobs .is-c { left: 5%; top: 58%; height: min(32vh, 300px); width: min(52vw, 500px); background: rgba(250, 243, 236, .52); animation: book-blob-c 24s ease-in-out infinite; animation-delay: -14s; }
.book_blobs .is-d { right: -6%; top: 78%; height: min(28vh, 260px); width: min(46vw, 460px); background: rgba(252, 228, 215, .46); animation: book-blob-a 16s ease-in-out infinite; animation-delay: -20s; }
@keyframes book-blob-a { 0%, 100% { opacity: .78; transform: translate(0) scale(1); } 33% { opacity: .95; transform: translate(-10%, 8%) scale(1.1); } 66% { opacity: .82; transform: translate(6%, -5%) scale(.96); } }
@keyframes book-blob-b { 0%, 100% { opacity: .74; transform: translate(0) scale(1); } 33% { opacity: .92; transform: translate(12%, -9%) scale(.94); } 66% { opacity: .78; transform: translate(-8%, 6%) scale(1.06); } }
@keyframes book-blob-c { 0%, 100% { opacity: .7; transform: translate(0) scale(1); } 33% { opacity: .88; transform: translate(-9%, -8%) scale(1.07); } 66% { opacity: .74; transform: translate(7%, 4%) scale(.95); } }
.book_noise { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .028; mix-blend-mode: overlay; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 200px 200px; }
.book_wrap { width: 100%; max-width: 80rem; margin: 0 auto; padding: 0 2rem; }
.book_grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 30rem); grid-template-rows: auto auto 1fr; gap: 1rem 4rem; align-items: start; }   /* calendar column held to 480px; the tall calendar spans all three rows and its surplus height goes to the last one, not a gap under the intro */
.book_intro { grid-column: 1; grid-row: 1; margin-bottom: 2.5rem; }
.book_h1 { font-size: clamp(2.6rem, 5vw, 4.5rem); line-height: 1.1; letter-spacing: -.02em; font-weight: 600; color: #0a0a0a; margin-bottom: 1rem; }
.book_lede { max-width: 32rem; font-size: 1.125rem; line-height: 1.6; color: #525252; }
.book_cal { grid-column: 2; grid-row: 1 / span 3; position: sticky; top: 6rem; }
.book_calbox { min-height: 905px; filter: drop-shadow(0 25px 25px rgba(0, 0, 0, .15)); }
.book_calbox iframe { display: block; width: 100%; height: 100%; min-height: 905px; border: 0; overflow: hidden; }
.book_calbox br { display: none; }
.book_rows { grid-column: 1; grid-row: 2; display: flex; flex-direction: column; gap: 1.5rem; margin-bottom: 2.5rem; }
.book_row { display: flex; align-items: flex-start; gap: 1rem; }
.book_icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: .5rem; background: #f4f4f5; color: #525252; }
.book_icon svg { width: 1.25rem; height: 1.25rem; }
.book_row h3 { font-size: 1rem; line-height: 1.5; font-weight: 500; color: #0a0a0a; margin-bottom: .25rem; }
.book_row p { font-size: .875rem; line-height: 1.43; color: #525252; }
.book_contact { grid-column: 1; grid-row: 3; border-left: 2px solid #0a0a0a; padding-left: 1rem; }
.book_contact-title { font-size: 1rem; line-height: 1.5; font-weight: 500; color: #0a0a0a; margin-bottom: .5rem; }
.book_contact-list { display: flex; flex-wrap: wrap; gap: .35rem 1.75rem; margin: 0; }
.book_contact-list div { display: flex; align-items: baseline; gap: .5rem; font-size: .875rem; line-height: 1.6; color: #525252; }
.book_contact-list dt { font-family: var(--mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.book_contact-list dd { margin: 0; }
.book_contact-list a { color: #0a0a0a; text-decoration: underline; text-underline-offset: 2px; }
.js [data-book-in] { opacity: 0; }
@media (max-width: 1024px) {
  .book { padding: 5.5rem 0 4rem; }
  .book_grid { grid-template-columns: minmax(0, 1fr); gap: 1rem 0; }
  .book_intro, .book_cal, .book_rows, .book_contact { grid-column: 1; grid-row: auto; }
  .book_cal { position: static; margin: 0 0 2.5rem; }
  .book_calbox { filter: drop-shadow(0 16px 20px rgba(0, 0, 0, .12)); min-height: 660px; }
  .book_calbox iframe { min-height: 660px; }   /* the widget's own script sets the real height; this only reserves room while it loads */
  .book_wrap { padding: 0 1.5rem; }
}
@media (prefers-reduced-motion: reduce) { .book_blobs { display: none; } }
.buybox_gallery { display: flex; flex-direction: column; gap: 1rem; }
.buybox_pipeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
.buybox_stage { display: flex; flex-direction: column; gap: .5rem; padding: .875rem; border: 1px solid var(--line); font-family: var(--mono); font-size: .65rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.buybox_stage i { display: block; height: .3rem; background: #eee; position: relative; }
.buybox_stage i::after { content: ""; position: absolute; inset: 0; width: var(--w); background: var(--red); }
.buybox_badge { display: flex; align-items: center; gap: 1rem; padding: 1rem; }
.buybox_badge-live { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .75rem; border: 1px solid rgba(255, 255, 255, .25); font-family: var(--mono); font-size: .65rem; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.buybox_badge-live i { width: .5rem; height: .5rem; border-radius: 50%; background: #35e07a; box-shadow: 0 0 10px #35e07a; }
.buybox_badge-text { font-size: .875rem; }
.buybox_form { display: flex; flex-direction: column; gap: .75rem; padding: 1.5rem; border: 1px solid var(--line); background: #fafafa; }
.buybox_form-note { font-size: .8rem; color: var(--ink-3); text-align: center; }
.buybox_form-note a { text-decoration: underline; }
.form_grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form_field { display: flex; flex-direction: column; gap: .35rem; font-family: var(--mono); font-size: .65rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.form_field.is-full { grid-column: 1 / -1; }
.form_field input, .form_field textarea, .form_field select, .buybox_form input, .buybox_form textarea { width: 100%; padding: .8rem .9rem; border: 1px solid var(--line); background: #fff; font-family: var(--sans); font-size: 1rem; color: var(--ink); letter-spacing: 0; text-transform: none; }
.form_field input:focus, .form_field textarea:focus, .form_field select:focus { outline: 0; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(235, 69, 40, .18); }   /* a visible ring, not only a 1px border change */
/* iOS zooms the whole page into any field under 16px when it is focused */
@media (pointer: coarse) { .form_field input, .form_field textarea, .form_field select, .buybox_form input, .buybox_form textarea { font-size: max(1rem, 16px); } }
.form_field.form_consent { flex-direction: row; gap: .75rem; align-items: flex-start; font-family: var(--sans); font-size: .8rem; line-height: 1.45; color: var(--ink-2); text-transform: none; letter-spacing: 0; cursor: pointer; }
/* the text-field rule above (width 100%, padding) was stretching the checkboxes into wide padded boxes */
.form_field.form_consent input { flex: 0 0 auto; width: 1rem; height: 1rem; margin: .1rem 0 0; padding: 0; cursor: pointer; }
.form_done { padding: .75rem 1rem; background: #e9f7ef; color: #1f6b43; font-size: .9rem; }
.prose { max-width: 44rem; }
.prose h2 { font-size: 1.4rem; margin: 2.5rem 0 .75rem; letter-spacing: -.02em; }
.prose p, .prose li { color: var(--ink-2); line-height: 1.65; margin-bottom: 1rem; }
.prose ul { padding-left: 1.25rem; list-style: disc; }
.prose a { text-decoration: underline; }
.cta { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; min-height: 34rem; padding: 6rem 1.5rem; background: var(--black); color: #fff; }
.cta_bg { position: absolute; inset: 0; }
.cta_bg img { width: 100%; height: 100%; object-fit: cover; filter: sepia(.7) saturate(2) brightness(.6); }
.cta_grade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .85), rgba(0, 0, 0, .3) 55%, rgba(255, 90, 0, .15)); }
.cta_content { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 1.5rem; max-width: 72rem; width: 100%; margin: 0 auto; }
.cta_pre { font-family: var(--mono); font-size: .65rem; letter-spacing: .12em; text-transform: uppercase; opacity: .85; }
.cta_title { max-width: 36rem; font-size: clamp(2.25rem, 5vw, 4rem); line-height: 1; letter-spacing: -.035em; font-weight: 500; }
.cta_checks { display: flex; flex-wrap: wrap; gap: 1.25rem; font-size: .9rem; }
@media (max-width: 900px) {
  .feature-grid, .fit-grid, .results-empty, .buybox_grid, .form_grid, .spec-list { grid-template-columns: 1fr; }
  .process_step { grid-template-columns: 1fr; gap: .5rem; }
  .buybox_pipeline { grid-template-columns: 1fr 1fr; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}