/* Cinematic phone layout (phones only: <html data-view="cine">, set in the page head at load).
   One scene per topic: picture/video in the top two-thirds fading into black, title + one line + one button underneath.
   Every class is prefixed c- so nothing here touches the desktop design. */
html:not([data-view="cine"]) .cine{display:none!important}
html[data-view="cine"] body>header,html[data-view="cine"] body>footer,html[data-view="cine"] .page-sec,html[data-view="cine"] .skip{display:none!important}
html[data-view="cine"]{scroll-snap-type:y mandatory;background:#06090e}
html[data-view="cine"] body{background:#06090e}

.cine{--c-bg:#06090e;--c-ink:#e9eef5;--c-soft:#c9d2dd;--c-muted:#98a5b5;--c-accent:#3ba3e6;--c-line:rgba(233,238,245,.12);
  --c-display:"Space Grotesk",system-ui,sans-serif;--c-mono:"IBM Plex Mono",ui-monospace,monospace;
  color:var(--c-ink);font:400 16px/1.5 var(--c-display);-webkit-font-smoothing:antialiased}
.cine *{box-sizing:border-box}
.cine [hidden]{display:none!important}
.cine img,.cine video{display:block;max-width:100%}
.cine a{color:inherit;text-decoration:none}
.cine button{font:inherit;color:inherit}
.cine h1,.cine h2,.cine h3,.cine p{margin:0}
.cine :focus-visible{outline:2px solid var(--c-accent);outline-offset:3px}
.c-k{font:500 .68rem var(--c-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--c-accent)}

/* header */
.c-hdr{position:fixed;top:0;left:0;right:0;z-index:30;padding-top:env(safe-area-inset-top,0px);pointer-events:none}
.c-hdr .c-in{display:flex;justify-content:space-between;align-items:center;padding:16px 20px}
.c-hdr img{width:118px;height:auto;pointer-events:auto}
.c-burger{pointer-events:auto;width:40px;height:40px;background:none;border:0;display:grid;gap:6px;align-content:center;justify-items:end;padding:0 2px;cursor:pointer}
.c-burger i{display:block;height:1.5px;width:24px;background:#fff}.c-burger i+i{width:16px}

/* scenes */
.c-scene{position:relative;min-height:100svh;scroll-snap-align:start;display:flex;flex-direction:column;overflow:hidden}
.c-media{position:relative;height:66svh;min-height:400px;overflow:hidden;flex:none;background:#000}
.c-media img,.c-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none}
.c-media::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(6,9,14,.55) 0%,rgba(6,9,14,0) 22%,rgba(6,9,14,0) 58%,var(--c-bg) 100%)}
.c-cap{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;gap:12px;align-items:flex-start;padding:0 20px calc(36px + env(safe-area-inset-bottom,0px));margin-top:-46px}
.c-cap h1,.c-cap h2{font:600 2.25rem/1.03 var(--c-display);letter-spacing:-.03em;text-wrap:balance;color:var(--c-ink)}
.c-cap h1{font-size:2.85rem}
.c-cap h1 span{color:var(--c-accent);display:block}
.c-cap p{color:var(--c-soft);font-size:1.04rem;max-width:32ch}
.c-btn{display:inline-flex;align-items:center;gap:12px;margin-top:6px;padding:13px 20px;border:1px solid rgba(233,238,245,.55);background:none;font:500 .76rem var(--c-mono)!important;letter-spacing:.13em;text-transform:uppercase;cursor:pointer;color:var(--c-ink)}
.c-btn::after{content:"\2192";font-family:var(--c-display);letter-spacing:0}
.c-btn.c-solid{background:var(--c-accent);border-color:var(--c-accent);color:#04121d}
.c-drift{animation:c-drift 16s ease-in-out infinite alternate}
@keyframes c-drift{from{transform:scale(1)}to{transform:scale(1.08)}}
.c-xf img{opacity:0;animation:c-xf 12s infinite}
.c-xf img:nth-child(2){animation-delay:4s}.c-xf img:nth-child(3){animation-delay:8s}
.c-xf img:first-child{opacity:1}
@keyframes c-xf{0%{opacity:0;transform:scale(1.04)}8%,33%{opacity:1}41%,100%{opacity:0;transform:scale(1)}}
.c-js .c-scene .c-cap>*{transition:transform .8s cubic-bezier(.2,.8,.2,1),opacity .8s}
.c-js .c-scene:not(.c-in-view) .c-cap>*{transform:translateY(16px);opacity:.3}
.c-js .c-scene .c-cap>*:nth-child(2){transition-delay:.07s}.c-js .c-scene .c-cap>*:nth-child(3){transition-delay:.14s}.c-js .c-scene .c-cap>*:nth-child(4){transition-delay:.21s}
.c-ticks{position:fixed;right:10px;top:50%;transform:translateY(-50%);z-index:20;display:grid;gap:9px}
.c-ticks i{display:block;width:2px;height:12px;background:rgba(255,255,255,.28);transition:height .3s,background .3s}
.c-ticks i.on{height:26px;background:var(--c-accent)}
/* maintenance: shorter frame shows more of the wide C-130 render, cockpit in view */
#c-maintenance .c-media{height:46svh;min-height:300px;margin-top:max(7svh,56px)}
#c-maintenance .c-cap{justify-content:center;margin-top:-30px;padding-bottom:12svh}
#c-maintenance .c-drift{animation-name:c-drift-s}
@keyframes c-drift-s{from{transform:scale(1)}to{transform:scale(1.04)}}
/* contact */
#c-contact .c-media{height:30svh;min-height:200px}
.c-form{display:grid;gap:14px;width:100%;margin-top:6px}
.c-form label{display:grid;gap:4px;font:500 .7rem var(--c-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--c-muted)}
.c-form input,.c-form textarea{width:100%;font:400 1rem var(--c-display);color:var(--c-ink);background:transparent;border:0;border-bottom:1px solid rgba(233,238,245,.3);padding:9px 0;border-radius:0}
.c-form textarea{min-height:84px;resize:vertical}
.c-form input:focus,.c-form textarea:focus{outline:0;border-bottom-color:var(--c-accent)}
.c-form .c-err{font:500 .7rem var(--c-mono);color:#ff8a80;min-height:0;text-transform:none;letter-spacing:.02em}
.c-form .c-note{font:500 .78rem var(--c-mono);color:var(--c-accent)}
.c-form .c-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.c-form.c-done .c-fields{display:none!important}
.c-foot{padding:26px 20px calc(30px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--c-line);color:var(--c-muted);font-size:.8rem;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;scroll-snap-align:end}
.c-foot a{text-decoration:underline;text-underline-offset:3px}

/* menu */
.c-menu{position:fixed;inset:0;z-index:70;background:rgba(6,9,14,.97);padding:calc(18px + env(safe-area-inset-top,0px)) 20px 30px;display:flex;flex-direction:column;gap:8px;overflow-y:auto}
.c-menu .c-close{align-self:flex-end;background:none;border:0;font:500 .74rem var(--c-mono);letter-spacing:.12em;text-transform:uppercase;padding:10px 0;cursor:pointer;color:var(--c-ink)}
.c-menu a{display:flex;justify-content:space-between;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--c-line);font:600 1.7rem/1.1 var(--c-display);letter-spacing:-.02em;color:var(--c-ink)}
.c-menu a span{font:500 .7rem var(--c-mono);color:var(--c-muted)}
.c-menu .c-small{display:flex;gap:18px;margin-top:auto;padding-top:24px;font-size:.85rem;color:var(--c-muted)}
.c-menu .c-small a{font:400 .85rem var(--c-display);border:0;padding:0;color:var(--c-muted);text-decoration:underline}

/* topic sheet */
.c-topic{position:fixed;inset:0;z-index:60;overflow-y:auto;background:var(--c-bg);animation:c-sheet .45s cubic-bezier(.2,.8,.2,1)}
@keyframes c-sheet{from{transform:translateY(28px);opacity:.4}}
.c-topic .c-bar{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:calc(14px + env(safe-area-inset-top,0px)) 20px 14px;background:linear-gradient(var(--c-bg) 70%,transparent)}
.c-back{font:500 .74rem var(--c-mono);letter-spacing:.12em;text-transform:uppercase;background:none;border:0;padding:8px 0;cursor:pointer;color:var(--c-ink)}
.c-topic .c-inner{padding:6px 20px 70px;display:grid;gap:22px}
.c-topic h2{font:600 2.05rem/1.04 var(--c-display);letter-spacing:-.025em;text-wrap:balance}
.c-topic h3{font:600 1.25rem/1.15 var(--c-display);letter-spacing:-.015em}
.c-topic p{color:var(--c-soft)}
.c-topic .c-lead{color:var(--c-muted);font-size:1.05rem}
.c-full{margin:0 -20px;position:relative}
.c-full img,.c-full video{width:100%;aspect-ratio:16/10;object-fit:cover;background:#000}
.c-row{display:grid;gap:12px}
.c-row img{width:100%;aspect-ratio:16/10;object-fit:cover}
.c-list{display:grid;border-top:1px solid var(--c-line)}
.c-list>div{padding:15px 0;border-bottom:1px solid var(--c-line);display:grid;gap:3px}
.c-list b{font-weight:600}
.c-list span{color:var(--c-muted);font-size:.95rem}
.c-chips{display:flex;flex-wrap:wrap;gap:8px}
.c-chips span{padding:7px 11px;border:1px solid var(--c-line);font:500 .72rem var(--c-mono);letter-spacing:.06em}
.c-nums{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--c-line)}
.c-nums div{padding:16px 0;border-bottom:1px solid var(--c-line)}
.c-nums b{display:block;font:600 2rem/1 var(--c-display);letter-spacing:-.03em}
.c-nums span{font:500 .64rem var(--c-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--c-muted)}

/* intro: "horizon lock" */
.c-intro{position:fixed;inset:0;z-index:100;cursor:pointer}
.c-intro .c-half{position:absolute;left:0;right:0;height:50%;background:#06090e;transition:transform .7s cubic-bezier(.7,0,.2,1)}
.c-intro .c-t{top:0}.c-intro .c-b{bottom:0}
.c-intro.c-open .c-t{transform:translateY(-100%)}.c-intro.c-open .c-b{transform:translateY(100%)}
.c-intro svg{position:absolute;inset:0;width:100%;height:100%;transition:opacity .35s}
.c-intro.c-open svg,.c-intro.c-open .c-il{opacity:0}
.c-intro .c-hz{stroke:#3ba3e6;stroke-width:1.4;stroke-dasharray:180;stroke-dashoffset:180;animation:c-draw .7s .1s cubic-bezier(.3,0,.2,1) forwards}
.c-intro .c-lad line,.c-intro .c-lad polyline{stroke:rgba(233,238,245,.6);stroke-width:1.1;fill:none}
.c-intro .c-lad text{fill:rgba(233,238,245,.7);font:500 11px "IBM Plex Mono",monospace}
.c-intro .c-lad g{opacity:0;animation:c-fade .3s forwards}
.c-intro .c-fpm{opacity:0;transform:translateY(70px);animation:c-fpm .6s .75s cubic-bezier(.2,.8,.2,1) forwards}
.c-intro .c-fpm *{stroke:#3ba3e6;stroke-width:1.6;fill:none}
.c-intro .c-il{position:absolute;left:50%;top:calc(50% + 130px);width:150px;transform:translateX(-50%);opacity:0;animation:c-fade .5s 1.25s forwards;transition:opacity .3s}
@keyframes c-draw{to{stroke-dashoffset:0}}@keyframes c-fade{to{opacity:1}}@keyframes c-fpm{to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.c-intro{display:none}.c-drift,.c-xf img{animation:none}.c-xf img:not(:first-child){display:none}}
/* accessibility pause button (added by a11y.js) inside a scene */
.cine .vid-toggle{z-index:3}

/* tap-to-play player: controls sit BELOW the picture so they never cover the burned-in captions */
.c-player{display:grid;gap:0;background:#000}
.c-pv{position:relative}
.c-pv video{width:100%;aspect-ratio:16/9;object-fit:contain;background:#000;display:block}
.c-row .c-pv video{aspect-ratio:16/9}
.c-pbig{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;border:1.5px solid rgba(255,255,255,.9);background:rgba(0,0,0,.35);cursor:pointer}
.c-pbig::after{content:"";position:absolute;left:26px;top:20px;border-left:16px solid #fff;border-top:11px solid transparent;border-bottom:11px solid transparent}
.c-player.c-playing .c-pbig{display:none}
.c-pbar{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:12px;padding:8px 14px;background:#0b1018}
.c-pbar button{background:none;border:0;color:var(--c-ink);font-size:1rem;width:28px;height:28px;padding:0;cursor:pointer}
.c-pr{width:100%;accent-color:var(--c-accent);height:20px}
.c-pt{font:500 .7rem var(--c-mono);color:var(--c-muted);min-width:34px;text-align:right}
.c-row-vid{gap:12px}

/* SIMbox topic: "Build a system once" part set apart on a dark-blue panel */
.c-band{display:grid;gap:16px;margin:4px -20px 0;padding:28px 20px 30px;background:linear-gradient(180deg,#0d2340,#0a1a30)}
.c-band .c-chips span{border-color:rgba(120,190,240,.35)}
.c-intro .c-hdg line{stroke:rgba(233,238,245,.6);stroke-width:1}
.c-intro .c-hdg polygon{fill:#3ba3e6;stroke:none}
.c-intro .c-hdg rect{fill:#06090e;stroke:#3ba3e6;stroke-width:1.2}
.c-intro .c-hdg text{fill:rgba(233,238,245,.7);font:500 10px "IBM Plex Mono",monospace}
.c-intro .c-hdg .c-hv{fill:#3ba3e6;font-size:11px;font-weight:600}

/* player without a full-screen button (mixed-reality video): three columns */
.c-nofs .c-pbar{grid-template-columns:auto 1fr auto}

/* phone turned sideways: the video (and its bar) always fit the screen height, so burned-in captions stay visible */
@media (orientation: landscape){
  .c-pv{display:flex;justify-content:center;background:#000}
  .c-pv video{width:auto;max-width:100%;max-height:calc(100svh - 64px)}
}
/* full screen = the whole player (picture + our bar), so the bar sits below the picture instead of over the captions */
.c-player:fullscreen{display:flex;flex-direction:column;justify-content:center;background:#000;width:100%;height:100%}
.c-player:fullscreen .c-pv{flex:1;min-height:0;display:flex;align-items:center;justify-content:center}
.c-player:fullscreen .c-pv video{width:100%;height:100%;max-height:none;aspect-ratio:auto;object-fit:contain}
.c-player:fullscreen .c-pbar{flex:none}
.c-player:-webkit-full-screen{display:flex;flex-direction:column;justify-content:center;background:#000;width:100%;height:100%}
.c-player:-webkit-full-screen .c-pv{flex:1;min-height:0;display:flex;align-items:center;justify-content:center}
.c-player:-webkit-full-screen .c-pv video{width:100%;height:100%;max-height:none;aspect-ratio:auto;object-fit:contain}

/* phone: no smooth scrolling (it fought the scene snapping on iPhone) */
html[data-view="cine"]{scroll-behavior:auto!important}

/* overlay fades away after a jump (no flash of the previous screen) */
.c-menu,.c-topic{transition:opacity .25s ease}
.c-menu.c-fade,.c-topic.c-fade{opacity:0;pointer-events:none}

/* first visit: dark cover from the first paint, so nothing shows before the HUD intro */
html.c-intro-pending body::before{content:"";position:fixed;inset:0;z-index:99;background:#06090e}

/* phone sideways while playing: the player fills the whole screen (picture + bar below it) */
.c-player.c-fill{position:fixed;inset:0;z-index:95;display:flex;flex-direction:column;justify-content:center;background:#000}
.c-player.c-fill .c-pv{flex:1;min-height:0;display:flex;align-items:center;justify-content:center}
.c-player.c-fill .c-pv video{width:100%;height:100%;max-height:none;aspect-ratio:auto;object-fit:contain}
.c-player.c-fill .c-pbar{flex:none;padding-bottom:calc(8px + env(safe-area-inset-bottom,0px))}

/* SIMbox topic: cruise-missile picture between the six layers and "Build a system once" */
.c-sep img{aspect-ratio:16/9;object-position:40% 58%}
.c-sep+.c-band{margin-top:-22px}

/* Contact scene: room below the form so Send can be scrolled above the keyboard */
#c-contact .c-cap{padding-bottom:calc(120px + env(safe-area-inset-bottom,0px))}

/* contact: sending state and thank-you panel */
.c-btn.c-sending{opacity:.75;cursor:default}
.c-btn.c-sending::after{content:none}
.c-btn.c-sending::before{content:"";display:inline-block;width:12px;height:12px;border:2px solid rgba(4,18,29,.35);border-top-color:#04121d;border-radius:50%;animation:c-spin .8s linear infinite}
@keyframes c-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.c-btn.c-sending::before{animation:none}}
.c-form .c-note:empty{display:none}
.c-thanks{display:grid;gap:12px;justify-items:start;width:100%;margin-top:6px;padding:26px 22px 24px;border:1px solid rgba(59,163,230,.35);background:linear-gradient(180deg,rgba(59,163,230,.10),rgba(59,163,230,.03));outline:none}
.c-check{width:46px;height:46px;border-radius:50%;border:2px solid var(--c-accent);display:grid;place-items:center;color:var(--c-accent);font:600 1.4rem var(--c-display)}
.c-thanks h3{margin:0;font:600 1.6rem/1.1 var(--c-display);color:var(--c-ink)}
.c-thanks p{margin:0;color:var(--c-soft);font-size:1rem;max-width:30ch}