/* Self-hosted latin subsets from Google Fonts (SIL Open Font License). Schibsted Grotesk is a variable font. */
@font-face{font-family:"Schibsted Grotesk";font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/schibsted-grotesk.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/jetbrains-mono-500.woff2) format("woff2")}
/* Operabot for robot makers — dark plant-floor language (from variant B): condensed display, one signal-orange accent (Shkoda Robotics brand) */
:root{
  --bg:#101214; --panel:#191C1F; --panel-2:#202428; --ink:#F2F3F0; --muted:#A3A9AE; --rule:#2C3135;
  --accent:#FF4F1F; --accent-ink:#101214;
  --fd:"Schibsted Grotesk","Inter Tight","Segoe UI",system-ui,sans-serif; --fb:"Schibsted Grotesk","Segoe UI",system-ui,sans-serif; --fm:"JetBrains Mono",ui-monospace,Consolas,monospace;
  --ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:72px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.6 var(--fb);-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:var(--accent)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.wrap{max-width:1160px;margin:0 auto;padding-inline:20px}
h1,h2,h3{margin:0;font-family:var(--fd);letter-spacing:-.03em;line-height:1.02;text-wrap:balance;font-weight:700}
h1{font-size:clamp(40px,6.6vw,86px);max-width:14ch}
h2{font-size:clamp(30px,3.8vw,50px);margin-bottom:16px;max-width:20ch}
h3{font-size:21px;letter-spacing:-.015em;margin-bottom:8px}
p{margin:0 0 12px;max-width:64ch}
.muted{color:var(--muted)}
.lede{font-size:clamp(18px,1.6vw,21px);color:var(--muted);max-width:54ch}
.tag{font:500 12px/1.3 var(--fm);color:var(--accent);letter-spacing:.1em;text-transform:uppercase;margin:0 0 20px}
.tag::before{content:"[ "}.tag::after{content:" ]"}
.zh{font-size:15.5px;color:var(--muted);border-left:2px solid var(--accent);padding-left:14px;margin-top:26px;max-width:46ch}
sup a{text-decoration:none;font:500 11px var(--fm)}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;background:var(--accent);color:var(--accent-ink);padding:8px 12px;z-index:50}

/* top bar */
.top{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--rule)}
.top-in{display:flex;align-items:center;gap:26px;height:72px}@media (max-width:700px){.top-in{height:60px}}
.logo{font:700 20px var(--fd);color:var(--ink);text-decoration:none;display:flex;gap:10px;align-items:center;letter-spacing:-.02em}
.logo svg{height:54px;width:auto;display:block}@media (max-width:700px){.logo svg{height:40px}}
.nav{display:flex;gap:22px;margin-left:auto}
.nav a{color:var(--muted);text-decoration:none;font-size:14.5px}
.nav a:hover{color:var(--ink)}
@media (max-width:900px){.nav{display:none}.top-in .btn{margin-left:auto}}

.btn{display:inline-block;background:var(--accent);color:var(--accent-ink);font:600 15px var(--fb);letter-spacing:0;padding:15px 24px;text-decoration:none;border:0;cursor:pointer;border-radius:3px;transition:transform .15s var(--ease),filter .15s}
.btn:active{transform:scale(.98)}
.btn:hover{filter:brightness(1.1)}
.btn-sm{padding:9px 14px;font-size:13px}
.link{color:var(--ink);font-weight:500;text-underline-offset:4px}
.cta-row{display:flex;gap:22px;align-items:center;flex-wrap:wrap;margin-top:30px}

/* sections */
.sec{padding-block:clamp(64px,9vw,112px);border-bottom:1px solid var(--rule)}
.sec-panel{background:var(--panel)}
.head{display:grid;gap:8px;margin-bottom:38px}
.cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:start}
@media (max-width:860px){.cols{grid-template-columns:minmax(0,1fr)}}

/* stats strip */
.strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--rule);background:color-mix(in srgb,var(--panel) 86%,transparent);margin:0}
.strip div{padding:18px 20px;border-right:1px solid var(--rule)}
.strip div:last-child{border-right:0}
.strip dt{font:500 11.5px/1.35 var(--fm);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);order:2}
.strip dd{margin:0 0 4px;font:700 clamp(34px,4.4vw,52px)/1 var(--fd);letter-spacing:-.03em;color:var(--accent);font-variant-numeric:tabular-nums}
.strip div{display:flex;flex-direction:column}
@media (max-width:560px){.strip{grid-template-columns:minmax(0,1fr)}.strip div{border-right:0;border-bottom:1px solid var(--rule)}.strip div:last-child{border-bottom:0}}

/* hero: shared */
.hero{position:relative;border-bottom:1px solid var(--rule)}
.grid-bg{background:linear-gradient(transparent calc(100% - 1px),var(--rule) 0) 0 0/100% 48px,linear-gradient(90deg,transparent calc(100% - 1px),var(--rule) 0) 0 0/48px 100%}
.hero-copy{position:relative;z-index:2}

/* hero: cinematic — pinned media that pulls back while the page scrolls */
.hero-cine{height:170vh}
.hero-cine .pin{position:sticky;top:0;height:100vh;min-height:620px;overflow:hidden;display:flex;align-items:flex-end}
.hero-cine .media{position:absolute;inset:0;z-index:0}
.hero-cine .media>*{width:100%;height:100%;object-fit:cover;display:block}
.hero-cine .shade{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(16,18,20,.35) 0%,rgba(16,18,20,.55) 45%,var(--bg) 100%)}
.hero-cine .hero-copy{padding-bottom:clamp(36px,7vh,80px);width:100%}
.hero-cine .strip{margin-top:30px;max-width:720px}
.hero-cine h1{font-size:clamp(40px,6.2vw,80px)}
.hero-cine .shade{background:linear-gradient(90deg,var(--bg) 0%,rgba(16,18,20,.78) 40%,rgba(16,18,20,.1) 75%),linear-gradient(180deg,transparent 60%,var(--bg) 100%)}
@media (max-width:860px){.hero-cine .shade{background:linear-gradient(180deg,rgba(16,18,20,.3) 0%,rgba(16,18,20,.86) 48%,var(--bg) 100%)}}
@media (max-height:760px){.hero-cine .strip dd{font-size:34px}.hero-cine .strip div{padding:12px 16px}}

/* hero: atlas — pinned globe that zooms into Iberia */
.stage{position:relative;height:300vh}
.stage .pin{position:sticky;top:0;height:100vh;min-height:480px;overflow:hidden}
.stage canvas{position:absolute;inset:0;width:100%;height:100%}
.stage .hero-copy{position:absolute;inset:0;display:flex;align-items:center;pointer-events:none}
.stage .hero-copy>.wrap{width:100%}
.stage .hero-copy a,.stage .hero-copy .btn{pointer-events:auto}
.stage .copy-a{max-width:620px}
.stage .cap{position:absolute;left:0;right:0;bottom:clamp(20px,6vh,60px);z-index:2;opacity:0}
.stage .cap .box{background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(6px);border:1px solid var(--rule);padding:20px 22px;max-width:520px}
.stage .cap h2{font-size:clamp(26px,3vw,38px);margin-bottom:8px}
.stage .cap p{margin:0;color:var(--muted);font-size:15.5px}
.stage .scrim{position:absolute;inset:0;background:linear-gradient(90deg,var(--bg) 0%,rgba(16,18,20,.82) 38%,rgba(16,18,20,0) 70%);z-index:1}
@media (max-width:860px){.stage .scrim{background:linear-gradient(180deg,rgba(16,18,20,.9) 0%,rgba(16,18,20,.72) 55%,rgba(16,18,20,.2) 100%)}.stage .hero-copy{align-items:flex-start;padding-top:84px}}
.stage .hero-copy,.stage .scrim{z-index:2}
.stage .scrim{z-index:1}

/* hero: dossier — dense, two columns */
.hero-dos{padding-block:clamp(56px,8vw,96px) clamp(48px,6vw,72px)}
.hero-dos .cols{align-items:end}
.hero-dos h1{font-size:clamp(40px,6vw,76px)}
.facts{border-top:1px solid var(--rule);margin:0;padding:0;list-style:none}
.facts li{display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px;padding:13px 0;border-bottom:1px solid var(--rule);font-size:15.5px}
.facts b{font:500 12px/1.5 var(--fm);letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
@media (max-width:480px){.facts li{grid-template-columns:minmax(0,1fr);gap:2px}}

/* media slots and scroll zoom */
.zoom{position:relative;margin:0;overflow:hidden;background:var(--panel);border:1px solid var(--rule)}
.zoom .m{display:block;width:100%;height:100%;object-fit:cover}
.zoom figcaption{position:absolute;left:0;bottom:0;padding:10px 14px;font:500 11.5px var(--fm);letter-spacing:.1em;text-transform:uppercase;color:var(--ink);background:rgba(16,18,20,.72)}
.r-21x9{aspect-ratio:21/9}.r-16x9{aspect-ratio:16/9}.r-3x2{aspect-ratio:3/2}.r-4x3{aspect-ratio:4/3}
@media (max-width:700px){.r-21x9{aspect-ratio:16/10}}
.ph{display:block;width:100%;height:100%;background:
  radial-gradient(120% 90% at 78% 18%,rgba(255,79,31,.16),transparent 55%),
  linear-gradient(transparent calc(100% - 1px),rgba(255,255,255,.06) 0) 0 0/100% 40px,
  linear-gradient(90deg,transparent calc(100% - 1px),rgba(255,255,255,.06) 0) 0 0/40px 100%,
  linear-gradient(160deg,#1E2327,#121416)}
.ph{position:relative}
.ph::after{content:attr(data-slot);position:absolute;right:12px;top:12px;font:500 11px var(--fm);letter-spacing:.08em;color:var(--muted);border:1px dashed var(--rule);padding:4px 8px;background:rgba(16,18,20,.6)}
.band-media{border-bottom:1px solid var(--rule)}
.band-media .zoom{border-width:0}

/* cards grid */
.g4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule)}
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule)}
.g4>*,.g3>*{background:var(--panel);padding:26px 22px;min-width:0;transition:background .2s var(--ease)}
.sec-panel .g4>*,.sec-panel .g3>*{background:var(--bg)}
.g4 p,.g3 p{font-size:15.5px;color:var(--muted);margin:0}
.k{font:500 12px var(--fm);color:var(--accent);margin-bottom:14px;display:block;letter-spacing:.1em}
@media (hover:hover){.g4>*:hover,.g3>*:hover{background:var(--panel-2)}}
@media (max-width:980px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:minmax(0,1fr)}}
@media (max-width:600px){.g4{grid-template-columns:minmax(0,1fr)}}
.card-media{margin:-26px -22px 20px;aspect-ratio:4/3;overflow:hidden;border-bottom:1px solid var(--rule)}
.card-media>*{width:100%;height:100%;object-fit:cover;display:block}

/* the gap */
.gap-list{display:grid;gap:0;margin:0;padding:0;list-style:none;border-top:1px solid var(--rule)}
.gap-list li{display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr);gap:20px;padding:20px 0;border-bottom:1px solid var(--rule);align-items:baseline}
.gap-list b{font:700 clamp(30px,3.6vw,44px)/1 var(--fd);letter-spacing:-.03em;color:var(--accent)}
.gap-list span{color:var(--muted)}
@media (max-width:600px){.gap-list li{grid-template-columns:minmax(0,1fr);gap:6px}}

/* territory */
.map-box{position:relative;border:1px solid var(--rule);background:var(--bg);aspect-ratio:4/3;overflow:hidden}
.map-box canvas{position:absolute;inset:0;width:100%;height:100%}
.bars{display:grid;gap:10px;margin:22px 0 0;padding:0;list-style:none}
.bars li{display:grid;grid-template-columns:minmax(0,1fr) 44px;gap:4px 12px;font-size:14.5px;align-items:center}
.bars i{grid-column:1/-1;height:6px;background:var(--rule);display:block;position:relative}
.bars i::after{content:"";position:absolute;inset:0;width:var(--w);background:var(--accent)}
.bars b{font:500 13px var(--fm);text-align:right;color:var(--ink)}
.note{font-size:13.5px;color:var(--muted);margin-top:14px}

/* pilot timeline */
.tl{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:22px;margin:0;padding:34px 0 0;list-style:none}
.tl::before,.tl::after{content:"";position:absolute;left:0;right:0;top:6px;height:3px;background:var(--rule)}
.tl::after{background:var(--accent);transform-origin:left;}
.tl li{position:relative}
.tl li::before{content:"";position:absolute;top:-35px;left:0;width:15px;height:15px;background:var(--bg);border:3px solid var(--accent)}
.sec-panel .tl li::before{background:var(--panel)}
.tl b{font:500 12px var(--fm);letter-spacing:.1em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:6px}
.tl h3{font-size:20px}
.tl p{font-size:15px;color:var(--muted);margin:0}
@media (max-width:900px){
  .tl{grid-template-columns:minmax(0,1fr);padding:0 0 0 34px;gap:26px}
  .tl::before,.tl::after{left:6px;right:auto;top:0;bottom:0;width:3px;height:auto}
  .tl::after{transform-origin:top}
  .tl li::before{top:2px;left:-34px}
}

/* models table */
.tbl-wrap{overflow-x:auto;border:1px solid var(--rule)}
.tbl{border-collapse:collapse;width:100%;min-width:760px;font-size:15px}
.tbl th,.tbl td{padding:15px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--rule)}
.tbl tr:last-child th,.tbl tr:last-child td{border-bottom:0}
.tbl thead th{font:500 12px var(--fm);letter-spacing:.1em;text-transform:uppercase;color:var(--accent);background:var(--panel);border-bottom:2px solid var(--accent)}
.tbl tbody th{font:600 17px var(--fd);letter-spacing:-.01em;width:19%}
.tbl td{color:var(--muted)}

/* robot scenes */
.scene{display:block;width:100%;height:auto;margin:-6px 0 14px}
.scene .s{fill:none;stroke:var(--muted);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.scene .a{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.scene .f{fill:var(--accent)}
.scene .d{fill:none;stroke:var(--rule);stroke-width:2;stroke-dasharray:5 5}
.scene .beam{fill:var(--accent);opacity:.18}
.arm1{transform-origin:62px 112px;animation:arm1 7s var(--ease) infinite}
.arm2{transform-origin:62px 62px;animation:arm2 7s var(--ease) infinite}
.box-in{animation:boxin 7s linear infinite}
.amr{offset-path:path("M24 118 H120 C150 118 150 52 180 52 H218");offset-rotate:0deg;animation:run 9s var(--ease) infinite alternate}
.beam{transform-origin:150px 62px;animation:sweep 5s ease-in-out infinite alternate}
.leg-a{animation:step 1.6s ease-in-out infinite alternate}.leg-b{animation:step 1.6s ease-in-out infinite alternate-reverse}
@keyframes arm1{0%,12%{transform:rotate(-16deg)}42%,58%{transform:rotate(14deg)}88%,100%{transform:rotate(-16deg)}}
@keyframes arm2{0%,12%{transform:rotate(24deg)}42%,58%{transform:rotate(-20deg)}88%,100%{transform:rotate(24deg)}}
@keyframes boxin{0%{transform:translateX(-46px);opacity:0}10%{opacity:1}30%,100%{transform:translateX(0);opacity:1}}
@keyframes run{0%,6%{offset-distance:0%}94%,100%{offset-distance:100%}}
@keyframes sweep{from{transform:rotate(-12deg)}to{transform:rotate(16deg)}}
@keyframes step{from{transform:translateX(-3px)}to{transform:translateX(3px)}}
@media (prefers-reduced-motion:reduce){.arm1,.arm2,.box-in,.amr,.beam,.leg-a,.leg-b{animation:none}.amr{offset-distance:55%}}

/* who / assessed */
.quote{font:600 clamp(26px,3.4vw,44px)/1.1 var(--fd);letter-spacing:-.025em;max-width:22ch;margin:0}
.quote .w{color:var(--muted)}
.big{font:700 clamp(64px,10vw,128px)/.9 var(--fd);letter-spacing:-.05em;color:var(--accent);font-variant-numeric:tabular-nums}

/* FAQ */
.faq details{border-bottom:1px solid var(--rule)}
.faq details:first-of-type{border-top:1px solid var(--rule)}
.faq summary{cursor:pointer;padding:20px 34px 20px 0;font:600 20px/1.25 var(--fd);letter-spacing:-.015em;list-style:none;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:16px;font:400 26px var(--fm);color:var(--accent)}
.faq details[open] summary::after{content:"–"}
.faq p{color:var(--muted);padding-bottom:20px;margin:0}

/* form */
.cta-sec{background:var(--panel)}
.form{display:grid;gap:16px;background:var(--bg);border:1px solid var(--rule);padding:clamp(20px,3vw,32px)}
.form .row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
@media (max-width:600px){.form .row{grid-template-columns:minmax(0,1fr)}}
.form label{display:grid;gap:6px;font:500 12px var(--fm);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.form input,.form select,.form textarea{width:100%;background:var(--panel);color:var(--ink);border:1px solid var(--rule);padding:12px 12px;font:400 16px var(--fb);border-radius:0}
.form textarea{min-height:96px;resize:vertical}
.form .check{display:flex;gap:10px;align-items:flex-start;text-transform:none;letter-spacing:0;font:400 14.5px/1.45 var(--fb)}
.form .check input{width:auto;margin-top:3px}
.form .btn{justify-self:start}
.form-ok{background:#16301F;color:#7FD3A4;padding:12px 14px;margin:0}

footer{padding-block:40px 110px;font-size:14px;color:var(--muted)}
footer p{max-width:none}
footer a{color:var(--muted)}

/* sticky mobile CTA */
.sticky-cta{display:none}
@media (max-width:700px){
  .sticky-cta{display:block;position:fixed;left:0;right:0;bottom:0;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(8px);border-top:1px solid var(--rule);z-index:19;transition:transform .2s ease}
  .sticky-cta .btn{display:block;text-align:center}
  .sticky-cta.off{transform:translateY(110%)}
  .top-in .btn{display:none}
}

/* scroll-driven motion: only where supported and wanted */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .zoom .m{animation:zoom-out linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
    .zoom.in .m{animation-name:zoom-in}
    .hero-cine .media{animation:pull-back linear both;animation-timeline:scroll(root);animation-range:0 110vh}
    .hero-cine .hero-copy{animation:lift linear both;animation-timeline:scroll(root);animation-range:20vh 110vh}
    .tl::after{animation:draw linear both;animation-timeline:view();animation-range:entry 25% cover 55%}
    .head h2,.g4>*,.g3>*,.tbl-wrap,.gap-list li{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 60%}
    @keyframes zoom-out{from{transform:scale(1.2) translateY(-4%)}to{transform:scale(1) translateY(4%)}}
    @keyframes zoom-in{from{transform:scale(1)}to{transform:scale(1.14)}}
    @keyframes pull-back{from{transform:scale(1.28)}to{transform:scale(1)}}
    @keyframes lift{from{transform:none;opacity:1}to{transform:translateY(-16px);opacity:.25}}
    @keyframes draw{from{transform:scale(0,1)}to{transform:scale(1,1)}}
    @keyframes rise{from{transform:translateY(18px)}to{transform:none}}
    @media (max-width:900px){@keyframes draw{from{transform:scale(1,0)}to{transform:scale(1,1)}}}
  }
}

/* ---------- iteration 2: cinematic components ---------- */
.progress{position:fixed;left:0;top:0;height:2px;width:100%;background:var(--accent);transform:scale(0,1);transform-origin:left;z-index:30;pointer-events:none}
.ln{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.ln>span{display:block}
.scroll-cue{position:absolute;right:20px;bottom:24px;z-index:3;font:500 11px var(--fm);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:10px}
.scroll-cue i{display:block;width:1px;height:40px;background:linear-gradient(var(--accent),transparent);transform-origin:top}
@media (max-width:860px){.scroll-cue{display:none}}
.hero-cine .pin{align-items:center}
.hero-cine .hero-copy{padding-bottom:0}
.hero-cine .strip{margin-top:36px;max-width:680px;background:color-mix(in srgb,var(--bg) 72%,transparent);backdrop-filter:blur(6px)}
.marquee{overflow:hidden;border-bottom:1px solid var(--rule);background:var(--panel);padding:14px 0;white-space:nowrap}
.marquee .track{display:inline-flex;animation:mq 60s linear infinite}
.marquee span{font:500 13px var(--fm);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:0 28px;border-right:1px solid var(--rule)}
.marquee b{color:var(--accent);font-weight:500}
@keyframes mq{to{transform:translateX(-50%)}}
@media (hover:hover){.marquee:hover .track{animation-play-state:paused}}
.foot-logo{padding:48px 0 20px;max-width:680px;margin:0 auto}.foot-logo img{width:100%;height:auto;display:block}
.wordmark::before{content:attr(data-t)}
.wordmark{display:block;font:700 clamp(64px,17vw,240px)/.85 var(--fd);letter-spacing:-.05em;color:var(--panel-2);margin:28px 0 -6px;user-select:none}
footer{padding-top:28px}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);gap:28px;padding:30px 0 18px;border-top:1px solid var(--rule);font-size:14.5px}
.foot-grid b{display:block;font:500 11.5px var(--fm);letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.foot-grid a{color:var(--ink);text-decoration:none}.foot-grid a:hover{text-decoration:underline}
@media (max-width:700px){.foot-grid{grid-template-columns:minmax(0,1fr)}}
.foot-notes{font-size:12.5px;color:var(--muted);border-top:1px solid var(--rule);padding-top:14px}
.foot-notes p{max-width:none;margin-bottom:6px}
.hero-cine .cta-row .link{color:var(--ink)}

@media (prefers-reduced-motion:no-preference){
  .ln>span{animation:up .7s var(--ease) both}
  .ln:nth-child(2)>span{animation-delay:.12s}
  .hero-cine .tag{animation:fade .6s var(--ease) both}
  .hero-cine .lede{animation:fade .8s var(--ease) .35s both}
  .hero-cine .cta-row{animation:fade .8s var(--ease) .5s both}
  .hero-cine .strip{animation:fade .9s var(--ease) .7s both}
  .scroll-cue i{animation:cue 1.8s ease-in-out infinite}
  @keyframes up{from{transform:translateY(108%)}to{transform:none}}
  @keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  @keyframes cue{0%{transform:scale(1,0)}50%{transform:scale(1,1)}100%{transform:scale(1,0)}}
  @supports (animation-timeline:scroll()){
    .progress{animation:grow linear both;animation-timeline:scroll(root)}
    @keyframes grow{to{transform:scale(1,1)}}
    .hero-cine .scroll-cue{animation:fade-out linear both;animation-timeline:scroll(root);animation-range:0 25vh}
    @keyframes fade-out{to{opacity:0}}
    .quote .w{animation:ink linear both;animation-timeline:view();animation-range:entry calc(45% + var(--i) * 1.6%) entry calc(60% + var(--i) * 1.6%)}
    @keyframes ink{to{color:var(--ink)}}
    .band-media .zoom{animation:unveil linear both;animation-timeline:view();animation-range:entry 0% entry 45%}
    @keyframes unveil{from{clip-path:inset(0 6% 0 6%)}to{clip-path:inset(0 0 0 0)}}
    .strip div dd,.gap-list b{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 50%}
  }
}
@media (prefers-reduced-motion:reduce){.marquee .track{animation:none}.quote .w{color:var(--ink)}}

/* ---------- iteration 3: light, shimmer, wind ---------- */
.hero-cine .pin{--mx:50%;--my:40%}
.hero-cine .pin::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(520px 520px at var(--mx) var(--my),rgba(255,79,31,.10),transparent 60%);transition:opacity .4s}
.nav a{position:relative;padding-bottom:2px}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--accent);transform:scale(0,1);transform-origin:left;transition:transform .25s var(--ease)}
.nav a:hover::after{transform:scale(1,1)}
@media (hover:hover){
  .g4>*:hover,.g3>*:hover{box-shadow:inset 0 0 0 1px rgba(255,79,31,.35)}
  .btn:hover{box-shadow:0 0 0 4px rgba(255,79,31,.18)}
}
h1{font-size:clamp(40px,6.8vw,88px)}
.hero-cine h1{font-size:clamp(40px,6.4vw,84px)}
.lede{font-size:clamp(18px,1.6vw,20px)}
@media (prefers-reduced-motion:no-preference){
  .strip dd,.big,.gap-list b{background:linear-gradient(100deg,var(--accent) 0%,var(--accent) 35%,#FFB899 50%,var(--accent) 65%,var(--accent) 100%);background-size:240% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmer 5s linear infinite}
  .strip div:nth-child(2) dd{animation-delay:-1.6s}.strip div:nth-child(3) dd{animation-delay:-3.2s}
  @keyframes shimmer{from{background-position:120% 0}to{background-position:-120% 0}}
  @supports (animation-timeline:view()){
    .strip div dd,.gap-list b{animation:shimmer 5s linear infinite,rise linear both;animation-timeline:auto,view();animation-range:normal,entry 0% entry 50%}
  }
}

/* ---------- iteration 4: pinned scene, side rail, hero video ---------- */
.hero-cine .media video{object-fit:cover}
.scene-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:start;timeline-scope:--w1,--w2,--w3,--w4}
.scene-media{position:sticky;top:84px;aspect-ratio:4/3;border:1px solid var(--rule);background:var(--panel);overflow:hidden}
.scene-media .layer{position:absolute;inset:0;opacity:0}
.scene-media .layer>*{width:100%;height:100%;object-fit:cover;display:block}
.scene-media .l1{opacity:1}
.scene-steps{list-style:none;margin:0;padding:0}
.scene-steps li{min-height:62vh;display:flex;flex-direction:column;justify-content:center;padding:28px 0;border-top:1px solid var(--rule)}
.scene-steps li:first-child{border-top:0}
.scene-steps h3{font-size:clamp(24px,2.4vw,32px)}
.scene-steps p{color:var(--muted);max-width:44ch}
.scene-steps .step-media{display:none}
.scene-steps .s1{view-timeline-name:--w1}.scene-steps .s2{view-timeline-name:--w2}.scene-steps .s3{view-timeline-name:--w3}.scene-steps .s4{view-timeline-name:--w4}
@supports (animation-timeline:view()){
  .scene-media .layer{animation:lay linear both;animation-range:entry 0% exit 100%}
  .scene-media .l1{animation-name:lay1;animation-timeline:--w1}
  .scene-media .l2{animation-timeline:--w2}.scene-media .l3{animation-timeline:--w3}
  .scene-media .l4{animation-name:lay4;animation-timeline:--w4}
  @keyframes lay{0%{opacity:0}30%,70%{opacity:1}100%{opacity:0}}
  @keyframes lay1{0%,70%{opacity:1}100%{opacity:0}}
  @keyframes lay4{0%{opacity:0}30%,100%{opacity:1}}
}
@media (max-width:860px){
  .scene-wrap{display:block}
  .scene-media{display:none}
  .scene-steps li{min-height:0;padding:22px 0}
  .scene-steps .step-media{display:block;aspect-ratio:16/10;overflow:hidden;margin-bottom:16px;border:1px solid var(--rule)}
  .scene-steps .step-media>*{width:100%;height:100%;object-fit:cover;display:block}
}
.rail{position:fixed;left:22px;top:50%;transform:translateY(-50%);z-index:15;display:none;flex-direction:column;gap:9px}
@media (min-width:1360px){.rail{display:flex}}
.rail a{font:500 11px var(--fm);color:var(--muted);text-decoration:none;display:flex;gap:10px;align-items:center;letter-spacing:.08em;text-transform:uppercase;transition:color .2s}
.rail a i{font-style:normal;width:18px}
.rail a span{opacity:0;transform:translateX(-4px);transition:opacity .2s,transform .2s var(--ease)}
.rail a:hover span,.rail a.on span{opacity:1;transform:none}
.rail a.on{color:var(--accent)}

/* ---------- iteration 5: site sheet ---------- */
.doc{position:relative;background:var(--bg);border:1px solid var(--rule);padding:0;overflow:hidden;font-size:14.5px}
.doc-head{display:flex;justify-content:space-between;padding:12px 16px;border-bottom:1.5px solid var(--accent);font:500 11.5px var(--fm);letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.doc dl{margin:0;padding:6px 16px 10px}
.doc dl div{display:grid;grid-template-columns:118px minmax(0,1fr);gap:12px;padding:8px 0;border-bottom:1px solid var(--rule)}
.doc dl div:last-child{border-bottom:0}
.doc dt{font:500 11px/1.6 var(--fm);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.doc dd{margin:0;color:var(--ink)}
.doc .scan{position:absolute;left:0;right:0;top:0;height:28px;background:linear-gradient(rgba(255,79,31,0),rgba(255,79,31,.10));pointer-events:none;opacity:0}
@media (prefers-reduced-motion:no-preference){.doc .scan{animation:scan 6s linear infinite;opacity:1}@keyframes scan{from{transform:translateY(-30px)}to{transform:translateY(620px)}}}
@media (max-width:480px){.doc dl div{grid-template-columns:minmax(0,1fr);gap:2px}}

/* ---------- iteration 6: pictures, status strip, credits ---------- */
.zoom picture,.scene-media .layer picture,.card-media picture,.step-media picture{display:block;width:100%;height:100%}
.zoom picture .m,.scene-media .layer picture .m,.card-media picture .m,.step-media picture .m{width:100%;height:100%;object-fit:cover;display:block}
.status{border-bottom:1px solid var(--rule);background:var(--bg)}
.status .wrap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
.status div{padding:16px 18px 16px 0;border-right:1px solid var(--rule);margin-right:18px}
.status div:last-child{border-right:0;margin-right:0}
.status b{display:block;font:500 11px/1.4 var(--fm);letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:4px}
.status span{font-size:14.5px;color:var(--ink)}
@media (max-width:860px){.status .wrap{grid-template-columns:repeat(2,minmax(0,1fr))}.status div:nth-child(2){border-right:0}}
@media (max-width:480px){.status .wrap{grid-template-columns:minmax(0,1fr)}.status div{border-right:0;border-bottom:1px solid var(--rule);margin-right:0}.status div:last-child{border-bottom:0}}
.credits{font-size:12px;color:var(--muted);margin-top:8px}

/* ---------- iteration 7: task cards, commitments ---------- */
.tasks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
@media (max-width:980px){.tasks{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.tasks{grid-template-columns:minmax(0,1fr)}}
.task{background:var(--bg);border:1px solid var(--rule);overflow:hidden;transition:transform .25s var(--ease),box-shadow .25s}
.task-media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--panel)}
.task-media picture,.task-media .m{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.task-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,18,20,.1) 40%,rgba(16,18,20,.78) 100%)}
.task-n{position:absolute;left:14px;top:12px;z-index:1;font:500 11px var(--fm);letter-spacing:.1em;color:var(--ink);background:rgba(16,18,20,.6);padding:4px 7px;border:1px solid rgba(255,255,255,.12)}
.task-c{position:absolute;left:14px;bottom:12px;z-index:1;font:500 11px var(--fm);letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.task h3{font-size:20px;margin:16px 18px 6px}
.task p{font-size:15px;color:var(--muted);margin:0 18px 18px}
@media (hover:hover){.task:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(0,0,0,.35),inset 0 0 0 1px rgba(255,79,31,.35)}.task:hover .task-media .m{transform:scale(1.05)}}
@media (prefers-reduced-motion:reduce){.task,.task-media .m{transition:none}}
.commit{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule)}
.commit>div{background:var(--panel);padding:24px 22px}
.sec-panel .commit>div{background:var(--bg)}
.commit b{display:block;font:700 clamp(26px,3vw,40px)/1 var(--fd);letter-spacing:-.03em;color:var(--accent);margin-bottom:10px}
.commit h3{font-size:18px;margin-bottom:6px}
.commit p{font-size:14.5px;color:var(--muted);margin:0}
@media (max-width:900px){.commit{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.commit{grid-template-columns:minmax(0,1fr)}}

/* ---------- iteration 8: humanoid band ---------- */
.band-hum{position:relative}
.band-hum .zoom{aspect-ratio:21/9}
@media (max-width:700px){.band-hum .zoom{aspect-ratio:4/5}}
.band-hum .band-copy{position:absolute;inset:0;z-index:2;display:flex;align-items:center;pointer-events:none}
.band-hum .band-copy .wrap{width:100%}
.band-hum .band-copy h2{max-width:12ch;font-size:clamp(40px,6vw,92px);text-shadow:0 2px 24px rgba(0,0,0,.55)}
.band-hum .band-copy .lede{max-width:42ch;color:var(--ink);text-shadow:0 1px 14px rgba(0,0,0,.6)}
.band-hum .zoom::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(16,18,20,.82) 0%,rgba(16,18,20,.45) 45%,rgba(16,18,20,.05) 75%)}
@media (max-width:700px){.band-hum .zoom::after{background:linear-gradient(180deg,rgba(16,18,20,.1) 0%,rgba(16,18,20,.85) 70%)}.band-hum .band-copy{align-items:flex-end;padding-bottom:28px}}
.band-hum figcaption{z-index:3}

/* ---------- iteration 9: hero recedes, bigger scene, timeline, bands, big number ---------- */
/* hero: the globe recedes (handled in JS) and dims; the copy stays put */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:scroll()){
    .hero-cine .media{animation:recede linear both;animation-timeline:scroll(root);animation-range:0 110vh}
    .hero-cine .hero-copy{animation:none}
    @keyframes recede{from{opacity:1;filter:none}to{opacity:.28;filter:blur(1px)}}
  }
}
/* scene: media fills the viewport height, steps are shorter */
.scene-wrap{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(24px,4vw,56px)}
.scene-media{top:76px;aspect-ratio:auto;height:calc(100vh - 100px);max-height:760px}
.scene-steps li{min-height:52vh}
.scene-steps li:first-child{min-height:38vh;justify-content:flex-start;padding-top:8px}
/* timeline: thicker track, filled milestones, moving tip */
.tl{padding-top:44px}
.tl::before,.tl::after{top:8px;height:4px}
.tl li::before{top:-44px;width:18px;height:18px;border-width:3px;background:var(--panel);transition:none}
.tl .tip{position:absolute;left:0;right:0;top:-2px;height:24px;pointer-events:none;transform:translateX(-100%)}
.tl .tip::after{content:"";position:absolute;right:-12px;top:0;width:24px;height:24px;border-radius:50%;background:radial-gradient(circle,#FFB899 0 28%,rgba(255,79,31,.55) 40%,rgba(255,79,31,0) 70%)}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .tl::after{animation-range:entry 20% cover 70%}
    .tl .tip{animation:tip linear both;animation-timeline:view();animation-range:entry 20% cover 70%}
    @keyframes tip{from{transform:translateX(-100%)}to{transform:none}}
    .tl li::before{animation:fillbox linear both;animation-timeline:view();animation-range:entry calc(20% + var(--i) * 11%) entry calc(28% + var(--i) * 11%)}
    @keyframes fillbox{from{background:var(--panel);box-shadow:none}to{background:var(--accent);box-shadow:0 0 0 6px rgba(255,79,31,.18)}}
    .tl li b,.tl li h3,.tl li p{animation:rise linear both;animation-timeline:view();animation-range:entry calc(22% + var(--i) * 11%) entry calc(34% + var(--i) * 11%)}
  }
}
@media (max-width:900px){
  .tl{padding-top:0;padding-left:40px}
  .tl::before,.tl::after{left:8px;width:4px;top:0}
  .tl li::before{top:2px;left:-40px}
  .tl .tip{left:-1px;right:auto;top:0;bottom:0;width:24px;height:auto;transform:translateY(-100%)}
  .tl .tip::after{right:auto;bottom:-12px;top:auto;left:0}
  @media (prefers-reduced-motion:no-preference){@keyframes tip{from{transform:translateY(-100%)}to{transform:none}}}
}
@media (prefers-reduced-motion:reduce){.tl .tip{display:none}.tl li::before{background:var(--accent)}}
/* bands with copy */
.band-copy-wrap{position:relative}
.band-copy-wrap .band-copy{position:absolute;inset:0;z-index:2;display:flex;align-items:center;pointer-events:none}
.band-copy-wrap .band-copy .wrap{width:100%}
.band-copy-wrap .band-copy h2{max-width:16ch;text-shadow:0 2px 24px rgba(0,0,0,.6)}
.band-copy-wrap .band-copy .lede{max-width:44ch;color:var(--ink);text-shadow:0 1px 14px rgba(0,0,0,.6)}
.band-copy-wrap .zoom::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(16,18,20,.85) 0%,rgba(16,18,20,.5) 45%,rgba(16,18,20,.08) 75%)}
.band-copy-wrap figcaption{z-index:3}
@media (max-width:700px){.band-copy-wrap .zoom{aspect-ratio:4/5}.band-copy-wrap .zoom::after{background:linear-gradient(180deg,rgba(16,18,20,.15) 0%,rgba(16,18,20,.88) 70%)}.band-copy-wrap .band-copy{align-items:flex-end;padding-bottom:30px}}
/* the big number */
.big{font-size:clamp(110px,17vw,240px);line-height:.85;letter-spacing:-.06em}
#makers .cols{align-items:center}
/* territory map box: taller, no border, looks like a chart */
.map-box{aspect-ratio:5/4;border:0;background:radial-gradient(80% 70% at 55% 50%,#15181B,var(--bg) 85%)}

/* ---------- V1: scroll-craft rules ---------- */
/* three planes in the hero: globe (far, recedes), wind (mid), haze + grain (near) */
.hero-cine .haze{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(60% 50% at 20% 85%,rgba(255,79,31,.07),transparent 70%),linear-gradient(180deg,transparent 55%,rgba(16,18,20,.55) 100%)}
.hero-cine .haze::after{content:"";position:absolute;inset:0;opacity:.18;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E")}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:scroll()){
    .hero-cine .haze{animation:haze linear both;animation-timeline:scroll(root);animation-range:0 110vh}
    @keyframes haze{from{transform:translateY(0)}to{transform:translateY(-14vh)}}
  }
}
/* the peak: map first, more room, quieter neighbours */
.peak{padding-block:clamp(80px,12vw,150px)}
.peak .cols{grid-template-columns:minmax(0,2fr) minmax(0,3fr);align-items:center}
.peak .map-box{aspect-ratio:1/1;max-height:78vh}
@media (max-width:860px){.peak .cols{grid-template-columns:minmax(0,1fr)}.peak .map-box{aspect-ratio:4/5}}
/* stagger: cards enter 40 ms apart, from scale(.96), ease-out */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .tasks .task,.commit>div,.g4>*,.g3>*{animation:enter linear both;animation-timeline:view();animation-range:entry 0% entry 45%}
    .tasks .task:nth-child(2),.commit>div:nth-child(2),.g4>*:nth-child(2){animation-range:entry 6% entry 51%}
    .tasks .task:nth-child(3),.commit>div:nth-child(3),.g4>*:nth-child(3){animation-range:entry 12% entry 57%}
    .tasks .task:nth-child(4),.commit>div:nth-child(4),.g4>*:nth-child(4){animation-range:entry 18% entry 63%}
    .tasks .task:nth-child(5),.commit>div:nth-child(5){animation-range:entry 24% entry 69%}
    .tasks .task:nth-child(6),.commit>div:nth-child(6){animation-range:entry 30% entry 75%}
    @keyframes enter{from{transform:translateY(14px) scale(.96)}to{transform:none}}
  }
}
/* browser surfaces */
::selection{background:var(--accent);color:var(--accent-ink)}
html{scrollbar-color:#3A4147 var(--bg);scrollbar-width:thin}
.strip dd,.gap-list b,.big,.commit b,.bars b,.doc dt,.tl b{font-variant-numeric:tabular-nums}
/* text over media: column scrim already in place; make sure no full-frame flat overlay remains */
.task-media::after{background:linear-gradient(180deg,rgba(16,18,20,0) 45%,rgba(16,18,20,.72) 100%)}
/* eyebrows: keep the bracket device only where it names a section; hide the one inside the 'who' column to reduce repetition */

/* ---------- V2: product-site feel, working action ---------- */
.btn-arrow::after{content:"";display:inline-block;width:9px;height:9px;margin-left:10px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg) translateY(-1px);transition:transform .2s var(--ease)}
.btn-arrow:hover::after{transform:rotate(45deg) translate(3px,-4px)}
.btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--rule)}
.btn-ghost:hover{border-color:var(--ink);filter:none}
.spec{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:18px 0 0;padding:14px 0 0;border-top:1px solid var(--rule);max-width:520px}
.spec div{min-width:0}
.spec dt{font:500 10.5px/1.5 var(--fm);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.spec dd{margin:0;font-size:14px;color:var(--ink)}
@media (max-width:480px){.spec{grid-template-columns:minmax(0,1fr);gap:8px}}
.task h3{display:flex;align-items:center;justify-content:space-between;gap:12px}
.task .arr{width:10px;height:10px;border-top:2px solid var(--accent);border-right:2px solid var(--accent);transform:rotate(45deg);opacity:0;transition:opacity .2s,transform .25s var(--ease)}
@media (hover:hover){.task:hover .arr{opacity:1;transform:rotate(45deg) translate(3px,-3px)}}
/* alternating surfaces: a second graphite for even sections, grain on both */
#commitments,#models,#who{background:var(--panel)}
#commitments .commit>div,#models .tbl-wrap,#models .tbl thead th{background:var(--bg)}
.sec{position:relative}
.sec::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.06;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}
.sec>.wrap{position:relative}
/* form as the secondary channel */
.form{background:var(--panel)}
.cta-sec .form input,.cta-sec .form select,.cta-sec .form textarea{background:var(--bg)}

/* ---------- V3: blueprint and small details ---------- */
:root{--s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:40px;--r-btn:3px}
/* spacing rhythm: more air above a heading than below it */
.head{margin-bottom:var(--s6)}
.head .tag{margin-bottom:var(--s5)}
h2{margin-bottom:var(--s4)}
.lede{margin-bottom:0}
.head .lede{margin-top:var(--s2)}
/* type: balance headings, pretty-wrap body */
p,li,dd{text-wrap:pretty}
h1,h2,h3{text-wrap:balance}
/* links: offset underline, accent on hover; footnote marks in mono without underline */
main a:not(.btn):not(.rail a):not(.nav a){text-decoration-thickness:1px;text-underline-offset:4px;transition:color .15s,text-decoration-color .15s}
main a:not(.btn):hover{color:var(--accent);text-decoration-color:var(--accent)}
sup a{text-decoration:none;color:var(--accent)}
/* buttons: one radius, press feedback, consistent focus */
.btn{border-radius:var(--r-btn)}
.btn:active{transform:scale(.98)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}
/* cards: hairline + top edge light + grain (depth level 2) */
.task,.commit>div,.g4>*,.g3>*,.doc,.strip,.form,.status div,.cmp-wrap{box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.task,.commit>div,.doc,.form{position:relative}
/* tables and lists: hairlines only, no boxes inside boxes */
.tbl th,.tbl td{border-bottom:1px solid var(--rule)}
.faq summary{transition:color .15s}
.faq summary:hover{color:var(--accent)}
.faq details[open] summary{color:var(--ink)}
/* figcaptions and tags: one style for all small labels */
.zoom figcaption,.task-c,.task-n,.doc-head,.status b,.k{font-family:var(--fm);letter-spacing:.08em}
/* footer: quieter, hairline rhythm */
.foot-grid{padding:var(--s6) 0 var(--s5)}
.foot-notes{padding-top:var(--s4)}
/* mobile: step hero type down, keep air */
@media (max-width:480px){h1{font-size:clamp(34px,10vw,44px)}h2{font-size:clamp(26px,7.5vw,32px)}.sec{padding-block:56px}}

/* ---------- textured Earth under the 2D overlay ---------- */
.hero-cine .media{position:absolute;inset:0}
.hero-cine .media canvas,.stage canvas{position:absolute;inset:0;width:100%;height:100%}
.hero-cine .media .globe-gl,.stage .globe-gl{z-index:0}
.hero-cine .media .globe,.stage canvas:not(.globe-gl){z-index:1}
.hero-cine .media .globe.grid-bg{background:none}

/* ---------- iteration 10 ---------- */
.hero-cine .strip{max-width:860px}
.hero-cine .strip dd{font-size:clamp(44px,5.8vw,76px)}
.hero-cine .strip div{padding:20px 22px}
.direct{margin:22px 0 0;font-size:15px;color:var(--muted);max-width:60ch}
.direct span{display:inline-block;font:500 11px/1.4 var(--fm);letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-right:10px}
.direct a{color:var(--ink)}
/* marquee: label pinned left, bigger and faster */
.marquee{display:flex;align-items:center;padding:0;border-bottom:1px solid var(--rule)}
.mq-label{flex:0 0 auto;padding:18px 22px;font:500 11.5px/1.4 var(--fm);letter-spacing:.1em;text-transform:uppercase;color:var(--accent);border-right:1px solid var(--rule);background:var(--bg);position:relative;z-index:1}
.marquee .track{animation-duration:38s;padding:14px 0}
.marquee span{font:500 15px var(--fb);letter-spacing:0;text-transform:none;color:var(--ink);padding:0 30px;display:inline-flex;align-items:baseline;gap:10px}
.marquee b{font:700 24px/1 var(--fd);letter-spacing:-.02em;color:var(--accent)}
@media (max-width:700px){.mq-label{display:none}}
/* status strip: bigger */
.status div{padding:28px 22px 28px 0}
.status b{font-size:13px;margin-bottom:8px}
.status span{font-size:clamp(18px,1.7vw,23px);line-height:1.35}
/* video bands */
.zoom video.m{width:100%;height:100%;object-fit:cover;display:block}
.gap-sec{position:relative;overflow:hidden}
.gap-sec .bg-video{position:absolute;inset:0;z-index:0}
.gap-sec .bg-video video{width:100%;height:100%;object-fit:cover;display:block;opacity:.28;filter:saturate(.7)}
.gap-sec .bg-video::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--bg) 0%,rgba(16,18,20,.6) 55%,rgba(16,18,20,.25) 100%)}
.gap-sec>.wrap{position:relative;z-index:1}
/* satellite map */
.peak .map-box.map-sat{aspect-ratio:4/3;background:#0b1a2b;box-shadow:0 20px 60px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.06)}

/* ---------- iteration 11 ---------- */
/* the gap video was invisible: brighter, no desaturation, scrim only under the text column */
.gap-sec .bg-video video{opacity:.6;filter:none}
.gap-sec .bg-video::after{background:linear-gradient(90deg,var(--bg) 0%,rgba(16,18,20,.72) 42%,rgba(16,18,20,.15) 70%,rgba(16,18,20,.05) 100%)}
/* generic section videos */
.has-video{position:relative;overflow:hidden}
.has-video .bg-video{position:absolute;inset:0;z-index:0}
.has-video .bg-video video{width:100%;height:100%;object-fit:cover;display:block;opacity:.5}
.has-video .bg-video.v-dim video{opacity:.42}
.has-video .bg-video.v-soft video{opacity:.5}
.has-video .bg-video.v-mono video{filter:grayscale(1) contrast(1.1) sepia(.25);opacity:.32}
.has-video .bg-video.v-right video{object-position:100% 50%;transform:scale(1.35);transform-origin:100% 50%}
.has-video .bg-video::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,18,20,.92) 0%,rgba(16,18,20,.55) 45%,rgba(16,18,20,.88) 100%)}
.has-video>.wrap{position:relative;z-index:1}
.has-video .commit>div,.has-video .doc,.has-video .tbl-wrap,.has-video .form{background:rgba(16,18,20,.82);backdrop-filter:blur(2px)}
.has-video .tbl thead th{background:rgba(16,18,20,.9)}
#pilot.has-video .tl li::before{background:var(--bg)}
/* 3D map */
.map-box.map-globe{aspect-ratio:4/3;background:radial-gradient(70% 70% at 50% 50%,#0f1c2c,#090d12 85%);cursor:grab;touch-action:none;user-select:none}
.map-box.map-globe.dragging{cursor:grabbing}
.map-box.map-globe canvas{position:absolute;inset:0;width:100%;height:100%}
.map-box.map-globe .globe-gl{z-index:0}
.map-box.map-globe .map-2d{z-index:1}
.map-cities{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.map-cities button{font:500 12px var(--fm);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);background:transparent;border:1px solid var(--rule);padding:8px 12px;border-radius:3px;cursor:pointer;transition:color .15s,border-color .15s,background .15s}
.map-cities button:hover{color:var(--ink);border-color:var(--muted)}
.map-cities button.on{color:var(--accent-ink);background:var(--accent);border-color:var(--accent)}
/* hero: draggable */
.hero-cine .media{cursor:grab}
.hero-cine .media.dragging{cursor:grabbing}
.hero-cine .hero-copy{pointer-events:none}
.hero-cine .hero-copy a,.hero-cine .hero-copy button,.hero-cine .hero-copy .strip,.hero-cine .hero-copy .direct{pointer-events:auto}

/* ---------- iteration 12 ---------- */
.map-zoom{display:inline-flex;gap:6px;margin-left:auto}
.map-zoom button{min-width:38px;font:600 15px var(--fb);padding:6px 10px}
.map-box.map-globe{background:radial-gradient(60% 60% at 50% 50%,#101a28,#06090d 80%)}
@media (max-width:700px){.map-zoom{margin-left:0}}

/* mobile: the hero copy is taller than the viewport; let the pin grow instead of clipping the headline */
@media (max-width:700px){.hero-cine{height:auto}.hero-cine .pin{position:relative;height:auto;min-height:100svh;align-items:flex-start;padding-top:76px;overflow:visible}.hero-cine .hero-copy{padding-bottom:40px}}

/* the pinned hero is exactly the area below the 73px sticky header, at rest and while stuck */
@media (min-width:701px){.hero-cine .pin{top:73px;height:calc(100vh - 73px)}}
/* and its copy must fit in that area on laptop-height screens, because the pin clips */
@media (min-width:701px) and (max-height:960px){
  .hero-cine h1{font-size:clamp(40px,min(6.4vw,8vh),84px)}
  .hero-cine .tag{margin-bottom:14px}
  .hero-cine .lede{font-size:18px;max-width:66ch;margin-top:18px!important}
  .hero-cine .cta-row{margin-top:22px}
  .hero-cine .direct{margin-top:14px;max-width:84ch}
  .hero-cine .strip{margin-top:24px}
  .hero-cine .strip dd{font-size:clamp(34px,min(5.8vw,6.4vh),76px)}
  .hero-cine .strip div{padding:14px 20px}
}
@media (min-width:701px) and (max-height:760px){
  .hero-cine h1{font-size:clamp(36px,min(6.4vw,7.6vh),84px)}
  .hero-cine .lede{font-size:17px}
  .hero-cine .strip dd{font-size:clamp(30px,min(5.8vw,6vh),76px)}
  .hero-cine .strip div{padding:10px 18px}
}
/* too short to pin: let the hero flow so nothing is cut */
@media (min-width:701px) and (max-height:690px){
  .hero-cine{height:auto}
  .hero-cine .pin{position:relative;top:0;height:auto;min-height:calc(100vh - 73px);align-items:flex-start;padding-top:28px;padding-bottom:40px}
}

/* status strip: ".status div" also matched the .wrap itself and pushed the strip off the page grid */
.status>div.wrap{padding:0 20px;margin:0 auto;border:0;box-shadow:none}

/* ---- phones: touch, tap targets, legibility ---- */
@media (pointer:coarse){
  .map-box.map-globe{touch-action:pan-y pinch-zoom} /* a finger on the map must still scroll the page; sideways drag turns the globe */
  .map-cities button,.map-zoom button{min-height:44px;min-width:44px}
}
@media (max-width:700px){
  .status .wrap>div{padding:18px 0}
  .status span{font-size:18px}
  .direct span,.strip dt,.zoom figcaption,.foot-grid b,.doc dt,.status b,.task-n,.task-c,.spec dt,.mq-label,.doc-head{font-size:12px}
  .link{display:inline-block;padding:10px 0}
  .direct a{display:inline-block;padding:4px 0}
  .foot-grid a{display:inline-block;padding:9px 0}
  /* photo bands: the copy sits above the caption instead of on top of it */
  .band-hum .zoom,.band-copy-wrap .zoom{aspect-ratio:3/4}
  .band-hum .band-copy,.band-copy-wrap .band-copy{align-items:flex-end;padding-bottom:52px}
  /* partnership table becomes cards: all four columns readable without sideways scrolling */
  .tbl-wrap{overflow:visible;border:0;background:none!important;backdrop-filter:none!important;box-shadow:none}
  .tbl{min-width:0;display:block;font-size:16px}
  .tbl thead{display:none}
  .tbl tbody,.tbl tr,.tbl tbody th,.tbl td{display:block;width:auto}
  .tbl tr{border:1px solid var(--rule);padding:18px 16px 6px;margin-bottom:12px;background:rgba(16,18,20,.86)}
  .tbl tbody th{padding:0 0 10px;border:0;font-size:20px}
  .tbl td,.tbl tr:last-child td{padding:0 0 12px;border:0}
  .tbl td::before{content:attr(data-l);display:block;font:500 12px var(--fm);letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:3px}
}

@media (max-width:700px){.band-copy .tag{text-shadow:0 1px 10px rgba(0,0,0,.9),0 0 2px rgba(0,0,0,.9)}}

/* tablets and landscape phones: the globe sits behind the copy, so the scrim is stronger and the tag gets a halo */
@media (min-width:701px) and (max-width:860px){.hero-cine .shade{background:linear-gradient(180deg,rgba(16,18,20,.62) 0%,rgba(16,18,20,.84) 42%,var(--bg) 100%)}.hero-cine .tag{text-shadow:0 0 12px rgba(16,18,20,.95),0 0 3px rgba(16,18,20,.95)}}