/* ==================================================================
   HYPERDESK
   ================================================================= */

:root{
  --ink:#06070a;
  --bg:#0a0c11;
  --bg-2:#0e1116;
  --panel:#12151c;
  --line:rgba(255,255,255,.085);
  --line-2:rgba(255,255,255,.16);
  --text:#e9edf4;
  --muted:#8992a4;
  --dim:#5d6577;
  --accent:#00E5FF;

  --f-disp:"Chakra Petch",system-ui,sans-serif;
  --f-body:"Inter",system-ui,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,monospace;

  --pad:clamp(1.25rem,4vw,4rem);
  --maxw:1440px;
  --ease:cubic-bezier(.66,0,.16,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--text);
  font:400 16px/1.65 var(--f-body);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;font-family:var(--f-disp);font-weight:700;letter-spacing:.02em;line-height:1.05}
p{margin:0}
ul,ol,dl{margin:0;padding:0;list-style:none}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-999px;top:0;z-index:99;background:var(--accent);color:#000;
  padding:.7rem 1.1rem;font:600 13px var(--f-mono)}
.skip:focus{left:.5rem;top:.5rem}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

/* ================= HEADER ================= */
.site-head{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;gap:clamp(1rem,4vw,3rem);
  padding:.85rem var(--pad);
  background:color-mix(in srgb,var(--ink) 82%,transparent);
  backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--line);
}
.logo{display:flex;align-items:center;gap:.65rem;font:700 17px/1 var(--f-disp);
  letter-spacing:.14em;text-transform:uppercase}
.logo svg{width:26px;height:20px;fill:none;stroke:var(--accent);stroke-width:2.4;
  stroke-linecap:round;transition:stroke .5s var(--ease)}
.logo b{font-weight:500;color:var(--muted)}
.nav{display:flex;gap:clamp(.9rem,2.2vw,2rem);margin-left:auto;
  font:500 12px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase}
.nav a{color:var(--dim);padding:.5rem 0;position:relative;transition:color .3s}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--accent);transition:right .4s var(--ease)}
.nav a:hover{color:var(--text)}
.nav a.is-current{color:var(--text)}
.nav a.is-current::after{right:0}
.btn-ghost{
  font:600 12px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;
  padding:.72rem 1.1rem;border:1px solid var(--line-2);color:var(--text);
  clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);
  transition:background .3s,border-color .3s,color .3s;
}
.btn-ghost:hover{background:var(--accent);border-color:var(--accent);color:#04070a}
@media(max-width:860px){.nav{display:none}}

/* ================= STAGE ================= */
.stage{
  position:relative;isolation:isolate;
  padding:clamp(2rem,5vh,4rem) var(--pad) clamp(2rem,5vh,3.5rem);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:calc(100svh - 58px);
  overflow:hidden;
}
.stage-bg{position:absolute;inset:0;z-index:-1;overflow:hidden;
  background:
    radial-gradient(120% 80% at 50% 0%,#12161d 0%,transparent 60%),
    radial-gradient(90% 70% at 50% 100%,#0b0e13 0%,var(--ink) 70%);
}
.facet{position:absolute;background:linear-gradient(140deg,#161a22,#0a0c11);opacity:.85}
.f1{inset:-10% auto auto -8%;width:46%;height:78%;
  clip-path:polygon(0 0,100% 22%,58% 100%,0 72%)}
.f2{inset:-6% -10% auto auto;width:44%;height:70%;
  clip-path:polygon(24% 0,100% 0,100% 84%,0 46%)}
.f3{inset:auto auto -18% -12%;width:52%;height:60%;
  clip-path:polygon(0 26%,72% 0,100% 76%,18% 100%);opacity:.6}
.f4{inset:auto -14% -22% auto;width:50%;height:62%;
  clip-path:polygon(10% 0,100% 30%,84% 100%,0 68%);opacity:.6}
.halo{position:absolute;left:50%;top:46%;width:min(1100px,120%);aspect-ratio:2/1;
  transform:translate(-50%,-50%);
  background:radial-gradient(ellipse at center,
    color-mix(in srgb,var(--accent) 16%,transparent) 0%,transparent 62%);
  transition:background .6s var(--ease)}
.grid-floor{position:absolute;left:-20%;right:-20%;bottom:0;height:46%;
  background-image:
    repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 84px),
    repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 54px);
  mask-image:linear-gradient(to top,#000 0%,transparent 82%);
  transform:perspective(600px) rotateX(64deg);transform-origin:bottom;opacity:.55}

.stage-head{text-align:center;max-width:46rem}
.eyebrow{display:flex;align-items:center;justify-content:center;gap:.75rem;
  font:500 11px/1 var(--f-mono);letter-spacing:.28em;text-transform:uppercase;color:var(--dim)}
.eyebrow i{font-style:normal;color:var(--accent);border:1px solid
  color-mix(in srgb,var(--accent) 40%,transparent);padding:.32rem .55rem;
  transition:color .5s var(--ease),border-color .5s var(--ease)}
.eyebrow i:empty{display:none}
.model-name{
  margin:.6rem 0 .45rem;
  font-size:clamp(2.4rem,7.4vw,5rem);letter-spacing:.06em;text-transform:uppercase;
  background:linear-gradient(180deg,#fff 30%,#a9b2c2 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.model-tag{color:var(--muted);font-size:clamp(.95rem,1.5vw,1.08rem)}

/* --- three-column configurator: features · desk · live specs --- */
.stage-main{
  position:relative;width:100%;max-width:var(--maxw);
  margin:clamp(.4rem,1.6vh,1.1rem) 0 0;
  display:grid;align-items:center;
  grid-template-columns:minmax(0,.95fr) minmax(0,2.4fr) minmax(0,1fr);
  gap:clamp(.9rem,1.7vw,2rem);
  padding-inline:clamp(3.2rem,5vw,4.6rem);
}
.col{display:flex;flex-direction:column;gap:clamp(1rem,2.4vh,1.8rem);min-width:0}

.rail-wrap{position:relative;min-width:0}
.ghost-word{
  position:absolute;left:0;right:0;top:30%;
  margin:0;font:700 clamp(3.5rem,11vw,9.5rem)/1 var(--f-disp);letter-spacing:.02em;
  text-transform:uppercase;text-align:center;white-space:nowrap;
  pointer-events:none;user-select:none;z-index:0;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.08);
}
.rail-clip{overflow:hidden;position:relative;z-index:1}
.rail{display:flex;will-change:transform;transition:transform .68s var(--ease)}
.slide{flex:0 0 100%;display:flex;justify-content:center;min-width:0}
.slide-in{width:100%;display:flex;justify-content:center;
  opacity:.13;transform:scale(.8);
  transition:opacity .68s var(--ease),transform .68s var(--ease)}
.slide.is-active .slide-in{opacity:1;transform:none}
.slide svg.desk{width:100%;height:auto}

.slide:not(.is-active) .rgbglow,
.slide:not(.is-active) .beams,
.slide:not(.is-active) .pool{filter:none}
.rgbglow{filter:blur(6px);opacity:.9}
.beams{filter:blur(13px)}
.pool{filter:blur(22px)}

/* --- arrows --- */
.arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:4;
  width:clamp(42px,3.4vw,56px);aspect-ratio:1;display:grid;place-items:center;
  border:1px solid var(--line-2);color:var(--muted);
  background:color-mix(in srgb,var(--ink) 55%,transparent);
  backdrop-filter:blur(6px);
  clip-path:polygon(11px 0,100% 0,100% calc(100% - 11px),calc(100% - 11px) 100%,0 100%,0 11px);
  transition:color .3s,border-color .3s,background .3s,transform .3s var(--ease);
}
.arrow svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.arrow:hover{color:#04070a;background:var(--accent);border-color:var(--accent)}
.prev{left:0}.next{right:0}
.prev:hover{transform:translateY(-50%) translateX(-4px)}
.next:hover{transform:translateY(-50%) translateX(4px)}

/* --- feature list (left column) --- */
.feat{display:flex;flex-direction:column;gap:.6rem}
.feat li{position:relative;padding-left:1.25rem;
  font:500 12.5px/1.5 var(--f-mono);letter-spacing:.01em;color:var(--muted)}
.feat li::before{content:"+";position:absolute;left:0;top:0;color:var(--accent);font-weight:700}

/* --- swatches --- */
.swatches{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem}
.sw{width:25px;height:25px;border:1px solid var(--line-2);background:var(--sw);
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);
  transition:transform .25s var(--ease),box-shadow .25s}
.sw:hover{transform:translateY(-3px)}
.sw.on{box-shadow:0 0 0 2px var(--bg),0 0 0 3px var(--accent)}
.sw-name{flex:1 0 100%;font:500 10px/1 var(--f-mono);letter-spacing:.18em;
  text-transform:uppercase;color:var(--dim);margin-top:.15rem}

/* --- live spec stack (right column) --- */
.stat-rail{display:flex;flex-direction:column;gap:1px;
  background:var(--line);border:1px solid var(--line)}
.stat{background:color-mix(in srgb,var(--panel) 62%,transparent);
  padding:.66rem .9rem;display:flex;align-items:baseline;justify-content:space-between;gap:.7rem}
.stat dt{font:500 9.5px/1.4 var(--f-mono);letter-spacing:.19em;text-transform:uppercase;color:var(--dim)}
.stat dd{margin:0;text-align:right;min-width:0}
.stat b{font:600 clamp(.9rem,1.05vw,1.05rem)/1.2 var(--f-disp);letter-spacing:.03em;white-space:nowrap}
.stat.hi b{color:var(--accent);transition:color .5s var(--ease)}

/* --- height control --- */
.height-ctl>label{display:block;font:500 9.5px/1 var(--f-mono);letter-spacing:.22em;
  text-transform:uppercase;color:var(--dim)}
.height-row{display:flex;align-items:center;gap:.7rem;margin-top:.15rem}
.hlim{font:500 10px/1 var(--f-mono);color:var(--dim);min-width:2.1em}
.hlim:last-of-type{text-align:right}

input[type=range]{-webkit-appearance:none;appearance:none;flex:1;height:24px;
  background:none;cursor:grab;min-width:0}
input[type=range]:active{cursor:grabbing}
input[type=range]{--p:0%}
input[type=range]::-webkit-slider-runnable-track{height:2px;
  background:linear-gradient(90deg,var(--accent) 0 var(--p),rgba(255,255,255,.16) var(--p) 100%)}
input[type=range]::-moz-range-track{height:2px;background:rgba(255,255,255,.16)}
input[type=range]::-moz-range-progress{height:2px;background:var(--accent)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:21px;
  margin-top:-9.5px;background:var(--accent);
  clip-path:polygon(50% 0,100% 22%,100% 78%,50% 100%,0 78%,0 22%);
  box-shadow:0 0 14px color-mix(in srgb,var(--accent) 70%,transparent)}
input[type=range]::-moz-range-thumb{width:13px;height:21px;border:0;background:var(--accent);
  clip-path:polygon(50% 0,100% 22%,100% 78%,50% 100%,0 78%,0 22%)}
.hval{display:block;margin:.15rem 0 .1rem;font:700 clamp(1.7rem,2.6vw,2.15rem)/1 var(--f-disp);
  color:var(--accent);letter-spacing:.03em;transition:color .5s var(--ease)}
.hval i{font:500 .42em/1 var(--f-mono);font-style:normal;color:var(--muted);
  margin-left:.3em;letter-spacing:.1em}
.hnote{margin-top:.5rem;font-size:11.5px;line-height:1.45;color:var(--dim)}

@media(max-width:1080px){
  .stage-main{grid-template-columns:1fr;padding-inline:clamp(3.2rem,8vw,4rem)}
  .rail-wrap{order:-1}
  .col-l{order:2}
  .col-r{order:1}
  .feat{flex-flow:row wrap;justify-content:center;gap:.5rem 1.1rem}
  .swatches{justify-content:center}
  .sw-name{flex:0 0 auto;margin:0 0 0 .3rem}
  .stat-rail{flex-flow:row wrap}
  .stat{flex:1 1 140px;flex-direction:column;align-items:flex-start;gap:.3rem}
  .stat dd{text-align:left}
  .height-ctl{max-width:420px;margin-inline:auto;text-align:center}
  .ghost-word{top:22%}
  /* keep the arrows on the drawing, not on the spec panel below it */
  .rail-wrap{grid-row:1;grid-column:1}
  .arrow{position:static;grid-row:1;grid-column:1;align-self:center;transform:none}
  .prev{justify-self:start}
  .next{justify-self:end}
  .prev:hover{transform:translateX(-3px)}
  .next:hover{transform:translateX(3px)}
}
@media(max-width:760px){
  /* arrows overlay the drawing instead of stealing width from it */
  .stage-main{padding-inline:0}
  .arrow{background:color-mix(in srgb,var(--ink) 72%,transparent)}
  .prev{left:-.35rem}.next{right:-.35rem}
  .ghost-word{font-size:clamp(3rem,17vw,6rem);top:16%}
  .slide svg.desk{max-width:none;width:118%;margin-inline:-9%}
}
@media(max-width:560px){
  .stat{flex-basis:calc(50% - 1px)}
  .arrow{width:38px}
  .arrow svg{width:17px;height:17px}
  .site-head{gap:.7rem;padding-inline:1rem}
  .logo{font-size:14.5px;letter-spacing:.1em}
  .logo svg{width:21px;height:16px}
  .btn-ghost{margin-left:auto;padding:.6rem .75rem;font-size:10.5px;letter-spacing:.12em}
  .model-name{font-size:clamp(2.1rem,10vw,3rem)}
  .stage{padding-inline:1rem}
  .section{padding-inline:1rem}
  .spec-table th{width:44%;padding:.85rem 1rem;font-size:10px}
  .spec-table td{padding:.85rem 1rem;font-size:.9rem}
}

/* --- dots --- */
.stage-foot{display:flex;align-items:center;gap:1.4rem;margin-top:clamp(1.2rem,3vh,2rem)}
.dots{display:flex;gap:.5rem}
.dots button{width:30px;height:3px;background:var(--line-2);transition:background .35s,width .35s var(--ease)}
.dots button:hover{background:var(--muted)}
.dots button.on{background:var(--accent);width:46px}
.counter{font:500 11px/1 var(--f-mono);letter-spacing:.2em;color:var(--dim)}
.counter b{color:var(--text)}
.counter span{margin:0 .35rem}

/* text swap animation */
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.stage.swap .model-name,
.stage.swap .model-tag,
.stage.swap .eyebrow{animation:rise .55s var(--ease) both}
.stage.swap .model-tag{animation-delay:.06s}
.stage.swap .feat li{animation:rise .5s var(--ease) both;animation-delay:calc(.04s * var(--i))}
.stage.swap .stat{animation:rise .5s var(--ease) both;animation-delay:calc(.04s * var(--i) + .08s)}
.stage.swap .ghost-word{animation:fadein .8s var(--ease) both}
@keyframes fadein{from{opacity:0}to{opacity:1}}

/* ================= SECTIONS ================= */
.section{padding:clamp(4rem,10vh,8rem) var(--pad);max-width:var(--maxw);margin-inline:auto}
.sec-head{max-width:44rem;margin-bottom:clamp(2rem,5vh,3.5rem)}
.kicker{font:500 11px/1 var(--f-mono);letter-spacing:.26em;text-transform:uppercase;
  color:var(--accent);margin-bottom:1rem;transition:color .5s var(--ease)}
.sec-head h2{font-size:clamp(1.9rem,4.4vw,3.2rem);text-transform:uppercase;letter-spacing:.03em}
.sec-head h2 span{color:var(--accent);transition:color .5s var(--ease)}
.lede{margin-top:1.1rem;color:var(--muted);font-size:clamp(1rem,1.5vw,1.1rem);max-width:38rem}
.lede b{color:var(--text);font-weight:600}

.rev{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rev.in{opacity:1;transform:none}

/* --- dimensions --- */
.dims{border-top:1px solid var(--line)}
.bp-grid{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))}
.bp-card{margin:0;padding:.6rem;border:1px solid var(--line);
  background:
    linear-gradient(#0d1015,#0d1015) padding-box,
    repeating-linear-gradient(0deg,rgba(255,255,255,.028) 0 1px,transparent 1px 24px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.028) 0 1px,transparent 1px 24px);
  background-color:#0d1015;
}
.bp{width:100%;height:auto}
.bp .part{fill:none;stroke:var(--accent);stroke-width:1.5;stroke-linejoin:round}
.bp .solid{fill:color-mix(in srgb,var(--accent) 10%,transparent)}
.bp .inner{fill:none;stroke:color-mix(in srgb,var(--accent) 32%,transparent);
  stroke-width:1;stroke-dasharray:3 4}
.bp .ghost{fill:none;stroke:color-mix(in srgb,var(--accent) 36%,transparent);
  stroke-width:1.2;stroke-dasharray:7 5}
.bp .ground{stroke:rgba(255,255,255,.36);stroke-width:1.4}
.bp .hatch{stroke:rgba(255,255,255,.16);stroke-width:1}
.bp .grid line{stroke:rgba(255,255,255,.05);stroke-width:1}
.bp .centre{stroke:rgba(255,255,255,.22);stroke-width:1;stroke-dasharray:10 4 2 4}
.bp .ext{stroke:rgba(255,255,255,.28);stroke-width:1;stroke-dasharray:3 3}
.bp .dl{stroke:rgba(255,255,255,.55);stroke-width:1;fill:none}
.bp .ah{fill:rgba(255,255,255,.68)}
.bp .dt{fill:#dbe2ec;font:500 14px var(--f-mono);letter-spacing:.04em}
.bp .accentdim .dl{stroke:var(--accent)}
.bp .accentdim .ah{fill:var(--accent)}
.bp .accentdim .dt{fill:var(--accent)}
.bp .bp-tag{fill:var(--dim);font:500 12px var(--f-mono);letter-spacing:.2em}

.dim-facts{display:grid;gap:1px;margin-top:1.25rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));
  background:var(--line);border:1px solid var(--line)}
.dim-facts>div{background:var(--bg);padding:1.1rem 1.2rem}
.dim-facts dt{font:500 10px/1 var(--f-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.dim-facts dd{margin:.6rem 0 0;font:600 1.15rem/1.1 var(--f-disp);letter-spacing:.02em}

/* --- specs --- */
.specs{border-top:1px solid var(--line)}
.spec-wrap{border:1px solid var(--line);background:#0c0f14}
.spec-table{width:100%;border-collapse:collapse}
.spec-table tr{border-bottom:1px solid var(--line);transition:background .25s}
.spec-table tr:last-child{border-bottom:0}
.spec-table tr:hover{background:rgba(255,255,255,.025)}
.spec-table th{
  text-align:left;font:500 11px/1.4 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--dim);padding:1.05rem clamp(1rem,3vw,2rem);width:min(42%,320px);vertical-align:top}
.spec-table td{padding:1.05rem clamp(1rem,3vw,2rem);font-size:.98rem}
.spec-table tr:nth-child(-n+3) td{color:var(--accent);font-weight:600;transition:color .5s var(--ease)}

/* --- why --- */
.why{border-top:1px solid var(--line)}
.why-grid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.why-grid li{background:var(--bg);padding:clamp(1.6rem,3vw,2.4rem)}
.why-grid svg{width:44px;height:44px;fill:none;stroke:var(--accent);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;margin-bottom:1.4rem;
  filter:drop-shadow(0 0 10px color-mix(in srgb,var(--accent) 55%,transparent));
  transition:stroke .5s var(--ease)}
.why-grid h3{font-size:1.05rem;text-transform:uppercase;letter-spacing:.16em;margin-bottom:.7rem}
.why-grid p{color:var(--muted);font-size:.94rem}

/* --- range --- */
.range{border-top:1px solid var(--line)}
.range-grid{display:grid;gap:1.1rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.range-card{
  position:relative;display:block;width:100%;text-align:left;
  border:1px solid var(--line);background:#0c0f14;overflow:hidden;
  transition:border-color .35s,background .35s,transform .35s var(--ease)}
.range-card:hover{border-color:color-mix(in srgb,var(--accent) 55%,transparent);
  background:#0f131a;transform:translateY(-4px)}
.range-card.is-active{border-color:color-mix(in srgb,var(--accent) 70%,transparent);background:#0f131a}
.range-card.is-active::after{content:"Showing now";position:absolute;top:.9rem;left:1rem;
  font:600 9px/1 var(--f-mono);letter-spacing:.2em;text-transform:uppercase;color:#04070a;
  background:var(--accent);padding:.4rem .55rem}
.rc-art{display:block;background:radial-gradient(70% 60% at 50% 55%,
  color-mix(in srgb,var(--accent) 13%,transparent),transparent 70%)}
.rc-art svg{width:100%;height:190px}
.rc-art .beams,.rc-art .rgbglow{display:none}
.rc-meta{display:block;padding:1.2rem 1.3rem 1.35rem;border-top:1px solid var(--line)}
.rc-meta b{display:block;font:700 1.2rem/1 var(--f-disp);letter-spacing:.08em;text-transform:uppercase}
.rc-meta em{display:block;margin-top:.4rem;font:500 10px/1 var(--f-mono);letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent);font-style:normal}
.rc-dims{display:block;margin-top:.85rem;font:400 12.5px/1 var(--f-mono);color:var(--muted)}
.rc-go{position:absolute;right:1.3rem;bottom:1.35rem;display:flex;align-items:center;gap:.45rem;
  font:600 10px/1 var(--f-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--dim);
  transition:color .3s}
.rc-go svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease)}
.range-card:hover .rc-go{color:var(--accent)}
.range-card:hover .rc-go svg{transform:translateX(4px)}

/* ================= FOOTER ================= */
.site-foot{
  border-top:1px solid var(--line);padding:clamp(2.5rem,6vh,4rem) var(--pad);
  display:flex;flex-wrap:wrap;gap:2rem;align-items:flex-start;
  background:var(--ink)}
.foot-brand .logo-mark{font:700 20px/1 var(--f-disp);letter-spacing:.18em;text-transform:uppercase}
.foot-brand .logo-mark b{font-weight:500;color:var(--muted)}
.foot-brand p{margin-top:.7rem;color:var(--dim);font-size:.9rem}
.site-foot nav{display:flex;flex-wrap:wrap;gap:1.4rem;margin-left:auto;
  font:500 11px/1 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
.site-foot nav a:hover{color:var(--accent)}
.fine{flex:1 0 100%;color:#464d5c;font-size:11.5px;font-family:var(--f-mono);letter-spacing:.06em}

/* ================= MOTION ================= */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
  .rev{opacity:1;transform:none}
}

/* capture mode (?static): fixed hero height for full-page renders */
.capture .stage{min-height:840px}