/* Infographics: animated SVG + interactive figures in the logo colours */
.ig{margin:0;background:var(--tint);border-radius:32px;padding:clamp(20px,3vw,40px);position:relative}
.ig-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:18px}
.ig-title{font:800 clamp(18px,1.8vw,24px) var(--f);letter-spacing:-.02em}
.ig-svg{width:100%;height:auto;display:block}
.ig figcaption{margin-top:16px;font-size:14px;color:var(--muted);max-width:70ch}
.ig-t{font:700 14px var(--f);fill:var(--muted);letter-spacing:.01em}
.ig-node{cursor:pointer;transition:opacity .3s}.ig-node:hover{opacity:.82}
.ig-node:focus-visible{outline:3px solid var(--cyan);outline-offset:4px}
.ig-flow{animation:flow 1.4s linear infinite}
@keyframes flow{to{stroke-dashoffset:-36}}
.ig.paused .ig-flow,.ig.paused .tr-poly{animation-play-state:paused}
.ig-pp{display:inline-flex;align-items:center;gap:8px;border:0;background:#fff;border-radius:99px;padding:8px 14px;font:700 12px var(--f);cursor:pointer;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
.ig-pp:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.ig-pp-i{width:10px;height:12px;border-left:3.5px solid currentColor;border-right:3.5px solid currentColor}
.ig-pp[aria-pressed=true] .ig-pp-i{width:0;height:0;border:0;border-left:10px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent}

/* anatomy + trade-off share a two-column layout */
.anat-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,56px);align-items:center}
.anat-svg{max-width:460px;margin:0 auto}
.anat-svg [data-part]{transition:opacity .4s,filter .4s}
.anat-svg.dim [data-part]{opacity:.22}.anat-svg.dim [data-part].on{opacity:1}
.anat-list{display:flex;flex-direction:column;gap:10px}
.anat-b{all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:18px 1fr;column-gap:14px;padding:16px 18px;border-radius:18px;background:#fff;transition:background .3s,transform .3s;box-shadow:inset 0 0 0 1.5px transparent}
.anat-b i{grid-row:1;width:14px;height:14px;border-radius:4px;background:var(--c);margin-top:5px}
.anat-b b{font:800 17px var(--f);letter-spacing:-.01em}
.anat-b span{grid-column:2;font-size:14.5px;color:var(--muted);max-height:0;overflow:hidden;opacity:0;transition:max-height .5s var(--ease),opacity .4s,margin .4s}
.anat-b.on{box-shadow:inset 0 0 0 2px var(--c)}
.anat-b.on span{max-height:120px;opacity:1;margin-top:6px}
.anat-b:focus-visible{outline:3px solid var(--cyan)}
.tr-svg{max-width:430px;margin:0 auto}
.tr-poly{transition:all .7s var(--ease)}
.tr-btns{display:flex;flex-direction:column;gap:10px}
.tr-b{all:unset;box-sizing:border-box;cursor:pointer;display:flex;gap:12px;align-items:center;padding:15px 18px;border-radius:18px;background:#fff;font:700 16px var(--f);box-shadow:inset 0 0 0 1.5px transparent;transition:box-shadow .3s}
.tr-b i{width:14px;height:14px;border-radius:4px;background:var(--cyan)}
.tr-b.on{box-shadow:inset 0 0 0 2px var(--cyan)}
.tr-b:focus-visible{outline:3px solid var(--cyan)}
.tr-note{margin-top:18px;color:var(--muted);min-height:4.6em}

/* log-scale ruler */
.rl-scroll{overflow-x:auto;padding-bottom:8px}
.rl{position:relative;min-width:880px;height:230px}
.rl-items{position:absolute;inset:0 0 56px}
.rl-axis{position:absolute;left:0;right:0;bottom:0;height:56px;border-top:3px solid var(--ink)}
.rl-tick{position:absolute;top:0;transform:translateX(-50%);font:700 12px var(--f);color:var(--muted);padding-top:14px;white-space:nowrap}
.rl-tick i{position:absolute;top:-3px;left:50%;width:2px;height:12px;background:var(--ink);transform:translateX(-50%)}
.rl-it{all:unset;box-sizing:border-box;position:absolute;cursor:pointer;display:flex;align-items:center;gap:10px;transform:translateX(-7px)}
.rl-dot{width:16px;height:16px;border-radius:50%;background:var(--cc);flex:none;box-shadow:0 0 0 5px rgba(13,27,42,.06)}
.rl-bar{height:10px;border-radius:5px;margin-left:-10px;opacity:.5;flex:none}
.rl-lab{display:flex;flex-direction:column;line-height:1.25;white-space:nowrap}
.rl-lab b{font:800 15px var(--f);letter-spacing:-.01em}.rl-lab em{font:500 12.5px var(--f);font-style:normal;color:var(--muted)}
.rl-it:hover .rl-dot,.rl-it:focus-visible .rl-dot{transform:scale(1.35)}.rl-dot{transition:transform .3s}
.rl-it:focus-visible{outline:3px solid var(--cyan);outline-offset:4px;border-radius:12px}

/* graded zones */
.zn-row{display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:260px;gap:12px}
.zn{display:flex;flex-direction:column;justify-content:flex-end;gap:2px;position:relative;min-height:0}
.zn-bar{height:var(--h);border-radius:18px 18px 8px 8px;background:var(--c);opacity:.95;margin-bottom:12px;transform-origin:bottom;transform:scaleY(.2);transition:transform 1.1s var(--ease)}
.ig.in .zn-bar{transform:none}
.zn:nth-child(2) .zn-bar{transition-delay:.12s}.zn:nth-child(3) .zn-bar{transition-delay:.24s}.zn:nth-child(4) .zn-bar{transition-delay:.36s}.zn:nth-child(5) .zn-bar{transition-delay:.48s}
.zn b{font:800 16px var(--f)}.zn span{font-size:13px;color:var(--muted)}
.zn-arrow{margin-top:20px;height:36px;border-radius:99px;background:linear-gradient(90deg,var(--amber),var(--mint),var(--cyan),var(--red));display:flex;align-items:center;justify-content:center;font:700 13px var(--f);color:var(--ink);position:relative}
.zn-arrow span{background:#fff;padding:4px 14px;border-radius:99px}

/* lot chain */
.lc-row{display:grid;grid-template-columns:repeat(5,1fr);position:relative;padding-top:6px}
.lc-row::before{content:"";position:absolute;left:10%;right:10%;top:30px;height:4px;background:linear-gradient(90deg,var(--red),var(--cyan),var(--amber),var(--mint),var(--ink));border-radius:2px;transform-origin:left;transform:scaleX(0);transition:transform 1.6s var(--ease)}
.ig.in .lc-row::before{transform:none}
.lc{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;position:relative}
.lc i{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font:800 18px var(--f);font-style:normal;background:var(--c);color:var(--on);box-shadow:0 0 0 6px var(--tint);opacity:0;transform:scale(.6);transition:opacity .5s,transform .6s var(--ease);transition-delay:calc(var(--i)*.28s)}
.ig.in .lc i{opacity:1;transform:none}
.lc b{font:800 16px var(--f);margin-top:8px}.lc span{font-size:13.5px;color:var(--muted);max-width:14ch}

@media (max-width:860px){
  .anat-grid{grid-template-columns:1fr}
  .zn-row{grid-template-rows:230px;gap:8px}.zn b{font-size:13px}.zn span{display:none}
  .lc-row{grid-template-columns:1fr 1fr;row-gap:22px}.lc-row::before{display:none}
}
@media (prefers-reduced-motion:reduce){.ig-flow{animation:none}.zn-bar,.lc i,.lc-row::before{transition:none;transform:none;opacity:1}.tr-poly{transition:none}}


/* ---- pinned scroll story ---- */
.story{height:calc(100vh + var(--n)*85vh);position:relative;padding:0}
.story-pin{position:sticky;top:0;height:100vh;display:flex;align-items:center;padding-top:96px}
.story-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(24px,5vw,80px);align-items:center;width:100%}
.story-txt h2{margin-bottom:26px;font-size:clamp(32px,4vw,58px)}
.story-ch{list-style:none;display:flex;flex-direction:column;gap:2px}
.story-ch button{all:unset;box-sizing:border-box;cursor:pointer;width:100%;display:grid;grid-template-columns:44px 1fr;gap:6px;padding:14px 0;border-top:1px solid var(--line);opacity:.42;transition:opacity .4s}
.story-ch li:last-child button{border-bottom:1px solid var(--line)}
.story-ch button.on{opacity:1}
.story-ch .n{font:800 13px var(--f);letter-spacing:.1em;color:var(--muted);padding-top:5px}
.story-ch button.on .n{color:var(--ink)}
.story-ch .t{display:flex;flex-direction:column;gap:2px}
.story-ch b{font:800 clamp(20px,2.2vw,28px) var(--f);letter-spacing:-.03em}
.story-ch .h{font:700 15px var(--f);color:var(--c,var(--ink))}
.story-ch .d{font-size:15.5px;color:var(--muted);max-height:0;overflow:hidden;opacity:0;transition:max-height .6s var(--ease),opacity .5s;max-width:46ch}
.story-ch button.on .d{max-height:90px;opacity:1;margin-top:4px}
.story-ch button:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}
.story-prog{height:4px;background:var(--line);border-radius:2px;margin-top:22px;overflow:hidden}
.story-prog i{display:block;height:100%;width:calc(var(--sp,0)*100%);background:linear-gradient(90deg,var(--mint),var(--red),var(--cyan),var(--amber));border-radius:2px}
.story-stage{position:relative;aspect-ratio:1;max-height:min(70vh,640px);width:100%;max-width:640px;margin-left:auto;border-radius:44px;overflow:hidden;background:var(--c-t);transition:background .8s}
.story-glow{position:absolute;inset:-20%;background:radial-gradient(circle at 50% 50%,var(--c),transparent 55%);opacity:.18;transition:background .8s}
.story-svg{position:absolute;inset:0;width:100%;height:100%}
.story-count{position:absolute;left:24px;top:20px;font:700 15px var(--f);color:var(--muted)}.story-count b{font:800 22px var(--f);color:var(--ink)}
.sc{opacity:0;transition:opacity .6s}.sc.on{opacity:1}
.sc *{transform-box:fill-box;transform-origin:center}
/* scene 1 */
.pc{transform:scale(0);transform-box:fill-box;transform-origin:center;transition:transform .8s var(--ease) var(--d,0s)}
.on .pc{transform:none;animation:bob 6s ease-in-out infinite var(--d,0s)}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
/* scene 2 */
.pv{transform:translate(0,0) scale(.2);opacity:0;transition:transform 1.3s var(--ease) var(--d,0s),opacity .8s var(--d,0s)}
.on .pv{transform:translate(var(--tx),var(--ty)) scale(1);opacity:1}
/* scene 3 */
.pd{opacity:.9;transform:translate(0,0);transition:transform 1.6s var(--ease),opacity 1.4s}
.on .pd{transform:translate(var(--tx),var(--ty));opacity:0}
.pv2{transform:scale(1.8);opacity:0;transition:transform 1s var(--ease) var(--d,0s),opacity .6s var(--d,0s)}
.on .pv2{transform:none;opacity:1}
.pl{opacity:0;transform:translateY(12px);transition:opacity .6s var(--d,.4s),transform .7s var(--ease) var(--d,.4s)}
.on .pl{opacity:1;transform:none}
/* scene 4 */
.pc4{transform:translate(var(--sx),var(--sy));opacity:0;transition:transform 1.4s var(--ease) var(--d,0s),opacity .6s var(--d,0s)}
.on .pc4{transform:none;opacity:1}
.shell{transition:stroke-dashoffset 2s var(--ease) .9s}
.on .shell{stroke-dashoffset:0}
/* scene 5 */
.pw{transform:scale(0);opacity:0;transition:transform .6s var(--ease) var(--d,0s),opacity .5s var(--d,0s)}
.on .pw{transform:none;opacity:1}
.on .pw.lit{animation:pulse 2.6s ease-in-out infinite;animation-delay:calc(var(--d)*3 + 1s)}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.14)}}

/* ---- story: fit any window height, never spill into the next section ---- */
.story-pin{padding-top:104px;padding-bottom:28px;box-sizing:border-box;overflow:hidden}
.story-txt h2{font-size:clamp(28px,min(4vw,6.2vh),58px);margin-bottom:clamp(10px,2.4vh,26px)}
.story-ch button{padding:clamp(7px,1.5vh,14px) 0}
.story-ch b{font-size:clamp(18px,min(2.2vw,3.4vh),28px)}
.story-ch .d{font-size:clamp(13.5px,1.9vh,15.5px)}
.story-ch button.on .d{max-height:7.5em}
.story-stage{max-height:min(64vh,640px)}
.story+section:not(.zoomband){position:relative;z-index:1;background:#fff}.story+.zoomband{z-index:1}
@media (max-height:760px){.story-ch .h{display:none}.story-prog{margin-top:10px}.story-count{display:none}}

/* story: the graphic is always visible. Phones stack it above the chapters; short windows compress the text. */
@media (max-width:900px){
  .story{height:calc(100vh + var(--n)*70vh)}
  .story-pin{padding-top:92px;padding-bottom:14px}
  .story-grid{grid-template-columns:1fr;gap:12px;align-content:start}
  .story-stage{order:-1;aspect-ratio:auto;height:min(36vh,340px);max-height:none;max-width:none;margin:0;border-radius:28px}
  .story-txt .eyebrow{margin-bottom:6px}.story-txt h2{font-size:clamp(24px,5vw,34px);margin-bottom:8px}
  .story-ch .h{display:none}.story-ch button{padding:7px 0}.story-ch b{font-size:18px}.story-prog{margin-top:10px}
}
@media (max-height:620px) and (min-width:901px){
  .story-ch .h{display:none}.story-txt h2{font-size:26px;margin-bottom:8px}.story-ch button{padding:6px 0}.story-ch b{font-size:18px}
  .story-ch .d{font-size:13px}.story-stage{max-height:62vh}.story-prog{margin-top:8px}
}
@media (prefers-reduced-motion:reduce){
  .story{height:auto;padding:clamp(56px,9vw,96px) 0}.story-pin{position:static;height:auto;padding-top:0;overflow:visible}
  .story-grid{align-content:center}.story-ch button{opacity:1}.story-ch .d{max-height:none;opacity:1}.story-prog{display:none}
  .story-stage{height:auto;aspect-ratio:1;max-height:520px;order:0}.on .pc,.on .pw.lit{animation:none}
}

/* ---- spread curves, gates ---- */
.sp-line{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2.2s var(--ease)}
.ig.in .sp-line{stroke-dashoffset:0}.ig.in .sp-line:nth-of-type(2){transition-delay:.5s}
.sp-line:nth-of-type(3){transition-delay:1s}
.gate-ck{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .8s var(--ease) calc(var(--d,0s) + .4s)}
.ig.in .gate-ck{stroke-dashoffset:0}

/* ---- exosome formation stepper ---- */
.sq{opacity:0;transition:opacity .6s}.sq.on{opacity:1}
.sq-a{transform-box:fill-box;transform-origin:center;transform:scale(.4);transition:transform .9s var(--ease)}.on .sq-a{transform:none}
.sq-b{transform-box:fill-box;transform-origin:center;transform:scale(0);transition:transform .7s var(--ease) var(--d,0s)}.on .sq-b{transform:none}
.sq-c{transform:translate(0,0);transition:transform 2.2s var(--ease) var(--d,0s)}.on .sq-c{transform:translate(var(--tx),var(--ty))}
.sq-list{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:14px}
.sq-btn{all:unset;box-sizing:border-box;cursor:pointer;padding:14px 16px;border-radius:16px;background:#fff;display:grid;gap:3px;box-shadow:inset 0 0 0 1.5px transparent;transition:box-shadow .3s,opacity .3s;opacity:.55}
.sq-btn span{font:800 12px var(--f);letter-spacing:.12em;color:var(--muted)}
.sq-btn b{font:800 15px/1.2 var(--f)}.sq-btn em{font-style:normal;font-size:13px;color:var(--muted);display:none}
.sq-btn.on{opacity:1;box-shadow:inset 0 0 0 2px var(--red)}.sq-btn.on em{display:block}
.sq-btn:focus-visible{outline:3px solid var(--cyan)}

/* ---- isolation compare ---- */
.iso-b{all:unset;box-sizing:border-box;cursor:pointer;display:flex;gap:12px;align-items:center;padding:14px 18px;border-radius:18px;background:#fff;font:700 15px var(--f);box-shadow:inset 0 0 0 1.5px transparent;transition:box-shadow .3s}
.iso-b i{width:14px;height:14px;border-radius:4px;background:var(--red)}
.iso-b.on{box-shadow:inset 0 0 0 2px var(--red)}.iso-b:focus-visible{outline:3px solid var(--cyan)}
.iso-r{display:grid;grid-template-columns:100px 1fr;gap:12px;align-items:center;margin-bottom:14px}.iso-r span{font:700 14px var(--f)}
.iso-t{height:16px;border-radius:8px;background:rgba(13,27,42,.08);overflow:hidden}
.iso-t i{display:block;height:100%;border-radius:8px;background:linear-gradient(90deg,var(--red),var(--amber));transition:width .8s var(--ease)}
.iso-note{min-height:5em}

/* ---- plant vs mammalian ---- */
.pv-grid,.pv-row{display:grid;grid-template-columns:150px 1fr 1fr;gap:14px;align-items:center}
.pv-h{font:800 17px var(--f);display:flex;gap:10px;align-items:center;padding-bottom:12px}.pv-h i{width:14px;height:14px;border-radius:4px;background:var(--c)}
.pv-row{padding:16px 0;border-top:1px solid var(--line)}.pv-row b{font:800 13px var(--f);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.pv-row span{background:#fff;border-radius:14px;padding:13px 16px;font-size:15px}
.pv-row .pv-l{border-left:5px solid var(--mint)}.pv-row .pv-r{border-left:5px solid var(--red)}

/* ---- video ---- */
.vid{position:relative;margin:0;border-radius:var(--r);overflow:hidden;background:var(--ink);aspect-ratio:16/9}
.vid video{width:100%;height:100%;object-fit:cover;display:block}
.vid-pp{position:absolute;right:16px;bottom:16px;background:rgba(255,255,255,.92)}
.vid figcaption{position:absolute;left:16px;bottom:16px;background:#fff;border-radius:99px;padding:6px 14px;font:700 12px var(--f);color:var(--muted)}
.vidband{position:relative;overflow:hidden;background:var(--ink);color:#fff;padding:clamp(88px,13vw,190px) 0;isolation:isolate}
.vidband video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.vidband::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,18,29,.88),rgba(6,18,29,.25));z-index:-1}
.vidband h2{font-size:clamp(38px,6vw,88px);max-width:12ch;margin-bottom:16px}.vidband p{color:#C4D0DC;max-width:42ch;margin-bottom:30px}
.vidband .vid-pp{right:clamp(16px,3vw,40px);bottom:24px;z-index:2}

@media (max-width:860px){.sq-list{grid-template-columns:1fr 1fr}.pv-grid,.pv-row{grid-template-columns:1fr 1fr}.pv-grid .pv-h:first-child,.pv-row b{grid-column:1/-1}.pv-row b{padding-bottom:0}}
@media (prefers-reduced-motion:reduce){.sp-line,.gate-ck{transition:none;stroke-dashoffset:0}.sq-a,.sq-b,.sq-c{transition:none}}