/* ============================================================
   STAGEPRO HK — THEATRE / SHOWBIZ design language
   「開騷」: stage black, spotlight gold, curtain red, playbill
   posters, ticket stubs, marquee bulbs, film strip.
   Poster type: Anton (Latin) × Noto Sans TC 900 (CJK),
   ticket numerals: Barlow Condensed. Loaded last and wins.
   ============================================================ */

:root {
  --sp-black: #0A0E1A;
  --sp-navy: #111A30;
  --sp-gold: #FFC24B;
  --sp-gold-deep: #E0A21F;
  --sp-red: #E63946;
  --sp-red-deep: #B22230;
  --sp-cream: #FAF6EF;
  --sp-white: #FFFFFF;
  --sp-ink: #18213A;
  --sp-ink-soft: #5D6478;
  --sp-line: #E5DFD2;

  --sp-display: "Anton", "Noto Sans TC", system-ui, sans-serif;
  --sp-cond: "Barlow Condensed", "Noto Sans TC", sans-serif;
  --sp-sans: "Noto Sans TC", system-ui, -apple-system, "PingFang HK", sans-serif;
}

html { overflow-x: clip; overflow-y: auto; scroll-behavior: smooth; }
body.sp { overflow-x: clip; background: var(--sp-cream); color: var(--sp-ink); font-family: var(--sp-sans); font-size: 17px; line-height: 1.75; -webkit-font-smoothing: antialiased; }

body.sp ::selection { background: var(--sp-gold); color: var(--sp-black); }

/* ============================================================
   CHROME — house lights down (compact: one slim topbar + one nav
   row carrying the logo; the old brandstrip is gone)
   ============================================================ */
body.sp .topbar { background: #060912; color: rgba(250,246,239,.85); border-bottom: 0; font-size: 13px; }
body.sp .topbar__inner { min-height: 0; padding: 6px 0; }
body.sp .topbar a, body.sp .topbar__item { color: rgba(250,246,239,.85); }
body.sp .topbar__item .ico { color: var(--sp-gold); }
body.sp .topbar__item:hover { color: #fff; }

body.sp .logo__word b { color: #fff; }
body.sp .logo__word span { color: var(--sp-gold); }

body.sp .nav { background: var(--sp-black); border-bottom: 3px solid var(--sp-red); box-shadow: none; }
body.sp .nav__inner {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 24px;
  min-height: 0;
  padding: 9px 0;
}
/* the scraped wordmark is navy-on-transparent — sit it on a cream plate so it
   reads clearly against the near-black header (same in the footer). */
body.sp .nav .logo__mark,
body.sp .footer .logo__mark {
  height: 34px;
  width: auto;
  background: var(--sp-cream);
  padding: 4px 9px;
  border-radius: 8px;
  box-shadow: 0 0 0 1px rgba(255,194,75,.25);
}
body.sp .footer .logo__mark { height: 30px; }
body.sp .nav__menu { flex-wrap: nowrap; }
body.sp .nav__link { color: rgba(250,246,239,.88); font-weight: 600; padding: 8px 14px; }
body.sp .nav__link:hover { color: var(--sp-gold); background: transparent; }
body.sp .nav__actions { margin-left: auto; }
body.sp .btn--solid { background: var(--sp-red); color: #fff; border-radius: 6px; }
body.sp .btn--solid:hover { background: var(--sp-gold); color: var(--sp-black); }

@media (max-width: 920px) {
  body.sp .nav .logo__word { display: none; } /* the image already carries the wordmark */
}
@media (max-width: 620px) {
  body.sp .nav__inner { flex-wrap: wrap; gap: 8px 14px; padding: 8px 0; }
  body.sp .nav .logo__mark { height: 28px; }
  /* logo left + CTA right on row one; menu scrolls on its own slim row */
  body.sp .nav__menu {
    order: 3;
    width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 0;
  }
  body.sp .nav__menu::-webkit-scrollbar { display: none; }
  body.sp .nav__link { padding: 7px 10px; font-size: 15px; white-space: nowrap; }
  body.sp .nav__actions .btn { padding: 9px 16px; font-size: 14.5px; }
}

/* ============================================================
   SHARED ATOMS
   ============================================================ */
.sp-eyebrow {
  display: inline-block;
  font-family: var(--sp-cond);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--sp-red);
  margin-bottom: 14px;
}
.sp-eyebrow--gold { color: var(--sp-gold); }
.sp-h2 {
  font-family: var(--sp-display);
  font-weight: 900;
  font-size: clamp(30px, 4.8vw, 54px);
  line-height: 1.16;
  letter-spacing: .02em;
  margin: 0 0 14px;
  color: var(--sp-ink);
  text-wrap: balance;
}
.sp-h2 em { font-style: normal; color: var(--sp-red); }
.sp-h2--light { color: #fff; }
.sp-h2--light em { color: var(--sp-gold); }
.sp-sub { max-width: 640px; color: var(--sp-ink-soft); font-size: 16.5px; margin: 0; text-wrap: pretty; }
.sp-sechead { margin-bottom: 44px; }
.sp-sechead--center { text-align: center; }
.sp-sechead--center .sp-sub { margin: 0 auto; }
.sp-sechead--light .sp-sub { color: rgba(250,246,239,.65); }

.sp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 12px 30px;
  font-weight: 700;
  font-size: 16px;
  border-radius: 8px;
  text-decoration: none;
  border: 2px solid transparent;
  transition: transform .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease;
}
.sp-btn:hover { transform: translateY(-2px); }
.sp-btn:focus-visible { outline: 3px solid var(--sp-gold); outline-offset: 2px; }
.sp-btn--gold { background: var(--sp-gold); color: var(--sp-black); box-shadow: 0 10px 30px -10px rgba(255,194,75,.55); }
.sp-btn--gold:hover { background: #FFD27A; }
.sp-btn--ghost { background: transparent; border-color: rgba(250,246,239,.5); color: #FAF6EF; }
.sp-btn--ghost:hover { border-color: #fff; background: rgba(250,246,239,.08); }
.sp-btn--ink { background: var(--sp-ink); color: #fff; }
.sp-btn--ink:hover { background: var(--sp-red); }

/* ============================================================
   01 · HERO — the stage
   ============================================================ */
.sp-stage {
  position: relative;
  background:
    radial-gradient(120% 90% at 50% 0%, #1A2440 0%, var(--sp-black) 58%);
  color: #FAF6EF;
  overflow: clip;
  padding: clamp(64px, 9vw, 110px) 0 0;
}

/* spotlight beams — cross from top corners, sway slowly */
.sp-stage__beam {
  position: absolute;
  top: -12%;
  width: 46%;
  height: 130%;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(255,222,148,.6), rgba(255,214,128,.12) 62%, transparent 82%);
  filter: blur(10px);
  opacity: .9;
  mix-blend-mode: screen;
}
.sp-stage__beam--l { left: -4%; transform-origin: top left; clip-path: polygon(0 0, 16% 0, 92% 100%, 38% 100%); transform: rotate(calc(var(--sway, 0) * 2deg)); animation: sp-sway-l 9s ease-in-out infinite alternate; }
.sp-stage__beam--r { right: -4%; transform-origin: top right; clip-path: polygon(84% 0, 100% 0, 62% 100%, 8% 100%); animation: sp-sway-r 11s ease-in-out infinite alternate; }
@keyframes sp-sway-l { from { transform: rotate(-2deg); } to { transform: rotate(2.4deg); } }
@keyframes sp-sway-r { from { transform: rotate(2deg); } to { transform: rotate(-2.4deg); } }

/* curtain pleats at the edges */
.sp-stage__curtain {
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(34px, 5vw, 84px);
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg, #8E1B25 0 10px, #C12A36 10px 22px, #6E141C 22px 34px);
  box-shadow: inset 0 -40px 60px rgba(0,0,0,.55);
}
.sp-stage__curtain--l { left: 0; border-right: 4px solid rgba(0,0,0,.4); }
.sp-stage__curtain--r { right: 0; border-left: 4px solid rgba(0,0,0,.4); }

/* stage floor glow */
.sp-stage__floor {
  position: absolute;
  left: 50%;
  bottom: -8%;
  width: 110%;
  height: 26%;
  transform: translateX(-50%);
  background: radial-gradient(50% 100% at 50% 100%, rgba(255,214,128,.2), transparent 70%);
  pointer-events: none;
}

.sp-stage__inner { position: relative; z-index: 2; text-align: center; }
.sp-kicker {
  font-family: var(--sp-cond);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--sp-gold);
  margin: 0 0 18px;
}
.sp-h1 {
  font-family: var(--sp-display);
  font-weight: 900;
  font-size: clamp(46px, 8.4vw, 110px);
  line-height: 1.06;
  letter-spacing: .02em;
  margin: 0 0 20px;
  color: #fff;
}
.sp-h1 span { display: block; }
.sp-h1__gold {
  color: var(--sp-gold);
  text-shadow: 0 0 34px rgba(255,194,75,.45), 0 0 90px rgba(255,194,75,.25);
}
.sp-stage__lead { max-width: 560px; margin: 0 auto 28px; color: rgba(250,246,239,.78); font-size: 17.5px; text-wrap: pretty; }
.sp-stage__lead b { color: #fff; }
.sp-stage__cta { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin-bottom: clamp(40px, 6vw, 64px); }

/* polaroid deck on the stage floor */
.sp-stage__deck { position: relative; height: clamp(170px, 24vw, 300px); max-width: 880px; margin: 0 auto; }
.sp-pol {
  position: absolute;
  bottom: -6%;
  width: clamp(170px, 22vw, 270px);
  aspect-ratio: 5/4;
  object-fit: cover;
  border: 6px solid #fff;
  border-bottom-width: 26px;
  box-shadow: 0 26px 50px -18px rgba(0,0,0,.65);
  background: #fff;
  transition: transform .4s ease;
}
.sp-pol--1 { left: 4%; transform: rotate(calc(-7deg - var(--sway, 0) * 1deg)); }
.sp-pol--2 { left: 50%; transform: translateX(-50%) rotate(1.5deg) translateY(-12px); z-index: 2; }
.sp-pol--3 { right: 4%; transform: rotate(6.5deg); }

/* ============================================================
   02 · MARQUEE BULB STRIP
   ============================================================ */
.sp-marquee { background: var(--sp-red); position: relative; overflow: hidden; border-top: 4px solid var(--sp-red-deep); border-bottom: 4px solid var(--sp-red-deep); }
.sp-marquee__bulbs {
  height: 14px;
  background-image: radial-gradient(circle 4px at 10px 7px, #FFE6A8 0 4px, rgba(255,230,168,.18) 5px, transparent 6px);
  background-size: 30px 14px;
  animation: sp-bulbs 1s steps(2) infinite;
}
@keyframes sp-bulbs { 50% { background-position-x: 15px; } }
.sp-marquee__track {
  display: flex;
  align-items: center;
  gap: 26px;
  width: max-content;
  padding: 10px 0;
  font-family: var(--sp-display);
  font-size: clamp(17px, 2vw, 23px);
  letter-spacing: .12em;
  color: #fff;
  animation: sp-marq 26s linear infinite;
}
.sp-marquee__track i { font-style: normal; color: var(--sp-gold); font-size: .55em; }
@keyframes sp-marq { to { transform: translateX(-50%); } }

/* ============================================================
   03 · LINEUP — playbill poster wall (light)
   ============================================================ */
.sp-lineup { padding: clamp(72px, 9vw, 116px) 0; background: var(--sp-cream); }
.sp-posters {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2.4vw, 28px);
}
.sp-poster {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 18px 36px -20px rgba(10,14,26,.4);
  transform: rotate(var(--r, 0deg));
  transition: transform .25s ease, box-shadow .25s ease;
}
.sp-poster:hover { transform: rotate(0deg) translateY(-8px); box-shadow: 0 28px 50px -22px rgba(10,14,26,.5); z-index: 2; }
/* sheen sweep on hover */
.sp-poster::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(112deg, transparent 38%, rgba(255,255,255,.5) 50%, transparent 62%);
  transform: translateX(-120%);
  pointer-events: none;
}
.sp-poster:hover::after { transition: transform .7s ease; transform: translateX(120%); }
.sp-poster__img { aspect-ratio: 4/3.4; overflow: hidden; background: var(--sp-navy); }
.sp-poster__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.sp-poster:hover .sp-poster__img img { transform: scale(1.05); }
.sp-poster__body { padding: 16px 18px 12px; flex: 1; }
.sp-poster__body h3 { font-family: var(--sp-sans); font-weight: 900; font-size: 19px; margin: 0 0 6px; color: var(--sp-ink); line-height: 1.3; display: flex; flex-direction: column; gap: 1px; }
.sp-poster__body h3 small { font-family: var(--sp-cond); font-weight: 600; font-size: 12px; letter-spacing: .24em; color: var(--sp-red); }
.sp-poster__body p { margin: 0; font-size: 13.5px; line-height: 1.65; color: var(--sp-ink-soft); }
/* perforated ticket stub */
.sp-poster__stub {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 18px;
  border-top: 2px dashed #D8D2C4;
  background: #FFF8E9;
  text-decoration: none;
  transition: background .18s ease;
}
.sp-poster__stub:hover { background: var(--sp-gold); }
.sp-poster__stub::before, .sp-poster__stub::after {
  content: "";
  position: absolute;
  top: -9px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--sp-cream);
}
.sp-poster__stub::before { left: -9px; }
.sp-poster__stub::after { right: -9px; }
.sp-poster__stub b { font-family: var(--sp-cond); font-weight: 700; font-size: 21px; color: var(--sp-red-deep); letter-spacing: .02em; }
.sp-poster__stub span { font-size: 12.5px; font-weight: 700; color: var(--sp-ink); white-space: nowrap; }
/* custom-plan poster */
.sp-poster--cta { background: var(--sp-navy); border: 2px dashed rgba(255,194,75,.6); }
.sp-poster--cta a { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 14px; padding: 40px 22px; text-align: center; text-decoration: none; min-height: 300px; }
.sp-poster--cta b { font-family: var(--sp-display); font-size: clamp(30px, 3vw, 42px); line-height: 1.15; color: var(--sp-gold); letter-spacing: .04em; }
.sp-poster--cta span { color: rgba(250,246,239,.75); font-size: 14px; }
.sp-poster--cta:hover { border-color: var(--sp-gold); }

/* ============================================================
   04 · SCREEN — showreel + film strip (dark)
   ============================================================ */
.sp-screen { padding: clamp(72px, 9vw, 110px) 0 0; background: var(--sp-navy); color: #fff; }
.sp-screen__frame {
  position: relative;
  max-width: 880px;
  margin: 0 auto;
  aspect-ratio: 16/9;
  background: #000;
  border-radius: 14px;
  border: 6px solid #0B1226;
  box-shadow: 0 0 0 1px rgba(255,194,75,.35), 0 0 60px -8px rgba(255,194,75,.35), 0 40px 70px -30px rgba(0,0,0,.8);
  overflow: hidden;
}
.sp-screen__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* film strip */
.sp-film { margin-top: clamp(46px, 6vw, 70px); background: #05080F; padding: 0 0 14px; }
.sp-film__strip {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 26px 26px;
  /* sprocket holes */
  background-image:
    repeating-linear-gradient(90deg, transparent 0 10px, rgba(250,246,239,.85) 10px 22px, transparent 22px 34px),
    repeating-linear-gradient(90deg, transparent 0 10px, rgba(250,246,239,.85) 10px 22px, transparent 22px 34px);
  background-size: 34px 10px, 34px 10px;
  background-position: 0 8px, 0 calc(100% - 8px);
  background-repeat: repeat-x;
  scrollbar-width: thin;
  scrollbar-color: var(--sp-gold) #05080F;
}
.sp-film__strip figure { margin: 0; flex: 0 0 auto; scroll-snap-align: center; }
.sp-film__strip img {
  display: block;
  width: clamp(220px, 26vw, 320px);
  aspect-ratio: 16/10;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid rgba(250,246,239,.2);
}
.sp-film__strip figcaption {
  font-family: var(--sp-cond);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .2em;
  color: rgba(250,246,239,.65);
  text-transform: uppercase;
  padding-top: 8px;
  text-align: center;
}
.sp-film__hint { text-align: center; font-size: 12.5px; color: rgba(250,246,239,.45); margin: 6px 0 0; padding-bottom: 8px; }

/* ============================================================
   05 · RUNDOWN — curtains pull open on scroll
   ============================================================ */
.sp-run { background: var(--sp-cream); }
.sp-run__theatre { position: relative; overflow: clip; }
.sp-run__inner { padding: clamp(72px, 9vw, 116px) 0; position: relative; z-index: 1; }
.sp-run__drape {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 56%;
  z-index: 3;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg, #8E1B25 0 16px, #C12A36 16px 34px, #6E141C 34px 52px);
  box-shadow: inset 0 -60px 80px rgba(0,0,0,.45);
  transition: transform .1s linear;
}
.sp-run__drape--l { left: 0; transform: translateX(calc(var(--open, 0) * -101%)); border-right: 6px solid rgba(0,0,0,.35); }
.sp-run__drape--r { right: 0; transform: translateX(calc(var(--open, 0) * 101%)); border-left: 6px solid rgba(0,0,0,.35); }

.sp-cues { list-style: none; margin: 0; padding: 0; max-width: 760px; }
.sp-cue {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: clamp(16px, 3vw, 34px);
  align-items: start;
  padding: 24px 0;
  border-bottom: 1px solid var(--sp-line);
}
.sp-cue:last-child { border-bottom: 0; }
.sp-cue__no {
  font-family: var(--sp-display);
  font-size: 21px;
  letter-spacing: .06em;
  color: var(--sp-red);
  border: 2.5px solid var(--sp-red);
  border-radius: 8px;
  text-align: center;
  padding: 8px 4px;
  transform: rotate(-2deg);
}
.sp-cue h3 { font-weight: 900; font-size: clamp(19px, 2.2vw, 24px); margin: 0 0 6px; color: var(--sp-ink); }
.sp-cue p { margin: 0; color: var(--sp-ink-soft); font-size: 15.5px; max-width: 480px; }

/* ============================================================
   06 · TICKETS — pricing stubs
   ============================================================ */
.sp-tix { padding: clamp(72px, 9vw, 116px) 0; background: #FFFDF8; border-top: 1px solid var(--sp-line); }
.sp-tix__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.6vw, 30px);
  max-width: 1020px;
  margin: 0 auto;
}
.sp-ticket {
  position: relative;
  background: #fff;
  border: 2px solid var(--sp-ink);
  border-radius: 14px;
  padding: 0 0 0;
  transform: rotate(var(--r, 0deg));
  transition: transform .22s ease, box-shadow .22s ease;
  box-shadow: 5px 6px 0 rgba(24,33,58,.12);
  overflow: hidden;
}
.sp-ticket:hover { transform: rotate(0deg) translateY(-6px); box-shadow: 7px 10px 0 rgba(24,33,58,.14); }
.sp-ticket--hot { border-color: var(--sp-red); box-shadow: 5px 6px 0 rgba(230,57,70,.22); }
.sp-ticket__flag {
  position: absolute;
  top: 14px;
  right: -34px;
  z-index: 2;
  background: var(--sp-red);
  color: #fff;
  font-weight: 900;
  font-size: 12.5px;
  letter-spacing: .1em;
  padding: 6px 40px;
  transform: rotate(35deg);
}
.sp-ticket__head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--sp-ink);
  color: #fff;
  padding: 16px 22px;
}
.sp-ticket--hot .sp-ticket__head { background: var(--sp-red); }
.sp-ticket__head span { font-family: var(--sp-cond); font-weight: 700; font-size: 13px; letter-spacing: .3em; color: var(--sp-gold); }
.sp-ticket__head b { font-weight: 900; font-size: 20px; }
.sp-ticket__price {
  font-family: var(--sp-cond);
  font-weight: 700;
  font-size: clamp(36px, 3.6vw, 46px);
  color: var(--sp-ink);
  padding: 18px 22px 4px;
  line-height: 1.05;
}
.sp-ticket__price small { font-family: var(--sp-sans); font-weight: 600; font-size: 13px; color: var(--sp-ink-soft); margin-left: 4px; }
.sp-ticket ul { list-style: none; margin: 8px 22px 16px; padding: 0; }
.sp-ticket li { font-size: 14.5px; padding: 4px 0 4px 22px; position: relative; color: var(--sp-ink); }
.sp-ticket li::before { content: "★"; position: absolute; left: 0; color: var(--sp-gold-deep); font-size: 12px; top: 8px; }
.sp-ticket__tear {
  position: relative;
  border-top: 2px dashed #CFC8B8;
  padding: 10px 22px 12px;
  background: #FFF8E9;
}
.sp-ticket__tear::before, .sp-ticket__tear::after {
  content: "";
  position: absolute;
  top: -11px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #FFFDF8;
  border: 2px solid var(--sp-ink);
}
.sp-ticket--hot .sp-ticket__tear::before, .sp-ticket--hot .sp-ticket__tear::after { border-color: var(--sp-red); }
.sp-ticket__tear::before { left: -12px; }
.sp-ticket__tear::after { right: -12px; }
.sp-ticket__tear span { font-family: var(--sp-cond); font-weight: 600; font-size: 12px; letter-spacing: .3em; color: var(--sp-ink-soft); text-transform: uppercase; }
.sp-tix__cta { text-align: center; margin-top: 40px; }

/* ============================================================
   07 · STATS — billboard (dark)
   ============================================================ */
.sp-stats { background: var(--sp-black); padding: clamp(54px, 7vw, 84px) 0; }
.sp-stats__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.sp-stat { text-align: center; padding: 16px 8px; border-left: 1px solid rgba(250,246,239,.14); }
.sp-stat:first-child { border-left: 0; }
.sp-stat b {
  display: block;
  font-family: var(--sp-display);
  font-size: clamp(34px, 4.8vw, 62px);
  color: var(--sp-gold);
  line-height: 1.05;
  text-shadow: 0 0 26px rgba(255,194,75,.35);
}
.sp-stat > span { font-family: var(--sp-cond); font-weight: 600; font-size: 14px; letter-spacing: .22em; color: rgba(250,246,239,.6); text-transform: uppercase; }

/* ============================================================
   08 · VOICES — after the show (light)
   ============================================================ */
.sp-voices { padding: clamp(72px, 9vw, 110px) 0; background: var(--sp-cream); }
.sp-voices__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.6vw, 28px); }
.sp-voice {
  margin: 0;
  background: #fff;
  border-radius: 12px;
  border-top: 5px solid var(--sp-red);
  padding: 26px 24px 22px;
  box-shadow: 0 18px 36px -22px rgba(10,14,26,.35);
  transform: rotate(var(--r, 0deg));
}
.sp-voice p { font-size: 16px; line-height: 1.8; color: var(--sp-ink); margin: 0 0 16px; }
.sp-voice footer { display: flex; gap: 10px; align-items: baseline; border-top: 1px solid var(--sp-line); padding-top: 12px; }
.sp-voice footer b { font-weight: 900; font-size: 14.5px; color: var(--sp-ink); }
.sp-voice footer span { font-family: var(--sp-cond); font-weight: 600; font-size: 13px; letter-spacing: .06em; color: var(--sp-ink-soft); }

/* ============================================================
   09 · FINAL CTA — empty stage, one spotlight pool
   ============================================================ */
.sp-cta { position: relative; background: var(--sp-black); color: #fff; padding: clamp(86px, 11vw, 140px) 0; overflow: clip; text-align: center; }
.sp-cta__pool {
  position: absolute;
  left: 50%;
  top: 0;
  width: 64%;
  height: 100%;
  transform: translateX(-50%);
  background:
    linear-gradient(to bottom, rgba(255,214,128,.16), transparent 55%),
    radial-gradient(46% 18% at 50% 96%, rgba(255,214,128,.3), transparent 70%);
  clip-path: polygon(38% 0, 62% 0, 92% 100%, 8% 100%);
  filter: blur(6px);
  pointer-events: none;
}
.sp-cta__inner { position: relative; z-index: 1; }
.sp-cta h2 {
  font-family: var(--sp-display);
  font-weight: 900;
  font-size: clamp(36px, 6.4vw, 76px);
  line-height: 1.14;
  margin: 0 0 30px;
  color: #fff;
}
.sp-cta__acts { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin-bottom: 26px; }
.sp-cta__meta { font-family: var(--sp-cond); font-weight: 500; letter-spacing: .08em; font-size: 14px; color: rgba(250,246,239,.55); margin: 0; }

/* footer stays in the dark */
body.sp .footer { background: #05080F; color: rgba(250,246,239,.8); border-top: 1px solid rgba(250,246,239,.1); }
body.sp .footer a { color: rgba(250,246,239,.8); }
body.sp .footer a:hover { color: var(--sp-gold); }
body.sp .footer h4 { color: #fff; }
body.sp .footer .logo__word b { color: #fff; }
body.sp .footer .logo__word span { color: var(--sp-gold); }
body.sp .footer__bar { background: #03060B; color: rgba(250,246,239,.45); border-top: 1px solid rgba(250,246,239,.06); }

/* ============================================================
   REVEALS + MOTION
   ============================================================ */
[data-sr] { opacity: 0; transform: translateY(26px); }
html.motion [data-sr] { transition: opacity .7s ease var(--d, 0s), transform .7s cubic-bezier(.2,.7,.2,1) var(--d, 0s); }
[data-sr].is-in { opacity: 1; transform: translateY(0) rotate(var(--r, 0deg)); }
html:not(.motion) [data-sr] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .sp-marquee__track, .sp-marquee__bulbs, .sp-stage__beam--l, .sp-stage__beam--r { animation: none; }
  .sp-poster, .sp-ticket, .sp-btn, .sp-pol { transition: none; }
  .sp-run__drape--l { transform: translateX(-101%); }
  .sp-run__drape--r { transform: translateX(101%); }
  html { scroll-behavior: auto; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1080px) {
  .sp-posters { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 880px) {
  .sp-posters { grid-template-columns: repeat(2, 1fr); }
  .sp-tix__grid { grid-template-columns: 1fr; max-width: 430px; }
  .sp-ticket, .sp-voice { transform: none; }
  .sp-voices__grid { grid-template-columns: 1fr; }
  .sp-stats__row { grid-template-columns: repeat(2, 1fr); gap: 18px 10px; }
  .sp-stat:nth-child(3) { border-left: 0; }
  .sp-cue { grid-template-columns: 92px 1fr; }
  .sp-stage__deck { height: clamp(150px, 30vw, 220px); }
  .sp-run__drape { width: 58%; }
}
@media (max-width: 520px) {
  body.sp { font-size: 16px; }
  .sp-h1 { font-size: clamp(42px, 13vw, 56px); }
  .sp-stage__curtain { width: 16px; }
  .sp-stage__cta { flex-direction: column; align-items: stretch; }
  .sp-btn { width: 100%; }
  .sp-posters { grid-template-columns: 1fr; }
  .sp-poster, .sp-poster:hover { transform: none; }
  .sp-pol { width: clamp(130px, 34vw, 170px); }
  .sp-cta__acts .sp-btn { width: 100%; }
  .sp-film__strip img { width: 240px; }
}

/* ============================================================
   AUTO QUOTE — pick a show, get an instant ticket price
   (controls card + ticket-style result card; built by quote.js)
   ============================================================ */
.sp-quote { padding: clamp(72px, 9vw, 116px) 0; background: var(--sp-cream); border-top: 1px solid var(--sp-line); }
.sp-quote__tool {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(18px, 3vw, 34px);
  align-items: start;
  max-width: 1020px;
}
.sp-quote__controls {
  display: grid;
  gap: 16px;
  background: #fff;
  border: 2px solid var(--sp-ink);
  border-radius: 14px;
  box-shadow: 5px 6px 0 rgba(24,33,58,.12);
  padding: clamp(20px, 3vw, 28px);
}
.sp-quote__label {
  display: block;
  font-family: var(--sp-cond);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sp-ink);
  margin-bottom: 6px;
}
.sp-quote__select, .sp-quote__input {
  width: 100%;
  font: inherit;
  font-size: 15.5px;
  color: var(--sp-ink);
  background: #FFFDF8;
  border: 1.5px solid var(--sp-line);
  border-radius: 8px;
  padding: 11px 12px;
}
.sp-quote__select:focus-visible, .sp-quote__input:focus-visible { outline: 3px solid var(--sp-gold); outline-offset: 1px; }
.sp-quote__check { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--sp-ink); cursor: pointer; }
.sp-quote__check input { width: 18px; height: 18px; accent-color: var(--sp-red); flex: none; }

/* result — a big ticket stub */
.sp-quote__result {
  position: relative;
  background: #fff;
  border: 2px solid var(--sp-red);
  border-radius: 14px;
  box-shadow: 5px 6px 0 rgba(230,57,70,.22);
  overflow: hidden;
}
.sp-quote__rhead { display: flex; flex-direction: column; gap: 2px; background: var(--sp-red); color: #fff; padding: 14px 22px; }
.sp-quote__rhead span { font-family: var(--sp-cond); font-weight: 700; font-size: 13px; letter-spacing: .3em; color: var(--sp-gold); }
.sp-quote__rhead b { font-weight: 900; font-size: 19px; }
.sp-quote__breakdown { padding: 18px 22px 4px; }
.sp-quote__resultlabel {
  display: block;
  font-family: var(--sp-cond);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--sp-ink-soft);
}
.sp-quote__price {
  font-family: var(--sp-cond);
  font-weight: 700;
  font-size: clamp(36px, 3.6vw, 46px);
  color: var(--sp-ink);
  line-height: 1.05;
  margin: 4px 0 6px;
}
.sp-quote__price--ask { color: var(--sp-red-deep); font-size: clamp(26px, 3vw, 34px); }
.sp-quote__summary { margin: 0 0 8px; font-size: 14.5px; color: var(--sp-ink-soft); }
.sp-quote__lines { list-style: none; margin: 0 0 8px; padding: 0; }
.sp-quote__lines li { font-size: 13.5px; color: var(--sp-ink); padding: 3px 0 3px 20px; position: relative; }
.sp-quote__lines li::before { content: "★"; position: absolute; left: 0; top: 7px; color: var(--sp-gold-deep); font-size: 11px; }
.sp-quote__warn { margin: 0 0 8px; font-size: 15px; color: var(--sp-ink); }
.sp-quote__warnlink { color: var(--sp-red-deep); font-weight: 700; text-decoration: underline; }
.sp-quote__warnlink:hover { color: var(--sp-red); }
.sp-quote__final { margin: 0; padding: 0 22px 4px; font-size: 12.5px; color: var(--sp-ink-soft); }
.sp-quote__acts { display: flex; flex-wrap: wrap; gap: 10px; padding: 12px 22px 20px; }
.sp-quote__acts .sp-btn { min-height: 46px; padding: 10px 22px; font-size: 15px; }
.sp-quote__tear {
  position: relative;
  border-top: 2px dashed #CFC8B8;
  padding: 10px 22px 12px;
  background: #FFF8E9;
}
.sp-quote__tear::before, .sp-quote__tear::after {
  content: "";
  position: absolute;
  top: -11px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--sp-cream);
  border: 2px solid var(--sp-red);
}
.sp-quote__tear::before { left: -12px; }
.sp-quote__tear::after { right: -12px; }
.sp-quote__tear span { font-family: var(--sp-cond); font-weight: 600; font-size: 12px; letter-spacing: .3em; color: var(--sp-ink-soft); text-transform: uppercase; }

/* lead capture inside the ticket */
.sp-lead { margin: 6px 22px 4px; border-top: 1px solid var(--sp-line); padding-top: 14px; }
.sp-lead__head { margin: 0 0 10px; font-weight: 700; font-size: 14.5px; color: var(--sp-ink); }
.sp-lead__form { display: grid; gap: 10px; }
.sp-lead__label {
  display: block;
  font-family: var(--sp-cond);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .1em;
  color: var(--sp-ink-soft);
  margin-bottom: 4px;
}
.sp-lead__input {
  width: 100%;
  font: inherit;
  font-size: 15px;
  color: var(--sp-ink);
  background: #FFFDF8;
  border: 1.5px solid var(--sp-line);
  border-radius: 8px;
  padding: 9px 11px;
}
.sp-lead__input:focus-visible { outline: 3px solid var(--sp-gold); outline-offset: 1px; }
.sp-lead__input--area { resize: vertical; min-height: 56px; }
.sp-lead__submit { width: 100%; min-height: 46px; font-size: 15px; }
.sp-lead__status { margin: 0; font-size: 14px; min-height: 1em; color: var(--sp-ink-soft); }
.sp-lead__status--error { color: var(--sp-red-deep); font-weight: 700; }
.sp-lead__status--ok { color: #1F7A3D; font-weight: 700; }

@media (max-width: 880px) {
  .sp-quote__tool { grid-template-columns: 1fr; max-width: 560px; }
}

/* ============================================================
   FORMAL QUOTE DOCUMENT — print to PDF (sp-fq, built by quote.js)
   Mirrors the company's official QUOTE template: heading + client,
   Date/Expiry/No. meta, brand block, items table, totals + chop,
   payment + signature, T&Cs, then the founder letter page.
   ============================================================ */
.sp-print-doc { display: none; }
@media print {
  body.sp.sp-printing > *:not(#sp-print-doc) { display: none !important; }
  body.sp.sp-printing #sp-print-doc {
    display: block !important;
    padding: 34px 14px;
    color: #1b1b1b;
    background: #fff;
    font-family: var(--sp-sans);
    font-size: 12.5px; line-height: 1.55;
  }
  #sp-print-doc .sp-fq__top { display: flex; gap: 18px; align-items: flex-start; margin-bottom: 26px; }
  #sp-print-doc .sp-fq__id { flex: 1.2; }
  #sp-print-doc .sp-fq__id h1 { font-size: 34px; font-weight: 700; letter-spacing: .01em; margin: 0 0 14px; }
  #sp-print-doc .sp-fq__client { font-size: 13px; margin: 0; color: #333; }
  #sp-print-doc .sp-fq__meta { flex: 1; }
  #sp-print-doc .sp-fq__meta p { margin: 0 0 12px; }
  #sp-print-doc .sp-fq__meta b { display: block; font-size: 12px; }
  #sp-print-doc .sp-fq__meta span { font-size: 12.5px; color: #222; }
  #sp-print-doc .sp-fq__brand { flex: 1; text-align: right; }
  #sp-print-doc .sp-fq__brand img { width: 110px; height: auto; margin-bottom: 6px; }
  #sp-print-doc .sp-fq__brand b {
    display: block; font-family: var(--sp-cond);
    font-weight: 700; font-size: 15px; letter-spacing: .08em; color: var(--sp-red-deep); margin-bottom: 6px;
  }
  #sp-print-doc .sp-fq__brand address { font-style: normal; font-size: 11.5px; color: #333; line-height: 1.5; }
  #sp-print-doc .sp-fq__items { width: 100%; border-collapse: collapse; margin: 6px 0 0; }
  #sp-print-doc .sp-fq__items th {
    text-align: left; font-size: 12px; font-weight: 700;
    border-top: 1.5px solid #1b1b1b; border-bottom: 1.5px solid #1b1b1b; padding: 7px 6px;
  }
  #sp-print-doc .sp-fq__items th.num, #sp-print-doc .sp-fq__items td.num { text-align: right; white-space: nowrap; }
  #sp-print-doc .sp-fq__items td { vertical-align: top; padding: 12px 6px 14px; border-bottom: 1px solid #cfcfcf; font-size: 12.5px; }
  #sp-print-doc .sp-fq__items td p { margin: 0 0 2px; }
  #sp-print-doc .sp-fq__totrow { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-top: 4px; }
  #sp-print-doc .sp-fq__chop { width: 110px; height: auto; flex: none; margin-left: 6px; }
  #sp-print-doc .sp-fq__totals { width: 46%; margin-left: auto; margin-top: 4px; flex: none; }
  #sp-print-doc .sp-fq__totals p {
    display: flex; justify-content: space-between; margin: 0;
    padding: 7px 6px; border-bottom: 1px solid #cfcfcf; font-size: 12.5px;
  }
  #sp-print-doc .sp-fq__totals p.total { font-weight: 700; border-bottom: 2px solid #1b1b1b; }
  #sp-print-doc .sp-fq__grid { display: flex; gap: 30px; margin: 44px 0 0; }
  #sp-print-doc .sp-fq__pay { flex: 1.3; }
  #sp-print-doc .sp-fq__pay h3 { font-size: 13px; margin: 0 0 8px; }
  #sp-print-doc .sp-fq__pay p { margin: 0 0 3px; font-size: 12px; }
  #sp-print-doc .sp-fq__sign { flex: 1; }
  #sp-print-doc .sp-fq__sign p { margin: 0 0 6px; font-size: 12.5px; }
  #sp-print-doc .sp-fq__sign i { display: block; font-style: normal; border-bottom: 1px solid #555; height: 26px; margin: 0 0 18px; width: 85%; }
  #sp-print-doc .sp-fq__terms { margin-top: 40px; break-before: auto; }
  #sp-print-doc .sp-fq__terms h3 { font-size: 13.5px; margin: 0 0 14px; }
  #sp-print-doc .sp-fq__terms h4 { font-size: 12.5px; margin: 14px 0 4px; }
  #sp-print-doc .sp-fq__terms p { margin: 0; font-size: 11.5px; color: #222; line-height: 1.65; }
  #sp-print-doc .sp-fq__contact {
    font-size: 11px; color: var(--sp-red-deep); margin: 30px 0 0; border-top: 1px solid #cfcfcf; padding-top: 12px;
  }
  /* founder letter — its own page at the end of the quote pack */
  #sp-print-doc .sp-fq__letter {
    break-before: page; page-break-before: always;
    padding-top: 60px; max-width: 620px; margin: 0 auto;
    font-size: 13px; line-height: 1.9; color: #1b1b1b; text-align: left;
  }
  #sp-print-doc .sp-fq__letterlogo { display: block; width: 130px; height: auto; margin: 0 auto 28px; }
  #sp-print-doc .sp-fq__letter p { margin: 0 0 14px; }
  #sp-print-doc .sp-fq__sig { margin-top: 30px; }
  #sp-print-doc .sp-fq__sig b { font-size: 15px; }
}