:root{
  --space:#04101F; --space-2:#071A33; --panel:#0A2140;
  --navy:#15478F; --cyan:#1FA8E2; --sky:#7BCFFD; --hot:#FF7A45;
  --txt:#EAF2FB; --muted:#92A8CB; --line:rgba(125,207,253,.15);
  --sans:"Archivo","Helvetica Neue",sans-serif; --mono:"IBM Plex Mono",monospace;
  --maxw:1240px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--space);color:var(--txt);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--cyan);font-weight:500}
.eyebrow.dim{color:var(--muted)}
h1,h2,h3{font-weight:800;line-height:1.02;letter-spacing:-.02em}
section{position:relative}
section[id]{scroll-margin-top:80px}
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:15px;padding:15px 28px;border-radius:50px;cursor:pointer;transition:transform .2s,background .25s,color .25s,box-shadow .25s}
.btn-primary{background:var(--cyan);color:#04162e;box-shadow:0 12px 40px -12px rgba(31,168,226,.8)}
.btn-primary:hover{background:var(--sky);transform:translateY(-2px)}
.btn-ghost{background:rgba(255,255,255,.06);color:#fff;border:1px solid rgba(255,255,255,.25)}
.btn-ghost:hover{border-color:var(--cyan);color:var(--cyan)}

/* brand lockup */
.brand{display:flex;align-items:center;gap:11px;font-weight:800;font-size:21px;letter-spacing:-.02em;color:#fff}
.brand svg{width:30px;height:30px;flex:0 0 30px}

/* NAV */
nav{position:fixed;top:0;left:0;right:0;z-index:200;transition:.35s;padding:20px 0}
nav.scrolled{background:rgba(4,16,31,.86);backdrop-filter:blur(16px);border-bottom:1px solid var(--line);padding:13px 0}
.nav-in{display:flex;align-items:center;justify-content:space-between;max-width:var(--maxw);margin:0 auto;padding:0 32px}
.nav-right{display:flex;align-items:center;gap:34px}
.nav-links{display:flex;gap:30px;align-items:center}
.nav-links a{font-size:14.5px;font-weight:600;color:#fff;opacity:.85;transition:.2s}
.nav-links a:hover{opacity:1;color:var(--cyan)}
.nav-cta{background:var(--cyan);color:#04162e;padding:11px 22px;border-radius:50px;font-weight:700;font-size:14px;transition:.25s}
.nav-cta:hover{background:var(--sky);transform:translateY(-1px)}
.menu-btn{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px;z-index:210}
.menu-btn span{width:25px;height:2px;background:#fff;border-radius:2px}

/* HERO full-bleed video */
.hero{min-height:100vh;display:flex;align-items:center;position:relative;overflow:hidden;padding-top:90px;background:#03media}
#hero-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.hero-veil{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(4,16,31,.5) 0%,rgba(4,16,31,.2) 40%,rgba(4,16,31,.92) 100%)}
.hero-in{position:relative;z-index:3;max-width:var(--maxw);margin:0 auto;padding:0 32px;width:100%}
.hero .eyebrow{opacity:0;animation:rise .8s .2s forwards}
.hero h1{font-size:clamp(44px,8vw,96px);max-width:15ch;margin:20px 0 24px;opacity:0;animation:rise .9s .35s forwards}
.hero h1 .hot{color:var(--hot)}
.hero .lede{font-size:clamp(17px,1.8vw,21px);max-width:48ch;color:#CBDAF1;opacity:0;animation:rise .9s .5s forwards}
.hero-actions{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap;opacity:0;animation:rise .9s .65s forwards}
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}}

/* SECTION shell */
.sec{padding:120px 0;position:relative}
.sec-head{max-width:62ch;margin-bottom:54px}
.sec-head h2{font-size:clamp(30px,4.4vw,52px);margin-top:16px}
.sec-head p{margin-top:18px;font-size:18px;color:var(--muted);max-width:56ch}
.bignum{font-size:clamp(60px,9vw,120px);font-weight:900;letter-spacing:-.04em;line-height:.9;background:linear-gradient(120deg,var(--sky),var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent}

/* CARD GRID (mirrors What We Test For) */
.challenge{background:var(--space-2)}
.grid6{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:20px;padding:32px;transition:.35s;position:relative;overflow:hidden}
.card:hover{transform:translateY(-6px);border-color:var(--cyan);box-shadow:0 34px 70px -36px rgba(31,168,226,.5)}
.card .tag{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan)}
.card h3{font-size:22px;margin:14px 0 10px;font-weight:700}
.card p{font-size:14.5px;color:var(--muted)}
.card .glow{position:absolute;width:140px;height:140px;border-radius:50%;background:radial-gradient(circle,var(--cyan),transparent 70%);opacity:.12;top:-40px;right:-40px}

/* MARQUEE */
.marquee{padding:34px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--space);overflow:hidden}
.mrow{display:flex;gap:0;white-space:nowrap;width:max-content}
.mrow.r1{animation:scrollL 34s linear infinite}
.mrow.r2{animation:scrollR 38s linear infinite;margin-top:18px}
.mrow span{font-size:clamp(20px,2.4vw,30px);font-weight:800;letter-spacing:-.01em;padding:0 26px;color:var(--txt);display:inline-flex;align-items:center;gap:26px}
.mrow span::after{content:"";width:9px;height:9px;border-radius:50%;background:var(--cyan)}
.mrow.r2 span{color:var(--muted)}
@keyframes scrollL{to{transform:translateX(-50%)}}
@keyframes scrollR{from{transform:translateX(-50%)}to{transform:translateX(0)}}

/* COLD-TO-HOT feature (floating terms) */
.cold{background:var(--space-2);overflow:hidden}
.cold-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center;position:relative;z-index:2}
.cold-grid h2{font-size:clamp(30px,4vw,48px)}
.cold-grid h2 .hot{color:var(--hot)}
.cold-grid p{color:var(--muted);font-size:17px;margin-top:18px;max-width:46ch}
.chips{position:relative;aspect-ratio:1;max-width:440px;width:100%;margin:0 auto}
.chip{position:absolute;font-family:var(--mono);font-size:13px;padding:9px 15px;border-radius:30px;border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--sky);animation:float 6s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.chips .core{position:absolute;inset:0;margin:auto;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,rgba(255,122,69,.5),transparent 65%);display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;font-size:15px;text-align:center;line-height:1.2}

/* STEPS (mirrors How It Works) */
.steps .step{display:grid;grid-template-columns:64px 1fr 1.05fr;gap:34px;align-items:center;padding:40px 0;border-top:1px solid var(--line)}
.steps .step:first-of-type{border-top:none}
.step .no{font-family:var(--mono);font-size:34px;font-weight:500;color:var(--cyan)}
.step .copy h3{font-size:26px;font-weight:700;margin-bottom:6px}
.step .copy .sm{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan);margin-bottom:10px}
.step .copy p{color:var(--muted);font-size:15px}
.step .vis{height:170px;border-radius:18px;border:1px solid var(--line);background:radial-gradient(80% 120% at 50% 0%,var(--panel),var(--space));display:flex;align-items:center;justify-content:center;overflow:hidden}
.step .vis svg{width:100%;height:100%}

/* SCIENCE IN MOTION (real video, mirrors demo) */
.motion{background:var(--space)}
.motion .o{position:absolute;width:560px;height:560px;border-radius:50%;background:radial-gradient(circle,var(--cyan),transparent 70%);filter:blur(120px);opacity:.16;top:10%;left:-160px}
.player{position:relative;z-index:2;border-radius:22px;overflow:hidden;border:1px solid var(--line);background:#03101f;box-shadow:0 50px 110px -44px rgba(0,0,0,.9);max-width:1000px;margin:0 auto}
.player-bar{display:flex;align-items:center;gap:13px;padding:13px 18px;background:rgba(255,255,255,.04);border-bottom:1px solid var(--line)}
.player-bar .live{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--hot);display:flex;align-items:center;gap:7px}
.player-bar .live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--hot);box-shadow:0 0 9px var(--hot);animation:blink 1.4s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
.player-bar .ttl{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.player-bar .prog{flex:1;height:3px;border-radius:3px;background:rgba(255,255,255,.12);overflow:hidden;position:relative}
.player-bar .prog::after{content:"";position:absolute;left:-30%;top:0;bottom:0;width:30%;background:var(--cyan);border-radius:3px;animation:track 9s linear infinite}
@keyframes track{to{left:100%}}
.mech-video{display:block;width:100%;height:480px;object-fit:cover;background:#03101f}
.motion-cap{text-align:center;color:var(--muted);font-size:13px;margin-top:18px;font-style:italic}
.motion-cap a{color:var(--sky)}

/* PIPELINE (mirrors pricing tiers) */
.pipeline{background:var(--space-2)}
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:start}
.tier{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:22px;padding:36px;position:relative;transition:.35s}
.tier:hover{transform:translateY(-6px);border-color:var(--cyan)}
.tier.lead{border-color:var(--cyan);background:linear-gradient(180deg,rgba(31,168,226,.1),rgba(255,255,255,.02))}
.tier .badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--cyan);color:#04162e;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:6px 16px;border-radius:30px;font-weight:600}
.tier .pn{font-family:var(--mono);font-size:24px;font-weight:500;color:var(--sky)}
.tier .ind{font-size:14px;color:var(--muted);margin-top:4px}
.tier .stage{margin:22px 0;font-size:30px;font-weight:800}
.tier .stage .s{font-size:13px;font-family:var(--mono);color:var(--cyan);display:block;text-transform:uppercase;letter-spacing:.12em;margin-bottom:6px;font-weight:500}
.tier ul{list-style:none;display:flex;flex-direction:column;gap:12px}
.tier li{font-size:14.5px;color:#D2E0F4;display:flex;gap:11px;align-items:flex-start}
.tier li::before{content:"";flex:0 0 8px;height:8px;border-radius:50%;background:var(--cyan);margin-top:8px}
.pipe-foot{margin-top:22px;font-size:13px;color:var(--muted);font-style:italic;text-align:center}
.badges{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:54px}
.badges .b{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--muted);font-family:var(--mono);letter-spacing:.04em}
.badges .b::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--cyan)}

/* FINAL CTA */
.final{background:radial-gradient(90% 130% at 50% 0%,#0c2c52,var(--space));text-align:center;overflow:hidden}
.final h2{font-size:clamp(34px,5.5vw,68px);max-width:16ch;margin:18px auto 22px}
.final p{color:#CBDAF1;font-size:18px;max-width:46ch;margin:0 auto 36px}

/* FOOTER */
footer{background:#020A16;padding:64px 0 40px;border-top:1px solid var(--line)}
.foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
.foot-brand p{color:var(--muted);font-size:14.5px;margin-top:16px;max-width:32ch}
.foot-col h4{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--sky);margin-bottom:16px;font-weight:500}
.foot-col a,.foot-col p{display:block;font-size:14px;color:var(--muted);margin-bottom:10px;transition:.2s}
.foot-col a:hover{color:#fff}
.foot-bottom{border-top:1px solid var(--line);margin-top:48px;padding-top:24px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;align-items:center;font-size:12.5px;color:#5d749a}
.foot-social{display:flex;gap:12px}
.foot-social a{width:36px;height:36px;border-radius:9px;border:1px solid #fff;background:#fff;display:flex;align-items:center;justify-content:center;transition:.25s}
.foot-social svg{width:17px;height:17px;fill:#445566}
.foot-social a:hover{background:#eaf2fb;border-color:#eaf2fb;transform:translateY(-2px)}
.foot-social a:hover svg{fill:#15478F}

.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s,transform .8s}
.reveal.in{opacity:1;transform:none}

@media(max-width:960px){
  .nav-links{position:fixed;inset:0 0 0 auto;width:78%;max-width:320px;height:100vh;background:var(--space-2);flex-direction:column;align-items:flex-start;justify-content:center;gap:26px;padding:0 40px;transform:translateX(100%);transition:.4s}
  .nav-links.open{transform:translateX(0)}
  .menu-btn{display:flex}
  .grid6{grid-template-columns:1fr 1fr}
  .cold-grid,.foot-top{grid-template-columns:1fr;gap:40px}
  .tiers{grid-template-columns:1fr}
  .steps .step{grid-template-columns:48px 1fr;gap:18px}
  .step .vis{grid-column:1/-1;height:150px;margin-top:8px}
  .mech-video{height:300px}
}
@media(max-width:560px){
  .wrap,.nav-in,.hero-in{padding-left:20px;padding-right:20px}
  .sec{padding:80px 0}
  .grid6{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:.2s!important}.reveal{opacity:1;transform:none}}

/* phenotypes */
.phenos-sec{background:var(--space-2)}
.grad-arrow{display:flex;align-items:center;gap:18px;max-width:880px;margin:0 auto 30px}
.grad-arrow svg{flex:1;height:34px}
.grad-arrow span{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.grad-arrow .gl{color:var(--hot)}.grad-arrow .gr{color:var(--sky)}
.phenos{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.pheno{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:20px;padding:22px;transition:.35s}
.pheno:hover{transform:translateY(-5px);border-color:var(--cyan)}
.ph-h{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-align:center;margin-bottom:14px}
.ph-h.hot{color:var(--hot)}
.ph-box{background:#fbf6fb;border-radius:14px;padding:8px;aspect-ratio:250/175}
.ph-box svg{width:100%;height:100%;display:block}
.pheno p{font-size:13.5px;color:var(--muted);margin-top:16px;text-align:center}

/* mechanism pathway */
.mech-path{background:var(--space)}
.toggle{display:flex;gap:0;justify-content:center;margin-bottom:42px;border:1px solid var(--line);border-radius:50px;width:max-content;margin-left:auto;margin-right:auto;overflow:hidden;background:rgba(255,255,255,.03)}
.toggle button{font-family:var(--sans);font-weight:700;font-size:14px;padding:12px 26px;background:none;border:none;color:var(--muted);cursor:pointer;transition:.25s}
.toggle button.on{background:var(--cyan);color:#04162e}
.pathway{display:grid;grid-template-columns:1fr 40px 1.15fr 50px 1fr;gap:14px;align-items:stretch}
.pbox{background:#fff;border-radius:20px;padding:20px 18px;display:flex;flex-direction:column;align-items:center;text-align:center;position:relative}
.pbox .pb-h{font-weight:800;color:#16243d;font-size:18px;margin-bottom:6px}
.pic{width:100%;height:118px}
.pbox .pb-cap{font-size:12.5px;color:#42546f;line-height:1.4;margin-top:8px}
.pbox .pb-cap strong{color:#16243d}
.proc .ctx{font-size:12.5px;font-weight:700;line-height:1.25;margin-bottom:4px;min-height:18px}
.proc .ctx .q{color:#cf2030;font-weight:800}
.proc .ctx.block{color:#cf2030}
.proc .ctx.boost{color:#2f9e57}
.proc .ctx.boost .pc{display:block;font-weight:500;color:#2f9e57;font-size:11.5px}
.pathway[data-mode="std"] .boost{display:none}
.pathway[data-mode="kin"] .block{display:none}
.pbox.proc{border:1px solid transparent;transition:background .5s ease,border-color .5s ease}
.pathway[data-mode="std"] .pbox.proc{background:#E8F1FB;border-color:#C3DBF3}
.pathway[data-mode="kin"] .pbox.proc{background:#FCEAE4;border-color:#F4C6B7}
.parrow{display:flex;align-items:center;justify-content:center;font-size:30px;color:#7f93b5;font-weight:700}
.parrow .blocked,.parrow .bridged{display:none;line-height:1}
.pathway[data-mode="std"] .a2 .blocked{display:block;color:#cf2030}
.pathway[data-mode="kin"] .a2 .bridged{display:block;color:#2f9e57}
.pathway[data-mode="std"] .a2 .blocked{font-size:38px}
.evidence{display:flex;gap:26px;align-items:center;max-width:880px;margin:46px auto 0;background:rgba(31,168,226,.07);border:1px solid var(--line);border-radius:20px;padding:28px 32px}
.ev-stat{font-size:clamp(34px,5vw,52px);font-weight:900;letter-spacing:-.03em;color:var(--sky);white-space:nowrap;line-height:1}
.ev-stat em{font-style:normal;font-size:.5em;color:var(--cyan);font-weight:700}
.ev-cap{font-size:14.5px;color:var(--muted)}

@media(max-width:960px){
  .phenos{grid-template-columns:1fr}
  .pathway{grid-template-columns:1fr;gap:8px}
  .pathway .parrow{transform:rotate(90deg);height:30px}
  .evidence{flex-direction:column;text-align:center;gap:14px}
}


.brand-logo{display:inline-flex;align-items:center;background:#fff;padding:7px 13px;border-radius:11px;line-height:0}
.brand-logo img{height:26px;display:block;width:auto}
.pbox{min-height:0}
.pic2{width:100%;height:300px;display:block}
.pbox text{font-family:var(--sans)}
.pbox .b{font-weight:700}
.ctx-h{font-weight:800}
.pathway[data-mode="std"] .ctx-h{fill:#c0202f}
.pathway[data-mode="kin"] .ctx-h{fill:#2f9e57}
@media(max-width:960px){ .pic2{height:300px} }


.strat{background:var(--space-2)}
.strat-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.strat-grid .sarrow{font-size:24px;color:var(--cyan);font-weight:800;line-height:1;margin-bottom:10px}
@media(max-width:760px){.strat-grid{grid-template-columns:1fr}}


/* mechanism animation */
.toggle-row{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:42px;flex-wrap:wrap}
.toggle{margin:0}
.replay{font-family:var(--sans);font-weight:600;font-size:13px;padding:11px 18px;border-radius:50px;border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--muted);cursor:pointer;transition:.25s}
.replay:hover{color:var(--cyan);border-color:var(--cyan)}
.a-fade{opacity:0;transition:opacity .55s ease}
.pathway.anim .a-fade{opacity:1}
.a-pop{opacity:0;transform:scale(.4);transform-box:fill-box;transform-origin:center;transition:opacity .45s ease,transform .5s cubic-bezier(.2,.85,.3,1.25)}
.pathway.anim .a-pop{opacity:1;transform:scale(1)}
.a-draw{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .7s ease}
.pathway.anim .a-draw{stroke-dashoffset:0}
.a-flash{opacity:0;transition:opacity .35s}
.pathway.anim .a-flash{opacity:1;animation:flash .7s ease}
.a-orbit{transform-box:fill-box;transform-origin:center}
.pathway.anim .a-orbit{animation:spin 7s 5.1s linear infinite}
.pathway.anim .a-cell{animation:cellpulse 2.8s 4.7s ease-in-out infinite}
.pathway.anim[data-mode="kin"] .a-dc{animation:dcglow 2.4s 3.1s ease-in-out infinite}
.pathway.noanim *{transition:none!important;animation:none!important}
@keyframes flash{0%{opacity:0}25%{opacity:1}40%{opacity:.45}55%{opacity:1}100%{opacity:1}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes cellpulse{0%,100%{filter:drop-shadow(0 0 0 rgba(94,176,116,0))}50%{filter:drop-shadow(0 0 5px rgba(94,176,116,.85))}}
@keyframes dcglow{0%,100%{filter:drop-shadow(0 0 0 rgba(142,124,195,0))}50%{filter:drop-shadow(0 0 7px rgba(142,124,195,.95))}}
@media(prefers-reduced-motion:reduce){.a-fade,.a-pop,.a-draw,.a-flash{opacity:1!important;transform:none!important;stroke-dashoffset:0!important}.pathway .a-orbit,.pathway .a-cell,.pathway .a-dc{animation:none!important}}

.c-cold{color:var(--sky)}.c-hot{color:var(--hot)}
.parrow svg{display:block}
.parrow.a2 .blocked,.parrow.a2 .bridged{line-height:0}

/* Light band: The Approach section */
#approach{background:linear-gradient(180deg,#F4F8FE 0%,#E7F1FC 100%)}
#approach .eyebrow{color:#1577B0}
#approach .sec-head h2{color:#0E2C54}
#approach .sec-head p{color:#42597A}
#approach .sec-head p strong{color:#15478F !important}
#approach .grid6 .card{background:#FFFFFF;border:1px solid rgba(21,71,143,.12);box-shadow:0 18px 40px -28px rgba(21,71,143,.35)}
#approach .grid6 .card:hover{border-color:var(--cyan);box-shadow:0 30px 60px -30px rgba(31,168,226,.45)}
#approach .grid6 .card .glow{opacity:.08}
#approach .grid6 .card .tag{color:#1577B0}
#approach .grid6 .card h3{color:#0E2C54}
#approach .grid6 .card p{color:#42597A}
#approach .c-cold{color:#1488C2}
#approach .c-hot{color:#E85A2A}

/* About section */
#about .about-lead{font-size:22px;color:var(--muted);max-width:64ch}
#about a{color:var(--cyan);transition:.2s;border-bottom:1px solid rgba(31,168,226,.35)}
#about a:hover{color:var(--sky);border-bottom-color:var(--sky)}
#about .about-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-top:50px;align-items:start}
#about .about-block h3{font-size:21px;font-weight:700;margin-bottom:14px;padding-left:14px;border-left:3px solid var(--cyan)}
#about .about-block p{font-size:15.5px;color:var(--muted);margin-bottom:14px;max-width:60ch}
#about .about-cta{margin-top:18px}
#about .about-cta a{font-weight:600}
@media(max-width:760px){#about .about-grid{grid-template-columns:1fr;gap:34px}}

/* Berkland Lab section */
#berkland .berk-img{width:100%;border-radius:18px;border:1px solid var(--line);display:block;margin:0 0 34px;box-shadow:0 30px 70px -40px rgba(0,0,0,.7)}
#berkland .berk-body{max-width:64ch}
#berkland .berk-body p{font-size:16px;color:var(--muted);margin-bottom:16px}
#berkland a.berk-cta{display:inline-flex;align-items:center;gap:8px;margin-top:8px;background:var(--cyan);color:#04162e;padding:12px 24px;border-radius:50px;font-weight:700;font-size:14.5px;transition:.25s}
#berkland a.berk-cta:hover{background:var(--sky);transform:translateY(-1px)}

/* ============ multi-page additions ============ */
body.inner #nav{background:rgba(4,16,31,.92);backdrop-filter:blur(16px);border-bottom:1px solid var(--line);padding:13px 0}
body.inner main>.sec:first-child{padding-top:150px}
.nav-links a[aria-current="page"]{color:var(--cyan);opacity:1}
.foot-col a[aria-current="page"]{color:#fff}
/* home explore tiles (reuse .card) */
.tiles .tile{display:block}
.tiles .tile h3{margin:12px 0 8px;font-size:21px}
.tiles .tile p{color:var(--muted);font-size:14.5px}
.tiles .tile .arrow{margin-top:16px;color:var(--cyan);font-family:var(--mono);font-size:13px;letter-spacing:.04em}
.tiles .tile:hover{border-color:var(--cyan);transform:translateY(-3px);box-shadow:0 30px 60px -30px rgba(31,168,226,.45)}

/* ============ white header ============ */
#nav, #nav.scrolled, body.home #nav, body.inner #nav{
  background:#fff; backdrop-filter:none;
  border-bottom:1px solid rgba(21,71,143,.12);
}
#nav.scrolled{box-shadow:0 6px 22px -16px rgba(4,16,31,.55)}
#nav .nav-links a{color:#0B2447;opacity:1}
#nav .nav-links a:hover{color:var(--cyan)}
#nav .nav-links a[aria-current="page"]{color:var(--cyan)}
#nav .brand-logo{background:transparent;padding:0;border-radius:0}
.menu-btn span{background:#0B2447}
@media(max-width:960px){
  /* slide-in drawer stays dark, so its links stay light */
  #nav .nav-links a{color:#EAF2FB}
  #nav .nav-links a[aria-current="page"]{color:var(--cyan)}
}

/* ============ technology figures + pillar icons ============ */
.pill-ico{width:42px;height:42px;display:block;margin-bottom:14px}
.tech-fig{background:linear-gradient(180deg,#0A2140,#071A33);border:1px solid var(--line);border-radius:20px;padding:30px 28px;margin-top:6px}
.tech-fig svg{width:100%;height:auto;display:block}
.tech-cap{color:var(--muted);font-family:var(--mono);font-size:12.5px;letter-spacing:.04em;text-align:center;margin-top:16px}
/* slightly larger nav logo to match kinimmune.bio */
#nav .brand-logo img{height:36px}

/* figure legend */
.fig-legend{display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:center;margin-top:16px}
.fig-legend span{display:inline-flex;align-items:center;gap:7px;color:var(--muted);font-family:var(--mono);font-size:11px;letter-spacing:.02em}
.fig-legend i{width:11px;height:11px;border-radius:50%;display:inline-block;flex:0 0 auto}

/* illustrative figure on light card */
.tme-card{background:#f7fafe;border:1px solid #dbe7f3;border-radius:20px;padding:22px 22px 16px;margin-top:6px}
.tme-card svg{width:100%;height:auto;display:block}
.tme-card .fig-legend{margin-top:10px}
.tme-card .fig-legend span{color:#5a6b80}

/* publications */
.pub-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.card.pub{display:block;text-decoration:none}
.pub-meta{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}
.pub-venue{font-family:var(--mono);font-size:11.5px;letter-spacing:.03em;color:var(--cyan)}
.pub-type{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:3px 9px;white-space:nowrap}
.card.pub h3{font-size:17px;line-height:1.34;margin:0 0 10px}
.card.pub p{color:var(--muted);font-size:14px;line-height:1.5;margin:0 0 14px}
.card.pub .arrow{color:var(--cyan);font-family:var(--mono);font-size:13px;letter-spacing:.04em}
.card.pub:hover{border-color:var(--cyan);transform:translateY(-3px);box-shadow:0 30px 60px -30px rgba(31,168,226,.4)}
/* tighten nav slightly for the extra tab */
#nav .nav-links{gap:24px}
@media(max-width:760px){.pub-grid{grid-template-columns:1fr}}

/* publications: read more */
.pub-more{margin-top:24px}
.pub-more>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:17px 22px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(180deg,rgba(31,168,226,.07),rgba(31,168,226,.02));color:var(--txt);font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;transition:border-color .2s,background .2s}
.pub-more>summary::-webkit-details-marker{display:none}
.pub-more>summary:hover{border-color:var(--cyan);background:linear-gradient(180deg,rgba(31,168,226,.12),rgba(31,168,226,.04))}
.pub-more>summary .chev::after{content:"+";color:var(--cyan);font-size:18px;line-height:1}
.pub-more[open]>summary .chev::after{content:"\2212"}
.pub-more-body{padding-top:24px}
.pub-group{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--sky);margin:30px 0 16px;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.pub-group:first-child{margin-top:4px}
.pub-group-note{color:var(--muted);font-size:11px;letter-spacing:.02em;text-transform:none}
.pub-list{list-style:none;margin:0;padding:0}
.pub-list li{padding:14px 2px;border-bottom:1px solid var(--line);display:grid;gap:4px}
.pub-list .pl-title{color:var(--txt);font-size:14.5px;line-height:1.4}
.pub-list .pl-venue{font-family:var(--mono);font-size:11px;color:var(--cyan);letter-spacing:.02em}
.pub-list .pl-desc{color:var(--muted);font-size:13px;line-height:1.45}

/* Berkland Lab: text-left / portrait-right bio layout */
#berkland .berk-bio{display:grid;grid-template-columns:1.5fr 1fr;gap:48px;align-items:start}
#berkland .berk-text{max-width:none}
#berkland .berk-text p{font-size:16px;color:var(--muted);margin-bottom:16px}
#berkland .berk-portrait-wrap{margin:0}
#berkland .berk-portrait{width:100%;display:block;border-radius:16px;border:1px solid var(--line);box-shadow:0 30px 70px -40px rgba(0,0,0,.7)}
#berkland .berk-cap{margin-top:14px;display:flex;flex-direction:column;gap:2px}
#berkland .berk-cap .nm{font-weight:700;color:var(--txt);font-size:15px}
#berkland .berk-cap .sub{color:var(--muted);font-size:13px}
@media(max-width:760px){
  #berkland .berk-bio{grid-template-columns:1fr;gap:28px}
  #berkland .berk-portrait-wrap{order:-1}
  #berkland .berk-portrait{max-width:360px}
}

/* Publications: redesigned tolerogenic record as clickable compact cards */
.pub-group-count{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--muted);text-transform:none;border:1px solid var(--line);border-radius:999px;padding:3px 10px;margin-left:auto}
.pub-mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pub-mini{display:flex;flex-direction:column;text-decoration:none;background:linear-gradient(180deg,rgba(31,168,226,.05),rgba(31,168,226,.012));border:1px solid var(--line);border-radius:13px;padding:16px 18px;transition:border-color .2s,transform .2s,box-shadow .2s,background .2s}
.pub-mini:hover{border-color:var(--cyan);transform:translateY(-3px);background:linear-gradient(180deg,rgba(31,168,226,.1),rgba(31,168,226,.03));box-shadow:0 24px 50px -34px rgba(31,168,226,.5)}
.pub-mini .pm-venue{font-family:var(--mono);font-size:11px;letter-spacing:.03em;color:var(--cyan);margin-bottom:7px}
.pub-mini .pm-title{color:var(--txt);font-size:14.5px;line-height:1.36;font-weight:600;margin-bottom:7px}
.pub-mini .pm-desc{color:var(--muted);font-size:12.5px;line-height:1.5;margin-bottom:13px}
.pub-mini .pm-arrow{margin-top:auto;color:var(--sky);font-family:var(--mono);font-size:12px;letter-spacing:.04em;opacity:.85;transition:opacity .2s,transform .2s}
.pub-mini:hover .pm-arrow{opacity:1;transform:translateX(3px)}
@media(max-width:760px){.pub-mini-grid{grid-template-columns:1fr}.pub-group-count{margin-left:0}}

/* Publications: creative "read the full record" CTA bar (overrides earlier summary rule) */
.pub-more>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:16px;padding:18px 22px;border:1px solid var(--line);border-radius:16px;text-transform:none;position:relative;overflow:hidden;background:linear-gradient(115deg,rgba(31,168,226,.10),rgba(31,168,226,.02) 55%,rgba(123,207,253,.06));transition:border-color .25s,box-shadow .25s,transform .25s,background .25s}
.pub-more>summary::before{content:"";position:absolute;top:0;left:-65%;width:48%;height:100%;background:linear-gradient(100deg,transparent,rgba(123,207,253,.16),transparent);transform:skewX(-18deg);transition:left .6s ease;pointer-events:none}
.pub-more>summary:hover::before{left:125%}
.pub-more>summary:hover{border-color:var(--cyan);transform:translateY(-1px);background:linear-gradient(115deg,rgba(31,168,226,.16),rgba(31,168,226,.04) 55%,rgba(123,207,253,.09));box-shadow:0 24px 55px -32px rgba(31,168,226,.55)}
.pm-ico{flex:none;width:42px;height:42px;border-radius:11px;display:grid;place-items:center;color:var(--cyan);background:rgba(31,168,226,.10);border:1px solid var(--line);transition:background .25s,border-color .25s,transform .25s}
.pm-ico svg{width:22px;height:22px}
.pub-more>summary:hover .pm-ico{background:rgba(31,168,226,.18);border-color:var(--cyan);transform:translateY(-1px)}
.pub-more[open]>summary .pm-ico{background:rgba(31,168,226,.16);border-color:var(--cyan)}
.pm-txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.pm-lead{font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--txt)}
.pm-sub{font-family:var(--sans);font-size:12.5px;line-height:1.4;color:var(--muted);letter-spacing:0;text-transform:none}
.pm-badge{flex:none;margin-left:auto;position:relative;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:rgba(31,168,226,.06);transition:transform .35s cubic-bezier(.65,0,.35,1),background .25s,border-color .25s}
.pm-badge::before,.pm-badge::after{content:"";position:absolute;top:50%;left:50%;background:var(--cyan);border-radius:2px}
.pm-badge::before{width:13px;height:2px;transform:translate(-50%,-50%)}
.pm-badge::after{width:2px;height:13px;transform:translate(-50%,-50%)}
.pub-more>summary:hover .pm-badge{border-color:var(--cyan);background:rgba(31,168,226,.18)}
.pub-more[open]>summary .pm-badge{transform:rotate(135deg);border-color:var(--cyan);background:rgba(31,168,226,.18)}
@media(max-width:760px){.pub-more>summary{padding:15px 16px;gap:13px}.pm-ico{width:38px;height:38px}}

/* Publications CTA bar: warm "hot" accent so the single expand control stands apart from the cyan cards */
.pub-more>summary{background:linear-gradient(115deg,rgba(255,122,69,.12),rgba(255,122,69,.03) 55%,rgba(255,154,110,.06))}
.pub-more>summary::before{background:linear-gradient(100deg,transparent,rgba(255,170,130,.16),transparent)}
.pub-more>summary:hover{border-color:var(--hot);background:linear-gradient(115deg,rgba(255,122,69,.18),rgba(255,122,69,.05) 55%,rgba(255,154,110,.10));box-shadow:0 24px 55px -32px rgba(255,122,69,.55)}
.pm-ico{color:var(--hot);background:rgba(255,122,69,.12)}
.pub-more>summary:hover .pm-ico{background:rgba(255,122,69,.20);border-color:var(--hot)}
.pub-more[open]>summary .pm-ico{background:rgba(255,122,69,.18);border-color:var(--hot)}
.pm-badge{background:rgba(255,122,69,.07)}
.pm-badge::before,.pm-badge::after{background:var(--hot)}
.pub-more>summary:hover .pm-badge{border-color:var(--hot);background:rgba(255,122,69,.20)}
.pub-more[open]>summary .pm-badge{border-color:var(--hot);background:rgba(255,122,69,.20)}

/* Publications CTA bar: dark-blue accent (overrides the warm variant) */
.pub-more>summary{background:linear-gradient(115deg,rgba(21,71,143,.32),rgba(21,71,143,.10) 55%,rgba(21,71,143,.20));border-color:rgba(123,207,253,.18)}
.pub-more>summary::before{background:linear-gradient(100deg,transparent,rgba(123,207,253,.14),transparent)}
.pub-more>summary:hover{border-color:var(--navy);background:linear-gradient(115deg,rgba(21,71,143,.46),rgba(21,71,143,.16) 55%,rgba(21,71,143,.28));box-shadow:0 24px 55px -30px rgba(21,71,143,.70)}
.pm-ico{color:var(--sky);background:rgba(21,71,143,.30);border-color:rgba(123,207,253,.20)}
.pub-more>summary:hover .pm-ico{background:rgba(21,71,143,.46);border-color:var(--sky)}
.pub-more[open]>summary .pm-ico{background:rgba(21,71,143,.40);border-color:var(--sky)}
.pm-badge{background:rgba(21,71,143,.26);border-color:rgba(123,207,253,.20)}
.pm-badge::before,.pm-badge::after{background:var(--sky)}
.pub-more>summary:hover .pm-badge{border-color:var(--sky);background:rgba(21,71,143,.46)}
.pub-more[open]>summary .pm-badge{border-color:var(--sky);background:rgba(21,71,143,.46)}

/* ===== Clinical Trial section ===== */
.ct-h3{font-size:20px;color:var(--txt);margin:42px 0 20px;font-weight:600}
.ct-hero{display:grid;grid-template-columns:1.05fr 1fr;gap:28px;align-items:stretch;margin:8px 0 8px;background:linear-gradient(135deg,rgba(21,71,143,.24),rgba(10,33,64,.42));border:1px solid var(--line);border-radius:20px;padding:30px}
.ct-id{display:flex;flex-direction:column}
.ct-badge{align-self:flex-start;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--cyan);border:1px solid rgba(31,168,226,.4);background:rgba(31,168,226,.08);border-radius:999px;padding:5px 12px;margin-bottom:18px}
.ct-id-name{font-family:var(--mono);font-size:42px;font-weight:700;color:var(--txt);letter-spacing:.02em;line-height:1}
.ct-id-sub{color:var(--sky);font-size:14px;margin-top:9px}
.ct-id-desc{color:var(--muted);font-size:14px;line-height:1.55;margin:16px 0 0;max-width:44ch}
.ct-facts{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.ct-fact{background:var(--panel);padding:15px 16px;display:flex;flex-direction:column;gap:5px}
.ct-fact-k{font-family:var(--mono);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.ct-fact-v{font-size:13.5px;color:var(--txt);line-height:1.35}
.ct-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0 20px}
.ct-step{position:relative;display:flex;flex-direction:column}
.ct-step-rail{display:flex;align-items:center;height:44px;margin-bottom:14px;position:relative}
.ct-step-num{position:relative;z-index:2;flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-family:var(--mono);font-size:15px;font-weight:700;color:var(--space);background:linear-gradient(135deg,var(--cyan),var(--sky));box-shadow:0 0 0 5px rgba(31,168,226,.10)}
.ct-step-rail::before{content:"";position:absolute;left:38px;right:-20px;top:50%;height:2px;background:linear-gradient(90deg,var(--cyan),rgba(31,168,226,.22));transform:translateY(-50%)}
.ct-step:last-child .ct-step-rail::before{display:none}
.ct-step-card{background:linear-gradient(180deg,rgba(31,168,226,.05),transparent);border:1px solid var(--line);border-radius:14px;padding:18px;flex:1}
.ct-step-ico{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;color:var(--cyan);background:rgba(31,168,226,.10);margin-bottom:12px}
.ct-step-ico svg{width:19px;height:19px}
.ct-step-card h4{font-size:15px;margin:0 0 6px;color:var(--txt)}
.ct-step-card p{font-size:13px;color:var(--muted);line-height:1.5;margin:0}
.ct-find-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.ct-find{background:linear-gradient(180deg,rgba(31,168,226,.05),transparent);border:1px solid var(--line);border-radius:14px;padding:20px}
.ct-find-dot{display:block;width:10px;height:10px;border-radius:50%;background:radial-gradient(circle at 30% 30%,var(--sky),var(--cyan));box-shadow:0 0 14px 2px rgba(31,168,226,.5);margin-bottom:14px}
.ct-find h4{font-size:15.5px;color:var(--txt);margin:0 0 8px}
.ct-find p{font-size:13px;color:var(--muted);line-height:1.55;margin:0}
.ct-cta{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:30px}
.ct-link{display:flex;flex-direction:column;gap:5px;text-decoration:none;border:1px solid var(--line);border-radius:13px;padding:16px 18px;transition:border-color .2s,transform .2s,box-shadow .2s,background .2s}
.ct-link:hover{border-color:var(--cyan);transform:translateY(-2px);box-shadow:0 24px 50px -34px rgba(31,168,226,.5)}
.ct-link-k{font-family:var(--mono);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.ct-link-v{font-size:14px;color:var(--sky);font-weight:600;line-height:1.35}
.ct-link.primary{background:linear-gradient(135deg,rgba(31,168,226,.16),rgba(31,168,226,.05));border-color:rgba(31,168,226,.4)}
.ct-link.primary .ct-link-v{color:var(--cyan)}
.ct-foot{margin-top:22px;color:var(--muted);font-size:12px;line-height:1.55;max-width:82ch}
@media(max-width:900px){.ct-steps{grid-template-columns:1fr 1fr;gap:22px}.ct-step:nth-child(2) .ct-step-rail::before{display:none}}
@media(max-width:820px){.ct-hero{grid-template-columns:1fr;padding:24px}.ct-find-grid,.ct-cta{grid-template-columns:1fr}}
@media(max-width:620px){.ct-steps{grid-template-columns:1fr}.ct-step-rail::before{display:none}.ct-facts{grid-template-columns:1fr}}

/* Clinical Trial boxes: lit navy "glass" finish matching the publication CTA bar */
.ct-step-card,.ct-find,.ct-link,.ct-fact{position:relative;overflow:hidden}
.ct-step-card,.ct-find,.ct-link{background:linear-gradient(135deg,rgba(21,71,143,.32),rgba(10,33,64,.20));border-color:rgba(123,207,253,.20);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.ct-step-card::before,.ct-find::before,.ct-link::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(135deg,rgba(123,207,253,.13),transparent 46%)}
.ct-step-card>*,.ct-find>*,.ct-link>*{position:relative;z-index:1}
.ct-fact{background:linear-gradient(135deg,rgba(21,71,143,.40),rgba(10,33,64,.55)),var(--panel)}
.ct-fact::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(135deg,rgba(123,207,253,.09),transparent 52%)}
.ct-fact>*{position:relative;z-index:1}
.ct-link.primary{background:linear-gradient(135deg,rgba(31,168,226,.22),rgba(21,71,143,.24));border-color:rgba(31,168,226,.45)}
.ct-link:hover{border-color:var(--cyan);transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 24px 50px -32px rgba(31,168,226,.55)}
.ct-hero{border-color:rgba(123,207,253,.20);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}

/* ===== Clinical Trial: professional entrance + hover motion ===== */
/* staggered card rise (uses the .reveal/.in system) */
.ct-steps .ct-step.reveal:nth-child(1){transition-delay:.04s}
.ct-steps .ct-step.reveal:nth-child(2){transition-delay:.12s}
.ct-steps .ct-step.reveal:nth-child(3){transition-delay:.20s}
.ct-steps .ct-step.reveal:nth-child(4){transition-delay:.28s}
.ct-find-grid .ct-find.reveal:nth-child(1){transition-delay:.04s}
.ct-find-grid .ct-find.reveal:nth-child(2){transition-delay:.12s}
.ct-find-grid .ct-find.reveal:nth-child(3){transition-delay:.20s}
/* connector rail draws itself in */
.ct-step .ct-step-rail::before{transform:translateY(-50%) scaleX(0);transform-origin:left center;transition:transform .55s ease .15s}
.ct-step.in .ct-step-rail::before{transform:translateY(-50%) scaleX(1)}
.ct-steps .ct-step:nth-child(1) .ct-step-rail::before{transition-delay:.22s}
.ct-steps .ct-step:nth-child(2) .ct-step-rail::before{transition-delay:.30s}
.ct-steps .ct-step:nth-child(3) .ct-step-rail::before{transition-delay:.38s}
/* number node pops in */
.ct-step .ct-step-num{transform:scale(.55);opacity:0;transition:transform .5s cubic-bezier(.2,.85,.3,1.3),opacity .4s}
.ct-step.in .ct-step-num{transform:scale(1);opacity:1}
.ct-steps .ct-step:nth-child(1) .ct-step-num{transition-delay:.06s}
.ct-steps .ct-step:nth-child(2) .ct-step-num{transition-delay:.14s}
.ct-steps .ct-step:nth-child(3) .ct-step-num{transition-delay:.22s}
.ct-steps .ct-step:nth-child(4) .ct-step-num{transition-delay:.30s}
/* hover: lift + sheen sweep on the boxes */
.ct-step-card,.ct-find{transition:border-color .25s,transform .25s,box-shadow .25s,background .25s}
.ct-step-card:hover,.ct-find:hover{transform:translateY(-3px);border-color:var(--cyan);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 24px 50px -34px rgba(31,168,226,.5)}
.ct-step-card::after,.ct-find::after,.ct-link::after{content:"";position:absolute;top:0;left:-70%;width:50%;height:100%;background:linear-gradient(100deg,transparent,rgba(123,207,253,.16),transparent);transform:skewX(-18deg);transition:left .6s ease;pointer-events:none}
.ct-step-card:hover::after,.ct-find:hover::after,.ct-link:hover::after{left:130%}
.ct-step-ico{transition:transform .25s,background .25s}
.ct-step-card:hover .ct-step-ico{transform:translateY(-1px) scale(1.04)}
/* reduced-motion safety */
@media(prefers-reduced-motion:reduce){
  .ct-step .ct-step-rail::before{transform:translateY(-50%) scaleX(1)!important}
  .ct-step .ct-step-num{transform:none!important;opacity:1!important}
}

/* ===== Staggered entrance for Pipeline, Science, and home explore cards ===== */
/* pipeline program tiers */
.tiers > .reveal:nth-child(1){transition-delay:.04s}
.tiers > .reveal:nth-child(2){transition-delay:.12s}
.tiers > .reveal:nth-child(3){transition-delay:.20s}
.tiers > .reveal:nth-child(4){transition-delay:.28s}
/* strategy pillars */
.strat-grid .card.reveal:nth-child(1){transition-delay:.04s}
.strat-grid .card.reveal:nth-child(2){transition-delay:.11s}
.strat-grid .card.reveal:nth-child(3){transition-delay:.18s}
.strat-grid .card.reveal:nth-child(4){transition-delay:.25s}
/* technology pillar cards + home explore tiles (shared .grid6) */
.grid6 .card.reveal:nth-child(1){transition-delay:.04s}
.grid6 .card.reveal:nth-child(2){transition-delay:.11s}
.grid6 .card.reveal:nth-child(3){transition-delay:.18s}
.grid6 .card.reveal:nth-child(4){transition-delay:.25s}
.grid6 .card.reveal:nth-child(5){transition-delay:.32s}
.grid6 .card.reveal:nth-child(6){transition-delay:.39s}
/* how-it-works steps */
.steps .step.reveal:nth-child(1){transition-delay:.04s}
.steps .step.reveal:nth-child(2){transition-delay:.12s}
.steps .step.reveal:nth-child(3){transition-delay:.20s}
.steps .step.reveal:nth-child(4){transition-delay:.28s}

/* ===== Clinical Trial: light theme matching the Approach tab background ===== */
#clinicaltrial{background:linear-gradient(180deg,#F4F8FE 0%,#E7F1FC 100%)}
#clinicaltrial .eyebrow{color:#1577B0}
#clinicaltrial .sec-head h2{color:#0E2C54}
#clinicaltrial .sec-head p{color:#42597A}
#clinicaltrial .ct-h3{color:#0E2C54}
#clinicaltrial .ct-foot{color:#5A6E8C}
/* hero band -> dark card (only this box on the otherwise-light page) */
#clinicaltrial .ct-hero{background:linear-gradient(135deg,#11315E,#0A2140);border-color:rgba(123,207,253,.16);box-shadow:0 26px 60px -40px rgba(4,16,31,.6)}
#clinicaltrial .ct-badge{color:#7BCFFD;border-color:rgba(31,168,226,.42);background:rgba(31,168,226,.12)}
#clinicaltrial .ct-id-name{color:#EAF2FB}
#clinicaltrial .ct-id-sub{color:#7BCFFD}
#clinicaltrial .ct-id-desc{color:#9FB4D4}
/* facts grid -> dark cells, light dividers */
#clinicaltrial .ct-facts{background:rgba(123,207,253,.16);border-color:rgba(123,207,253,.16)}
#clinicaltrial .ct-fact{background:linear-gradient(135deg,rgba(31,90,160,.28),rgba(10,33,64,.5)),#0A2140}
#clinicaltrial .ct-fact::before{display:none}
#clinicaltrial .ct-fact-k{color:#8FA6C8}
#clinicaltrial .ct-fact-v{color:#EAF2FB}
/* step / finding / link boxes -> white cards (approach style) */
#clinicaltrial .ct-step-card,#clinicaltrial .ct-find,#clinicaltrial .ct-link{background:#FFFFFF;border-color:rgba(21,71,143,.12);box-shadow:0 18px 40px -28px rgba(21,71,143,.35)}
#clinicaltrial .ct-step-card::before,#clinicaltrial .ct-find::before,#clinicaltrial .ct-link::before{display:none}
#clinicaltrial .ct-step-card:hover,#clinicaltrial .ct-find:hover,#clinicaltrial .ct-link:hover{border-color:var(--cyan);box-shadow:0 30px 60px -30px rgba(31,168,226,.45)}
#clinicaltrial .ct-step-card h4,#clinicaltrial .ct-find h4{color:#0E2C54}
#clinicaltrial .ct-step-card p,#clinicaltrial .ct-find p{color:#42597A}
#clinicaltrial .ct-step-ico{background:rgba(21,71,143,.08);color:#1577B0;border:1px solid rgba(21,71,143,.10)}
#clinicaltrial .ct-link-k{color:#6A7E9C}
#clinicaltrial .ct-link-v{color:#1577B0}
#clinicaltrial .ct-link.primary{background:linear-gradient(135deg,#EAF4FE,#DCEBFB);border-color:rgba(31,168,226,.45)}
#clinicaltrial .ct-link.primary .ct-link-v{color:#1488C2}
/* sheen sweep softened for light */
#clinicaltrial .ct-step-card::after,#clinicaltrial .ct-find::after,#clinicaltrial .ct-link::after{background:linear-gradient(100deg,transparent,rgba(31,168,226,.10),transparent)}

/* ===== Clinical Trial: infographic redesign (light) ===== */
/* heading accent underline */
#clinicaltrial .ct-h3{position:relative;padding-bottom:14px;margin-bottom:26px}
#clinicaltrial .ct-h3::after{content:"";position:absolute;left:0;bottom:0;width:54px;height:3px;border-radius:2px;background:linear-gradient(90deg,#1577B0,#15478F)}
/* numbered nodes: navy filled, white numerals */
#clinicaltrial .ct-step-num{background:linear-gradient(135deg,#2E6FB0,#15478F);color:#fff;box-shadow:0 7px 16px -7px rgba(21,71,143,.7)}
/* dashed connector */
#clinicaltrial .ct-step-rail::before{height:0;background:none;border-top:2px dashed rgba(21,71,143,.30)}
/* step cards: centered with circular icon badge */
#clinicaltrial .ct-step-card{display:flex;flex-direction:column;align-items:center;text-align:center;padding:26px 20px}
#clinicaltrial .ct-step-ico{width:66px;height:66px;border-radius:50%;background:#E9F1FB;color:#15478F;border:none;margin:0 0 16px}
#clinicaltrial .ct-step-ico svg{width:30px;height:30px}
#clinicaltrial .ct-step-card h4{font-size:17px;margin:0 0 8px}
#clinicaltrial .ct-step-card p{font-size:13.5px}
/* findings: horizontal, circular icon on the left */
#clinicaltrial .ct-find{display:flex;align-items:flex-start;gap:16px;padding:22px}
#clinicaltrial .ct-find-ico{flex:none;width:54px;height:54px;border-radius:50%;background:#E9F1FB;color:#15478F;display:grid;place-items:center}
#clinicaltrial .ct-find-ico svg{width:26px;height:26px}
#clinicaltrial .ct-find-body{min-width:0}
#clinicaltrial .ct-find h4{margin:2px 0 7px}
/* link cards: horizontal, circular icon on the left */
#clinicaltrial .ct-link{flex-direction:row;align-items:center;gap:16px;padding:18px 20px}
#clinicaltrial .ct-link-ico{flex:none;width:50px;height:50px;border-radius:50%;background:#E9F1FB;color:#15478F;display:grid;place-items:center}
#clinicaltrial .ct-link-ico svg{width:24px;height:24px}
#clinicaltrial .ct-link-body{display:flex;flex-direction:column;gap:5px;min-width:0}
/* footnote with info badge */
#clinicaltrial .ct-foot{display:flex;align-items:flex-start;gap:12px;margin-top:24px;color:#5A6E8C}
#clinicaltrial .ct-foot p{margin:0;color:#5A6E8C}
#clinicaltrial .ct-foot-ico{flex:none;width:30px;height:30px;border-radius:50%;background:#E9F1FB;color:#15478F;display:grid;place-items:center;margin-top:1px}
#clinicaltrial .ct-foot-ico svg{width:16px;height:16px}
@media(max-width:620px){#clinicaltrial .ct-find,#clinicaltrial .ct-link{gap:13px}}

/* ===== Pipeline: phase chart (Ankyra-style, clickable rows) ===== */
.pl-chart{margin-top:6px}
.pl-head{display:grid;grid-template-columns:minmax(0,196px) minmax(0,1fr) 22px;gap:16px;align-items:center;padding:14px 17px;border-bottom:none;background:#5e6f82;border:none;border-radius:6px;margin-bottom:8px}
.pl-head-prog,.pl-head-stage{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:#fff;text-align:center;white-space:nowrap}
.pl-axis{display:grid;grid-template-columns:repeat(5,1fr)}
.pl-axis span{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:#fff;text-align:center;line-height:1.15;padding:0 2px;white-space:nowrap}
.pl-cat{margin-top:30px;margin-bottom:2px}
.pl-cat-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.pl-cat-head h3{font-size:18px;color:var(--txt);margin:0}
.pl-cat-sub{font-size:12.5px;color:var(--muted)}
.pl-series{font-family:var(--mono);font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--sky);margin:0;padding:15px 16px 9px}
.pl-row{border-bottom:1px solid var(--line)}
.pl-row>summary{display:grid;grid-template-columns:minmax(0,196px) minmax(0,1fr) 22px;gap:16px;align-items:center;padding:14px 16px;cursor:pointer;list-style:none;transition:background .2s}
.pl-row>summary::-webkit-details-marker{display:none}
.pl-row>summary:hover{background:rgba(31,168,226,.06)}
.pl-prog{display:flex;flex-direction:column;gap:3px;min-width:0}
.pl-id{display:inline-flex;align-items:center;gap:9px;flex-wrap:wrap;font-family:var(--mono);font-size:15px;font-weight:700;color:var(--txt)}
.pl-desc{font-size:12.5px;color:var(--muted);line-height:1.3}
.pl-track{position:relative;height:30px;border-radius:8px;background:rgba(123,207,253,.06);background-image:repeating-linear-gradient(90deg,transparent 0,transparent calc(20% - 1px),var(--line) calc(20% - 1px),var(--line) 20%);overflow:hidden}
.pl-bar{height:100%;width:0;border-radius:8px;background:linear-gradient(90deg,var(--navy),var(--cyan));box-shadow:0 0 18px -3px rgba(31,168,226,.55);transition:width .9s cubic-bezier(.2,.7,.2,1)}
.pl-row.in .pl-bar{width:calc(var(--fill)/5*100%)}
.pl-row-lead .pl-bar{background:linear-gradient(90deg,#FF6A2E,#FFAE74);box-shadow:0 0 0 1px rgba(255,174,116,.5),0 6px 20px -8px rgba(255,122,69,.6)}
.pl-stage{font-size:12.5px;color:var(--sky);font-weight:600;line-height:1.25}
.pl-chev{justify-self:end;width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform .25s}
.pl-row[open] .pl-chev{transform:rotate(-135deg)}
.pl-detail{padding:0 16px 18px}
.pl-detail-grid{display:flex;flex-wrap:wrap;gap:26px;margin-bottom:10px}
.pl-detail-grid>div{display:flex;flex-direction:column;gap:3px}
.pl-dk{font-family:var(--mono);font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.pl-dv{font-size:13px;color:var(--txt)}
.pl-dmech{font-size:13px;color:var(--muted);line-height:1.55;margin:0;max-width:74ch}
@media(max-width:760px){
  .pl-head{display:none}
  .pl-row>summary{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
  .pl-prog{flex:1 1 60%}
  .pl-chev{flex:0 0 auto;margin-left:auto}
  .pl-track{flex:1 1 100%;order:4}
}

/* ===== Pipeline: lead product candidate ===== */
.pl-lead-tag{font-family:var(--sans);font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#FFB184;background:rgba(255,122,69,.14);border:1px solid rgba(255,122,69,.36);padding:2px 8px;border-radius:999px;white-space:nowrap}
.pl-row.lead>summary{background:rgba(255,122,69,.045)}
.pl-row.lead>summary:hover{background:rgba(255,122,69,.085)}
.pl-row.lead .pl-bar{background:linear-gradient(90deg,#FF6A2E,#FFAE74);box-shadow:0 0 20px -3px rgba(255,122,69,.6)}

/* ===== Pipeline: framed series groups ===== */
.pl-series-group{border:1px solid var(--line);border-radius:12px;margin-top:14px;overflow:hidden;background:rgba(123,207,253,.018)}
.pl-series-group .pl-row:last-child{border-bottom:none}

/* ===== Legal / Terms of Use ===== */
.legal-wrap{max-width:880px}
.legal-body{color:var(--muted);font-size:14.5px;line-height:1.75}
.legal-body h3{color:var(--txt);font-size:16px;font-weight:700;margin:30px 0 8px;letter-spacing:.01em}
.legal-body p{margin:0 0 14px}
.legal-body a{color:var(--sky)}
.legal-note{border-left:3px solid var(--cyan);padding:13px 16px;margin:18px 0 10px;background:rgba(31,168,226,.06);color:var(--sky);border-radius:0 8px 8px 0;font-size:12.5px;letter-spacing:.02em;line-height:1.65}

/* ===== Pipeline forward-looking note + Legal updated date ===== */
.pl-note{margin-top:22px;font-size:11.5px;line-height:1.6;color:var(--muted);opacity:.8;max-width:80ch}
.legal-updated{font-family:var(--mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-top:6px}

/* ===== Phase header bar: match "Localized administration" heading font ===== */
.pl-head-prog,.pl-head-stage,.pl-axis span{font-weight:800;letter-spacing:-.02em;text-transform:none;font-size:18px}

/* ===== Lead Product Candidate (KIN-112) ===== */
.lead-sec .wrap{max-width:1400px}
.lead-sec .lead-grid{display:grid;grid-template-columns:minmax(0,0.76fr) minmax(0,1.05fr);gap:34px;align-items:center}
.lead-fig{display:flex;justify-content:center;position:relative}
.lead-fig img,.lead-fig svg{display:block;width:100%;max-width:390px;height:auto}
.lead-dots{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}
.lead-dot{position:absolute;border-radius:50%;background:radial-gradient(circle,rgba(31,168,226,.62) 0%,rgba(31,168,226,.26) 45%,rgba(31,168,226,0) 72%);opacity:0;will-change:transform,opacity;animation:leadFloat 16s ease-in-out infinite}
@keyframes leadFloat{0%{opacity:0;transform:translate(0,0) scale(.55)}14%{opacity:.72}86%{opacity:.72}100%{opacity:0;transform:translate(var(--dx,24px),var(--dy,-64px)) scale(1.05)}}@keyframes leadDrift{0%{opacity:0;transform:translate(0,0) scale(.5)}12%{opacity:.7}50%{transform:translate(calc(var(--dx,30px)*0.45 + 16px),calc(var(--dy,-60px)*0.5)) scale(.92)}88%{opacity:.7}100%{opacity:0;transform:translate(var(--dx,30px),var(--dy,-60px)) scale(1.1)}}@keyframes leadSway{0%{opacity:0;transform:translate(0,0) scale(.58)}15%{opacity:.66}33%{transform:translate(calc(var(--dx,-26px)*0.3 - 13px),calc(var(--dy,-50px)*0.33)) scale(.95)}66%{transform:translate(calc(var(--dx,-26px)*0.7 + 13px),calc(var(--dy,-50px)*0.72)) scale(1.02)}85%{opacity:.66}100%{opacity:0;transform:translate(var(--dx,-26px),var(--dy,-50px)) scale(1.12)}}@keyframes leadOrbit{0%{opacity:0;transform:translate(0,0) scale(.5)}12%{opacity:.7}40%{transform:translate(calc(var(--dx,40px)*0.5 - 18px),calc(var(--dy,-40px)*0.4 - 14px)) scale(.95)}70%{transform:translate(calc(var(--dx,40px)*0.85 + 14px),calc(var(--dy,-40px)*0.8 + 6px)) scale(1.05)}88%{opacity:.7}100%{opacity:0;transform:translate(var(--dx,40px),var(--dy,-40px)) scale(1.12)}}
@media(prefers-reduced-motion:reduce){.lead-dots{display:none}}@keyframes leadOrbA{0%{transform:translate(0,0) rotate(0deg)}50%{transform:translate(var(--dx,18px),var(--dy,-22px)) rotate(var(--rot,6deg))}100%{transform:translate(0,0) rotate(0deg)}}@keyframes leadOrbB{0%{transform:translate(0,0) rotate(0deg)}50%{transform:translate(var(--dx,-20px),var(--dy,18px)) rotate(var(--rot,-7deg))}100%{transform:translate(0,0) rotate(0deg)}}@keyframes leadOrbC{0%{transform:translate(0,0) rotate(0deg)}30%{transform:translate(calc(var(--dx,16px)*.55),calc(var(--dy,-18px)*.5)) rotate(4deg)}65%{transform:translate(var(--dx,16px),var(--dy,-18px)) rotate(-3deg)}100%{transform:translate(0,0) rotate(0deg)}}.lead-orbs{position:absolute;inset:0;z-index:3;pointer-events:none}.lead-orb{position:absolute;display:block;will-change:transform;background-repeat:no-repeat;background-position:center;background-size:contain;filter:drop-shadow(0 6px 16px rgba(20,60,110,.20));animation:leadOrbA 12s ease-in-out infinite}.lead-orb{background-image:url(assets/drug-complex.png)}
.lead-body h2{font-size:clamp(30px,3.6vw,46px);margin:8px 0 14px}
.lead-tag{color:var(--sky);font-size:clamp(16px,1.7vw,19px);font-weight:600;line-height:1.4;margin:0 0 22px}
.lead-body>p{color:var(--muted);font-size:15px;line-height:1.7;margin:0 0 16px}
.lead-state{color:var(--txt)!important;font-weight:600;border-left:3px solid var(--cyan);padding:2px 0 2px 18px}
.lead-pre{color:var(--txt)!important;margin-bottom:8px!important}
.lead-list{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-direction:column;gap:10px}
.lead-list li{position:relative;padding-left:26px;color:var(--muted);font-size:14.5px;line-height:1.55}
.lead-list li::before{content:"";position:absolute;left:4px;top:8px;width:8px;height:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 4px rgba(31,168,226,.14)}
.lead-links{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.lead-links a{display:inline-flex;align-items:center;font-size:13.5px;font-weight:600;color:var(--sky);padding:11px 18px;border:1px solid var(--line);border-radius:9px;background:rgba(31,168,226,.05);transition:.22s}
.lead-links a:hover{border-color:var(--cyan);background:rgba(31,168,226,.12);transform:translateY(-2px)}
@media(max-width:860px){.lead-sec .lead-grid{grid-template-columns:1fr;gap:26px}.lead-fig{order:-1}}

/* ===== Lead section -> light/white theme (pipeline stays dark); tightened gap ===== */
.lead-sec{background:linear-gradient(180deg,#F5F9FE 0%,#E8F1FB 100%);padding-top:50px;padding-bottom:104px}
#pipeline{padding-bottom:40px}
.lead-sec .eyebrow{color:#1577B0}
.lead-sec .lead-body h2{color:#0E2C54}
.lead-sec .lead-tag{color:#1C6FB8}
.lead-sec .lead-body>p{color:#44566B}
.lead-sec .lead-state{color:#0E2C54!important;border-left-color:#1FA8E2}
.lead-sec .lead-pre{color:#0E2C54!important}
.lead-sec .lead-list li{color:#44566B}
.lead-sec .lead-list li::before{background:#1FA8E2;box-shadow:0 0 0 4px rgba(31,168,226,.16)}

/* ===== PREVIEW: entire pipeline page on light/white background ===== */
#pipeline{background:#ffffff}
#pipeline .eyebrow{color:#1577B0}
#pipeline .sec-head h2{color:#0E2C54}
#pipeline .sec-head p{color:#48596F}
#pipeline .pl-cat-head h3{color:#0E2C54}
#pipeline .pl-cat-sub{color:#5B7088}
#pipeline .pl-series{color:#1577B0}
#pipeline .pl-series-group{border-color:#CBDDF1;background:#FBFDFF}
#pipeline .pl-row{border-bottom-color:#E2EBF6}
#pipeline .pl-row>summary:hover{background:rgba(31,168,226,.07)}
#pipeline .pl-id{color:#0E2C54}
#pipeline .pl-desc{color:#5B7088}
#pipeline .pl-stage{color:#1C6FB8}
#pipeline .pl-chev{border-color:#8094AC}
#pipeline .pl-track{background:#E7EFF9;background-image:repeating-linear-gradient(90deg,transparent 0,transparent calc(20% - 1px),#D2E0F0 calc(20% - 1px),#D2E0F0 20%)}
#pipeline .pl-dk{color:#6B7E96}
#pipeline .pl-dv{color:#0E2C54}
#pipeline .pl-dmech{color:#5B7088}
#pipeline .pl-note{color:#5B7088;opacity:1}

/* ===== Pipeline: white background, 2 category groups as dark cards ===== */
#pipeline .pl-head{padding-left:24px;padding-right:24px}
@media(max-width:1200px){.pl-head-prog,.pl-head-stage,.pl-axis span{font-size:13px}}
#pipeline .pl-catbox{background:#0A2140;border:1px solid rgba(123,207,253,.13);border-radius:16px;padding:32px 28px 34px;margin-top:24px;box-shadow:0 26px 60px -40px rgba(4,16,31,.55)}
#pipeline .pl-catbox .pl-cat{margin:0 0 4px}
#pipeline .pl-catbox .pl-cat-head h3{color:#EAF2FB}
#pipeline .pl-catbox .pl-cat-sub{color:#92A8CB}
#pipeline .pl-catbox .pl-series{color:#7BCFFD}
#pipeline .pl-catbox .pl-series-group{border-color:rgba(123,207,253,.14);background:rgba(123,207,253,.025)}
#pipeline .pl-catbox .pl-row{border-bottom-color:rgba(123,207,253,.11)}
#pipeline .pl-catbox .pl-row>summary:hover{background:rgba(31,168,226,.08)}
#pipeline .pl-catbox .pl-id{color:#EAF2FB}
#pipeline .pl-catbox .pl-desc{color:#92A8CB}
#pipeline .pl-catbox .pl-stage{color:#7BCFFD}
#pipeline .pl-catbox .pl-chev{border-color:#6E86A4}
#pipeline .pl-catbox .pl-track{background:rgba(123,207,253,.06);background-image:repeating-linear-gradient(90deg,transparent 0,transparent calc(20% - 1px),rgba(123,207,253,.16) calc(20% - 1px),rgba(123,207,253,.16) 20%)}
#pipeline .pl-catbox .pl-dk{color:#92A8CB}
#pipeline .pl-catbox .pl-dv{color:#EAF2FB}
#pipeline .pl-catbox .pl-dmech{color:#92A8CB}

/* KIN-112 heading + lead-candidate pill */
.lead-h{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:8px 0 14px}
.lead-h h2{margin:0!important}
.lead-pill{display:inline-flex;align-items:center;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#D9531E;background:rgba(255,122,69,.10);border:1px solid rgba(255,122,69,.45);padding:6px 13px;border-radius:999px;white-space:nowrap}

/* Pipeline lead pill is a link to the KIN-112 lead section */
.pl-lead-tag{text-decoration:none;cursor:pointer;transition:background .2s,border-color .2s,transform .2s}
.pl-lead-tag:hover{background:rgba(255,122,69,.26);border-color:rgba(255,122,69,.62);transform:translateY(-1px)}

/* Phase header bar: thin column dividers matching the track quarter-marks below */
.pl-axis{align-self:stretch;align-items:center;background-image:repeating-linear-gradient(90deg,transparent 0,transparent calc(20% - 1px),rgba(255,255,255,.20) calc(20% - 1px),rgba(255,255,255,.20) 20%)}

/* divider between Program and the phase area */
.pl-axis{position:relative}
.pl-axis::before{content:"";position:absolute;left:-8px;top:0;bottom:0;width:1px;background:rgba(255,255,255,.20)}

/* ===== Publications: bright cards on the dark page (boxes only) ===== */
.card.pub{background:linear-gradient(160deg,#FFFFFF,#E9F1FC);border-color:rgba(21,71,143,.16);box-shadow:0 26px 55px -32px rgba(0,0,0,.55)}
.card.pub:hover{border-color:#1577B0;transform:translateY(-3px);box-shadow:0 34px 66px -30px rgba(0,0,0,.6)}
.card.pub .glow{display:none}
.card.pub .pub-venue{color:#1577B0}
.card.pub .pub-type{color:#5A6E8C;border-color:rgba(21,71,143,.28);background:rgba(21,71,143,.05)}
.card.pub h3{color:#0E2C54}
.card.pub p{color:#42597A}
.card.pub .arrow{color:#1577B0}
.pub-mini{background:linear-gradient(160deg,#FFFFFF,#EFF4FB);border-color:rgba(21,71,143,.16)}
.pub-mini:hover{border-color:#1577B0;background:linear-gradient(160deg,#FFFFFF,#E6EFFA);box-shadow:0 26px 52px -32px rgba(0,0,0,.55)}
.pub-mini .pm-venue{color:#1577B0}
.pub-mini .pm-title{color:#0E2C54}
.pub-mini .pm-desc{color:#42597A}
.pub-mini .pm-arrow{color:#1577B0;opacity:.9}

/* ===== Publications: bright "Read the full publication record" expander (matches light cards) ===== */
.pub-more>summary{background:linear-gradient(115deg,#FFFFFF,#EAF2FC 55%,#E3EDFA);border-color:rgba(21,71,143,.16);box-shadow:0 22px 50px -34px rgba(21,71,143,.45)}
.pub-more>summary::before{background:linear-gradient(100deg,transparent,rgba(21,71,143,.10),transparent)}
.pub-more>summary:hover{border-color:#1577B0;background:linear-gradient(115deg,#FFFFFF,#E4EEFB 55%,#DAE7F7);box-shadow:0 26px 58px -30px rgba(21,71,143,.55)}
.pm-ico{color:#1577B0;background:rgba(21,71,143,.07);border-color:rgba(21,71,143,.18)}
.pub-more>summary:hover .pm-ico{background:rgba(21,71,143,.12);border-color:#1577B0}
.pub-more[open]>summary .pm-ico{background:rgba(21,71,143,.10);border-color:#1577B0}
.pm-lead{color:#0E2C54}
.pm-sub{color:#42597A}
.pm-badge{background:rgba(21,71,143,.06);border-color:rgba(21,71,143,.18)}
.pm-badge::before,.pm-badge::after{background:#1577B0}
.pub-more>summary:hover .pm-badge{border-color:#1577B0;background:rgba(21,71,143,.12)}
.pub-more[open]>summary .pm-badge{border-color:#1577B0;background:rgba(21,71,143,.12)}

/* ===== Publications expander: bright glossy glass with reflections ===== */
.pub-more>summary{position:relative;overflow:hidden;background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,0) 46%),linear-gradient(160deg,#FFFFFF,#EAF2FC 52%,#DCE9F8);border:1px solid rgba(21,71,143,.18);box-shadow:0 22px 50px -34px rgba(21,71,143,.45),inset 0 1px 0 rgba(255,255,255,.95),inset 0 -18px 34px -22px rgba(21,71,143,.12)}
.pub-more>summary::after{content:"";position:absolute;top:-40%;left:-10%;width:60%;height:160%;background:radial-gradient(60% 50% at 30% 30%,rgba(255,255,255,.55),rgba(255,255,255,0) 70%);pointer-events:none}
.pub-more>summary::before{content:"";position:absolute;top:-60%;left:-30%;width:42%;height:220%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.7),transparent);transform:skewX(-18deg);transition:left .6s ease;pointer-events:none;opacity:.9}
.pub-more>summary:hover::before{left:125%}
.pub-more>summary:hover{border-color:#1577B0;background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,255,255,0) 46%),linear-gradient(160deg,#FFFFFF,#E4EEFB 52%,#D2E2F6);box-shadow:0 26px 58px -30px rgba(21,71,143,.55),inset 0 1px 0 rgba(255,255,255,1),inset 0 -18px 34px -22px rgba(21,71,143,.14)}
.pm-ico{color:#1577B0;background:linear-gradient(160deg,#FFFFFF,#E6EFFB);border:1px solid rgba(21,71,143,.20);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 6px 14px -8px rgba(21,71,143,.5)}
.pub-more>summary:hover .pm-ico{border-color:#1577B0;background:linear-gradient(160deg,#FFFFFF,#DBE8F8)}
.pub-more[open]>summary .pm-ico{border-color:#1577B0;background:linear-gradient(160deg,#FFFFFF,#DBE8F8)}
.pm-lead{color:#0E2C54}
.pm-sub{color:#42597A}
.pm-badge{background:linear-gradient(160deg,#FFFFFF,#E6EFFB);border:1px solid rgba(21,71,143,.20);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 6px 14px -8px rgba(21,71,143,.5)}
.pm-badge::before,.pm-badge::after{background:#1577B0}
.pub-more>summary:hover .pm-badge{border-color:#1577B0;background:linear-gradient(160deg,#FFFFFF,#DBE8F8)}
.pub-more[open]>summary .pm-badge{border-color:#1577B0;background:linear-gradient(160deg,#FFFFFF,#DBE8F8)}

/* ===== Publications expander: blue frame, accent + badge, bold larger lead ===== */
.pub-more>summary{border:1.5px solid #1577B0}
.pub-more>summary:hover{border-color:#0F5C97}
.pub-more[open]>summary{border-color:#0F5C97}
.pm-lead{color:#0E2C54;font-size:15px;font-weight:700;letter-spacing:.05em}
.pm-badge{border:1.5px solid rgba(255,122,69,.55)}
.pm-badge::before,.pm-badge::after{background:#FF7A45}
.pub-more>summary:hover .pm-badge{border-color:#FF7A45;background:linear-gradient(160deg,#FFFFFF,#FFE9DF)}
.pub-more[open]>summary .pm-badge{border-color:#FF7A45;background:linear-gradient(160deg,#FFFFFF,#FFE9DF)}

/* ===== Publications expander: orange frame to match the + badge ===== */
.pub-more>summary{border-color:#FF7A45}
.pub-more>summary:hover{border-color:#D9531E}
.pub-more[open]>summary{border-color:#D9531E}

/* ===== Publications expander: thicker orange frame ===== */
.pub-more>summary{border-width:3px}

/* ===== Contact: on-page inquiry form ===== */
.kf{max-width:620px;margin:34px auto 0;text-align:left;display:grid;gap:16px}
.kf-row{display:grid;gap:16px}
@media(min-width:600px){.kf-row.two{grid-template-columns:1fr 1fr}}
.kf label{display:block;font:600 11.5px/1.4 var(--mono),monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--sky);margin-bottom:7px}
.kf .req{color:var(--hot)}
.kf input,.kf select,.kf textarea{width:100%;box-sizing:border-box;background:rgba(4,16,31,.6);border:1px solid var(--line);border-radius:12px;padding:12px 14px;color:var(--txt);font:400 15px/1.5 var(--sans),sans-serif;transition:border-color .18s ease,box-shadow .18s ease}
.kf textarea{min-height:130px;resize:vertical}
.kf input::placeholder,.kf textarea::placeholder{color:var(--muted)}
.kf input:focus,.kf select:focus,.kf textarea:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(31,168,226,.18)}
.kf select{appearance:none;-webkit-appearance:none;padding-right:40px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237BCFFD' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
.kf .kf-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:4px}
.kf .kf-note{font:400 13px/1.5 var(--sans),sans-serif;color:var(--muted)}
.kf .kf-status{font:600 13px/1.5 var(--mono),monospace;min-height:1.1em;margin:2px 0 0}
.kf .kf-status.ok{color:var(--sky)}
.kf .kf-status.err{color:var(--hot)}

/* ===== Intro film band (sits directly under the hero) ===== */
.introfilm{background:linear-gradient(180deg,#04101F,#0A2140)}
.if-grid{display:grid;gap:32px;align-items:center}
@media(min-width:900px){.if-grid{grid-template-columns:1.12fr .88fr;gap:48px}}
.if-media{position:relative}
.vframe{position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--line);box-shadow:0 40px 90px -52px rgba(0,0,0,.85);background:#04101F;aspect-ratio:16/9}
.vframe .introvid{display:block;width:100%;height:100%;object-fit:cover;cursor:pointer}
.vsound{position:absolute;left:14px;bottom:14px;display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;border:1px solid rgba(123,207,253,.35);background:rgba(4,16,31,.62);color:var(--sky);font:600 11.5px/1 var(--mono),monospace;letter-spacing:.07em;text-transform:uppercase;cursor:pointer;transition:background .18s ease,border-color .18s ease,color .18s ease}
.vsound svg{display:block}
.vsound:hover{border-color:var(--cyan);color:#fff}
.vsound.on{background:var(--cyan);border-color:var(--cyan);color:#04101F}
.if-tag{font:800 clamp(25px,3.3vw,40px)/1.13 var(--sans),sans-serif;color:var(--txt);letter-spacing:-.01em;margin:10px 0 14px}
.if-sub{color:var(--muted);font-size:16px;line-height:1.65;max-width:46ch;margin:0}
.if-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:24px}
.vvo.on{background:var(--cyan);border-color:var(--cyan);color:#04101F}

/* ===== Intro film band: enriched dark feature (Pipeline tab) ===== */
.introfilm{position:relative;overflow:hidden;background:radial-gradient(120% 95% at 82% 0%,#10305C 0%,#0A2140 46%,#04101F 100%)}
.introfilm .if-bg{position:absolute;inset:0;pointer-events:none;background:radial-gradient(42% 58% at 80% 38%,rgba(31,168,226,.20),transparent 70%),radial-gradient(35% 45% at 12% 90%,rgba(123,207,253,.10),transparent 70%)}
.if-grid{position:relative;z-index:1}
@media(min-width:900px){.if-grid{grid-template-columns:.92fr 1.08fr;gap:54px}}
.if-eye{display:inline-flex;align-items:center;gap:8px}
.if-eye svg{display:block}
.if-sub{color:#B9CCE6;font-size:16.5px;line-height:1.7;max-width:50ch}
.vframe{box-shadow:0 44px 100px -46px rgba(0,0,0,.9),0 0 0 1px rgba(123,207,253,.16),0 28px 90px -44px rgba(31,168,226,.42)}
.vplay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(1);width:74px;height:74px;border-radius:999px;border:1px solid rgba(255,255,255,.5);background:rgba(4,16,31,.42);color:#fff;display:grid;place-items:center;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .25s ease,transform .25s ease;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.vplay svg{margin-left:3px}
.vframe.paused .vplay{opacity:1;pointer-events:auto}
.vframe.paused .vplay:hover{transform:translate(-50%,-50%) scale(1.06);background:var(--cyan);color:#04101F;border-color:var(--cyan)}
.vruntime{position:absolute;right:14px;bottom:14px;padding:5px 10px;border-radius:8px;background:rgba(4,16,31,.6);color:var(--sky);font:600 10.5px/1 var(--mono),monospace;letter-spacing:.06em;border:1px solid rgba(123,207,253,.22)}

/* ===== Pipeline intro film: larger section/video, thick orange frame, lead badge, fullscreen ===== */
.introfilm{padding:96px 0}
@media(min-width:900px){.introfilm{padding:122px 0}}
.introfilm .wrap{max-width:1260px}
@media(min-width:900px){.if-grid{grid-template-columns:.8fr 1.2fr;gap:60px}}
.if-tag{font-size:clamp(27px,3.5vw,44px)}
.introfilm .vframe{border:5px solid #FF7A45;border-radius:20px;box-shadow:0 0 0 1px rgba(255,122,69,.35),0 30px 70px -34px rgba(255,122,69,.5),0 46px 116px -52px rgba(0,0,0,.92)}
.lpc-badge{position:absolute;top:16px;left:16px;z-index:2;display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:rgba(4,16,31,.66);border:1px solid rgba(255,122,69,.7);color:#FFC4A3;font:700 11px/1 var(--mono),monospace;letter-spacing:.09em;text-transform:uppercase;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.lpc-badge svg{color:#FF7A45;display:block}
.vfull{position:absolute;top:16px;right:16px;z-index:2;width:40px;height:40px;display:grid;place-items:center;border-radius:10px;border:1px solid rgba(255,255,255,.32);background:rgba(4,16,31,.55);color:#fff;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background .18s ease,border-color .18s ease,color .18s ease}
.vfull:hover{background:#FF7A45;border-color:#FF7A45;color:#04101F}
.vruntime{padding:6px 11px;font-size:11.5px;color:#FFD0B5;border-color:rgba(255,122,69,.4)}

/* ===== Lead Product Candidate badge: sits above the video (not overlaid) ===== */
.if-media .lpc-badge{position:static;top:auto;left:auto;display:inline-flex;margin:0 0 16px;-webkit-backdrop-filter:none;backdrop-filter:none}

/* ===== Fullscreen video: show the whole frame (no edge cropping) ===== */
.introvid:fullscreen{object-fit:contain;width:100%;height:100%;background:#000}
.introvid:-webkit-full-screen{object-fit:contain;width:100%;height:100%;background:#000}

/* ===== Clinical Trial: thick dark blue frame on the trial registration card ===== */
#clinicaltrial .ct-link.primary{border:3px solid #15478F}
#clinicaltrial .ct-link.primary:hover{border-color:#0E2C54}

/* ===== Clinical Trial: all link cards get a thick dark blue frame, white inside ===== */
#clinicaltrial .ct-link{border:3px solid #15478F;background:#FFFFFF}
#clinicaltrial .ct-link.primary{border:3px solid #15478F;background:#FFFFFF}
#clinicaltrial .ct-link:hover{border-color:#0E2C54}

/* ===== Clinical Trial: slightly thinner card frame ===== */
#clinicaltrial .ct-link,#clinicaltrial .ct-link.primary{border-width:2px}

/* ===== Home bottom film: cinematic, plays on scroll with sound ===== */
.homefilm{position:relative;overflow:hidden;background:radial-gradient(120% 90% at 50% 0%,#10305C 0%,#0A2140 45%,#04101F 100%);padding:92px 0 104px;text-align:center}
.homefilm .hf-bg{position:absolute;inset:0;pointer-events:none;background:radial-gradient(45% 60% at 50% 8%,rgba(31,168,226,.18),transparent 70%),radial-gradient(38% 50% at 85% 100%,rgba(255,122,69,.10),transparent 70%)}
.hf-wrap{position:relative;z-index:1;max-width:1000px}
.hf-eye{display:inline-flex;align-items:center;gap:8px;justify-content:center}
.hf-eye svg{display:block}
.hf-tag{font:800 clamp(26px,3.4vw,42px)/1.12 var(--sans),sans-serif;color:var(--txt);letter-spacing:-.01em;margin:10px 0 8px}
.hf-sub{color:#B9CCE6;font-size:16.5px;line-height:1.6;margin:0 auto 30px;max-width:52ch}
.hf-frame{position:relative;margin:0 auto;max-width:940px;border-radius:22px;overflow:hidden;border:1px solid rgba(123,207,253,.18);box-shadow:0 50px 120px -50px rgba(31,168,226,.4),0 40px 100px -52px rgba(0,0,0,.92),inset 0 1px 0 rgba(255,255,255,.06);background:#04101F}
.homevid{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;cursor:pointer;background:#04101F}
.hf-hint{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;border:1px solid rgba(123,207,253,.4);background:rgba(4,16,31,.7);color:var(--sky);font:600 12px/1 var(--mono),monospace;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .25s ease,background .18s ease,color .18s ease;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.hf-hint svg{display:block}
.hf-hint.show{opacity:1;pointer-events:auto}
.hf-hint:hover{background:var(--cyan);border-color:var(--cyan);color:#04101F}
.homevid:fullscreen{object-fit:contain;background:#000}

/* ===== Pipeline film: slightly thinner orange frame ===== */
.introfilm .vframe{border-width:3px}

/* ===== Home bottom film: smaller, side-by-side, with tab links ===== */
.homefilm{text-align:left;padding:84px 0 92px}
.hf-grid{display:grid;gap:38px;align-items:center}
@media(min-width:900px){.hf-grid{grid-template-columns:1fr 1.05fr;gap:54px}}
.homefilm .hf-eye{display:inline-flex;justify-content:flex-start}
.homefilm .hf-tag{font-size:clamp(24px,2.8vw,36px);margin:10px 0 10px}
.homefilm .hf-sub{margin:0 0 4px;max-width:42ch}
.hf-prompt{color:#9FB7D6;font-size:14.5px;line-height:1.55;margin:18px 0 12px}
.hf-links{display:flex;gap:12px;flex-wrap:wrap}
.hf-link{padding:11px 20px;font-size:14px}
.homefilm .hf-frame{max-width:none;margin:0;border-radius:18px}

/* ===== Home film: light blue frame + narrower column gap ===== */
.homefilm .hf-frame{border:2px solid #7BCFFD;box-shadow:0 0 0 1px rgba(123,207,253,.25),0 40px 100px -52px rgba(0,0,0,.92),0 0 46px -12px rgba(123,207,253,.3)}
.hf-grid{gap:26px}
@media(min-width:900px){.hf-grid{gap:30px}}

/* ===== Home film: tighten the space between copy and video ===== */
@media(min-width:900px){.hf-grid{grid-template-columns:.85fr 1.05fr;gap:26px}}
.homefilm .hf-sub{max-width:38ch}

/* ===== Home film: remove the frame (no border), keep a soft shadow ===== */
.homefilm .hf-frame{border:none;box-shadow:0 40px 100px -52px rgba(0,0,0,.9)}

/* ===== Pipeline film: KIN-112 components callout ===== */
.if-note{margin:16px 0 0;padding:12px 16px;border-left:3px solid #FF7A45;background:rgba(255,122,69,.07);border-radius:0 10px 10px 0;color:#DCE7F5;font-size:15px;line-height:1.62}
.if-note b{color:#fff;font-weight:700}

/* ===================== Science: animated cold -> hot hero ===================== */
.scihero{position:relative;overflow:hidden;background:radial-gradient(120% 90% at 78% 0%,#10305C 0%,#0A2140 46%,#04101F 100%);padding:104px 0 96px}
.scihero .sh-bg{position:absolute;inset:0;pointer-events:none;background:radial-gradient(42% 60% at 82% 14%,rgba(31,168,226,.18),transparent 68%),radial-gradient(40% 55% at 80% 92%,rgba(255,122,69,.12),transparent 70%)}
.sh-grid{position:relative;z-index:1;display:grid;gap:40px;align-items:center}
@media(min-width:980px){.sh-grid{grid-template-columns:.92fr 1.08fr;gap:54px}}
.sh-eye{color:var(--sky)}
.sh-tag{font:800 clamp(34px,5vw,60px)/1.04 var(--sans),sans-serif;color:var(--txt);letter-spacing:-.02em;margin:10px 0 16px}
.sh-sub{color:#C2D4EC;font-size:17px;line-height:1.65;max-width:50ch;margin:0 0 26px}
.sh-actions{display:flex;gap:12px;flex-wrap:wrap}

.sh-viz{position:relative}
.ch-stage{position:relative;border-radius:20px;overflow:hidden;background:linear-gradient(180deg,#0B2342,#081A30);border:1px solid rgba(123,207,253,.16);box-shadow:0 40px 100px -52px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.05)}
.ch-svg{display:block;width:100%;height:auto}
/* turn the warm tumor mass blue in the cold layer (only the cells, not immune cells) */
.ch-cold .ch-mass{filter:hue-rotate(184deg) saturate(.82) brightness(1.04)}
/* crossfade loop */
.ch-cold{animation:chCold 11s ease-in-out infinite}
.ch-hot{animation:chHot 11s ease-in-out infinite}
.ch-ring{animation:chRing 11s ease-in-out infinite}
.ch-glow{animation:chGlow 11s ease-in-out infinite}
.ch-infil{animation:chInfil 11s ease-in-out infinite;transform-origin:380px 192px}
.ch-nano{animation:chInfil 11s ease-in-out infinite}
@keyframes chCold{0%,28%{opacity:1}48%,80%{opacity:0}100%{opacity:1}}
@keyframes chHot{0%,28%{opacity:0}48%,80%{opacity:1}100%{opacity:0}}
@keyframes chRing{0%,28%{opacity:.9}46%,100%{opacity:0}}
@keyframes chGlow{0%,30%{opacity:0}48%,78%{opacity:.22}100%{opacity:0}}
@keyframes chInfil{0%,30%{opacity:0;transform:scale(.6)}50%,80%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.6)}}
/* cold -> hot progress bar */
.ch-bar{position:relative;height:6px;margin:16px 6px 0;border-radius:999px;background:linear-gradient(90deg,#1FA8E2,#7BCFFD 45%,#FF7A45)}
.ch-bar-fill{position:absolute;inset:0;border-radius:999px;background:rgba(4,16,31,.55)}
.ch-bar-dot{position:absolute;top:50%;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.18);transform:translate(-50%,-50%);left:6%;animation:chDot 11s ease-in-out infinite}
.ch-bar-fill{animation:chFill 11s ease-in-out infinite}
@keyframes chDot{0%,28%{left:7%}48%,80%{left:93%}100%{left:7%}}
@keyframes chFill{0%,28%{clip-path:inset(0 93% 0 0)}48%,80%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 93% 0 0)}}
.ch-labels{display:flex;justify-content:space-between;margin:10px 6px 0;font:600 12px/1 var(--mono),monospace;letter-spacing:.06em;text-transform:uppercase}
.ch-l-cold{color:#7BCFFD;animation:chLcold 11s ease-in-out infinite}
.ch-l-hot{color:#FF7A45;animation:chLhot 11s ease-in-out infinite}
@keyframes chLcold{0%,30%{opacity:1}50%,80%{opacity:.35}100%{opacity:1}}
@keyframes chLhot{0%,30%{opacity:.35}50%,80%{opacity:1}100%{opacity:.35}}
@media(prefers-reduced-motion:reduce){
  .ch-cold,.ch-hot,.ch-ring,.ch-glow,.ch-infil,.ch-nano,.ch-bar-dot,.ch-bar-fill,.ch-l-cold,.ch-l-hot{animation:none}
  .ch-cold{opacity:0}.ch-hot{opacity:1}.ch-glow{opacity:.22}.ch-infil,.ch-nano{opacity:1;transform:none}
  .ch-bar-dot{left:93%}.ch-bar-fill{clip-path:inset(0 0 0 0)}.ch-l-hot{opacity:1}.ch-l-cold{opacity:.35}
}

/* ===================== Science: dynamic labelled bridge cascade ===================== */
.bridge-card{background:#FFFFFF;border:1px solid rgba(21,71,143,.12);border-radius:18px;padding:34px 26px;box-shadow:0 22px 60px -40px rgba(21,71,143,.35)}
.bridge-track{display:grid;grid-template-columns:repeat(6,1fr) ;align-items:start;gap:0}
.bnode{position:relative;text-align:center;padding:0 10px}
.bnode-ico{width:58px;height:58px;margin:0 auto 12px;display:grid;place-items:center;border-radius:16px;color:#15478F;background:linear-gradient(180deg,#EAF3FE,#DCEBFB);border:1px solid rgba(31,168,226,.35);box-shadow:0 10px 24px -16px rgba(21,71,143,.5);animation:bpulse 4.2s ease-in-out infinite;animation-delay:calc(var(--bi) * .5s)}
.bnode-ico svg{width:26px;height:26px}
.bnode-name{font:700 14.5px/1.2 var(--sans),sans-serif;color:#0E2C54;margin-bottom:6px}
.bnode-info{font-size:12.5px;line-height:1.5;color:#51647F}
.bnode-block .bnode-ico{color:#C2410C;background:linear-gradient(180deg,#FDE7DC,#FBD7C6);border-color:rgba(255,122,69,.5)}
.bnode-key .bnode-ico{color:#fff;background:linear-gradient(180deg,#FF8A52,#F2632A);border-color:#F2632A;box-shadow:0 12px 30px -14px rgba(242,99,42,.7)}
.bnode-key .bnode-name{color:#C2410C}
/* connectors with a travelling signal pulse */
.bconn{position:relative;align-self:start;height:58px;display:flex;align-items:center;margin:0 -6px}
.bconn::before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;background:linear-gradient(90deg,rgba(31,168,226,.25),rgba(31,168,226,.5))}
.bconn span{position:absolute;top:50%;left:0;width:8px;height:8px;border-radius:50%;background:#1FA8E2;box-shadow:0 0 0 4px rgba(31,168,226,.18);transform:translate(-50%,-50%);animation:bflow 4.2s linear infinite;animation-delay:calc(var(--bi) * .5s)}
@keyframes bpulse{0%,100%{transform:translateY(0) scale(1)}42%{transform:translateY(-3px) scale(1.07);box-shadow:0 14px 30px -14px rgba(31,168,226,.7)}}
@keyframes bflow{0%{left:0;opacity:0}12%{opacity:1}88%{opacity:1}100%{left:100%;opacity:0}}
/* evidence stat */
.bridge-stat{margin:30px 0 0;display:inline-block;max-width:640px;text-align:left;background:linear-gradient(180deg,#F4F9FF,#E9F3FE);border:1px solid rgba(31,168,226,.22);border-radius:16px;padding:26px 30px}
.bs-num{font:800 44px/1 var(--sans),sans-serif;color:#15478F;display:flex;align-items:baseline;justify-content:flex-start;gap:12px;margin-bottom:10px}
.bs-num span{font-size:18px;font-weight:600;color:#6B82A3}
.bridge-stat p{color:#41567A;font-size:14.5px;line-height:1.6;margin:0;max-width:52ch}
@media(max-width:820px){
  .bridge-track{grid-template-columns:1fr;gap:0;justify-items:center}
  .bnode{display:grid;grid-template-columns:58px 1fr;gap:14px;text-align:left;align-items:center;max-width:420px;padding:6px 0}
  .bnode-ico{margin:0}
  .bconn{height:26px;width:2px;margin:2px 0 2px 28px}
  .bconn::before{left:50%;right:auto;top:0;bottom:0;width:2px;height:100%;background:linear-gradient(180deg,rgba(31,168,226,.25),rgba(31,168,226,.5))}
  .bconn span{left:50%;top:0;animation:bflowV 4.2s linear infinite;animation-delay:calc(var(--bi) * .5s)}
}
@keyframes bflowV{0%{top:0;opacity:0}12%{opacity:1}88%{opacity:1}100%{top:100%;opacity:0}}
@media(prefers-reduced-motion:reduce){.bnode-ico,.bconn span{animation:none}.bconn span{opacity:1;left:50%}}

/* ===================== Science hero: WHITE theme + labels + drift ===================== */
.scihero{background:#fff;padding:92px 0 80px}
.scihero .sh-bg{display:none}
.scihero .sh-eye{color:#1FA8E2}
.scihero .sh-tag{color:#0E2C54}
.scihero .sh-sub{color:#46597A}
.scihero .ch-stage{background:#fff;border:1px solid rgba(21,71,143,.14);box-shadow:0 30px 70px -40px rgba(21,71,143,.35),0 10px 30px -22px rgba(0,0,0,.16)}
.chlabel{pointer-events:none}
.chlabel text{paint-order:stroke;stroke:#fff;stroke-width:3px;stroke-linejoin:round}
/* floating immune cells */
.chc{animation-name:chFloat;animation-timing-function:ease-in-out;animation-iteration-count:infinite;will-change:transform}
@keyframes chFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
/* progress bar on white */
.scihero .ch-bar-fill{background:rgba(255,255,255,.74)}
.scihero .ch-l-cold{color:#1FA8E2}
.scihero .ch-l-hot{color:#FF7A45}
@media(prefers-reduced-motion:reduce){.chc{animation:none}}

/* ===================== Science hero: video figure + static cold/hot bar ===================== */
.scihero .ch-stage{padding:0}
.sci-vid{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:#fff;border-radius:inherit}
.scihero .ch-bar{height:6px;border-radius:999px;background:linear-gradient(90deg,#1FA8E2,#7BCFFD 45%,#FF7A45)}
.scihero .ch-bar-fill,.scihero .ch-bar-dot{display:none}
.scihero .ch-l-cold,.scihero .ch-l-hot{animation:none;opacity:1}

/* ===================== Science hero: video figure + with/without captions ===================== */
.scihero .ch-stage{padding:0}
.scivid{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:#fff;border-radius:inherit}
/* under-video: static cold->hot gradient bar (no moving dot) + static captions */
.has-video .ch-bar{position:relative;height:6px;margin:16px 6px 0;border-radius:999px;background:linear-gradient(90deg,#1FA8E2,#7BCFFD 45%,#FF7A45)}
.has-video .ch-bar::before,.has-video .ch-bar::after{content:none}
.has-video .ch-labels{display:flex;justify-content:space-between;margin:10px 6px 0;font:600 12px/1 var(--mono),monospace;letter-spacing:.06em;text-transform:uppercase}
.has-video .ch-l-cold{color:#1FA8E2;opacity:1;animation:none}
.has-video .ch-l-hot{color:#FF7A45;opacity:1;animation:none}

/* ===================== Phenotypes: photoreal cold->hot cards ===================== */
.pheno-grid{display:grid;gap:28px;max-width:1000px;margin:0 auto}
@media(min-width:780px){.pheno-grid{grid-template-columns:1fr 1fr;align-items:start}}
.pheno-card{margin:0}
.pheno-card img{display:block;width:100%;height:auto;border-radius:20px;box-shadow:0 36px 80px -46px rgba(0,0,0,.75)}

/* phenotype cards: smaller */
.pheno-grid{max-width:760px}

/* phenotype interactive slider + frames */
.pheno-card{position:relative;--op:1;--frame:.5}
.pheno-card img{opacity:var(--op,1);transition:opacity .18s ease}
.pheno-frame{position:absolute;inset:0;border-radius:20px;pointer-events:none;z-index:2;
  border:3px solid transparent;transition:border-color .18s ease, box-shadow .18s ease}
.pheno-cold .pheno-frame{
  border-color:rgba(31,143,208,calc(.15 + .85*var(--frame)));
  box-shadow:0 0 0 1px rgba(31,143,208,calc(.10*var(--frame))), 0 18px 50px -30px rgba(31,143,208,calc(.9*var(--frame)))}
.pheno-hot .pheno-frame{
  border-color:rgba(255,122,69,calc(.15 + .85*var(--frame)));
  box-shadow:0 0 0 1px rgba(255,122,69,calc(.10*var(--frame))), 0 18px 50px -30px rgba(255,122,69,calc(.9*var(--frame)))}
.pheno-slider{display:flex;align-items:center;gap:16px;max-width:760px;margin:30px auto 0}
.pheno-end{font-family:var(--mono);font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.pheno-range{flex:1;-webkit-appearance:none;appearance:none;height:6px;border-radius:999px;outline:none;
  background:linear-gradient(90deg,#1FA8E2 0%,#7BCFFD 38%,#FFB48C 62%,#FF7A45 100%);cursor:pointer}
.pheno-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;
  background:#EAF2FB;border:3px solid #15478F;box-shadow:0 4px 14px -4px rgba(0,0,0,.6);cursor:grab;transition:transform .12s}
.pheno-range::-webkit-slider-thumb:active{cursor:grabbing;transform:scale(1.08)}
.pheno-range::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#EAF2FB;border:3px solid #15478F;
  box-shadow:0 4px 14px -4px rgba(0,0,0,.6);cursor:grab}

/* phenotype state captions: fade in beside the card toward each end */
.pheno-card{overflow:visible}
.pheno-note{--note:0;position:absolute;top:50%;width:240px;
  opacity:var(--note);transform:translateY(-50%) translateX(calc((1 - var(--note)) * 14px));
  transition:opacity .22s ease, transform .22s ease;pointer-events:none;z-index:3}
.pheno-note-hot{left:calc(100% + 24px);text-align:left;
  transform:translateY(-50%) translateX(calc((1 - var(--note)) * 14px))}
.pheno-note-cold{right:calc(100% + 24px);text-align:right;
  transform:translateY(-50%) translateX(calc((1 - var(--note)) * -14px))}
.pheno-note h4{font-family:var(--mono);font-size:14px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;margin:0 0 12px}
.pheno-note-cold h4{color:var(--cyan)}
.pheno-note-hot h4{color:var(--hot)}
.pheno-note p{font-size:17px;line-height:1.6;color:var(--txt);margin:0 0 12px;font-weight:400}
.pheno-note p strong{font-weight:700}
.pheno-note-cold p strong{color:var(--sky)}
.pheno-note-hot p strong{color:#FFB48C}
.pheno-logo{display:block;width:160px;max-width:82%;height:auto;margin:20px 0 0;
  box-sizing:content-box;padding:11px 16px;border-radius:14px;background:#EAF2FB;
  box-shadow:0 14px 34px -20px rgba(0,0,0,.7)}
@media(max-width:1500px){
  .pheno-note{position:static;width:auto;max-width:440px;margin:16px auto 0;
    transform:none !important;text-align:center !important;
    max-height:calc(var(--note) * 380px);overflow:hidden}
  .pheno-note-cold,.pheno-note-hot{left:auto;right:auto}
  .pheno-logo{margin-left:auto;margin-right:auto}
}

/* larger eyebrows across the Science (technology) page: single uses the view id, multi uses the page body class */
#view-technology .eyebrow, body.page-technology .eyebrow{font-size:15px;letter-spacing:.24em}

/* hover/click flip card (image default, text on hover) */
.card-hoverflip{--mix:1;padding:0;min-height:300px;cursor:pointer}
.card-hoverflip .card-front{padding:32px;display:flex;flex-direction:column;height:100%;
  opacity:calc(1 - var(--mix));transition:opacity .45s ease}
.card-hoverflip .card-back{position:absolute;inset:0;opacity:var(--mix);
  transition:opacity .45s ease;pointer-events:none}
.card-hoverflip .card-back img{width:100%;height:100%;object-fit:cover;display:block;border-radius:20px}
.card-hoverflip .card-readmore{position:absolute;top:14px;left:50%;transform:translateX(-50%);
  font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--hot);
  background:rgba(4,16,31,.66);padding:5px 12px;border-radius:999px;white-space:nowrap;
  backdrop-filter:blur(4px);opacity:var(--mix);transition:opacity .45s ease}
.card-hoverflip:hover{border-color:var(--cyan)}
.card-hoverflip:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}

/* Science intro: let heading + body fill the full grid width */
.sci-intro .sec-head{max-width:none}
.sci-intro .sec-head h2{max-width:18ch}
.sci-intro .sec-head p{max-width:none;column-count:2;column-gap:48px;margin-top:22px}
@media(max-width:760px){
  .sci-intro .sec-head p{column-count:1}
}

/* slider drag instruction */
.pheno-hint{max-width:760px;margin:14px auto 0;text-align:center;
  font-family:var(--mono);font-size:13px;letter-spacing:.02em;color:var(--muted);
  display:flex;align-items:center;justify-content:center;gap:10px;
  animation:phenoHintPulse 2.4s ease-in-out infinite;transition:opacity .4s ease}
.pheno-hint .ph-arrow{color:var(--cyan);font-weight:700;font-size:15px}
.pheno-hint .ph-arrow:last-child{color:var(--hot)}
@keyframes phenoHintPulse{0%,100%{opacity:.55}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){.pheno-hint{animation:none;opacity:.8}}

/* Inside the tumor: bright band with hero illustration */
.tme-band{background:#FFFFFF}
.tme-split{display:grid;grid-template-columns:0.85fr 1.45fr;gap:40px;align-items:center}
.tme-copy .eyebrow{color:#1577B0}
.tme-copy h2{font-size:clamp(30px,4.4vw,52px);margin:14px 0 0;color:#0E2C54;max-width:14ch}
.tme-copy p{margin-top:20px;font-size:18px;line-height:1.6;color:#42597A;max-width:46ch}
.tme-figure{width:100%;margin-right:-4%}
.tme-figure img{width:100%;height:auto;display:block;
  -webkit-mask-image:linear-gradient(to right, transparent 0%, #000 10%, #000 80%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 12%, #000 86%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right, transparent 0%, #000 10%, #000 80%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 12%, #000 86%, transparent 100%);
  mask-composite:intersect}
@media(max-width:860px){
  .tme-split{grid-template-columns:1fr;gap:18px}
  .tme-copy h2,.tme-copy p{max-width:none}
  .tme-figure{margin-right:0}
}

/* nav links: no focus box on click; keyboard-only focus ring for a11y */
.nav-links a:focus{outline:none}
.nav-links a:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:6px}

/* How it bridges: keep heading + body flush-left and balanced */
#science .sec-head{max-width:760px}
#science .sec-head h2{max-width:20ch}
#science .sec-head p{max-width:62ch}

/* How it bridges: navy band matching the infographic, image dissolved beside text */
.bridge-band{background:#020C24}
.bridge-split{display:grid;grid-template-columns:0.62fr 1.6fr;gap:30px;align-items:center}
.bridge-figure{width:100%;margin-right:-8%}
.bridge-figure img{width:100%;height:auto;display:block;
  -webkit-mask-image:linear-gradient(to right, transparent 0%, #000 5%, #000 95%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 4%, #000 96%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right, transparent 0%, #000 5%, #000 95%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 4%, #000 96%, transparent 100%);
  mask-composite:intersect}
@media(max-width:900px){
  .bridge-split{grid-template-columns:1fr;gap:22px}
  .bridge-figure{margin-right:0}
}

/* ===== Pre-hero intro band (.kin-prehero) — cinematic kinetic intro above the main hero ===== */
.kin-prehero{position:relative;min-height:92vh;display:flex;align-items:center;justify-content:center;
  overflow:hidden;background:radial-gradient(130% 130% at 50% 0%,#082037 0%,#051528 48%,#020912 100%);
  isolation:isolate}
.kin-prehero .kp-in{position:relative;z-index:4;max-width:var(--maxw);margin:0 auto;padding:0 32px;width:100%;text-align:center}

/* slow rotating conic light sweep behind everything */
.kp-sweep{position:absolute;left:50%;top:42%;width:160vmax;height:160vmax;z-index:0;pointer-events:none;
  transform:translate(-50%,-50%);opacity:.5;mix-blend-mode:screen;
  background:conic-gradient(from 0deg,transparent 0deg,rgba(31,168,226,.16) 26deg,transparent 60deg,
    transparent 180deg,rgba(255,122,69,.12) 210deg,transparent 250deg,transparent 360deg);
  -webkit-mask-image:radial-gradient(closest-side,#000 30%,transparent 72%);
  mask-image:radial-gradient(closest-side,#000 30%,transparent 72%);
  animation:kpSpin 32s linear infinite}
@keyframes kpSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}

/* breathing aura blooms */
.kp-aura{position:absolute;inset:-20% -10%;z-index:0;pointer-events:none;
  background:
    radial-gradient(40% 44% at 26% 36%,rgba(31,168,226,.34),transparent 62%),
    radial-gradient(34% 38% at 76% 28%,rgba(255,122,69,.22),transparent 60%),
    radial-gradient(48% 52% at 60% 82%,rgba(21,71,143,.40),transparent 64%);
  filter:blur(10px);animation:kpAura 18s ease-in-out infinite}
@keyframes kpAura{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  33%{transform:translate3d(-3%,2%,0) scale(1.07)}
  66%{transform:translate3d(3%,-2%,0) scale(1.04)}}

/* SVG cell-network: pulsing nodes, breathing links, signals travel via SMIL */
.kp-net{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;
  opacity:0;animation:kpNetIn 1.4s .2s forwards}
@keyframes kpNetIn{to{opacity:.9}}
.kp-link{stroke-dasharray:6 10;animation:kpDash 3.2s linear infinite}
.kp-link.l2,.kp-link.l7{stroke:#7BCFFD}
.kp-link.l4,.kp-link.l9{animation-duration:4.4s}
@keyframes kpDash{to{stroke-dashoffset:-32}}
.kp-n{transform-box:fill-box;transform-origin:center;animation:kpNode 4s ease-in-out infinite}
.kp-n.n2{animation-delay:.6s}.kp-n.n3{animation-delay:1.2s}.kp-n.n4{animation-delay:.3s}
.kp-n.n5{animation-delay:1.6s}.kp-n.n6{animation-delay:.9s}.kp-n.n7{animation-delay:2.1s}.kp-n.n8{animation-delay:.45s}
@keyframes kpNode{0%,100%{opacity:.55;transform:scale(.85)}50%{opacity:1;transform:scale(1.15)}}
.kp-sig{filter:drop-shadow(0 0 5px rgba(190,232,255,.95))}

/* depth orbs + darting immune-cell dots */
.kp-field{position:absolute;inset:0;z-index:2;pointer-events:none}
.kp-orb{position:absolute;border-radius:50%;filter:blur(2px);opacity:.5;
  background:radial-gradient(circle at 38% 34%,rgba(123,207,253,.6),rgba(31,168,226,.05) 70%);
  animation:kpFloat 13s ease-in-out infinite}
.kp-orb.o1{width:150px;height:150px;left:6%;top:46%;animation-delay:0s}
.kp-orb.o2{width:96px;height:96px;left:80%;top:18%;animation-delay:2.5s;
  background:radial-gradient(circle at 38% 34%,rgba(255,122,69,.5),rgba(255,122,69,.04) 70%)}
.kp-orb.o3{width:190px;height:190px;left:64%;top:62%;animation-delay:1.4s;filter:blur(4px);opacity:.4}
@keyframes kpFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-30px)}}
.kp-dot{position:absolute;width:7px;height:7px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#BfE8FF,var(--cyan));
  box-shadow:0 0 12px rgba(31,168,226,.9);opacity:0;animation:kpDrift 9s ease-in-out infinite}
.kp-dot.d1{left:12%;top:30%;animation-delay:.0s}
.kp-dot.d2{left:22%;top:68%;animation-delay:1.1s;width:5px;height:5px}
.kp-dot.d3{left:34%;top:22%;animation-delay:2.0s}
.kp-dot.d4{left:46%;top:80%;animation-delay:.6s;width:6px;height:6px}
.kp-dot.d5{left:63%;top:26%;animation-delay:1.6s}
.kp-dot.d6{left:72%;top:70%;animation-delay:2.6s;width:5px;height:5px}
.kp-dot.d7{left:84%;top:38%;animation-delay:.9s}
.kp-dot.d8{left:90%;top:62%;animation-delay:2.2s;width:6px;height:6px}
.kp-dot.d9{left:55%;top:54%;animation-delay:1.3s;width:6px;height:6px;
  background:radial-gradient(circle at 35% 35%,#FFD3B8,var(--hot));box-shadow:0 0 12px rgba(255,122,69,.9)}
@keyframes kpDrift{
  0%{opacity:0;transform:translate(0,0) scale(.6)}
  15%{opacity:1}
  50%{transform:translate(20px,-24px) scale(1)}
  85%{opacity:.7}
  100%{opacity:0;transform:translate(38px,-44px) scale(.7)}}

/* edge vignette for cinematic focus */
.kp-vignette{position:absolute;inset:0;z-index:3;pointer-events:none;
  background:radial-gradient(80% 80% at 50% 46%,transparent 52%,rgba(2,9,18,.55) 100%)}

/* eyebrow with a live EKG-style pulse dot */
.kp-eyebrow{font-family:var(--mono);font-size:13px;letter-spacing:.28em;text-transform:uppercase;color:var(--sky);
  display:inline-flex;align-items:center;gap:11px;opacity:0;animation:kpRise .7s .15s forwards}
.kp-pulse{width:9px;height:9px;border-radius:50%;background:var(--hot);box-shadow:0 0 0 0 rgba(255,122,69,.7);
  animation:kpBeat 1.8s ease-out infinite}
@keyframes kpBeat{0%{box-shadow:0 0 0 0 rgba(255,122,69,.7)}70%{box-shadow:0 0 0 12px rgba(255,122,69,0)}100%{box-shadow:0 0 0 0 rgba(255,122,69,0)}}

/* kinetic headline */
.kp-head{font-family:var(--sans);font-weight:800;line-height:1.06;letter-spacing:-.01em;
  font-size:clamp(36px,6.8vw,86px);max-width:20ch;margin:24px auto 0;color:var(--txt)}
.kp-head .kp-line{display:block}
.kp-head .kp-w{display:inline-block;opacity:0;transform:translateY(30px);
  animation:kpRise .85s forwards;margin-right:.24em}
.kp-head .w1{animation-delay:.30s}
.kp-head .w2{animation-delay:.40s}
.kp-head .w3{animation-delay:1.05s}
.kp-head .w4{animation-delay:1.20s}
.kp-head .w5{animation-delay:1.32s}
.kp-head .w6{animation-delay:1.44s}
@keyframes kpRise{to{opacity:1;transform:translateY(0)}}

/* per-letter cascade for "innate immunity" with gradient + shimmer */
.kp-ch{display:inline-block;opacity:0;transform:translateY(.5em) rotate(4deg);
  animation:kpDrop .6s forwards}
.kp-sp{display:inline-block;width:.28em}
@keyframes kpDrop{to{opacity:1;transform:translateY(0) rotate(0)}}
.kp-grad-ch{background:linear-gradient(100deg,var(--sky),var(--cyan) 45%,#6FE3FF 70%,var(--sky));
  background-size:240% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:kpDrop .6s forwards, kpShimmer 6s 1.4s ease-in-out infinite}
@keyframes kpShimmer{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

/* "in motion": hot text with neon glow + animated sweep underline */
.kp-motion{position:relative;color:var(--hot);white-space:nowrap;
  text-shadow:0 0 18px rgba(255,122,69,.0);animation:kpGlow 3.2s 1.5s ease-in-out infinite}
@keyframes kpGlow{0%,100%{text-shadow:0 0 16px rgba(255,122,69,.25)}50%{text-shadow:0 0 30px rgba(255,122,69,.6)}}
.kp-motion::after{content:"";position:absolute;left:0;right:0;bottom:-.12em;height:.11em;border-radius:4px;
  background:linear-gradient(90deg,var(--cyan),var(--hot));transform-origin:left center;transform:scaleX(0);
  animation:kpSweep 1s 1.5s forwards, kpUnderPulse 3.4s 2.6s ease-in-out infinite}
@keyframes kpSweep{to{transform:scaleX(1)}}
@keyframes kpUnderPulse{0%,100%{opacity:1}50%{opacity:.4}}

/* scroll cue into the main hero */
.kp-cue{position:absolute;left:50%;bottom:30px;transform:translateX(-50%);z-index:4;
  width:1px;height:56px;opacity:0;animation:kpRise .8s 1.9s forwards}
.kp-cue-line{position:absolute;inset:0;background:linear-gradient(180deg,transparent,var(--sky));overflow:hidden}
.kp-cue-line::after{content:"";position:absolute;left:0;top:-60%;width:100%;height:60%;
  background:linear-gradient(180deg,transparent,#BfE8FF);animation:kpCue 1.8s ease-in-out infinite}
@keyframes kpCue{0%{top:-60%}60%,100%{top:120%}}

@media(max-width:760px){
  .kin-prehero{min-height:82vh}
  .kp-head{font-size:clamp(31px,9.2vw,48px);max-width:16ch}
  .kp-in{padding:0 22px}
  .kp-net{opacity:.7}
}
@media(prefers-reduced-motion:reduce){
  .kp-sweep,.kp-aura,.kp-net,.kp-link,.kp-n,.kp-orb,.kp-dot,.kp-pulse,
  .kp-grad-ch,.kp-motion,.kp-motion::after,.kp-cue-line::after,.kp-sig{animation:none}
  .kp-head .kp-w,.kp-head .kp-ch,.kp-eyebrow,.kp-cue{opacity:1;transform:none;animation:none}
  .kp-motion::after{transform:scaleX(1)}
  .kp-net{opacity:.85}
}


/* ===== Hero background (.hero-bg) — replaces the old #hero-canvas, prehero visual family ===== */
.hero{background:radial-gradient(130% 120% at 62% 42%,#0A2440 0%,#061a30 46%,#03101f 100%)}
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}

/* rotating conic light sweep */
.hero-bg .hb-sweep{position:absolute;left:62%;top:44%;width:170vmax;height:170vmax;
  transform:translate(-50%,-50%);opacity:.5;mix-blend-mode:screen;
  background:conic-gradient(from 0deg,transparent 0deg,rgba(31,168,226,.16) 26deg,transparent 60deg,
    transparent 180deg,rgba(255,122,69,.13) 210deg,transparent 250deg,transparent 360deg);
  -webkit-mask-image:radial-gradient(closest-side,#000 28%,transparent 72%);
  mask-image:radial-gradient(closest-side,#000 28%,transparent 72%);
  animation:kpSpin 34s linear infinite}

/* breathing aura blooms, weighted toward the right where the cluster used to be */
.hero-bg .hb-aura{position:absolute;inset:-18% -8%;
  background:
    radial-gradient(40% 44% at 62% 44%,rgba(255,122,69,.20),transparent 60%),
    radial-gradient(38% 42% at 40% 36%,rgba(31,168,226,.28),transparent 62%),
    radial-gradient(48% 52% at 70% 78%,rgba(21,71,143,.34),transparent 64%);
  filter:blur(10px);animation:kpAura 19s ease-in-out infinite}

/* SVG cell-network */
.hero-bg .hb-net{position:absolute;inset:0;width:100%;height:100%;opacity:0;animation:kpNetIn 1.6s .3s forwards}
.hero-bg .hb-net .hb-links{opacity:.46 !important}
.hero-bg .hb-net .kp-link{stroke-dasharray:6 10;animation:kpDash 3.2s linear infinite}
.hero-bg .hb-net .kp-link.l4,.hero-bg .hb-net .kp-link.l9{animation-duration:4.4s}
.hero-bg .hb-net .kp-sig{filter:drop-shadow(0 0 7px rgba(190,232,255,1))}
.hero-bg .hb-net .kp-n{transform-box:fill-box;transform-origin:center;animation:kpNode 4s ease-in-out infinite}
.hero-bg .hb-net .kp-n.n2{animation-delay:.6s}.hero-bg .hb-net .kp-n.n3{animation-delay:1.2s}
.hero-bg .hb-net .kp-n.n4{animation-delay:.3s}.hero-bg .hb-net .kp-n.n5{animation-delay:1.6s}
.hero-bg .hb-net .kp-n.n6{animation-delay:.9s}.hero-bg .hb-net .kp-n.n7{animation-delay:2.1s}
.hero-bg .hb-net .kp-n.n8{animation-delay:.45s}

/* depth orbs */
.hero-bg .hb-field{position:absolute;inset:0}
.hero-bg .hb-orb{position:absolute;border-radius:50%;filter:blur(2px);opacity:.5;
  background:radial-gradient(circle at 38% 34%,rgba(123,207,253,.6),rgba(31,168,226,.05) 70%);
  animation:kpFloat 14s ease-in-out infinite}
.hero-bg .hb-orb.o1{width:160px;height:160px;left:18%;top:40%;animation-delay:0s}
.hero-bg .hb-orb.o2{width:110px;height:110px;left:74%;top:24%;animation-delay:2.4s;
  background:radial-gradient(circle at 38% 34%,rgba(255,122,69,.5),rgba(255,122,69,.04) 70%)}
.hero-bg .hb-orb.o3{width:210px;height:210px;left:60%;top:58%;animation-delay:1.4s;filter:blur(4px);opacity:.4}
.hero-bg .hb-orb.o4{width:90px;height:90px;left:46%;top:70%;animation-delay:3.1s;
  background:radial-gradient(circle at 38% 34%,rgba(255,122,69,.42),rgba(255,122,69,.04) 70%)}

/* drifting immune-cell dots */
.hero-bg .hb-dot{position:absolute;width:7px;height:7px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#BfE8FF,var(--cyan));
  box-shadow:0 0 12px rgba(31,168,226,.9);opacity:0;animation:kpDrift 9s ease-in-out infinite}
.hero-bg .hb-dot.d1{left:14%;top:32%;animation-delay:.0s}
.hero-bg .hb-dot.d2{left:24%;top:66%;animation-delay:1.1s;width:5px;height:5px}
.hero-bg .hb-dot.d3{left:36%;top:24%;animation-delay:2.0s}
.hero-bg .hb-dot.d4{left:48%;top:78%;animation-delay:.6s;width:6px;height:6px}
.hero-bg .hb-dot.d5{left:63%;top:28%;animation-delay:1.6s}
.hero-bg .hb-dot.d6{left:72%;top:68%;animation-delay:2.6s;width:5px;height:5px}
.hero-bg .hb-dot.d7{left:84%;top:38%;animation-delay:.9s}
.hero-bg .hb-dot.d8{left:90%;top:60%;animation-delay:2.2s;width:6px;height:6px}
.hero-bg .hb-dot.d9{left:55%;top:52%;animation-delay:1.3s;width:6px;height:6px;
  background:radial-gradient(circle at 35% 35%,#FFD3B8,var(--hot));box-shadow:0 0 12px rgba(255,122,69,.9)}
.hero-bg .hb-dot.d10{left:67%;top:44%;animation-delay:3.0s}
.hero-bg .hb-dot.d11{left:40%;top:50%;animation-delay:1.9s;width:5px;height:5px}
.hero-bg .hb-dot.d12{left:79%;top:50%;animation-delay:.4s;width:6px;height:6px;
  background:radial-gradient(circle at 35% 35%,#FFD3B8,var(--hot));box-shadow:0 0 12px rgba(255,122,69,.9)}

@media(max-width:760px){ .hero-bg .hb-net{opacity:.7} }
@media(prefers-reduced-motion:reduce){
  .hero-bg .hb-sweep,.hero-bg .hb-aura,.hero-bg .hb-net,.hero-bg .kp-link,.hero-bg .kp-n,
  .hero-bg .hb-orb,.hero-bg .hb-dot,.hero-bg .kp-sig{animation:none}
  .hero-bg .hb-net{opacity:.85}
}

/* === Prehero-punch additions for the main hero === */
/* live EKG pulse dot in the hero eyebrow */
.hero .hero-in .eyebrow{display:inline-flex;align-items:center;gap:11px}
.hero .hero-in .eyebrow .hb-pulse{width:9px;height:9px;border-radius:50%;background:var(--hot);
  box-shadow:0 0 0 0 rgba(255,122,69,.7);animation:kpBeat 1.8s ease-out infinite}

/* glow pulse + sweep underline on the word "hot" */
.hero h1 .c-hot{position:relative;text-shadow:0 0 16px rgba(255,122,69,.25);
  animation:kpGlow 3.2s 1.1s ease-in-out infinite}
.hero h1 .c-hot::after{content:"";position:absolute;left:0;right:0;bottom:-.08em;height:.09em;border-radius:4px;
  background:linear-gradient(90deg,var(--cyan),var(--hot));transform-origin:left center;transform:scaleX(0);
  animation:kpSweep 1s 1.0s forwards, kpUnderPulse 3.4s 2.1s ease-in-out infinite}

@media(prefers-reduced-motion:reduce){
  .hero .hero-in .eyebrow .hb-pulse,.hero h1 .c-hot,.hero h1 .c-hot::after{animation:none}
  .hero h1 .c-hot::after{transform:scaleX(1)}
}


/* ===== Pre-hero intro band (.kin-prehero) — cinematic kinetic intro above the main hero ===== */
.kin-prehero{position:relative;min-height:92vh;display:flex;align-items:center;justify-content:center;
  overflow:hidden;background:radial-gradient(130% 130% at 50% 0%,#082037 0%,#051528 48%,#020912 100%);
  isolation:isolate}
.kin-prehero .kp-in{position:relative;z-index:4;max-width:var(--maxw);margin:0 auto;padding:0 32px;width:100%;text-align:center}

/* slow rotating conic light sweep behind everything */
.kp-sweep{position:absolute;left:50%;top:42%;width:160vmax;height:160vmax;z-index:0;pointer-events:none;
  transform:translate(-50%,-50%);opacity:.5;mix-blend-mode:screen;
  background:conic-gradient(from 0deg,transparent 0deg,rgba(31,168,226,.16) 26deg,transparent 60deg,
    transparent 180deg,rgba(255,122,69,.12) 210deg,transparent 250deg,transparent 360deg);
  -webkit-mask-image:radial-gradient(closest-side,#000 30%,transparent 72%);
  mask-image:radial-gradient(closest-side,#000 30%,transparent 72%);
  animation:kpSpin 32s linear infinite}
@keyframes kpSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}

/* breathing aura blooms */
.kp-aura{position:absolute;inset:-20% -10%;z-index:0;pointer-events:none;
  background:
    radial-gradient(40% 44% at 26% 36%,rgba(31,168,226,.34),transparent 62%),
    radial-gradient(34% 38% at 76% 28%,rgba(255,122,69,.22),transparent 60%),
    radial-gradient(48% 52% at 60% 82%,rgba(21,71,143,.40),transparent 64%);
  filter:blur(10px);animation:kpAura 18s ease-in-out infinite}
@keyframes kpAura{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  33%{transform:translate3d(-3%,2%,0) scale(1.07)}
  66%{transform:translate3d(3%,-2%,0) scale(1.04)}}

/* SVG cell-network: pulsing nodes, breathing links, signals travel via SMIL */
.kp-net{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;
  opacity:0;animation:kpNetIn 1.4s .2s forwards}
@keyframes kpNetIn{to{opacity:.9}}
.kp-link{stroke-dasharray:6 10;animation:kpDash 3.2s linear infinite}
.kp-link.l2,.kp-link.l7{stroke:#7BCFFD}
.kp-link.l4,.kp-link.l9{animation-duration:4.4s}
@keyframes kpDash{to{stroke-dashoffset:-32}}
.kp-n{transform-box:fill-box;transform-origin:center;animation:kpNode 4s ease-in-out infinite}
.kp-n.n2{animation-delay:.6s}.kp-n.n3{animation-delay:1.2s}.kp-n.n4{animation-delay:.3s}
.kp-n.n5{animation-delay:1.6s}.kp-n.n6{animation-delay:.9s}.kp-n.n7{animation-delay:2.1s}.kp-n.n8{animation-delay:.45s}
@keyframes kpNode{0%,100%{opacity:.55;transform:scale(.85)}50%{opacity:1;transform:scale(1.15)}}
.kp-sig{filter:drop-shadow(0 0 5px rgba(190,232,255,.95))}

/* depth orbs + darting immune-cell dots */
.kp-field{position:absolute;inset:0;z-index:2;pointer-events:none}
.kp-orb{position:absolute;border-radius:50%;filter:blur(2px);opacity:.5;
  background:radial-gradient(circle at 38% 34%,rgba(123,207,253,.6),rgba(31,168,226,.05) 70%);
  animation:kpFloat 13s ease-in-out infinite}
.kp-orb.o1{width:150px;height:150px;left:6%;top:46%;animation-delay:0s}
.kp-orb.o2{width:96px;height:96px;left:80%;top:18%;animation-delay:2.5s;
  background:radial-gradient(circle at 38% 34%,rgba(255,122,69,.5),rgba(255,122,69,.04) 70%)}
.kp-orb.o3{width:190px;height:190px;left:64%;top:62%;animation-delay:1.4s;filter:blur(4px);opacity:.4}
@keyframes kpFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-30px)}}
.kp-dot{position:absolute;width:7px;height:7px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#BfE8FF,var(--cyan));
  box-shadow:0 0 12px rgba(31,168,226,.9);opacity:0;animation:kpDrift 9s ease-in-out infinite}
.kp-dot.d1{left:12%;top:30%;animation-delay:.0s}
.kp-dot.d2{left:22%;top:68%;animation-delay:1.1s;width:5px;height:5px}
.kp-dot.d3{left:34%;top:22%;animation-delay:2.0s}
.kp-dot.d4{left:46%;top:80%;animation-delay:.6s;width:6px;height:6px}
.kp-dot.d5{left:63%;top:26%;animation-delay:1.6s}
.kp-dot.d6{left:72%;top:70%;animation-delay:2.6s;width:5px;height:5px}
.kp-dot.d7{left:84%;top:38%;animation-delay:.9s}
.kp-dot.d8{left:90%;top:62%;animation-delay:2.2s;width:6px;height:6px}
.kp-dot.d9{left:55%;top:54%;animation-delay:1.3s;width:6px;height:6px;
  background:radial-gradient(circle at 35% 35%,#FFD3B8,var(--hot));box-shadow:0 0 12px rgba(255,122,69,.9)}
@keyframes kpDrift{
  0%{opacity:0;transform:translate(0,0) scale(.6)}
  15%{opacity:1}
  50%{transform:translate(20px,-24px) scale(1)}
  85%{opacity:.7}
  100%{opacity:0;transform:translate(38px,-44px) scale(.7)}}

/* edge vignette for cinematic focus */
.kp-vignette{position:absolute;inset:0;z-index:3;pointer-events:none;
  background:radial-gradient(80% 80% at 50% 46%,transparent 52%,rgba(2,9,18,.55) 100%)}

/* eyebrow with a live EKG-style pulse dot */
.kp-eyebrow{font-family:var(--mono);font-size:13px;letter-spacing:.28em;text-transform:uppercase;color:var(--sky);
  display:inline-flex;align-items:center;gap:11px;opacity:0;animation:kpRise .7s .15s forwards}
.kp-pulse{width:9px;height:9px;border-radius:50%;background:var(--hot);box-shadow:0 0 0 0 rgba(255,122,69,.7);
  animation:kpBeat 1.8s ease-out infinite}
@keyframes kpBeat{0%{box-shadow:0 0 0 0 rgba(255,122,69,.7)}70%{box-shadow:0 0 0 12px rgba(255,122,69,0)}100%{box-shadow:0 0 0 0 rgba(255,122,69,0)}}

/* kinetic headline */
.kp-head{font-family:var(--sans);font-weight:800;line-height:1.06;letter-spacing:-.01em;
  font-size:clamp(36px,6.8vw,86px);max-width:20ch;margin:24px auto 0;color:var(--txt)}
.kp-head .kp-line{display:block}
.kp-head .kp-w{display:inline-block;opacity:0;transform:translateY(30px);
  animation:kpRise .85s forwards;margin-right:.24em}
.kp-head .w1{animation-delay:.30s}
.kp-head .w2{animation-delay:.40s}
.kp-head .w3{animation-delay:1.05s}
.kp-head .w4{animation-delay:1.20s}
.kp-head .w5{animation-delay:1.32s}
.kp-head .w6{animation-delay:1.44s}
@keyframes kpRise{to{opacity:1;transform:translateY(0)}}

/* per-letter cascade for "innate immunity" with gradient + shimmer */
.kp-ch{display:inline-block;opacity:0;transform:translateY(.5em) rotate(4deg);
  animation:kpDrop .6s forwards}
.kp-sp{display:inline-block;width:.28em}
@keyframes kpDrop{to{opacity:1;transform:translateY(0) rotate(0)}}
.kp-grad-ch{background:linear-gradient(100deg,var(--sky),var(--cyan) 45%,#6FE3FF 70%,var(--sky));
  background-size:240% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:kpDrop .6s forwards, kpShimmer 6s 1.4s ease-in-out infinite}
@keyframes kpShimmer{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

/* "in motion": hot text with neon glow + animated sweep underline */
.kp-motion{position:relative;color:var(--hot);white-space:nowrap;
  text-shadow:0 0 18px rgba(255,122,69,.0);animation:kpGlow 3.2s 1.5s ease-in-out infinite}
@keyframes kpGlow{0%,100%{text-shadow:0 0 16px rgba(255,122,69,.25)}50%{text-shadow:0 0 30px rgba(255,122,69,.6)}}
.kp-motion::after{content:"";position:absolute;left:0;right:0;bottom:-.12em;height:.11em;border-radius:4px;
  background:linear-gradient(90deg,var(--cyan),var(--hot));transform-origin:left center;transform:scaleX(0);
  animation:kpSweep 1s 1.5s forwards, kpUnderPulse 3.4s 2.6s ease-in-out infinite}
@keyframes kpSweep{to{transform:scaleX(1)}}
@keyframes kpUnderPulse{0%,100%{opacity:1}50%{opacity:.4}}

/* scroll cue into the main hero */
.kp-cue{position:absolute;left:50%;bottom:30px;transform:translateX(-50%);z-index:4;
  width:1px;height:56px;opacity:0;animation:kpRise .8s 1.9s forwards}
.kp-cue-line{position:absolute;inset:0;background:linear-gradient(180deg,transparent,var(--sky));overflow:hidden}
.kp-cue-line::after{content:"";position:absolute;left:0;top:-60%;width:100%;height:60%;
  background:linear-gradient(180deg,transparent,#BfE8FF);animation:kpCue 1.8s ease-in-out infinite}
@keyframes kpCue{0%{top:-60%}60%,100%{top:120%}}

@media(max-width:760px){
  .kin-prehero{min-height:82vh}
  .kp-head{font-size:clamp(31px,9.2vw,48px);max-width:16ch}
  .kp-in{padding:0 22px}
  .kp-net{opacity:.7}
}
@media(prefers-reduced-motion:reduce){
  .kp-sweep,.kp-aura,.kp-net,.kp-link,.kp-n,.kp-orb,.kp-dot,.kp-pulse,
  .kp-grad-ch,.kp-motion,.kp-motion::after,.kp-cue-line::after,.kp-sig{animation:none}
  .kp-head .kp-w,.kp-head .kp-ch,.kp-eyebrow,.kp-cue{opacity:1;transform:none;animation:none}
  .kp-motion::after{transform:scaleX(1)}
  .kp-net{opacity:.85}
}


/* ===== Hero background (.hero-bg) — replaces the old #hero-canvas, prehero visual family ===== */
.hero{background:radial-gradient(130% 120% at 62% 42%,#0A2440 0%,#061a30 46%,#03101f 100%)}
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}

/* rotating conic light sweep */
.hero-bg .hb-sweep{position:absolute;left:62%;top:44%;width:170vmax;height:170vmax;
  transform:translate(-50%,-50%);opacity:.5;mix-blend-mode:screen;
  background:conic-gradient(from 0deg,transparent 0deg,rgba(31,168,226,.16) 26deg,transparent 60deg,
    transparent 180deg,rgba(255,122,69,.13) 210deg,transparent 250deg,transparent 360deg);
  -webkit-mask-image:radial-gradient(closest-side,#000 28%,transparent 72%);
  mask-image:radial-gradient(closest-side,#000 28%,transparent 72%);
  animation:kpSpin 34s linear infinite}

/* breathing aura blooms, weighted toward the right where the cluster used to be */
.hero-bg .hb-aura{position:absolute;inset:-18% -8%;
  background:
    radial-gradient(40% 44% at 62% 44%,rgba(255,122,69,.20),transparent 60%),
    radial-gradient(38% 42% at 40% 36%,rgba(31,168,226,.28),transparent 62%),
    radial-gradient(48% 52% at 70% 78%,rgba(21,71,143,.34),transparent 64%);
  filter:blur(10px);animation:kpAura 19s ease-in-out infinite}

/* SVG cell-network */
.hero-bg .hb-net{position:absolute;inset:0;width:100%;height:100%;opacity:0;animation:kpNetIn 1.6s .3s forwards}
.hero-bg .hb-net .kp-sig{filter:drop-shadow(0 0 5px rgba(190,232,255,.95))}

/* depth orbs */
.hero-bg .hb-field{position:absolute;inset:0}
.hero-bg .hb-orb{position:absolute;border-radius:50%;filter:blur(2px);opacity:.5;
  background:radial-gradient(circle at 38% 34%,rgba(123,207,253,.6),rgba(31,168,226,.05) 70%);
  animation:kpFloat 14s ease-in-out infinite}
.hero-bg .hb-orb.o1{width:160px;height:160px;left:18%;top:40%;animation-delay:0s}
.hero-bg .hb-orb.o2{width:110px;height:110px;left:74%;top:24%;animation-delay:2.4s;
  background:radial-gradient(circle at 38% 34%,rgba(255,122,69,.5),rgba(255,122,69,.04) 70%)}
.hero-bg .hb-orb.o3{width:210px;height:210px;left:60%;top:58%;animation-delay:1.4s;filter:blur(4px);opacity:.4}
.hero-bg .hb-orb.o4{width:90px;height:90px;left:46%;top:70%;animation-delay:3.1s;
  background:radial-gradient(circle at 38% 34%,rgba(255,122,69,.42),rgba(255,122,69,.04) 70%)}

/* drifting immune-cell dots */
.hero-bg .hb-dot{position:absolute;width:7px;height:7px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#BfE8FF,var(--cyan));
  box-shadow:0 0 12px rgba(31,168,226,.9);opacity:0;animation:kpDrift 9s ease-in-out infinite}
.hero-bg .hb-dot.d1{left:14%;top:32%;animation-delay:.0s}
.hero-bg .hb-dot.d2{left:24%;top:66%;animation-delay:1.1s;width:5px;height:5px}
.hero-bg .hb-dot.d3{left:36%;top:24%;animation-delay:2.0s}
.hero-bg .hb-dot.d4{left:48%;top:78%;animation-delay:.6s;width:6px;height:6px}
.hero-bg .hb-dot.d5{left:63%;top:28%;animation-delay:1.6s}
.hero-bg .hb-dot.d6{left:72%;top:68%;animation-delay:2.6s;width:5px;height:5px}
.hero-bg .hb-dot.d7{left:84%;top:38%;animation-delay:.9s}
.hero-bg .hb-dot.d8{left:90%;top:60%;animation-delay:2.2s;width:6px;height:6px}
.hero-bg .hb-dot.d9{left:55%;top:52%;animation-delay:1.3s;width:6px;height:6px;
  background:radial-gradient(circle at 35% 35%,#FFD3B8,var(--hot));box-shadow:0 0 12px rgba(255,122,69,.9)}
.hero-bg .hb-dot.d10{left:67%;top:44%;animation-delay:3.0s}
.hero-bg .hb-dot.d11{left:40%;top:50%;animation-delay:1.9s;width:5px;height:5px}
.hero-bg .hb-dot.d12{left:79%;top:50%;animation-delay:.4s;width:6px;height:6px;
  background:radial-gradient(circle at 35% 35%,#FFD3B8,var(--hot));box-shadow:0 0 12px rgba(255,122,69,.9)}

@media(max-width:760px){ .hero-bg .hb-net{opacity:.7} }
@media(prefers-reduced-motion:reduce){
  .hero-bg .hb-sweep,.hero-bg .hb-aura,.hero-bg .hb-net,.hero-bg .kp-link,.hero-bg .kp-n,
  .hero-bg .hb-orb,.hero-bg .hb-dot,.hero-bg .kp-sig{animation:none}
  .hero-bg .hb-net{opacity:.85}
}

/* ===== Explore section: subtle brighter background, cards stay dark ===== */
.explore-band{
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(31,168,226,.10) 0%, rgba(21,71,143,.10) 34%, rgba(10,33,64,0) 68%),
    linear-gradient(180deg, #0B2138 0%, #081B30 46%, var(--space) 100%);
}
/* keep the 6 tiles dark: opaque panel so the brighter band does not show through the translucent card */
.explore-band .grid6 .card,
.explore-band .tiles .tile{
  background:#061629;
  border-color:rgba(123,207,253,.12);
}
.explore-band .grid6 .card:hover,
.explore-band .tiles .tile:hover{
  background:#071a30;
  border-color:var(--cyan);
}

/* ===== About section: white background + compressed spacing + dark text ===== */
#about{background:#FFFFFF;padding:72px 0}
#about .sec-head{margin-bottom:28px}
#about .sec-head h2{margin-top:12px;color:#0E2C54}
#about .eyebrow{color:#1577B0;font-size:15px;letter-spacing:.26em}
#about .about-lead{color:#42597A;margin-top:14px}
#about .about-lead a{color:#1577B0;border-bottom:1px solid rgba(21,119,176,.4)}
#about .about-lead a:hover{color:#15478F;border-bottom-color:#15478F}
#about a{color:#1577B0;border-bottom:1px solid rgba(21,119,176,.35)}
#about a:hover{color:#15478F;border-bottom-color:#15478F}
#about .about-grid{margin-top:30px;gap:40px}
#about .about-block h3{color:#0E2C54;margin-bottom:10px;border-left:3px solid var(--cyan)}
#about .about-block p{color:#42597A;margin-bottom:11px}
#about .about-cta{margin-top:14px}
@media(max-width:760px){#about{padding:52px 0}}

/* ===== Contact form: Web3Forms honeypot + thank-you panel ===== */
.kf .kf-hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.kf-thanks{max-width:620px;margin:34px auto 0;text-align:center;background:rgba(31,168,226,.06);border:1px solid rgba(31,168,226,.28);border-radius:18px;padding:40px 32px}
.kf-thanks-mark{width:58px;height:58px;margin:0 auto 18px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:28px;color:#04101F;background:var(--cyan);box-shadow:0 10px 30px -10px rgba(31,168,226,.6)}
.kf-thanks h3{font-size:23px;font-weight:700;margin:0 0 8px;color:var(--txt)}
.kf-thanks p{font-size:15px;color:var(--muted);margin:0}

/* ===== Thank-you panel: centered text + send-another button ===== */
.kf-thanks h3,.kf-thanks p{text-align:center;margin-left:auto;margin-right:auto}
.kf-thanks p{max-width:44ch}
.kf-thanks .kf-again{margin-top:22px}

/* ===== Ensure [hidden] always wins over display rules (contact form + thank-you panel) ===== */
#contactform[hidden],.kf[hidden],.kf-thanks[hidden],[hidden]{display:none !important}

/* ===== Explore section: brighter background (override) ===== */
.explore-band{
  background:
    radial-gradient(120% 95% at 50% 0%, rgba(31,168,226,.20) 0%, rgba(21,71,143,.18) 36%, rgba(10,33,64,0) 70%),
    linear-gradient(180deg, #15375A 0%, #0F2C49 50%, #0A2138 100%) !important;
}

/* ===== About section two-column: text left, video right ===== */
#about .about-split{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:end}
#about .about-split .sec-head{margin-bottom:0;max-width:none}
#about .about-media{width:100%}
#about .about-video-frame{position:relative;width:100%;border-radius:18px;overflow:hidden;box-shadow:0 26px 60px -30px rgba(21,71,143,.45);background:#0A2140}
#about .about-video-frame video{display:block;width:100%;height:auto;cursor:pointer}
@media(max-width:900px){
  #about .about-split{grid-template-columns:1fr;gap:34px}
  #about .about-video-frame{margin-top:6px}
}

/* ===== About: animated Kinimmune logo + drifting molecular dots above the video ===== */
#about .about-logo{position:relative;width:100%;margin:0 auto 22px;padding:18px 0;display:flex;align-items:center;justify-content:center;min-height:96px;overflow:hidden}
#about .about-logo-img{position:relative;z-index:2;width:62%;max-width:340px;height:auto;display:block;
  filter:drop-shadow(0 6px 18px rgba(21,71,143,.18))}
#about .klm-dots{position:absolute;inset:0;z-index:1;pointer-events:none}
#about .klm-dot{position:absolute;border-radius:50%;opacity:.55;
  background:radial-gradient(circle at 35% 30%, var(--sky), var(--cyan) 55%, var(--navy) 100%);
  box-shadow:0 2px 8px rgba(31,168,226,.28);
  animation:klmFloat 7s ease-in-out infinite}
/* sizes, positions, delays — scattered like the logo's molecule cluster */
#about .klm-dot.d1{width:14px;height:14px;left:6%;top:24%;animation-delay:0s;animation-duration:7.5s}
#about .klm-dot.d2{width:9px;height:9px;left:14%;top:62%;animation-delay:.6s;animation-duration:6.4s}
#about .klm-dot.d3{width:18px;height:18px;left:22%;top:12%;animation-delay:1.1s;animation-duration:8.2s}
#about .klm-dot.d4{width:7px;height:7px;left:30%;top:78%;animation-delay:.3s;animation-duration:6.8s}
#about .klm-dot.d5{width:11px;height:11px;left:78%;top:20%;animation-delay:1.5s;animation-duration:7.1s}
#about .klm-dot.d6{width:16px;height:16px;left:86%;top:58%;animation-delay:.9s;animation-duration:8.6s}
#about .klm-dot.d7{width:8px;height:8px;left:70%;top:74%;animation-delay:2s;animation-duration:6.2s}
#about .klm-dot.d8{width:12px;height:12px;left:92%;top:34%;animation-delay:.4s;animation-duration:7.8s}
#about .klm-dot.d9{width:6px;height:6px;left:50%;top:8%;animation-delay:1.8s;animation-duration:6.6s}
#about .klm-dot.d10{width:10px;height:10px;left:44%;top:84%;animation-delay:1.2s;animation-duration:7.3s}
#about .klm-dot.d11{width:13px;height:13px;left:60%;top:16%;animation-delay:.7s;animation-duration:8s}
#about .klm-dot.d12{width:7px;height:7px;left:38%;top:40%;animation-delay:2.3s;animation-duration:6.9s}
@keyframes klmFloat{
  0%{transform:translate(0,0) scale(1);opacity:.5}
  50%{transform:translate(6px,-10px) scale(1.12);opacity:.8}
  100%{transform:translate(0,0) scale(1);opacity:.5}
}
@media(prefers-reduced-motion:reduce){#about .klm-dot{animation:none}}
@media(max-width:900px){#about .about-logo-img{width:54%}}

/* ===== About section-wide molecular dot field ===== */
#about{position:relative;overflow:hidden}
#about .wrap{position:relative;z-index:2}
#about .about-field{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
#about .ab-dot{position:absolute;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, var(--sky), var(--cyan) 60%, var(--navy) 100%);
  box-shadow:0 2px 10px rgba(31,168,226,.22);
  opacity:.18;animation:abFloat 9s ease-in-out infinite}
/* scatter across the whole section; varied size/pos/timing */
#about .ab-dot.a1{width:16px;height:16px;left:4%;top:14%;animation-delay:0s;animation-duration:9.5s}
#about .ab-dot.a2{width:9px;height:9px;left:11%;top:46%;animation-delay:.8s;animation-duration:8.2s}
#about .ab-dot.a3{width:22px;height:22px;left:8%;top:78%;animation-delay:1.4s;animation-duration:10.5s}
#about .ab-dot.a4{width:7px;height:7px;left:18%;top:30%;animation-delay:.5s;animation-duration:7.8s}
#about .ab-dot.a5{width:13px;height:13px;left:24%;top:62%;animation-delay:2s;animation-duration:9s}
#about .ab-dot.a6{width:10px;height:10px;left:33%;top:18%;animation-delay:1.1s;animation-duration:8.6s}
#about .ab-dot.a7{width:18px;height:18px;left:40%;top:88%;animation-delay:.3s;animation-duration:11s}
#about .ab-dot.a8{width:8px;height:8px;left:47%;top:50%;animation-delay:1.7s;animation-duration:7.4s}
#about .ab-dot.a9{width:14px;height:14px;left:55%;top:24%;animation-delay:.9s;animation-duration:9.8s}
#about .ab-dot.a10{width:11px;height:11px;left:62%;top:70%;animation-delay:2.3s;animation-duration:8.4s}
#about .ab-dot.a11{width:20px;height:20px;left:70%;top:12%;animation-delay:.6s;animation-duration:10.2s}
#about .ab-dot.a12{width:9px;height:9px;left:75%;top:54%;animation-delay:1.9s;animation-duration:7.9s}
#about .ab-dot.a13{width:15px;height:15px;left:82%;top:34%;animation-delay:1.2s;animation-duration:9.3s}
#about .ab-dot.a14{width:7px;height:7px;left:88%;top:74%;animation-delay:.4s;animation-duration:8s}
#about .ab-dot.a15{width:17px;height:17px;left:94%;top:20%;animation-delay:2.1s;animation-duration:10.8s}
#about .ab-dot.a16{width:10px;height:10px;left:96%;top:60%;animation-delay:1s;animation-duration:8.8s}
#about .ab-dot.a17{width:12px;height:12px;left:14%;top:90%;animation-delay:1.6s;animation-duration:9.1s}
#about .ab-dot.a18{width:8px;height:8px;left:50%;top:8%;animation-delay:.7s;animation-duration:7.6s}
#about .ab-dot.a19{width:13px;height:13px;left:66%;top:90%;animation-delay:2.4s;animation-duration:9.7s}
#about .ab-dot.a20{width:9px;height:9px;left:30%;top:44%;animation-delay:1.3s;animation-duration:8.3s}
#about .ab-dot.a21{width:16px;height:16px;left:58%;top:42%;animation-delay:.2s;animation-duration:10s}
#about .ab-dot.a22{width:7px;height:7px;left:78%;top:84%;animation-delay:1.8s;animation-duration:7.7s}
#about .ab-dot.a23{width:11px;height:11px;left:43%;top:68%;animation-delay:.9s;animation-duration:9.4s}
#about .ab-dot.a24{width:14px;height:14px;left:90%;top:46%;animation-delay:2.2s;animation-duration:10.6s}
@keyframes abFloat{
  0%{transform:translate(0,0) scale(1);opacity:.14}
  50%{transform:translate(8px,-14px) scale(1.15);opacity:.28}
  100%{transform:translate(0,0) scale(1);opacity:.14}
}
@media(prefers-reduced-motion:reduce){#about .ab-dot{animation:none}}

/* ===== About: tagline above the video (replaces logo) ===== */
#about .about-tagline{position:relative;z-index:2;width:100%;text-align:center;
  font-family:var(--sans);font-weight:800;line-height:1.12;letter-spacing:-.01em;
  font-size:clamp(20px,2.1vw,28px);color:#0E2C54;
  background:linear-gradient(90deg,#15478F 0%,#1FA8E2 55%,#15478F 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  padding:4px 8px;text-wrap:balance}
@media(max-width:900px){#about .about-tagline{font-size:clamp(18px,4.4vw,24px)}}

/* ===== Video "Tap for sound" badge ===== */
#about .about-video-frame{position:relative}
#about .vid-sound-badge{position:absolute;left:14px;bottom:14px;z-index:3;
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 14px;border:0;border-radius:999px;cursor:pointer;
  font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:.01em;
  color:#fff;background:rgba(10,33,64,.78);backdrop-filter:blur(6px);
  box-shadow:0 6px 18px rgba(4,16,31,.35);
  transition:opacity .35s ease, transform .35s ease;
  animation:sndPulse 2.4s ease-in-out infinite}
#about .vid-sound-badge svg{flex:0 0 auto}
#about .vid-sound-badge:hover{background:rgba(21,71,143,.92)}
#about .about-video-frame.sound-on .vid-sound-badge{opacity:0;transform:translateY(8px);pointer-events:none}
@keyframes sndPulse{0%,100%{box-shadow:0 6px 18px rgba(4,16,31,.35),0 0 0 0 rgba(31,168,226,.45)}50%{box-shadow:0 6px 18px rgba(4,16,31,.35),0 0 0 8px rgba(31,168,226,0)}}
@media(prefers-reduced-motion:reduce){#about .vid-sound-badge{animation:none}}

/* ===== Explore eyebrow larger ===== */
.explore-band .eyebrow{font-size:15px;letter-spacing:.26em}

/* ===== Hero creative animation: living colored words ===== */
/* Blue word "innate immunity": gentle breathing glow + shimmer sweep */
.hero h1 .c-cold{position:relative;
  text-shadow:0 0 18px rgba(31,168,226,.28);
  animation:hwGlowBlue 3.4s 1.2s ease-in-out infinite}
/* shimmer pass across both colored words */
.hero h1 .hero-word{background-clip:border-box}
.hero h1 .hero-word::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.55) 50%,transparent 80%);
  background-size:220% 100%;background-position:200% 0;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  mix-blend-mode:screen;opacity:0;
  animation:hwShimmer 6.5s 2.4s ease-in-out infinite}
.hero h1 .c-cold.hero-word::before{animation-delay:2.4s}
.hero h1 .c-hot.hero-word::before{animation-delay:3.9s}

@keyframes hwGlowBlue{
  0%,100%{text-shadow:0 0 16px rgba(31,168,226,.20)}
  50%{text-shadow:0 0 26px rgba(31,168,226,.45),0 0 40px rgba(123,207,253,.25)}
}
@keyframes hwUnderBlue{
  0%,100%{opacity:.55;transform:scaleX(1)}
  50%{opacity:1;transform:scaleX(1.02)}
}
@keyframes hwShimmer{
  0%{background-position:200% 0;opacity:0}
  8%{opacity:1}
  22%{background-position:-120% 0;opacity:1}
  30%,100%{background-position:-120% 0;opacity:0}
}
@media(prefers-reduced-motion:reduce){
  .hero h1 .c-cold,.hero h1 .hero-word::before{animation:none}
}

/* ===================== TEAM PAGE ===================== */
.page-hero{padding:150px 0 50px;position:relative}
.page-hero .eyebrow{margin-bottom:14px}
.page-hero h1{font-size:clamp(38px,6vw,68px);line-height:1.02;letter-spacing:-.02em;color:var(--txt);margin:0 0 20px;max-width:18ch}
.page-hero .page-lede{font-size:clamp(17px,1.8vw,21px);line-height:1.5;color:var(--muted);max-width:60ch;margin:0}
body.inner .page-hero h1{color:#0E2C54}
body.inner .page-hero .page-lede{color:#42597A}
/* Dark-theme interior pages keep light hero text */
body.page-science .page-hero h1{color:var(--txt)}
body.page-science .page-hero .page-lede{color:var(--muted)}
body.page-science .page-hero{background:linear-gradient(180deg,#061a31,var(--space));border-bottom:1px solid var(--line)}
/* Light interior pages (Team, Patients) */
body.page-team, body.page-patients{background:#fff}
body.page-team .page-hero, body.page-patients .page-hero{background:linear-gradient(180deg,#F4F8FD 0%,#fff 100%);border-bottom:1px solid #EAF1F9}
body.page-team .team-sec{background:#fff}

.team-sec{padding:30px 0 90px}
.lead-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.lead-card{background:#fff;border:1px solid #E4ECF6;border-radius:18px;overflow:hidden;cursor:pointer;
  transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,border-color .35s;display:flex;flex-direction:column}
.lead-card:hover{transform:translateY(-5px);box-shadow:0 22px 50px -28px rgba(21,71,143,.4);border-color:#C9DBF0}
.lead-card:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.lead-photo{position:relative;width:100%;aspect-ratio:1/1;overflow:hidden;background:#EDF3FB}
.lead-photo img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block;transition:transform .5s}
.lead-card:hover .lead-photo img{transform:scale(1.04)}
.lead-body{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1}
.lead-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.lead-card h3{font-size:22px;font-weight:800;color:#0E2C54;margin:0;line-height:1.15;letter-spacing:-.01em}
.lead-deg{display:block;font-size:13px;font-weight:600;color:#7B93B5;letter-spacing:.02em;margin-top:3px}
.lead-li{flex:0 0 auto;width:30px;height:30px;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;
  background:#EAF2FB;color:#1577B0;transition:background .25s,color .25s;margin-top:2px}
.lead-li:hover{background:#1577B0;color:#fff}
.lead-li svg{width:16px;height:16px;fill:currentColor}
/* Affiliation wordmark badges (advisors linking to org profiles) */
.lead-li.lead-org{width:auto;padding:0 11px;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.04em;white-space:nowrap}
.lead-li.lead-org--washu{background:#A51417;color:#fff}
.lead-li.lead-org--washu:hover{background:#7E0F12;color:#fff}
.lead-li.lead-org--bond{background:#0E2C54;color:#fff}
.lead-li.lead-org--bond:hover{background:#09203E;color:#fff}
.lead-role{font-family:var(--mono);font-size:12.5px;letter-spacing:.02em;color:var(--cyan);margin:12px 0 0;font-weight:500}
.lead-bio{font-size:15px;line-height:1.62;color:#42597A;margin:14px 0 0;
  max-height:0;opacity:0;overflow:hidden;transition:max-height .5s ease,opacity .4s ease,margin .4s ease}
.lead-card.open .lead-bio{max-height:520px;opacity:1;margin-top:16px}
.lead-toggle{margin-top:16px;align-self:flex-start;background:none;border:0;cursor:pointer;
  font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#1577B0;
  display:inline-flex;align-items:center;gap:8px;padding:0}
.lead-toggle .lt-ico{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;
  border:1.5px solid #1577B0;font-size:14px;line-height:1;transition:transform .35s}
.lead-card.open .lead-toggle .lt-ico{transform:rotate(45deg)}
.lead-card.open .lead-toggle{color:#7B93B5}
.lead-card.open .lead-toggle .lt-ico{border-color:#7B93B5}
@media(max-width:920px){.lead-grid{grid-template-columns:1fr;max-width:480px;margin:0 auto}}

/* ===================== PATIENTS PAGE ===================== */
.patients-sec{padding:20px 0 100px}
.patients-sec .wrap{max-width:1240px}
.pat-flow{display:flex;align-items:stretch;justify-content:center;gap:8px;margin:30px 0 40px;flex-wrap:nowrap}
.pf-step{flex:1 1 0;max-width:520px;background:#fff;border:1px solid #E4ECF6;border-radius:18px;padding:30px 20px;text-align:center;
  display:flex;flex-direction:column;align-items:center;justify-content:center;transition:transform .35s,box-shadow .35s}
.pf-step-hl{border-color:#BFE0F5;box-shadow:0 18px 44px -28px rgba(31,168,226,.5);background:linear-gradient(180deg,#F7FCFF,#fff);flex-grow:1.3;max-width:620px}
.pf-ico{display:flex;align-items:center;justify-content:center;margin-bottom:18px;width:100%}
.pf-ico img{width:100%;max-width:340px;height:auto;display:block;cursor:pointer;outline:none;transition:transform .35s ease}
.pf-ico img:hover,.pf-ico img:focus,.pf-ico img:active{transform:scale(1.07)}
.pf-step-hl .pf-ico img{width:100%;max-width:460px;height:auto}
/* pf-ico now holds circular images */
.pf-step h3{font-size:18px;font-weight:800;color:#0E2C54;margin:0 0 10px;letter-spacing:-.01em}
.pf-step p{font-size:14.5px;line-height:1.55;color:#5A7090;margin:0}
.pf-arrow{flex:0 0 auto;display:flex;align-items:center;padding:0 2px}
.pf-arrow svg{width:50px;height:24px;overflow:visible}
.pf-chev{opacity:.25;animation:pfFlow 1.5s ease-in-out infinite}
.pf-chev:nth-child(2){animation-delay:.18s}
.pf-chev:nth-child(3){animation-delay:.36s}
@keyframes pfFlow{0%,100%{opacity:.25}45%{opacity:1}}
@media(prefers-reduced-motion:reduce){.pf-chev{opacity:.7;animation:none}}
.pat-disclaimer{text-align:center;font-size:16px;color:#0E2C54;max-width:60ch;margin:0 auto;font-style:italic;
  padding:16px 22px;background:#F6F9FD;border-radius:12px;border:1px solid #EAF1F9}
@media(max-width:820px){
  .pat-flow{flex-direction:column;align-items:center;gap:6px}
  .pf-step{max-width:480px;width:100%}
  .pf-arrow svg{transform:rotate(90deg)}
}

/* ===================== HOME: Local activation animation ===================== */
.loc-anim{max-width:680px;margin:0 auto;border-radius:20px;overflow:hidden;
  background:linear-gradient(180deg,#0A2140,#06182e);border:1px solid rgba(123,207,253,.14);
  box-shadow:0 30px 70px -40px rgba(0,0,0,.7)}
.loc-anim svg{display:block;width:100%;height:auto}
/* One full cycle ~ 9s. Stage timing via animation-delay within the loop. */
.la-label{font-family:var(--mono);font-size:13px;letter-spacing:.04em;fill:#7BCFFD;opacity:0}
.la-l1{animation:laLabel1 9s ease-in-out infinite}
.la-l2{animation:laLabel2 9s ease-in-out infinite}
@keyframes laLabel1{0%,4%{opacity:0}10%,40%{opacity:.95}52%,100%{opacity:.35}}
@keyframes laLabel2{0%,58%{opacity:0}68%,90%{opacity:.95}100%{opacity:.35}}

/* Stage 1: needle approaches then retracts */
.la-needle{opacity:0;animation:laNeedle 9s ease-in-out infinite}
@keyframes laNeedle{0%{opacity:0;transform:translate(-18px,-18px)}5%{opacity:1;transform:translate(-6px,-6px)}
  12%{opacity:1;transform:translate(0,0)}20%{opacity:1;transform:translate(0,0)}28%{opacity:0;transform:translate(-18px,-18px)}100%{opacity:0;transform:translate(-18px,-18px)}}

/* Stage 2: depot retained at site, expands then holds */
.la-depot{animation:laDepot 9s ease-in-out infinite}
@keyframes laDepot{0%,14%{r:0;opacity:0}22%{r:34px;opacity:1}70%{r:34px;opacity:.9}88%{r:30px;opacity:.4}100%{r:0;opacity:0}}

/* Stage 2: activation sparks */
.la-spark{opacity:0}
.la-burst{animation:laBurstHold 9s linear infinite}
@keyframes laBurstHold{0%,18%{opacity:0}24%,72%{opacity:1}82%,100%{opacity:0}}
.la-spark.s1{animation:laSpark 1.6s ease-in-out infinite;animation-delay:1.7s}
.la-spark.s2{animation:laSpark 1.6s ease-in-out infinite;animation-delay:2.0s}
.la-spark.s3{animation:laSpark 1.6s ease-in-out infinite;animation-delay:2.3s}
.la-spark.s4{animation:laSpark 1.6s ease-in-out infinite;animation-delay:2.6s}
@keyframes laSpark{0%{transform:translate(0,0);opacity:0}30%{opacity:1}100%{transform:translate(var(--sx,18px),var(--sy,-18px));opacity:0}}
.la-spark.s1{--sx:26px;--sy:-22px}.la-spark.s2{--sx:-24px;--sy:-26px}
.la-spark.s3{--sx:28px;--sy:20px}.la-spark.s4{--sx:-26px;--sy:24px}

/* Stage 3: immune cells recruited (fade/scale in around tumor) */
.im{opacity:0;transform-box:fill-box;transform-origin:center}
.la-immune .im{animation:laImmune 9s ease-in-out infinite}
.im.i1{animation-delay:.1s}.im.i2{animation-delay:.25s}.im.i3{animation-delay:.4s}
.im.i4{animation-delay:.55s}.im.i5{animation-delay:.7s}.im.i6{animation-delay:.85s}
@keyframes laImmune{0%,30%{opacity:0;transform:scale(.2)}40%{opacity:1;transform:scale(1)}
  70%{opacity:1;transform:scale(1)}84%{opacity:0;transform:scale(.4)}100%{opacity:0}}

/* Stage 4: flowing pulse along vessel */
.la-flow{opacity:0;animation:laFlow 9s linear infinite}
@keyframes laFlow{0%,42%{opacity:0;stroke-dashoffset:0}48%{opacity:.9}
  50%{stroke-dashoffset:0}92%{stroke-dashoffset:-560;opacity:.9}100%{opacity:0;stroke-dashoffset:-560}}

/* Stage 4: travelers visible only during transit window */
.trav{opacity:0}
.la-travelers .trav{animation:laTrav 9s linear infinite}
.trav.t1{animation-delay:0s}.trav.t2{animation-delay:.2s}.trav.t3{animation-delay:.4s}
@keyframes laTrav{0%,44%{opacity:0}50%{opacity:1}90%{opacity:1}96%,100%{opacity:0}}

/* Stage 5: distant tumor potential glow + immune arrival */
.la-distal{opacity:0;transform-box:fill-box;transform-origin:center;animation:laDistal 9s ease-in-out infinite}
@keyframes laDistal{0%,66%{opacity:0;transform:scale(.85)}78%{opacity:.9;transform:scale(1.08)}88%{opacity:.5;transform:scale(1)}100%{opacity:0}}
.dim{opacity:0;transform-box:fill-box;transform-origin:center}
.la-distal-immune .dim{animation:laDistImmune 9s ease-in-out infinite}
.dim.d1{animation-delay:0s}.dim.d2{animation-delay:.15s}.dim.d3{animation-delay:.3s}.dim.d4{animation-delay:.45s}
@keyframes laDistImmune{0%,70%{opacity:0;transform:scale(.2)}82%{opacity:1;transform:scale(1)}92%{opacity:.7}100%{opacity:0;transform:scale(.5)}}

.loc-anim-title{text-align:center;font-size:clamp(28px,3.6vw,42px);font-weight:800;letter-spacing:-.01em;
  color:var(--txt);margin:0 0 8px}
.loc-anim-title .ck{color:var(--cyan)}.loc-anim-title .ho{color:var(--hot)}
.loc-anim-sub{text-align:center;font-size:18px;color:var(--muted);margin:0 auto 28px;max-width:54ch}

@media(prefers-reduced-motion:reduce){
  .la-needle,.la-depot,.la-burst,.la-spark,.la-immune .im,.la-flow,.la-travelers .trav,
  .la-distal,.la-distal-immune .dim,.la-label{animation:none;opacity:1}
  .la-depot{r:34px}.la-needle{opacity:0}
}

/* ===================== HOME: Collaborators banner ===================== */
.collab-band{padding:70px 0 90px;border-top:1px solid var(--line);
  background:linear-gradient(180deg,var(--space),#061a31)}
.collab-head{text-align:center;margin-bottom:34px}
.collab-head .eyebrow{font-size:15px;letter-spacing:.26em;margin-bottom:12px}
.collab-head h2{font-size:clamp(24px,3vw,34px);color:var(--txt);margin:0;letter-spacing:-.01em}
.collab-row{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:14px 22px}
.collab-name{font-family:var(--sans);font-weight:700;font-size:clamp(16px,2vw,22px);
  color:#9FC4E8;letter-spacing:.01em;transition:color .3s}
.collab-name:hover{color:var(--sky)}
.collab-dot{color:var(--cyan);font-size:20px;opacity:.6}
@media(max-width:620px){.collab-dot{display:none}.collab-row{flex-direction:column;gap:14px}}

/* ===================== SCIENCE PAGE ===================== */
body.page-science{background:var(--space)}
.sci-sec{padding:70px 0}
.sci-sec-1{border-bottom:1px solid var(--line)}
.sci-sec-2{border-bottom:1px solid var(--line);background:linear-gradient(180deg,#061a31,var(--space))}
.sci-num{font-family:var(--mono);font-size:13px;letter-spacing:.3em;color:var(--cyan);margin-bottom:16px}
.sci-grid{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center}
.sci-copy h2{font-size:clamp(26px,3.4vw,40px);line-height:1.1;letter-spacing:-.02em;color:var(--txt);margin:0 0 18px;max-width:18ch}
.sci-copy p{font-size:17px;line-height:1.62;color:var(--muted);margin:0;max-width:52ch}
.sci-copy-center{text-align:center;max-width:760px;margin:0 auto 46px}
.sci-copy-center .sci-num{margin-left:auto;margin-right:auto}
.sci-copy-center h2{margin-left:auto;margin-right:auto}
.sci-copy-center p{margin-left:auto;margin-right:auto}

/* Section 1 comparison */
.sci-compare{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.scmp{background:#0A2140;border:1px solid var(--line);border-radius:16px;padding:20px;text-align:center}
.scmp svg{width:100%;height:auto;display:block;margin:8px 0}
.scmp-cap{font-weight:700;font-size:15px;color:var(--txt);margin-bottom:4px}
.scmp-sub{font-size:13px;color:var(--muted);margin-top:6px}
.scmp-bad .scmp-cap{color:#FF9166}
.scmp-good .scmp-cap{color:var(--sky)}
.inf{animation:infPulse 2.4s ease-in-out infinite}
.inf:nth-child(2n){animation-delay:.4s}.inf:nth-child(3n){animation-delay:.8s}
@keyframes infPulse{0%,100%{opacity:.45}50%{opacity:1}}
.foc{animation:focPulse 2.2s ease-in-out infinite}
.foc-ring{animation:focRing 2.2s ease-in-out infinite}
@keyframes focPulse{0%,100%{opacity:.7}50%{opacity:1}}
@keyframes focRing{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:.9;transform:scale(1.05)}transform-origin:120px 100px}

/* Section 2 progression */
.sci-prog{display:flex;align-items:stretch;justify-content:center;gap:10px;flex-wrap:nowrap;margin-bottom:30px}
.spg{flex:1 1 0;max-width:260px;background:#0A2140;border:1px solid var(--line);border-radius:16px;padding:26px 20px;text-align:center;display:flex;flex-direction:column;align-items:center}
.spg-hl{border-color:rgba(31,168,226,.4);background:linear-gradient(180deg,#0c2a4d,#0A2140)}
.spg-ico{width:64px;height:64px;border-radius:14px;background:#0E2A4C;display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.spg-ico svg{width:38px;height:38px}
.spg h4{font-size:15px;font-weight:700;color:var(--txt);margin:0;line-height:1.35}
.spg-arrow{flex:0 0 auto;display:flex;align-items:center}
.spg-arrow svg{width:34px;height:20px}
.sci-link{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:15px;font-weight:700;letter-spacing:.04em;
  color:var(--cyan);text-decoration:none;margin-top:6px;transition:gap .25s,color .25s}
.sci-link:hover{gap:13px;color:var(--sky)}
.sci-sec-2 .wrap{text-align:center}

/* Section 3 composition */
.sci-kin{max-width:840px;margin:0 auto}
.skin-compose{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;margin-bottom:36px}
.skin-part{background:#0A2140;border:1px solid var(--line);border-radius:14px;padding:18px 20px;text-align:center;min-width:150px}
.skin-part svg{width:90px;height:60px;display:block;margin:0 auto 8px}
.skin-part span{font-size:13px;color:var(--muted);font-weight:500}
.skin-plus,.skin-eq{font-size:28px;color:var(--cyan);font-weight:300}
.skin-result{text-align:center}
.skin-vial svg{width:54px;height:72px}
.skin-name{display:block;font-weight:800;font-size:18px;color:var(--txt);margin-top:6px;letter-spacing:.01em}
.skin-flow{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;
  padding:22px;background:#0A2140;border:1px solid var(--line);border-radius:16px}
.sf{font-size:14px;font-weight:600;color:var(--txt);padding:8px 14px;background:#0E2A4C;border-radius:8px}
.sf-asp{color:var(--sky);border:1px dashed rgba(123,207,253,.5);background:transparent}
.sf-arrow{color:var(--cyan);font-size:18px}
.sci-transition{text-align:center;font-size:16px;color:var(--muted);max-width:60ch;margin:40px auto 0;font-style:italic}
.sci-cta{text-align:center;margin-top:30px}

@media(max-width:880px){
  .sci-grid{grid-template-columns:1fr;gap:34px}.sci-sec-2 .sci-figcard{order:0}.sci-sec-1 .sci-grid,.sci-sec-2 .sci-grid{grid-template-columns:1fr}
  .sci-prog{flex-direction:column;align-items:center}.spg{max-width:380px;width:100%}
  .spg-arrow svg{transform:rotate(90deg)}
  .skin-flow{flex-direction:column}.sf-arrow{transform:rotate(90deg)}
}

/* ===================== PIPELINE: KIN-112 asset summary ===================== */
.lead-spec{display:grid;grid-template-columns:1fr 1fr;gap:14px 26px;margin:24px 0 26px;padding:22px 0;
  border-top:1px solid rgba(21,71,143,.15);border-bottom:1px solid rgba(21,71,143,.15)}
.ls-item{display:flex;flex-direction:column;gap:4px}
.ls-k{font-family:var(--mono);font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#1577B0}
.ls-v{font-size:16px;font-weight:700;color:#0E2C54}
.lead-sec .sci-link{color:#1577B0}
.lead-sec .sci-link:hover{color:#0E5A8C}
.pl-row-lead .pl-id{color:var(--sky)}
@media(max-width:560px){.lead-spec{grid-template-columns:1fr}}

/* ===================== NEWS PAGE ===================== */
body.page-news{background:#fff}
body.page-news .page-hero{background:linear-gradient(180deg,#F4F8FD 0%,#fff 100%);border-bottom:1px solid #EAF1F9}
.news-sec{padding:40px 0 100px;background:#fff}
.news-block{border-bottom:1px solid #E4ECF6;padding:8px 0}
.news-block summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
  padding:22px 4px;font-family:var(--sans)}
.news-block summary::-webkit-details-marker{display:none}
.news-block-title{font-size:clamp(20px,2.4vw,26px);font-weight:800;color:#0E2C54;letter-spacing:-.01em}
.news-chev{width:14px;height:14px;border-right:2px solid #1577B0;border-bottom:2px solid #1577B0;
  transform:rotate(45deg);transition:transform .3s;margin-right:6px}
.news-block[open] .news-chev{transform:rotate(-135deg)}
.news-list{padding:4px 0 12px}
.news-item{padding:18px 4px;border-top:1px solid #EEF3F9;display:flex;flex-direction:column;gap:7px}
.news-item:first-child{border-top:0}
.news-item[data-extra]{display:none}
.news-item[data-extra].show{display:flex}
.news-meta{font-family:var(--mono);font-size:12.5px;letter-spacing:.02em;color:#7B93B5}
.news-sep{color:#C3D3E8;margin:0 4px}
.news-title{font-size:17px;font-weight:600;line-height:1.45;color:#15396A;text-decoration:none;
  display:inline;transition:color .2s}
a.news-title:hover{color:#1FA8E2}
.ext-ico{width:14px;height:14px;display:inline-block;vertical-align:-1px;margin-left:3px;color:#9FB6D6;flex:0 0 auto}
a.news-title:hover .ext-ico{color:#1FA8E2}
.news-more{margin:10px 4px 4px;background:none;border:1px solid #CFE0F2;color:#1577B0;
  font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  padding:9px 18px;border-radius:8px;cursor:pointer;transition:background .2s,color .2s}
.news-more:hover{background:#1577B0;color:#fff;border-color:#1577B0}
.news-more.done{display:none}
.news-subblock{border-top:2px solid #E4ECF6}
.news-list > .news-subblock:first-child{border-top:0}
summary.news-subhead{list-style:none;cursor:pointer;font-family:var(--mono);font-size:14px;font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;color:#1577B0;display:flex;align-items:center;gap:10px;padding:20px 4px}
summary.news-subhead::-webkit-details-marker{display:none}
summary.news-subhead:hover{color:#0E2C54}
.news-count{font-family:var(--mono);font-size:12px;font-weight:600;color:#5E7BA4;background:#EAF2FB;border-radius:20px;padding:2px 9px;letter-spacing:.02em}
.news-subchev{width:11px;height:11px;border-right:2px solid #1577B0;border-bottom:2px solid #1577B0;
  transform:rotate(45deg);transition:transform .3s;margin-left:auto;margin-right:4px}
.news-subblock[open] .news-subchev{transform:rotate(-135deg)}
.news-subblock:not([open]) .news-subitems{display:none}
.news-subitems{padding:0 0 14px}
.news-subitems .news-item:first-child{border-top:0}

/* === animated Science figures === */
.sci-figcard{border-radius:20px;overflow:hidden;background:#F3F7FD;box-shadow:0 18px 50px rgba(0,0,0,.30);margin:8px auto 0;max-width:920px}
.sci-figcard svg{display:block;width:100%;height:auto}

.sci-sec-1 .sci-copy{max-width:760px;margin:0 auto 22px;text-align:center}

/* HOME: Local activation. Systemic potential. -> bright animated pair (sheen, no glow) */
.loc-anim-title .la-cold,.loc-anim-title .ho{
  display:inline-block;background-size:200% auto;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.loc-anim-title .la-cold{
  background-image:linear-gradient(100deg,#1488C2 0%,#1488C2 42%,#9ADBFF 50%,#1488C2 58%,#1488C2 100%);
  animation:laSheen 4.8s linear infinite}
.loc-anim-title .ho{
  background-image:linear-gradient(100deg,#E85A2A 0%,#E85A2A 42%,#FFB988 50%,#E85A2A 58%,#E85A2A 100%);
  animation:laSheen 4.8s linear .6s infinite}
@keyframes laSheen{from{background-position:0 center}to{background-position:-200% center}}
@media (prefers-reduced-motion:reduce){.loc-anim-title .la-cold,.loc-anim-title .ho{animation:none;background-position:0 center}}

/* grey sub-line */
.loc-anim-sub{text-align:center;font-size:18px;color:#6B7280;margin:0 auto 28px;max-width:54ch}
/* About: centered heading reusing Local activation / Systemic potential styling */
#about .sec-head.about-centered{text-align:center}
#about .sec-head h2.loc-anim-title{font-size:clamp(32px,4.4vw,54px);font-weight:800;letter-spacing:-.015em;text-align:center;white-space:nowrap;margin:16px 0 12px}
@media(max-width:900px){#about .sec-head h2.loc-anim-title{white-space:normal}}
#about .sec-head .loc-anim-sub{text-align:center;color:#111;font-size:20px;margin:0 auto 40px;max-width:60ch}
#about .sec-head.about-centered .about-lead{text-align:center;margin-left:auto;margin-right:auto}


/* KIN-112 mechanism image + brightening reflection + gradient frame */
.loc-figcard{max-width:1120px;background:transparent;box-shadow:none}
.mech-wrap{position:relative;display:block;border-radius:0;
  padding:0;background:none;
  max-width:1120px;margin:8px auto 0}
.mech-inner{position:relative;border-radius:0;overflow:hidden;display:block}
.mech-img{display:block;width:100%;height:auto;animation:mechBreathe 11s ease-in-out infinite;transform-origin:center;will-change:transform}
@keyframes mechBreathe{0%{transform:scale(1)}50%{transform:scale(1.03)}100%{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.mech-img{animation:none}}
.mech-sheen{position:absolute;inset:0;z-index:2;pointer-events:none;mix-blend-mode:screen;
  background:linear-gradient(105deg,rgba(255,255,255,0) 36%,rgba(222,241,255,.5) 46%,rgba(255,255,255,.9) 50%,rgba(222,241,255,.5) 54%,rgba(255,255,255,0) 64%);
  background-size:260% 100%;background-position:170% 0;animation:mechSheen 12s ease-in-out infinite}
@keyframes mechSheen{0%{background-position:175% 0;opacity:0}16%{opacity:1}46%{opacity:1}62%{background-position:-75% 0;opacity:0}100%{background-position:-75% 0;opacity:0}}
@media (prefers-reduced-motion:reduce){.mech-sheen{display:none}}
.mech-dots{position:absolute;inset:0;z-index:4;pointer-events:none;overflow:hidden}
.mech-dot{position:absolute;border-radius:50%;background:radial-gradient(circle,rgba(190,220,248,.8) 0%,rgba(150,200,240,.4) 45%,rgba(150,200,240,0) 72%);opacity:.35;will-change:transform,opacity;animation:mechFloat 34s ease-in-out infinite}
@keyframes mechFloat{0%{transform:translate(0,0) scale(1);opacity:.35}25%{transform:translate(var(--dx,20px),calc(var(--dy,-40px)*.55)) scale(1.1);opacity:.6}50%{transform:translate(calc(var(--dx,20px)*.3),var(--dy,-40px)) scale(1.18);opacity:.75}75%{transform:translate(calc(var(--dx,20px)*-.7),calc(var(--dy,-40px)*.4)) scale(1.08);opacity:.55}100%{transform:translate(0,0) scale(1);opacity:.35}}
@media (prefers-reduced-motion:reduce){.mech-dots{display:none}}

/* TEAM page: stack header text in a single left-aligned column */
.team-hero .wrap{text-align:left}
.team-hero .eyebrow,.team-hero h1,.team-hero .page-lede{text-align:left;margin-left:0;margin-right:0}

/* Company Advisors section (team page) */
.advisors-sec{padding-top:8px}
.advisors-head{max-width:760px;margin:0 auto 26px;text-align:center}
.advisors-head .eyebrow{justify-content:center}
.advisors-head h2{font-size:30px;font-weight:800;color:#0E2C54;margin:6px 0 0;letter-spacing:-.01em}

/* Roster section labels (Executive + Advisors): enlarged eyebrow headers */
.roster-head{max-width:760px;margin:0 auto 34px;text-align:center}
.roster-head .eyebrow{display:block;text-align:center;font-size:19px;letter-spacing:.26em;font-weight:600;color:var(--cyan)}
body.page-team .team-hero .eyebrow{font-size:16px;letter-spacing:.24em}
.sci-hero .eyebrow,.patients-hero .eyebrow,.news-hero .eyebrow,#pipeline .eyebrow{font-size:16px;letter-spacing:.24em}

/* science section — elegant redesign (bright text, smaller images, left-aligned, alternating) */
.sci-sec{padding:96px 0}
.sci-sec .sci-num{font-family:var(--mono);font-weight:800;font-size:clamp(64px,7.6vw,112px);line-height:.9;letter-spacing:-.01em;color:var(--sky);margin:0 0 6px;text-align:left;text-shadow:0 0 40px rgba(123,207,253,.35)}
.sci-sec .sci-num::after{content:"";display:block;width:56px;height:3px;margin-top:20px;background:linear-gradient(90deg,var(--sky),transparent);border-radius:2px}
.sci-sec .sci-copy{text-align:left;max-width:none;margin:0}
.sci-sec .sci-copy h2{color:#FFFFFF;font-weight:700;margin-top:22px}
.sci-sec .sci-copy p{color:#C3D8F0}
.sci-sec-2 .wrap{text-align:left}
.sci-sec-1 .sci-grid,.sci-sec-3 .sci-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:64px;align-items:center}
.sci-sec-2 .sci-grid{display:grid;grid-template-columns:.65fr 1.35fr;gap:64px;align-items:center}
.sci-sec-1 .sci-figcard,.sci-sec-3 .sci-figcard{order:0}
.sci-sec-2 .sci-figcard{order:-1}
.sci-figcard{max-width:460px;box-shadow:0 24px 60px rgba(0,0,0,.35)}
.sci-sec-2 .sci-link{margin-top:30px;color:var(--sky)}
.sci-transition{color:#C3D8F0}
@media(max-width:880px){
  .sci-sec{padding:64px 0}
  .sci-sec-1 .sci-grid,.sci-sec-2 .sci-grid,.sci-sec-3 .sci-grid{grid-template-columns:1fr;gap:30px}
  .sci-sec-2 .sci-figcard{order:0}
  .sci-figcard{max-width:520px;margin-left:auto;margin-right:auto}
}

/* homepage — local activation figure: robust fix (shadow/size/centering/color) */
#about .loc-anim-title .la-cold{
  background-image:none;
  -webkit-background-clip:border-box;background-clip:border-box;
  -webkit-text-fill-color:initial;
  color:#2F8FE0;
  animation:none;
}
#about .loc-anim-block{max-width:1100px;margin-left:auto;margin-right:auto}
#about .loc-anim-block .loc-figcard,
#about .loc-anim-block.reveal .sci-figcard{
  max-width:1000px;
  width:100%;
  margin:-46px auto 0;
  background:transparent;
  box-shadow:none;
  border-radius:0;
  overflow:visible;
}
#about .loc-anim-block .mech-img{display:block;width:100%;height:auto;animation:mechBreathe 11s ease-in-out infinite;transform-origin:center;will-change:transform}

@media(prefers-reduced-motion:reduce){.mech-img{animation:none}}
@media(max-width:760px){
  #about .loc-anim-block .loc-figcard,
  #about .loc-anim-block.reveal .sci-figcard{margin-top:28px}
}

/* science page — elegant redesign v2: eyebrows, unified cards, organized closing */
.sci-eyebrow{
  font-family:var(--mono);font-size:12.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--sky);opacity:.85;margin:0 0 16px
}
.sci-sec .sci-num{margin-top:0}
.sci-sec .sci-copy h2{margin-top:18px}
.sci-sec .sci-copy p{margin-top:16px;max-width:54ch}

.sci-figcard{
  border-radius:18px;
  overflow:hidden;
  background:#F3F7FD;
  box-shadow:0 20px 50px rgba(2,10,25,.45);
  margin:0 auto;
}
.sci-sec-1 .sci-figcard,.sci-sec-3 .sci-figcard{max-width:480px}
.sci-sec-2 .sci-figcard{max-width:480px}

.sci-sec-1{border-bottom:1px solid rgba(125,207,253,.12)}
.sci-sec-2{border-bottom:1px solid rgba(125,207,253,.12)}

.sci-close{
  max-width:640px;margin:72px auto 0;text-align:center;
  padding-top:40px;
  border-top:1px solid rgba(125,207,253,.18);
}
.sci-close .sci-transition{
  font-size:16px;line-height:1.6;font-style:italic;color:#C3D8F0;
  margin:0 0 26px;text-align:center;max-width:none
}
.sci-close .sci-cta{margin-top:0;text-align:center}

@media(max-width:880px){
  .sci-close{margin-top:52px;padding-top:32px}
}

/* ============================================================
   SCIENCE PAGE — CREATIVE v3
   Editorial chapters: elevated hero, chapter chips, framed
   figures with captions, connective dividers, chapter-end mark.
   ============================================================ */

/* Hero: drifting aura + faint grid wash + chapter table of contents */
.sci-hero-v3{position:relative;overflow:hidden;padding-bottom:38px}
.sci-hero-v3 .wrap{position:relative;z-index:2}
.sci-hero-aura{position:absolute;z-index:0;top:-34%;left:50%;width:min(1120px,124%);height:700px;
  transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(50% 50% at 50% 40%,rgba(31,168,226,.30),rgba(31,168,226,0) 70%);
  filter:blur(6px);animation:sciAura 15s ease-in-out infinite}
@keyframes sciAura{0%,100%{opacity:.68;transform:translateX(-50%) scale(1)}50%{opacity:1;transform:translateX(-50%) scale(1.09)}}
.sci-hero-grid{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.55;
  background-image:linear-gradient(rgba(123,207,253,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(123,207,253,.06) 1px,transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:radial-gradient(82% 72% at 50% 28%,#000,transparent 76%);
          mask-image:radial-gradient(82% 72% at 50% 28%,#000,transparent 76%)}
@media(prefers-reduced-motion:reduce){.sci-hero-aura{animation:none}}

.sci-toc{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px;position:static}
.sci-toc-chip{display:inline-flex;align-items:center;gap:10px;padding:9px 17px 9px 11px;
  border:1px solid rgba(123,207,253,.28);border-radius:999px;background:rgba(10,33,64,.5);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  color:var(--txt);font-size:14px;font-weight:600;letter-spacing:.005em;text-decoration:none;
  transition:border-color .25s,background .25s,transform .25s,box-shadow .25s}
.sci-toc-chip .sci-toc-n{font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.06em;
  color:#04101F;background:var(--sky);border-radius:999px;padding:3px 8px;line-height:1}
.sci-toc-chip:hover{border-color:var(--sky);background:rgba(31,168,226,.16);
  transform:translateY(-2px);box-shadow:0 12px 28px rgba(31,168,226,.20)}
@media(max-width:560px){.sci-toc-chip .sci-toc-t{display:none}.sci-toc-chip{padding:8px}}

/* Section rhythm + floating chapter panels */
.sci-sec{padding:80px 0}
body.page-science section.sci-sec .wrap{max-width:1340px}
.sci-sec .wrap{position:relative}
.sci-sec-1 .sci-grid,.sci-sec-2 .sci-grid,.sci-sec-3 .sci-grid{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(36px,4vw,68px);align-items:center;
  position:relative;padding:clamp(38px,3.8vw,62px);border-radius:28px;
  background:linear-gradient(180deg,rgba(11,35,68,.46),rgba(7,26,51,.30));
  border:1px solid rgba(123,207,253,.14);
  box-shadow:0 30px 80px rgba(2,10,25,.42),inset 0 1px 0 rgba(255,255,255,.04)}
.sci-sec-1 .sci-grid,.sci-sec-3 .sci-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.22fr)}
.sci-sec-2 .sci-grid{grid-template-columns:minmax(0,1.22fr) minmax(0,1fr)}
.sci-sec-1{border-bottom:none}
.sci-sec-2{border-bottom:none;background:none}
.sci-sec-2 .wrap{text-align:left}

/* Chapter header: number + eyebrow on a shared baseline */
.sci-sec .sci-head{display:flex;align-items:center;gap:15px;margin:0 0 20px}
.sci-sec .sci-head::before{content:"";flex:0 0 auto;width:32px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--sky),rgba(123,207,253,0))}
.sci-sec .sci-head .sci-num{font-family:var(--mono);font-weight:800;
  font-size:clamp(38px,3.8vw,54px);line-height:1;letter-spacing:-.01em;color:var(--sky);
  margin:0;text-align:left;text-shadow:0 0 26px rgba(123,207,253,.45)}
.sci-sec .sci-head .sci-num::after{display:none}
.sci-sec .sci-head .sci-eyebrow{margin:0;padding:0;opacity:.9;
  font-family:var(--mono);font-size:14.5px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--sky)}
.sci-sec .sci-copy h2{margin-top:2px}
.sci-sec .sci-copy p{max-width:52ch}

/* Framed figures with index tag + caption */
.sci-figure{position:relative;margin:0;width:100%;display:flex;flex-direction:column;align-items:center}
.sci-sec-2 .sci-figure{order:-1}
.sci-figure .sci-figcard{position:relative;max-width:680px;width:100%;margin:0;
  border-radius:18px;overflow:hidden;background:#F3F7FD;
  border:1px solid rgba(123,207,253,.35);
  box-shadow:0 24px 60px rgba(2,10,25,.55);
  transition:transform .4s ease,box-shadow .4s ease}
.sci-figure:hover .sci-figcard{transform:translateY(-4px);box-shadow:0 34px 82px rgba(2,10,25,.62)}
.sci-figure .sci-figcard svg{display:block;width:100%;height:auto}
.sci-figure .sci-figcard::after{content:"";position:absolute;inset:0;border-radius:inherit;
  pointer-events:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}
.sci-figcap{margin-top:16px;max-width:680px;width:100%;display:flex;align-items:baseline;gap:11px;
  font-size:15.5px;line-height:1.55;color:#AFC6E6;text-align:left}
.sci-figcap .sci-figix{flex:0 0 auto;font-family:var(--mono);font-size:10.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--sky);
  background:rgba(31,168,226,.14);border:1px solid rgba(123,207,253,.3);
  padding:3px 8px;border-radius:6px}

/* Published-study link sits under the chapter panel */
.sci-sec-2 .sci-link{margin-top:26px}

/* Chapter-end mark above the closing line */
.sci-close-mark{display:flex;justify-content:center;gap:8px;margin:0 0 22px}
.sci-close-mark span{width:7px;height:7px;border-radius:2px;transform:rotate(45deg);
  background:var(--sky);opacity:.4}
.sci-close-mark span:nth-child(2){opacity:.9;box-shadow:0 0 14px rgba(123,207,253,.7)}

@media(max-width:880px){
  .sci-sec{padding:46px 0}
  .sci-sec-1 .sci-grid,.sci-sec-2 .sci-grid,.sci-sec-3 .sci-grid{
    grid-template-columns:1fr;gap:28px;padding:26px 22px}
  .sci-sec-2 .sci-figure{order:0}
  .sci-figure .sci-figcard,.sci-figcap{max-width:620px}
}

/* ---- Science page background matched to the Pipeline tab (light) ----
   Page turns light like Pipeline; the three chapter boxes stay dark
   (made opaque so they read the same), and text on the light areas is
   recolored for contrast. Everything inside the dark boxes is unchanged. */
body.page-science{background:#FFFFFF}
body.page-science .page-hero.sci-hero-v3{background:#FFFFFF;border-bottom:1px solid #EAF1F9}
body.page-science .sci-hero-aura,body.page-science .sci-hero-grid{display:none}
body.page-science .page-hero.sci-hero-v3 h1{color:#0E2C54}
body.page-science .page-hero.sci-hero-v3 .page-lede{color:#42597A}

/* Table-of-contents chips on the light hero */
body.page-science .sci-toc-chip{background:#0C2647;border:1px solid rgba(20,71,143,.14);
  color:#EAF2FB;-webkit-backdrop-filter:none;backdrop-filter:none}
body.page-science .sci-toc-chip:hover{background:#123159;border-color:#1FA8E2;
  box-shadow:0 12px 26px rgba(20,71,143,.18)}

/* Chapter boxes: same dark, now opaque so they sit on the light page */
body.page-science .sci-sec-1 .sci-grid,
body.page-science .sci-sec-2 .sci-grid,
body.page-science .sci-sec-3 .sci-grid{
  background:linear-gradient(180deg,#071930,#051325);
  border:1px solid rgba(20,71,143,.14);
  box-shadow:0 30px 70px rgba(12,37,68,.18),inset 0 1px 0 rgba(255,255,255,.05)}

/* Links and closing block that sit on the light page */
body.page-science .sci-sec-2 .sci-link{color:#1577B0}
body.page-science .sci-sec-2 .sci-link:hover{color:#0E5A8C}
body.page-science .sci-close{border-top:1px solid #E4EBF3}
body.page-science .sci-close .sci-transition{color:#E8632A;font-size:25px;line-height:1.6;font-weight:700;font-style:normal}

/* Section 03: single composite image, sized to match figures 1 and 2 */
body.page-science .sci-sec-3 .sci-figure .sci-figcard{max-width:460px}
body.page-science .sci-sec-3 .sci-figcap{max-width:460px;justify-content:center;text-align:center}
body.page-science .sci-sec-1 .sci-figcap,
body.page-science .sci-sec-2 .sci-figcap{justify-content:center;text-align:center}
body.page-science .sci-sec-3 .sci-grid{align-items:center}
body.page-science .sci3-img{display:block;width:100%;height:auto}

/* ---- Homepage 'About': 'Local activation' in solid blue + dots drifting (slow) ---- */
#about .loc-anim-title .la-cold{
  background-image:none;-webkit-background-clip:border-box;background-clip:border-box;
  -webkit-text-fill-color:#1577C7;color:#1577C7;animation:none}
#about .ab-dot{opacity:.3}
@keyframes abFloat{
  0%{transform:translate(0,0) scale(1);opacity:.16}
  25%{transform:translate(11px,-17px) scale(1.1);opacity:.30}
  50%{transform:translate(22px,-30px) scale(1.22);opacity:.42}
  75%{transform:translate(9px,-13px) scale(1.08);opacity:.30}
  100%{transform:translate(0,0) scale(1);opacity:.16}
}

/* ---- Homepage mechanism image: floating dots over the image ---- */
#about .mech-inner{position:relative}
#about .mech-dots{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}
#about .mech-dots i{position:absolute;width:11px;height:11px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #8FD6FF, #1FA8E2 60%, #0E63B4 100%);
  box-shadow:0 0 10px rgba(31,168,226,.55);opacity:.5;animation:mechDot 9s ease-in-out infinite}
#about .mech-dots i:nth-child(1){left:9%;top:22%;animation-duration:8s;animation-delay:0s}
#about .mech-dots i:nth-child(2){left:20%;top:60%;animation-duration:10s;animation-delay:1.1s}
#about .mech-dots i:nth-child(3){left:30%;top:30%;animation-duration:9s;animation-delay:2.2s;width:8px;height:8px}
#about .mech-dots i:nth-child(4){left:38%;top:72%;animation-duration:11s;animation-delay:.6s}
#about .mech-dots i:nth-child(5){left:46%;top:18%;animation-duration:8.5s;animation-delay:3.1s;width:9px;height:9px}
#about .mech-dots i:nth-child(6){left:52%;top:55%;animation-duration:10.5s;animation-delay:1.8s}
#about .mech-dots i:nth-child(7){left:60%;top:35%;animation-duration:9.5s;animation-delay:2.6s;width:8px;height:8px}
#about .mech-dots i:nth-child(8){left:67%;top:68%;animation-duration:8s;animation-delay:.3s}
#about .mech-dots i:nth-child(9){left:73%;top:25%;animation-duration:11s;animation-delay:3.4s}
#about .mech-dots i:nth-child(10){left:80%;top:58%;animation-duration:9s;animation-delay:1.4s;width:9px;height:9px}
#about .mech-dots i:nth-child(11){left:86%;top:40%;animation-duration:10s;animation-delay:2.9s}
#about .mech-dots i:nth-child(12){left:15%;top:44%;animation-duration:9.5s;animation-delay:.9s;width:8px;height:8px}
#about .mech-dots i:nth-child(13){left:56%;top:80%;animation-duration:10.5s;animation-delay:2.1s}
#about .mech-dots i:nth-child(14){left:91%;top:20%;animation-duration:8.5s;animation-delay:1.6s;width:8px;height:8px}
@keyframes mechDot{
  0%{transform:translate(0,0) scale(1);opacity:.32}
  50%{transform:translate(16px,-20px) scale(1.25);opacity:.62}
  100%{transform:translate(0,0) scale(1);opacity:.32}
}
@media(prefers-reduced-motion:reduce){#about .mech-dots i{animation:none}}

/* ---- Homepage: floating KIN-112 complexes next to the bottle ---- */
#about .mech-orbs{position:absolute;inset:0;z-index:4;pointer-events:none;overflow:visible}
#about .mech-orb{position:absolute;display:block;background:url(assets/drug-complex.png) center/contain no-repeat;
  filter:drop-shadow(0 6px 16px rgba(20,60,110,.22));opacity:.94;will-change:transform;
  animation:mechOrb 12s ease-in-out infinite}
@keyframes mechOrb{
  0%{transform:translate(0,0) rotate(0deg)}
  50%{transform:translate(var(--dx,14px),var(--dy,-18px)) rotate(var(--rot,6deg))}
  100%{transform:translate(0,0) rotate(0deg)}
}
@media(prefers-reduced-motion:reduce){#about .mech-orb{animation:none}}

/* ---- Patients: KIN-112 vial beside the Localized treatment image ---- */
.pf-ico.pf-duo{gap:14px}
.pf-ico.pf-duo .pf-vial{width:auto;max-width:110px;height:auto;flex:0 0 auto;cursor:default;
  filter:drop-shadow(0 12px 24px rgba(20,50,110,.18));transition:transform .35s ease}
.pf-ico.pf-duo .pf-vial:hover{transform:translateY(-4px)}
.pf-step-hl .pf-ico.pf-duo .pf-shot{width:auto;max-width:340px;height:auto;flex:0 1 auto}
@media(max-width:520px){.pf-ico.pf-duo .pf-vial{max-width:84px}.pf-step-hl .pf-ico.pf-duo .pf-shot{max-width:260px}}

/* ---- Patients: white background for the localized-treatment card ---- */
.pf-step-hl{background:#fff;border-color:#E6EEF7;box-shadow:0 16px 40px -26px rgba(20,50,110,.16)}