/* SERVACT v3 scroll story. Scoped to .story, [data-reveal], .handoff. Nothing here targets the hero.
   Default (no JS / reduced motion): every visual shows its complete final state. */

:root{--fig-h:min(540px, calc(100vh - var(--header) - 56px))}
@supports (height:100svh){:root{--fig-h:min(540px, calc(100svh - var(--header) - 56px))}}

.story-head{max-width:820px}
.story-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:56px;margin-top:40px;align-items:start}
.story-figure{align-self:start}

/* ---- Pinned mode (desktop, motion allowed) ---- */
html.story-pinned .story-figure{position:sticky;top:calc(var(--header) + (100vh - var(--header) - var(--fig-h)) / 2);height:var(--fig-h)}
html.story-pinned .story-step{transition:opacity .525s ease}
html.story-pinned .story-steps .story-step:not(.is-active){opacity:.38}

/* =========================================================
   Problem: fragmentation figure
   ========================================================= */
/* final state defaults */
/* stage 6: converge into SERVACT */

/* =========================================================
   Lifecycle: one item travelling through SERVACT
   ========================================================= */
.story-life{padding-bottom:clamp(16px,2vw,24px)}
.story-life .story-head p{color:var(--text-dark-2)}
.life-steps{counter-reset:none}
.life-steps .story-step{padding:18px 0}
.life-pillar{font:600 .8125rem var(--body);color:var(--orange);margin-bottom:6px}
.life-steps h3{font-size:clamp(1.375rem,2.2vw,1.75rem);font-weight:800;color:var(--white)}
.life-steps p:not(.life-pillar){margin-top:8px;color:var(--text-dark-2);max-width:30em}

.story-figure.life{display:flex;align-items:center}
.life-panel{width:100%;min-height:360px;display:flex;flex-direction:column;background:rgba(255,255,255,.035);border:1px solid var(--line-dark);border-radius:18px;padding:22px 24px 26px}
.life-top{display:flex;align-items:center;gap:12px}
.life-top img{width:40px;height:40px;border-radius:10px}
.life-top p{font:700 1.0625rem var(--head);color:var(--white);letter-spacing:-.01em}
.life-illus{margin-left:auto;font:500 .75rem var(--body);color:var(--text-dark-3);border:1px solid var(--line-dark);border-radius:999px;padding:4px 10px}
.life-track{position:relative;display:grid;grid-template-columns:repeat(4,1fr);margin-top:34px}
.life-rail{position:absolute;left:12.5%;right:12.5%;top:9px;height:2px;background:rgba(255,255,255,.14)}
.life-rail i{display:block;height:100%;background:var(--orange);width:calc(var(--pos,1) * 100%)}
.life-station{position:relative;text-align:center}
.life-station b{display:block;width:20px;height:20px;margin:0 auto;border-radius:50%;background:var(--midnight);border:2px solid var(--orange);box-shadow:inset 0 0 0 4px var(--midnight),inset 0 0 0 10px var(--orange)}
.life-station span{display:block;margin-top:12px;font:600 .9375rem var(--body);color:var(--white)}


/* pinned: stage-driven states */
html.story-pinned .life-rail i{transition:width .9s ease}
html.story-pinned .life-station b{transition:box-shadow .525s,border-color .525s}
html.story-pinned .life-station span{transition:color .525s}
html.story-pinned .life .life-station b{border-color:rgba(255,255,255,.3);box-shadow:inset 0 0 0 4px var(--midnight),inset 0 0 0 10px transparent}
html.story-pinned .life .life-station span{color:var(--text-dark-3)}
html.story-pinned .life.s1 [data-n="1"] b,html.story-pinned .life.s2 [data-n="2"] b,html.story-pinned .life.s3 [data-n="3"] b,html.story-pinned .life.s4 [data-n="4"] b{border-color:var(--orange);box-shadow:inset 0 0 0 4px var(--midnight),inset 0 0 0 10px var(--orange)}
html.story-pinned .life.s1 [data-n="1"] span,html.story-pinned .life.s2 [data-n="2"] span,html.story-pinned .life.s3 [data-n="3"] span,html.story-pinned .life.s4 [data-n="4"] span{color:var(--white)}
html.story-pinned .life[data-stage="0"] .life-rail i{width:0}

/* =========================================================
   Reveals (motion only). Content is visible by default.
   ========================================================= */
/* Belief: pillar line and nodes light in sequence */

/* Around-ERP: lines draw from the systems into the layer */
html.story-motion .arch-diagram .arch-lines svg{transition:clip-path 1.2s ease .2s}
html.story-motion .arch-diagram:not(.in) .arch-lines svg{clip-path:inset(0 0 100% 0)}
html.story-motion .arch-diagram .layer{transition:opacity .7s ease 1.2s,transform .7s ease 1.2s}
html.story-motion .arch-diagram:not(.in) .layer{opacity:.35;transform:translateY(6px)}

/* Handoff: completed lifecycle line runs down into SERVACT in action */
.handoff{position:relative;max-width:1120px;height:clamp(72px,9vw,120px);margin:0 auto 26px}
.handoff i{position:absolute;left:5px;top:0;width:2px;height:100%;background:linear-gradient(var(--orange),rgba(252,129,2,.15));transform-origin:top}
.handoff b{position:absolute;left:0;bottom:-6px;width:12px;height:12px;border-radius:50%;background:var(--orange)}
html.story-motion .handoff i{transition:transform 1.3s ease .15s}
html.story-motion .handoff b{transition:opacity .4s ease 1.3s}
html.story-motion .handoff:not(.in) i{transform:scaleY(0)}
html.story-motion .handoff:not(.in) b{opacity:0}

/* Use cases: short stagger, once visible */
html.story-motion .use-grid .use{transition:opacity .7s ease,transform .7s ease}
html.story-motion .use-grid .use:not(.in){opacity:0;transform:translateY(12px)}
html.story-motion .use-grid .use:nth-child(2){transition-delay:.12s}
html.story-motion .use-grid .use:nth-child(3){transition-delay:.24s}
html.story-motion .use-grid .use:nth-child(4){transition-delay:0s}
html.story-motion .use-grid .use:nth-child(5){transition-delay:.12s}
html.story-motion .use-grid .use:nth-child(6){transition-delay:.24s}


/* =========================================================
   Tablet and mobile: simplified story (no pinning)
   ========================================================= */
@media (max-width:1024px){
  .story-grid{grid-template-columns:1fr;gap:28px}
  /* vertical lifecycle */
  .life-steps{position:relative;padding-left:4px}
  .life-steps .story-step{position:relative;padding:4px 0 30px 40px}
  .life-steps .story-step::before{content:"";position:absolute;left:0;top:6px;width:20px;height:20px;border-radius:50%;background:var(--midnight);border:2px solid var(--orange);box-shadow:inset 0 0 0 4px var(--midnight),inset 0 0 0 10px var(--orange)}
  .life-steps .story-step:not(:last-child)::after{content:"";position:absolute;left:9px;top:30px;bottom:0;width:2px;background:rgba(252,129,2,.45)}
  html.story-motion .life-steps .story-step::before{transition:all .675s ease}
  html.story-motion .life-steps .story-step:not(.in)::before{border-color:rgba(255,255,255,.3);box-shadow:inset 0 0 0 4px var(--midnight),inset 0 0 0 10px transparent}
}
/* Mobile fragmentation visual */

/* Short laptop screens: keep pinned visuals inside the viewport */
@media (max-height:800px) and (min-width:1025px){
  :root{--fig-h:calc(100vh - var(--header) - 40px)}
  .life-panel{min-height:0;padding:18px 20px 20px}
  .life-track{margin-top:24px}
}

@media (max-width:1024px){
  html.story-motion .use-grid .use{transition-delay:0s!important}
}

/* =========================================================================
   V4: scroll-driven highlighting. Glow indicates meaning, not decoration:
   blue = active / connected, orange = nodes and important moments.
   Base (no JS / reduced motion) = complete, connected look with no transitions.
   Stage states apply only under html.story-pinned / html.story-motion.
   ========================================================================= */
:root{--glow-blue:0,122,231;--glow-orange:252,129,2}

/* ---- Problem figure (desktop pinned) ---- */
/* each area settles to a quiet blue border once reached, and glows while active */
/* stage 4-5: cross-team paths become visible (energised, still unresolved) */
/* stage 6: everything connected into the SERVACT layer */

/* ---- Platform: automatic sequence. Systems light and pulse into the layer, then the four capabilities. ---- */
.layer li{position:relative}
.layer li::after{content:"";position:absolute;top:-3px;right:-3px;width:7px;height:7px;border-radius:50%;background:var(--orange);opacity:0}
.arch-lines{position:relative}
.ap{position:absolute;left:var(--x);top:0;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:var(--orange);box-shadow:0 0 8px 2px rgba(var(--glow-orange),.5);opacity:0;pointer-events:none}
@keyframes archPulse{
  0%{opacity:0;left:var(--x);top:0}
  8%{opacity:1}
  28%{left:var(--x);top:56%}
  70%{left:50%;top:56%}
  94%{opacity:1}
  100%{opacity:0;left:50%;top:100%}
}
@media (max-width:760px){.ap{--x:50%!important}}
/* completed state: reduced motion, no JS, and the end of the sequence */
html:not(.story-motion) .arch-diagram .systems li,html.story-motion .arch-diagram.a11 .systems li{border-color:#8DBDF0;background:#F0F6FD}
html:not(.story-motion) .arch-diagram .arch-lines path,html.story-motion .arch-diagram.a11 .arch-lines path{stroke:var(--blue)}
html:not(.story-motion) .arch-diagram .layer,html.story-motion .arch-diagram.a11 .layer{box-shadow:0 0 0 1px rgba(var(--glow-blue),.55),0 16px 36px -16px rgba(var(--glow-blue),.55)}
html:not(.story-motion) .arch-diagram .layer li,html.story-motion .arch-diagram.a11 .layer li{color:#fff;border-color:rgba(var(--glow-blue),.55)}
/* sequence states */
html.story-motion .arch-diagram .systems li,html.story-motion .arch-diagram .layer,html.story-motion .arch-diagram .layer img,html.story-motion .arch-diagram .layer li,html.story-motion .arch-diagram .layer li::after,html.story-motion .arch-diagram .arch-lines path{transition:border-color .75s ease,background-color .75s ease,box-shadow .9s ease,color .75s ease,opacity .75s ease,stroke .9s ease,transform .75s ease}
html.story-motion .arch-diagram .layer li{color:rgba(255,255,255,.62);border-color:rgba(255,255,255,.14)}
html.story-motion .arch-diagram.a11 .layer li{color:#fff;border-color:rgba(var(--glow-blue),.55)}
/* systems: each lights while its pulse leaves, then settles to a quiet blue edge */
html.story-motion .arch-diagram.a1 .systems li:nth-child(1),html.story-motion .arch-diagram.a2 .systems li:nth-child(2),html.story-motion .arch-diagram.a3 .systems li:nth-child(3),html.story-motion .arch-diagram.a4 .systems li:nth-child(4),html.story-motion .arch-diagram.a5 .systems li:nth-child(5){border-color:#8DBDF0;background:#F0F6FD}
html.story-motion .arch-diagram[data-arch="1"] .systems li:nth-child(1),html.story-motion .arch-diagram[data-arch="2"] .systems li:nth-child(2),html.story-motion .arch-diagram[data-arch="3"] .systems li:nth-child(3),html.story-motion .arch-diagram[data-arch="4"] .systems li:nth-child(4),html.story-motion .arch-diagram[data-arch="5"] .systems li:nth-child(5){border-color:var(--blue);background:#E6F1FD;box-shadow:0 0 0 3px rgba(var(--glow-blue),.14),0 10px 22px -10px rgba(var(--glow-blue),.55);transform:translateY(-2px)}
/* lines brighten as each system's turn arrives; each pulse travels its own route once (cumulative classes keep them running) */
html.story-motion .arch-diagram.a1 .arch-lines path:nth-child(1),html.story-motion .arch-diagram.a2 .arch-lines path:nth-child(2),html.story-motion .arch-diagram.a3 .arch-lines path:nth-child(3),html.story-motion .arch-diagram.a4 .arch-lines path:nth-child(4),html.story-motion .arch-diagram.a5 .arch-lines path:nth-child(5){stroke:var(--blue)}
html.story-motion .arch-diagram.a1 .ap:nth-of-type(1),html.story-motion .arch-diagram.a2 .ap:nth-of-type(2),html.story-motion .arch-diagram.a3 .ap:nth-of-type(3),html.story-motion .arch-diagram.a4 .ap:nth-of-type(4),html.story-motion .arch-diagram.a5 .ap:nth-of-type(5){animation:archPulse 1.3s ease-in-out .15s both}
/* layer receives the pulses */
html.story-motion .arch-diagram.a6 .layer{box-shadow:0 0 0 1px rgba(var(--glow-blue),.4),0 10px 28px -14px rgba(var(--glow-blue),.45)}
html.story-motion .arch-diagram[data-arch="6"] .layer{box-shadow:0 0 0 1px rgba(var(--glow-blue),.7),0 0 38px -6px rgba(var(--glow-blue),.7)}
html.story-motion .arch-diagram[data-arch="6"] .layer img{box-shadow:0 0 0 2px rgba(var(--glow-blue),.55)}
/* capabilities: settled, then active (blue halo, brighter border and text, orange node) */
html.story-motion .arch-diagram.a8 .layer li:nth-child(1),html.story-motion .arch-diagram.a9 .layer li:nth-child(-n+2),html.story-motion .arch-diagram.a10 .layer li:nth-child(-n+3){color:rgba(255,255,255,.88);border-color:rgba(var(--glow-blue),.5)}
html.story-motion .arch-diagram[data-arch="7"] .layer li:nth-child(1),html.story-motion .arch-diagram[data-arch="8"] .layer li:nth-child(2),html.story-motion .arch-diagram[data-arch="9"] .layer li:nth-child(3),html.story-motion .arch-diagram[data-arch="10"] .layer li:nth-child(4){color:#fff;border-color:#4DA3F5;box-shadow:0 0 0 3px rgba(var(--glow-blue),.16),0 0 16px -2px rgba(var(--glow-blue),.5)}
html.story-motion .arch-diagram[data-arch="7"] .layer li:nth-child(1)::after,html.story-motion .arch-diagram[data-arch="8"] .layer li:nth-child(2)::after,html.story-motion .arch-diagram[data-arch="9"] .layer li:nth-child(3)::after,html.story-motion .arch-diagram[data-arch="10"] .layer li:nth-child(4)::after{opacity:1}
html.story-motion .arch-diagram.a7 .layer,html.story-motion .arch-diagram.a8 .layer,html.story-motion .arch-diagram.a9 .layer,html.story-motion .arch-diagram.a10 .layer{box-shadow:0 0 0 1px rgba(var(--glow-blue),.5),0 12px 30px -14px rgba(var(--glow-blue),.5)}

/* ---- Lifecycle (desktop pinned) ---- */
.life-rail i{position:relative}
.life-rail i::after{content:"";position:absolute;right:-5px;top:-4px;width:10px;height:10px;border-radius:50%;background:var(--orange);box-shadow:0 0 12px 2px rgba(var(--glow-orange),.45);opacity:0}
html.story-pinned .life-steps .story-step .life-pillar{color:var(--text-dark-3);transition:color .6s ease}
html.story-pinned .life-steps .story-step.is-active .life-pillar{color:var(--orange)}
html.story-pinned .life-rail{transition:box-shadow .9s ease,background-color .9s ease}
html.story-pinned .life-panel,html.story-pinned .life-top img,html.story-pinned .life-station b,html.story-pinned .life-rail i::after{transition:box-shadow .9s ease,border-color .9s ease,opacity .75s ease,left 1.05s cubic-bezier(.3,.7,.2,1),transform .6s ease}
/* earlier stages settle back slightly */
html.story-pinned .life[data-stage="2"] [data-n="1"] b,html.story-pinned .life[data-stage="3"] [data-n="1"] b,html.story-pinned .life[data-stage="3"] [data-n="2"] b,html.story-pinned .life[data-stage="4"] [data-n="1"] b,html.story-pinned .life[data-stage="4"] [data-n="2"] b,html.story-pinned .life[data-stage="4"] [data-n="3"] b{opacity:.72}
html.story-pinned .life.s2 [data-n="1"] span,html.story-pinned .life.s3 [data-n="1"] span,html.story-pinned .life.s3 [data-n="2"] span,html.story-pinned .life.s4 [data-n="1"] span,html.story-pinned .life.s4 [data-n="2"] span,html.story-pinned .life.s4 [data-n="3"] span{color:rgba(255,255,255,.72)}
/* active station: node halo, brighter label, keyword turns orange */
html.story-pinned .life[data-stage="1"] [data-n="1"] b,html.story-pinned .life[data-stage="2"] [data-n="2"] b,html.story-pinned .life[data-stage="3"] [data-n="3"] b,html.story-pinned .life[data-stage="4"] [data-n="4"] b{box-shadow:inset 0 0 0 4px var(--midnight),inset 0 0 0 10px var(--orange),0 0 0 5px rgba(var(--glow-orange),.16),0 0 16px 2px rgba(var(--glow-blue),.4)}
/* path leading to the active stage brightens; a bright head travels with it */
html.story-pinned .life[data-stage="2"] .life-rail i::after,html.story-pinned .life[data-stage="3"] .life-rail i::after{opacity:1}
html.story-pinned .life[data-stage="2"] .life-rail,html.story-pinned .life[data-stage="3"] .life-rail{background:rgba(var(--glow-blue),.28)}
/* stage 4: resolved. The completed journey settles into a connected panel; the item takes an orange finish */
html.story-pinned .life[data-stage="4"] .life-panel{border-color:rgba(var(--glow-blue),.55);box-shadow:0 0 0 1px rgba(var(--glow-blue),.25),0 24px 60px -24px rgba(var(--glow-blue),.45)}
html.story-pinned .life[data-stage="4"] .life-rail{background:rgba(var(--glow-blue),.5);box-shadow:0 0 10px rgba(var(--glow-blue),.45)}
html.story-pinned .life[data-stage="4"] .life-top img{box-shadow:0 0 0 2px rgba(var(--glow-blue),.5)}

/* ---- Lifecycle and belief on tablet/mobile: same language, driven by reveals ---- */
@media (max-width:1024px){
  html.story-motion .life-steps .story-step .life-pillar{transition:color .6s ease}
  html.story-motion .life-steps .story-step:not(.in) .life-pillar{color:var(--text-dark-3)}
  html.story-motion .life-steps .story-step.in::before{box-shadow:inset 0 0 0 4px var(--midnight),inset 0 0 0 10px var(--orange),0 0 0 4px rgba(var(--glow-orange),.14),0 0 12px 1px rgba(var(--glow-blue),.35)}
  html.story-motion .life-steps .story-step:not(:last-child)::after{transition:background-color .75s ease}
  html.story-motion .life-steps .story-step.in:has(+ .story-step.in)::after{background:rgba(var(--glow-blue),.7)}
}
/* ---- Mobile problem visual: areas connect, then SERVACT shows a completed state ---- */

/* =========================================================================
   V5: Problem section, one coordinated story (statements <-> diagram).
   Scroll-driven and one-shot: nothing loops. Full choreography in split mode (>=900px, motion allowed); simplified below that;
   base styles below are the completed final state (reduced motion, tablet, mobile).
   ========================================================================= */
/* final statement: SERVACT payoff (deep orange for legible text on white) */

@keyframes dotPop{0%{transform:scale(1)}45%{transform:scale(1.75)}100%{transform:scale(1.2)}}
@keyframes dotBreak{0%{transform:scale(1)}40%{transform:scale(1.9)}100%{transform:scale(1)}}
@keyframes stmtLift{0%{transform:scale(1)}40%{transform:scale(1.035)}100%{transform:scale(1)}}
@keyframes puTravel{0%{stroke-dashoffset:8}100%{stroke-dashoffset:-100}}
/* final step before it is reached: ordinary dot and ink statement */
/* payoff: the dot breaks out, becomes the statement accent; the statement comes forward, then settles, staying orange */
/* earlier problem dots go quieter once SERVACT arrives */

/* diagram: guide tracks appear for reached areas; one pulse travels the current connector */
/* stage 6: the four pulses converge into SERVACT; the layer glows as they arrive */

/* ---- V6: availability. No pointer-type requirement. ---- */
/* 900-1024px: keep the diagram and the two-column story (scroll-driven, sticky figure) */
@media (min-width:900px) and (max-width:1024px){
  :root{--fig-h:min(540px, calc(100vh - var(--header) - 40px))}
}
/* below 900px: simplified story driven by scroll position (no pinning) */
@keyframes fmPulse{0%{opacity:0;transform:translateY(0)}15%{opacity:1}85%{opacity:1}100%{opacity:0;transform:translateY(28px)}}
@keyframes flowDown{0%{background-position:0 0}100%{background-position:0 100%}}

/* ---- V7: automatic in-view sequence (no scroll distance spent). Past rows ease back; once complete, all rows read normally. ---- */

/* ---- V8: lifecycle plays as an automatic in-view sequence (>=1025px). Past rows ease back; complete = all readable. ---- */
html.story-pinned .story-life .story-step{display:flex;flex-direction:column;justify-content:center;padding:9px 0}
html.story-pinned .story-life .story-step.is-past:not(.is-active){opacity:.62}
html.story-pinned .story-life.is-done .story-steps .story-step:not(.is-active){opacity:1}
html.story-pinned .story-life.is-done .life-steps .story-step .life-pillar{color:var(--orange)}

/* ---- V9: more compact lifecycle (shorter scroll) ---- */
.story-life{padding-top:clamp(48px,5.5vw,72px);padding-bottom:clamp(8px,1.5vw,16px)}
.story-life .story-grid{margin-top:22px}
.life-steps .story-step{padding:10px 0}
.life-steps p:not(.life-pillar){margin-top:5px}
.life-steps h3{font-size:clamp(1.25rem,2vw,1.5rem)}
.life-pillar{margin-bottom:3px}
.life-panel{min-height:320px;padding:18px 22px 20px}
.life-track{margin-top:24px}

@media (max-width:1024px){
  .life-steps .story-step{padding:2px 0 18px 40px}
}
html.story-pinned .story-life .story-figure{position:relative;top:auto;height:auto;align-self:center}

/* hand-off into "From document to decision." */
.handoff-label{position:absolute;left:28px;bottom:-16px;margin:0;font:500 .875rem var(--body);color:var(--text-dark-2);background:rgba(255,255,255,.04);border:1px solid var(--line-dark);border-radius:999px;padding:6px 14px;max-width:calc(100% - 40px)}
.handoff b{box-shadow:0 0 0 4px rgba(var(--glow-orange),.16),0 0 14px 1px rgba(var(--glow-blue),.4)}
html.story-motion .handoff-label{transition:opacity .6s ease 1.5s,transform .6s ease 1.5s}
html.story-motion .handoff:not(.in) .handoff-label{opacity:0;transform:translateX(-8px)}
html.story-pinned .story-life .story-step{padding:5px 0}

/* ---- Problem figure: fixed in place beside the list (no sticky drift), like the other visuals ---- */

/* Overview: the route section continues the lifecycle hand-off */
.explore{padding-top:0}

/* ---- How the work moves: three kinds of finance work through the same four stages.
   Base = completed state (owner + outcome visible). Under html.story-pinned the cards
   step through the stages together, each card a beat behind the one above. ---- */
.life-items{display:grid;gap:10px;margin-top:22px}
.life-item{background:#fff;border-radius:12px;padding:12px 16px 13px;box-shadow:0 14px 32px -22px rgba(0,0,0,.7)}
.li-head{display:flex;align-items:center;gap:8px}
.li-head svg{flex:none;fill:none;stroke:var(--navy);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.li-title{font:700 1rem var(--head);color:var(--ink);letter-spacing:-.01em}
.li-status{margin-left:auto;display:grid;justify-items:end}
.st{grid-area:1/1;display:inline-flex;align-items:center;height:24px;font:600 .75rem var(--body);border-radius:6px;padding:0 8px;white-space:nowrap;opacity:0}
.st1,.st2{background:#E8F0F9;color:var(--navy)}.st3{background:#FFF1E0;color:#8A4304}.st4{background:var(--midnight);color:#fff;opacity:1}
.li-desc{margin-top:4px;font:500 .8125rem var(--body);color:var(--slate)}
.li-row{display:block;font:500 .8125rem var(--body);color:var(--ink-body)}
.li-row b{font-weight:700;color:var(--ink);margin-right:3px}
.li-row span{color:var(--slate);margin:0 2px}
.li-own{margin-top:6px}
.li-swap{display:grid;margin-top:3px}
.li-swap .li-row{grid-area:1/1}
.li-upd{opacity:0}
.li-out b{color:#B4560B}
.life-end{margin-top:clamp(28px,3.5vw,44px);font:700 clamp(1.125rem,1.7vw,1.375rem) var(--head);color:var(--white);letter-spacing:-.01em}

/* motion: pre-states and per-stage reveals */
html.story-pinned .life-item{transition:opacity .6s ease,box-shadow .9s ease}
.life-item[data-i="2"]{--d:.25s}.life-item[data-i="3"]{--d:.5s}
html.story-pinned .life-item .li-own,html.story-pinned .life-item .li-upd,html.story-pinned .life-item .li-out{transition:opacity .5s ease var(--d,0s),transform .5s ease var(--d,0s)}
/* status chips: the old one fades out first, then the new one fades in (no overlap) */
html.story-pinned .life-item .st{transition:opacity .2s ease var(--d,0s)}
html.story-pinned .life .st4{opacity:0}
html.story-pinned .life[data-stage="0"] .st1,html.story-pinned .life[data-stage="1"] .st1,html.story-pinned .life[data-stage="2"] .st2,html.story-pinned .life[data-stage="3"] .st3,html.story-pinned .life[data-stage="4"] .st4{opacity:1;transition:opacity .35s ease calc(var(--d,0s) + .2s)}
html.story-pinned .life[data-stage="0"] .life-item{opacity:.5}
html.story-pinned .life .li-own,html.story-pinned .life .li-out{opacity:0;transform:translateY(3px)}
html.story-pinned .life.s2 .li-own,html.story-pinned .life.s4 .li-out{opacity:1;transform:none}
html.story-pinned .life.s3 .li-upd{opacity:1}
html.story-pinned .life.s4 .li-upd{opacity:0}
html.story-pinned .life[data-stage="1"] .life-item,html.story-pinned .life[data-stage="2"] .life-item,html.story-pinned .life[data-stage="3"] .life-item{box-shadow:0 0 0 1px rgba(var(--glow-blue),.4),0 0 24px -10px rgba(var(--glow-blue),.55),0 14px 32px -22px rgba(0,0,0,.7)}
html.story-pinned .life[data-stage="4"] .life-item{box-shadow:0 0 0 1px rgba(var(--glow-orange),.45),0 0 22px -10px rgba(var(--glow-orange),.5),0 14px 32px -22px rgba(0,0,0,.7)}

/* tablet and mobile: the panel sits under the vertical timeline, in its completed state */
@media (max-width:1024px){
  .story-life .story-figure{max-width:640px}
}
@media (max-width:640px){
  .life-panel{padding:16px 14px 16px}
  .life-track{display:none}
  .life-top p{font-size:1rem}
  .life-item{padding:11px 13px 12px}
}

/* ---- Overview reveals (11 Nov 2026). story.js adds .in to each [data-reveal] block as it comes into view; pre-states only
   with motion allowed and story.js running, so without JavaScript or with reduced motion everything is shown. ---- */
html.story-motion.story-js .what .sec-head,html.story-motion.story-js .proof .sec-head,html.story-motion.story-js .pilot .sec-head,html.story-motion.story-js .what-never,html.story-motion.story-js .shot-close,html.story-motion.story-js .what .how-grid{transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
html.story-motion.story-js .what .sec-head:not(.in),html.story-motion.story-js .proof .sec-head:not(.in),html.story-motion.story-js .pilot .sec-head:not(.in),html.story-motion.story-js .what-never:not(.in),html.story-motion.story-js .shot-close:not(.in),html.story-motion.story-js .what .how-grid:not(.in){opacity:0;transform:translateY(18px)}
html.story-motion.story-js .what .how-grid{transition-delay:.1s}
/* hero: copy then player */
html.story-motion .hero-v .hero-copy > *,html.story-motion .hero-v .hero-player{animation:hv-rise .9s cubic-bezier(.2,.7,.2,1) both}
html.story-motion .hero-v .hero-copy > :nth-child(2){animation-delay:.08s}
html.story-motion .hero-v .hero-copy > :nth-child(3){animation-delay:.18s}
html.story-motion .hero-v .hero-copy > :nth-child(4){animation-delay:.26s}
html.story-motion .hero-v .hero-copy > :nth-child(5){animation-delay:.34s}
html.story-motion .hero-v .hero-player{animation-delay:.3s}
@keyframes hv-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
/* two examples: each card settles in (the right one a beat later); markers, highlights and notes are sequenced by site.js */
html.story-motion.story-js .proof-card{transition:opacity .9s ease,transform 1s cubic-bezier(.2,.7,.2,1)}
html.story-motion.story-js .proof-grid:not(.in) .proof-card{opacity:0;transform:translateY(22px)}
html.story-motion.story-js .proof-grid .proof-card + .proof-card{transition-delay:.25s}
html.story-motion.story-js .proof-grid.is-seq .mk{transition:opacity .3s ease,transform .5s cubic-bezier(.3,1.6,.5,1)}
html.story-motion.story-js .proof-grid.is-seq .mk:not(.is-in){opacity:0;transform:translate(-50%,-50%) scale(.3)}
html.story-motion.story-js .proof-grid.is-seq .mk.is-in::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:2px solid var(--orange);animation:mk-ring 1.1s ease-out forwards}
@keyframes mk-ring{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(2.4)}}
html.story-motion.story-js .proof-grid.is-seq .callouts li{transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.2,1),background-color .3s ease}
html.story-motion.story-js .proof-grid.is-seq .callouts li:not(.is-in){opacity:.2;transform:translateX(8px)}
/* pilot: the line draws and the four steps light up in turn */
html.story-motion.story-js .pilot .steps::before{transform-origin:left center;transition:transform 1.4s cubic-bezier(.4,0,.2,1) .1s}
html.story-motion.story-js .pilot .steps:not(.in)::before{transform:scaleX(0)}
html.story-motion.story-js .pilot .step{transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
html.story-motion.story-js .pilot .steps:not(.in) .step{opacity:0;transform:translateY(14px)}
html.story-motion.story-js .pilot .step::before{transition:transform .5s cubic-bezier(.3,1.5,.5,1);transition-delay:inherit}
html.story-motion.story-js .pilot .steps:not(.in) .step::before{transform:scale(.5)}
html.story-motion.story-js .pilot .step:nth-child(1){transition-delay:.15s}
html.story-motion.story-js .pilot .step:nth-child(2){transition-delay:.5s}
html.story-motion.story-js .pilot .step:nth-child(3){transition-delay:.85s}
html.story-motion.story-js .pilot .step:nth-child(4){transition-delay:1.2s}