/* ===========================================================================
   Big Picture Bio — shared site styles
   Design language reused from the interactive-scroll-imagery build.
   Tokens + components + multi-page nav/footer + solution-page layout.
   =========================================================================== */

:root{
  --bg:#0A0A0A;
  --bg-2:#0E0C10;
  --ink:#F2EFEA;
  --ink-2:#E0DCD2;
  --muted:#B0ACA4;
  --faint:#8A857E;
  --line:#2A2A30;
  --line-2:#3A3A42;
  --accent:#F08AB8;
  --accent-2:#F19A6C;

  /* light band — pale wash drawn from the muller palette (amber → blush → mauve) */
  --light-band:linear-gradient(135deg,#F6EFE1 0%,#F3E7E2 54%,#EEDFE7 100%);
  --light-ink:#241F1B;
  --light-ink-2:#4A443C;
  --light-muted:#8A8175;
  --light-accent:#A5286A;
  --light-line:#E1D7CB;

  --serif:"Source Serif 4","Iowan Old Style",Georgia,serif;
  --sans:"Geist",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"Geist Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;

  --maxw:1200px;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; background:var(--bg); }
html{ scroll-behavior:smooth; }
body{
  min-height:100vh;
  color:var(--ink);
  font-family:var(--sans);
  font-feature-settings:"ss01","cv11";
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{ color:inherit; }
img{ max-width:100%; }

/* Page fade-in / between-page transition ---------------------------------- */
body{ opacity:0; transition:opacity .5s ease; }
body.ready{ opacity:1; }
body.leaving{ opacity:0; }

/* ---------- Shared eyebrow / type helpers ---------- */
.eyebrow{
  font-family:var(--mono);
  font-size:clamp(11px,.85vw,13px);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--accent);
  font-weight:500;
  line-height:1.4;
  display:flex; align-items:center; gap:14px;
  text-wrap:balance;
}
.eyebrow .bar{ width:36px; height:1px; background:var(--accent); flex:0 0 36px; }

.accent{ color:var(--accent); }
.serif{ font-family:var(--serif); }

/* ===========================================================================
   NAV  (injected by site.js into #site-nav)
   =========================================================================== */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:80;
  display:flex; justify-content:space-between; align-items:center;
  padding:clamp(14px,1.8vw,22px) clamp(20px,5vw,64px);
  background:linear-gradient(180deg, rgba(10,10,10,.82) 0%, rgba(10,10,10,0) 100%);
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
  transition:background .3s ease;
}
.nav.solid{ background:rgba(10,10,10,.92); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.nav .wordmark{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(17px,1.4vw,21px); letter-spacing:-.005em;
  white-space:nowrap; color:var(--ink); text-decoration:none;
}
.nav .wordmark em{ font-style:italic; color:var(--accent); }

.nav-links{ display:flex; align-items:center; gap:clamp(18px,2vw,34px); }
.nav-links a, .nav-item > button{
  font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-2); text-decoration:none; background:none; border:0; cursor:pointer;
  padding:6px 0; transition:color .18s ease; white-space:nowrap;
}
.nav-links a:hover, .nav-item > button:hover, .nav-item.open > button{ color:var(--accent); }
.nav-links a.current{ color:var(--ink); border-bottom:1px solid var(--accent); }
.nav-item.current > button{ color:var(--ink); }
.nav-item.current > button .chev{ border-color:var(--accent); }

.nav-item{ position:relative; }
.nav-item > button{ display:inline-flex; align-items:center; gap:7px; }
.nav-item > button .chev{ width:8px; height:8px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg) translateY(-1px); transition:transform .2s ease; }
.nav-item.open > button .chev{ transform:rotate(225deg) translateY(-1px); }
.nav-menu{
  position:absolute; top:calc(100% + 12px); right:0; min-width:290px;
  background:rgba(14,12,16,.97); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  border:1px solid var(--line-2); border-radius:14px; padding:8px;
  box-shadow:0 30px 80px rgba(0,0,0,.55);
  opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity .2s ease, transform .2s ease, visibility .2s;
}
.nav-item.open .nav-menu{ opacity:1; visibility:visible; transform:translateY(0); }
.nav-menu a{
  display:block; padding:11px 14px; border-radius:9px;
  font-family:var(--sans); font-size:14px; letter-spacing:0; text-transform:none;
  color:var(--ink-2); text-decoration:none;
}
.nav-menu a small{ display:block; font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); margin-top:3px; }
.nav-menu a:hover{ background:rgba(240,138,184,.10); color:var(--ink); }
.nav-menu a:hover small{ color:var(--accent); }

.nav-toggle{ display:none; }

@media (max-width:860px){
  .nav-links{
    position:fixed; inset:0 0 auto 0; top:0; flex-direction:column; align-items:flex-start; gap:6px;
    padding:88px clamp(20px,6vw,40px) 32px; background:rgba(10,10,10,.98);
    transform:translateY(-100%); transition:transform .35s ease; height:auto;
  }
  .nav.menu-open .nav-links{ transform:translateY(0); }
  .nav-links a, .nav-item > button{ font-size:15px; padding:10px 0; }
  .nav-item{ width:100%; }
  .nav-menu{ position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:0; background:none; padding:0 0 0 12px; min-width:0; }
  .nav-item .nav-menu{ display:none; } .nav-item.open .nav-menu{ display:block; }
  .nav-toggle{
    display:inline-flex; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; z-index:90; padding:6px;
  }
  .nav-toggle span{ width:24px; height:2px; background:var(--ink); transition:transform .25s ease, opacity .2s ease; }
  .nav.menu-open .nav-toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav.menu-open .nav-toggle span:nth-child(2){ opacity:0; }
  .nav.menu-open .nav-toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
}

/* ===========================================================================
   HERO  (solution / inner-page cinematic hero — short, ~88vh)
   =========================================================================== */
.hero{ position:relative; min-height:min(88vh,760px); display:flex; overflow:hidden; background:#160f1c; }
.hero-bg{ position:absolute; inset:0; z-index:0; }
.hero-bg img{ width:100%; height:100%; object-fit:cover; display:block; }
.hero-muller{ position:absolute; inset:0; }
.hero-muller svg{ width:100%; height:100%; }
.hero-scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(10,10,10,.86) 0%, rgba(10,10,10,.5) 34%, rgba(10,10,10,.05) 66%),
    linear-gradient(0deg, rgba(10,10,10,.72) 0%, rgba(10,10,10,0) 44%);
}
.hero-inner{
  position:relative; z-index:2; align-self:flex-end;
  padding:clamp(96px,14vh,150px) clamp(24px,7vw,120px) clamp(48px,8vh,88px);
  width:min(720px,92vw);
}
.hero h1{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(30px,4.2vw,56px); line-height:1.04; letter-spacing:-.022em;
  margin:clamp(16px,2vw,24px) 0 0; color:var(--ink); text-wrap:balance;
}
.hero h1 .italic{ font-style:italic; color:var(--accent); }
.hero .sub{
  font-family:var(--serif); font-weight:300; font-style:italic;
  font-size:clamp(17px,1.6vw,23px); line-height:1.38; color:var(--ink-2);
  margin:clamp(18px,2.2vw,26px) 0 0; max-width:52ch; text-wrap:pretty;
}
.hero .statline{ margin-top:clamp(22px,3vw,34px); }

/* ===========================================================================
   PAGE BODY LAYOUT
   =========================================================================== */
.wrap{ max-width:var(--maxw); margin:0 auto 0 0; padding:0 clamp(24px,7vw,120px); }
.block{ padding:clamp(56px,9vh,120px) 0; position:relative; }
.block.tight{ padding:clamp(36px,6vh,72px) 0; }
.block.pad-top{ padding-top:clamp(116px,15vh,180px); }
.block-head{ max-width:60ch; }
.block-head .eyebrow{ margin-bottom:16px; }
h2.head{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(23px,2.6vw,36px); line-height:1.1; letter-spacing:-.015em;
  margin:0; color:var(--ink); text-wrap:balance;
}
h2.head .accent{ font-style:italic; }
.lead{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(17px,1.5vw,22px); line-height:1.5; color:var(--ink-2);
  margin:clamp(14px,1.6vw,22px) 0 0; max-width:56ch; text-wrap:pretty;
}
.lead .hl{ color:var(--ink); font-style:italic; }
p.body{ font-family:var(--sans); font-size:clamp(15px,1.1vw,17px); line-height:1.6; color:var(--ink-2); max-width:56ch; margin:16px 0 0; }
.footnote{ font-family:var(--sans); font-size:12.5px; line-height:1.5; color:var(--faint); margin-top:18px; max-width:60ch; }

/* two-column content row: text + exhibit */
.row{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,80px); align-items:center; }
.row.align-top{ align-items:start; }
.row.narrow-text{ grid-template-columns:1.3fr .7fr; }
.row > .col-text{ min-width:0; }
.row > .col-exhibit{ min-width:0; }
@media (max-width:900px){ .row{ grid-template-columns:1fr; gap:36px; } .row.reverse .col-exhibit{ order:-1; } }

/* deliverables list */
.deliverables{ list-style:none; margin:clamp(20px,2.4vw,30px) 0 0; padding:0; display:grid; gap:14px; }
.deliverables--wide{ grid-template-columns:1fr 1fr; gap:14px clamp(28px,4vw,64px); }
@media (max-width:860px){ .deliverables--wide{ grid-template-columns:1fr; } }
.deliverables li{
  position:relative; padding-left:30px;
  font-family:var(--sans); font-size:clamp(15px,1.1vw,17px); line-height:1.5; color:var(--ink-2);
}
.deliverables li::before{
  content:""; position:absolute; left:0; top:.5em; width:12px; height:7px;
  border-left:2px solid var(--accent); border-bottom:2px solid var(--accent);
  transform:rotate(-45deg); transform-origin:center;
}
.deliverables li b{ color:var(--ink); font-weight:600; }

/* audience lanes (two-block split, e.g. Investment & partnering DD) */
.lanes{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,2.4vw,32px); margin-top:clamp(24px,3vw,40px); }
@media (max-width:820px){ .lanes{ grid-template-columns:1fr; } }
.lane{
  border:1px solid var(--line-2); border-radius:16px; padding:clamp(20px,2vw,28px);
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
}
.lane h3{ font-family:var(--serif); font-weight:400; font-size:clamp(19px,1.6vw,24px); margin:0 0 4px; color:var(--ink); }
.lane .who{ font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); margin:0 0 12px; }
.lane p{ font-family:var(--sans); font-size:14.5px; line-height:1.55; color:var(--ink-2); margin:0; }

.lanes.lanes--four{ grid-template-columns:1fr 1fr; }

/* case list — worked calls and designs, one row each */
.caselist{ list-style:none; margin:clamp(26px,3.4vw,44px) 0 0; padding:0; }
.caseitem{
  display:grid;
  grid-template-columns:minmax(180px,220px) 1fr;
  column-gap:clamp(24px,3vw,48px);
  row-gap:8px;
  padding:clamp(20px,2.4vw,28px) 0;
  border-top:1px solid var(--line);
}
.caseitem:last-child{ border-bottom:1px solid var(--line); }
.case-title{
  font-family:var(--sans);
  font-size:clamp(16px,1.3vw,19px);
  font-weight:500;
  letter-spacing:-.01em;
  color:var(--ink);
  margin:0;
}
.case-sub{
  grid-column:1;
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--faint);
  margin:4px 0 0;
}
.case-body{
  grid-column:2;
  grid-row:1 / span 2;
  font-family:var(--sans);
  font-size:clamp(14px,1.1vw,16px);
  line-height:1.6;
  color:var(--ink-2);
  margin:0;
  max-width:62ch;
}
.case-body b{ color:var(--ink); font-weight:500; }
.case-tag{
  display:inline-block;
  margin-top:12px;
  padding:4px 11px 5px;
  border:1px solid;
  border-radius:9px;
  font-family:var(--mono);
  font-size:8.5px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.case-tag.is-hit{ color:var(--accent); border-color:color-mix(in srgb,var(--accent) 45%,transparent); background:color-mix(in srgb,var(--accent) 11%,transparent); }
.case-tag.is-miss{ color:rgba(242,239,234,.5); border-color:rgba(255,255,255,.16); }
@media (max-width:760px){
  .caseitem{ grid-template-columns:1fr; }
  .case-body{ grid-column:1; grid-row:auto; margin-top:8px; }
  .lanes.lanes--four{ grid-template-columns:1fr; }
}

/* two real trials side by side, with the variable that separated them */
.trialpair{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px,2.4vw,32px); margin-top:clamp(32px,4vw,52px); }
@media (max-width:860px){ .trialpair{ grid-template-columns:1fr; } }
.trialcard{
  border:1px solid var(--line-2);
  border-radius:18px;
  padding:clamp(20px,2.2vw,28px);
  background:rgba(8,9,12,.55);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
}
.trialcard-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:20px; }
.trialcard-head .case-tag{ margin-top:0; flex:none; }
.trial-name{ font-family:var(--sans); font-size:clamp(17px,1.5vw,21px); font-weight:500; letter-spacing:-.01em; color:var(--ink); margin:0; }
.trial-sub{ font-family:var(--mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); margin:6px 0 0; }
.chart-label{
  font-family:var(--mono); font-size:8.5px; letter-spacing:.15em; text-transform:uppercase;
  color:rgba(242,239,234,.4); margin:22px 0 8px;
}
.chart-label:first-of-type{ margin-top:0; }
.chart-key{ display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:10px; font-family:var(--mono); font-size:8.5px; letter-spacing:.08em; text-transform:uppercase; }
.chart-key span{ display:inline-flex; align-items:center; gap:6px; }
.chart-key i{ width:7px; height:7px; border-radius:2px; background:currentColor; }
.chart-note{ margin:20px 0 0; font-family:var(--sans); font-size:13.5px; line-height:1.55; color:var(--ink-2); }
.chart-note b{ color:var(--ink); font-weight:500; }
.trialdiff{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:10px 22px;
  margin-top:clamp(22px,2.8vw,34px);
  padding:clamp(18px,2vw,24px) clamp(20px,2.2vw,28px);
  border:1px solid color-mix(in srgb,var(--accent) 34%,transparent);
  border-radius:16px;
  background:color-mix(in srgb,var(--accent) 7%,transparent);
}
.trialdiff-k{ font-family:var(--mono); font-size:9.5px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); flex:none; }
.trialdiff p{ font-family:var(--sans); font-size:clamp(14px,1.15vw,16.5px); line-height:1.6; color:var(--ink); margin:0; flex:1 1 420px; }
.trialdiff p b{ color:var(--accent); font-weight:500; }

/* what the model weighs — a compact grid of factors */
.factors{ list-style:none; margin:clamp(26px,3.4vw,44px) 0 0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,26px); }
@media (max-width:900px){ .factors{ grid-template-columns:1fr 1fr; } }
@media (max-width:580px){ .factors{ grid-template-columns:1fr; } }
.factor{ padding-top:16px; border-top:1px solid var(--line); }
.factor b{
  display:block;
  font-family:var(--mono);
  font-size:10px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent);
}
.factor span{
  display:block;
  margin-top:9px;
  font-family:var(--sans);
  font-size:14px;
  line-height:1.5;
  color:var(--ink-2);
}

/* The held-back factors carry no text at all: these are drawn placeholders, so
   nothing is recoverable from the page source. The veil above them does the
   rest of the work visually. */
.factor--held b,
.factor--held span{
  display:block;
  border-radius:3px;
  background:linear-gradient(90deg, rgba(240,138,184,.20), rgba(242,239,234,.10));
}
.factor--held b{ height:9px; width:58%; }
.factor--held span{ height:9px; margin-top:12px; width:100%; }
.factor--held span::after{
  content:"";
  display:block;
  height:9px;
  margin-top:8px;
  width:72%;
  border-radius:3px;
  background:linear-gradient(90deg, rgba(242,239,234,.10), rgba(242,239,234,.04));
}
.factors-wrap{ position:relative; }
.factors-veil{
  position:absolute;
  left:0; right:0; bottom:0;
  height:58%;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding-bottom:clamp(14px,2vh,26px);
  pointer-events:none;
  -webkit-backdrop-filter:blur(7px);
  backdrop-filter:blur(7px);
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 42%);
  mask-image:linear-gradient(180deg, transparent 0%, #000 42%);
  background:linear-gradient(180deg, rgba(8,9,12,0) 0%, rgba(8,9,12,.45) 46%, rgba(8,9,12,.82) 100%);
}
.factors-veil p{
  pointer-events:auto;
  margin:0;
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
}
.factors-veil a{ color:var(--accent); text-decoration:none; border-bottom:1px solid color-mix(in srgb,var(--accent) 36%,transparent); padding-bottom:2px; }
.factors-veil a:hover{ border-bottom-color:var(--accent); }

/* closing offer, in place of the old lead-magnet forms */
.offer{ max-width:64ch; margin-top:clamp(26px,4vh,46px); }
.offer p{ font-family:var(--sans); font-size:clamp(15px,1.25vw,18px); line-height:1.62; color:var(--ink-2); margin:0 0 18px; }

/* KPI band */
.kpis{ display:flex; flex-wrap:wrap; gap:clamp(24px,4vw,64px); }
.statline{ display:flex; align-items:baseline; gap:16px; }
.statline .n{ font-family:var(--serif); font-weight:300; font-size:clamp(44px,6vw,86px); line-height:.82; color:var(--accent); letter-spacing:-.03em; }
.statline .l{ font-family:var(--sans); font-size:clamp(13px,1vw,15px); line-height:1.35; color:var(--ink-2); max-width:22ch; }
.kpi{ display:flex; flex-direction:column; gap:8px; }
.kpi .k{ font-family:var(--serif); font-weight:300; font-size:clamp(30px,3.4vw,46px); line-height:1; color:var(--ink); letter-spacing:-.02em; }
.kpi .k .accent{ color:var(--accent); }
.kpi .d{ font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }

/* role chips */
.roles{ display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
.roles span{
  font-family:var(--mono); font-size:11px; letter-spacing:.06em;
  color:var(--ink-2); border:1px solid var(--line-2); border-radius:999px; padding:8px 14px;
}

/* ===========================================================================
   PANELS / EXHIBITS  (glass card + chart)
   =========================================================================== */
.panel{
  background:rgba(14,12,16,.62); -webkit-backdrop-filter:blur(16px) saturate(1.1); backdrop-filter:blur(16px) saturate(1.1);
  border:1px solid rgba(255,255,255,.12); border-radius:18px; padding:clamp(16px,1.6vw,24px);
  box-shadow:0 30px 80px rgba(0,0,0,.5);
}
.panel-head{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:14px; }
.panel-title{ font-family:var(--mono); font-size:clamp(11px,.9vw,12.5px); letter-spacing:.13em; text-transform:uppercase; color:var(--ink); }
.panel-tag{ font-family:var(--mono); font-size:9.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--muted); border:1px solid var(--line-2); border-radius:999px; padding:3px 8px; white-space:nowrap; }
.panel svg{ width:100%; height:auto; display:block; }
.panel-legend{ display:flex; gap:16px; flex-wrap:wrap; margin-top:12px; font-family:var(--mono); font-size:10.5px; letter-spacing:.05em; color:var(--muted); }
.panel-legend span{ display:inline-flex; align-items:center; gap:7px; }
.panel-legend i{ width:15px; height:0; border-top-width:2px; border-top-style:solid; display:inline-block; }
.panel-legend i.dot{ width:8px; height:8px; border:0; border-radius:50%; }
.panel-note{ margin-top:10px; font-family:var(--sans); font-size:11.5px; line-height:1.4; color:var(--muted); }

/* Report "paper" excerpt (the worked-example centrepiece) */
.report{ position:relative; overflow:hidden; background:#F3EFE6; color:#241F1B; border-radius:12px; padding:22px 26px 30px; box-shadow:0 34px 90px rgba(0,0,0,.6); }
.report-top{ display:flex; justify-content:space-between; gap:10px; font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:#8A8175; border-bottom:1px solid #DAD3C6; padding-bottom:10px; }
.report h4{ font-family:var(--serif); font-weight:600; font-size:clamp(14px,1.15vw,16px); margin:15px 0 10px; color:#1D1915; letter-spacing:-.01em; }
.report p{ font-family:var(--serif); font-weight:400; font-size:clamp(12px,1vw,13.5px); line-height:1.62; color:#3A342C; margin:0 0 10px; }
.report .hl{ background:rgba(200,92,142,.22); box-shadow:0 0 0 1px rgba(200,92,142,.18); padding:0 2px; }
.report .callout{ margin-top:12px; border-left:3px solid #C85C8E; background:#ECE5D8; padding:10px 13px; font-family:var(--mono); font-size:11px; line-height:1.45; color:#4A2036; }

/* pipeline mini-diagram (bars) */
.pipe{ display:flex; flex-direction:column; gap:14px; }
.pipe-row{ display:grid; grid-template-columns:120px 1fr; align-items:center; gap:12px; }
.pipe-label{ font-family:var(--sans); font-size:13px; color:var(--ink); }
.pipe-label small{ display:block; font-family:var(--mono); font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-top:2px; }
.pipe-track{ position:relative; height:8px; border-radius:999px; background:rgba(255,255,255,.08); overflow:hidden; }
.pipe-fill{ position:absolute; left:0; top:0; bottom:0; border-radius:999px; background:linear-gradient(90deg,var(--accent-2),var(--accent)); }

/* ===========================================================================
   HOME — journey + solution overview cards
   =========================================================================== */
.solutions-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,1.8vw,24px); margin-top:clamp(36px,5vh,60px); }
@media (max-width:940px){ .solutions-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:620px){ .solutions-grid{ grid-template-columns:1fr; } }
.sol-card{
  display:flex; flex-direction:column; gap:12px; text-decoration:none;
  border:1px solid var(--line-2); border-radius:16px; padding:clamp(20px,1.8vw,26px);
  background:linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,0));
  transition:border-color .2s ease, transform .2s ease, background .2s ease;
}
.sol-card:hover{ border-color:var(--accent); transform:translateY(-3px); background:rgba(240,138,184,.05); }
.sol-card .k{ font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); }
.sol-card h3{ font-family:var(--serif); font-weight:400; font-size:clamp(19px,1.7vw,24px); line-height:1.12; margin:0; color:var(--ink); }
.sol-card p{ font-family:var(--sans); font-size:14px; line-height:1.5; color:var(--muted); margin:0; }
.sol-card .go{ margin-top:auto; font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2); display:inline-flex; align-items:center; gap:8px; }
.sol-card:hover .go{ color:var(--accent); }
.sol-card .go::after{ content:"→"; }

/* ===========================================================================
   FULL-BLEED SCRIM SECTION (texture between blocks + team/company)
   =========================================================================== */
.section{ position:relative; padding:clamp(72px,12vh,150px) clamp(24px,7vw,120px); overflow:hidden; }
.section-bg{ position:absolute; inset:0; z-index:0; }
.section-bg img{ width:100%; height:100%; object-fit:cover; display:block; filter:brightness(.42) saturate(1.05); }
.section-bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,10,10,.78) 0%, rgba(10,10,10,.66) 45%, rgba(10,10,10,.82) 100%); }
.section > *:not(.section-bg){ position:relative; z-index:1; }
.section-inner{ max-width:var(--maxw); margin:0 auto 0 0; }
.section-head{ max-width:760px; margin:0 0 clamp(40px,6vh,64px); text-align:left; }
.section-head .eyebrow{ justify-content:flex-start; margin-bottom:18px; }
.section-head h2{ font-family:var(--serif); font-weight:300; font-size:clamp(23px,2.6vw,36px); line-height:1.1; letter-spacing:-.015em; margin:0; color:var(--ink); text-wrap:balance; }
.section-head p{ font-family:var(--serif); font-weight:300; font-size:clamp(16px,1.4vw,20px); line-height:1.5; color:var(--ink-2); margin:16px 0 0; max-width:60ch; }

/* ===========================================================================
   PROBLEM  (light section — customer problem, above "the decision")
   =========================================================================== */
.problem{ background:var(--light-band); color:var(--light-ink); padding:clamp(52px,9vh,104px) clamp(24px,7vw,120px); }
.problem-inner{ max-width:var(--maxw); margin:0 auto 0 0; }
.problem .eyebrow{ color:var(--light-accent); }
.problem .eyebrow .bar{ background:var(--light-accent); }
.problem-head{ font-family:var(--serif); font-weight:300; font-size:clamp(22px,2.6vw,34px); line-height:1.14; letter-spacing:-.015em; color:#1D1915; margin:16px 0 0; max-width:26ch; text-wrap:balance; }
.problem-head .accent{ font-style:italic; color:#A5286A; }
.problem-lead a{ color:#A5286A; text-decoration:none; border-bottom:1px solid rgba(165,40,106,.32); }
.problem-lead a:hover{ border-bottom-color:#A5286A; }
.problem-lead{ font-family:var(--serif); font-weight:400; font-size:clamp(16px,1.4vw,20px); line-height:1.5; color:#3A342C; margin:16px 0 0; max-width:60ch; text-wrap:pretty; }
.problem-points{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,44px); margin-top:clamp(30px,4.5vh,52px); }
@media (max-width:760px){ .problem-points{ grid-template-columns:1fr; gap:22px; } }
.ppoint .pn{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:#A5286A; }
.ppoint p{ font-family:var(--sans); font-size:14.5px; line-height:1.55; color:#3A342C; margin:10px 0 0; border-top:1px solid #D8D0C2; padding-top:14px; }
.ppoint p b{ color:#1D1915; font-weight:600; }
.problem-for{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--light-muted); margin:clamp(30px,4.5vh,48px) 0 0; }
.problem-for b{ color:#5A5248; font-weight:500; }

/* ---------------------------------------------------------------------------
   .lightband — generic light section for alternating rhythm (reuses standard
   components; overrides their colours for dark-on-light). Same wash as .problem.
   --------------------------------------------------------------------------- */
.lightband{ background:var(--light-band); color:var(--light-ink); }
.lightband .eyebrow{ color:var(--light-accent); }
.lightband .eyebrow .bar{ background:var(--light-accent); }
.lightband h2.head, .lightband .section-head h2{ color:var(--light-ink); }
.lightband h2.head .accent, .lightband .section-head h2 .accent{ color:var(--light-accent); }
.lightband .lead{ color:var(--light-ink-2); }
.lightband p.body{ color:var(--light-ink-2); }
/* solution cards on a light band */
.lightband .sol-card{ background:rgba(255,255,255,.5); border-color:rgba(70,50,30,.14); }
.lightband .sol-card:hover{ background:rgba(255,255,255,.8); border-color:var(--light-accent); transform:translateY(-3px); }
.lightband .sol-card .k{ color:var(--light-accent); }
.lightband .sol-card h3{ color:var(--light-ink); }
.lightband .sol-card p{ color:#6A6258; }
.lightband .sol-card .go{ color:var(--light-ink-2); }
.lightband .sol-card:hover .go{ color:var(--light-accent); }
.problem .statline .n, .lightband .statline .n{ color:var(--light-accent); }
.problem .statline .l, .lightband .statline .l{ color:var(--light-ink-2); }
.problem .deliverables li, .lightband .deliverables li{ color:var(--light-ink-2); }
.problem .deliverables li b, .lightband .deliverables li b{ color:var(--light-ink); }
.problem .deliverables li::before, .lightband .deliverables li::before{ border-color:var(--light-accent); }
.problem .body, .lightband p.body{ color:var(--light-ink-2); }
.problem .footnote, .lightband .footnote{ font-family:var(--sans); font-size:12.5px; line-height:1.5; color:var(--light-muted); margin-top:18px; max-width:60ch; }

/* ===========================================================================
   LEAD MAGNET  (email capture)
   =========================================================================== */
.leadmag{ position:relative; }
.leadmag .lm-card{
  background:rgba(14,12,16,.6); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  border:1px solid var(--line-2); border-radius:20px; padding:clamp(26px,3.2vw,44px);
  display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(28px,4vw,56px); align-items:center;
}
@media (max-width:820px){ .leadmag .lm-card{ grid-template-columns:1fr; gap:28px; } }
/* Two-up: an example-report download card beside the question card */
.leadmag .lm-pair{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,2.4vw,32px); align-items:stretch; }
@media (max-width:900px){ .leadmag .lm-pair{ grid-template-columns:1fr; } }
.leadmag .lm-pair .lm-card{ grid-template-columns:1fr; gap:clamp(16px,2vw,24px); align-content:start; }
.leadmag .lm-report{ align-content:start; }
.leadmag .lm-eyebrow{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); }
.leadmag h2{ font-family:var(--serif); font-weight:300; font-size:clamp(21px,2.2vw,30px); line-height:1.14; letter-spacing:-.015em; margin:12px 0 0; color:var(--ink); text-wrap:balance; }
.leadmag p{ font-family:var(--sans); font-size:14.5px; line-height:1.55; color:var(--ink-2); margin:14px 0 0; max-width:44ch; }
.leadmag form{ display:grid; gap:12px; }
.leadmag label{ font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.leadmag input, .leadmag textarea{
  width:100%; font-family:var(--sans); font-size:15px; color:var(--ink);
  background:rgba(255,255,255,.04); border:1px solid var(--line-2); border-radius:11px; padding:13px 15px;
  transition:border-color .2s ease;
}
.leadmag input::placeholder, .leadmag textarea::placeholder{ color:var(--faint); }
.leadmag input:focus, .leadmag textarea:focus{ outline:none; border-color:var(--accent); }
.leadmag textarea{ min-height:92px; resize:vertical; }
.leadmag .submit{
  display:inline-flex; align-items:center; justify-content:center; gap:9px; cursor:pointer;
  font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:#2A1020;
  background:linear-gradient(120deg,var(--accent-2),var(--accent)); border:0; border-radius:999px; padding:14px 22px;
  transition:filter .2s ease, transform .15s ease;
}
.leadmag .submit:hover{ filter:brightness(1.06); transform:translateY(-1px); }
.leadmag .consent{ font-family:var(--sans); font-size:11.5px; line-height:1.4; color:var(--faint); margin-top:2px; }
.leadmag .consent a{ color:var(--muted); }
.leadmag .lm-done{ font-family:var(--serif); font-style:italic; font-size:18px; color:var(--ink-2); }

/* Light variant — lead magnet as an alternating light band */
.leadmag.on-light{ background:var(--light-band); }
.leadmag.on-light .lm-card{ background:rgba(255,255,255,.6); border-color:rgba(70,50,30,.14); box-shadow:0 30px 80px rgba(90,60,40,.14); -webkit-backdrop-filter:none; backdrop-filter:none; }
.leadmag.on-light .lm-eyebrow{ color:var(--light-accent); }
.leadmag.on-light h2{ color:var(--light-ink); }
.leadmag.on-light p{ color:var(--light-ink-2); }
.leadmag.on-light label{ color:var(--light-muted); }
.leadmag.on-light input, .leadmag.on-light textarea{ background:#fff; border-color:var(--light-line); color:var(--light-ink); }
.leadmag.on-light input::placeholder, .leadmag.on-light textarea::placeholder{ color:#B4ADA1; }
.leadmag.on-light input:focus, .leadmag.on-light textarea:focus{ border-color:var(--light-accent); }
.leadmag.on-light .consent{ color:var(--light-muted); }
.leadmag.on-light .consent a{ color:#6A6258; }
.leadmag.on-light .lm-done{ color:var(--light-ink-2); }

/* ===========================================================================
   TEAM / ADVISORS  (Company page)
   =========================================================================== */
.team-grid{ max-width:900px; margin:0 auto; display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(24px,4vw,56px); }
@media (max-width:620px){ .team-grid{ grid-template-columns:1fr; } }
.member{ text-align:center; }
.member-avatar{ width:clamp(120px,14vw,168px); height:clamp(120px,14vw,168px); margin:0 auto 20px; border-radius:50%; overflow:hidden; border:1px solid var(--line-2); }
.member-avatar img{ width:100%; height:100%; object-fit:cover; filter:grayscale(.15); }
.member-name{ font-family:var(--serif); font-weight:400; font-size:clamp(19px,1.7vw,24px); color:var(--ink); margin:0; }
.member-role{ font-family:var(--mono); font-size:clamp(10px,.85vw,12px); letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin:7px 0 12px; }
.member-bio{ font-family:var(--sans); font-size:clamp(13px,1.05vw,15px); line-height:1.55; color:var(--ink-2); max-width:34ch; margin:0 auto; }

.advisors{ max-width:860px; margin:clamp(48px,7vh,80px) auto 0; }
.advisors-label{ text-align:center; font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-bottom:28px; }
.advisor-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(20px,3vw,40px); }
@media (max-width:620px){ .advisor-grid{ grid-template-columns:1fr; } }
.advisor{ display:flex; align-items:center; gap:16px; }
.advisor-avatar{ flex:0 0 auto; width:64px; height:64px; border-radius:50%; overflow:hidden; border:1px solid var(--line-2); }
.advisor-avatar img{ width:100%; height:100%; object-fit:cover; filter:grayscale(.2); }
.advisor-avatar.is-initials{
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(240,138,184,.08);
  color:var(--accent);
  font-family:var(--mono);
  font-size:15px;
  letter-spacing:.06em;
}
.advisor-name{ font-family:var(--serif); font-weight:400; font-size:17px; color:var(--ink); margin:0; }
.advisor-bio{ font-family:var(--sans); font-size:12.5px; line-height:1.5; color:var(--ink-2); margin:5px 0 0; }

/* ===========================================================================
   PIPELINE TABLE
   =========================================================================== */
.ptable{ width:100%; border-collapse:collapse; margin-top:clamp(28px,4vh,44px); }
.ptable th{ text-align:left; font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:400; padding:0 16px 12px 0; border-bottom:1px solid var(--line-2); }
.ptable td{ padding:15px 16px 15px 0; border-bottom:1px solid var(--line); vertical-align:middle; }
.ptable .partner{ font-family:var(--mono); font-size:13px; color:var(--ink); white-space:nowrap; }
.ptable .partner.internal{ color:var(--accent); }
.ptable .ind{ font-family:var(--serif); font-size:clamp(15px,1.2vw,18px); color:var(--ink); }
.ptable .ind.tbd{ font-style:italic; color:var(--muted); }
.ptable .appr{ font-family:var(--sans); font-size:13.5px; color:var(--ink-2); }
.ptable .appr.tbd{ font-style:italic; color:var(--muted); }
.ptable td.stage{ text-align:right; white-space:nowrap; }
.stage-tag{ font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; border:1px solid var(--line-2); border-radius:999px; padding:4px 10px; color:var(--muted); }
.stage-tag.design{ color:#F2B5D2; border-color:rgba(240,138,184,.5); background:rgba(240,138,184,.10); }
.stage-tag.scoping{ color:var(--accent); border-color:var(--accent); }
@media (max-width:720px){
  .ptable, .ptable tbody, .ptable tr, .ptable td{ display:block; width:100%; }
  .ptable thead{ display:none; }
  .ptable tr{ border-bottom:1px solid var(--line-2); padding:14px 0; }
  .ptable td{ border:0; padding:2px 0; }
  .ptable td.stage{ text-align:left; margin-top:6px; }
}

/* ===========================================================================
   CONTACT (warm gradient) + FOOTER
   =========================================================================== */
.contact{ position:relative; text-align:left; padding:clamp(72px,12vh,150px) clamp(24px,7vw,120px); overflow:hidden;
  background:linear-gradient(120deg,#F8DBA6 0%,#F2AC85 46%,#EC92B3 100%); }
.contact::after{ content:""; position:absolute; inset:0; z-index:0; background:radial-gradient(120% 120% at 20% 30%, rgba(255,246,231,.34) 0%, rgba(255,246,231,0) 56%); pointer-events:none; }
.contact > *{ position:relative; z-index:1; }
.contact-inner{ max-width:var(--maxw); margin:0 auto 0 0; }
.contact .eyebrow{ justify-content:flex-start; margin-bottom:22px; color:#A5286A; }
.contact .eyebrow .bar{ background:#A5286A; }
.contact h2{ font-family:var(--serif); font-weight:300; font-size:clamp(26px,3.2vw,44px); line-height:1.08; letter-spacing:-.02em; color:#3A1330; margin:0; max-width:18ch; text-wrap:balance; }
.contact h2 .accent{ font-style:italic; color:#A5286A; }
.contact-emails{ display:flex; flex-wrap:wrap; gap:14px 40px; justify-content:flex-start; margin-top:clamp(30px,4.5vh,48px); }
.contact-emails a{ font-family:var(--mono); font-size:clamp(12px,1vw,15px); letter-spacing:.03em; color:#3A1330; text-decoration:none; border-bottom:1px solid rgba(58,19,48,.35); padding-bottom:3px; transition:color .2s, border-color .2s; }
.contact-emails a:hover{ color:#A5286A; border-color:#A5286A; }

.footer{ background:var(--bg); border-top:1px solid var(--line); padding:clamp(48px,7vh,80px) clamp(24px,7vw,120px) 40px; }
.footer-inner{ max-width:var(--maxw); margin:0 auto 0 0; display:grid; grid-template-columns:1.3fr .8fr .8fr; gap:clamp(28px,4vw,56px); }
@media (max-width:980px){ .footer-inner{ grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .footer-inner{ grid-template-columns:1fr; } }
.footer .fm{ font-family:var(--serif); font-size:20px; color:var(--ink); }
.footer .fm em{ font-style:italic; color:var(--accent); }
.footer .ftag{ font-family:var(--sans); font-size:13px; line-height:1.5; color:var(--muted); margin:12px 0 0; max-width:34ch; }
.footer .fcol h4{ font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); margin:0 0 14px; font-weight:400; }
.footer .fcol a{ display:block; font-family:var(--sans); font-size:14px; color:var(--ink-2); text-decoration:none; margin-bottom:10px; }
.footer .fcol a:hover{ color:var(--accent); }
.hero-social{ display:flex; flex-wrap:wrap; gap:14px 28px; margin-top:clamp(24px,3.4vh,36px); }
.hero-social a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--ink);
  font-family:var(--mono);
  font-size:12px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  text-decoration:none;
  padding:9px 18px 10px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:999px;
  transition:color .2s ease, border-color .2s ease, background .2s ease;
}
.hero-social a::after{ content:"\2197"; font-size:11px; }
.hero-social a:hover{ color:var(--accent); border-color:var(--accent); background:rgba(240,138,184,.08); }
.footer-base .fsocial{ display:flex; gap:20px; }
.footer-base .fsocial a{ color:var(--muted); text-decoration:none; letter-spacing:.1em; text-transform:uppercase; }
.footer-base .fsocial a:hover{ color:var(--accent); }
.footer-base{ max-width:var(--maxw); margin:clamp(36px,5vh,56px) auto 0 0; padding-top:22px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; color:var(--faint); }

/* ---------- reveal on scroll ---------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; transition:none; } html{ scroll-behavior:auto; } }

/* small helpers */
.center{ text-align:center; }
.mt-s{ margin-top:16px; } .mt-m{ margin-top:28px; } .mt-l{ margin-top:44px; }
.divider{ height:1px; background:var(--line); border:0; margin:0; }

/* ===========================================================================
   HOME — THE LIVING MODEL
   One persistent scientific state, transformed through the whole narrative.
   =========================================================================== */
.home-page{ background:#08090c; }
.model-story{
  position:relative;
  background:#08090c;
  color:var(--ink);
  isolation:isolate;
}
.model-stage{ position:relative; }
.model-visual{
  position:sticky;
  top:0;
  height:100svh;
  min-height:640px;
  margin-bottom:-100svh;
  overflow:hidden;
  background:
    radial-gradient(90% 100% at 78% 52%, rgba(56,27,51,.34), transparent 70%),
    #08090c;
  z-index:0;
}
.model-visual::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  opacity:.42;
  background-image:
    linear-gradient(rgba(255,255,255,.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.032) 1px, transparent 1px);
  background-size:72px 72px;
  mask-image:linear-gradient(90deg, transparent 0%, #000 43%, #000 100%);
}
.model-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  z-index:0;
}
.model-wash{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(8,9,12,.98) 0%, rgba(8,9,12,.93) 31%, rgba(8,9,12,.44) 48%, rgba(8,9,12,0) 72%),
    linear-gradient(0deg, rgba(8,9,12,.76) 0%, rgba(8,9,12,0) 34%);
}
.model-hud{
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  font-family:var(--mono);
  text-transform:uppercase;
}
.model-hud-top{
  position:absolute;
  top:clamp(76px,10vh,104px);
  left:clamp(24px,5vw,64px);
  right:clamp(24px,5vw,64px);
  display:flex;
  justify-content:space-between;
  gap:24px;
  padding-bottom:12px;
  border-bottom:1px solid rgba(255,255,255,.11);
  color:rgba(242,239,234,.52);
  font-size:10px;
  letter-spacing:.15em;
}
.model-hud-top span:last-child{ color:var(--accent); }
.model-metrics{
  position:absolute;
  right:clamp(24px,5vw,64px);
  bottom:clamp(56px,8vh,86px);
  display:grid;
  grid-template-columns:repeat(3,minmax(112px,1fr));
  min-width:min(500px,42vw);
  border-top:1px solid rgba(255,255,255,.13);
}
.model-metrics > div{ padding:12px 14px 0 0; }
.model-metric-label{
  display:block;
  color:rgba(242,239,234,.38);
  font-size:8px;
  letter-spacing:.13em;
}
.model-metrics b{
  display:block;
  margin-top:7px;
  color:rgba(242,239,234,.88);
  font-weight:500;
  font-size:12px;
  letter-spacing:.08em;
}
.model-key{
  position:absolute;
  right:clamp(24px,5vw,64px);
  top:clamp(110px,15vh,150px);
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:8px 14px;
  max-width:430px;
  color:rgba(242,239,234,.5);
  font-size:8px;
  letter-spacing:.1em;
  transition:opacity .22s ease, visibility .22s ease;
}
.model-key span{ display:inline-flex; align-items:center; gap:6px; }
.model-key i{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--key);
  box-shadow:0 0 12px color-mix(in srgb,var(--key) 65%,transparent);
}
/* The scenes are stacked in one sticky, viewport-sized stage and cross-faded,
   rather than each scrolling past in its own block. The copy then holds still
   while the artwork behind it changes, the pinning is native so the scroll
   stays smooth, and on narrow screens the copy never travels down across the
   panel sitting below it. The height below is one viewport per scene plus a
   tail, which keeps the last scene on screen instead of handing straight over
   to the next section. */
.model-copy{ position:relative; z-index:4; height:346svh; }
.model-copy-stage{
  position:sticky;
  top:0;
  height:100svh;
  min-height:640px;
}
.model-beat{
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:100%;
  padding:clamp(94px,13vh,132px) clamp(24px,7vw,120px) clamp(64px,9vh,96px);
  display:flex;
  align-items:center;
  pointer-events:none;
}
.model-beat-inner{
  width:min(520px,36vw);
  opacity:0;
  transform:translateY(26px);
  transition:opacity .5s ease, transform .5s ease;
  text-shadow:0 1px 24px rgba(0,0,0,.4);
}
.model-beat.is-active .model-beat-inner{
  opacity:1;
  transform:none;
}
.model-beat--hero .model-beat-inner{ width:min(560px,38vw); }
.model-beat--reason .model-beat-inner{ width:min(520px,40vw); }
.model-beat--hero h1{
  margin:clamp(18px,2.4vw,30px) 0 0;
  max-width:11ch;
  font-family:var(--sans);
  font-size:clamp(38px,4.4vw,64px);
  font-weight:400;
  line-height:.98;
  letter-spacing:-.05em;
  text-wrap:balance;
}
.model-beat--hero h1 span{
  color:var(--accent);
  font-family:var(--serif);
  font-style:italic;
  font-weight:300;
  letter-spacing:-.045em;
}
.model-beat--hero p{
  max-width:55ch;
  margin:clamp(20px,2.6vw,32px) 0 0;
  color:var(--ink-2);
  font-family:var(--sans);
  font-size:clamp(15px,1.3vw,19px);
  line-height:1.55;
}
.model-scroll-cue{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:clamp(30px,4vw,52px);
  color:rgba(242,239,234,.5);
  font-family:var(--mono);
  font-size:9px;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.model-scroll-cue span{
  position:relative;
  width:52px;
  height:1px;
  overflow:hidden;
  background:rgba(255,255,255,.16);
}
.model-scroll-cue span::after{
  content:"";
  position:absolute;
  inset:0;
  background:var(--accent);
  transform:translateX(-100%);
  animation:modelCue 2.2s ease-in-out infinite;
}
@keyframes modelCue{
  0%,18%{ transform:translateX(-100%); }
  60%,100%{ transform:translateX(100%); }
}
.model-step{
  display:block;
  margin-bottom:18px;
  color:var(--accent);
  font-family:var(--mono);
  font-size:10px;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.model-beat h2{
  max-width:14ch;
  margin:0;
  color:var(--ink);
  font-family:var(--sans);
  font-size:clamp(32px,3.6vw,56px);
  font-weight:400;
  line-height:1.02;
  letter-spacing:-.045em;
  text-wrap:balance;
}
.model-beat h2 em{
  color:var(--accent);
  font-family:var(--serif);
  font-style:italic;
  font-weight:300;
}
.model-beat p{
  max-width:48ch;
  margin:22px 0 0;
  color:rgba(224,220,210,.74);
  font-family:var(--sans);
  font-size:clamp(14px,1.18vw,17px);
  line-height:1.58;
}
.model-link{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-top:14px;
  color:var(--accent);
  font-family:var(--mono);
  font-size:10px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  text-decoration:none;
  border-bottom:1px solid color-mix(in srgb,var(--accent) 38%,transparent);
  padding-bottom:3px;
  pointer-events:auto;
}
.model-link::after{ content:"\2192"; }
.model-link:hover{ border-bottom-color:var(--accent); }
.model-beat p .model-link{ display:inline-flex; }
/* combination slot machine — scene 02. Three reels, one swap at a time. */
.model-beat--reason{ justify-content:space-between; gap:clamp(28px,4vw,56px); }
.combo-slots{
  width:min(500px,38vw);
  flex:none;
  align-self:center;
  opacity:0;
  transform:translateY(26px);
  transition:opacity .5s ease, transform .5s ease;
}
.model-beat--reason.is-active .combo-slots{ opacity:1; transform:none; }
.slot-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.slot{ min-width:0; }
.slot-label{
  display:block;
  margin-bottom:8px;
  color:rgba(242,239,234,.38);
  font-family:var(--mono);
  font-size:8.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.slot-window{
  position:relative;
  height:76px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  border-radius:12px;
  background:rgba(255,255,255,.028);
  transition:border-color .3s ease, background .3s ease;
}
.slot-window.is-spinning{ border-color:color-mix(in srgb,var(--accent) 40%,transparent); }
.slot-window::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(8,9,12,.72) 0%, rgba(8,9,12,0) 26%, rgba(8,9,12,0) 74%, rgba(8,9,12,.72) 100%);
}
.slot-strip{ will-change:transform; }
.slot-item{
  display:flex;
  align-items:center;
  justify-content:center;
  height:76px;
  padding:0 9px;
  color:rgba(240,236,228,.95);
  font-family:var(--sans);
  font-size:14px;
  line-height:1.22;
  letter-spacing:-.01em;
  text-align:center;
  text-wrap:balance;
}
.slot-window.is-spinning .slot-item{ color:rgba(240,236,228,.4); }
.slot-result{
  margin-top:20px;
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,.13);
  min-height:132px;
}
.slot-verdict{
  display:inline-block;
  min-height:19px;
  padding:4px 11px 5px;
  border:1px solid transparent;
  border-radius:9px;
  font-family:var(--mono);
  font-size:9px;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.slot-verdict.is-yes{
  color:var(--accent);
  border-color:color-mix(in srgb,var(--accent) 45%,transparent);
  background:color-mix(in srgb,var(--accent) 12%,transparent);
}
.slot-verdict.is-no{ color:rgba(242,239,234,.5); border-color:rgba(255,255,255,.16); }
.slot-why{
  margin:14px 0 0;
  min-height:60px;
  color:rgba(224,220,210,.68);
  font-family:var(--sans);
  font-size:13px;
  line-height:1.5;
}
.slot-trial{
  display:block;
  margin-top:10px;
  color:rgba(242,239,234,.36);
  font-family:var(--mono);
  font-size:8.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.combo-slots.is-spinning .slot-why, .combo-slots.is-spinning .slot-trial{ opacity:0; }
.slot-why, .slot-trial, .slot-verdict{ transition:opacity .28s ease; }
.readmore{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--accent);
  font-family:var(--mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
  text-decoration:none;
  border-bottom:1px solid color-mix(in srgb,var(--light-accent) 34%,transparent);
  padding-bottom:3px;
}
.readmore::after{ content:"\2192"; }
.readmore{ border-bottom-color:color-mix(in srgb,var(--accent) 34%,transparent); }
.readmore:hover{ border-bottom-color:currentColor; }
.problem .readmore, .lightband .readmore{
  color:var(--light-accent);
  border-bottom-color:color-mix(in srgb,var(--light-accent) 34%,transparent);
}
.together-body{ max-width:62ch; margin-top:clamp(26px,4vh,40px); }
.together-body p{
  font-family:var(--sans);
  font-size:clamp(15px,1.25vw,18px);
  line-height:1.62;
  color:var(--ink-2);
  margin:0 0 18px;
}
:root[data-theme="light"] .together-body p{ color:var(--light-ink-2); }
:root[data-theme="light"] .readmore{
  color:var(--light-accent);
  border-bottom-color:color-mix(in srgb,var(--light-accent) 34%,transparent);
}
.link-row{ display:flex; flex-wrap:wrap; gap:14px 34px; margin-top:clamp(16px,2.4vh,26px); }
.model-note{
  display:flex;
  align-items:baseline;
  gap:14px;
  width:max-content;
  max-width:100%;
  margin-top:28px;
  padding:11px 14px 10px;
  border:1px solid rgba(240,138,184,.3);
  border-radius:999px;
  background:rgba(240,138,184,.06);
  font-family:var(--mono);
  text-transform:uppercase;
}
.model-note b{
  color:var(--ink);
  font-size:10px;
  font-weight:500;
  letter-spacing:.1em;
}
.model-note span{
  color:rgba(242,239,234,.45);
  font-size:8px;
  letter-spacing:.09em;
}
.model-note--risk{
  border-color:rgba(255,95,97,.42);
  background:rgba(255,95,97,.07);
}
.model-note--risk b{ color:#FF8789; }

/* Proof arrives as a clean analytical surface after the dark sequence. */
.model-proof{
  position:relative;
  z-index:6;
  padding:clamp(72px,11vh,136px) clamp(24px,7vw,120px);
  background:#F3EFE7;
  color:#1D1915;
}
.model-proof-inner{
  max-width:var(--maxw);
  margin:0 auto 0 0;
  display:grid;
  grid-template-columns:1.05fr .48fr .92fr;
  gap:clamp(34px,5vw,76px);
  align-items:end;
}
.model-proof .eyebrow{ color:#A5286A; }
.model-proof .eyebrow .bar{ background:#A5286A; }
.model-proof-copy h2{
  max-width:18ch;
  margin:18px 0 0;
  font-family:var(--sans);
  font-size:clamp(30px,3.2vw,48px);
  font-weight:400;
  line-height:1.02;
  letter-spacing:-.045em;
}
.model-proof-copy p{
  max-width:48ch;
  margin:20px 0 0;
  color:#5C554C;
  font-size:15px;
  line-height:1.6;
}
.model-proof-stat{
  padding-left:clamp(0px,2vw,28px);
  border-left:1px solid #D7CFC4;
}
.model-proof-stat strong{
  display:block;
  color:#A5286A;
  font-family:var(--sans);
  font-size:clamp(70px,8vw,116px);
  font-weight:300;
  line-height:.78;
  letter-spacing:-.07em;
}
.model-proof-stat strong span{
  margin-left:3px;
  font-family:var(--serif);
  font-style:italic;
  font-size:.42em;
}
.model-proof-stat p{
  max-width:19ch;
  margin:24px 0 0;
  color:#6D655B;
  font-size:13px;
  line-height:1.45;
}
.model-proof-chart{
  padding:20px;
  border:1px solid #DED6CB;
  border-radius:18px;
  background:rgba(255,255,255,.46);
}
.model-proof-chart .panel-title{ color:#2B2520; }
.model-proof-chart .panel-tag{ color:#8A8175; border-color:#D6CEC3; }
.model-proof-chart .panel-legend{ color:#756D64; }
.model-proof-chart svg line{ stroke:#4A443C; }

/* On the homepage these two land straight after the full-height scroll story,
   so a short band reads as squashed against it. Give each one a viewport and
   centre the content. min-height, so they still grow when the copy is longer
   or the viewport is short. Scoped to .home-page: the combinations essay
   reuses .model-solutions for its closing grid and should stay compact. */
.home-page .model-validation,
.home-page .model-solutions{
  display:flex;
  align-items:center;
  min-height:100svh;
}
.home-page .model-validation > .problem-inner,
.home-page .model-solutions > .wrap{ width:100%; }

.model-validation{
  position:relative;
  z-index:6;
}

.model-solutions{
  position:relative;
  z-index:6;
  background:#0A0A0A;
  padding-top:clamp(72px,10vh,120px);
  padding-bottom:clamp(72px,10vh,120px);
}
.model-solutions .block-head{ max-width:720px; }
.model-solutions .solutions-grid{ grid-template-columns:repeat(3,1fr); }
.model-solutions .sol-card{
  position:relative;
  overflow:hidden;
  min-height:250px;
  padding-top:clamp(24px,2.3vw,34px);
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(240,138,184,.13), transparent 52%),
    #101014;
}
.model-solutions .sol-card::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:3px;
  background:linear-gradient(90deg,#F6C982,#F19A6C,#EC7EA6,#96509A);
  opacity:.7;
}
.model-solutions .sol-card:nth-child(2n)::before{
  background:linear-gradient(90deg,#83B9FF,#96509A,#EC7EA6);
}
.model-solutions .sol-card h3{
  max-width:14ch;
  font-family:var(--sans);
  font-size:clamp(22px,2vw,29px);
  font-weight:400;
  letter-spacing:-.035em;
}

@media (max-width:1080px){
  .model-metrics{ min-width:400px; }
}
@media (max-width:1024px){
  .model-visual{ min-height:600px; }
  .model-visual::before{ opacity:.24; mask-image:none; }
  .model-wash{
    background:
      linear-gradient(180deg, rgba(8,9,12,.97) 0%, rgba(8,9,12,.92) 26%, rgba(8,9,12,.42) 40%, rgba(8,9,12,.06) 54%, rgba(8,9,12,0) 100%),
      linear-gradient(0deg, rgba(8,9,12,.7) 0%, rgba(8,9,12,0) 18%);
  }
  .model-hud-top{ top:76px; }
  .model-key{ display:none; }
  .model-metrics{
    right:20px;
    bottom:16px;
    min-width:0;
    width:calc(100% - 40px);
    grid-template-columns:repeat(3,1fr);
  }
  .model-beat{
    align-items:flex-start;
    padding:92px 24px 40px;
  }
  .model-copy-stage{ min-height:0; }
  .model-beat-inner, .combo-slots{ transform:translateY(14px); transition:opacity .34s ease, transform .34s ease; }
  .model-beat--reason{ flex-direction:column; justify-content:flex-start; gap:22px; }
  .combo-slots{ width:100%; max-width:650px; align-self:stretch; }
  .slot-window, .slot-item{ height:64px; }
  .slot-item{ font-size:13px; padding:0 6px; }
  .slot-result{ margin-top:16px; padding-top:14px; min-height:120px; }
  .slot-why{ font-size:12.5px; min-height:72px; }
  .model-beat-inner,
  .model-beat--hero .model-beat-inner,
  .model-beat--reason .model-beat-inner{
    width:100%;
    max-width:650px;
  }
  .model-beat--hero h1{ max-width:12ch; font-size:clamp(38px,9.2vw,62px); }
  .model-beat h2{ max-width:20ch; font-size:clamp(26px,6.6vw,42px); }
  .model-beat p{ font-size:14px; line-height:1.5; margin-top:14px; max-width:36ch; }
  .model-beat--hero p{ font-size:14px; line-height:1.5; margin-top:14px; max-width:40ch; }
  .model-step{ margin-bottom:12px; }
  /* Nothing to hover on a phone, and it collided with the panel below. */
  .model-scroll-cue{ display:none; }
  .model-scroll-cue{ margin-top:22px; }
  .model-proof-inner{ grid-template-columns:1fr; align-items:start; }
  .model-proof-stat{ padding:26px 0 0; border-left:0; border-top:1px solid #D7CFC4; }
  .model-proof-stat p{ max-width:32ch; }
  .model-proof-chart{ grid-column:auto; }
  .model-solutions .solutions-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:580px){
  .model-metrics > div:nth-child(1){ display:none; }
  .model-metrics{ grid-template-columns:1fr 1fr; }
  .model-note{ align-items:flex-start; flex-direction:column; gap:4px; border-radius:14px; }
  .model-solutions .solutions-grid{ grid-template-columns:1fr; }
  .model-solutions .sol-card{ min-height:220px; }
}
@media (prefers-reduced-motion:reduce){
  .model-scroll-cue span::after{ animation:none; transform:none; }
  .model-beat-inner, .combo-slots{ transition:none; }
  .slot-why, .slot-trial, .slot-verdict{ transition:none; }
}

/* ===========================================================================
   INNER PAGES — LIVING BIOLOGY
   Shared line-art heroes and model instruments for Solutions, Pipeline,
   and Company. The biology leads; the model is the lens.
   =========================================================================== */
.inner-page{ background:#08090c; }
.inner-page .hero{
  min-height:min(92svh,900px);
  height:auto;
  isolation:isolate;
  background:#08090c;
  border-bottom:1px solid rgba(255,255,255,.09);
}
.inner-page .hero-bg{
  inset:0;
  overflow:hidden;
  background:#08090c;
}
.inner-page .hero-bg > img{ display:none; }
.inner-page .hero-bg::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(90deg, rgba(8,9,12,.98) 0%, rgba(8,9,12,.9) 35%, rgba(8,9,12,.30) 57%, rgba(8,9,12,.04) 100%),
    linear-gradient(0deg, rgba(8,9,12,.74), transparent 42%);
  pointer-events:none;
}
.inner-page .hero-scrim{
  z-index:2;
  background:
    radial-gradient(80% 100% at 22% 54%, rgba(82,34,63,.18), transparent 62%),
    linear-gradient(0deg, rgba(8,9,12,.58), transparent 34%);
}
.bio-art-host{ position:relative; overflow:hidden; background:#08090c; }
.bio-art-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
}
.inner-page .hero-inner{
  position:relative;
  z-index:4;
  align-self:center;
  width:min(780px,58vw);
  padding:clamp(118px,15vh,164px) 0 clamp(82px,10vh,110px) clamp(24px,7vw,120px);
}
.inner-page .hero h1{
  max-width:12ch;
  margin-top:clamp(20px,2.5vw,30px);
  font-family:var(--sans);
  font-size:clamp(48px,6vw,88px);
  font-weight:400;
  line-height:.96;
  letter-spacing:-.058em;
}
.inner-page .hero h1 .italic{
  font-family:var(--serif);
  font-weight:300;
  letter-spacing:-.045em;
}
.inner-page .hero .sub{
  max-width:50ch;
  margin-top:clamp(22px,2.8vw,34px);
  font-family:var(--sans);
  font-size:clamp(15px,1.3vw,19px);
  font-style:normal;
  line-height:1.56;
  color:rgba(224,220,210,.76);
}
.inner-page .hero .statline{
  max-width:590px;
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,.12);
}
.inner-page .hero .statline .n{
  font-family:var(--sans);
  font-size:clamp(46px,5.5vw,78px);
  font-weight:300;
}
.inner-hero-hud{
  position:absolute;
  z-index:4;
  top:clamp(84px,11vh,110px);
  left:clamp(24px,7vw,120px);
  right:clamp(24px,5vw,64px);
  display:flex;
  justify-content:flex-end;
  gap:18px;
  padding-bottom:12px;
  border-bottom:1px solid rgba(255,255,255,.11);
  color:rgba(242,239,234,.44);
  font-family:var(--mono);
  font-size:9px;
  letter-spacing:.14em;
  text-transform:uppercase;
  pointer-events:none;
}
.inner-hero-hud span:first-child{ color:var(--accent); }

.inner-page .problem{
  padding-top:clamp(78px,11vh,132px);
  padding-bottom:clamp(72px,10vh,120px);
  background:#F3EFE7;
}
.inner-page .problem-head{
  max-width:20ch;
  font-family:var(--sans);
  font-size:clamp(34px,4.3vw,62px);
  line-height:1;
  letter-spacing:-.05em;
}
.inner-page .problem-head .accent{
  font-family:var(--serif);
  font-weight:300;
}
.inner-page .problem-lead{
  max-width:54ch;
  font-family:var(--sans);
  font-size:clamp(16px,1.35vw,19px);
  line-height:1.6;
  color:#5E564C;
}
.inner-page .problem-points{
  gap:1px;
  background:#D8D0C5;
  border:1px solid #D8D0C5;
  border-radius:16px;
  overflow:hidden;
}
.inner-page .ppoint{
  min-height:188px;
  padding:22px 24px 24px;
  background:rgba(255,255,255,.62);
}
.inner-page .ppoint .pn{
  display:block;
  font-size:10px;
}
.inner-page .ppoint p{
  margin-top:32px;
  padding-top:0;
  border:0;
}
.inner-page .problem-for{
  padding-top:20px;
  border-top:1px solid #D8D0C5;
}
.inner-page .block{
  border-top:1px solid rgba(255,255,255,.07);
}
.inner-page h2.head,
.inner-page .section-head h2{
  font-family:var(--sans);
  font-size:clamp(32px,4vw,58px);
  font-weight:400;
  line-height:1.02;
  letter-spacing:-.048em;
}
.inner-page h2.head .accent,
.inner-page .section-head h2 .accent{
  font-family:var(--serif);
  font-weight:300;
}
.inner-page .lead{
  font-family:var(--sans);
  font-size:clamp(16px,1.35vw,19px);
  line-height:1.6;
  color:rgba(224,220,210,.72);
}
.inner-page .deliverables{
  counter-reset:deliverable;
  gap:0;
}
.inner-page .deliverables li{
  counter-increment:deliverable;
  padding:17px 0 17px 54px;
  border-bottom:1px solid rgba(255,255,255,.09);
}
.inner-page .deliverables li::before{
  content:"0" counter(deliverable);
  top:20px;
  width:auto;
  height:auto;
  border:0;
  transform:none;
  color:var(--accent);
  font-family:var(--mono);
  font-size:9px;
  letter-spacing:.14em;
}

.inner-page .panel:has(.bio-instrument){
  padding:14px;
  background:
    radial-gradient(120% 100% at 100% 0%, rgba(82,34,63,.24), transparent 52%),
    rgba(10,10,14,.86);
}
.bio-instrument{
  position:relative;
  min-height:clamp(300px,34vw,430px);
  border:1px solid rgba(255,255,255,.09);
  border-radius:12px;
  overflow:hidden;
  background:#08090c;
}
.bio-instrument::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.025);
  pointer-events:none;
}
.inner-page .panel-legend i{
  width:7px;
  height:7px;
  border:0;
  border-radius:50%;
  background:currentColor;
}
.inner-page .panel-note{
  padding-top:12px;
  border-top:1px solid rgba(255,255,255,.08);
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:.07em;
  text-transform:uppercase;
}

.inner-page .section{
  border-top:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(70% 120% at 100% 50%, rgba(82,34,63,.22), transparent 64%),
    #0D0D11;
}
.inner-page .section-bg img{ display:none; }
.inner-page .section-bg{
  opacity:.65;
  background:
    repeating-radial-gradient(ellipse at 80% 50%, transparent 0 64px, rgba(240,138,184,.06) 65px 66px, transparent 67px 88px);
}
.inner-page .section-bg::after{
  background:linear-gradient(90deg, rgba(13,13,17,.98), rgba(13,13,17,.54) 68%, rgba(13,13,17,.7));
}
.inner-page .report{
  border-radius:18px;
  box-shadow:0 34px 90px rgba(0,0,0,.38);
}
.inner-page .lane{
  min-height:220px;
  padding:clamp(24px,3vw,38px);
  border-radius:18px;
  background:radial-gradient(110% 90% at 100% 0%, rgba(240,138,184,.11), transparent 58%);
}
.inner-page .lane h3{
  font-family:var(--sans);
  font-size:clamp(24px,2.2vw,32px);
  letter-spacing:-.035em;
}

.scale-run{
  display:grid;
  grid-template-columns:1fr auto 1fr auto 1fr;
  gap:clamp(12px,2vw,28px);
  align-items:center;
  max-width:760px;
  margin-top:clamp(28px,4vw,48px);
}
.scale-run > div{ min-width:0; }
.scale-run strong{
  display:block;
  color:var(--accent);
  font-family:var(--sans);
  font-size:clamp(36px,4.4vw,66px);
  font-weight:300;
  line-height:.9;
  letter-spacing:-.055em;
}
.scale-run span{
  display:block;
  max-width:17ch;
  margin-top:9px;
  color:rgba(242,239,234,.53);
  font-family:var(--mono);
  font-size:8.5px;
  line-height:1.4;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.scale-run > i{
  color:rgba(242,239,234,.28);
  font-family:var(--mono);
  font-size:18px;
  font-style:normal;
}
.pipeline-page .hero-inner{ width:min(940px,70vw); }
.pipeline-page .hero h1{ max-width:13ch; }
.pipeline-page .ptable{ border-top:1px solid var(--line-2); }
.pipeline-page .ptable tr{ transition:background .2s ease; }
.pipeline-page .ptable tbody tr:hover{ background:rgba(240,138,184,.045); }

.company-page .block-head.origin{ margin-top:clamp(40px,6vh,72px); }
.company-page .block-head.origin .body + .body{ margin-top:16px; }
.company-page .block-head .body a{
  color:var(--ink);
  text-decoration:none;
  border-bottom:1px solid var(--line-2);
}
.company-page .block-head .body a:hover{ color:var(--accent); border-bottom-color:var(--accent); }
.company-page .team-grid{
  max-width:none;
  margin:0;
  gap:18px;
}
.company-page .member{
  display:grid;
  grid-template-columns:clamp(116px,13vw,176px) 1fr;
  grid-template-rows:auto auto 1fr;
  column-gap:24px;
  align-items:start;
  min-height:240px;
  padding:22px;
  text-align:left;
  border:1px solid var(--line-2);
  border-radius:18px;
  background:radial-gradient(120% 100% at 100% 0%, rgba(240,138,184,.09), transparent 58%);
}
.company-page .member-avatar{
  grid-row:1 / 4;
  width:100%;
  height:auto;
  aspect-ratio:1;
  margin:0;
  border-radius:12px;
}
.company-page .member-name{ margin-top:4px; font-family:var(--sans); }
.company-page .member-role{ margin-top:8px; }
.company-page .member-bio{ max-width:38ch; margin:4px 0 0; }
.company-page .member-link{
  grid-column:2;
  align-self:end;
  justify-self:start;
  margin-top:16px;
  color:var(--muted);
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  text-decoration:none;
  border-bottom:1px solid var(--line-2);
  padding-bottom:3px;
}
.company-page .member-link:hover{ color:var(--accent); border-bottom-color:var(--accent); }
.company-page .advisors{
  max-width:none;
  margin-left:0;
  margin-right:0;
}
.company-page .advisors-label{ text-align:left; }
.company-page .advisor{
  padding:18px;
  border:1px solid var(--line);
  border-radius:14px;
}

@media (max-width:900px){
  .inner-page .hero{ min-height:820px; }
  .inner-page .hero-inner,
  .pipeline-page .hero-inner{
    align-self:flex-end;
    width:100%;
    padding:128px 24px 92px;
  }
  .inner-page .hero-bg::before{
    background:
      linear-gradient(0deg, rgba(8,9,12,.98) 0%, rgba(8,9,12,.9) 42%, rgba(8,9,12,.18) 76%, rgba(8,9,12,.03) 100%);
  }
  .inner-page .hero h1{ max-width:13ch; font-size:clamp(44px,9vw,72px); }
  .inner-hero-hud{ left:24px; right:24px; justify-content:space-between; }
  .inner-hero-hud span:last-child{ display:none; }
  .bio-instrument{ min-height:360px; }
}
@media (max-width:620px){
  .inner-page .hero{ min-height:760px; }
  .inner-page .hero h1{ font-size:clamp(40px,12vw,58px); }
  .inner-page .hero .statline{ display:none; }
  .inner-page .ppoint{ min-height:0; }
  .scale-run{ grid-template-columns:1fr 1fr; }
  .scale-run > i{ display:none; }
  .scale-run > div:last-child{ grid-column:1 / -1; }
  .company-page .member{ grid-template-columns:92px 1fr; min-height:0; }
  .company-page .member-avatar{ grid-row:1 / 3; }
  .company-page .member-bio{ grid-column:1 / -1; margin-top:18px; }
  .company-page .member-link{ grid-column:1 / -1; margin-top:14px; }
}
@media (prefers-reduced-motion:reduce){
  .bio-art-canvas{ transition:none; }
}

/* ===========================================================================
   THEME TOGGLE  (nav button)
   Cinematic canvas heroes stay dark in both themes; the editorial content
   flips to a warm paper light theme.
   =========================================================================== */
.theme-toggle{
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-2); background:none; border:1px solid var(--line-2); border-radius:999px;
  padding:6px 12px; cursor:pointer; white-space:nowrap;
  transition:color .18s ease, border-color .18s ease;
}
.theme-toggle:hover{ color:var(--accent); border-color:var(--accent); }
.theme-toggle::before{ content:"Light"; }
@media (max-width:860px){
  .theme-toggle{ margin-top:8px; font-size:13px; padding:8px 14px; }
}

/* ===========================================================================
   LIGHT THEME
   =========================================================================== */
:root[data-theme="light"]{
  --bg:#F5F1E8;
  --bg-2:#EFE7DA;
  --ink:#211C18;
  --ink-2:#3E382F;
  --muted:#6E665B;
  --faint:#8A8175;
  --line:#E4DBCE;
  --line-2:#D4C9B9;
  --accent:#A5286A;
  --accent-2:#B7622F;
}
:root[data-theme="light"] body,
:root[data-theme="light"] .home-page,
:root[data-theme="light"] .inner-page{ background:var(--bg); }

/* --- nav: dark scrim + light text at the top (every page opens on a dark
   canvas hero); flips to light chrome + dark text once scrolled (solid) --- */
:root[data-theme="light"] .nav .wordmark{ color:#F2EFEA; }
:root[data-theme="light"] .nav .wordmark em{ color:var(--accent); }
:root[data-theme="light"] .nav-links a,
:root[data-theme="light"] .nav-item > button{ color:#E0DCD2; }
:root[data-theme="light"] .nav-toggle span{ background:#F2EFEA; }
:root[data-theme="light"] .nav.solid{ background:rgba(245,241,232,.93); border-bottom-color:var(--line); }
:root[data-theme="light"] .nav.solid .wordmark{ color:var(--ink); }
:root[data-theme="light"] .nav.solid .nav-links a,
:root[data-theme="light"] .nav.solid .nav-item > button{ color:var(--ink-2); }
:root[data-theme="light"] .nav.solid .nav-toggle span{ background:var(--ink); }
:root[data-theme="light"] .nav.solid .nav-links a.current{ color:var(--ink); }
:root[data-theme="light"] .nav.solid .nav-links a:hover,
:root[data-theme="light"] .nav.solid .nav-item > button:hover{ color:var(--accent); }
:root[data-theme="light"] .nav-menu{ background:rgba(255,255,255,.98); border-color:var(--line-2); box-shadow:0 30px 80px rgba(90,60,40,.18); }
:root[data-theme="light"] .nav-menu a{ color:var(--ink-2); }
:root[data-theme="light"] .nav-menu a small{ color:var(--faint); }
:root[data-theme="light"] .nav-menu a:hover{ background:rgba(165,40,106,.08); color:var(--ink); }
:root[data-theme="light"] .nav-menu a:hover small{ color:var(--accent); }
@media (max-width:860px){
  :root[data-theme="light"] .nav.menu-open .nav-links{ background:rgba(245,241,232,.98); }
  :root[data-theme="light"] .nav.menu-open .nav-links a,
  :root[data-theme="light"] .nav.menu-open .nav-item > button{ color:var(--ink-2); }
}

/* --- theme toggle button in each nav state --- */
:root[data-theme="light"] .theme-toggle::before{ content:"Dark"; }
:root[data-theme="light"] .theme-toggle{ color:#E0DCD2; border-color:rgba(255,255,255,.28); }
:root[data-theme="light"] .theme-toggle:hover{ color:var(--accent); border-color:var(--accent); }
:root[data-theme="light"] .nav.solid .theme-toggle{ color:var(--ink-2); border-color:var(--line-2); }
:root[data-theme="light"] .nav.solid .theme-toggle:hover{ color:var(--accent); border-color:var(--accent); }

/* --- footer + solution cards flip to light --- */
:root[data-theme="light"] .footer{ background:var(--bg-2); border-top-color:var(--line); }
:root[data-theme="light"] .sol-card{ background:rgba(255,255,255,.55); border-color:var(--line-2); }
:root[data-theme="light"] .sol-card:hover{ background:rgba(255,255,255,.85); border-color:var(--accent); }
:root[data-theme="light"] .sol-card p{ color:#6A6258; }
:root[data-theme="light"] .model-solutions{ background:var(--bg-2); }
:root[data-theme="light"] .model-solutions .sol-card{
  background:radial-gradient(120% 90% at 100% 0%, rgba(165,40,106,.06), transparent 52%), #fff;
}

/* --- home model story: full light treatment (canvas repaints light too) --- */
:root[data-theme="light"] .model-story{ background:var(--bg); color:var(--ink); }
:root[data-theme="light"] .model-visual{
  background:radial-gradient(90% 100% at 78% 52%, rgba(240,138,184,.12), transparent 70%), var(--bg);
}
:root[data-theme="light"] .model-visual::before{
  background-image:
    linear-gradient(rgba(40,32,24,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(40,32,24,.05) 1px, transparent 1px);
}
:root[data-theme="light"] .model-wash{
  background:
    linear-gradient(90deg, rgba(245,241,232,.98) 0%, rgba(245,241,232,.93) 31%, rgba(245,241,232,.44) 48%, rgba(245,241,232,0) 72%),
    linear-gradient(0deg, rgba(245,241,232,.76) 0%, rgba(245,241,232,0) 34%);
}
:root[data-theme="light"] .model-hud-top{ color:rgba(36,31,27,.56); border-bottom-color:rgba(40,32,24,.16); }
:root[data-theme="light"] .model-metrics{ border-top-color:rgba(40,32,24,.18); }
:root[data-theme="light"] .model-metric-label{ color:rgba(36,31,27,.5); }
:root[data-theme="light"] .model-metrics b{ color:rgba(36,31,27,.9); }
:root[data-theme="light"] .model-key{ color:rgba(36,31,27,.62); }
:root[data-theme="light"] .model-beat h2{ color:var(--ink); }
:root[data-theme="light"] .model-beat p{ color:rgba(60,56,47,.82); }
:root[data-theme="light"] .model-beat--hero p{ color:rgba(60,56,47,.82); }
:root[data-theme="light"] .model-scroll-cue{ color:rgba(36,31,27,.55); }
:root[data-theme="light"] .model-link{ color:var(--light-accent); }
:root[data-theme="light"] .slot-label{ color:rgba(36,31,27,.45); }
:root[data-theme="light"] .slot-window{ border-color:rgba(40,32,24,.16); background:rgba(255,255,255,.4); }
:root[data-theme="light"] .slot-window::after{
  background:linear-gradient(180deg, rgba(245,241,232,.78) 0%, rgba(245,241,232,0) 26%, rgba(245,241,232,0) 74%, rgba(245,241,232,.78) 100%);
}
:root[data-theme="light"] .slot-item{ color:rgba(29,25,21,.92); }
:root[data-theme="light"] .slot-window.is-spinning .slot-item{ color:rgba(29,25,21,.4); }
:root[data-theme="light"] .slot-result{ border-top-color:rgba(40,32,24,.16); }
:root[data-theme="light"] .slot-why{ color:rgba(60,56,47,.72); }
:root[data-theme="light"] .slot-trial{ color:rgba(40,32,24,.42); }
:root[data-theme="light"] .slot-verdict.is-yes{
  color:var(--light-accent);
  border-color:color-mix(in srgb,var(--light-accent) 40%,transparent);
  background:color-mix(in srgb,var(--light-accent) 10%,transparent);
}
:root[data-theme="light"] .slot-verdict.is-no{ color:rgba(40,32,24,.48); border-color:rgba(40,32,24,.18); }
:root[data-theme="light"] .model-link{ border-bottom-color:color-mix(in srgb,var(--light-accent) 34%,transparent); }
:root[data-theme="light"] .model-scroll-cue span{ background:rgba(40,32,24,.14); }
:root[data-theme="light"] .model-note{ border-color:rgba(165,40,106,.32); background:rgba(165,40,106,.07); }
:root[data-theme="light"] .model-note b{ color:var(--ink); }
:root[data-theme="light"] .model-note span{ color:rgba(36,31,27,.5); }
@media (max-width:1024px){
  :root[data-theme="light"] .model-wash{
    background:
      linear-gradient(0deg, rgba(245,241,232,.98) 0%, rgba(245,241,232,.9) 34%, rgba(245,241,232,.18) 70%, rgba(245,241,232,.05) 100%),
      linear-gradient(90deg, rgba(245,241,232,.42), transparent);
  }
}

/* --- inner-page canvas heroes + dark scrim bands keep light text --- */
:root[data-theme="light"] .hero h1{ color:#F2EFEA; }
:root[data-theme="light"] .hero .sub{ color:rgba(224,220,210,.84); }
:root[data-theme="light"] .inner-page .section-head h2{ color:#F2EFEA; }
:root[data-theme="light"] .inner-page .section-head p{ color:rgba(224,220,210,.8); }
:root[data-theme="light"] .inner-page .lead{ color:var(--ink-2); }

/* --- data-instrument cards stay dark on a light page: make them opaque
   and keep their inner text light so the embedded charts read cleanly --- */
:root[data-theme="light"] .panel{
  background:radial-gradient(120% 100% at 100% 0%, rgba(82,34,63,.28), transparent 54%), #141019;
  border-color:rgba(255,255,255,.10);
  box-shadow:0 26px 70px rgba(90,60,40,.20);
}
:root[data-theme="light"] .panel .panel-title,
:root[data-theme="light"] .panel .panel-title-lg{ color:#F2EFEA; }
:root[data-theme="light"] .panel .panel-tag{ color:#B0ACA4; border-color:rgba(255,255,255,.22); }
:root[data-theme="light"] .panel .panel-intro,
:root[data-theme="light"] .panel .panel-legend{ color:#B0ACA4; }
:root[data-theme="light"] .panel .panel-note{ color:#9D98A1; border-top-color:rgba(255,255,255,.08); }
:root[data-theme="light"] .panel .bar-x{ color:#E0DCD2; }
:root[data-theme="light"] .panel .bar .cap{ color:#F2EFEA; }
:root[data-theme="light"] .panel .bar-note,
:root[data-theme="light"] .panel .gauge-cap{ color:#8A857E; }
:root[data-theme="light"] .panel .toggle{ border-color:rgba(255,255,255,.18); background:rgba(255,255,255,.04); }
:root[data-theme="light"] .panel .toggle button{ color:#B0ACA4; }
:root[data-theme="light"] .inner-page .panel:has(.bio-instrument){
  background:radial-gradient(120% 100% at 100% 0%, rgba(82,34,63,.24), transparent 52%), #141019;
}

/* article "paper" excerpt needs a soft edge once the page is light too */
:root[data-theme="light"] .report,
:root[data-theme="light"] .inner-page .report{
  border:1px solid #E3D9CB;
  box-shadow:0 22px 55px rgba(90,60,40,.16);
}
:root[data-theme="light"] .article-meta{ border-top-color:rgba(255,255,255,.12); }

/* --- home page opens on a LIGHT hero in light mode, so its nav is light from
   the top (inner pages keep the dark-hero nav treatment above) --- */
:root[data-theme="light"] .home-page .nav{ background:linear-gradient(180deg, rgba(245,241,232,.86) 0%, rgba(245,241,232,0) 100%); }
:root[data-theme="light"] .home-page .nav .wordmark{ color:var(--ink); }
:root[data-theme="light"] .home-page .nav .wordmark em{ color:var(--accent); }
:root[data-theme="light"] .home-page .nav-links a,
:root[data-theme="light"] .home-page .nav-item > button{ color:var(--ink-2); }
:root[data-theme="light"] .home-page .nav-toggle span{ background:var(--ink); }
:root[data-theme="light"] .home-page .theme-toggle{ color:var(--ink-2); border-color:var(--line-2); }
:root[data-theme="light"] .home-page .theme-toggle:hover{ color:var(--accent); border-color:var(--accent); }

/* ===========================================================================
   NARROW + SHORT SCREENS — the scroll story
   Appended last on purpose: these have to win over the .model-beat rules in
   the max-width:1024px block above, and the link override has to outrank
   `.model-beat p .model-link`.
   =========================================================================== */
@media (max-width:1024px){
  /* On its own line: inline after the paragraph it reads as a run-on. */
  .model-beat p .model-link{ display:flex; width:max-content; margin-top:16px; }
}
@media (max-width:1024px) and (max-height:760px){
  /* A phone with browser chrome leaves ~660px, and the copy has to clear the
     panel underneath it rather than run into it. */
  .model-beat{ padding:74px 24px 32px; }
  .model-beat--hero h1{ font-size:clamp(29px,7.4vw,40px); }
  .model-beat h2{ font-size:clamp(21px,5.4vw,31px); }
  .model-beat p,
  .model-beat--hero p{ font-size:13px; line-height:1.45; margin-top:11px; }
  .model-beat p .model-link{ margin-top:12px; font-size:9.5px; }
  .model-step{ margin-bottom:9px; }
}