:root {
      --bg:       #080B0F;
      --surface:  #0F1318;
      --elevated: #161B22;
      --border:   #1E2530;
      --gold:     #808e75;
      --gold-h:   #919f84;
      --text:     #F0EDE8;
      --muted:    #7A7A7A;
    }
    *, *::before, *::after { box-sizing: border-box; margin: 0; }
    html { scroll-behavior: smooth; }
    body {
      font-family: 'Manrope', sans-serif;
      background: var(--bg);
      color: var(--text);
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
    }

    /* Grain overlay */
    body::after {
      content: '';
      position: fixed; inset: 0;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
      opacity: 0.03;
      pointer-events: none;
      z-index: 9998;
    }

    @keyframes ee-spin {
      from { transform: rotate(-20deg) scale(.5); opacity: 0; }
      to   { transform: rotate(0deg)  scale(1);   opacity: 1; }
    }

    /* ── Genre rows ── */
    .genre-row.genre-active .genre-name { color: var(--text) !important; }
    .genre-row.genre-active .genre-desc { color: rgba(240,237,232,.55) !important; }
    .genre-row.genre-active { border-color: rgba(128,142,117,.3) !important; }

    /* ── Artist ticker ── */
    .ticker-outer {
      overflow: hidden;
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
      background: var(--surface);
      padding: .9rem 0;
      mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
      -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
    }
    .ticker-track {
      display: flex;
      width: max-content;
      animation: ticker-scroll 70s linear infinite;
    }
    .ticker-outer:hover .ticker-track { animation-play-state: paused; }
    @keyframes ticker-scroll {
      from { transform: translateX(0); }
      to   { transform: translateX(-50%); }
    }
    .ticker-item {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: .85rem;
      font-weight: 600;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--muted);
      white-space: nowrap;
      padding: 0 1.5rem;
      cursor: default;
      transition: color .2s ease;
    }
    .ticker-item:hover { color: var(--gold); }
    .ticker-sep {
      color: var(--border);
      font-size: .6rem;
      align-self: center;
      flex-shrink: 0;
    }

/* ── Pac-Man Easter Egg ── */
    .pac-man {
      position: fixed;
      border-radius: 50%;
      pointer-events: none;
      z-index: 9990;
      animation: pac-chomp .18s infinite;
    }
    @keyframes pac-chomp {
      0%, 100% { background: conic-gradient(#FFD700 0deg 58deg, transparent 58deg 122deg, #FFD700 122deg 360deg); }
      50%       { background: conic-gradient(#FFD700 0deg 86deg, transparent 86deg 94deg, #FFD700 94deg 360deg); }
    }

    /* ── Navigation ── */
    .nav-link {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 1.05rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--muted);
      background: none; border: none;
      cursor: pointer;
      padding: 0.25rem 0;
      position: relative;
      text-decoration: none;
      transition: color 0.2s ease;
      white-space: nowrap;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: .2rem;
    }
    .nav-icon {
      width: 13px; height: 13px;
      stroke: currentColor; fill: none;
      stroke-width: 1.4;
      stroke-linecap: round; stroke-linejoin: round;
      opacity: .45;
      transition: opacity .2s ease;
    }
    .nav-link:hover .nav-icon,
    .nav-link.active .nav-icon { opacity: 1; }
    .nav-link::after {
      content: '';
      position: absolute; bottom: -3px; left: 0;
      width: 0; height: 1px;
      background: var(--gold);
      transition: width 0.25s ease;
    }
    .nav-link:hover { color: var(--text); }
    .nav-link:hover::after { width: 100%; }
    .nav-link.active { color: var(--gold); }
    .nav-link.active::after { width: 100%; }
    .nav-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 2px; }

    /* ── Header scroll state ── */
    #site-header { transition: border-bottom-color 0.5s ease; }
    #site-header.scrolled { border-bottom-color: rgba(185,163,100,.35) !important; }

    /* ── Hero ── */
    .hero-bg {
      background:
        radial-gradient(ellipse 90% 55% at 50% -5%, rgba(128,142,117,.07) 0%, transparent 65%),
        linear-gradient(168deg, #070A11 0%, #090D16 48%, #05070C 100%);
    }

    /* Layer 1 — the studio, pushed far back */
    .hero-room {
      position: absolute; inset: -6%;
      background: url('/studio.jpg') center/cover no-repeat;
      opacity: .05;
      filter: blur(34px) saturate(.3) contrast(.8) brightness(1.25);
      mix-blend-mode: luminosity;
      transform: scale(1.06);
      animation: room-drift 44s ease-in-out infinite alternate;
      pointer-events: none;
    }
    @keyframes room-drift {
      from { transform: scale(1.06) translate3d(-1.2%, -0.8%, 0); }
      to   { transform: scale(1.12) translate3d(1.2%, 0.8%, 0); }
    }

    /* Layer 2 — the lamp, follows the cursor */
    .hero-lamp {
      position: absolute;
      top: 0; left: 0;
      width: 105vmax; height: 105vmax;
      margin: -52.5vmax 0 0 -52.5vmax;
      border-radius: 50%;
      background: radial-gradient(circle closest-side,
        rgba(150,164,137,.13) 0%,
        rgba(140,154,128,.085) 16%,
        rgba(128,142,117,.05) 30%,
        rgba(128,142,117,.026) 44%,
        rgba(128,142,117,.011) 60%,
        rgba(128,142,117,.004) 78%,
        transparent 100%);
      will-change: transform;
      pointer-events: none;
    }

    /* Layer 3 — vignette + grain */
    .hero-vignette {
      position: absolute; inset: 0;
      background: radial-gradient(ellipse 72% 62% at 50% 40%, transparent 18%, rgba(4,6,9,.5) 62%, rgba(4,6,9,.88) 100%);
      pointer-events: none;
    }
    .hero-grain {
      position: absolute; inset: 0;
      opacity: .3;
      mix-blend-mode: screen;
      pointer-events: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='gamma' exponent='5'/%3E%3CfeFuncG type='gamma' exponent='5'/%3E%3CfeFuncB type='gamma' exponent='5'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      background-size: 200px 200px;
    }
    @media (prefers-reduced-motion: reduce) {
      .hero-room { animation: none; }
    }

    /* "Mastering" catches light */
    .hero-mastering {
      background: linear-gradient(180deg, var(--gold-h) 0%, var(--gold) 55%, #5c6853 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      text-shadow: 0 0 46px rgba(145,159,132,.28);
      position: relative;
    }

    /* ── VU meter in button ── */
    .vu-btn-wrap {
      display: flex;
      gap: 2px;
      align-items: center;
      height: 1.575rem;
      flex-shrink: 0;
      margin-left: -18px;
    }
    .vu-btn-bar {
      display: flex;
      flex-direction: column-reverse;
      gap: 1.5px;
      width: 5.25px;
      height: 100%;
    }
    .vu-btn-seg {
      flex: 1;
      border-radius: 1.5px;
      background: rgba(0,0,0,0.22);
    }
    .vu-btn-seg.on {
      background: rgba(255,255,255,0.88);
      box-shadow: 0 0 4px rgba(255,255,255,0.45);
    }
    .vu-btn-seg.grn.on {
      background: #00cc55;
      box-shadow: 0 0 5px rgba(0,204,85,.6);
    }
    .vu-btn-seg.yel.on {
      background: #f5c400;
      box-shadow: 0 0 5px rgba(245,196,0,.55);
    }
    /* Peak zone: bright red at top fading to near-black at base */
    .vu-btn-seg.pk.on                { background: #2a0000; }
    .vu-btn-seg.pk[data-pk="1"].on  { background: #991000; box-shadow: 0 0 4px rgba(153,16,0,.45); }
    .vu-btn-seg.pk[data-pk="0"].on  { background: #FF1500; box-shadow: 0 0 9px rgba(255,21,0,.8), 0 0 3px rgba(255,60,0,.55); }

    /* ── Buttons ── */
    .btn {
      display: inline-flex; align-items: center; gap: .5rem;
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 700; font-size: .8125rem;
      letter-spacing: .08em; text-transform: uppercase;
      border: none; cursor: pointer; text-decoration: none;
      transition: background .2s ease, transform .15s ease, box-shadow .2s ease;
    }
    .btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
    .btn-primary {
      background: #000000; color: #ffffff;
      padding: .875rem 2rem;
      box-shadow: 0 4px 24px rgba(0,0,0,.4), 0 1px 4px rgba(0,0,0,.5);
    }
    .btn-primary:hover {
      background: #1a1a1a;
      transform: translateY(-2px);
      box-shadow: 0 8px 36px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.5);
    }
    .btn-primary:active { transform: translateY(0); }

    /* ── Shader background ── */
    #shader-bg {
      position: fixed; inset: 0;
      width: 100%; height: 100%;
      display: block;
      pointer-events: none;
      z-index: 2;
      mix-blend-mode: screen;
    }

    /* ── Custom cursor ── */
    html.pac-active { cursor: none; }
    * { cursor: inherit; }
    #cur-dot {
      position: fixed; left: 0; top: 0;
      width: 5px; height: 5px; border-radius: 50%;
      background: var(--text);
      pointer-events: none; z-index: 99999;
      will-change: transform;
      opacity: 0;
    }
    #cur-pac {
      position: fixed; left: 0; top: 0;
      width: 30px; height: 30px;
      background: #FFD700;
      border-radius: 50%;
      pointer-events: none; z-index: 99998;
      will-change: transform;
      opacity: 0;
      animation: pac-chomp .32s ease-in-out infinite alternate;
      transition: filter .2s ease;
    }
    #cur-pac.hov { filter: brightness(1.25) drop-shadow(0 0 6px rgba(255,215,0,.55)); }
    @keyframes pac-chomp {
      from { clip-path: polygon(50% 50%, 93% 25%, 79% 5%, 57% 0%, 43% 0%, 21% 5%, 7% 18%, 0% 34%, 0% 50%, 0% 66%, 7% 82%, 21% 95%, 43% 100%, 57% 100%, 79% 95%, 93% 75%); }
      to   { clip-path: polygon(50% 50%, 100% 49%, 79% 5%, 57% 0%, 43% 0%, 21% 5%, 7% 18%, 0% 34%, 0% 50%, 0% 66%, 7% 82%, 21% 95%, 43% 100%, 57% 100%, 79% 95%, 100% 51%); }
    }
    .vu-burst {
      position: fixed; left: 0; top: 0;
      width: 3px; border-radius: 1.5px;
      pointer-events: none; z-index: 99997;
      transform-origin: 50% 100%;
      animation: vu-burst-out .44s cubic-bezier(.15,.9,.32,1) forwards;
    }
    @keyframes vu-burst-out {
      0%   { opacity: 1;  transform: rotate(var(--a)) translateY(-3px); }
      100% { opacity: 0;  transform: rotate(var(--a)) translateY(-34px); }
    }

    /* ── Gold divider ── */
    .gold-line {
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(128,142,117,.35), transparent);
    }


    /* ── Hero animation ── */
    @keyframes rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

    .rise { animation: rise .8s cubic-bezier(.22,1,.36,1) both; }
    .rise-1 { animation-delay: .05s; }
    .rise-2 { animation-delay: .18s; }
    .rise-3 { animation-delay: .3s; }
    .rise-4 { animation-delay: .44s; }

    /* ── Form inputs ── */
    .field {
      width: 100%;
      background: var(--surface);
      border: 1px solid var(--border);
      color: var(--text);
      font-family: 'Manrope', sans-serif;
      font-size: .9375rem;
      padding: .875rem 1rem;
      outline: none;
      transition: border-color .2s ease, box-shadow .2s ease;
    }
    .field::placeholder { color: var(--muted); }
    .field:focus {
      border-color: var(--gold);
      box-shadow: 0 0 0 1px rgba(128,142,117,.12), inset 0 1px 3px rgba(0,0,0,.2);
    }

    /* ── Label ── */
    .label {
      display: block; margin-bottom: .5rem;
      font-family: 'Barlow Condensed', sans-serif;
      font-size: .6875rem; font-weight: 700;
      letter-spacing: .14em; text-transform: uppercase;
      color: var(--muted);
    }

    /* ── FAQ ── */
    .faq-item { border-bottom: 1px solid var(--border); }
    .faq-q {
      width: 100%; background: none; border: none;
      color: var(--text); text-align: left;
      font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 1rem;
      padding: 1.375rem 0;
      cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
      transition: color .2s ease;
    }
    .faq-q:hover { color: var(--gold); }
    .faq-q:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 2px; }
    .faq-icon {
      width: 18px; height: 18px; flex-shrink: 0; position: relative;
    }
    .faq-icon::before, .faq-icon::after {
      content: ''; position: absolute; background: var(--gold); border-radius: 1px;
      transition: transform .28s ease, opacity .28s ease;
    }
    .faq-icon::before { width: 100%; height: 1.5px; top: 50%; left: 0; transform: translateY(-50%); }
    .faq-icon::after  { width: 1.5px; height: 100%; top: 0; left: 50%; transform: translateX(-50%); }
    .faq-item.open .faq-icon::after { transform: translateX(-50%) scaleY(0); opacity: 0; }
    .faq-body {
      max-height: 0; overflow: hidden;
      transition: max-height .38s cubic-bezier(.4,0,.2,1);
    }
    .faq-item.open .faq-body { max-height: 600px; }
    .faq-inner {
      padding-bottom: 1.375rem;
      color: var(--muted); font-size: .9375rem; line-height: 1.78;
    }

    /* ── Service cards ── */
    .service-card {
      background: var(--elevated);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 1.75rem 1.5rem;
      box-shadow:
        0 1px 0 rgba(255,255,255,.03) inset,
        0 14px 28px -16px rgba(0,0,0,.55),
        0 2px 10px rgba(128,142,117,.05);
      transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, border-color .25s ease;
    }
    .service-card:hover {
      transform: translateY(-4px);
      border-color: rgba(128,142,117,.4);
      box-shadow:
        0 1px 0 rgba(255,255,255,.04) inset,
        0 22px 38px -16px rgba(0,0,0,.6),
        0 4px 16px rgba(128,142,117,.14);
    }

    /* ── Social icons ── */
    .social {
      color: var(--muted);
      transition: color .2s ease, transform .2s ease;
      display: flex; align-items: center;
    }
    .social:hover { color: var(--gold); transform: translateY(-1px); }
    .social:focus-visible { outline: 2px solid var(--gold); border-radius: 3px; }

    /* ── Pricing calculator ── */
    .price-check-label {
      display: flex; align-items: flex-start; gap: .75rem;
      font-family: 'Manrope', sans-serif; font-size: .875rem; color: var(--text);
      padding: .9rem 1rem; background: var(--elevated);
      border: 1px solid var(--border); border-radius: 3px; cursor: pointer;
      transition: border-color .15s ease;
    }
    .price-check-label:hover { border-color: rgba(128,142,117,.4); }
    .price-check-label input[type="checkbox"] {
      accent-color: var(--gold); width: 15px; height: 15px; cursor: pointer;
      margin-top: 2px; flex-shrink: 0;
    }

    /* ── Footer link ── */
    .flink {
      color: var(--muted); text-decoration: none; font-size: .8125rem;
      transition: color .2s ease;
    }
    .flink:hover { color: var(--text); }
    .flink:focus-visible { outline: 2px solid var(--gold); border-radius: 2px; }

    /* ── Inline email link ── */
    .email-link {
      color: var(--text); text-decoration: none; font-size: .9375rem;
      transition: color .2s ease;
    }
    .email-link:hover { color: var(--gold); }

    /* ── Success box ── */
    #form-success {
      display: none;
      margin-top: 1.25rem; padding: 1rem 1.25rem;
      background: rgba(128,142,117,.07);
      border: 1px solid rgba(128,142,117,.3);
      color: var(--gold); font-size: .9375rem; line-height: 1.65;
    }

    /* ── Mobile menu ── */
    #mobile-menu {
      display: none;
      border-top: 1px solid var(--border);
      background: rgba(8,11,15,.98);
    }
    #mobile-menu.open { display: block; }

    /* ── Gear ── */
    .gear-card {
      border: 1px solid var(--border);
      padding: 1.5rem;
      background: var(--surface);
      position: relative;
      overflow: hidden;
      transition: border-color .2s ease;
    }
    .gear-card::before {
      content: '';
      position: absolute; inset: 0;
      background: url('/studio.jpg') center/cover no-repeat;
      opacity: .055;
      pointer-events: none;
    }
    .gear-card:hover { border-color: rgba(128,142,117,.35); }
    .sw-tag {
      display: inline-block;
      padding: .3rem .875rem;
      border: 1px solid var(--border);
      font-family: 'Barlow Condensed', sans-serif;
      font-size: .75rem; font-weight: 700;
      letter-spacing: .06em;
      color: var(--muted);
      background: var(--elevated);
      transition: border-color .2s ease, color .2s ease;
    }
    .sw-tag:hover { border-color: var(--gold); color: var(--text); }

    /* ── Technics 1200 Turntable Player ── */

    /* Center label (spins with disc) */
    .vinyl-label {
      position: absolute; top: 50%; left: 50%;
      transform: translate(-50%,-50%);
      width: 28%; height: 28%; border-radius: 50%;
      background: #12151c;
      border: 1px solid rgba(128,142,117,.18);
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      gap: .15rem; text-align: center; pointer-events: none;
    }
    .vinyl-label-name {
      font-family: 'Barlow Condensed', sans-serif; font-weight: 800;
      font-size: .55rem; letter-spacing: .1em;
      color: var(--gold); text-transform: uppercase;
    }
    .vinyl-label-track {
      font-family: 'Manrope', sans-serif; font-size: .42rem;
      color: var(--muted); letter-spacing: .04em;
      max-width: 80%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
    }
    .vinyl-hole {
      width: 7px; height: 7px; border-radius: 50%;
      background: #080b0f; margin-top: .1rem;
    }

    /* Deck body */
    .tt-deck {
      position: relative; max-width: 578px; margin: 0 auto 2.5rem;
      background: #1a1b1e;
      border-radius: 10px;
      padding: 1.375rem 1.5rem 1.25rem;
      box-shadow:
        0 2px 0 rgba(255,255,255,.045) inset,
        0 -2px 0 rgba(0,0,0,.5) inset,
        0 36px 80px rgba(0,0,0,.88),
        0 4px 16px rgba(0,0,0,.55);
    }
    .tt-top-strip {
      display: flex; justify-content: space-between; align-items: center;
      margin-bottom: 1.125rem;
    }
    .tt-power-dot {
      width: 52px; height: 52px; border-radius: 50%;
      background: radial-gradient(circle at 38% 35%, #b0bcc8, #58606a);
      box-shadow: 0 2px 5px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.18);
    }
    .tt-sensors { display: flex; gap: 5px; }
    .tt-sensor-dot {
      width: 9px; height: 9px; border-radius: 50%;
      background: #141618; border: 1px solid #1e2228;
      box-shadow: inset 0 1px 2px rgba(0,0,0,.5);
    }

    /* Main body */
    .tt-main {
      display: flex; gap: 1.25rem; align-items: flex-start;
      overflow: visible;
    }
    .tt-platter-zone {
      position: relative; flex: 1; max-width: 430px; aspect-ratio: 1;
    }
    /* Strobe ring (static, doesn't spin) */
    .tt-strobe-ring {
      width: 100%; height: 100%; border-radius: 50%;
      background: repeating-conic-gradient(
        rgba(255,255,255,.5) 0deg 1.5deg,
        transparent 1.5deg 5.5deg
      );
      padding: 10px; box-sizing: border-box;
      box-shadow: 0 0 0 2px #101114, 0 10px 36px rgba(0,0,0,.75);
    }
    /* Vinyl disc (spins) */
    #vinyl-disc {
      width: 100%; height: 100%; border-radius: 50%;
      position: relative;
      background:
        radial-gradient(circle at 38% 36%, rgba(255,255,255,.018) 0%, transparent 52%),
        radial-gradient(circle at center, #1a1d25 0%, #1a1d25 24%, transparent 24.5%),
        repeating-radial-gradient(circle at center,
          #0b0d10 0px, #0b0d10 2px,
          #141820 2px, #141820 4px);
      box-shadow: inset 0 0 40px rgba(0,0,0,.85);
      transform-origin: center;
    }
    @keyframes vinyl-spin {
      from { transform: rotate(0deg); }
      to   { transform: rotate(360deg); }
    }
    #vinyl-disc.playing { animation: vinyl-spin 2.4s linear infinite; }

    /* Right panel */
    .tt-right-panel {
      width: 128px; flex-shrink: 0;
      display: flex; flex-direction: column; gap: .875rem;
      overflow: visible;
    }
    /* Tonearm zone */
    .tt-arm-zone {
      position: relative; height: 230px; overflow: visible;
    }
    .vinyl-arm-wrap {
      position: absolute; top: 50px; left: 4px;
      transform-origin: 36px 51px;
      transform: rotate(0deg);
      transition: transform 1s cubic-bezier(.35,0,.2,1);
      overflow: visible;
    }
    .vinyl-arm-wrap.on-record { transform: rotate(35deg); }

    /* Bottom strip */
    .tt-bottom-strip {
      display: flex; align-items: center; gap: .875rem;
      margin-top: 1.125rem; padding-top: 1.125rem;
      border-top: 1px solid #20222a;
      flex-wrap: wrap;
    }
    .tt-start-stop {
      display: flex; align-items: center; gap: .5rem;
      padding: .45rem .875rem;
      background: #1c1e24; border: 1px solid #282c36;
      border-radius: 4px; cursor: pointer;
      font-family: 'Barlow Condensed', sans-serif; font-size: .58rem;
      font-weight: 700; letter-spacing: .12em; color: #484e5e;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 2px 5px rgba(0,0,0,.45);
      transition: color .2s ease, background .2s ease;
      flex-shrink: 0;
    }
    .tt-start-stop:hover { color: var(--muted); background: #232630; }
    .tt-ss-dot {
      width: 7px; height: 7px; border-radius: 50%;
      background: #28303e; border: 1px solid #32384a; flex-shrink: 0;
      transition: background .2s ease, box-shadow .2s ease;
    }
    .tt-ss-dot.active {
      background: #ff3a00;
      box-shadow: 0 0 8px rgba(255,58,0,.85), 0 0 2px rgba(255,80,0,.6);
    }
    .tt-rpm-section { display: flex; gap: .3rem; }
    .tt-rpm-btn {
      padding: .3rem .7rem;
      background: #1c1e24; border: 1px solid #282c36;
      border-radius: 3px; cursor: pointer;
      font-family: 'Barlow Condensed', sans-serif; font-size: .58rem;
      font-weight: 700; letter-spacing: .08em; color: #3c4455;
      transition: color .15s ease, border-color .15s ease;
    }
    .tt-rpm-btn:hover  { color: var(--muted); }
    .tt-brand {
      margin-left: auto;
      font-family: 'Manrope', sans-serif; font-size: .5rem;
      color: #252830; letter-spacing: .06em; text-align: right; line-height: 1.5;
    }

    /* Info section below deck */
    .tt-info {
      max-width: 680px; margin: 0 auto 2.5rem;
      display: flex; align-items: flex-end; justify-content: space-between;
      gap: 1.5rem; flex-wrap: wrap;
    }
    .tt-now-label {
      font-family: 'Barlow Condensed', sans-serif; font-size: .65rem;
      font-weight: 700; letter-spacing: .16em;
      color: var(--gold); margin-bottom: .4rem;
    }
    .tt-now-title {
      font-family: 'Barlow Condensed', sans-serif; font-size: 1.75rem;
      font-weight: 800; line-height: 1.1;
      color: var(--text); letter-spacing: -.02em; margin-bottom: .2rem;
    }
    .tt-now-artist {
      font-family: 'Manrope', sans-serif; font-size: .875rem; color: var(--muted);
    }
    .tt-time-nav {
      display: flex; flex-direction: column; align-items: flex-end; gap: .75rem;
      flex-shrink: 0;
    }
    .tt-time-display {
      font-family: 'Manrope', sans-serif; font-size: .75rem;
      color: var(--muted); letter-spacing: .04em;
    }
    .tt-nav-btns { display: flex; gap: .5rem; }
    .tt-nav-btn {
      padding: .45rem .875rem;
      background: #1c1e24; border: 1px solid #282c36;
      border-radius: 4px; cursor: pointer;
      font-family: 'Barlow Condensed', sans-serif; font-size: .58rem;
      font-weight: 700; letter-spacing: .12em; color: var(--muted);
      transition: color .2s ease, border-color .2s ease, background .2s ease;
    }
    .tt-nav-btn:hover { color: var(--text); background: #232630; border-color: #333c4a; }
    .tt-nav-btn:active { transform: scale(.96); }

    /* Tracklist */
    .vinyl-tracklist {
      list-style: none; padding: 0; margin: 0;
      max-width: 680px; margin: 0 auto;
      border-top: 1px solid var(--border);
    }
    .vinyl-track-item {
      display: flex; align-items: center; gap: 1rem;
      padding: .875rem 0; border-bottom: 1px solid var(--border);
      cursor: pointer; transition: opacity .2s ease;
    }
    .vinyl-track-item:hover { opacity: .75; }
    .vinyl-track-num {
      font-family: 'Barlow Condensed', sans-serif; font-size: .7rem;
      font-weight: 700; letter-spacing: .08em;
      color: var(--muted); width: 22px; flex-shrink: 0; text-align: right;
    }
    .vinyl-track-info { flex: 1; }
    .vinyl-track-title {
      font-family: 'Barlow Condensed', sans-serif; font-size: .875rem;
      font-weight: 700; color: var(--text);
    }
    .vinyl-track-artist {
      font-size: .75rem; color: var(--muted); font-family: 'Manrope', sans-serif;
    }
    .vinyl-track-dur {
      font-family: 'Manrope', sans-serif; font-size: .75rem; color: var(--muted);
    }
    .vinyl-track-item.active .vinyl-track-title { color: var(--gold); }
    .vinyl-track-item.active .vinyl-track-num   { color: var(--gold); }

@media(max-width:768px){.about-grid{grid-template-columns:1fr !important;gap:2.5rem !important;}}

.hidden-mobile { display: flex; }
    .show-mobile   { display: none; }
    @media (max-width: 768px) {
      .hidden-mobile { display: none !important; }
      .show-mobile   { display: flex !important; }
      .hero-reel-wrap { opacity: .35; right: -20%; width: 90% !important; }
    }