/* Homepage composition. Loaded after the shared styles; the design-system layer supplies tokens. */
.home-page { background:var(--ink); color:var(--fg); }
.home-page main { overflow-x:clip; }
.home-page .site-header { position:fixed !important; inset:0 0 auto 0; z-index:40; }
.home-page .site-header:not([data-reel-passed]):not(:has(.desktop-mega:not([hidden]))) { background:linear-gradient(#000000a0,#00000000) !important; backdrop-filter:none; -webkit-backdrop-filter:none; }

.home-page :is(h1,h2,h3) { font-weight:400; margin:0; }
.home-page h2 { font-size:clamp(44px,6.4vw,112px); line-height:.94; letter-spacing:-.055em; text-wrap:balance; }
.home-page h2 span { color:inherit; }

.section-head { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--g); row-gap:28px; padding:clamp(96px,11vw,180px) var(--g) clamp(48px,6vw,96px); }
.section-head .section-index { grid-column:1 / -1; }
.section-head h2 { grid-column:1 / span 9; }
.section-head .section-lede { grid-column:10 / -1; align-self:end; margin:0; max-width:36ch; color:var(--fg-2); font-size:17px; line-height:1.5; letter-spacing:-.01em; }
@media (max-width:900px) { .section-head h2,.section-head .section-lede { grid-column:1 / -1; } }

/* ───────── Hero ───────── */
/* The legacy stylesheet carries several generations of hero rules; these selectors outrank all of them. */
.home-page .hero.hero-reel { position:relative; display:block; height:100svh; min-height:640px; max-height:none; padding:0; overflow:hidden; background:#000; color:var(--fg); isolation:isolate; }
.home-page .hero.hero-reel .hero-visual { position:absolute; inset:0; z-index:-2; width:auto; mask-image:none; -webkit-mask-image:none; background:#000 url("./noeraven-hero-poster.webp") center/cover no-repeat; }
.home-page .hero.hero-reel .hero-copy { z-index:2; width:auto; padding:0; margin:0; text-align:left; transform:none; }
.home-page .hero.hero-reel .hero-copy h1 { max-width:none; font-weight:400; color:var(--fg); }
.home-page .hero.hero-reel .hero-description { max-width:none; margin:0; font-size:16px; }
.home-page .hero.hero-reel .hero-actions { gap:10px; flex-wrap:wrap; justify-content:stretch; }
.home-page .hero.hero-reel .hero-visual,.home-page .hero.hero-reel .hero-video { position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; max-height:none !important; margin:0 !important; }
.home-page .hero.hero-reel .motion-toggle { white-space:nowrap; max-width:none !important; }
.home-page .hero.hero-reel .hero-bottom { display:flex; padding:0; z-index:3; border-color:#ffffff26; }
.home-page .hero.hero-reel .hero-bottom .motion-toggle { font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; min-height:44px; color:#ffffffb0; }
.home-page .hero.hero-reel .hero-bottom .motion-toggle:hover { color:var(--fg); }
.hero-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1.04); }
.hero-visual::after { content:""; position:absolute; inset:0; background:
  linear-gradient(180deg,#000000b0 0%,#00000000 26%,#00000000 46%,#000000d6 86%,#000 100%),
  linear-gradient(90deg,#00000099 0%,#00000000 60%); }
.hero-visual::before { content:""; position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.22; mix-blend-mode:overlay;
  background:repeating-linear-gradient(0deg,#ffffff10 0 1px,transparent 1px 3px); }


.home-page .hero.hero-reel .hero-copy { position:absolute; left:var(--g); right:var(--g); bottom:clamp(104px,13vh,150px); display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--g); align-items:end; transition:opacity .9s var(--ease-out); }
.home-page .hero.hero-reel .hero-copy h1 { grid-column:1 / span 8; font-size:clamp(52px,8.4vw,156px); line-height:.9; letter-spacing:-.062em; font-weight:400; text-wrap:balance; }
.hero-side { grid-column:9 / -1; display:flex; flex-direction:column; gap:24px; padding-bottom:.9vw; }
.home-page .hero.hero-reel .hero-statement { margin:0; font-size:clamp(24px,2.1vw,34px); line-height:1.1; letter-spacing:-.035em; color:var(--fg); }
.hero-description p { margin:0; color:var(--fg-2); font-size:16px; line-height:1.55; max-width:36ch; }
.hero-description .hero-statement { color:var(--fg); font-size:clamp(22px,1.8vw,28px); letter-spacing:-.03em; margin-bottom:12px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:10px; }
.hero-actions .btn { flex:1 1 200px; }
.home-page .hero.hero-reel .hero-bottom { position:absolute; left:var(--g); right:var(--g); bottom:0; height:76px; display:flex; align-items:center; gap:32px; border-top:1px solid #ffffff26; color:#ffffffa8; }
.hero-label { white-space:nowrap; }
.reel-meter { flex:1; display:flex; align-items:center; gap:14px; font-variant-numeric:tabular-nums; }
.reel-meter i { position:relative; flex:1; height:1px; background:#ffffff26; }
.reel-meter b { position:absolute; inset:0 auto 0 0; width:0; background:var(--fg); }
.reel-meter b::after { content:""; position:absolute; right:-3px; top:-3px; width:7px; height:7px; background:var(--signal); }
.motion-toggle { display:inline-flex; align-items:center; gap:10px; background:none; border:0; color:inherit; cursor:pointer; padding:12px 0; }
.motion-toggle svg { width:14px; height:14px; }
.motion-toggle:hover { color:var(--fg); }
@media (max-width:900px) {
  .home-page .hero.hero-reel .hero-copy { grid-template-columns:1fr; row-gap:28px; bottom:96px; }
  .home-page .hero.hero-reel .hero-copy h1,.hero-side { grid-column:1; }
  .reel-meter { display:none; }
  .home-page .hero.hero-reel .hero-bottom { justify-content:flex-end; height:60px; margin:0; }
  .home-page .hero.hero-reel .hero-bottom .motion-toggle { padding:12px 0 !important; }
  .home-page .hero.hero-reel .hero-copy { bottom:84px; }
}
@media (max-width:560px) {
  .hero-label { display:none; }
}

/* ───────── Thesis ───────── */
.thesis { padding:clamp(120px,14vw,240px) var(--g) clamp(120px,12vw,200px); display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--g); row-gap:56px; border-bottom:1px solid var(--rule); }
.thesis .section-index { grid-column:1 / span 2; align-self:start; padding-top:1.4em; flex-direction:column; align-items:flex-start; gap:6px; }
.thesis-text { grid-column:1 / span 11; margin:0; font-size:clamp(32px,4.3vw,76px); line-height:1.02; letter-spacing:-.045em; text-wrap:pretty; }
.thesis-text em { font-style:normal; }
.thesis-text .w { color:#ffffff24; transition:color .5s var(--ease-out); }
.thesis-text .w.on { color:var(--fg); }
.thesis-foot { grid-column:3 / -1; display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--rule); color:var(--mute); }
.thesis-foot span { padding:14px 0; }
.thesis-foot span::before { content:"+ "; color:var(--signal); }
@media (max-width:900px) { .thesis .section-index,.thesis-text,.thesis-foot { grid-column:1 / -1; } .thesis-foot { grid-template-columns:repeat(2,1fr); } }

/* ───────── Stack index ───────── */
.stack-index { list-style:none; margin:0; padding:0 var(--g); counter-reset:si; }
.stack-index li { border-top:1px solid var(--rule); }
.stack-index li:last-child { border-bottom:1px solid var(--rule); }
.stack-index a { position:relative; display:grid; grid-template-columns:minmax(0,1fr) 220px 170px 40px; align-items:center; gap:24px; padding:clamp(22px,2.6vw,40px) 0; color:var(--fg); text-decoration:none; isolation:isolate; overflow:hidden; }
.stack-index a::before { content:""; position:absolute; inset:0 calc(-1 * var(--g)); z-index:-1; background:center 40%/cover no-repeat; opacity:0; transform:scale(1.06); transition:opacity .6s var(--ease-out), transform 1.2s var(--ease-out); }
.stack-index a::after { content:""; position:absolute; inset:0 calc(-1 * var(--g)); z-index:-1; background:linear-gradient(90deg,#000000e6,#00000080); opacity:0; transition:opacity .6s var(--ease-out); }
.stack-index a[data-still="ops-screen"]::before { background-image:url("./stills/ops-screen.webp"); }
.stack-index a[data-still="sensor"]::before { background-image:url("./stills/sensor.webp"); }
.stack-index a[data-still="operator"]::before { background-image:url("./stills/operator.webp"); }
.stack-index a[data-still="ugv"]::before { background-image:url("./stills/ugv.webp"); }
.stack-index a:hover::before,.stack-index a:focus-visible::before { opacity:1; transform:scale(1); }
.stack-index a:hover::after,.stack-index a:focus-visible::after { opacity:1; }
.si-name { font-size:clamp(34px,5.6vw,96px); line-height:.95; letter-spacing:-.055em; transition:transform .6s var(--ease-out); }
.stack-index a:hover .si-name { transform:translateX(18px); }
.si-kind { color:var(--fg-2); font-size:15px; }
.si-status { display:inline-flex; gap:10px; align-items:center; color:var(--fg-2); }
.si-arrow { justify-self:end; font-size:22px; transition:color .3s; }
.stack-index a:hover .si-arrow { color:var(--signal); }
@media (max-width:900px) {
  /* Phones have no hover, so each row carries its footage permanently. */
  .stack-index { padding:0; }
  .stack-index li { border-color:var(--rule); }
  .stack-index a { padding:44px var(--g) 22px; min-height:200px; align-content:end; }
  .stack-index a::before { inset:0; opacity:.55; transform:none; }
  .stack-index a::after { inset:0; opacity:1; background:linear-gradient(0deg,#050606f2 10%,#05060666 70%,#05060633); }
  .stack-index a:hover .si-name { transform:none; }
  .stack-index a { grid-template-columns:1fr auto; row-gap:10px; }
  .si-status { grid-column:1; grid-row:1; }
  .si-arrow { grid-column:2; grid-row:1; }
  .si-name { grid-column:1 / -1; grid-row:2; font-size:clamp(40px,12vw,64px); }
  .si-kind { grid-column:1 / -1; grid-row:3; }
}

/* ───────── Signal → decision (sticky story) ───────── */
.signal { position:relative; height:440vh; margin-top:clamp(96px,10vw,160px); }
.signal-sticky { position:sticky; top:0; height:100svh; overflow:hidden; display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--g); padding:calc(var(--nr-header-height) + 32px) var(--g) 40px; }
.signal-media { position:absolute; inset:0; z-index:-1; background:var(--ink); }
.signal-media::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,var(--ink) 0%,#050606e6 30%,#05060600 52%); }
.sigmap { position:absolute; inset:0; width:100%; height:100%; display:block; font-family:var(--font-mono); }
.sigmap text { font-size:12px; letter-spacing:.06em; fill:var(--mute); }
.sigmap .sm-grid path { stroke:#ffffff0d; stroke-width:1; fill:none; }
.sigmap .sm-grid text { fill:var(--dim); font-size:11px; }
.sigmap .sm-fixed { fill:none; stroke:var(--fg-2); stroke-width:1.2; }
.sigmap .sm-fixed text { stroke:none; }
.sigmap .sm-fixed .f { fill:var(--fg-2); stroke:none; }
.sigmap .sm-fixed .rw { stroke:var(--dim); stroke-dasharray:6 6; }
.sigmap .sm-tracks { fill:var(--ink); stroke:var(--fg); stroke-width:1.4; }
.sigmap .sm-tracks text { stroke:none; fill:var(--fg-2); }
.sigmap .sm-panel > rect:first-child { fill:#050606e0; stroke:var(--rule-strong); }
.sigmap .sm-panel .h { fill:var(--signal); font-size:11.5px; }
.sigmap .sm-panel .m { fill:var(--mute); font-size:12px; }
.sigmap .sm-panel .v { fill:var(--fg); }
.sigmap .sm-panel .n { fill:var(--dim); font-size:10.5px; }
.sigmap .sm-panel .big { fill:var(--fg); font-family:var(--font-sans); font-size:34px; letter-spacing:-.03em; }
.sigmap .sm-panel .rule { stroke:var(--rule-strong); }
.sigmap .tile { fill:#ffffff06; stroke:var(--rule-strong); }
.sigmap .topo { fill:none; stroke:var(--fg-2); stroke-opacity:.55; stroke-width:1; }
.sigmap .wave { fill:none; stroke:var(--signal); stroke-width:1.4; }

/* Each layer belongs to a step; earlier context stays, later layers wait. */
.sigmap :is(.sm-l0,.sm-l1,.sm-l2,.sm-l3,.sm-l4,.sm-l0 .sm-panel,.sm-net,.sm-approve,.sm-log,.sm-conf,.sm-brk) { transition:opacity .7s var(--ease-out); }
.sigmap :is(.sm-l1,.sm-l2,.sm-l3,.sm-l4) { opacity:0; }
.signal[data-step="0"] .sm-l0 { opacity:1; }
.signal:not([data-step="0"]) .sm-l0 { opacity:.35; }
.signal:not([data-step="0"]) :is(.sm-l0 .sm-panel,.sm-sweep) { opacity:0; }
.signal:is([data-step="1"],[data-step="2"],[data-step="3"],[data-step="4"]) .sm-l1 { opacity:1; }
.signal:not([data-step="1"]) .sm-net { opacity:0; }
.signal:is([data-step="2"],[data-step="3"],[data-step="4"]) :is(.sm-brk,.sm-conf) { opacity:.45; }
.signal:is([data-step="2"],[data-step="3"],[data-step="4"]) .sm-l2 { opacity:1; }
.signal:not([data-step="2"]) .sm-approve { opacity:0; }
.signal:is([data-step="3"],[data-step="4"]) .sm-l3 { opacity:1; }
.signal[data-step="4"] .sm-l4 { opacity:1; }

.sigmap .sm-rings circle { fill:none; stroke:#ffffff14; stroke-dasharray:2 6; }
.sigmap .sm-sweep { transform-box:view-box; transform-origin:1460px 560px; }
.sigmap .sm-blips { fill:var(--fg); }
.sigmap .sm-blips .ring { fill:none; stroke:var(--signal); stroke-opacity:.6; transform-box:fill-box; transform-origin:center; }
.sigmap .sm-brk { fill:none; stroke:var(--fg-2); stroke-width:1.4; }
.sigmap .sm-conf text { fill:var(--fg-2); font-size:13px; }
.sigmap .sm-conf .hi { fill:var(--signal); }
.sigmap .sm-net .links line { stroke:#ffffff2e; stroke-width:1; }
.sigmap .sm-net .packets line { stroke:none; }
.sigmap .sm-net .nodes circle { fill:var(--ink); stroke:var(--fg-2); stroke-width:1.2; }
.sigmap .sm-net .nodes .o { stroke:var(--signal); }
.sigmap .sm-net .outs text { fill:var(--fg); font-size:13px; }
.signal:is([data-step="2"],[data-step="3"]) .sm-tracks .t1 { stroke:var(--signal); }
.sigmap .sm-lock { fill:none; stroke:var(--signal); stroke-width:2; }
.sigmap .sm-lock .ring { stroke-width:1; stroke-dasharray:3 5; }
.sigmap .btn-on { fill:var(--signal); }
.sigmap .btn-off { fill:none; stroke:var(--rule-strong); }
.sigmap .b { fill:#000; font-size:12.5px; }
.sigmap .sm-route { fill:none; stroke:var(--signal); stroke-width:1.6; stroke-dasharray:8 7; }
.sigmap .sm-asset { fill:var(--signal); }
.sigmap .sm-tag { fill:var(--signal); font-size:11.5px; }
.sigmap .sm-links path { fill:none; stroke:var(--signal); stroke-opacity:.5; stroke-width:1; stroke-dasharray:3 5; }
.sigmap .sm-done rect { fill:var(--signal); }
.sigmap .sm-done path { fill:none; stroke:#000; stroke-width:2; }
@media (prefers-reduced-motion:no-preference) {
  html:not(.motion-paused) .signal[data-step="0"] .sm-sweep { animation:smSweep 6s linear infinite; }
  html:not(.motion-paused) .signal[data-step="0"] .sm-blips .ring { animation:smPing 2.4s var(--ease-out) infinite; animation-delay:calc(var(--i) * .45s); }
  html:not(.motion-paused) .signal[data-step="1"] .sm-net .packets line { stroke:var(--signal); stroke-width:2; stroke-dasharray:6 160; animation:smPacket 1.8s linear infinite; animation-delay:var(--d); }
  html:not(.motion-paused) .signal:is([data-step="3"],[data-step="4"]) .sm-route { animation:smRoute 1.2s linear infinite; }
  html:not(.motion-paused) .signal[data-step="4"] .sm-links path { animation:smRoute 1.6s linear infinite; }
}
@keyframes smSweep { to { transform:rotate(360deg); } }
@keyframes smPing { 0% { transform:scale(.4); opacity:1; } 100% { transform:scale(2.4); opacity:0; } }
@keyframes smPacket { from { stroke-dashoffset:166; } to { stroke-dashoffset:0; } }
@keyframes smRoute { to { stroke-dashoffset:-30; } }
.signal-ui { grid-column:1 / span 5; display:flex; flex-direction:column; justify-content:space-between; gap:32px; min-height:0; }
.signal-head h2 { margin-top:24px; font-size:clamp(40px,5vw,88px); }

.signal-note { margin:20px 0 0; color:var(--mute); }
.signal-steps { list-style:none; margin:0; padding:0; border-top:1px solid var(--rule-strong); }
.signal-steps li { display:grid; grid-template-columns:44px 1fr; gap:12px; padding:14px 0; border-bottom:1px solid var(--rule); color:#ffffff59; transition:color .5s var(--ease-out); }
.signal-steps li > span { padding-top:7px; }
.signal-steps h3 { font-size:clamp(20px,1.7vw,28px); letter-spacing:-.03em; line-height:1.2; }
.signal-steps p { margin:0; max-height:0; opacity:0; overflow:hidden; color:var(--fg-2); font-size:15px; line-height:1.5; transition:max-height .7s var(--ease-out), opacity .5s, margin .5s; }
.signal-steps li.is-active { color:var(--fg); }
.signal-steps li.is-active > span { color:var(--signal); }
.signal-steps li.is-active p { max-height:220px; opacity:1; margin-top:8px; }
.signal-conf { display:grid; gap:6px; margin:14px 0 0; max-height:0; overflow:hidden; transition:max-height .7s var(--ease-out); }
.signal-steps li.is-active .signal-conf { max-height:120px; }
.signal-conf div { display:grid; grid-template-columns:64px 1fr; align-items:center; gap:12px; }
.signal-conf dt { color:var(--mute); }
.signal-conf dd { position:relative; margin:0; padding-left:calc(var(--v) * (100% - 48px) + 10px); color:var(--fg); }
.signal-conf dd::before { content:""; position:absolute; left:0; top:50%; height:6px; width:calc(var(--v) * (100% - 48px)); translate:0 -50%; background:linear-gradient(90deg,var(--signal),#c3d0bb66); }
.signal-conf div:not(:first-child) dd::before { background:#ffffff40; }
.signal-rail { display:flex; align-items:center; gap:14px; color:var(--mute); }
.signal-rail i { position:relative; flex:1; height:1px; background:var(--rule-strong); }
.signal-rail b { position:absolute; inset:0 auto 0 0; width:20%; background:var(--signal); transition:width .6s var(--ease-out); }
.signal-rail span:first-child { color:var(--fg); }
@media (max-width:900px) {
  /* Phones keep the story: the map pins under the header while the steps scroll past it. */
  .signal { height:auto; }
  .signal-sticky { position:static; height:auto; display:flex; flex-direction:column; overflow:visible; padding:0 0 64px; }
  .signal-media { position:sticky; top:var(--nr-header-height); z-index:2; inset:auto; aspect-ratio:1 / 1; max-height:58svh; width:100%; overflow:hidden; border-block:1px solid var(--rule); }
  body:has(.site-header.nav-hidden) .signal-media { top:0; }
  .signal-media::after { background:linear-gradient(0deg,#050606cc,#05060600 22%); }
  .sigmap { inset:auto 0 0 auto; width:175%; height:auto; aspect-ratio:16 / 10; }
  .signal-ui { display:contents; }
  .signal-head { order:-1; padding-inline:var(--g); }
  .signal-steps { margin:0 var(--g); border-top:0; }
  .signal-head { padding:56px 0 40px; }
  .signal-steps li { padding:28px 0 32px; color:#ffffff59; }
  .signal-steps li.is-active { color:var(--fg); }
  .signal-steps p,.signal-conf { max-height:none; opacity:1; margin-top:8px; }
  .signal-steps li:not(.is-active) :is(p,.signal-conf) { opacity:.45; }
  .signal-rail { display:none; }
}


/* ───────── Praxis feature ───────── */
.praxis-feature,.product { margin:0 var(--g); border:1px solid var(--rule); background:var(--ink-2); }
.pf-bar,.product-bar { display:flex; justify-content:space-between; gap:16px; padding:14px clamp(20px,2.4vw,40px); border-bottom:1px solid var(--rule); color:var(--mute); }
.pf-bar span:last-child,.product-bar span:last-child { display:inline-flex; gap:10px; align-items:center; color:var(--fg-2); }
.pf-grid,.product-grid { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); }
.pf-copy,.product-copy { display:flex; flex-direction:column; gap:22px; padding:clamp(28px,3.4vw,56px) clamp(20px,2.4vw,40px); border-right:1px solid var(--rule); }
.pf-name,.product-name { font-size:clamp(48px,6vw,104px); line-height:.92; letter-spacing:-.06em; }
.pf-tagline,.product-tagline { margin:8px 0 0; font-size:clamp(22px,1.9vw,30px); line-height:1.15; letter-spacing:-.03em; color:var(--fg); }
.pf-detail,.product-detail { margin:0; max-width:42ch; color:var(--fg-2); font-size:15.5px; line-height:1.6; }
.pf-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:auto; padding-top:18px; }
.product-copy .text-link { margin-top:auto; align-self:flex-start; }
.pf-demo { padding:clamp(20px,2.4vw,40px); background:
  linear-gradient(var(--ink-2),var(--ink-2)) padding-box,
  radial-gradient(circle at 80% 0%,#c3d0bb10,transparent 60%); display:flex; align-items:center; }
.pf-demo .praxis-demo { width:100%; }
.pf-specs { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)) minmax(0,2fr); margin:0; border-top:1px solid var(--rule); }
.pf-specs > div { padding:22px clamp(20px,2.4vw,40px); border-right:1px solid var(--rule); display:flex; flex-direction:column; gap:12px; }
.pf-specs > div:last-child { border-right:0; }
.pf-specs dt { color:var(--mute); }
.pf-specs dd { margin:0; font-size:18px; letter-spacing:-.02em; }
.pf-specs dd.mono { white-space:nowrap; font-size:12.5px; text-transform:none; letter-spacing:0; }
.pf-stat dd { display:flex; flex-direction:column; gap:6px; }
.pf-big { font-size:clamp(44px,4.4vw,72px); line-height:.9; letter-spacing:-.05em; font-variant-numeric:tabular-nums; }
.pf-big small { font-size:.45em; color:var(--signal); margin-left:4px; }
.pf-cap { color:var(--mute); }
@media (max-width:1100px) {
  .pf-specs { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .pf-specs > div { border-bottom:1px solid var(--rule); }
  .pf-stat { grid-column:1 / -1; }
}
@media (max-width:900px) {
  .pf-grid,.product-grid { grid-template-columns:1fr; }
  .pf-copy,.product-copy { border-right:0; border-bottom:1px solid var(--rule); }
}

/* ───────── Products ───────── */
.products .product + .product { margin-top:clamp(20px,2vw,32px); }
.product > .product-grid > .product-visual,.console-panel { min-width:0; }
.product .product-visual { margin:0; padding:clamp(20px,2.4vw,40px); background:radial-gradient(120% 90% at 100% 0%,#1d2221 0%,var(--ink-2) 60%); border:0; display:flex; flex-direction:column; gap:16px; }
.product .visual-caption,.product .visual-bottom { display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--mute); }
.product .visual-caption i { display:inline-block; width:6px; height:6px; margin-right:8px; background:var(--signal); vertical-align:middle; }
.product .preview-stage { flex:1; display:flex; align-items:center; justify-content:center; }
.product .harness-window,.product .code-window { width:100%; box-shadow:0 40px 80px -20px #000000e0, 0 0 0 1px #ffffff14; }
.console-panel { display:flex; flex-direction:column; padding:clamp(20px,2.4vw,40px); gap:0; background:radial-gradient(120% 90% at 100% 0%,#1d2221 0%,var(--ink-2) 60%); }
.cp-top { display:flex; justify-content:space-between; padding:14px 0; border-bottom:1px solid var(--rule-strong); color:var(--mute); }
.cp-rows { list-style:none; margin:0; padding:0; }
.cp-rows li { display:grid; grid-template-columns:44px 140px 1fr; align-items:baseline; gap:16px; padding:22px 0; border-bottom:1px solid var(--rule); }
.cp-rows li span:first-child { color:var(--mute); }
.cp-rows strong { font-weight:400; font-size:clamp(22px,2vw,30px); letter-spacing:-.035em; }
.cp-rows li span:last-child { color:var(--fg-2); font-size:15px; }
.cp-code { margin:28px 0 0; padding:18px 20px; background:#000; border:1px solid var(--rule); color:var(--fg-2); text-transform:none; letter-spacing:0; font-size:12.5px; line-height:1.8; overflow-x:auto; }
.cp-code .c-k { color:var(--signal); } .cp-code .c-m { color:var(--mute); }
.cp-link { margin-top:auto; padding-top:24px; color:var(--fg); text-decoration:none; }
.cp-link:hover { color:var(--signal); }
@media (max-width:640px) { .cp-rows li { grid-template-columns:36px 1fr; } .cp-rows li span:last-child { grid-column:2; } }

/* ───────── Operating model ───────── */
.home-page .operating-model .operation-layout { display:block; }
.home-page .operating-model .operation-stages { padding:0; border-right:0; }
.home-page .operating-model .operation-brief { background:transparent; color:var(--fg); }
.home-page .operating-model .operation-brief p { color:var(--fg); }
.home-page .operating-model .operation-detail { background:transparent; color:var(--fg); min-width:0; }
.home-page .operating-model .operation-detail > p { min-height:0; }
.home-page .operating-model .context-map { min-height:0; margin:0; background-image:radial-gradient(#ffffff1f .6px,transparent .6px); background-size:12px 12px; background-color:#000; }
.home-page .operating-model .map-inputs > span { background:var(--ink-2); font:12px/1.5 var(--font-mono); }
.home-page .operating-model .map-output { border:0; }
.home-page .operating-model .map-output > span { color:var(--ink); }
.home-page .operating-model .trace-artifact { margin:0; display:block; color:var(--fg-2); }
.home-page .operating-model .trace-artifact ul { font:14.5px/1.5 var(--font-sans); }
.home-page .operating-model .trace-artifact li::before { content:"→"; margin-right:12px; color:var(--signal); font-family:var(--font-mono); }
.home-page .operating-model { background:transparent; color:var(--fg); }
.home-page .operating-model .operation-study { margin:0 var(--g); border:1px solid var(--rule); background:var(--ink-2); }
.home-page .operation-brief { padding:24px; border-bottom:1px solid var(--rule); display:grid; grid-template-columns:200px 1fr auto; gap:24px; align-items:center; }
.home-page .operation-brief p { margin:0; font-size:clamp(18px,1.6vw,24px); letter-spacing:-.025em; line-height:1.3; }
.home-page .workflow-label,.home-page .brief-ref { font-family:var(--font-mono); font-size:10.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--mute); }
.home-page .workflow-label { color:var(--mute); }
.home-page .operation-stages { display:grid; grid-template-columns:repeat(4,1fr); border-bottom:1px solid var(--rule); }
.home-page .operation-stage { display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:start; padding:22px 20px 24px; background:transparent; border:0; border-right:1px solid var(--rule); color:var(--mute); text-align:left; cursor:pointer; position:relative; transition:background .35s, color .35s; font:inherit; }
.home-page .operation-stage:last-child { border-right:0; }
.home-page .operation-stage::after { content:""; position:absolute; left:0; right:0; top:-1px; height:2px; background:var(--signal); transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease-out); }
.home-page .operation-stage[aria-pressed="true"] { color:var(--fg); background:var(--ink-3); }
.home-page .operation-stage[aria-pressed="true"]::after { transform:scaleX(1); }
.home-page .operation-stage:hover { color:var(--fg); }
.home-page .stage-number { font-family:var(--font-mono); font-size:11px; padding-top:4px; }
.home-page .operation-stage strong { display:block; font-weight:400; font-size:18px; letter-spacing:-.02em; }
.home-page .operation-stage small { display:block; margin-top:4px; font-size:13px; color:var(--mute); }
.home-page .operation-detail { padding:clamp(24px,3vw,48px); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:20px 48px; }
.home-page .trace-heading { grid-column:1 / -1; display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:11px; letter-spacing:.07em; text-transform:uppercase; color:var(--mute); }
.home-page .trace-heading .eyebrow { color:var(--signal); }
.home-page .operating-model .context-map { grid-column:2; grid-row:2 / span 3; align-self:start; display:grid; grid-template-columns:1fr 64px 1fr; align-items:center; gap:0; padding:32px 28px; border:1px solid var(--rule); }
.home-page .map-inputs { display:flex; flex-direction:column; gap:10px; }
.home-page .map-inputs span { padding:10px 12px; border:1px solid var(--rule-strong); font-size:13px; position:relative; }
.home-page .map-inputs span::after { content:""; position:absolute; left:100%; top:50%; width:32px; height:1px; background:var(--rule-strong); }
.home-page .map-junction { display:grid; place-items:center; }
.home-page .operating-model .map-junction span { display:grid; place-items:center; width:44px; height:44px; background:#000; border:1px solid var(--signal); color:var(--signal); font-family:var(--font-mono); font-size:11px; }
.home-page .map-output { display:flex; flex-direction:column; gap:6px; padding:14px; background:var(--fg); color:var(--ink); }
.home-page .map-output span { font-size:16px; letter-spacing:-.02em; }
.home-page .map-output small { font-family:var(--font-mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:#555; }
.home-page #trace-title { font-size:clamp(28px,2.6vw,42px); letter-spacing:-.04em; line-height:1.05; }
.home-page #trace-description { margin:0; color:var(--fg-2); font-size:15.5px; line-height:1.6; max-width:46ch; }
.home-page .trace-artifact { border-top:1px solid var(--rule); padding-top:18px; }
.home-page .trace-artifact .eyebrow { font-family:var(--font-mono); font-size:11px; letter-spacing:.07em; text-transform:uppercase; color:var(--mute); }
.home-page .trace-artifact ul { list-style:none; margin:12px 0 0; padding:0; }
.home-page .trace-artifact li { padding:8px 0; color:var(--fg-2); font-size:14.5px; }
.home-page .operation-footnote { display:flex; justify-content:space-between; gap:20px; padding:16px 24px; border-top:1px solid var(--rule); font-family:var(--font-mono); font-size:10.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--mute); }
@media (max-width:900px) {
  .home-page .operation-brief { grid-template-columns:1fr; }
  .home-page .operation-stages { grid-template-columns:1fr 1fr; }
  .home-page .operation-stage:nth-child(2) { border-right:0; }
  .home-page .operation-stage:nth-child(-n+2) { border-bottom:1px solid var(--rule); }
  .home-page .operation-detail { grid-template-columns:1fr; }
  .home-page .operating-model .context-map { grid-column:1; grid-row:auto; }
  .home-page .operation-footnote { flex-direction:column; }
}

/* ───────── Doctrine (light field) ───────── */
.doctrine { position:relative; overflow:hidden; margin-top:clamp(96px,11vw,180px); padding:clamp(96px,10vw,160px) var(--g) clamp(64px,7vw,110px); background:var(--bone); color:var(--bone-ink); isolation:isolate; }
.doctrine .section-index { color:var(--bone-mute); }
.doctrine-head { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--g); row-gap:28px; }
.doctrine-head .section-index { grid-column:1 / -1; }
.doctrine-head h2 { grid-column:1 / span 8; font-size:clamp(52px,8vw,148px); }

.doctrine-intro { grid-column:9 / -1; align-self:end; display:flex; flex-direction:column; gap:24px; align-items:flex-start; }
.doctrine-intro p { margin:0; font-size:17px; line-height:1.5; color:#2b2e2c; max-width:36ch; }
.doctrine .text-link { color:var(--bone-ink); border-color:var(--bone-rule); }
.doctrine .text-link:hover { border-color:var(--signal-ink); }
.doctrine-grid { list-style:none; margin:clamp(64px,8vw,120px) 0 0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-top:1px solid var(--bone-ink); }
.doctrine-grid li { padding:22px 24px 40px 0; border-right:1px solid var(--bone-rule); display:flex; flex-direction:column; gap:14px; }
.doctrine-grid li + li { padding-left:24px; }
.doctrine-grid li:last-child { border-right:0; }
.doctrine-grid .label { color:var(--bone-mute); }
.doctrine-grid h3 { font-size:clamp(24px,2.2vw,36px); letter-spacing:-.04em; line-height:1.02; margin-top:clamp(40px,5vw,88px); }
.doctrine-grid p { margin:0; color:#3b3e3c; font-size:15px; line-height:1.55; max-width:30ch; }
.doctrine-mark { position:absolute; right:-10vw; top:-16vw; width:min(60vw,980px); z-index:-1; color:#0a0b0b0d; -webkit-mask-image:linear-gradient(#000 35%,transparent 72%); mask-image:linear-gradient(#000 35%,transparent 72%); }
@media (max-width:900px) {
  .doctrine-head h2,.doctrine-intro { grid-column:1 / -1; }
  .doctrine-grid { grid-template-columns:1fr 1fr; }
  .doctrine-grid li { border-bottom:1px solid var(--bone-rule); }
  .doctrine-grid li:nth-child(2n) { border-right:0; }
  .doctrine-grid li:nth-child(odd) { padding-left:0; }
}
@media (max-width:560px) { .doctrine-grid { grid-template-columns:1fr; } .doctrine-grid li { border-right:0; padding-left:0 !important; min-height:0; } .doctrine-grid h3 { margin-top:12px; } }

/* ───────── Approach ───────── */
.home-page .approach { padding:0; background:transparent; }
.approach-rows { margin:0 var(--g); border-top:1px solid var(--rule); }
.approach-rows article { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--g); padding:clamp(28px,3vw,44px) 0; border-bottom:1px solid var(--rule); align-items:baseline; transition:background .4s; }
.approach-rows .label { grid-column:1 / span 2; }
.approach-rows h3 { grid-column:3 / span 5; font-size:clamp(28px,3.2vw,56px); letter-spacing:-.05em; line-height:1; }
.approach-rows p { grid-column:9 / -1; margin:0; color:var(--fg-2); font-size:15.5px; line-height:1.6; max-width:38ch; }
.approach-link { display:flex; justify-content:space-between; align-items:center; gap:16px; margin:0 var(--g); padding:26px 0; border-bottom:1px solid var(--rule); color:var(--fg); text-decoration:none; font-size:clamp(18px,1.6vw,24px); letter-spacing:-.02em; }
.approach-link .data { color:var(--mute); transition:color .3s; }
.approach-link:hover .data { color:var(--fg); }
@media (max-width:900px) { .approach-rows article { grid-template-columns:1fr; row-gap:12px; } .approach-rows :is(.mono,h3,p) { grid-column:1; } }

/* ───────── Contact ───────── */
.contact { position:relative; overflow:hidden; margin-top:clamp(96px,11vw,180px); min-height:92svh; display:flex; align-items:flex-end; isolation:isolate; border-top:1px solid var(--rule); }
.contact-still { position:absolute; inset:0; z-index:-1; width:100%; height:100%; object-fit:cover; object-position:50% 60%; opacity:.6; }
.contact::after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(0deg,#000 0%,#000000c0 40%,#00000040 100%); }
.contact-inner { width:100%; padding:clamp(80px,8vw,140px) var(--g) clamp(48px,5vw,80px); display:flex; flex-direction:column; gap:28px; }
.contact h2 { font-size:clamp(56px,11vw,200px); line-height:.86; letter-spacing:-.065em; }

.contact-row { display:flex; justify-content:space-between; align-items:flex-end; gap:32px; flex-wrap:wrap; padding-top:28px; border-top:1px solid var(--rule-strong); }
.contact-row p { margin:0; max-width:40ch; color:var(--fg-2); font-size:17px; line-height:1.5; }
.contact-row .btn { min-width:280px; }


/* Leftover tag-style captions become plain labels; monospace stays on data only. */
.pf-specs dd.data { white-space:nowrap; font-size:12.5px; }
.home-page :is(.workflow-label,.brief-ref,.trace-heading,.trace-artifact .eyebrow,.operation-footnote,.cp-top,.cp-link,.product .visual-caption,.product .visual-bottom) {
  font-family:var(--font-sans) !important; font-size:13px !important; letter-spacing:-.005em !important; text-transform:none !important;
}
.home-page .trace-heading .eyebrow { color:var(--fg-2); }
.home-page .cp-top span:first-child,.home-page .cp-top span:last-child { font-family:var(--font-mono); font-size:12px; }
.home-page .operating-model .map-output small { font-family:var(--font-sans); font-size:12.5px; letter-spacing:0; text-transform:none; color:#555; }
.home-page .operation-stage { grid-template-columns:auto 1fr; }
.home-page .trace-heading :is(.eyebrow,.trace-label) { font-family:var(--font-sans) !important; font-size:13px !important; letter-spacing:-.005em !important; text-transform:none !important; }
.home-page .hero.hero-reel .hero-description { display:flex; flex-direction:column; gap:10px; }
.home-page .hero.hero-reel .hero-line { margin:0; color:var(--fg-2); font-size:16px; line-height:1.5; }

/* Context map on narrow screens: inputs stack, one centred connector runs through the
   junction, the output sits below. Declared last so the desktop grid cannot override it. */
@media (max-width:640px) {
  .home-page .operating-model .operation-detail .context-map { display:flex; flex-direction:column; align-items:stretch; gap:0; padding:20px; }
  .home-page .operating-model .context-map .map-inputs { display:grid; gap:8px; width:100%; padding:0; }
  .home-page .operating-model .context-map .map-inputs > span { padding:11px 12px; font-size:12px; }
  .home-page .operating-model .context-map .map-inputs > span::after { display:none; }
  .home-page .operating-model .context-map .map-junction { display:grid; place-items:center; position:relative; height:76px; }
  .home-page .operating-model .context-map .map-junction::before { content:""; position:absolute; inset:0 auto 0 50%; margin:0; width:0; border-left:1px solid var(--rule-strong); border-top:0; }
  .home-page .operating-model .context-map .map-junction::after { display:none; }
  .home-page .operating-model .context-map .map-junction span { position:relative; z-index:1; width:40px; height:40px; border:1px solid var(--signal); background:#000; font-size:11px; }
  .home-page .operating-model .context-map .map-output { padding:16px; }
  .home-page .operating-model .context-map .map-output > span { font-size:17px; }
}

/* Context map connectors (wide screens): ticks meet a spine that spans exactly from the
   first input's midline to the last, then one line runs through the junction to the output. */
@media (min-width:641px) {
  .home-page .operating-model .operation-detail .context-map { grid-template-columns:minmax(0,1fr) 88px minmax(0,1fr); }
  .home-page .operating-model .context-map .map-inputs > span::after { width:12px; border-top:1px solid var(--rule-strong); background:none; height:0; }
  .home-page .operating-model .context-map .map-junction { align-self:stretch; display:grid; place-items:center; position:relative; }
  .home-page .operating-model .context-map .map-junction::before { content:""; position:absolute; left:12px; top:var(--mid,20px); bottom:var(--mid,20px); inset-inline-end:auto; margin:0; width:0; border-left:1px solid var(--rule-strong); }
  .home-page .operating-model .context-map .map-junction::after { content:""; position:absolute; left:12px; right:0; top:50%; border-top:1px solid var(--rule-strong); }
  .home-page .operating-model .context-map .map-junction span { position:relative; z-index:1; width:44px; height:44px; border:1px solid var(--signal); background:#000; }
}

/* ───────── Hero arrival: aperture, then masked line rises ───────── */
.home-page .hero.hero-reel h1 .hl { display:block; overflow:hidden; padding-bottom:.08em; margin-bottom:-.08em; }
.home-page .hero.hero-reel h1 .hl > span { display:block; }
@media (prefers-reduced-motion:no-preference) {
  html.js-hero .hero.hero-reel .hero-visual { transition:clip-path 1.6s var(--ease-io); }
  html.js-hero .hero.hero-reel:not([data-arrived]) .hero-visual { clip-path:inset(50% 0 50% 0); }
  html.js-hero .hero.hero-reel h1 .hl > span { transition:transform 1.1s var(--ease-out); }
  html.js-hero .hero.hero-reel h1 .hl:first-child > span { transition-delay:.75s; }
  html.js-hero .hero.hero-reel h1 .hl:last-child > span { transition-delay:.9s; }
  html.js-hero .hero.hero-reel:not([data-arrived]) h1 .hl > span { transform:translateY(105%); }
  html.js-hero .hero.hero-reel :is(.hero-side,.hero-bottom) { transition:opacity .9s var(--ease-out) 1.15s, transform 1.1s var(--ease-out) 1.15s; }
  html.js-hero .hero.hero-reel:not([data-arrived]) :is(.hero-side,.hero-bottom) { opacity:0; transform:translateY(16px); }
}

/* ───────── Stack rows: footage opens from the row's midline ───────── */
.stack-index a::before,.stack-index a::after { opacity:1; transform:none; clip-path:inset(50% 0 50% 0); transition:clip-path .7s var(--ease-io); }
.stack-index a:hover::before,.stack-index a:hover::after,.stack-index a:focus-visible::before,.stack-index a:focus-visible::after { clip-path:inset(0 0 0 0); }
.stack-index a::before { opacity:.6; }
@media (max-width:900px) { .stack-index a::before,.stack-index a::after { clip-path:none; } .stack-index a::before { opacity:.55; } }
@media (prefers-reduced-motion:reduce) { .stack-index a::before,.stack-index a::after { transition:none; } }

/* ───────── Signal: one tracking frame glides between subjects ───────── */
.sigmap .sm-frame { transform-box:view-box; transform-origin:0 0; transition:transform 1s var(--ease-out); pointer-events:none; }
.sigmap .sm-frame rect { fill:none; stroke:var(--signal); stroke-opacity:.35; stroke-width:1; vector-effect:non-scaling-stroke; }
.sigmap .sm-frame path { fill:none; stroke:var(--signal); stroke-width:2.5; vector-effect:non-scaling-stroke; }
.signal[data-step="0"] .sm-frame { transform:translate(790px,380px) scale(3.8,5); }
.signal[data-step="1"] .sm-frame { transform:translate(1128px,438px) scale(.84,.84); }
.signal[data-step="2"] .sm-frame { transform:translate(1104px,414px) scale(1.32,1.32); }
.signal[data-step="3"] .sm-frame { transform:translate(1026px,150px) scale(1.74,3.6); }
.signal[data-step="4"] .sm-frame { transform:translate(1146px,456px) scale(.48,.48); }
@media (prefers-reduced-motion:reduce) { .sigmap .sm-frame { transition:none; } }

/* ───────── Products triptych ───────── */
.triptych { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin:0 var(--g); }
.tri { display:flex; flex-direction:column; min-width:0; border:1px solid var(--rule); background:var(--ink-2); transition:border-color .4s var(--ease-out); }
.tri:hover { border-color:var(--rule-strong); }
.tri-visual { position:relative; aspect-ratio:4 / 3; display:flex; align-items:center; justify-content:center; padding:clamp(20px,2.2vw,32px); overflow:hidden; background:radial-gradient(120% 90% at 100% 0%,#1d2221,var(--ink-2) 60%); }
.tri-visual > :first-child { width:100%; box-shadow:0 30px 60px -24px #000; transition:transform .8s var(--ease-out); }
.tri:hover .tri-visual > :first-child { transform:translateY(-6px); }
.tri-caption { position:absolute; left:16px; bottom:12px; font-size:12px; color:var(--dim); }
.tri-dim { color:var(--mute); }
.tri-body { flex:1; display:flex; flex-direction:column; gap:14px; padding:28px; border-top:1px solid var(--rule); }
.tri-meta { display:flex; justify-content:space-between; gap:12px; }
.tri-meta span:last-child { display:inline-flex; align-items:center; gap:8px; color:var(--fg-2); }
.tri-name { margin:0; font-weight:400; font-size:clamp(44px,4vw,64px); letter-spacing:-.055em; line-height:1; }
.tri-text { margin:0; color:var(--fg-2); font-size:15px; line-height:1.55; }
.tri-body .text-link { margin-top:auto; align-self:flex-start; }
.tri-console { box-shadow:none !important; }
.tri-console-top { display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--rule-strong); font-size:11px; color:var(--mute); }
.tri-console-row { display:grid; grid-template-columns:30px 1fr; column-gap:10px; row-gap:2px; padding:13px 0; border-bottom:1px solid var(--rule); }
.tri-console-row:last-child { border-bottom:0; }
.tri-console-row .data { grid-row:span 2; font-size:11px; color:var(--mute); padding-top:5px; }
.tri-console-row > span:not(.data) { font-size:21px; letter-spacing:-.03em; }
.tri-console-row small { font-size:12.5px; color:var(--mute); }
.tri-harness { display:grid; grid-template-columns:34% 1fr; border:1px solid var(--rule-strong); background:#000; }
.tri-harness-rail { display:flex; flex-direction:column; gap:10px; padding:14px; border-right:1px solid var(--rule); font-size:11.5px; color:var(--fg-2); }
.tri-harness-rail b { font-weight:600; color:var(--fg); margin-bottom:4px; }
.tri-harness-main { display:flex; flex-direction:column; gap:10px; padding:18px 14px; }
.tri-harness-main .data { font-size:9.5px; }
.tri-harness-main .tri-harness-head { font-size:16px; line-height:1.25; color:var(--fg); }
.tri-harness-input { margin-top:20px; padding:9px 10px; border:1px solid var(--rule-strong); font-size:10.5px; color:var(--mute); }
.tri-term { padding:16px 18px; border:1px solid var(--rule-strong); background:#000; font-size:11.5px; line-height:1.9; color:var(--fg-2); }
.tri-term b { font-weight:400; color:var(--signal); }
.tri-term-id { font-family:var(--font-sans); font-size:24px; letter-spacing:-.03em; color:var(--fg); margin:6px 0; }
@media (max-width:1100px) and (min-width:901px) { .tri-body { padding:22px; } }
/* Phones: a swipeable strip, each card most of the screen wide. */
@media (max-width:900px) {
  .triptych { display:flex; gap:12px; margin:0; padding:0 var(--g) 4px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:var(--g); scrollbar-width:none; }
  .triptych::-webkit-scrollbar { display:none; }
  .tri { flex:0 0 min(84vw,380px); scroll-snap-align:start; }
}
@media (prefers-reduced-motion:reduce) { .tri-visual > :first-child { transition:none; } }
.swipe-hint { display:none; margin:0 var(--g) 14px; }
@media (max-width:900px) { .swipe-hint { display:block; } }
/* Contact footage opens through the aperture on first view. */
.contact-still { transition:clip-path 1.6s var(--ease-io); }
.contact[data-aperture="closed"] .contact-still { clip-path:inset(50% 0 50% 0); }

/* Phones: card visuals size to their content instead of a fixed ratio, so nothing clips. */
@media (max-width:900px) {
  .tri-visual { aspect-ratio:auto; min-height:220px; padding:22px 20px 40px; align-items:center; }
  .tri-console-row { padding:11px 0; }
  .tri-console-row > span:not(.data) { font-size:19px; }
  .tri-harness { grid-template-columns:38% 1fr; }
  .tri-harness-rail { padding:12px; gap:9px; font-size:11px; }
  .tri-harness-rail span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .tri-harness-main { padding:14px 12px; }
  .tri-term { font-size:11px; overflow-wrap:anywhere; }
  .tri-caption { bottom:12px; }
  .tri-body { padding:22px 20px 24px; }
}