/* =========================================================
   PulseSound - main styles
   Black and red. Display: Anton | Body: Inter | RTL: Tajawal
   Theme tokens live on :root (dark, the default) and are
   redefined for light mode in dark-mode.css.
   Breakpoints: Mobile 320-767 | Tablet 768-1024 | Large 1025-1280 | XL 1281+
   ========================================================= */

:root {
  color-scheme: dark;
  --red: #e10f0f;
  --red-deep: #9e0a0a;
  --red-glow: rgba(225, 15, 15, .35);
  --black: #000000;
  --white: #ffffff;
  --bg: #000000;
  --bg-2: #0c0c0c;
  --surface: #121212;
  --surface-2: #1b1b1b;
  --panel: #f2f0ec;
  --panel-text: #000000;
  --text: #ffffff;
  --muted: #a3a3a3;
  --line: #262626;
  --focus: #0a84ff;

  --nav-h: 76px;
  --container: 1280px;
  --radius: 22px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Anton', 'Impact', 'Arial Narrow', sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-h);
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.6;
  background: var(--bg);
  color: var(--text);
  overflow-x: clip;
  transition: background-color .3s ease, color .3s ease;
}

img,
svg {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: .95;
  margin: 0 0 .4em;
  text-transform: uppercase;
}

p {
  margin: 0 0 1em;
}

ul {
  margin: 0;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.container {
  width: min(100% - 2rem, var(--container));
  margin-inline: auto;
}

.section {
  padding: clamp(4.5rem, 9vw, 7.5rem) 0;
  position: relative;
}

.section-2 {
  background: var(--bg-2);
}

.kicker {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  color: var(--red);
  font-weight: 700;
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .22em;
  margin-bottom: 1rem;
}

.kicker::before {
  content: "";
  width: 34px;
  height: 2px;
  background: currentColor;
}

.section-title {
  font-size: clamp(3rem, 7.5vw, 6.2rem);
  margin-bottom: 1.25rem;
}

.section-title .red {
  color: var(--red);
}

.red {
  color: var(--red);
}

.lead {
  color: var(--muted);
  font-size: 1.05rem;
  max-width: 560px;
  margin: 0;
}

.section-head {
  max-width: 780px;
  margin-bottom: clamp(2.25rem, 5vw, 3.5rem);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .95rem 1.8rem;
  border: 2px solid transparent;
  border-radius: 999px;
  font-family: var(--font);
  font-size: .85rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s var(--ease), box-shadow .25s ease;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn-primary {
  background: var(--red);
  color: var(--white);
  box-shadow: 0 12px 26px -12px var(--red-glow);
}

.btn-primary:hover {
  background: var(--text);
  color: var(--bg);
  box-shadow: none;
}

.btn-outline {
  background: transparent;
  color: var(--text);
  border-color: currentColor;
}

.btn-outline:hover {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
}

.btn-black {
  background: var(--black);
  color: var(--white);
}

.btn-black:hover {
  background: var(--red);
  color: var(--white);
}

.btn-sm {
  padding: .7rem 1.1rem;
  font-size: .76rem;
}

.btn-block {
  width: 100%;
}

.icon-btn {
  width: 44px;
  height: 44px;
  border: 2px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: .95rem;
  flex-shrink: 0;
  transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}

.icon-btn:hover {
  border-color: var(--red);
  color: var(--red);
}

.dir-toggle {
  height: 44px;
  min-width: 56px;
  padding: 0 .9rem;
  border-radius: 999px;
  cursor: pointer;
  flex-shrink: 0;
  background: transparent;
  color: var(--text);
  border: 2px solid var(--line);
  font-family: var(--font);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .12em;
  line-height: 1;
  transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}

.dir-toggle:hover,
.dir-toggle:focus-visible {
  border-color: var(--red);
  color: var(--red);
}

/* ---------- Header (sticky, always) ---------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  transform: translateZ(0);
  background: rgba(0, 0, 0, .82);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease, background-color .3s ease;
}

.site-header.scrolled {
  border-color: rgba(225, 15, 15, .55);
}

.scroll-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, var(--red), #ff6a4d);
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
}

.navbar {
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 1.5rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  white-space: nowrap;
}

.brand img {
  width: 38px;
  height: 38px;
  border-radius: 8px;
}

.nav-links {
  display: none;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: clamp(1.1rem, 2.2vw, 2rem);
}

.nav-links a {
  text-decoration: none;
  font-size: .76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--text);
  position: relative;
  padding: .3rem 0;
  white-space: nowrap;
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 2px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}

.nav-links a:hover::after,
.nav-links a.active::after {
  transform: scaleX(1);
}

[dir="rtl"] .nav-links a::after {
  transform-origin: right;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.nav-cta {
  display: none;
}

.menu-toggle {
  display: grid;
}

/* Page scroll lock while the mobile menu is open (set on <html> so the sticky header keeps working) */
html.menu-open {
  overflow: hidden;
}

.nav-links.open {
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--bg);
  padding: .5rem 1rem 1.25rem;
  border-top: 2px solid var(--red);
  gap: 0;
  max-height: calc(100svh - var(--nav-h));
  overflow-y: auto;
}

.nav-links.open a {
  display: block;
  padding: 1rem 0;
  border-bottom: 1px solid var(--line);
  font-size: .95rem;
}

/* =========================================================
   HERO (kept exactly as approved: "Summer Days" layout)
   ========================================================= */
/* =========================================================
   HERO (reference: "Summer Days" layout)
   ========================================================= */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  background: #000000;
  color: var(--white);
  overflow-x: clip;
  padding-top: var(--nav-h);
  display: flex;
  flex-direction: column;
}

.waves {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.waves svg {
  width: 100%;
  height: 100%;
}

.waves .w {
  transform-origin: center;
  animation: drift 14s ease-in-out infinite alternate;
}

.waves .w2 {
  animation-duration: 18s;
  animation-direction: alternate-reverse;
}

.waves .w3 {
  animation-duration: 11s;
}

.waves .w4 {
  animation-duration: 16s;
  animation-direction: alternate-reverse;
}

@keyframes drift {
  from {
    transform: translateX(-2.5%);
  }

  to {
    transform: translateX(2.5%);
  }
}

.hero-inner {
  position: relative;
  z-index: 1;
  flex: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
  width: min(100% - 2rem, var(--container));
  margin-inline: auto;
  padding: 2.5rem 0 3rem;
}

.hero-left .hero-label {
  display: block;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .22em;
  color: rgba(255, 255, 255, .7);
  margin-bottom: .75rem;
}

.hero-title {
  font-size: clamp(4rem, 11vw, 9.5rem);
  line-height: .98;
  margin: 0;
  letter-spacing: -.005em;
}

.hero-title .line {
  display: block;
}

.hero-sub {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1.25rem 0 .5rem;
}

.hero-sub p {
  margin: 0;
  font-size: .9rem;
  color: rgba(255, 255, 255, .8);
  max-width: 220px;
  line-height: 1.4;
}

.squiggle {
  width: 80px;
  height: 20px;
  margin: 1.25rem 0 .5rem;
}

.hero-artist {
  font-family: var(--font-display);
  font-size: 1.6rem;
  text-transform: uppercase;
  margin: 0;
}

.hero-artist small {
  display: block;
  font-family: var(--font);
  font-size: .7rem;
  letter-spacing: .2em;
  color: rgba(255, 255, 255, .65);
  margin-top: .2rem;
}

.hero-social {
  display: flex;
  gap: .6rem;
  margin-top: 2rem;
}

.hero-social a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  display: grid;
  place-items: center;
  color: var(--white);
  text-decoration: none;
  font-size: .9rem;
}

.hero-social a:hover {
  background: var(--red);
}

/* Center: vinyl and transport */
.hero-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.vinyl {
  position: relative;
  width: clamp(240px, 28vw, 400px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: repeating-radial-gradient(circle at center, #1a1a1a 0 2px, #3a3a3a 2px 3px);
  box-shadow:
    0 0 0 10px #1f1f1f,
    0 0 0 11px #3d3d3d,
    0 0 90px rgba(225, 15, 15, .45),
    0 30px 70px rgba(0, 0, 0, .8);
  animation: spin 7s linear infinite;
}

.vinyl::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 25deg, transparent 0 8%, rgba(255, 255, 255, .22) 13%, transparent 21% 58%, rgba(255, 255, 255, .16) 64%, transparent 72%);
  pointer-events: none;
}

.vinyl .label {
  position: absolute;
  inset: 33%;
  border-radius: 50%;
  background: var(--red);
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 4px #000000;
}

.vinyl .label span {
  position: relative;
  z-index: 2;
  color: var(--white);
  font-family: var(--font-display);
  font-size: clamp(.9rem, 2vw, 1.5rem);
  letter-spacing: .05em;
}

.vinyl .label::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: #000;
  z-index: 1;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.hero.paused .vinyl,
.hero.paused .waves .w {
  animation-play-state: paused;
}

.transport {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.5rem;
}

.t-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .8);
  background: transparent;
  color: var(--white);
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: .9rem;
}

.t-btn:hover {
  border-color: var(--red);
  color: var(--red);
}

.t-btn.play {
  width: 60px;
  height: 60px;
  background: var(--red);
  border-color: var(--red);
}

.t-btn.play:hover {
  background: var(--white);
  border-color: var(--white);
  color: var(--red);
}

.now {
  margin: 1.25rem 0 1.5rem;
}

.now strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  font-weight: 400;
  text-transform: uppercase;
}

.now span {
  font-size: .85rem;
  color: rgba(255, 255, 255, .75);
}

/* Right: track list */
.track-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: .5rem;
}

.track-item {
  width: 100%;
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: .9rem;
  padding: .75rem .9rem;
  background: rgba(255, 255, 255, .06);
  border: none;
  border-left: 3px solid transparent;
  color: var(--white);
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: background-color .2s ease, border-color .2s ease;
}

.track-item:hover {
  background: rgba(255, 255, 255, .12);
}

.track-item.active {
  background: var(--red);
  border-left-color: var(--white);
}

.track-item .thumb {
  width: 44px;
  height: 44px;
  background: var(--grad, #222);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: .95rem;
}

.track-item strong {
  display: block;
  font-size: .95rem;
  font-weight: 700;
}

.track-item small {
  font-size: .78rem;
  opacity: .75;
}

.track-item time {
  font-size: .8rem;
  font-weight: 600;
  opacity: .85;
}

.track-arrows {
  display: flex;
  gap: .5rem;
  margin-top: 1rem;
}

.track-arrows .t-btn {
  width: 40px;
  height: 40px;
  font-size: .8rem;
}

/* Hero side index (vertical numbers) */
.side-index {
  position: absolute;
  right: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: none;
  flex-direction: column;
  gap: .9rem;
}

.side-index a {
  color: rgba(255, 255, 255, .6);
  text-decoration: none;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  display: flex;
  align-items: center;
  gap: .6rem;
}

.side-index a::before {
  content: "";
  width: 18px;
  height: 1px;
  background: currentColor;
}

.side-index a:hover {
  color: var(--white);
}


/* =========================================================
   SOUND LAB (replaces "Hear the difference")
   ========================================================= */
.lab-section {
  overflow: hidden;
}

.lab-section::before {
  content: "";
  position: absolute;
  inset-inline-end: -220px;
  top: -180px;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(225, 15, 15, .28), transparent 66%);
  pointer-events: none;
}

.lab {
  position: relative;
  background: linear-gradient(160deg, #181818, #040404 70%);
  border: 1px solid var(--line);
  border-radius: 32px;
  padding: clamp(1.4rem, 3.5vw, 3rem);
  overflow: hidden;
  color: #ffffff;
  --amp: 1;
}

.lab[data-mode="standard"] {
  --amp: .5;
}

.lab::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: linear-gradient(#000, transparent 85%);
  mask-image: linear-gradient(#000, transparent 85%);
  pointer-events: none;
}

.lab-top {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  align-items: center;
  justify-content: space-between;
}

.lab-now {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  min-width: 0;
}

.lab-cover {
  width: clamp(72px, 9vw, 96px);
  height: clamp(72px, 9vw, 96px);
  border-radius: 18px;
  background-color: var(--grad, #222);
  background-image: var(--img, none);
  background-size: cover;
  background-position: center;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 1.6rem;
  flex-shrink: 0;
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .8);
}

.lab-tag {
  display: block;
  font-size: .7rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--red);
  font-weight: 800;
}

.lab-title {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  text-transform: uppercase;
  line-height: 1;
  margin-top: .35rem;
}

.lab-sub {
  display: block;
  color: rgba(255, 255, 255, .72);
  font-size: .92rem;
  margin-top: .35rem;
}

.mode-switch {
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  padding: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .1);
}

.pill-btn {
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, .72);
  padding: .75rem 1.25rem;
  border-radius: 999px;
  font-family: var(--font);
  font-size: .74rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .12em;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .25s ease, color .25s ease;
}

.pill-btn:hover {
  color: #ffffff;
}

.pill-btn.on {
  background: #ffffff;
  color: #000000;
}

/* Equalizer: 32 bars, animated only while playing */
.eq {
  position: relative;
  z-index: 1;
  height: clamp(130px, 22vw, 210px);
  margin: clamp(1.75rem, 4vw, 2.5rem) 0 1.5rem;
  display: flex;
  align-items: flex-end;
  gap: clamp(3px, .5vw, 6px);
}

.eq span {
  flex: 1;
  min-width: 0;
  height: 100%;
  border-radius: 6px 6px 2px 2px;
  background: linear-gradient(to top, var(--red), #ff6a4d);
  transform-origin: bottom center;
  transform: scaleY(calc(var(--h, .5) * .42));
  transition: background .5s ease, transform .4s var(--ease);
}

.lab[data-mode="standard"] .eq span {
  background: linear-gradient(to top, #3a3a3a, #7a7a7a);
}

.lab.is-playing .eq span {
  animation: eqBar var(--d, 1s) ease-in-out infinite alternate;
  animation-delay: var(--delay, 0s);
}

@keyframes eqBar {
  from {
    transform: scaleY(calc(var(--h, .5) * .12));
  }

  to {
    transform: scaleY(calc(var(--h, .5) * var(--amp, 1)));
  }
}

.lab-controls {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  align-items: center;
  justify-content: space-between;
}

.lab-play {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  border: none;
  background: var(--red);
  color: #ffffff;
  display: grid;
  place-items: center;
  font-size: 1.2rem;
  cursor: pointer;
  transition: transform .25s var(--ease), background-color .25s ease;
}

.lab-play:hover {
  transform: scale(1.06);
  background: #ffffff;
  color: #000000;
}

.lab.is-playing .lab-play {
  animation: ringPulse 1.6s ease-out infinite;
}

@keyframes ringPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(225, 15, 15, .6);
  }

  100% {
    box-shadow: 0 0 0 24px rgba(225, 15, 15, 0);
  }
}

.lab-note {
  position: relative;
  z-index: 1;
  margin: 1.5rem 0 0;
  color: rgba(255, 255, 255, .72);
  font-size: .92rem;
}

/* Sleeves: the recent-events cards */
.sleeves {
  list-style: none;
  padding: 0;
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: minmax(0, 1fr);
}

.sleeve {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 1.1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: transform .4s var(--ease), border-color .3s ease, box-shadow .4s ease;
  overflow: hidden;
}

.sleeve:hover,
.sleeve.is-current {
  transform: translateY(-5px);
  border-color: var(--red);
  box-shadow: 0 26px 50px -24px var(--red-glow);
}

.sleeve-cover {
  position: relative;
  width: 96px;
  height: 96px;
  flex-shrink: 0;
  background-color: var(--grad, #222);
  background-image: var(--img, none);
  background-size: cover;
  background-position: center;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .7);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: #ffffff;
  z-index: 1;
  box-shadow: 0 14px 28px -14px rgba(0, 0, 0, .8);
}

.sleeve-meta {
  flex: 1;
  min-width: 0;
  position: relative;
  z-index: 2;
}

.sleeve-meta h3 {
  font-size: 1.6rem;
  margin: 0 0 .25rem;
}

.sleeve-by {
  color: var(--red);
  font-size: .85rem;
  font-weight: 700;
  display: block;
}

.sleeve-genre {
  color: var(--muted);
  font-size: .82rem;
}

.sleeve-play {
  position: relative;
  z-index: 2;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  background: var(--red);
  color: #ffffff;
  display: grid;
  place-items: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color .25s ease, transform .25s var(--ease);
}

.sleeve-play:hover {
  background: var(--text);
  color: var(--bg);
  transform: scale(1.08);
}

/* =========================================================
   PROCESS: "signal path" timeline
   A route from first request to event day. Below 1025px the
   route runs down the page; from 1025px it runs across. main.js
   sets --fill on each step as you scroll, so the red line
   draws itself and each node lights up in turn.
   ========================================================= */
.signal {
  position: relative;
  --node: 64px;
  --gap: 1.5rem;
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

.signal-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap);
}

.signal-step {
  position: relative;
  padding-inline-start: calc(var(--node) + 1.25rem);
  display: flex;
  flex-direction: column;
}

/* Node: the icon sits on the route */
.signal-node {
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  width: var(--node);
  height: var(--node);
  border-radius: 50%;
  background: var(--bg-2);
  border: 2px solid var(--red);
  color: var(--red);
  display: grid;
  place-items: center;
  font-size: 1.35rem;
  z-index: 2;
  transition: background-color .45s ease, color .45s ease, box-shadow .45s ease;
}

.signal-step.is-lit .signal-node {
  background: var(--red);
  color: #ffffff;
  box-shadow: 0 0 0 6px var(--red-glow), 0 18px 30px -12px var(--red-glow);
}

.signal-step.is-lit .signal-node::after {
  content: "";
  position: absolute;
  inset: -9px;
  border-radius: 50%;
  border: 2px solid var(--red);
  animation: signal-ring 2.4s ease-out infinite;
}

@keyframes signal-ring {
  from {
    transform: scale(.85);
    opacity: .9;
  }

  to {
    transform: scale(1.45);
    opacity: 0;
  }
}

/* Route segment between two nodes (the track and its fill) */
.signal-step:not(:last-child)::before,
.signal-step:not(:last-child)::after {
  content: "";
  position: absolute;
  inset-inline-start: calc(var(--node) / 2 - 1px);
  top: var(--node);
  bottom: calc(-1 * var(--gap));
  width: 2px;
  border-radius: 2px;
}

.signal-step:not(:last-child)::before {
  background: var(--line);
}

.signal-step:not(:last-child)::after {
  background: linear-gradient(var(--red), var(--red-deep));
  box-shadow: 0 0 12px var(--red-glow);
  transform: scaleY(var(--fill, 0));
  transform-origin: top;
}

/* Card */
.signal-card {
  position: relative;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.4rem, 3vw, 2rem);
  flex: 1;
  display: flex;
  flex-direction: column;
  transition: transform .4s var(--ease), border-color .35s ease;
}

.signal-card::after {
  content: "";
  position: absolute;
  inset-inline-end: -50px;
  top: -50px;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--red-glow), transparent);
  opacity: .5;
  pointer-events: none;
}

.signal-step:hover .signal-card {
  transform: translateY(-5px);
  border-color: var(--red);
}

.signal-step.is-lit .signal-card {
  border-color: rgba(225, 15, 15, .45);
}

.signal-tag {
  display: inline-block;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: .75rem;
}

.signal-card h3 {
  font-size: clamp(1.7rem, 2.6vw, 2.1rem);
  margin-bottom: .6rem;
  position: relative;
}

.signal-card p {
  color: var(--muted);
  margin: 0 0 1.25rem;
  position: relative;
}

.signal-chips {
  list-style: none;
  padding: 0;
  margin: auto 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  position: relative;
}

.signal-chips li {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .8rem;
  font-weight: 600;
  padding: .42rem .8rem;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--text);
}

.signal-chips i {
  color: var(--red);
  font-size: .75rem;
}

/* Panel: call to action and the sound wave */
.process-panel {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 1.5rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
}

.process-panel::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--red);
}

.process-panel h3 {
  font-size: clamp(2rem, 4vw, 3rem);
  margin: 0 0 .4rem;
}

.process-panel p {
  color: var(--muted);
  margin: 0;
}

.process-panel-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}

.signal-wave {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  height: 56px;
  overflow: hidden;
}

.signal-wave span {
  flex: 0 0 4px;
  height: calc(var(--h) * 1%);
  border-radius: 2px;
  background: var(--red);
  opacity: .85;
  transform-origin: center;
  animation: signal-bar 1.6s ease-in-out infinite alternate;
  animation-delay: calc(var(--i) * -.09s);
}

@keyframes signal-bar {
  from {
    transform: scaleY(.25);
  }

  to {
    transform: scaleY(1);
  }
}

/* Shared icon tile (also used by service cards) */
.step-ico {
  width: 62px;
  height: 62px;
  border-radius: 18px;
  background: var(--red);
  color: #ffffff;
  display: grid;
  place-items: center;
  font-size: 1.4rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 16px 30px -14px var(--red-glow);
}

/* Mobile and tablet: vertical route. Chips wrap, panel stacks. */
@media (min-width: 768px) {
  .signal-step {
    padding-inline-start: calc(var(--node) + 1.5rem);
  }

  .signal-card {
    padding: 1.75rem 2rem;
  }
}

/* Large devices and up: horizontal route across three columns */
@media (min-width: 1025px) {
  .signal {
    --gap: 0px;
  }

  .signal-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
  }

  .signal-step {
    padding-inline-start: 0;
    padding-inline-end: 1.75rem;
    padding-top: calc(var(--node) + 1.75rem);
  }

  .signal-node {
    inset-inline-start: 0;
    top: 0;
  }

  .signal-step:not(:last-child)::before,
  .signal-step:not(:last-child)::after {
    inset-inline-start: calc(var(--node) / 2);
    top: calc(var(--node) / 2 - 1px);
    bottom: auto;
    width: 100%;
    height: 2px;
  }

  .signal-step:not(:last-child)::after {
    width: calc(var(--fill, 0) * 100%);
    height: 2px;
    transform: none;
  }

  .signal-step:not(:last-child)::before {
    width: 100%;
  }

  .signal-card h3 {
    font-size: 2.1rem;
  }

  .process-panel {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .process-panel-actions {
    grid-column: 2;
    grid-row: 1;
  }

  .signal-wave {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1281px) {
  .signal {
    --node: 72px;
  }

  .signal-card h3 {
    font-size: 2.3rem;
  }
}

/* =========================================================
   PACKAGES (three tiers, Premium featured)
   ========================================================= */
.tiers {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
}

.tier {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 28px;
  padding: clamp(1.75rem, 3vw, 2.4rem);
  transition: transform .4s var(--ease), box-shadow .4s ease, border-color .3s ease;
}

.tier:hover {
  transform: translateY(-8px);
  border-color: var(--red);
  box-shadow: 0 32px 60px -28px var(--red-glow);
}

.tier.featured {
  background: var(--red);
  border-color: var(--red);
  color: #ffffff;
  box-shadow: 0 34px 70px -30px rgba(225, 15, 15, .7);
}

.tier.featured:hover {
  border-color: #ffffff;
}

.tier-badge {
  position: absolute;
  top: -14px;
  inset-inline-start: 2rem;
  background: #000000;
  color: #ffffff;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: .45rem .9rem;
  border-radius: 999px;
}

.tier-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.tier-idx {
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--red);
}

.tier.featured .tier-idx {
  color: #ffffff;
}

.tier h3 {
  font-size: clamp(2.4rem, 4vw, 3rem);
  margin: 0;
}

.tier-meta {
  color: var(--muted);
  font-size: .78rem;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-weight: 700;
}

.tier.featured .tier-meta,
.tier.featured .tier-desc {
  color: rgba(255, 255, 255, .9);
}

.tier-price {
  font-family: var(--font-display);
  font-size: clamp(3.2rem, 5.5vw, 4.4rem);
  line-height: 1;
  margin: .25rem 0 0;
}

.tier-desc {
  color: var(--muted);
  margin: 0;
}

.tier-list {
  list-style: none;
  padding: 0;
  margin: .5rem 0 1rem;
  display: grid;
  gap: .75rem;
  flex: 1;
}

.tier-list li {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  font-weight: 500;
}

.tier-list i {
  color: var(--red);
  margin-top: .3rem;
  flex-shrink: 0;
}

.tier.featured .tier-list i {
  color: #ffffff;
}

.tier .btn {
  margin-top: auto;
}

/* =========================================================
   ENQUIRY (red info panel + custom-validated form)
   ========================================================= */
.enquiry {
  display: grid;
  gap: 1.5rem;
}

.enquiry-side {
  position: relative;
  overflow: hidden;
  background: var(--red);
  color: #ffffff;
  border-radius: 32px;
  padding: clamp(2rem, 4vw, 3.2rem);
  box-shadow: 0 30px 60px -32px var(--red-glow);
}

.kicker-light {
  color: #ffffff;
}

.kicker-light::before {
  background: #000000;
}

.enquiry-title {
  font-size: clamp(3.4rem, 8vw, 5.6rem);
  color: #ffffff;
  margin: 0 0 1.1rem;
}

.enquiry-title span {
  color: #000000;
}

.enquiry-side>p {
  max-width: 430px;
  opacity: .95;
  font-size: 1.05rem;
}

.enquiry-side .info-list li {
  color: #ffffff;
}

.enquiry-side .info-list i {
  color: #000000;
}

.enquiry-deco {
  position: absolute;
  inset-inline-end: -90px;
  bottom: -110px;
  font-size: 18rem;
  color: rgba(0, 0, 0, .16);
  pointer-events: none;
}

.enquiry-form {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 32px;
  padding: clamp(1.5rem, 3.5vw, 2.6rem);
}

.form-grid {
  display: grid;
  gap: 0 1.25rem;
  grid-template-columns: minmax(0, 1fr);
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  margin-bottom: 1.15rem;
}

.form-group.full {
  grid-column: 1 / -1;
}

.form-group label {
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--muted);
}

.form-group label .req {
  color: var(--red);
}

.form-control {
  width: 100%;
  padding: .9rem 1.05rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: 1rem;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.form-control::placeholder {
  color: #6b6b6b;
  opacity: 1;
}

.form-control:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 4px rgba(225, 15, 15, .2);
}

.form-group.is-invalid .form-control {
  border-color: var(--red);
  background: rgba(225, 15, 15, .06);
}

.field-select {
  position: relative;
}

.field-select select.form-control {
  appearance: none;
  -webkit-appearance: none;
  padding-inline-end: 2.7rem;
  cursor: pointer;
}

.field-select>i {
  position: absolute;
  inset-inline-end: 1.05rem;
  top: 50%;
  translate: 0 -50%;
  color: var(--muted);
  pointer-events: none;
}

select.form-control option {
  background: var(--surface);
  color: var(--text);
}

textarea.form-control {
  min-height: 110px;
  resize: vertical;
}

.error-msg {
  color: var(--red);
  font-size: .83rem;
  font-weight: 600;
  min-height: 1.1em;
  margin: 0;
}

.check-row {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  font-size: .92rem;
  color: var(--muted);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
}

.check-row input {
  margin-top: .3rem;
  accent-color: var(--red);
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.form-status {
  font-weight: 700;
  margin-top: 1rem;
  min-height: 1.4em;
}

.form-status.success {
  color: #22c55e;
}

.form-status.error {
  color: var(--red);
}

/* Shared info list (home enquiry and CTA) */
.info-list {
  list-style: none;
  padding: 0;
  margin: 1.75rem 0 0;
  display: grid;
  gap: .9rem;
}

.info-list li {
  display: flex;
  gap: .8rem;
  align-items: center;
  font-weight: 600;
}

.info-list i {
  color: var(--red);
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}

/* =========================================================
   CTA (red band)
   ========================================================= */
.cta {
  position: relative;
  isolation: isolate;
  background: var(--red);
  color: #ffffff;
  padding: clamp(4.5rem, 9vw, 7rem) 0 clamp(7.5rem, 14vw, 9.5rem);
  overflow: hidden;
}

.cta-deco {
  position: absolute;
  inset-inline-end: -7rem;
  top: -7rem;
  font-size: 26rem;
  color: rgba(0, 0, 0, .12);
  pointer-events: none;
  animation: spin 26s linear infinite;
}

.cta-bars {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 64px;
  display: flex;
  align-items: flex-end;
  gap: 4px;
  padding-inline: 1rem;
  pointer-events: none;
  z-index: 0;
}

.cta-bars span {
  flex: 1;
  height: 100%;
  background: #000000;
  opacity: .28;
  transform-origin: bottom;
  animation: cta-eq 1.3s ease-in-out infinite alternate;
  animation-delay: calc(var(--i) * -.11s);
}

@keyframes cta-eq {
  from {
    transform: scaleY(.12);
  }

  to {
    transform: scaleY(1);
  }
}

@keyframes cta-ping {
  0% {
    box-shadow: 0 0 0 0 rgba(225, 15, 15, .75);
  }

  100% {
    box-shadow: 0 0 0 10px rgba(225, 15, 15, 0);
  }
}

.cta-inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 2.25rem;
  align-items: end;
}

.cta-pill {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  background: #000000;
  color: #ffffff;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: .5rem 1rem;
  border-radius: 999px;
  margin-bottom: 1.5rem;
}

.cta-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--red);
  animation: cta-ping 1.8s ease-out infinite;
}

.cta-title {
  font-size: clamp(3.6rem, 12vw, 10rem);
  line-height: .85;
  margin: 0;
  color: #ffffff;
}

.cta-title span {
  color: #000000;
}

.cta-side p {
  font-size: 1.1rem;
  max-width: 430px;
  margin: 0 0 1.6rem;
  opacity: .95;
}

.cta-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
}

.cta-link {
  color: #ffffff;
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  padding-bottom: .25rem;
  border-bottom: 2px solid rgba(255, 255, 255, .7);
  transition: border-color .3s ease;
}

.cta-link:hover {
  border-color: #000000;
}

/* =========================================================
   DIAL IN (interactive mixing board)
   ========================================================= */
/* ---------- Dial in: rig sheet ---------- */
.dial-head {
  max-width: 720px;
  margin-bottom: clamp(2.25rem, 5vw, 3.5rem);
}

.dial-head .section-title {
  margin-bottom: 1rem;
}

.dl {
  display: grid;
  gap: 1.25rem;
}

.dl-picks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .6rem;
}

.dl-pick {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "ico no" "text text";
  gap: .8rem;
  align-items: center;
  width: 100%;
  padding: 1rem;
  text-align: start;
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  cursor: pointer;
  transition: background .3s ease, border-color .3s ease, color .3s ease, transform .3s var(--ease);
}

.dl-pick:hover {
  transform: translateY(-2px);
  border-color: var(--red);
}

.dl-pick:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.dl-pick-no {
  grid-area: no;
  justify-self: end;
  font-family: var(--font-display);
  font-size: 1rem;
  line-height: 1;
  color: var(--red);
  direction: ltr;
}

.dl-pick-ico {
  grid-area: ico;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--bg-2);
  color: var(--red);
  font-size: .95rem;
  transition: background .3s ease, color .3s ease;
}

.dl-pick-text {
  grid-area: text;
  display: grid;
  gap: .2rem;
  min-width: 0;
}

.dl-pick-text strong {
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.2;
}

.dl-pick-text small {
  font-size: .82rem;
  line-height: 1.35;
  color: var(--muted);
}

.dl-pick-go {
  display: none;
  color: var(--muted);
}

.dl-pick.is-on {
  background: var(--red);
  border-color: var(--red);
  color: #ffffff;
}

.dl-pick.is-on .dl-pick-no {
  color: #ffffff;
}

.dl-pick.is-on .dl-pick-ico {
  background: rgba(0, 0, 0, .25);
  color: #ffffff;
}

.dl-pick.is-on .dl-pick-text small {
  color: rgba(255, 255, 255, .9);
}

.dl-pick.is-on .dl-pick-go {
  color: #ffffff;
}

/* The rig sheet is always dark, so its text stays readable in light and dark themes */
.dl-sheet {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  gap: 1.75rem;
  padding: clamp(1.5rem, 3.5vw, 2.75rem);
  background: #0b0b0b;
  color: #ffffff;
  border: 1px solid #242424;
  border-radius: 28px;
  box-shadow: 0 40px 80px -40px rgba(225, 15, 15, .45);
}

.dl-sheet::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset-inline-end: -25%;
  top: -35%;
  width: 70%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(225, 15, 15, .32), transparent 65%);
  pointer-events: none;
}

.dl-sheet-head {
  display: grid;
  gap: .5rem;
}

.dl-kicker {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #ff4d4d;
}

.dl-live {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--red);
  animation: cta-ping 1.8s ease-out infinite;
}

.dl-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(3rem, 6vw, 4.8rem);
  line-height: .9;
  text-transform: uppercase;
  color: #ffffff;
}

.dl-channels {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.1rem;
}

.dl-ch {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "ico name val" "meter meter meter";
  align-items: center;
  gap: .55rem .8rem;
}

.dl-ch-ico {
  grid-area: ico;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: #1a1a1a;
  color: var(--red);
  font-size: .9rem;
}

.dl-ch-name {
  grid-area: name;
  min-width: 0;
  font-size: .95rem;
  font-weight: 700;
  color: #f2f2f2;
}

.dl-ch-val {
  grid-area: val;
  min-width: 2.5ch;
  text-align: end;
  font-family: var(--font-display);
  font-size: 1.35rem;
  line-height: 1;
  color: #ffffff;
  direction: ltr;
}

.dl-meter {
  grid-area: meter;
  position: relative;
  height: 12px;
  border-radius: 999px;
  background: #1c1c1c;
  overflow: hidden;
}

.dl-meter-fill {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: calc(var(--level, 0) * 1%);
  border-radius: inherit;
  background: linear-gradient(90deg, #7a0b0b, var(--red));
  transition: width .7s var(--ease);
}

.dl-meter-fill::after {
  content: "";
  position: absolute;
  top: 50%;
  inset-inline-end: -3px;
  width: 6px;
  height: 22px;
  transform: translateY(-50%);
  border-radius: 3px;
  background: #ffffff;
}

.dl-meter::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 2px), rgba(0, 0, 0, .55) calc(10% - 2px) 10%);
}

.dl-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding-top: 1.5rem;
  border-top: 1px solid #262626;
}

.dl-note {
  margin: 0;
  max-width: 44ch;
  font-size: 1rem;
  line-height: 1.55;
  color: #c9c9c9;
}

/* Tablet: four event cards in a row */
@media (min-width: 768px) {
  .dl-picks {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Large devices: event list beside the rig sheet */
@media (min-width: 1025px) {
  .dl {
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    align-items: stretch;
    gap: 1.5rem;
  }

  .dl-picks {
    grid-template-columns: minmax(0, 1fr);
    gap: .75rem;
  }

  .dl-pick {
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    grid-template-areas: "no ico text go";
    padding: 1.1rem 1.25rem;
  }

  .dl-pick-no {
    justify-self: start;
  }

  .dl-pick-go {
    display: block;
    font-size: .9rem;
    transition: transform .3s var(--ease);
  }

  .dl-pick:hover .dl-pick-go,
  .dl-pick.is-on .dl-pick-go {
    transform: translateX(4px);
  }

  .dl-channels {
    gap: 1.35rem;
  }
}

@media (prefers-reduced-motion: reduce) {

  .dl-meter-fill,
  .dl-pick,
  .dl-pick-ico {
    transition: none;
  }

  .dl-live {
    animation: none;
  }
}

/* =========================================================
   MARQUEE + BOOKING TICKET
   ========================================================= */
.ticket-section {
  padding-top: 0;
}

.reserve-body {
  padding-top: clamp(4.5rem, 9vw, 7.5rem);
}

.reserve-head {
  max-width: 720px;
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

.reserve-head .section-title {
  margin-bottom: 1rem;
}

.ticket {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 28px;
  overflow: hidden;
}

.ticket-stub {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .9rem;
  padding: 2.25rem 1.75rem;
  background: #000000;
  color: #ffffff;
  border-bottom: 2px dashed rgba(255, 255, 255, .3);
}

.ticket-stub::before,
.ticket-stub::after {
  content: "";
  position: absolute;
  bottom: -14px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bg-2);
}

.ticket-stub::before {
  inset-inline-start: -14px;
}

.ticket-stub::after {
  inset-inline-end: -14px;
}

.ticket-icon {
  color: var(--red);
  font-size: 1.6rem;
}

.stub-title {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 4.4vw, 3.9rem);
  line-height: .9;
  text-transform: uppercase;
}

.stub-no {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #a3a3a3;
}

.stub-bars {
  display: block;
  height: 44px;
  width: 100%;
  margin-top: .5rem;
  opacity: .9;
  background: repeating-linear-gradient(90deg, #ffffff 0 2px, transparent 2px 4px, #ffffff 4px 5px, transparent 5px 8px, #ffffff 8px 11px, transparent 11px 13px, #ffffff 13px 14px, transparent 14px 17px);
}

.ticket-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  padding: clamp(1.75rem, 3.5vw, 3rem);
  min-width: 0;
}

.ticket-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.5rem;
}

.ticket-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

.step-no {
  font-family: var(--font-display);
  font-size: 2.6rem;
  line-height: 1;
  color: var(--red);
  direction: ltr;
}

.ticket-step h3 {
  font-size: clamp(1.8rem, 3vw, 2.2rem);
  margin: 0 0 .2rem;
}

.ticket-step p {
  color: var(--muted);
  margin: 0;
}

.ticket-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

@media (min-width: 768px) {
  .ticket {
    flex-direction: row;
  }

  .ticket-stub {
    width: 230px;
    flex-shrink: 0;
    border-bottom: 0;
    border-inline-end: 2px dashed rgba(255, 255, 255, .3);
  }

  .ticket-stub::before {
    top: -14px;
    bottom: auto;
    inset-inline-start: auto;
    inset-inline-end: -14px;
  }

  .ticket-stub::after {
    bottom: -14px;
    inset-inline-start: auto;
    inset-inline-end: -14px;
  }

  .ticket-main {
    padding: clamp(2.25rem, 4vw, 3.25rem);
  }
}

@media (min-width: 1025px) {
  .ticket-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
  }

  .ticket-step {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* =========================================================
   FOOTER (always black, same on every page)
   ========================================================= */
.site-footer {
  background: #000000;
  color: #a8a8a8;
  padding: 4.5rem 0 2rem;
  border-top: 2px solid var(--red);
}

.footer-grid {
  display: grid;
  gap: 2.75rem;
  grid-template-columns: minmax(0, 1fr);
}

.footer-grid>* {
  min-width: 0;
}

.footer-col {
  overflow-wrap: anywhere;
  display: flex;
  flex-direction: column;
}

.footer-note {
  margin: 0 0 1.1rem;
  font-size: .92rem;
  line-height: 1.6;
  color: #7a7a7a;
}

.footer-col ul+.footer-note {
  margin-top: .9rem;
}

.footer-note--line {
  margin: 0 0 1.1rem;
}

.footer-brand .brand {
  color: #ffffff;
  font-size: 2rem;
}

.footer-brand p {
  color: #7a7a7a;
  margin-top: 1rem;
  max-width: 340px;
}

.footer-col h4 {
  font-family: var(--font);
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: #ffffff;
  margin-bottom: 1.2rem;
}

.footer-col ul {
  list-style: none;
  padding: 0;
  display: grid;
  gap: .65rem;
}

.footer-col a {
  text-decoration: none;
  color: #a8a8a8;
}

.footer-col a:hover {
  color: var(--red);
}

.footer-col li {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.footer-col li i {
  color: var(--red);
  width: 18px;
  text-align: center;
  flex-shrink: 0;
}

.socials {
  display: flex;
  gap: .5rem;
  margin-top: 1.25rem;
}

.socials a {
  width: 42px;
  height: 42px;
  border: 2px solid #2a2a2a;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #ffffff;
  text-decoration: none;
  transition: background-color .2s ease, border-color .2s ease;
}

.socials a:hover {
  background: var(--red);
  border-color: var(--red);
}

.newsletter {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.newsletter .form-control {
  color: #ffffff;
  background: transparent;
  border: none;
  border-bottom: 2px solid #3a3a3a;
  border-radius: 0;
  padding: .75rem 0;
  font-size: 1rem;
}

.newsletter .form-control:focus {
  border-bottom-color: var(--red);
  box-shadow: none;
}

.newsletter .form-control::placeholder {
  color: #5e5e5e;
}

.newsletter .form-group {
  margin-bottom: 0;
}

.newsletter .form-group label {
  display: none;
}

.newsletter .error-msg {
  color: #ff6b6b;
}

.newsletter .input-row {
  display: flex;
  gap: .5rem;
  align-items: center;
}

.newsletter .input-row .form-control {
  flex: 1;
  min-width: 0;
}

.newsletter .input-row .btn {
  padding: .8rem 1rem;
}

.newsletter .form-status {
  font-size: .85rem;
  margin-top: .2rem;
}

.newsletter .form-status.success {
  color: #86efac;
}

.newsletter .form-status.error {
  color: #ff6b6b;
}

.footer-bottom {
  margin-top: 3rem;
  padding-top: 1.25rem;
  border-top: 1px solid #1f1f1f;
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  justify-content: space-between;
  font-size: .82rem;
  color: #6b6b6b;
}

/* ---------- Back to top (right side, appears after the hero) ---------- */
.back-to-top {
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--red);
  color: #ffffff;
  border: none;
  display: grid;
  place-items: center;
  font-size: 1rem;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s, background-color .2s ease;
  box-shadow: 0 16px 30px -10px var(--red-glow);
  z-index: 900;
}

.back-to-top:hover {
  background: var(--text);
  color: var(--bg);
}

.back-to-top.show {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* ---------- Inner page hero ---------- */
.page-hero {
  padding: calc(var(--nav-h) + 4rem) 0 3rem;
  border-bottom: 2px solid var(--red);
}

.page-hero h1 {
  font-size: clamp(4rem, 14vw, 12rem);
  line-height: .98;
  margin: 0;
}

.page-hero p {
  color: var(--muted);
  max-width: 520px;
  margin-top: 1.25rem;
  font-size: 1.05rem;
}

/* ---------- Utilities ---------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link:focus {
  position: fixed;
  top: 8px;
  left: 8px;
  width: auto;
  height: auto;
  clip: auto;
  background: var(--white);
  color: var(--black);
  padding: .5rem 1rem;
  z-index: 2000;
}

/* =========================================================
   RESPONSIVE
   Mobile 320-767 (base styles) | Tablet 768-1024 | Large 1025-1280 | XL 1281+
   ========================================================= */

/* Mobile 320px - 767px: stacked hero, centered single-column layout */
@media (max-width: 767px) {
  /* Prevent horizontal margin overflow from AOS animation translate3d */
  [data-aos="fade-left"],
  [data-aos="fade-right"] {
    transform: none !important;
  }

  .hero {
    min-height: auto;
    overflow-x: clip;
    overflow-y: visible;
    padding-bottom: 3.5rem;
  }

  .hero-inner {
    padding: 1.25rem 0 2rem;
    gap: 1.5rem;
  }

  .hero-left {
    order: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .hero-left .hero-label {
    margin-bottom: .4rem;
  }

  .hero-left .hero-title {
    font-size: clamp(2.8rem, 11vw, 4.2rem);
    line-height: .98;
  }

  .hero-sub {
    justify-content: center;
    margin: .75rem 0 .4rem;
  }

  .hero-sub p {
    max-width: 300px;
    text-align: center;
    font-size: .88rem;
  }

  .squiggle {
    margin: .75rem auto .4rem;
  }

  .hero-artist {
    font-size: 1.35rem;
  }

  .hero-social {
    margin-top: 1rem;
    justify-content: center;
  }

  .hero-center {
    order: 2;
    margin-top: .5rem;
    width: 100%;
  }

  .hero-center .vinyl {
    width: clamp(170px, 48vw, 220px);
    margin-inline: auto;
    box-shadow:
      0 0 0 6px #1f1f1f,
      0 0 0 7px #3d3d3d,
      0 0 40px rgba(225, 15, 15, .35),
      0 16px 36px rgba(0, 0, 0, .8);
  }

  .hero-center .transport {
    margin-top: 1rem;
    gap: .75rem;
    justify-content: center;
  }

  .hero-center .t-btn {
    width: 42px;
    height: 42px;
    font-size: .8rem;
  }

  .hero-center .t-btn.play {
    width: 50px;
    height: 50px;
    font-size: .9rem;
  }

  .hero-center .now {
    margin: .65rem 0 .9rem;
  }

  .hero-center .now strong {
    font-size: 1.3rem;
  }

  .hero-center .btn {
    padding: .75rem 1.6rem;
    font-size: .78rem;
  }

  .hero-right {
    order: 3;
    width: 100%;
    max-width: 440px;
    margin-inline: auto;
    margin-top: .5rem;
  }

  .hero-right .track-list {
    background: rgba(14, 14, 14, .8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 18px;
    padding: .5rem;
    gap: .4rem;
  }

  .hero-right .track-item {
    border-radius: 12px;
    padding: .65rem .8rem;
  }

  .hero-right .track-arrows {
    justify-content: center;
    margin-top: .75rem;
  }

  .lab-controls {
    justify-content: center;
  }

  .lab-controls .mode-switch {
    width: 100%;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .lab-controls .pill-btn {
    padding-inline: .6rem;
  }

  .lab-top .mode-switch {
    width: 100%;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .sleeve-cover {
    width: 84px;
    height: 84px;
  }

  .eq {
    gap: clamp(2px, .6vw, 5px);
  }
}

/* Small phones (320-379px): tighter header so brand and three buttons fit */
@media (max-width: 379px) {
  .navbar {
    gap: .4rem;
  }

  .brand {
    font-size: 1.2rem;
    gap: .4rem;
  }

  .brand img {
    width: 32px;
    height: 32px;
  }

  .nav-actions {
    gap: .3rem;
  }

  .nav-actions .icon-btn {
    width: 38px;
    height: 38px;
    font-size: .85rem;
  }

  .dir-toggle {
    height: 38px;
    min-width: 48px;
    padding: 0 .6rem;
    font-size: .66rem;
  }
}

/* Tablet 768px - 1024px */
@media (min-width: 768px) {
  .container {
    width: min(100% - 4rem, var(--container));
  }

  .hero {
    min-height: auto;
    overflow-x: clip;
    padding-bottom: 3rem;
  }

  .hero-inner {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    padding: 1.25rem 0 2rem;
    gap: 1.25rem 2.5rem;
    align-items: start;
  }

  .hero-left {
    grid-row: 1;
    grid-column: 1;
  }

  .hero-left .hero-title {
    font-size: clamp(3.2rem, 6.2vw, 5rem);
    line-height: .98;
  }

  .hero-left .hero-sub {
    margin: .85rem 0 .4rem;
  }

  .hero-left .hero-social {
    margin-top: 1.25rem;
  }

  .hero-right {
    grid-row: 1;
    grid-column: 2;
    align-self: center;
  }

  .hero-right .track-list {
    gap: .45rem;
  }

  .hero-right .track-item {
    padding: .65rem .85rem;
    gap: .75rem;
  }

  .hero-right .track-item .thumb {
    width: 38px;
    height: 38px;
    font-size: .88rem;
  }

  .hero-right .track-arrows {
    margin-top: .75rem;
  }

  .hero-center {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: .5rem;
  }

  .hero-center .vinyl {
    width: clamp(190px, 24vw, 260px);
    box-shadow:
      0 0 0 8px #1f1f1f,
      0 0 0 9px #3d3d3d,
      0 0 60px rgba(225, 15, 15, .4),
      0 20px 50px rgba(0, 0, 0, .8);
  }

  .hero-center .transport {
    margin-top: 1rem;
    gap: .85rem;
  }

  .hero-center .t-btn {
    width: 44px;
    height: 44px;
    font-size: .85rem;
  }

  .hero-center .t-btn.play {
    width: 54px;
    height: 54px;
    font-size: .95rem;
  }

  .hero-center .now {
    margin: .75rem 0 1rem;
  }

  .hero-center .now strong {
    font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  }

  .hero-center .btn {
    padding: .8rem 1.6rem;
    font-size: .8rem;
  }

  .tiers {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.1rem;
  }

  .tier-head {
    flex-wrap: wrap;
  }

  .tier {
    padding: 1.75rem 1.4rem;
  }

  .tier h3 {
    font-size: 2.3rem;
  }

  .tier-price {
    font-size: 3.1rem;
  }

  .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 1.25rem;
  }

  .footer-grid {
    grid-template-columns: 1.3fr 1fr 1fr 1.25fr 1.35fr;
    gap: 1.75rem 1.1rem;
  }

  .footer-brand .brand {
    font-size: 1.25rem;
    gap: .5rem;
  }

  .footer-brand .brand img {
    width: 30px;
    height: 30px;
  }

  .footer-brand {
    grid-column: auto;
  }

  .lab-controls .mode-switch {
    width: auto;
  }
}

@media (min-width: 768px) and (max-width: 960px) {
  .tier {
    padding: 1.4rem 1rem;
  }

  .tier h3 {
    font-size: 1.9rem;
  }

  .tier-price {
    font-size: 2.6rem;
  }

  .tier-feats {
    font-size: .84rem;
  }
}

/* Large devices 1025px - 1280px and up: desktop nav and full layouts */
@media (min-width: 1025px) {
  .nav-links {
    display: flex;
  }

  .nav-links.open {
    position: static;
    flex-direction: row;
    background: none;
    border: none;
    padding: 0;
    max-height: none;
    overflow: visible;
  }

  .nav-links.open a {
    border-bottom: 0;
    padding: .3rem 0;
    font-size: .76rem;
  }

  .menu-toggle {
    display: none;
  }

  .nav-cta {
    display: inline-flex;
  }

  .hero {
    min-height: 100vh;
    min-height: 100svh;
  }

  .hero-inner {
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: none;
    gap: 2.5rem;
    padding: 2.5rem 0 3rem;
  }

  .hero-left {
    grid-row: auto;
    grid-column: auto;
    text-align: left;
    align-items: flex-start;
  }

  .hero-left .hero-title {
    font-size: clamp(4rem, 11vw, 9.5rem);
    line-height: .98;
  }

  .hero-sub {
    justify-content: flex-start;
  }

  .hero-sub p {
    text-align: left;
    max-width: 220px;
  }

  .squiggle {
    margin: 1.25rem 0 .5rem;
  }

  .hero-social {
    justify-content: flex-start;
  }

  .hero-center {
    grid-column: auto;
    grid-row: auto;
    margin-top: 0;
    width: auto;
  }

  .hero-center .vinyl {
    width: clamp(240px, 28vw, 400px);
    box-shadow:
      0 0 0 10px #1f1f1f,
      0 0 0 11px #3d3d3d,
      0 0 90px rgba(225, 15, 15, .45),
      0 30px 70px rgba(0, 0, 0, .8);
  }

  .hero-right {
    grid-column: auto;
    grid-row: auto;
    order: 0;
    max-width: none;
    width: auto;
    margin-top: 0;
  }

  .hero-right .track-list {
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    padding: 0;
    gap: .5rem;
  }

  .side-index {
    display: flex;
  }

  .lab-top {
    flex-wrap: nowrap;
  }

  .sleeves {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sleeve {
    flex-direction: column;
    align-items: stretch;
    gap: 1.25rem;
    padding: 1.4rem;
  }

  .sleeve-cover {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
  }

  .sleeve-meta {
    order: 2;
  }

  .sleeve-play {
    order: 3;
    width: 100%;
    height: 48px;
    border-radius: 999px;
  }

  .sleeve-play::after {
    content: "Play";
    margin-inline-start: .5rem;
    font-family: var(--font);
    font-size: .75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .12em;
  }

  .sleeve.is-current .sleeve-play::after {
    content: "Pause";
  }

  .sleeve-play {
    width: 100%;
  }

  .sleeve .sleeve-play {
    display: flex;
  }


  .tiers {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.75rem;
  }

  .tier.featured {
    transform: translateY(-14px);
  }

  .tier.featured:hover {
    transform: translateY(-22px);
  }

  .tier {
    padding: 2.4rem 2.1rem;
  }


  .enquiry {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr);
    align-items: stretch;
    gap: 2rem;
  }

  .enquiry-side {
    position: sticky;
    top: calc(var(--nav-h) + 1.5rem);
    align-self: start;
  }

  .cta-inner {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  }

  .footer-grid {
    grid-template-columns: 1.35fr 1fr 1fr 1.4fr 1.45fr;
    gap: 2.5rem 2rem;
  }

  .footer-brand .brand {
    font-size: 1.6rem;
  }

  .footer-brand {
    grid-column: auto;
  }
}

/* XL 1281px and up: a little more air */
@media (min-width: 1281px) {
  .section-title {
    font-size: 5.4rem;
  }

  .tier-price {
    font-size: 4.6rem;
  }
}

/* Reduced motion: keep layouts, drop decorative movement */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation: none !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =========================================================
   SERVICES PAGE
   ========================================================= */
.svc-split {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}

.svc-visual {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  aspect-ratio: 1.1;
  border-radius: 32px;
  background: radial-gradient(circle at 30% 20%, #2a2a2a, #050505 70%);
  border: 1px solid var(--line);
  display: grid;
  place-content: center;
  justify-items: center;
  gap: .75rem;
  color: #ffffff;
  text-align: center;
}

.svc-visual::after {
  content: "";
  position: absolute;
  width: 70%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: repeating-radial-gradient(circle, #0b0b0b 0 2px, #1d1d1d 2px 3px);
  inset-inline-end: -22%;
  bottom: -30%;
  z-index: -1;
}

.svc-visual i {
  font-size: clamp(4rem, 9vw, 6rem);
  color: var(--red);
}

/* Photo cards: the photo fills the dark card, the label sits over it on a dark strip */
.svc-visual--photo {
  display: block;
  aspect-ratio: 1.1;
}

.svc-visual--photo::after {
  display: none;
}

.svc-visual .svc-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}

.svc-visual .svc-cap {
  position: absolute;
  inset-inline-start: 1.25rem;
  bottom: 1.25rem;
  z-index: 1;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.8vw, 2.2rem);
  text-transform: uppercase;
  line-height: 1;
  padding: .55rem 1rem;
  border-radius: 14px;
  background: rgba(0, 0, 0, .7);
  color: #ffffff;
}

.svc-visual span {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  text-transform: uppercase;
}

.svc-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: minmax(0, 1fr);
}

.svc-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2rem 1.75rem;
  transition: transform .4s var(--ease), border-color .3s ease;
}

.svc-card:hover {
  transform: translateY(-6px);
  border-color: var(--red);
}

.svc-card .step-ico {
  margin-bottom: 1.25rem;
}

.svc-card h3 {
  font-size: 2rem;
  margin-bottom: .6rem;
}

.svc-card>p {
  color: var(--muted);
}

.svc-card ul {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
  display: grid;
  gap: .6rem;
}

.svc-card li {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
}

.svc-card li i {
  color: var(--red);
  margin-top: .3rem;
  flex-shrink: 0;
}

.event-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.event-tile {
  display: flex;
  flex-direction: column;
  gap: .9rem;
  padding: 1.5rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .9rem;
  transition: border-color .3s ease, transform .3s var(--ease);
}

.event-tile:hover {
  border-color: var(--red);
  transform: translateY(-4px);
}

.event-tile i {
  color: var(--red);
  font-size: 1.5rem;
}

[data-theme="light"] .svc-visual {
  background: radial-gradient(circle at 30% 20%, #3a3a3a, #0a0a0a 70%);
}

@media (min-width: 768px) {
  .svc-split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3rem;
  }

  .svc-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .event-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1025px) {
  .svc-split--flip> :first-child {
    order: 2;
  }

  .event-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .event-tile {
    align-items: flex-start;
    padding: 1.6rem 1.2rem;
  }
}

/* =========================================================
   PACKAGES PAGE: comparison table and custom box
   ========================================================= */
.table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  -webkit-overflow-scrolling: touch;
}

.compare {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: .95rem;
}

.compare th,
.compare td {
  padding: 1rem 1.1rem;
  text-align: start;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

.compare thead th {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: 1.3rem;
  letter-spacing: .02em;
  color: var(--text);
}

.compare tbody th {
  font-weight: 700;
  color: var(--muted);
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.compare td i.fa-check {
  color: var(--red);
}

.compare td i.fa-minus {
  color: var(--muted);
  opacity: .6;
}

.compare tbody tr:last-child th,
.compare tbody tr:last-child td {
  border-bottom: 0;
}

.custom-box {
  display: grid;
  gap: 1.5rem;
  align-items: center;
  padding: clamp(2rem, 4vw, 3.5rem);
  border: 1px solid var(--line);
  border-radius: 32px;
  background: var(--surface);
}

.custom-box .section-title {
  margin-bottom: .75rem;
}

.custom-box .lead {
  margin-bottom: 0;
}

@media (min-width: 768px) {
  .custom-box {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

@media (max-width: 767px) {
  .compare {
    min-width: 0;
    font-size: .8rem;
  }

  .compare th,
  .compare td {
    padding: .8rem .45rem;
  }

  .compare thead th {
    font-size: 1rem;
  }

  .compare tbody th {
    font-size: .66rem;
    letter-spacing: .03em;
  }
}

@media (max-width: 379px) {
  .compare {
    font-size: .72rem;
  }

  .compare th,
  .compare td {
    padding: .7rem .3rem;
  }

  .compare thead th {
    font-size: .85rem;
    letter-spacing: 0;
  }

  .compare tbody th {
    font-size: .6rem;
  }

  .compare td i {
    font-size: .8rem;
  }
}

/* =========================================================
   EVENTS (scrolling chapters, sticky visual, home page)
   Chapters scroll past one sticky visual. The active chapter
   fills its title in, moves the index and lights the rail.
   ========================================================= */
.events-grid {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: minmax(0, 1fr);
}

.events-stick {
  display: grid;
  gap: 1.25rem;
  justify-items: start;
}

.events-visual {
  position: relative;
  width: min(300px, 74vw);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}

/* Pulsing rings behind the record */
.events-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px solid var(--red);
  translate: -50% -50%;
  opacity: 0;
  animation: events-ring 3s ease-out infinite;
}

.events-ring:nth-child(2) {
  animation-delay: 1s;
}

.events-ring:nth-child(3) {
  animation-delay: 2s;
}

@keyframes events-ring {
  from {
    scale: .55;
    opacity: .85;
  }

  to {
    scale: 1.12;
    opacity: 0;
  }
}

/* The record turns at the same pace as the hero vinyl */
.events-disc {
  position: relative;
  width: 62%;
  height: auto;
  aspect-ratio: 1;
  animation: spin 7s linear infinite;
  filter: drop-shadow(0 26px 30px rgba(0, 0, 0, .5));
}

.events-index {
  display: flex;
  align-items: baseline;
  gap: .6rem;
}

.events-num {
  font-family: var(--font-display);
  font-size: clamp(5rem, 9vw, 7.5rem);
  line-height: .9;
  color: var(--red);
  transition: opacity .3s ease;
}

.events-of {
  font-size: .85rem;
  font-weight: 800;
  letter-spacing: .14em;
  color: var(--muted);
}

.events-rail {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: .5rem;
}

.events-rail li {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: var(--line);
  transition: background-color .4s ease, width .4s var(--ease);
}

.events-rail li.is-on {
  background: var(--red);
  width: 64px;
}

.events-chapters {
  display: grid;
  gap: 2.5rem;
}

.chapter {
  border-inline-start: 2px solid var(--line);
  padding: .5rem 0 .5rem clamp(1.25rem, 3vw, 2rem);
  transition: border-color .5s ease;
}

[dir="rtl"] .chapter {
  padding: .5rem clamp(1.25rem, 3vw, 2rem) .5rem 0;
}

.chapter.is-active {
  border-inline-start-color: var(--red);
}

.chapter-kicker {
  display: block;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: .6rem;
}

.chapter-title {
  font-size: clamp(2.6rem, 7vw, 5.4rem);
  line-height: .9;
  margin-bottom: .6rem;
  overflow-wrap: anywhere;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--text);
  transition: color .6s ease, -webkit-text-stroke-color .6s ease, transform .6s var(--ease);
}

.chapter.is-active .chapter-title {
  color: var(--text);
  -webkit-text-stroke-color: transparent;
  transform: translateX(6px);
}

[dir="rtl"] .chapter.is-active .chapter-title {
  transform: translateX(-6px);
}

.chapter p {
  color: var(--muted);
  max-width: 520px;
  margin-bottom: 1.25rem;
}

.chapter-tags {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.chapter-tags li {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .8rem;
  font-weight: 600;
  padding: .42rem .8rem;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--text);
}

.chapter-tags i {
  color: var(--red);
  font-size: .75rem;
}

@media (min-width: 1025px) {
  .events-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 4rem;
    align-items: start;
  }

  .events-stick {
    position: sticky;
    top: calc(var(--nav-h) + 2rem);
    z-index: 1;
    min-height: 0;
  }

  .events-visual {
    width: min(360px, 100%);
  }

  .events-chapters {
    gap: 0;
  }

  .chapter {
    min-height: 62vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .chapter p {
    font-size: 1.1rem;
  }

  .chapter-title {
    font-size: clamp(3.4rem, 5.2vw, 5.4rem);
  }
}

/* =========================================================
   TESTIMONIALS (setlist: clients as tracks, one now-playing panel)
   The active track's progress bar drives the auto-advance: when
   it finishes, the next client plays. Hover or focus pauses it.
   ========================================================= */
.setlist {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: minmax(0, 1fr);
}

.setlist-tracks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
}

.track {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .9rem;
  width: 100%;
  padding: 1rem 1.1rem;
  font: inherit;
  text-align: start;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  cursor: pointer;
  transition: border-color .3s ease, background-color .3s ease, transform .3s var(--ease);
}

.track:hover {
  border-color: var(--red);
  transform: translateY(-2px);
}

.track:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.track-no {
  font-family: var(--font-display);
  font-size: 1.9rem;
  line-height: 1;
  color: var(--muted);
  transition: color .3s ease;
}

.track-info {
  display: grid;
  min-width: 0;
}

.track-info strong {
  font-size: .95rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.track-info small {
  color: var(--muted);
  font-size: .82rem;
}

.track.is-active {
  border-color: var(--red);
  background: var(--surface-2);
}

.track.is-active .track-no {
  color: var(--red);
}

/* Equaliser on the active track */
.track-eq {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 16px;
  opacity: 0;
  transition: opacity .3s ease;
}

.track-eq i {
  width: 3px;
  height: 100%;
  background: var(--red);
  border-radius: 2px;
  transform-origin: bottom;
}

.track.is-active .track-eq {
  opacity: 1;
}

.track.is-active .track-eq i {
  animation: track-eq .8s ease-in-out infinite alternate;
}

.track.is-active .track-eq i:nth-child(2) {
  animation-delay: -.3s;
}

.track.is-active .track-eq i:nth-child(3) {
  animation-delay: -.55s;
}

@keyframes track-eq {
  from {
    transform: scaleY(.3);
  }

  to {
    transform: scaleY(1);
  }
}

/* Progress: fills while the client is "playing" */
.track-progress {
  position: absolute;
  inset-inline-start: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left center;
}

.track.is-active .track-progress {
  animation: track-fill var(--review-dur, 7s) linear forwards;
}

@keyframes track-fill {
  to {
    transform: scaleX(1);
  }
}

/* The now-playing panel keeps its own colours so the quote reads strongly in both themes */
.setlist-panel {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 1.25rem;
  align-content: start;
  padding: clamp(1.75rem, 4vw, 3rem);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--panel-text);
  min-height: 420px;
}

.panel-mark {
  position: absolute;
  top: 1.25rem;
  inset-inline-end: 1.75rem;
  font-size: 5rem;
  color: var(--red);
  opacity: .22;
  pointer-events: none;
}

.panel-tag {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--red);
}

.panel-stars {
  display: flex;
  gap: .35rem;
  color: var(--red);
  font-size: .95rem;
}

.panel-quote {
  margin: 0;
}

.panel-quote p {
  margin: 0;
  font-size: clamp(1.5rem, 2.9vw, 2.4rem);
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--panel-text);
  max-width: 30ch;
}

.panel-quote p.is-swapping {
  animation: quote-in .6s var(--ease) both;
}

@keyframes quote-in {
  from {
    opacity: 0;
    transform: translateY(14px);
    filter: blur(4px);
  }

  to {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

.panel-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
}

.panel-author {
  display: flex;
  align-items: center;
  gap: .9rem;
}

.panel-author strong {
  display: block;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.panel-author small {
  color: var(--panel-text);
  opacity: .7;
  font-size: .85rem;
}

.panel-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--red);
  color: #ffffff;
  font-family: var(--font-display);
  font-size: 1.1rem;
}

.panel-nav {
  display: flex;
  gap: .55rem;
}

.panel-nav button {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid currentColor;
  background: transparent;
  color: var(--panel-text);
  cursor: pointer;
  transition: background-color .25s ease, color .25s ease, transform .25s var(--ease);
}

.panel-nav button:hover {
  background: var(--red);
  border-color: var(--red);
  color: #ffffff;
  transform: scale(1.06);
}

.panel-nav button:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

/* Sound wave along the bottom of the panel */
.panel-wave {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3px;
  height: 44px;
}

.panel-wave span {
  flex: 0 0 3px;
  height: calc(var(--h) * 1%);
  border-radius: 2px;
  background: var(--red);
  opacity: .85;
  animation: wave-bar 1.4s ease-in-out infinite alternate;
  animation-delay: calc(var(--i) * -.07s);
}

@keyframes wave-bar {
  from {
    transform: scaleY(.25);
  }

  to {
    transform: scaleY(1);
  }
}

/* Pausing (hover or focus) freezes the progress, the equaliser and the wave */
.setlist.is-paused .track.is-active .track-progress,
.setlist.is-paused .track.is-active .track-eq i,
.setlist.is-paused .panel-wave span {
  animation-play-state: paused;
}

/* Tablet and up: tracks stack beside the panel */
@media (min-width: 768px) {
  .setlist-tracks {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1025px) {
  .setlist {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: 2rem;
    align-items: stretch;
  }

  .setlist-tracks {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
  }

  .track {
    padding: 1.3rem 1.4rem;
  }

  .track-no {
    font-size: 2.4rem;
  }

  .setlist-panel {
    min-height: 0;
  }
}

@media (max-width: 479px) {
  .track {
    grid-template-columns: minmax(0, 1fr);
    gap: .35rem;
    padding: .85rem .7rem;
  }

  .track-info strong {
    font-size: .8rem;
    letter-spacing: .02em;
  }

  .track-no,
  .track-eq {
    display: none;
  }

  .track-info small {
    display: none;
  }

  .setlist-panel {
    min-height: 0;
    padding: 1.5rem;
  }

  .panel-quote p {
    font-size: 1.35rem;
  }

  .panel-foot {
    justify-content: space-between;
  }
}

/* =========================================================
   INSIDE THE RIG: a spec sheet, one row per part of the rig
   ========================================================= */
.rig-grid {
  display: grid;
  gap: 3rem;
  grid-template-columns: minmax(0, 1fr);
}

.rig-head .section-title {
  margin-bottom: 1rem;
}

.rig-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--line);
}

.rig-row {
  position: relative;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 1.25rem;
  padding: 1.5rem .5rem;
  border-bottom: 1px solid var(--line);
  transition: padding .45s var(--ease);
}

.rig-row::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  bottom: -1px;
  width: 100%;
  height: 2px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .6s var(--ease);
}

.rig-row:hover {
  padding-inline-start: 1.25rem;
}

.rig-row:hover::after {
  transform: scaleX(1);
}

.rig-idx {
  font-family: var(--font-display);
  font-size: 1.8rem;
  line-height: 1;
  color: var(--muted);
  min-width: 2.2ch;
}

.rig-ico {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--red);
  color: #ffffff;
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  box-shadow: 0 14px 26px -14px var(--red-glow);
}

.rig-text h3 {
  font-size: clamp(1.7rem, 2.6vw, 2.2rem);
  margin-bottom: .3rem;
}

.rig-text p {
  color: var(--muted);
  margin: 0;
}

@media (max-width: 479px) {
  .rig-row {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .rig-idx {
    display: none;
  }
}

@media (min-width: 1025px) {
  .rig-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: start;
    gap: 4rem;
  }

  .rig-head {
    position: sticky;
    top: calc(var(--nav-h) + 2rem);
  }
}

/* =========================================================
   VENUE CHECKLIST: tick the points, the ring fills and the advice changes
   ========================================================= */
.checklist-grid {
  display: grid;
  gap: 3rem;
  grid-template-columns: minmax(0, 1fr);
}

.checklist-head .section-title {
  margin-bottom: 1rem;
}

.checklist-body {
  display: grid;
  gap: 2rem;
}

.check-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: .75rem;
}

.check-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.2rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  cursor: pointer;
  transition: border-color .3s ease, transform .3s var(--ease);
}

.check-item:hover {
  border-color: var(--red);
  transform: translateX(4px);
}

[dir="rtl"] .check-item:hover {
  transform: translateX(-4px);
}

.check-item:has(.check-input:focus-visible) {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.check-input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.check-box {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  border: 2px solid var(--line);
  display: grid;
  place-items: center;
  color: transparent;
  background: var(--surface-2);
  transition: background-color .3s ease, border-color .3s ease, color .3s ease, transform .3s var(--ease);
}

.check-box i {
  font-size: .8rem;
}

.check-input:checked+.check-box {
  background: var(--red);
  border-color: var(--red);
  color: #ffffff;
  transform: scale(1.06);
}

.check-input:checked~.check-text {
  color: var(--muted);
}

.check-text {
  font-weight: 600;
  transition: color .3s ease;
}

.check-result {
  display: grid;
  gap: 1.5rem;
  align-items: center;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.check-ring {
  position: relative;
  width: 150px;
  height: 150px;
  justify-self: center;
}

.check-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.ring-bg,
.ring-fg {
  fill: none;
  stroke-width: 10;
}

.ring-bg {
  stroke: var(--line);
}

.ring-fg {
  stroke: var(--red);
  stroke-linecap: round;
  stroke-dasharray: 326.73;
  stroke-dashoffset: 326.73;
  transition: stroke-dashoffset .7s var(--ease);
  filter: drop-shadow(0 0 8px var(--red-glow));
}

.ring-pct {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 2.6rem;
  color: var(--text);
}

.check-summary h3 {
  font-size: clamp(2rem, 3.4vw, 2.6rem);
  margin-bottom: .5rem;
}

.check-summary p {
  color: var(--muted);
  margin-bottom: 1.25rem;
}

.check-summary .btn {
  justify-self: start;
}

@media (min-width: 1025px) {
  .checklist-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: start;
    gap: 4rem;
  }

  .checklist-head {
    position: sticky;
    top: calc(var(--nav-h) + 2rem);
  }

  .check-result {
    grid-template-columns: auto minmax(0, 1fr);
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .check-result {
    grid-template-columns: auto minmax(0, 1fr);
  }
}

/* =========================================================
   LOUDNESS GUIDE: horizontal level bars with a dashed 85 dB marker
   ========================================================= */
.loud-scale {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
  display: grid;
  gap: 1.1rem;
}

.loud-row {
  display: grid;
  grid-template-columns: minmax(0, 13rem) minmax(0, 1fr) 5.5rem;
  align-items: center;
  gap: 1.25rem;
}

.loud-name {
  font-weight: 700;
}

.loud-bar {
  position: relative;
  height: 18px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  overflow: visible;
}

.loud-bar>span {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--muted), var(--text));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.2s var(--ease);
}

.loud-row.is-loud .loud-bar>span {
  background: linear-gradient(90deg, var(--red-deep), var(--red));
  box-shadow: 0 0 14px var(--red-glow);
}

.loud-scale.is-in .loud-bar>span {
  transform: scaleX(var(--k));
}

.loud-scale.is-in .loud-row:nth-child(2) .loud-bar>span {
  transition-delay: .08s;
}

.loud-scale.is-in .loud-row:nth-child(3) .loud-bar>span {
  transition-delay: .16s;
}

.loud-scale.is-in .loud-row:nth-child(4) .loud-bar>span {
  transition-delay: .24s;
}

.loud-scale.is-in .loud-row:nth-child(5) .loud-bar>span {
  transition-delay: .32s;
}

.loud-scale.is-in .loud-row:nth-child(6) .loud-bar>span {
  transition-delay: .4s;
}

/* The 85 dB marker sits at 85 / 120 of the bar width */
.loud-bar::after {
  content: "";
  position: absolute;
  top: -7px;
  bottom: -7px;
  inset-inline-start: calc(85 / 120 * 100%);
  width: 0;
  border-inline-start: 2px dashed var(--muted);
  opacity: .6;
}

.loud-db {
  font-family: var(--font-display);
  font-size: 1.6rem;
  text-align: end;
  color: var(--text);
}

.loud-note {
  display: flex;
  gap: .85rem;
  align-items: flex-start;
  color: var(--muted);
  max-width: 720px;
  margin: 0;
}

.loud-note i {
  color: var(--red);
  font-size: 1.2rem;
  margin-top: .15rem;
}

[dir="rtl"] .loud-bar>span {
  transform-origin: right center;
}

@media (max-width: 599px) {
  .loud-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "name db" "bar bar";
    row-gap: .5rem;
  }

  .loud-name {
    grid-area: name;
  }

  .loud-bar {
    grid-area: bar;
  }

  .loud-db {
    grid-area: db;
    font-size: 1.3rem;
  }
}

/* =========================================================
   HEADER DROPDOWN (Home 1 / Home 2)
   ========================================================= */
.nav-links>li {
  position: relative;
}

.nav-drop-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  background: none;
  border: 0;
  padding: .3rem 0;
  margin: 0;
  cursor: pointer;
  font: inherit;
  font-size: .76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--text);
  white-space: nowrap;
}

.nav-drop-btn i {
  font-size: .6rem;
  color: var(--red);
  transition: transform .25s ease;
}

.nav-drop-btn::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 2px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}

.nav-drop-btn:hover::after,
.nav-drop-btn.active::after,
.has-dropdown.is-open .nav-drop-btn::after {
  transform: scaleX(1);
}

.has-dropdown.is-open .nav-drop-btn i {
  transform: rotate(180deg);
}

.dropdown {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
}

.has-dropdown.is-open>.dropdown {
  display: block;
}

[dir="rtl"] .nav-drop-btn::after {
  transform-origin: right;
}

/* Mobile: the dropdown opens in the menu flow */
.nav-links.open .nav-drop-btn {
  display: flex;
  width: 100%;
  justify-content: space-between;
  padding: 1rem 0;
  border-bottom: 1px solid var(--line);
  font-size: .95rem;
}

.nav-links.open .nav-drop-btn::after {
  display: none;
}

.nav-links.open .dropdown a {
  display: block;
  padding: .85rem 0;
  padding-inline-start: 1.1rem;
  border-bottom: 1px solid var(--line);
  font-size: .9rem;
  color: var(--muted);
}

.nav-links.open .dropdown a.active {
  color: var(--red);
}

/* Large screens: floating panel */
@media (min-width: 1025px) {
  .dropdown {
    display: block;
    position: absolute;
    top: calc(100% + 14px);
    inset-inline-start: -.9rem;
    z-index: 60;
    min-width: 200px;
    padding: .5rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-top: 2px solid var(--red);
    border-radius: 14px;
    box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .7);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity .25s ease, transform .25s ease, visibility .25s;
  }

  .has-dropdown:hover>.dropdown,
  .has-dropdown:focus-within>.dropdown,
  .has-dropdown.is-open>.dropdown {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .nav-links .dropdown a {
    display: block;
    padding: .7rem .9rem;
    border-bottom: 0;
    border-radius: 10px;
    font-size: .76rem;
    color: var(--text);
  }

  .nav-links .dropdown a::after {
    display: none;
  }

  .nav-links .dropdown a:hover,
  .nav-links .dropdown a:focus-visible {
    background: var(--surface-2);
    color: var(--red);
  }

  .nav-links .dropdown a.active {
    color: var(--red);
  }
}

/* =========================================================
   HOME 2
   ========================================================= */
.h2-section {
  padding: clamp(4.5rem, 9vw, 7.5rem) 0;
  position: relative;
}

.h2-section-2 {
  background: var(--bg-2);
}

.h2-head {
  max-width: 720px;
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

.h2-head .section-title {
  margin-bottom: 1rem;
}

.h2-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}

.h2-hero-copy .h2-actions {
  margin-top: 1.5rem;
}

/* 1. Hero: red slash, outlined word, spectrum bars */
.h2-hero {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: calc(var(--nav-h) + 3rem) 0 5rem;
  overflow: hidden;
  background: var(--bg);
}

.h2-hero-slash {
  position: absolute;
  inset-block: 0;
  inset-inline: 62% -5%;
  z-index: -1;
  background: var(--red);
  clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%);
}

[dir="rtl"] .h2-hero-slash {
  clip-path: polygon(0 0, 86% 0, 100% 100%, 0 100%);
}

.h2-hero-inner {
  display: grid;
  gap: 3rem;
  align-items: center;
}

.h2-title {
  font-size: clamp(4rem, 13vw, 11rem);
  line-height: .98;
  margin: 0 0 1.5rem;
}

.h2-outline {
  color: transparent;
  -webkit-text-stroke: 2px var(--text);
}

.h2-hero-visual {
  position: relative;
  width: min(100%, 440px);
  justify-self: center;
  margin-block-end: 2.5rem;
}

.h2-disc {
  position: absolute;
  inset-inline-end: -30%;
  top: -16%;
  z-index: -1;
  font-size: min(115vw, 34rem);
  color: rgba(0, 0, 0, .2);
  pointer-events: none;
  animation: spin 26s linear infinite;
}

.h2-photo-frame {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 28px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .75);
}

.h2-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.25);
  transform-origin: 48% 40%;
}

.h2-bars {
  position: absolute;
  inset-inline: 0;
  bottom: -2.2rem;
  height: 84px;
  display: flex;
  align-items: flex-end;
  gap: 4px;
  pointer-events: none;
}

.h2-bars span {
  flex: 1;
  height: 100%;
  background: var(--red);
  transform-origin: bottom;
  animation: h2-eq 1.1s ease-in-out infinite alternate;
  animation-delay: calc(var(--i) * -.09s);
}

@keyframes h2-eq {
  from {
    transform: scaleY(.15);
  }

  to {
    transform: scaleY(1);
  }
}

.h2-badge {
  position: absolute;
  top: 1.25rem;
  inset-inline-start: -1.25rem;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: #000000;
  color: #ffffff;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .7rem 1rem;
  border-radius: 999px;
  box-shadow: 0 18px 30px -12px rgba(0, 0, 0, .6);
}

.h2-badge i {
  color: var(--red);
}

@media (min-width: 768px) {
  .h2-hero-slash {
    inset-inline: 52% -5%;
    clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%);
  }

  [dir="rtl"] .h2-hero-slash {
    clip-path: polygon(0 0, 88% 0, 100% 100%, 0 100%);
  }
}

@media (max-width: 767px) {
  .h2-hero {
    padding-bottom: 4rem;
  }

  .h2-hero-slash {
    inset-block: 60% 0;
    inset-inline: -5% -5%;
    clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 100%);
  }

  [dir="rtl"] .h2-hero-slash {
    clip-path: polygon(0 0, 100% 10%, 100% 100%, 0 100%);
  }

  .h2-hero-visual {
    width: min(100%, 320px);
  }

  .h2-disc {
    inset-inline-end: -40%;
  }

  .h2-badge {
    inset-inline-start: auto;
    inset-inline-end: -.5rem;
  }
}

@media (min-width: 1025px) {
  .h2-hero-inner {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: 4rem;
  }

  .h2-hero-visual {
    margin-block-end: 0;
  }
}

/* 2. Services rail */
.h2-rail {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  padding: 1rem max(1rem, calc((100vw - var(--container)) / 2 + 1rem)) 2.5rem;
}

.h2-rail::-webkit-scrollbar {
  display: none;
}

.h2-card {
  position: relative;
  flex: 0 0 min(80vw, 360px);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-height: 400px;
  padding: 2rem;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 28px;
  transition: transform .45s var(--ease), border-color .3s ease, box-shadow .45s ease;
}

.h2-card:hover {
  transform: translateY(-8px);
  border-color: var(--red);
  box-shadow: 0 32px 60px -28px var(--red-glow);
}

.h2-card.is-hot {
  background: var(--red);
  border-color: var(--red);
  color: #ffffff;
}

.h2-card.is-hot:hover {
  border-color: #ffffff;
}

.h2-card-no {
  font-family: var(--font-display);
  font-size: 5rem;
  line-height: .8;
  color: transparent;
  -webkit-text-stroke: 2px var(--red);
}

.h2-card.is-hot .h2-card-no {
  -webkit-text-stroke-color: #ffffff;
}

.h2-card h3 {
  font-size: clamp(2.2rem, 3.4vw, 2.8rem);
  margin: .6rem 0 0;
}

.h2-card p {
  color: var(--muted);
  margin: 0;
}

.h2-card.is-hot p {
  color: rgba(255, 255, 255, .92);
}

.h2-card-tag {
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--red);
}

.h2-card.is-hot .h2-card-tag {
  color: #ffffff;
}

.h2-card-ico {
  margin-top: auto;
  font-size: 2.4rem;
  color: var(--red);
}

.h2-card.is-hot .h2-card-ico {
  color: #000000;
}

/* 3. Mood shift (sticky word, colour follows the scroll) */
.h2-mood {
  position: relative;
  color: #ffffff;
  background: #000000;
  transition: background .9s ease;
}

.h2-mood[data-mood="warm"] {
  background: radial-gradient(circle at 15% 10%, #5c0e0e 0%, #140404 70%);
}

.h2-mood[data-mood="electric"] {
  background: radial-gradient(circle at 85% 25%, #e10f0f 0%, #3d0505 65%, #0a0000 100%);
}

.h2-mood[data-mood="neon"] {
  background: radial-gradient(circle at 50% 100%, #7d0000 0%, #0b0000 60%, #000000 100%);
}

.h2-mood[data-mood="midnight"] {
  background: #000000;
}

.h2-mood-grid {
  display: grid;
  gap: 2rem;
  padding-block: clamp(4.5rem, 9vw, 7.5rem);
}

.h2-mood-sticky {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.h2-mood-kicker {
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #ff4d4d;
}

.h2-mood-word {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 9vw, 8.5rem);
  max-width: 100%;
  overflow-wrap: anywhere;
  line-height: .8;
  text-transform: uppercase;
  color: #ffffff;
  text-shadow: 0 0 40px rgba(225, 15, 15, .35);
}

.h2-mood-word.is-swap {
  animation: h2-word-in .6s var(--ease);
}

@keyframes h2-word-in {
  from {
    opacity: 0;
    transform: translateY(24px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.h2-mood-steps {
  display: grid;
}

.h2-mood-step {
  min-height: 62vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .75rem;
  opacity: .35;
  transition: opacity .5s ease;
}

.h2-mood-step.is-active {
  opacity: 1;
}

.h2-mood-no {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: #ff4d4d;
}

.h2-mood-step h3 {
  font-size: clamp(3rem, 6vw, 5rem);
  margin: 0;
  color: #ffffff;
}

.h2-mood-step p {
  color: rgba(255, 255, 255, .82);
  font-size: 1.1rem;
  max-width: 480px;
  margin: 0;
}

@media (max-width: 1024px) {
  .h2-mood-step {
    min-height: auto;
    padding-block: 2rem;
    opacity: 1;
  }
}

@media (min-width: 1025px) {
  .h2-mood-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 4rem;
  }

  .h2-mood-sticky {
    position: sticky;
    top: 28vh;
    align-self: start;
  }
}

/* 4. Bento gallery */
.h2-bento {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: minmax(200px, auto);
}

.h2-tile {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 1rem;
  min-height: 200px;
  padding: 1.5rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 24px;
  transition: transform .4s var(--ease), border-color .3s ease;
}

.h2-tile:hover {
  transform: translateY(-4px);
  border-color: var(--red);
}

.h2-tile--big {
  min-height: 380px;
}

.h2-tile.is-red {
  background: var(--red);
  border-color: var(--red);
  color: #ffffff;
}

.h2-tile.is-red p {
  color: rgba(255, 255, 255, .92);
}

.h2-tile-ico {
  position: absolute;
  top: 1.5rem;
  inset-inline-end: 1.5rem;
  font-size: 1.8rem;
  color: var(--red);
}

.h2-tile.is-red .h2-tile-ico {
  color: #000000;
}

.h2-tile-media {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}

.h2-tile-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease);
}

.h2-tile:hover .h2-tile-media img {
  transform: scale(1.06);
}

.h2-tile--photo .h2-tile-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, .15) 60%, rgba(0, 0, 0, 0) 100%);
}

.h2-tile--photo .h2-tile-media img {
  object-fit: contain;
  padding: 12% 12% 42%;
  box-sizing: border-box;
}

.h2-tile--photo h3 {
  color: #ffffff;
}

.h2-tile--photo p {
  color: rgba(255, 255, 255, .85);
}

.h2-tile--light {
  background: #ffffff;
  border-color: #ffffff;
}

.h2-tile--light .h2-tile-media img {
  transform: scale(1.22);
  transform-origin: 48% 40%;
}

.h2-tile--light:hover .h2-tile-media img {
  transform: scale(1.26);
  transform-origin: 48% 40%;
}

.h2-tile--light h3 {
  color: #000000;
}

.h2-tile--light p {
  color: #333333;
}

.h2-tile h3 {
  font-size: clamp(2rem, 3vw, 2.6rem);
  margin: 0;
}

.h2-tile p {
  color: var(--muted);
  margin: 0;
}

@media (min-width: 768px) {
  .h2-bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .h2-tile--big {
    grid-column: span 2;
  }
}

@media (min-width: 1025px) {
  .h2-bento {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .h2-tile--big {
    grid-column: span 2;
    grid-row: span 2;
    min-height: 0;
  }
}

/* 5. Quote wall (home 2 testimonials) */
.h2-wall-head {
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

.h2-wall-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "feature" "red" "outline" "plain" "cta";
}

.h2-wall-feature {
  grid-area: feature;
}

.h2-wall-red {
  grid-area: red;
}

.h2-wall-outline {
  grid-area: outline;
}

.h2-wall-plain {
  grid-area: plain;
}

.h2-wall-cta {
  grid-area: cta;
}

.h2-wall-tile {
  position: relative;
  margin: 0;
  padding: 1.6rem;
  border-radius: 26px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  min-height: 240px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--text);
  transition: transform .45s var(--ease), border-color .3s ease, background-color .3s ease;
}

.h2-wall-tile:hover {
  transform: translateY(-6px);
  border-color: var(--red);
}

.h2-wall-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.h2-wall-stars {
  display: flex;
  gap: .3rem;
  font-size: .85rem;
  color: var(--red);
}

.h2-wall-tag {
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--red);
}

.h2-wall-no {
  font-family: var(--font-display);
  font-size: 1.6rem;
  line-height: 1;
  color: var(--red);
}

.h2-wall-tile blockquote {
  margin: 0;
  font-size: clamp(1.05rem, 1.7vw, 1.25rem);
  line-height: 1.5;
  font-weight: 600;
}

.h2-wall-tile figcaption {
  display: grid;
  gap: .2rem;
  margin-top: auto;
}

.h2-wall-tile figcaption strong {
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--red);
}

.h2-wall-tile figcaption small {
  font-size: .85rem;
  color: var(--muted);
}

/* Featured quote: black stage, big type, live sound bars */
.h2-wall-feature {
  background: #000000;
  border-color: #000000;
  color: #ffffff;
  padding: clamp(1.8rem, 4vw, 2.8rem);
  min-height: 360px;
}

.h2-wall-feature:hover {
  border-color: var(--red);
}

.h2-wall-feature .h2-wall-stars {
  color: #ffffff;
}

.h2-wall-feature .h2-wall-tag {
  color: #ff4d4d;
}

.h2-wall-feature blockquote {
  font-size: clamp(1.6rem, 3.2vw, 2.5rem);
  line-height: 1.22;
  font-weight: 700;
  max-width: 26ch;
  color: #ffffff;
}

.h2-wall-feature figcaption strong {
  color: #ff4d4d;
}

.h2-wall-feature figcaption small {
  color: rgba(255, 255, 255, .7);
}

.h2-wall-wave {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 64px;
  margin-top: auto;
}

.h2-wall-wave span {
  flex: 1;
  height: 30%;
  border-radius: 2px;
  background: var(--red);
  animation: h2-wall-wave 1.3s ease-in-out infinite alternate;
  animation-delay: calc(var(--i) * -.11s);
}

@keyframes h2-wall-wave {
  from {
    height: 14%;
  }

  to {
    height: 100%;
  }
}

/* Red and outline tiles */
.h2-wall-red {
  background: var(--red);
  border-color: var(--red);
  color: #ffffff;
}

.h2-wall-red:hover {
  border-color: #000000;
}

.h2-wall-red .h2-wall-stars,
.h2-wall-red .h2-wall-no {
  color: #ffffff;
}

.h2-wall-red figcaption strong {
  color: #ffffff;
}

.h2-wall-red figcaption small {
  color: rgba(255, 255, 255, .85);
}

.h2-wall-outline {
  background: transparent;
  border: 2px solid var(--red);
}

.h2-wall-outline:hover {
  background: rgba(225, 15, 15, .06);
}

/* Call to action tile */
.h2-wall-cta {
  justify-content: space-between;
  text-decoration: none;
  min-height: 200px;
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
}

.h2-wall-cta:hover {
  background: var(--red);
  border-color: var(--red);
  color: #ffffff;
}

.h2-wall-cta-text {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  line-height: 1;
  text-transform: uppercase;
}

.h2-wall-cta-go {
  align-self: flex-end;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--red);
  color: #ffffff;
  transition: transform .35s var(--ease);
}

.h2-wall-cta:hover .h2-wall-cta-go {
  transform: translateX(6px);
}

[dir="rtl"] .h2-wall-cta:hover .h2-wall-cta-go {
  transform: translateX(-6px);
}

@media (min-width: 768px) {
  .h2-wall-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: "feature feature" "red outline" "plain cta";
  }
}

@media (min-width: 1025px) {
  .h2-wall-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: minmax(200px, auto);
    grid-template-areas: "feature feature red outline" "feature feature plain cta";
  }

  .h2-wall-feature {
    min-height: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .h2-wall-wave span {
    animation: none;
    height: 60%;
  }

  .h2-wall-tile,
  .h2-wall-cta-go {
    transition: none;
  }
}

/* 6. FAQ */
.h2-faq-grid {
  display: grid;
  gap: 3rem;
}

.h2-faq-item {
  border-bottom: 1px solid var(--line);
}

.h2-faq-item:first-child {
  border-top: 1px solid var(--line);
}

.h2-faq-item summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.4rem 0;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  line-height: 1.1;
  text-transform: uppercase;
}

.h2-faq-item summary::-webkit-details-marker {
  display: none;
}

.h2-faq-item summary i {
  flex-shrink: 0;
  color: var(--red);
  transition: transform .35s var(--ease);
}

.h2-faq-item[open] summary i {
  transform: rotate(45deg);
}

.h2-faq-item summary:focus-visible {
  outline-offset: 4px;
}

.h2-faq-item p {
  color: var(--muted);
  max-width: 640px;
  margin: 0 0 1.5rem;
  animation: h2-faq-in .45s var(--ease);
}

@keyframes h2-faq-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@media (min-width: 1025px) {
  .h2-faq-grid {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr);
    align-items: start;
  }

  .h2-faq-grid .h2-head,
  .h2-enquire-grid .h2-head {
    position: sticky;
    top: calc(var(--nav-h) + 2rem);
  }
}

/* 7. Enquiry form */
.h2-enquire-grid {
  display: grid;
  gap: 3rem;
}

.h2-points {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
  display: grid;
  gap: .8rem;
}

.h2-points li {
  display: flex;
  align-items: center;
  gap: .8rem;
  font-weight: 600;
}

.h2-points i {
  color: var(--red);
  width: 22px;
  text-align: center;
}

.h2-form {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 28px;
  padding: clamp(1.5rem, 3.5vw, 2.75rem);
}

.h2-form .form-group.full {
  grid-column: 1 / -1;
}

.h2-form .btn-block {
  margin-top: .5rem;
}

@media (min-width: 1025px) {
  .h2-enquire-grid {
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    align-items: start;
  }
}

/* 8. Final call to action (fixed colours in both themes) */
.h2-final {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #000000;
  color: #ffffff;
  padding: clamp(3.5rem, 7vw, 5rem) 0;
  margin: clamp(1.5rem, 4vw, 3rem) clamp(1rem, 3vw, 2.5rem);
  border-radius: clamp(24px, 3vw, 36px);
}

.h2-final::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(circle at 80% 50%, rgba(225, 15, 15, .45), transparent 60%);
}

.h2-final-disc {
  position: absolute;
  inset-inline-end: -12%;
  top: 50%;
  translate: 0 -50%;
  z-index: -1;
  font-size: min(50vw, 26rem);
  color: rgba(225, 15, 15, .16);
  pointer-events: none;
  animation: spin 30s linear infinite;
}

.h2-final-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}

.h2-final .kicker {
  color: #ff4d4d;
}

.h2-final-title {
  font-size: clamp(3.2rem, 8vw, 6.5rem);
  line-height: .85;
  margin: 0;
  color: #ffffff;
}

.h2-final-title span {
  color: var(--red);
}

.h2-final p.lead {
  color: rgba(255, 255, 255, .78);
}

.h2-final .btn-outline {
  color: #ffffff;
  border-color: rgba(255, 255, 255, .7);
}

.h2-final .btn-outline:hover {
  background: #ffffff;
  color: #000000;
  border-color: #ffffff;
}

/* Review stack: keep the offset cards inside the page width */
#voices {
  overflow-x: clip;
}

/* =========================================================
   CONTACT PAGE (event date enquiry)
   ========================================================= */
.contact-grid {
  display: grid;
  gap: 3rem;
  align-items: start;
}

.contact-h {
  font-size: clamp(2.2rem, 4vw, 3rem);
  margin-bottom: 1.5rem;
}

.contact-points {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
  display: grid;
  gap: 1.25rem;
}

.contact-points li {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.cp-ico {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: var(--red);
  color: #ffffff;
  font-size: 1.1rem;
}

.contact-points strong {
  display: block;
  font-size: 1.05rem;
}

.contact-points small {
  color: var(--muted);
  font-size: .95rem;
}

.contact-direct {
  display: grid;
  gap: .75rem;
}

.contact-direct a {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  text-decoration: none;
  font-weight: 700;
  color: var(--text);
}

.contact-direct a i {
  color: var(--red);
  width: 20px;
  text-align: center;
}

.contact-direct a:hover {
  color: var(--red);
}

.enquiry-form {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 28px;
  padding: clamp(1.5rem, 3.5vw, 2.75rem);
}

.form-intro {
  color: var(--muted);
  font-size: .9rem;
  margin-bottom: 1.5rem;
}

.enquiry-form .form-group.full {
  grid-column: 1 / -1;
}

.enquiry-form .btn-block {
  margin-top: .5rem;
}

@media (min-width: 1025px) {
  .contact-grid {
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    gap: 4rem;
  }

  .contact-side {
    position: sticky;
    top: calc(var(--nav-h) + 2rem);
  }
}

/* =========================================================
   ABOUT PAGE (matches Home 1 and Home 2)
   ========================================================= */
.ab-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: calc(var(--nav-h) + 4rem) 0 clamp(4rem, 8vw, 6rem);
  background: var(--bg);
  border-bottom: 2px solid var(--red);
}

.ab-hero::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline: 58% -10%;
  z-index: -1;
  background: var(--red);
  clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%);
}

[dir="rtl"] .ab-hero::before {
  clip-path: polygon(0 0, 86% 0, 100% 100%, 0 100%);
}

.ab-hero-inner {
  display: grid;
  gap: 3rem;
  align-items: center;
}

.ab-title {
  font-size: clamp(3.6rem, 10vw, 9rem);
  line-height: .88;
  margin: 0 0 1.5rem;
}

.ab-outline {
  color: transparent;
  -webkit-text-stroke: 2px var(--text);
}

.ab-visual {
  position: relative;
  width: min(100%, 420px);
  justify-self: center;
}

.ab-badge {
  position: absolute;
  top: 1.25rem;
  inset-inline-start: -1.25rem;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: #000000;
  color: #ffffff;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .7rem 1rem;
  border-radius: 999px;
}

.ab-badge i {
  color: var(--red);
}

.ab-split {
  display: grid;
  gap: 3rem;
  align-items: center;
}

.ab-body {
  color: var(--muted);
}

.ab-quote {
  position: relative;
  background: #000000;
  color: #ffffff;
  border-radius: 28px;
  padding: clamp(2rem, 4vw, 3rem);
}

.ab-quote i {
  color: var(--red);
  font-size: 2rem;
}

.ab-quote blockquote {
  margin: .75rem 0 1rem;
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.6vw, 3rem);
  line-height: 1.05;
  text-transform: uppercase;
}

.ab-quote span {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #ff4d4d;
}

.ab-values {
  display: grid;
  gap: 1.25rem;
}

.ab-values .h2-card {
  min-height: 300px;
}

.ab-crew {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: minmax(0, 1fr);
}

.ab-member {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 2rem;
  transition: transform .4s var(--ease), border-color .3s ease;
}

.ab-member:hover {
  transform: translateY(-6px);
  border-color: var(--red);
}

.ab-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--red);
  color: #ffffff;
  font-size: 1.4rem;
  margin-bottom: 1.25rem;
}

.ab-member h3 {
  font-size: clamp(1.8rem, 2.6vw, 2.2rem);
  margin: 0 0 .5rem;
}

.ab-member p {
  color: var(--muted);
  margin: 0;
}

.ab-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 1.25rem;
  counter-reset: none;
}

.ab-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem 1.5rem;
  align-items: start;
  padding: 2rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 24px;
}

.ab-step-no {
  font-family: var(--font-display);
  font-size: 4rem;
  line-height: .8;
  color: transparent;
  -webkit-text-stroke: 2px var(--red);
  direction: ltr;
}

.ab-step h3 {
  font-size: clamp(1.8rem, 2.8vw, 2.4rem);
  margin: 0 0 .3rem;
}

.ab-step p {
  color: var(--muted);
  margin: 0;
}

@media (min-width: 768px) {
  .ab-crew {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ab-hero::before {
    inset-inline: 50% -10%;
    clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%);
  }
}

@media (max-width: 767px) {
  .ab-hero::before {
    inset-block: 62% 0;
    inset-inline: -5% -5%;
    clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 100%);
  }

  [dir="rtl"] .ab-hero::before {
    clip-path: polygon(0 0, 100% 10%, 100% 100%, 0 100%);
  }

  .ab-badge {
    inset-inline-start: auto;
    inset-inline-end: -.5rem;
  }

  .ab-step {
    grid-template-columns: minmax(0, 1fr);
  }

  .ab-step-no {
    font-size: 3rem;
  }
}

@media (min-width: 1025px) {
  .ab-hero-inner {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: 4rem;
  }

  .ab-split {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
    gap: 4rem;
  }

  .ab-values {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ab-crew {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .ab-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ab-step {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* =========================================================
   CONTACT PAGE: extra sections
   ========================================================= */
.cdate-grid {
  display: grid;
  gap: .75rem;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
}

.cdate-chip {
  display: grid;
  justify-items: center;
  gap: .15rem;
  padding: .9rem .5rem;
  cursor: pointer;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 18px;
  font: inherit;
  transition: transform .3s var(--ease), border-color .25s ease, background-color .25s ease, color .25s ease;
}

.cdate-chip small {
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

.cdate-chip strong {
  font-family: var(--font-display);
  font-size: 2rem;
  line-height: 1;
  font-weight: 400;
}

.cdate-chip:hover {
  transform: translateY(-3px);
  border-color: var(--red);
}

.cdate-chip.is-on {
  background: var(--red);
  border-color: var(--red);
  color: #ffffff;
}

.cdate-chip.is-on small {
  color: #ffffff;
}

.ccards {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: minmax(0, 1fr);
}

.ccard {
  text-decoration: none;
  color: var(--text);
  display: block;
}

.ccard h3 {
  font-size: clamp(1.8rem, 2.6vw, 2.2rem);
  margin: 0 0 .4rem;
}

.ccard p {
  color: var(--muted);
  margin: 0;
  overflow-wrap: anywhere;
}

.ccard:hover h3 {
  color: var(--red);
}

.carea-grid {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}

.carea-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}

.carea-tags span {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .85rem 1.2rem;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  font-weight: 700;
}

.carea-tags i {
  color: var(--red);
}

@media (min-width: 768px) {
  .ccards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1025px) {
  .ccards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .carea-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 4rem;
  }
}

/* Contact hero: quick reply chips */
.ct-hero .h2-title {
  font-size: clamp(3.8rem, 11vw, 9.5rem);
}

.ct-chips {
  list-style: none;
  padding: 0;
  margin: 1.75rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}

.ct-chips li {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem .95rem;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: .85rem;
  font-weight: 700;
}

.ct-chips i {
  color: var(--red);
}

.ct-hero .h2-badge {
  inset-inline-start: auto;
  inset-inline-end: -1rem;
}

/* Contact: reach us directly (split layout with channel rows) */
.cr-grid {
  display: grid;
  gap: 3rem;
  align-items: start;
}

.cr-side .section-title {
  margin-bottom: 1rem;
}

.cr-hours {
  margin-top: 2rem;
  padding: 1.5rem 1.75rem;
  background: #000000;
  color: #ffffff;
  border-radius: 24px;
  display: inline-grid;
  gap: .35rem;
}

.cr-hours-label {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #ff4d4d;
}

.cr-hours-time {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.6rem, 5vw, 3.8rem);
  line-height: 1;
  text-transform: uppercase;
}

.cr-hours-time em {
  font-style: normal;
  color: var(--red);
  font-size: .5em;
  vertical-align: middle;
}

.cr-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.cr-list li {
  border-bottom: 1px solid var(--line);
}

.cr-row {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.25rem;
  padding: 1.6rem .5rem;
  text-decoration: none;
  color: var(--text);
  transition: padding .4s var(--ease), color .3s ease;
}

.cr-row::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s var(--ease);
}

[dir="rtl"] .cr-row::before {
  transform-origin: right;
}

.cr-row:hover,
.cr-row:focus-visible {
  color: #ffffff;
  padding-inline-start: 1.5rem;
}

.cr-row:hover::before,
.cr-row:focus-visible::before {
  transform: scaleX(1);
}

.cr-row:focus-visible {
  outline-offset: -3px;
}

.cr-idx {
  font-family: var(--font-display);
  font-size: 1.6rem;
  line-height: 1;
  color: var(--muted);
  min-width: 2.2ch;
}

.cr-row:hover .cr-idx {
  color: #ffffff;
}

.cr-ico {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--red);
  font-size: 1.1rem;
  transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}

.cr-row:hover .cr-ico {
  background: #ffffff;
  color: var(--red);
  border-color: #ffffff;
}

.cr-text strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  line-height: 1;
  text-transform: uppercase;
}

.cr-text small {
  display: block;
  margin-top: .35rem;
  color: var(--muted);
  font-size: .95rem;
  overflow-wrap: anywhere;
}

.cr-row:hover .cr-text small {
  color: rgba(255, 255, 255, .9);
}

.cr-go {
  font-size: 1.2rem;
  color: var(--red);
  transition: transform .35s var(--ease), color .3s ease;
}

.cr-row:hover .cr-go {
  color: #ffffff;
  transform: translateX(6px);
}

[dir="rtl"] .cr-row:hover .cr-go {
  transform: translateX(-6px) scaleX(-1);
}

[dir="rtl"] .cr-go {
  transform: scaleX(-1);
}

@media (max-width: 480px) {
  .cr-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: .9rem;
  }

  .cr-idx {
    display: none;
  }

  .cr-ico {
    width: 46px;
    height: 46px;
  }
}

@media (min-width: 1025px) {
  .cr-grid {
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    gap: 5rem;
  }

  .cr-side {
    position: sticky;
    top: calc(var(--nav-h) + 2rem);
  }
}

/* Contact: where we play (radar coverage) */
.ca-grid {
  display: grid;
  gap: 3rem;
  align-items: center;
}

.ca-events {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  gap: .75rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ca-events li {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: 1rem 1.1rem;
  border-radius: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  font-weight: 800;
  font-size: .95rem;
  transition: background-color .3s ease, border-color .3s ease, color .3s ease, transform .3s var(--ease);
}

.ca-events li:hover {
  background: var(--red);
  border-color: var(--red);
  color: #ffffff;
  transform: translateY(-3px);
}

.ca-events li:hover .ca-n,
.ca-events li:hover i {
  color: #ffffff;
}

.ca-n {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--muted);
  direction: ltr;
}

.ca-events i {
  color: var(--red);
  width: 1.1em;
  text-align: center;
}

.ca-radar {
  position: relative;
  width: min(100%, 460px);
  aspect-ratio: 1;
  margin-inline: auto;
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle, #1a0303 0%, #000000 72%);
  border: 1px solid #2a2a2a;
  box-shadow: 0 40px 70px -40px rgba(225, 15, 15, .5);
}

.ca-ring {
  position: absolute;
  inset: 0;
  margin: auto;
  border-radius: 50%;
  border: 1px solid rgba(225, 15, 15, .4);
}

.ca-ring.r1 {
  width: 33%;
  height: 33%;
}

.ca-ring.r2 {
  width: 66%;
  height: 66%;
}

.ca-ring.r3 {
  width: 99%;
  height: 99%;
  border-color: rgba(225, 15, 15, .22);
}

.ca-sweep {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(225, 15, 15, .6), rgba(225, 15, 15, 0) 28%);
  animation: ca-spin 4s linear infinite;
}

@keyframes ca-spin {
  to {
    transform: rotate(360deg);
  }
}

.ca-dot {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ff4d4d;
  box-shadow: 0 0 0 0 rgba(255, 77, 77, .7);
  animation: ca-blip 2.4s ease-out infinite;
}

.ca-dot.d1 {
  top: 26%;
  inset-inline-start: 58%;
}

.ca-dot.d2 {
  top: 62%;
  inset-inline-start: 30%;
  animation-delay: .6s;
}

.ca-dot.d3 {
  top: 40%;
  inset-inline-start: 18%;
  animation-delay: 1.2s;
}

.ca-dot.d4 {
  top: 72%;
  inset-inline-start: 66%;
  animation-delay: 1.8s;
}

@keyframes ca-blip {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 77, 77, .7);
  }

  100% {
    box-shadow: 0 0 0 16px rgba(255, 77, 77, 0);
  }
}

.ca-center {
  position: absolute;
  top: 50%;
  inset-inline-start: 50%;
  translate: -50% -50%;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--red);
  color: #ffffff;
  font-size: 1.5rem;
  box-shadow: 0 0 0 10px rgba(225, 15, 15, .18);
}

.ca-label {
  position: absolute;
  bottom: 9%;
  inset-inline: 0;
  text-align: center;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #ffffff;
}

@media (min-width: 1025px) {
  .ca-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: 5rem;
  }
}

@media (prefers-reduced-motion: reduce) {

  .ca-sweep,
  .ca-dot {
    animation: none;
  }
}

/* Contact: what happens next (timeline) */
.wn-track {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  display: grid;
  gap: 2rem;
}

.wn-track::before {
  content: "";
  position: absolute;
  inset-inline-start: 34px;
  top: 34px;
  bottom: 34px;
  width: 2px;
  background: linear-gradient(to bottom, var(--red), var(--line));
}

.wn-step {
  position: relative;
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}

.wn-node {
  position: relative;
  z-index: 1;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #000000;
  color: #ffffff;
  border: 2px solid var(--red);
  font-size: 1.4rem;
  box-shadow: 0 0 0 8px var(--bg-2);
  transition: background-color .3s ease, color .3s ease, transform .3s var(--ease);
}

.wn-step:hover .wn-node {
  background: var(--red);
  transform: scale(1.06);
}

.wn-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 1.75rem 2rem;
  transition: border-color .3s ease, transform .4s var(--ease);
}

.wn-step:hover .wn-card {
  border-color: var(--red);
  transform: translateX(6px);
}

[dir="rtl"] .wn-step:hover .wn-card {
  transform: translateX(-6px);
}

.wn-stage {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--red);
}

.wn-card h3 {
  font-size: clamp(1.9rem, 3vw, 2.4rem);
  margin: .4rem 0 .4rem;
}

.wn-card p {
  color: var(--muted);
  margin: 0;
}

@media (min-width: 1025px) {
  .wn-track {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.5rem;
  }

  .wn-track::before {
    inset-inline: 0;
    inset-inline-start: auto;
    top: 34px;
    bottom: auto;
    width: auto;
    height: 2px;
    background: linear-gradient(to right, var(--red), var(--line));
  }

  .wn-track::before {
    left: calc(100% / 6);
    right: calc(100% / 6);
  }

  .wn-step {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
  }

  .wn-card {
    width: 100%;
  }

  .wn-step:hover .wn-card {
    transform: translateY(-6px);
  }
}

/* Contact FAQ: calm, sentence-case questions */
.ct-faq .h2-faq-item summary {
  font-family: var(--font);
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.4;
  padding: 1.2rem 0;
}

.ct-faq .h2-faq-item summary i {
  font-size: .95rem;
}

.ct-faq .h2-faq-item p {
  font-size: 1rem;
}

/* equal-height timeline cards on desktop */
@media (min-width: 1025px) {
  .wn-step {
    height: 100%;
  }

  .wn-card {
    height: 100%;
  }
}

/* Packages hero: vinyl disc frame */
.pk-hero .h2-title {
  font-size: clamp(3.4rem, 8.6vw, 7.6rem);
}

.pk-disc-frame {
  position: relative;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle, #1a0303 0%, #000000 75%);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .75);
  display: grid;
  place-items: center;
}

.pk-disc-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(225, 15, 15, .35);
  pointer-events: none;
}

.pk-disc-frame img {
  width: 78%;
  height: 78%;
  object-fit: contain;
  animation: spin 18s linear infinite;
}

.pk-visual .h2-badge {
  inset-inline-start: auto;
  inset-inline-end: -1rem;
  top: auto;
  bottom: 1rem;
}

/* Packages: which package fits */
.pf-grid {
  display: grid;
  gap: 3rem;
  align-items: center;
}

.pf-head .section-title {
  margin-bottom: 1rem;
}

.pf-control {
  margin-top: 1.75rem;
}

.pf-control label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: .75rem;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}

.pf-control output {
  font-family: var(--font-display);
  font-size: 2rem;
  line-height: 1;
  color: var(--red);
  letter-spacing: 0;
}

.pf-control input[type="range"] {
  width: 100%;
  accent-color: var(--red);
  height: 8px;
  cursor: pointer;
}

.pf-result {
  background: #000000;
  color: #ffffff;
  border-radius: 32px;
  padding: clamp(2rem, 4vw, 3rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  box-shadow: 0 40px 70px -40px rgba(225, 15, 15, .5);
}

.pf-label {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #ff4d4d;
}

.pf-name {
  font-size: clamp(3.4rem, 7vw, 5.6rem);
  line-height: .9;
  margin: 0;
  color: #ffffff;
}

.pf-desc {
  color: rgba(255, 255, 255, .8);
  margin: 0;
}

.pf-points {
  list-style: none;
  margin: .5rem 0 0;
  padding: 0;
  display: grid;
  gap: .6rem;
}

.pf-points li {
  display: flex;
  align-items: center;
  gap: .65rem;
  font-weight: 600;
}

.pf-points i {
  color: var(--red);
}

.pf-tiers {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .5rem;
}

.pf-tiers span {
  padding: .5rem .95rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .25);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .6);
  transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}

.pf-tiers span.is-on {
  background: var(--red);
  border-color: var(--red);
  color: #ffffff;
}

.pf-result .btn {
  align-self: flex-start;
  margin-top: .75rem;
}

@media (min-width: 1025px) {
  .pf-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 5rem;
  }
}

/* keep the recommender inside phone width */
.pf-grid {
  grid-template-columns: minmax(0, 1fr);
}

.pf-grid>* {
  min-width: 0;
}

#fit {
  overflow-x: clip;
}

/* Packages: included everywhere */
.pk-inc {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr);
}

.pk-inc-item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 1.75rem;
  transition: transform .4s var(--ease), border-color .3s ease;
}

.pk-inc-item:hover {
  transform: translateY(-6px);
  border-color: var(--red);
}

.pk-inc-ico {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: #000000;
  color: var(--red);
  font-size: 1.2rem;
  margin-bottom: 1rem;
  border: 1px solid var(--red);
}

.pk-inc-item h3 {
  font-size: clamp(1.8rem, 2.6vw, 2.2rem);
  margin: 0 0 .4rem;
}

.pk-inc-item p {
  color: var(--muted);
  margin: 0;
}

@media (min-width: 768px) {
  .pk-inc {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1025px) {
  .pk-inc {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Services hero */
.sv-hero .h2-title {
  font-size: clamp(3.4rem, 8.6vw, 7.6rem);
}

/* Packages: set your night (control panel) */
.fd-board {
  display: grid;
  gap: 1.5rem;
}

.fd-controls,
.fd-result {
  border-radius: 32px;
  padding: clamp(1.75rem, 4vw, 3rem);
}

.fd-controls {
  background: #000000;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 2.25rem;
  justify-content: center;
}

.fd-read {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #a3a3a3;
}

.fd-read output {
  font-family: var(--font-display);
  font-size: clamp(3.2rem, 6vw, 4.6rem);
  line-height: .9;
  letter-spacing: 0;
  color: var(--red);
}

.fd-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 12px;
  margin: 1rem 0 .6rem;
  border-radius: 999px;
  outline: none;
  cursor: pointer;
  background: linear-gradient(to right, var(--red) 0 var(--p, 50%), #2a2a2a var(--p, 50%) 100%);
}

.fd-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #ffffff;
  border: 6px solid var(--red);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .6);
}

.fd-range::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #ffffff;
  border: 6px solid var(--red);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .6);
}

.fd-range:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 6px;
}

.fd-ticks {
  display: flex;
  justify-content: space-between;
  font-size: .72rem;
  font-weight: 700;
  color: #7a7a7a;
  letter-spacing: .06em;
}

.fd-note {
  margin: 0;
  font-size: .92rem;
  color: #a3a3a3;
  display: flex;
  gap: .6rem;
  align-items: flex-start;
}

.fd-note i {
  color: var(--red);
  margin-top: .2rem;
}

.fd-result {
  background: var(--red);
  color: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  box-shadow: 0 40px 70px -40px rgba(225, 15, 15, .7);
}

.fd-label {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .85);
}

.fd-name {
  font-size: clamp(3.6rem, 8vw, 6rem);
  line-height: .9;
  margin: 0;
  color: #ffffff;
}

.fd-desc {
  margin: 0;
  font-size: 1.05rem;
  color: rgba(255, 255, 255, .92);
}

.fd-points {
  list-style: none;
  margin: .5rem 0 0;
  padding: 0;
  display: grid;
  gap: .6rem;
}

.fd-points li {
  display: flex;
  align-items: center;
  gap: .65rem;
  font-weight: 700;
}

.fd-points i {
  color: #000000;
}

.fd-tiers {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .5rem;
}

.fd-tiers span {
  padding: .5rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .55);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #ffffff;
  transition: background-color .3s ease, color .3s ease;
}

.fd-tiers span.is-on {
  background: #000000;
  border-color: #000000;
}

.fd-result .btn {
  align-self: flex-start;
  margin-top: .75rem;
}

@media (min-width: 1025px) {
  .fd-board {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: 0;
    border-radius: 32px;
    overflow: hidden;
  }

  .fd-controls,
  .fd-result {
    border-radius: 0;
  }
}

/* Packages: chip picker and tier cards */
.fp-picker {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 28px;
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  display: grid;
  gap: 1.5rem;
}

.fp-row {
  display: grid;
  gap: .75rem;
}

.fp-label {
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}

.fp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}

.fp-chip {
  font: inherit;
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1;
  padding: .8rem 1.4rem;
  border-radius: 999px;
  cursor: pointer;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--line);
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s var(--ease);
}

.fp-chip:hover {
  border-color: var(--red);
  transform: translateY(-2px);
}

.fp-chip.is-on {
  background: var(--red);
  border-color: var(--red);
  color: #ffffff;
}

.fp-chip:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.fp-summary {
  margin: 0;
  display: flex;
  align-items: center;
  gap: .6rem;
  font-weight: 700;
  color: var(--text);
}

.fp-summary i {
  color: var(--red);
}

.fp-tiers {
  margin-top: 2rem;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: minmax(0, 1fr);
}

.fp-tier {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding: 2rem;
  border-radius: 28px;
  background: var(--surface);
  border: 1px solid var(--line);
  opacity: .72;
  filter: saturate(.7);
  transform: scale(.98);
  transition: opacity .4s ease, transform .5s var(--ease), background-color .4s ease, border-color .4s ease, filter .4s ease, box-shadow .4s ease;
}

.fp-tier h3 {
  font-size: clamp(2.6rem, 4vw, 3.4rem);
  margin: 0;
}

.fp-specs {
  margin: 0;
  color: var(--muted);
  font-size: .95rem;
}

.fp-ico {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: #000000;
  color: var(--red);
  font-size: 1.1rem;
  margin-bottom: .25rem;
  transition: background-color .4s ease, color .4s ease;
}

.fp-tier ul {
  list-style: none;
  margin: .5rem 0 0;
  padding: 0;
  display: grid;
  gap: .55rem;
  flex: 1;
}

.fp-tier li {
  display: flex;
  gap: .6rem;
  align-items: center;
  font-weight: 600;
}

.fp-tier li i {
  color: var(--red);
}

.fp-link {
  margin-top: .75rem;
  color: var(--text);
  font-weight: 800;
  text-decoration: none;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .8rem;
}

.fp-link:hover {
  color: var(--red);
}

.fp-badge {
  position: absolute;
  top: -13px;
  inset-inline-start: 1.75rem;
  background: #000000;
  color: #ffffff;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .45rem .9rem;
  border-radius: 999px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .3s ease, transform .3s ease;
}

.fp-tier.is-pick {
  opacity: 1;
  filter: none;
  transform: none;
  background: var(--red);
  border-color: var(--red);
  color: #ffffff;
  box-shadow: 0 34px 70px -30px rgba(225, 15, 15, .7);
}

.fp-tier.is-pick .fp-specs,
.fp-tier.is-pick li {
  color: #ffffff;
}

.fp-tier.is-pick li i {
  color: #000000;
}

.fp-tier.is-pick .fp-ico {
  background: #000000;
  color: #ffffff;
}

.fp-tier.is-pick .fp-link {
  color: #ffffff;
}

.fp-tier.is-pick .fp-badge {
  opacity: 1;
  transform: none;
}

@media (min-width: 768px) {
  .fp-tiers {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
  }
}

@media (min-width: 1025px) {
  .fp-tier.is-pick {
    transform: translateY(-14px);
  }
}

/* Packages: stage panels (bold picker) */
.fp-section {
  background: #000000;
  color: #ffffff;
  padding-top: clamp(4.5rem, 9vw, 7.5rem);
  overflow-x: clip;
}

.fp-head {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.fp-title {
  font-size: clamp(3.6rem, 9vw, 8rem);
  line-height: .86;
  margin: 0;
  color: #ffffff;
}

.fp-title .red {
  color: var(--red);
}

.fp-section .kicker {
  color: #ff4d4d;
}

.fp-bar {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid #262626;
  border-radius: 24px;
  background: #0a0a0a;
}

.fp-row {
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.fp-label {
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #8a8a8a;
}

.fp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.fp-chip {
  font: inherit;
  font-family: var(--font-display);
  font-size: 1.3rem;
  line-height: 1;
  padding: .6rem 1.1rem;
  border-radius: 999px;
  cursor: pointer;
  background: #000000;
  color: #ffffff;
  border: 1px solid #333333;
  transition: background-color .25s ease, border-color .25s ease;
}

.fp-chip:hover {
  border-color: var(--red);
}

.fp-chip.is-on {
  background: var(--red);
  border-color: var(--red);
}

.fp-chip:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.fp-summary {
  margin: 0;
  font-weight: 700;
  color: #ffffff;
}

.fp-stage {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.fp-panel {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 280px;
  padding: clamp(1.25rem, 2.2vw, 2rem);
  transition: flex-grow .7s var(--ease), background-color .4s ease;
  flex: 1 1 0;
}

.fp-essential {
  background: #0d0d0d;
}

.fp-premium {
  background: #3a0606;
}

.fp-ultimate {
  background: var(--red);
}

.fp-panel:hover {
  filter: brightness(1.08);
}

.fp-num {
  position: absolute;
  top: 1.25rem;
  inset-inline-end: 1.75rem;
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 7vw, 5.5rem);
  line-height: .8;
  color: transparent;
  -webkit-text-stroke: 2px rgba(255, 255, 255, .5);
}

.fp-body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  max-width: 420px;
}

.fp-body h3 {
  font-size: clamp(2.8rem, 4.6vw, 4rem);
  line-height: .9;
  margin: 0;
  color: #ffffff;
}

.fp-specs {
  margin: 0;
  color: rgba(255, 255, 255, .75);
  font-size: .95rem;
}

.fp-body ul {
  list-style: none;
  margin: .5rem 0 0;
  padding: 0;
  display: grid;
  gap: .45rem;
}

.fp-body li {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-weight: 600;
  color: #ffffff;
}

.fp-body li i {
  color: var(--red);
}

.fp-ultimate .fp-body li i {
  color: #000000;
}

.fp-cta {
  margin-top: .9rem;
  align-self: flex-start;
  color: #ffffff;
  text-decoration: none;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: .8rem;
  border-bottom: 2px solid rgba(255, 255, 255, .6);
  padding-bottom: .25rem;
}

.fp-cta:hover {
  border-color: #ffffff;
}

.fp-pick-tag {
  position: absolute;
  top: 1.25rem;
  inset-inline-start: 1.5rem;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  background: #ffffff;
  color: #000000;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .45rem .9rem;
  border-radius: 999px;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .35s ease, transform .35s ease;
}

.fp-panel.is-pick .fp-pick-tag {
  opacity: 1;
  transform: none;
}

.fp-panel.is-pick {
  flex-grow: 2.4;
}

@media (min-width: 1025px) {
  .fp-stage {
    flex-direction: row;
    min-height: 400px;
  }

  .fp-panel {
    min-height: 400px;
  }

  .fp-head {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
  }

  .fp-bar {
    min-width: 420px;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .fp-stage {
    flex-direction: column;
  }

  .fp-panel {
    min-height: 260px;
  }

  .fp-panel.is-pick {
    flex-grow: 1;
  }
}

/* v38: ledger layout, cream rows with one red picked row */
.fp-stage {
  flex-direction: column;
  gap: .75rem;
  min-height: 0;
}

.fp-stage .fp-panel {
  flex: 0 0 auto;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(1rem, 3vw, 2.5rem);
  min-height: 0;
  padding: 1.35rem clamp(1.25rem, 3vw, 2.25rem);
  border-radius: 22px;
  background: #efe9dd;
  color: #000000;
  transition: background-color .4s ease, transform .4s ease;
}

.fp-stage .fp-panel.is-pick {
  background: var(--red);
  color: #ffffff;
  flex-grow: 0;
  padding: 2.1rem clamp(1.25rem, 3vw, 2.5rem);
  transform: scale(1.01);
}

.fp-stage .fp-panel:hover {
  filter: none;
}

.fp-stage .fp-num {
  position: static;
  flex: 0 0 auto;
  font-size: clamp(2.6rem, 5vw, 3.8rem);
  -webkit-text-stroke: 1.5px rgba(0, 0, 0, .35);
}

.fp-stage .fp-panel.is-pick .fp-num {
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, .7);
}

.fp-stage .fp-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto;
  align-items: center;
  gap: 1rem clamp(1rem, 2.5vw, 2rem);
  max-width: none;
  width: 100%;
}

.fp-stage .fp-body h3 {
  font-size: clamp(2.2rem, 3.6vw, 3.2rem);
  color: inherit;
}

.fp-stage .fp-specs {
  color: #4a4a4a;
  font-size: .9rem;
}

.fp-stage .fp-panel.is-pick .fp-specs {
  color: rgba(255, 255, 255, .85);
}

.fp-stage .fp-body ul {
  margin: 0;
  gap: .3rem;
}

.fp-stage .fp-body li {
  color: inherit;
  font-size: .95rem;
}

.fp-stage .fp-body li i {
  color: var(--red);
}

.fp-stage .fp-panel.is-pick .fp-body li i {
  color: #ffffff;
}

.fp-stage .fp-cta {
  margin: 0;
  color: #000000;
  border-color: rgba(0, 0, 0, .35);
  white-space: nowrap;
}

.fp-stage .fp-panel.is-pick .fp-cta {
  color: #ffffff;
  border-color: rgba(255, 255, 255, .7);
}

.fp-stage .fp-pick-tag {
  position: static;
  order: -1;
  flex: 0 0 auto;
  background: #000000;
  color: #ffffff;
}

.fp-stage .fp-panel.is-pick .fp-pick-tag {
  background: #ffffff;
  color: #000000;
}

.fp-stage .fp-panel.is-pick .fp-pick-tag {
  opacity: 1;
  transform: none;
}

.fp-stage .fp-panel:not(.is-pick) .fp-pick-tag {
  display: none;
}

@media (max-width: 767px) {
  .fp-stage .fp-panel {
    flex-direction: column;
    align-items: flex-start;
  }

  .fp-stage .fp-body {
    grid-template-columns: 1fr;
  }

  .fp-stage .fp-num {
    font-size: 2.4rem;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .fp-stage .fp-body {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .fp-stage .fp-body ul {
    grid-column: 1 / -1;
  }
}

/* v39: three packages side by side, content side by side inside each card */
@media (min-width: 768px) {
  .fp-stage {
    flex-direction: row;
    align-items: stretch;
    gap: 1rem;
  }

  .fp-stage .fp-panel {
    flex: 1 1 0;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 1rem;
    min-height: 360px;
    padding: 1.6rem 1.4rem;
  }

  .fp-stage .fp-panel.is-pick {
    padding: 2rem 1.6rem;
    transform: none;
  }

  .fp-stage .fp-num {
    order: 0;
  }

  .fp-stage .fp-pick-tag {
    order: 0;
  }

  .fp-stage .fp-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .6rem;
    width: 100%;
  }

  .fp-stage .fp-body ul {
    margin-top: .3rem;
  }

  .fp-stage .fp-cta {
    margin-top: auto;
  }

  .fp-stage .fp-body h3 {
    font-size: clamp(2.2rem, 3vw, 2.9rem);
  }
}

@media (min-width: 1025px) {
  .fp-stage .fp-panel {
    min-height: 400px;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .fp-stage .fp-body {
    grid-template-columns: none;
  }
}

/* v40: picker on the left, packages on the right */
.fp-head {
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.fp-layout {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.fp-side {
  width: 100%;
}

.fp-side .fp-bar {
  min-width: 0;
}

@media (min-width: 1025px) {
  .fp-layout {
    display: grid;
    grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
    gap: 2rem;
    align-items: start;
  }

  .fp-side {
    position: sticky;
    top: 7rem;
  }

  .fp-stage {
    min-height: 0;
  }
}

/* v41: packages as compact ledger rows beside the picker (desktop) */
@media (min-width: 1025px) {
  .fp-stage {
    flex-direction: column;
    gap: .6rem;
  }

  .fp-stage .fp-panel {
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 1rem;
    padding: .9rem 1.1rem;
    border-radius: 16px;
    min-height: 0;
  }

  .fp-stage .fp-panel.is-pick {
    padding: 1.1rem 1.25rem;
  }

  .fp-stage .fp-num {
    font-size: 2.2rem;
    flex: 0 0 auto;
  }

  .fp-stage .fp-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1.2fr);
    align-items: center;
    gap: .4rem 1rem;
    width: 100%;
  }

  .fp-stage .fp-body h3 {
    font-size: 1.8rem;
  }

  .fp-stage .fp-body ul {
    margin: 0;
    gap: .15rem;
  }

  .fp-stage .fp-body li {
    font-size: .8rem;
  }

  .fp-stage .fp-specs {
    font-size: .78rem;
  }

  .fp-stage .fp-cta {
    margin: .35rem 0 0;
    font-size: .68rem;
  }

  .fp-stage .fp-panel.is-pick .fp-body h3 {
    color: #ffffff;
  }

  .fp-stage .fp-pick-tag {
    font-size: .58rem;
    padding: .3rem .6rem;
  }
}

/* v42: desktop shows only package name and booking link beside the picker */
@media (min-width: 1025px) {

  .fp-stage .fp-num,
  .fp-stage .fp-specs,
  .fp-stage .fp-body ul {
    display: none;
  }

  .fp-stage .fp-panel {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: .35rem;
    padding: 1rem 1.25rem;
    min-height: 0;
  }

  .fp-stage .fp-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .35rem;
    width: 100%;
  }

  .fp-stage .fp-body h3 {
    font-size: 2rem;
  }

  .fp-stage .fp-cta {
    margin: 0;
    font-size: .7rem;
  }

  .fp-stage .fp-pick-tag {
    position: static;
    order: 0;
    margin-bottom: .2rem;
  }
}

/* Packages: bold custom-night band */
.custom-band {
  position: relative;
  overflow: hidden;
  background: var(--red);
  color: #ffffff;
  padding: clamp(4rem, 8vw, 6.5rem) 0;
}

.custom-band::after {
  content: "+";
  position: absolute;
  inset-inline-end: -.1em;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-size: clamp(16rem, 36vw, 30rem);
  line-height: 1;
  color: rgba(0, 0, 0, .12);
  pointer-events: none;
}

.custom-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.cb-tag {
  align-self: flex-start;
  background: #ffffff;
  color: #000000;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: .5rem .95rem;
  border-radius: 999px;
}

.cb-title {
  font-size: clamp(3.8rem, 11vw, 9.5rem);
  line-height: .84;
  margin: 0;
  color: #ffffff;
  text-transform: uppercase;
}

.cb-title span {
  color: #000000;
}

.cb-foot {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: flex-start;
  border-top: 2px solid rgba(0, 0, 0, .35);
  padding-top: 1.5rem;
}

.cb-foot p {
  margin: 0;
  max-width: 46ch;
  color: #ffffff;
  font-size: 1.05rem;
}

.cb-btn {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  background: #000000;
  color: #ffffff;
  text-decoration: none;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: .85rem;
  padding: 1.05rem 1.6rem;
  border-radius: 999px;
  transition: transform .25s ease, background-color .25s ease;
}

.cb-btn:hover {
  transform: translateY(-2px);
  background: #1c1c1c;
}

.cb-btn:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 4px;
}

@media (min-width: 900px) {
  .cb-foot {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

/* Packages: included horizontal slider on black */
.inc-band {
  background: #000000;
  color: #ffffff;
  padding: clamp(4.5rem, 9vw, 7rem) 0;
  overflow-x: clip;
}

.inc-band .kicker {
  color: #ff4d4d;
}

.inc-band .section-title {
  color: #ffffff;
  margin: 0;
}

.inc-band .red {
  color: var(--red);
}

.inc-head {
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.inc-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}

.inc-track::-webkit-scrollbar {
  display: none;
}

.inc-track:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 4px;
}

.inc-slide {
  position: relative;
  flex: 0 0 100%;
  scroll-snap-align: start;
  min-height: 360px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: .9rem;
  padding: clamp(1.5rem, 4vw, 3rem) 0 0;
  border-top: 3px solid var(--red);
}

.inc-slide .inc-num {
  position: absolute;
  top: clamp(1rem, 3vw, 2rem);
  inset-inline-end: 0;
  font-family: var(--font-display);
  font-size: clamp(6rem, 22vw, 14rem);
  line-height: .8;
  color: transparent;
  -webkit-text-stroke: 1.5px #3a3a3a;
}

.inc-slide i {
  color: var(--red);
  font-size: 2rem;
}

.inc-slide h3 {
  font-size: clamp(3rem, 9vw, 6.5rem);
  line-height: .86;
  margin: 0;
  color: #ffffff;
  text-transform: uppercase;
}

.inc-slide p {
  margin: 0;
  color: #b5b5b5;
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  max-width: 40ch;
}

.inc-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2rem;
}

.inc-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid #444444;
  background: transparent;
  color: #ffffff;
  cursor: pointer;
  display: inline-grid;
  place-items: center;
  transition: background-color .25s ease, border-color .25s ease;
}

.inc-btn:hover {
  background: var(--red);
  border-color: var(--red);
}

.inc-btn:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.inc-dots {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  justify-content: center;
}

.inc-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 0;
  padding: 0;
  background: #444444;
  cursor: pointer;
  transition: width .3s ease, background-color .3s ease;
}

.inc-dot.is-on {
  width: 30px;
  background: var(--red);
}

/* Packages: add-ons as a menu list with a sliding accent bar */
.ad-wrap {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
}

.ad-intro {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
}

.ad-intro .section-title {
  margin: 0;
}

.ad-link {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin-top: .5rem;
  color: inherit;
  text-decoration: none;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: .8rem;
  border-bottom: 2px solid var(--red);
  padding-bottom: .3rem;
}

.ad-link:hover {
  color: var(--red);
}

.ad-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 2px solid currentColor;
}

.ad-row {
  position: relative;
  display: grid;
  grid-template-columns: 3.2rem minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: start;
  padding: 1.5rem .25rem;
  border-bottom: 1px dashed rgba(128, 128, 128, .45);
  transition: padding-inline-start .35s ease;
}

.ad-row::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--red);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .35s ease;
}

.ad-row:hover {
  padding-inline-start: 1.25rem;
}

.ad-row:hover::before {
  transform: scaleY(1);
}

.ad-no {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--red);
  line-height: 1.5;
}

.ad-name {
  font-size: clamp(2rem, 4vw, 3.1rem);
  line-height: .92;
  margin: 0 0 .4rem;
  text-transform: uppercase;
}

.ad-main p {
  margin: 0 0 .7rem;
  opacity: .75;
  max-width: 46ch;
}

.ad-tag {
  display: inline-block;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .35rem .7rem;
  border-radius: 999px;
  border: 1px solid rgba(128, 128, 128, .5);
}

.ad-ico {
  font-size: 1.5rem;
  color: var(--red);
  margin-top: .35rem;
}

.ad-row.is-hot .ad-name {
  color: var(--red);
}

.ad-row.is-hot .ad-tag {
  background: var(--red);
  border-color: var(--red);
  color: #ffffff;
}

@media (min-width: 900px) {
  .ad-wrap {
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    align-items: start;
  }

  .ad-intro {
    position: sticky;
    top: 7rem;
  }
}

/* Packages: choosing-well staircase, steps offset to the right on desktop */
.ch-stair {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2.75rem;
}

.ch-step {
  position: relative;
  max-width: 640px;
  padding-inline-start: 2.25rem;
  border-inline-start: 6px solid var(--red);
}

.ch-q {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(4.5rem, 10vw, 7.5rem);
  line-height: .8;
  color: var(--red);
  margin-bottom: .6rem;
}

.ch-step h3 {
  font-size: clamp(2.2rem, 4.5vw, 3.6rem);
  line-height: .92;
  margin: 0 0 .5rem;
  text-transform: uppercase;
}

.ch-step p {
  margin: 0;
  opacity: .75;
  max-width: 42ch;
}

@media (min-width: 900px) {
  .ch-step:nth-child(2) {
    margin-inline-start: 8%;
  }

  .ch-step:nth-child(3) {
    margin-inline-start: 16%;
  }
}

/* Packages: "match your night" quiet list */
.pn-calm {
  padding: clamp(4rem, 8vw, 6rem) 0;
}

.pn-calm .section-title {
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  font-weight: 600;
  text-transform: none;
  letter-spacing: -.01em;
  line-height: 1.15;
  margin: 0 0 clamp(1.75rem, 3vw, 2.5rem);
}

.pn-calm .section-title .red {
  color: inherit;
}

.pn-calm .kicker {
  font-size: .72rem;
}

.pn-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 720px;
}

.pn-list li {
  border-bottom: 1px solid rgba(128, 128, 128, .25);
}

.pn-list li:first-child {
  border-top: 1px solid rgba(128, 128, 128, .25);
}

.pn-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem .25rem;
  text-decoration: none;
  color: inherit;
  transition: padding-inline-start .3s ease;
}

.pn-event {
  display: inline-flex;
  align-items: center;
  gap: .85rem;
  font-size: 1.1rem;
  font-weight: 500;
}

.pn-event i {
  color: var(--red);
  font-size: 1rem;
  width: 1.2rem;
  text-align: center;
}

.pn-arrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .9rem;
  opacity: .6;
  transition: opacity .3s ease;
}

.pn-arrow i {
  font-size: .8rem;
}

.pn-row:hover {
  padding-inline-start: .6rem;
}

.pn-row:hover .pn-arrow {
  opacity: 1;
}

.pn-row:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

/* Packages: choosing-well with a sticky image on the right (restored) */
.ch-wrap {
  display: grid;
  gap: 3rem;
  align-items: start;
}

.ch-pic {
  margin: 0;
  display: grid;
  place-items: center;
}

.ch-pic img {
  width: min(100%, 360px);
  height: auto;
}

@media (min-width: 900px) {
  .ch-wrap {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
    gap: 4rem;
  }

  .ch-pic {
    position: sticky;
    top: 7.5rem;
  }

  .ch-pic img {
    width: 100%;
    max-width: 420px;
  }
}

/* Packages: booking band in white instead of red (restored) */
.cta.cta-light {
  background: #f4f4f2;
  color: #000000;
  border-top: 1px solid #e6e6e6;
}

.cta.cta-light .cta-title {
  color: #000000;
}

.cta.cta-light .cta-title span {
  color: var(--red);
}

.cta.cta-light .cta-side p {
  color: #3a3a3a;
}

.cta.cta-light .cta-deco {
  color: var(--red);
  opacity: .07;
}

/* Packages: match-your-night with a photo on the right (temporary placeholder image) */
.pn-grid {
  display: grid;
  gap: 2.5rem;
  align-items: start;
}

.pn-pic {
  margin: 0;
}

.pn-pic img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 20px;
  object-fit: cover;
  aspect-ratio: 4 / 5;
  background: #e9e9e9;
}

@media (min-width: 900px) {
  .pn-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, .8fr);
    gap: 4rem;
    align-items: stretch;
  }

  .pn-pic {
    position: relative;
  }

  .pn-pic img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
  }
}

/* Services: lighting as a timeline (no cards) */
.lt-line {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  display: grid;
  gap: 2.5rem;
}

.lt-line::before {
  content: "";
  position: absolute;
  inset-inline-start: 1.25rem;
  top: 0;
  bottom: 0;
  width: 2px;
  background: rgba(128, 128, 128, .3);
}

.lt-step {
  position: relative;
  padding-inline-start: 4.25rem;
}

.lt-dot {
  position: absolute;
  inset-inline-start: 0;
  top: -.1rem;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--red);
  color: #ffffff;
  display: grid;
  place-items: center;
  font-size: .95rem;
}

.lt-tier {
  display: inline-block;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: .5rem;
}

.lt-step h3 {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  line-height: .95;
  margin: 0 0 .5rem;
  text-transform: uppercase;
}

.lt-step p {
  margin: 0 0 .6rem;
  opacity: .75;
  max-width: 40ch;
}

.lt-note {
  display: block;
  font-size: .9rem;
  opacity: .6;
}

@media (min-width: 900px) {
  .lt-line {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.5rem;
    padding-top: 0;
  }

  .lt-line::before {
    inset-inline-start: 0;
    inset-inline-end: 0;
    top: 1.15rem;
    bottom: auto;
    width: auto;
    height: 2px;
  }

  .lt-step {
    padding-inline-start: 0;
    padding-top: 4.25rem;
  }

  .lt-dot {
    top: 0;
  }
}

/* Services: events as an animated index list (no tiles) */
.ev-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(128, 128, 128, .3);
}

.ev-row {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr) auto;
  align-items: center;
  gap: .4rem 1rem;
  padding: 1.15rem .75rem;
  border-bottom: 1px solid rgba(128, 128, 128, .3);
  cursor: default;
  isolation: isolate;
  transition: color .35s ease;
}

.ev-row::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .5s cubic-bezier(.2, .7, .2, 1);
  z-index: -1;
}

.ev-row:hover,
.ev-row:focus-visible {
  color: #ffffff;
}

.ev-row:hover::before,
.ev-row:focus-visible::before {
  transform: scaleX(1);
}

.ev-row:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.ev-no {
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .12em;
  color: var(--red);
  transition: color .35s ease;
}

.ev-row:hover .ev-no,
.ev-row:focus-visible .ev-no {
  color: #ffffff;
}

.ev-name {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  font-size: clamp(1.4rem, 3vw, 2.1rem);
  font-weight: 600;
  letter-spacing: -.01em;
}

.ev-name i {
  font-size: .85em;
  color: var(--red);
  transition: transform .5s ease, color .35s ease;
}

.ev-row:hover .ev-name i,
.ev-row:focus-visible .ev-name i {
  color: #ffffff;
  animation: ev-wiggle .6s ease;
}

.ev-desc {
  grid-column: 2;
  font-size: .95rem;
  opacity: .7;
  transform: translateX(-.6rem);
  transition: transform .45s ease, opacity .45s ease;
}

.ev-row:hover .ev-desc,
.ev-row:focus-visible .ev-desc {
  transform: translateX(0);
  opacity: .95;
}

.ev-arrow {
  font-size: 1.1rem;
  color: var(--red);
  transition: transform .45s ease, color .35s ease;
}

.ev-row:hover .ev-arrow,
.ev-row:focus-visible .ev-arrow {
  color: #ffffff;
  transform: translateX(.5rem);
}

@keyframes ev-wiggle {
  0% {
    transform: rotate(0);
  }

  30% {
    transform: rotate(-14deg) scale(1.1);
  }

  60% {
    transform: rotate(10deg);
  }

  100% {
    transform: rotate(0);
  }
}

@media (min-width: 900px) {
  .ev-row {
    grid-template-columns: 2.6rem minmax(0, 1fr) minmax(0, 1fr) auto;
  }

  .ev-desc {
    grid-column: auto;
  }
}

@media (prefers-reduced-motion: reduce) {

  .ev-row::before,
  .ev-desc,
  .ev-arrow,
  .ev-name i {
    transition: none;
  }

  .ev-row:hover .ev-name i {
    animation: none;
  }
}

/* Services: booking band as an inset rounded card with an offset shadow */
.cta.cta-inset {
  margin: clamp(2.5rem, 5vw, 4rem) clamp(1rem, 3vw, 2rem) clamp(3.5rem, 6vw, 5rem);
  border-radius: 32px;
  overflow: hidden;
  position: relative;
  box-shadow: 12px 12px 0 #7a0b0b;
}

@media (max-width: 767px) {
  .cta.cta-inset {
    border-radius: 24px;
    box-shadow: 8px 8px 0 #7a0b0b;
  }
}

/* Services: events as flip cards. Hover (or tap) turns a card over to show what we bring. */
.evp-hint {
  color: var(--muted);
  font-size: .95rem;
  margin: 0 0 1.5rem;
}

.evp-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: minmax(0, 1fr);
}

.evp-slot {
  min-width: 0;
}

.evp-card {
  position: relative;
  display: block;
  width: 100%;
  height: 260px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: start;
  cursor: pointer;
  perspective: 1200px;
  border-radius: 22px;
}

.evp-card:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 4px;
}

.evp-inner {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform .8s var(--ease);
}

.evp-card.is-flipped .evp-inner {
  transform: rotateY(180deg);
}

@media (hover: hover) {
  .evp-card:hover .evp-inner {
    transform: rotateY(180deg);
  }
}

.evp-face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 1.6rem;
  border-radius: 22px;
  border: 1px solid var(--line);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
}

.evp-front {
  background: var(--surface);
}

.evp-front::after {
  content: "";
  position: absolute;
  inset-inline-end: -40px;
  bottom: -40px;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--red-glow), transparent);
  opacity: .6;
  pointer-events: none;
}

.evp-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.evp-num {
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--red);
  line-height: 1;
}

.evp-ico {
  width: 60px;
  height: 60px;
  border-radius: 18px;
  background: var(--red);
  color: #ffffff;
  display: grid;
  place-items: center;
  font-size: 1.45rem;
  box-shadow: 0 14px 26px -12px var(--red-glow);
}

.evp-name {
  margin-top: auto;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(2.2rem, 3.6vw, 3rem);
  line-height: .95;
  color: var(--text);
  position: relative;
}

.evp-back {
  transform: rotateY(180deg);
  background: var(--red);
  border-color: var(--red);
  color: #ffffff;
}

.evp-back-name {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 2rem;
  line-height: 1;
}

.evp-desc {
  display: block;
  margin: .9rem 0 1.1rem;
  font-size: 1.02rem;
  line-height: 1.5;
  opacity: .92;
}

.evp-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}

.evp-tag {
  font-size: .78rem;
  font-weight: 700;
  padding: .38rem .75rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .55);
  background: rgba(0, 0, 0, .12);
}

.evp-more {
  margin-top: auto;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .85;
}

.evp-more i {
  margin-inline-start: .3rem;
}

@media (min-width: 600px) {
  .evp-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1025px) {
  .evp-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
  }

  .evp-card {
    height: 320px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .evp-inner {
    transition: none;
  }
}


/* =========================================================
   PRICING TICKETS: three event tickets with a perforated stub
   The notches are cut with circles in the section colour.
   ========================================================= */
.pt-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2rem;
  grid-template-columns: minmax(0, 1fr);
}

.pt-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 24px;
  transition: transform .45s var(--ease), box-shadow .45s ease, border-color .3s ease;
}

.pt-card:hover {
  transform: translateY(-6px) rotate(-.35deg);
  box-shadow: 0 30px 50px -30px var(--red-glow);
  border-color: var(--red);
}

.pt-main {
  display: grid;
  gap: .65rem;
  padding: 2.2rem 1.9rem 1.6rem;
}

.pt-no {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}

.pt-card h3 {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(2.2rem, 3vw, 2.8rem);
  line-height: .95;
  margin: 0;
}

.pt-specs {
  list-style: none;
  margin: .4rem 0 0;
  padding: 0;
  display: grid;
  gap: .55rem;
  color: var(--muted);
  font-size: .95rem;
}

.pt-specs li {
  display: flex;
  align-items: center;
  gap: .6rem;
}

.pt-specs i {
  color: var(--red);
  width: 1.1rem;
  text-align: center;
}

/* Perforated stub with two notches */
.pt-stub {
  position: relative;
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.4rem 1.9rem;
  background: var(--surface-2);
  border-top: 2px dashed var(--line);
  border-radius: 0 0 24px 24px;
}

.pt-stub::before,
.pt-stub::after {
  content: "";
  position: absolute;
  top: -15px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--line);
}

.pt-stub::before {
  inset-inline-start: -16px;
  border-inline-start-color: transparent;
}

.pt-stub::after {
  inset-inline-end: -16px;
  border-inline-end-color: transparent;
}

.pt-price-wrap {
  display: grid;
}

.pt-from {
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}

.pt-price {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4vw, 3.1rem);
  line-height: 1;
  color: var(--red);
}

.pt-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text);
  padding: .7rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}

.pt-btn:hover,
.pt-btn:focus-visible {
  background: var(--red);
  border-color: var(--red);
  color: #ffffff;
  outline: none;
}

/* Featured ticket: red body, black stub */
.pt-card--featured {
  background: var(--red);
  border-color: var(--red);
  color: #ffffff;
}

.pt-card--featured .pt-no,
.pt-card--featured .pt-specs {
  color: rgba(255, 255, 255, .88);
}

.pt-card--featured .pt-specs i {
  color: #ffffff;
}

.pt-card--featured .pt-stub {
  background: #000000;
  border-top-color: rgba(255, 255, 255, .35);
}

.pt-card--featured .pt-from {
  color: rgba(255, 255, 255, .7);
}

.pt-card--featured .pt-price {
  color: #ffffff;
}

.pt-card--featured .pt-btn {
  color: #ffffff;
  border-color: rgba(255, 255, 255, .5);
}

.pt-card--featured .pt-btn:hover {
  background: #ffffff;
  color: var(--red);
  border-color: #ffffff;
}

.pt-badge {
  position: absolute;
  top: -13px;
  inset-inline-end: 1.6rem;
  background: #000000;
  color: #ffffff;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .45rem .9rem;
  border-radius: 999px;
  z-index: 2;
}

@media (min-width: 600px) {
  .pt-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1025px) {
  .pt-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
  }
}

/* =========================================================
   ABOUT STORY: a speaker photo in a card with a red block behind,
   the seal on its corner, and the manifesto beside it. The words
   start fully visible; the dimming only applies once the script
   has run (.is-js). Offsets use logical properties, so the block
   sits on the far side in RTL too.
   ========================================================= */
.story-grid {
  display: grid;
  gap: 3.5rem;
  align-items: center;
  grid-template-columns: minmax(0, 1fr);
}

.story-photo {
  position: relative;
  margin: 0;
  justify-self: center;
  width: min(440px, 88%);
}

.story-block {
  position: absolute;
  inset-block-start: 1.6rem;
  inset-block-end: -1.6rem;
  inset-inline-start: 1.6rem;
  inset-inline-end: -1.6rem;
  background: var(--red);
  border-radius: 32px;
  z-index: 0;
}

.story-img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  padding: 2.2rem;
  box-sizing: border-box;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 32px;
  box-shadow: 0 30px 50px -34px rgba(0, 0, 0, .5);
}

.story-cap {
  position: absolute;
  z-index: 2;
  inset-block-start: 1.2rem;
  inset-inline-start: 1.2rem;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem .85rem;
  border-radius: 999px;
  background: #000000;
  color: #ffffff;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.story-cap i {
  color: var(--red);
}

/* The seal sits on the photo's lower corner */
.story-photo .seal {
  position: absolute;
  z-index: 3;
  width: clamp(150px, 40%, 200px);
  aspect-ratio: 1;
  inset-block-end: -2.2rem;
  inset-inline-end: -1.6rem;
}

.story-photo .seal-ring {
  width: 100%;
  height: 100%;
  animation: seal-turn 24s linear infinite;
  overflow: visible;
}

.story-photo .seal-ring text {
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: .04em;
  fill: var(--text);
  direction: ltr;
}

.story-photo .seal-core {
  position: absolute;
  inset: 50% auto auto 50%;
  translate: -50% -50%;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--red);
  color: #ffffff;
  display: grid;
  place-items: center;
  font-size: 1.3rem;
  box-shadow: 0 0 0 8px var(--red-glow), 0 18px 30px -14px var(--red-glow);
}

.story-copy {
  display: grid;
  gap: 1.5rem;
  align-content: start;
}

.story-head {
  margin-bottom: .25rem;
}

.story-manifesto {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(1.9rem, 3.4vw, 3rem);
  line-height: 1.04;
  margin: 0;
  color: var(--text);
}

.sw {
  transition: opacity .45s ease, color .45s ease;
}

.sw-red {
  color: var(--red);
}

.story.is-js .sw {
  opacity: .16;
}

.story.is-js .sw.is-on {
  opacity: 1;
}

.story-lead {
  margin: 0;
  color: var(--text);
  font-size: 1.2rem;
  line-height: 1.5;
  font-weight: 600;
}

.story-body {
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

.story-quote {
  position: relative;
  margin: .5rem 0 0;
  padding: .2rem 0 .2rem 1.4rem;
  border-inline-start: 4px solid var(--red);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--text);
}

@media (min-width: 1025px) {
  .story-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 5rem;
  }

  .story-photo {
    justify-self: start;
    width: min(460px, 100%);
  }
}

@media (max-width: 599px) {
  .story-photo {
    width: 92%;
  }

  .story-img {
    padding: 1.5rem;
  }

  .story-cap {
    font-size: .6rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .story-photo .seal-ring {
    animation: none;
  }
}

/* =========================================================
   ABOUT VALUES: a sticky card stack. Each card pins below the
   nav and the next one slides over it as you scroll.
   ========================================================= */
.vs-stack {
  margin-top: 2.5rem;
}

.vs-card {
  position: sticky;
  top: calc(var(--nav-h) + 1.5rem + var(--i) * 22px);
  z-index: calc(var(--i) + 1);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: start;
  min-height: clamp(260px, 42vh, 360px);
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
  padding: clamp(1.75rem, 4vw, 3.25rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 28px;
  box-shadow: 0 -18px 36px -26px rgba(0, 0, 0, .45);
}

.vs-card:last-child {
  margin-bottom: 0;
}

.vs-num {
  font-family: var(--font-display);
  font-size: clamp(5rem, 11vw, 9rem);
  line-height: .8;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--red);
}

.vs-body {
  display: grid;
  gap: .8rem;
  align-content: start;
}

.vs-ico {
  width: 58px;
  height: 58px;
  border-radius: 16px;
  background: var(--red);
  color: #ffffff;
  display: grid;
  place-items: center;
  font-size: 1.3rem;
  margin-bottom: .4rem;
  box-shadow: 0 14px 26px -12px var(--red-glow);
}

.vs-body h3 {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(2.2rem, 4.2vw, 3.6rem);
  line-height: .95;
  margin: 0;
}

.vs-body p {
  color: var(--muted);
  font-size: 1.1rem;
  line-height: 1.6;
  margin: 0;
  max-width: 46ch;
}

.vs-card--hot {
  background: var(--red);
  border-color: var(--red);
  color: #ffffff;
}

.vs-card--hot .vs-num {
  -webkit-text-stroke-color: #ffffff;
}

.vs-card--hot .vs-body p {
  color: rgba(255, 255, 255, .88);
}

.vs-card--hot .vs-ico {
  background: #000000;
}

@media (max-width: 599px) {
  .vs-card {
    grid-template-columns: minmax(0, 1fr);
    gap: .5rem;
    min-height: 0;
    top: calc(var(--nav-h) + 1rem + var(--i) * 14px);
  }

  .vs-num {
    font-size: 4.5rem;
  }
}

/* =========================================================
   ABOUT CREW: pinned paper notes with tape, slightly tilted,
   straightening when hovered.
   ========================================================= */
.pn-board {
  display: grid;
  gap: 2.25rem 1.75rem;
  grid-template-columns: minmax(0, 1fr);
  margin-top: 2.5rem;
}

.pn-note {
  position: relative;
  padding: 2.4rem 1.75rem 1.9rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  transform: rotate(var(--r, 0deg));
  box-shadow: 0 22px 34px -24px rgba(0, 0, 0, .5);
  transition: transform .45s var(--ease), box-shadow .45s ease, border-color .3s ease;
}

.pn-note::before {
  content: "";
  position: absolute;
  top: -14px;
  left: 50%;
  translate: -50% 0;
  width: 110px;
  height: 30px;
  background: rgba(225, 15, 15, .85);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
  transform: rotate(-3deg);
}

.pn-note:hover {
  transform: rotate(0deg) translateY(-8px);
  box-shadow: 0 34px 48px -26px var(--red-glow);
  border-color: var(--red);
}

.pn-ico {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--red);
  color: #ffffff;
  display: grid;
  place-items: center;
  font-size: 1.25rem;
  margin-bottom: 1.2rem;
}

.pn-note h3 {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(1.9rem, 2.6vw, 2.4rem);
  line-height: .98;
  margin: 0 0 .6rem;
}

.pn-note p {
  color: var(--muted);
  margin: 0;
  line-height: 1.6;
}

@media (min-width: 600px) {
  .pn-board {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1025px) {
  .pn-board {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 3rem 1.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pn-note {
    transform: rotate(var(--r, 0deg));
  }
}

/* =========================================================
   ABOUT HOW WE WORK: a run-of-show sheet with a REC header
   ========================================================= */
.rs-sheet {
  margin-top: 2.5rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 30px 50px -36px rgba(0, 0, 0, .5);
}

.rs-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1rem 1.5rem;
  background: #000000;
  color: #ffffff;
}

.rs-rec {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.rs-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 10px var(--red);
  animation: rs-blink 1.4s ease-in-out infinite;
}

@keyframes rs-blink {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: .25;
  }
}

.rs-cols {
  display: none;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .6);
}

.rs-cols span {
  display: inline-block;
}

.rs-cols span:first-child {
  width: 14rem;
}

.rs-rows {
  list-style: none;
  margin: 0;
  padding: 0;
}

.rs-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .6rem;
  padding: 1.6rem 1.5rem;
  border-top: 1px dashed var(--line);
  transition: background-color .35s ease;
}

.rs-row:first-child {
  border-top: 0;
}

.rs-row:hover {
  background: var(--surface-2);
}

.rs-when {
  display: flex;
  align-items: center;
  gap: .9rem;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 1.5rem;
  color: var(--text);
}

.rs-code {
  display: inline-grid;
  place-items: center;
  min-width: 2.6rem;
  height: 2.6rem;
  padding: 0 .5rem;
  border-radius: 8px;
  background: var(--red);
  color: #ffffff;
  font-size: 1.1rem;
}

.rs-what h3 {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(2rem, 3.4vw, 2.8rem);
  line-height: 1;
  margin: 0 0 .35rem;
}

.rs-what p {
  color: var(--muted);
  margin: 0;
  line-height: 1.6;
  max-width: 60ch;
}

@media (min-width: 900px) {
  .rs-cols {
    display: flex;
    gap: 2rem;
  }

  .rs-row {
    grid-template-columns: 14rem minmax(0, 1fr);
    align-items: center;
    gap: 2rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rs-dot {
    animation: none;
  }
}

/* About closing block: the original black section, now inset with rounded corners */
.ab-final {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #000000;
  color: #ffffff;
  padding: clamp(4.5rem, 9vw, 7rem) 0;
  margin: clamp(2.5rem, 5vw, 4rem) clamp(1rem, 3vw, 2rem) clamp(3.5rem, 6vw, 5rem);
  border-radius: 32px;
}

.ab-final::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(circle at 80% 50%, rgba(225, 15, 15, .4), transparent 60%);
}

.ab-final-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}

.ab-final .kicker {
  color: #ff4d4d;
}

.ab-final-title {
  font-size: clamp(3.2rem, 8vw, 6.5rem);
  line-height: .88;
  margin: 0;
  color: #ffffff;
}

.ab-final-title span {
  color: var(--red);
}

.ab-final .btn-outline {
  color: #ffffff;
  border-color: rgba(255, 255, 255, .7);
}

.ab-final .btn-outline:hover {
  background: #ffffff;
  color: #000000;
  border-color: #ffffff;
}

@media (max-width: 767px) {
  .ab-final {
    border-radius: 24px;
  }
}

/* Services closing card: the About page's black block with the red glow (colours only) */
.cta.cta-dark {
  background: #000000;
  color: #ffffff;
}

.cta.cta-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(circle at 80% 50%, rgba(225, 15, 15, .4), transparent 60%);
}

.cta.cta-dark .cta-title span {
  color: var(--red);
}

.cta.cta-dark .cta-deco {
  color: var(--red);
  opacity: .12;
}

.cta.cta-dark .btn-black {
  background: var(--red);
  color: #ffffff;
}

.cta.cta-dark .btn-black:hover {
  background: #ffffff;
  color: var(--red);
}

/* Home closing block: the About page's black block with the red glow.
   The bars, pill and decoration are red so their animations show on black. */
.cta.cta-dark {
  background: #000000;
  color: #ffffff;
}

.cta.cta-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(circle at 80% 50%, rgba(225, 15, 15, .4), transparent 60%);
}

.cta.cta-dark .cta-title span {
  color: var(--red);
}

.cta.cta-dark .cta-deco {
  color: var(--red);
  opacity: .18;
}

.cta.cta-dark .cta-bars span {
  background: var(--red);
  opacity: .6;
}

.cta.cta-dark .cta-pill {
  background: rgba(225, 15, 15, .18);
  border: 1px solid var(--red);
}

.cta.cta-dark .btn-black {
  background: var(--red);
  color: #ffffff;
}

.cta.cta-dark .btn-black:hover {
  background: #ffffff;
  color: var(--red);
}

/* =========================================================
   IN MOTION: a story-style reel viewer. Segmented progress bars,
   tap zones to move between clips, a follow button, and a book
   link. The player always keeps white text over the video.
   ========================================================= */
.rv {
  display: grid;
  gap: 3rem;
  align-items: center;
  grid-template-columns: minmax(0, 1fr);
}

.rv-list {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  gap: .75rem;
}

.rv-thumb {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: .55rem;
  font: inherit;
  text-align: start;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  cursor: pointer;
  transition: border-color .3s ease, transform .3s var(--ease);
}

.rv-thumb:hover {
  transform: translateX(4px);
  border-color: var(--red);
}

[dir="rtl"] .rv-thumb:hover {
  transform: translateX(-4px);
}

.rv-thumb:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.rv-thumb img {
  width: 52px;
  height: 92px;
  object-fit: cover;
  border-radius: 12px;
  flex-shrink: 0;
  background: #000;
}

.rv-thumb span {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .9rem;
}

.rv-thumb b {
  font-family: var(--font-display);
  color: var(--red);
  font-size: 1.2rem;
  font-weight: 400;
  margin: 0 .6rem;
  letter-spacing: 0;
}

.rv-thumb.is-active {
  border-color: var(--red);
  box-shadow: inset 0 0 0 1px var(--red);
}

.rv-stage {
  display: flex;
  justify-content: center;
}

.rv-phone {
  position: relative;
  width: min(340px, 86vw);
  aspect-ratio: 9 / 16;
  border-radius: 36px;
  overflow: hidden;
  background: #000000;
  color: #ffffff;
  border: 8px solid #111111;
  box-shadow: 0 40px 70px -36px rgba(0, 0, 0, .7), 0 0 0 1px var(--line);
  isolation: isolate;
}

.rv-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rv-phone::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 42%;
  background: linear-gradient(to top, rgba(0, 0, 0, .75), transparent);
  pointer-events: none;
  z-index: 1;
}

.rv-progress {
  position: absolute;
  z-index: 4;
  top: 12px;
  inset-inline: 12px;
  display: flex;
  gap: 5px;
}

.rv-seg {
  flex: 1;
  height: 3px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .3);
  overflow: hidden;
  position: relative;
}

.rv-seg i {
  position: absolute;
  inset: 0;
  background: #ffffff;
  transform: scaleX(0);
  transform-origin: left center;
}

[dir="rtl"] .rv-seg i {
  transform-origin: right center;
}

.rv-top {
  position: absolute;
  z-index: 4;
  top: 26px;
  inset-inline: 12px;
  display: flex;
  align-items: center;
  gap: .6rem;
}

.rv-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--red);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: .95rem;
  flex-shrink: 0;
}

.rv-handle {
  font-weight: 800;
  font-size: .88rem;
  flex: 1;
  min-width: 0;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .5);
}

.rv-follow {
  border: 1px solid #ffffff;
  background: transparent;
  color: #ffffff;
  border-radius: 999px;
  padding: .32rem .8rem;
  font: inherit;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .3s ease, color .3s ease;
}

.rv-follow.is-following {
  background: #ffffff;
  color: #000000;
}

.rv-follow:focus-visible,
.rv-action:focus-visible,
.rv-book:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

/* Tap zones: the sides move between clips, the middle plays or pauses */
.rv-zone {
  position: absolute;
  z-index: 3;
  top: 110px;
  bottom: 150px;
  background: none;
  border: 0;
  cursor: pointer;
}

.rv-prev {
  inset-inline-start: 0;
  width: 30%;
}

.rv-next {
  inset-inline-end: 0;
  width: 30%;
}

.rv-mid {
  inset-inline: 30%;
  top: 110px;
  bottom: 150px;
}

.rv-caption {
  position: absolute;
  z-index: 4;
  inset-inline: 16px;
  bottom: 22px;
  padding-inline-end: 64px;
  display: grid;
  gap: .6rem;
}

.rv-caption strong {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(1.6rem, 3vw, 2rem);
  line-height: .95;
  font-weight: 400;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .5);
}

.rv-book {
  justify-self: start;
  color: #ffffff;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  padding: .5rem .9rem;
  border-radius: 999px;
  background: var(--red);
  box-shadow: 0 10px 22px -10px var(--red-glow);
}

.rv-side {
  position: absolute;
  z-index: 4;
  inset-inline-end: 12px;
  bottom: 22px;
  display: grid;
  gap: 14px;
}

.rv-action {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .45);
  background: rgba(0, 0, 0, .55);
  color: #ffffff;
  display: grid;
  place-items: center;
  font-size: 1.05rem;
  cursor: pointer;
  transition: background-color .3s ease, transform .3s var(--ease);
}

.rv-action:hover {
  transform: scale(1.08);
}

.rv-like.is-liked {
  background: var(--red);
}

.rv-like.is-liked i {
  animation: rv-pop .45s var(--ease);
}

@keyframes rv-pop {
  0% {
    transform: scale(.6);
  }

  60% {
    transform: scale(1.25);
  }

  100% {
    transform: scale(1);
  }
}

@media (min-width: 900px) {
  .rv {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 5rem;
    align-items: start;
  }

  .rv-phone {
    width: min(360px, 100%);
  }

  /* The player stays in view beside the clip list, and releases when the list ends */
  .rv-stage {
    position: sticky;
    top: calc(var(--nav-h) + 2rem);
    align-self: start;
  }
}

/* ---------- Run of show (home 2): timeline on the clock ---------- */
.h2-clock-sec {
  position: relative;
}

.h2-clock {
  position: relative;
  list-style: none;
  padding: 0;
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
  display: grid;
  gap: 1.5rem;
}

/* Mobile: vertical track down the node column */
.h2-clock::before,
.h2-clock::after {
  content: "";
  position: absolute;
  inset-inline-start: 31px;
  inline-size: 2px;
  inset-block-start: 32px;
  inset-block-end: 32px;
  border-radius: 2px;
}

.h2-clock::before {
  background: var(--line);
}

.h2-clock::after {
  background: linear-gradient(to bottom, var(--red), #ff4d4d);
  block-size: 0;
  transition: block-size 2.4s var(--ease);
}

.h2-clock.is-on::after {
  block-size: 100%;
}

.h2-clock-step {
  position: relative;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  column-gap: 1rem;
  row-gap: .6rem;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: calc(var(--i) * .45s);
}

.h2-clock.is-on .h2-clock-step {
  opacity: 1;
  transform: none;
}

.h2-clock-time {
  grid-column: 2;
  grid-row: 1;
  font-family: var(--font-display);
  font-size: 1.15rem;
  letter-spacing: .08em;
  color: var(--red);
  line-height: 1.6;
}

.h2-clock-node {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: start;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1.25rem;
  background: var(--red);
  color: #ffffff;
  box-shadow: 0 0 0 8px var(--bg);
}

.h2-clock-card {
  grid-column: 2;
  grid-row: 2;
  padding: 1.3rem 1.4rem;
  border-radius: 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  transition: transform .4s var(--ease), border-color .3s ease;
}

.h2-clock-card:hover {
  transform: translateY(-4px);
  border-color: var(--red);
}

.h2-clock-card h3 {
  font-size: 1.6rem;
  margin: 0 0 .35rem;
}

.h2-clock-card p {
  margin: 0;
  color: var(--muted);
  font-size: .95rem;
  line-height: 1.6;
}

/* The zero hour: the moment doors open, highlighted */
.h2-clock-step.is-zero .h2-clock-node {
  background: var(--text);
  color: var(--bg);
  box-shadow: 0 0 0 8px var(--bg), 0 0 0 10px var(--red);
  animation: h2-clock-pulse 2.2s ease-out infinite;
}

.h2-clock-step.is-zero .h2-clock-card {
  background: var(--red);
  border-color: var(--red);
  color: #ffffff;
}

.h2-clock-step.is-zero .h2-clock-card p {
  color: rgba(255, 255, 255, .92);
}

.h2-clock-step.is-zero .h2-clock-card:hover {
  border-color: #000000;
}

@keyframes h2-clock-pulse {
  0% {
    box-shadow: 0 0 0 8px var(--bg), 0 0 0 10px rgba(225, 15, 15, .7);
  }

  100% {
    box-shadow: 0 0 0 8px var(--bg), 0 0 0 26px rgba(225, 15, 15, 0);
  }
}

/* Tablet and up: a horizontal clock with stops at equal spacing */
@media (min-width: 768px) {
  .h2-clock {
    gap: 0;
  }
}

@media (min-width: 1025px) {
  .h2-clock {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.25rem;
  }

  .h2-clock::before,
  .h2-clock::after {
    inset-block-start: 4.5rem;
    inset-block-end: auto;
    inset-inline-start: 12.5%;
    inset-inline-end: auto;
    inline-size: 75%;
    block-size: 2px;
  }

  .h2-clock::after {
    inline-size: 0;
    block-size: 2px;
    background: linear-gradient(to right, var(--red), #ff4d4d);
    transition: inline-size 2.4s var(--ease);
  }

  .h2-clock.is-on::after {
    block-size: 2px;
    inline-size: 75%;
  }

  .h2-clock-step {
    grid-template-columns: minmax(0, 1fr);
    row-gap: .5rem;
    justify-items: center;
    text-align: center;
  }

  .h2-clock-time {
    grid-column: 1;
    grid-row: 1;
    height: 2rem;
    line-height: 2rem;
  }

  .h2-clock-node {
    grid-column: 1;
    grid-row: 2;
    align-self: auto;
    justify-self: center;
  }

  .h2-clock-card {
    grid-column: 1;
    grid-row: 3;
    justify-self: stretch;
  }
}

@media (prefers-reduced-motion: reduce) {

  .h2-clock-step,
  .h2-clock::after,
  .h2-clock-card {
    transition: none;
  }

  .h2-clock-step.is-zero .h2-clock-node {
    animation: none;
  }
}

/* ---------- By the numbers (home 2, replaces the FAQ) ---------- */
.h2-pulse {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: #ffffff;
  padding: clamp(4rem, 9vw, 7rem) 0 clamp(4.5rem, 9vw, 7.5rem);
  background:
    radial-gradient(60% 80% at 90% 0%, rgba(225, 15, 15, .38), transparent 62%),
    radial-gradient(50% 70% at 0% 100%, rgba(225, 15, 15, .24), transparent 60%),
    #0a0a0a;
}

.h2-pulse::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
  pointer-events: none;
}

.h2-pulse .kicker {
  color: var(--red);
}

.h2-pulse-ribbon {
  position: relative;
  margin: 0 -6% clamp(3.5rem, 7vw, 5rem);
  padding: .95rem 0;
  background: var(--red);
  color: #ffffff;
  transform: rotate(-2deg);
  white-space: nowrap;
  overflow: hidden;
  box-shadow: 0 20px 40px -20px rgba(225, 15, 15, .7);
}

.h2-pulse-track {
  display: flex;
  width: max-content;
  animation: h2-ribbon 30s linear infinite;
}

.h2-pulse-group {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  padding-inline-end: 1.6rem;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.4vw, 1.8rem);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.h2-pulse-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ffffff;
  flex-shrink: 0;
}

@keyframes h2-ribbon {
  to {
    transform: translateX(-50%);
  }
}

.h2-pulse-title {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 7vw, 5.6rem);
  line-height: .95;
  text-transform: uppercase;
  margin: .6rem 0 0;
  color: #ffffff;
}

.h2-pulse .lead {
  color: rgba(255, 255, 255, .72);
  margin-top: 1rem;
}

.h2-pulse-grid {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: minmax(0, 1fr);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.h2-stat {
  position: relative;
  padding: 1.6rem;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .1);
  overflow: hidden;
  transition: transform .4s var(--ease), border-color .3s ease, background-color .3s ease;
}

.h2-stat:hover {
  transform: translateY(-6px);
  border-color: var(--red);
  background: rgba(225, 15, 15, .08);
}

.h2-stat-num {
  display: flex;
  align-items: baseline;
  gap: .35rem;
  font-family: var(--font-display);
  font-size: clamp(4rem, 9vw, 6.5rem);
  line-height: 1;
  color: #ffffff;
}

.h2-stat-num small {
  font-size: .3em;
  color: var(--red);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.h2-stat h3 {
  font-size: 1.5rem;
  margin: 1rem 0 .3rem;
  color: #ffffff;
}

.h2-stat p {
  margin: 0;
  color: rgba(255, 255, 255, .7);
  font-size: .95rem;
  line-height: 1.6;
}

.h2-eq {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 36px;
  margin-top: 1.25rem;
}

.h2-eq i {
  flex: 1;
  height: 30%;
  border-radius: 2px;
  background: var(--red);
  animation: h2-eq 1.1s ease-in-out infinite alternate;
  animation-delay: calc(var(--i) * -.13s);
}

@keyframes h2-eq {
  from {
    height: 16%;
  }

  to {
    height: 100%;
  }
}

@media (min-width: 768px) {
  .h2-pulse-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1025px) {
  .h2-pulse-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.2rem;
  }

  .h2-stat {
    padding: 1.8rem 1.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {

  .h2-pulse-track,
  .h2-eq i {
    animation: none;
  }
}

/* ---------- On site: photo strip under the bento (home 2) ---------- */
.h2-shots {
  display: grid;
  gap: 1rem;
  margin-top: 1rem;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "stage" "speakers" "turntable" "generator" "crew";
}

.h2-shot {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 26px;
  isolation: isolate;
  background: #0a0a0a;
  border: 1px solid var(--line);
  aspect-ratio: 4 / 3;
  transition: transform .45s var(--ease), border-color .3s ease;
}

.h2-shot:hover {
  transform: translateY(-4px);
  border-color: var(--red);
}

.h2-shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease);
}

.h2-shot:hover img {
  transform: scale(1.06);
}

.h2-shot::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top, rgba(0, 0, 0, .85) 0%, rgba(0, 0, 0, 0) 55%);
}

.h2-shot figcaption {
  position: absolute;
  inset-inline-start: 1.25rem;
  bottom: 1.1rem;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--font-display);
  font-size: 1.4rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: #ffffff;
}

.h2-shot figcaption span {
  font-size: .85rem;
  color: var(--red);
  background: #ffffff;
  padding: .2rem .45rem;
  border-radius: 6px;
}

.h2-shot--stage {
  grid-area: stage;
  aspect-ratio: 1 / 1;
}

.h2-shot--speakers {
  grid-area: speakers;
}

.h2-shot--turntable {
  grid-area: turntable;
}

.h2-shot--generator {
  grid-area: generator;
}

.h2-shot--crew {
  grid-area: crew;
}

@media (min-width: 768px) {
  .h2-shots {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: "stage stage" "speakers turntable" "generator crew";
  }

  .h2-shot--stage {
    aspect-ratio: 16 / 9;
  }
}

@media (min-width: 1025px) {
  .h2-shots {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(2, 260px);
    grid-template-areas: "stage stage speakers turntable" "stage stage generator crew";
  }

  .h2-shot {
    aspect-ratio: auto;
    height: 100%;
  }

  .h2-shot--stage {
    aspect-ratio: auto;
  }
}

@media (prefers-reduced-motion: reduce) {

  .h2-shot,
  .h2-shot img {
    transition: none;
  }
}

/* ---------- 404 page ---------- */
.nf {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(4rem, 10vw, 8rem) 0 clamp(4rem, 9vw, 7rem);
  text-align: center;
}

.nf::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(50% 60% at 50% 35%, rgba(225, 15, 15, .22), transparent 70%);
}

.nf-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}

.nf-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(.5rem, 2vw, 1.5rem);
  margin-bottom: 1rem;
}

.nf-digit {
  font-family: var(--font-display);
  font-size: clamp(6rem, 20vw, 14rem);
  line-height: 1;
  color: var(--text);
}

.nf-disc {
  position: relative;
  width: clamp(110px, 19vw, 210px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: repeating-radial-gradient(circle, #0b0b0b 0 2px, #1f1f1f 2px 3px);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8);
  animation: nf-spin 7s linear infinite;
}

.nf-disc::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255, 255, 255, .12), transparent 45%);
}

.nf-disc-label {
  position: absolute;
  inset: 31%;
  border-radius: 50%;
  display: grid;
  place-items: center;
  z-index: 1;
  background: var(--red);
  color: #ffffff;
  font-family: var(--font-display);
  font-size: clamp(.9rem, 2.2vw, 1.4rem);
  letter-spacing: .04em;
}

@keyframes nf-spin {
  to {
    transform: rotate(360deg);
  }
}

.nf-title {
  font-size: clamp(2.6rem, 6vw, 4.8rem);
  line-height: .95;
  margin: 0;
  max-width: 16ch;
}

.nf .lead {
  max-width: 52ch;
  margin: 0;
}

.nf-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .8rem;
  margin-top: .5rem;
}

.nf-links {
  list-style: none;
  padding: 0;
  margin: clamp(1.5rem, 4vw, 2.5rem) 0 0;
  width: min(100%, 880px);
  display: grid;
  gap: .9rem;
  grid-template-columns: minmax(0, 1fr);
}

.nf-links a {
  text-decoration: none;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: 1.1rem 1.25rem;
  text-align: start;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  color: var(--text);
  transition: transform .35s var(--ease), border-color .3s ease, background-color .3s ease;
}

.nf-links a>i:first-child {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(225, 15, 15, .12);
  color: var(--red);
  flex-shrink: 0;
}

.nf-links span {
  flex: 1;
  font-family: var(--font-display);
  font-size: 1.35rem;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.nf-go {
  color: var(--red);
  transition: transform .35s var(--ease);
}

.nf-links a:hover {
  transform: translateY(-4px);
  border-color: var(--red);
}

.nf-links a:hover .nf-go {
  transform: translateX(6px);
}

[dir="rtl"] .nf-links a:hover .nf-go {
  transform: translateX(-6px);
}

[dir="rtl"] .nf-go {
  transform: scaleX(-1);
}

@media (min-width: 768px) {
  .nf-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .nf-disc {
    animation: none;
  }

  .nf-links a,
  .nf-go {
    transition: none;
  }
}

/* ---------- Footer email field: dark in every theme (overrides the light-theme field colour) ---------- */
.site-footer .newsletter .form-control {
  background: #120303;
  color: #ffffff;
  border: none;
  border-bottom: 2px solid var(--red);
  border-radius: 14px 14px 0 0;
  padding: .95rem 1.1rem;
  font-size: .95rem;
  box-shadow: none;
}

.site-footer .newsletter .form-control:focus {
  background: #1c0606;
  border-bottom-color: #ff4d4d;
  box-shadow: none;
}

.site-footer .newsletter .form-control::placeholder {
  color: #8a8a8a;
}

.site-footer .newsletter .input-row .btn {
  width: 52px;
  height: 52px;
  padding: 0;
  border-radius: 50%;
  flex-shrink: 0;
  display: grid;
  place-items: center;
}

.site-footer .newsletter .error-msg {
  color: #ff4d4d;
  font-weight: 700;
}

/* ---------- Footer text: white in every theme (icons, hover and error states keep their colour) ---------- */
.site-footer,
.site-footer p,
.site-footer span,
.site-footer small,
.footer-col a,
.footer-col li,
.footer-col h4,
.footer-bottom,
.footer-bottom span,
.footer-note,
.footer-brand p,
.footer-brand .brand span {
  color: #ffffff;
}

.footer-col a:hover,
.footer-col a:focus-visible {
  color: var(--red);
}

.site-footer .newsletter .form-control,
.site-footer .newsletter .form-control::placeholder {
  color: #ffffff;
}

.site-footer .newsletter .form-control::placeholder {
  opacity: .85;
}

.site-footer .newsletter .error-msg,
.site-footer .newsletter .form-status.error {
  color: #ff4d4d;
}

.site-footer .newsletter .form-status.success {
  color: #86efac;
}

/* ---------- Events we cover: photo backgrounds on the cards ---------- */
.evp-face {
  background-color: #000000;
  background-image: var(--evp-img);
  background-size: cover;
  background-position: center;
  color: #ffffff;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .5);
  isolation: isolate;
}

.evp-face::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(to top, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, .4) 60%, rgba(0, 0, 0, .25) 100%);
  pointer-events: none;
}

.evp-face.evp-front {
  background-color: #000000;
}

.evp-face.evp-back {
  background-color: var(--red);
  background-image: var(--evp-img);
  border-color: var(--red);
}

.evp-face.evp-back::before {
  background: linear-gradient(160deg, rgba(225, 15, 15, .82), rgba(0, 0, 0, .88));
}

.evp-name {
  color: #ffffff;
}

.evp-front::after {
  opacity: .35;
}

.evp-face .evp-num {
  color: #ffffff;
}

/* ---------- Lighting and stage: dark stage section ---------- */
.lt-stage {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: #f5f5f5;
  background:
    radial-gradient(circle at 50% 36%, rgba(225, 15, 15, .24), transparent 42%),
    radial-gradient(circle at 50% 120%, rgba(225, 15, 15, .16), transparent 55%),
    #0a0a0a;
}

.lt-hero {
  position: relative;
  min-height: 660px;
  display: grid;
  place-items: center;
}

.lt-center {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .6rem;
}

.lt-center .kicker {
  color: #ffffff;
  justify-content: center;
}

.lt-center .kicker::before {
  background: var(--red);
}

.lt-center .section-title {
  color: #f5f5f5;
  margin: .4rem 0 0;
  font-size: clamp(2.6rem, 6vw, 4.6rem);
}

.lt-center .section-title .red {
  color: var(--red);
}

.lt-center .lead {
  color: #b3b3b3;
  text-align: center;
  margin: 0;
  max-width: 520px;
}

.lt-logo {
  width: clamp(170px, 20vw, 250px);
  height: auto;
  display: block;
  margin-bottom: .6rem;
  transform-origin: 50% 80%;
  animation: lt-bob 4.2s ease-in-out infinite, lt-glow 4.2s ease-in-out infinite;
}

@keyframes lt-bob {

  0%,
  100% {
    transform: translateY(0) rotate(-1.5deg);
  }

  50% {
    transform: translateY(-14px) rotate(1.5deg);
  }
}

@keyframes lt-glow {

  0%,
  100% {
    filter: drop-shadow(0 0 1px rgba(255, 255, 255, .5)) drop-shadow(0 0 18px rgba(225, 15, 15, .35));
  }

  50% {
    filter: drop-shadow(0 0 1px rgba(255, 255, 255, .7)) drop-shadow(0 0 40px rgba(225, 15, 15, .75));
  }
}

.lt-eq {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 30px;
  margin-top: .4rem;
}

.lt-eq span {
  width: 6px;
  height: 100%;
  background: var(--red);
  border-radius: 3px;
  transform-origin: bottom;
  box-shadow: 0 0 10px rgba(225, 15, 15, .55);
  animation: lt-eq 1.1s ease-in-out infinite;
}

.lt-eq span:nth-child(1) {
  animation-delay: -.2s;
}

.lt-eq span:nth-child(2) {
  animation-delay: -.7s;
}

.lt-eq span:nth-child(3) {
  animation-delay: -.4s;
}

.lt-eq span:nth-child(4) {
  animation-delay: -.9s;
}

.lt-eq span:nth-child(5) {
  animation-delay: -.5s;
}

@keyframes lt-eq {

  0%,
  100% {
    transform: scaleY(.25);
  }

  50% {
    transform: scaleY(1);
  }
}

.lt-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.lt-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 54px 54px;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 70%);
  mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 70%);
  animation: lt-grid 20s linear infinite;
}

@keyframes lt-grid {
  to {
    background-position: 54px 54px;
  }
}

.lt-rings {
  position: absolute;
  left: 50%;
  top: 42%;
  width: 0;
  height: 0;
}

.lt-rings span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 520px;
  height: 520px;
  margin: -260px 0 0 -260px;
  border: 2px solid var(--red);
  border-radius: 50%;
  opacity: 0;
  animation: lt-ring 3.6s cubic-bezier(.2, .6, .3, 1) infinite;
}

.lt-rings span:nth-child(2) {
  animation-delay: 1.2s;
}

.lt-rings span:nth-child(3) {
  animation-delay: 2.4s;
}

@keyframes lt-ring {
  0% {
    transform: scale(.45);
    opacity: .85;
  }

  100% {
    transform: scale(2);
    opacity: 0;
  }
}

.lt-word {
  position: absolute;
  left: var(--x);
  top: var(--y);
  font-family: var(--font-display);
  font-size: var(--size, 1.5rem);
  text-transform: uppercase;
  letter-spacing: .05em;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1.2px rgba(255, 255, 255, .5);
  opacity: 0;
  animation:
    lt-drift var(--dur, 10s) ease-in-out var(--delay, 0s) infinite,
    lt-fade var(--dur, 10s) ease-in-out var(--delay, 0s) infinite;
}

.lt-word.solid {
  color: var(--red);
  -webkit-text-stroke: 0;
}

.lt-word.white {
  color: #f5f5f5;
  -webkit-text-stroke: 0;
}

@keyframes lt-drift {

  0%,
  100% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(var(--dx), var(--dy));
  }
}

@keyframes lt-fade {

  0%,
  100% {
    opacity: 0;
  }

  25%,
  75% {
    opacity: .9;
  }
}

.lt-word.lw1 {
  --x: 6%;
  --y: 14%;
  --dx: 18px;
  --dy: -16px;
  --dur: 9s;
  --delay: 0s;
  --size: 2.2rem;
}

.lt-word.lw2 {
  --x: 80%;
  --y: 12%;
  --dx: -20px;
  --dy: 14px;
  --dur: 11s;
  --delay: -3s;
  --size: 1.8rem;
}

.lt-word.lw3 {
  --x: 9%;
  --y: 66%;
  --dx: 16px;
  --dy: 18px;
  --dur: 10s;
  --delay: -6s;
  --size: 1.5rem;
}

.lt-word.lw4 {
  --x: 82%;
  --y: 68%;
  --dx: -16px;
  --dy: -18px;
  --dur: 8s;
  --delay: -2s;
  --size: 2.4rem;
}

.lt-word.lw5 {
  --x: 4%;
  --y: 40%;
  --dx: 14px;
  --dy: -12px;
  --dur: 10.5s;
  --delay: -4s;
  --size: 1.3rem;
}

.lt-word.lw6 {
  --x: 86%;
  --y: 40%;
  --dx: -12px;
  --dy: 16px;
  --dur: 12s;
  --delay: -5s;
  --size: 1.3rem;
}

.lt-word.lw7 {
  --x: 16%;
  --y: 84%;
  --dx: 12px;
  --dy: -10px;
  --dur: 8.5s;
  --delay: -7s;
  --size: 1.2rem;
}

.lt-word.lw8 {
  --x: 70%;
  --y: 86%;
  --dx: -12px;
  --dy: -10px;
  --dur: 9.5s;
  --delay: -1s;
  --size: 1.4rem;
}

.lt-stage .lt-line {
  margin-top: 1.5rem;
  gap: 1.25rem;
  list-style: none;
  padding: 0;
  position: relative;
  display: grid;
}

.lt-stage .lt-line::before {
  display: none;
}

.lt-stage .lt-step {
  position: relative;
  padding: 2rem 1.6rem 1.8rem;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, .1);
  background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02));
  transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}

.lt-stage .lt-step:hover {
  transform: translateY(-6px);
  border-color: rgba(225, 15, 15, .6);
  box-shadow: 0 18px 50px -20px rgba(225, 15, 15, .55);
}

.lt-stage .lt-dot {
  position: static;
  width: 3.25rem;
  height: 3.25rem;
  margin-bottom: 1.25rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--red);
  color: #ffffff;
  animation: lt-pulse 2.4s infinite;
}

@keyframes lt-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(225, 15, 15, .55);
  }

  70%,
  100% {
    box-shadow: 0 0 0 18px rgba(225, 15, 15, 0);
  }
}

.lt-stage .lt-tier {
  color: var(--red);
}

.lt-stage .lt-step h3 {
  color: #ffffff;
}

.lt-stage .lt-step p {
  color: #b3b3b3;
  opacity: 1;
}

.lt-stage .lt-note {
  color: #8a8a8a;
  opacity: 1;
  border-top: 1px solid rgba(255, 255, 255, .12);
  padding-top: .8rem;
  margin-top: .6rem;
}

@media (min-width: 768px) {
  .lt-stage .lt-line {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .lt-hero {
    min-height: 0;
    padding: 2.5rem 0 1rem;
  }

  .lt-rings span {
    width: 300px;
    height: 300px;
    margin: -150px 0 0 -150px;
  }

  .lt-word {
    display: none;
  }

  .lt-stage .lt-step {
    padding-inline-start: 1.6rem;
  }
}

@media (prefers-reduced-motion: reduce) {

  .lt-stage *,
  .lt-stage *::before {
    animation: none !important;
  }

  .lt-word {
    opacity: .5;
  }
}

/* ---------- About: How we work (open layout, no box) ---------- */
.how-grid {
  display: grid;
  gap: 2.5rem;
}

.how-head {
  position: relative;
}

.how-tag {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin: 1.25rem 0 0;
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}

.how-live {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 10px var(--red);
  animation: how-blink 1.4s ease-in-out infinite;
}

@keyframes how-blink {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: .3;
  }
}

.how-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}

.how-step {
  position: relative;
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
  padding: 2rem 0 2rem 0;
  border-top: 1px solid var(--line);
}

.how-step:last-child {
  border-bottom: 1px solid var(--line);
}

.how-num {
  font-family: var(--font-display);
  font-size: clamp(3rem, 6vw, 4.6rem);
  line-height: .9;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--red);
  transition: color .35s ease;
}

.how-step:hover .how-num {
  color: var(--red);
}

.how-when {
  display: inline-block;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--red);
  border: 1px solid var(--red);
  border-radius: 999px;
  padding: .3rem .8rem;
  margin-bottom: .9rem;
}

.how-body h3 {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(2rem, 3.4vw, 2.8rem);
  line-height: 1;
  margin: 0 0 .5rem;
  color: var(--text);
}

.how-body p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
  max-width: 46ch;
}

.how-icon {
  position: absolute;
  inset-inline-end: 0;
  top: 2.2rem;
  font-size: 1.4rem;
  color: var(--red);
  opacity: .85;
}

@media (min-width: 900px) {
  .how-grid {
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    gap: 4rem;
    align-items: start;
  }

  .how-head {
    position: sticky;
    top: 7.5rem;
  }

  .how-steps {
    padding-inline-start: 0;
  }
}

@media (max-width: 480px) {
  .how-step {
    grid-template-columns: 3rem minmax(0, 1fr);
    gap: .9rem;
  }

  .how-num {
    font-size: 2.6rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .how-live {
    animation: none;
  }
}




/* ---------- Packages: "Which night feels like yours?" as photo panels ---------- */
.ez-section {
  background: #0b0b0b;
  color: #f5f5f5;
}

.ez-section .kicker {
  color: #ffffff;
}

.ez-section .kicker::before {
  background: var(--red);
}

.ez-section .section-title {
  color: #f5f5f5;
}

.ez-section .section-title .red {
  color: var(--red);
}

.ez-section .lead {
  color: #a3a3a3;
  font-size: 1.05rem;
}

.ez-head {
  margin-bottom: 2.5rem;
}

.ez-stage {
  display: grid;
  gap: 1rem;
}

.ez-scene {
  position: relative;
  overflow: hidden;
  min-height: 460px;
  border-radius: 28px;
  isolation: isolate;
  color: #ffffff;
  outline-offset: 4px;
}

.ez-scene:focus-visible {
  outline: 3px solid var(--red);
}

.ez-photo {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.12);
  transition: transform 1.4s cubic-bezier(.2, .6, .2, 1), filter .6s ease;
  filter: saturate(.85) brightness(.9);
}

.ez-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, rgba(0, 0, 0, .94) 8%, rgba(0, 0, 0, .35) 58%, rgba(0, 0, 0, .15) 100%);
  transition: background .6s ease;
}

.ez-scene:hover .ez-photo,
.ez-scene:focus-visible .ez-photo {
  transform: scale(1);
  filter: saturate(1.1) brightness(1);
}

.ez-scene:hover::after,
.ez-scene:focus-visible::after {
  background: linear-gradient(to top, rgba(0, 0, 0, .92) 4%, rgba(0, 0, 0, .15) 70%, rgba(0, 0, 0, .05) 100%);
}

.ez-no {
  position: absolute;
  top: 1.25rem;
  inset-inline-start: 1.5rem;
  font-family: var(--font-display);
  font-size: 3.2rem;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, .85);
}

.ez-copy {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: 2rem 1.75rem;
  display: grid;
  gap: .75rem;
  justify-items: start;
}

.ez-tag {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #ff6b6b;
}

.ez-copy h3 {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(2.4rem, 3.4vw, 3.4rem);
  line-height: .95;
  margin: 0;
  color: #ffffff;
}

.ez-feel {
  margin: 0;
  font-size: .98rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, .88);
  max-width: 40ch;
}

.ez-chips {
  list-style: none;
  margin: .25rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}

.ez-chips li {
  padding: .4rem .8rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .45);
  background: rgba(0, 0, 0, .3);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .06em;
}

.ez-go {
  margin-top: .5rem;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #ffffff;
  text-decoration: none;
  border-bottom: 2px solid var(--red);
  padding-bottom: .25rem;
}

.ez-go:hover {
  color: var(--red);
}

@media (max-width: 899px) {
  .ez-scene {
    min-height: 440px;
  }
}

@media (min-width: 900px) {
  .ez-stage {
    display: flex;
    gap: 1rem;
    height: 620px;
  }

  .ez-scene {
    flex: 1 1 0;
    min-height: 0;
    transition: flex-grow .7s cubic-bezier(.2, .6, .2, 1);
  }

  .ez-stage:hover .ez-scene {
    flex-grow: .7;
  }

  .ez-stage .ez-scene:hover,
  .ez-stage .ez-scene:focus-within {
    flex-grow: 2.4;
  }

  .ez-copy {
    padding: 2.25rem 2rem;
  }

  .ez-feel {
    font-size: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {

  .ez-photo,
  .ez-scene,
  .ez-stage .ez-scene {
    transition: none;
  }
}

/* ---------- Packages: Add-ons on a light warm tint (slightly different from the white block above) ---------- */
.ad-tint {
  background: white;
  color: #111111;
}

.ad-tint .kicker {
  color: #111111;
}

.ad-tint .section-title,
.ad-tint .ad-name,
.ad-tint .ad-link {
  color: #111111;
}

.ad-tint .lead,
.ad-tint .ad-main p {
  color: #4a4a4a;
  opacity: 1;
}

.ad-tint .ad-link:hover {
  color: var(--red);
}

.ad-tint .ad-menu {
  border-top-color: #111111;
}

.ad-tint .ad-row {
  border-bottom-color: rgba(0, 0, 0, .15);
}

.ad-tint .ad-tag {
  border-color: rgba(0, 0, 0, .3);
  color: #222222;
}

.ad-tint .ad-row.is-hot .ad-name {
  color: var(--red);
}

.ad-tint .ad-row.is-hot .ad-tag {
  color: #ffffff;
}

/* ---------- About page (packages-style layout) ---------- */
.ab2-hero .h2-title {
  font-size: clamp(3.4rem, 8.6vw, 7.6rem);
}

/* ---------- Gallery (home page, after Process) ---------- */
.gl-head {
  margin-bottom: clamp(2.25rem, 5vw, 3.25rem);
}

.gl-grid {
  display: grid;
  gap: .9rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 170px;
}

.gl-tile {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 22px;
  background: #0b0b0b;
  isolation: isolate;
  border: 1px solid var(--line);
}

.gl-big {
  grid-column: span 2;
  grid-row: span 2;
}

.gl-wide {
  grid-column: span 2;
}

.gl-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease), filter .6s ease;
  filter: saturate(.9) brightness(.9);
}

.gl-tile:hover .gl-img {
  transform: scale(1.06);
  filter: saturate(1.1) brightness(1);
}

.gl-cap {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 1;
  display: grid;
  gap: .25rem;
  padding: 1.5rem 1.25rem 1.1rem;
  background: linear-gradient(to top, rgba(0, 0, 0, .9), rgba(0, 0, 0, 0));
  color: #ffffff;
}

.gl-tag {
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #ff6b6b;
}

.gl-cap strong {
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  font-weight: 700;
  line-height: 1.2;
}

.gl-expand {
  position: absolute;
  top: .9rem;
  inset-inline-end: .9rem;
  z-index: 1;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, .6);
  color: #ffffff;
  font-size: .85rem;
  opacity: 0;
  transform: scale(.85);
  transition: opacity .35s ease, transform .35s var(--ease);
}

.gl-tile:hover .gl-expand,
.gl-tile:focus-within .gl-expand {
  opacity: 1;
  transform: scale(1);
}

.gl-foot {
  display: flex;
  justify-content: center;
  margin-top: clamp(2rem, 4vw, 3rem);
}

@media (min-width: 768px) {
  .gl-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: 200px;
  }
}

@media (min-width: 1025px) {
  .gl-grid {
    grid-auto-rows: 240px;
  }
}

@media (prefers-reduced-motion: reduce) {

  .gl-img,
  .gl-expand {
    transition: none;
  }
}

/* Tighter spacing between the gallery and the Events section */
.gallery {
  padding-bottom: 0;
}

.gallery+.events {
  padding-top: clamp(2.5rem, 5vw, 3.5rem);
}

/* ---------- Home 2 mood section: photo changes with the mood ---------- */
.h2-mood-stage {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: 1.25rem;
  width: 100%;
  max-width: 420px;
  aspect-ratio: 4 / 5;
  border-radius: 28px;
  background: #0b0b0b;
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .75);
}

.h2-mood-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0) 55%);
}

.h2-mood-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity .9s ease, transform 1.4s var(--ease);
}

.h2-mood[data-mood="warm"] .h2-mood-img[data-img="warm"],
.h2-mood[data-mood="electric"] .h2-mood-img[data-img="electric"],
.h2-mood[data-mood="neon"] .h2-mood-img[data-img="neon"],
.h2-mood[data-mood="midnight"] .h2-mood-img[data-img="midnight"] {
  opacity: 1;
  transform: scale(1);
}

@media (min-width: 1025px) {
  .h2-mood-stage {
    max-width: 420px;
  }

  .h2-mood-sticky {
    top: 12vh;
  }
}

@media (prefers-reduced-motion: reduce) {
  .h2-mood-img {
    transition: none;
  }
}

/* ---------- Home 2 hero: now spinning (record, orbit ring, pulse rings) ---------- */
.h2-hero.hz {
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: calc(var(--nav-h) + 2.5rem) 0 4.5rem;
  overflow: hidden;
  background: var(--bg);
}

.hz-slash {
  position: absolute;
  z-index: -1;
  inset-block: 0;
  inset-inline: 56% -6%;
  pointer-events: none;
  background: var(--red);
  clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%);
  animation: hz-slide 1.2s var(--ease) both;
}

.hz-inner {
  display: grid;
  gap: 3rem;
  align-items: center;
  position: relative;
}

.hz-kicker {
  display: inline-block;
}

.hz-title {
  margin: 1.25rem 0 1.5rem;
  font-family: var(--font-display);
  font-size: clamp(3.4rem, 8.4vw, 7.6rem);
  line-height: .98;
  text-transform: uppercase;
  color: var(--text);
}

.hz-word {
  display: inline-block;
  margin-inline-end: .18em;
  animation: hz-rise .9s var(--ease) both;
  animation-delay: calc(.2s + var(--d) * .14s);
}

.hz-outline {
  color: transparent;
  -webkit-text-stroke: 2px var(--text);
}

.hz-lead {
  max-width: 500px;
}

.hz-actions {
  margin-top: 2rem;
  animation: hz-fade .8s ease .9s both;
}

.hz-stats {
  list-style: none;
  margin: 2.25rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  animation: hz-fade .8s ease 1.1s both;
}

.hz-stats li {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .55rem .95rem;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: .85rem;
  font-weight: 700;
  color: var(--text);
}

.hz-stats i {
  color: var(--red);
}

.hz-stage {
  position: relative;
  width: min(100%, 460px);
  aspect-ratio: 1;
  justify-self: center;
  display: grid;
  place-items: center;
}

.hz-ring {
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  border: 2px solid rgba(225, 15, 15, .85);
  opacity: 0;
  animation: hz-ring 3.6s ease-out infinite;
  animation-delay: calc(var(--i) * 1.2s);
}

.hz-orbit {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  animation: hz-spin 28s linear infinite;
}

.hz-orbit text {
  font-family: var(--font-display);
  font-size: 19px;
  letter-spacing: .14em;
  fill: var(--text);
}

.hz-record {
  position: relative;
  width: 74%;
  aspect-ratio: 1;
  z-index: 1;
  animation: hz-drop 1.5s var(--ease) .35s both, hz-float 6s ease-in-out 2s infinite;
  filter: drop-shadow(0 40px 45px rgba(0, 0, 0, .55));
}

.hz-record img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform .6s var(--ease);
}

.hz-record:hover img {
  transform: scale(1.04) rotate(4deg);
}

.hz-chip {
  position: absolute;
  z-index: 2;
  bottom: 2%;
  inset-inline-end: -4%;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .7rem 1rem;
  border-radius: 999px;
  background: #000000;
  color: #ffffff;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  box-shadow: 0 18px 30px -12px rgba(0, 0, 0, .6);
  animation: hz-pop .6s var(--ease) 1.2s both;
}

.hz-chip i {
  color: var(--red);
}

@keyframes hz-rise {
  from {
    opacity: 0;
    transform: translateY(60px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes hz-fade {
  from {
    opacity: 0;
    transform: translateY(14px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes hz-slide {
  from {
    transform: translateX(-30%);
    opacity: 0;
  }

  to {
    transform: none;
    opacity: 1;
  }
}

@keyframes hz-drop {
  from {
    opacity: 0;
    transform: rotate(-140deg) scale(.6);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes hz-float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-14px);
  }
}

@keyframes hz-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes hz-ring {
  0% {
    transform: scale(.72);
    opacity: .75;
  }

  100% {
    transform: scale(1.4);
    opacity: 0;
  }
}

@keyframes hz-pop {
  from {
    opacity: 0;
    transform: scale(.8) translateY(10px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@media (min-width: 1025px) {
  .hz-inner {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: 4rem;
  }
}

@media (max-width: 1024px) {
  .h2-hero.hz {
    padding-bottom: 3.5rem;
  }

  .hz-slash {
    inset-block: 58% 0;
    inset-inline: -5% -5%;
    clip-path: polygon(0 12%, 100% 0, 100% 100%, 0 100%);
  }

  .hz-stage {
    width: min(100%, 380px);
  }

  .hz-chip {
    bottom: 0;
  }
}

@media (max-width: 767px) {
  .hz-chip {
    font-size: .62rem;
  }

  .hz-stats li {
    font-size: .8rem;
  }
}

@media (prefers-reduced-motion: reduce) {

  .hz-word,
  .hz-actions,
  .hz-stats,
  .hz-record,
  .hz-chip,
  .hz-slash,
  .hz-orbit,
  .hz-ring {
    animation: none;
    opacity: 1;
  }

  .hz-record,
  .hz-slash {
    transform: none;
  }

  .hz-ring {
    display: none;
  }
}

/* ---------- The rig: stage plan (home 2) ---------- */
.sp {
  position: relative;
  isolation: isolate;
  padding: clamp(4rem, 9vw, 7rem) 0;
  overflow: clip;
}

.sp::before {
  content: "";
  position: absolute;
  inset: -10% -10% auto;
  height: 120%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(60% 55% at 25% 40%, rgba(225, 15, 15, .3), transparent 70%);
  opacity: calc(var(--glow, 0) * .9);
  transition: opacity .8s ease;
}

.sp .section-title {
  font-size: clamp(2.6rem, 4.6vw, 4.6rem);
  overflow-wrap: normal;
}

.sp-grid {
  display: grid;
  gap: 2.75rem;
}

.sp-count {
  margin: 1.75rem 0 0;
  display: flex;
  align-items: baseline;
  gap: .6rem;
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 7vw, 5.5rem);
  line-height: .9;
  color: var(--text);
}

.sp-count b {
  font-weight: 400;
  color: var(--red);
}

.sp-count span {
  font-family: var(--font);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Top-down stage plan: the floor is always dark, so its labels stay readable in both themes */
.sp-stage {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 5 / 4;
  background: #060606;
  border: 1px solid #222;
  border-radius: 28px;
  color: #ffffff;
  box-shadow: 0 40px 80px -40px rgba(225, 15, 15, .4);
}

.sp-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 42px 42px;
}

.sp-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(60% 60% at 50% 45%, rgba(225, 15, 15, .42), transparent 72%);
  opacity: var(--glow, 0);
  transition: opacity .8s ease;
}

.sp-edge {
  position: absolute;
  inset-inline: 6%;
  top: 24%;
  height: 2px;
  background: var(--red);
  box-shadow: 0 0 18px var(--red);
  opacity: .9;
}

.sp-label {
  position: absolute;
  inset-inline-start: 6%;
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
}

.sp-label--top {
  top: 14%;
}

.sp-label--top::after {
  content: "";
}

.sp-label--bottom {
  bottom: 4%;
}

.sp-token {
  position: absolute;
  z-index: 2;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #141414;
  color: #ffffff;
  border: 2px solid rgba(255, 255, 255, .3);
  font-size: 1.05rem;
  transition: transform .35s var(--ease), background-color .35s ease, border-color .35s ease;
}

.sp-token.is-on {
  background: var(--red);
  border-color: #ffffff;
  animation: sp-pulse 2.2s ease-out infinite;
}

@keyframes sp-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(225, 15, 15, .6);
  }

  70% {
    box-shadow: 0 0 0 20px rgba(225, 15, 15, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(225, 15, 15, 0);
  }
}

/* The light rig casts a beam across the floor when it is on */
.sp-token[data-kind="beam"].is-on::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  width: 260px;
  height: 300px;
  transform: translateX(-50%);
  background: linear-gradient(rgba(225, 15, 15, .5), rgba(225, 15, 15, 0) 85%);
  clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%);
  pointer-events: none;
  animation: sp-beam 2.6s ease-in-out infinite alternate;
}

@keyframes sp-beam {
  from {
    opacity: .55;
  }

  to {
    opacity: 1;
  }
}

/* List: the accessible controls */
.sp-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .65rem;
}

.sp-row {
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  padding: 1.1rem 1.25rem;
  text-align: start;
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  transition: background-color .5s ease, border-color .5s ease, color .5s ease, transform .5s var(--ease);
}

.sp-row.is-on {
  background: var(--red);
  border-color: var(--red);
  color: #ffffff;
  transform: translateX(-6px);
}

[dir="rtl"] .sp-row.is-on {
  transform: translateX(6px);
}

.sp-no {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--red);
  direction: ltr;
}

.sp-row.is-on .sp-no {
  color: #ffffff;
}

.sp-text {
  min-width: 0;
}

.sp-text strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.4vw, 1.9rem);
  line-height: 1;
  text-transform: uppercase;
}

.sp-text small {
  display: block;
  margin-top: .35rem;
  font-size: .88rem;
  line-height: 1.45;
  color: var(--muted);
}

.sp-row.is-on .sp-text small {
  color: rgba(255, 255, 255, .9);
}

.sp-state {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: .8rem;
  border: 1px solid currentColor;
  opacity: .7;
}

.sp-row.is-on .sp-state {
  opacity: 1;
  background: #ffffff;
  color: var(--red);
  border-color: #ffffff;
}

.sp-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  margin-top: 1.25rem;
  padding: 1.25rem 1.5rem;
  border: 1px dashed var(--red);
  border-radius: 22px;
}

.sp-summary {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .6rem;
  color: var(--text);
}

.sp-label-tag {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--red);
}

@media (min-width: 768px) {
  .sp-token {
    width: 64px;
    height: 64px;
  }
}

@media (min-width: 1025px) {
  .sp-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    align-items: center;
    gap: 4rem;
  }
}

@media (max-width: 767px) {
  .sp-stage {
    aspect-ratio: 1 / 1;
    border-radius: 22px;
  }

  .sp-token {
    width: 46px;
    height: 46px;
    font-size: .9rem;
    border-width: 2px;
  }

  .sp-row {
    gap: .75rem;
    padding: 1rem .9rem;
  }

  .sp-state {
    width: 32px;
    height: 32px;
  }
}

@media (prefers-reduced-motion: reduce) {

  .sp::before,
  .sp-stage::after,
  .sp-token,
  .sp-row,
  .sp-state,
  .sp-token.is-on,
  .sp-token[data-kind="beam"].is-on::after {
    animation: none;
    transition: none;
  }

  .sp-row.is-on {
    transform: none;
  }
}

@media (min-width: 1025px) {
  .sp-head {
    grid-column: 1;
    grid-row: 1;
  }

  .sp-panel {
    grid-column: 1;
    grid-row: 2;
  }

  .sp-stage-wrap {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
  }
}

/* Desktop: the stage plan stays in view while the list scrolls, then releases at the end of the section */
@media (min-width: 1025px) {
  .sp-stage-wrap {
    position: sticky;
    top: calc(var(--nav-h) + 2rem);
    align-self: start;
  }
}


/* ---------- Section headings: title on the left, paragraph on the right ----------
   Used on headings whose paragraph used to sit under the title and leave the
   right side of the row empty. The paragraph moves to the right column and
   lines up with the bottom of the title. Below 1024px it stacks again.
   Grid areas follow the writing direction, so RTL pages mirror correctly. */
.head-split {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  grid-template-areas:
    "kicker kicker"
    "title  lead";
  column-gap: clamp(2rem, 5vw, 5rem);
  row-gap: 1.1rem;
  align-items: end;
}

.head-split>.kicker {
  grid-area: kicker;
}

.head-split>.section-title {
  grid-area: title;
  margin-bottom: 0;
}

.head-split>.lead {
  grid-area: lead;
  justify-self: end;
  width: 100%;
  max-width: 34rem;
}

@media (max-width: 1023px) {
  .head-split {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "kicker" "title" "lead";
  }

  .head-split>.lead {
    justify-self: start;
    max-width: none;
  }
}