/* ============================================================================
   THE TRANSFORMATION STORY ENGINE: shared design system
   Airbnb (warmth) x Apple (cinema) x Notion (calm structure)
   Type: IBM Plex Sans (voice) + IBM Plex Mono (micro-labels).
   Every case study inherits this. Per-page accent via body[data-accent].
   Layout rule: ONE shell width; everything left-aligns to the same edge.
   Structure rule: 5 numbered Acts per chapter. Nothing else gets a number.
   Restraint rule: hairline borders over shadows, solid color over gradients,
   typographic rhythm over decorative icons. Handmade, not templated.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* ---------- Tokens ---------- */
:root{
  --sans:'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* neutral base, warm, Notion-calm */
  --ink:        #17171b;
  --ink-soft:   #45454e;
  --ink-faint:  #78787f;
  --paper:      #fbfaf7;
  --paper-2:    #f3f1ea;
  --paper-3:    #ece9df;
  --line:       rgba(20,20,25,.10);
  --line-strong:rgba(20,20,25,.18);

  /* cinematic dark surfaces (Apple) */
  --night:      #111013;
  --night-2:    #1a181d;
  --night-line: rgba(255,255,255,.13);
  --night-ink:  #f4f2ee;
  --night-soft: #a7a5ad;

  /* accent, overridden per page via [data-accent] */
  --accent:      #4f46e5;
  --accent-2:    #7c74f0;
  --accent-ink:  #ffffff;
  --accent-wash: rgba(79,70,229,.07);
  --accent-line: rgba(79,70,229,.22);

  /* rhythm: ONE shell; prose capped for line-length but left-aligned to it */
  --shell:  1080px;
  --read:   670px;
  --pad:    clamp(22px, 5.5vw, 48px);

  /* Radii match the orbit's own card convention (StationOverlay.tsx: 20px mobile /
     24px desktop card radius, rounded-full on every pill/button) rather than an
     invented editorial scale. --r-lg/--r-xl are the two "card" radii; --r-sm/--r-md
     stay small for icon chips and tags that were never meant to read as cards. */
  --r-sm: 6px; --r-md: 10px; --r-lg: 20px; --r-xl: 24px;
  --shadow-sm: 0 1px 2px rgba(20,20,25,.05);
  --shadow-md: 0 8px 28px rgba(20,20,25,.10);
  --shadow-lg: 0 24px 64px rgba(20,20,25,.16);

  --ease: cubic-bezier(.22,.61,.36,1);

  /* Type scale, tightened to match the orbit's own discipline (StationOverlay.tsx
     uses only 4-5 distinct font-size/weight pairs per view). Headline tiers
     (display/h1/h2/h3/lead) already have a clear, distinct job each and stay as
     they are; these four tokens replace what used to be a dozen near-duplicate
     one-off body/label sizes (14 / 14.5 / 15 / 16 / 16.5 / 17 / 19px etc). */
  --fs-body:    16px;   /* structured secondary reading: insight/omi, triad, timeline/stage labels */
  --fs-body-sm: 14.5px; /* supporting copy: metric labels, archive tiles, principle body */
  --fs-label:   11.5px; /* standard mono kicker/label */
  --fs-label-sm:10.5px; /* quiet micro-tags: archive meta, stage tags, dir role */
  --fs-caption: 12.5px; /* small captions: scorecard sub-value, figcaptions, attributions */
}

/* per-page accents — each page now carries its actual Station 02 planet identity
   (see src/components/PlanetVisuals.tsx PLANET_VISUAL_COLORS), not an invented hue.
   --accent is the neon planet color darkened/desaturated to stay legible as body
   text/links against --paper; --accent-2 is the LITERAL neon planet color, used only
   on this page's dark/cinematic sections (hero, reframe, closing, poster--night) where
   it reads exactly like it does in the 3D scene. wash/line derive from --accent. */
[data-accent="shared-language"]  { --accent:#0A8A72; --accent-2:#20ffd7; --accent-wash:rgba(10,138,114,.08);  --accent-line:rgba(10,138,114,.22); }
[data-accent="auto-attendant"]   { --accent:#B56900; --accent-2:#ff9a00; --accent-wash:rgba(181,105,0,.08);  --accent-line:rgba(181,105,0,.22); }
[data-accent="beyond-scaling"]   { --accent:#A17400; --accent-2:#ffbf1f; --accent-wash:rgba(161,116,0,.08);  --accent-line:rgba(161,116,0,.22); }
[data-accent="work-model"]       { --accent:#1F9E3A; --accent-2:#5cff72; --accent-wash:rgba(31,158,58,.08);  --accent-line:rgba(31,158,58,.22); }
[data-accent="tendlc"]           { --accent:#C22712; --accent-2:#ff3b1f; --accent-wash:rgba(194,39,18,.08);  --accent-line:rgba(194,39,18,.22); }
[data-accent="website"]          { --accent:#6B1FD6; --accent-2:#9b4dff; --accent-wash:rgba(107,31,214,.08); --accent-line:rgba(107,31,214,.22); }
[data-accent="call-intelligence"]{ --accent:#0D6FC4; --accent-2:#29a3ff; --accent-wash:rgba(13,111,196,.08); --accent-line:rgba(13,111,196,.22); }
[data-accent="lisa"]             { --accent:#C21966; --accent-2:#ff2f8f; --accent-wash:rgba(194,25,102,.08); --accent-line:rgba(194,25,102,.22); }

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans);
  font-size:18.5px; line-height:1.65; font-weight:400; letter-spacing:-.006em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
::selection{ background:var(--accent); color:var(--accent-ink); }
img,svg{ max-width:100%; }
/* Never let a nested element's UA default margin quietly break the shared
   left edge again (this caused the pullquote misalignment bug). */
blockquote, figure{ margin:0; }

/* ---------- Layout primitives, ONE shared left edge, always ---------- */
.wrap, .wrap-wide, .wrap-max{
  width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--pad);
}

section{ position:relative; }
.section{ padding-block:clamp(52px,8vw,100px); }
.section--tight{ padding-block:clamp(36px,5vw,64px); }
.act{ position:relative; }

/* Prose left-aligns to the shell edge, capped at --read for line length. */
.wrap > p, .wrap > .lead, .wrap > .beat, .wrap > .kicker, .wrap > .subkicker,
.wrap > h1, .wrap > h2, .wrap > h3, .wrap > h4,
.wrap > .theme-block, .wrap > blockquote, .wrap > figure.qfig{
  max-width:var(--read); margin-inline:0;
}

/* ---------- Type ---------- */
h1,h2,h3,h4{ font-family:var(--sans); font-weight:600; letter-spacing:-.025em; line-height:1.06; margin:0; }
.display{ font-size:clamp(44px,8vw,96px); font-weight:600; line-height:.98; letter-spacing:-.04em; }
.h1{ font-size:clamp(30px,4.4vw,48px); font-weight:600; line-height:1.08; letter-spacing:-.03em; }
.h2{ font-size:clamp(25px,3.2vw,35px); font-weight:600; letter-spacing:-.028em; }
.h3{ font-size:clamp(20px,2.4vw,26px); font-weight:600; letter-spacing:-.02em; }
.lead{ font-size:clamp(19px,2.2vw,24px); line-height:1.52; color:var(--ink-soft); font-weight:400; letter-spacing:-.012em; }

p{ margin:0 0 1.15em; }
strong{ font-weight:600; color:var(--ink); }
em{ font-style:italic; }
a{ color:var(--accent); text-decoration:none; }

.beat{ margin:.14em 0; color:var(--ink-soft); font-size:1.02em; }
.beat--ink{ color:var(--ink); font-weight:500; }

/* ---------- Labels ---------- */
/* Act label: the ONLY numbered heading on the page. Big, unmistakable. */
.actkicker{ display:flex; align-items:baseline; gap:16px; margin-bottom:20px; }
.actkicker__n{ font-family:var(--mono); font-size:15px; font-weight:600; color:var(--accent); letter-spacing:.02em; }
.actkicker__t{ font-family:var(--mono); font-size:13px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); }
.actkicker__t b{ color:var(--ink); font-weight:600; }

/* Sub-section label: plain, quiet, never numbered. */
.subkicker{ font-family:var(--mono); font-size:var(--fs-label); font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:16px; }

/* legacy kicker, still used for a couple of one-off in-flow labels */
.kicker{ display:flex; align-items:center; gap:14px; font-family:var(--mono); font-size:var(--fs-label); font-weight:500; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:24px; }
.kicker .num{ color:var(--accent); }
.kicker .bar{ flex:0 0 34px; height:1px; background:var(--accent); opacity:.5; }

.sec-head{ max-width:19ch; margin-bottom:.55em; }
.sec-standfirst{ max-width:38ch; }

/* ---------- Top nav ---------- */
.topbar{
  position:fixed; inset:0 0 auto 0; z-index:50; height:58px;
  display:flex; align-items:center;
  padding-inline:clamp(20px,5.5vw,48px);
  background:color-mix(in srgb, var(--night) 68%, transparent);
  backdrop-filter:saturate(1.3) blur(14px);
  border-bottom:1px solid transparent; transition:border-color .3s, background .3s;
}
.topbar.is-stuck{ background:color-mix(in srgb, var(--night) 86%, transparent); border-bottom-color:var(--night-line); }

/* Same header as the main orbit (App.tsx's DESKTOP TOP NAV): glowing mark + "PRAVAR"
   wordmark, breadcrumbed down into /work[/slug], with the same Contact / Download CV
   actions on the right — so leaving the 3D journey for a case study never feels like
   landing on a different site. Always dark, regardless of the section scrolled behind
   it: the orbit's own nav sits over a permanently black canvas, and a page's light
   paper sections underneath a translucent light bar was reading as illegible.
   Brand and trail are separate flex items (not one nested block) so mobile can drop
   the trail onto its own row while brand and actions stay on one line together. */
.topbar__brand{ display:flex; align-items:center; gap:9px; color:#fff; text-decoration:none; flex:0 0 auto; }
.topbar__brand svg{ width:22px; height:22px; display:block; filter:drop-shadow(0 0 8px rgba(0,255,115,.6)); }
.topbar__word{ font-family:var(--sans); font-size:13px; font-weight:500; letter-spacing:.35em; text-transform:uppercase; color:#fff; }

.topbar__trail{ display:flex; align-items:center; gap:10px; margin-left:14px; min-width:0; overflow:hidden; }
.topbar__sep{ color:var(--night-soft); font-size:13px; opacity:.6; flex:0 0 auto; }
.topbar__crumb{ font-family:var(--mono); font-size:13px; font-weight:500; color:var(--night-soft); text-decoration:none; transition:color .2s var(--ease); white-space:nowrap; }
.topbar__crumb:hover{ color:#fff; }
.topbar__crumb--current{ color:#fff; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.topbar__actions{ display:flex; align-items:center; gap:16px; margin-left:auto; flex:0 0 auto; }
.topbar__action{ font-family:var(--sans); font-size:14px; font-weight:500; color:#fff; text-decoration:none; transition:color .2s var(--ease); white-space:nowrap; }
.topbar__action:hover{ color:#00FF73; }
.topbar__divider{ width:1px; height:16px; background:rgba(255,255,255,.2); }

/* Mobile: matches the orbit's own mobile bar (App.tsx's "lg:hidden" top bar) —
   just the brand lockup on the left and Contact/Download CV on the right, one
   row, nothing else competing with it. The Work/slug trail (which the orbit's
   single-scroll journey has no equivalent of — it only exists here because this
   is an actual multi-page site) becomes a quiet caption tucked directly under
   the brand instead of a second full-width bar, so it reads as a subtitle, not
   a second nav row fighting the first one for attention. */
@media (max-width:640px){
  .topbar{ display:grid; grid-template-columns:1fr auto; align-items:center;
    height:auto; min-height:58px; padding-block:12px; row-gap:3px; column-gap:12px; }
  .topbar__brand{ grid-column:1; grid-row:1; }
  .topbar__actions{ grid-column:2; grid-row:1; margin-left:0; }
  .topbar__trail{ grid-column:1; grid-row:2; margin-left:0; opacity:.7; }
  .topbar__trail .topbar__sep:first-child{ display:none; }
}

/* ---------- Reveal on scroll ---------- */
[data-reveal]{ opacity:0; transform:translateY(20px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
[data-reveal].in{ opacity:1; transform:none; }
[data-reveal][data-delay="1"]{ transition-delay:.06s; }
[data-reveal][data-delay="2"]{ transition-delay:.12s; }
[data-reveal][data-delay="3"]{ transition-delay:.18s; }
[data-reveal][data-delay="4"]{ transition-delay:.24s; }
@media (prefers-reduced-motion: reduce){ [data-reveal]{ opacity:1; transform:none; transition:none; } }

/* ============================================================================
   CHAPTER NAV: 5 Acts, always-visible persistent rail (desktop) /
   inline index (mobile & tablet). Never lists all 18 sub-sections.
   ========================================================================== */

.chrail{
  display:none; position:fixed; left:30px; top:50%; transform:translateY(-50%);
  z-index:40; width:172px;
  opacity:0; pointer-events:none; transition:opacity .4s var(--ease);
}
.chrail.is-visible{ opacity:1; pointer-events:auto; }
@media (min-width:1240px){ .chrail{ display:block; } }
.chrail__item{ position:relative; display:flex; align-items:center; gap:11px; padding:3px 0; text-decoration:none; }
.chrail__dot{ flex:0 0 auto; width:5px; height:5px; border-radius:50%; background:var(--paper); border:1.5px solid var(--line-strong);
  transition:border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease); }
.chrail__label{ display:block; max-height:0; opacity:0; overflow:hidden; transition:max-height .28s var(--ease), opacity .16s var(--ease); }
.chrail:hover .chrail__label{ max-height:38px; opacity:1; transition:max-height .28s var(--ease), opacity .22s var(--ease) .06s; }
.chrail__n{ display:block; font-family:var(--mono); font-size:10px; font-weight:500; letter-spacing:.08em; color:var(--ink-faint); }
.chrail__t{ display:block; margin-top:2px; font-size:13.5px; font-weight:500; color:var(--ink-soft); letter-spacing:-.005em; transition:color .2s var(--ease); }
.chrail__item:hover .chrail__t{ color:var(--ink); }
.chrail__item.is-current .chrail__dot{ background:var(--accent); border-color:var(--accent); transform:scale(1.4); }
.chrail__item.is-current .chrail__n{ color:var(--accent); }
.chrail__item.is-current .chrail__t{ color:var(--ink); font-weight:600; }

/* Dots need to stay legible when the page scrolls behind them into a dark section */
.chrail.on-dark .chrail__dot{ background:var(--night); border-color:rgba(255,255,255,.4); }
.chrail.on-dark .chrail__n{ color:rgba(255,255,255,.6); }
.chrail.on-dark .chrail__t{ color:rgba(255,255,255,.8); }
.chrail.on-dark .chrail__item:hover .chrail__t{ color:#fff; }
.chrail.on-dark .chrail__item.is-current .chrail__dot{ background:var(--accent-2); border-color:var(--accent-2); }
.chrail.on-dark .chrail__item.is-current .chrail__n{ color:var(--accent-2); }
.chrail.on-dark .chrail__item.is-current .chrail__t{ color:#fff; }

/* Mobile & tablet: inline Act index, styled like a printed contents page */
.chindex{ background:var(--paper); border-block:1px solid var(--line); }
@media (min-width:1240px){ .chindex{ display:none; } }
.chindex .wrap{ padding-block:26px; }
.chindex__k{ font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:14px; }
.chindex__list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5,1fr); gap:10px; }
@media (max-width:760px){ .chindex__list{ grid-template-columns:repeat(2,1fr); } }
.chindex__list a{ display:block; border:1px solid var(--line); border-radius:var(--r-md); padding:12px 14px; color:var(--ink); }
.chindex__list a span{ display:block; font-family:var(--mono); font-size:var(--fs-label-sm); color:var(--accent); margin-bottom:4px; }
.chindex__list a b{ font-size:var(--fs-body-sm); font-weight:600; letter-spacing:-.005em; }

/* ============================================================================
   COMPONENTS
   ========================================================================== */

/* ---- Hero ----
   One left-aligned column, planet included: a compact medallion leads the block
   (same edge as the eyebrow/title/tagline beneath it), rather than a full-bleed
   3D layer floating independently behind the text. Matches the file's own
   layout rule at the top: ONE shell, everything left-aligns to the same edge. */
.hero{ position:relative; overflow:hidden;
  padding-block:clamp(122px,20vh,170px) clamp(52px,8vw,84px);
  background:var(--night); color:var(--night-ink); }
.hero__grad{ position:absolute; inset:0; z-index:0;
  background:radial-gradient(70% 60% at 12% 0%, color-mix(in srgb,var(--accent) 15%, transparent), transparent 58%),
             linear-gradient(180deg, rgba(17,16,19,0) 60%, var(--night) 100%); }
.hero__inner{ position:relative; z-index:1; width:100%; display:flex; flex-direction:column; align-items:flex-start; }
.hero__mark{ position:relative; width:clamp(128px,16vw,204px); aspect-ratio:1/1; margin-bottom:clamp(22px,4vw,36px); }
.hero__mark::after{ content:""; position:absolute; inset:-22%; z-index:-1; border-radius:50%;
  background:radial-gradient(circle, color-mix(in srgb,var(--accent-2) 24%, transparent), transparent 72%); }
.hero__planet{ position:static; display:block; width:100%; height:100%; }
.hero__eyebrow{ display:flex; gap:12px; flex-wrap:wrap; align-items:center;
  font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--night-soft); margin-bottom:24px; }
.hero__eyebrow .chip{ color:var(--accent-2); font-weight:600; }
.hero__title{ color:#fff; max-width:16ch; }
.hero__title .accent{ color:var(--accent-2); font-style:italic; }
.hero__tagline{ margin-top:20px; max-width:34ch; color:#e5e3de; font-size:clamp(17.5px,2.1vw,23px); line-height:1.45; font-weight:400; }
.hero__tagline em{ color:#fff; font-style:italic; }
.hero__scroll{ margin-top:44px; display:inline-flex; align-items:center; gap:12px; color:var(--night-soft);
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; font-weight:500; }
.hero__scroll .line{ width:1px; height:30px; background:linear-gradient(var(--accent-2),transparent); animation:scrolldrop 2.4s var(--ease) infinite; transform-origin:top; }
@keyframes scrolldrop{ 0%{ transform:scaleY(.2); opacity:0;} 40%{ opacity:1;} 100%{ transform:scaleY(1); opacity:0;} }

/* ---- Theme / quote ---- */
.theme-block{ border-left:2px solid var(--accent); padding-left:22px; }
.theme-block .label{ font-family:var(--mono); font-size:var(--fs-label); font-weight:500; letter-spacing:.11em; text-transform:uppercase; color:var(--accent); margin-bottom:11px; }
.pullquote{ font-weight:500; font-size:clamp(23px,3.1vw,34px); line-height:1.24; letter-spacing:-.022em; color:var(--ink); }
.pullquote em{ color:var(--accent); font-style:italic; }
.attrib{ margin-top:14px; font-family:var(--mono); font-size:var(--fs-caption); letter-spacing:.04em; color:var(--ink-faint); }

/* ---- Executive summary triad: three editorial statements, not a form.
   Hairline divider, not a bold rule — the orbit's own cards never use a border
   heavier or darker than a 1px hairline at low opacity. */
.triad{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(28px,4vw,48px); }
.tri{ padding-top:18px; border-top:1px solid var(--line-strong); }
.tri__k{ font-family:var(--mono); font-size:var(--fs-label); font-weight:600; letter-spacing:.11em; text-transform:uppercase; color:var(--accent); margin-bottom:14px; }
.tri p{ font-size:var(--fs-body); line-height:1.58; color:var(--ink-soft); margin:0; }
.tri p + p{ margin-top:.7em; }

/* ---- Scorecard: quiet metadata strip, closed on all four sides ---- */
.scorecard{ display:grid; grid-template-columns:repeat(auto-fit,minmax(148px,1fr));
  border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; }
.score{ padding:18px 20px; border-left:1px solid var(--line); }
.score:first-child{ border-left:none; }
.score dt{ font-family:var(--mono); font-size:var(--fs-label-sm); font-weight:500; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:8px; }
.score dd{ margin:0; font-size:19px; font-weight:600; letter-spacing:-.02em; color:var(--ink); line-height:1.15; }
.score dd small{ display:block; font-size:var(--fs-caption); color:var(--ink-soft); font-weight:400; margin-top:4px; letter-spacing:0; }

/* ---- Qualitative results list (used instead of fake stat cards when there is no sourced number) ---- */
.observed{ display:grid; gap:0; border-top:1px solid var(--line); }
.observed__item{ display:grid; grid-template-columns:28px 1fr; gap:16px; padding:16px 0; border-bottom:1px solid var(--line); }
.observed__item svg{ margin-top:2px; color:var(--accent); }
.observed__item b{ display:block; font-size:var(--fs-body); font-weight:600; letter-spacing:-.01em; }
.observed__item span{ font-size:var(--fs-body-sm); color:var(--ink-soft); }

/* ---- Metric row (only when a real sourced number exists) ---- */
.metrics{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:24px; }
.metric__n{ font-size:clamp(36px,5.4vw,58px); font-weight:600; line-height:1; letter-spacing:-.04em; color:var(--accent); }
.metric__l{ margin-top:9px; font-size:var(--fs-body-sm); color:var(--ink-soft); max-width:24ch; }

/* ---- Insight block: Observation / Meaning / Implication ---- */
.insight{ border:1px solid var(--line); border-radius:var(--r-lg); padding:28px clamp(20px,4vw,36px); background:var(--paper); }
.insight + .insight{ margin-top:1px; border-radius:0; }
.insight:first-of-type{ border-radius:var(--r-lg) var(--r-lg) 0 0; }
.insight:last-of-type{ border-radius:0 0 var(--r-lg) var(--r-lg); border-bottom:1px solid var(--line); }
.insight:not(:last-of-type){ border-bottom:none; }
.insight__n{ font-family:var(--mono); font-size:var(--fs-label); color:var(--accent); letter-spacing:.05em; text-transform:uppercase; margin-bottom:9px; }
.insight__t{ font-size:clamp(20px,2.4vw,26px); font-weight:600; letter-spacing:-.02em; line-height:1.15; margin-bottom:18px; }
.omi{ display:grid; grid-template-columns:116px 1fr; gap:5px 22px; }
.omi dt{ font-family:var(--mono); font-size:var(--fs-label-sm); font-weight:500; letter-spacing:.07em; text-transform:uppercase; color:var(--accent); padding-top:4px; }
.omi dd{ margin:0 0 4px; font-size:var(--fs-body); line-height:1.5; color:var(--ink-soft); }
.omi dd strong{ color:var(--ink); }

/* ---- Reframe: left-aligned, full conviction ---- */
.reframe{ background:var(--night); color:var(--night-ink); overflow:hidden; }
.reframe .wrap{ padding-block:clamp(76px,13vw,152px); }
.reframe__k{ font-family:var(--mono); font-size:var(--fs-label); font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--accent-2); margin-bottom:34px; }
.reframe__from{ font-size:clamp(23px,3.6vw,42px); line-height:1.16; color:var(--night-soft); font-weight:300; letter-spacing:-.015em; max-width:20ch; }
.reframe__arrow{ margin:24px 0; width:46px; height:1px; background:var(--accent-2); position:relative; }
.reframe__arrow::after{ content:""; position:absolute; right:0; top:-3px; width:7px; height:7px; border-right:1px solid var(--accent-2); border-bottom:1px solid var(--accent-2); transform:rotate(-45deg); }
.reframe__to{ font-size:clamp(32px,5.4vw,68px); line-height:1.06; color:#fff; font-weight:600; letter-spacing:-.032em; max-width:16ch; }
.reframe__to .u{ color:var(--accent-2); font-style:italic; }

/* ---- Poster (single full-width statement, left-aligned) ---- */
.poster{ background:var(--paper-2); }
.section.poster{ background:var(--paper-2); }
.poster__t{ font-size:clamp(26px,4vw,48px); font-weight:600; line-height:1.12; letter-spacing:-.028em; max-width:21ch; }
.poster--night{ background:var(--night); color:#fff; }
.poster--night .poster__t{ color:#fff; }
.poster--night .wrap{ padding-block:clamp(62px,10vw,116px); }

/* ---- Flow chain: compact supporting chains only ---- */
.flow{ display:flex; flex-wrap:wrap; align-items:stretch; gap:0; }
.flow--v{ flex-direction:column; align-items:stretch; max-width:520px; }
.node{ position:relative; background:var(--paper); border:1px solid var(--line-strong); border-radius:var(--r-md);
  padding:16px 19px; min-width:0; }
.node b{ display:block; font-weight:600; font-size:var(--fs-body-sm); color:var(--ink); letter-spacing:-.01em; }
.node span{ font-size:var(--fs-caption); color:var(--ink-faint); }
.node--accent{ background:var(--accent); border-color:var(--accent); }
.node--accent b{ color:var(--accent-ink); } .node--accent span{ color:color-mix(in srgb,var(--accent-ink) 78%, transparent); }
.node--ghost{ background:transparent; border-style:dashed; }
.node--fail{ border-color:var(--line); } .node--fail b{ color:var(--ink-soft); }

.flow:not(.flow--v) .node{ flex:1 1 0; }
.flow:not(.flow--v) .arrow{ flex:0 0 auto; align-self:center; padding:0 5px; color:var(--ink-faint); display:flex; align-items:center; }
.flow:not(.flow--v) .arrow svg{ width:22px; height:12px; }
.flow--v .arrow{ align-self:flex-start; margin-left:19px; height:20px; width:1px; background:var(--line-strong); position:relative; }
.flow--v .arrow::after{ content:""; position:absolute; bottom:0; left:50%; transform:translateX(-50%); border:4px solid transparent; border-top-color:var(--line-strong); }
.flow--v .node{ width:100%; }

/* ---- Timeline: the ONE hero diagram per act, spacious, full-width.
   No straight connecting bar — the orbit's own step/nav indicator (ProgressRail.tsx)
   is isolated dots with gap between them, hollow by default, filled + glowing only
   when active, and that's still true here. What threads the dots together is a
   quiet sine wave instead: a CSS mask (not a background-image) so its one path
   scales cleanly to any row width and stays a crisp, constant stroke weight.

   The wave is ONE repeatable "two-hump" tile (mask-repeat, not a single stretched
   path) — each tile always returns to the midline exactly at its own edges, so
   tiling it once per node-to-node gap makes it cross the midline exactly at every
   dot, at any screen size, with no per-breakpoint tuning.

   Getting the tile boundaries to actually land on the dots requires accounting
   for the grid's own gap, not just column count: with N equal-fr columns and a
   gap g, node k's real left edge is k·(colWidth+g), not k/N of the row — that
   flat-fraction assumption is exactly what made the wave drift short of later
   nodes before. --tl-gap mirrors the grid's own gap into a calc()-usable
   variable so the wave box's width can be solved for precisely: for N nodes,
   width = (N-1)/N · (100% + gap), which is where node (N-1) actually sits. */
.timeline__row{ --tl-gap:clamp(16px,3vw,32px); position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:var(--tl-gap); }
.timeline__row--3{ grid-template-columns:repeat(3,1fr); }
.timeline__row::before{
  content:""; position:absolute; left:0; top:-8px; height:26px;
  width:calc(75% + .75 * var(--tl-gap));
  background-color:var(--line-strong);
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 24' preserveAspectRatio='none'%3E%3Cpath d='M0,12 C8.33,3 16.67,3 25,12 C33.33,21 41.67,21 50,12 C58.33,3 66.67,3 75,12 C83.33,21 91.67,21 100,12' fill='none' stroke='%23000' stroke-width='2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 24' preserveAspectRatio='none'%3E%3Cpath d='M0,12 C8.33,3 16.67,3 25,12 C33.33,21 41.67,21 50,12 C58.33,3 66.67,3 75,12 C83.33,21 91.67,21 100,12' fill='none' stroke='%23000' stroke-width='2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  -webkit-mask-size:33.334% 100%; mask-size:33.334% 100%;
  -webkit-mask-repeat:repeat-x; mask-repeat:repeat-x;
}
.timeline__row--3::before{
  width:calc(66.667% + .6667 * var(--tl-gap));
  -webkit-mask-size:50% 100%; mask-size:50% 100%;
}
.timeline__node{ position:relative; padding-top:30px; }
.timeline__node::before{ content:""; position:absolute; left:0; top:0; width:11px; height:11px; border-radius:50%;
  background:var(--paper); border:1.5px solid var(--line-strong); }
.timeline__node b{ display:block; font-size:var(--fs-body); font-weight:600; letter-spacing:-.01em; margin-bottom:6px; }
.timeline__node span{ font-size:var(--fs-body-sm); color:var(--ink-soft); line-height:1.45; }
.timeline__node--accent::before{ background:var(--accent); border-color:var(--accent);
  box-shadow:0 0 0 4px var(--accent-wash); }
.timeline__node--accent b{ color:var(--accent); }
@media (max-width:760px){
  .timeline__row{ grid-template-columns:1fr; gap:22px; }
  .timeline__row::before{ content:none; }
}

/* ---- Stage chain: compact evolution tree ---- */
.stages{ counter-reset:st; display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; }
.stage{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:18px;
  background:var(--paper); padding:17px 22px; }
.stage__i{ counter-increment:st; font-weight:600; font-size:var(--fs-body-sm); color:var(--accent); width:34px; height:34px; display:grid; place-items:center; border:1px solid var(--accent-line); border-radius:50%; background:var(--accent-wash); flex:0 0 auto; }
.stage__i::before{ content:counter(st,decimal-leading-zero); font-family:var(--mono); }
.stage__b b{ display:block; font-size:var(--fs-body); font-weight:600; letter-spacing:-.01em; }
.stage__b span{ font-size:var(--fs-body-sm); color:var(--ink-soft); }
.stage__tag{ font-family:var(--mono); font-size:var(--fs-label-sm); font-weight:500; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-faint); }
.stage--final{ background:var(--accent-wash); }
.stage--final .stage__tag{ color:var(--accent); }

/* ---- Direction cards: concept icon + evaluation meters + typographic status ---- */
.dirs{ display:grid; gap:14px; }
.dir{ border:1px solid var(--line); border-radius:var(--r-lg); padding:26px clamp(22px,3vw,30px); background:var(--paper); }
.dir__top{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:16px; }
.dir__icon{ width:38px; height:38px; border-radius:var(--r-md); background:var(--paper-2); display:grid; place-items:center; color:var(--ink-soft); flex:0 0 auto; }
.dir__head{ flex:1; }
.dir__role{ font-family:var(--mono); font-size:var(--fs-label-sm); font-weight:500; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:3px; }
.dir h4{ font-size:20px; }
.dir__status{ font-family:var(--mono); font-size:var(--fs-label-sm); font-weight:600; letter-spacing:.08em; text-transform:uppercase; flex:0 0 auto; padding-top:4px; }
.dir__status--fail{ color:#a83f30; } .dir__status--partial{ color:#9c7118; } .dir__status--win{ color:var(--accent); }
.dir__body{ display:grid; grid-template-columns:1fr 1fr 150px; gap:24px; align-items:start; }
.dir__body h5{ margin:0 0 6px; font-family:var(--mono); font-size:var(--fs-label-sm); font-weight:500; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-faint); }
.dir__body ul{ margin:0; padding-left:16px; font-size:var(--fs-body-sm); color:var(--ink-soft); line-height:1.5; }
.dir__body ul li{ margin-bottom:3px; }
.dir__meters{ display:grid; gap:12px; align-content:start; }
.dir__meters-note{ grid-column:1/-1; margin-top:2px; font-family:var(--mono); font-size:var(--fs-label-sm); font-style:italic; color:var(--ink-faint); }
.meter span{ display:block; font-family:var(--mono); font-size:var(--fs-label-sm); font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:5px; }
.meter__bar{ height:5px; border-radius:3px; background:var(--paper-3); overflow:hidden; }
.meter__bar i{ display:block; height:100%; border-radius:3px; background:var(--ink-faint); }
.dir--win .meter__bar i{ background:var(--accent); }
.dir--fail .meter__bar i{ background:#c4685a; }
.dir--partial .meter__bar i{ background:#c79a3f; }
.dir--win{ border-color:var(--accent-line); border-width:1.5px; }
@media (max-width:860px){ .dir__body{ grid-template-columns:1fr 1fr; } .dir__meters{ grid-column:1/-1; grid-template-columns:1fr 1fr; display:grid; gap:16px; } }
@media (max-width:560px){ .dir__body{ grid-template-columns:1fr; } .dir__meters{ grid-template-columns:1fr 1fr; } }

/* ---- Product showcase frame ---- */
.showcase{ display:grid; gap:clamp(36px,6.5vw,76px); }
.shot{ display:grid; gap:28px; align-items:center; }
.shot--split{ grid-template-columns:1fr 1.12fr; }
.shot--split.rev{ grid-template-columns:1.12fr 1fr; }
.shot--split.rev .shot__copy{ order:2; }
.shot__copy h3{ font-size:clamp(22px,2.7vw,29px); margin-bottom:13px; }
.shot__copy .why{ display:grid; gap:10px; margin-top:18px; }
.shot__copy .why div{ font-size:var(--fs-body-sm); color:var(--ink-soft); padding-left:14px; border-left:2px solid var(--accent-line); }
.shot__copy .why b{ color:var(--ink); font-weight:600; }
.frame{ position:relative; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line-strong);
  background:linear-gradient(155deg,var(--paper-2),var(--paper-3));
  aspect-ratio:4/3; display:grid; place-items:center; }
.frame--tall{ aspect-ratio:3/4; } .frame--wide{ aspect-ratio:16/10; }
.frame__ph{ position:relative; z-index:1; text-align:left; color:var(--ink-faint); padding:26px; max-width:80%; }
.frame__ph .ico{ width:30px; height:30px; margin-bottom:14px; opacity:.55; }
.frame__ph .cap{ font-family:var(--mono); font-size:var(--fs-label); font-weight:500; letter-spacing:.07em; text-transform:uppercase; }
.frame__ph .desc{ font-size:var(--fs-caption); letter-spacing:0; text-transform:none; font-weight:400; margin-top:7px; max-width:30ch; line-height:1.45; }
.frame__tag{ position:absolute; top:14px; left:14px; z-index:2; font-family:var(--mono); font-size:var(--fs-label-sm); font-weight:500; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink-soft); border:1px solid var(--line-strong); padding:5px 9px; border-radius:99px; background:color-mix(in srgb,var(--paper) 88%, transparent); }
.frame::after{ content:""; position:absolute; inset:0; z-index:0; opacity:.4;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:30px 30px; mask:linear-gradient(180deg,#000,transparent 85%); }

/* full-bleed frame: the DEFAULT image treatment, used for most named artifacts */
.bleed{ width:100vw; position:relative; left:50%; margin-left:-50vw; }
.frame--bleed{ aspect-ratio:21/9; border-radius:0; border-inline:none; }
@media (max-width:820px){ .frame--bleed{ aspect-ratio:4/5; } }
.frame--bleed .frame__ph{ max-width:520px; padding:0 var(--pad); }

/* half-width frame: the deliberate exception, used sparingly for true comparisons */
.halves{ display:grid; grid-template-columns:1fr 1fr; gap:2px; }
@media (max-width:680px){ .halves{ grid-template-columns:1fr; } }
.halves .frame{ border-radius:0; aspect-ratio:5/4; }

/* ---- Real artifact images: drop an <img> straight into a .frame (replacing its
   .frame__ph placeholder) and it becomes click-to-zoom automatically — no other
   markup change needed. Sized to fill the frame like a real screenshot, not
   letterboxed like the placeholder's centered icon+caption. */
.frame > img{ position:relative; z-index:1; width:100%; height:100%; object-fit:cover; display:block; cursor:zoom-in; }
.frame--has-image::after{ content:none; } /* the graph-paper texture is only for empty placeholders */
.frame--has-image .frame__tag{ background:color-mix(in srgb, var(--night) 60%, transparent); color:#fff; border-color:rgba(255,255,255,.2); }

.lightbox{ position:fixed; inset:0; z-index:300; display:flex; align-items:center; justify-content:center;
  padding:clamp(20px,5vw,64px); background:rgba(10,9,11,.94); backdrop-filter:blur(8px);
  opacity:0; pointer-events:none; transition:opacity .3s var(--ease); }
.lightbox.is-open{ opacity:1; pointer-events:auto; }
.lightbox__img{ max-width:100%; max-height:100%; display:block; border-radius:var(--r-md);
  box-shadow:var(--shadow-lg); cursor:zoom-in; transition:transform .35s var(--ease); touch-action:pinch-zoom; }
.lightbox__img.is-zoomed{ cursor:zoom-out; transform:scale(1.7); }
.lightbox__close{ position:absolute; top:clamp(14px,3vw,28px); right:clamp(14px,3vw,28px); z-index:1;
  width:42px; height:42px; border-radius:50%; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.18);
  color:#fff; display:grid; place-items:center; cursor:pointer; transition:background-color .2s var(--ease); }
.lightbox__close:hover{ background:rgba(255,255,255,.14); }
body.lb-locked{ overflow:hidden; }

/* ---- Principle / lesson cards ---- */
.principles{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; }
.principle{ background:var(--paper); padding:26px 24px; }
.principle__n{ font-family:var(--mono); font-size:var(--fs-label); color:var(--accent); letter-spacing:.05em; text-transform:uppercase; margin-bottom:12px; }
.principle__t{ font-size:clamp(19px,2.2vw,23px); font-weight:600; letter-spacing:-.02em; line-height:1.16; margin-bottom:10px; }
.principle p{ font-size:var(--fs-body-sm); color:var(--ink-soft); margin:0; }

/* ---- Archive gallery: restrained, no card-lift cliche, always a clean grid ---- */
.archive{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; }
.archive--2{ grid-template-columns:repeat(2,1fr); }
@media (max-width:680px){ .archive{ grid-template-columns:repeat(2,1fr); } }
.arch{ background:var(--paper); padding:20px; display:flex; flex-direction:column; gap:9px; min-height:112px; transition:background-color .25s var(--ease); }
.arch:hover{ background:var(--accent-wash); }
.arch__ico{ width:24px; height:24px; color:var(--accent); opacity:.8; }
.arch__t{ font-size:var(--fs-body-sm); font-weight:600; letter-spacing:-.01em; }
.arch__m{ font-family:var(--mono); font-size:var(--fs-label-sm); letter-spacing:.07em; text-transform:uppercase; color:var(--ink-faint); font-weight:500; margin-top:auto; }

/* ---- Divider label ---- */
.divider{ display:flex; align-items:center; gap:16px; color:var(--ink-faint); font-family:var(--mono); font-size:var(--fs-label); font-weight:500; letter-spacing:.09em; text-transform:uppercase; }
.divider::after{ content:""; height:1px; background:var(--line); flex:1; }

/* ---- Closing: left-aligned conviction, not a centered banner ---- */
.closing{ background:var(--night); color:var(--night-ink); }
.closing .wrap{ padding-block:clamp(76px,13vw,150px); }
.closing__q{ font-size:clamp(25px,3.8vw,44px); font-weight:600; line-height:1.2; color:#fff; letter-spacing:-.028em; max-width:22ch; }
.closing__q .u{ color:var(--accent-2); font-style:italic; }

/* ---- Next chapter ---- */
.nextcs{ display:block; background:var(--paper-2); border-top:1px solid var(--line); }
.nextcs a{ display:flex; align-items:center; justify-content:space-between; gap:24px; padding-block:clamp(36px,6vw,56px); color:var(--ink); }
.nextcs__text{ display:block; }
.nextcs .lab{ display:block; font-family:var(--mono); font-size:var(--fs-label); font-weight:500; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:11px; }
.nextcs .t{ display:block; font-size:clamp(26px,4vw,40px); font-weight:600; letter-spacing:-.03em; }
.nextcs .arrow{ flex:0 0 auto; width:46px; height:46px; border-radius:50%; border:1px solid var(--line-strong); display:grid; place-items:center; transition:.3s var(--ease); }
.nextcs a:hover .arrow{ background:var(--accent); border-color:var(--accent); color:#fff; transform:translateX(5px); }

/* ---- Footer ---- */
.foot{ padding-block:30px; border-top:1px solid var(--line); font-family:var(--mono); font-size:var(--fs-caption); letter-spacing:.02em; }
.foot .wrap-max{ display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
.foot__name{ color:var(--ink-soft); }
.foot__back{ display:inline-flex; align-items:center; gap:8px; color:var(--ink-faint); transition:color .25s var(--ease); }
.foot__back:hover{ color:var(--accent); }
.foot__links{ display:flex; align-items:center; gap:20px; }
.foot__home{ display:inline-flex; align-items:center; gap:7px; color:var(--ink-faint); text-decoration:none; transition:color .25s var(--ease); }
.foot__home:hover{ color:#00FF73; }
.lander .foot__home{ color:var(--night-soft); }

/* utilities */
.figc{ margin-top:13px; font-size:var(--fs-caption); color:var(--ink-faint); max-width:56ch; }
.mt-s{ margin-top:18px; } .mt-m{ margin-top:32px; } .mt-l{ margin-top:50px; } .mt-xl{ margin-top:72px; }
.measure{ max-width:34ch; }

/* ============================================================================
   RESPONSIVE: web + mobile breakpoints
   ========================================================================== */

@media (max-width:860px){
  .triad{ grid-template-columns:1fr; gap:28px; }
  .shot--split, .shot--split.rev{ grid-template-columns:1fr; }
  .shot--split.rev .shot__copy{ order:0; }
  .dir__body{ grid-template-columns:1fr; }
}

@media (max-width:680px){
  .principles{ grid-template-columns:1fr; }
  .dir .cols{ grid-template-columns:1fr; gap:10px; }
  .omi{ grid-template-columns:1fr; gap:2px 0; }
  .omi dt{ margin-top:12px; }
  .scorecard{ grid-template-columns:1fr 1fr; }
}

@media (max-width:560px){
  body{ font-size:16.5px; }
  .kicker{ margin-bottom:18px; }
  .sec-head{ max-width:100%; }

  .flow:not(.flow--v){ flex-direction:column; align-items:stretch; }
  .flow:not(.flow--v) .node{ width:100%; flex:1 1 auto; }
  .flow:not(.flow--v) .arrow{ padding:6px 0; align-self:flex-start; margin-left:19px; }
  .flow:not(.flow--v) .arrow svg{ transform:rotate(90deg); }
  .flow--v{ max-width:100%; }

  .stage{ grid-template-columns:auto 1fr; gap:12px; }
  .stage__tag{ grid-column:2; }

  .hero__eyebrow{ gap:8px; }
  .foot .wrap-max{ flex-direction:column; gap:8px; }
  .dir__top{ flex-direction:column; }
}