/* ============================================================
   Flowridge Analytics — landing page
   Palette: Ocean Breeze #A2CAD9 · Morning Mist #C9D3DD
            Sheer Sand Drape #F1E3D1 · Coastal Sunbeam #F3D8B8
            Ink #2A3644
   ============================================================ */

:root{
  --ocean:#A2CAD9;
  --mist:#C9D3DD;
  --sand:#F1E3D1;
  --sunbeam:#F3D8B8;
  --ink:#2A3644;
  --ink-70:#4C596A;
  --ink-55:#586574;
  --paper:#FBF9F6;
  --paper-warm:#F7F2EB;
  --white:#FFFFFF;

  --deep:#1E4257;          /* accessible deep-ocean for buttons/links */
  --deep-hover:#173446;

  --font-display:'Switzer','Inter',system-ui,sans-serif;
  --font-body:'Satoshi','Inter',system-ui,sans-serif;

  --shell:1200px;
  --r-lg:26px;
  --r-md:18px;
  --r-sm:12px;

  --shadow-soft:0 1px 2px rgba(42,54,68,.04), 0 12px 32px -18px rgba(42,54,68,.18);
  --shadow-lift:0 2px 4px rgba(42,54,68,.05), 0 26px 60px -28px rgba(42,54,68,.26);
  --hair:rgba(42,54,68,.12);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:78px;scrollbar-gutter:stable}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  font-family:var(--font-body);
  font-size:1.0625rem;
  line-height:1.65;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:var(--deep);text-decoration-thickness:1px;text-underline-offset:3px}

.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:clamp(20px,5vw,48px)}

.skip{position:absolute;left:-9999px;top:0;background:var(--white);color:var(--ink);padding:12px 18px;border-radius:0 0 var(--r-sm) 0;z-index:200}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--deep);outline-offset:3px;border-radius:4px}

/* ---------- Type ---------- */
h1,h2,h3{font-family:var(--font-display);font-weight:400;color:var(--ink);margin:0;letter-spacing:-.02em}
h1{font-size:clamp(2.3rem,5.4vw,4.05rem);line-height:1.06;letter-spacing:-.035em}
h1 em{font-style:normal;color:var(--ink-70)}
h2{font-size:clamp(1.72rem,3.3vw,2.7rem);line-height:1.14}
h3{font-size:1.135rem;font-weight:500;letter-spacing:-.004em;line-height:1.35;font-kerning:none}
p{margin:0}

.eyebrow{
  font-family:var(--font-body);
  font-size:.71rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.22em;
  color:var(--ink-55);
  margin-bottom:1.15rem;
}
.lede{font-size:clamp(1.03rem,1.35vw,1.19rem);line-height:1.62;color:var(--ink-70);max-width:60ch}
.micro{font-size:.85rem;color:var(--ink-55)}

.hairline{display:block;width:56px;height:1px;background:var(--hair);margin-bottom:1rem}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--font-body);font-size:.925rem;font-weight:500;letter-spacing:.005em;
  padding:.86rem 1.6rem;border-radius:999px;
  text-decoration:none;white-space:nowrap;
  transition:transform .35s var(--ease),background-color .3s var(--ease),box-shadow .35s var(--ease),color .3s var(--ease);
}
.btn-sm{padding:.62rem 1.2rem;font-size:.855rem}
.btn-primary{background:var(--deep);color:#fff;box-shadow:0 10px 26px -14px rgba(30,66,87,.65)}
.btn-primary:hover{background:var(--deep-hover);transform:translateY(-2px);box-shadow:0 16px 34px -14px rgba(30,66,87,.6)}
.btn-ghost{color:var(--ink);border:1px solid var(--hair);background:rgba(255,255,255,.5);backdrop-filter:blur(6px)}
.btn-ghost:hover{background:rgba(255,255,255,.9);border-color:rgba(42,54,68,.22);transform:translateY(-2px)}

/* ---------- Nav ---------- */
.nav{position:sticky;top:0;z-index:100;transition:background-color .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease);
  background:rgba(251,249,246,.55);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid transparent}
.nav.is-stuck{background:rgba(251,249,246,.82);border-bottom-color:var(--hair);box-shadow:0 8px 30px -24px rgba(42,54,68,.5)}
.nav-inner{max-width:var(--shell);margin-inline:auto;padding:.85rem clamp(20px,5vw,48px);display:flex;align-items:center;gap:clamp(1rem,3vw,2.5rem)}
.wordmark{display:flex;align-items:center;gap:.62rem;color:var(--ink);text-decoration:none;flex:0 0 auto}
.mark{width:26px;height:26px;flex:0 0 auto;color:var(--deep)}
.wordmark-text{font-family:var(--font-body);font-size:.775rem;font-weight:700;text-transform:uppercase;letter-spacing:.2em}
.nav-links{display:flex;gap:clamp(.75rem,1.35vw,1.35rem);margin-left:auto;min-width:0}
.nav-links a{
  font-size:.86rem;font-weight:500;color:var(--ink-70);text-decoration:none;position:relative;padding:.2rem 0;
  white-space:nowrap;
  transition:color .25s var(--ease);
}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--deep);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.nav-links a:hover{color:var(--ink)}
.nav-links a:hover::after{transform:scaleX(1)}
.nav .btn{flex:0 0 auto}

/* ---------- Hero ---------- */
.hero{position:relative;isolation:isolate;overflow:hidden;background:var(--paper-warm)}
.hero-art{position:absolute;inset:0;z-index:-1}
.hero-art img{width:100%;height:100%;object-fit:cover;object-position:65% 60%}
.hero-scrim{position:absolute;inset:0;
  background:
    linear-gradient(100deg, rgba(251,249,246,.96) 0%, rgba(251,249,246,.9) 34%, rgba(251,249,246,.52) 58%, rgba(251,249,246,.18) 100%),
    linear-gradient(to bottom, rgba(251,249,246,.5) 0%, rgba(251,249,246,0) 30%, rgba(251,249,246,.72) 100%);
}
.hero-shell{padding-top:clamp(5.5rem,13vh,9.5rem);padding-bottom:clamp(5.5rem,13vh,9.5rem)}
.hero-copy{max-width:44rem}
.hero-copy .lede{margin-top:1.6rem;max-width:38rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2.4rem}
.trust{margin-top:3.2rem;font-size:.85rem;color:var(--ink-55);max-width:34rem}

/* ---------- Bands ---------- */
.band{padding-block:clamp(3rem,6vh,5.25rem);position:relative}
.band-mist{background:linear-gradient(180deg,#EFF3F6 0%,#E9EFF4 100%)}
.band-sand{background:linear-gradient(115deg,var(--sand) 0%,#F6EADA 46%,var(--sunbeam) 100%)}
.band + .band:not(.band-mist):not(.band-sand)::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:min(var(--shell) - 40px,calc(100% - 40px));height:1px;background:var(--hair)
}

.section-head{max-width:44rem;margin-bottom:clamp(1.5rem,2.5vw,2rem)}
.section-head h2 + .lede,
.inside-head h2 + .lede,
.trace-head h2 + .lede{margin-top:1.5rem}
.section-head-center{margin-inline:auto;text-align:center}
.section-head-center .lede{margin-inline:auto;max-width:68ch;line-height:1.48}

/* ---------- Glass cards ---------- */
.glass{
  background:linear-gradient(155deg,rgba(255,255,255,.86),rgba(255,255,255,.6));
  backdrop-filter:blur(16px) saturate(130%);-webkit-backdrop-filter:blur(16px) saturate(130%);
  border:1px solid rgba(255,255,255,.85);
  box-shadow:var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,.9);
  border-radius:var(--r-lg);
}
.cards-3{display:grid;gap:clamp(1rem,1.8vw,1.5rem);grid-template-columns:repeat(3,1fr)}
.card{padding:clamp(1.25rem,1.9vw,1.65rem);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift), inset 0 1px 0 rgba(255,255,255,.9)}
.card-index{
  display:block;font-family:var(--font-display);font-size:.8rem;font-weight:600;letter-spacing:.16em;
  color:#6C9FB4;margin-bottom:1.5rem;
}
.card h3{margin-bottom:.7rem}
.card p{font-size:.955rem;line-height:1.62;color:var(--ink-70)}
.card-tight{padding:clamp(1.1rem,1.6vw,1.4rem)}
.tag{font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.18em;color:var(--ink-55);margin-bottom:1rem}

/* ---------- Stat chips ---------- */
.chips{
  list-style:none;margin:clamp(1.6rem,3vw,2.4rem) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--hair);border:1px solid var(--hair);border-radius:var(--r-md);overflow:hidden;
}
.chip{background:rgba(255,255,255,.72);padding:1.5rem 1.35rem;display:flex;flex-direction:column;gap:.35rem}
.chip strong{font-family:var(--font-display);font-size:1.85rem;font-weight:400;letter-spacing:-.02em;line-height:1;color:var(--ink)}
.chip span{font-size:.79rem;line-height:1.4;color:var(--ink-55);text-transform:uppercase;letter-spacing:.09em}

/* ---------- Method ---------- */
.method-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(2.5rem,5vw,5rem);align-items:start}
.method-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.method-list li{position:relative;padding:1.15rem 0 1.15rem 4.6rem;border-top:1px solid rgba(42,54,68,.14)}
.method-list li:first-child{border-top:0;padding-top:0}
.method-list li:last-child{padding-bottom:0}
.numeral{
  position:absolute;left:0;top:1.9rem;
  font-family:var(--font-display);font-size:2.35rem;font-weight:500;line-height:.9;
  color:#D2DEE8;
  text-shadow:0 1px 0 rgba(255,255,255,1), 0 -1px 1px rgba(42,54,68,.22);
  user-select:none;
}
.method-list li:first-child .numeral{top:0}
.method-list h3{margin-bottom:.55rem}
.method-list p{font-size:.94rem;line-height:1.52;color:var(--ink-70);max-width:48ch}
.method-art{margin:0;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-lift);position:sticky;top:7rem}
.method-art{background:#E6E1DC}
.method-art img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:center 52%}

/* ---------- Method art: real-data exhibit ---------- */
.method-art-exhibit{
  background:linear-gradient(180deg,#FBF9F6 0%,#F5F1EA 100%);
  padding:1.5rem 1.6rem 1.1rem;display:flex;flex-direction:column;gap:.85rem;
}
.exhibit-head{display:flex;flex-direction:column;gap:.2rem}
.exhibit-kicker{
  margin:0;font-family:"Switzer","Inter",system-ui,sans-serif;font-size:.68rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:#8A7A63;
}
.exhibit-title{margin:0;font-family:var(--font-display);font-size:1.15rem;font-weight:500;color:var(--ink);letter-spacing:-.01em}
.correlation-svg{display:block;width:100%;height:auto;aspect-ratio:600/400}
.exhibit-foot{margin:0;font-size:.72rem;line-height:1.5;color:var(--ink-55)}

.exhibit-axis{stroke:rgba(42,54,68,.28);stroke-width:1}
.exhibit-grid{stroke:rgba(42,54,68,.09);stroke-width:1}
.exhibit-tick{
  font-family:"Switzer","Inter",system-ui,sans-serif;font-size:9.5px;fill:#6B7280;
}
.exhibit-panel-title{
  font-family:"Switzer","Inter",system-ui,sans-serif;font-size:11.5px;font-weight:600;
  letter-spacing:.01em;fill:#2A3644;
}
.exhibit-panel-unit{
  font-family:"Switzer","Inter",system-ui,sans-serif;font-size:9.5px;fill:#6B7280;
}
.series-adj{fill:none;stroke:#B4713A;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.series-gap{fill:none;stroke:#3E6E8E;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.series-dot-adj{fill:#B4713A}
.series-dot-gap{fill:#3E6E8E}
.shift-band{fill:rgba(180,113,58,.09)}
.shift-tag{
  font-family:"Switzer","Inter",system-ui,sans-serif;font-size:9px;font-weight:600;
  letter-spacing:.05em;fill:#B4713A;text-transform:uppercase;
}

/* Sequence overview — see the timing comment in main.js for exact seconds.
   .exhibit-panels : the two labeled line charts (hold, then fade out)
   .exhibit-tracers: transient dots that fly from each chart to the scatter
                     position for that month, then fade out once merged
   .exhibit-scatter-dots : the REAL, permanent scatter dots — hidden until
                     the tracers have arrived, so there's never a moment with
                     two coincident dots at the same spot
   .exhibit-scatter : axis, regression line, r-value callout (fades in with
                     the tracer flight, so the destination frame is legible
                     as the tracers arrive) */
.exhibit-panels{transition:opacity .45s ease-out}
.correlation-svg.is-scatter .exhibit-panels{opacity:0;pointer-events:none}

.exhibit-scatter{opacity:0;transition:opacity .6s ease-out .5s}
.correlation-svg.is-scatter .exhibit-scatter{opacity:1}

.tracer-dot{opacity:0;transition:opacity .35s ease-out,cx .85s cubic-bezier(.4,0,.2,1),cy .85s cubic-bezier(.4,0,.2,1)}
.tracer-adj{fill:#B4713A}
.tracer-gap{fill:#3E6E8E}
.correlation-svg.is-scatter .tracer-dot{opacity:.9}
.correlation-svg.is-merged .tracer-dot{opacity:0;transition:opacity .3s ease-out}

.exhibit-scatter-dots{opacity:0;transition:opacity .3s ease-out}
.correlation-svg.is-merged .exhibit-scatter-dots{opacity:1}
.scatter-pt{fill:#5A6577}
.scatter-pt.late{fill:#B4713A}

.reg-line{
  fill:none;stroke:#2A3644;stroke-width:2.4;stroke-linecap:round;
  stroke-dasharray:480;stroke-dashoffset:480;opacity:0;
}
.correlation-svg.is-merged .reg-line{animation:exhibitDraw 1.1s ease-out .2s forwards}
.reg-callout{opacity:0;transition:opacity .5s ease-out .6s}
.correlation-svg.is-merged .reg-callout{opacity:1}
.reg-callout-r{font-family:var(--font-display);font-size:22px;font-weight:500;fill:var(--ink)}
.reg-callout-label{font-family:"Switzer","Inter",system-ui,sans-serif;font-size:9.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;fill:#6B7280}

/* Reset frame: kill every transition/animation for one frame so snapping the
   tracers back to their start positions is instant and invisible, rather than
   playing the flight backwards. */
.correlation-svg.is-resetting .exhibit-panels,
.correlation-svg.is-resetting .exhibit-scatter,
.correlation-svg.is-resetting .exhibit-scatter-dots,
.correlation-svg.is-resetting .tracer-dot,
.correlation-svg.is-resetting .corr-label,
.correlation-svg.is-resetting .reg-line,
.correlation-svg.is-resetting .reg-callout{transition:none!important;animation:none!important}

@keyframes exhibitDraw{to{stroke-dashoffset:0;opacity:1}}
@media (prefers-reduced-motion: reduce){
  .exhibit-panels,.exhibit-scatter,.tracer-dot,.exhibit-scatter-dots,.reg-line,.reg-callout{transition:none;animation:none}
  .correlation-svg.is-merged .reg-line{stroke-dashoffset:0;opacity:1}
}

/* ---------- Note ---------- */
.note{margin-top:clamp(1.1rem,1.9vw,1.5rem);font-size:.9rem;color:var(--ink-55);max-width:52ch;margin-inline:auto;text-align:center}
.note .hairline{margin-inline:auto}

/* ---------- Founder ---------- */
.founder-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
.band-sand h2{max-width:22ch}
.founder-body{display:flex;flex-direction:column;gap:1.15rem}
.founder-body p{color:#3B4859;font-size:1.03rem;line-height:1.68}
.founder-body strong{font-weight:700;color:var(--ink)}
/* ---------- Inside the report ---------- */
.inside-head{max-width:52rem;margin:0 auto 1.6rem;text-align:center}
.inside-head .eyebrow{justify-content:center;display:block}
.inside-head .lede{color:#3B4859;font-size:1.05rem;line-height:1.65;margin-inline:auto}
.spread-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.2rem,2.4vw,2rem)}
.spread{margin:0;display:flex;flex-direction:column;gap:.9rem}
.spread-btn{border:0;padding:0;background:transparent;cursor:zoom-in;border-radius:14px;overflow:hidden;box-shadow:0 8px 26px -18px rgba(42,54,68,.55),0 2px 8px -6px rgba(42,54,68,.28);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.spread-btn:hover,.spread-btn:focus-visible{transform:translateY(-4px);box-shadow:0 22px 46px -20px rgba(42,54,68,.55),0 4px 12px -6px rgba(42,54,68,.3)}
.spread-btn:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.spread-btn img{display:block;width:100%;height:auto;max-height:clamp(230px,34vh,330px);object-fit:cover;object-position:top center;background:#fff}
.spread figcaption{display:flex;flex-direction:column;gap:.35rem;padding:0 .25rem}
.spread figcaption strong{color:var(--ink);font-size:.95rem;letter-spacing:.01em}
.spread figcaption span{color:#4A5768;font-size:.9rem;line-height:1.55}
.spread-note{margin:2rem auto 0;max-width:44rem;text-align:center;color:#5A6577;font-size:.85rem}
@media (max-width:900px){.spread-row{grid-template-columns:1fr;max-width:26rem;margin:0 auto}}

/* ---------- How a partnership works ---------- */
.workflow{--wf-gap:clamp(1rem,1.6vw,1.6rem);--wf-node:58px;--wf-pad:.35rem;list-style:none;padding:0;margin:1.1rem 0 0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--wf-gap);position:relative}
/* The rail used to run left:5% -> right:5% of the container, which is a percentage
   of the box rather than a position derived from the circles, so it overshot past
   the 05 node. Now drawn per step: each segment spans from its own circle's right
   edge to the next circle's left edge, and :last-child gets none, so the rail
   cannot extend beyond 05. Dashed where Flowridge is the actor, matching the node. */
.workflow-step:not(:last-child)::before{content:"";position:absolute;top:calc(var(--wf-node) / 2);left:calc(var(--wf-pad) + var(--wf-node));width:calc(100% + var(--wf-gap) - var(--wf-node));height:1px;background:rgba(178,204,219,.8);z-index:0}
.workflow-step[data-actor="flowridge"]:not(:last-child)::before{background:transparent;border-top:1px dashed rgba(162,202,217,.85)}
.workflow-step{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:.6rem;padding:0 .35rem}
.workflow-num{position:relative;z-index:1;width:58px;height:58px;border-radius:50%;background:linear-gradient(180deg,#fff 0%,#F1F5F8 100%);border:1px solid rgba(42,54,68,.14);box-shadow:0 6px 18px -12px rgba(42,54,68,.35);display:flex;align-items:center;justify-content:center;font-family:"Instrument Serif","Switzer",serif;font-size:1.1rem;letter-spacing:.06em;color:var(--ink);flex:0 0 58px}
/* The node styling carries the ghost-analyst model rather than decorating it:
   a solid filled node is a step the practice's client actually sees (the partner
   firm), a dashed hollow node is a step Flowridge performs and the client never
   sees. Steps 01 and 05 are the partner; 02-04 are Flowridge. */
.workflow-step[data-actor="partner"] .workflow-num{background:linear-gradient(180deg,#2A4A61 0%,#1E4257 100%);border-color:rgba(30,66,87,.9);color:#F1E3D1;box-shadow:0 8px 20px -12px rgba(30,66,87,.6)}
.workflow-step[data-actor="flowridge"] .workflow-num{background:rgba(255,255,255,.55);border:1px dashed rgba(62,110,142,.55);color:var(--deep);box-shadow:none}
.workflow-key{list-style:none;margin:2.2rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem 1.6rem}
.workflow-key-item{display:flex;align-items:center;gap:.5rem;font-size:.8rem;letter-spacing:.02em;color:#5A6577}
.workflow-key-dot{width:13px;height:13px;border-radius:50%;flex:0 0 13px}
.workflow-key-item[data-actor="partner"] .workflow-key-dot{background:linear-gradient(180deg,#2A4A61 0%,#1E4257 100%);border:1px solid rgba(30,66,87,.9)}
.workflow-key-item[data-actor="flowridge"] .workflow-key-dot{background:rgba(255,255,255,.55);border:1px dashed rgba(62,110,142,.75)}
.workflow-label{margin:.35rem 0 0;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:#5A6577;font-weight:600}
.workflow-text{margin:0;color:#2A3644;font-size:.95rem;line-height:1.55}
@media (max-width:900px){
  .workflow{grid-template-columns:1fr;gap:1.1rem;max-width:36rem;margin-inline:auto}
  /* Stacked layout: the desktop horizontal rail is replaced by per-step vertical
     segments. The old container-level line used bottom:16px, which measures from
     the bottom of the last CARD rather than the last circle, so it hung ~90px
     below the 05 marker. Skipping :last-child terminates the rail on the 05
     circle's centre. Solid colours step down the old gradient's range instead of
     repeating the full gradient in each segment. Same fix as .trace-step. */
  .workflow::before{display:none}
  .workflow-step:not(:last-child)::before{content:"";position:absolute;left:29px;top:29px;width:1px;height:calc(100% + 1.1rem);background:rgba(178,204,219,.78);z-index:0}
  .workflow-step:first-child::before{background:rgba(162,202,217,.85)}
  .workflow-step:nth-child(3)::before{background:rgba(190,208,220,.70)}
  .workflow-step:nth-child(4)::before{background:rgba(201,211,221,.62)}
  .workflow-step[data-actor="flowridge"]:not(:last-child)::before{background:transparent;border-top:0;border-left:1px dashed rgba(162,202,217,.85);width:0}
  .workflow-key{margin-top:1.6rem;flex-direction:column;gap:.45rem}
  .workflow-step{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.35rem 1.15rem;align-items:start;padding:0}
  .workflow-num{grid-row:span 2}
  .workflow-label{margin-top:.35rem}
  .workflow-text{grid-column:2}
}

/* ---------- Hero SPC overlay ---------- */
.hero-spc{position:absolute;right:0;top:50%;transform:translateY(-50%);width:min(58%,780px);height:auto;opacity:.72;pointer-events:none;mix-blend-mode:multiply}
@media (max-width:900px){.hero-spc{opacity:.35;width:94%;right:0}}
.hero-spc .spc-grid{stroke:rgba(42,54,68,.14);stroke-width:1;fill:none}
.hero-spc .spc-ucl,.hero-spc .spc-lcl{stroke:rgba(162,202,217,.9);stroke-width:1.2;stroke-dasharray:5 5;fill:none}
.hero-spc .spc-mean{stroke:rgba(42,54,68,.55);stroke-width:1;stroke-dasharray:2 3;fill:none}
.hero-spc .spc-line{stroke:#2A3644;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:2000;stroke-dashoffset:2000;animation:heroLine 2.2s ease-out .3s forwards}
.hero-spc .spc-shift-fill{fill:rgba(243,216,184,.35)}
.hero-spc .spc-dot{fill:#2A3644;opacity:0;animation:heroDot .35s ease-out forwards}
.hero-spc .spc-dot.hi{fill:#C87A3A}
.hero-spc .spc-label{fill:#5A6577;font-family:"Switzer","Inter",system-ui,sans-serif;font-size:11px;letter-spacing:.05em;opacity:0;animation:heroFade .6s ease-out 2.4s forwards}
@keyframes heroLine{to{stroke-dashoffset:0}}
@keyframes heroDot{to{opacity:1}}
@keyframes heroFade{to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .hero-spc .spc-line{stroke-dashoffset:0;animation:none}
  .hero-spc .spc-dot{opacity:1;animation:none}
  .hero-spc .spc-label{opacity:1;animation:none}
}

/* ---------- Method download ---------- */
.method-download{margin-top:2rem;display:flex;flex-direction:column;gap:.35rem}
.method-download a{font-size:.98rem;color:var(--ink);text-decoration:none;font-weight:500;letter-spacing:.005em;border-bottom:1px solid rgba(42,54,68,.28);padding-bottom:.15rem;align-self:flex-start;transition:color .2s var(--ease),border-color .2s var(--ease)}
.method-download a:hover{color:#1E4257;border-color:#1E4257}
.method-download a span{margin-left:.25rem;display:inline-block;transition:transform .25s var(--ease)}
.method-download a:hover span{transform:translateX(3px)}
.method-download-meta{font-size:.78rem;letter-spacing:.06em;color:#5A6577;text-transform:uppercase}

/* ---------- Industry stat strip ---------- */
.stat-strip{padding-block:clamp(2.4rem,5vh,3.6rem);position:relative}
.stat-strip-inner{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:clamp(1.6rem,4vw,3.2rem);align-items:center;max-width:64rem}
.stat-item{display:flex;flex-direction:column;gap:.55rem}
.stat-figure{margin:0;font-family:"Instrument Serif",serif;font-size:clamp(2.4rem,4.5vw,3.2rem);letter-spacing:.005em;color:var(--ink);line-height:1}
.stat-text{margin:0;color:#3B4859;font-size:.98rem;line-height:1.55;max-width:26rem}
.stat-cite{display:block;margin-top:.45rem;font-family:"Switzer","Inter",system-ui,sans-serif;font-size:.72rem;letter-spacing:.04em;color:var(--ink-55)}
.stat-rule{width:1px;align-self:stretch;background:linear-gradient(180deg,rgba(201,211,221,0) 0%,rgba(162,202,217,.85) 50%,rgba(201,211,221,0) 100%)}
@media (max-width:720px){
  .stat-strip-inner{grid-template-columns:1fr;gap:1.6rem}
  .stat-rule{width:auto;height:1px;background:linear-gradient(90deg,rgba(201,211,221,0) 0%,rgba(162,202,217,.85) 50%,rgba(201,211,221,0) 100%)}
}

/* ---------- Briefing companion ---------- */
.briefing-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2.2rem,5vw,4.5rem);align-items:center}
.briefing-copy{display:flex;flex-direction:column;gap:1.15rem}
.briefing-copy .lede{color:#3B4859;font-size:1.03rem;line-height:1.68}
.briefing-list{list-style:none;padding:0;margin:.35rem 0;display:flex;flex-direction:column;gap:.6rem}
.briefing-list li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.85rem;align-items:baseline;color:#2A3644;font-size:.98rem;line-height:1.55}
.briefing-list li span{font-family:"Instrument Serif",serif;font-size:.95rem;letter-spacing:.06em;color:#5A6577;font-weight:400}
.briefing-copy .micro{margin:.15rem 0 0;font-size:.82rem;letter-spacing:.02em;color:#5A6577}
.briefing-art .spread-btn{border-radius:14px}
@media (max-width:900px){.briefing-grid{grid-template-columns:1fr;gap:2.2rem}.briefing-art{max-width:22rem;margin:0 auto}}

/* ---------- Modeled year ---------- */
.modeled-card{max-width:60rem;margin:1.1rem auto 0;padding:1.1rem clamp(1.2rem,3vw,2.4rem);background:rgba(255,255,255,.72);border:1px solid rgba(42,54,68,.08);border-radius:18px;backdrop-filter:blur(6px);box-shadow:0 22px 46px -30px rgba(42,54,68,.4)}
.modeled-chart{width:100%;position:relative}
.modeled-chart svg{display:block;width:100%;height:auto}
.modeled-controls{margin-top:.7rem;display:flex;flex-direction:column;gap:.35rem}
.modeled-slider-label{display:flex;justify-content:space-between;align-items:baseline;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:#5A6577;font-weight:600}
.modeled-scrub{font-family:"Instrument Serif",serif;font-size:1.4rem;letter-spacing:.02em;color:var(--ink);text-transform:none;font-weight:400}
.modeled-slider{width:100%;appearance:none;background:transparent;height:22px;cursor:pointer}
.modeled-slider::-webkit-slider-runnable-track{height:3px;background:linear-gradient(90deg,rgba(201,211,221,.7),rgba(162,202,217,.9));border-radius:2px}
.modeled-slider::-moz-range-track{height:3px;background:linear-gradient(90deg,rgba(201,211,221,.7),rgba(162,202,217,.9));border-radius:2px}
.modeled-slider::-webkit-slider-thumb{appearance:none;width:20px;height:20px;border-radius:50%;background:#fff;border:2px solid var(--ink);margin-top:-9px;box-shadow:0 3px 8px rgba(42,54,68,.3);cursor:grab}
.modeled-slider::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#fff;border:2px solid var(--ink);box-shadow:0 3px 8px rgba(42,54,68,.3);cursor:grab}
.modeled-slider:focus-visible{outline:none}
.modeled-slider:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px rgba(162,202,217,.5)}
.modeled-ticks{display:flex;justify-content:space-between;font-size:.75rem;letter-spacing:.06em;color:#5A6577;padding:0 4px}
.modeled-kpis{margin:.8rem 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;padding-top:.75rem;border-top:1px solid rgba(42,54,68,.1)}
.modeled-kpis div{display:flex;flex-direction:column;gap:.35rem}
.modeled-kpis dt{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:#5A6577;font-weight:600}
.modeled-kpis dd{margin:0;font-family:"Instrument Serif",serif;font-size:1.4rem;letter-spacing:.01em;color:var(--ink)}
/* #modeled is the tallest anchored section; these overrides pull the KPI readout
   above the fold on common laptop heights without shrinking every other band.
   Only space ABOVE the KPI row matters here, because the anchor pins the section
   top just under the nav. */
#modeled{padding-block:clamp(2rem,4vh,4.25rem) clamp(2.5rem,5vh,4.5rem)}
#modeled .section-head{margin-bottom:clamp(.9rem,1.6vw,1.4rem)}
#modeled .modeled-card{margin-top:.75rem}
.modeled-note{margin:.55rem auto 0;max-width:44rem;text-align:center;color:#5A6577;font-size:.8rem;letter-spacing:.02em;line-height:1.55}
@media (max-width:640px){
  .modeled-card{padding:1.4rem 1rem}
  .modeled-kpis{grid-template-columns:1fr;gap:.9rem}
  .modeled-kpis dd{font-size:1.35rem}
}

/* ---------- Boundaries ---------- */
.boundaries-list{list-style:none;padding:0;margin:2.4rem auto 0;max-width:44rem;display:flex;flex-direction:column;gap:1rem}
.boundary{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.15rem;align-items:start;padding:1.15rem 1.3rem;background:rgba(255,255,255,.72);border:1px solid rgba(42,54,68,.08);border-radius:14px;backdrop-filter:blur(6px);box-shadow:0 8px 24px -18px rgba(42,54,68,.35)}
.boundary-mark{width:34px;height:34px;border-radius:50%;background:rgba(42,54,68,.06);color:var(--ink);display:flex;align-items:center;justify-content:center;font-size:.95rem;font-weight:500;flex:0 0 34px;margin-top:.15rem}
.boundary-lede{margin:0 0 .3rem;color:var(--ink);font-size:1rem;font-weight:600;letter-spacing:.005em}
.boundary-text{margin:0;color:#3B4859;font-size:.95rem;line-height:1.6}
@media (max-width:640px){
  .boundary{padding:1rem 1.05rem;gap:.95rem}
  .boundary-mark{width:28px;height:28px;flex-basis:28px;font-size:.85rem}
}

/* ---------- Data handling ---------- */
.data-grid{margin:2.4rem auto 0;max-width:56rem;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.6rem clamp(1.6rem,3.5vw,2.8rem)}
.data-item{display:flex;flex-direction:column;gap:.45rem;padding-left:1rem;border-left:2px solid rgba(162,202,217,.7)}
.data-label{margin:0;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:#5A6577;font-weight:600}
.data-text{margin:0;color:#3B4859;font-size:.95rem;line-height:1.6}
@media (max-width:760px){.data-grid{grid-template-columns:1fr;gap:1.4rem}}

/* ---------- Metric dictionary ---------- */
.dictionary{max-width:52rem;margin:2.4rem auto 0;border-top:1px solid rgba(42,54,68,.1)}
.dict-row{border-bottom:1px solid rgba(42,54,68,.1)}
.dict-row summary{list-style:none;cursor:pointer;padding:1.2rem .25rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;transition:color .2s var(--ease)}
.dict-row summary::-webkit-details-marker{display:none}
.dict-row summary:hover{color:var(--ink)}
.dict-term{font-size:1.05rem;color:var(--ink);letter-spacing:.005em;font-weight:500;min-width:0;flex:1 1 auto}
.dict-toggle{flex:0 0 32px;width:32px;height:32px;border-radius:50%;background:rgba(162,202,217,.18);color:var(--ink);display:flex;align-items:center;justify-content:center;line-height:1;font-size:0;transition:background .2s var(--ease)}
.dict-toggle::before{content:"+";font-size:1.15rem;line-height:1}
.dict-row[open] .dict-toggle{background:rgba(162,202,217,.35)}
.dict-row[open] .dict-toggle::before{content:"\2212"}
.dict-body{padding:0 .25rem 1.6rem;display:flex;flex-direction:column;gap:.9rem;animation:dictOpen .35s var(--ease)}
.dict-body p{margin:0;color:#3B4859;font-size:1rem;line-height:1.65}
.dict-punch{padding-left:1rem;border-left:2px solid rgba(162,202,217,.7);color:#2A3644;font-size:.95rem;line-height:1.6}
.dict-note{margin:2rem auto 0;max-width:44rem;text-align:center;color:#5A6577;font-size:.85rem;letter-spacing:.02em}
@keyframes dictOpen{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (max-width:640px){
  .dict-term{font-size:.98rem}
  .dict-punch{padding-left:.85rem}
}

/* ---------- Reasoning trace ---------- */
.trace-head{max-width:52rem;margin:0 auto 2.6rem;text-align:center}
.trace-head .eyebrow{justify-content:center;display:block}
.trace-head .lede{color:#3B4859;font-size:1.05rem;line-height:1.65;margin-inline:auto}
.trace-steps{list-style:none;padding:0;margin:0 auto;max-width:44rem;position:relative;display:flex;flex-direction:column;gap:1.1rem}
.trace-step:not(:last-child)::before{content:"";position:absolute;left:29px;top:29px;width:1px;height:calc(100% + 1.1rem);background:rgba(181,206,219,.75)}
.trace-step:first-child::before{background:rgba(162,202,217,.85)}
.trace-step:nth-child(3)::before{background:rgba(201,211,221,.62)}
.trace-step{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.15rem;align-items:start}
.trace-num{position:relative;z-index:1;width:58px;height:58px;border-radius:50%;background:linear-gradient(180deg,#fff 0%,#F1F5F8 100%);border:1px solid rgba(42,54,68,.14);box-shadow:0 6px 18px -12px rgba(42,54,68,.35);display:flex;align-items:center;justify-content:center;font-family:"Instrument Serif","Switzer",serif;font-size:1.1rem;letter-spacing:.06em;color:var(--ink);flex:0 0 58px}
.trace-body{background:rgba(255,255,255,.72);border:1px solid rgba(42,54,68,.08);border-radius:14px;padding:1.15rem 1.35rem;backdrop-filter:blur(6px);box-shadow:0 8px 24px -18px rgba(42,54,68,.35)}
.trace-label{margin:0 0 .35rem;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:#5A6577;font-weight:600}
.trace-text{margin:0;color:#2A3644;font-size:1rem;line-height:1.6}
.trace-text strong{font-weight:600}
.trace-close{max-width:44rem;margin:2.4rem auto 0;text-align:center}
.trace-caption{color:#4A5768;font-size:.95rem;line-height:1.6;margin:0 0 1.4rem}
.trace-sig{display:flex;flex-direction:column;align-items:center;gap:.55rem}
.trace-sig img{width:auto;height:64px;max-width:260px;object-fit:contain;opacity:.92}
.trace-sig-line{margin:0;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;color:#4A5768}
@media (max-width:640px){
  .trace-steps{max-width:100%}
  .trace-step:not(:last-child)::before{left:22px;top:22px}
  .trace-steps::before{left:22px}
  .trace-num{width:44px;height:44px;flex-basis:44px;font-size:.95rem}
  .trace-body{padding:1rem 1.05rem}
}

/* ---------- Lightbox ---------- */
/* z-index must sit above .nav (100) and .skip (200): the sticky nav previously
   painted over the overlay, covering the top edge of the page image and the
   close button, which read as the image being pushed down / off-centre.
   Padding leaves room for the close button at short viewport heights. */
.lightbox{position:fixed;inset:0;background:rgba(16,24,36,.86);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:clamp(4rem,7vh,4.5rem) 1rem;z-index:300;animation:fade .25s var(--ease)}
.lightbox[hidden]{display:none}
.lightbox-img{max-width:min(920px,100%);max-height:100%;min-height:0;width:auto;height:auto;object-fit:contain;box-shadow:0 40px 100px -20px rgba(0,0,0,.6);border-radius:8px;background:#fff}
.lightbox-close{position:absolute;top:1.2rem;right:1.4rem;width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.92);color:var(--ink);font-size:1.5rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.lightbox-close:hover{background:#fff}
@keyframes fade{from{opacity:0}to{opacity:1}}

.founder-portrait{margin:2rem 0 0;display:flex;align-items:center;gap:1.15rem}
.founder-portrait img{width:104px;height:104px;border-radius:50%;object-fit:cover;object-position:center 28%;border:3px solid rgba(255,255,255,.85);box-shadow:0 12px 30px -16px rgba(42,54,68,.5)}
.founder-portrait figcaption{display:flex;flex-direction:column;gap:.2rem;font-size:.95rem;color:var(--ink);font-weight:600;letter-spacing:.005em}
.founder-portrait figcaption span{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:#5A6577;font-weight:500}
@media (max-width:900px){.founder-portrait{margin-top:1.5rem}.founder-portrait img{width:88px;height:88px}}
.credentials{list-style:none;padding:0;margin:1.6rem 0 0;display:flex;flex-direction:column;gap:.55rem;max-width:26rem}
.credentials li{position:relative;padding-left:1.05rem;font-size:.88rem;line-height:1.5;color:#3B4859}
.credentials li::before{content:"";position:absolute;left:0;top:.52em;width:5px;height:5px;border-radius:50%;background:rgba(42,54,68,.45)}
.founder-sig{padding-top:1.15rem;border-top:1px solid rgba(42,54,68,.16);font-size:.95rem!important;color:#4A5768!important}

/* ---------- Sample form ---------- */
.sample-form{margin:.4rem 0 0;display:flex;flex-direction:column;gap:.9rem;max-width:24rem}
.sample-form .field{display:flex;flex-direction:column;gap:.35rem}
.sample-form label{font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:#5A6577;font-weight:600}
.sample-form input{font:inherit;font-size:.98rem;color:var(--ink);padding:.7rem .85rem;border:1px solid rgba(42,54,68,.18);border-radius:10px;background:rgba(255,255,255,.85);transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.sample-form input::placeholder{color:#8C97A5}
.sample-form input:focus{outline:none;border-color:#1E4257;box-shadow:0 0 0 3px rgba(162,202,217,.35)}
.sample-form input[aria-invalid="true"]{border-color:#B4553C}
.sample-form button{margin-top:.2rem;align-self:flex-start}
.sample-form button[disabled]{opacity:.6;cursor:default}
.form-status{margin:0;min-height:1.2em;font-size:.88rem;line-height:1.5;color:#3B4859}
.form-status.ok{color:#2C6B4F}
.form-status.err{color:#B4553C}

/* ---------- Sample ---------- */
.sample-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2.2rem,5vw,4.5rem);align-items:center}
.sample-art{margin:0;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-lift)}
.sample-copy .lede{margin-top:1.4rem}
.sample-copy .btn{margin-top:2.1rem}
.sample-copy .micro{margin-top:1.1rem}

/* ---------- Footer ---------- */
.footer{background:#202934;color:#D6DDE5;padding-block:clamp(3rem,6vw,4.5rem)}
.footer-inner{display:flex;flex-wrap:wrap;gap:2rem 3rem;justify-content:space-between;align-items:flex-start}
.footer-brand{display:flex;align-items:center;gap:.62rem;color:#F1E3D1}
.footer-brand .mark{color:var(--ocean)}
.footer-nav{display:flex;flex-wrap:wrap;gap:.35rem 1.35rem;order:3;width:100%;padding-top:1.6rem;border-top:1px solid rgba(255,255,255,.1)}
.footer-nav a{color:#C4CEDA;font-size:.83rem;text-decoration:none;transition:color .25s var(--ease)}
.footer-nav a:hover{color:#F1E3D1;text-decoration:underline;text-underline-offset:3px}
.footer-meta{display:flex;flex-direction:column;gap:.7rem;max-width:46rem;font-size:.875rem;line-height:1.6}
.footer-meta a{color:#BEDBE7}
.disclaimer,.copyright{color:#9AA6B4;font-size:.8rem}

/* ---------- Reveal ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .btn,.card{transition:none}
}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .nav-links{display:none}
}
@media (max-width:1020px){
  .method-grid{grid-template-columns:1fr}
  .method-art{position:static;order:-1;max-height:340px}
  .method-art img{object-fit:cover;height:340px}
  .founder-grid,.sample-grid{grid-template-columns:1fr}
  .cards-3{grid-template-columns:1fr 1fr}
  .cards-3 .card:last-child{grid-column:1/-1}
}
@media (max-width:720px){
  body{font-size:1.0125rem}
  .cards-3{grid-template-columns:1fr}
  .cards-3 .card:last-child{grid-column:auto}
  .chips{grid-template-columns:1fr}
  .chip{padding:1.2rem 1.1rem}
  .chip strong{font-size:1.6rem}
  .hero-art img{object-position:72% 55%}
  .hero-scrim{background:
    linear-gradient(180deg, rgba(251,249,246,.9) 0%, rgba(251,249,246,.8) 55%, rgba(251,249,246,.42) 100%),
    linear-gradient(90deg, rgba(251,249,246,.62) 0%, rgba(251,249,246,.2) 100%)}
  .hero-shell{padding-top:4.5rem;padding-bottom:5rem}
  .hero-actions .btn{flex:1 1 100%;justify-content:center}
  .trust{margin-top:2.4rem}
  .method-list li{padding-left:0;padding-top:1.6rem;padding-bottom:1.6rem}
  .method-list li:first-child{padding-top:0}
  .numeral{position:static;display:block;font-size:1.6rem;margin-bottom:.5rem}
  .sample-copy .btn{width:100%;justify-content:center}
  .footer-inner{flex-direction:column;gap:1.6rem}
}
@media (max-width:420px){
  .wordmark-text{font-size:.68rem;letter-spacing:.14em}
  .nav .btn-sm{padding:.55rem .95rem;font-size:.78rem}
}

/* ---------- Legal pages (privacy) ---------- */
.legal-shell{max-width:52rem}
.legal-shell h1{font-size:clamp(2.4rem,4.6vw,3.5rem);line-height:1.06}
.legal-meta{margin:0 0 2.4rem;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;color:#5A6577}
.legal-shell h2{font-size:clamp(1.15rem,1.8vw,1.4rem);margin:2.4rem 0 .7rem;letter-spacing:-.01em}
.legal-shell p{margin:0 0 1rem;color:#3B4859;font-size:1rem;line-height:1.68}
.legal-shell a{color:var(--deep);text-decoration:underline;text-underline-offset:2px}
.legal-shell a:hover{color:var(--ink)}
.legal-list{margin:0 0 1.15rem;padding-left:1.15rem;display:flex;flex-direction:column;gap:.55rem}
.legal-list li{color:#3B4859;font-size:1rem;line-height:1.62}
.legal-list li strong{color:var(--ink);font-weight:600}
.legal-close{margin-top:2.4rem;padding-top:1.5rem;border-top:1px solid rgba(42,54,68,.14);color:#4A5768}
.legal-shell .lede{max-width:none}