:root{
  --paper:#F4F5F6;
  --ink:#12141A;
  --steel:#8B9099;
  --coral:#FF6B6B;
  --mid:rgba(18,20,26,.55);
  --line:rgba(18,20,26,.14);
  --nav:62px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{overflow-x:clip;scroll-behavior:auto;color-scheme:light}
body{background:var(--paper);color:var(--ink);overflow-x:clip;
  font:400 14px/1.6 'Roboto Mono',monospace;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:var(--ink)}
.wrap{max-width:1360px;margin:0 auto;padding:0 clamp(14px,2.8vw,40px)}
.mi{font:400 9px/1.5 'Roboto Mono',monospace;letter-spacing:.2em;text-transform:uppercase;color:var(--mid)}

/* progress */
#prog{position:fixed;left:0;top:0;height:2px;width:100%;background:var(--ink);
  transform:scaleX(0);transform-origin:left;z-index:80;will-change:transform;pointer-events:none}

/* nav */
nav{position:fixed;inset:0 0 auto;height:var(--nav);z-index:80;display:flex;align-items:center;
  justify-content:space-between;gap:14px;padding:0 clamp(14px,2.8vw,40px);
  background:rgba(244,245,246,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
nav .mk{display:flex;align-items:center;position:relative;z-index:81;line-height:0}
nav .mk img{display:block;height:22px;width:auto}
nav ul{display:flex;gap:clamp(12px,1.8vw,26px);list-style:none}
nav ul a{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--mid);transition:color .25s}
nav ul a:hover,nav ul a.active{color:var(--ink)}
nav .live{display:flex;align-items:center;gap:7px;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase}
nav .live i{width:7px;height:7px;border-radius:50%;background:#E5484D;animation:pulse 1.8s ease-in-out infinite}
nav .live b{font-weight:400;color:var(--mid)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.32}}
nav .burger{
  display:none;width:44px;height:44px;flex:0 0 auto;
  background:transparent;border:0;cursor:pointer;padding:0;
  position:relative;z-index:80;overflow:visible
}
nav .burger span{
  position:absolute;left:50%;top:50%;width:22px;height:1.5px;
  margin-left:-11px;background:var(--ink);display:block;
  transition:transform .28s ease,opacity .28s ease
}
nav .burger span:nth-child(1){transform:translateY(-7px)}
nav .burger span:nth-child(2){transform:translateY(0)}
nav .burger span:nth-child(3){transform:translateY(7px)}
nav.is-open .burger span:nth-child(1){transform:rotate(45deg)}
nav.is-open .burger span:nth-child(2){opacity:0}
nav.is-open .burger span:nth-child(3){transform:rotate(-45deg)}
@media(max-width:900px){
  nav{overflow:visible;background:var(--paper)}
  nav.is-open{border-bottom-color:var(--line)}
  nav .live{display:none}
  nav .burger{display:block}
  nav .nav-backdrop{
    display:block;position:fixed;inset:0;z-index:78;
    background:var(--paper);opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .28s ease,visibility .28s
  }
  nav ul{
    display:flex;flex-direction:column;gap:0;
    position:fixed;inset:0;z-index:79;
    width:100%;height:100dvh;min-height:100vh;
    background:var(--paper);
    padding:calc(var(--nav) + 12px) clamp(20px,5vw,40px) 40px;
    border-top:0;margin:0;box-sizing:border-box;
    transform:none;opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .28s ease,visibility .28s;
    overflow-y:auto;-webkit-overflow-scrolling:touch
  }
  nav ul li{border-bottom:1px solid var(--line);list-style:none}
  nav ul a{display:block;padding:20px 0;font-size:15px;letter-spacing:.18em;color:var(--ink)}
  nav.is-open .nav-backdrop{opacity:1;visibility:visible;pointer-events:auto}
  nav.is-open ul{opacity:1;visibility:visible;pointer-events:auto}
  body.nav-lock{overflow:hidden;touch-action:none}
}
@media(min-width:901px){
  nav .nav-backdrop{display:none!important}
}


/* hero */
#hero{position:relative;min-height:100svh;padding-top:var(--nav);overflow:hidden;
  display:grid;grid-template-columns:1.05fr .95fr;align-items:end}
#hero .copy{padding:0 0 clamp(30px,6vh,74px) clamp(14px,2.8vw,40px);position:relative;z-index:4}
#hero .brand{margin-bottom:clamp(16px,3vh,34px)}
#hero .brand img{display:block;height:clamp(28px,3.2vw,36px);width:auto}
#hero h1{font-family:'Chakra Petch',sans-serif;font-weight:700;
  font-size:clamp(32px,5.2vw,72px);line-height:.96;letter-spacing:-.02em;text-transform:uppercase;
  max-width:14ch}
#hero .lede{margin-top:18px;max-width:42ch;font-size:13px;color:var(--mid);line-height:1.65}
#hero .jp{position:absolute;right:clamp(14px,2.8vw,40px);top:calc(var(--nav) + 4vh);z-index:5;
  writing-mode:vertical-rl;font-family:'Chakra Petch',sans-serif;font-weight:600;font-size:14px;
  letter-spacing:.28em;color:var(--mid);text-transform:uppercase}
#hero .fig{position:absolute;right:-2%;bottom:clamp(0px,2vh,24px);z-index:2;
  width:min(58vw,720px);height:auto;max-height:min(88vh,820px);
  filter:drop-shadow(-18px 28px 50px rgba(18,20,26,.18));pointer-events:none}
#hero .fig img{width:100%;height:auto;max-height:min(88vh,820px);object-fit:contain;
  object-position:right bottom;display:block}
@media(max-width:920px){
  #hero{grid-template-columns:1fr}
  #hero .fig{position:relative;right:auto;bottom:auto;width:min(92vw,520px);margin:12px auto 0;
    max-height:48vh;opacity:.95;order:-1}
  #hero .copy{padding-right:clamp(14px,2.8vw,40px)}
  #hero .jp{display:none}
  #hero h1{max-width:none}
}

/* CTA bar (player analogue) */
.cta-bar{position:relative;z-index:6;margin-top:clamp(22px,3.6vh,36px);
  background:var(--ink);color:var(--paper);display:flex;flex-wrap:wrap;gap:10px;
  align-items:center;padding:clamp(12px,1.8vw,16px);max-width:min(620px,94vw)}
.cta-bar a,.cta-bar button{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:'Chakra Petch',sans-serif;font-weight:700;font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;border:0;cursor:pointer;padding:14px 20px;transition:transform .3s,background .3s,color .3s}
.cta-bar .primary{background:var(--paper);color:var(--ink)}
.cta-bar .primary:hover{transform:translateY(-2px);background:var(--coral);color:var(--ink)}
.cta-bar .ghost{background:transparent;color:var(--paper);border:1px solid rgba(244,245,246,.28)}
.cta-bar .ghost:hover{border-color:var(--coral);color:var(--coral)}
.cta-bar .pulse{flex:1;min-width:120px;height:34px}
.cta-bar .pulse canvas{width:100%;height:34px;display:block}

/* page hero (inner pages) */
.page-hero{padding:calc(var(--nav) + clamp(40px,8vh,90px)) 0 clamp(34px,6vh,70px);
  border-bottom:1px solid var(--line)}
.page-hero h1{font-family:'Chakra Petch',sans-serif;font-weight:700;
  font-size:clamp(34px,5.6vw,72px);line-height:.96;letter-spacing:-.02em;text-transform:uppercase;
  max-width:16ch;margin-bottom:clamp(18px,2.4vh,28px);padding-bottom:4px}
.page-hero p{max-width:48ch;color:var(--mid);font-size:13.5px;margin-top:4px;line-height:1.65;
  position:relative;z-index:1}
.page-hero.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(20px,4vw,48px);
  align-items:end;padding-left:clamp(14px,2.8vw,40px);padding-right:clamp(14px,2.8vw,40px);
  max-width:1360px;margin:0 auto;border-bottom:1px solid var(--line)}
.page-hero.split .copy{padding:0 0 clamp(10px,2vh,24px)}
.page-hero.split .visual{position:relative;min-height:min(42vh,420px);overflow:visible;background:transparent;
  display:flex;align-items:center;justify-content:center;padding-bottom:clamp(8px,1.5vh,18px);
  width:100%}
.page-hero.split .visual img{display:none}
.illo{width:100%;max-width:520px;aspect-ratio:1.15/1;display:block}
.illo .ghost{fill:none;stroke:rgba(18,20,26,.16);stroke-width:1.4}
.illo .wire{fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round}
.illo .dot{fill:var(--paper);stroke:var(--ink);stroke-width:1.5}
.illo .dot.on{fill:var(--coral);stroke:var(--coral)}
.illo .halo{fill:none;stroke:var(--coral);stroke-width:1;opacity:.45}
.illo text{font-family:'Roboto Mono',monospace;font-size:11px;fill:var(--ink);letter-spacing:.08em}
.illo text.sub{font-size:9px;fill:rgba(18,20,26,.55)}
.illo .panel{fill:rgba(244,245,246,.92);stroke:rgba(18,20,26,.18);stroke-width:1.2}
.illo .panel-ink{fill:var(--ink);stroke:none}
.illo .bit{fill:rgba(18,20,26,.45);font-size:10px}
.illo .pkt{fill:var(--coral)}
.illo .dash{stroke-dasharray:6 8;animation:illo-dash 1.8s linear infinite}
.illo .draw{stroke-dasharray:420;stroke-dashoffset:420;animation:illo-draw 2.4s cubic-bezier(.4,0,.2,1) forwards}
.illo .float{animation:illo-float 4.5s ease-in-out infinite}
.illo .float2{animation:illo-float 5.2s ease-in-out infinite reverse}
.illo .pulse-ring{transform-box:fill-box;transform-origin:center;animation:illo-ring 2.2s ease-out infinite}
.illo .run{offset-distance:0%;animation:illo-run 3.2s cubic-bezier(.4,0,.5,1) infinite}
.illo .blink{animation:illo-blink 1.6s steps(1) infinite}
.illo .stack-1{animation:illo-rise 3.8s ease-in-out infinite}
.illo .stack-2{animation:illo-rise 3.8s ease-in-out .35s infinite}
.illo .stack-3{animation:illo-rise 3.8s ease-in-out .7s infinite}
@keyframes illo-dash{to{stroke-dashoffset:-28}}
@keyframes illo-draw{to{stroke-dashoffset:0}}
@keyframes illo-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes illo-ring{0%{transform:scale(.7);opacity:.55}100%{transform:scale(2.4);opacity:0}}
@keyframes illo-run{to{offset-distance:100%}}
@keyframes illo-blink{0%,50%{opacity:1}51%,100%{opacity:0}}
@keyframes illo-rise{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@media(prefers-reduced-motion:reduce){
  .illo .dash,.illo .float,.illo .float2,.illo .pulse-ring,.illo .run,.illo .blink,
  .illo .stack-1,.illo .stack-2,.illo .stack-3{animation:none}
  .illo .draw{stroke-dashoffset:0;animation:none}
}
@media(max-width:900px){
  .page-hero.split{grid-template-columns:1fr;padding-bottom:clamp(18px,3vh,28px)}
  .page-hero.split .visual{min-height:min(36vh,320px);order:-1;margin-bottom:8px}
  .illo{max-width:min(92vw,420px)}
}
@media (prefers-reduced-motion:reduce){
  .illo .dash,.illo .draw,.illo .float,.illo .float2,.illo .pulse-ring,.illo .run,.illo .blink,
  .illo .stack-1,.illo .stack-2,.illo .stack-3{animation:none!important}
  .illo .draw{stroke-dashoffset:0}
}

.band-shot{position:relative;min-height:min(48vh,420px);overflow:hidden;isolation:isolate;
  background:var(--ink);color:var(--paper)}
.band-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.72;filter:contrast(1.05)}
.band-shot .scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(18,20,26,.92) 0%,rgba(18,20,26,.45) 55%,rgba(18,20,26,.15) 100%)}
.band-shot .vin{position:relative;z-index:2;padding:clamp(34px,6vh,84px) 0;max-width:1360px;margin:0 auto;
  padding-left:clamp(14px,2.8vw,40px);padding-right:clamp(14px,2.8vw,40px)}
.band-shot h2{font-family:'Chakra Petch',sans-serif;font-weight:700;
  font-size:clamp(26px,3.8vw,48px);text-transform:uppercase;line-height:.96;max-width:16ch;margin-bottom:12px}
.band-shot p{max-width:40ch;color:rgba(244,245,246,.7);font-size:13.5px}

/* intro / list sections */
.sec{padding:clamp(34px,6vh,84px) 0;border-top:1px solid var(--line)}
.sec .hd{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;
  margin-bottom:clamp(16px,2.6vh,30px);flex-wrap:wrap}
.sec h2,.page-hero h2{font-family:'Chakra Petch',sans-serif;font-weight:700;
  font-size:clamp(26px,3.8vw,50px);text-transform:uppercase;line-height:.96}
.sec .sub{max-width:46ch;color:var(--mid);font-size:13.5px;margin-top:12px}

.slot{display:grid;grid-template-columns:88px 1fr;gap:clamp(10px,2vw,26px);
  align-items:start;padding:18px 0;border-bottom:1px solid var(--line);
  transition:background .3s,padding-left .3s}
.slot:hover{background:rgba(18,20,26,.04);padding-left:10px}
.slot .t{font-size:12px;letter-spacing:.06em;font-variant-numeric:tabular-nums;padding-top:3px}
.slot .n{font-family:'Chakra Petch',sans-serif;font-weight:600;font-size:17px;letter-spacing:.02em;margin-bottom:6px}
.slot .g{font-size:12.5px;color:var(--mid);line-height:1.65;max-width:62ch}
@media(max-width:640px){.slot{grid-template-columns:1fr}.slot .t{margin-bottom:6px}}

/* capabilities grid */
.band-dark{padding:clamp(34px,6vh,84px) 0;background:var(--ink);color:var(--paper);border-top:0}
.band-dark h2{font-family:'Chakra Petch',sans-serif;font-weight:700;
  font-size:clamp(26px,3.8vw,52px);text-transform:uppercase;margin-bottom:clamp(20px,3.4vh,38px)}
.fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(244,245,246,.16);
  border:1px solid rgba(244,245,246,.16)}
.fgrid article{background:var(--ink);transition:background .35s;position:relative}
.fgrid article:hover{background:#1B1E26}
.fgrid .art{position:relative;aspect-ratio:1;overflow:hidden;background:#0C0E12}
.fgrid .art img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.1s cubic-bezier(.2,.8,.3,1);filter:contrast(1.02)}
.fgrid article:hover .art img{transform:scale(1.06)}
.fgrid .lvl{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(244,245,246,.14)}
.fgrid .lvl i{display:block;height:100%;width:var(--w,40%);background:var(--coral);
  transition:width .5s cubic-bezier(.3,.9,.3,1)}
.fgrid .bd{padding:clamp(14px,2vw,22px)}
.fgrid .n{font-size:10px;letter-spacing:.2em;color:var(--coral);margin-bottom:10px}
.fgrid h3{font-family:'Chakra Petch',sans-serif;font-weight:600;font-size:15px;margin-bottom:8px;line-height:1.25;text-transform:none;letter-spacing:0}
.fgrid p{font-size:12px;color:rgba(244,245,246,.56);line-height:1.65}
@media(max-width:980px){.fgrid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.fgrid{grid-template-columns:1fr}}

/* signal / positioning */
#signal{position:relative;min-height:min(92vh,760px);display:grid;
  grid-template-rows:minmax(200px,38vh) minmax(0,1fr);
  overflow:hidden;isolation:isolate;color:var(--ink);background:var(--paper);
  width:100%;max-width:100%}
#signal img.plate{position:absolute;inset:-9% 0;width:100%;height:118%;object-fit:cover;
  filter:contrast(1.02);will-change:transform;z-index:0;grid-column:1/-1;grid-row:1/-1}
#signal .scrim{position:absolute;inset:0;z-index:1;pointer-events:none;grid-column:1/-1;grid-row:1/-1;
  background:
    linear-gradient(180deg,rgba(244,245,246,.88) 0%,rgba(244,245,246,.55) 28%,rgba(244,245,246,.2) 48%,rgba(244,245,246,.75) 72%,rgba(244,245,246,.96) 100%)}
#signal .route-wrap{position:relative;grid-column:1;grid-row:1;z-index:2;width:100%;max-width:100%;
  min-width:0;min-height:0;height:100%;overflow:hidden;box-sizing:border-box;
  padding:clamp(18px,3vh,36px) clamp(14px,2.8vw,40px) 8px}
#signal .route{display:block;width:100%;height:100%;max-width:100%;pointer-events:none}
#signal .route g.hop{cursor:pointer;pointer-events:auto}
#signal .route .wire{fill:none;stroke:var(--ink);stroke-width:1.8;stroke-linecap:round;
  stroke-dasharray:1400;stroke-dashoffset:calc((1 - var(--p,0)) * 1400)}
#signal .route .ghost{fill:none;stroke:rgba(18,20,26,.28);stroke-width:1.8;stroke-linecap:round}
#signal .route g.hop circle.dot{fill:var(--paper);stroke:var(--ink);stroke-width:1.6;
  transition:r .3s cubic-bezier(.3,.9,.3,1)}
#signal .route g.hop:hover circle.dot,#signal .route g.hop.on circle.dot{fill:var(--coral);stroke:var(--coral)}
#signal .route g.hop circle.halo{fill:none;stroke:var(--coral);stroke-width:1;opacity:0}
#signal .route g.hop.on circle.halo{opacity:.5;animation:hopping 2.2s ease-out infinite}
@keyframes hopping{0%{r:7;opacity:.55}100%{r:20;opacity:0}}
#signal .route .tag{fill:rgba(244,245,246,.92);stroke:rgba(18,20,26,.12);stroke-width:1}
#signal .route text{font-family:'Roboto Mono',monospace;font-size:12px;font-weight:500;fill:#12141A;
  letter-spacing:.08em;pointer-events:none;
  paint-order:stroke fill;stroke:#F4F5F6;stroke-width:4px;stroke-linejoin:round}
#signal .route text.sub{font-size:10px;font-weight:400;fill:rgba(18,20,26,.72);stroke-width:3.5px}
#signal .route .pkt{fill:var(--coral);opacity:0}
#signal.drawn .route .pkt{opacity:1;animation:runwire 3.4s cubic-bezier(.4,0,.5,1) infinite}
@keyframes runwire{from{offset-distance:0%}to{offset-distance:100%}}
#signal .in{position:relative;z-index:4;grid-column:1;grid-row:2;width:100%;max-width:100%;
  align-self:end;padding-bottom:clamp(26px,5vh,58px);padding-top:clamp(8px,1.5vh,18px)}
#signal h2{font-family:'Chakra Petch',sans-serif;font-weight:700;
  font-size:clamp(28px,4.6vw,66px);text-transform:uppercase;line-height:.98;margin-bottom:14px;
  max-width:14ch;position:relative;z-index:5;
  text-shadow:0 1px 0 rgba(244,245,246,.8),0 0 18px rgba(244,245,246,.9)}
#signal > .in > .wrap > p{max-width:42ch;font-size:13.5px;color:rgba(18,20,26,.72);
  text-shadow:0 1px 0 rgba(244,245,246,.85)}
#signal .leg{margin-top:clamp(18px,3vh,32px);display:flex;gap:clamp(16px,3vw,44px);
  flex-wrap:wrap;border-top:1px solid var(--line);padding-top:16px;min-height:64px}
#signal .leg div{min-width:96px}
#signal .leg b{display:block;font-family:'Roboto Mono',monospace;
  font-size:clamp(15px,1.9vw,22px);font-variant-numeric:tabular-nums;margin-bottom:4px;color:var(--ink)}
#signal .leg span{font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:rgba(18,20,26,.62)}
@media(max-width:720px){
  #signal{grid-template-rows:minmax(150px,28vh) minmax(0,1fr)}
}

/* chain / best fit */
#chain{display:grid;grid-template-columns:1.02fr .98fr;align-items:stretch;
  background:var(--ink);color:var(--paper)}
#chain .shot{position:relative;overflow:hidden;min-height:min(64vh,540px)}
#chain .shot img{position:absolute;inset:-8% 0;width:100%;height:116%;object-fit:cover;
  filter:contrast(1.02);will-change:transform}
#chain .copy{padding:clamp(26px,4.6vw,60px)}
#chain h2{font-family:'Chakra Petch',sans-serif;font-weight:700;
  font-size:clamp(26px,3.8vw,48px);text-transform:uppercase;line-height:.98;margin-bottom:12px}
#chain .copy > p{color:rgba(244,245,246,.6);font-size:13.5px;max-width:40ch;margin-bottom:clamp(18px,2.6vh,28px)}
#chain ol{list-style:none;counter-reset:step;border-top:1px solid rgba(244,245,246,.18)}
#chain ol li{counter-increment:step;display:grid;grid-template-columns:auto 1fr;gap:14px;
  align-items:baseline;padding:14px 0;border-bottom:1px solid rgba(244,245,246,.1)}
#chain ol li::before{content:counter(step,decimal-leading-zero);
  font-family:'Roboto Mono',monospace;font-size:10.5px;color:var(--coral)}
#chain ol b{font-weight:500;font-size:13.5px;line-height:1.5}
@media(max-width:860px){#chain{grid-template-columns:1fr}#chain .shot{min-height:44vh}}

/* room */
#room{padding:clamp(34px,6vh,84px) 0 clamp(40px,7vh,92px)}
#room .hd{max-width:42ch;margin-bottom:clamp(20px,3.4vh,38px)}
#room h2{font-family:'Chakra Petch',sans-serif;font-weight:700;
  font-size:clamp(26px,3.8vw,52px);text-transform:uppercase;line-height:.98;margin-bottom:10px}
#room .hd p{color:var(--mid);font-size:13.5px}
#room .pair{display:grid;grid-template-columns:1.18fr .82fr;gap:clamp(12px,2vw,26px);align-items:start}
#room figure{position:relative;overflow:hidden;background:#E2E4E7}
#room figure img{position:absolute;inset:-7% 0;width:100%;height:114%;object-fit:cover;
  display:block;filter:contrast(1.02);will-change:transform}
#room .a{aspect-ratio:16/10}
#room .b{aspect-ratio:4/5;margin-top:clamp(22px,5vw,72px)}
#room figcaption{margin-top:10px;font-family:'Roboto Mono',monospace;font-size:10.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--mid)}
#room [data-scrub]{clip-path:inset(calc((1 - var(--p,1)) * 32%) 0 0 0)}
@media(max-width:820px){#room .pair{grid-template-columns:1fr}#room .b{margin-top:0}}

/* expertise blocks */
.xgrid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
.xgrid article{background:var(--paper);display:grid;grid-template-columns:.9fr 1.1fr;min-height:220px;
  transition:background .3s,color .3s}
.xgrid article:hover{background:var(--ink);color:var(--paper)}
.xgrid .art{position:relative;overflow:hidden;background:#0C0E12;min-height:220px}
.xgrid .art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s cubic-bezier(.2,.8,.3,1);filter:contrast(1.02)}
.xgrid article:hover .art img{transform:scale(1.05)}
.xgrid .bd{padding:clamp(18px,2.4vw,28px);display:flex;flex-direction:column;justify-content:center}
.xgrid .n{font-size:9.5px;letter-spacing:.2em;color:var(--coral);margin-bottom:12px}
.xgrid h3{font-family:'Chakra Petch',sans-serif;font-weight:600;font-size:clamp(16px,1.6vw,20px);
  margin-bottom:10px;text-transform:none;line-height:1.25;letter-spacing:0}
.xgrid p{font-size:13px;color:var(--mid);line-height:1.65;max-width:54ch}
.xgrid article:hover p{color:rgba(244,245,246,.62)}
.xgrid .tags{margin-top:14px;display:flex;flex-wrap:wrap;gap:8px}
.xgrid .tags span{font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  border:1px solid var(--line);padding:6px 10px}
.xgrid article:hover .tags span{border-color:rgba(244,245,246,.22)}
@media(max-width:980px){.xgrid{grid-template-columns:1fr}.xgrid article{grid-template-columns:1fr}.xgrid .art{min-height:200px;aspect-ratio:16/10}}

.stack{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.stack div{background:var(--paper);padding:18px 16px}
.stack b{display:block;font-family:'Chakra Petch',sans-serif;font-weight:600;font-size:13px;
  text-transform:uppercase;margin-bottom:8px}
.stack span{font-size:11px;color:var(--mid);line-height:1.55}
@media(max-width:900px){.stack{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.stack{grid-template-columns:1fr}}

/* process steps */
.steps{border-top:1px solid var(--line)}
.steps article{display:grid;grid-template-columns:72px 140px 1fr;gap:clamp(14px,2vw,28px);
  align-items:center;padding:clamp(18px,2.4vw,26px) 0;border-bottom:1px solid var(--line);
  transition:background .3s,padding-left .3s}
.steps article:hover{background:rgba(18,20,26,.04);padding-left:10px}
.steps .num{font-family:'Roboto Mono',monospace;font-size:12px;color:var(--coral);letter-spacing:.08em}
.steps .thumb{aspect-ratio:1;overflow:hidden;background:#E2E4E7}
.steps .thumb img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1s cubic-bezier(.2,.8,.3,1);filter:contrast(1.02)}
.steps article:hover .thumb img{transform:scale(1.06)}
.steps h3{font-family:'Chakra Petch',sans-serif;font-weight:600;font-size:clamp(18px,2.2vw,24px);
  text-transform:uppercase;margin-bottom:8px}
.steps p{max-width:54ch;color:var(--mid);font-size:13px}
@media(max-width:760px){.steps article{grid-template-columns:56px 1fr}.steps .thumb{display:none}}

.collab{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(20px,4vw,58px);align-items:stretch}
.collab .shot{position:relative;min-height:min(52vh,440px);overflow:hidden;background:#E2E4E7}
.collab .shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:contrast(1.02)}
.collab .side{display:flex;flex-direction:column;justify-content:center;gap:clamp(16px,2.4vh,24px)}
.collab .list{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.collab .list div{background:var(--paper);padding:16px 18px;display:flex;justify-content:space-between;
  align-items:center;gap:14px;transition:background .3s,color .3s}
.collab .list div:hover{background:var(--ink);color:var(--paper)}
.collab .list b{font-family:'Chakra Petch',sans-serif;font-weight:600;font-size:14px}
.collab .list span{font-size:10px;letter-spacing:.16em;text-transform:uppercase;opacity:.55}
@media(max-width:860px){.collab{grid-template-columns:1fr}.collab .shot{min-height:40vh}}

/* contact split */
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(24px,4vw,56px);align-items:start}
.contact-grid .sticky-visual{position:sticky;top:calc(var(--nav) + 24px)}
.contact-grid .sticky-visual figure{position:relative;aspect-ratio:4/5;overflow:hidden;background:#E2E4E7}
.contact-grid .sticky-visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:contrast(1.02)}
.contact-grid .sticky-visual figcaption{margin-top:10px;font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mid)}
@media(max-width:900px){
  .contact-grid{grid-template-columns:1fr}
  .contact-grid .sticky-visual{position:relative;top:auto}
  .contact-grid .sticky-visual figure{aspect-ratio:16/10}
}

/* mixer analogue — build pulse */
#pulse{padding:clamp(34px,6vh,84px) 0}
#pulse .g{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(20px,4vw,58px);align-items:center}
#pulse h2{font-family:'Chakra Petch',sans-serif;font-weight:700;
  font-size:clamp(26px,3.8vw,50px);text-transform:uppercase;line-height:.96;margin-bottom:12px}
#pulse p{color:var(--mid);max-width:34ch;font-size:13px}
.desk{border:1px solid var(--line);padding:clamp(16px,2.4vw,26px)}
.desk canvas{width:100%;height:110px;display:block;background:var(--ink);margin-bottom:18px}
.ch{display:grid;grid-template-columns:90px 1fr 44px;gap:14px;align-items:center;padding:9px 0}
.ch label{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mid)}
.ch input{width:100%;accent-color:var(--ink)}
.ch .v{font-size:11px;text-align:right;font-variant-numeric:tabular-nums}
@media(max-width:860px){#pulse .g{grid-template-columns:1fr}}

/* support / closing CTA */
#support{padding:clamp(34px,6vh,90px) 0;text-align:center;border-top:1px solid var(--line)}
#support h2{font-family:'Chakra Petch',sans-serif;font-weight:700;
  font-size:clamp(28px,4.6vw,66px);text-transform:uppercase;line-height:.94;margin-bottom:14px;
  max-width:18ch;margin-left:auto;margin-right:auto}
#support p{color:var(--mid);max-width:42ch;margin:0 auto 26px;font-size:13.5px}
.big{display:inline-flex;align-items:center;gap:12px;background:var(--ink);color:var(--paper);
  padding:18px 34px;font-family:'Chakra Petch',sans-serif;font-weight:700;font-size:13px;
  letter-spacing:.18em;text-transform:uppercase;border:0;cursor:pointer;
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
  transition:background .3s,transform .3s}
.big:hover{background:var(--coral);transform:translateY(-2px);color:var(--ink)}

/* contact form */
.form{display:grid;gap:18px;max-width:none}
.field{display:grid;gap:8px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.field label{font-family:'Chakra Petch',sans-serif;font-weight:600;font-size:14px;text-transform:uppercase;letter-spacing:.04em}
.field .hint{font-size:11px;color:var(--mid);letter-spacing:.04em}
.field input,.field select,.field textarea{
  width:100%;background:var(--paper);border:0;outline:0;padding:8px 0;
  font-size:14px;color:var(--ink);color-scheme:light}
.field textarea{min-height:120px;resize:vertical}
.field select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;cursor:pointer;
  background-color:var(--paper);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%2312141A' stroke-opacity='.45' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 0 center;padding-right:1.75rem}
.field select option{background-color:var(--paper);color:var(--ink)}
.field input::placeholder,.field textarea::placeholder{color:rgba(18,20,26,.35)}
.field input:-webkit-autofill,
.field input:-webkit-autofill:hover,
.field input:-webkit-autofill:focus,
.field textarea:-webkit-autofill,
.field textarea:-webkit-autofill:hover,
.field textarea:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--ink);caret-color:var(--ink);
  box-shadow:0 0 0 1000px var(--paper) inset;transition:background-color 99999s ease-out}
.field:focus-within{border-color:var(--ink)}
.check{display:flex;gap:12px;align-items:flex-start;font-size:12px;color:var(--mid);line-height:1.5}
.check input{margin-top:3px;accent-color:var(--ink)}
.form-note{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--coral);margin-bottom:8px}
.form-actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:8px}
.thanks{display:none;padding:28px;border:1px solid var(--line);background:var(--ink);color:var(--paper)}
.thanks.show{display:block}
.thanks h3{font-family:'Chakra Petch',sans-serif;font-weight:700;font-size:28px;text-transform:uppercase;
  line-height:1;margin-bottom:10px}
.thanks p{color:rgba(244,245,246,.65);max-width:40ch}

footer.wrap{max-width:none;width:100%;padding:clamp(28px,4vh,52px) clamp(20px,4vw,64px) 28px}
footer{display:flex;justify-content:space-between;align-items:center;gap:clamp(18px,3vw,40px);flex-wrap:wrap;
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--mid);
  border-top:1px solid var(--line)}
footer a:hover,footer a.active{color:var(--ink)}

/* legal */
.stub{display:grid;gap:clamp(18px,3vh,28px);max-width:760px}
.stub article,.legal-block{padding-bottom:clamp(16px,2.4vh,24px);border-bottom:1px solid var(--line)}
.stub h2,.legal-block h2{font-family:'Chakra Petch',sans-serif;font-weight:700;font-size:clamp(20px,2.4vw,28px);
  text-transform:uppercase;margin-bottom:12px;line-height:1.05}
.stub p,.legal-block p{color:var(--mid);font-size:13.5px;line-height:1.65;margin-bottom:12px}
.stub p:last-child,.legal-block p:last-child{margin-bottom:0}
.stub ul,.legal-block ul{margin:0 0 12px;padding-left:1.15em;color:var(--mid);font-size:13.5px;line-height:1.65}
.stub li,.legal-block li{margin-bottom:8px}
.stub a,.legal-block a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.stub a:hover,.legal-block a:hover{color:var(--coral)}

/* motion */
.rv{opacity:0;transform:translateY(22px);
  transition:opacity .8s cubic-bezier(.22,.61,.36,1),transform .85s cubic-bezier(.22,.61,.36,1);
  will-change:transform,opacity}
.rv.in{opacity:1;transform:none}
.rv-left{opacity:0;transform:translateX(-28px);
  transition:opacity .8s cubic-bezier(.22,.61,.36,1),transform .85s cubic-bezier(.22,.61,.36,1)}
.rv-left.in{opacity:1;transform:none}
.rv-right{opacity:0;transform:translateX(28px);
  transition:opacity .8s cubic-bezier(.22,.61,.36,1),transform .85s cubic-bezier(.22,.61,.36,1)}
.rv-right.in{opacity:1;transform:none}
.rv-scale{opacity:0;transform:scale(.96);
  transition:opacity .85s cubic-bezier(.19,1,.22,1),transform .9s cubic-bezier(.19,1,.22,1)}
.rv-scale.in{opacity:1;transform:none}
.rv-clip{opacity:0;transform:translateY(18px);
  transition:opacity .85s ease,transform .95s cubic-bezier(.19,1,.22,1)}
.rv-clip.in{opacity:1;transform:none}
.hv{opacity:0;transform:translateY(20px)}
.hv.on{opacity:1;transform:none;
  transition:opacity .95s cubic-bezier(.19,1,.22,1),transform 1s cubic-bezier(.19,1,.22,1)}
.line-grow{position:relative}
.line-grow::after{content:'';position:absolute;left:0;bottom:-10px;height:2px;width:0;background:var(--ink);
  transition:width 1s cubic-bezier(.19,1,.22,1) .15s}
.line-grow.in::after,.line-grow.rv.in::after{width:min(120px,40%)}
.page-hero h1.line-grow::after{display:none}
.stagger > *.rv,.stagger > *.rv-left,.stagger > *.rv-right,.stagger > *.rv-scale{transition-delay:calc(var(--i,0) * 70ms)}
.sec h2.rv:not(.in),.band-dark h2.rv:not(.in),#support h2.rv:not(.in){transform:translateY(28px)}
.sec h2.rv.in,.band-dark h2.rv.in,#support h2.rv.in{transform:none}
.fgrid article.rv,.xgrid article.rv,.steps article.rv{
  transition:opacity .8s cubic-bezier(.22,.61,.36,1),transform .9s cubic-bezier(.19,1,.22,1),background .35s,color .35s}
.fgrid article.rv{transform:translateY(28px)}
.fgrid article.rv.in{transform:none}
.big.rv{transform:translateY(14px)}
.big.rv.in{transform:none}
.big.rv.in:hover{transform:translateY(-2px)}
#prog{transition:none}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .rv,.rv-left,.rv-right,.rv-scale,.rv-clip,.hv{opacity:1;transform:none;filter:none;clip-path:none}
  .line-grow::after{width:min(120px,40%)}
}