:root{
  /* two brand colours only: navy + crystal green. Everything else is a tint of them. The logo itself is all ivory (--ivory). */
  --navy:#1f3645; --navy-d:#152733; --navy-l:#2a4656;
  --green:#85a98d; --green-l:#cfe0d2; --green-d:#4d7656; /* green for text on light surfaces (AA) */
  --paper:#f4f5f2; --white:#fff;
  --ink:#1f3645; --muted:#5d6f78; --rule:rgba(31,54,69,.14);
  --ivory:#f7efe9; /* the logo, all one colour: header lockup and crystal (RL 2026-10-20) */
  --on-navy:#eef2ef; --on-navy-m:rgba(238,242,239,.62); --rule-n:rgba(238,242,239,.14);
  /* two faces only: Area Inktrap Medium for headlines, Area Normal Regular for text.
     Variation comes from caps or colour, never from another face or weight. */
  --sans:"area-normal",system-ui,-apple-system,"Segoe UI",sans-serif;
  --head:"area-inktrap","area-normal",system-ui,sans-serif;
  --g:clamp(16px,4vw,64px); --navh:clamp(72px,4.2vw,104px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{background:var(--paper);color:var(--ink);font:400 17px/1.55 var(--sans)}
img,video,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;color:inherit}
sub{font-size:.62em;vertical-align:-.15em;line-height:0}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,canvas:focus-visible{outline:2px solid var(--green);outline-offset:3px}
::selection{background:var(--green);color:var(--navy)}
.wrap{max-width:1360px;margin:0 auto;padding:0 var(--g)}
.cap{font-size:12.5px;letter-spacing:.08em;text-transform:uppercase}
b,strong{font-weight:400}
/* every headline-level element shares one face + weight */
h1,h2,h3,.hd,.stats b,.svc .what,.steps button b,.tool .q,.door b,.result b,.rec b,.road b,.people b,.inbox b,footer .lock,.hero .slogan{font-family:var(--head);font-weight:500}
h1,h2,h3{letter-spacing:-.025em;line-height:1.04}
h2{font-size:clamp(2.2rem,4.6vw,4rem);max-width:16ch}
h3{font-size:1.5rem;letter-spacing:-.015em;line-height:1.15}
.lead{font-size:clamp(1.08rem,1.4vw,1.3rem);line-height:1.5;max-width:46ch;color:var(--muted)}
.navy .lead{color:var(--on-navy-m)}
section{padding:clamp(88px,12vw,168px) 0}
.navy{background:var(--navy);color:var(--on-navy)}
.white{background:var(--white)}
.btn{display:inline-flex;align-items:center;gap:12px;height:48px;padding:0 22px;border:1px solid currentColor;font-size:15px;font-weight:400;cursor:pointer;background:none;transition:background .2s,color .2s}
.btn svg,.go svg,.inbox svg,.door svg{width:16px;height:16px;flex:none}
.btn svg{transition:transform .2s}
.btn:hover svg{transform:translateX(3px)}
.btn.pri{background:var(--green);border-color:var(--green);color:var(--navy)}
.btn.pri:hover{background:var(--green-l);border-color:var(--green-l)}
.btn.ghost:hover{background:var(--on-navy);color:var(--navy)}
.paper .btn.ghost:hover,.white .btn.ghost:hover{background:var(--navy);color:var(--paper)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* nav */
.nav{position:fixed;inset:0 0 auto;z-index:50;transition:background .3s,border-color .3s;border-bottom:1px solid transparent;--nav:1}
.nav::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(21,39,51,.55),rgba(21,39,51,0));opacity:var(--nav);pointer-events:none}
.nav ul,.nav .btn,.nav .lang{opacity:var(--nav);transform:translateY(calc((1 - var(--nav)) * -8px))}
.nav.hide-links ul,.nav.hide-links .btn,.nav.hide-links .lang{pointer-events:none}
.nav.solid{background:rgba(21,39,51,.94);backdrop-filter:blur(10px);border-bottom-color:var(--rule-n)}
.nav .wrap{position:relative;display:flex;align-items:center;justify-content:space-between;height:72px;color:var(--on-navy)}
.brand{display:flex;align-items:center;color:var(--ivory);position:relative;transform-origin:0 0;will-change:transform}
.brand .lg{height:34px;width:auto}
.nav ul{display:flex;gap:34px;list-style:none;font-size:14.5px}
.nav ul a{opacity:.75;transition:opacity .2s}.nav ul a:hover{opacity:1}
.nav .btn{height:40px;padding:0 16px;font-size:14px}
.nav ul a[aria-current]{opacity:1;color:var(--green)}
.nav-end{display:flex;align-items:center;gap:clamp(18px,1.5vw,32px)}
/* language switch: EN | DE, current language in green */
.lang{display:flex;align-items:center;font-size:clamp(13px,.75vw,17px);letter-spacing:.08em}
.lang a{opacity:.6;padding:8px 2px;transition:opacity .2s}.lang a:hover{opacity:1}
.lang a[aria-current]{opacity:1;color:var(--green)}
.lang i{width:1px;height:1em;background:currentColor;opacity:.35;margin:0 9px}
.menu{display:none;width:44px;height:44px;place-items:center;background:none;border:1px solid var(--rule-n);color:var(--on-navy);cursor:pointer;opacity:var(--nav)}
.menu svg{width:18px;height:18px}
@media (max-width:900px){
 .nav ul{position:absolute;top:var(--navh);left:0;right:0;flex-direction:column;gap:0;padding:8px var(--g) 20px;background:var(--navy-d);border-bottom:1px solid var(--rule-n);display:none}
 .nav ul a{display:block;padding:14px 0;font-size:18px;border-bottom:1px solid var(--rule-n)}
 .nav.open ul{display:flex}
 .menu{display:grid}
 .nav .wrap>.btn,.nav .nav-end>.btn{display:none}
}
body.sub .nav{background:rgba(21,39,51,.96);border-bottom-color:var(--rule-n)}

/* hero */
/* the hero pins for one extra viewport: logo glides into the header, then the text appears. Progress lives in --p (0..1). */
.hero{position:relative;height:100svh;min-height:560px;background:var(--navy-d);color:var(--on-navy);--p:0}
.hero .stage{position:sticky;top:0;height:100svh;min-height:560px;overflow:hidden}
.hero video,.hero .tint{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* navy overlay: almost off while the video plays in colour, full once the hero text has come in (--tint 0..1) */
.hero .tint{background:linear-gradient(180deg,rgba(21,39,51,.35) 0%,rgba(21,39,51,0) 30%,rgba(21,39,51,.55) 65%,rgba(21,39,51,.9) 100%),#5d7f92;mix-blend-mode:multiply;opacity:calc(.12 + .83 * var(--tint,0))}
.hero .in{position:relative;height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:clamp(40px,7vh,84px)}
.hero h1{font-size:clamp(2.8rem,7.4vw,6.6rem);max-width:12ch;letter-spacing:-.035em;line-height:.98}
.hero h1 em{font-style:normal;color:var(--green)}
.hero .row{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-top:34px;flex-wrap:wrap}
.hero .lead{color:rgba(238,242,239,.78);max-width:40ch}
.hero .ctas{display:flex;gap:12px;flex-wrap:wrap}
.hero .ht{opacity:0;transform:translateY(24px)}
.hero .cue{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--on-navy);text-shadow:0 1px 8px rgba(21,39,51,.6);opacity:calc(1 - var(--p) * 6)}
.hero .cue i{display:block;width:1px;height:34px;background:linear-gradient(var(--on-navy-m),transparent);animation:cue 2s ease-in-out 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}}
@media (prefers-reduced-motion:reduce){.hero{height:100svh}.hero .ht{opacity:1;transform:none}.hero .cue{display:none}}

.hero .claim-lk{display:block;font-size:clamp(2.6rem,6.4vw,6rem);letter-spacing:-.04em;line-height:.95;max-width:none}
.hero .claim-lk svg.sup,.page-head h1 svg.sup{display:inline-block;height:.42em;width:auto;margin-left:.07em;vertical-align:.5em;color:var(--ivory)}
.hero .slogan{font-size:clamp(1.35rem,2.6vw,2.2rem);font-weight:500;letter-spacing:-.02em;line-height:1.15;margin-top:18px;max-width:30ch;color:var(--green-l)}
.svc .st{color:var(--ink)}.svc .st.now::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--green);margin-right:6px;vertical-align:1px}
.svc .ph.render.tesvis{display:block}
/* mission */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,7vw,120px);align-items:start}
@media (max-width:900px){.split{grid-template-columns:1fr}}
.mission h2{margin:0}
/* text column starts at the cap height of the headline */
.mission .split>div:last-child{padding-top:.55rem}
.loop{margin-top:56px;width:100%;height:auto}
@media (max-width:700px){.loop{display:none}}
.stats{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--rule);margin-top:clamp(64px,8vw,110px)}
.stats div{padding:26px 22px 0 0}
.stats b{display:block;font-size:clamp(2rem,3.4vw,3rem);font-weight:500;letter-spacing:-.03em;line-height:1}
.stats span{display:block;margin-top:10px;font-size:14.5px;color:var(--muted);max-width:22ch}
@media (max-width:800px){.stats{grid-template-columns:1fr 1fr;row-gap:30px}}

/* services */
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap;margin-bottom:clamp(48px,6vw,80px)}
.svc{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--rule)}
.svc article{padding:34px 28px 30px;display:flex;flex-direction:column;gap:18px;border-right:1px solid var(--rule)}

.svc article:last-child{border-right:0}
.svc .ph{aspect-ratio:4/3;background:var(--navy) center/cover;position:relative;overflow:hidden}
.svc .ph img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05);mix-blend-mode:luminosity;opacity:.9;transition:transform .8s}
.svc article:hover .ph img{transform:scale(1.035)}
.svc .ph .tag{position:absolute;left:12px;bottom:10px;color:var(--on-navy);background:rgba(21,39,51,.7);padding:4px 8px;font-size:11px}
.svc .ph.render{display:grid;place-items:center;background:var(--navy)}
.svc .nm{display:flex;align-items:baseline;justify-content:space-between}
.svc .nm h3{font-size:2.6rem;letter-spacing:-.035em}
.svc .what{font-size:1.15rem;font-weight:500}
.svc p{color:var(--muted);font-size:15.5px}
.svc ul{list-style:none;font-size:15px;border-top:1px solid var(--rule)}
.svc li{padding:9px 0 9px 16px;border-bottom:1px solid var(--rule);position:relative}
.svc li::before{content:"";position:absolute;left:0;top:18px;width:6px;height:6px;background:var(--green)}
.svc .int{margin-top:auto;color:var(--muted);padding-top:6px}
.svc .int b{color:var(--ink);font-weight:400}
.svc .go{display:inline-flex;align-items:center;gap:10px;font-size:15px}
.svc .go svg{width:15px}
@media (max-width:960px){.svc{grid-template-columns:1fr}.svc article{padding:34px 0;border-right:0;border-bottom:1px solid var(--rule)}}

/* lab map */
.map{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(32px,5vw,80px);align-items:center}
@media (max-width:960px){.map{grid-template-columns:1fr}}
#surf{width:100%;aspect-ratio:1.25;cursor:grab;touch-action:pan-y}
#surf:active{cursor:grabbing}
.steps{display:flex;flex-direction:column;border-top:1px solid var(--rule-n);margin-top:36px}
.steps button{display:grid;grid-template-columns:44px 1fr;gap:4px 10px;text-align:left;padding:18px 0;border:0;border-bottom:1px solid var(--rule-n);background:none;cursor:pointer;color:var(--on-navy-m);transition:color .2s}
.steps button .n{font-size:12.5px;letter-spacing:.08em;padding-top:4px}
.steps button b{font-weight:500;font-size:1.1rem;color:inherit}
.steps button span.t{grid-column:2;font-size:14.5px;line-height:1.5;max-height:0;overflow:hidden;transition:max-height .5s}
.steps button.on{color:var(--on-navy)}
.steps button.on .n{color:var(--green)}
.steps button.on span.t{max-height:120px;color:var(--on-navy-m)}
.legend{display:flex;gap:22px;margin-top:22px;color:var(--on-navy-m);font-size:13.5px;flex-wrap:wrap}
.legend i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:8px;vertical-align:-1px}
.note{font-size:13px;color:var(--on-navy-m);margin-top:14px}

/* discovery: intro and steps on top, the tool below at full width on the page background */
.disc .side{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(32px,6vw,110px);align-items:end}
@media (max-width:960px){.disc .side{grid-template-columns:1fr}}
.disc .side .lead{margin-top:22px;max-width:40ch}
.funnel{list-style:none;border-top:1px solid var(--rule)}
.funnel li{display:grid;grid-template-columns:44px 1fr;padding:14px 0;border-bottom:1px solid var(--rule);color:var(--muted);font-size:15px;transition:color .3s}
.funnel li .cap{padding-top:2px}
.funnel li.on{color:var(--ink)}.funnel li.on .cap{color:var(--ink)}
.tool{border-top:1px solid var(--ink);margin-top:clamp(48px,6vw,80px);padding-top:clamp(28px,3vw,44px);display:flex;flex-direction:column}
.t-grid{display:grid;grid-template-columns:minmax(260px,.85fr) 2.15fr;gap:clamp(28px,4.5vw,72px);align-items:start}
@media (max-width:960px){.t-grid{grid-template-columns:1fr}}
.t-grid .esc,.t-grid .result{margin-top:0}
.t-narrow{max-width:780px}
.tool .q{font-size:1.6rem;font-weight:500;letter-spacing:-.02em;line-height:1.15;margin-bottom:26px}
.doors{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-content:start}
@media (max-width:800px){.doors{grid-template-columns:1fr}}
.door{display:grid;grid-template-columns:1fr auto;align-items:center;text-align:left;padding:26px 24px;min-height:120px;border:1px solid var(--rule);background:none;cursor:pointer;transition:border-color .2s,background .2s}
.door:hover{border-color:var(--navy);background:rgba(31,54,69,.04)}
.door b{font-size:1.2rem;font-weight:500}
.door span{display:block;font-size:14.5px;color:var(--muted);margin-top:3px}
.door svg{width:18px}
.fld{margin-bottom:26px}
.fld label.l{display:flex;justify-content:space-between;font-size:14px;color:var(--muted);margin-bottom:10px}
.fld label.l output{color:var(--ink);font-size:14px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{min-height:44px;padding:9px 14px;border:1px solid var(--rule);background:none;cursor:pointer;font-size:14.5px;transition:all .2s}
.chip:hover{border-color:var(--navy)}
.chip.on{background:var(--navy);border-color:var(--navy);color:var(--on-navy)}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:2px;background:linear-gradient(90deg,var(--navy) var(--p,50%),var(--rule) var(--p,50%));outline:none;margin:10px 0}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--white);border:2px solid var(--navy);cursor:pointer}
input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--white);border:2px solid var(--navy);cursor:pointer}
.ends{display:flex;justify-content:space-between;font-size:12.5px;color:var(--muted)}
.result{margin-top:auto;background:var(--navy);color:var(--on-navy);padding:26px 28px;display:grid;grid-template-columns:1fr 1fr;gap:20px}
.result b{display:block;font-size:clamp(1.7rem,2.6vw,2.3rem);font-weight:500;letter-spacing:-.03em;line-height:1.05;margin-top:8px}
.result .cap{color:var(--on-navy-m)}
.result .fine{grid-column:1/-1;font-size:12.5px;color:var(--on-navy-m);border-top:1px solid var(--rule-n);padding-top:14px}
.tool .nav2{display:flex;justify-content:space-between;align-items:center;margin-top:22px;gap:12px;flex-wrap:wrap}
.back{background:none;border:0;cursor:pointer;color:var(--muted);font-size:14.5px}
.back:hover{color:var(--ink)}
.rec{border-left:2px solid var(--green);padding:4px 0 4px 20px;margin-bottom:26px}
.rec .cap{color:var(--muted)}
.rec b{display:block;font-size:1.35rem;font-weight:500;margin:6px 0 4px}
.rec p{font-size:15px;color:var(--muted)}
.form{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form .full{grid-column:1/-1}
.form input,.form select,.form textarea{width:100%;height:48px;padding:0 14px;border:1px solid var(--rule);background:var(--white);font-size:15px;outline:none;transition:border-color .2s}
.form input:focus,.form select:focus{border-color:var(--navy)}
.form .ck{display:flex;gap:10px;font-size:13px;color:var(--muted);align-items:flex-start}
.form .ck input{width:16px;height:16px;flex:none;margin-top:2px;accent-color:var(--navy)}
@media (max-width:600px){.form{grid-template-columns:1fr}.result{grid-template-columns:1fr}}

/* roadmap */
.road{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--rule-n);margin-top:clamp(48px,6vw,80px)}
.road div{padding:24px 22px 0 0;position:relative}
.road div::before{content:"";position:absolute;top:-4px;left:0;width:7px;height:7px;background:var(--on-navy-m)}
.road div.now::before{background:var(--green);box-shadow:0 0 0 5px rgba(133,169,141,.22)}
.road .cap{color:var(--on-navy-m)}
.road b{display:block;font-size:1.6rem;font-weight:500;letter-spacing:-.02em;margin:12px 0 4px}
.road span{font-size:14.5px;color:var(--on-navy-m)}
.road .now .cap{color:var(--green)}
@media (max-width:900px){.road{grid-template-columns:1fr 1fr;row-gap:34px}}

/* team */
.team-ph{aspect-ratio:21/9;overflow:hidden;background:var(--navy)}
.team-ph img{width:100%;height:100%;object-fit:cover;filter:grayscale(1)}
.people{display:grid;grid-template-columns:repeat(5,1fr);margin-top:28px;gap:20px}
.people div{border-top:1px solid var(--rule);padding-top:14px}
.people b{display:block;font-weight:500}
.people span{font-size:14px;color:var(--muted)}
@media (max-width:900px){.people{grid-template-columns:1fr 1fr}}
.careers{display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap;margin-top:clamp(64px,8vw,110px);padding:34px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.careers h3{font-size:clamp(1.5rem,2.4vw,2.1rem);letter-spacing:-.02em;max-width:24ch}

/* contact */
.contact .split{align-items:end}
.contact h2{max-width:12ch}
.inbox{border-top:1px solid var(--rule-n)}
.inbox a{display:grid;grid-template-columns:90px 1fr auto;gap:16px;align-items:center;padding:22px 0;border-bottom:1px solid var(--rule-n);transition:padding .25s}
.inbox a:hover{padding-left:10px}
.inbox .cap{color:var(--green)}
.inbox b{font-weight:500;font-size:1.1rem}
.inbox span.s{display:block;font-size:14px;color:var(--on-navy-m)}
.inbox svg{width:16px}
footer{background:var(--navy-d);color:var(--on-navy-m);padding:56px 0 40px;font-size:14px}
footer .wrap{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap}
footer .lock{display:flex;align-items:flex-start;gap:6px;color:var(--on-navy);font-size:22px;font-weight:500;letter-spacing:-.02em}
footer .lock svg{height:15px;width:auto;margin-top:2px}
footer nav{display:flex;gap:14px 26px;flex-wrap:wrap}

/* ================= v6 additions ================= */
.btn-link{display:inline-flex;align-items:center;gap:10px;font-size:15.5px;border-bottom:1px solid currentColor;padding-bottom:3px;width:max-content}
.btn-link svg{width:15px;height:15px;transition:transform .2s}.btn-link:hover svg{transform:translateX(3px)}

/* sub-page header */
.page-head{min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(150px,18vw,220px) 0 clamp(72px,10vh,120px);background:var(--navy);color:var(--on-navy);position:relative;overflow:hidden}
.page-head h1{font-size:clamp(2.6rem,6vw,5.4rem);letter-spacing:-.035em;line-height:1;max-width:15ch}
.page-head .lead{margin-top:26px;color:var(--on-navy-m);max-width:52ch}
.page-head .crumb{display:flex;gap:10px;margin-bottom:28px;color:var(--on-navy-m)}
.page-head .crumb a:hover{color:var(--on-navy)}
.page-head.photo{background:var(--navy-d) center/cover}
.page-head.photo::before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(21,39,51,.85) 0%,rgba(21,39,51,.25) 55%,rgba(21,39,51,.35) 100%),linear-gradient(90deg,rgba(21,39,51,.7) 0%,rgba(21,39,51,.2) 60%,rgba(21,39,51,0) 100%)}
.page-head.photo .wrap{position:relative;width:100%}
.page-head>.wrap{width:100%}
.page-head.photo::after{content:"";position:absolute;left:50%;bottom:26px;width:1px;height:38px;background:linear-gradient(var(--on-navy-m),transparent)}

/* in-page sub navigation */
.subnav{position:sticky;top:var(--navh);z-index:30;background:var(--paper);border-bottom:1px solid var(--rule)}
.subnav .wrap{display:flex;gap:clamp(18px,3vw,40px);overflow-x:auto;scrollbar-width:none}
.subnav a{flex:none;padding:18px 0 16px;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px}
.subnav a:hover{color:var(--ink)}
.subnav a.on{color:var(--ink);border-bottom-color:var(--green)}
[id]{scroll-margin-top:140px}

/* 3D spinners (Measure / Model / Scale) */
.spin3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,32px);margin-top:clamp(56px,7vw,96px)}
@media (max-width:900px){.spin3{grid-template-columns:1fr}}
.w3{position:relative;background:var(--white);border:1px solid var(--rule);display:flex;flex-direction:column}
.w3 canvas{width:100%;aspect-ratio:1/.92;display:block;cursor:grab;touch-action:pan-y}
.w3 canvas:active{cursor:grabbing}
.w3 .cap{position:absolute;top:18px;left:20px;color:var(--muted)}
.w3 .cap b{color:var(--ink)}
.w3 .ft{padding:18px 20px 22px;border-top:1px solid var(--rule)}
.w3 h3{font-size:1.9rem;letter-spacing:-.03em}
.w3 .ft p{margin-top:6px;color:var(--muted);font-size:15px}
.w3 .tip{position:absolute;left:0;right:0;bottom:0;padding:22px 20px 24px;background:var(--navy);color:var(--on-navy);font-size:15.5px;line-height:1.5;
 clip-path:inset(100% 0 0 0);transition:clip-path .45s cubic-bezier(.2,.7,.2,1)}
.w3 .tip b{display:block;font-family:var(--head);font-weight:500;font-size:1.25rem;margin-bottom:6px}
.w3 .tip span{color:var(--on-navy-m)}
.w3:hover .tip,.w3:focus-within .tip,.w3.open .tip{clip-path:inset(0 0 0 0)}
.w3 .more{position:absolute;right:14px;top:12px;width:36px;height:36px;border:1px solid var(--rule);background:var(--white);display:grid;place-items:center;cursor:pointer;font-size:18px;line-height:1;color:var(--ink)}
.w3 .hint{position:absolute;right:20px;bottom:calc(100% - 52px);}
.navy .w3{background:var(--navy-l);border-color:var(--rule-n)}
.navy .w3 .ft{border-top-color:var(--rule-n)}
.navy .w3 .cap,.navy .w3 .ft p{color:var(--on-navy-m)}
.navy .w3 .cap b{color:var(--on-navy)}

/* de-risking path */
.dr{margin-top:clamp(40px,5vw,64px);border-top:1px solid var(--rule)}
.dr svg{display:block;width:100%;height:auto;overflow:visible}
.dr .st{cursor:pointer}
.dr .st:focus{outline:none}
.dr .st:focus-visible .ring0{stroke:var(--green);stroke-width:3}
.dr-cap{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:8px;padding-top:24px;border-top:1px solid var(--rule)}
.dr-cap .q{font-family:var(--head);font-weight:500;font-size:clamp(1.4rem,2.2vw,1.9rem);letter-spacing:-.02em;line-height:1.15}
.dr-cap dt{color:var(--muted)}
.dr-cap dd{margin:4px 0 0}
@media (max-width:800px){.dr-cap{grid-template-columns:1fr;gap:16px}}
.teasers{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,32px);margin-top:clamp(48px,6vw,80px)}
@media (max-width:900px){.teasers{grid-template-columns:1fr}}
.teaser{display:grid;grid-template-rows:auto 1fr;border-top:1px solid var(--rule);padding-top:20px;gap:14px}
.teaser .im{aspect-ratio:16/10;overflow:hidden;background:var(--navy)}
.teaser .im img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05);transition:transform .8s}
.teaser:hover .im img{transform:scale(1.03)}
.teaser h3{font-size:1.65rem;letter-spacing:-.025em}
.teaser p{color:var(--muted);font-size:15.5px;margin-top:6px}
.teaser .btn-link{margin-top:14px}

.dr-row{display:grid;grid-template-columns:repeat(5,1fr)}
/* on phones the path keeps a readable size and swipes sideways */
@media (max-width:700px){.drs{overflow-x:auto;margin:0 calc(-1 * var(--g));padding:0 var(--g);scrollbar-width:none}.drs>svg,.drs>.dr-row{min-width:640px}}
.dr-row button{background:none;border:0;text-align:center;padding:12px 4px 18px;color:var(--muted);cursor:pointer;font-size:clamp(13px,1.3vw,16px);line-height:1.25}
.dr-row button .cap{display:block;margin-bottom:4px}
.dr-row button.on{color:var(--ink)}
.dr-row button.on .cap{color:var(--green-d)}
/* discovery: scenario escalation plot */
.esc{margin-top:auto;color:var(--ink);padding:0;border-top:1px solid var(--ink)}
.esc .kpis{padding-top:18px}
.esc.calc .kpis b{color:var(--muted)}
.esc svg{display:block;width:100%;height:auto}
.esc canvas{display:block;width:100%;aspect-ratio:1.45;min-height:300px;touch-action:none;margin-top:6px}
.esc .kpis.kp3{grid-template-columns:repeat(3,1fr)}
/* on phones the map keeps a readable width: swipe sideways to scroll, drag up/down on an axis to narrow it */
@media (max-width:620px){.pmwrap{overflow-x:auto;margin:0 -14px;padding:0 14px;scrollbar-width:none}.pmwrap canvas{min-width:560px;touch-action:pan-x}
 .esc{padding:18px 14px 14px}.esc .kpis.kp3{gap:10px}.esc .kpis.kp3 .cap{font-size:10px;letter-spacing:.06em}.esc .kpis.kp3 b{font-size:1.35rem}}
.pm-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:8px;font-size:13px;color:var(--muted)}
.how{border-top:1px solid var(--rule);margin-top:12px;padding-top:12px;font-size:13.5px;color:var(--muted)}
.how summary{cursor:pointer;color:var(--ink);list-style:none}
.how summary::before{content:"+";display:inline-block;width:16px;color:var(--green)}
.how[open] summary::before{content:"–"}
.how p{margin-top:10px}
.how .eq{color:var(--ink);padding:10px 12px;border-left:2px solid var(--green);background:rgba(31,54,69,.04)}
.how .dim{font-size:12.5px}
.esc svg circle{transition:cy .55s cubic-bezier(.2,.7,.2,1),fill .3s}
.esc .kpis{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:14px}
.esc .kpis b{transition:color .4s;display:block;font-family:var(--head);font-weight:500;font-size:clamp(1.6rem,2.4vw,2.1rem);letter-spacing:-.03em;line-height:1.05;margin-top:6px}
.esc .cap{color:var(--muted)}
.esc .fine{font-size:12.5px;color:var(--muted);border-top:1px solid var(--rule);padding-top:12px;margin-top:10px}

/* split blocks on sub-pages */
.blk{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(40px,6vw,100px);align-items:start}
.blk.rev{grid-template-columns:1.1fr .9fr}
@media (max-width:900px){.blk,.blk.rev{grid-template-columns:1fr}}
.blk h2{margin-bottom:22px}
.blk .lead+.lead{margin-top:16px}
.facts{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--rule);margin-top:36px}
.facts div{padding:18px 18px 18px 0;border-bottom:1px solid var(--rule)}
.facts b{display:block;font-family:var(--head);font-weight:500;font-size:clamp(1.7rem,2.6vw,2.3rem);letter-spacing:-.03em;line-height:1.05}
.facts span{display:block;margin-top:6px;font-size:14.5px;color:var(--muted)}
.navy .facts,.navy .facts div{border-color:var(--rule-n)}
.navy .facts span{color:var(--on-navy-m)}
.plist{list-style:none;border-top:1px solid var(--rule);margin-top:28px}
.plist li{display:grid;grid-template-columns:minmax(120px,.4fr) 1fr;gap:16px;padding:14px 0;border-bottom:1px solid var(--rule);font-size:15.5px}
.plist li .cap{color:var(--muted);padding-top:3px}
.navy .plist,.navy .plist li{border-color:var(--rule-n)}
.navy .plist li .cap{color:var(--on-navy-m)}
.photo{position:relative;overflow:hidden;background:var(--navy)}
.photo img,.photo video{width:100%;height:100%;object-fit:cover;display:block}
.photo .tag{position:absolute;left:12px;bottom:10px;color:var(--on-navy);background:rgba(21,39,51,.72);padding:4px 8px;font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.gal{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;gap:12px;aspect-ratio:16/10}
.gal .photo:first-child{grid-row:1/3}
.status{display:inline-flex;align-items:center;gap:8px;color:var(--ink)}
.status::before{content:"";width:7px;height:7px;background:var(--green)}
.navy .status{color:var(--on-navy)}
.todo{border:1.5px dashed var(--green);background:repeating-linear-gradient(135deg,transparent 0 12px,rgba(133,169,141,.12) 12px 24px);display:grid;place-items:center;text-align:center;padding:20px;color:var(--ink);font-size:14px}
.todo b{display:block;color:var(--ink);font-weight:400;margin-bottom:4px}

/* TES levels */
.lvls{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--rule);margin-top:40px}
.lvls button{background:none;border:0;border-right:1px solid var(--rule);text-align:left;padding:18px 16px 18px 0;cursor:pointer;color:var(--muted);transition:color .2s}
.lvls button:last-child{border-right:0}
.lvls button b{display:block;font-family:var(--head);font-weight:500;font-size:1.3rem;color:inherit;margin-top:4px}
.lvls button.on{color:var(--ink);box-shadow:inset 0 3px 0 var(--green)}
.lvls button+button{padding-left:16px}
@media (max-width:700px){.lvls{grid-template-columns:1fr 1fr}.lvls button:nth-child(2){border-right:0}}
.lvl-body{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,4vw,64px);margin-top:28px;align-items:start}
@media (max-width:900px){.lvl-body{grid-template-columns:1fr}}
.lvl-body .q{font-family:var(--head);font-weight:500;font-size:clamp(1.5rem,2.4vw,2.1rem);letter-spacing:-.02em;line-height:1.15}

/* roadmap */
.rm{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,5vw,80px);align-items:center;margin-top:clamp(40px,5vw,72px)}
@media (max-width:960px){.rm{grid-template-columns:1fr}}
.rm-now{display:grid;grid-template-columns:auto 1fr;gap:6px clamp(32px,5vw,80px);align-items:end;margin-top:clamp(28px,3vw,44px);min-height:150px}
.rm-now .yr{grid-column:1/-1}
.rm-now .big,.rm-now>.cap:not(.yr){grid-column:1}
.rm-now>div:last-child{grid-column:2;grid-row:2/4;padding-bottom:4px}
@media (max-width:700px){.rm-now{grid-template-columns:1fr}.rm-now>div:last-child{grid-column:1;grid-row:auto}}
.rm-now .yr{color:var(--green)}
.rm-now .big{font-family:var(--head);font-weight:500;font-size:clamp(3.2rem,7vw,6rem);letter-spacing:-.04em;line-height:.95;margin-top:10px}
.rm-now .nm{font-family:var(--head);font-weight:500;font-size:1.5rem;margin-top:10px}
.rm-now p{color:var(--on-navy-m);margin-top:12px;max-width:42ch}
.rm-line{display:grid;grid-template-columns:repeat(6,1fr);margin-top:clamp(40px,5vw,64px);position:relative}
.rm-line::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--rule-n)}
.rm-line i{position:absolute;left:0;top:-1px;height:3px;background:var(--green);transition:width .6s cubic-bezier(.2,.7,.2,1)}
.rm-line button{background:none;border:0;color:var(--on-navy-m);text-align:left;padding:20px 14px 6px 0;cursor:pointer;position:relative}
.rm-line button::before{content:"";position:absolute;top:-5px;left:0;width:9px;height:9px;background:var(--navy);border:1.5px solid var(--on-navy-m)}
.rm-line button.done::before{background:var(--green);border-color:var(--green)}
.rm-line button.on{color:var(--on-navy)}
.rm-line button.on::before{background:var(--green);border-color:var(--green);box-shadow:0 0 0 5px rgba(133,169,141,.25)}
.rm-line b{display:block;font-family:var(--head);font-weight:500;font-size:clamp(1.05rem,1.6vw,1.4rem);margin-top:6px;color:inherit}
.rm-line small{display:block;font-size:13px;margin-top:2px}
@media (max-width:700px){.rm-line{grid-template-columns:1fr 1fr}.rm-line button{padding-bottom:18px}}

/* company */
.people.big{grid-template-columns:repeat(5,1fr)}
.cgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:36px}
.cgrid>*{aspect-ratio:4/5}
.cgrid.c3{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.cgrid.c3{grid-template-columns:1fr 1fr}}
@media (max-width:900px){.cgrid{grid-template-columns:1fr 1fr}}
.sites{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--rule);margin-top:40px}
.sites div{padding:20px 20px 0 0}
.sites b{display:block;font-family:var(--head);font-weight:500;font-size:1.35rem}
.sites span{display:block;color:var(--muted);font-size:15px;margin-top:4px}
@media (max-width:800px){.sites{grid-template-columns:1fr;row-gap:16px}}

/* mission page */
.steps5{list-style:none;border-top:1px solid var(--rule);counter-reset:s}
.steps5 li{display:grid;grid-template-columns:56px 1fr;gap:6px 14px;padding:22px 0;border-bottom:1px solid var(--rule)}
.steps5 li .cap{color:var(--green-d);padding-top:6px}
.steps5 li b{font-family:var(--head);font-weight:500;font-size:1.45rem;letter-spacing:-.02em}
.steps5 li p{grid-column:2;color:var(--muted);font-size:15.5px}
.sticky3{position:sticky;top:140px}
.quote{font-family:var(--head);font-weight:500;font-size:clamp(2rem,4.4vw,3.8rem);letter-spacing:-.03em;line-height:1.08;max-width:22ch}
.quote em{font-style:normal;color:var(--green)}

/* rendered objects (js/seq.js): no boxes, the renders sit on the page background */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,48px);margin-top:clamp(40px,5vw,72px)}
@media (max-width:900px){.trio{grid-template-columns:1fr;max-width:560px}}
.rs{position:relative;margin:0}
.rs .stage{position:relative;aspect-ratio:960/880}
.rs canvas{position:absolute;inset:0;width:100%;height:100%;cursor:grab;touch-action:pan-y}
.rs canvas:active{cursor:grabbing}
.rs canvas:focus-visible{outline:2px solid var(--green);outline-offset:-2px}
.rs figcaption{border-top:1px solid var(--rule);padding-top:14px;margin-top:4px}
.rs .live{display:block;color:var(--muted);margin-bottom:12px;min-height:1.4em}
.rs .live b{color:var(--ink)}
.rs h3{font-size:1.9rem;letter-spacing:-.03em}
.rs .sub{margin-top:4px;color:var(--muted);font-size:15px}
.rs .desc{margin-top:14px;font-size:15px;line-height:1.5;color:var(--muted);max-width:40ch}
.rs .desc b{color:var(--ink)}
.rs-note{color:var(--muted);margin-top:22px}
.hs{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .35s}
.rs:hover .hs,.rs.hot .hs,.rs:focus-within .hs,.hs.pin{opacity:1}
.hs span{position:absolute;width:0;height:0}
.hs i{position:absolute;left:-5px;top:-5px;width:10px;height:10px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(133,169,141,.3),0 0 0 1px var(--navy) inset}
.hs em{position:absolute;left:14px;top:-11px;white-space:nowrap;font-style:normal;font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink);background:rgba(244,245,242,.88);padding:4px 8px;backdrop-filter:blur(4px)}
.hs span.flip em{left:auto;right:14px}
/* gate labels above each ring */
.hs.pin em,.hs.pin span.flip em{left:0;right:auto;top:-6px;transform:translate(-50%,-100%);text-align:center;background:none;backdrop-filter:none;color:var(--muted);padding:0;font-size:11px;transition:color .3s}
.hs.pin em b{display:block;font-family:var(--head);font-weight:500;font-size:clamp(1rem,1.8vw,1.5rem);letter-spacing:-.02em;text-transform:none;margin-bottom:2px}
.hs.pin .done em{color:var(--green-d)}
.hs.pin .on em{color:var(--ink)}
.dr-lead{color:var(--ink);padding:22px 0 0}
.dr-fig .stage{aspect-ratio:1600/640}
.dr-note{color:var(--muted);text-align:right;margin-top:6px}
@media (max-width:700px){.hs.pin em{font-size:9px}.hs.pin em b{font-size:.9rem}}
.t-grid .esc canvas{aspect-ratio:1.85}
.dr-fig{margin-bottom:-6%}
.hs.show{opacity:1}
.rs.dm{margin-top:clamp(24px,3vw,40px)}
.steps5 li{transition:opacity .35s}
.steps5:has(li.on) li:not(.on){opacity:.42}
.how-h{max-width:16ch;margin-bottom:clamp(36px,5vw,64px)}
#measure .sticky3{top:96px}
#measure .steps5{padding-bottom:12vh}

/* technology sections: text left, media filling the right half edge to edge */
.tsec{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);min-height:min(100svh,920px);padding:0;align-items:stretch}
.t-text{align-self:center;padding:clamp(72px,9vw,140px) clamp(32px,5vw,88px) clamp(72px,9vw,140px) max(var(--g),calc((100vw - 1360px) / 2 + var(--g)))}
.t-text .kick{display:block;color:var(--muted);margin-bottom:18px}
.navy .t-text .kick{color:var(--on-navy-m)}
.t-text h2{max-width:15ch;margin-bottom:24px;font-size:clamp(2.2rem,3.7vw,3.5rem)}
.t-text .lead{max-width:44ch}
.t-text .lead+.lead{margin-top:14px}
.t-text .facts{max-width:560px}
.t-text .plist{max-width:560px}
.t-media{position:relative;min-height:420px}
.car{overflow:hidden;background:var(--navy-d);touch-action:pan-y;outline:none}
.car .slides,.car .slide{position:absolute;inset:0;margin:0}
.car .slide{opacity:0;transition:opacity 1.1s ease}
.car .slide.on{opacity:1}
.car img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform 7s linear}
.car .slide.on img{transform:scale(1)}
.car figcaption{position:absolute;left:clamp(20px,2.4vw,36px);bottom:clamp(76px,7vw,92px);color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.45)}
.car::after{content:"";position:absolute;inset:auto 0 0 0;height:38%;background:linear-gradient(0deg,rgba(21,39,51,.62),rgba(21,39,51,0));pointer-events:none}
.car-ui{position:absolute;z-index:2;left:clamp(20px,2.4vw,36px);bottom:clamp(20px,2.4vw,32px);display:flex;align-items:center;gap:14px;color:#fff}
.car-ui button{width:44px;height:44px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.55);background:rgba(21,39,51,.25);color:#fff;cursor:pointer;backdrop-filter:blur(6px);transition:background .2s}
.car-ui button:hover{background:rgba(21,39,51,.6)}
.car-ui svg{width:16px;height:16px}
.car-ui .prev svg{transform:rotate(180deg)}
.car-ui .count{min-width:64px;text-align:center}
.t-render{display:flex;align-items:center;padding:clamp(40px,5vw,80px) max(var(--g),calc((100vw - 1360px) / 2 + var(--g))) clamp(40px,5vw,80px) 0}
.t-render .rs{width:100%}
@media (max-width:900px){.tsec{grid-template-columns:1fr;min-height:0}.t-media{order:-1;aspect-ratio:4/3;min-height:0}.t-render{aspect-ratio:auto;order:0;padding:0 var(--g) 56px}.t-text{padding:48px var(--g) 64px}}
/* fixed, text-only section index: short dashes; the current section shows its name, hovering shows all */
.tindex{position:fixed;right:clamp(10px,1.4vw,24px);top:50%;transform:translateY(-50%);z-index:40;display:flex;flex-direction:column;align-items:flex-end;gap:2px;padding:8px 10px;opacity:0;pointer-events:none;transition:opacity .35s,background .35s}
.tindex.show{opacity:1;pointer-events:auto}
.tindex a{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:7px 0;color:rgba(31,54,69,.5);font-size:13.5px;white-space:nowrap;transition:color .25s}
.tindex a .cap{font-size:11px}
.tindex a .cap,.tindex a .nm{max-width:0;overflow:hidden;opacity:0;transition:max-width .35s,opacity .25s}
.tindex a.on .cap,.tindex a.on .nm,.tindex:hover a .cap,.tindex:hover a .nm,.tindex:focus-within a .cap,.tindex:focus-within a .nm{max-width:280px;opacity:1}
.tindex a::after{content:"";flex:none;width:14px;height:1.5px;background:currentColor;transition:width .3s,background .3s}
.tindex a:hover,.tindex a.on{color:var(--ink)}
.tindex a.on::after{width:30px;background:var(--green)}
.tindex:hover{background:rgba(244,245,242,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.tindex.dark a{color:rgba(238,242,239,.7);text-shadow:0 0 12px rgba(10,20,28,.8)}
.tindex.dark a:hover,.tindex.dark a.on{color:#fff}
.tindex.dark:hover{background:rgba(21,39,51,.82)}
.tindex.photo{background:rgba(21,39,51,.42);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
@media (max-width:1100px){.tindex{display:none}}
/* roadmap render */
.rmf{margin-top:clamp(32px,4vw,56px)}
.rmf .stage{aspect-ratio:1600/720;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.navy .hs.pin em{color:var(--on-navy-m)}
.navy .hs.pin .done em{color:var(--green)}
.navy .hs.pin .on em{color:var(--on-navy)}
.navy .rs .live,.navy .rs .desc{color:var(--on-navy-m)}
.rm-note{color:var(--on-navy-m);margin-top:18px}

/* company: taller header for the team photo */
.page-head.tall{background-position:center 32%}
/* full-width photo with the heading and names laid over it */
.fullpic{position:relative;margin:clamp(56px,7vw,96px) 0 0;min-height:min(92svh,900px);display:flex;align-items:flex-end;overflow:hidden;background:var(--navy-d)}
.fullpic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 38%}
.fullpic::after{content:"";position:absolute;inset:auto 0 0 0;height:55%;background:linear-gradient(0deg,rgba(21,39,51,.88),rgba(21,39,51,0));pointer-events:none}
.fullpic figcaption{position:relative;z-index:1;width:100%;padding-bottom:clamp(28px,4vw,56px);color:var(--on-navy)}
.fullpic h2{color:#fff}
.people.on-pic div{border-top-color:rgba(238,242,239,.3)}
.people.on-pic b{color:#fff}
.people.on-pic span{color:var(--on-navy-m)}
@media (max-width:900px){.fullpic{min-height:0;display:block}.fullpic img{position:static;height:auto;aspect-ratio:4/3}.fullpic::after{display:none}.fullpic figcaption{background:var(--navy);padding-top:32px}}
/* sites map */
.sitemap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,5vw,80px);align-items:center}
@media (max-width:960px){.sitemap{grid-template-columns:1fr}}
.sm-text .lead{margin-top:18px;max-width:38ch}
.sm-list{list-style:none;margin-top:32px;border-top:1px solid var(--rule)}
.sm-list li{display:grid;gap:2px;padding:16px 0 16px 16px;border-bottom:1px solid var(--rule);border-left:2px solid transparent;cursor:default;outline:none;transition:border-color .25s,background .25s}
.sm-list li.on,.sm-list li:focus-visible{border-left-color:var(--green);background:rgba(133,169,141,.08)}
.sm-list .cap{color:var(--muted)}
.sm-list b{font-family:var(--head);font-weight:500;font-size:1.25rem}
.sm-list li>span:last-child{color:var(--muted);font-size:15px}
.sm-map{position:relative}
.sm-map img{width:100%;height:100%}
.mpin{position:absolute;width:0;height:0;border:0;padding:0;background:none;cursor:pointer}
.mpin i{position:absolute;left:-9px;top:-9px;width:18px;height:18px;border-radius:50%;background:var(--navy);border:3px solid #fff;box-shadow:0 0 0 1px var(--navy),0 4px 14px rgba(21,39,51,.3)}
.mpin i::after{content:"";position:absolute;inset:-9px;border-radius:50%;border:1.5px solid var(--green);animation:ping 2.4s ease-out infinite}
@keyframes ping{0%{transform:scale(.5);opacity:1}100%{transform:scale(1.8);opacity:0}}
@media (prefers-reduced-motion:reduce){.mpin i::after{animation:none}}
.mpin.on i{background:var(--green)}
.pin-card{position:absolute;left:18px;bottom:16px;width:max-content;max-width:260px;display:grid;gap:2px;text-align:left;padding:14px 16px;background:var(--navy);color:var(--on-navy);box-shadow:0 12px 32px rgba(21,39,51,.25);opacity:0;transform:translateY(6px);pointer-events:none;transition:opacity .25s,transform .25s}
.mpin.on .pin-card{opacity:1;transform:none}
.pin-card .cap{color:var(--green);margin-bottom:4px}
.pin-card b{font-family:var(--head);font-weight:500;font-size:1.05rem;margin-top:6px}
.pin-card small{font-size:13px;color:var(--on-navy-m);line-height:1.4}
.sm-tag{position:absolute;color:var(--ink);white-space:nowrap;transform:translateY(-50%)}
.sm-tag.l{transform:translate(-100%,-50%)}
.sm-tag.l.t{transform:translate(-100%,-100%)}   /* left of and above its pin */
/* careers: full-width carousel with the heading laid over it */
.car.full{position:relative;min-height:min(94svh,940px)}
.car.full::after{inset:0;height:auto;background:linear-gradient(0deg,rgba(21,39,51,.92),rgba(21,39,51,.55) 45%,rgba(21,39,51,0) 75%),linear-gradient(90deg,rgba(21,39,51,.55),rgba(21,39,51,0) 60%)}
.car-over{position:absolute;z-index:2;inset:auto 0 0 0;padding-bottom:clamp(96px,10vw,140px);color:var(--on-navy);pointer-events:none}
.car-over .wrap>*{pointer-events:auto}
.car-over h2{color:#fff;max-width:22ch}
.car-over .lead{margin-top:16px;max-width:46ch;color:rgba(238,242,239,.85)}
.car.full .car-ui{left:auto;right:max(var(--g),calc((100vw - 1360px) / 2 + var(--g)))}
.car.full figcaption{left:auto;right:max(var(--g),calc((100vw - 1360px) / 2 + var(--g)));bottom:clamp(84px,7.4vw,100px)}
@media (max-width:900px){.car.full{min-height:640px}.car-over{padding-bottom:110px}}
#careers{padding:0}
.sm-map img{display:block}
.tes-note{margin-top:24px;font-size:15px;color:var(--muted);max-width:52ch}
.tes-note b{color:var(--ink)}
.t-fig{display:flex;align-items:center;padding:clamp(40px,5vw,80px) max(var(--g),calc((100vw - 1360px) / 2 + var(--g))) clamp(40px,5vw,80px) clamp(16px,2vw,32px)}
.t-fig figure{width:100%}
.t-fig figcaption{font-size:13.5px;color:var(--muted);margin-top:12px;max-width:56ch}
.steps button{grid-template-columns:1fr}
.steps button span.t{grid-column:1}
@media (max-width:900px){.t-fig{order:0;padding:0 var(--g) 56px}}
#tes .plist .cap{text-transform:none;letter-spacing:0;font-size:15.5px;color:var(--ink);font-family:var(--head);font-weight:500}
#tes .plist li{grid-template-columns:minmax(150px,.5fr) 1fr}

/* render labels: a small dot on the object, a slim leader line up, plain text – no boxes */
.hs span::before{content:"";position:absolute;left:0;bottom:2px;width:1px;height:44px;background:currentColor;opacity:.55}
.hs span{color:var(--ink)}
.navy .hs span{color:var(--on-navy)}
.hs i{left:-2.5px;top:-2.5px;width:5px;height:5px;border-radius:50%;background:currentColor;box-shadow:none;border:0}
.hs em{left:7px;top:-54px;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;padding:0;color:inherit;font-size:11px;letter-spacing:.09em;text-shadow:0 0 10px var(--paper),0 0 3px var(--paper)}
.white .hs em{text-shadow:0 0 10px #fff,0 0 3px #fff}
.navy .hs em{text-shadow:0 0 10px var(--navy),0 0 3px var(--navy)}
.hs span.flip em{left:auto;right:7px;text-align:right}
.hs.pin span::before,.hs.pin i{display:none}
.hs.pin em{text-shadow:none;cursor:pointer;pointer-events:auto}
.hs.pin em:hover{color:var(--ink)}
.navy .hs.pin em:hover{color:var(--on-navy)}

/* roadmap: pinned while the stages play */
.rm-pin{height:330vh;padding:0}
.rm-sticky{position:sticky;top:var(--navh);height:calc(100svh - var(--navh));display:flex;align-items:center;overflow:hidden}
.rm-sticky>.wrap{width:100%;display:flex;flex-direction:column;justify-content:center;gap:clamp(10px,2vh,22px)}
.rm-head h2{font-size:clamp(1.9rem,3.4vw,3rem)}
.rm-head .lead{margin-top:8px;font-size:clamp(15px,1.3vw,18px)}
.rm-pin .rmf{margin-top:0}
.rm-pin .rmf .stage{aspect-ratio:1600/600;width:min(100%,calc(34vh * 2.667));margin-inline:auto}
.rm-pin .rm-line{margin-top:0}
.rm-pin .rm-now{margin-top:0;min-height:0}
.rm-pin .rm-now .big{font-size:clamp(2.2rem,4.6vw,4rem)}
@media (max-width:700px){.rm-pin{height:auto}.rm-sticky{position:static;height:auto;padding:64px 0}}
.steps5 li{grid-template-columns:1fr}
.steps5 li p{grid-column:1}
/* varied leader heights so neighbouring labels don't collide */
.hs span.lo::before{height:22px}
.hs span.lo em{top:-32px}
.hs span.hi::before{height:70px}
.hs span.hi em{top:-80px}
.rm-head h2{font-size:clamp(1.7rem,2.8vw,2.5rem)}
.rm-pin .rm-now{grid-template-columns:auto 1fr;align-items:center}
.rm-pin .rm-now .big{font-size:clamp(1.8rem,3.4vw,3rem)}
.rm-pin .rm-line button{padding-top:14px}
.rm-pin .rm-now p{margin-top:6px}
.rm-head .lead{display:none}
@media (min-height:1000px){.rm-head .lead{display:block}}
@media (max-width:900px){.stats{grid-template-columns:repeat(2,1fr);row-gap:28px}}

/* TES Monte Carlo */
.mc{width:100%}
.mc-stage{display:flex;border-bottom:1px solid var(--rule)}
.mc-stage button{flex:1;background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;padding:10px 4px 12px;text-align:left;color:var(--muted);cursor:pointer;font-size:15px}
.mc-stage button span{display:block;font-size:12px;letter-spacing:.06em;margin-top:2px}
.mc-stage button.on{color:var(--ink);border-bottom-color:var(--green)}
.mc-kpi{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:22px 0 8px}
.mc-kpi .cap{color:var(--muted)}
.mc-kpi b{display:block;font-family:var(--head);font-weight:500;font-size:clamp(1.5rem,2.4vw,2.2rem);letter-spacing:-.03em;margin-top:4px;transition:color .3s}
.mc.calc .mc-kpi b{color:var(--muted)}
.mc-plot{position:relative}
.mc-plot canvas{display:block;width:100%;height:clamp(240px,30vw,340px);cursor:crosshair}
.mc-tip{position:absolute;width:180px;padding:8px 10px;background:var(--white);border:1px solid var(--rule);box-shadow:0 6px 18px rgba(21,39,51,.12);font-size:12.5px;line-height:1.4;pointer-events:none;color:var(--muted)}
.mc-tip b{display:block;color:var(--ink);font-weight:500;font-size:14px;margin-bottom:2px}
.mc-tip span{display:block}
.mc-in{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:18px}
.mc-in label .l{display:flex;justify-content:space-between;font-size:13.5px;color:var(--muted)}
.mc-in output{color:var(--ink)}
.mc-note{margin-top:16px;font-size:12.5px;color:var(--muted)}
@media (max-width:700px){.mc-in{grid-template-columns:1fr}.mc-kpi b{font-size:1.3rem}}
.t-fig .mc{padding-right:clamp(0px,3vw,48px)}

/* de-risk path: pinned while scrolling moves through the five gates, text always in view */
.dr.dr-pin{height:320vh;border-top:0;margin-top:clamp(24px,3vw,40px)}
.dr-sticky{position:sticky;top:var(--navh);height:calc(100svh - var(--navh));display:flex;flex-direction:column;justify-content:center;gap:clamp(4px,1vh,12px);border-top:1px solid var(--rule)}
.dr-pin .dr-lead{padding-top:12px}
.dr-pin .dr-fig .stage{aspect-ratio:1600/640;width:min(100%,calc(46vh * 2.5));margin-inline:auto}
.dr-pin .dr-fig{margin-bottom:0}
.dr-pin .dr-note{margin-top:0}
.dr-pin .dr-cap{margin-top:4px;padding-top:16px}
.dr-pin .dr-cap .q{font-size:clamp(1.25rem,1.9vw,1.7rem)}
.dr-pin .dr-row button{padding:8px 4px 10px}
@media (max-width:700px){.dr.dr-pin{height:auto}.dr-sticky{position:static;height:auto}}

/* roadmap: a label travels with each plant; the current one is lit */
.rmf .hs.pin em{font-size:11px;letter-spacing:.08em;line-height:1.25;color:rgba(238,242,239,.5);transition:color .3s,opacity .3s}
.rmf .hs.pin em small{display:block;font-size:10.5px;letter-spacing:.1em}
.rmf .hs.pin em b{font-size:clamp(1rem,1.5vw,1.3rem);color:inherit;margin:2px 0 1px}
.rmf .hs.pin span::before{display:block;content:"";position:absolute;left:0;bottom:2px;width:1px;height:16px;background:currentColor;opacity:.4}
.rmf .hs.pin span{color:rgba(238,242,239,.5)}
.rmf .hs.pin .on,.rmf .hs.pin .on em{color:#fff}
.rmf .hs.pin .on em small{color:var(--green)}
.rmf .hs.pin em{top:-20px}
.rmf .stage{-webkit-mask-image:none;mask-image:none}
.rmf .stage canvas{-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}

/* legal pages */
.legal{padding-top:clamp(140px,16vw,200px)}
.legal .wrap{max-width:860px}
.legal h1{font-size:clamp(2.2rem,4.5vw,3.6rem);letter-spacing:-.03em;margin-bottom:36px}
.legal h2{font-size:1.45rem;letter-spacing:-.01em;margin:40px 0 12px}
.legal p,.legal li{color:var(--muted);font-size:16.5px;line-height:1.6}
.legal p+p{margin-top:12px}
.legal ul{margin:10px 0 12px 1.1em}
.legal .legal-lead{color:var(--ink);font-size:13px;letter-spacing:.08em}
.legal-dl{display:grid;grid-template-columns:minmax(160px,.4fr) 1fr;border-top:1px solid var(--rule)}
.legal-dl dt,.legal-dl dd{padding:14px 0;border-bottom:1px solid var(--rule)}
.legal-dl dt{color:var(--muted);font-size:13px;letter-spacing:.08em;text-transform:uppercase;padding-top:17px}
.legal-dl dd{margin:0}
.legal-dl a{text-decoration:underline;text-underline-offset:3px}

/* contact: compact band */
.contact{padding:clamp(48px,6vw,88px) 0}
.contact .wrap{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,2fr);gap:clamp(24px,4vw,72px);align-items:end}
.contact h2{font-size:clamp(1.8rem,3vw,3.2rem);max-width:13ch}
.contact .inbox{display:grid;grid-template-columns:repeat(3,1fr);border-top:0;gap:0}
.contact .inbox a{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;column-gap:12px;padding:16px 18px 16px 0;border-bottom:1px solid var(--rule-n);border-top:1px solid var(--rule-n)}
.contact .inbox a+a{padding-left:18px;border-left:1px solid var(--rule-n)}
.contact .inbox b{font-size:1.05rem}
.contact .inbox span.s{grid-column:1;font-size:13px}
.contact .inbox svg{grid-column:2;grid-row:1/3;align-self:center}
@media (max-width:900px){.contact .wrap{grid-template-columns:1fr}.contact .inbox{grid-template-columns:1fr}.contact .inbox a+a{padding-left:0;border-left:0;border-top:0}}
/* the crystal as a superscript, the same everywhere: like the "2" in x² */
/* sized and placed like a superscript digit: top at cap height, ~40 % of the type size */
svg.sup,.hero .claim-lk svg.sup,.page-head h1 svg.sup{display:inline-block;height:.4em;width:auto;margin-left:.03em;vertical-align:.44em;color:var(--ivory)}
footer .lock{display:block;font-size:22px}
footer .lock svg.sup{height:.4em;margin-left:.03em;vertical-align:.44em;margin-top:0}

/* large screens: the layout grows with the viewport instead of sitting small in the middle */
.nav .wrap{max-width:none}
.brand .lg{height:clamp(34px,1.9vw,58px)}
.nav ul{font-size:clamp(14.5px,.85vw,19px)}
.nav .btn{height:clamp(40px,2.3vw,54px);padding:0 clamp(16px,1vw,24px);font-size:clamp(14px,.82vw,18px)}
.nav .wrap{height:var(--navh)}
.page-head h1{font-size:clamp(2.6rem,6vw,9.5rem);max-width:16ch}
.page-head .lead{font-size:clamp(1.08rem,1.35vw,2rem);max-width:48ch}
@media (min-width:1700px){
 .wrap{max-width:min(88vw,2400px)}
 body{font-size:clamp(17px,1vw,22px)}
 h2{font-size:clamp(2.2rem,4.2vw,6rem)}
 .lead{font-size:clamp(1.08rem,1.25vw,1.9rem)}
 .cap{font-size:clamp(12.5px,.72vw,16px)}
 .t-text{padding-left:max(var(--g),calc((100vw - min(88vw,2400px)) / 2 + var(--g)))}
 .t-render,.t-fig{padding-right:max(var(--g),calc((100vw - min(88vw,2400px)) / 2 + var(--g)))}
 .t-text h2{font-size:clamp(2.2rem,3.4vw,5rem)}
 .t-text .lead,.t-text .facts,.t-text .plist{max-width:none}
 .t-text .lead{max-width:40ch}
}

/* contact band in the logo's mint green: navy type on mint (contrast 5.4:1) */
.contact.mint{background:var(--green);color:var(--navy)}
.contact.mint h2{color:var(--navy)}
.contact.mint .inbox a{border-color:rgba(31,54,69,.28);color:var(--navy)}
.contact.mint .inbox a+a{border-left-color:rgba(31,54,69,.28)}
.contact.mint .inbox span.s{color:var(--navy)}
.contact.mint .inbox svg{color:var(--navy)}
.contact.mint .inbox a:hover{background:rgba(255,255,255,.14)}

/* small renders above the Luma and Scallop texts */
.t-mini{width:min(100%,360px);margin:0 0 clamp(8px,1.5vw,20px) -12px}
.t-mini .hs{display:none}
.t-mini canvas{cursor:grab}
@media (min-width:1700px){.t-mini{width:min(100%,22vw)}}

/* mission: Measure / Model / Scale */
.kick2{display:block;color:var(--green-d);margin-bottom:14px}
.navy .kick2{color:var(--green)}
.measured{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,5vw,90px);border-top:1px solid var(--rule);margin-top:clamp(40px,5vw,72px);padding-top:clamp(28px,3vw,44px)}
.measured h3{font-size:clamp(1.6rem,2.6vw,2.4rem);letter-spacing:-.02em}
@media (max-width:900px){.measured{grid-template-columns:1fr}}
/* home: render teasers, company photo */
.teaser .rs{width:100%;height:100%}
.teaser .rs .stage{height:100%;aspect-ratio:auto}
.teaser .rs canvas{cursor:grab;touch-action:pan-y}
.teaser .rs.hot canvas{cursor:grabbing}
.teaser .rs .hs{display:none}
.homepic{position:relative;min-height:min(88svh,860px);display:flex;align-items:flex-end;overflow:hidden;background:var(--navy-d);padding:0}
.homepic>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.homepic::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(21,39,51,.9),rgba(21,39,51,.35) 50%,rgba(21,39,51,0) 80%),linear-gradient(90deg,rgba(21,39,51,.5),rgba(21,39,51,0) 60%)}
.homepic .wrap{position:relative;z-index:1;width:100%;padding-bottom:clamp(40px,6vw,88px);color:var(--on-navy)}
.homepic h2{color:#fff}
.homepic .lead{color:rgba(238,242,239,.85);margin-top:16px}
.homepic .btn-link{color:#fff}
.teaser .im:has(.rs){aspect-ratio:1.15;height:auto}

/* mission measure: text left, sensor plot + reactor cut right */
.measured{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:center}
.measured h3{margin-bottom:16px}
.ms-vis{display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,1fr);gap:clamp(12px,2vw,28px);align-items:center}
.sensors{margin:0}
.sensors canvas{display:block;width:100%;height:clamp(220px,22vw,340px)}
.sensors figcaption{color:var(--muted);margin-top:6px}
.ms-cell .stage{aspect-ratio:480/880}
.ms-cell .hs{display:none}
@media (max-width:700px){.ms-vis{grid-template-columns:1fr}.ms-cell{max-width:240px;margin:auto}}

/* services: de-risk path – caption above the animation, less headroom */
#path{padding-top:clamp(24px,3vw,48px)}
.dr.dr-pin{margin-top:0}
/* centred in the pinned viewport; the rendering takes the height that is left (any screen size) */
.dr-sticky{justify-content:center;padding-block:clamp(12px,2.5vh,32px)}
.dr-pin .dr-fig .stage{width:min(100%,max(calc(36vh * 2.5),calc((100svh - var(--navh) - 330px) * 2.5)))}
.dr-pin .dr-cap{margin-top:0;padding-top:0;padding-bottom:clamp(8px,2vh,20px);border-top:0}
/* TES: the open case behind the illustration */
.mc-case{margin-top:14px;border-top:1px solid var(--rule);padding-top:12px;font-size:14px;color:var(--ink)}
.mc-case summary{cursor:pointer;font-weight:500;list-style:none;display:flex;align-items:center;gap:8px}
.mc-case summary::-webkit-details-marker{display:none}
.mc-case summary::after{content:'+';color:var(--green-d);font-size:18px;line-height:1}
.mc-case[open] summary::after{content:'–'}
.mc-case p{margin:10px 0 0;color:var(--muted);max-width:62ch}
.mc-case p b{color:var(--ink);font-weight:500}
.mc-case dl{display:grid;grid-template-columns:auto 1fr;gap:4px 24px;margin:12px 0 0}
.mc-case dt{color:var(--muted)}.mc-case dd{margin:0}

/* careers: collage of team photos in their own formats, no gaps (js/site.js builds the rows); one tile swaps every 2 s */
.collage{position:relative;overflow:hidden;background:var(--navy)}
.collage .tiles{display:flex;flex-direction:column}
.collage .tiles .row{display:flex}
.collage .tiles i{position:relative;overflow:hidden;background:#24404f;flex:1.5 1 0;aspect-ratio:3/2}
.collage .tiles i[data-o=p]{flex:.6667 1 0;aspect-ratio:2/3}
.collage .tiles img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s ease;filter:saturate(.85)}
.collage .tiles img.on{opacity:1}
.collage::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
 background:linear-gradient(0deg,rgba(21,39,51,.94),rgba(21,39,51,.6) 42%,rgba(21,39,51,.1) 75%),linear-gradient(90deg,rgba(21,39,51,.6),rgba(21,39,51,0) 60%)}

/* phones: fixes from the 2026-10-16 review */
@media (max-width:900px){
 /* TES: the figure column keeps its natural height (the 4:3 media box clipped chart, sliders and case panel) */
 .t-media.t-fig{aspect-ratio:auto}
 /* carbonation sequence: a compact pinned render on the section background, the steps scroll cleanly beneath it */
 #measure .sticky3{top:var(--navh);z-index:3;background:var(--paper);padding:8px 0 10px;margin:0 calc(-1 * var(--g));box-shadow:0 10px 14px -10px rgba(21,39,51,.12)}
 #measure .sticky3 .rs{width:min(100%,42svh);margin:0 auto}
 #measure .steps5 li{scroll-margin-top:50svh}
}
/* map: the pin card stays inside the map on narrow screens */
@media (max-width:700px){.pin-card{left:-110px;bottom:20px;width:220px;max-width:none}}
.stats .src{display:block;margin-top:6px;font-size:12px;color:var(--muted);text-decoration:underline;text-decoration-color:var(--rule);text-underline-offset:3px}
.stats .src:hover{color:var(--ink)}

/* supported by: logo strip, drifting slowly; grey until hovered */
.supporters{padding:clamp(48px,6vw,80px) 0}
.supporters .cap{color:var(--muted);margin-bottom:22px}
.sp-track{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.sp-track ul{list-style:none;display:flex;align-items:center;width:max-content;animation:sp-drift 60s linear infinite}
.sp-track:hover ul{animation-play-state:paused}
.sp-track li{flex:none;margin-right:clamp(40px,5vw,84px)}
.sp-track img{display:block;height:clamp(36px,3.2vw,52px);width:auto;max-width:190px;object-fit:contain;filter:grayscale(1) contrast(.9);opacity:.6;transition:filter .3s,opacity .3s}
.sp-track li:hover img{filter:none;opacity:1}
@keyframes sp-drift{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.sp-track ul{animation:none;flex-wrap:wrap;width:auto;justify-content:center;row-gap:28px;padding-left:clamp(40px,5vw,84px)}.sp-track li[aria-hidden]{display:none}}
/* services: MRV */
.mrv{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,100px);align-items:start}
.mrv .lead+.lead{margin-top:16px}
.mrv .plist{margin-top:clamp(8px,1vw,16px)}
@media (max-width:900px){.mrv{grid-template-columns:1fr}}
.form .send-err{color:#9b3b2e;font-size:14px;margin-top:8px}.form .send-err a{text-decoration:underline}
.mrv h2{margin-bottom:22px}


/* key figures as a small navy band below Measure · Model · Scale (RL review 2026-10-17) */
section.kpis{padding-block:clamp(34px,4.5vw,58px)}
.kpis .stats{margin-top:0;border-top:0}
.kpis .stats div{padding-top:0}
.kpis .stats b{color:var(--white)}
.kpis .stats span,.kpis .stats .src,.kpis .stats .src:hover{color:var(--on-navy-m)}
.kpis .stats .src{text-decoration-color:var(--rule-n)}
#mission{padding-bottom:clamp(44px,5.5vw,80px)}

/* Mission · how carbonation works: one pinned scene – headline and rendering left, the steps right (the first step
   level with the headline); scrolling moves through the animation, only the active step shows its text (RL 2026-10-17) */
.cpin{position:relative;height:560vh}
.cpin-sticky{position:sticky;top:var(--navh);height:calc(100svh - var(--navh));display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,96px);align-items:start;padding-block:clamp(20px,4.5vh,56px)}
.cpin-l{display:flex;flex-direction:column;height:100%;min-height:0}
.cpin-l .how-h{margin-bottom:clamp(10px,2vh,28px)}
.cpin-l .rs{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;margin:0}
.cpin-l .rs .stage{height:100%;width:auto;max-width:100%;aspect-ratio:960/880}
.cpin .steps5{border-top:0;padding-bottom:0}
.cpin .steps5 li{padding:clamp(10px,1.6vh,18px) 0}
.cpin .steps5 li:first-child{padding-top:.35em}
.cpin .steps5 li p{max-height:0;opacity:0;overflow:hidden;margin-top:0;transition:max-height .45s ease,opacity .35s,margin-top .35s}
.cpin .steps5 li.on p{max-height:14em;opacity:1;margin-top:6px}
@media (max-width:900px){.cpin{height:auto}.cpin-sticky{position:static;height:auto;display:block;padding-block:0}.cpin-l .rs .stage{height:auto;width:100%}.cpin .steps5 li p{max-height:none;opacity:1}}
/* active vs. inactive text: clearly distinct everywhere (steps, de-risk path, roadmap) */
.steps5:has(li.on) li:not(.on){opacity:.26}
.steps5 li.on b{color:var(--ink)}
.dr-row button:not(.on){opacity:.5}
.rm-line button:not(.on){opacity:.55}
#measure .cpin .steps5{padding-bottom:0}
/* steps centred on the animation: headline in its own row, rendering and steps side by side below it */
.cpin-sticky{grid-template-rows:auto minmax(0,1fr);row-gap:0}
.cpin-l{display:contents}
.cpin-l .how-h{grid-column:1;grid-row:1}
.cpin-l .rs{grid-column:1;grid-row:2;height:100%}
.cpin .steps5{grid-column:2;grid-row:2;align-self:center}
@media (max-width:900px){.cpin-l{display:block}}
.cpin{height:420vh}   /* a bit quicker through the steps (RL) */
/* roadmap labels: green marks the stage in view, past stages stay neutral (RL: the green looked one stage behind) */
.navy .hs.pin .done em,.rmf .hs.pin .done em{color:rgba(238,242,239,.5)}
.rmf .hs.pin .on em b{color:var(--green)}

/* Mission · how it works + measured inline: when the section end reaches the bottom of the screen the whole view
   holds (the carbonation scene's last frame stays too) until the reactor and the plot have run to the end (RL 2026-10-17) */
@media (min-width:901px){
 .ms-pin{position:relative;height:calc(var(--fh,1400px) + 110vh)}
 .ms-pin>.mfz{position:sticky;top:calc(100svh - var(--fh,1400px) - var(--pad,0px))}
}

/* Mission · from pilot to gigatonnes: same hold as 'measured inline' – the section stops when its end reaches the
   bottom of the screen until the growth animation has run to the end (RL 2026-10-17) */
.tsec-hold{display:block}
.tsec-hold .hold-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);min-height:min(100svh,920px);align-items:stretch}
@media (min-width:901px){
 .hold{position:relative;height:calc(var(--fh,900px) + 110vh)}
 .hold>.hold-in{position:sticky;top:calc(100svh - var(--fh,900px) - var(--pad,0px))}
}
@media (max-width:900px){.tsec-hold .hold-in{grid-template-columns:1fr;min-height:0}}

/* hero: colour at first, black and white together with the navy overlay as the text comes in (--grey from js/site.js) */
.hero video{filter:grayscale(var(--grey,0))}

/* German pages: long compounds break with hyphens instead of running out of their column */
html[lang=de] main{hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:10 4 4;overflow-wrap:break-word}
/* headlines break only at the soft hyphens set in the long compounds (automatic hyphenation split words that fit on the next line) */
html[lang=de] main :is(h1,h2,h3){hyphens:manual;-webkit-hyphens:manual}

/* TEST (Oct 2026): all photos and videos in black and white, team photos excepted; ?color in the URL shows the original.
   Remove this block to end the test. Header photos use a luminosity blend so their text and buttons keep their colour. */
html:not(.color) .hero video,
html:not(.color) img:not([src$=".svg"]):not([src*="supporters/"]):not([src*="mgmt."]){filter:grayscale(1)}
html:not(.color) .page-head.photo:not([style*="company_team"]){background-color:#808080;background-blend-mode:luminosity}

/* ---- phones (RL iPhone test 2026-10-18). Kept last on purpose: several desktop rules above come after their own
   phone queries and won during the cascade (Mission's 420vh pin scrolled through empty screens). Scroll scenes stay
   pinned on phones too, sized for a portrait screen: the rendering takes the room left over, only the active step shows. ---- */
/* the gate name above the question is for phones, where the gate row is only a progress bar */
.dr-cap .gate{display:none}
@media (max-width:900px){
 /* Mission · how carbonation works */
 .cpin{height:330svh}
 .cpin-sticky{position:sticky;top:var(--navh);height:calc(100svh - var(--navh));display:flex;flex-direction:column;gap:0;padding-block:clamp(14px,2.5svh,28px) clamp(16px,3svh,32px)}
 .cpin-l{display:flex;flex-direction:column;flex:1;min-height:0}
 .cpin-l .how-h{margin-bottom:0;font-size:clamp(1.7rem,7.4vw,2.3rem)}
 .cpin-l .rs{flex:1;min-height:0;height:auto;display:flex;align-items:center;justify-content:center}
 .cpin-l .rs .stage{height:100%;width:auto;max-width:100%;aspect-ratio:960/880}
 .cpin .steps5{display:grid;flex:none;border-top:1px solid var(--rule);padding-top:14px}
 .cpin .steps5 li{grid-area:1/1;align-content:start;padding:0;border:0;opacity:0;transform:translateY(8px);transition:opacity .35s,transform .35s}
 .cpin .steps5 li:first-child{padding-top:0}
 .cpin .steps5:has(li.on) li:not(.on){opacity:0}
 .cpin .steps5 li.on{opacity:1;transform:none}
 .cpin .steps5 li b{font-size:1.25rem}
 .cpin .steps5 li p{max-height:none;opacity:1;margin-top:6px;font-size:15.5px;line-height:1.5}
 /* Mission · measured inline: text above, reactor and signals side by side */
 .measured{grid-template-columns:1fr;gap:28px}
 .ms-vis{grid-template-columns:minmax(0,.36fr) minmax(0,1fr);gap:12px}
 .ms-cell{max-width:none;margin:0}
 .sensors canvas{height:260px}

 /* Services · de-risking path: question and answers above, the rendering, then the five gates as a slim progress bar */
 .dr.dr-pin{height:300svh}
 .dr-sticky{position:sticky;top:var(--navh);height:calc(100svh - var(--navh));justify-content:center;gap:14px;padding-block:16px}
 .dr-pin .dr-cap{display:block;padding:0}
 .dr-pin .dr-cap .gate{display:block;color:var(--green-d);margin-bottom:8px}
 .dr-pin .dr-cap .q{font-size:1.45rem;margin-bottom:14px}
 .dr-pin .dr-cap dl{margin-top:10px}
 .dr-pin .dr-cap dt{margin-top:8px}
 .dr-pin .dr-fig .stage{width:calc(100% + 2 * var(--g));margin-inline:calc(-1 * var(--g))}
 .dr-row{gap:4px}
 .dr-row button,.dr-pin .dr-row button{font-size:0;padding:14px 0;opacity:1}
 .dr-row button .cap{display:none}
 .dr-row button::after{content:"";display:block;height:3px;background:var(--rule);transition:background .3s}
 .dr-row button.done::after{background:rgba(133,169,141,.55)}
 .dr-row button.on::after{background:var(--green)}

 /* Technology · roadmap: rendering edge to edge, years as a progress line, the current stage below */
 .rm-pin{height:360svh}
 .rm-sticky{position:sticky;top:var(--navh);height:calc(100svh - var(--navh));padding:0}
 .rm-sticky>.wrap{gap:18px}
 .rm-head h2{font-size:clamp(1.7rem,7.4vw,2.3rem)}
 .rm-pin .rmf .stage{width:calc(100% + 2 * var(--g));margin-inline:calc(-1 * var(--g));aspect-ratio:1600/700}
 .rmf .hs{display:none}
 .rm-line,.rm-pin .rm-line{grid-template-columns:repeat(6,1fr)}
 .rm-line button,.rm-pin .rm-line button{padding:16px 2px 0 0}
 .rm-line button b,.rm-line .tg{display:none}
 .rm-line button .cap{font-size:10px;letter-spacing:.04em;white-space:nowrap}
 .rm-pin .rm-now,.rm-now{display:block;min-height:0}
 .rm-now .big,.rm-pin .rm-now .big{font-size:2.6rem;margin-top:6px}
 .rm-now .nm{font-size:1.2rem}
 .rm-now p{font-size:15.5px;margin-top:6px}

 /* photo galleries (Technology, Services): an explicit height instead of aspect-ratio alone – the box holds only
    absolutely placed slides, and inside the stretched grid row iPhone Safari gave it no height (RL: no galleries on the phone) */
 .t-media.car{aspect-ratio:auto;height:75vw;min-height:260px;max-height:78svh;align-self:start;width:100%}
 /* Technology: rendering (top of the text column), then the text, then the photos (RL 2026-10-19) */
 body[data-page="technology"] .tsec .t-media.car{order:1}

 /* Company · map: the site names keep clear of their pins */
 .sm-tag{margin-left:16px;font-size:10.5px}
 .sm-tag.l{margin-left:-16px}
}

/* home: Measure · Model · Scale run without hover labels (RL 2026-10-19) */
body[data-page="home"] #mission .trio .hs{display:none}

/* home: each section ends in a door to its page – a small line, the page name in the headline face, an arrow.
   The rule draws across and the name rises in when the door comes into view (js/site.js); hover turns the rule green. */
.door-to{position:relative;display:flex;flex-direction:column;gap:6px;margin-top:clamp(56px,7vw,104px);padding-top:clamp(18px,2vw,26px);color:inherit;--in:0}
.door-to::before,.door-to::after{content:"";position:absolute;left:0;top:0;height:1px;background:currentColor;opacity:.28;width:calc(var(--in) * 100%);transition:width 1s cubic-bezier(.2,.7,.2,1)}
.door-to::after{height:2px;top:-.5px;background:var(--green);opacity:1;width:0;transition:width .5s cubic-bezier(.2,.7,.2,1)}
.door-to:hover::after,.door-to:focus-visible::after{width:100%}
.door-to .cap{opacity:calc(.35 + .65 * var(--in));transition:opacity .8s .15s}
.door-to .to{display:flex;align-items:center;justify-content:space-between;gap:24px;font-family:var(--head);font-weight:500;font-size:clamp(2.8rem,8.5vw,8rem);letter-spacing:-.045em;line-height:1.12;clip-path:inset(0 -.4em 0 0);padding-bottom:.16em;margin-bottom:-.16em}
.door-to .to span{display:block;transform:translateY(calc((1 - var(--in)) * 105%));transition:transform .9s .1s cubic-bezier(.2,.7,.2,1)}
.door-to .to svg{flex:none;width:.62em;height:.62em;transform:translateX(calc((1 - var(--in)) * -30%));opacity:var(--in);transition:transform .9s .25s cubic-bezier(.2,.7,.2,1),opacity .6s .25s,color .3s}
.door-to:hover .to svg{transform:translateX(.12em);color:var(--green)}
.navy .door-to:hover .to span,.homepic .door-to:hover .to span{color:var(--green-l)}
.paper .door-to:hover .to span,.white .door-to:hover .to span{color:var(--navy-l)}
.homepic .door-to{color:#fff;margin-top:clamp(40px,5vw,72px)}
@media (prefers-reduced-motion:reduce){.door-to{--in:1}.door-to *,.door-to::before{transition:none}}

/* clickable steps of a pinned sequence (Mission: how mineral carbonation works) */
.steps5 li.go{cursor:pointer}
.steps5 li.go:not(.on):hover{opacity:.7}
.steps5 li.go:focus-visible{outline:2px solid var(--green);outline-offset:4px}