/* ============================================================
   STUDIO KMJ45 — Shared stylesheet
   Loaded by every page. Contains design tokens, reset, nav,
   footer, grain, scroll-reveal, BAP player, and all reusable
   component styles. Page-specific CSS lives in each HTML file.
   ============================================================ */

/* ============================================================
   DESIGN TOKENS — the single source of truth for the whole site.
   Every colour, font and size below is a CSS variable; components
   only reference these tokens, so editing them here recolours /
   retypes the entire site. The palette is Forest Green (locked).
   ============================================================ */
:root{
  /* Type system — edit here, applies site-wide.
     Jost     = display (the studio's long-standing typeface)
     Manrope  = body AND labels (--font-mono is the small-caps LABEL
                font, deliberately NOT a code/monospace face). */
  --font-display:'Jost', sans-serif;
  --font-body:'Manrope', sans-serif;
  --font-mono:'Manrope', sans-serif;

  /* ════════════════════════════════════════════════════════════
     PALETTE — Forest Green (the studio's locked colourway). This is
     the single source of truth: edit these tokens to recolour the
     entire site. Every component references them.
     ════════════════════════════════════════════════════════════ */

  /* Dark base ("room" backgrounds + text) */
  --bg:#080d0a;
  --bg-1:#0d1410;
  --bg-2:#131c16;
  --bg-3:#1e2a22;
  --bg-deep:#060a07;      /* deepest section band (player/badges) */
  --text:#e9efe7;
  --text-dim:#a8b6aa;
  --muted:#728176;

  /* Accent system (warm gold against the green darks) */
  --accent:#c9a45c;
  --accent-bright:#e2bd73;
  --accent-dim:rgba(201,164,92,0.18);
  --accent-ink:#0a0f0b;   /* dark text/icons that sit ON an accent fill */
  --terracotta:#7d8a52;   /* muted olive secondary */

  --line:rgba(233,239,231,0.10);
  --line-soft:rgba(233,239,231,0.055);

  /* "Light worksheet" tokens — used by the TrackNotes submission form
     (a deliberately light card on the dark page). Chapter sections
     re-point these to the dark room tokens in .chapter-light below. */
  --stone:#c8cdba;
  --stone-card:#dde0d0;
  --stone-3:#b6bca6;
  --cream:#dde1d2;
  --ink:#1b231b;
  --ink-dim:#4c5749;
  --ink-muted:#728176;
  --accent-light:#5a6e3f;            /* green accent for the light worksheet */
  --accent-light-bright:#46582f;
  --accent-light-dim:rgba(90,110,63,0.14);
  --line-ink:rgba(27,35,27,0.16);
  --line-ink-soft:rgba(27,35,27,0.09);

  /* Component-specific */
  --drawer-bg:#0a110c;
  /* "Dark island" — a dark card sitting on a chapter section (homepage
     services/testimonials). Warm off-white text set so photo cards read
     consistently on every page. */
  --island-bg:#121b15;
  --island-accent:#c9a45c;
  --island-accent-bright:#e2bd73;
  --island-text:#f4ede0;        /* warm off-white text on dark photo cards */
  --island-text-dim:#bdb2a1;
  --island-muted:#8b8071;
  --island-line:rgba(244,237,224,0.10);

  /* Warm near-black ground sitting behind photographic image bands
     (lead-mag, sample-band, video facades) — one value site-wide. */
  --bg-band:#0a0805;

  /* Error / validation reds (one source) */
  --error:#c0392b;              /* on light worksheet (form validation) */
  --error-bright:#e07070;       /* error text on the dark contact drawer */

  --maxw:1240px;
  --gutter:clamp(20px, 5vw, 64px);
  --nav-h:68px;

  /* Section intro measure — the standard width for section heading+paragraph
     blocks (~half the content column). One source of truth so body copy never
     sprawls or wraps inconsistently across the site. */
  --measure:600px;
  /* Standard gap between a section's heading block and its content below.
     One value site-wide so the vertical rhythm is uniform. */
  --head-gap:clamp(36px,5vw,56px);

  /* Corner radii — site-wide consistency. Cards/images/panels use
     --radius (subtle); small controls use --radius-sm. Circles/pills
     keep 50% / 100px locally. */
  --radius:0;      /* squared off site-wide to match the angular buttons + mountain mark */
  --radius-sm:0;

  /* TYPE SCALE — one source of truth so headings/eyebrows/body are
     consistent everywhere (a few feature elements break out locally:
     hero h1, big prices). */
  --fs-eyebrow:15px;                  /* mono kicker label */
  --fs-h2:clamp(28px,4vw,46px);       /* standard section heading */
  --fs-body:clamp(15px,1.5vw,17px);   /* standard section paragraph */
}

/* ── RESET / BASE ───────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  /* Single section "room" colour site-wide — the darker, less-green drawer
     tone (preferred over --bg-2). Footer keeps jet black; cards/boxes
     (--bg-2 / --bg-3 / island) sit lighter on top for contrast. */
  background:var(--drawer-bg);color:var(--text);font-family:var(--font-body);
  font-weight:400;font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:500;line-height:1.04;letter-spacing:-0.01em}
/* Section-level headings (not hero h1s) need more breathing room across multiple lines */
.section h2{line-height:1.12}
::selection{background:var(--accent);color:var(--accent-ink)}

/* ── LAYOUT UTILITIES ───────────────────────────────────────── */
.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
/* Optional line break that only applies on wider screens — lets copy break
   deliberately on desktop while flowing naturally on mobile. */
br.brk{display:none}
@media(min-width:760px){br.brk{display:initial}}
/* Standard section intro block (heading + lead paragraph), ~half-column wide */
.measure{max-width:var(--measure)}
.section{padding-block:clamp(64px,10vw,128px)}
/* Canonical eyebrow/kicker. !important guards against section paragraph
   rules (.X__head p / .X__intro p) bleeding font-size/colour onto the
   eyebrow <p> — that was the source of the size/colour inconsistency. */
.eyebrow{
  font-family:var(--font-mono);
  font-size:var(--fs-eyebrow)!important;letter-spacing:0.2em;
  text-transform:uppercase;color:var(--accent)!important;font-weight:500;
}
.arr{display:inline-block}

/* ── "CHAPTER" SECTIONS ───────────────────────────────────────────
   The site is dark throughout. Sections tagged .chapter-light sit on
   the same dark ground as everything else; this block simply re-points
   the legacy "light worksheet" tokens (ink / stone / accent-light /
   line-ink) onto the dark-room tokens so components originally built
   for a light chapter stay legible on dark. Colours live in :root. */
.chapter-light{
  --ink:var(--text);          --ink-dim:var(--text-dim);     --ink-muted:var(--muted);
  --stone:var(--bg-1);        --stone-card:var(--bg-2);      --stone-3:var(--bg-3);  --cream:var(--bg-2);
  --accent-light:var(--accent);--accent-light-bright:var(--accent-bright);--accent-light-dim:var(--accent-dim);
  --line-ink:var(--line);     --line-ink-soft:var(--line-soft);
  color:var(--text);
  background:var(--drawer-bg);
}
/* Attribution/masthead logos inside chapter sections read on dark */
.chapter-light cite img{filter:invert(1) brightness(.9)}

/* ── SCROLL PROGRESS HAIRLINE (nav polish) ──────────────────────── */
.scroll-progress{
  position:fixed;top:0;left:0;height:2px;width:100%;z-index:1500;
  transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,var(--accent),var(--accent-bright));
  pointer-events:none;opacity:.85;
}
@media(prefers-reduced-motion:reduce){.scroll-progress{display:none}}

/* ── GRAIN OVERLAY ──────────────────────────────────────────── */
[data-grain]{position:relative;overflow:hidden}
.grain-canvas{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:2;mix-blend-mode:overlay;
}

/* ── SCROLL-REVEAL TEXT ──────────────────────────────────────
   Words rise + sharpen (blur→clear) + brighten in a staggered sweep.
   One-shot: when the block crosses into view, JS (initScrollText) adds
   .is-lit and every word transitions to resolved and STAYS resolved —
   no half-realised resting state. Per-word transition-delay (set in JS)
   creates the left-to-right sweep. inline-block so transform applies. */
.st-word{
  display:inline-block;opacity:.32;
  filter:blur(5px);transform:translateY(.34em);
  transition:opacity .55s ease, filter .55s ease,
             transform .6s cubic-bezier(.22,1,.36,1);
  will-change:opacity,transform,filter;
}
[data-scroll-text].is-lit .st-word{opacity:1;filter:none;transform:none}

/* ── PAGE TRANSITION ────────────────────────────────────────── */
.page-fade{
  position:fixed;inset:0;background:var(--bg);z-index:9999;
  pointer-events:none;opacity:1;transition:opacity .35s ease;
}
.page-fade.is-hidden{opacity:0}
.page-fade.is-leaving{opacity:1;pointer-events:all}

/* ── NAV ────────────────────────────────────────────────────── */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:1000;padding:0;pointer-events:none;
  transition:padding .5s cubic-bezier(.22,1,.36,1),opacity .3s ease,transform .4s cubic-bezier(.22,1,.36,1);
}
/* Auto-hide (both breakpoints): slides up out of view on scroll-down, back in on scroll-up */
.nav.nav--hidden{transform:translateY(-100%)}
/* On scroll the floating pill pulls its sides in to line up with the page
   content margins (gutter on narrow viewports, or the centred max-width
   gutters on wide ones). The padding transition animates the narrowing. */
/* On scroll the pill insets by the page gutter; combined with the bar's
   max-width below this lines its sides up with the content column and the
   padding transition animates the narrowing. */
.nav.scrolled{
  padding-block:clamp(10px,1.5vw,18px) 0;
  padding-inline:var(--gutter);
}
.nav__bar{
  pointer-events:auto;
  /* shrink-wrap to the nav content so the (dark, on-scroll) banner frames
     just the logo + links rather than spanning the whole column */
  width:fit-content;max-width:100%;margin-inline:auto;
  display:flex;flex-direction:column;align-items:center;gap:clamp(10px,1.3vw,16px);
  padding:clamp(16px,2vw,24px) clamp(26px,3vw,40px);
  background:transparent;border:1px solid transparent;border-radius:0;
  transition:padding .55s cubic-bezier(.22,1,.36,1),gap .55s cubic-bezier(.22,1,.36,1),
             background .4s ease,border-color .4s ease,border-radius .55s ease,box-shadow .4s ease;
}
.nav.scrolled .nav__bar{
  padding:12px clamp(22px,2.4vw,32px);gap:9px;
  background:rgba(18,14,10,.72);
  backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);
  border-color:rgba(244,237,224,.12);
  border-radius:0;   /* squared to match the rest of the site */
  box-shadow:0 18px 50px rgba(0,0,0,.45);
}
.nav__top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;width:100%;gap:16px}
.nav__spacer{display:block}
.nav__logo{display:block;line-height:0;justify-self:center}
.nav__logo img{
  height:clamp(52px,7vw,84px);width:auto;
  /* brightness(.92) softens a pure-white asset to the off-white used for
     headings, so logo + headings + footer divider read as one tone. */
  filter:drop-shadow(0 2px 14px rgba(0,0,0,.55)) brightness(.92);
  transition:height .55s cubic-bezier(.22,1,.36,1);
}
.nav.scrolled .nav__logo img{height:58px} /* subtler shrink — was 42px */
.nav__actions{justify-self:end;display:flex;align-items:center;gap:14px}
.nav__links{
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
  gap:clamp(18px,2.6vw,40px);
}
.nav__links a{
  font-family:var(--font-display);font-weight:300;
  font-size:clamp(15px,1.5vw,17px);letter-spacing:0.08em;color:var(--text);
  position:relative;padding-block:5px;transition:color .25s ease,opacity .25s ease;
  text-shadow:0 1px 12px rgba(0,0,0,.45);opacity:.9;white-space:nowrap;
}
.nav__links a::after{
  content:"";position:absolute;left:0;bottom:-1px;height:1.5px;width:0;
  background:var(--text);transition:width .3s ease;
}
.nav__links a:hover{opacity:1}
.nav__links a:hover::after,.nav__links a[aria-current="page"]::after{width:100%}
/* Contact = matches .btn — underline at rest, sweep-up fill on hover */
.nav__links [data-contact-trigger]{
  position:relative;z-index:0;overflow:hidden;
  display:inline-flex;align-items:center;gap:8px;
  border:none;border-radius:0;
  padding:6px 16px;
  color:var(--text);
  font-family:var(--font-display);font-size:15px;font-weight:500;
  text-transform:uppercase;letter-spacing:0.1em;
  opacity:1;
  transition:color .22s ease;
}
.nav__links [data-contact-trigger]::after{
  content:'';position:absolute;left:0;right:0;bottom:0;
  width:auto; /* override width:0 inherited from .nav__links a::after */
  height:1.5px;background:var(--accent);pointer-events:none;
  transition:none;
}
.nav__links [data-contact-trigger]::before{
  content:'';position:absolute;inset:0;z-index:-1;background:var(--accent);
  transform:translateY(101%);transition:transform .24s cubic-bezier(.22,1,.36,1);
}
.nav__links [data-contact-trigger]:hover{color:var(--accent-ink)}
.nav__links [data-contact-trigger]:hover::before{transform:translateY(0)}
.nav__links [data-contact-trigger] .arr{transition:transform .25s ease}
.nav__links [data-contact-trigger]:hover .arr{transform:translateX(4px)}
.nav__burger{
  display:none;flex:none;
  font-family:var(--font-display);font-size:12px;font-weight:500;
  text-transform:uppercase;letter-spacing:0.14em;
  color:var(--text);background:none;border:none;cursor:pointer;padding:4px 0;
}
/* Toggle "Menu" / "Close" via aria-expanded — no JS text changes needed */
.nav__burger .nav__menu-text::after{content:'Menu'}
.nav__burger[aria-expanded="true"] .nav__menu-text::after{content:'Close'}

/* Mobile (Option B): a full-width banner across the top (square edges, full
   bleed — not the desktop pill). Logo centred with the four page links in a row
   beneath. Transparent over the hero at the top; once you scroll it becomes a
   semi-transparent banner. Auto-hides on scroll-down, reappears on scroll-up
   (wired in shared.js). No Menu button, no overlay. */
@media(max-width:759px){
  .nav,.nav.scrolled{padding:0}
  .nav__bar{
    width:100%;max-width:none;margin:0;border-radius:0;
    padding:10px 20px;gap:clamp(7px,2vw,11px);
    background:transparent;border:none;box-shadow:none;
    backdrop-filter:none;-webkit-backdrop-filter:none;
  }
  .nav.scrolled .nav__bar{
    padding:8px 20px;border-radius:0;
    background:rgba(14,11,8,.85);
    backdrop-filter:blur(16px) saturate(1.35);-webkit-backdrop-filter:blur(16px) saturate(1.35);
    border:none;box-shadow:0 10px 30px rgba(0,0,0,.30);
  }
  .nav__top{display:flex;flex-direction:column;align-items:center;gap:0;width:auto}
  .nav__spacer,.nav__actions{display:none}
  .nav__logo img{height:clamp(44px,11vw,56px)}
  .nav.scrolled .nav__logo img{height:clamp(40px,9.5vw,48px)}
  /* the always-visible inline link row */
  .nav__links{gap:clamp(13px,4.4vw,24px)}
  .nav__links a{font-size:clamp(12px,3.4vw,14px);letter-spacing:0.05em;opacity:1}
  .nav__links [data-contact-trigger]{display:none}   /* Contact lives in the page CTAs on mobile */
  /* "Mixing & Mastering" reads simply as "Mixing" in the tighter row (full
     label stays in the DOM for screen readers + desktop). */
  .nav__links a[href="/mixing-mastering"]{font-size:0;letter-spacing:0}
  .nav__links a[href="/mixing-mastering"]::before{
    content:"Mixing";font-size:clamp(12px,3.4vw,14px);letter-spacing:0.05em;
  }
}

/* ── MOBILE NAV (full-screen, centred) ──────────────────────── */
/* When open, the floating nav "button" hides entirely — the overlay
   carries its own brand block + a Close control. */
body.menu-open .nav{opacity:0;pointer-events:none}

.mobile-nav{
  position:fixed;inset:0;z-index:1001;background:var(--bg);
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  gap:clamp(32px,8vw,56px);text-align:center;
  padding:clamp(88px,18vw,124px) var(--gutter) clamp(44px,9vw,68px);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .35s ease,transform .35s ease,visibility .35s;
}
body.menu-open .mobile-nav{opacity:1;visibility:visible;transform:none}

/* Close control — top-right */
.mobile-nav__close{
  position:absolute;top:clamp(22px,6vw,34px);right:var(--gutter);
  font-family:var(--font-display);font-size:13px;font-weight:500;
  text-transform:uppercase;letter-spacing:0.18em;color:var(--text-dim);
  background:none;border:none;cursor:pointer;padding:6px 2px;
  transition:color .2s ease;
}
.mobile-nav__close:hover{color:var(--accent)}

/* Brand block — sits BELOW the menu items: logo, wordmark, location, contact */
.mobile-nav__brandblock{display:flex;flex-direction:column;align-items:center;gap:10px}
.mobile-nav__logo{display:block;line-height:0;margin-bottom:2px}
.mobile-nav__logo img{height:clamp(44px,11vw,56px);width:auto;filter:brightness(.92)}
.mobile-nav__brand{
  font-family:var(--font-display);font-weight:400;letter-spacing:0.05em;
  font-size:clamp(18px,4.5vw,22px);color:var(--text);
}
.mobile-nav__meta{
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:0.14em;
  color:var(--muted);
}
.mobile-nav__cta{margin-top:10px}

/* Page links — top, centred, no arrows */
.mobile-nav__links{display:flex;flex-direction:column;align-items:center;gap:clamp(2px,1.5vw,8px)}
.mobile-nav__links a{
  font-family:var(--font-display);font-weight:300;
  font-size:clamp(28px,8vw,44px);letter-spacing:-0.01em;color:var(--text);
  padding-block:8px;
  opacity:0;transform:translateY(10px);
  transition:color .2s ease,opacity .35s ease,transform .35s cubic-bezier(.22,1,.36,1);
}
.mobile-nav__links a[aria-current="page"]{color:var(--accent)}
.mobile-nav__links a:hover{color:var(--accent)}

/* Staggered entrance */
body.menu-open .mobile-nav__links a{opacity:1;transform:none}
body.menu-open .mobile-nav__links a:nth-child(1){transition-delay:.06s}
body.menu-open .mobile-nav__links a:nth-child(2){transition-delay:.11s}
body.menu-open .mobile-nav__links a:nth-child(3){transition-delay:.16s}
body.menu-open .mobile-nav__links a:nth-child(4){transition-delay:.21s}

/* ── SCROLL REVEAL ──────────────────────────────────────────── */
.reveal{
  opacity:0;transform:translateY(20px);
  transition:opacity .55s cubic-bezier(.22,1,.36,1),transform .55s cubic-bezier(.22,1,.36,1);
}
.reveal.is-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ── BUTTONS ────────────────────────────────────────────────── */
/* PRIMARY — gold OUTLINE at rest, so it always reads as a button without relying
   on hover (fixes the invisible/sticky-hover bug on touch). Fill sweeps up on
   hover (desktop only, gated by @media(hover:hover)) and fills on press (touch). */
.btn{
  position:relative;z-index:0;overflow:hidden;
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--font-display);font-size:15px;font-weight:500;
  text-transform:uppercase;letter-spacing:0.1em;
  padding:14px 28px;border-radius:0;
  border:1.5px solid var(--accent);background:transparent;color:var(--text);
  transition:color .22s ease, transform .12s ease;
  -webkit-tap-highlight-color:transparent;
}
/* Gold fill sweeps up from the bottom edge */
.btn::before{
  content:'';position:absolute;inset:0;z-index:-1;background:var(--accent);
  transform:translateY(101%);transition:transform .24s cubic-bezier(.22,1,.36,1);
}
.btn .arr{transition:transform .25s ease}
/* Desktop (hover-capable) keeps the elegant sweep-up fill on hover */
@media(hover:hover){
  .btn:hover{color:var(--accent-ink)}
  .btn:hover::before{transform:translateY(0)}
  .btn:hover .arr{transform:translateX(4px)}
}
/* Touch / press: fill + subtle press so the tap is unmistakable (no hover needed) */
.btn:active{color:var(--accent-ink);transform:scale(.98)}
.btn:active::before{transform:translateY(0)}

/* SECONDARY — editorial: no box, underline grows from the left */
.btn--ghost{
  border:none;background:transparent;color:var(--text);
  padding:9px 2px;border-radius:0;overflow:visible;
  text-transform:uppercase;letter-spacing:0.1em;
}
.btn--ghost::before{display:none}
.btn--ghost::after{
  content:'';position:absolute;left:0;bottom:0;width:100%;height:1.5px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform .38s cubic-bezier(.4,0,.2,1);
}
.btn--ghost:hover{color:var(--accent-bright)}
.btn--ghost:hover::after{transform:scaleX(1)}

/* Inline text link with arrow */
.cta-link{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-display);font-size:15px;font-weight:500;
  letter-spacing:0.04em;color:var(--accent);
  border-bottom:1px solid var(--accent);padding-bottom:2px;
  transition:gap .25s ease;
}
.cta-link:hover{gap:16px}

/* Hero CTAs are now a single primary action per hero — give it a little
   more presence than an inline button. */
.mm-hero__cta .btn,.tn-hero__cta .btn,.st-hero__cta .btn{
  padding:17px 38px;font-size:16px;letter-spacing:0.04em;
}

/* ── BEFORE / AFTER PLAYER ──────────────────────────────────── */
.bap{
  background:var(--bg-3);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(20px,3vw,34px);
}
.bap__stage{position:relative;touch-action:none;cursor:pointer;outline:none}
.bap__stage:focus-visible{box-shadow:0 0 0 2px var(--accent-bright);border-radius:0}
.bap__wave{display:block;width:100%;height:150px;border-radius:0;background:rgba(0,0,0,.25)}
.bap__playhead{
  position:absolute;top:0;bottom:0;width:2px;left:0;
  background:var(--text);transform:translateX(-1px);pointer-events:none;
  box-shadow:0 0 8px rgba(0,0,0,.6);
}
.bap__playhead::before{
  content:"";position:absolute;top:5px;left:50%;transform:translateX(-50%);
  width:10px;height:10px;border-radius:50%;background:var(--text);
  box-shadow:0 1px 6px rgba(0,0,0,.6);
}
.bap__timer{
  position:absolute;bottom:8px;right:10px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:0.08em;
  color:var(--text);opacity:.75;pointer-events:none;z-index:2;
  text-shadow:0 1px 6px rgba(0,0,0,.9);
}
.bap__controls{display:flex;align-items:center;gap:18px;margin-top:24px;flex-wrap:wrap}
/* Ring-style play button (outline circle + triangle); fills gold on hover */
.bap__play{
  width:56px;height:56px;border-radius:50%;flex:none;
  background:transparent;border:2px solid var(--accent);color:var(--accent);
  display:grid;place-items:center;
  transition:background .2s ease,color .2s ease,border-color .2s ease,transform .15s ease;
}
.bap__play svg{width:20px;height:20px;margin-left:2px}
.bap__play:hover{background:var(--accent);color:var(--accent-ink)}
.bap__play:active{transform:scale(.94)}
.bap__play:active{transform:scale(.94)}
.bap__play svg{width:20px;height:20px}
.bap__toggle{
  display:inline-flex;border:1px solid var(--line);border-radius:0;
  overflow:hidden;background:var(--bg-3);
}
.bap__ab{
  font-family:var(--font-mono);font-size:12px;letter-spacing:0.14em;text-transform:uppercase;
  padding:13px clamp(18px,3vw,28px);color:var(--text-dim);
  transition:color .15s ease,background .15s ease;position:relative;
}
.bap__ab+.bap__ab{border-left:1px solid var(--line)}
.bap__ab:hover{color:var(--text)}
.bap__ab.is-active{background:var(--accent);color:var(--accent-ink);font-weight:500}
.bap__ab:focus-visible{outline:2px solid var(--accent-bright);outline-offset:-2px}
.bap__state{
  font-family:var(--font-mono);font-size:11px;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--muted);
}
.bap__state b{color:var(--accent);font-weight:500}
.bap__note{margin-top:18px;font-family:var(--font-mono);font-size:11px;letter-spacing:0.05em;color:var(--muted)}

/* genre display (inside controls, right side) */
.bap__genre-display{
  font-family:var(--font-mono);font-size:11px;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--text-dim);margin-left:auto;white-space:nowrap;
}

/* compact playlist (inside .bap, below controls) */
.bap__playlist{
  margin-top:22px;border-top:1px solid var(--line);padding-top:4px;
  display:flex;flex-direction:column;
}
.bap__track{
  display:flex;align-items:center;gap:10px;
  padding:9px 0 9px 12px;
  border-left:2px solid transparent;
  border-top:1px solid var(--line);
  cursor:pointer;text-align:left;width:100%;
  transition:border-color .15s ease,background .15s ease;
}
.bap__track:first-child{border-top:none}
.bap__track:hover:not(.is-active){background:rgba(255,255,255,.03)}
.bap__track.is-active{border-left-color:var(--accent)}
.bap__track-label{
  flex:1;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-size:13px;
}
.bap__track-title{color:var(--text)}
.bap__track.is-active .bap__track-title{color:var(--accent)}
.bap__track-artist{color:var(--text-dim);font-size:12px}

/* service badges (playlist rows) */
.bap__service{
  font-family:var(--font-mono);font-size:10px;letter-spacing:0.1em;text-transform:uppercase;
  padding:3px 7px;border:1px solid;border-radius:var(--radius-sm);
  flex-shrink:0;white-space:nowrap;
}
.bap__service--mastering{color:var(--accent);border-color:var(--accent);background:var(--accent-dim)}
.bap__service--mixing{
  color:color-mix(in srgb, var(--accent-light), white 40%);
  border-color:color-mix(in srgb, var(--accent-light), white 40%);
  background:color-mix(in srgb, var(--accent-light), transparent 88%);
}

/* ── FOOTER ─────────────────────────────────────────────────── */
.footer{background:#000;padding-block:0 clamp(40px,5vw,64px)}
.footer__line{
  /* off-white that matches the headings + logos (not harsh pure white) */
  border:none;height:2px;background:var(--text);
  margin:0 0 clamp(36px,4.5vw,52px);
}
.footer__inner{
  display:flex;flex-wrap:wrap;gap:40px 56px;
  justify-content:space-between;align-items:center;
}
.footer__brandblock{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.footer__brand{display:block;line-height:0;margin-bottom:4px}
.footer__brand img{height:56px;width:auto;filter:brightness(.92);transition:filter .25s ease}
.footer__brand:hover img{filter:brightness(1)}
.footer__site{
  font-family:var(--font-display);font-weight:500;font-size:22px;
  letter-spacing:0.02em;color:var(--text);line-height:1;
}
.footer__loc{font-family:var(--font-body);font-size:14.5px;color:var(--text-dim)}
.footer__social{display:flex;gap:24px;margin-top:10px}
.footer__social a{
  font-family:var(--font-body);font-size:14px;color:var(--text-dim);transition:color .2s ease;
}
.footer__social a:hover{color:var(--accent)}
.footer__badges{display:flex;align-items:center;gap:clamp(28px,4vw,48px);flex-wrap:wrap}
.footer__badge img{height:clamp(96px,13vw,132px);width:auto;display:block}

/* ── RESPONSIVE ─────────────────────────────────────────────── */
@media(max-width:759px){
  /* Option B keeps the links row visible on mobile; the Menu button and the
     full-screen overlay are retired. */
  .nav__burger{display:none}
  .mobile-nav{display:none}
}
@media(max-width:680px){
  .footer__inner{justify-content:center;text-align:center;gap:36px}
  .footer__brandblock{align-items:center}
  .footer__social{justify-content:center}
  .footer__badges{justify-content:center;width:100%}
}

/* ════════════════════════════════════════════════════════════
   SHARED FORM COMPONENTS
   Used by the contact drawer, TrackNotes wizard, and any
   future form. CSS variables adapt to .chapter-light context.
   ════════════════════════════════════════════════════════════ */
.form-field{display:flex;flex-direction:column;gap:7px}
.form-label{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:0.18em;
  text-transform:uppercase;color:var(--muted);
}
/* Key fields (name, email, message) — brighter label so the essentials lead the eye */
.form-label--key{color:var(--text)}
.form-input,.form-select,.form-textarea{
  font-family:var(--font-body);font-size:15px;
  color:var(--text);background:var(--bg-2);
  border:1px solid var(--line);border-radius:0;
  padding:11px 15px;width:100%;
  transition:border-color .2s,background .2s;
}
.form-input:focus,.form-select:focus,.form-textarea:focus{
  outline:none;border-color:var(--accent);
}
.form-input::placeholder,.form-textarea::placeholder{color:var(--muted);font-size:14px}
.form-select{
  cursor:pointer;-webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238b8071' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:38px;
}
.form-textarea{resize:vertical;min-height:96px;line-height:1.6}
/* Native dropdown options — explicit colours so the popup list is
   always legible (the OS popup ignores the select's inherited light
   text on its own light background otherwise). */
.form-select option{background-color:var(--bg-2);color:var(--text)}

/* Light chapter overrides */
.chapter-light .form-input,.chapter-light .form-select,.chapter-light .form-textarea{
  color:var(--ink);background:var(--stone-card);
  border-color:rgba(36,29,21,0.18);
}
.chapter-light .form-select option{background-color:var(--stone-card);color:var(--ink)}
.chapter-light .form-input::placeholder,.chapter-light .form-textarea::placeholder{color:var(--ink-dim)}
.chapter-light .form-input:focus,.chapter-light .form-select:focus,.chapter-light .form-textarea:focus{
  border-color:var(--terracotta);
}
.chapter-light .form-select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235e5446' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Standard native dropdown — opts out of the custom arrow/appearance
   (listed last + duplicated under .chapter-light so it always wins). */
.form-select--native,
.chapter-light .form-select--native{
  -webkit-appearance:menulist;appearance:auto;
  background-image:none;padding-right:14px;cursor:pointer;
}

/* Stepper (shared — drawer + pricing calculator) */
.stepper{display:flex;align-items:center;width:fit-content;border:1px solid var(--line);border-radius:0;overflow:hidden}
.stepper button{
  width:44px;height:44px;display:grid;place-items:center;
  font-size:18px;color:var(--text-dim);
  transition:color .2s,background .2s;
}
.stepper button:hover{color:var(--accent);background:var(--accent-dim)}
.stepper__val{
  font-family:var(--font-mono);font-size:17px;width:52px;
  text-align:center;color:var(--text);
  border-inline:1px solid var(--line);line-height:44px;
}

/* ════════════════════════════════════════════════════════════
   CONTACT DRAWER
   Global slide-in panel triggered by [data-contact-trigger].
   Injected into <body> by initContactDrawer() in shared.js.
   ════════════════════════════════════════════════════════════ */
.drawer{
  position:fixed;inset:0;z-index:2000;
  pointer-events:none;
}
.drawer.is-open{pointer-events:auto}

.drawer__overlay{
  position:absolute;inset:0;
  background:rgba(0,0,0,0);
  transition:background .38s ease;
}
.drawer.is-open .drawer__overlay{background:rgba(0,0,0,0.68)}

.drawer__panel{
  position:absolute;top:0;right:0;bottom:0;
  width:clamp(320px,94vw,520px);
  background:var(--drawer-bg);
  border-left:1px solid rgba(244,237,224,0.08);
  transform:translateX(100%);
  transition:transform .42s cubic-bezier(.4,0,.2,1);
  overflow-y:auto;overflow-x:hidden;
  display:flex;flex-direction:column;
}
.drawer.is-open .drawer__panel{transform:translateX(0)}

.drawer__close{
  position:absolute;top:18px;right:18px;
  width:34px;height:34px;border-radius:50%;
  border:1px solid rgba(244,237,224,0.12);
  display:grid;place-items:center;
  color:var(--muted);font-size:18px;line-height:1;
  transition:border-color .2s,color .2s;z-index:1;
  flex:none;
}
.drawer__close:hover{border-color:var(--accent);color:var(--accent)}

.drawer__inner{
  padding:clamp(52px,6vw,68px) clamp(28px,5vw,48px) clamp(40px,5vw,52px);
  flex:1;display:flex;flex-direction:column;
}

.drawer__logo{width:138px;height:auto;margin:0 auto 18px;opacity:.92}
/* Centred head — mirrors the centred logo treatment on the homepage. */
.drawer__head{margin-bottom:36px;text-align:center}
.drawer__head .eyebrow{margin-bottom:12px}
.drawer__title{
  font-family:var(--font-display);font-size:clamp(28px,3.5vw,38px);
  font-weight:300;letter-spacing:-0.02em;margin-bottom:10px;
}
.drawer__sub{color:var(--text-dim);font-size:14px;line-height:1.55}

.drawer__field{margin-bottom:22px}
.drawer__field > .form-label{display:block;margin-bottom:10px}

.drawer__svc-row{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
  margin-bottom:30px;
}
.drawer__svc{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:0.1em;
  text-transform:uppercase;padding:13px 8px;
  border:1px solid var(--line);border-radius:0;
  color:var(--text-dim);text-align:center;
  transition:border-color .2s,color .2s,background .2s;
}
.drawer__svc.is-active,.drawer__svc:hover{
  border-color:var(--accent);color:var(--accent);background:var(--accent-dim);
}

.drawer__cond{display:none}
.drawer__cond.is-active{display:block}

.drawer__note{
  padding:14px 18px;background:rgba(201,164,92,0.06);
  border-left:2px solid var(--accent);border-radius:0;margin-bottom:20px;
}
.drawer__note p{font-size:14px;color:var(--text-dim);line-height:1.6}
.drawer__note a{color:var(--accent)}
.drawer__note a:hover{text-decoration:underline}

.drawer__row-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:440px){.drawer__row-2{grid-template-columns:1fr}}

.drawer__radio-group{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.drawer__radio{
  display:flex;align-items:center;gap:6px;
  font-size:14px;color:var(--text-dim);cursor:pointer;
  padding:7px 12px;border:1px solid var(--line);border-radius:0;
  transition:border-color .2s,color .2s;
}
.drawer__radio:has(input:checked){border-color:var(--accent);color:var(--accent)}
.drawer__radio input{display:none}

.drawer__form-bottom{margin-top:auto;padding-top:4px}

.drawer__success{
  flex:1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  text-align:center;padding:40px 24px;
}
.drawer__success-icon{
  width:52px;height:52px;border-radius:50%;
  background:var(--accent-dim);border:1px solid var(--accent);
  display:grid;place-items:center;margin:0 auto 20px;
  color:var(--accent);font-size:22px;
}
.drawer__success h3{
  font-family:var(--font-display);font-size:clamp(20px,2.5vw,26px);
  font-weight:300;margin-bottom:10px;
}
.drawer__success p{color:var(--text-dim);font-size:15px;line-height:1.6}

/* Drawer-scoped form overrides (dark panel) */
.drawer .form-input,.drawer .form-select,.drawer .form-textarea{
  background:rgba(255,255,255,0.04);
  border-color:rgba(244,237,224,0.10);
  font-size:15px;
}
.drawer .form-input:focus,.drawer .form-select:focus,.drawer .form-textarea:focus{
  border-color:var(--accent);background:rgba(255,255,255,0.06);
}
.drawer .form-select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238b8071' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;
}
.drawer .stepper{border-color:rgba(244,237,224,0.12)}
.drawer .stepper__val{border-color:rgba(244,237,224,0.12)}