@font-face{font-family:"Manrope";src:url("/assets/manrope-regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Manrope";src:url("/assets/manrope-bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
:root{--garnet:#752F3F;--garnet-2:#5A2231;--garnet-3:#953E52;--chalk:#F4EFE8;--chalk-2:#E9E1D7;--ink:#231A1D;--ink-2:#1A1315;--rose:#D9C2C5;--cool:#41505C;--warm:#A3475B;--rule:rgba(35,26,29,.16);--font:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--ease:cubic-bezier(.22,.72,.18,1);--gutter:clamp(20px,4.5vw,64px);--max:1360px;--head:64px;--focus:var(--garnet)}
@media(min-width:900px){:root{--head:72px}}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--head) + 12px);-webkit-text-size-adjust:100%;overflow-x:clip}
body{margin:0;font-family:var(--font);font-size:1.0625rem;line-height:1.55;color:var(--ink);background:var(--chalk);overflow-x:clip}
img,svg{max-width:100%}
[hidden]{display:none!important}
h1,h2{margin:0;font-weight:400;line-height:1.04;letter-spacing:-.04em}
h3{margin:0;font-weight:700;line-height:1.2;letter-spacing:-.01em}
p,ul,dl,figure{margin:0}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:2px}
.dark{--focus:var(--chalk)}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.h2{font-size:clamp(2.1rem,5vw,3.8rem)}
.lead{font-size:clamp(1.05rem,1.4vw,1.2rem);line-height:1.5;max-width:44ch}
.skip-link{position:fixed;left:16px;top:12px;z-index:150;padding:12px 18px;background:var(--chalk);color:var(--garnet);font-weight:700;text-decoration:none;transform:translateY(-180%)}
.skip-link:focus{transform:none}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:46px;padding:0 1.35rem;border:1px solid currentColor;border-radius:3px;background:transparent;font-weight:700;text-decoration:none;cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.btn:hover{background:rgba(127,110,112,.12)}
.btn-solid{background:var(--chalk);color:var(--ink);border-color:var(--chalk)}
.btn-solid:hover{background:#fff;border-color:#fff}
.btn-garnet{background:var(--garnet);color:var(--chalk);border-color:var(--garnet)}
.btn-garnet:hover{background:var(--garnet-2);border-color:var(--garnet-2)}
.btn-chalk{background:var(--chalk);color:var(--garnet);border-color:var(--chalk)}
.btn-chalk:hover{background:#fff;border-color:#fff}
.btn-quiet{display:inline-flex;align-items:center;min-height:44px;padding:0 .95rem;border:1px solid rgba(35,26,29,.42);border-radius:3px;background:transparent;font-weight:700;font-size:.9rem;cursor:pointer;transition:border-color .25s}
.btn-quiet:hover{border-color:var(--ink)}
.btn-quiet:disabled{opacity:.6;cursor:default}
.link-quiet{display:inline-flex;align-items:center;min-height:44px;padding:0;background:none;border:0;font-weight:700;text-decoration:none;cursor:pointer;box-shadow:inset 0 -1px 0 rgba(244,239,232,.45);transition:box-shadow .3s}
.link-quiet:hover{box-shadow:inset 0 -1px 0 currentColor}
.actions{display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;align-items:center}
/* header */
.site-head{position:fixed;top:0;left:0;right:0;z-index:60;height:var(--head);background:rgba(244,239,232,.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:var(--ink);box-shadow:0 1px 0 var(--rule)}
.head-inner{height:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.brand{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;font-weight:700;font-size:1.08rem;letter-spacing:-.01em;min-height:44px}
.brand svg{width:28px;height:28px;flex:none}
.menu-btn{min-width:44px;min-height:44px;padding:0 .85rem;background:transparent;border:1px solid currentColor;border-radius:3px;font-weight:700;cursor:pointer}
.site-nav{display:none}
.site-nav.open{display:grid;position:absolute;top:var(--head);left:0;right:0;background:var(--chalk);color:var(--ink);padding:.5rem var(--gutter) 1.5rem;border-top:1px solid var(--rule);box-shadow:0 30px 40px -24px rgba(35,26,29,.4)}
.site-nav a{text-decoration:none;font-weight:700;min-height:48px;display:flex;align-items:center;border-bottom:1px solid var(--rule)}
.site-nav .btn{margin-top:1rem;justify-self:start;color:var(--ink)}
@media(min-width:900px){
.menu-btn{display:none}
.site-nav,.site-nav.open{display:flex;position:static;background:transparent;padding:0;gap:clamp(1rem,2.6vw,2.4rem);align-items:center;border:0;box-shadow:none}
.site-nav a{border:0;font-size:.95rem;padding:0 .2rem;position:relative;min-height:44px}
.site-nav a::after{content:"";position:absolute;left:.2rem;right:.2rem;bottom:10px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.site-nav a:hover::after{transform:scaleX(1)}
.site-nav .btn{margin:0;min-height:42px;padding:0 1.1rem}
}
/* hero */
.hero{position:relative;background:var(--ink-2);color:var(--chalk);--focus:var(--chalk);overflow:hidden;isolation:isolate;display:flex;flex-direction:column;padding-top:calc(var(--head) + 28px)}
.hero-copy{display:grid;gap:14px;padding-bottom:24px}
.kicker{font-size:.9rem;line-height:1.4;color:var(--rose);animation:fadeUp .9s .3s var(--ease) both}
.hero h1{font-size:clamp(2.3rem,10.4vw,3.1rem);letter-spacing:-.045em;line-height:1.02}
.hero h1 .line{display:block;overflow:hidden;padding-bottom:.16em;margin-bottom:-.16em}
.hero h1 .line span{display:inline-block;transform:translateY(110%);animation:rise 1s calc(.4s + var(--i,0)*.11s) var(--ease) both}
.hero h1 .accent span{color:var(--rose)}
.hero .lead{color:rgba(244,239,232,.9);max-width:40ch;animation:fadeUp .9s .8s var(--ease) both}
.hero .actions{margin-top:6px;animation:fadeUp .9s 1s var(--ease) both}
.hero-media{order:2;position:relative;height:clamp(240px,66vw,300px);animation:heroIn 1.4s var(--ease) both}
.hero-media img{position:absolute;left:50%;top:50%;width:190%;height:auto;transform:translate(-59%,-34%)}
.hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,var(--ink-2) 0,rgba(26,19,21,0) 20%,rgba(26,19,21,0) 80%,var(--ink-2));pointer-events:none}
.sweep{position:absolute;inset:0;pointer-events:none;background:linear-gradient(104deg,rgba(244,239,232,0) 44%,rgba(244,239,232,.28) 50%,rgba(244,239,232,0) 56%);mix-blend-mode:soft-light;transform:translateX(-80%);animation:sweep 2.4s .6s var(--ease) both}
@keyframes heroIn{from{opacity:0;transform:scale(1.04)}to{opacity:1;transform:none}}
@keyframes sweep{to{transform:translateX(80%)}}
@keyframes rise{to{transform:none}}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media(min-width:700px){
.hero{padding-top:calc(var(--head) + 40px)}
.kicker{font-size:.95rem}
.hero h1{font-size:clamp(3.2rem,6.4vw,4.6rem)}
.hero-media{height:clamp(320px,44vw,440px)}
.hero-media img{width:130%}
}
@media(min-width:1000px){
.hero{display:grid;align-items:center;min-height:min(100svh,920px);padding:0}
.hero-copy{position:relative;z-index:2;grid-area:1/1;max-width:min(50%,760px);padding:calc(var(--head) + clamp(3rem,10vh,7rem)) var(--gutter) clamp(3rem,8vh,5rem);gap:1.4rem}
.hero h1{font-size:clamp(3.6rem,5.4vw,5.6rem)}
.hero-media{position:absolute;inset:var(--head) 0 0 0;height:auto;order:0}
.hero-media img{inset:0;left:0;top:0;width:100%;height:100%;transform:none;object-fit:cover;object-position:64% 50%}
.hero-media::after{background:linear-gradient(to right,rgba(26,19,21,.9) 0,rgba(26,19,21,.55) 36%,rgba(26,19,21,0) 58%)}
.hero .actions{margin-top:.6rem}
}
/* how it works */
.how{padding:clamp(3rem,7vw,6rem) 0 clamp(3rem,6vw,5rem)}
.ex{display:grid;gap:1rem}
.ex-copy{display:grid;gap:.9rem;margin-bottom:.25rem}
.ex-rail{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;scroll-margin-top:calc(var(--head) + 8px)}
.ex-rail [role=tab]{min-height:46px;padding:.5rem .7rem;background:transparent;border:1px solid rgba(35,26,29,.32);border-radius:3px;font-weight:700;color:rgba(35,26,29,.8);cursor:pointer;text-align:center;transition:background .25s,color .25s,border-color .25s}
.ex-rail [role=tab]:hover{border-color:var(--ink);color:var(--ink)}
.ex-rail [role=tab][aria-selected=true]{background:var(--ink);color:var(--chalk);border-color:var(--ink)}
.ex-stage{margin-inline:calc(-1*var(--gutter));display:grid;justify-items:center}
.ex-stage .scene{width:100%;max-width:560px;max-height:min(360px,72vh)}
.ex-panels{display:grid;gap:.75rem}
[role=tabpanel]{display:grid;gap:.75rem}
.result{font-size:1rem;line-height:1.5;color:rgba(35,26,29,.86);max-width:46ch}
.ctl{display:grid;gap:.4rem}
.ctl-label{font-weight:700}
.scale{display:flex;justify-content:space-between;font-size:.82rem;color:rgba(35,26,29,.64)}
output{display:block;font-weight:700}
.stage-bar{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem;min-height:44px}
.sn{font-size:.9rem;line-height:1.4;color:var(--garnet-3);max-width:40ch}
@media(min-width:480px){.ex-stage{margin-inline:0}}
@media(min-width:900px){
.ex{grid-template-columns:minmax(300px,5fr) 7fr;grid-template-areas:"copy stage" "rail stage" "panels stage";column-gap:clamp(2rem,5vw,5rem);row-gap:1.25rem;align-items:start}
.ex-copy{grid-area:copy}.ex-rail{grid-area:rail}.ex-panels{grid-area:panels}
.ex-stage{grid-area:stage;position:sticky;top:calc(var(--head) + 16px);justify-items:end}
.ex-stage .scene{max-width:min(100%,calc((100vh - var(--head) - 40px)*400/340));max-height:none}
.ex-rail{grid-template-columns:1fr;gap:0;border-top:1px solid var(--rule)}
.ex-rail [role=tab]{display:flex;align-items:center;justify-content:space-between;min-height:54px;padding:.5rem .2rem .5rem 0;border:0;border-bottom:1px solid var(--rule);border-radius:0;text-align:left;font-size:1.05rem;font-weight:400;color:rgba(35,26,29,.7)}
.ex-rail [role=tab]::after{content:"";width:10px;height:10px;border-radius:50%;border:1.5px solid currentColor;opacity:.5;flex:none}
.ex-rail [role=tab]:hover{color:var(--ink)}
.ex-rail [role=tab][aria-selected=true]{background:transparent;color:var(--ink);font-weight:700}
.ex-rail [role=tab][aria-selected=true]::after{background:var(--garnet);border-color:var(--garnet);opacity:1}
}
/* switch and range */
.switch{display:inline-flex;align-items:center;gap:.9rem;min-height:44px;background:none;border:0;padding:0;color:inherit;font-weight:700;cursor:pointer;text-align:left}
.switch .track{flex:none;width:50px;height:28px;border-radius:14px;border:1.5px solid rgba(35,26,29,.55);position:relative;transition:background .3s,border-color .3s}
.switch .track::after{content:"";position:absolute;top:3px;left:3px;width:19px;height:19px;border-radius:50%;background:var(--ink);transition:transform .35s var(--ease),background .3s}
.switch[aria-checked=true] .track{background:var(--garnet);border-color:var(--garnet)}
.switch[aria-checked=true] .track::after{transform:translateX(22px);background:var(--chalk)}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:44px;background:transparent;margin:0;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:2px;background:rgba(35,26,29,.3);border-radius:1px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:var(--garnet);border:2px solid var(--chalk);margin-top:-12px;box-shadow:0 0 0 1.5px var(--garnet)}
input[type=range]::-moz-range-track{height:2px;background:rgba(35,26,29,.3)}
input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--garnet);border:2px solid var(--chalk);box-shadow:0 0 0 1.5px var(--garnet)}
input[type=range]:focus-visible{outline:2px solid var(--garnet);outline-offset:4px}
/* scene */
.scene{display:block;height:auto;overflow:hidden;--fs:17px}
.scene text{font-family:var(--font);font-size:var(--fs);fill:var(--ink)}
.scene .lb{font-weight:700}
.scene .ls{fill:rgba(35,26,29,.76)}
.scene .d{display:none}
@media(min-width:360px){.scene{--fs:16px}}
@media(min-width:480px){.scene{--fs:13px}}
@media(min-width:600px){.scene{--fs:11px}}
@media(min-width:900px){.scene{--fs:12px}.scene .d{display:inline}}
@media(min-width:1100px){.scene{--fs:10.5px}}
.scene .glyph circle{fill:var(--chalk);stroke:var(--garnet);stroke-width:1.5;transition:fill .4s}
.scene .glyph text{font-size:12px;font-weight:700;fill:var(--garnet);text-anchor:middle;transition:fill .4s}
.scene .tray{fill:#FBF8F4;stroke:rgba(35,26,29,.38);stroke-width:1;transition:opacity .5s var(--ease)}
.scene .plate{fill:#DCD5CD;stroke:rgba(35,26,29,.42);stroke-width:1}
.scene .chip{fill:#3B3034}
.scene .chan{fill:none;stroke:url(#chan);stroke-width:3;stroke-linejoin:round}
.scene .ext-box{fill:rgba(35,26,29,.04);stroke:rgba(35,26,29,.5);stroke-width:1.2;stroke-dasharray:5 4}
.scene .cap{fill:#8E8781}
.scene .el1{fill:none;stroke:#5E5651;stroke-width:18;stroke-linejoin:round}
.scene .el2{fill:none;stroke:#C2BAB1;stroke-width:13;stroke-linejoin:round}
.scene .hose{fill:none;stroke:#2B2224;stroke-width:7}
.scene .hose-hi{fill:none;stroke:rgba(255,255,255,.22);stroke-width:1.5;stroke-linecap:round}
.scene .br{fill:none;stroke-width:5;stroke-linecap:round;transition:opacity .5s var(--ease)}
.scene .br.cool{stroke:var(--cool)}
.scene .br.warm{stroke:var(--warm)}
.scene .sh{fill:none;stroke:rgba(26,18,20,.3);stroke-width:9;transition:opacity .5s var(--ease)}
.scene .plug{fill:#3D3336;stroke:none;transition:opacity .4s,stroke .3s}
.scene .act{fill:#2B2225;stroke:rgba(0,0,0,.5);stroke-width:.8}
.scene .dial{fill:none;stroke:rgba(244,239,232,.4);stroke-width:1}
.scene .cable{fill:none;stroke:#2B2225;stroke-width:1.6}
.scene .nut{fill:#8A827B}
.scene .vbody{fill:url(#mtv);stroke:#3B3034;stroke-width:.8}
.scene #needle{stroke:#D9C2C5;stroke-width:1.4;stroke-linecap:round;transform-box:view-box;transform-origin:148px 287px;transform:rotate(var(--ndl,13.5deg));transition:transform .55s var(--ease)}
.scene #ball{transform-box:view-box;transform-origin:147px 308px;transform:rotate(var(--rot,31.5deg));transition:transform .55s var(--ease)}
.scene .arrow{stroke:var(--chalk);stroke-width:1.5;paint-order:stroke;stroke-linejoin:round;transition:opacity .4s}
.scene .arrow.cool{fill:var(--cool)}
.scene .arrow.warm{fill:var(--warm)}
.scene .lbl,.scene use{transition:opacity .4s}
.scene .ov{opacity:0;pointer-events:none;transition:opacity .35s}
.cam{transform-box:view-box;transform-origin:0 0;transition:transform .9s var(--ease)}
.how[data-view=flow] .ov[data-ov=flow],.how[data-view=sensing] .ov[data-ov=sensing],.how[data-view=connections] .ov[data-ov=connections],.how[data-view=valve] .ov[data-ov=valve]{opacity:1;transition-delay:.5s}
.how:not([data-view=flow]) .scene .lbl{opacity:0}
.how[data-view=sensing] .cam{transform:translate(-301.6px,-477.6px) scale(2.4)}
.how[data-view=connections] .cam{transform:translate(-148.6px,-121.2px) scale(1.4)}
.how[data-view=valve] .cam{transform:translate(-211.6px,-672.4px) scale(2.8)}
.how[data-view=sensing] .scene .glyph circle{fill:var(--garnet)}
.how[data-view=sensing] .scene .glyph text{fill:var(--chalk)}
.how[data-view=connections] .scene .up{opacity:.38}
.how[data-view=connections] .scene .plug{stroke:var(--garnet);stroke-width:1.5}
.how.closed .scene .arrow{opacity:0!important}
.scene .t4.br,.scene .t4.sh{stroke-dasharray:100;stroke-dashoffset:100;stroke-linecap:butt;transition:stroke-dashoffset .8s var(--ease)}
.scene .tray.t4{stroke-dasharray:4 4;opacity:.55}
.scene use.t4{opacity:.3}
.scene .arrow.t4{opacity:0}
.scene .c-on{opacity:0}
.t4on .scene .t4.br,.t4on .scene .t4.sh{stroke-dashoffset:0}
.t4on .scene .tray.t4{stroke-dasharray:none;opacity:1}
.t4on .scene use.t4{opacity:1;transition-delay:.3s}
.t4on .scene .arrow.t4{opacity:1;transition-delay:.6s}
.t4on .scene .plug{opacity:0}
.t4on .scene .c-on{opacity:1}
.t4on .scene .c-off{opacity:0}
/* rack */
.rack{background:var(--ink-2);color:var(--chalk);--focus:var(--chalk);padding:clamp(3rem,7vw,6rem) 0}
.rack .lead{color:rgba(244,239,232,.86)}
.rack-grid{display:grid;gap:1.25rem;grid-template-areas:"intro" "figure" "note"}
.rack-intro{grid-area:intro;display:grid;gap:.9rem}
.rack-figure{grid-area:figure;position:relative;margin:0 calc(-1*var(--gutter))}
.rack-frame{position:relative;overflow:hidden;background:var(--ink-2)}
.rack-frame img{display:block;width:100%;height:auto;transition:clip-path 1.2s var(--ease)}
.marks{position:absolute;inset:0;pointer-events:none}
.mark{pointer-events:auto;position:absolute;left:var(--x);top:var(--y);width:44px;height:44px;margin:-22px 0 0 -22px;background:none;border:0;padding:0;cursor:pointer;color:var(--chalk);border-radius:50%;transition:opacity .5s var(--ease),transform .5s var(--ease);transition-delay:calc(.6s + var(--i,0)*.08s)}
.mark .dot{position:absolute;left:50%;top:50%;width:12px;height:12px;margin:-6px;border-radius:50%;background:var(--chalk);box-shadow:0 0 0 2px rgba(26,19,21,.6);transition:transform .3s var(--ease),background .3s}
.mark::before{content:"";position:absolute;left:50%;top:50%;width:28px;height:28px;margin:-14px;border-radius:50%;border:1.5px solid rgba(244,239,232,.9);opacity:0;transform:scale(.6);transition:opacity .35s,transform .35s var(--ease)}
.mark[aria-pressed=true]::before{opacity:1;transform:scale(1)}
.mark[aria-pressed=true] .dot{background:var(--rose)}
.mark:hover .dot{transform:scale(1.25)}
.mark .lbl{position:absolute;left:calc(50% + 20px);top:50%;transform:translateY(-50%);white-space:nowrap;font-size:.82rem;font-weight:700;text-shadow:0 1px 3px rgba(0,0,0,.85);display:none}
.mark.flip .lbl{left:auto;right:calc(50% + 20px)}
.rack-note{grid-area:note;min-height:6.5rem}
.note{display:grid;gap:.35rem}
.note h3{font-size:1.05rem;color:var(--rose)}
.note p{color:rgba(244,239,232,.86);max-width:44ch}
.has-io .rack-figure[data-reveal]{opacity:1;transform:none;transition:none}
.has-io .rack-figure:not(.is-in) .rack-frame img{clip-path:inset(0 100% 0 0)}
.has-io .rack-figure:not(.is-in) .mark{opacity:0;transform:scale(.5)}
@media(min-width:900px){
.rack-grid{grid-template-columns:8fr 4fr;grid-template-rows:auto 1fr;grid-template-areas:"figure intro" "figure note";gap:1.5rem clamp(2rem,4vw,4rem)}
.rack-figure{margin:0 0 0 calc(-1*var(--gutter))}
.mark .lbl{display:block}
.rack-note{align-self:end;margin-bottom:1rem}
}
/* connections */
.connect{padding:clamp(3rem,7vw,6rem) 0 0}
.connect-grid{display:grid;gap:1.5rem}
.connect-figure{margin:0 calc(-1*var(--gutter));overflow:hidden;background:#210D11}
.connect-figure img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;object-position:52% center}
.connect-copy{display:grid;gap:1rem;align-content:center}
.connect-copy .lead{color:rgba(35,26,29,.84)}
@media(min-width:900px){
.connect-grid{grid-template-columns:7fr 5fr;align-items:center;column-gap:clamp(2.5rem,5vw,5rem)}
.connect-figure{margin:0 0 0 calc(-1*var(--gutter))}
.connect-figure img{aspect-ratio:5/4}
}
/* readings */
.why{padding:clamp(3.5rem,8vw,7rem) 0}
.why-grid{display:grid;gap:1.75rem}
.why-head{display:grid;gap:1rem}
.why-head .lead{color:rgba(35,26,29,.84)}
.why-list{display:grid}
.why-list>div{display:grid;gap:.35rem;padding:1.1rem 0;border-top:1px solid var(--ink)}
.why-list dt{font-weight:700}
.why-list dd{margin:0;color:rgba(35,26,29,.82);max-width:52ch}
.why-note{border-top:1px solid var(--ink);padding-top:1.1rem;color:rgba(35,26,29,.74);max-width:52ch;font-size:.98rem}
@media(min-width:900px){
.why-grid{grid-template-columns:5fr 7fr;column-gap:clamp(3rem,6vw,6rem)}
.why-head{grid-row:1/3}
.why-list>div{grid-template-columns:12rem 1fr;gap:1.5rem}
}
/* brief band */
.cta{background:var(--garnet);color:var(--chalk);--focus:var(--chalk);padding:clamp(4rem,9vw,7.5rem) 0}
.cta-grid{display:grid;gap:1.75rem}
.cta-copy{display:grid;gap:1.4rem;justify-items:start}
.cta-copy .lead{max-width:42ch;color:rgba(244,239,232,.94)}
@media(min-width:900px){.cta-grid{grid-template-columns:1fr 1fr;gap:4rem}}
/* footer */
.site-foot{background:var(--ink-2);color:var(--chalk);--focus:var(--chalk);padding:2.25rem 0 calc(2.25rem + env(safe-area-inset-bottom))}
.foot-grid{display:grid;gap:1.5rem;align-items:center}
.site-foot p{color:rgba(244,239,232,.74);font-size:.95rem;max-width:52ch}
.site-foot form button{min-height:44px;padding:0 1.1rem;background:transparent;border:1px solid rgba(244,239,232,.42);border-radius:3px;color:var(--chalk);font-weight:700;cursor:pointer;transition:border-color .25s}
.site-foot form button:hover{border-color:var(--chalk)}
@media(min-width:900px){.foot-grid{grid-template-columns:auto 1fr auto;gap:2.5rem}}
/* brief dialog */
.brief{--g2:clamp(1.25rem,4vw,2.5rem);border:0;padding:0;margin:auto;width:min(94vw,760px);max-height:min(92vh,92svh);background:var(--chalk);color:var(--ink);border-radius:5px;box-shadow:0 40px 80px -30px rgba(26,19,21,.7);overflow:hidden}
.brief::backdrop{background:rgba(26,19,21,.76)}
.brief[open]{animation:dlgIn .4s var(--ease)}
.brief.fallback[open]{position:fixed;top:4vh;left:50%;transform:translateX(-50%);z-index:100}
@keyframes dlgIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.brief-inner{display:grid;grid-template-rows:auto minmax(0,1fr) auto;max-height:min(92vh,92svh)}
.brief-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;padding:1.4rem var(--g2) 1rem;border-bottom:1px solid var(--rule)}
.brief-head h2{font-size:clamp(1.5rem,3vw,2rem);letter-spacing:-.03em}
.brief-sub{margin-top:.35rem;color:var(--garnet);font-weight:700;font-size:.95rem}
.brief-close{min-width:44px;min-height:44px;background:transparent;border:1px solid var(--ink);border-radius:3px;font-weight:700;cursor:pointer;padding:0 .9rem}
.brief-body{overflow:auto;padding:.5rem var(--g2) 1.5rem}
.brief-body h3{font-size:1.02rem;margin:1.4rem 0 .4rem;color:var(--garnet)}
.brief-body p{color:rgba(35,26,29,.88);max-width:62ch}
.brief-foot{display:flex;flex-wrap:wrap;gap:.75rem;padding:1rem var(--g2) 1.25rem;border-top:1px solid var(--rule);background:var(--chalk-2)}
/* reveals and motion */
.has-io [data-reveal]{opacity:0;transform:translateY(20px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0s)}
.has-io [data-reveal].is-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*::before,*::after{animation-duration:.001s!important;animation-delay:0s!important;transition-duration:.001s!important;transition-delay:0s!important}
.sweep{display:none}
.hero h1 .line span{transform:none!important}
.has-io [data-reveal]{opacity:1;transform:none}
.has-io .rack-figure:not(.is-in) .rack-frame img{clip-path:none}
.has-io .rack-figure:not(.is-in) .mark{opacity:1;transform:none}
}
/* V8 fix block, appended after all existing rules */
/* 1. Hero on phones and tablets: fill the frame (global img max-width capped the 190% crop) and tighten the stack */
.hero{padding-top:calc(var(--head) + 22px)}
.hero-copy{gap:12px;padding-bottom:12px}
.hero-media{height:clamp(220px,62vw,280px)}
.hero-media img{max-width:none;transform:translate(-59%,-35%)}
.hero-media::after{background:linear-gradient(to bottom,var(--ink-2) 0,rgba(26,19,21,0) 14%,rgba(26,19,21,0) 84%,var(--ink-2) 100%)}
@media(min-width:700px){
.hero{padding-top:calc(var(--head) + 36px)}
.hero-copy{gap:16px;padding-bottom:20px}
.hero-media{height:clamp(300px,42vw,420px)}
}
/* 1. Hero on desktop: copy occupies the left dark region of the content grid, hardware stays prominent on the right */
@media(min-width:1000px){
.hero{display:grid;grid-template-columns:minmax(0,1fr);align-items:center;min-height:min(100vh,900px);min-height:min(100svh,900px);padding:0}
.hero-copy{grid-area:auto;width:100%;max-width:var(--max);margin-inline:auto;grid-template-columns:minmax(0,clamp(440px,46%,640px));justify-items:start;gap:clamp(.9rem,2vh,1.4rem);padding:calc(var(--head) + clamp(2.5rem,7vh,5.5rem)) var(--gutter) clamp(2.5rem,6vh,4.5rem)}
.hero h1{font-size:clamp(2.9rem,min(4.7vw,10.5vh),5.2rem)}
.hero .lead{max-width:38ch;font-size:clamp(1.05rem,1.3vw,1.18rem)}
.hero .actions{margin-top:.4rem}
.hero-media{position:absolute;inset:var(--head) 0 0 0;height:auto;order:0}
.hero-media img{position:absolute;inset:0;left:0;top:0;width:100%;height:100%;max-width:none;transform:none;object-fit:cover;object-position:66% 15%}
.hero-media::after{background:linear-gradient(to right,rgba(26,19,21,.94) 0,rgba(26,19,21,.82) 30%,rgba(26,19,21,.45) 48%,rgba(26,19,21,0) 63%)}
}
/* 2. Interactive section on phones and tablets: compact spacing and a scene cap that leaves room for the control beneath it */
@media(max-width:899px){
.ex{gap:.65rem}
.ex-copy{margin-bottom:.1rem}
.ex-stage .scene{max-height:clamp(220px,calc(100vh - 300px),360px);max-height:clamp(220px,calc(100svh - 300px),360px)}
[role=tabpanel]{gap:.5rem}
.ctl{gap:.3rem}
.result{line-height:1.45}
}
@media(max-width:599px){
.ex-rail [role=tab]{padding:.45rem .45rem;font-size:.95rem;line-height:1.15}
}
/* 2. Short landscape phones: controls beside the scene so the slider and the valve share one screen */
@media(min-width:480px) and (max-width:899px) and (max-height:520px){
.ex{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"copy copy" "rail stage" "panels stage";column-gap:1.25rem;row-gap:.65rem;align-items:start}
.ex-copy{grid-area:copy}
.ex-rail{grid-area:rail}
.ex-panels{grid-area:panels}
.ex-stage{grid-area:stage;margin-inline:0;justify-items:start}
.ex-stage .scene{max-height:calc(100vh - var(--head) - 24px);max-height:calc(100svh - var(--head) - 24px)}
}