/* Serpento site styles. Colours and fonts are set once in :root below; change them there. */
/* Layout: full-bleed dark hero and contact bookend calm, white-space-led content sections on a 12-col grid. */
:root{
  --bg:#F5F7F9; --surface:#FFFFFF; --ink:#0B1320; --muted:#5B6676; --line:#E0E5EB; --accent:#0B7A85; --accent-ink:#FFFFFF;
  --night:#060A11; --night-2:#0C131E; --night-line:#1B2533; --night-ink:#EDF1F5; --night-muted:#8C97A6; --glow:#5ED0D8;
  --f-display:"Red Hat Display", "Helvetica Neue", Arial, sans-serif;
  --f-text:"Red Hat Text", "Helvetica Neue", Arial, sans-serif;
  --f-mono:"Red Hat Mono", ui-monospace, Menlo, Consolas, monospace;
  --wrap:1240px; --gut:clamp(20px, 4.5vw, 64px);
  --ease:cubic-bezier(.2,.7,.1,1);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --bg:#090E15; --surface:#0F1620; --ink:#E8EDF2; --muted:#93A0AF; --line:#1D2733; --accent:#4CC3CC; --accent-ink:#04161A; color-scheme:dark }
}
:root[data-theme="dark"]{ --bg:#090E15; --surface:#0F1620; --ink:#E8EDF2; --muted:#93A0AF; --line:#1D2733; --accent:#4CC3CC; --accent-ink:#04161A; color-scheme:dark }

*{box-sizing:border-box}
[hidden]{display:none !important}
html{scroll-behavior:smooth}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--f-text); font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility}
a{color:inherit; text-decoration:none}
img{display:block}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:4px}
.wrap{max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut)}
h1,h2,h3{font-family:var(--f-display); margin:0; line-height:1.15; text-wrap:balance; font-weight:500}
p{margin:0}
.eyebrow{font-family:var(--f-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); display:flex; align-items:center; gap:12px}
.eyebrow::before{content:""; width:22px; height:1px; background:currentColor}
.h2{font-size:clamp(34px, 4.6vw, 60px); line-height:1.06; letter-spacing:-.025em; margin-top:20px; max-width:18ch}
.lead{font-size:clamp(17px, 1.4vw, 20px); color:var(--muted); max-width:56ch; margin-top:22px}
section{position:relative}
.pad{padding-block:clamp(88px, 11vw, 160px)}

.btn{display:inline-flex; align-items:center; gap:10px; font:600 15px/1 var(--f-text); padding:16px 22px; border-radius:999px; border:1px solid transparent; cursor:pointer; transition:transform .3s var(--ease), background .3s, color .3s, border-color .3s}
.btn svg{width:15px; height:15px; transition:transform .3s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.btn-light{background:var(--night-ink); color:var(--night)}
.btn-light:hover{background:#fff}
.btn-line{border-color:rgba(237,241,245,.28); color:var(--night-ink)}
.btn-line:hover{border-color:var(--night-ink)}
.btn-accent{background:var(--accent); color:var(--accent-ink)}

/* reveal: visible at rest, animated only when JS marks the page ready */
.js .rv{opacity:0; transform:translateY(24px); transition:opacity .9s var(--ease), transform .9s var(--ease)}
.js .rv.in{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){ .js .rv{opacity:1; transform:none; transition:none} html{scroll-behavior:auto} }

/* ---------------- nav ---------------- */
.nav{position:fixed; inset:0 0 auto 0; z-index:50; padding-top:env(safe-area-inset-top, 0px); transition:background .4s, border-color .4s, color .4s; color:var(--night-ink); border-bottom:1px solid transparent}
.nav .wrap{display:flex; align-items:center; justify-content:space-between; height:72px; gap:24px}
.nav.solid{background:color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter:saturate(1.4) blur(14px); -webkit-backdrop-filter:saturate(1.4) blur(14px); color:var(--ink); border-bottom-color:var(--line)}
.logo{display:flex; align-items:center; gap:11px; font-family:var(--f-display); font-weight:600; font-size:20px; letter-spacing:.02em}
.logo svg{width:26px; height:26px}
.links{display:flex; align-items:center; gap:clamp(18px, 2.6vw, 38px); font-size:15px}
.links a:not(.btn){opacity:.78; transition:opacity .2s}
.links a:not(.btn):hover{opacity:1}
.links .btn{padding:11px 18px; font-size:14px; background:currentColor}
.links .btn span{color:var(--night)}
.nav.solid .links .btn span{color:var(--bg)}
.menu-btn{display:none; background:none; border:0; color:inherit; padding:8px; cursor:pointer}
.menu-btn svg{width:26px; height:26px}
.sheet{position:fixed; inset:0; z-index:60; background:var(--night); color:var(--night-ink); padding:calc(24px + env(safe-area-inset-top, 0px)) var(--gut) 40px; display:flex; flex-direction:column; gap:8px}
.sheet .row{display:flex; justify-content:space-between; align-items:center; height:48px; margin-bottom:32px}
.sheet a.big{font-family:var(--f-display); font-size:36px; font-weight:500; padding-block:8px; border-bottom:1px solid var(--night-line)}
@media (max-width:860px){ .links{display:none} .menu-btn{display:block} }

/* ---------------- hero ---------------- */
.hero{background:var(--night); color:var(--night-ink); height:320svh; position:relative; overflow:clip}
.hero-pin{position:sticky; top:0; height:100svh; min-height:620px; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end; --p:0}
.hero-pin .wrap{padding-top:calc(110px + env(safe-area-inset-top, 0px)) !important; padding-bottom:clamp(28px, 4vw, 48px) !important; opacity:clamp(0, calc((var(--p) - .5) * 3.4), 1); transform:translateY(calc((1 - min(1, var(--p) * 1.25)) * 48px))}
.hero-pin.pre .wrap{visibility:hidden}
.hero-pin::before{content:""; position:absolute; inset:0; z-index:1; pointer-events:none; opacity:clamp(0, calc((var(--p) - .45) * 2.8), 1); background:linear-gradient(90deg, rgba(6,10,17,.82) 0%, rgba(6,10,17,.6) 38%, rgba(6,10,17,.15) 70%, rgba(6,10,17,0) 100%)}
@media (max-width:760px){ .hero-pin::before{background:linear-gradient(180deg, rgba(6,10,17,.55), rgba(6,10,17,.8))} }
.enter{position:absolute; left:50%; bottom:calc(36px + env(safe-area-inset-bottom, 0px)); translate:-50% 0; z-index:3; display:flex; flex-direction:column; align-items:center; gap:14px; color:var(--night-ink); font-family:var(--f-mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; opacity:clamp(0, calc(1 - var(--p) * 5), 1); pointer-events:none; text-align:center; width:min(90vw, 520px)}
.enter span{white-space:nowrap}
.enter b{font-family:var(--f-display); font-weight:500; font-size:clamp(18px, 2vw, 24px); letter-spacing:-.01em; text-transform:none}
.enter i{width:22px; height:36px; border:1.5px solid rgba(237,241,245,.5); border-radius:12px; position:relative}
.enter i::after{content:""; position:absolute; left:50%; top:7px; width:3px; height:7px; margin-left:-1.5px; border-radius:2px; background:var(--glow); animation:wheel 1.8s var(--ease) infinite}
@keyframes wheel{0%{transform:translateY(0); opacity:1}70%{transform:translateY(10px); opacity:0}100%{opacity:0}}
@media (prefers-reduced-motion: reduce){ .hero{height:auto} .hero-pin{position:relative} .hero-pin .wrap{opacity:1; transform:none} .hero-pin.pre .wrap{visibility:visible} .enter{display:none} }
#field, #film{position:absolute; inset:0; width:100%; height:100%}
#film{z-index:0}
.hero .wrap{position:relative; z-index:2; width:100%; padding-top:150px; padding-bottom:clamp(48px, 7vw, 88px)}
.hero .eyebrow{color:var(--glow)}
.hero h1{font-size:clamp(36px, min(5.4vw, 7.5vh), 80px); line-height:1; letter-spacing:-.032em; font-weight:500; max-width:15ch; margin-top:26px}
.hero h1 span{color:var(--night-muted)}
.hero .lead{color:var(--night-muted); margin-top:28px; max-width:50ch}
.hero .actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:40px}
.hero-foot{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; margin-top:clamp(40px, 5vw, 72px); padding-top:24px; border-top:1px solid var(--night-line); font-size:14px; color:var(--night-muted)}
.hero-foot dl{display:flex; gap:clamp(24px, 5vw, 72px); margin:0; flex-wrap:wrap}
.hero-foot dt{font-family:var(--f-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#5F6B7B}
.hero-foot dd{margin:6px 0 0; color:var(--night-ink)}
.scroll-cue{display:flex; align-items:center; gap:10px; font-family:var(--f-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase}
.scroll-cue i{width:1px; height:36px; background:linear-gradient(var(--glow), transparent); animation:cue 2.2s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0); transform-origin:top}50%{transform:scaleY(1); transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0); transform-origin:bottom}}

/* ---------------- pages ---------------- */
.page-head{position:relative; background:var(--night); color:var(--night-ink); overflow:hidden; padding-top:calc(150px + env(safe-area-inset-top, 0px)); padding-bottom:clamp(64px, 8vw, 110px); min-height:min(560px, 80svh); display:flex; align-items:flex-end}
.page-head .wrap{position:relative; z-index:2; width:100%}
.page-head .eyebrow{color:var(--glow)}
.page-head h1{font-size:clamp(40px, 5.6vw, 80px); line-height:1.02; letter-spacing:-.032em; max-width:16ch; margin-top:24px}
.page-head .lead{color:var(--night-muted)}
.fieldwrap::after{content:""; position:absolute; inset:0; pointer-events:none; z-index:1; background:
  radial-gradient(120% 70% at 20% 30%, rgba(6,10,17,.92) 0%, rgba(6,10,17,.55) 45%, rgba(6,10,17,0) 75%),
  linear-gradient(180deg, rgba(6,10,17,.7) 0%, rgba(6,10,17,0) 30%, rgba(6,10,17,0) 75%, var(--night) 100%)}
.contact.fieldwrap::after{background:linear-gradient(180deg, rgba(6,10,17,.55), rgba(6,10,17,.88) 55%, var(--night))}
.contact .wrap{position:relative; z-index:2}
.page-top{padding-top:calc(160px + env(safe-area-inset-top, 0px))}
.subnav .wrap{display:flex; gap:28px}
.subnav{padding-block:22px; border-bottom:1px solid var(--line); font-size:15px; position:sticky; top:calc(72px + env(safe-area-inset-top, 0px)); z-index:20; background:var(--bg)}
.subnav a{color:var(--muted)}
.subnav a:hover{color:var(--ink)}
.next{display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:10px 24px; padding-block:48px clamp(64px, 8vw, 110px); border-top:1px solid var(--line); color:var(--ink)}
.next .eyebrow{grid-column:1 / -1}
.next b{font-family:var(--f-display); font-weight:500; font-size:clamp(30px, 4vw, 56px); letter-spacing:-.025em; line-height:1.05; transition:color .3s}
.next svg{width:clamp(28px, 3vw, 44px); height:clamp(28px, 3vw, 44px); transition:transform .4s var(--ease)}
.next:hover b{color:var(--accent)}
.next:hover svg{transform:translateX(8px)}
.links a[aria-current="page"]:not(.btn){opacity:1; box-shadow:0 1.5px 0 currentColor}

/* ---------------- statement ---------------- */
.statement p{font-family:var(--f-display); font-size:clamp(28px, 3.7vw, 50px); line-height:1.2; letter-spacing:-.02em; font-weight:500; max-width:24ch}
.statement .w{transition:opacity .25s linear}

/* ---------------- lab + company ---------------- */
.duo{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:20px; margin-top:64px}
.panel{background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:clamp(28px, 3.4vw, 48px); display:flex; flex-direction:column; min-height:380px; position:relative; overflow:hidden; transition:border-color .4s, transform .5s var(--ease)}
.panel:hover{border-color:color-mix(in srgb, var(--accent) 45%, var(--line)); transform:translateY(-4px)}
.panel .tag{font-family:var(--f-mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.panel h3{font-size:clamp(28px, 2.8vw, 38px); letter-spacing:-.02em; margin-top:18px}
.panel p{color:var(--muted); margin-top:16px; max-width:44ch}
.panel ul{list-style:none; padding:0; margin:28px 0 0; display:grid; gap:10px; font-size:15px}
.panel li{display:flex; gap:12px; align-items:baseline}
.panel li::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--accent); flex:none; transform:translateY(-2px)}
.panel .more{margin-top:auto; padding-top:32px; display:inline-flex; gap:10px; align-items:center; font-weight:600; color:var(--accent)}
.panel .more svg{width:15px; height:15px; transition:transform .3s var(--ease)}
.panel:hover .more svg{transform:translateX(4px)}
.panel .art{position:absolute; right:-40px; top:-40px; width:220px; height:220px; opacity:.5; pointer-events:none}
@media (max-width:820px){ .duo{grid-template-columns:minmax(0,1fr)} .panel{min-height:0} }

/* ---------------- approach (sticky) ---------------- */
.approach{background:var(--surface); border-block:1px solid var(--line)}
.ap-grid{display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); gap:clamp(40px, 7vw, 120px)}
.ap-head{position:sticky; top:120px; align-self:start}
.ap-progress{margin-top:40px; height:2px; background:var(--line); border-radius:2px; overflow:hidden; max-width:320px}
.ap-progress i{display:block; height:100%; width:var(--p, 0%); background:var(--accent); transition:width .3s linear}
.ap-count{font-family:var(--f-mono); font-size:13px; color:var(--muted); margin-top:14px}
.stages{list-style:none; margin:0; padding:0}
.stage{display:grid; grid-template-columns:64px minmax(0,1fr); gap:20px; padding-block:34px; border-top:1px solid var(--line); transition:opacity .5s}
.stage:last-child{border-bottom:1px solid var(--line)}
.js .stage{opacity:.38}
.js .stage.on{opacity:1}
.stage .n{font-family:var(--f-mono); font-size:13px; color:var(--accent); padding-top:6px}
.stage h3{font-size:clamp(22px, 2vw, 28px); letter-spacing:-.01em}
.stage p{color:var(--muted); margin-top:8px; max-width:48ch}
@media (max-width:860px){ .ap-grid{grid-template-columns:minmax(0,1fr)} .ap-head{position:static} .js .stage{opacity:1} }

/* ---------------- research ---------------- */
.areas{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:0; margin-top:64px; border-top:1px solid var(--line)}
.area{padding:32px 28px 8px 0; min-width:0}
.area + .area{padding-left:28px; border-left:1px solid var(--line)}
.area svg{width:40px; height:40px; color:var(--accent)}
.area h3{font-size:21px; margin-top:28px; letter-spacing:-.01em}
.area p{color:var(--muted); font-size:15.5px; margin-top:10px}
@media (max-width:1000px){ .areas{grid-template-columns:repeat(2, minmax(0,1fr))} .area:nth-child(3){padding-left:0; border-left:0} .area{padding-bottom:32px; border-bottom:1px solid var(--line)} }
@media (max-width:560px){ .areas{grid-template-columns:minmax(0,1fr)} .area, .area + .area{padding-left:0; border-left:0} }

/* ---------------- numbers ---------------- */
.numbers{display:grid; grid-template-columns:minmax(0,1.2fr) repeat(3, minmax(0,1fr)); gap:32px; align-items:end; padding-block:56px; border-block:1px solid var(--line)}
.numbers p.k{font-family:var(--f-display); font-size:clamp(22px, 2.2vw, 28px); line-height:1.25; letter-spacing:-.01em; max-width:20ch}
.num b{display:block; font-family:var(--f-display); font-weight:500; font-size:clamp(48px, 6vw, 84px); line-height:1; letter-spacing:-.04em; font-variant-numeric:tabular-nums}
.num span{display:block; color:var(--muted); font-size:15px; margin-top:10px}
@media (max-width:860px){ .numbers{grid-template-columns:repeat(3, minmax(0,1fr))} .numbers p.k{grid-column:1 / -1} }

/* ---------------- publications ---------------- */
.pubs{margin-top:56px; border-top:1px solid var(--ink)}
.pub{display:grid; grid-template-columns:110px minmax(0,1fr) auto; gap:28px; padding-block:30px; border-bottom:1px solid var(--line); align-items:start}
.pub .yr{font-family:var(--f-mono); font-size:14px; color:var(--muted); padding-top:4px}
.pub h3{font-size:clamp(19px, 1.7vw, 23px); line-height:1.35; letter-spacing:-.01em}
.pub .by{color:var(--muted); font-size:15px; margin-top:8px}
.chip{font-family:var(--f-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; padding:7px 11px; border:1px solid var(--line); border-radius:999px; color:var(--muted); white-space:nowrap}
.pub.soon{color:var(--muted)}
@media (max-width:680px){ .pub{grid-template-columns:minmax(0,1fr); gap:10px} .pub .chip{justify-self:start} }

/* ---------------- team ---------------- */
.team-head{display:flex; justify-content:space-between; align-items:flex-end; gap:32px; flex-wrap:wrap}
.group{margin-top:64px}
.group > h3{font-family:var(--f-mono); font-size:12px; font-weight:400; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); padding-bottom:16px; border-bottom:1px solid var(--line); margin-bottom:28px}
.people{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:28px 20px}
.person{min-width:0}
.ph{display:block; aspect-ratio:4 / 5; border-radius:14px; overflow:hidden; background:var(--line); position:relative; max-width:100%}
.ph img{width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.04); transform:scale(1.02); transition:filter .6s var(--ease), transform .8s var(--ease)}
.person:hover .ph img, .person:focus-within .ph img{filter:none; transform:scale(1.06)}
.ph .mono{position:absolute; inset:0; display:grid; place-items:center; font-family:var(--f-display); font-size:44px; font-weight:500; color:var(--muted); background:linear-gradient(160deg, var(--surface), var(--line))}
.ph .ext{position:absolute; right:12px; bottom:12px; width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.92); color:#0B1320; display:grid; place-items:center; opacity:0; transform:translateY(6px); transition:opacity .4s, transform .4s var(--ease)}
.person:hover .ext, .person:focus-within .ext{opacity:1; transform:none}
.ext svg{width:16px; height:16px}
.person h4{font-family:var(--f-display); font-size:19px; font-weight:600; margin:18px 0 0; letter-spacing:-.005em}
.person .role{font-size:14.5px; color:var(--ink); margin-top:4px; line-height:1.45}
.person .focus{font-size:14.5px; color:var(--muted); margin-top:6px; line-height:1.5}
.person .lnk{display:inline-flex; align-items:center; gap:7px; margin-top:12px; font-size:14px; font-weight:600; color:var(--accent)}
.person .lnk svg{width:14px; height:14px}
.students{display:flex; flex-wrap:wrap; gap:10px}
.students span{padding:10px 18px; border:1px solid var(--line); border-radius:999px; background:var(--surface); font-weight:500; font-size:15px}
@media (min-width:1101px){ .people.five{grid-template-columns:repeat(5, minmax(0,1fr))} }
@media (min-width:1001px){ .people.three{grid-template-columns:repeat(3, minmax(0,1fr)); max-width:calc(75% - 5px)} }
@media (max-width:1000px){ .people{grid-template-columns:repeat(3, minmax(0,1fr))} }
@media (max-width:700px){ .people{grid-template-columns:repeat(2, minmax(0,1fr))} .person h4{font-size:17px} }

/* ---------------- contact ---------------- */
.contact{background:var(--night); color:var(--night-ink); overflow:hidden}
.contact .eyebrow{color:var(--glow)}
.contact .lead{color:var(--night-muted)}
.ct-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(40px, 7vw, 110px)}
.aud{display:grid; gap:0; margin-top:48px; border-top:1px solid var(--night-line)}
.aud div{display:grid; grid-template-columns:150px minmax(0,1fr); gap:20px; padding-block:20px; border-bottom:1px solid var(--night-line); font-size:15.5px}
.aud b{font-weight:600}
.aud span{color:var(--night-muted)}
.mail{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:40px}
.mail code{font-family:var(--f-mono); font-size:16px; user-select:all; overflow-wrap:anywhere}
.mail button{background:transparent; color:var(--night-ink); border:1px solid var(--night-line); border-radius:999px; padding:9px 15px; font:500 13px var(--f-text); cursor:pointer}
.mail button:hover{border-color:var(--night-muted)}
form{background:var(--night-2); border:1px solid var(--night-line); border-radius:20px; padding:clamp(24px, 3vw, 40px); display:grid; gap:20px; align-self:start}
.field{display:grid; gap:8px}
.field label, legend{font-size:13px; color:var(--night-muted)}
fieldset{border:0; margin:0; padding:0}
legend{margin-bottom:10px}
.seg{display:flex; flex-wrap:wrap; gap:8px}
.seg input{position:absolute; opacity:0; pointer-events:none}
.seg label{padding:9px 15px; border:1px solid var(--night-line); border-radius:999px; font-size:14px; cursor:pointer; color:var(--night-ink); transition:background .2s, border-color .2s}
.seg input:checked + label{background:var(--night-ink); color:var(--night); border-color:var(--night-ink)}
.seg input:focus-visible + label{outline:2px solid var(--glow); outline-offset:2px}
.field input, .field textarea{width:100%; font:16px var(--f-text); color:var(--night-ink); background:transparent; border:0; border-bottom:1px solid var(--night-line); padding:10px 0; border-radius:0; resize:vertical}
.field input:focus, .field textarea:focus{outline:none; border-bottom-color:var(--glow)}
.note{font-size:14px; color:var(--night-muted); min-height:1.4em}
@media (max-width:900px){ .ct-grid{grid-template-columns:minmax(0,1fr)} .aud div{grid-template-columns:minmax(0,1fr); gap:4px} }

/* ---------------- footer ---------------- */
footer{background:var(--night); color:var(--night-muted); border-top:1px solid var(--night-line); font-size:14px; padding-bottom:env(safe-area-inset-bottom, 0px)}
.ft{display:grid; grid-template-columns:minmax(0,2fr) repeat(2, minmax(0,1fr)); gap:40px; padding-block:64px 40px}
.ft .logo{color:var(--night-ink)}
.ft p{margin-top:16px; max-width:40ch}
.ft h5{font-family:var(--f-mono); font-weight:400; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#5F6B7B; margin:0 0 14px}
.ft ul{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.ft a:hover{color:var(--night-ink)}
.legal{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; padding-block:24px 32px; border-top:1px solid var(--night-line); font-size:13px}
@media (max-width:760px){ .ft{grid-template-columns:minmax(0,1fr)} }
.pub h3 a{text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:4px; transition:text-decoration-color .2s}
.pub h3 a:hover{text-decoration-color:var(--accent)}
.ft a{transition:color .2s}
.nf{min-height:100svh; display:flex; align-items:flex-end}

/* hero on short or narrow screens: keep the headline clear of the menu bar */
@media (max-height:940px){ .hero .lead{margin-top:20px} .hero .actions{margin-top:28px} .hero-foot{margin-top:32px} .hero h1{margin-top:18px} }
@media (max-height:860px), (max-width:760px){ .hero-foot dl{display:none} .hero-foot{border-top:0; padding-top:0; margin-top:24px} }
@media (max-width:760px){ .hero .lead{font-size:16px} .hero .actions .btn{padding:14px 18px} }

/* ---------------- the access problem (scroll animation, home) ---------------- */
.concept{background:var(--night); color:var(--night-ink); height:480svh; position:relative}
.concept-pin{position:sticky; top:0; height:100svh; min-height:620px; display:flex; align-items:center; overflow:hidden; padding-top:72px}
.concept-grid{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(32px,5vw,80px); align-items:center; width:100%}
.concept .eyebrow{color:var(--glow)}
.concept h2{font-size:clamp(30px,3.6vw,50px); line-height:1.08; letter-spacing:-.025em; margin-top:18px; max-width:16ch}
.concept .lead{color:var(--night-muted); font-size:clamp(16px,1.2vw,18px); margin-top:18px; max-width:44ch}
.cstages{list-style:none; margin:32px 0 0; padding:0; border-top:1px solid var(--night-line)}
.cstage{display:grid; grid-template-columns:44px minmax(0,1fr); gap:12px; padding-block:18px; border-bottom:1px solid var(--night-line); opacity:.34; transition:opacity .5s}
.cstage.on{opacity:1}
.cstage .n{font-family:var(--f-mono); font-size:12px; color:var(--glow); padding-top:5px}
.cstage h3{font-size:19px; letter-spacing:-.01em}
.cstage p{color:var(--night-muted); font-size:15px; margin-top:6px; line-height:1.55}
.cstage.on:last-child h3{color:var(--glow)}
.c-progress{margin-top:22px; height:2px; background:var(--night-line); border-radius:2px; overflow:hidden; max-width:320px}
.c-progress i{display:block; height:100%; width:var(--p,0%); background:var(--glow)}
.concept-stage{position:relative; height:min(78svh,760px); border:1px solid var(--night-line); border-radius:20px; background:radial-gradient(120% 90% at 50% 20%, #0C141F 0%, #060A11 70%); overflow:hidden}
#concept{position:absolute; inset:0; width:100%; height:100%}
.concept-tag{position:absolute; left:18px; top:16px; font-family:var(--f-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--night-muted); background:rgba(6,10,17,.7); border:1px solid var(--night-line); padding:7px 11px; border-radius:999px}
@media (max-width:860px){
  .concept{height:420svh}
  .concept-pin{align-items:flex-start; padding-top:calc(84px + env(safe-area-inset-top,0px))}
  .concept-grid{grid-template-columns:minmax(0,1fr); gap:14px}
  .concept h2{font-size:26px; margin-top:10px}
  .concept .lead, .c-progress{display:none}
  .cstages{margin-top:14px}
  .cstage{display:none; padding-block:12px}
  .cstage.on{display:grid}
  .concept-stage{order:2; height:min(56svh,520px)}
}
@media (prefers-reduced-motion: reduce){
  .concept{height:auto} .concept-pin{position:relative; height:auto; padding-block:96px}
  .cstage{opacity:1; display:grid}
}