/* Decibel Development: home page */
/* Inline SVG sprite holder */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
/* Layout: a dark, full-bleed listening room up top (WebGL particle mark that comes alive with sound),
   then alternating night / paper bands on one 12-column grid, 1360px max. No ornament but the mark itself. */
:root{
  --night:#071D23;
  --ink:#0F343C;
  --ink-raised:#123F49;
  --signal:#00C6E6;
  --coral:#F47F55;
  --peak:#FC7A4E;
  --paper:#F8F4EC;
  --paper-deep:#EFE8DA;

  --on-night:#F8F4EC;
  --on-night-2:rgba(248,244,236,.66);
  --on-night-3:rgba(248,244,236,.42);
  --night-line:rgba(248,244,236,.12);
  --on-paper:#0F343C;
  --on-paper-2:rgba(15,52,60,.7);
  --on-paper-3:rgba(15,52,60,.5);
  --paper-line:rgba(15,52,60,.14);
  --focus:#00C6E6;

  --f-display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --f-body:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* type scale: role → size / line-height / weight */
  --t-hero:clamp(3.5rem,10.2vw,11.5rem);
  --t-display:clamp(2.6rem,6.4vw,6.75rem);
  --t-h3:clamp(1.5rem,2.2vw,2rem);
  --t-manifesto:clamp(1.75rem,3.9vw,3.75rem);
  --t-lede:clamp(1.0625rem,1.3vw,1.25rem);
  --t-body:1.0625rem;
  --t-ui:.9375rem;
  --t-label:.75rem;

  --ease-out:cubic-bezier(0.23,1,0.32,1);
  --ease-in-out:cubic-bezier(0.77,0,0.175,1);
  --ease-icon:cubic-bezier(0.2,0,0,1);

  --ring-night:0 0 0 1px oklch(1 0 0 / .08);
  --ring-night-hover:0 0 0 1px oklch(1 0 0 / .13);
  --shadow-border:0 0 0 1px oklch(0 0 0 / .06),0 1px 2px -1px oklch(0 0 0 / .06),0 2px 4px 0 oklch(0 0 0 / .04);

  --hdr:72px;
  --gutter:clamp(16px,4vw,48px);
  --max:1360px;
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:var(--hdr);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{margin:0;background:var(--night);color:var(--on-night);font:400 var(--t-body)/1.55 var(--f-body);overflow-x:clip}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,p{margin:0}
h1,h2,h3{font-family:var(--f-display);text-wrap:balance}
p{text-wrap:pretty}
::selection{background:var(--signal);color:var(--night)}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:6px}
.light :focus-visible{outline-color:var(--ink)}
.light{color-scheme:light;background:var(--paper);color:var(--on-paper)}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:16px;top:-80px;z-index:200;background:var(--paper);color:var(--night);padding:10px 14px;border-radius:10px;text-decoration:none;font-weight:600}
.skip:focus{top:calc(env(safe-area-inset-top,0px) + 12px)}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.label{font:500 var(--t-label)/1.2 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--on-night-2);display:flex;align-items:center;gap:10px}
.label::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--signal);flex:none}
.light .label{color:var(--on-paper-2)}
.light .label::before{background:var(--peak)}

/* ---------- Buttons ---------- */
.btn{
  -webkit-tap-highlight-color:transparent;display:inline-flex;align-items:center;gap:10px;
  padding-block:15px;padding-inline:24px 22px;border-radius:999px;border:1px solid transparent;
  font:600 var(--t-ui)/1 var(--f-body);text-decoration:none;cursor:pointer;white-space:nowrap;
  transition-property:scale,background-color,color,box-shadow;transition-duration:150ms;transition-timing-function:ease-out;
}
.btn:not(:disabled):active{scale:.96}
.btn svg{width:1.1em;height:1.1em;flex:none}
.btn-signal{background:var(--signal);color:var(--night)}
.btn-line{background:transparent;color:var(--on-night);box-shadow:inset 0 0 0 1px rgba(248,244,236,.32)}
.btn-ink{background:var(--ink);color:var(--paper)}
.btn-coral{background:var(--coral);color:var(--night)}
.btn-paper{background:var(--paper);color:var(--night)}
.btn-lg{padding-block:20px;padding-inline:32px 28px;font-size:1.0625rem;gap:12px}
@media (hover:hover) and (pointer:fine){
  .btn-signal:hover{background:#4CDAF0}
  .btn-line:hover{box-shadow:inset 0 0 0 1px var(--on-night);background:rgba(248,244,236,.06)}
  .btn-ink:hover{background:var(--night)}
  .btn-coral:hover{background:#F66B3C}
  .btn-paper:hover{background:#fff}
}

/* ---------- Icon cross-fade (better-ui: scale .25→1, opacity, blur 4px, 300ms) ---------- */
.swap{display:inline-grid;place-items:center}
.swap > *{grid-area:1/1;transition-property:opacity,scale,filter;transition-duration:300ms;transition-timing-function:var(--ease-icon)}
.swap .is-off{opacity:0;scale:.25;filter:blur(4px)}
[aria-pressed="true"] .swap .a{opacity:0;scale:.25;filter:blur(4px)}
[aria-pressed="true"] .swap .b{opacity:1;scale:1;filter:blur(0)}
@media (prefers-reduced-motion:reduce){.swap > *{transition-property:opacity;scale:1!important;filter:none!important}}

/* ---------- Header ---------- */
.hdr{
  position:fixed;inset:0 0 auto;z-index:60;padding-top:env(safe-area-inset-top,0px);
  transition-property:background-color,box-shadow,backdrop-filter;transition-duration:200ms;transition-timing-function:ease-out;
}
.hdr[data-scrolled="true"]{background:rgba(7,29,35,.78);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);box-shadow:0 1px 0 var(--night-line)}
.hdr-progress{position:absolute;left:0;right:0;bottom:0;height:2px;overflow:hidden;pointer-events:none}
.hdr-progress i{display:block;height:100%;background:var(--signal);transform-origin:left;transform:scaleX(var(--sp,0))}
.nav{height:var(--hdr);display:flex;align-items:center;gap:24px}
.brand{color:var(--on-night);display:flex;flex:none;text-decoration:none}
.brand svg{height:36px;width:auto}
.nav-links{display:flex;gap:2px;list-style:none;margin:0 auto;padding:0}
.nav-links a{display:block;padding:10px 14px;border-radius:999px;text-decoration:none;font-size:var(--t-ui);font-weight:500;color:var(--on-night-2);transition:color 120ms ease}
@media (hover:hover) and (pointer:fine){.nav-links a:hover{color:var(--on-night)}}
.nav-right{display:flex;align-items:center;gap:10px;flex:none;margin-left:auto}
.nav-links + .nav-right{margin-left:0}
.icon-btn{
  -webkit-tap-highlight-color:transparent;width:44px;height:44px;border-radius:50%;border:1px solid transparent;display:grid;place-items:center;cursor:pointer;
  background:rgba(248,244,236,.06);box-shadow:var(--ring-night);color:var(--on-night);
  transition-property:scale,background-color,box-shadow,color;transition-duration:150ms;transition-timing-function:ease-out;
}
.icon-btn:not(:disabled):active{scale:.96}
.icon-btn svg{width:20px;height:20px}
.icon-btn[aria-pressed="true"]{color:var(--signal)}
@media (hover:hover) and (pointer:fine){.icon-btn:hover{background:rgba(248,244,236,.1);box-shadow:var(--ring-night-hover)}}
.nav .btn{padding-block:12px;padding-inline:20px 18px}
.menu-btn{display:none}

.menu{
  position:fixed;inset:0;z-index:80;background:var(--night);
  padding:calc(env(safe-area-inset-top,0px) + 14px) var(--gutter) calc(env(safe-area-inset-bottom,0px) + 28px);
  display:flex;flex-direction:column;gap:36px;overflow-y:auto;overscroll-behavior:contain;
  opacity:0;visibility:hidden;transition-property:opacity,visibility,translate;transition-duration:150ms;transition-timing-function:ease-out;
}
.menu[data-open="true"]{opacity:1;visibility:visible;transition-duration:250ms;transition-timing-function:var(--ease-out)}
@media (prefers-reduced-motion:no-preference){.menu{translate:0 -12px}.menu[data-open="true"]{translate:0 0}}
.menu-top{display:flex;justify-content:space-between;align-items:center;min-height:58px}
.menu-top svg{height:28px;width:auto}
.menu ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.menu ul a{display:block;padding-block:8px;text-decoration:none;font:800 2.75rem/1.1 var(--f-display);font-stretch:90%;letter-spacing:-.025em}
.menu p{color:var(--on-night-2);font-size:var(--t-ui)}

/* ---------- Hero ---------- */
.hero{position:relative;isolation:isolate;touch-action:pan-y;min-height:min(100svh,1040px);display:flex;overflow:hidden;background:radial-gradient(120% 90% at 70% 40%,#0C2C34 0%,var(--night) 62%)}
.gl{position:absolute;inset:0;z-index:-1;width:100%;height:100%}
.gl-fallback{position:absolute;right:6%;top:50%;width:min(36vw,460px);translate:0 -50%;color:var(--signal);opacity:.9;filter:drop-shadow(0 0 40px rgba(0,198,230,.45));z-index:-1}
.gl-fallback[hidden]{display:none}
.hero-inner{position:relative;width:100%;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto 1fr auto auto auto;column-gap:24px;padding-block:calc(var(--hdr) + env(safe-area-inset-top,0px) + clamp(20px,3vw,40px)) clamp(56px,9vh,112px)}
.eyebrow{grid-column:1 / -1;display:flex;justify-content:space-between;gap:16px;align-items:center;flex-wrap:wrap}
.eyebrow .coords{font:500 var(--t-label)/1.2 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--on-night-3)}
.hero h1{
  grid-column:1 / span 8;grid-row:3;align-self:end;max-width:9.6ch;
  font-size:var(--t-hero);font-weight:800;font-stretch:92%;line-height:.9;letter-spacing:-.035em;margin-left:-.05em;
}
.hero h1 .w{display:inline-block}
.hero h1 .loud{color:var(--signal)}
.hero h1 .loud .lt{display:inline-block}
.hero-side{grid-column:1 / span 6;grid-row:4;display:grid;justify-items:start;gap:24px;margin-top:clamp(28px,3vw,40px);min-width:0}
.lede{font-size:var(--t-lede);line-height:1.5;color:var(--on-night-2);max-width:34ch}
.lede strong{color:var(--on-night);font-weight:500}
.cta-row{display:flex;flex-wrap:wrap;gap:10px}
.deck-row{grid-column:8 / -1;grid-row:4;justify-self:end;align-self:end;display:flex;align-items:center;gap:14px;min-width:0}
.deck-row .icon-btn{flex:none}
.hero{cursor:crosshair}
.hero a,.hero button{cursor:pointer}
.deck{display:flex;align-items:center;gap:8px;padding:6px;border-radius:999px;background:rgba(7,29,35,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:var(--ring-night);border:1px solid transparent}
.deck .sound{
  -webkit-tap-highlight-color:transparent;display:inline-flex;align-items:center;gap:10px;height:44px;padding-inline:14px 18px;border-radius:999px;border:0;cursor:pointer;
  background:var(--paper);color:var(--night);font:600 var(--t-ui)/1 var(--f-body);
  transition-property:scale,background-color,color;transition-duration:150ms;transition-timing-function:ease-out;
}
.deck .sound:active{scale:.96}
.deck .sound[aria-pressed="true"]{background:var(--signal)}
.deck .sound svg{width:20px;height:20px}
.deck .icon-btn{width:44px;height:44px;background:transparent;box-shadow:none}
.readout{display:flex;align-items:center;gap:12px;padding-inline:10px 14px;font:500 .8125rem/1 var(--f-mono);font-variant-numeric:tabular-nums;color:var(--on-night-2);min-width:9.5em}
.bars{display:flex;align-items:flex-end;gap:2px;height:16px}
.bars i{width:3px;height:100%;border-radius:1px;background:var(--signal);transform-origin:bottom;transform:scaleY(var(--b,.15));opacity:.9}
.deck-hint{font:500 var(--t-label)/1.4 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--on-night-3)}
.deck-hint b{color:var(--on-night-2);font-weight:500}

/* Entrance: first load only. Chunks 100ms apart, headline words 80ms apart. */
@keyframes in-fade{from{opacity:0}}
@keyframes in-up{from{opacity:0;transform:translateY(12px);filter:blur(4px)}}
.enter{animation:in-fade 300ms var(--ease-out) both;animation-delay:var(--d,0ms)}
@media (prefers-reduced-motion:no-preference){.enter{animation-name:in-up}}

/* ---------- Scroll reveals (below the fold only; everything is visible without JS) ---------- */
.wm{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.wm-i{display:inline-block}
@media (prefers-reduced-motion:no-preference){
  .rv-wait[data-reveal="words"] .wm-i{transform:translateY(108%)}
  .rv-in[data-reveal="words"] .wm-i{transition:transform 650ms var(--ease-out);transition-delay:calc(var(--wi) * 80ms)}
  .rv-wait[data-reveal="up"]{opacity:0;transform:translateY(12px);filter:blur(4px)}
  .rv-in[data-reveal="up"]{transition-property:opacity,transform,filter;transition-duration:300ms;transition-timing-function:var(--ease-out);transition-delay:calc(var(--ri,0) * 100ms)}
  .rv-wait[data-reveal="clip"] .photo-zoom{clip-path:inset(0 0 100% 0 round 28px)}
  .rv-in[data-reveal="clip"] .photo-zoom{transition:clip-path 1100ms var(--ease-in-out)}
  .rv-wait[data-reveal="letters"] .ltr{translate:0 70%;opacity:0}
  .rv-in[data-reveal="letters"] .ltr{transition:translate 800ms var(--ease-out),opacity 400ms ease-out;transition-delay:calc(var(--li) * 50ms)}
}
@media (prefers-reduced-motion:reduce){
  .rv-wait[data-reveal]{opacity:0}
  .rv-in[data-reveal]{transition:opacity 300ms ease-out}
}

/* ---------- Manifesto ---------- */
.manifesto{position:relative;isolation:isolate;overflow:hidden;padding-block:clamp(72px,11vw,168px) clamp(64px,9vw,128px)}
/* Sound-wave graphic: its glowing source lines up with the hero text's left edge (the content edge);
   the waves fan out to the right and sit just behind the statement. */
.mf-waves{--mw:min(50vw,700px);position:absolute;z-index:-1;pointer-events:none;width:var(--mw);height:auto;max-width:none;
  left:calc(max(var(--gutter), (100vw - var(--max)) / 2 + var(--gutter)) - var(--mw) * .085);
  top:50%;translate:0 calc(-58% + var(--mf-y,0px));opacity:.72;
  -webkit-mask-image:linear-gradient(90deg,#000 55%,transparent 98%);mask-image:linear-gradient(90deg,#000 55%,transparent 98%)}
@media (prefers-reduced-motion:no-preference){.mf-waves{animation:mf-breathe 9s ease-in-out infinite alternate}}
@keyframes mf-breathe{from{opacity:.62;scale:1}to{opacity:.8;scale:1.025}}
.manifesto .wrap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px}
.manifesto-text{grid-column:5 / span 8;font:600 var(--t-manifesto)/1.14 var(--f-display);font-stretch:96%;letter-spacing:-.022em;max-width:24ch}
.manifesto-text .mw{color:var(--on-night-3);transition:color 200ms ease}
.manifesto-text .mw.on{color:var(--on-night)}
.manifesto-text .mw.hi.on{color:var(--signal)}
.no-split .manifesto-text .mw{color:inherit}
.manifesto-foot{grid-column:5 / span 8;display:flex;gap:32px;flex-wrap:wrap;margin-top:clamp(40px,5vw,64px);padding-top:20px;border-top:1px solid var(--night-line)}
.manifesto-foot div{display:grid;gap:4px;min-width:0}
.manifesto-foot dt{font:500 var(--t-label)/1.2 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--on-night-3)}
.manifesto-foot dd{margin:0;font-weight:500}

/* ---------- Section heads ---------- */
.sec{padding-block:clamp(88px,11vw,160px)}
.head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:20px 24px;margin-bottom:clamp(40px,6vw,80px);align-items:end}
.head h2{grid-column:1 / span 7;font-size:var(--t-display);font-weight:800;font-stretch:92%;line-height:.94;letter-spacing:-.03em}
.head p{grid-column:9 / span 4;color:var(--on-night-2);max-width:40ch}
.light .head p{color:var(--on-paper-2)}

/* ---------- Mixer ---------- */
/* Glass: a lit top edge, a faint cyan rim and a soft drop, so panels sit above the section instead of on it. */
.glass{background:linear-gradient(180deg,rgba(20,72,84,.55) 0%,rgba(7,29,35,.72) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),inset 0 0 0 1px rgba(0,198,230,.16),0 30px 60px -30px rgba(0,0,0,.65),0 0 0 1px rgba(0,0,0,.25);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.transport{display:grid;grid-template-columns:auto minmax(0,1.15fr) minmax(0,1fr) auto;align-items:center;gap:20px 28px;margin-bottom:16px;padding:16px 28px 16px 16px;border-radius:999px}
.transport > .wave-wrap,.transport > .t-status{position:relative}
.transport > .wave-wrap::before,.transport > .t-status::before{content:"";position:absolute;left:-14px;top:12%;bottom:12%;width:1px;background:linear-gradient(180deg,transparent,rgba(0,198,230,.28),transparent)}
.wave-wrap{height:60px;min-width:0}
.wave{display:block;width:100%;height:100%}
.t-status{display:flex;align-items:center;gap:10px;padding-left:12px;font:500 .75rem/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--on-night-3);font-variant-numeric:tabular-nums;white-space:nowrap;min-width:9.5em;justify-content:flex-end}
.t-status svg{width:18px;height:18px;flex:none}
.t-status[data-on="true"]{color:var(--signal)}
.play{
  -webkit-tap-highlight-color:transparent;position:relative;width:64px;height:64px;border-radius:50%;border:1px solid transparent;cursor:pointer;display:grid;place-items:center;
  background:radial-gradient(circle at 35% 30%,#5FE6FA 0%,var(--signal) 55%,#00A9C6 100%);color:var(--night);
  box-shadow:0 0 0 6px rgba(0,198,230,.1),0 10px 30px -6px rgba(0,198,230,.55),inset 0 1px 0 rgba(255,255,255,.45);
  transition-property:scale,background-color,box-shadow;transition-duration:150ms;transition-timing-function:ease-out;
}
.play:not(:disabled):active{scale:.96}
.play svg{width:26px;height:26px}
.play[aria-pressed="true"]{background:var(--paper);box-shadow:0 0 0 6px rgba(248,244,236,.08),0 10px 30px -8px rgba(0,0,0,.6),inset 0 1px 0 #fff}
@media (hover:hover) and (pointer:fine){.play:hover{background:#4CDAF0}.play[aria-pressed="true"]:hover{background:#fff}}
.play-ring{position:absolute;inset:-1px;border-radius:50%;box-shadow:0 0 0 0 rgba(0,198,230,.55);pointer-events:none}
@keyframes ring{0%{box-shadow:0 0 0 0 rgba(0,198,230,.55)}100%{box-shadow:0 0 0 18px rgba(0,198,230,0)}}
@media (prefers-reduced-motion:no-preference){.rv-in .play[aria-pressed="false"] .play-ring{animation:ring 1600ms var(--ease-out) 400ms 3}}
.t-title{font:700 clamp(1.1rem,1.6vw,1.375rem)/1.2 var(--f-display);font-stretch:96%;letter-spacing:-.01em}
.t-hint{color:var(--on-night-2);font-size:var(--t-ui);margin-top:4px;max-width:58ch}
.transport .readout{min-width:8.5em;justify-content:flex-end;padding-inline:0}
.mini{
  position:fixed;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(env(safe-area-inset-bottom,0px) + 16px);z-index:70;
  display:flex;align-items:center;gap:12px;padding:8px 8px 8px 16px;border-radius:999px;background:rgba(7,29,35,.86);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:var(--ring-night),0 16px 40px -16px rgba(0,0,0,.6);
  font:500 .8125rem/1 var(--f-body);color:var(--on-night);
  opacity:0;visibility:hidden;translate:0 12px;transition-property:opacity,translate,visibility;transition-duration:150ms;transition-timing-function:ease-out;
}
.mini[data-show="true"]{opacity:1;visibility:visible;translate:0 0;transition-duration:250ms;transition-timing-function:var(--ease-out)}
@media (prefers-reduced-motion:reduce){.mini{translate:0 0}}
.mini-btn{-webkit-tap-highlight-color:transparent;display:inline-flex;align-items:center;gap:6px;height:36px;padding-inline:10px 14px;border-radius:999px;border:0;cursor:pointer;background:var(--paper);color:var(--night);font:600 .8125rem/1 var(--f-body);transition:scale 150ms ease-out}
.mini-btn:active{scale:.96}
.mini-btn svg{width:16px;height:16px}

.mixer{position:relative;isolation:isolate;overflow:hidden;
  background:radial-gradient(70% 55% at 18% 8%,rgba(0,198,230,.10) 0%,transparent 60%),radial-gradient(60% 60% at 88% 70%,rgba(0,198,230,.07) 0%,transparent 60%),linear-gradient(180deg,#0B2A31 0%,var(--night) 100%)}
.mixer::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.mixer .head h2 .dot{color:var(--peak)}
.mixer .head p span{display:block;color:var(--on-night-3)}
.console{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:16px}
.strips{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;padding:10px;border-radius:32px;background:rgba(3,14,17,.55);box-shadow:inset 0 2px 12px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.04)}
.strip{
  position:relative;display:grid;grid-template-rows:auto 1fr auto;gap:18px;justify-items:center;
  padding:16px 6px 10px;border-radius:22px;
  background:linear-gradient(180deg,rgba(24,80,92,.5) 0%,rgba(9,34,40,.75) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),inset 0 0 0 1px rgba(0,198,230,.12),0 18px 30px -20px rgba(0,0,0,.8);
  transition-property:box-shadow,background-color;transition-duration:200ms;transition-timing-function:ease-out;
}
.strip[data-on="true"]{box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 0 0 1px rgba(0,198,230,.55),0 0 28px -6px rgba(0,198,230,.35),0 18px 30px -20px rgba(0,0,0,.8)}
.ch-num{font:500 .6875rem/1 var(--f-mono);letter-spacing:.12em;color:rgba(0,198,230,.6)}
.strip[data-on="true"] .ch-num{color:var(--signal);text-shadow:0 0 10px rgba(0,198,230,.6)}
.fader-area{display:flex;gap:8px;min-height:clamp(240px,26vw,340px);height:100%}
.db{display:flex;flex-direction:column;justify-content:space-between;padding-block:20px;font:500 .625rem/1 var(--f-mono);color:var(--on-night-3);text-align:right;width:2.3em}
.db span{position:relative;translate:0 -50%;white-space:nowrap}
.db span::after{content:"";position:absolute;right:-7px;top:50%;width:4px;height:1px;background:rgba(248,244,236,.28)}
.leds{display:flex;flex-direction:column-reverse;justify-content:space-between;padding-block:20px;gap:3px}
.led{width:7px;flex:1;max-height:9px;border-radius:2px;background:rgba(0,198,230,.1);transition:background-color 80ms linear,box-shadow 80ms linear}
.led.on{background:var(--signal);box-shadow:0 0 6px rgba(0,198,230,.7)}
.led.on.dim{background:rgba(0,198,230,.45);box-shadow:none}
.led.on.hot{background:var(--peak);box-shadow:0 0 6px rgba(252,122,78,.7)}
.fader{position:relative;width:32px;cursor:ns-resize;touch-action:none;-webkit-tap-highlight-color:transparent;border-radius:8px}
.fader::before{content:"";position:absolute;left:50%;top:20px;bottom:20px;width:6px;translate:-50% 0;border-radius:4px;background:linear-gradient(90deg,#020B0D,#0A1F24 50%,#020B0D);box-shadow:inset 0 1px 3px rgba(0,0,0,.9),0 1px 0 rgba(255,255,255,.05)}
.fader .scale{position:absolute;inset:20px 3px;background:repeating-linear-gradient(180deg,rgba(248,244,236,.16) 0 1px,transparent 1px 10%);-webkit-mask:linear-gradient(90deg,#000 0 5px,transparent 5px calc(100% - 5px),#000 calc(100% - 5px));mask:linear-gradient(90deg,#000 0 5px,transparent 5px calc(100% - 5px),#000 calc(100% - 5px));pointer-events:none}
.knob{
  position:absolute;left:0;right:0;top:0;height:40px;border-radius:8px;pointer-events:none;
  background:repeating-linear-gradient(180deg,transparent 0 5px,rgba(0,0,0,.06) 5px 6px),linear-gradient(180deg,#FFFDF8 0%,#EDE6D8 48%,#CFC6B4 52%,#E4DCCD 100%);
  box-shadow:0 0 0 1px rgba(0,0,0,.35),0 12px 16px -8px rgba(0,0,0,.85),0 3px 4px rgba(0,0,0,.35),inset 0 1px 0 #fff,inset 0 -2px 0 rgba(0,0,0,.08);
  transform:translateY(calc((1 - var(--lvl)) * (var(--h) - 40px) + var(--rub,0px)));
  transition:transform 300ms var(--ease-in-out);
}
.knob::after{content:"";position:absolute;inset:auto 6px;top:50%;height:3px;translate:0 -50%;border-radius:2px;background:var(--ink);transition:background-color 150ms ease,box-shadow 150ms ease}
.strip[data-on="true"] .knob::after{background:var(--peak);box-shadow:0 0 6px rgba(252,122,78,.6)}
.fader[data-drag] .knob,.strips[data-instant] .knob{transition-duration:0ms}
.ch-tab{
  -webkit-tap-highlight-color:transparent;width:100%;border:0;border-radius:18px;padding:12px 4px;cursor:pointer;background:transparent;color:var(--on-night);
  display:grid;gap:4px;justify-items:center;transition-property:background-color,scale;transition-duration:150ms;transition-timing-function:ease-out;
}
.ch-tab:active{scale:.96}
.ch-tab b{font:700 1rem/1.1 var(--f-display);font-stretch:96%}
.ch-tab small{font:500 .6875rem/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--on-night-3)}
.ch-tab i{width:7px;height:7px;border-radius:50%;margin-top:6px;background:rgba(248,244,236,.16);transition:background-color 150ms ease,box-shadow 150ms ease}
.strip[data-on="true"] .ch-tab i{background:var(--peak);box-shadow:0 0 8px rgba(252,122,78,.8)}
.ch-tab b{transition:color 150ms ease}
@media (hover:hover) and (pointer:fine){.ch-tab:hover{background:rgba(248,244,236,.06)}}

.panels{display:grid;min-width:0;border-radius:32px;background:var(--paper);color:var(--on-paper);box-shadow:inset 0 1px 0 #fff,0 40px 80px -40px rgba(0,0,0,.7),0 0 0 1px rgba(0,0,0,.2)}
.panel{grid-area:1 / 1;padding:clamp(24px,3vw,40px);display:grid;grid-template-rows:auto auto auto 1fr;align-content:start;gap:24px;min-width:0;visibility:hidden}
.panel[data-on="true"]{visibility:visible}
.panel .pairs{align-self:start}
.panel-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.panel .label{color:var(--on-paper-2)}
.panel .label::before{background:var(--peak)}
.solo{
  -webkit-tap-highlight-color:transparent;display:inline-flex;align-items:center;gap:8px;height:36px;padding-inline:12px 14px;border-radius:999px;border:1px solid transparent;cursor:pointer;
  background:var(--paper-deep);color:var(--on-paper);font:500 .75rem/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;
  transition-property:scale,background-color,color;transition-duration:150ms;transition-timing-function:ease-out;
}
.solo:active{scale:.96}
.solo::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--on-paper-3);transition:background-color 150ms ease}
.solo[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.solo[aria-pressed="true"]::before{background:var(--peak)}
.panel h3{font-size:clamp(2rem,3.2vw,2.9rem);font-weight:800;font-stretch:92%;letter-spacing:-.03em;line-height:1}
.panel .role{font:600 1.125rem/1.35 var(--f-display);letter-spacing:-.01em;margin-top:12px}
.panel .role span{color:#C2501F}
.panel .intro{color:var(--on-paper-2);margin-top:10px;max-width:46ch}
.inc{list-style:none;margin:0;padding:0;border-top:1px solid var(--paper-line);align-self:start}
.inc li{display:flex;gap:14px;align-items:baseline;padding-block:13px;border-bottom:1px solid var(--paper-line);font-weight:500}
.inc li span{font:500 .6875rem/1 var(--f-mono);color:var(--on-paper-3);width:2.4em;flex:none}
.pairs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:var(--t-ui);color:var(--on-paper-2)}
.pair{-webkit-tap-highlight-color:transparent;border:1px solid transparent;cursor:pointer;background:var(--paper-deep);color:var(--on-paper);font-weight:600;font-size:.875rem;padding:9px 13px;border-radius:999px;transition-property:scale,background-color;transition-duration:150ms;transition-timing-function:ease-out}
.pair:active{scale:.96}
@media (hover:hover) and (pointer:fine){.pair:hover{background:#E4DCCB}}
.console-foot{margin-top:16px;display:flex;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;font:500 var(--t-label)/1.4 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--on-night-3)}
.console-foot b{color:var(--on-night-2);font-weight:500}
.mix-cta{position:relative;overflow:hidden;isolation:isolate;margin-top:clamp(40px,5vw,64px);padding:clamp(26px,3.2vw,40px);border-radius:32px;display:flex;justify-content:space-between;align-items:center;gap:20px 32px;flex-wrap:wrap}
.mix-cta p{font:500 clamp(1.05rem,1.4vw,1.25rem)/1.4 var(--f-display);letter-spacing:-.01em;color:var(--on-night-2);max-width:52ch}
.mix-cta b{display:block;color:var(--on-night);font-weight:700;font-size:clamp(1.35rem,2vw,1.75rem);letter-spacing:-.02em;margin-bottom:6px}
.mix-cta .btn{box-shadow:0 10px 30px -8px rgba(0,198,230,.6),inset 0 1px 0 rgba(255,255,255,.4)}
.mix-cta::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.12;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.mix-pat{position:absolute;z-index:-1;right:-3%;top:50%;height:clamp(300px,34vw,440px);width:auto;aspect-ratio:307.26 / 324.3;max-width:none;translate:0 calc(-50% + var(--pat-y,0px));
  fill:var(--signal);opacity:.32;pointer-events:none;filter:drop-shadow(0 0 18px rgba(0,198,230,.25));
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 58%);mask-image:linear-gradient(90deg,transparent 0%,#000 58%)}
@media (max-width:760px){.mix-pat{height:340px;right:-30%;opacity:.14}}

/* ---------- Work ---------- */
.work-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--on-paper)}
.work-row{
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,3fr) minmax(0,3fr) auto;gap:16px 24px;align-items:center;
  padding-block:clamp(24px,3vw,40px);border-bottom:1px solid var(--paper-line);text-decoration:none;color:inherit;position:relative;
}
.wr-name{font:800 clamp(2.4rem,5.6vw,5.5rem)/.95 var(--f-display);font-stretch:88%;letter-spacing:-.03em;transition:color 150ms ease}
/* Hover: each letter rolls up and a blue copy rolls in from below, staggered left to right. */
.roll .wd{display:inline-flex;white-space:nowrap}
.roll .ch{display:inline-grid;overflow:hidden;padding-bottom:.16em;margin-bottom:-.16em}
.roll .ch > span{grid-area:1 / 1;transition:translate 520ms var(--ease-out);transition-delay:calc(var(--ci) * 22ms)}
.roll .ch > span + span{translate:0 130%;color:var(--signal-ink,#0094AE)}
.work-row::before{content:"";position:absolute;inset:0 calc(var(--gutter) * -1);z-index:-1;background:linear-gradient(90deg,rgba(239,232,218,0) 0%,var(--paper-deep) 18%,var(--paper-deep) 82%,rgba(239,232,218,0) 100%);transform:scaleY(0);transform-origin:50% 100%;transition:transform 450ms var(--ease-out)}
.work-row{isolation:isolate}
.wr-meta{display:grid;gap:6px;min-width:0}
.wr-meta dt{font:500 var(--t-label)/1.2 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--on-paper-3)}
.wr-meta dd{margin:0;font-weight:500}
.wr-desc{grid-column:1 / span 3;color:var(--on-paper-2);max-width:62ch;font-size:var(--t-ui)}
.wr-go{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--paper-deep);color:var(--on-paper);transition-property:background-color,color,rotate;transition-duration:200ms;transition-timing-function:var(--ease-out)}
.wr-go svg{width:20px;height:20px}
.wr-thumb{display:none}
.work-row.next .wr-name{color:var(--on-paper-3)}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .work-row:hover .wr-name{color:inherit}
  .work-row:hover .roll .ch > span{translate:0 -130%}
  .work-row:hover .roll .ch > span + span{translate:0 0}
}
@media (prefers-reduced-motion:reduce){.roll .ch > span{transition:none}.roll .ch > span + span{display:none}.work-row::before{transition:opacity 200ms ease;transform:none;opacity:0}.work-row:hover::before{opacity:1}}
.work-row.next .wr-go{background:var(--peak);color:var(--night)}
@media (hover:hover) and (pointer:fine){
  .work-row:hover::before{transform:scaleY(1)}
  .work-row:hover .wr-name{color:var(--signal-ink,#0094AE)}
  .work-row:hover .wr-go{background:var(--ink);color:var(--paper);rotate:-45deg}
  .work-row.next:hover .wr-name{color:var(--on-paper)}
}
.preview{position:fixed;left:0;top:0;z-index:40;width:min(30vw,420px);aspect-ratio:4/3;pointer-events:none;opacity:0;scale:.92;transition-property:opacity,scale;transition-duration:200ms;transition-timing-function:var(--ease-out)}
.preview[data-show="true"]{opacity:1;scale:1}
.preview .mock{position:absolute;inset:0;opacity:0;transition:opacity 150ms ease-out}
.preview .mock[data-active="true"]{opacity:1}
@media (prefers-reduced-motion:reduce){.preview{scale:1}}
.mock{border-radius:20px;overflow:hidden;box-shadow:0 0 0 1px oklch(0 0 0 / .08),0 40px 70px -30px rgba(7,29,35,.55);display:grid;grid-template-rows:auto 1fr;font-family:var(--f-display)}
.mock-bar{display:flex;align-items:center;gap:6px;padding:10px 12px;background:rgba(0,0,0,.08)}
.mock-bar i{width:8px;height:8px;border-radius:50%;background:currentColor;opacity:.35}
.mock-bar span{margin-left:8px;font:500 .625rem/1 var(--f-mono);opacity:.6}
.mock-body{padding:18px 20px;display:grid;align-content:space-between;gap:12px}
.mock-body b{font-weight:800;font-stretch:88%;font-size:clamp(1.6rem,2.6vw,2.4rem);line-height:.95;letter-spacing:-.03em}
.mock-lines{display:grid;gap:6px}
.mock-lines i{height:6px;border-radius:3px;background:currentColor;opacity:.22}
.mock-lines i:nth-child(1){width:80%}.mock-lines i:nth-child(2){width:64%}.mock-lines i:nth-child(3){width:40%}
.mock-row{display:flex;gap:8px;align-items:center}
.mock-pill{height:22px;padding-inline:12px;border-radius:999px;display:inline-flex;align-items:center;font:600 .625rem/1 var(--f-body)}
.mock-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.mock-cards i{aspect-ratio:1;border-radius:8px;background:currentColor;opacity:.14}
.wr-read{display:inline-block;margin-left:6px;font:500 var(--t-label)/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:#C2501F;white-space:nowrap}
.mock-brand{display:block;position:relative;background:#060606;isolation:isolate}
.mock-brand img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:52% 40%;z-index:-2}
.mock-brand::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(6,6,6,.05) 30%,rgba(6,6,6,.7) 100%),linear-gradient(90deg,rgba(6,6,6,.35),transparent 60%)}
.mock-brand .brand-logo{position:absolute;left:7%;right:7%;bottom:9%;width:86%;height:auto;fill:#EDEBDA;filter:drop-shadow(0 6px 24px rgba(0,0,0,.35))}
.mock-brand .brand-tag{position:absolute;left:7%;top:7%;font:500 .625rem/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:#EDEBDA;padding:6px 9px;border-radius:999px;background:rgba(6,6,6,.4);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.mock-img{background:#F8F7F1;color:var(--ink)}
.mock-img img{width:100%;height:100%;object-fit:cover;object-position:top}
.mock-feel30{background:#E9FAFD;color:var(--ink)}.mock-feel30 .mock-pill{background:var(--ink);color:#E9FAFD}
.mock-bac{background:var(--peak);color:var(--night)}.mock-bac .mock-pill{background:var(--night);color:var(--peak)}
.mock-cah{background:var(--paper);color:var(--ink)}.mock-cah .mock-pill{background:var(--signal);color:var(--night)}
.mock-you{background:var(--night);color:var(--paper)}.mock-you .mock-pill{background:var(--signal);color:var(--night)}
.work-note{margin-top:20px;font:500 var(--t-label)/1.4 var(--f-mono);color:var(--on-paper-3);letter-spacing:.04em}

/* ---------- Process: five columns on one timeline ---------- */
.process{position:relative;isolation:isolate;background:var(--paper-deep)}
.process::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(rgba(15,52,60,.16) 1px,transparent 1.4px);background-size:14px 14px;
  -webkit-mask-image:radial-gradient(120% 70% at 50% 100%,#000 0%,transparent 70%);mask-image:radial-gradient(120% 70% at 50% 100%,#000 0%,transparent 70%)}
.process .stage:not(:last-child){background:transparent}
.process-pin{padding-block:clamp(88px,11vw,150px) clamp(72px,9vw,120px)}
.process .head{margin-bottom:clamp(36px,4.5vw,64px)}
.process .head h2{grid-column:1 / span 8}
.process .head p{grid-column:9 / span 4;font-size:var(--t-lede);color:var(--on-paper-2);max-width:30ch}
.steps{position:relative;padding-top:44px;margin-top:0}
.steps-wide{padding-inline:var(--gutter)}
.path{position:absolute;left:0;right:0;top:14px;height:1px;background:rgba(15,52,60,.16)}
.path i{position:absolute;inset:0;transform-origin:left;transform:scaleX(var(--p,0));background:linear-gradient(90deg,var(--ink) 0%,var(--signal) 70%,var(--peak) 100%)}
.stages{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.stage{position:relative;display:grid;grid-template-rows:auto auto 1fr auto;gap:14px;padding:22px clamp(16px,1.6vw,26px) 26px;min-width:0;border-left:1px solid var(--paper-line)}
.stage:first-child{border-left-color:transparent}
.sdot{position:absolute;left:50%;top:-36px;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:var(--paper);box-shadow:inset 0 0 0 2px rgba(15,52,60,.22);transition-property:background-color,box-shadow,scale;transition-duration:400ms;transition-timing-function:var(--ease-out)}
.stage[data-on="true"] .sdot{background:var(--signal);box-shadow:0 0 0 5px rgba(0,198,230,.16),0 0 14px rgba(0,198,230,.55);scale:1.05}
.stage:last-child[data-on="true"] .sdot{background:var(--peak);box-shadow:0 0 0 5px rgba(252,122,78,.16),0 0 14px rgba(252,122,78,.6)}
.stage-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.stage-n{font:800 clamp(3rem,4.4vw,5rem)/.82 var(--f-display);font-stretch:82%;letter-spacing:-.04em;font-variant-numeric:tabular-nums;color:var(--on-paper)}
.stage-tag{font:500 .625rem/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--on-paper-2);padding:7px 10px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(15,52,60,.22);white-space:nowrap}
.stage-art{position:relative;margin-inline:calc(clamp(16px,1.6vw,26px) * -.6);aspect-ratio:434 / 460;pointer-events:none}
.stage-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;scale:.86;filter:blur(6px);rotate:-6deg;
  transition-property:opacity,scale,filter,rotate;transition-duration:1100ms;transition-timing-function:var(--ease-out)}
.stage[data-on="true"] .stage-art img{opacity:1;scale:1;filter:blur(0);rotate:0deg}
@media (prefers-reduced-motion:no-preference){
  .stage-art{animation:drift 9s ease-in-out infinite alternate;animation-delay:calc(var(--si) * -1.7s)}
  .stage:nth-child(1) .stage-art{animation-name:spin-drift;animation-duration:14s}
  .stage:nth-child(5) .stage-art{animation-name:pulse-drift;animation-duration:4.2s}
}
@keyframes drift{from{translate:0 -5px;rotate:-1deg}to{translate:0 5px;rotate:1deg}}
@keyframes spin-drift{from{rotate:-4deg}to{rotate:4deg}}
@keyframes pulse-drift{0%,100%{scale:1}50%{scale:1.035}}
@media (hover:hover) and (pointer:fine){
  .stage-art img{transition-property:opacity,scale,filter,rotate,translate}
  .stage:hover .stage-art img{scale:1.06;translate:0 -6px}
}
.stage h3{font-size:clamp(1.25rem,1.6vw,1.5rem);font-weight:800;font-stretch:94%;letter-spacing:-.02em;line-height:1.1;margin-bottom:8px}
.stage p{color:var(--on-paper-2);font-size:var(--t-ui);max-width:34ch}
.out{display:grid;gap:8px;padding-top:16px;border-top:1px dashed rgba(15,52,60,.22)}
.out small{font:500 .625rem/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--on-paper-3)}
.out span{font:500 .875rem/1.3 var(--f-mono);color:var(--on-paper)}
/* Step 05: the dark card */
.stage:last-child{border-left-color:transparent;background:radial-gradient(90% 60% at 30% 45%,rgba(0,198,230,.14) 0%,transparent 60%),var(--night);color:var(--on-night);border-radius:24px;box-shadow:0 40px 80px -40px rgba(7,29,35,.7),inset 0 1px 0 rgba(255,255,255,.06)}
.stage:last-child .stage-n{color:var(--on-night)}
.stage:last-child .stage-tag{color:var(--on-night);box-shadow:inset 0 0 0 1px rgba(248,244,236,.4)}
.stage:last-child p{color:var(--on-night-2)}
.stage:last-child .out{border-top-color:rgba(248,244,236,.22)}
.stage:last-child .out small{color:var(--on-night-3)}
.stage:last-child .out span{color:var(--on-night)}
.stage:nth-last-child(2){border-right:0}

/* ---------- Services band (moves with the scroll) ---------- */
.marquee{background:var(--signal);color:var(--night);overflow:hidden;padding-block:clamp(28px,4vw,56px);display:grid;gap:clamp(4px,1vw,12px);user-select:none}
.mq-row{display:flex;align-items:center;white-space:nowrap;width:max-content;will-change:transform}
.mq-row > *{margin-right:clamp(24px,3vw,48px)}
.mq-row span{font:800 clamp(2.75rem,7.5vw,7.5rem)/1 var(--f-display);font-stretch:88%;letter-spacing:-.03em}
.mq-row span.o{color:rgba(7,29,35,.34)}
.mq-row svg{width:clamp(30px,4vw,56px);height:auto;flex:none}

/* ---------- Studio ---------- */
.studio{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:center}
.studio-copy{grid-column:1 / span 5;display:grid;gap:18px;align-content:start;justify-items:start}
.studio-copy h2{font-size:var(--t-display);font-weight:800;font-stretch:92%;letter-spacing:-.03em;line-height:.94}
.studio-copy .studio-hi{font:700 clamp(1.25rem,1.7vw,1.5rem)/1.25 var(--f-display);font-stretch:96%;letter-spacing:-.015em;color:var(--on-paper);margin-top:10px}
.studio-copy p{color:var(--on-paper-2);max-width:46ch}
.studio-copy .btn{margin-top:14px}
.studio-mark{width:72px;height:auto;color:var(--ink);margin-bottom:8px}
/* The stack: headshot in front, the desk photo tucked behind, halftone accents underneath */
#studio{overflow-x:clip}
.studio-right{grid-column:7 / span 6;min-width:0}
.stack{position:relative;isolation:isolate;padding:20% 0 0}
.accent{position:absolute;z-index:-2;pointer-events:none;height:auto;max-width:none;transform:translate3d(0,var(--ay,0px),0)}
.accent-a{width:72%;left:-30%;bottom:2%;rotate:-8deg}
.accent-b{width:44%;right:-16%;top:47%;rotate:186deg}
.dots{position:absolute;z-index:-1;right:-5%;top:46%;width:22%;aspect-ratio:1;pointer-events:none;
  background-image:radial-gradient(var(--signal) 1.2px,transparent 1.6px);background-size:9px 9px;
  -webkit-mask-image:radial-gradient(circle at 30% 50%,#000 0%,transparent 68%);mask-image:radial-gradient(circle at 30% 50%,#000 0%,transparent 68%)}
.card-back{position:absolute;z-index:-1;right:-2%;top:-6%;width:56%;margin:0;border-radius:24px;overflow:hidden;aspect-ratio:4 / 4.6;
  transform:translate3d(0,var(--by,0px),0);box-shadow:0 40px 70px -30px rgba(7,29,35,.5)}
.card-back img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.card-back figcaption{position:absolute;right:12px;bottom:12px;font:500 .6875rem/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--paper);padding:7px 10px;border-radius:999px;background:rgba(7,29,35,.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.photo{position:relative;margin:0;width:64%;display:grid;gap:14px}
.photo-zoom{position:relative;aspect-ratio:1 / 1.08;max-width:100%;border-radius:28px;overflow:hidden;background:var(--ink);box-shadow:0 50px 90px -40px rgba(7,29,35,.55)}
.photo-zoom > *{position:absolute;inset:0;width:100%;height:100%;transform:scale(var(--z,1));transform-origin:50% 40%}
.photo-zoom img{object-fit:cover;object-position:50% 30%}
.photo figcaption{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.photo figcaption b{display:block;font:600 .875rem/1.2 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--on-paper)}
.photo figcaption small{display:block;margin-top:4px;font-size:.875rem;color:var(--on-paper-2)}
.photo figcaption .loc{display:flex;align-items:center;gap:8px;font:500 .75rem/1.2 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--on-paper-3);white-space:nowrap}
.photo figcaption .loc::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--peak)}
@media (max-width:640px){.accent-b{right:-4%;top:44%}.photo{width:72%}.card-back{width:56%;right:0}.photo figcaption{flex-direction:column;gap:8px}.card-back figcaption{font-size:.5625rem;padding:6px 8px;right:12px;top:12px;bottom:auto}}
/* Glass rim: a hairline 20% white ring over the image edge, like the mixer panels */
.photo-zoom::after,.card-back::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;padding:2px;
  background:rgba(255,255,255,.2);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.card-back figcaption{z-index:3}
/* Principles: one row under everything */
.principles{grid-column:1 / -1;list-style:none;margin:clamp(48px,6vw,88px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--on-paper)}
.principles li{display:grid;gap:10px;align-content:start;padding:28px clamp(16px,2.4vw,40px) 8px;border-left:1px solid var(--paper-line)}
.principles li:first-child{border-left:0;padding-left:0}
.principles li span{font:500 .75rem/1 var(--f-mono);color:var(--on-paper-3)}
.principles h3{font-size:var(--t-h3);font-weight:800;font-stretch:92%;letter-spacing:-.02em;line-height:1.1}
.principles p{color:var(--on-paper-2);max-width:36ch}

/* ---------- Contact ---------- */
.contact{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:start}
.contact-copy{grid-column:1 / span 5;display:grid;gap:24px}
.contact-copy h2{font-size:clamp(3.2rem,8vw,8.25rem);font-weight:800;font-stretch:88%;letter-spacing:-.035em;line-height:.9}
.contact-copy h2 span{color:var(--signal)}
.contact-copy > p{color:var(--on-night-2);font-size:var(--t-lede);max-width:36ch}
.facts{margin:12px 0 0;border-top:1px solid var(--night-line)}
.fact{display:grid;grid-template-columns:96px minmax(0,1fr);gap:16px;padding-block:16px;border-bottom:1px solid var(--night-line);align-items:center}
.fact dt{font:500 var(--t-label)/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--on-night-3)}
.fact dd{margin:0;display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-weight:500;min-width:0}
.email{overflow-wrap:anywhere}
.copy{-webkit-tap-highlight-color:transparent;border:1px solid transparent;cursor:pointer;height:32px;padding-inline:10px 12px;border-radius:999px;background:rgba(248,244,236,.08);box-shadow:var(--ring-night);color:var(--on-night);font:500 .6875rem/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;transition:scale 150ms ease-out}
.copy:active{scale:.96}
.copy .swap > span{display:inline-flex;gap:6px;align-items:center}
.copy svg{width:13px;height:13px}

.form{grid-column:7 / span 6;background:var(--paper);color:var(--on-paper);color-scheme:light;border-radius:32px;padding:clamp(24px,3.4vw,44px);display:grid;gap:28px;min-width:0}
.form :focus-visible{outline-color:var(--ink)}
.form-head{padding-bottom:4px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.form-head h3{font-size:1.5rem;font-weight:800;font-stretch:94%;letter-spacing:-.02em}
.form-head span{font:500 var(--t-label)/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--on-paper-3)}
.row2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.field{display:grid;gap:10px;align-content:start;min-width:0}
.field > label,fieldset.field legend{font:500 var(--t-label)/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--on-paper-2);padding:0}
fieldset{border:0;margin:0;padding:0;min-width:0}
fieldset.field{display:block}
fieldset.field legend{display:block;margin-bottom:12px}
.input{width:100%;min-width:0;padding:14px 16px;border-radius:14px;border:1px solid rgba(15,52,60,.36);background:#FFFDF8;font-size:1rem;color:var(--on-paper);transition-property:border-color,box-shadow;transition-duration:150ms;transition-timing-function:ease-out}
.input::placeholder{color:var(--on-paper-3)}
.input:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(0,198,230,.5)}
.input[aria-invalid="true"]{border-color:#B23A0A}
textarea.input{min-height:120px;resize:vertical;line-height:1.5}
select.input{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%230F343C' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:40px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative}
.chip input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.chip span{display:inline-flex;align-items:center;gap:8px;padding:10px 14px 10px 12px;border-radius:999px;border:1px solid rgba(15,52,60,.32);font-weight:500;font-size:.9375rem;transition-property:background-color,color,border-color,scale;transition-duration:150ms;transition-timing-function:ease-out}
.chip span::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--on-paper-3);transition:background-color 150ms ease}
.chip input:checked + span{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.chip input:checked + span::before{background:var(--signal)}
.chip input:active + span{scale:.96}
.chip input:focus-visible + span{outline:2px solid var(--ink);outline-offset:3px}
@media (hover:hover) and (pointer:fine){.chip input:not(:checked):hover + span{background:var(--paper-deep)}}
.err{font-size:.875rem;color:#B23A0A}
.err:empty{display:none}
.form-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.form-foot small{font:500 var(--t-label)/1.4 var(--f-mono);color:var(--on-paper-3);max-width:30ch}
.sent{display:grid;gap:16px;align-content:center;justify-items:start;min-height:440px}
.sent > svg{width:56px;height:auto;color:var(--signal)}
.sent h3{line-height:1.05;font-size:2.25rem;font-weight:800;font-stretch:90%;letter-spacing:-.03em}
.sent p{color:var(--on-paper-2);max-width:40ch}
.sent-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.btn-line{background:transparent;color:var(--on-paper);box-shadow:inset 0 0 0 1px var(--paper-line)}
@media (hover:hover) and (pointer:fine){.btn-line:hover{background:rgba(15,52,60,.05)}}
.btn[aria-busy="true"]{opacity:.7;cursor:progress}

/* ---------- Footer ---------- */
.foot{padding-block:clamp(64px,8vw,112px) calc(env(safe-area-inset-bottom,0px) + 28px);border-top:1px solid var(--night-line)}
.foot-top{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;padding-bottom:clamp(48px,7vw,96px)}
.foot-col{grid-column:span 3;display:grid;gap:12px;align-content:start}
.foot-col:first-child{grid-column:1 / span 6}
.foot-col h4{font:500 var(--t-label)/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--on-night-3)}
.foot-col ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.foot-col a{text-decoration:none;color:var(--on-night-2);transition:color 120ms ease}
@media (hover:hover) and (pointer:fine){.foot-col a:hover{color:var(--on-night)}}
.foot-col p{font:600 clamp(1.5rem,2.6vw,2.25rem)/1.1 var(--f-display);font-stretch:94%;letter-spacing:-.02em;max-width:16ch}
.foot{position:relative;overflow:hidden;isolation:isolate}
.foot > .wrap{position:relative;z-index:1}
.wm-stage{position:relative}
.wm-waves{position:absolute;z-index:0;left:0;right:0;width:100%;top:0;height:200px;pointer-events:none}
.wordmark{position:relative;width:100%;height:auto;color:var(--on-night);overflow:visible}
.wordmark .ltr{fill:currentColor;transform-box:fill-box;transform-origin:50% 100%}
.foot-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:28px;padding-top:20px;border-top:1px solid var(--night-line);font:500 var(--t-label)/1.4 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--on-night-3)}
.foot-bottom a{color:var(--on-night-2);text-decoration:none}

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .nav-links{display:none}
  .hero h1{grid-column:1 / -1}
  .hero-side{grid-column:1 / -1}
  .deck-row{grid-column:1 / -1;grid-row:5;justify-self:start;margin-top:32px}
  .manifesto-text,.manifesto-foot{grid-column:1 / -1}
  .mf-waves{--mw:min(96vw,620px);top:clamp(24px,6vw,64px);translate:0 var(--mf-y,0px);opacity:.42}
  @keyframes mf-breathe{from{opacity:.34;scale:1}to{opacity:.48;scale:1.025}}
  .head h2,.head p{grid-column:1 / -1}
  .process .head h2,.process .head p{grid-column:1 / -1}
  .console{grid-template-columns:minmax(0,1fr)}
  .transport{grid-template-columns:auto minmax(0,1fr) auto;border-radius:32px;padding:16px}
  .transport > .wave-wrap{grid-column:1 / -1;grid-row:2;height:48px}
  .transport > .wave-wrap::before{display:none}
  .t-status{min-width:0}
  .work-row{grid-template-columns:minmax(0,1fr) auto}
  .wr-meta{display:none}
  .wr-desc{grid-column:1 / -1}
  .steps{padding-top:0;padding-left:34px}
  .path{left:6px;right:auto;top:8px;bottom:8px;width:1px;height:auto}
  .path i{transform-origin:top;transform:scaleY(var(--p,0))}
  .stages{grid-template-columns:minmax(0,1fr);gap:12px}
  .stage{grid-template-columns:minmax(0,1fr) minmax(0,.8fr);grid-template-rows:auto 1fr auto;column-gap:20px;border-left:0;border-top:1px solid var(--paper-line);padding:22px 0}
  .stage:first-child{border-top-color:transparent}
  .stage:last-child{padding:22px}
  .stage-top,.stage > div:not(.stage-art),.out{grid-column:1}
  .stage-art{grid-column:2;grid-row:1 / span 3;margin:0;align-self:center}
  .sdot{left:-34px;top:28px;margin-left:0}
  .studio-copy,.studio-right,.contact-copy,.form{grid-column:1 / -1}
  .studio-right{max-width:620px;width:100%;justify-self:center;margin-top:24px}
  .principles{grid-template-columns:minmax(0,1fr)}
  .principles li{border-left:0;border-top:1px solid var(--paper-line);padding:22px 0}
  .principles li:first-child{border-top:0}
  .foot-col{grid-column:span 6}
  .foot-col:first-child{grid-column:1 / -1}
}
@media (max-width:760px){
  :root{--hdr:64px}
  .nav .btn{display:none}
  .menu-btn{display:grid}
  .brand svg{height:31px}
  .hero{min-height:0;flex-direction:column}
  .gl-fallback{right:auto;left:50%;top:calc(var(--hdr) + 20px);translate:-50% 0;width:56%}
  .hero-inner{padding-top:calc(var(--hdr) + 72vw + 32px)}
  .deck-row{grid-row:1;justify-self:center;margin:0 0 28px}
  .hero .eyebrow{grid-row:2;margin-bottom:18px}
  .hero .eyebrow{justify-content:center;text-align:center}
  .hero h1{grid-row:3;justify-self:center;text-align:center;margin-inline:auto}
  .hero-side{grid-row:4;grid-column:1 / -1;justify-items:center;text-align:center}
  .hero-side .lede{margin-inline:auto}
  .cta-row{justify-content:center}
  .readout{min-width:0}
  .strips{gap:4px;padding:4px;border-radius:26px}
  .strip{padding:14px 2px 6px;gap:12px;border-radius:22px}
  .leds,.db{display:none}
  .t-status span{display:none}
  .fader-area{height:180px}
  .ch-tab b{font-size:.8125rem}
  .ch-tab small{display:none}
  .wr-thumb{display:block;grid-column:1 / -1;max-width:100%}
  .wr-thumb .mock{aspect-ratio:16/10;position:relative}
  .stage{grid-template-columns:minmax(0,1fr)}
  .stage-art{grid-column:1;grid-row:auto;width:78%;max-width:300px;justify-self:center;margin:2px 0 6px}
  .row2{grid-template-columns:minmax(0,1fr)}
  .fact{grid-template-columns:minmax(0,1fr);gap:8px}
}