/* ============================================================
   BINARY NOTES · V3 — "The Installation"
   An extension of the Rohit Kulkarni v5 design system:
   near-monochrome bone/ink editorial · vermilion accent (from
   the [ B1NARY N●TES ] logo) · Albert Sans / Cormorant Garamond
   / IBM Plex Mono · generative light-field canvases (teamLab /
   Max Richter / Ólafur Arnalds) in a warm multicolour spectrum —
   no blue, no green.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Albert+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --paper:#F6F4ED; --sand:#EDEAE0; --silver:#B4B1A6; --gun:#87847B;
  --mist:#4A4742; --ink:#131110; --rec:#E23A1B; --rec-bright:#FF4A22;
  --sans:'Albert Sans',sans-serif; --serif:'Cormorant Garamond',serif; --mono:'IBM Plex Mono',monospace;
  --wrap:1340px; --pad:56px;
  --line-ink:rgba(19,17,16,.14); --line-pap:rgba(246,244,237,.16);
}
/* ── THEME (light default; dark flips the editorial tokens) ── */
html{color-scheme:light;}
[data-theme="dark"]{
  color-scheme:dark;
  --paper:#12100D; --sand:#1D1A15; --silver:#6F6C64; --gun:#94918A;
  --mist:#BAB7AF; --ink:#F3F1E9;
  --line-ink:rgba(243,241,233,.14); --line-pap:rgba(19,17,16,.20);
}
/* always-dark surfaces keep their cinema-black look in both themes */
[data-theme="dark"] :is(.nav,.drawer,.dark,.hero,.acard,.room,.idea-fig,.cta,.foot,#boot){
  --paper:#F6F4ED; --sand:#EDEAE0; --silver:#B4B1A6; --gun:#87847B;
  --mist:#4A4742; --ink:#131110;
  --line-ink:rgba(19,17,16,.14); --line-pap:rgba(246,244,237,.16);
}
[data-theme="dark"] body{background:#12100D;}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;}
body{font-family:var(--sans);background:var(--paper);color:var(--ink);
  font-size:17px;line-height:1.5;overflow-x:hidden;}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}
canvas{display:block;}
::selection{background:var(--rec);color:var(--paper);}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

/* ── layout ── */
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--pad);}
.section{padding-block:120px;position:relative;}
.section--tight{padding-block:84px;}
.dark{background:var(--ink);color:var(--paper);}
.dark ::selection{background:var(--paper);color:var(--ink);}

/* ── type ── */
.eyebrow{display:inline-flex;align-items:center;gap:11px;font-family:var(--mono);font-size:12px;
  font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--mist);}
.dark .eyebrow,.cta .eyebrow{color:var(--silver);}
.eyebrow .num{color:var(--rec);}
.serif-i{font-family:var(--serif);font-style:italic;font-weight:500;text-transform:none;letter-spacing:0;}
.h-sec{font-size:clamp(38px,4.8vw,72px);font-weight:800;letter-spacing:-.03em;line-height:.98;text-transform:none;}
.lead{font-size:clamp(20px,2.1vw,27px);line-height:1.34;font-weight:500;letter-spacing:-.012em;}
.body{font-size:17px;line-height:1.62;color:var(--mist);}
.dark .body{color:var(--silver);}
.muted{color:var(--gun);}

/* ── REC dot / blink (vermilion) ── */
.recdot{position:relative;display:inline-block;width:var(--rd,10px);height:var(--rd,10px);border-radius:50%;
  background:var(--rec);vertical-align:middle;flex:none;}
.recdot::after{content:'';position:absolute;inset:-4px;border-radius:50%;border:1px solid var(--rec);
  opacity:.6;animation:recpulse 2s cubic-bezier(.2,.6,.3,1) infinite;}
@keyframes recpulse{0%{transform:scale(.6);opacity:.8;}75%{transform:scale(2.1);opacity:0;}100%{opacity:0;}}
.rec-blink{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--rec);flex:none;
  box-shadow:0 0 9px rgba(226,58,27,.7);animation:recblink 1.15s steps(1,end) infinite;}
@keyframes recblink{0%,52%{opacity:1;}53%,100%{opacity:.15;}}

/* ── the [ B1NARY N●TES ] wordmark ── */
.bn{display:inline-flex;align-items:center;gap:.32em;font-weight:800;letter-spacing:.05em;line-height:1;
  text-transform:uppercase;white-space:nowrap;}
.bn .br{font-weight:500;opacity:.92;transform:translateY(-.05em);}
.bn i{font-style:normal;}
.bn .one,.hero-word .one{color:var(--rec);}
.bn .odot,.hero-word .odot,.boot-word .odot{display:inline-block;width:.6em;height:.6em;border-radius:50%;
  background:var(--rec);vertical-align:.055em;margin:0 .04em;}
.bn--nav{font-size:15px;}
.bn--foot{font-size:17px;}

/* ── buttons ── */
.btn{display:inline-flex;align-items:center;gap:.7em;font-weight:600;font-size:14px;letter-spacing:.005em;
  padding:11px 11px 11px 22px;border-radius:40px;cursor:pointer;background:var(--ink);color:var(--paper);
  white-space:nowrap;transition:background .28s,color .28s,transform .28s;border:1px solid transparent;}
.btn .chip{width:30px;height:30px;border-radius:50%;background:var(--paper);position:relative;flex:none;
  transition:background .28s,transform .35s;}
.btn .chip::before{content:'';position:absolute;inset:0;background:var(--ink);transition:background .28s;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2' d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/15px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2' d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/15px no-repeat;}
.btn:hover{background:var(--rec);color:var(--paper);}
.btn:hover .chip{transform:translateX(2px);}
/* on always-dark surfaces the solid button inverts to bone */
:is(.dark,.nav,.foot) .btn{background:var(--paper);color:var(--ink);}
:is(.dark,.nav,.foot) .btn .chip{background:var(--ink);}
:is(.dark,.nav,.foot) .btn .chip::before{background:var(--paper);}
:is(.dark,.nav,.foot) .btn:hover{background:var(--rec);color:var(--paper);}
:is(.dark,.nav,.foot) .btn:hover .chip{background:var(--paper);}
:is(.dark,.nav,.foot) .btn:hover .chip::before{background:var(--ink);}
.btn--ghost,:is(.dark,.nav,.foot) .btn--ghost{background:transparent;color:var(--paper);border-color:var(--line-pap);}
.btn--ghost .chip,:is(.dark,.nav,.foot) .btn--ghost .chip{background:var(--paper);}
.btn--ghost .chip::before,:is(.dark,.nav,.foot) .btn--ghost .chip::before{background:var(--ink);}
.btn--ghost:hover,:is(.dark,.nav,.foot) .btn--ghost:hover{background:var(--paper);color:var(--ink);}

/* ============================================================ NAV */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;
  justify-content:space-between;gap:24px;padding:18px var(--pad);color:var(--paper);
  transition:background .4s,padding .4s,box-shadow .4s;}
.nav.is-scrolled{background:color-mix(in srgb,var(--ink) 82%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding-block:12px;box-shadow:0 1px 0 var(--line-pap);}
.nav-left{display:flex;align-items:center;gap:12px;}
.nav-studio{font-family:var(--mono);font-size:10px;letter-spacing:.03em;color:var(--silver);white-space:nowrap;
  border-left:1px solid var(--line-pap);padding-left:12px;display:inline-flex;align-items:center;gap:8px;text-transform:uppercase;}
.nav-links{display:flex;gap:24px;}
.nav-links a{font-size:14px;font-weight:500;color:var(--silver);letter-spacing:.005em;transition:color .2s;position:relative;}
.nav-links a:hover{color:var(--rec);}
.nav-links a.is-active{color:var(--paper);}
.nav-links a::before{content:'';position:absolute;left:0;top:-7px;width:5px;height:5px;border-radius:50%;
  background:var(--rec);opacity:0;transition:width .42s cubic-bezier(.2,.7,.3,1),height .3s,border-radius .42s,opacity .25s;}
.nav-links a.is-active::before{opacity:1;}
.nav-links a:hover::before{opacity:1;width:100%;height:2px;border-radius:2px;top:-6px;}
.nav-right{display:flex;align-items:center;gap:12px;}
.nav-drone{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:10px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--silver);background:none;cursor:pointer;
  border:1px solid var(--line-pap);border-radius:40px;padding:10px 14px;transition:border-color .25s,color .25s;}
.nav-drone .eq{display:flex;align-items:flex-end;gap:2.5px;height:11px;}
.nav-drone .eq i{width:2px;height:4px;background:currentColor;transition:background .25s;}
.nav-drone.on{color:var(--rec);border-color:rgba(226,58,27,.5);}
.nav-drone.on .eq i{animation:eqb .9s ease-in-out infinite;}
.nav-drone.on .eq i:nth-child(2){animation-delay:.15s;}
.nav-drone.on .eq i:nth-child(3){animation-delay:.32s;}
.nav-drone.on .eq i:nth-child(4){animation-delay:.09s;}
.nav-drone.on .eq i:nth-child(5){animation-delay:.24s;}
@keyframes eqb{0%,100%{height:4px;}50%{height:11px;}}
.nav-drone:hover{border-color:var(--gun);}
.nav-theme{width:42px;height:42px;border-radius:50%;border:1px solid var(--line-pap);background:none;
  cursor:pointer;display:flex;align-items:center;justify-content:center;color:inherit;flex:none;
  transition:border-color .2s,transform .4s;}
.nav-theme:hover{border-color:var(--gun);}
.nav-theme:active{transform:scale(.9) rotate(28deg);}
.nav-theme svg{width:17px;height:17px;}
.nav-burger{display:none;width:42px;height:42px;border-radius:50%;border:1px solid var(--line-pap);
  background:none;cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:4px;color:inherit;}
.nav-burger span{width:16px;height:1.6px;background:currentColor;transition:.3s;}
.nav-burger[aria-expanded="true"] span:first-child{transform:translateY(2.8px) rotate(45deg);}
.nav-burger[aria-expanded="true"] span:last-child{transform:translateY(-2.8px) rotate(-45deg);}

/* mobile drawer */
.drawer{position:fixed;inset:0;z-index:99;background:var(--ink);color:var(--paper);
  transform:translateY(-100%);visibility:hidden;overflow-y:auto;
  transition:transform .55s cubic-bezier(.7,0,.2,1),visibility 0s linear .55s;
  display:flex;flex-direction:column;justify-content:center;padding:0 var(--pad);}
.drawer.is-open{transform:translateY(0);visibility:visible;transition:transform .55s cubic-bezier(.7,0,.2,1);}
.drawer-links{display:flex;flex-direction:column;gap:6px;}
.drawer a{display:block;font-size:clamp(28px,9vw,60px);font-weight:800;letter-spacing:-.03em;text-transform:uppercase;line-height:1.05;
  color:var(--paper);transition:color .2s,padding .35s;}
.drawer a:hover{color:var(--rec);padding-left:14px;}
.drawer-meta{position:absolute;bottom:40px;left:var(--pad);right:var(--pad);display:flex;justify-content:space-between;
  gap:16px;flex-wrap:wrap;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--silver);text-transform:uppercase;}

/* ============================================================ BOOT INTRO */
#boot{position:fixed;inset:0;z-index:9999;background:#131110;color:#F6F4ED;display:grid;place-items:center;overflow:hidden;
  animation:bootSafety 0s linear 4.6s forwards;}
@keyframes bootSafety{to{opacity:0;visibility:hidden;pointer-events:none;}}
#boot.done{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .6s ease;}
.boot-stage{display:flex;flex-direction:column;align-items:center;gap:34px;padding:0 20px;}
.boot-take,.boot-status{font-family:var(--mono);font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--gun);
  display:flex;align-items:center;gap:12px;}
.boot-take::before,.boot-take::after{content:'';width:26px;height:1px;background:var(--line-pap);}
.boot-status .rd{width:8px;height:8px;border-radius:50%;background:var(--gun);transition:background .4s;}
#boot.is-live .boot-status{color:var(--silver);}
#boot.is-live .boot-status .rd{background:var(--rec);box-shadow:0 0 9px rgba(226,58,27,.8);animation:recblink 1.05s steps(1,end) infinite;}
.boot-mark{display:flex;align-items:center;gap:.34em;font-weight:800;font-size:clamp(30px,6.6vw,88px);
  letter-spacing:.05em;line-height:1;text-transform:uppercase;white-space:nowrap;}
.boot-mark .bbr{font-weight:500;color:var(--silver);transform:translateY(-.05em);}
.boot-word .bl{display:inline-block;min-width:.64ch;text-align:center;}
.boot-word .bl.bit{color:var(--gun);}
.boot-word .bl.set-one{color:var(--rec);}
.boot-word .odot{animation:dotin .5s cubic-bezier(.2,1.2,.4,1) both;}
@keyframes dotin{from{transform:scale(.2);opacity:0;}to{transform:scale(1);opacity:1;}}

/* ============================================================ HERO */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;overflow:hidden;}
.hero-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;}
.hero-grad{position:absolute;inset:0;z-index:1;pointer-events:none;background:
  linear-gradient(180deg,rgba(19,17,16,.66) 0%,rgba(19,17,16,.08) 30%,rgba(19,17,16,.14) 62%,rgba(19,17,16,.9) 100%);}
.hero-in{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;padding:112px var(--pad) 44px;}
.hero-top{display:flex;justify-content:space-between;gap:20px;font-family:var(--mono);font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--silver);}
.hero-top .live{display:flex;align-items:center;gap:10px;color:var(--paper);text-align:right;}
.hero-mid{flex:1;display:flex;flex-direction:column;justify-content:center;padding-block:34px;}
.hero-eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--silver);
  margin-bottom:18px;padding-left:6px;}
.hero-mark{display:flex;align-items:stretch;gap:clamp(16px,2.6vw,40px);--bw:clamp(6px,.85vw,13px);}
.hbr{flex:none;width:clamp(18px,3vw,48px);border:0 solid currentColor;color:var(--paper);opacity:.94;}
.hbr--l{border-width:var(--bw) 0 var(--bw) var(--bw);}
.hbr--r{border-width:var(--bw) var(--bw) var(--bw) 0;}
.hero-word{font-weight:800;font-size:clamp(56px,14.6vw,208px);line-height:.85;letter-spacing:-.035em;text-transform:uppercase;}
.hero-word .odot{width:.56em;height:.56em;vertical-align:.06em;margin:0 .05em;
  box-shadow:0 0 clamp(14px,2.4vw,38px) rgba(255,74,34,.45);}
.hero-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;}
.hero-foot-l{max-width:520px;}
.hero-tag{font-weight:800;text-transform:uppercase;font-size:clamp(22px,2.9vw,40px);line-height:.96;letter-spacing:-.02em;}
.hero-intro{margin-top:14px;font-size:16px;line-height:1.55;color:var(--silver);max-width:440px;}
.hero-cta{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap;}
.scrollcue{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--silver);}
.scrollcue .dn{width:14px;height:14px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2' d='M12 5v14M6 13l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2' d='M12 5v14M6 13l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;
  animation:bob 1.9s ease-in-out infinite;}
@keyframes bob{0%,100%{transform:translateY(0);}50%{transform:translateY(4px);}}

/* ============================================================ MARQUEE */
.marquee{overflow:hidden;white-space:nowrap;border-block:1px solid var(--line-ink);padding-block:22px;}
.dark .marquee,.marquee.on-dark{border-color:var(--line-pap);}
.marquee-track{display:inline-flex;gap:42px;animation:marq 34s linear infinite;will-change:transform;}
.marquee:hover .marquee-track{animation-play-state:paused;}
.marquee-item{font-weight:800;font-size:28px;letter-spacing:-.02em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:42px;color:var(--ink);}
.dark .marquee-item,.marquee.on-dark .marquee-item{color:var(--paper);}
.marquee-item .dot{width:10px;height:10px;border-radius:50%;background:var(--rec);flex:none;}
@keyframes marq{to{transform:translateX(-50%);}}

/* ============================================================ section heads */
.idea-head,.sound-head,.rep-head,.rooms-head{display:grid;grid-template-columns:1.06fr .94fr;gap:44px;align-items:end;margin-bottom:60px;}

/* ============================================================ 01 · IDEA */
.idea-grid{display:grid;grid-template-columns:.78fr 1.22fr;gap:52px;align-items:stretch;}
.idea-cols{display:flex;flex-direction:column;gap:22px;justify-content:center;}
.idea-cols .body b{color:var(--ink);}
.idea-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;}
.idea-chips span{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mist);border:1px solid var(--line-ink);border-radius:40px;padding:7px 13px;}
.idea-chips .is-machine{color:var(--rec);border-color:rgba(226,58,27,.45);}
.idea-fig{position:relative;background:var(--ink);border-radius:22px;overflow:hidden;min-height:460px;}
.idea-fig canvas{position:absolute;inset:0;width:100%;height:100%;}
.fig-cap{position:absolute;left:18px;bottom:14px;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
  color:rgba(246,244,237,.5);text-transform:uppercase;}

/* ============================================================ 02 · SOUND (four bodies) */
.acards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.acard{background:#1A1714;border:1px solid var(--line-pap);border-radius:22px;overflow:hidden;padding-bottom:22px;
  transition:transform .45s cubic-bezier(.2,.7,.3,1),border-color .3s;}
.acard:hover{transform:translateY(-8px);border-color:rgba(246,244,237,.3);}
.acard-viz{position:relative;aspect-ratio:1/1.18;background:#131110;}
.acard-viz canvas{position:absolute;inset:0;width:100%;height:100%;}
.acard-meta{display:flex;justify-content:space-between;align-items:center;padding:16px 18px 0;
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--silver);}
.acard-no{width:22px;height:22px;border-radius:50%;border:1px solid var(--line-pap);display:grid;place-items:center;
  font-size:9px;color:var(--paper);}
.acard-tag{color:var(--rec);}
.acard h3{font-size:21px;font-weight:800;letter-spacing:-.015em;padding:10px 18px 6px;color:var(--paper);}
.acard p{font-size:14px;line-height:1.55;color:var(--silver);padding:0 18px;}

/* ============================================================ PHILOSOPHY */
.phil{position:relative;background:var(--paper);color:var(--ink);overflow:hidden;padding:120px var(--pad);}
.phil-in{position:relative;z-index:1;max-width:var(--wrap);margin:0 auto;text-align:center;}
.phil-tags{display:flex;justify-content:center;gap:40px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gun);margin-bottom:40px;flex-wrap:wrap;}
.phil-stack{font-weight:800;font-size:clamp(30px,6.7vw,102px);line-height:1;letter-spacing:-.04em;text-transform:uppercase;
  display:flex;flex-direction:column;align-items:center;gap:clamp(6px,.9vw,16px);}
.phil-line{display:flex;align-items:center;justify-content:center;gap:clamp(12px,1.9vw,32px);}
.phil-paren{font-weight:400;font-size:1.2em;line-height:1;letter-spacing:-.04em;transform:translateY(-.04em);}
.phil-knob{width:clamp(28px,4vw,56px);flex:none;color:currentColor;}
.phil-knob svg{display:block;width:100%;height:auto;}
.phil-knob--ghost{visibility:hidden;}
.phil-knob--rec{color:var(--rec);}

/* ============================================================ 03 · REPERTOIRE */
.rep{overflow:hidden;}
.rep-bg{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:.9;}
.rep::after{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(19,17,16,.88),rgba(19,17,16,.32) 30%,rgba(19,17,16,.32) 72%,rgba(19,17,16,.9));}
.rep-in{position:relative;z-index:1;}
.score{border-top:1px solid var(--line-pap);}
.row{display:grid;grid-template-columns:56px minmax(0,1fr) minmax(220px,.85fr) auto;gap:34px;align-items:center;
  padding:28px 16px;border-bottom:1px solid var(--line-pap);position:relative;overflow:hidden;
  transition:background .4s,padding .4s;}
.row:hover{background:rgba(246,244,237,.055);padding-inline:26px;}
.row-n{font-family:var(--mono);font-size:14px;color:var(--gun);transition:color .3s;align-self:start;padding-top:2px;}
.row:hover .row-n{color:var(--rowc,var(--rec));}
.row-t{font-size:clamp(23px,2.4vw,32px);font-weight:700;letter-spacing:-.02em;line-height:1.04;color:var(--paper);}
.row-d{color:var(--silver);font-size:15px;line-height:1.5;margin-top:8px;max-width:430px;}
.staff{position:relative;height:84px;align-self:center;}
.staff-lines{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:44px;
  background:repeating-linear-gradient(to bottom,rgba(246,244,237,.34) 0 1px,transparent 1px 11px);opacity:.55;transition:opacity .3s;}
.staff-bar{position:absolute;top:calc(50% - 22px);height:44px;width:1.5px;background:rgba(246,244,237,.34);opacity:.6;}
.staff-bar.l{left:0;}
.staff-bar.r{right:0;}
.row:hover .staff-lines{opacity:.85;}
.note{position:absolute;left:var(--x,42%);top:calc(50% - (var(--p) * 5.5px));width:23px;height:17px;border-radius:50%;
  background:var(--paper);transform:translateY(-50%) rotate(-21deg);z-index:2;
  transition:background .3s,transform .4s cubic-bezier(.2,.7,.3,1);}
.note::after{content:'';position:absolute;right:0;top:-27px;width:2.4px;height:29px;background:var(--paper);
  transform:rotate(21deg);transform-origin:bottom right;transition:background .3s;}
.row:hover .note{background:var(--rowc,var(--rec));transform:translateY(-50%) rotate(-21deg) scale(1.14);}
.row:hover .note::after{background:var(--rowc,var(--rec));}
.playhead{position:absolute;top:calc(50% - 27px);left:0;height:54px;width:2px;background:var(--rowc,var(--rec));opacity:0;z-index:1;
  box-shadow:0 0 10px var(--rowc,var(--rec));}
.row:hover .playhead{animation:sweep 1.15s cubic-bezier(.3,.55,.3,1) forwards;}
@keyframes sweep{0%{left:0;opacity:0;}12%{opacity:1;}92%{opacity:1;}100%{left:100%;opacity:0;}}
.row-pal{display:flex;gap:5px;justify-self:end;align-self:start;padding-top:8px;}
.row-pal i{width:8px;height:8px;border-radius:50%;opacity:.5;transition:opacity .3s,transform .3s;}
.row:hover .row-pal i{opacity:1;transform:scale(1.25);}
.rep-arc{margin-top:56px;}
.rep-arc svg{width:100%;height:110px;overflow:visible;}
.arc-line{fill:none;stroke:rgba(246,244,237,.28);stroke-width:1.5;stroke-dasharray:3 8;stroke-linecap:round;}
.arc-dot{fill:var(--rec-bright);filter:drop-shadow(0 0 6px rgba(255,74,34,.8));}
.rep-arc-labels{display:flex;justify-content:space-between;gap:14px;margin-top:12px;
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--gun);text-transform:uppercase;}

/* ============================================================ 04 · ROOMS */
.rooms-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.room{position:relative;border-radius:22px;overflow:hidden;min-height:480px;background:#151210;color:#F6F4ED;
  display:flex;align-items:flex-end;border:1px solid var(--line-ink);
  transition:transform .45s cubic-bezier(.2,.7,.3,1);}
.room:hover{transform:translateY(-8px);}
.room canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;}
.room-grad{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(19,17,16,.14),rgba(19,17,16,.02) 40%,rgba(19,17,16,.88) 100%);}
.room-body{position:relative;z-index:2;padding:22px;}
.room-tag{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--silver);margin-bottom:10px;}
.room h3{font-size:clamp(21px,1.8vw,26px);font-weight:800;letter-spacing:-.02em;line-height:1;color:var(--paper);}
.room p{margin-top:9px;font-size:14px;line-height:1.5;color:var(--silver);max-width:300px;}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:72px;
  border-top:1px solid var(--line-ink);padding-top:30px;}
.stat b{font-size:clamp(34px,3.6vw,56px);font-weight:800;letter-spacing:-.03em;line-height:1;display:block;}
.stat b{color:var(--ink);}
.stat span{display:block;margin-top:8px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--gun);max-width:210px;line-height:1.5;}

/* ============================================================ 05 · ROAD */
.road-steps{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:44px;
  border-top:2px solid var(--line-ink);padding-top:30px;}
.rstep{position:relative;}
.rstep::before{content:'';position:absolute;left:0;top:-36px;width:9px;height:9px;border-radius:50%;background:var(--rec);}
.rstep-when{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--rec);}
.rstep h3{font-size:clamp(22px,2.2vw,30px);font-weight:800;letter-spacing:-.02em;margin:10px 0 8px;}
.rstep .body{font-size:15.5px;}
.road-pulse{position:absolute;top:-7px;left:0;width:12px;height:12px;border-radius:50%;background:var(--rec-bright);
  box-shadow:0 0 16px rgba(255,74,34,.8);animation:roadrun 8s linear infinite;}
@keyframes roadrun{0%{left:0;opacity:0;}6%{opacity:1;}94%{opacity:1;}100%{left:calc(100% - 12px);opacity:0;}}

/* ============================================================ 06 · BOOKING (CTA) */
.cta{background:var(--ink);color:var(--paper);text-align:center;padding:130px var(--pad);position:relative;}
.cta .eyebrow{margin-bottom:24px;justify-content:center;}
.cta-h{font-weight:800;text-transform:uppercase;font-size:clamp(40px,7.6vw,116px);line-height:.92;letter-spacing:-.035em;}
.cta-h .serif-i{font-weight:500;font-size:.98em;}
.cta-sub{margin:26px auto 0;max-width:560px;font-size:17px;line-height:1.6;color:var(--silver);}
.book-rows{max-width:780px;margin:44px auto 36px;border-top:1px solid var(--line-pap);text-align:left;}
.book-row{display:grid;grid-template-columns:120px 1fr auto;gap:18px;align-items:center;padding:17px 8px;
  border-bottom:1px solid var(--line-pap);transition:background .25s,padding .25s;}
.book-row:hover{background:rgba(246,244,237,.055);padding-inline:16px;}
.book-k{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--silver);}
.book-v{font-weight:700;font-size:clamp(17px,2.2vw,25px);letter-spacing:-.015em;color:var(--paper);}
.book-ar{color:var(--rec);font-size:19px;opacity:.45;transform:translate(-4px,2px);transition:.3s;}
.book-row:hover .book-ar{opacity:1;transform:none;}

/* ============================================================ FOOTER */
.foot{background:var(--ink);color:var(--paper);padding:0 var(--pad) 30px;position:relative;overflow:hidden;}
/* BN·108 — the footer is a plugin */
.foot-plugin{position:relative;margin:0 calc(-1*var(--pad)) 56px;padding:0 var(--pad);
  background:linear-gradient(180deg,#191512 0%,#151210 100%);
  border-bottom:1px solid var(--line-pap);box-shadow:inset 0 1px 0 rgba(246,244,237,.07);}
.plug-bar{display:flex;align-items:center;gap:16px;padding:14px 0 12px;flex-wrap:wrap;
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--silver);
  border-bottom:1px solid rgba(246,244,237,.07);}
.plug-pwr{position:relative;width:34px;height:34px;border-radius:50%;border:1px solid var(--line-pap);
  background:none;cursor:pointer;flex:none;display:grid;place-items:center;transition:border-color .25s,box-shadow .25s;}
.plug-pwr i{width:9px;height:9px;border-radius:50%;background:var(--gun);transition:background .25s,box-shadow .25s;}
.plug-pwr:hover{border-color:var(--gun);}
.plug-pwr.on{border-color:rgba(226,58,27,.6);box-shadow:0 0 14px rgba(226,58,27,.25);}
.plug-pwr.on i{background:var(--rec);box-shadow:0 0 9px rgba(226,58,27,.9);animation:recblink 1.15s steps(1,end) infinite;}
.plug-name{color:var(--paper);letter-spacing:.1em;}
.plug-name b{color:var(--rec);font-weight:500;margin-left:6px;}
.plug-tag{border-left:1px solid var(--line-pap);padding-left:16px;}
.plug-hint{margin-left:auto;color:var(--gun);font-size:9px;}
.plug-rack{display:flex;align-items:stretch;gap:22px;padding:18px 0 22px;}
.plug-scope{position:relative;flex:none;width:220px;border:1px solid rgba(246,244,237,.1);border-radius:10px;
  background:#100E0C;overflow:hidden;}
.plug-scope canvas{position:absolute;inset:0;width:100%;height:100%;}
.plug-cap{position:absolute;left:9px;top:7px;font-family:var(--mono);font-size:8px;letter-spacing:.2em;
  color:rgba(246,244,237,.35);}
.plug-seq{flex:1;display:grid;grid-template-columns:repeat(16,1fr);gap:6px;min-height:96px;}
.pstep{position:relative;border:1px solid rgba(246,244,237,.1);border-radius:6px;background:rgba(246,244,237,.02);
  cursor:pointer;padding:0;transition:border-color .2s,background .2s;touch-action:none;}
.pstep:nth-child(4n+1){border-color:rgba(246,244,237,.2);}
.pstep:hover{border-color:rgba(246,244,237,.35);}
.pstep .pnote{position:absolute;left:4px;right:4px;height:9px;border-radius:3px;background:rgba(246,244,237,.14);
  bottom:var(--py,20%);transition:background .15s,box-shadow .15s;}
.pstep.on .pnote{background:var(--rec);box-shadow:0 0 9px rgba(226,58,27,.55);}
.pstep.cur{background:rgba(246,244,237,.07);border-color:rgba(246,244,237,.4);}
.pstep.cur.on .pnote{background:var(--rec-bright);box-shadow:0 0 14px rgba(255,74,34,.9);}
.plug-knobs{flex:none;display:flex;gap:18px;align-items:center;}
.pknob{display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--silver);cursor:ns-resize;
  font-family:var(--mono);font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;user-select:none;
  -webkit-user-select:none;touch-action:none;outline-offset:4px;}
.pknob svg{width:44px;height:44px;display:block;}
.pknob .pk-ind{transform-origin:22px 22px;transform:rotate(var(--kr,0deg));}
.pknob:hover,.pknob:focus-visible{color:var(--paper);}
.pknob.live{color:var(--rec);}
.foot-top{display:flex;justify-content:space-between;align-items:center;gap:40px;flex-wrap:wrap;
  padding-bottom:56px;border-bottom:1px solid var(--line-pap);}
.foot-brand{display:flex;align-items:center;gap:12px;}
.foot-nav{display:flex;gap:26px;flex-wrap:wrap;}
.foot-nav a{font-size:15px;color:var(--silver);transition:color .2s;}
.foot-nav a:hover{color:var(--rec);}
.foot-legal{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-top:26px;
  font-family:var(--mono);font-size:11px;letter-spacing:.05em;color:var(--gun);}
.foot-legal .serif-i{color:var(--silver);letter-spacing:.02em;}

/* ============================================================ reveal */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .9s cubic-bezier(.2,.7,.3,1),transform .9s cubic-bezier(.2,.7,.3,1);}
.reveal.in{opacity:1;transform:none;}
.reveal[data-d="1"]{transition-delay:.08s;}
.reveal[data-d="2"]{transition-delay:.16s;}
.reveal[data-d="3"]{transition-delay:.24s;}

/* ============================================================ screenshot / reduced-motion */
body.shot *,body.shot *::before,body.shot *::after{animation:none!important;transition:none!important;}
body.shot .reveal{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none;}
  .marquee-track,.recdot::after,.rec-blink,.road-pulse,.scrollcue .dn{animation:none!important;}
  html{scroll-behavior:auto;}
  #boot{display:none!important;}
}

/* ============================================================ responsive */
@media(max-width:1180px){
  .acards{grid-template-columns:repeat(2,1fr);}
  .rooms-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:1040px){
  :root{--pad:32px;}
  .nav-links,.nav-drone .lbl{display:none;}
  .nav-burger{display:flex;}
  .section{padding-block:84px;}
  .idea-head,.sound-head,.rep-head,.rooms-head{grid-template-columns:1fr;gap:22px;align-items:start;margin-bottom:44px;}
  .idea-grid{grid-template-columns:1fr;}
  .idea-fig{min-height:320px;}
  .row{grid-template-columns:46px 1fr;gap:16px;}
  .staff,.row-pal{display:none;}
  .room{min-height:400px;}
  .stats{grid-template-columns:repeat(2,1fr);gap:32px 24px;}
}
@media(max-width:900px){
  .plug-rack{flex-wrap:wrap;}
  .plug-scope{width:100%;height:64px;order:2;}
  .plug-seq{flex:1 1 100%;order:1;min-height:80px;}
  .plug-knobs{order:3;width:100%;justify-content:center;}
}
@media(max-width:640px){
  :root{--pad:20px;}
  body{font-size:16px;}
  .nav-studio,.nav-right .btn{display:none;}
  .section{padding-block:64px;}
  .hero-in{padding-top:96px;}
  .hero-top{flex-direction:column;gap:8px;}
  .hero-top .live{text-align:left;}
  .hero-foot{flex-direction:column;align-items:flex-start;gap:24px;}
  .scrollcue{display:none;}
  .marquee-item{font-size:21px;}
  .acards{grid-template-columns:1fr;}
  .rooms-grid{grid-template-columns:1fr;}
  .phil-stack{font-size:clamp(24px,7.6vw,40px);}
  .road-steps{grid-template-columns:1fr;border-top:0;padding-top:0;gap:30px;}
  .rstep{border-top:2px solid var(--line-ink);padding-top:20px;}
  .rstep::before{top:-5.5px;}
  .road-pulse{display:none;}
  .book-row{grid-template-columns:86px 1fr auto;}
  .plug-seq{gap:3px;}
  .pstep{border-radius:4px;}
  .pstep .pnote{left:2px;right:2px;height:7px;}
  .plug-hint{display:none;}
  .plug-knobs{gap:12px;}
}