/* Hero 15: once-through terminal hero. Copy typography comes from hero-still.css (.hero-still-copy). */
body.v2-page section.hero-terminal,.hero-terminal{--ht-bg:#22272b;--ht-nav:82px;--ht-artw:min(80.56vw,1546px);background:var(--ht-bg);color:#f0f4ec;position:relative;overflow-x:clip}
.ht-copy{box-sizing:border-box;width:var(--ht-artw);margin:0 auto;padding:56px 0 28px}
.ht-copy .hero-still-copy{max-width:620px}
.ht-track{position:relative}
.ht-stage{display:flex;align-items:center;justify-content:center;padding:0 0 56px}
.ht-figure{margin:0;position:relative}
.ht-full,.ht-desk{position:relative;line-height:0}
.ht-full{width:var(--ht-artw);aspect-ratio:2752/1536}
.ht-full:after,.ht-desk:after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 28px 22px var(--ht-bg)}
.ht-figure .ht-l{position:absolute;left:var(--x);top:var(--y);width:var(--w);display:block;pointer-events:none}
.ht-figure .ht-l img{display:block;width:100%;height:auto}
.ht-figure .ht-l.ht-base{position:relative;left:auto;top:auto;width:100%}
.ht-dim{position:absolute;top:0;bottom:0;background:var(--ht-bg);opacity:0;pointer-events:none}
.ht-dim-l{left:0;width:49.71%}
.ht-dim-div{left:49.71%;width:.55%;opacity:.6}
.ht-dim-r{left:50.26%;right:0}
.ht-phone .ht-dim{left:0;right:0}
.ht-bellwrap{position:absolute;left:var(--x);top:var(--y);width:var(--w);display:block;transform-origin:var(--px) var(--py)}
.ht-figure .ht-bellwrap .ht-l{position:relative;left:auto;top:auto;width:100%}
.ht-figure .ht-bellwrap .ht-rings{position:absolute;inset:0;transform-origin:var(--px) var(--py);opacity:0}
.ht-bellwrap .ht-bell{transform-origin:50% 12%}
/* final still (no JS, reduced motion, failed init): key left, decoy right, bell present and quiet, both halves at full */
.ht-inj-l,.ht-inj-r,.ht-ack{opacity:0}
.ht-ack{mix-blend-mode:screen;mix-blend-mode:plus-lighter}
.ht-phone{display:none}
@media(min-width:761px){
 .hero-terminal{--ht-artw:min(80.56vw,1546px,calc((100svh - var(--ht-nav) - 48px)*1.7917))}
}
@media(max-width:1100px) and (min-width:761px){
 .hero-terminal{--ht-artw:min(90vw,calc((100svh - var(--ht-nav) - 48px)*1.7917))}
 .ht-copy{padding-top:44px}
}
@media(max-width:760px){
 .hero-terminal{--ht-artw:100%}
 .ht-copy{padding:36px 22px 22px}
 .ht-copy .hero-still-copy{max-width:none}
 .ht-copy .hero-still-copy .glass-actions{margin-bottom:0}
 .ht-full{display:none}
 .ht-phone{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%;padding:0 8px;box-sizing:border-box}
 .ht-desk{width:100%;max-width:374px}
 .ht-desk:after{box-shadow:inset 0 0 10px 4px var(--ht-bg)}
 .ht-stage{padding-bottom:40px;flex-direction:column;align-items:stretch}
 .ht-stage>.ht-figure{align-self:center;width:100%}
}
@media(max-width:380px){.ht-copy{padding-left:18px;padding-right:18px}}
/* Desktop layouts (>=761px). Copy and art share one pinned stage of viewport height under the nav.
   ht-layout-a: copy column left, art right. ht-layout-b: copy top left over the picture's empty top band, art below.
   The hero background equals the picture's own background (#1f2528: base.webp margin median 31,38,40; rendered AVIF margin 31-32,37,40), so the art has no visible edge;
   the mask feathers the picture's own scanline texture out over its empty margins (ink spans x 3.7-96.3%, y 10.7-92.3%). */
@media(min-width:761px){
 body.v2-page section.hero-terminal[class*="ht-layout-"],.hero-terminal[class*="ht-layout-"]{--ht-bg:#1f2528;--ht-side:clamp(24px,3.4vw,72px);--ht-vpad:clamp(16px,2.6vh,36px)}
 .hero-terminal[class*="ht-layout-"] .ht-stage{position:relative;box-sizing:border-box;height:calc(100vh - var(--ht-nav));height:calc(100svh - var(--ht-nav));min-height:440px;padding:var(--ht-vpad) var(--ht-side);container-type:size}
 /* cq units below resolve against the stage content box (inside the padding) */
 .hero-terminal[class*="ht-layout-"] .ht-copy{width:auto;margin:0;padding:0}
 .hero-terminal[class*="ht-layout-"] .ht-full:after{content:none}
 .glass-site .hero-terminal[class*="ht-layout-"] .hero-still-copy :is(h1,p){text-shadow:none}
 .hero-terminal[class*="ht-layout-"] .ht-full{-webkit-mask-image:linear-gradient(90deg,transparent,#000 3.5%,#000 96.5%,transparent),linear-gradient(transparent,#000 10.5%,#000 92.5%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 3.5%,#000 96.5%,transparent),linear-gradient(transparent,#000 10.5%,#000 92.5%,transparent);mask-composite:intersect}
 /* A: side by side */
 .hero-terminal.ht-layout-a .ht-stage{display:grid;grid-template-columns:clamp(300px,36vw,520px) minmax(0,1fr);column-gap:clamp(24px,2.6vw,56px);align-items:center}
 .hero-terminal.ht-layout-a .hero-still-copy{max-width:520px}
 .glass-site .hero-terminal.ht-layout-a .hero-still-copy h1{font-size:clamp(44px,4.6vw,84px)}
 .hero-terminal.ht-layout-a .ht-figure{display:flex;align-items:center;justify-content:center;min-width:0;height:100%}
 .hero-terminal.ht-layout-a .ht-full{flex:none;width:min(107%,calc(100cqh*1.7917))} /* the picture's empty 3.7% side margins may run into the gutters */
 /* B: copy top, art below, both inside one screen */
 .hero-terminal.ht-layout-b .ht-stage{display:block}
 .hero-terminal.ht-layout-b .ht-copy,.hero-terminal.ht-layout-b .ht-full{--ht-bw:calc(min(100cqw,calc(100cqh*1.7917))*.84)}
 .hero-terminal.ht-layout-b .ht-figure{position:absolute;inset:var(--ht-vpad) var(--ht-side);display:flex;align-items:center;justify-content:center}
 .hero-terminal.ht-layout-b .ht-full{width:var(--ht-bw)}
 .hero-terminal.ht-layout-b .ht-copy{position:absolute;z-index:3;left:calc(var(--ht-side) + (100cqw - var(--ht-bw))/2 + var(--ht-bw)*.012);top:calc(var(--ht-vpad) + (100cqh - var(--ht-bw)/1.7917)/2 + var(--ht-bw)*.012);width:calc(var(--ht-bw)*.74)}
 .hero-terminal.ht-layout-b .hero-still-copy{max-width:none;display:grid;grid-template-columns:minmax(0,520px) auto;column-gap:36px;align-items:center;justify-content:start}
 .glass-site .hero-terminal.ht-layout-b .hero-still-copy h1{grid-column:1/-1;font-size:clamp(36px,calc(var(--ht-bw)*.045),76px);margin-bottom:18px}
 .glass-site .hero-terminal.ht-layout-b .hero-still-copy p{max-width:520px;margin:0}
}
/* Composition variants (>=761px), B idea kept: words above, picture below, one pinned screen.
   Art ink measured off base.webp: x 3.6% to 96.3%, y 32.0% to 92.3% of the art box; bell occupies x 81.4-89.4%, y 10.7-23.3%.
   So the copy lives in the art's empty top band, left of the bell, and the art is sized so its ink top clears the copy.
   ht-comp-1: copy top left, art left-aligned on the same line, art 84% of stage height.
   ht-comp-2: copy centred, art centred below, art 76% of stage height.
   ht-comp-3: copy in a narrow left column, art wider and lower, blank bottom margin cropped so the ink meets the stage floor. */
@media(min-width:761px){
 body.v2-page section.hero-terminal[class*="ht-comp-"],.hero-terminal[class*="ht-comp-"]{--ht-bg:#1f2528;--ht-side:clamp(24px,3.4vw,72px);--ht-vpad:clamp(16px,2.6vh,36px)}
 .hero-terminal[class*="ht-comp-"] .ht-stage{position:relative;box-sizing:border-box;display:block;overflow:hidden;height:calc(100vh - var(--ht-nav));height:calc(100svh - var(--ht-nav));min-height:440px;padding:var(--ht-vpad) var(--ht-side);container-type:size}
 .hero-terminal[class*="ht-comp-"] .ht-copy{position:absolute;z-index:3;top:var(--ht-vpad);margin:0;padding:0;width:auto}
 .hero-terminal[class*="ht-comp-"] .ht-figure{position:absolute;margin:0;left:0;bottom:0;width:var(--ht-aw)}
 .hero-terminal[class*="ht-comp-"] .ht-full{width:100%}
 .hero-terminal[class*="ht-comp-"] .ht-full:after{content:none}
 .glass-site .hero-terminal[class*="ht-comp-"] .hero-still-copy :is(h1,p){text-shadow:none}
 .hero-terminal[class*="ht-comp-"] .ht-full{-webkit-mask-image:linear-gradient(90deg,transparent,#000 3.5%,#000 96.5%,transparent),linear-gradient(transparent,#000 10.5%,#000 92.5%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 3.5%,#000 96.5%,transparent),linear-gradient(transparent,#000 10.5%,#000 92.5%,transparent);mask-composite:intersect}
 .hero-terminal[class*="ht-comp-"] .hero-still-copy{max-width:none;display:block}
 .glass-site .hero-terminal[class*="ht-comp-"] .hero-still-copy h1{font-size:var(--ht-h1);line-height:.92!important;margin:0 0 .14em}
 .glass-site .hero-terminal[class*="ht-comp-"] .hero-still-copy p{font-size:18px;line-height:1.45;max-width:420px;margin:0 0 20px}
 .hero-terminal[class*="ht-comp-"] .hero-still-copy .glass-actions{gap:22px;margin:0}
 /* 1: left stack, shared left line */
 .hero-terminal.ht-comp-1{--ht-aw:min(86cqw,calc(88cqh*1.7917));--ht-h1:clamp(60px,6.9cqw,112px)}
 .hero-terminal.ht-comp-1 .ht-copy{left:calc(var(--ht-aw)*.036);width:min(560px,44cqw)}
 /* 2: centred */
 .hero-terminal.ht-comp-2{--ht-aw:min(78cqw,calc(80cqh*1.7917));--ht-h1:clamp(60px,7.2cqw,116px)}
 .hero-terminal.ht-comp-2 .ht-figure{left:50%;transform:translateX(-50%)}
 /* the copy block is centred in the band above the ink, so the breathing room splits evenly above and below it */
 .hero-terminal.ht-comp-2 .ht-copy{left:0;right:0;top:0;width:auto;text-align:center;height:calc(100cqh - var(--ht-aw)/1.7917*.68);display:flex;flex-direction:column;justify-content:safe center}
 .glass-site .hero-terminal.ht-comp-2 .hero-still-copy p{margin-left:auto;margin-right:auto}
 .hero-terminal.ht-comp-2 .hero-still-copy .glass-actions{justify-content:center}
 /* 3: narrow left column, wider art sitting lower, blank bottom margin cropped */
 .hero-terminal.ht-comp-3{--ht-aw:min(92cqw,calc(96cqh*1.7917));--ht-h1:clamp(60px,7.4cqw,114px)}
 .hero-terminal.ht-comp-3 .ht-figure{bottom:calc(var(--ht-aw)/1.7917*-.055)}
 .hero-terminal.ht-comp-3 .ht-copy{left:calc(var(--ht-aw)*.036);width:min(500px,40cqw)}
}
/* Comps below 1200px: the art is width-limited and too short to carry the copy in its top band, so copy and art stack in flow */
@media(min-width:761px) and (max-width:1199px){
 .hero-terminal[class*="ht-comp-"] .ht-stage{display:flex;flex-direction:column;align-items:stretch;gap:14px}
 .hero-terminal[class*="ht-comp-"] .ht-copy{position:static;width:auto;max-width:620px}
 .hero-terminal.ht-comp-2 .ht-copy{max-width:none}
 .glass-site .hero-terminal[class*="ht-comp-"] .hero-still-copy h1{font-size:clamp(40px,5.6vw,66px)}
 .hero-terminal[class*="ht-comp-"] .ht-figure{position:relative;left:auto;bottom:auto;transform:none;width:auto;flex:1 1 0;min-height:0;container-type:size;display:flex;align-items:center;justify-content:center}
 .hero-terminal[class*="ht-comp-"] .ht-full{width:min(100cqw,calc(100cqh*1.7917))}
}
/* B below 1200px: the picture's empty top band is too short for the copy, so the copy sits in flow above the art */
@media(min-width:761px) and (max-width:1199px){
 .hero-terminal.ht-layout-b .ht-stage{display:flex;flex-direction:column;align-items:stretch;gap:14px}
 .hero-terminal.ht-layout-b .ht-copy{position:static;width:auto}
 .hero-terminal.ht-layout-b .hero-still-copy{grid-template-columns:minmax(0,1fr)}
 .glass-site .hero-terminal.ht-layout-b .hero-still-copy h1{font-size:clamp(36px,4.2vw,48px);margin-bottom:12px}
 .glass-site .hero-terminal.ht-layout-b .hero-still-copy p{margin-bottom:14px}
 .hero-terminal.ht-layout-b .ht-figure{position:relative;inset:auto;flex:1 1 0;min-height:0;container-type:size}
 .hero-terminal.ht-layout-b .ht-full{width:min(100cqw,calc(100cqh*1.7917))}
}

/* Crafted terminal motion. Autoplay has no sticky stage or scroll travel. */
.ht-pending .ht-figure{visibility:hidden}
.ht-figure .ht-decode,.ht-figure .ht-cursor,.ht-figure .ht-screen-fx,.ht-figure .ht-motion-glow{opacity:0}
.ht-figure .ht-decode{aspect-ratio:391/329;height:auto}
.ht-figure .ht-cursor{aspect-ratio:182/29}
.ht-cursor i{position:absolute;left:0;top:34%;width:4.9451%;height:42%;background:#a2e4a4;box-shadow:0 0 4px #9ee1a340}
.ht-figure .ht-screen-fx{aspect-ratio:391/329;overflow:hidden;clip-path:polygon(0 15%,98% 0,98% 84%,0 99%)}
.ht-live .ht-screen-fx{opacity:1}
.ht-screen-fx i,.ht-screen-fx b{position:absolute;inset:0;pointer-events:none;opacity:0}
.ht-screen-fx i{background:#10191a}
.ht-screen-fx b{bottom:auto;height:6.08%;background:linear-gradient(transparent,#b6f7b4aa,transparent)}
.ht-motion-glow{mix-blend-mode:screen;mix-blend-mode:plus-lighter}
.ht-live .ht-bellwrap,.ht-live .ht-bell,.ht-live .ht-rings{will-change:transform,opacity}
.ht-live .ht-inj-l,.ht-live .ht-inj-r{will-change:clip-path}
.ht-replay{position:absolute;z-index:4;right:18px;bottom:14px;border:1px solid #b7c5bd30;border-radius:4px;padding:6px 9px;background:transparent;color:#c2cfc2;font-family:inherit;font-size:11px;font-weight:500;line-height:1.2;letter-spacing:.02em;cursor:pointer}
.ht-replay span{display:inline-block;margin-right:4px;font-size:15px;vertical-align:-1px}
.ht-replay:hover{color:#f0f4ec;border-color:#b7c5bd75}
.ht-replay:focus-visible{outline:2px solid #f7b652;outline-offset:4px}
.ht-replay[hidden]{display:none}
@media(prefers-reduced-motion:reduce){.ht-replay{display:none}}

@media(min-width:761px){
 .ht-drive-scroll .hero-terminal[class*="ht-comp-"] .ht-stage{position:sticky;top:var(--ht-nav);height:calc(100svh - var(--ht-nav));padding:var(--ht-vpad) var(--ht-side)}
}

/* Caption rails share the desk grid, outside the raster mask. Reserved rows never shift. */
.ht-captions{display:grid;grid-template-columns:1fr 1fr;gap:6%;padding:0 4%;margin:0;text-align:left}
.ht-caption{min-width:0;border-top:1px solid #a8c29b35;padding:12px 0 0;min-height:112px;box-sizing:border-box}
.hero-terminal .ht-caption-label{font-family:var(--font-mono,"JetBrains Mono",monospace);font-size:12px;line-height:1.4;font-weight:500;letter-spacing:.08em;text-transform:uppercase;text-align:left;color:#cbe6b7;margin:0 0 8px}
.hero-terminal .ht-caption-line{font-family:inherit;font-size:16px;line-height:1.45;font-weight:400;letter-spacing:0;color:#f0f4ec;margin:0}
.hero-terminal .ht-caption-alert{color:#f7bf68}
.ht-caption-word{white-space:nowrap}
/* Width owns the art. Use natural height when the complete stage cannot fit;
   measure() only enables pinning after the copy, art and captions fit together. */
@media(min-width:761px){
 .hero-terminal.ht-comp-2 .ht-stage,
 .ht-drive-scroll .hero-terminal.ht-comp-2 .ht-stage{position:relative;top:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;height:auto;min-height:calc(100svh - var(--ht-nav));overflow:visible;container-type:normal;padding:var(--ht-vpad) var(--ht-side) 28px}
 .ht-drive-scroll .hero-terminal.ht-comp-2.ht-pin .ht-stage{position:sticky;top:var(--ht-nav)}
 .hero-terminal.ht-comp-2 .ht-copy{position:relative;z-index:3;inset:auto;flex:none;width:100%;height:auto;display:block;max-width:none}
 .glass-site .hero-terminal.ht-comp-2 .hero-still-copy h1{font-size:clamp(40px,5.6vw,96px)}
 .hero-terminal.ht-comp-2 .ht-figure{position:relative;inset:auto;transform:none;flex:none;display:block;container-type:normal;width:min(100%,max(60vw,1546px));min-height:0}
 .hero-terminal.ht-comp-2 .ht-full{position:relative;inset:auto;transform:none;width:100%}
 .ht-js .hero-terminal.ht-comp-2 .ht-full>.ht-base{-webkit-mask-image:linear-gradient(transparent 21%,#000 31%);mask-image:linear-gradient(transparent 21%,#000 31%)}
 .hero-terminal.ht-comp-2 .ht-captions{position:static;inset:auto;transform:none;width:100%;box-sizing:border-box;margin-top:0;grid-template-columns:minmax(240px,1fr) minmax(240px,1fr)}
 .hero-terminal.ht-comp-2 .ht-caption-line{font-size:16px;text-wrap:balance}
 .hero-terminal.ht-comp-2 .ht-caption{min-height:0}
 .glass-site .hero-terminal.ht-comp-2 .hero-still-copy p{max-width:540px}
}
@media(max-width:760px){
 .ht-stage>.ht-figure{display:grid;grid-template-columns:minmax(0,1fr);padding:0 8px;box-sizing:border-box;justify-items:center}
 .ht-phone,.ht-captions{display:contents}
 .ht-caption{display:contents}
 .ht-caption-left .ht-caption-label{grid-row:1}.ht-desk-left{grid-row:2}.ht-caption-left .ht-caption-outcome{grid-row:3}
 .ht-caption-right .ht-caption-label{grid-row:4}.ht-desk-right{grid-row:5}.ht-caption-right .ht-caption-outcome{grid-row:6}
 .ht-caption-outcome{width:calc(100% - 28px);max-width:346px;padding:8px 0 28px}
 .hero-terminal .ht-caption-label{box-sizing:border-box;width:calc(100% - 28px);max-width:346px;font-size:12px;border-top:1px solid #a8c29b35;padding-top:12px;margin:0 0 10px}
 .hero-terminal .ht-caption-line{font-size:16px}
}