/* ============================================================
   Boy Wonder Studios — studio page hero (rust brand)
   ============================================================ */
.studio-hero { --accent: var(--rust); }
.studio-hero .hero-photo img { object-position: 66% 6%; }

/* Reveal the hero content (globally sr-only) for the Boy Wonder lockup. */
.studio-hero .hero-inner {
  position: relative;
  grid-column: 1;
  grid-row: 2;
  align-self: end;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  z-index: 1;
  max-width: 640px;
}
.studio-hero .hero-meta { display: none; }

.studio-hero-mark {
  display: block;
  width: clamp(58px, 5.5vw, 76px);
  height: auto;
  margin-bottom: 22px;
}
.studio-hero-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 18px;
}
.studio-hero-eyebrow .dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--rust);
  margin-right: 10px;
  vertical-align: 1px;
  box-shadow: 0 0 12px var(--rust);
}
.studio-hero-title {
  font-family: var(--font-studio);
  font-weight: 400;
  font-size: clamp(48px, 7vw, 108px);
  line-height: 0.9;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  margin: 0 0 20px;
  color: var(--ink);
}
.studio-hero-title .accent { color: var(--rust); }
.studio-hero-tag {
  font-family: var(--font-body);
  font-size: clamp(15px, 1.4vw, 19px);
  line-height: 1.5;
  color: var(--ink-muted);
  max-width: 40ch;
  margin: 0 0 28px;
}

/* Mobile Boy Wonder hero */
.studio-mhero { --accent: var(--rust); }
.studio-mhero .studio-hero-mark { width: 54px; margin-bottom: 14px; }
.studio-mhero .mhero-name {
  font-family: var(--font-studio);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.studio-mhero .mhero-name .accent { color: var(--rust); }

/* ============================================================
   "Hear the work" — Apple Music-style click-to-play cards
   ============================================================ */
.reel { margin-top: clamp(40px, 4vw, 64px); }
.reel-grid {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 1.25vw, 16px);
}
.reel-card {
  position: relative;
  display: grid;
  grid-template-columns: clamp(78px, 7.8vw, 112px) 1fr;
  align-items: center;
  gap: clamp(13px, 1.25vw, 18px);
  text-align: left;
  width: 100%;
  min-height: 132px;
  padding: clamp(12px, 1.2vw, 16px);
  background:
    linear-gradient(145deg, rgba(245, 241, 234, 0.065), rgba(194, 78, 44, 0.055)),
    var(--bg-elev);
  border: 2px solid var(--line-strong);
  border-radius: 18px;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: border-color 0.25s ease, background 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
}
.reel-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 0% 0%, rgba(194, 78, 44, 0.22), transparent 48%);
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}
.reel-card:hover,
.reel-card.playing {
  border-color: var(--rust);
  background: var(--bg-card);
  box-shadow: 0 24px 46px -34px rgba(0, 0, 0, 0.95);
}
.reel-card:hover {
  transform: translateY(-2px);
}
.reel-card:hover::before,
.reel-card.playing::before {
  opacity: 1;
}

.reel-cover {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-card);
  border: 1px solid rgba(245, 241, 234, 0.12);
  box-shadow: 0 16px 30px -22px rgba(0, 0, 0, 0.95);
}
.reel-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease, filter 0.25s ease;
}
.reel-card:hover .reel-cover img,
.reel-card.playing .reel-cover img {
  transform: scale(1.045);
  filter: brightness(0.96) saturate(1.04);
}
.reel-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 9, 8, 0.55), rgba(10, 9, 8, 0.05));
  opacity: 0;
  transition: opacity 0.25s ease;
}
.reel-card:hover .reel-cover::after,
.reel-card.playing .reel-cover::after {
  opacity: 0.18;
}

.reel-info {
  position: relative;
  z-index: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.reel-song {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(18px, 1.75vw, 25px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.reel-artist,
.reel-role {
  font-family: var(--font-mono);
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.reel-artist {
  font-size: 11px;
  letter-spacing: 0.13em;
  color: var(--ink);
}
.reel-role {
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--ink-muted);
}
.reel-progress {
  position: relative;
  display: block;
  height: 4px;
  margin-top: 10px;
  border-radius: 999px;
  background: rgba(245, 241, 234, 0.12);
  overflow: hidden;
}
.reel-progress span {
  position: absolute;
  inset: 0;
  background: var(--rust);
  border-radius: inherit;
  transform: scaleX(0);
  transform-origin: left;
}
@media (prefers-reduced-motion: reduce) {
  .reel-cover img,
  .reel-card { transition: none; }
}

@media (max-width: 1040px) {
  .reel-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .reel-card {
    grid-template-columns: 72px 1fr;
    min-height: 104px;
    border-radius: 14px;
    padding: 10px;
  }
  .reel-cover {
    border-radius: 10px;
  }
  .reel-song {
    font-size: 17px;
  }
  .reel-artist {
    font-size: 10px;
  }
  .reel-role {
    display: none;
  }
  .reel-progress {
    margin-top: 7px;
  }
}

/* ============================================================
   BRAND "DAY" SIDE — Boy Wonder full-packet light theme
   Scoped to body.theme-day (studio page only). Flips the design
   tokens from the nocturnal artist palette to the warm cream +
   rust + ink print world from the brand packet.
   ============================================================ */
body.theme-day {
  --bg: #F1E4CB;          /* cream ground */
  --bg-elev: #E8D7B7;     /* recessed band (marquee) */
  --bg-card: #F9F1E1;     /* lifted card */
  --ink: #221B14;         /* brand ink (text) */
  --ink-muted: #7C6A50;   /* warm muted brown */
  --ink-faint: #B09A78;   /* faint warm */
  --line: #DECBA6;        /* warm hairline */
  --line-strong: #CDB78E;
  --accent: var(--rust);
  --accent-soft: #F0D7C6; /* light rust tint for card glows */
  --accent-ink: #F6EBD6;  /* cream text on rust */
}

/* Paper grain across the whole day page */
body.theme-day::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.6;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.07'/%3E%3C/svg%3E");
}
/* keep real content above the grain */
body.theme-day header,
body.theme-day section,
body.theme-day footer { position: relative; z-index: 2; }
body.theme-day .nav { position: fixed; z-index: 50; }
body.theme-day .cut-modal { position: fixed; z-index: 200; }
body.theme-day .mobile-menu { position: fixed; z-index: 100; }

/* Nav / drawer — cream glass instead of dark glass */
body.theme-day .nav {
  background: linear-gradient(to bottom, rgba(241, 228, 203, 0.92), rgba(241, 228, 203, 0));
}
body.theme-day .nav.scrolled {
  background: rgba(241, 228, 203, 0.9);
  border-bottom: 1px solid var(--line);
}
body.theme-day .mobile-menu { background: rgba(241, 228, 203, 0.97); }

/* Cut modal close button reads over album art — force a cream glyph */
body.theme-day .cut-close { color: #F6EBD6; border-color: rgba(34, 27, 20, 0.18); }

/* ============================================================
   MASTHEAD — compact poster header (replaces the photo hero)
   ============================================================ */
.masthead {
  position: relative;
  padding: clamp(112px, 11.5vh, 136px) var(--gutter) clamp(18px, 2.5vh, 34px);
}
.masthead-frame {
  position: relative;
  max-width: 1440px;
  margin: 0 auto;
  padding: clamp(30px, 4.5vw, 58px);
  display: flex;
  align-items: center;
  gap: clamp(28px, 4vw, 68px);
  border: 1px solid var(--line-strong);
  border-radius: 22px;
  background:
    radial-gradient(115% 130% at 78% 44%, rgba(194, 78, 44, 0.08) 0%, transparent 48%),
    radial-gradient(130% 130% at 50% 42%, transparent 60%, rgba(60, 40, 25, 0.14) 100%),
    radial-gradient(120% 130% at 0% 100%, rgba(224, 160, 46, 0.10) 0%, transparent 46%),
    var(--bg-card);
  overflow: hidden;
}
/* Stronger paper grain on the poster panel itself (behind the text) */
.masthead-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.6;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)' opacity='0.11'/%3E%3C/svg%3E");
}
.masthead-inner { position: relative; z-index: 1; flex: 0 1 auto; min-width: 0; }
.masthead-eyebrow {
  font-family: var(--font-mono);
  font-size: clamp(10px, 1vw, 12px);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: clamp(18px, 3vw, 30px);
}
.masthead-eyebrow .dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--rust);
  margin-right: 11px;
  vertical-align: 1px;
  box-shadow: 0 0 12px var(--rust);
}
.masthead-title {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.2vw, 30px);
  margin: 0 0 clamp(16px, 2.4vw, 26px);
  font-family: var(--font-studio);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 0.86;
  letter-spacing: 0.01em;
  font-size: clamp(44px, 8vw, 116px);
  color: var(--ink);
}
.masthead-mark { flex: none; width: clamp(52px, 6vw, 84px); height: auto; }
.masthead-title .accent { color: var(--rust); }
.masthead-tag {
  font-family: var(--font-body);
  font-size: clamp(15px, 1.5vw, 20px);
  line-height: 1.5;
  color: var(--ink-muted);
  max-width: 44ch;
  margin: 0 0 clamp(24px, 3.4vw, 38px);
}
.masthead-actions {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2vw, 26px);
  flex-wrap: wrap;
}
.masthead-status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 12px 18px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.masthead-status:hover { border-color: var(--rust); background: rgba(194, 78, 44, 0.06); }
.masthead-status .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--rust);
  box-shadow: 0 0 0 0 rgba(194, 78, 44, 0.5);
  animation: mh-pulse 2.4s ease-out infinite;
}
@keyframes mh-pulse {
  0% { box-shadow: 0 0 0 0 rgba(194, 78, 44, 0.5); }
  70% { box-shadow: 0 0 0 9px rgba(194, 78, 44, 0); }
  100% { box-shadow: 0 0 0 0 rgba(194, 78, 44, 0); }
}
.masthead-rule {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 44px);
  margin-top: clamp(32px, 5vw, 60px);
  padding-top: clamp(22px, 3vw, 34px);
  border-top: 1px solid var(--line);
}
.masthead-rule img {
  width: clamp(26px, 2.6vw, 34px);
  height: auto;
  opacity: 0.55;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.masthead-rule img:hover { opacity: 1; transform: translateY(-2px); }

/* Subtle CSS entrance (independent of the JS motion layer) */
.masthead-inner > * { animation: mh-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; }
.masthead-eyebrow { animation-delay: 0.05s; }
.masthead-title { animation-delay: 0.13s; }
.masthead-tag { animation-delay: 0.22s; }
.masthead-actions { animation-delay: 0.31s; }
@keyframes mh-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

@media (max-width: 640px) {
  .masthead-title { flex-direction: column; align-items: flex-start; gap: 14px; }
  .masthead-rule { flex-wrap: wrap; gap: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .masthead-inner > * { animation: none; }
  .masthead-status .dot { animation: none; }
}

/* ============================================================
   BRAND "NIGHT" VARIANT — warm-dark ground, content pops
   Preview via /studio?theme=dark (body.theme-night). Warm brown
   ground (not the artist near-black) with cream text + lifted
   cards + rust/gold glows so the important stuff lifts forward.
   ============================================================ */
body.theme-night {
  --bg: #1C1610;          /* warm dark ground */
  --bg-elev: #150F0A;     /* deeper band (marquee) */
  --bg-card: #2B2219;     /* lifted warm card — pops off ground */
  --ink: #F3E7CF;         /* warm cream text */
  --ink-muted: #B29A76;   /* warm muted */
  --ink-faint: #7C6A50;   /* faint */
  --line: #3A2C1E;        /* warm hairline */
  --line-strong: #4A3826; /* brand groove brown */
  --accent: var(--rust);
  --accent-soft: #3A1E12; /* deep rust glow tint */
  --accent-ink: #F6EBD6;  /* cream text on rust */
}

/* Subtle light speckle over the dark ground (multiply would vanish) */
body.theme-night::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.65;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.10'/%3E%3C/svg%3E");
}
body.theme-night header,
body.theme-night section,
body.theme-night footer { position: relative; z-index: 2; }
body.theme-night .nav { position: fixed; z-index: 50; }
body.theme-night .cut-modal { position: fixed; z-index: 200; }
body.theme-night .mobile-menu { position: fixed; z-index: 100; }

/* Nav / drawer — warm dark glass */
body.theme-night .nav {
  background: linear-gradient(to bottom, rgba(28, 22, 16, 0.9), rgba(28, 22, 16, 0));
}
body.theme-night .nav.scrolled {
  background: rgba(22, 17, 11, 0.92);
  border-bottom: 1px solid var(--line);
}
body.theme-night .mobile-menu { background: rgba(20, 15, 10, 0.97); }

/* Masthead — lift the poster off the dark ground, brighten the glows */
body.theme-night .masthead-frame {
  background:
    radial-gradient(105% 125% at 78% 44%, rgba(194, 78, 44, 0.16) 0%, transparent 50%),
    radial-gradient(130% 130% at 50% 42%, transparent 55%, rgba(0, 0, 0, 0.38) 100%),
    radial-gradient(120% 130% at 0% 100%, rgba(224, 160, 46, 0.14) 0%, transparent 50%),
    var(--bg-card);
  box-shadow: 0 40px 100px -46px rgba(0, 0, 0, 0.85);
}

/* ============================================================
   BRAND ICONS placed around the site (studio page only)
   Cream "sticker" chips carry the full-colour brand icons so
   they read on either ground. One per section header + one per
   package, each icon distinct.
   ============================================================ */
/* Section head: kicker / title / caption stacked and left-aligned
   (keeps the credit close to the title instead of jammed far right) */
.section-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(12px, 1.3vw, 18px);
}
.section-head .aside {
  text-align: left;
  max-width: 64ch;
  line-height: 1.65;
}

.section-head .title {
  display: flex;
  align-items: center;
  gap: 0.28em;
}
/* Icon chip scales with the header font itself */
.hdr-icon {
  flex: none;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  background: #F1E4CB;
  border: 2px solid #4A3826;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 26px -12px rgba(0, 0, 0, 0.7);
}
.hdr-icon img { width: 78%; height: 78%; object-fit: contain; display: block; }
.hdr-icon img[src*="10-headphones"] {
  width: 92%;
  height: 92%;
  object-fit: contain;
  transform: translateY(-20%);
}

#work {
  padding-top: clamp(42px, 4.4vw, 68px);
  padding-bottom: clamp(46px, 5.2vw, 78px);
}
#work .section-head {
  margin-bottom: clamp(18px, 2.4vw, 34px);
}

#studio {
  padding-top: clamp(42px, 4.8vw, 72px);
  padding-bottom: clamp(32px, 3.8vw, 54px);
}

#contact {
  padding-top: clamp(34px, 4vw, 56px);
}

.workwith-intro {
  display: block;
  margin-bottom: clamp(18px, 2.5vw, 30px);
}

.workwith-intro .section-head {
  margin-bottom: 0;
}

.workwith-bio {
  max-width: 56ch;
  margin: 0 0 0 auto;
  font-size: clamp(17px, 1.28vw, 21px);
  line-height: 1.55;
}

/* Reel sits directly under its Catalog header, matching the stats side */
.studio-lead .reel { margin-top: 0; }
.studio-lead .reel-grid { margin-top: 0; }

/* Package marker chips (replace the A/B/C letters) */
.pkg-row { grid-template-columns: 40px 1fr auto auto 28px; }
.pkg-idx {
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
  background: #F1E4CB;
  border: 1.5px solid #4A3826;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pkg-idx img { width: 74%; height: 74%; object-fit: contain; display: block; }

/* ============================================================
   Stronger borders on cards + section dividers
   ============================================================ */
.masthead-frame { border-width: 2px; }
.stat,
.reel-card,
.studio-cta { border: 2px solid var(--line-strong); }
#studio,
#contact { border-top: 1.5px solid var(--line-strong); }

/* Nav doorway mark — fill the whole chip with rust (no dark ring) */
.nav-logo-mark {
  background: var(--rust);
  border: 0;
  border-radius: 50%;
}

/* Package chips need room in the compact mobile row layout */
@media (max-width: 760px) {
  #work { padding-bottom: 48px; }
  #studio { padding-top: 48px; padding-bottom: 34px; }
  #contact { padding-top: 42px; }
  .workwith-intro {
    margin-bottom: 24px;
  }
  .workwith-bio { margin: 0; max-width: 100%; }
  .pkg-row { grid-template-columns: 34px 1fr auto 24px !important; }
  .pkg-idx { width: 30px; height: 30px; }
}

/* ============================================================
   Masthead meta — Based / Est. / Now booking on the right
   ============================================================ */
.masthead-meta {
  position: relative;
  z-index: 1;
  flex: none;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: min(35vw, 440px);
  min-width: 280px;
  padding: clamp(20px, 2.2vw, 30px) 0 clamp(20px, 2.2vw, 30px) clamp(28px, 2.8vw, 48px);
  border-left: 2px solid var(--line-strong);
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.035), transparent 70%);
}
.mm-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: clamp(18px, 2vw, 24px) 0;
  border-top: 1px solid var(--line);
}
.mm-row:first-child { border-top: 0; padding-top: 0; }
.mm-row:last-child { padding-bottom: 0; }
.mm-label {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.mm-val {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(22px, 2vw, 32px);
  letter-spacing: 0.01em;
  color: var(--ink);
}

/* Now booking — clickable, animated, scrolls to contact */
.mm-booking { text-decoration: none; cursor: pointer; transition: transform 0.25s ease; }
.mm-booking .mm-val { color: var(--rust); transition: color 0.2s ease; }
.mm-booking:hover { transform: translateX(3px); }
.mm-booking:hover .mm-val { color: #e8703f; }
.mm-booking:focus-visible { outline: 2px solid var(--rust); outline-offset: 6px; border-radius: 4px; }
.mm-arrow { display: inline-block; transition: transform 0.25s ease; }
.mm-booking:hover .mm-arrow { transform: translateX(6px); }
.mm-booking .dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--rust);
  margin-right: 10px;
  box-shadow: 0 0 0 0 rgba(194, 78, 44, 0.5);
  animation: mh-pulse 2.4s ease-out infinite;
}
.mm-booking:hover .dot { box-shadow: 0 0 0 6px rgba(194, 78, 44, 0.16); }

/* Stack the meta under the content on narrow screens */
@media (max-width: 720px) {
  .masthead { padding-top: clamp(92px, 18vw, 112px); }
  .masthead-frame { flex-direction: column; align-items: stretch; gap: clamp(22px, 5vw, 32px); }
  .masthead-meta {
    align-self: stretch;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    width: auto;
    min-width: 0;
    gap: 22px 40px;
    padding-left: 0;
    padding-top: clamp(20px, 5vw, 26px);
    border-left: 0;
    border-top: 1.5px solid var(--line-strong);
  }
  .mm-row { border-top: 0; padding: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .mm-booking .dot { animation: none; }
}

/* ============================================================
   Boy Wonder conversion flow — trust without a hard sell
   ============================================================ */
.deal-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 1.4vw, 18px);
  margin: 0 0 clamp(38px, 5vw, 62px);
  align-items: stretch;
}

.package-strip {
  margin-bottom: 0;
}
.deal-card {
  min-height: 210px;
  padding: clamp(22px, 2.4vw, 30px);
  border: 2px solid var(--line-strong);
  border-radius: 18px;
  background:
    radial-gradient(95% 90% at 100% 0%, var(--accent-soft) 0%, transparent 62%),
    var(--bg-card);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 22px;
}
.package-card {
  min-height: clamp(430px, 34vw, 500px);
  justify-content: flex-start;
  gap: clamp(15px, 1.4vw, 20px);
}
.deal-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.deal-icon {
  width: 48px;
  height: 48px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 14px 30px -22px var(--accent);
}
.deal-icon img {
  width: 25px;
  height: 25px;
  object-fit: contain;
  filter: none;
}
.deal-kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.deal-card h3 {
  font-family: var(--font-display);
  font-size: clamp(21px, 2vw, 28px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--ink);
}
.deal-card p {
  margin: 0;
  color: var(--ink-muted);
  line-height: 1.55;
}
.deal-copy {
  padding-top: 2px;
}
.deal-copy span,
.deal-fit {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.deal-copy ul {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  display: grid;
  gap: 9px;
}
.deal-copy li {
  position: relative;
  padding-left: 16px;
  color: var(--ink);
  line-height: 1.35;
}
.deal-copy li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.deal-fit {
  margin-top: auto;
  line-height: 1.6;
  letter-spacing: 0.11em;
}
.package-card .pkg-inquire {
  align-self: flex-start;
  margin-top: 0;
}
.studio-cta-points {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}
.studio-cta-points li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding: 8px 11px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.06);
}
.studio-cta-points li::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: var(--accent);
}

@media (max-width: 820px) {
  .deal-strip { grid-template-columns: 1fr; }
  .deal-card,
  .package-card { min-height: 0; }
}