/* Neon Los Angeles: the logo's yellow glow, joined by magenta and cyan tube light on a night-sky black. */
:root {
  --black: #05030a;
  --panel: #0c0818;
  --cream: #fff6d6;
  --yellow: #ffd400;
  --gold: #b37a00;
  --pink: #ff2bd6;
  --cyan: #19e6ff;
  --orange: #ff7a18;
  --neon: var(--yellow);
  --radius: 10px;
  --display: "Londrina Solid", Impact, sans-serif;
  --marker: "Permanent Marker", "Londrina Solid", cursive;
  --body: "Space Grotesk", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body {
  margin: 0;
  background: var(--black);
  color: var(--cream);
  font-family: var(--body);
  font-size: 18px;
  line-height: 1.5;
}
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--display); font-weight: 900; line-height: 0.95; margin: 0; }
h1 { font-size: clamp(4.5rem, 13vw, 10rem); line-height: 0.82; color: var(--yellow); text-shadow: 0 0 18px var(--yellow), 0 0 60px rgba(255, 212, 0, 0.6); }
h2 { font-size: clamp(2.6rem, 6.5vw, 5rem); text-transform: uppercase; max-width: 16ch; }
h3 { font-size: 2rem; text-transform: uppercase; letter-spacing: 0.02em; }
p { margin: 0; }
code { font-size: 0.9em; background: rgba(255, 255, 255, 0.15); padding: 1px 6px; border-radius: 6px; }
main { overflow-x: clip; }

/* Neon tube edge: set --neon on an element and give it this class of look */
.card, .pkg, .who, .form, .frame, .reel, .name-chip, .btn-outline {
  border: 2px solid var(--neon);
  box-shadow: 0 0 16px color-mix(in srgb, var(--neon) 65%, transparent), inset 0 0 18px color-mix(in srgb, var(--neon) 18%, transparent);
}

/* Hand-written labels and glowing key words */
.marker { font-family: var(--marker); font-size: 1.35rem; color: var(--cyan); text-shadow: 0 0 12px var(--cyan); transform: rotate(-3deg); transform-origin: left; margin-bottom: 14px; }
.marker::before { content: "\25B6\00a0"; font-size: 0.8em; }
.brush { color: var(--pink); text-shadow: 0 0 10px var(--pink), 0 0 34px rgba(255, 43, 214, 0.7); }

/* Nav */
.nav {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 10px clamp(16px, 4vw, 48px);
  background: rgba(5, 3, 10, 0.92);
  border-bottom: 2px solid var(--yellow);
  box-shadow: 0 0 18px rgba(255, 212, 0, 0.55);
}
.brand { display: flex; align-items: center; text-decoration: none; }
.brand img { height: 64px; width: auto; margin: -8px 0; mix-blend-mode: screen; }
.wordmark { font-family: var(--display); font-weight: 900; font-size: 1.9rem; line-height: 1; color: var(--yellow); text-shadow: 0 0 14px var(--yellow); }
.nav-links { display: flex; align-items: center; gap: 26px; font-family: var(--display); font-size: 1.25rem; text-transform: uppercase; letter-spacing: 0.04em; }
.nav-links a { text-decoration: none; }
.nav-links a:not(.btn):hover { color: var(--cyan); text-shadow: 0 0 12px var(--cyan); }
.menu-toggle {
  display: none; font: 900 1.2rem var(--display); text-transform: uppercase; padding: 6px 16px; color: #000;
  background: var(--yellow); border: 0; border-radius: 8px; cursor: pointer; box-shadow: 0 0 14px rgba(255, 212, 0, 0.7);
}

/* Buttons */
.btn {
  display: inline-block; padding: 12px 26px;
  font: 900 1.35rem var(--display); text-transform: uppercase; letter-spacing: 0.04em; text-decoration: none; text-align: center;
  color: #000; background: var(--yellow);
  border: 2px solid var(--yellow); border-radius: 8px; box-shadow: 0 0 18px rgba(255, 212, 0, 0.7);
  cursor: pointer; transition: transform 0.12s, box-shadow 0.12s;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 0 34px var(--yellow); }
.btn:active { transform: translateY(1px); }
.btn-small { padding: 5px 16px; font-size: 1.2rem; }
.btn-outline { --neon: var(--cyan); background: rgba(5, 3, 10, 0.7); color: var(--cyan); text-shadow: 0 0 10px var(--cyan); }
.btn-outline:hover { box-shadow: 0 0 34px var(--cyan); }
.btn-black { background: #000; color: var(--yellow); border-color: #000; box-shadow: 0 6px 0 rgba(0, 0, 0, 0.3); }
.btn-black:hover { box-shadow: 0 8px 0 rgba(0, 0, 0, 0.3); }
.actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.actions.center { justify-content: center; }

/* Bands */
.band { position: relative; overflow: hidden; padding: clamp(64px, 9vw, 120px) clamp(16px, 4vw, 48px); }
/* Alternate bands sit on a faint cyan grid */
.band-panel {
  background-color: var(--panel);
  background-image: linear-gradient(rgba(25, 230, 255, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(25, 230, 255, 0.06) 1px, transparent 1px);
  background-size: 48px 48px;
  border-block: 1px solid rgba(25, 230, 255, 0.25);
}
.inner { position: relative; max-width: 1184px; margin: 0 auto; }
.section-lede { margin-top: 16px; font-size: 1.15rem; }

/* Hero: the neon sign centered over real Los Angeles photographs.
   Back to front: palm trees at dusk, a purple tint, the Hollywood hills silhouette at lower left,
   then dark fades at the center, top and bottom so the sign and text stay readable. */
.hero {
  position: relative; min-height: min(880px, 94vh); text-align: center;
  display: grid; place-items: center;
  padding: clamp(40px, 6vw, 80px) clamp(16px, 4vw, 48px);
  background:
    url("assets/hero-hollywood.png") left bottom / min(36%, 480px) auto no-repeat,
    linear-gradient(to bottom, rgba(5, 3, 10, 0.7), rgba(5, 3, 10, 0) 22%, rgba(5, 3, 10, 0) 80%, #05030a),
    radial-gradient(ellipse 34% 60% at 50% 44%, rgba(5, 3, 10, 0.92), rgba(5, 3, 10, 0.5) 70%, transparent),
    linear-gradient(rgba(36, 6, 84, 0.5), rgba(36, 6, 84, 0.5)),
    url("assets/palms-dusk.jpg") center 58% / cover no-repeat,
    var(--black);
}
/* Screen blending drops the black background of the neon sign video so only the glow shows.
   For that to work, the elements around the logo must not be transformed or layered. */
.hero-video { display: block; width: min(86vw, 500px); aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 36%; margin: 0 auto -4%; mix-blend-mode: screen; -webkit-mask-image: linear-gradient(#000 82%, transparent); mask-image: linear-gradient(#000 82%, transparent); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sub { margin-top: 10px; font: 900 2rem var(--display); text-transform: uppercase; letter-spacing: 0.3em; color: var(--cyan); text-shadow: 0 0 14px var(--cyan); }
.lede { margin: 10px auto 0; font-size: 1.25rem; font-weight: 500; max-width: 44ch; color: #ffe27a; text-shadow: 0 0 14px rgba(255, 212, 0, 0.45), 0 2px 10px #000; }
.neon-sign {
  position: absolute; left: clamp(16px, 5vw, 80px); top: 120px; padding: 10px 22px;
  font: 400 clamp(1.4rem, 2.6vw, 2.2rem)/1.1 var(--marker); color: var(--yellow); text-align: center;
  text-shadow: 0 0 8px var(--yellow), 0 0 22px rgba(255, 212, 0, 0.8);
  border: 3px solid var(--pink); border-radius: 16px; transform: rotate(-7deg);
  background: radial-gradient(closest-side, rgba(150, 40, 255, 0.55), rgba(150, 40, 255, 0.12));
  box-shadow: 0 0 18px var(--pink), 0 0 70px 22px rgba(150, 40, 255, 0.65), inset 0 0 18px rgba(255, 43, 214, 0.5);
}

/* Est. 2025 badge and the follow-us row under the header buttons */
.est {
  display: inline-block; margin: 10px auto 0; padding: 2px 16px;
  font: 400 1.05rem var(--marker); color: var(--pink); text-shadow: 0 0 10px var(--pink);
  border: 2px solid var(--pink); border-radius: 999px; box-shadow: 0 0 14px rgba(255, 43, 214, 0.6);
}
.follow-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 12px; margin-top: 22px; }
.follow-label { font: 400 1.2rem var(--marker); color: var(--cyan); text-shadow: 0 0 10px var(--cyan); margin-right: 4px; }
.social-chip {
  --neon: var(--yellow);
  padding: 6px 16px; font: 900 1.05rem var(--display); text-transform: uppercase; letter-spacing: 0.06em; text-decoration: none;
  color: var(--neon); background: rgba(5, 3, 10, 0.75); border: 2px solid var(--neon); border-radius: 999px;
  box-shadow: 0 0 12px color-mix(in srgb, var(--neon) 60%, transparent); transition: background 0.12s, color 0.12s;
}
.chip-ig { --neon: var(--pink); }
.chip-tt { --neon: var(--cyan); }
.social-chip:hover { background: var(--neon); color: #000; }

/* Video frames */
.frame { --neon: var(--yellow); border-radius: var(--radius); overflow: hidden; background: #000; }
.frame-video { aspect-ratio: 16 / 9; }
.frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.placeholder {
  height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: 20px; text-align: center; font-size: 0.95rem;
}
.placeholder strong { font: 900 clamp(1.4rem, 4vw, 2.2rem) var(--display); text-transform: uppercase; color: var(--yellow); }
.featured { max-width: 880px; margin-top: 44px; }

/* Ticker */
.ticker { position: relative; overflow: hidden; background: #000; color: var(--yellow); border-block: 2px solid var(--pink); box-shadow: 0 0 22px rgba(255, 43, 214, 0.7); }
.ticker-track { display: flex; width: max-content; animation: ticker 22s linear infinite; }
.ticker span { font: 900 2rem var(--display); text-transform: uppercase; letter-spacing: 0.04em; padding: 8px 0; white-space: nowrap; text-shadow: 0 0 14px rgba(255, 212, 0, 0.8); }
.ticker span::after { content: "\25B6"; margin: 0 26px; font-size: 1.1rem; vertical-align: middle; color: var(--cyan); text-shadow: 0 0 12px var(--cyan); }
@keyframes ticker { to { transform: translateX(-50%); } }

/* Numbers strip */
.stats { padding: 64px clamp(16px, 4vw, 48px) 8px; text-align: center; }
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; max-width: 1184px; margin: 0 auto; }
.stats-grid > div { --neon: var(--yellow); }
.stats-grid > div:nth-child(2) { --neon: var(--pink); }
.stats-grid > div:nth-child(3) { --neon: var(--cyan); }
.stats strong { display: block; font: 900 clamp(3.2rem, 8vw, 6rem)/1 var(--display); color: var(--neon); text-shadow: 0 0 16px var(--neon), 0 0 50px color-mix(in srgb, var(--neon) 60%, transparent); }
.stats span { display: block; margin-top: 8px; font: 900 1.25rem/1.15 var(--display); text-transform: uppercase; letter-spacing: 0.04em; }
.stats-note { margin-top: 22px; font-size: 0.85rem; opacity: 0.7; }

/* Service cards: neon cycles yellow, pink, cyan */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 48px; }
.card { padding: 24px 26px 28px; background: rgba(255, 255, 255, 0.03); border-radius: var(--radius); transition: transform 0.15s; }
.card:nth-child(3n + 2), .pkg:nth-child(3n + 2), .name-chip:nth-child(3n + 2) { --neon: var(--pink); }
.card:nth-child(3n), .pkg:nth-child(3n), .name-chip:nth-child(3n) { --neon: var(--cyan); }
.card:hover { transform: translateY(-4px); }
/* The newest service runs full width under the others */
.card.card-wide { grid-column: 1 / -1; --neon: var(--yellow); background: rgba(255, 212, 0, 0.07); }
.card-wide p { max-width: 70ch; }
.card h3 { color: var(--neon); text-shadow: 0 0 12px color-mix(in srgb, var(--neon) 70%, transparent); }
.card p { margin-top: 10px; }
.num { display: block; font-family: var(--marker); font-size: 1.6rem; color: var(--neon); margin-bottom: 22px; }

/* Reviews */
.review-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; }
.review { --neon: var(--yellow); margin: 0; padding: 22px; background: rgba(5, 3, 10, 0.85); border: 2px solid var(--neon); border-radius: var(--radius); box-shadow: 0 0 16px color-mix(in srgb, var(--neon) 55%, transparent); }
.review:nth-child(3n + 2) { --neon: var(--pink); }
.review:nth-child(3n) { --neon: var(--cyan); }
.review-stars { color: var(--yellow); font-size: 1.3rem; letter-spacing: 0.1em; text-shadow: 0 0 10px rgba(255, 212, 0, 0.7); }
.review blockquote { margin: 12px 0; font-size: 1.1rem; }
.review figcaption { font: 900 1.1rem var(--display); text-transform: uppercase; color: var(--neon); }
.review-form { margin-top: 40px; max-width: 760px; }
.stars { border: 0; padding: 0; margin: 0; }
.stars legend { font: 900 1.15rem var(--display); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; }
.star-row { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; }
.star-row input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.star-row label { font-size: 2.2rem; line-height: 1; color: #3a3352; cursor: pointer; transition: color 0.1s; }
.star-row input:checked ~ label, .star-row label:hover, .star-row label:hover ~ label { color: var(--yellow); text-shadow: 0 0 12px rgba(255, 212, 0, 0.8); }
.star-row input:focus-visible + label { outline: 2px solid var(--cyan); outline-offset: 2px; }
.form .check { display: flex; gap: 10px; align-items: flex-start; font: 400 1rem var(--body); text-transform: none; letter-spacing: 0; }
.form .check input { width: auto; margin-top: 4px; }

/* Packages */
.packages { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; margin-top: 48px; }
.pkg { display: flex; flex-direction: column; gap: 10px; padding: 20px 18px; background: rgba(5, 3, 10, 0.85); border-radius: var(--radius); }
.pkg h3 { font-size: 1.7rem; }
.pkg .price { font: 900 2.8rem/1 var(--display); color: var(--neon); text-shadow: 0 0 14px color-mix(in srgb, var(--neon) 70%, transparent); }
.pkg .price small { display: block; font: 400 0.95rem var(--marker); color: var(--cream); text-shadow: none; margin-bottom: 2px; }
.pkg .btn { margin-top: auto; align-self: flex-start; }
.pkg.pkg-hot { --neon: var(--yellow); background: var(--yellow); color: #000; box-shadow: 0 0 34px var(--yellow); }
.pkg-hot .price, .pkg-hot .price small { color: #000; text-shadow: none; }
.pkg-hot .btn { background: #000; color: var(--yellow); border-color: #000; box-shadow: none; }
.pkg-custom { border-style: dashed; }
.terms { margin-top: 28px; font-size: 0.95rem; opacity: 0.85; max-width: 70ch; }

/* In the field: wall of names */
.names { display: flex; flex-wrap: wrap; gap: 16px 18px; margin-top: 40px; }
.name-chip {
  padding: 6px 18px; font: 900 clamp(1.5rem, 3.4vw, 2.4rem)/1.1 var(--display); text-transform: uppercase; letter-spacing: 0.02em; text-decoration: none;
  color: var(--neon); text-shadow: 0 0 12px color-mix(in srgb, var(--neon) 70%, transparent); background: rgba(5, 3, 10, 0.8); border-radius: 8px; transition: transform 0.12s, background 0.12s, color 0.12s;
}
.name-chip:hover { transform: scale(1.06); background: var(--neon); color: #000; text-shadow: none; }
.name-chip:nth-child(3n+2) { --neon: var(--pink); }
.name-chip:nth-child(3n) { --neon: var(--cyan); }

/* In the field: big screen with clip picker, names scrolling underneath */
.stage { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); gap: 16px; margin-top: 40px; }
.stage-screen { --neon: var(--yellow); position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius); background: #000; border: 3px solid var(--neon); box-shadow: 0 0 22px var(--neon), 0 0 70px rgba(255, 212, 0, 0.35), inset 0 0 24px rgba(255, 212, 0, 0.25); }
.stage-screen video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.stage-badge { position: absolute; top: 14px; left: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; border-radius: 999px; background: rgba(5, 3, 10, 0.8); border: 2px solid #ff2d2d; color: #fff; font: 900 0.95rem var(--display); text-transform: uppercase; letter-spacing: 0.08em; box-shadow: 0 0 14px rgba(255, 45, 45, 0.7); }
.stage-badge::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #ff2d2d; box-shadow: 0 0 10px #ff2d2d; animation: blink 1.2s ease-in-out infinite; }
@keyframes blink { 50% { opacity: 0.25; } }
.stage-sound { position: absolute; top: 14px; right: 14px; padding: 6px 14px; border-radius: 999px; border: 2px solid var(--cyan); background: rgba(5, 3, 10, 0.8); color: var(--cyan); font: 700 0.85rem var(--body); cursor: pointer; box-shadow: 0 0 12px rgba(25, 230, 255, 0.6); }
.stage-sound[aria-pressed="true"] { background: var(--cyan); color: #000; }
.stage-cap { position: absolute; inset: auto 0 0 0; display: grid; gap: 4px; padding: 60px 20px 16px; text-decoration: none; background: linear-gradient(transparent, rgba(5, 3, 10, 0.95)); }
.stage-cap strong { font: 900 clamp(1.8rem, 4vw, 3.2rem)/0.95 var(--display); text-transform: uppercase; color: var(--yellow); text-shadow: 0 0 14px rgba(255, 212, 0, 0.8); }
.stage-cap span { font-size: 1rem; color: var(--cream); }
.stage-cap em { font-style: normal; font-weight: 700; font-size: 0.9rem; color: var(--pink); text-shadow: 0 0 10px var(--pink); }
.stage-cap:hover em { text-decoration: underline; }
.stage-picks { display: grid; grid-template-rows: repeat(4, 1fr); gap: 12px; }
.stage-pick { --neon: var(--pink); position: relative; overflow: hidden; padding: 0; border-radius: var(--radius); border: 2px solid var(--neon); background: #000; cursor: pointer; opacity: 0.6; transition: opacity 0.15s, transform 0.15s, box-shadow 0.15s; }
.stage-pick:nth-child(even) { --neon: var(--cyan); }
.stage-pick video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.stage-pick span { position: absolute; inset: auto 0 0 0; padding: 18px 10px 6px; text-align: left; font: 900 1.05rem/1 var(--display); text-transform: uppercase; color: var(--cream); background: linear-gradient(transparent, rgba(5, 3, 10, 0.9)); }
.stage-pick:hover { opacity: 0.9; transform: translateX(-3px); }
.stage-pick[aria-pressed="true"] { opacity: 1; box-shadow: 0 0 18px var(--neon); }
.stage-pick[aria-pressed="true"] span { color: var(--neon); }
.name-marquee { position: relative; overflow: hidden; margin-top: 36px; padding: 14px 0; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.name-marquee-track { display: flex; gap: 18px; width: max-content; animation: ticker 40s linear infinite; }
.name-marquee:hover .name-marquee-track, .name-marquee:focus-within .name-marquee-track { animation-play-state: paused; }
.name-marquee .name-chip { white-space: nowrap; }

/* Watch */
.reels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 44px; }
.reel { --neon: var(--pink); aspect-ratio: 9 / 16; border-radius: var(--radius); overflow: hidden; background: #fff; }
.reel iframe { width: 100%; height: 100%; border: 0; }
.videos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 44px; }
.videos:empty { display: none; }
.videos .frame { --neon: var(--cyan); aspect-ratio: 16 / 9; }
.videos .frame:nth-child(3n+2) { --neon: var(--pink); }
.videos .frame:nth-child(3n) { --neon: var(--yellow); }
.video-thumb { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: #000; cursor: pointer; color: inherit; }
.video-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease, filter 0.3s ease; filter: saturate(1.1) brightness(0.85); }
.video-thumb::before { content: ""; position: absolute; z-index: 1; top: 50%; left: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; border: 3px solid var(--neon); background: rgba(5, 3, 10, 0.7); box-shadow: 0 0 18px var(--neon); }
.video-thumb::after { content: ""; position: absolute; z-index: 1; top: 50%; left: 50%; margin: -11px 0 0 -6px; border-style: solid; border-width: 11px 0 11px 18px; border-color: transparent transparent transparent var(--neon); }
.video-thumb:hover img { transform: scale(1.05); filter: saturate(1.2) brightness(1); }
.video-title { position: absolute; inset: auto 0 0 0; padding: 40px 14px 12px; text-align: left; font: 900 1.25rem/1 var(--display); text-transform: uppercase; color: var(--cream); background: linear-gradient(transparent, rgba(5, 3, 10, 0.95)); }
#clips .actions { margin-top: 44px; }

/* About */
.about { display: grid; grid-template-columns: 1.1fr 1fr; gap: 44px; margin-top: 48px; align-items: center; }
.about-text h3 { color: var(--yellow); text-shadow: 0 0 12px rgba(255, 212, 0, 0.7); margin-bottom: 14px; }
.about-text p { font-size: 1.25rem; }
.about-text p + p { margin-top: 16px; }
.about .neon { width: min(100%, 440px); justify-self: center; mix-blend-mode: screen; }

/* Booking */
.book { display: grid; grid-template-columns: 1fr 1.2fr; gap: 36px; margin-top: 48px; align-items: start; }
.book-who { display: grid; gap: 28px; }
.who { --neon: var(--pink); padding: 26px; background: rgba(5, 3, 10, 0.85); border-radius: var(--radius); }
.who-fill { --neon: var(--yellow); }
.who h3 { color: var(--neon); text-shadow: 0 0 12px color-mix(in srgb, var(--neon) 70%, transparent); }
.who p { margin-top: 10px; }
.form {
  --neon: var(--cyan);
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  padding: 28px; background: rgba(5, 3, 10, 0.9); border-radius: var(--radius);
}
.form label { display: grid; gap: 6px; font: 900 1.15rem var(--display); text-transform: uppercase; letter-spacing: 0.04em; }
.form .full { grid-column: 1 / -1; }
.form input, .form select, .form textarea {
  width: 100%; padding: 12px 14px; font: 400 1rem var(--body); color: var(--cream);
  background: var(--panel); border: 2px solid #3a3352; border-radius: 8px;
}
.form input:focus, .form select:focus, .form textarea:focus { outline: 0; border-color: var(--pink); box-shadow: 0 0 16px rgba(255, 43, 214, 0.7); }
.form-note { font-size: 0.95rem; min-height: 1.4em; color: var(--yellow); }

/* Follow: sunset band */
.follow { text-align: center; color: #000; background: linear-gradient(120deg, var(--yellow), var(--orange) 50%, var(--pink)); }
.follow h2 { max-width: none; font-size: clamp(3rem, 9vw, 7rem); }
.follow p { margin-top: 18px; font-size: 1.25rem; font-weight: 700; }
.eq { display: flex; justify-content: center; align-items: flex-end; gap: 7px; height: 64px; margin-bottom: 26px; }
.eq i { width: 12px; height: 100%; background: #000; border-radius: 4px; transform-origin: bottom; animation: eq 0.9s ease-in-out infinite alternate; }
.eq i:nth-child(2) { animation-delay: -0.3s; } .eq i:nth-child(3) { animation-delay: -0.6s; }
.eq i:nth-child(4) { animation-delay: -0.15s; } .eq i:nth-child(5) { animation-delay: -0.75s; }
.eq i:nth-child(6) { animation-delay: -0.45s; } .eq i:nth-child(7) { animation-delay: -0.2s; }
@keyframes eq { from { transform: scaleY(0.2); } to { transform: scaleY(1); } }

.footer {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  padding: 28px clamp(16px, 4vw, 48px); background: #000; font-size: 0.95rem;
}
.footer-links { display: flex; flex-wrap: wrap; gap: 20px; }
.footer a:hover { color: var(--cyan); }

@media (max-width: 900px) {
  .book, .about { grid-template-columns: 1fr; }
  .cards, .packages { grid-template-columns: repeat(2, 1fr); }
  .review-list { grid-template-columns: 1fr; }
  .reels { grid-template-columns: repeat(2, 1fr); }
  .videos { grid-template-columns: 1fr; }
  .stage { grid-template-columns: 1fr; }
  .stage-picks { grid-template-rows: none; grid-template-columns: repeat(4, 1fr); }
  .stage-pick { aspect-ratio: 16 / 10; }
  .stage-pick:hover { transform: translateY(-3px); }
  /* On narrow screens the scene shrinks to sit under the text, and the sign moves above the logo. */
  .hero { min-height: 0; display: block; padding-bottom: 240px; background-size: 90% auto, auto, auto, auto, cover, auto; }
  .neon-sign { position: static; display: inline-block; margin-bottom: 8px; transform: rotate(-4deg); }
  .menu-toggle { display: block; }
  .nav-links {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0; text-align: center;
    background: #000; border-bottom: 2px solid var(--yellow); padding: 8px 16px 20px;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 10px; }
  .brand img { height: 54px; }
}
@media (max-width: 560px) {
  body { font-size: 17px; }
  .cards, .form, .packages { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr; }
  .actions .btn { flex: 1 1 100%; }
  .stage-picks { grid-template-columns: repeat(2, 1fr); }
  .stage-badge { top: 10px; left: 10px; font-size: 0.8rem; }
  .stage-sound { top: 10px; right: 10px; }
  .stage-cap { padding: 40px 14px 12px; }
  .stage-cap span { font-size: 0.85rem; }
  .sub { letter-spacing: 0.18em; }
}
@media (prefers-reduced-motion: reduce) {
  .ticker-track, .eq i, .stage-badge::before { animation: none; }
  .name-marquee { mask-image: none; }
  .name-marquee-track { animation: none; flex-wrap: wrap; width: auto; }
  .name-marquee-track [aria-hidden="true"] { display: none; }
  html { scroll-behavior: auto; }
}

/* Coverage page: one story per row, video beside the write-up. */
.story-index { display: flex; flex-wrap: wrap; gap: 10px 14px; margin-top: 32px; }
.story-index a { font-weight: 700; text-decoration: none; padding: 4px 12px; border: 1px solid rgba(255, 246, 214, 0.25); border-radius: 999px; }
.story-index a:hover { border-color: var(--yellow); color: var(--yellow); }
.stories { display: grid; gap: clamp(48px, 7vw, 80px); }
.story { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); align-items: center; scroll-margin-top: 100px; }
.story-reel { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); }
.story-media { width: 100%; }
.story-text { display: grid; gap: 14px; min-width: 0; }
.story-text h3 { font-size: clamp(1.7rem, 3vw, 2.3rem); color: var(--yellow); text-shadow: 0 0 12px rgba(255, 212, 0, 0.5); }
.story-meta { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; font-size: 0.9rem; color: rgba(255, 246, 214, 0.75); }
.story-tag { font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.78rem; color: var(--cyan); }
.story-credit { font-size: 0.9rem; color: rgba(255, 246, 214, 0.7); }
.story-link { font-weight: 700; color: var(--pink); text-decoration: none; }
.story-link::after { content: " \2192"; }
.story-link:hover { text-decoration: underline; }
.more-field h3 { font-size: 1.8rem; color: var(--cyan); }
.more-field ul { list-style: none; padding: 0; margin: 18px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px 24px; }
.more-field a { font-weight: 700; }
.more-field time { display: block; font-size: 0.85rem; color: rgba(255, 246, 214, 0.65); }
.team { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; margin-top: 44px; }
.team-member { display: grid; gap: 8px; padding: 24px 26px; border: 1px solid rgba(255, 246, 214, 0.15); border-radius: var(--radius); }
.team-member h3 { font-size: 1.9rem; }
.team-member .aka { display: block; font-family: var(--marker); font-size: 1.1rem; text-transform: none; color: var(--pink); margin-top: 6px; }
.team-role { font-weight: 700; color: var(--cyan); }
.press-contact { display: grid; gap: 8px; margin-top: 40px; max-width: 70ch; }
.press-contact h3 { font-size: 1.6rem; color: var(--yellow); }
.press-contact a { color: var(--yellow); }
.coverage-link { margin-top: 32px; }
@media (max-width: 900px) {
  .story, .story-reel { grid-template-columns: 1fr; }
  .story-reel .story-media { max-width: 320px; }
  .team { grid-template-columns: 1fr; }
}

/* Mic Drops: a stage-lit band for live performances. */
.band-stage {
  background:
    radial-gradient(ellipse 60% 55% at 50% 0%, rgba(255, 43, 214, 0.22), transparent 70%),
    radial-gradient(ellipse 40% 40% at 15% 100%, rgba(25, 230, 255, 0.12), transparent 70%),
    var(--black);
  border-top: 2px solid var(--pink);
  border-bottom: 2px solid var(--pink);
}
.performances { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin: 44px 0 0; }
.performance { margin: 0; display: grid; gap: 14px; }
.performance .frame { --neon: var(--pink); }
.performance figcaption { display: grid; gap: 2px; }
.performance figcaption strong { font-family: var(--display); font-size: 1.7rem; text-transform: uppercase; color: var(--yellow); line-height: 1; }
.performance figcaption span { color: rgba(255, 246, 214, 0.8); }
@media (max-width: 900px) {
  .performances { grid-template-columns: 1fr; }
}
.wall-title { margin-top: 56px; font-size: clamp(1.8rem, 3.5vw, 2.6rem); color: var(--pink); text-shadow: 0 0 14px rgba(255, 43, 214, 0.6); }
#performance-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; margin-top: 24px; }
.wall-tile { display: grid; gap: 8px; text-decoration: none; }
.wall-tile img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; border: 2px solid rgba(255, 43, 214, 0.35); transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s; }
.wall-tile span { font-weight: 700; font-size: 0.95rem; line-height: 1.2; }
.wall-tile:hover img, .wall-tile:focus-visible img { transform: scale(1.04); border-color: var(--pink); box-shadow: 0 0 18px rgba(255, 43, 214, 0.6); }
.wall-tile:hover span { color: var(--yellow); }
@media (max-width: 560px) { #performance-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Red Carpet Chronicles: a wall of short muted loops that plays first on the coverage page. */
.red-carpet { padding-top: clamp(40px, 6vw, 72px); background: radial-gradient(ellipse at 50% 0%, rgba(255, 43, 214, 0.18), transparent 60%), var(--black); }
.red-carpet h2 { max-width: none; }
.carpet-wall { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 32px; }
.carpet-tile { --neon: var(--yellow); position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius); border: 2px solid var(--neon); box-shadow: 0 0 14px color-mix(in srgb, var(--neon) 55%, transparent); background: #000; text-decoration: none; }
.carpet-tile:nth-child(3n+2) { --neon: var(--pink); }
.carpet-tile:nth-child(3n) { --neon: var(--cyan); }
.carpet-feature { grid-column: span 2; grid-row: span 2; }
.carpet-wide { grid-column: span 2; aspect-ratio: auto; }
.carpet-tile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.carpet-tile video.tall { object-position: 50% 30%; }
.carpet-wide video { object-position: 50% 22%; }
.carpet-tile:hover video { transform: scale(1.04); }
.carpet-cap { position: absolute; inset: auto 0 0 0; display: grid; gap: 2px; padding: 28px 12px 10px; font-size: 0.85rem; line-height: 1.3; color: rgba(255, 246, 214, 0.85); background: linear-gradient(transparent, rgba(5, 3, 10, 0.92)); }
.carpet-cap strong { font-family: var(--display); font-size: 1.25rem; text-transform: uppercase; letter-spacing: 0.02em; color: var(--yellow); }
.carpet-feature .carpet-cap strong { font-size: clamp(1.4rem, 2.6vw, 2rem); }
.carpet-cap::after { content: "Watch the reel \2192"; font-weight: 700; font-size: 0.78rem; color: var(--pink); margin-top: 2px; }
@media (max-width: 900px) {
  .carpet-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .carpet-feature { grid-column: span 2; grid-row: auto; }
  .carpet-wide { grid-column: auto; aspect-ratio: 16 / 9; }
}
@media (max-width: 520px) {
  .carpet-tile:not(.carpet-feature) { aspect-ratio: 3 / 4; }
  .carpet-wide { aspect-ratio: 3 / 4; }
  .carpet-cap { font-size: 0.75rem; padding: 22px 8px 8px; }
  .carpet-cap strong { font-size: 1rem; }
  .carpet-cap::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .carpet-tile video { transition: none; }
}