:root{
    --bg:#0A0A0D; --bg2:#0E0E13; --surface:#14141B; --surface2:#1A1A23;
    --ink:#F2EFE8; --muted:#8F8D99; --faint:#55535E;
    --accent:#E9A13B; --accent-dim:#8A5F1F; --accent-glow:rgba(233,161,59,.14);
    --line:rgba(242,239,232,.09); --line-strong:rgba(242,239,232,.16);
    --z-raised:1; --z-nav:10; --z-menu:20;
    --disp:"Archivo",ui-sans-serif,"Arial Narrow",Arial,sans-serif;
    --body:"Archivo",ui-sans-serif,Helvetica,Arial,sans-serif;
    --mono:"Archivo",ui-sans-serif,Helvetica,Arial,sans-serif;
    --sp1:.5rem; --sp2:1rem; --sp3:2rem; --sp4:3.5rem; --sp5:6.5rem;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:1.0625rem;line-height:1.6;overflow-x:hidden}
  img{max-width:100%;display:block}
  a{color:inherit}
  section{scroll-margin-top:76px}
  .wrap{max-width:1180px;margin-inline:auto;padding-inline:clamp(1.25rem,4vw,2.5rem)}
  .eyebrow{font-family:var(--disp);font-weight:700;font-stretch:112%;font-size:.78rem;letter-spacing:.24em;text-transform:uppercase;color:var(--accent)}
  h1,h2,h3{font-family:var(--disp);text-wrap:balance}
  .h2{font-size:clamp(1.9rem,4.2vw,3rem);font-weight:800;font-stretch:115%;text-transform:uppercase;letter-spacing:.01em;line-height:1.05;margin-top:var(--sp2)}
  .sectionhead{margin-bottom:var(--sp3)}
  .sectionhead p.lede{color:var(--muted);max-width:34em;margin-top:1rem}

  /* ---------- nav ---------- */
  .nav{position:fixed;inset:0 0 auto 0;z-index:var(--z-nav);transition:background .3s,border-color .3s;border-bottom:1px solid transparent}
  .nav.solid{background:rgba(10,10,13,.88);backdrop-filter:blur(12px);border-bottom-color:var(--line)}
  .nav-in{max-width:1180px;margin-inline:auto;padding:.9rem clamp(1.25rem,4vw,2.5rem);display:flex;align-items:center;gap:var(--sp3)}
  .brand{font-family:var(--disp);font-weight:900;font-stretch:125%;letter-spacing:.045em;font-size:1.18rem;text-transform:uppercase;text-decoration:none;white-space:nowrap;line-height:1}
  .brand em{font-style:normal;color:var(--accent)}
  .navlinks{display:flex;gap:1.9rem;margin-left:auto;align-items:center}
  .navlinks > a{font-family:var(--disp);font-weight:700;font-stretch:112%;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-decoration:none;transition:color .2s}
  .navlinks > a:hover,.navlinks > a:focus-visible{color:var(--ink)}
  /* buttons: EQ-bar glyph + fader-sweep fill */
  .btn{display:inline-flex;align-items:center;gap:.65rem;font-family:var(--disp);font-weight:700;font-stretch:112%;font-size:.84rem;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;padding:.85rem 1.6rem;border:1px solid var(--accent-dim);color:var(--accent);white-space:nowrap;cursor:pointer;background-color:transparent;background-image:linear-gradient(var(--accent),var(--accent));background-repeat:no-repeat;background-size:0% 100%;background-position:left center;transition:background-size .45s cubic-bezier(0.22,1,0.36,1),color .25s,border-color .25s}
  .btn:hover,.btn:focus-visible{background-size:100% 100%;color:#0A0A0D;border-color:var(--accent)}
  .btn.solidbtn{background-color:var(--accent);background-image:linear-gradient(#F5BE6B,#F5BE6B);color:#0A0A0D;border-color:var(--accent)}
  .btn.solidbtn:hover,.btn.solidbtn:focus-visible{border-color:#F5BE6B}
  .btn.spotifybtn{background-color:#1DB954;background-image:linear-gradient(#1ED760,#1ED760);color:#06220F;border-color:#1DB954}
  .btn.spotifybtn:hover,.btn.spotifybtn:focus-visible{border-color:#1ED760;color:#06220F}
  .btn .eq{display:inline-flex;gap:2.5px;align-items:flex-end;height:.9em;flex:none}
  .btn .eq i{width:2.5px;background:currentColor;display:block;height:100%;transform:scaleY(var(--eqh,.4));transform-origin:bottom;transition:transform .3s}
  .btn .eq i:nth-child(1){--eqh:.45}
  .btn .eq i:nth-child(2){--eqh:.95}
  .btn .eq i:nth-child(3){--eqh:.6}
  .btn .eq i:nth-child(4){--eqh:.8}
  @media (prefers-reduced-motion:no-preference){
    .btn:hover .eq i,.btn:focus-visible .eq i{animation:btneq .65s ease-in-out infinite}
    .btn:hover .eq i:nth-child(2),.btn:focus-visible .eq i:nth-child(2){animation-delay:.12s}
    .btn:hover .eq i:nth-child(3),.btn:focus-visible .eq i:nth-child(3){animation-delay:.24s}
    .btn:hover .eq i:nth-child(4),.btn:focus-visible .eq i:nth-child(4){animation-delay:.36s}
  }
  @keyframes btneq{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}
  .navcta{margin-left:.2rem}
  /* ---------- services mega menu ---------- */
  .navdrop{position:static;margin-right:-.45rem}
  .navdroplink{display:flex;align-items:center;gap:.3rem;font-family:var(--disp);font-weight:700;font-stretch:112%;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);background:none;border:none;cursor:pointer;transition:color .2s;padding:0}
  .navdroplink:hover,.navdroplink:focus-visible,.navdroplink[aria-expanded="true"],.navdroplink[data-current="true"]{color:var(--ink)}
  .navdroplink .chev{width:.85em;height:.85em;fill:none;stroke:currentColor;stroke-width:2.4;transition:transform .3s cubic-bezier(0.22,1,0.36,1)}
  .navdroplink[aria-expanded="true"] .chev{transform:rotate(180deg)}
  .megamenu{position:absolute;left:0;right:0;top:100%;background:rgba(10,10,13,.96);backdrop-filter:blur(14px);border-bottom:1px solid var(--line-strong);opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .3s cubic-bezier(0.22,1,0.36,1),transform .3s cubic-bezier(0.22,1,0.36,1),visibility .3s}
  /* invisible bridge so the cursor never leaves the dropdown while crossing the gap between the button & the panel */
  .megamenu::before{content:"";position:absolute;bottom:100%;left:0;right:0;height:30px}
  .navdrop:not(.suppress):hover .megamenu,.navdrop:not(.suppress):focus-within .megamenu,.megamenu.open{opacity:1;visibility:visible;transform:none}
  .mega-in{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:var(--sp3);padding-block:var(--sp3)}
  .mm-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.4rem}
  .mm-item{display:grid;grid-template-columns:2.4rem minmax(0,1fr) 1.6rem;gap:.9rem;align-items:center;padding:1.05rem 1.1rem;text-decoration:none;color:inherit;border:1px solid transparent;transition:background .2s,border-color .2s}
  .mm-item:hover,.mm-item:focus-visible{background:var(--surface);border-color:var(--line-strong)}
  .mm-item .mi{font-family:var(--disp);font-weight:600;font-stretch:110%;font-size:.72rem;letter-spacing:.12em;color:var(--faint);transition:color .2s}
  .mm-item:hover .mi{color:var(--accent)}
  .mm-item .mt{min-width:0}
  .mm-item .mt b{display:block;font-family:var(--disp);font-weight:800;font-stretch:114%;font-size:1rem;text-transform:uppercase;letter-spacing:.03em;line-height:1.15}
  .mm-item .mt small{display:block;font-size:.8rem;color:var(--muted);margin-top:.2rem}
  .mm-item .ma{opacity:0;transform:translateX(-4px);transition:opacity .2s,transform .25s}
  .mm-item:hover .ma,.mm-item:focus-visible .ma{opacity:1;transform:none}
  .mm-item .ma svg{width:1.05rem;height:1.05rem;fill:none;stroke:var(--accent);stroke-width:2}
  .mm-item[aria-current="page"] .mi{color:var(--accent)}
  .mm-side{border-left:1px solid var(--line);padding-left:var(--sp3);display:flex;flex-direction:column;gap:.7rem;justify-content:center}
  .mm-kicker{font-family:var(--disp);font-weight:700;font-stretch:112%;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
  .mm-copy{font-size:.88rem;color:var(--muted)}
  .mm-side .btn{align-self:flex-start;margin-top:.4rem}
  @media (max-width:840px){.navdrop{display:none}}

  /* mobile menu button: three console faders */
  .burger{display:none;margin-left:auto;background:none;border:1px solid var(--line-strong);width:44px;height:44px;cursor:pointer;padding:10px 13px;transition:border-color .25s}
  .burger:hover,.burger:focus-visible{border-color:var(--accent-dim)}
  .burger .fdr{position:relative;width:2px;background:rgba(242,239,232,.28);display:block;height:100%}
  .burger .fdr::after{content:"";position:absolute;left:50%;transform:translateX(-50%);width:9px;height:5px;border-radius:1px;background:var(--ink);top:var(--cap,50%);transition:top .4s cubic-bezier(0.22,1,0.36,1),background .25s}
  .burger .fdr:nth-child(1){--cap:12%}
  .burger .fdr:nth-child(2){--cap:52%}
  .burger .fdr:nth-child(3){--cap:30%}
  .burger:hover .fdr:nth-child(1),.burger:focus-visible .fdr:nth-child(1){--cap:48%}
  .burger:hover .fdr:nth-child(2),.burger:focus-visible .fdr:nth-child(2){--cap:16%}
  .burger:hover .fdr:nth-child(3),.burger:focus-visible .fdr:nth-child(3){--cap:60%}
  .burger:hover .fdr::after,.burger:focus-visible .fdr::after{background:var(--accent)}
  .mobilemenu{display:none}
  @media (max-width:840px){
    .navlinks,.navcta{display:none}
    .burger{display:flex;justify-content:space-between}
    .mobilemenu{position:fixed;inset:0;background:rgba(10,10,13,.97);z-index:var(--z-menu);display:none;flex-direction:column;justify-content:center;align-items:center;gap:2.2rem}
    .mobilemenu.open{display:flex}
    .mobilemenu a:not(.btn){font-family:var(--disp);font-weight:800;font-stretch:115%;font-size:1.6rem;text-transform:uppercase;color:var(--ink);text-decoration:none}
    .mobilemenu .btn{margin-top:.6rem}
    .mobilemenu .close{position:absolute;top:1.1rem;right:1.3rem;background:none;border:1px solid var(--line-strong);color:var(--ink);width:44px;height:44px;font-size:1.2rem;cursor:pointer}
    .msvc{display:flex;align-items:center;gap:.6rem;font-family:var(--disp);font-weight:800;font-stretch:115%;font-size:1.6rem;text-transform:uppercase;color:var(--ink);background:none;border:none;cursor:pointer}
    .msvc .chev{width:.7em;height:.7em;fill:none;stroke:currentColor;stroke-width:2.4;transition:transform .3s cubic-bezier(0.22,1,0.36,1)}
    .msvc[aria-expanded="true"] .chev{transform:rotate(180deg)}
    .msvc[aria-expanded="true"]{color:var(--accent)}
    .msvc-list{display:flex;flex-direction:column;align-items:center;gap:1.1rem;max-height:0;overflow:hidden;margin-block:-1.1rem;transition:max-height .45s cubic-bezier(0.22,1,0.36,1),margin .45s cubic-bezier(0.22,1,0.36,1)}
    .msvc-list.open{max-height:280px;margin-block:0}
    .msvc-list a{font-size:1.05rem !important;font-weight:700;color:var(--muted) !important;letter-spacing:.06em}
    .msvc-list a:hover{color:var(--ink) !important}
  }

  /* ---------- hero ---------- */
  .hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;isolation:isolate}
  .hero-bg{position:absolute;inset:0;z-index:-1;overflow:hidden}
  .hero-bg img{width:100%;height:100%;object-fit:cover;object-position:72% 40%}
  .hero-bg::after{content:"";position:absolute;inset:0;background:
    linear-gradient(180deg,rgba(10,10,13,.55) 0%,rgba(10,10,13,.15) 35%,rgba(10,10,13,.82) 78%,#0A0A0D 100%),
    linear-gradient(90deg,rgba(10,10,13,.72) 0%,rgba(10,10,13,.25) 55%,rgba(10,10,13,.05) 100%)}
  .hero-in{padding-block:calc(var(--sp5) + 2rem) var(--sp4);width:100%}
  .hero h1{font-size:clamp(3.4rem,11vw,8.2rem);font-weight:900;font-stretch:122%;line-height:.92;text-transform:uppercase;letter-spacing:.005em;margin:.9rem 0 1.1rem}
  .hero h1 em{font-style:normal;color:var(--accent)}
  .hero h1 .thin{display:block;font-weight:300;font-stretch:95%;font-size:.32em;letter-spacing:.34em;color:var(--muted);margin-top:.55em}
  .hero .roles{font-family:var(--mono);font-size:clamp(.72rem,1.6vw,.85rem);letter-spacing:.16em;text-transform:uppercase;color:var(--ink);display:flex;flex-wrap:wrap;gap:.5rem 0;align-items:center}
  .hero .roles span{opacity:.92}
  .hero .roles .dot{color:var(--accent);margin-inline:.9rem}
  .hero p.pitch{max-width:30em;color:#C9C6BE;margin-top:1.4rem;font-size:clamp(1rem,1.5vw,1.15rem)}
  .hero .ctas{display:flex;gap:1rem;flex-wrap:wrap;margin-top:2.2rem}
  .scrollhint{position:absolute;right:clamp(1.25rem,4vw,2.5rem);bottom:2.2rem;font-family:var(--mono);font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--faint);writing-mode:vertical-rl;display:flex;align-items:center;gap:.7rem}
  .scrollhint::after{content:"";width:1px;height:3rem;background:linear-gradient(var(--accent),transparent)}
  @media (max-width:640px){.scrollhint{display:none}}

  /* ---------- marquee ---------- */
  .marquee{border-block:1px solid var(--line);background:var(--bg2);overflow:hidden;padding-block:1.05rem}
  .marquee-track{display:flex;gap:0;width:max-content;animation:scroll 46s linear infinite;will-change:transform}
  .marquee span{font-family:var(--disp);font-weight:700;font-stretch:115%;text-transform:uppercase;letter-spacing:.1em;font-size:.95rem;color:var(--faint);white-space:nowrap;padding-right:3.5rem}
  .marquee span b{color:var(--accent);font-weight:700;margin-right:3.5rem}
  @keyframes scroll{to{transform:translateX(-50%)}}
  @media (prefers-reduced-motion:reduce){.marquee-track{animation:none;flex-wrap:wrap;width:auto}}

  /* ---------- sections ---------- */
  .section{padding-block:var(--sp5)}
  .section.tint{background:var(--bg2);border-block:1px solid var(--line)}

  /* ---------- console player (home) ---------- */
  .c2-box{border:1px solid var(--line-strong);background:linear-gradient(180deg,#15151C,#101016);display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);border-radius:12px;overflow:hidden}
  .c2-master{padding:clamp(1.4rem,3vw,2.2rem);border-right:1px solid var(--line);display:flex;flex-direction:column;gap:1.3rem;min-width:0}
  .c2-lcd{border:1px solid var(--line-strong);background:#0B0B10;border-radius:8px;padding:1rem 1.1rem;display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
  .c2-lcd .t{font-family:var(--disp);font-weight:800;font-stretch:116%;text-transform:uppercase;font-size:1.05rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .c2-lcd .a{color:var(--muted);font-size:.8rem}
  .c2-lcd .st{font-family:var(--disp);font-weight:700;font-size:.66rem;letter-spacing:.2em;color:var(--accent);white-space:nowrap}
  .c2-viz{display:grid;grid-template-columns:minmax(0,1fr) 96px;gap:.8rem;align-items:stretch}
  .c2-spec{width:100%;aspect-ratio:16/8;background:#0B0B10;border:1px solid var(--line);border-radius:8px;display:block}
  .c2-vu{width:96px;background:#0B0B10;border:1px solid var(--line);border-radius:8px;display:block}
  .c2-transport{display:flex;align-items:center;gap:1rem}
  .c2-btn{width:46px;height:46px;border:1px solid var(--line-strong);background:none;color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:border-color .2s,background .2s;flex:none}
  .c2-btn:hover,.c2-btn:focus-visible{border-color:var(--accent)}
  .c2-btn svg{width:38%;height:38%;fill:currentColor}
  .c2-btn.play{width:58px;height:58px;background:var(--accent);border-color:var(--accent);color:#0A0A0D}
  .c2-btn.play:hover,.c2-btn.play:focus-visible{background:#F5BE6B}
  .c2-seek{-webkit-appearance:none;appearance:none;width:100%;height:4px;background:var(--surface2);cursor:pointer}
  .c2-seek::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;border-radius:50%;background:var(--accent);cursor:pointer}
  .c2-seek::-moz-range-thumb{width:13px;height:13px;border-radius:50%;background:var(--accent);border:none;cursor:pointer}
  .c2-seek:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
  .c2-times{display:flex;justify-content:space-between;font-family:var(--disp);font-weight:600;font-size:.7rem;color:var(--muted);font-variant-numeric:tabular-nums}
  .c2-volrow{display:flex;align-items:center;gap:.9rem}
  .c2-volrow .lb{font-family:var(--disp);font-weight:600;font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}
  .c2-vol{-webkit-appearance:none;appearance:none;flex:1;max-width:210px;height:3px;background:var(--surface2);cursor:pointer}
  .c2-vol::-webkit-slider-thumb{-webkit-appearance:none;width:11px;height:24px;background:#23232D;border:1px solid var(--line-strong);border-radius:2px;cursor:pointer;background-image:linear-gradient(var(--accent),var(--accent));background-size:100% 2px;background-position:center;background-repeat:no-repeat}
  .c2-vol::-moz-range-thumb{width:11px;height:24px;background:#23232D;border:1px solid var(--line-strong);border-radius:2px;cursor:pointer}
  .c2-vol:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
  .c2-volrow .db{font-family:var(--disp);font-weight:600;font-size:.7rem;color:var(--muted);min-width:4em;text-align:right;font-variant-numeric:tabular-nums}
  .c2-chs{display:flex;flex-direction:column;min-width:0}
  .c2-ch{display:grid;grid-template-columns:3.1rem minmax(0,1fr) 44px auto;gap:.9rem;align-items:center;text-align:left;padding:1.05rem clamp(1rem,2.5vw,1.5rem);border:none;border-bottom:1px solid var(--line);border-left:3px solid transparent;background:none;color:inherit;font:inherit;cursor:pointer;transition:background .2s;width:100%}
  .c2-ch:hover,.c2-ch:focus-visible{background:var(--surface2)}
  .c2-ch.on{background:var(--accent-glow);border-left-color:var(--accent);border-top:1px solid rgba(242,239,232,.4);border-bottom:1px solid rgba(242,239,232,.4)}
  .c2-ch:last-child{border-bottom:none}
  .c2-ch .n{font-family:var(--disp);font-weight:600;font-size:.7rem;color:var(--faint);letter-spacing:.1em}
  .c2-ch.on .n{color:var(--accent)}
  .c2-ch .ti{display:block;font-family:var(--disp);font-weight:700;font-stretch:112%;text-transform:uppercase;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .c2-ch .ar{display:block;font-size:.76rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .c2-led{width:44px;height:16px;display:block}
  .c2-ch .d{font-family:var(--disp);font-weight:600;font-size:.72rem;color:var(--muted);font-variant-numeric:tabular-nums}
  .c2-ch.c2-more{text-decoration:none}
  .c2-ch.c2-more .ti{color:var(--accent)}
  .c2-ch.c2-more .d{color:var(--accent);font-size:1rem}
  .c2-ch.c2-more:hover{background:var(--accent-glow)}
  @media (max-width:900px){.c2-box{grid-template-columns:1fr}.c2-master{border-right:none;border-bottom:1px solid var(--line)}}
  .playernote{font-family:var(--disp);font-weight:500;font-size:.78rem;color:var(--faint);margin-top:1rem;letter-spacing:.04em}
  .listenmore{display:flex;gap:1rem;justify-content:center;align-items:center;margin-top:var(--sp3);flex-wrap:wrap}

  /* ---------- stage player (listen page) ---------- */
  .c3wrap{position:relative;isolation:isolate}
  .c3-glow{position:absolute;inset:-8rem 0;z-index:-1;background:radial-gradient(46% 40% at 50% 45%,rgba(233,161,59,var(--glow,0.05)),transparent 70%);pointer-events:none}
  .c3-list{border-top:1px solid var(--line-strong)}
  .c3-row{border-bottom:1px solid var(--line-strong)}
  .c3-row.hidden{display:none}
  .c3-head{display:grid;grid-template-columns:3rem minmax(0,1fr) auto;gap:1.2rem;align-items:baseline;width:100%;text-align:left;background:none;border:none;color:inherit;font:inherit;cursor:pointer;padding:1.7rem 0}
  .c3-head .n{font-family:var(--disp);font-weight:600;font-size:.78rem;letter-spacing:.14em;color:var(--faint);font-variant-numeric:tabular-nums}
  .c3-head .ti{font-family:var(--disp);font-weight:900;font-stretch:120%;font-size:clamp(1.7rem,5vw,4rem);line-height:1;text-transform:uppercase;color:#B9B6AE;transition:color .35s,transform .45s var(--ease-lift);min-width:0;overflow-wrap:break-word}
  .c3-head .ar{font-family:var(--disp);font-weight:600;font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);white-space:nowrap}
  @media (max-width:640px){
    .c3-head{grid-template-columns:3rem minmax(0,1fr);row-gap:.45rem}
    .c3-head .ar{grid-column:2;white-space:normal;letter-spacing:.08em}
  }
  .c3-row:hover .ti,.c3-head:focus-visible .ti{color:var(--ink);transform:translateX(.6rem)}
  .c3-row.on .ti{color:var(--ink)}
  .c3-row.on .n{color:var(--accent)}
  .c3-body{max-height:0;overflow:hidden;transition:max-height .55s var(--ease-lift)}
  .c3-row.on .c3-body{max-height:240px}
  .c3-body-in{padding:0 0 1.8rem;display:flex;flex-direction:column;gap:1rem}
  .c3-wave{width:100%;height:64px;display:block;cursor:pointer;touch-action:none}
  .c3-sub{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;align-items:center}
  .c3-cred{font-size:.8rem;color:var(--muted)}
  .c3-cred b{color:var(--accent);font-weight:600}
  .c3-time{font-family:var(--disp);font-weight:600;font-size:.74rem;color:var(--muted);font-variant-numeric:tabular-nums}
  .c3-bar{position:sticky;bottom:1.2rem;z-index:5;margin-top:2.2rem;display:flex;align-items:center;gap:1rem;background:rgba(14,14,19,.92);backdrop-filter:blur(10px);border:1px solid var(--line-strong);padding:.7rem 1rem;max-width:560px;margin-inline:auto}
  .c3-bar .bplay{width:44px;height:44px;background:var(--accent);border:none;display:grid;place-items:center;flex:none;cursor:pointer}
  .c3-bar .bplay svg{width:38%;height:38%;fill:#0A0A0D}
  .c3-bar .bplay:hover{background:#F5BE6B}
  .c3-bar .bmeta{min-width:0;flex:1}
  .c3-bar .bt{font-family:var(--disp);font-weight:700;font-stretch:112%;font-size:.8rem;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .c3-bar .bp{height:2px;background:var(--surface2);margin-top:.4rem;position:relative}
  .c3-bar .bp i{position:absolute;inset:0 auto 0 0;width:0;background:var(--accent)}
  .c3-bar .bn2{width:38px;height:38px;border:1px solid var(--line-strong);background:none;color:var(--ink);display:grid;place-items:center;flex:none;cursor:pointer}
  .c3-bar .bn2:hover{border-color:var(--accent)}
  .bvol{position:relative;flex:none}
  .bvol-pop{position:absolute;bottom:calc(100% + 12px);right:0;background:rgba(14,14,19,.96);backdrop-filter:blur(10px);border:1px solid var(--line-strong);padding:.85rem 1rem;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .25s cubic-bezier(0.22,1,0.36,1),transform .25s cubic-bezier(0.22,1,0.36,1),visibility .25s}
  .bvol:hover .bvol-pop,.bvol:focus-within .bvol-pop,.bvol.open .bvol-pop{opacity:1;visibility:visible;transform:none}
  .bvol-slider{-webkit-appearance:none;appearance:none;width:130px;height:3px;background:var(--surface2);cursor:pointer;display:block}
  .bvol-slider::-webkit-slider-thumb{-webkit-appearance:none;width:11px;height:22px;background:#23232D;border:1px solid var(--line-strong);border-radius:2px;cursor:pointer;background-image:linear-gradient(var(--accent),var(--accent));background-size:100% 2px;background-position:center;background-repeat:no-repeat}
  .bvol-slider::-moz-range-thumb{width:11px;height:22px;background:#23232D;border:1px solid var(--line-strong);border-radius:2px;cursor:pointer}
  .bvol-slider:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
  .c3-bar .bn2 svg{width:40%;height:40%;fill:currentColor}

  /* ---------- services (numbered editorial index + cursor image reveal) ---------- */
  .svclist{border-top:1px solid var(--line-strong)}
  .srow{position:relative;display:grid;grid-template-columns:4.5rem minmax(0,1.15fr) minmax(0,.85fr) 3rem;align-items:center;gap:1.2rem;padding-block:2.6rem;border-bottom:1px solid var(--line-strong);text-decoration:none;color:inherit}
  .srow .idx{font-family:var(--disp);font-weight:600;font-stretch:110%;font-size:.82rem;letter-spacing:.14em;color:var(--faint);font-variant-numeric:tabular-nums;transition:color .35s}
  .srow .nm{font-family:var(--disp);font-weight:800;font-stretch:120%;font-size:clamp(1.7rem,3.6vw,3.4rem);line-height:1.02;text-transform:uppercase;letter-spacing:.01em;color:#B9B6AE;transition:color .35s,transform .45s var(--ease-lift);min-width:0;overflow-wrap:break-word}
  .srow .info{min-width:0}
  .srow .info p{color:var(--muted);font-size:.95rem;line-height:1.5;transition:color .35s}
  .srow .info ul{list-style:none;display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.75rem;padding:0}
  .srow .info ul li{font-family:var(--disp);font-weight:600;font-stretch:110%;font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);border:1px solid var(--line);padding:.28rem .6rem;transition:color .35s,border-color .35s}
  .srow .go{width:2.6rem;height:2.6rem;border:1px solid var(--line-strong);display:grid;place-items:center;justify-self:end;transition:background .35s,border-color .35s,transform .45s var(--ease-lift)}
  .srow .go svg{width:40%;height:40%;fill:none;stroke:var(--muted);stroke-width:2;transition:stroke .35s}
  .srow:hover .idx,.srow:focus-visible .idx{color:var(--accent)}
  .srow:hover .nm,.srow:focus-visible .nm{color:var(--ink);transform:translateX(.65rem)}
  .srow:hover .info p{color:#C9C6BE}
  .srow:hover .info ul li{color:var(--muted);border-color:var(--line-strong)}
  .srow:hover .go,.srow:focus-visible .go{background:var(--accent);border-color:var(--accent);transform:translateX(.35rem)}
  .srow:hover .go svg,.srow:focus-visible .go svg{stroke:#0A0A0D}
  @media (max-width:900px){
    .srow{grid-template-columns:3rem minmax(0,1fr) 2.6rem;grid-template-areas:"idx nm go" "info info info";row-gap:.4rem;padding-block:1.8rem}
    .srow .idx{grid-area:idx}.srow .nm{grid-area:nm;white-space:normal}.srow .go{grid-area:go}.srow .info{grid-area:info;padding-left:calc(3rem + 1.2rem)}
  }
  @media (max-width:560px){.srow .info{padding-left:0}}

  /* ---------- credits ---------- */
  .credrow{display:grid;grid-template-columns:minmax(0,.32fr) minmax(0,.68fr);gap:1rem var(--sp3);padding-block:2.2rem;border-top:1px solid var(--line-strong);align-items:baseline}
  .credrow:last-of-type{border-bottom:1px solid var(--line-strong)}
  .credrow h3{font-size:1.05rem;font-weight:800;font-stretch:115%;text-transform:uppercase;letter-spacing:.04em;color:var(--ink)}
  .credrow h3 small{display:block;font-family:var(--body);font-weight:400;font-stretch:100%;font-size:.8rem;letter-spacing:.02em;text-transform:none;color:var(--faint);margin-top:.35rem}
  .credrow .names{font-size:clamp(1rem,1.6vw,1.2rem);line-height:2;color:#D6D3CB;font-weight:500}
  .credrow .names i{font-style:normal;color:var(--accent);margin-inline:.55em;font-weight:400}
  .credrow .names small{color:var(--faint);font-size:.72em;font-weight:400}
  @media (max-width:760px){.credrow{grid-template-columns:1fr;gap:.6rem;padding-block:1.7rem}}

  /* ---------- about (interactive role explorer) ---------- */
  .aboutwrap{position:relative;isolation:isolate;overflow:hidden;border-block:1px solid var(--line)}
  .about-bgs{position:absolute;inset:0;z-index:-1}
  .about-bgs img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s ease;filter:saturate(.7) contrast(1.05)}
  .about-bgs img.on{opacity:1}
  .about-bgs::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,10,13,.94) 0%,rgba(10,10,13,.88) 45%,rgba(10,10,13,.55) 100%),linear-gradient(180deg,rgba(10,10,13,.85),rgba(10,10,13,.35) 30%,rgba(10,10,13,.85))}
  .aboutwrap .wrap{padding-block:var(--sp5)}
  .about-intro{max-width:36em}
  .about-intro p{color:#D6D3CB;margin-top:1.2rem;font-size:clamp(1rem,1.5vw,1.12rem)}
  .roletabs{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:var(--sp3)}
  .roletab{font-family:var(--disp);font-weight:700;font-stretch:112%;font-size:.86rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);background:rgba(20,20,27,.6);border:1px solid var(--line-strong);padding:.8rem 1.4rem;cursor:pointer;transition:color .2s,border-color .2s,background .2s}
  .roletab:hover,.roletab:focus-visible{color:var(--ink);border-color:var(--accent-dim)}
  .roletab[aria-selected="true"]{color:#0A0A0D;background:var(--accent);border-color:var(--accent)}
  .rolepane{display:none;margin-top:var(--sp3);max-width:44em}
  .rolepane.on{display:block}
  @media (prefers-reduced-motion:no-preference){.rolepane.on{animation:fadeup .5s ease}}
  @keyframes fadeup{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  .rolepane h3{font-size:clamp(1.4rem,2.6vw,2rem);font-weight:800;font-stretch:115%;text-transform:uppercase;line-height:1.05}
  .rolepane .lead{color:#D6D3CB;margin-top:1rem}
  .receipts{list-style:none;margin-top:1.4rem;display:flex;flex-direction:column;gap:.65rem}
  .receipts li{display:flex;gap:.85rem;align-items:baseline;color:#C9C6BE;font-size:.98rem}
  .receipts li::before{content:"";width:.5rem;height:.5rem;background:var(--accent);flex:none;transform:translateY(-.05rem)}
  .receipts li b{color:var(--ink);font-weight:600}
  .rolepane .btn{margin-top:1.6rem}

  /* ---------- cta ---------- */
  .bigcta{text-align:center;padding-block:var(--sp5)}
  @media (max-width:640px){.bigcta{padding-block:2.6rem 4.5rem}}
  .bigcta .h2{font-size:clamp(2.2rem,5.5vw,4rem)}
  .bigcta p{color:var(--muted);max-width:32em;margin:1.2rem auto 2.2rem}
  .bigcta .ctas{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}

  /* ---------- footer ---------- */
  footer{border-top:1px solid var(--line);padding-block:var(--sp3);background:var(--bg2)}
  .foot{display:flex;flex-wrap:wrap;gap:var(--sp2) var(--sp3);align-items:center;justify-content:space-between}
  .foot .links{display:flex;gap:1.6rem;flex-wrap:wrap}
  .foot a{font-family:var(--disp);font-weight:600;font-stretch:110%;font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);text-decoration:none}
  .foot a:hover,.foot a:focus-visible{color:var(--ink)}
  .foot .copy{font-family:var(--mono);font-size:.68rem;color:var(--faint);letter-spacing:.08em}

  /* ---------- motion (ported from the SarMac/Korowa motion language) ---------- */
  :root{--ease-lift:cubic-bezier(0.22,1,0.36,1);--load-delay:.15s}
  @media (prefers-reduced-motion:no-preference){
    /* scroll reveals — staggered via --stagger-delay set by JS on [data-stagger] groups */
    .js .reveal{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease-lift),transform .9s var(--ease-lift);transition-delay:var(--stagger-delay,0s)}
    .js .reveal.in{opacity:1;transform:none}
    /* page-load sequence — hero & banner children rise in, staggered */
    .hero .eyebrow,.hero h1,.hero .roles,.hero p.pitch,.hero .ctas,
    .banner .eyebrow,.banner h1,.banner p.sub{
      opacity:0;transform:translateY(32px);
      animation:load-up .9s var(--ease-lift) forwards;
      animation-delay:calc(var(--load-delay) + var(--i,0)*.13s)
    }
    .hero h1,.banner h1{--i:1}
    .hero .roles{--i:2}
    .hero p.pitch,.banner p.sub{--i:3}
    .hero .ctas{--i:4}
    /* hero image settles from a slight zoom */
    .hero-bg img,.banner .bg img{animation:hero-zoom 1.8s var(--ease-lift) var(--load-delay) both}
  }
  @keyframes load-up{to{opacity:1;transform:none}}
  @keyframes hero-zoom{from{transform:scale(1.14)}to{transform:scale(1.07)}}
  :focus-visible{outline:2px solid var(--accent);outline-offset:3px}
/* ---------- sub-page banner ---------- */
.banner{position:relative;isolation:isolate;min-height:52svh;display:flex;align-items:flex-end;overflow:hidden}
.banner .bg{position:absolute;inset:0;z-index:-1}
.banner .bg img{width:100%;height:100%;object-fit:cover;filter:saturate(.8) contrast(1.05)}
.banner .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,13,.6) 0%,rgba(10,10,13,.25) 40%,rgba(10,10,13,.85) 85%,#0A0A0D 100%)}
.banner .wrap{padding-block:calc(var(--sp4) + 4.5rem) var(--sp3);width:100%}
.banner h1{font-size:clamp(2.6rem,7vw,5.2rem);font-weight:900;font-stretch:120%;line-height:.95;text-transform:uppercase;margin-top:.8rem}
.banner p.sub{max-width:36em;color:#D6D3CB;margin-top:1.2rem;font-size:clamp(1rem,1.5vw,1.12rem)}

/* ---------- listen filters ---------- */
.filters{display:flex;flex-wrap:wrap;gap:.55rem;margin-bottom:var(--sp2)}
.filterbtn{font-family:var(--disp);font-weight:700;font-stretch:112%;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);background:var(--surface);border:1px solid var(--line-strong);padding:.65rem 1.15rem;cursor:pointer;transition:color .2s,border-color .2s,background .2s}
.filterbtn:hover,.filterbtn:focus-visible{color:var(--ink);border-color:var(--accent-dim)}
.filterbtn[aria-pressed="true"]{color:#0A0A0D;background:var(--accent);border-color:var(--accent)}
.ch.hidden{display:none}

/* ---------- process stepper ---------- */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp2);counter-reset:step}
.step{border:1px solid var(--line-strong);background:var(--surface);padding:1.5rem;position:relative}
.step::before{counter-increment:step;content:"0" counter(step);font-family:var(--disp);font-weight:900;font-stretch:120%;font-size:2rem;color:var(--accent);display:block;line-height:1}
.step h3{font-size:1.02rem;font-weight:800;font-stretch:112%;text-transform:uppercase;margin-top:.9rem}
.step p{color:var(--muted);font-size:.92rem;margin-top:.55rem}
@media (max-width:920px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}

/* ---------- filmstrip ---------- */
.filmstrip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp1);margin-top:var(--sp3)}
.filmstrip .frame{aspect-ratio:21/9;overflow:hidden;border:1px solid var(--line-strong)}
.filmstrip .frame img{width:100%;height:100%;object-fit:cover;filter:saturate(.75) contrast(1.06)}
@media (max-width:640px){.filmstrip{grid-template-columns:1fr}}

/* ---------- detail cards (live/studio services) ---------- */
.detailgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp2)}
.detail{border:1px solid var(--line-strong);background:var(--surface);padding:1.7rem}
.detail h3{font-size:1.1rem;font-weight:800;font-stretch:112%;text-transform:uppercase}
.detail p{color:var(--muted);font-size:.95rem;margin-top:.7rem}
@media (max-width:760px){.detailgrid{grid-template-columns:1fr}}

/* ---------- live: signal chain (Koto-style editorial blocks) ---------- */
.chain{border-top:1px solid var(--line-strong)}
.chainblock{display:grid;grid-template-columns:10rem minmax(0,1fr);gap:1rem var(--sp4);padding-block:2.8rem;border-bottom:1px solid var(--line-strong);align-items:start}
.chainblock .lb{font-family:var(--disp);font-weight:600;font-stretch:110%;font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);padding-top:.5rem}
.chainblock .stmt{font-family:var(--disp);font-weight:800;font-stretch:116%;font-size:clamp(1.35rem,2.8vw,2.1rem);line-height:1.08;text-transform:none;max-width:22em}
.chainblock .desc{color:var(--muted);margin-top:.7rem;max-width:36em;font-size:.97rem}
.chainblock ul{list-style:none;margin-top:1.5rem;max-width:34em;padding:0}
.chainblock li{display:flex;justify-content:space-between;gap:1rem;padding:.7rem 0;border-bottom:1px solid var(--line);color:#C9C6BE;font-size:.93rem}
.chainblock li:last-child{border-bottom:none}
.chainblock li small{color:var(--faint);font-size:.8rem;white-space:nowrap}
@media (max-width:760px){.chainblock{grid-template-columns:1fr;gap:.6rem;padding-block:2rem}.chainblock .lb{padding-top:0}}

/* ---------- photo statement break ---------- */
.photobreak{position:relative;isolation:isolate;min-height:62svh;display:flex;align-items:center;overflow:hidden;border-block:1px solid var(--line)}
.photobreak .bg{position:absolute;inset:0;z-index:-1}
.photobreak .bg img{width:100%;height:100%;object-fit:cover;filter:saturate(.75) contrast(1.06)}
.photobreak .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,10,13,.86) 0%,rgba(10,10,13,.55) 55%,rgba(10,10,13,.25) 100%)}
.photobreak .pb-line{font-family:var(--disp);font-weight:900;font-stretch:120%;font-size:clamp(2rem,5.5vw,4.2rem);line-height:1;text-transform:uppercase;max-width:12em}
.photobreak .pb-sub{color:#D6D3CB;margin-top:1.1rem;max-width:30em}

/* ---------- road numbers (Instrument-style stacked stats) ---------- */
.roadline{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:1rem var(--sp4);align-items:baseline;padding-block:2.2rem;border-bottom:1px solid var(--line-strong)}
.roadline:first-of-type{border-top:1px solid var(--line-strong)}
.roadline .big{font-family:var(--disp);font-weight:900;font-stretch:122%;font-size:clamp(2.4rem,7vw,5.6rem);line-height:.95;text-transform:uppercase;letter-spacing:.005em}
.roadline .big em{font-style:normal;color:var(--accent)}
.roadline:nth-of-type(2) .big{color:#C9C6BE}
.roadline:nth-of-type(3) .big{color:#8F8D99}
.roadline .anno{font-size:.88rem;color:var(--muted);line-height:1.7}
@media (max-width:760px){.roadline{grid-template-columns:1fr;gap:.5rem;padding-block:1.7rem}}

/* ---------- systems: giant-numeral process (Vucko-style) ---------- */
.bigsteps{border-top:1px solid var(--line-strong)}
.bigstep{display:grid;grid-template-columns:minmax(4.5rem,8.5rem) minmax(0,1fr);gap:1rem var(--sp4);padding-block:2.8rem;border-bottom:1px solid var(--line-strong);align-items:start}
.bigstep .bn{font-family:var(--disp);font-weight:900;font-stretch:122%;font-size:clamp(3.2rem,8vw,6rem);line-height:.8;color:var(--accent)}
.bigstep .lb{display:block;font-family:var(--disp);font-weight:600;font-stretch:110%;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);margin-bottom:.6rem}
.bigstep .stmt{font-family:var(--disp);font-weight:800;font-stretch:116%;font-size:clamp(1.35rem,2.8vw,2.1rem);line-height:1.08;max-width:22em}
.bigstep .desc{color:var(--muted);margin-top:.7rem;max-width:36em;font-size:.97rem}
@media (max-width:760px){.bigstep{grid-template-columns:1fr;gap:.8rem;padding-block:2rem}}

/* ---------- venue ledger ---------- */
.venuelist{border-top:1px solid var(--line-strong)}
.venuerow{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;padding:1.15rem 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.venuerow .vn{font-family:var(--disp);font-weight:800;font-stretch:116%;font-size:clamp(1.05rem,2vw,1.5rem);text-transform:uppercase;letter-spacing:.02em}
.venuerow .vl{color:var(--faint);font-size:.82rem;white-space:nowrap;font-family:var(--disp);font-weight:600;letter-spacing:.08em;text-transform:uppercase}

/* ---------- consulting: quiet typographic grid (basement.studio-style) ---------- */
.quietgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp4)}
.quiet .ql{font-family:var(--disp);font-weight:600;font-stretch:110%;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.quiet h3{font-family:var(--disp);font-weight:800;font-stretch:116%;font-size:clamp(1.2rem,2.2vw,1.65rem);line-height:1.12;margin-top:.7rem;text-transform:none}
.quiet p{color:#C9C6BE;margin-top:.7rem;font-size:.96rem;max-width:32em}
@media (max-width:760px){.quietgrid{grid-template-columns:1fr;gap:var(--sp3)}}

/* ---------- name wall ---------- */
.namewall{border-top:1px solid var(--line-strong)}
.namerow{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:1.25rem 0;border-bottom:1px solid var(--line-strong);flex-wrap:wrap}
.namerow .nn{font-family:var(--disp);font-weight:900;font-stretch:120%;font-size:clamp(1.3rem,3vw,2.2rem);text-transform:uppercase;line-height:1}
.namerow .na{color:var(--muted);font-family:var(--disp);font-weight:600;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.wallfoot{color:var(--faint);font-size:.88rem;margin-top:1.4rem;max-width:44em}

/* ---------- studio craft showcase ---------- */
.craft{border-top:1px solid var(--line-strong)}
.craftrow{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(1.5rem,4vw,4rem);align-items:center;padding-block:clamp(2.2rem,5vw,3.8rem);border-bottom:1px solid var(--line-strong)}
.craftrow.flip .crafttxt{order:2}
.craftrow.flip .craftviz{order:1}
.crafttxt{position:relative;min-width:0}
.crafttxt .bignum{display:block;margin:0 0 .1em -.06em;font-weight:900;font-stretch:120%;font-size:clamp(4rem,9vw,7rem);line-height:.85;color:transparent;-webkit-text-stroke:1px rgba(242,239,232,.12);pointer-events:none;user-select:none;font-family:var(--disp)}
.crafttxt h3{position:relative;font-family:var(--disp);font-weight:900;font-stretch:118%;font-size:clamp(1.7rem,3.6vw,2.8rem);line-height:1;text-transform:uppercase}
.crafttxt p{position:relative;color:#C9C6BE;margin-top:1rem;max-width:34em}
.crafttxt .sub{color:var(--faint);font-family:var(--disp);font-weight:600;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;margin-top:1.1rem}
.craftviz{border:1px solid var(--line-strong);background:#0B0B10;aspect-ratio:16/9;display:grid;place-items:center;overflow:hidden;position:relative;min-width:0}
.craftviz .vlab{position:absolute;top:.8rem;left:1rem;font-family:var(--disp);font-weight:600;font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--faint)}
.viz-meter{display:flex;gap:10px;align-items:flex-end;height:55%}
.viz-meter i{width:12px;background:linear-gradient(180deg,#F5BE6B,var(--accent) 55%,var(--accent-dim));animation:vmeter 1.5s ease-in-out infinite;transform-origin:bottom;height:100%}
.viz-meter i:nth-child(1){animation-delay:0s}.viz-meter i:nth-child(2){animation-delay:.22s}
.viz-meter i:nth-child(3){animation-delay:.09s}.viz-meter i:nth-child(4){animation-delay:.34s}
.viz-meter i:nth-child(5){animation-delay:.16s}.viz-meter i:nth-child(6){animation-delay:.41s}
@keyframes vmeter{0%,100%{transform:scaleY(.25)}35%{transform:scaleY(1)}60%{transform:scaleY(.5)}80%{transform:scaleY(.8)}}
.viz-fader{display:flex;gap:26px;height:58%}
.viz-fader i{position:relative;width:2px;background:rgba(242,239,232,.22);display:block}
.viz-fader i::after{content:"";position:absolute;left:50%;transform:translateX(-50%);width:16px;height:9px;border-radius:2px;background:var(--ink);box-shadow:inset 0 -3px 0 var(--accent);top:50%;animation:vfader 3.2s ease-in-out infinite}
.viz-fader i:nth-child(1)::after{animation-delay:0s}
.viz-fader i:nth-child(2)::after{animation-delay:.5s}
.viz-fader i:nth-child(3)::after{animation-delay:1s}
.viz-fader i:nth-child(4)::after{animation-delay:1.5s}
@keyframes vfader{0%,100%{top:62%}30%{top:22%}55%{top:44%}75%{top:30%}}
.viz-blocks{display:grid;grid-template-columns:repeat(8,16px);grid-auto-rows:16px;gap:5px}
.viz-blocks i{background:rgba(242,239,232,.12);animation:vblock 4s ease-in-out infinite}
.viz-blocks i:nth-child(3n){animation-delay:.6s}
.viz-blocks i:nth-child(4n){animation-delay:1.4s}
.viz-blocks i:nth-child(5n){animation-delay:2.1s}
.viz-blocks i:nth-child(7n){animation-delay:2.8s}
@keyframes vblock{0%,100%{background:rgba(242,239,232,.12)}50%{background:var(--accent)}}
.viz-wave{display:flex;gap:3px;align-items:center;height:44%;position:relative}
.viz-wave i{width:4px;background:rgba(242,239,232,.25);height:var(--h,40%)}
.viz-wave::after{content:"";position:absolute;inset:-12% auto -12% 0;width:26%;background:var(--accent-glow);border-inline:1px solid var(--accent);animation:vsweep 4.5s ease-in-out infinite}
@keyframes vsweep{0%,100%{left:0}50%{left:74%}}
@media (prefers-reduced-motion:reduce){.viz-meter i,.viz-fader i::after,.viz-blocks i,.viz-wave::after{animation:none}}
@media (max-width:820px){.craftrow{grid-template-columns:1fr;gap:1.4rem}.craftrow.flip .crafttxt{order:1}.craftrow.flip .craftviz{order:2}}

/* ---------- contact (basement.studio-style: statement + giant email + ledger) ---------- */
.contactx{min-height:92svh;display:flex;align-items:center;padding-block:calc(var(--sp5) + 2rem) var(--sp5)}
.cx-line{font-family:var(--disp);font-weight:900;font-stretch:120%;font-size:clamp(2.1rem,5.6vw,4.4rem);line-height:1.02;text-transform:uppercase;margin-top:1.2rem;color:#C9C6BE}
.cx-mail{display:inline-block;font-family:var(--disp);font-weight:800;font-stretch:114%;font-size:clamp(1.25rem,3.6vw,2.9rem);line-height:1.1;color:var(--accent);text-decoration:none;margin-top:1.4rem;background-image:linear-gradient(var(--accent),var(--accent));background-repeat:no-repeat;background-size:0% 2px;background-position:left bottom;transition:background-size .45s cubic-bezier(0.22,1,0.36,1);overflow-wrap:anywhere}
.cx-mail:hover,.cx-mail:focus-visible{background-size:100% 2px}
.cx-ledger{margin-top:var(--sp4);max-width:44em;border-top:1px solid var(--line-strong)}
.cx-row{display:grid;grid-template-columns:9.5rem minmax(0,1fr);gap:1rem;padding:.85rem 0;border-bottom:1px solid var(--line)}
.cx-row .cl{font-family:var(--disp);font-weight:600;font-stretch:110%;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);padding-top:.2rem}
.cx-row .cv{color:#C9C6BE;font-size:.95rem}
.cx-link{color:var(--accent);text-decoration:none;font-weight:600}
.cx-link:hover{text-decoration:underline}
@media (max-width:600px){.cx-row{grid-template-columns:1fr;gap:.2rem}}

/* ---------- about page ---------- */
.aboutpage{padding-block:calc(var(--sp5) + 2.5rem) var(--sp5)}
.ap-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:var(--sp4);align-items:stretch;margin-bottom:var(--sp4)}
.ap-name{font-family:var(--disp);font-weight:900;font-stretch:122%;font-size:clamp(2.8rem,7vw,5.4rem);line-height:.95;text-transform:uppercase;margin-top:.9rem}
.ap-role{font-family:var(--disp);font-weight:600;font-stretch:110%;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-top:1rem}
.ap-txt p:not(.eyebrow):not(.ap-role){color:#C9C6BE;margin-top:1.2rem;max-width:36em}
.ap-photo{position:relative;min-height:340px}
.ap-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:38% 22%;border:1px solid var(--line-strong);filter:saturate(.85) contrast(1.05)}
@media (max-width:820px){.ap-photo{min-height:0}.ap-photo img{position:static;aspect-ratio:4/5;height:auto}}
.ap-cta{margin-top:var(--sp3)}
@media (max-width:640px){.ap-cta{text-align:center}}
@media (max-width:820px){.ap-grid{grid-template-columns:1fr;gap:var(--sp3)}.ap-photo{order:-1;max-width:380px}}

/* ---------- contact (legacy form styles) ---------- */
.contactgrid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:var(--sp4);align-items:start}
.field{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1.3rem}
.field label{font-family:var(--disp);font-weight:700;font-stretch:112%;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.field input,.field select,.field textarea{background:var(--surface);border:1px solid var(--line-strong);color:var(--ink);font-family:var(--body);font-size:1rem;padding:.9rem 1rem;width:100%;transition:border-color .2s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent)}
.field textarea{min-height:9.5rem;resize:vertical}
.field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 1.3rem) 55%,calc(100% - 1rem) 55%;background-size:.32rem .32rem;background-repeat:no-repeat}
.fieldrow{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.formnote{font-size:.85rem;color:var(--faint);margin-top:1rem}
.sidecard{border:1px solid var(--line-strong);background:var(--surface);padding:1.7rem;margin-bottom:var(--sp2)}
.sidecard h3{font-size:1rem;font-weight:800;font-stretch:112%;text-transform:uppercase}
.sidecard p{color:var(--muted);font-size:.94rem;margin-top:.6rem}
.sidecard a.plain{color:var(--accent);text-decoration:none;font-weight:600}
.sidecard a.plain:hover{text-decoration:underline}
@media (max-width:880px){.contactgrid{grid-template-columns:1fr}.fieldrow{grid-template-columns:1fr}}

/* ---------- soft corners on all buttons & button-like controls ---------- */
.btn,.filterbtn,.roletab,.c2-btn,.c3-bar .bplay,.c3-bar .bn2,.bvol-pop,.burger,.mobilemenu .close,.tbtn,.srow .go,.msvc-list a{border-radius:6px}
.c1-play{border-radius:50%}