:root{
    --bg:#0a0a0b;
    --bg-2:#111114;
    --ink:#f4f1ea;
    --ink-dim:#8c8a85;
    --line:rgba(244,241,234,0.08);
    --line-2:rgba(244,241,234,0.14);
    --rec:#ff3b30;            /* REC red */
    --signal:#c4ff3a;          /* signal lime — "мікрофон активний" */
    --amber:#ff7a1a;           /* warm tube glow */
    --amber-soft:#ffb877;
    --violet:#7c5cff;
  }

  *,*::before,*::after{box-sizing:border-box}
  html,body{margin:0;padding:0}
  html{scroll-behavior:smooth; overflow-x:hidden}
  section[id], header[id], footer[id]{scroll-margin-top:88px}
  @media (max-width:900px){ section[id], header[id], footer[id]{scroll-margin-top:80px} }
  body{
    font-family:"Bricolage Grotesque", sans-serif;
    background:var(--bg);
    color:var(--ink);
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    overflow-x:hidden;
    font-feature-settings:"ss01","ss02";
  }
  ::selection{background:var(--signal); color:#000}
  a{color:inherit; text-decoration:none}
  button{font-family:inherit; cursor:pointer; border:none; background:none; color:inherit}

  /* film grain overlay */
  body::after{
    content:"";
    position:fixed; inset:0; pointer-events:none; z-index:200;
    background-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.96 0 0 0 0 0.94 0 0 0 0 0.91 0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>");
    opacity:.06; mix-blend-mode:overlay;
  }

  /* ------- layout helpers ------- */
  .wrap{max-width:1440px; margin:0 auto; padding:0 32px}
  @media (max-width:720px){.wrap{padding:0 18px}}

  /* =========================================================
     NAV
     ========================================================= */
  .nav{
    position:fixed; top:0; left:0; right:0; z-index:100;
    backdrop-filter:blur(18px) saturate(120%);
    background:rgba(10,10,11,0.55);
    border-bottom:1px solid var(--line);
  }
  .nav-inner{
    display:flex; align-items:center; justify-content:space-between;
    height:72px; padding:0 32px;
    max-width:1600px; margin:0 auto;
  }
  .logo{
    display:flex; align-items:center; gap:10px;
    font-weight:700; letter-spacing:-0.02em; font-size:18px;
  }
  .logo-mark{
    width:44px; height:44px; display:block; object-fit:contain;
  }
  @keyframes rec{0%,100%{opacity:1}50%{opacity:.25}}

  .nav-links{display:flex; gap:36px; align-items:center}
  .nav-links a{
    font-size:14px; color:var(--ink-dim); transition:color .3s;
    position:relative;
  }
  .nav-links a:hover{color:var(--ink)}
  .nav-links a::after{
    content:""; position:absolute; left:0; bottom:-6px; height:1px; width:0;
    background:var(--signal); transition:width .35s ease;
  }
  .nav-links a:hover::after{width:100%}
  .nav-links a.active{color:var(--signal)}
  .nav-links a.active::after{width:100%}

  .cta{
    display:inline-flex; align-items:center; gap:10px;
    padding:10px 18px; background:var(--signal); color:#000;
    border-radius:999px; font-weight:600; font-size:14px;
    transition:transform .3s, box-shadow .3s;
  }
  .cta:hover{transform:translateY(-1px); box-shadow:0 0 32px rgba(196,255,58,.4)}
  .cta-dot{width:6px; height:6px; border-radius:50%; background:#000; animation:rec 1.4s infinite}
  .cta-icon{display:none; width:19px; height:19px}

  /* Shared by the mobile slide-out menu's quick-contact row AND the
     booking modal's quick actions — used at every viewport width (the
     modal is not mobile-only), so this must live outside any breakpoint. */
  .mm-quick-btn{
    flex:1; display:flex; align-items:center; justify-content:center; gap:8px;
    padding:14px; border-radius:12px;
    border:1px solid var(--line-2); color:var(--ink);
    font-family:"JetBrains Mono", monospace; font-size:12px;
    text-transform:uppercase; letter-spacing:0.06em;
    transition:border-color .3s, color .3s;
  }
  .mm-quick-btn svg{width:17px; height:17px; flex:none}
  .mm-quick-btn:hover{border-color:var(--signal); color:var(--signal)}
  .mm-quick-call{background:var(--signal); color:#000; border-color:var(--signal)}
  .mm-quick-call:hover{color:#000}

  .burger{display:none; background:none; border:none; padding:0; z-index:110}
  .mobile-menu{display:none}
  @media (max-width:900px){
    .nav{background:#0a0a0b; backdrop-filter:none}
    .nav-inner{padding:0 18px; height:64px}
    .logo{font-size:15px; gap:8px}
    .logo-mark{width:34px; height:34px}

    /* Text + dot pill got cramped next to the logo and burger at mobile
       widths — icon-only circular button reads cleaner in that tight row.
       Full "Забронювати" label stays in the slide-out menu's own row,
       which has a whole line to itself. */
    .cta{
      width:40px; height:40px; padding:0;
      justify-content:center; border-radius:50%;
    }
    .cta-dot, .cta-label{display:none}
    .cta-icon{display:block}

    .nav-links{display:none}
    .burger{
      display:flex; flex-direction:column; gap:5px;
      width:28px; height:18px; justify-content:center;
      position:relative;
    }
    .burger span{
      display:block; height:1.5px; background:var(--ink); width:100%;
      transition:transform .3s, opacity .3s;
    }
    .burger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
    .burger.open span:nth-child(2){opacity:0}
    .burger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

    .mobile-menu.open{
      display:flex; flex-direction:column;
      position:fixed; top:64px; left:0; right:0; z-index:105;
      height:calc(100vh - 64px); height:calc(100dvh - 64px);
      background:#0a0a0b;
    }

    /* live REC readout */
    .mm-rec{
      display:flex; align-items:center; gap:10px;
      padding:20px 24px; border-bottom:1px solid var(--line);
      font-family:"JetBrains Mono", monospace; font-size:12px;
      color:var(--ink-dim); text-transform:uppercase; letter-spacing:0.14em;
      flex:none;
    }
    .mm-rec-time{color:var(--ink); letter-spacing:0.05em; margin-left:auto}

    .mm-list{
      display:flex; flex-direction:column;
      padding:8px 24px; overflow-y:auto; flex:1;
    }
    .mm-row{
      display:flex; align-items:center; justify-content:space-between; gap:16px;
      padding:20px 0; border-bottom:1px solid var(--line);
      font-size:28px; font-weight:500; letter-spacing:-0.02em;
      opacity:0; transform:translateX(-14px);
      transition:opacity .4s ease, transform .4s ease, color .3s;
    }
    .mobile-menu.open .mm-row{opacity:1; transform:translateX(0)}
    .mm-row:nth-child(1){transition-delay:.03s}
    .mm-row:nth-child(2){transition-delay:.07s}
    .mm-row:nth-child(3){transition-delay:.11s}
    .mm-row:nth-child(4){transition-delay:.15s}
    .mm-row:nth-child(5){transition-delay:.19s}
    .mm-row:nth-child(6){transition-delay:.23s}
    .mm-row:nth-child(7){transition-delay:.27s}
    .mm-row:active, .mm-row:hover, .mm-row.active{color:var(--signal)}

    .mm-wave{
      display:flex; align-items:flex-end; gap:3px; height:22px; flex:none;
    }
    .mm-wave span{
      width:3px; height:100%; border-radius:2px;
      background:var(--ink-dim); opacity:.4;
      transform:scaleY(.3); transform-origin:bottom;
      transition:background .3s, opacity .3s;
    }
    .mm-row:hover .mm-wave span, .mm-row:active .mm-wave span, .mm-row.active .mm-wave span{
      background:var(--signal); opacity:1;
      animation:mmWave .9s ease-in-out infinite;
    }
    .mm-wave span:nth-child(1){animation-delay:0s}
    .mm-wave span:nth-child(2){animation-delay:.1s}
    .mm-wave span:nth-child(3){animation-delay:.2s}
    .mm-wave span:nth-child(4){animation-delay:.3s}
    .mm-wave span:nth-child(5){animation-delay:.4s}
    @keyframes mmWave{
      0%,100%{transform:scaleY(.3)}
      50%{transform:scaleY(1)}
    }

    .mm-row-cta{color:var(--signal)}
    .mm-row-cta .mm-row-dot{
      width:10px; height:10px; border-radius:50%; flex:none;
      background:var(--signal); box-shadow:0 0 12px var(--signal);
      animation:rec 1.2s infinite;
    }

    .mm-quick{
      flex:none; display:flex; gap:10px;
      padding:16px 24px 0;
    }

    /* scrolling contact ticker */
    .mm-ticker{
      flex:none; overflow:hidden;
      border-top:1px solid var(--line);
      padding:16px 0;
    }
    .mm-ticker-track{
      display:flex; gap:32px; white-space:nowrap;
      animation:scroll 18s linear infinite;
      font-family:"JetBrains Mono", monospace; font-size:12px;
      color:var(--ink-dim); letter-spacing:0.05em;
    }
    .mm-ticker-track span{display:flex; align-items:center; gap:32px}
    .mm-ticker-track em{
      color:var(--signal); font-style:normal;
    }
  }

  /* =========================================================
     HERO
     ========================================================= */
  .hero{
    position:relative; min-height:100vh; min-height:100dvh; padding-top:120px;
    overflow:hidden;
    border-bottom:1px solid var(--line);
  }
  /* Acoustic foam panel pattern — wedge/pyramid texture */
  .hero-grid{
    position:absolute; inset:0;
    background-color:#0a0a0b;
    background-image:
      radial-gradient(circle at 25% 25%, rgba(255,255,255,.025) 0%, transparent 35%),
      radial-gradient(circle at 75% 75%, rgba(255,255,255,.018) 0%, transparent 35%),
      radial-gradient(circle at 25% 75%, rgba(0,0,0,.4) 0%, transparent 35%),
      radial-gradient(circle at 75% 25%, rgba(0,0,0,.4) 0%, transparent 35%);
    background-size:90px 90px;
    background-position:0 0, 45px 45px, 0 0, 45px 45px;
    mask-image:radial-gradient(ellipse at 50% 40%, #000 25%, transparent 75%);
    pointer-events:none;
  }
  .hero-grid::before{
    content:""; position:absolute; inset:0;
    background-image:
      linear-gradient(135deg, transparent 46%, rgba(255,255,255,.04) 50%, transparent 54%),
      linear-gradient(45deg, transparent 46%, rgba(0,0,0,.4) 50%, transparent 54%);
    background-size:90px 90px;
    mask-image:radial-gradient(ellipse at 50% 40%, #000 25%, transparent 75%);
    opacity:.7;
  }
  .hero-glow{
    position:absolute; width:900px; height:900px; border-radius:50%;
    background:radial-gradient(circle, rgba(255,122,26,.18), transparent 60%);
    top:-200px; right:-150px; pointer-events:none; filter:none;
  }
  .hero-glow-2{
    position:absolute; width:700px; height:700px; border-radius:50%;
    background:radial-gradient(circle, rgba(196,255,58,.10), transparent 60%);
    bottom:-200px; left:-100px; pointer-events:none; filter:none;
  }
  @media (max-width:720px){ .hero-glow, .hero-glow-2{display:none} }

  .hero-meta{
    display:flex; flex-wrap:wrap; gap:12px 16px; align-items:center;
    font-family:"JetBrains Mono", monospace; font-size:12px;
    color:var(--ink-dim); text-transform:uppercase; letter-spacing:0.15em;
    margin-bottom:32px;
  }
  .hero-meta-divider{flex:1; height:1px; background:var(--line)}
  @media (max-width:720px){
    .hero-meta{font-size:10px; letter-spacing:.1em}
    .hero-meta-divider{display:none}
  }
  .live-tag{
    display:inline-flex; align-items:center; gap:8px;
    padding:6px 12px; border:1px solid var(--line-2); border-radius:999px;
    color:var(--signal);
  }
  .live-dot{width:6px; height:6px; border-radius:50%; background:var(--signal); box-shadow:0 0 8px var(--signal); animation:rec 1.2s infinite}

  .hero-title{
    font-size:clamp(34px, 9.5vw, 168px);
    line-height:0.92; letter-spacing:-0.045em;
    font-weight:500; margin:0 0 40px;
    font-variation-settings:"opsz" 96;
  }
  .hero-title .serif,
  .hero-title em{
    font-family:"Instrument Serif", serif; font-style:italic;
    font-weight:400; letter-spacing:-0.02em;
    color:var(--amber-soft);
  }
  .hero-bottom{
    display:grid; grid-template-columns: 1fr 1fr 1fr; gap:48px;
    align-items:end; padding-bottom:80px; padding-top:32px;
    border-top:1px solid var(--line);
  }
  @media (max-width:900px){.hero-bottom{grid-template-columns:1fr; gap:32px}}

  .hero-lead{
    font-size:18px; line-height:1.5; color:var(--ink-dim);
    max-width:42ch;
  }
  .hero-cta-block{display:flex; flex-direction:column; gap:16px; align-items:flex-start}

  .btn-primary{
    display:inline-flex; align-items:center; gap:14px;
    padding:18px 28px;
    background:var(--ink); color:#000; border-radius:8px;
    font-weight:600; font-size:15px;
    transition:all .3s;
    position:relative; overflow:hidden;
  }
  .btn-primary::before{
    content:""; position:absolute; inset:0;
    background:linear-gradient(90deg, transparent, rgba(196,255,58,.4), transparent);
    transform:translateX(-100%); transition:transform .6s;
  }
  .btn-primary:hover::before{transform:translateX(100%)}
  .btn-primary:hover{transform:translateY(-2px)}
  .btn-arrow{
    width:28px; height:28px; border-radius:50%; background:var(--signal);
    display:grid; place-items:center; color:#000;
  }

  .btn-ghost{
    display:inline-flex; align-items:center; gap:10px;
    padding:16px 24px; border:1px solid var(--line-2); border-radius:8px;
    font-size:15px; transition:all .3s;
  }
  .btn-ghost:hover{border-color:var(--signal); color:var(--signal)}

  .hero-stats{display:grid; grid-template-columns:1fr 1fr; gap:24px}
  .stat{padding:0; border-left:1px solid var(--line-2); padding-left:18px}
  .stat-num{
    font-family:"Instrument Serif", serif;
    font-size:48px; line-height:1; color:var(--amber-soft);
  }
  .stat-num small{font-size:24px; color:var(--ink-dim)}
  .stat-label{
    font-family:"JetBrains Mono",monospace; font-size:11px;
    text-transform:uppercase; letter-spacing:0.12em;
    color:var(--ink-dim); margin-top:8px;
  }

  /* Tightened so the hero CTAs land inside the first mobile screen instead
     of just past it — real mobile browser chrome eats ~120-150px of the
     nominal viewport height that a desktop-scaled clamp() doesn't account
     for. Stats block is allowed to fall below the fold; only the title,
     lead and buttons need to fit. */
  @media (max-width:720px){
    .hero{padding-top:80px}
    .hero-meta{margin-bottom:20px}
    .hero-title{margin-bottom:20px}
    .hero-bottom{padding-top:20px; padding-bottom:40px; gap:24px}
    .hero-lead{font-size:15px; line-height:1.55}
    .hero-cta-block{gap:10px}
    .btn-primary{padding:14px 22px; font-size:14px}
    .btn-ghost{padding:12px 20px; font-size:14px}
    .hero-stats{gap:16px}
    .stat-num{font-size:32px}
    .stat-num small{font-size:18px}
    .stat-label{font-size:10px; margin-top:4px}
  }

  /* hero waveform visual */
  .hero-visual{
    position:absolute; right:5%; top:160px; width:42%;
    aspect-ratio:1/1.1;
    pointer-events:none;
  }
  @media (max-width:1100px){.hero-visual{display:none}}
  .vinyl{
    position:absolute; inset:0;
    border-radius:50%;
    background:
      radial-gradient(circle at center, #1a1a1d 0%, #0a0a0b 70%),
      conic-gradient(from 0deg, #1a1a1d, #2a2a2e, #1a1a1d);
    box-shadow:
      0 60px 120px rgba(0,0,0,.6),
      inset 0 0 100px rgba(255,122,26,.06);
    animation:spin 18s linear infinite;
  }
  .vinyl::before{
    content:""; position:absolute; inset:8%;
    border-radius:50%;
    background:repeating-radial-gradient(circle, rgba(255,255,255,.02) 0 1px, transparent 1px 4px);
  }
  .vinyl::after{
    content:""; position:absolute; inset:38%;
    border-radius:50%;
    background:radial-gradient(circle at 35% 35%, var(--amber), #6b1a00);
    box-shadow:0 0 60px rgba(255,122,26,.4);
  }
  @keyframes spin{to{transform:rotate(360deg)}}

  .waveform-overlay{
    position:absolute; left:6%; bottom:16%; width:46%;
    display:flex; align-items:flex-end; gap:3px; height:90px;
  }
  .waveform-overlay span{
    flex:1; height:100%; transform-origin:bottom;
    background:var(--signal); border-radius:2px;
    animation:wave 1.4s ease-in-out infinite;
  }
  .waveform-overlay span:nth-child(1){animation-delay:.0s}
  .waveform-overlay span:nth-child(2){animation-delay:.1s}
  .waveform-overlay span:nth-child(3){animation-delay:.2s}
  .waveform-overlay span:nth-child(4){animation-delay:.3s}
  .waveform-overlay span:nth-child(5){animation-delay:.15s}
  .waveform-overlay span:nth-child(6){animation-delay:.05s}
  .waveform-overlay span:nth-child(7){animation-delay:.25s}
  .waveform-overlay span:nth-child(8){animation-delay:.35s}
  .waveform-overlay span:nth-child(9){animation-delay:.1s}
  .waveform-overlay span:nth-child(10){animation-delay:.2s}
  .waveform-overlay span:nth-child(11){animation-delay:.3s}
  .waveform-overlay span:nth-child(12){animation-delay:.05s}
  .waveform-overlay span:nth-child(13){animation-delay:.25s}
  .waveform-overlay span:nth-child(14){animation-delay:.15s}
  .waveform-overlay span:nth-child(15){animation-delay:.35s}
  @keyframes wave{
    0%,100%{transform:scaleY(.2)}
    50%{transform:scaleY(1)}
  }

  /* =========================================================
     MARQUEE TICKER
     ========================================================= */
  .ticker{
    overflow:hidden; padding:24px 0; border-bottom:1px solid var(--line);
    background:#070708;
  }
  .ticker-track{
    display:flex; gap:64px; white-space:nowrap;
    animation:scroll 40s linear infinite;
    font-family:"Instrument Serif", serif; font-style:italic;
    font-size:48px; color:var(--ink-dim);
  }
  .ticker-track span{display:flex; align-items:center; gap:64px}
  .ticker-track .star{
    color:var(--signal); font-style:normal; font-family:"Bricolage Grotesque";
  }
  @keyframes scroll{to{transform:translateX(-50%)}}

  /* =========================================================
     SERVICES / FEATURES
     ========================================================= */
  .section{padding:140px 0; position:relative}
  @media (max-width:900px){ .section{padding:88px 0} }
  @media (max-width:560px){ .section{padding:64px 0} }
  .section-head{
    display:grid; grid-template-columns: 1fr 1fr; gap:60px;
    margin-bottom:80px; align-items:end;
  }
  @media (max-width:900px){.section-head{grid-template-columns:1fr; gap:32px}}

  .head-offset-120{padding-top:120px}
  .head-offset-140{padding-top:140px}
  @media (max-width:900px){
    .head-offset-120{padding-top:72px}
    .head-offset-140{padding-top:72px}
  }

  .eyebrow{
    display:inline-flex; align-items:center; gap:10px;
    font-family:"JetBrains Mono", monospace; font-size:12px;
    text-transform:uppercase; letter-spacing:0.18em;
    color:var(--signal);
    margin-bottom:24px;
  }
  .eyebrow::before{
    content:""; width:24px; height:1px; background:var(--signal);
  }

  .section-title{
    font-size:clamp(40px, 6vw, 88px);
    line-height:0.95; letter-spacing:-0.035em;
    font-weight:500; margin:0;
  }
  .section-title em{
    font-family:"Instrument Serif", serif; font-style:italic;
    color:var(--amber-soft); font-weight:400;
  }
  .section-desc{
    font-size:17px; line-height:1.6; color:var(--ink-dim);
    max-width:50ch;
  }

  /* services bento */
  .bento{
    display:grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: minmax(200px, auto);
    gap:16px;
  }
  .card{
    position:relative; padding:32px;
    background:var(--bg-2);
    border:1px solid var(--line);
    border-radius:20px;
    overflow:hidden;
    transition:transform .5s cubic-bezier(.2,.7,.2,1), border-color .4s;
  }
  .card:hover{transform:translateY(-4px); border-color:var(--line-2)}
  .card-num{
    position:absolute; top:24px; right:28px;
    font-family:"JetBrains Mono", monospace; font-size:12px;
    color:var(--ink-dim); letter-spacing:0.1em;
  }
  .card-title{
    font-size:28px; line-height:1.05; letter-spacing:-0.02em;
    font-weight:500; margin:0 0 16px;
  }
  .card-text{font-size:15px; line-height:1.55; color:var(--ink-dim)}

  .c-1{grid-column: span 7; min-height:380px;
    background:
      radial-gradient(circle at 80% 20%, rgba(255,122,26,.18), transparent 50%),
      var(--bg-2);
  }
  .c-2{grid-column: span 5; min-height:380px}
  .c-3{grid-column: span 4}
  .c-4{grid-column: span 4}
  .c-5{grid-column: span 4}
  @media (max-width:900px){
    .c-1,.c-2,.c-3,.c-4,.c-5{grid-column:span 12}
  }

  /* mic illustration in c-1 */
  .mic-svg{
    position:absolute; right:-20px; bottom:-20px;
    width:250px; height:250px; opacity:.9;
  }

  /* animated audio wave bars in c-2 */
  .audio-wave{
    position:absolute; bottom:24px; left:32px; right:32px;
    height:70px;
    display:flex; align-items:flex-end; gap:3px;
    pointer-events:none;
  }
  .audio-wave span{
    flex:1; min-width:2px;
    height:100%;
    background:linear-gradient(180deg, var(--signal), rgba(196,255,58,.3));
    border-radius:2px;
    transform-origin:bottom;
    animation:audio-bar 1.4s ease-in-out infinite;
  }
  .audio-wave span:nth-child(1){animation-delay:0s}
  .audio-wave span:nth-child(2){animation-delay:.05s}
  .audio-wave span:nth-child(3){animation-delay:.1s}
  .audio-wave span:nth-child(4){animation-delay:.18s}
  .audio-wave span:nth-child(5){animation-delay:.25s}
  .audio-wave span:nth-child(6){animation-delay:.32s}
  .audio-wave span:nth-child(7){animation-delay:.4s}
  .audio-wave span:nth-child(8){animation-delay:.48s}
  .audio-wave span:nth-child(9){animation-delay:.55s}
  .audio-wave span:nth-child(10){animation-delay:.62s}
  .audio-wave span:nth-child(11){animation-delay:.7s}
  .audio-wave span:nth-child(12){animation-delay:.05s}
  .audio-wave span:nth-child(13){animation-delay:.12s}
  .audio-wave span:nth-child(14){animation-delay:.2s}
  .audio-wave span:nth-child(15){animation-delay:.28s}
  .audio-wave span:nth-child(16){animation-delay:.35s}
  .audio-wave span:nth-child(17){animation-delay:.42s}
  .audio-wave span:nth-child(18){animation-delay:.5s}
  .audio-wave span:nth-child(19){animation-delay:.58s}
  .audio-wave span:nth-child(20){animation-delay:.65s}
  .audio-wave span:nth-child(21){animation-delay:.72s}
  .audio-wave span:nth-child(22){animation-delay:.0s}
  .audio-wave span:nth-child(23){animation-delay:.08s}
  .audio-wave span:nth-child(24){animation-delay:.15s}
  .audio-wave span:nth-child(25){animation-delay:.22s}
  .audio-wave span:nth-child(26){animation-delay:.3s}
  .audio-wave span:nth-child(27){animation-delay:.38s}
  .audio-wave span:nth-child(28){animation-delay:.45s}
  .audio-wave span:nth-child(29){animation-delay:.52s}
  .audio-wave span:nth-child(30){animation-delay:.6s}
  .audio-wave span:nth-child(31){animation-delay:.68s}
  .audio-wave span:nth-child(32){animation-delay:.05s}
  .audio-wave span:nth-child(33){animation-delay:.13s}
  .audio-wave span:nth-child(34){animation-delay:.21s}
  .audio-wave span:nth-child(35){animation-delay:.29s}
  .audio-wave span:nth-child(36){animation-delay:.37s}
  .audio-wave span:nth-child(37){animation-delay:.44s}
  .audio-wave span:nth-child(38){animation-delay:.52s}
  .audio-wave span:nth-child(39){animation-delay:.6s}
  .audio-wave span:nth-child(40){animation-delay:.68s}
  @keyframes audio-bar{
    0%,100%{ transform:scaleY(0.15); opacity:.5 }
    50%{ transform:scaleY(1); opacity:1 }
  }

  /* softbox flicker animation for lighting card */
  .softbox-flicker{
    animation:softbox-pulse 3s ease-in-out infinite;
  }
  .softbox-glow{
    animation:softbox-glow-pulse 3s ease-in-out infinite;
  }
  @keyframes softbox-pulse{
    0%,100%{ filter:brightness(1) }
    20%{ filter:brightness(1.15) }
    22%{ filter:brightness(0.85) }
    24%{ filter:brightness(1.2) }
    50%{ filter:brightness(1.05) }
    75%{ filter:brightness(0.95) }
  }
  @keyframes softbox-glow-pulse{
    0%,100%{ opacity:0.15 }
    20%{ opacity:0.28 }
    22%{ opacity:0.1 }
    24%{ opacity:0.32 }
    50%{ opacity:0.2 }
    75%{ opacity:0.18 }
  }

  /* studio amenities ribbon */
  .amenities{
    margin-top:24px; display:grid; grid-template-columns:repeat(4,1fr); gap:16px;
  }
  @media (max-width:720px){.amenities{grid-template-columns:repeat(2,1fr)}}
  .amenity{
    padding:24px 20px; border:1px solid var(--line);
    border-radius:14px; background:var(--bg-2);
    display:flex; flex-direction:column; gap:12px;
    transition:all .4s;
  }
  .amenity:hover{border-color:var(--signal); background:rgba(196,255,58,.04)}
  .amenity svg{width:28px; height:28px; color:var(--signal)}
  .amenity-name{font-size:15px; font-weight:500}
  .amenity-sub{font-size:12px; color:var(--ink-dim); font-family:"JetBrains Mono",monospace}

  /* =========================================================
     STUDIO GALLERY (real photos — two locations, tabbed)
     ========================================================= */
  .studio-gallery{
    padding:0 0 40px;
    border-bottom:1px solid var(--line);
    background:var(--bg);
  }
  .loc-tabs{
    display:inline-flex; gap:6px; margin-top:40px; margin-bottom:32px;
    padding:6px; background:var(--bg-2); border:1px solid var(--line); border-radius:999px;
  }
  .loc-tab{
    padding:12px 26px; border-radius:999px;
    font-size:14px; font-weight:600; color:var(--ink-dim);
    transition:background .3s, color .3s;
  }
  .loc-tab.active{background:var(--signal); color:#000}
  .loc-tab:not(.active):hover{color:var(--ink)}

  .loc-gallery{
    display:none;
    grid-template-columns:repeat(3,1fr); gap:12px;
    opacity:0; transform:translateY(10px);
    transition:opacity .3s ease, transform .3s ease;
  }
  .loc-gallery.active{display:grid}
  .loc-gallery.active.in{opacity:1; transform:translateY(0)}
  .loc-gallery + .loc-gallery{margin-top:0}
  .loc-photo{
    display:block; width:100%; padding:0;
    aspect-ratio:3/2; border-radius:18px; overflow:hidden;
    border:1px solid var(--line);
    position:relative; cursor:zoom-in;
  }
  .loc-photo-img{
    position:absolute; inset:0;
    background-size:cover; background-position:center;
    transition:transform .6s cubic-bezier(.2,.7,.2,1), filter .5s;
    filter:saturate(1.05) contrast(1.02);
  }
  .loc-photo:hover .loc-photo-img{transform:scale(1.06); filter:saturate(1.15) contrast(1.05)}
  @media (max-width:720px){ .loc-gallery{grid-template-columns:repeat(2,1fr)} }

  .loc-cta{margin-top:32px}
  .loc-cta a{
    display:inline-flex; align-items:center; gap:8px;
    font-size:13px; color:var(--signal);
    border-bottom:1px solid rgba(196,255,58,.3);
    padding-bottom:2px;
  }

  /* =========================================================
     SCROLL TO TOP (floating)
     ========================================================= */
  .scroll-top{
    position:fixed; right:24px; bottom:24px; z-index:90;
    width:52px; height:52px; border-radius:50%;
    display:grid; place-items:center;
    background:var(--bg-2); border:1px solid var(--line-2); color:var(--ink);
    box-shadow:0 8px 24px rgba(0,0,0,.45);
    opacity:0; pointer-events:none; transform:translateY(8px);
    transition:opacity .3s, transform .3s, border-color .3s, color .3s;
  }
  .scroll-top.visible{opacity:1; pointer-events:auto; transform:translateY(0)}
  .scroll-top:hover{border-color:var(--signal); color:var(--signal); transform:translateY(-3px)}
  .scroll-top svg{width:22px; height:22px}
  @media (max-width:560px){
    .scroll-top{right:16px; bottom:16px; width:46px; height:46px}
    .scroll-top svg{width:19px; height:19px}
  }

  /* =========================================================
     PHOTO LIGHTBOX
     ========================================================= */
  .lightbox{
    display:none; position:fixed; inset:0; z-index:200;
    align-items:center; justify-content:center; padding:56px;
    background:rgba(6,6,8,.95); backdrop-filter:blur(10px);
    opacity:0; transition:opacity .3s ease;
  }
  .lightbox.open{display:flex}
  .lightbox.show{opacity:1}
  .lightbox-img{
    max-width:100%; max-height:100%; border-radius:12px;
    box-shadow:0 24px 80px rgba(0,0,0,.6);
    cursor:default;
    transform:scale(.94);
    transition:transform .3s ease;
  }
  .lightbox.show .lightbox-img{transform:scale(1)}
  .lightbox-close{
    position:absolute; top:24px; right:24px; z-index:2;
    width:44px; height:44px; border-radius:50%;
    background:rgba(255,255,255,.06); border:1px solid var(--line-2);
    color:var(--ink); font-size:22px; line-height:1;
    display:grid; place-items:center; transition:background .3s;
  }
  .lightbox-close:hover{background:rgba(255,255,255,.14)}
  .lightbox-nav{
    position:absolute; top:50%; transform:translateY(-50%); z-index:2;
    width:52px; height:52px; border-radius:50%;
    background:rgba(255,255,255,.06); border:1px solid var(--line-2);
    color:var(--ink); display:grid; place-items:center; transition:background .3s;
  }
  .lightbox-nav:hover{background:rgba(255,255,255,.14)}
  .lightbox-nav svg{width:22px; height:22px}
  .lightbox-nav[hidden]{display:none}
  .lightbox-prev{left:24px}
  .lightbox-next{right:24px}
  @media (max-width:720px){
    .lightbox{padding:24px}
    .lightbox-nav{width:40px; height:40px}
    .lightbox-nav svg{width:18px; height:18px}
    .lightbox-prev{left:8px}
    .lightbox-next{right:8px}
  }

  /* =========================================================
     THANK-YOU PAGE (booking-form success redirect)
     ========================================================= */
  .thankyou-section{min-height:64vh; display:flex; align-items:center}
  .thankyou-body{max-width:640px}
  .thankyou-tag{margin-bottom:28px}
  .thankyou-body .eyebrow{margin-top:0}
  .thankyou-body .section-title{margin-bottom:20px}
  .thankyou-desc{
    font-size:17px; line-height:1.6; color:var(--ink-dim);
    max-width:52ch; margin:0 0 40px;
  }

  /* =========================================================
     BOOKING MODAL
     ========================================================= */
  .book-modal{
    display:none; position:fixed; inset:0; z-index:300;
  }
  .book-modal.open{display:block}
  .book-modal-overlay{
    position:absolute; inset:0;
    background:rgba(6,6,8,.9); backdrop-filter:blur(10px);
    opacity:0; transition:opacity .3s ease;
  }
  .book-modal.show .book-modal-overlay{opacity:1}
  .book-modal-panel{
    position:absolute; top:50%; left:50%;
    width:min(940px, calc(100vw - 32px));
    max-height:calc(100vh - 48px);
    overflow-y:auto;
    transform:translate(-50%, -50%) scale(.96);
    opacity:0;
    transition:opacity .3s ease, transform .3s ease;
    display:grid; grid-template-columns:0.85fr 1fr;
    background:var(--bg-2); border:1px solid var(--line-2); border-radius:20px;
    box-shadow:0 40px 120px rgba(0,0,0,.6);
  }
  .book-modal.show .book-modal-panel{opacity:1; transform:translate(-50%, -50%) scale(1)}
  @media (max-width:820px){
    .book-modal-panel{grid-template-columns:1fr}
  }

  .book-modal-close{
    position:absolute; top:16px; right:16px; z-index:2;
    width:40px; height:40px; border-radius:50%;
    background:rgba(6,6,8,.5); border:1px solid var(--line-2);
    color:var(--ink); font-size:20px; line-height:1;
    display:grid; place-items:center; transition:background .3s;
  }
  .book-modal-close:hover{background:rgba(255,255,255,.14)}

  .book-modal-photo{
    position:relative; min-height:260px;
    background:#000;
  }
  .book-modal-photo img{
    width:100%; height:100%; object-fit:cover; display:block;
    opacity:.82;
  }
  .book-modal-photo::after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(6,6,8,0) 40%, rgba(6,6,8,.9) 100%),
               linear-gradient(90deg, rgba(6,6,8,.25), transparent 30%);
  }
  .book-modal-photo-tag{
    position:absolute; left:20px; bottom:20px; z-index:1;
    display:inline-flex; align-items:center; gap:8px;
    padding:6px 12px; border:1px solid var(--line-2); border-radius:999px;
    background:rgba(6,6,8,.5); backdrop-filter:blur(4px);
    font-family:"JetBrains Mono", monospace; font-size:11px;
    letter-spacing:0.14em; color:var(--signal);
  }
  .book-modal-photo-tag.offline{color:var(--ink-dim)}
  .book-modal-photo-tag.offline .live-dot{background:var(--ink-dim); box-shadow:none; animation:none}
  @media (max-width:820px){ .book-modal-photo{min-height:180px} }
  @media (max-width:560px){ .book-modal-photo{min-height:100px} }

  .book-modal-form-wrap{padding:40px 36px}
  @media (max-width:560px){ .book-modal-form-wrap{padding:22px 20px} }
  .book-modal-title{
    font-family:"Instrument Serif", serif; font-weight:400; font-style:italic;
    font-size:34px; line-height:1.05; margin:0 0 20px; color:var(--ink);
  }
  @media (max-width:560px){
    .book-modal-title{font-size:26px; margin-bottom:14px}
  }
  .book-modal-package{
    display:inline-flex; align-items:center; gap:8px; margin:-8px 0 20px;
    padding:6px 12px; border:1px solid var(--line-2); border-radius:999px;
    font-family:"JetBrains Mono", monospace; font-size:11px;
    text-transform:uppercase; letter-spacing:0.08em; color:var(--signal);
  }
  .book-modal-package[hidden]{display:none}

  .book-form{display:flex; flex-direction:column; gap:14px}
  @media (max-width:560px){ .book-form{gap:10px} }
  .book-form-row{display:grid; grid-template-columns:1fr 1fr; gap:14px}
  @media (max-width:420px){ .book-form-row{grid-template-columns:1fr} }
  .book-field{display:flex; flex-direction:column; gap:6px}
  .book-field label{
    font-family:"JetBrains Mono", monospace; font-size:11px;
    text-transform:uppercase; letter-spacing:0.1em; color:var(--ink-dim);
  }
  .book-field input{
    width:100%; padding:13px 14px; border-radius:10px;
    background:rgba(255,255,255,.04); border:1px solid var(--line-2);
    color:var(--ink); font-family:"Bricolage Grotesque", sans-serif;
    /* iOS Safari auto-zooms + re-centers the whole page on focus for any
       input with font-size below 16px — with a position:fixed modal open,
       that zoom-and-recenter is exactly what reads as the modal "jumping"
       left/right and getting clipped. 16px is the documented threshold
       that suppresses it. Do not lower this again. */
    font-size:16px;
    transition:border-color .3s, background .3s;
  }
  @media (max-width:560px){ .book-field input{padding:11px 14px} }
  .book-field input::placeholder{color:var(--ink-dim)}
  .book-field input:focus{outline:none; border-color:var(--signal); background:rgba(196,255,58,.05)}
  .book-field input:invalid:not(:placeholder-shown){border-color:var(--rec)}

  /* Custom-styled date field: the visible input is plain text (readonly),
     driven by a real native <input type="date"> kept off-screen — native
     date-input rendering is notoriously inconsistent across mobile browsers
     (iOS Safari in particular skews its own value text/box), so the only
     part that ever paints is our own fully-controlled text field, while the
     actual picker UI still comes from the OS via showPicker() in main.js. */
  /* overflow:hidden matters here, not just cosmetic: the hidden native
     input below ignores its own width:1px for its rendered day/month/year
     sub-controls (browsers give type=date a much wider intrinsic min
     width regardless of author CSS) and was overflowing ~290px past this
     box — which, same as the honeypot issue above, silently expanded
     .book-modal-panel's scrollable area since nothing clipped it. */
  .book-date-field{position:relative; overflow:hidden}
  .book-date-field input#book-date{padding-right:42px; cursor:pointer}
  .book-date-icon{
    position:absolute; right:14px; top:50%; transform:translateY(-50%);
    width:17px; height:17px; color:var(--ink-dim); pointer-events:none;
  }
  .book-date-native{
    position:absolute; opacity:0; width:1px; height:1px; pointer-events:none;
  }

  /* Honeypot field, hidden from humans but still present for bots that
     blindly fill every field. Previously used `left:-9999px`, which — since
     no ancestor between this and .book-modal-panel had `position:relative`
     — positioned it 9999px off the *panel*, not just off-screen. The panel
     has overflow-y:auto, which per the CSS overflow spec forces overflow-x
     to compute as auto too once one axis isn't visible, so that off-panel
     honeypot silently created a ~9999px-wide scrollable area — any trackpad
     or touch drag inside the modal could pan into it, which is what read as
     the whole modal "wandering" left/right. Standard clip-based
     visually-hidden pattern instead: stays in place, invisible, no
     runaway scroll region. */
  .book-field-hp{
    position:absolute; width:1px; height:1px; margin:-1px; padding:0;
    overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
  }

  .book-form-submit{
    display:flex; align-items:center; justify-content:center;
    width:100%; padding:16px; margin-top:6px;
    background:var(--signal); color:#000; border-radius:999px;
    font-weight:700; font-size:15px; letter-spacing:.01em;
    transition:transform .3s, box-shadow .3s;
  }
  @media (max-width:560px){ .book-form-submit{padding:13px; margin-top:2px} }
  .book-form-submit:hover{transform:translateY(-2px); box-shadow:0 12px 32px rgba(196,255,58,.25)}
  .book-form-submit:disabled{opacity:.6; pointer-events:none}
  .book-form.is-loading .book-form-submit-text::after{content:"…"}

  .book-form-status{
    min-height:18px; margin:0; font-size:13px; text-align:center;
  }
  .book-form-status.is-ok{color:var(--signal)}
  .book-form-status.is-error{color:var(--rec)}

  .book-modal-divider{
    display:flex; align-items:center; gap:12px; margin:28px 0 18px;
    font-family:"JetBrains Mono", monospace; font-size:11px;
    text-transform:uppercase; letter-spacing:0.1em; color:var(--ink-dim);
  }
  @media (max-width:560px){ .book-modal-divider{margin:16px 0 12px} }
  .book-modal-divider::before, .book-modal-divider::after{
    content:""; flex:1; height:1px; background:var(--line);
  }

  .book-modal-quick{display:flex; gap:10px}

  /* =========================================================
     EQUIPMENT — ALTERNATING ROWS
     ========================================================= */
  .gear-section{
    background:#06060a;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
  }
  .gear-row{
    display:grid; grid-template-columns:1.2fr 1fr; gap:80px;
    padding:120px 0; border-bottom:1px solid var(--line);
    align-items:center;
  }
  .gear-row:last-child{border-bottom:none}
  .gear-row.reverse{grid-template-columns:1fr 1.2fr}
  .gear-row.reverse .gear-text{order:2}
  .gear-row.reverse .gear-visual{order:1}
  @media (max-width:900px){
    .gear-row, .gear-row.reverse{grid-template-columns:1fr; gap:40px; padding:60px 0}
    .gear-row.reverse .gear-text{order:1}
    .gear-row.reverse .gear-visual{order:2}
  }

  .gear-tag{
    font-family:"JetBrains Mono", monospace; font-size:12px;
    color:var(--amber); text-transform:uppercase; letter-spacing:0.15em;
    margin-bottom:20px;
  }
  .gear-name{
    font-size:clamp(36px, 4.5vw, 64px); line-height:1;
    letter-spacing:-0.03em; font-weight:500;
    margin:0 0 24px;
  }
  .gear-name em{
    font-family:"Instrument Serif", serif; font-style:italic;
    color:var(--amber-soft); font-weight:400;
  }
  .gear-desc{font-size:16px; line-height:1.6; color:var(--ink-dim); max-width:48ch}
  .gear-specs{
    display:grid; grid-template-columns:repeat(2,1fr); gap:0;
    margin-top:32px; border-top:1px solid var(--line);
  }
  .spec{padding:16px 0; border-bottom:1px solid var(--line)}
  .spec:nth-child(odd){padding-right:16px; border-right:1px solid var(--line); padding-left:0}
  .spec:nth-child(even){padding-left:16px}
  .spec-label{font-family:"JetBrains Mono",monospace; font-size:11px; color:var(--ink-dim); text-transform:uppercase; letter-spacing:0.1em}
  .spec-value{font-size:18px; margin-top:4px}

  /* equipment SVG visuals */
  .gear-visual{
    aspect-ratio:1/1; position:relative;
    border-radius:24px; overflow:hidden;
    background:radial-gradient(circle at center, #15151a, #06060a);
    border:1px solid var(--line-2);
    display:grid; place-items:center;
  }
  .gear-visual::before{
    content:""; position:absolute; inset:0;
    background:radial-gradient(circle at 30% 20%, rgba(255,122,26,.12), transparent 50%);
  }
  .gear-visual svg{width:75%; height:75%; position:relative; z-index:1}

  /* =========================================================
     SPECTRUM ANALYZER (DECORATIVE STRIP)
     ========================================================= */
  .spectrum-strip{
    padding:64px 0; border-bottom:1px solid var(--line);
    background:linear-gradient(180deg, #06060a, var(--bg));
  }
  .spectrum{
    display:flex; align-items:flex-end; gap:4px; height:120px;
    max-width:1200px; margin:0 auto;
  }
  .spectrum span{
    flex:1; min-width:3px; height:100%;
    background:linear-gradient(180deg, var(--signal), var(--amber));
    border-radius:2px;
    animation:spec-anim 2s ease-in-out infinite;
    transform-origin:bottom;
  }
  @media (max-width:720px){
    .spectrum{gap:2px; height:80px}
    .spectrum span{min-width:2px}
  }
  @keyframes spec-anim{
    0%,100%{transform:scaleY(.3); opacity:.5}
    50%{transform:scaleY(1); opacity:1}
  }

  /* =========================================================
     PRICING / BOOKING
     ========================================================= */
  .pricing{
    display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
  }
  @media (max-width:900px){.pricing{grid-template-columns:1fr}}
  .price-card{
    padding:40px 32px; border:1px solid var(--line);
    border-radius:20px; background:var(--bg-2);
    position:relative; transition:all .4s;
    display:flex; flex-direction:column; gap:24px;
  }
  .price-card:hover{transform:translateY(-6px); border-color:var(--line-2)}
  .price-card.featured{
    background:linear-gradient(180deg, rgba(196,255,58,.06), var(--bg-2));
    border-color:rgba(196,255,58,.3);
  }
  .price-badge{
    position:absolute; top:-12px; right:24px;
    padding:4px 12px; background:var(--signal); color:#000;
    border-radius:999px; font-size:11px; font-weight:600;
    text-transform:uppercase; letter-spacing:0.1em;
  }
  .price-name{font-family:"Instrument Serif",serif; font-style:italic; font-size:24px; color:var(--amber-soft)}
  .price-cost{
    font-size:64px; line-height:1; letter-spacing:-0.03em; font-weight:500;
    display:flex; align-items:baseline; gap:6px;
  }
  .price-cost small{font-size:18px; color:var(--ink-dim); font-weight:400}
  .price-list{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:12px}
  .price-list li{
    display:flex; align-items:flex-start; gap:12px;
    font-size:14px; color:var(--ink-dim); line-height:1.5;
  }
  .price-list li::before{
    content:""; flex-shrink:0; width:14px; height:14px; border-radius:50%;
    background:rgba(196,255,58,.15); border:1px solid var(--signal);
    margin-top:3px;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M3 7l3 3 5-6' stroke='%23c4ff3a' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-position:center; background-repeat:no-repeat;
  }
  .price-cta{
    margin-top:auto; padding:14px 0; border:1px solid var(--line-2);
    border-radius:10px; text-align:center; font-weight:500;
    transition:all .3s;
  }
  .price-cta:hover{background:var(--ink); color:#000; border-color:var(--ink)}
  .price-card.featured .price-cta{
    background:var(--signal); color:#000; border-color:var(--signal);
  }
  .price-card.featured .price-cta:hover{background:#a8e02e}

  /* =========================================================
     PROCESS — STEPS
     ========================================================= */
  .process{display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid var(--line)}
  @media (max-width:900px){.process{grid-template-columns:repeat(2,1fr)}}
  @media (max-width:560px){.process{grid-template-columns:1fr}}
  .step{
    padding:48px 32px;
    border-right:1px solid var(--line);
    border-bottom:1px solid var(--line);
    transition:background .4s;
    position:relative;
  }
  .step:last-child{border-right:none}
  @media (max-width:900px){
    .step{border-right:none}
    .step:nth-child(odd){border-right:1px solid var(--line)}
  }
  @media (max-width:560px){ .step:nth-child(odd){border-right:none} }
  .step:hover{background:var(--bg-2)}
  .step-num{
    font-family:"Instrument Serif", serif; font-size:64px; font-style:italic;
    color:var(--amber-soft); line-height:1;
  }
  .step-title{font-size:22px; margin:24px 0 12px; letter-spacing:-0.02em; font-weight:500}
  .step-text{font-size:14px; line-height:1.55; color:var(--ink-dim)}

  /* =========================================================
     TESTIMONIAL / SHOT-AT-OURS
     ========================================================= */
  .gallery-grid{
    display:grid; grid-template-columns:repeat(3,1fr); gap:12px;
  }
  .gallery-item{
    display:block; aspect-ratio:16/9;
    border-radius:14px; overflow:hidden; position:relative;
    background:linear-gradient(135deg, #1a1a1d, #0a0a0b);
    background-size:cover; background-position:center;
    border:1px solid var(--line);
    cursor:pointer; transition:transform .5s;
  }
  .gallery-item:hover{transform:scale(1.02)}
  .gallery-item::before{
    content:""; position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.55));
  }
  .gallery-item::after{
    content:""; position:absolute; inset:0;
    background:radial-gradient(circle at 70% 30%, rgba(255,122,26,.15), transparent 60%);
  }
  @media (max-width:900px){
    .gallery-grid{grid-template-columns:repeat(2,1fr)}
  }
  @media (max-width:560px){
    .gallery-grid{grid-template-columns:1fr}
  }

  .play-overlay{
    position:absolute; inset:0; display:grid; place-items:center;
    transition:opacity .3s;
  }
  .play-icon{
    width:56px; height:56px; border-radius:50%;
    background:rgba(0,0,0,.6); border:1px solid var(--ink);
    display:grid; place-items:center; backdrop-filter:blur(8px);
  }
  .play-icon::after{
    content:""; width:0; height:0;
    border-left:12px solid var(--ink);
    border-top:7px solid transparent;
    border-bottom:7px solid transparent;
    margin-left:3px;
  }
  .gallery-meta{
    position:absolute; bottom:12px; left:14px; right:14px; z-index:2;
    display:flex; justify-content:space-between;
    font-family:"JetBrains Mono", monospace; font-size:10px;
    color:var(--ink-dim); text-transform:uppercase; letter-spacing:0.1em;
  }
  @media (max-width:720px){
    .gallery-meta span:first-child{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%}
    .gallery-meta span:last-child{display:none}
  }

  /* =========================================================
     FAQ
     ========================================================= */
  .faq{display:flex; flex-direction:column; border-top:1px solid var(--line)}
  .faq-item{
    border-bottom:1px solid var(--line);
    padding:28px 0;
    cursor:pointer;
    transition:background .3s;
  }
  .faq-q{
    display:flex; justify-content:space-between; align-items:center;
    gap:24px;
  }
  .faq-q-text{font-size:22px; letter-spacing:-0.02em; font-weight:500}
  @media (max-width:720px){.faq-q-text{font-size:17px}}
  .faq-toggle{
    position:relative;
    flex-shrink:0; width:40px; height:40px; border-radius:50%;
    border:1px solid var(--line-2); display:grid; place-items:center;
    transition:all .3s;
  }
  .faq-toggle::before, .faq-toggle::after{
    content:""; position:absolute; background:var(--ink);
  }
  .faq-toggle::before{width:14px; height:1.5px}
  .faq-toggle::after{width:1.5px; height:14px; transition:transform .3s}
  .faq-item.open .faq-toggle{background:var(--signal); border-color:var(--signal)}
  .faq-item.open .faq-toggle::before, .faq-item.open .faq-toggle::after{background:#000}
  .faq-item.open .faq-toggle::after{transform:rotate(90deg)}
  .faq-a{
    display:grid; grid-template-rows:0fr; overflow:hidden;
    transition:grid-template-rows .45s ease, padding .45s ease;
    color:var(--ink-dim); line-height:1.6; font-size:16px; max-width:80ch;
  }
  .faq-a > div{overflow:hidden}
  .faq-item.open .faq-a{grid-template-rows:1fr; padding-top:20px}

  /* =========================================================
     PRICE PAGE — accordion pricing table
     (reuses .faq-toggle's circle/plus-rotate look; collapsed-by-default
     rows scan far better on mobile than a literal <table> would)
     ========================================================= */
  .price-note{
    display:flex; align-items:center; gap:12px;
    padding:16px 20px; border:1px solid var(--line); border-radius:14px;
    background:var(--bg-2); color:var(--ink-dim); font-size:14px; line-height:1.5;
    margin-bottom:48px;
  }
  .price-note::before{content:"✦"; color:var(--signal); flex-shrink:0}

  .price-table{display:flex; flex-direction:column; border-top:1px solid var(--line)}
  .price-row{
    border-bottom:1px solid var(--line);
    padding:24px 0;
    cursor:pointer;
    transition:background .3s;
  }
  .price-row-head{
    display:flex; flex-wrap:wrap; row-gap:12px;
    justify-content:space-between; align-items:center;
    gap:20px;
  }
  .price-row-name{font-size:19px; letter-spacing:-0.01em; font-weight:500; flex:1 1 auto; min-width:200px}
  @media (max-width:560px){.price-row-name{font-size:16px; min-width:160px}}
  .price-row-right{display:flex; align-items:center; gap:16px; flex-shrink:0; margin-left:auto}
  .price-row-cost{
    font-family:"JetBrains Mono", monospace; font-size:17px; color:var(--signal);
    white-space:nowrap;
  }
  .price-row-body{
    display:grid; grid-template-rows:0fr; overflow:hidden;
    transition:grid-template-rows .45s ease, padding .45s ease;
  }
  .price-row-body > div{overflow:hidden}
  .price-row.open .price-row-body{grid-template-rows:1fr; padding-top:18px}
  .price-row.open .faq-toggle{background:var(--signal); border-color:var(--signal)}
  .price-row.open .faq-toggle::before, .price-row.open .faq-toggle::after{background:#000}
  .price-row.open .faq-toggle::after{transform:rotate(90deg)}
  .price-row-desc{color:var(--ink-dim); line-height:1.6; font-size:15px; max-width:70ch}
  .price-row-book{
    display:inline-flex; align-items:center; gap:8px; margin-top:16px;
    padding:10px 20px; border:1px solid var(--line-2); border-radius:10px;
    font-size:14px; font-weight:500; transition:all .3s;
  }
  .price-row-book:hover{background:var(--ink); color:#000; border-color:var(--ink)}

  /* =========================================================
     BLOG
     ========================================================= */
  .blog-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
  @media (max-width:900px){.blog-grid{grid-template-columns:repeat(2,1fr)}}
  @media (max-width:560px){.blog-grid{grid-template-columns:1fr}}

  .post{
    border:1px solid var(--line); border-radius:18px;
    padding:24px; background:var(--bg-2);
    transition:all .4s;
    display:flex; flex-direction:column; gap:16px; min-height:280px;
  }
  .post:hover{border-color:var(--line-2); transform:translateY(-4px)}
  .post-meta{
    display:flex; justify-content:space-between;
    font-family:"JetBrains Mono", monospace; font-size:11px;
    color:var(--ink-dim); text-transform:uppercase; letter-spacing:0.1em;
  }
  .post-title{
    font-size:18px; line-height:1.25; letter-spacing:-0.01em; font-weight:500;
    margin:0; flex:1;
  }
  .post-link{
    display:inline-flex; align-items:center; gap:8px;
    font-size:13px; color:var(--signal); margin-top:auto;
  }
  .post-link::after{
    content:"→"; transition:transform .3s;
  }
  .post:hover .post-link::after{transform:translateX(4px)}

  /* pagination — blog archive */
  .pagination{
    display:flex; align-items:center; gap:12px; justify-content:center; flex-wrap:wrap;
    margin-top:64px;
    font-family:"JetBrains Mono", monospace; font-size:13px;
  }
  .pagination .page-numbers{
    display:inline-flex; align-items:center; justify-content:center;
    min-width:36px; height:36px; padding:0 8px;
    border:1px solid var(--line); border-radius:8px;
    color:var(--ink-dim); transition:all .3s;
  }
  a.page-numbers:hover{border-color:var(--line-2); color:var(--ink)}
  .pagination .page-numbers.current{background:var(--ink); color:#000; border-color:var(--ink)}
  .pagination .page-numbers.dots{border:none}

  /* =========================================================
     SINGLE POST
     ========================================================= */
  .entry-header{margin-bottom:48px}
  .entry-meta{display:flex; align-items:center; gap:20px; flex-wrap:wrap; margin-bottom:20px}
  .entry-date{
    font-family:"JetBrains Mono", monospace; font-size:12px;
    color:var(--ink-dim); text-transform:uppercase; letter-spacing:0.1em;
  }
  .entry-thumb{
    border-radius:20px; overflow:hidden; border:1px solid var(--line);
    margin-bottom:56px;
  }
  .entry-thumb img{display:block; width:100%; height:auto}

  .entry-content{
    max-width:70ch; font-size:17px; line-height:1.75; color:var(--ink-dim);
  }
  .entry-content > *:first-child{margin-top:0}
  .entry-content p{margin:0 0 24px}
  .entry-content h2{
    font-size:clamp(24px, 3.5vw, 34px); line-height:1.15; letter-spacing:-0.02em;
    color:var(--ink); font-weight:500; margin:56px 0 20px;
  }
  .entry-content h3{
    font-size:22px; line-height:1.2; letter-spacing:-0.01em;
    color:var(--ink); font-weight:500; margin:40px 0 16px;
  }
  .entry-content a{color:var(--signal); text-decoration:underline; text-underline-offset:3px}
  .entry-content ul, .entry-content ol{margin:0 0 24px; padding-left:22px}
  .entry-content li{margin-bottom:8px}
  .entry-content blockquote{
    margin:32px 0; padding:4px 0 4px 24px; border-left:2px solid var(--line-2);
    font-family:"Instrument Serif", serif; font-style:italic; color:var(--amber-soft);
    font-size:22px; line-height:1.4;
  }
  .entry-content img{max-width:100%; height:auto; border-radius:16px; margin:8px 0}
  .entry-content strong{color:var(--ink); font-weight:600}

  .entry-tags{display:flex; flex-wrap:wrap; gap:10px; margin-top:48px}
  .entry-tag{
    font-family:"JetBrains Mono", monospace; font-size:12px;
    padding:6px 12px; border:1px solid var(--line-2); border-radius:999px;
    color:var(--ink-dim); transition:all .3s;
  }
  .entry-tag:hover{color:var(--ink); border-color:var(--ink)}

  .entry-nav{
    display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap;
    margin-top:72px; padding-top:32px; border-top:1px solid var(--line);
    max-width:70ch;
  }
  .entry-nav a{font-size:15px; color:var(--ink-dim); transition:color .3s; line-height:1.4}
  .entry-nav a:hover{color:var(--ink)}
  .entry-nav-next{margin-left:auto; text-align:right}
  @media (max-width:560px){
    .entry-nav-next{margin-left:0; text-align:left}
  }

  /* =========================================================
     CTA BIG
     ========================================================= */
  .cta-section{
    padding:140px 0; position:relative; overflow:hidden;
    border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  }
  /* .cta-section sits after the shared .section/.cta-section/.gear-row mobile
     overrides earlier in this file, so its own unconditional padding above
     was winning the cascade at every width — the "Забронювати" band never
     actually shrank on mobile/tablet. Re-declared here, after the base rule,
     so it wins instead. */
  @media (max-width:900px){ .cta-section{padding:88px 0} }
  @media (max-width:560px){ .cta-section{padding:64px 0} }
  .cta-bg-text{
    position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    font-family:"Instrument Serif", serif; font-style:italic;
    font-size:clamp(120px, 20vw, 280px); color:transparent;
    -webkit-text-stroke:1px var(--line-2);
    pointer-events:none; white-space:nowrap; opacity:.7;
  }
  .cta-content{position:relative; z-index:2; text-align:center; max-width:880px; margin:0 auto}
  .cta-title{
    font-size:clamp(32px, 8vw, 104px); line-height:1; letter-spacing:-0.04em;
    margin:0 0 32px; font-weight:500;
  }
  .cta-title em{font-family:"Instrument Serif", serif; font-style:italic; color:var(--amber-soft); font-weight:400}
  .cta-actions{display:flex; gap:16px; justify-content:center; flex-wrap:wrap}

  /* =========================================================
     LOCATION
     ========================================================= */
  .location-layout{
    display:grid; grid-template-columns:1fr 1.3fr; gap:56px; align-items:stretch;
  }
  @media (max-width:900px){.location-layout{grid-template-columns:1fr; gap:32px}}

  .metro-big{
    display:inline-flex; align-items:center; gap:16px;
    margin-bottom:28px;
  }
  .metro-big-m{
    display:grid; place-items:center; flex:none;
    width:64px; height:64px; border-radius:50%;
    background:var(--signal); color:#000;
    box-shadow:0 0 40px rgba(196,255,58,.4);
  }
  .metro-m-icon{width:30px; height:auto; display:block; fill:currentColor}
  .metro-big-title{font-size:20px; font-weight:600; letter-spacing:-0.01em}
  .metro-big-sub{font-size:13px; color:var(--ink-dim); margin-top:2px}

  .location-address{
    font-family:"Instrument Serif", serif; font-style:italic;
    font-size:32px; color:var(--amber-soft); margin-bottom:24px;
  }
  .location-actions{display:flex; gap:14px; flex-wrap:wrap}

  /* Контакти page — address/metro/button as one full-width row instead of
     a stacked block (that left a big dead void beside it once the map
     moved below instead of sitting side-by-side, per "big map" request) */
  .location-info-bar{
    display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
    gap:32px 40px; margin-bottom:48px; padding-bottom:40px; border-bottom:1px solid var(--line);
  }
  .location-info-bar .metro-big{margin-bottom:0}
  .location-info-bar .location-address{margin-bottom:0}
  @media (max-width:900px){
    .location-info-bar{flex-direction:column; align-items:flex-start; gap:24px}
  }

  .location-map{
    position:relative; border-radius:20px; overflow:hidden; border:1px solid var(--line);
    height:100%; min-height:420px;
  }
  .location-map iframe{
    display:block; width:100%; height:100%; border:0;
    filter:grayscale(1) invert(0.92) contrast(0.83) brightness(0.55);
  }
  @media (max-width:900px){ .location-map{height:auto; min-height:0} .location-map iframe{height:280px} }
  .location-map.map-large iframe{height:560px}
  @media (max-width:900px){ .location-map.map-large iframe{height:360px} }

  /* =========================================================
     CALENDAR PAGE — embedded Google Calendar
     Same "invert the light embed via CSS filter" trick as the map,
     but keeps color instead of grayscaling (hue-rotate corrects the
     inverted hue back so event colors don't come out orange/wrong).
     ========================================================= */
  .calendar-embed{
    border-radius:20px; overflow:hidden auto; overflow-x:auto;
    border:1px solid var(--line); background:var(--bg-2);
  }
  .calendar-embed iframe{
    display:block; width:100%; min-width:720px; height:650px; border:0;
    filter:invert(0.93) hue-rotate(180deg) brightness(0.92) contrast(0.9);
  }
  @media (max-width:900px){ .calendar-embed iframe{height:520px} }

  /* =========================================================
     CONTACTS PAGE — status panel + numbered contact rows
     Status dot is intentionally static (no pulse/blink animation) —
     the mobile-menu REC timer's blinking was called out as too much,
     so this widget stays calm: text updates, no flashing.
     ========================================================= */
  .contacts-hero{
    display:grid; grid-template-columns:1.3fr 1fr; gap:56px; align-items:start;
  }
  @media (max-width:900px){ .contacts-hero{grid-template-columns:1fr; gap:32px} }
  .contacts-hero-text .section-desc{margin-top:24px; max-width:52ch}

  .status-panel{
    background:var(--bg-2); border:1px solid var(--line); border-radius:20px;
    padding:28px 32px;
  }
  .status-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:22px}
  .status-label{
    font-family:"JetBrains Mono", monospace; font-size:11px; text-transform:uppercase;
    letter-spacing:0.14em; color:var(--ink-dim);
  }
  .status-badge{
    display:inline-flex; align-items:center; gap:8px;
    font-family:"JetBrains Mono", monospace; font-size:11px; text-transform:uppercase;
    letter-spacing:0.1em; color:var(--ink-dim);
  }
  .status-dot{width:7px; height:7px; border-radius:50%; background:var(--ink-dim); flex-shrink:0}
  .status-badge.online{color:var(--signal)}
  .status-badge.online .status-dot{background:var(--signal); box-shadow:0 0 8px var(--signal)}

  .status-clock{
    font-family:"JetBrains Mono", monospace; font-weight:500;
    font-size:52px; letter-spacing:-0.02em; line-height:1; color:var(--ink);
  }
  .status-tz{
    font-family:"JetBrains Mono", monospace; font-size:11px; color:var(--ink-dim);
    text-transform:uppercase; letter-spacing:0.1em; margin-top:10px; padding-bottom:20px;
    border-bottom:1px solid var(--line);
  }
  .status-hours{margin-top:20px; display:flex; flex-direction:column; gap:10px}
  .status-hours-row{display:flex; justify-content:space-between; font-size:14px; color:var(--ink-dim)}
  .status-hours-row span:last-child{color:var(--ink); font-family:"JetBrains Mono", monospace}

  .contact-rows{border-top:1px solid var(--line); margin-top:64px}
  .contact-row{
    display:flex; align-items:center; gap:24px;
    padding:32px 0; border-bottom:1px solid var(--line);
    transition:padding-left .3s;
  }
  .contact-row:hover{padding-left:12px}
  .contact-row-num{
    font-family:"JetBrains Mono", monospace; font-size:13px; color:var(--ink-dim);
    flex-shrink:0; width:36px;
  }
  .contact-row-body{display:flex; flex-direction:column; gap:6px; flex:1 1 auto; min-width:0}
  .contact-row-label{
    font-family:"JetBrains Mono", monospace; font-size:11px; text-transform:uppercase;
    letter-spacing:0.14em; color:var(--signal);
  }
  .contact-row-value{
    font-size:clamp(22px, 3.6vw, 40px); font-weight:500; letter-spacing:-0.02em; color:var(--ink);
    word-break:break-word;
  }
  .contact-row-note{
    flex-shrink:0; color:var(--ink-dim); font-size:14px; text-align:right; max-width:22ch;
  }
  .contact-row-arrow{width:22px; height:22px; flex-shrink:0}
  @media (max-width:720px){
    .contact-row{padding:22px 0; gap:16px}
    .contact-row-note{display:none}
  }

  /* =========================================================
     FOOTER
     ========================================================= */
  .footer{padding:80px 0 40px}
  .footer-grid{
    display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:48px;
    padding-bottom:60px; border-bottom:1px solid var(--line);
  }
  @media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr; gap:32px}}
  @media (max-width:560px){.footer-grid{grid-template-columns:1fr}}
  .footer-mark{
    font-size:64px; line-height:.9; letter-spacing:-0.04em; font-weight:500; margin:0 0 24px;
  }
  .footer-mark em{font-family:"Instrument Serif",serif; font-style:italic; color:var(--amber-soft); font-weight:400}
  .footer-col h4{
    font-family:"JetBrains Mono", monospace; font-size:11px;
    text-transform:uppercase; letter-spacing:0.18em; color:var(--ink-dim);
    margin:0 0 20px; font-weight:500;
  }
  .footer-col ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px}
  .footer-col a{font-size:14px; color:var(--ink); transition:color .3s}
  .footer-col a:hover{color:var(--signal)}

  .footer-bottom{
    display:flex; justify-content:space-between; align-items:center;
    padding-top:32px; flex-wrap:wrap; gap:16px;
    font-family:"JetBrains Mono", monospace; font-size:11px;
    color:var(--ink-dim); text-transform:uppercase; letter-spacing:0.12em;
  }

  /* reveal on scroll */
  .reveal{opacity:0; transform:translateY(30px); transition:all 1s cubic-bezier(.2,.7,.2,1)}
  .reveal.in{opacity:1; transform:translateY(0)}

  @media (prefers-reduced-motion:reduce){
    *,*::before,*::after{
      animation-duration:.01ms !important;
      animation-iteration-count:1 !important;
      transition-duration:.01ms !important;
    }
    html{scroll-behavior:auto}
    .reveal{opacity:1; transform:none}
  }