/* =============================================================
   THE NOT QUITE BIG BAND — GLOBAL STYLESHEET
   Mobile-first. Breakpoints: 480 / 768 / 1024 / 1280px
   ============================================================= */

/* =====================
   1. CSS CUSTOM PROPERTIES
   ===================== */
:root {
  --navy:       #0D1117;
  --orange:     #E8762C;
  --gold:       #C9A84C;
  --red:        #CC2200;
  --white:      #FFFFFF;
  --grey:       #CCCCCC;
  --cream:      #F5F0E8;
  --dark-card:  #1A1A2E;

  --font-display: 'Bebas Neue', 'Anton', sans-serif;
  --font-script:  'Caveat', 'Dancing Script', cursive;
  --font-body:    'Inter', sans-serif;

  --transition:      0.2s ease;
  --transition-slow: 0.4s ease;

  --nav-height: 64px;
}

/* =====================
   2. RESET & BASE
   ===================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: var(--navy);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  position: relative;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

ul, ol { list-style: none; }

input, select, textarea, button {
  font-family: inherit;
  font-size: inherit;
}

/* =====================
   3. GRAIN TEXTURE OVERLAY
   ===================== */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
  opacity: 0.4;
}

/* =====================
   4. NAVIGATION
   ===================== */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  height: var(--nav-height);
  background: rgba(13, 17, 23, 0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(232, 118, 44, 0.18);
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* Logo */
.nav__logo {
  display: flex;
  flex-direction: column;
  line-height: 0.85;
  text-decoration: none;
  flex-shrink: 0;
}
.nav__logo-nq {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: 0.06em;
  color: var(--white);
}
.nav__logo-bb {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: 0.06em;
  color: var(--orange);
}

/* Desktop links (hidden on mobile) */
.nav__links {
  display: none;
  gap: 28px;
  align-items: center;
  flex: 1;
  justify-content: center;
}
.nav__links a {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grey);
  transition: color var(--transition);
  white-space: nowrap;
  padding: 4px 0;
  position: relative;
}
.nav__links a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--orange);
  transform: scaleX(0);
  transition: transform var(--transition);
}
.nav__links a:hover,
.nav__links a.active {
  color: var(--orange);
}
.nav__links a:hover::after,
.nav__links a.active::after {
  transform: scaleX(1);
}

/* Desktop dropdown */
.nav__dropdown {
  position: relative;
}
.nav__dropdown-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  background: rgba(13,17,23,0.99);
  border: 1px solid rgba(255,255,255,0.1);
  border-top: 2px solid var(--orange);
  min-width: 160px;
  padding: 6px 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 200;
}
.nav__dropdown:hover .nav__dropdown-menu,
.nav__dropdown:focus-within .nav__dropdown-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav__dropdown-menu a {
  display: block;
  padding: 10px 20px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grey);
  text-decoration: none;
  transition: color var(--transition), padding-left var(--transition);
  white-space: nowrap;
}
.nav__dropdown-menu a::after { display: none !important; }
.nav__dropdown-menu a:hover,
.nav__dropdown-menu a.active { color: var(--orange); padding-left: 24px; }

/* Mobile overlay expander */
.nav__overlay-expander {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.nav__overlay-expander-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 40px;
  font-family: var(--font-display);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--orange);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  line-height: 1.2;
  transition: color var(--transition);
}
.nav__overlay-expander-btn:hover { color: var(--white); }
.nav__overlay-expander-icon {
  font-size: 28px;
  font-family: var(--font-sans);
  color: inherit;
  transition: transform 0.25s ease;
  line-height: 1;
}
.nav__overlay-expander-btn[aria-expanded="true"] .nav__overlay-expander-icon {
  transform: rotate(45deg);
}
.nav__overlay-expander-links {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 0 6px;
}
.nav__overlay-expander-links.is-open { display: flex; }
.nav__overlay-expander-links a {
  font-size: 22px;
  font-family: var(--font-display);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  text-decoration: none;
  transition: color var(--transition);
  line-height: 1.4;
}
.nav__overlay-expander-links a:hover { color: var(--orange); }

/* Right-side nav items */
.nav__right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

/* Social icons in nav (desktop only) */
.nav__social {
  display: none;
  gap: 8px;
  align-items: center;
}
.nav__social a {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--grey);
  font-size: 15px;
  transition: color var(--transition);
}
.nav__social a:hover { color: var(--orange); }

/* Contact button */
.nav__contact-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 14px;
  border: 1.5px solid var(--orange);
  color: var(--orange);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: all var(--transition);
  white-space: nowrap;
  min-height: 34px;
  text-decoration: none;
}
.nav__contact-btn:hover {
  background: var(--orange);
  color: var(--white);
}

/* Hamburger */
.nav__hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 8px;
  flex-shrink: 0;
}
.nav__hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--white);
  border-radius: 1px;
  transition: all var(--transition);
  transform-origin: center;
}
.nav__hamburger.is-open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav__hamburger.is-open span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.nav__hamburger.is-open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile nav overlay */
.nav__overlay {
  position: fixed;
  inset: 0;
  background: var(--navy);
  z-index: 190;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav__overlay.is-open {
  transform: translateX(0);
}
.nav__overlay a {
  font-family: var(--font-display);
  font-size: 40px;
  letter-spacing: 0.06em;
  color: var(--white);
  transition: color var(--transition);
  text-transform: uppercase;
}
.nav__overlay a:hover { color: var(--orange); }
.nav__overlay-divider {
  width: 40px;
  height: 2px;
  background: var(--orange);
  opacity: 0.5;
}
.nav__overlay-social {
  display: flex;
  gap: 24px;
  margin-top: 8px;
}
.nav__overlay-social a {
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--grey);
}
.nav__overlay-social a:hover { color: var(--orange); }

@media (min-width: 1024px) {
  .nav { padding: 0 32px; }
  .nav__links { display: flex; }
  .nav__social { display: flex; }
  .nav__hamburger { display: none; }
}

/* =====================
   5. FOOTER
   ===================== */
.footer {
  background: #070a0f;
  border-top: 1px solid rgba(232, 118, 44, 0.2);
  padding: 64px 24px 40px;
  position: relative;
  z-index: 1;
}
.footer__inner {
  max-width: 1200px;
  margin: 0 auto;
}
.footer__top {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  margin-bottom: 48px;
}
.footer__logo {
  display: flex;
  flex-direction: column;
  line-height: 0.85;
  margin-bottom: 8px;
}
.footer__logo-nq {
  font-family: var(--font-display);
  font-size: 36px;
  letter-spacing: 0.06em;
  color: var(--white);
}
.footer__logo-bb {
  font-family: var(--font-display);
  font-size: 36px;
  letter-spacing: 0.06em;
  color: var(--orange);
}
.footer__tagline {
  font-size: 12px;
  color: rgba(255,255,255,0.35);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 8px;
}
.footer__nav {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.footer__nav-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 4px;
}
.footer__nav a {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--grey);
  transition: color var(--transition);
}
.footer__nav a:hover { color: var(--white); }
.footer__social-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 12px;
  display: block;
}
.footer__social-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.footer__social-links a {
  font-size: 13px;
  font-weight: 500;
  color: var(--grey);
  transition: color var(--transition);
  letter-spacing: 0.04em;
}
.footer__social-links a:hover { color: var(--orange); }
.footer__contact-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 12px;
  display: block;
}
.footer__contact-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.footer__contact-links a {
  font-size: 14px;
  color: var(--grey);
  transition: color var(--transition);
}
.footer__contact-links a:hover { color: var(--white); }
.footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.07);
  padding-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}
.footer__legal {
  font-size: 11px;
  color: rgba(255,255,255,0.25);
  letter-spacing: 0.04em;
  line-height: 1.6;
}
.footer__legal a {
  color: rgba(255,255,255,0.35);
  transition: color var(--transition);
}
.footer__legal a:hover { color: var(--grey); }

@media (min-width: 640px) {
  .footer__top { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 768px) {
  .footer__top { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 32px; }
  .footer__bottom { flex-direction: row; justify-content: space-between; align-items: center; }
}

/* =====================
   6. BUTTONS
   ===================== */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: transparent;
  border: 2px solid var(--orange);
  color: var(--orange);
  padding: 12px 28px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all var(--transition);
  min-height: 48px;
  text-decoration: none;
  white-space: nowrap;
}
.btn-primary:hover {
  background: var(--orange);
  color: var(--white);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: transparent;
  border: 2px solid rgba(255,255,255,0.6);
  color: var(--white);
  padding: 12px 28px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all var(--transition);
  min-height: 48px;
  text-decoration: none;
  white-space: nowrap;
}
.btn-secondary:hover {
  background: var(--white);
  color: var(--navy);
  border-color: var(--white);
}

.btn-gold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--gold);
  border: 2px solid var(--gold);
  color: #1a1200;
  padding: 16px 36px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all var(--transition);
  min-height: 52px;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
}
.btn-gold:hover {
  background: #d4b65e;
  border-color: #d4b65e;
}

.btn-full { width: 100%; }

/* =====================
   7. LAYOUT UTILITIES
   ===================== */
.page-wrapper {
  padding-top: var(--nav-height);
  min-height: 100vh;
  position: relative;
  z-index: 1;
}

.section {
  position: relative;
  z-index: 1;
  padding: 80px 24px;
}
.section-sm { padding: 56px 24px; }
.section-lg { padding: 112px 24px; }

.container {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}
.container-narrow {
  max-width: 760px;
  margin: 0 auto;
  width: 100%;
}
.container-wide {
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
}

.text-center { text-align: center; }
.text-left   { text-align: left; }

/* =====================
   8. TYPOGRAPHY
   ===================== */

/* Style 1: Display / Bebas Neue (orange caps) */
.display-xs  { font-family: var(--font-display); font-size: 24px;  letter-spacing: 0.05em; line-height: 0.95; text-transform: uppercase; }
.display-sm  { font-family: var(--font-display); font-size: 32px;  letter-spacing: 0.05em; line-height: 0.95; text-transform: uppercase; }
.display-md  { font-family: var(--font-display); font-size: 48px;  letter-spacing: 0.04em; line-height: 0.95; text-transform: uppercase; }
.display-lg  { font-family: var(--font-display); font-size: 56px;  letter-spacing: 0.04em; line-height: 0.92; text-transform: uppercase; }
.display-xl  { font-family: var(--font-display); font-size: 72px;  letter-spacing: 0.03em; line-height: 0.90; text-transform: uppercase; }
.display-2xl { font-family: var(--font-display); font-size: 96px;  letter-spacing: 0.02em; line-height: 0.88; text-transform: uppercase; }

/* Style 2: Script / Caveat (flowing) */
.script-sm { font-family: var(--font-script); font-size: 48px;  line-height: 0.95; }
.script-md { font-family: var(--font-script); font-size: 64px;  line-height: 0.95; }
.script-lg { font-family: var(--font-script); font-size: 88px;  line-height: 0.92; }
.script-xl { font-family: var(--font-script); font-size: 112px; line-height: 0.90; }

/* Style 3: Serif (for landing-page style sections) */
.serif-sm { font-family: 'Georgia', serif; font-size: 24px; font-weight: 400; line-height: 1.2; color: var(--white); }
.serif-md { font-family: 'Georgia', serif; font-size: 32px; font-weight: 400; line-height: 1.15; color: var(--white); }
.serif-lg { font-family: 'Georgia', serif; font-size: 40px; font-weight: 400; line-height: 1.1;  color: var(--white); }
.serif-xl { font-family: 'Georgia', serif; font-size: 48px; font-weight: 400; line-height: 1.05; color: var(--white); }

/* Colour modifiers */
.c-orange { color: var(--orange); }
.c-gold   { color: var(--gold);   }
.c-grey   { color: var(--grey);   }
.c-white  { color: var(--white);  }
.c-cream  { color: var(--cream);  }

/* Section label (small all-caps orange display text) */
.section-label {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.25em;
  color: var(--orange);
  text-transform: uppercase;
  display: block;
}

/* Body text helpers */
.body-lg { font-size: 18px; line-height: 1.75; color: var(--grey); }
.body-md { font-size: 16px; line-height: 1.7;  color: var(--grey); }
.body-sm { font-size: 14px; line-height: 1.65; color: var(--grey); }

/* Responsive display sizes */
@media (min-width: 768px) {
  .display-md  { font-size: 64px; }
  .display-lg  { font-size: 80px; }
  .display-xl  { font-size: 96px; }
  .display-2xl { font-size: 120px; }
  .script-md { font-size: 88px; }
  .script-lg { font-size: 112px; }
  .script-xl { font-size: 136px; }
  .serif-md { font-size: 40px; }
  .serif-lg { font-size: 52px; }
  .serif-xl { font-size: 64px; }
}
@media (min-width: 1280px) {
  .display-xl  { font-size: 112px; }
  .display-2xl { font-size: 140px; }
}

/* =====================
   9. HERO SECTIONS
   ===================== */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 120px 24px 80px;
}
.hero--short {
  min-height: 60vh;
}

/* Hero background */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
  z-index: 1;
}
/* Gradient fallback — visible while video loads or in Firefox */
.hero__bg-placeholder {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #0d1117 0%, #1a1a2e 45%, #0d1117 100%);
  z-index: 0;
}
.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(13, 17, 23, 0.45) 0%,
    rgba(13, 17, 23, 0.65) 50%,
    rgba(13, 17, 23, 0.95) 100%
  );
  z-index: 3;
}
/* Hero background video */
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 2; /* above placeholder, below overlay */
}
@media (max-width: 767px) {
  .hero {
    min-height: 70vh;
    padding: 90px 20px 32px;
  }
  .hero__title-display { font-size: 44px; }
  .hero__title-script  { font-size: 50px; }
  .hero__body {
    font-size: 15px;
    margin-top: 16px;
  }
  .hero__ctas { margin-top: 20px; }

  /* Slightly stronger overlay on small screens for text contrast */
  .hero__overlay {
    background: linear-gradient(
      180deg,
      rgba(13, 17, 23, 0.55) 0%,
      rgba(13, 17, 23, 0.72) 45%,
      rgba(13, 17, 23, 0.97) 100%
    );
  }
}

/* Hero content — must be above overlay (z-index: 3) */
.hero__content {
  position: relative;
  z-index: 4;
  text-align: center;
  max-width: 860px;
  margin: 0 auto;
  width: 100%;
}

.hero__label {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.3em;
  color: var(--orange);
  text-transform: uppercase;
  display: block;
  margin-bottom: 16px;
}

.hero__title-display {
  font-family: var(--font-display);
  font-size: 52px;
  letter-spacing: 0.03em;
  line-height: 0.90;
  color: var(--white);
  text-transform: uppercase;
  display: block;
}
.hero__title-script {
  font-family: var(--font-script);
  font-size: 60px;
  line-height: 0.92;
  color: var(--orange);
  display: block;
}

.hero__body {
  font-size: 17px;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.78);
  max-width: 580px;
  margin: 28px auto 0;
}

.hero__ctas {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  margin-top: 36px;
}
@media (min-width: 480px) {
  .hero__ctas { flex-direction: row; justify-content: center; }
}

.hero__quotes {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hero__quotes p {
  font-size: 13px;
  font-style: italic;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.01em;
}

/* Scroll arrow — must be above overlay (z-index: 3) */
.hero__scroll {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  cursor: pointer;
  animation: hero-bounce 2.2s ease-in-out infinite;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.hero__scroll-arrow {
  display: block;
  width: 18px;
  height: 18px;
  border-right: 2px solid var(--orange);
  border-bottom: 2px solid var(--orange);
  transform: rotate(45deg);
}
@keyframes hero-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(10px); }
}

@media (min-width: 768px) {
  .hero__title-display { font-size: 80px; }
  .hero__title-script  { font-size: 90px; }
  .hero__body { font-size: 18px; }
}
@media (min-width: 1024px) {
  .hero__title-display { font-size: 96px; }
  .hero__title-script  { font-size: 108px; }
}
@media (min-width: 1280px) {
  .hero__title-display { font-size: 108px; }
  .hero__title-script  { font-size: 120px; }
}

/* =====================
   10. STATS / SOCIAL PROOF BAR
   ===================== */
.stats-bar {
  background: #151b26;
  border-top: 2px solid var(--orange);
  border-bottom: 2px solid var(--orange);
  padding: 48px 24px;
  position: relative;
  z-index: 1;
}
.stats-bar__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px 24px;
  max-width: 960px;
  margin: 0 auto;
  text-align: center;
}
.stats-bar__number {
  font-family: var(--font-display);
  font-size: 52px;
  letter-spacing: 0.02em;
  color: var(--orange);
  line-height: 1;
  display: block;
}
.stats-bar__label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--grey);
  margin-top: 6px;
  display: block;
  line-height: 1.5;
}
@media (min-width: 768px) {
  .stats-bar__grid { grid-template-columns: repeat(4, 1fr); }
  .stats-bar__number { font-size: 64px; }
}

/* =====================
   11. PHILOSOPHY SECTION
   ===================== */
.philosophy__grid {
  display: flex;
  flex-direction: column;
  gap: 48px;
  margin-top: 56px;
}
.philosophy__item {
  text-align: center;
  flex: 1;
}
.philosophy__icon {
  font-size: 40px;
  display: block;
  margin-bottom: 20px;
  line-height: 1;
}
.philosophy__title {
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 0.1em;
  color: var(--orange);
  margin-bottom: 12px;
  text-transform: uppercase;
}
.philosophy__body {
  font-size: 15px;
  line-height: 1.75;
  color: var(--grey);
  max-width: 300px;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .philosophy__grid { flex-direction: row; gap: 40px; }
}

/* =====================
   12. EXPERIENCE CARDS (3-column)
   ===================== */
.experience-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 48px;
}
.experience-card {
  position: relative;
  min-height: 400px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  cursor: pointer;
  transition: transform var(--transition);
  text-decoration: none;
}
.experience-card:hover { transform: translateY(-4px); }
.experience-card__bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #1a1a2e 0%, #0d1117 100%);
}
.experience-card__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.45;
  transition: transform var(--transition-slow);
}
.experience-card:hover .experience-card__bg img {
  transform: scale(1.04);
}
.experience-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    0deg,
    rgba(13, 17, 23, 0.97) 0%,
    rgba(13, 17, 23, 0.55) 55%,
    rgba(13, 17, 23, 0.2) 100%
  );
}
.experience-card__border {
  position: absolute;
  inset: 0;
  border: 2px solid var(--orange);
  opacity: 0;
  transition: opacity var(--transition);
  pointer-events: none;
}
.experience-card:hover .experience-card__border { opacity: 1; }

.experience-card__content {
  position: relative;
  z-index: 1;
  padding: 28px 28px 32px;
  width: 100%;
}
.experience-card__badge {
  display: inline-block;
  background: var(--orange);
  color: var(--white);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.experience-card__title {
  font-family: var(--font-display);
  font-size: 36px;
  letter-spacing: 0.04em;
  color: var(--white);
  line-height: 0.92;
  margin-bottom: 12px;
  text-transform: uppercase;
}
.experience-card__body {
  font-size: 14px;
  line-height: 1.65;
  color: var(--grey);
  margin-bottom: 20px;
}
.experience-card__cta {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange);
  display: flex;
  align-items: center;
  gap: 8px;
  transition: gap var(--transition);
}
.experience-card:hover .experience-card__cta { gap: 14px; }

@media (min-width: 1024px) {
  .experience-cards { grid-template-columns: repeat(3, 1fr); }
  .experience-card { min-height: 500px; }
}

/* =====================
   13. SPLIT SECTIONS
   ===================== */
.split-section {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: center;
}
.split-section--reverse .split-section__visual { order: -1; }
.split-section__visual {
  position: relative;
  overflow: hidden;
}
.split-section__visual-img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
}
.split-section__visual-placeholder {
  aspect-ratio: 4/3;
  background: var(--dark-card);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: rgba(255,255,255,0.25);
  text-align: center;
  padding: 16px;
}
.split-section__content {}
.split-section__content > * + * { margin-top: 16px; }
.split-section__content p {
  font-size: 15px;
  line-height: 1.75;
  color: var(--grey);
}

.trust-badges {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 24px;
}
.trust-badge {
  background: rgba(255,255,255,0.92);
  border-radius: 6px;
  height: 56px;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.trust-badge img {
  max-height: 36px;
  max-width: 110px;
  width: auto;
  object-fit: contain;
  display: block;
}

@media (min-width: 768px) {
  .split-section { grid-template-columns: 1fr 1fr; gap: 64px; }
  .split-section--reverse .split-section__visual { order: 0; }
  .split-section--reverse > :first-child { order: 1; }
}

/* =====================
   14. SOCIAL MEDIA SECTION
   ===================== */
.social-phones-row {
  display: flex;
  gap: 28px;
  justify-content: center;
  align-items: flex-start;
  margin: 48px 0;
  flex-wrap: wrap;
}
.social-phone {
  width: min(340px, calc(100vw - 48px));
  flex-shrink: 0;
  background: #111;
  border-radius: 32px;
  border: 6px solid #252525;
  box-shadow: 0 28px 80px rgba(0,0,0,0.75), 0 0 0 1px rgba(255,255,255,0.04);
  overflow: hidden;
}
.social-phone__bar {
  background: #111;
  padding: 10px 14px 9px;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.social-phone__embed {
  background: #fff;
  overflow: hidden;
  /* Force embed scripts to render at full container width */
  width: 100%;
}
.social-phone__embed .instagram-media,
.social-phone__embed .tiktok-embed {
  margin: 0 !important;
  max-width: 100% !important;
  min-width: 0 !important;
  width: 100% !important;
  border: 0 !important;
}

/* =====================
   15. TESTIMONIALS
   ===================== */
.testimonial-banner {
  background: var(--navy);
  border-top: 2px solid var(--orange);
  border-bottom: 2px solid var(--orange);
  padding: 72px 24px;
  text-align: center;
  position: relative;
  z-index: 1;
}
.testimonial-banner__quote {
  font-family: var(--font-display);
  font-size: 28px;
  letter-spacing: 0.04em;
  color: var(--white);
  line-height: 1.1;
  max-width: 860px;
  margin: 0 auto 24px;
  text-transform: uppercase;
}
.testimonial-banner__attr {
  font-size: 14px;
  color: var(--grey);
  font-style: italic;
  margin-bottom: 32px;
}
@media (min-width: 768px) {
  .testimonial-banner__quote { font-size: 40px; }
}

/* Testimonial card grid */
.testimonial-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 48px;
}
.testimonial-card {
  background: var(--dark-card);
  padding: 28px 24px;
  border-left: 3px solid var(--orange);
}
.testimonial-card__text {
  font-size: 15px;
  line-height: 1.75;
  color: var(--white);
  margin-bottom: 16px;
  font-style: italic;
}
.testimonial-card__attr {
  font-size: 12px;
  color: var(--grey);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
@media (min-width: 768px) {
  .testimonial-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Large featured testimonial (weddings page) */
.testimonial-large {
  max-width: 760px;
  margin: 0 auto;
  padding: 48px 24px;
  text-align: center;
  position: relative;
}
.testimonial-large__quote {
  font-family: 'Georgia', serif;
  font-size: 18px;
  line-height: 1.75;
  color: var(--white);
  font-style: italic;
  margin-bottom: 24px;
}
.testimonial-large__attr {
  font-size: 13px;
  color: var(--grey);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
@media (min-width: 768px) {
  .testimonial-large__quote { font-size: 20px; }
}

/* =====================
   16. POLAROID TREATMENT
   ===================== */
.polaroid {
  background: var(--cream);
  padding: 10px 10px 28px 10px;
  box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.55);
  transform: rotate(var(--rot, -1.5deg));
  display: inline-block;
  flex-shrink: 0;
}
.polaroid img {
  width: 100%;
  display: block;
  aspect-ratio: 3/4;
  object-fit: cover;
}
.polaroid__placeholder {
  aspect-ratio: 3/4;
  background: #1a1a2e;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #444;
  font-size: 10px;
  text-align: center;
  padding: 8px;
}
.polaroid .caption {
  font-family: var(--font-script);
  font-size: 15px;
  color: #333;
  text-align: center;
  margin-top: 6px;
  line-height: 1.2;
}

/* =====================
   17. VIDEO EMBEDS
   ===================== */
.video-wrapper {
  position: relative;
  aspect-ratio: 16/9;
  width: 100%;
  background: var(--dark-card);
  overflow: hidden;
}
.video-wrapper iframe,
.video-wrapper video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
/* Mute toggle for autoplay showreel videos */
.video-mute-btn {
  position: absolute;
  bottom: 12px;
  right: 12px;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.22);
  color: var(--white);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.video-mute-btn:hover {
  background: rgba(232,118,44,0.25);
  border-color: var(--orange);
}
.video-mute-btn .sound-icon { display: block; flex-shrink: 0; }
.video-mute-btn .sound-icon--on { display: none; }
.video-mute-btn.is-unmuted .sound-icon--off { display: none; }
.video-mute-btn.is-unmuted .sound-icon--on  { display: block; }

.video-wrapper__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: rgba(255,255,255,0.3);
  font-size: 12px;
  letter-spacing: 0.08em;
  background: linear-gradient(135deg, #1a1a2e 0%, #0d1117 100%);
  text-transform: uppercase;
}
.video-wrapper__play {
  width: 56px;
  height: 56px;
  border: 1.5px solid rgba(255,255,255,0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0;
}
.video-wrapper__play::after {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 9px 0 9px 16px;
  border-color: transparent transparent transparent rgba(255,255,255,0.4);
  margin-left: 4px;
}

/* Hero background video */
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* =====================
   18. FORMS
   ===================== */
.form-section {
  padding: 80px 24px;
  position: relative;
  z-index: 1;
}
.form-section--dark { background: var(--dark-card); }
.form-section--warm { background: #1a1512; }

.form-heading {
  font-family: var(--font-display);
  font-size: 40px;
  letter-spacing: 0.04em;
  color: var(--orange);
  text-transform: uppercase;
  margin-bottom: 8px;
  line-height: 0.95;
}
.form-subheading {
  font-size: 15px;
  color: var(--white);
  margin-bottom: 40px;
  line-height: 1.6;
}
@media (min-width: 768px) { .form-heading { font-size: 56px; } }

.form {
  max-width: 640px;
  margin: 0 auto;
}
.form__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
@media (min-width: 480px) {
  .form__row--2 { grid-template-columns: 1fr 1fr; }
}

.form__group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.form__group--full { grid-column: 1 / -1; }

.form__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
}
.form__required { color: var(--orange); }

.form__input,
.form__select,
.form__textarea {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.14);
  color: var(--white);
  padding: 12px 16px;
  font-size: 15px;
  line-height: 1.5;
  transition: border-color var(--transition);
  width: 100%;
  min-height: 48px;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
}
.form__input:focus,
.form__select:focus,
.form__textarea:focus {
  outline: none;
  border-color: var(--orange);
  background: rgba(255,255,255,0.06);
}
.form__input::placeholder,
.form__textarea::placeholder { color: rgba(255,255,255,0.22); }

.form__select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 4.5L11 1' stroke='%23CCCCCC' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 44px;
  cursor: pointer;
}
.form__select option { background: #0d1117; color: var(--white); }

.form__textarea {
  resize: vertical;
  min-height: 120px;
}

.form__submit { margin-top: 8px; }

.response-promise {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--grey);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 24px;
}
.response-promise::before {
  content: '';
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--orange);
  flex-shrink: 0;
}

.form__note {
  text-align: center;
  font-size: 13px;
  color: rgba(255,255,255,0.45);
  margin-top: 20px;
}
.form__note a { color: var(--gold); text-decoration: underline; }

/* =====================
   19. ACCORDION / FAQ
   ===================== */
.accordion {
  max-width: 760px;
  margin: 0 auto;
}
.accordion__item {
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.accordion__trigger {
  width: 100%;
  text-align: left;
  padding: 20px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--white);
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  transition: color var(--transition);
  min-height: 60px;
  line-height: 1.4;
}
.accordion__trigger:hover { color: var(--orange); }
.accordion__icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border: 1.5px solid var(--orange);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--orange);
  font-size: 16px;
  font-weight: 300;
  line-height: 1;
  transition: transform var(--transition);
}
.accordion__item.is-open .accordion__icon { transform: rotate(45deg); }
.accordion__body {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.35s ease, padding 0.35s ease;
}
.accordion__body-inner {
  padding: 0 0 24px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--grey);
}
.accordion__item.is-open .accordion__body { max-height: 400px; }

/* =====================
   20. LINEUP / PRICING CARDS
   ===================== */
.lineup-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 48px;
}
.lineup-card {
  background: var(--dark-card);
  border: 1px solid rgba(232, 118, 44, 0.25);
  padding: 28px 24px;
  transition: border-color var(--transition), transform var(--transition);
}
.lineup-card:hover {
  border-color: var(--orange);
  transform: translateY(-2px);
}
.lineup-card__name {
  font-family: var(--font-display);
  font-size: 26px;
  letter-spacing: 0.06em;
  color: var(--white);
  margin-bottom: 2px;
  text-transform: uppercase;
}
.lineup-card__price {
  font-family: var(--font-display);
  font-size: 36px;
  color: var(--gold);
  margin-bottom: 12px;
  line-height: 1;
}
.lineup-card__desc {
  font-size: 13px;
  line-height: 1.65;
  color: var(--grey);
}
@media (min-width: 480px) { .lineup-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .lineup-grid { grid-template-columns: repeat(4, 1fr); } }

/* =====================
   21. WHAT YOU GET (Wedding numbered list)
   ===================== */
.wyg-list {
  max-width: 720px;
  margin: 48px auto 0;
}
.wyg-item {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 20px;
  padding: 32px 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  align-items: start;
}
.wyg-item:last-child { border-bottom: none; }
.wyg-number {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--gold);
  width: 44px;
  height: 44px;
  border: 1.5px solid var(--gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: 0.04em;
}
.wyg-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
}
.wyg-body {
  font-size: 15px;
  line-height: 1.75;
  color: var(--grey);
}

/* =====================
   22. SHOW IMAGES GALLERY
   ===================== */
.show-gallery {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 40px;
}
.show-gallery__item {
  overflow: hidden;
  position: relative;
  background: var(--dark-card);
  flex: 1;
}
.show-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.45s ease;
}
.show-gallery__item:hover img { transform: scale(1.04); }
.show-gallery__placeholder {
  width: 100%;
  aspect-ratio: 3/4;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: rgba(255,255,255,0.25);
  background: linear-gradient(135deg, #1a1a2e, #0d1117);
}
@media (min-width: 768px) {
  .show-gallery { flex-direction: row; }
  .show-gallery__item { aspect-ratio: 3/4; width: 0; }
}

/* =====================
   23. WEDDING PACKAGE STAGES
   ===================== */
.package-stages {
  max-width: 800px;
  margin: 40px auto 0;
}
.package-stage {
  padding: 28px 0;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.package-stage:last-child { border-bottom: none; }
.package-stage__label {
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.22em;
  color: var(--orange);
  text-transform: uppercase;
  margin-bottom: 8px;
  display: block;
}
.package-stage__body {
  font-size: 15px;
  line-height: 1.75;
  color: var(--grey);
}

/* =====================
   24. ADD-ONS CARDS
   ===================== */
.addons-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 32px;
}
.addon-card {
  position: relative;
  overflow: hidden;
  background: var(--dark-card);
  display: flex;
  align-items: flex-end;
  min-height: 200px;
}
.addon-card__bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #1a1a2e 0%, #0d1117 100%);
}
.addon-card__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.addon-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.3) 100%);
}
.addon-card__content {
  position: relative;
  z-index: 1;
  padding: 24px;
}
.addon-card__title {
  font-family: var(--font-display);
  font-size: 30px;
  letter-spacing: 0.05em;
  color: var(--white);
  text-transform: uppercase;
  line-height: 0.95;
}
@media (min-width: 768px) { .addons-grid { grid-template-columns: 1fr 1fr; } }

/* =====================
   25. FEATURED IN CARD
   ===================== */
.featured-card {
  background: var(--dark-card);
  border: 1px solid rgba(201, 168, 76, 0.3);
  padding: 36px 32px;
  max-width: 560px;
  text-decoration: none;
  display: block;
  margin: 32px auto 0;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--transition), transform var(--transition);
}
.featured-card:hover {
  border-color: var(--gold);
  transform: translateY(-2px);
}
.featured-card__overline {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
  display: block;
}
.featured-card__title {
  font-family: var(--font-display);
  font-size: 26px;
  letter-spacing: 0.06em;
  color: var(--white);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.featured-card__sub {
  font-size: 13px;
  color: var(--grey);
}

/* =====================
   26. SCARCITY / CLOSING CTA
   ===================== */
.scarcity-section {
  padding: 80px 24px;
  text-align: center;
  position: relative;
  z-index: 1;
}
.scarcity-section--warm { background: #1a1512; }
.scarcity-heading {
  font-family: 'Georgia', serif;
  font-size: 30px;
  line-height: 1.2;
  color: var(--white);
  max-width: 580px;
  margin: 0 auto 16px;
  font-weight: 400;
}
.scarcity-subtext {
  font-size: 15px;
  line-height: 1.7;
  color: var(--grey);
  max-width: 480px;
  margin: 0 auto 32px;
}
@media (min-width: 768px) { .scarcity-heading { font-size: 42px; } }

/* =====================
   27. TRUSTED BY LOGOS
   ===================== */
.trusted-by-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  align-items: center;
  margin-top: 32px;
}
.trusted-logo {
  padding: 10px 20px;
  border: 1px solid rgba(255,255,255,0.14);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  transition: all var(--transition);
}
.trusted-logo:hover {
  border-color: rgba(255,255,255,0.4);
  color: var(--white);
}

/* =====================
   28. ADDITIONAL ENTERTAINMENT CARDS
   ===================== */
.add-ent-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 40px;
}
.add-ent-card {
  background: var(--dark-card);
  padding: 32px 24px;
  border-top: 3px solid var(--orange);
}
.add-ent-card__icon {
  font-size: 36px;
  display: block;
  margin-bottom: 14px;
  line-height: 1;
}
.add-ent-card__title {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: 0.07em;
  color: var(--orange);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.add-ent-card__size {
  font-size: 12px;
  color: var(--gold);
  font-weight: 500;
  letter-spacing: 0.06em;
  margin-bottom: 14px;
  display: block;
}
.add-ent-card__details {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.add-ent-card__details span {
  font-size: 13px;
  color: var(--grey);
  line-height: 1.5;
}
@media (min-width: 768px) { .add-ent-grid { grid-template-columns: repeat(3, 1fr); } }

/* =====================
   29. LIVE SHOWS — TICKET CARDS
   ===================== */
.ticket-card {
  background: var(--cream);
  color: #1a1200;
  padding: 24px 28px;
  border-left: 6px solid var(--orange);
  position: relative;
  max-width: 480px;
  overflow: hidden;
}
.ticket-card::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 64px;
  background: repeating-linear-gradient(
    0deg,
    transparent 0px,
    transparent 7px,
    rgba(0, 0, 0, 0.05) 7px,
    rgba(0, 0, 0, 0.05) 8px
  );
}
.ticket-card__name {
  font-family: var(--font-display);
  font-size: 26px;
  letter-spacing: 0.06em;
  color: #1a1200;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.ticket-card__date {
  font-size: 14px;
  font-weight: 700;
  color: #c4530a;
  margin-bottom: 4px;
  letter-spacing: 0.04em;
}
.ticket-card__venue {
  font-size: 13px;
  color: #555;
  margin-bottom: 20px;
}
.ticket-card__status {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 4px 12px;
  background: var(--orange);
  color: var(--white);
  border-radius: 2px;
}

/* Mailing list sign-up */
.mailing-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 480px;
  margin: 24px auto 0;
}
.mailing-form__row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.mailing-form .form__input {
  flex: 1;
  min-width: 160px;
}

/* =====================
   30. SHOW FORMATS (Live Shows page)
   ===================== */
.show-format {
  padding: 64px 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.show-format:last-child { border-bottom: none; }
.show-format__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}
.show-format__title {
  font-family: var(--font-display);
  font-size: 36px;
  letter-spacing: 0.04em;
  color: var(--orange);
  text-transform: uppercase;
  margin-bottom: 16px;
  line-height: 0.95;
}
.show-format__body {
  font-size: 15px;
  line-height: 1.8;
  color: var(--grey);
  margin-bottom: 16px;
}
.show-format__perfect {
  font-size: 13px;
  color: var(--gold);
  font-style: italic;
  font-weight: 500;
  line-height: 1.6;
}
.show-format__visual {
  aspect-ratio: 4/3;
  background: var(--dark-card);
  overflow: hidden;
}
.show-format__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.show-format__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: rgba(255,255,255,0.25);
  background: linear-gradient(135deg, #1a1a2e, #0d1117);
}
@media (min-width: 768px) {
  .show-format__inner { grid-template-columns: 1fr 1fr; }
  .show-format:nth-child(even) .show-format__inner { direction: rtl; }
  .show-format:nth-child(even) .show-format__inner > * { direction: ltr; }
}
@media (min-width: 1024px) {
  .show-format__title { font-size: 48px; }
}

/* =====================
   31. NEWSPAPER REVIEW CLIP
   ===================== */
.news-clip {
  background: #ede8d8;
  color: #1a1a0d;
  padding: 24px 28px;
  max-width: 500px;
  border-left: 4px solid #1a1a0d;
  margin: 24px 0;
}
.news-clip__headline {
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 0.04em;
  color: #1a1a0d;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.news-clip__bullets {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.news-clip__bullets li {
  font-size: 13px;
  line-height: 1.55;
  color: #333;
  padding-left: 20px;
  position: relative;
}
.news-clip__bullets li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--orange);
  font-size: 11px;
  top: 1px;
}

/* =====================
   32. VINYL RECORD MOCKUPS
   ===================== */
/* Interactive player styles (disc wrap, play button, spin, status) */
.vinyl__disc-wrap {
  position: relative;
  width: 160px;
  margin: 0 auto 16px;
}
.vinyl__disc-wrap .vinyl__disc {
  transition: transform 0.3s ease;
  cursor: default;
}
.vinyl__disc-wrap .vinyl__disc:hover {
  transform: none;
}
@keyframes vinyl-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.vinyl__disc.is-spinning {
  animation: vinyl-spin 2.4s linear infinite;
}
.vinyl__play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--orange);
  border: 3px solid #fff;
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, transform 0.2s;
  z-index: 10;
  box-shadow: 0 4px 20px rgba(0,0,0,0.6);
  line-height: 1;
  padding: 0;
}
.vinyl__play-btn:hover {
  background: #ff8c3a;
  transform: translate(-50%, -50%) scale(1.1);
}
.vinyl__play-btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}
.vinyl__play-btn .play-icon  { margin-left: 4px; }
.vinyl__play-btn .pause-icon { display: none; }
.vinyl__play-btn.is-playing .play-icon  { display: none; }
.vinyl__play-btn.is-playing .pause-icon { display: block; }
.vinyl__status {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange);
  margin-top: 6px;
  min-height: 16px;
  opacity: 0;
  transition: opacity 0.3s;
}
.vinyl__status.is-visible { opacity: 1; }
.vinyl-row {
  display: flex;
  gap: 40px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 40px;
}
.vinyl {
  width: 160px;
  text-align: center;
}
.vinyl__disc {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(
    circle at center,
    #111 0%, #111 18%,
    #1e1e1e 19%, #1e1e1e 20%,
    #111 21%, #111 45%,
    #1e1e1e 46%, #1e1e1e 47%,
    #111 48%, #111 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.7);
  border: 1px solid #333;
  position: relative;
  cursor: pointer;
  transition: transform var(--transition);
}
.vinyl__disc:hover { transform: rotate(15deg) scale(1.04); }
.vinyl__disc::before {
  content: '';
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--orange);
  position: absolute;
  z-index: 1;
}
.vinyl__disc::after {
  content: '▶';
  position: absolute;
  z-index: 2;
  font-size: 14px;
  color: rgba(0,0,0,0.6);
  margin-left: 3px;
}
.vinyl__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 2px;
}
.vinyl__sub {
  font-size: 11px;
  color: var(--grey);
}

/* =====================
   33. VENUE / PROMOTER BOX
   ===================== */
.venue-box {
  border: 2px solid var(--orange);
  padding: 48px 32px;
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
}
.venue-box > * + * { margin-top: 16px; }

/* =====================
   34. EXPERIENCES HUB — LARGE EDITORIAL CARDS
   ===================== */
.exp-card {
  position: relative;
  min-height: 500px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  margin-bottom: 24px;
  text-decoration: none;
}
.exp-card__bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #1a1a2e 0%, #0d1117 100%);
}
.exp-card__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.4;
  transition: transform 0.5s ease;
}
.exp-card:hover .exp-card__bg img { transform: scale(1.04); }
.exp-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    0deg,
    rgba(13,17,23,0.96) 0%,
    rgba(13,17,23,0.5) 60%,
    rgba(13,17,23,0.15) 100%
  );
}
.exp-card__content {
  position: relative;
  z-index: 1;
  padding: 40px 40px 48px;
  width: 100%;
}
.exp-card__badge {
  display: inline-block;
  background: var(--orange);
  color: var(--white);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 999px;
  margin-bottom: 18px;
}
.exp-card__title {
  font-family: var(--font-display);
  font-size: 36px;
  letter-spacing: 0.04em;
  color: var(--white);
  line-height: 0.93;
  max-width: 620px;
  margin-bottom: 16px;
  text-transform: uppercase;
}
.exp-card__body {
  font-size: 15px;
  line-height: 1.7;
  color: var(--grey);
  max-width: 560px;
  margin-bottom: 24px;
}
.exp-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange);
  transition: gap var(--transition);
}
.exp-card:hover .exp-card__cta { gap: 16px; }
@media (min-width: 768px) {
  .exp-card__title { font-size: 52px; }
}

/* =====================
   35. SCROLL REVEAL ANIMATIONS
   ===================== */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal--delay-1 { transition-delay: 0.08s; }
.reveal--delay-2 { transition-delay: 0.16s; }
.reveal--delay-3 { transition-delay: 0.24s; }
.reveal--delay-4 { transition-delay: 0.32s; }

/* =====================
   36. CONTACT PAGE
   ===================== */
.contact-hero {
  padding: 120px 24px 80px;
  text-align: center;
  position: relative;
  z-index: 1;
}
.contact-details {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  margin-top: 32px;
}
.contact-detail {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 22px;
  font-weight: 600;
  color: var(--white);
  transition: color var(--transition);
  min-height: 52px;
  padding: 4px 8px;
  text-decoration: none;
}
.contact-detail:hover { color: var(--orange); }
.contact-detail__icon { font-size: 24px; flex-shrink: 0; }
.contact-social-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 320px;
  margin: 0 auto;
}
@media (min-width: 480px) {
  .contact-social-grid { flex-direction: row; justify-content: center; }
}

/* =====================
   37. SECTION INTRO BLOCK
   ===================== */
.section-intro {
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}
.section-intro .section-label { margin-bottom: 14px; }
.section-intro > * + * { margin-top: 14px; }

/* =====================
   38. ORANGE LINE DIVIDERS
   ===================== */
.rule-orange {
  border: none;
  height: 2px;
  background: var(--orange);
  opacity: 0.5;
  margin: 0;
}

/* =====================
   39. BACKGROUND SECTION VARIANTS
   ===================== */
.bg-dark-card { background: var(--dark-card); }
.bg-dark-alt  { background: #080b10; }
.bg-warm-dark { background: #1a1512; }
.bg-theatre   { background: #1f0000; }

/* =====================
   40. SPACING HELPERS
   ===================== */
.mt-0  { margin-top: 0; }
.mt-8  { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
.mt-40 { margin-top: 40px; }
.mt-48 { margin-top: 48px; }
.mt-64 { margin-top: 64px; }

.mb-0  { margin-bottom: 0; }
.mb-8  { margin-bottom: 8px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }
.mb-32 { margin-bottom: 32px; }
.mb-40 { margin-bottom: 40px; }
.mb-48 { margin-bottom: 48px; }

/* =====================
   41. ENQUIRY SPLIT LAYOUT & CALL PANEL
   ===================== */
.enquiry-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 64px;
  align-items: start;
}
@media (min-width: 1024px) {
  .enquiry-split { grid-template-columns: 1.2fr 1fr; }
}
.call-panel {
  background: var(--dark-card);
  border: 1px solid rgba(232, 118, 44, 0.25);
  padding: 40px 32px;
}

/* =====================
   SOCIAL STATIC CARDS
   ===================== */
.social-static-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 48px;
}
@media (min-width: 640px) {
  .social-static-grid { grid-template-columns: repeat(3, 1fr); }
}
.social-static-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 40px 24px;
  background: var(--dark-card);
  border: 1px solid rgba(255,255,255,0.07);
  text-decoration: none;
  transition: border-color var(--transition), transform var(--transition);
  gap: 8px;
}
.social-static-card:hover {
  border-color: var(--orange);
  transform: translateY(-4px);
}
.social-static-card__icon {
  color: var(--orange);
  margin-bottom: 8px;
  opacity: 0.9;
}
.social-static-card__stat {
  font-family: var(--font-display);
  font-size: clamp(48px, 7vw, 72px);
  letter-spacing: 0.04em;
  color: var(--white);
  line-height: 1;
}
.social-static-card__label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grey);
}
.social-static-card__handle {
  font-size: 14px;
  color: rgba(204,204,204,0.5);
  margin-top: 4px;
}
.social-static-card__cta {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--orange);
  margin-top: 16px;
}

/* =====================
   COOKIE BANNER
   ===================== */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
  background: #0a0d12;
  border-top: 2px solid var(--orange);
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  transform: translateY(100%);
  transition: transform 0.4s ease;
  box-shadow: 0 -4px 24px rgba(0,0,0,0.4);
}
.cookie-banner--visible {
  transform: translateY(0);
}
.cookie-banner__text {
  font-size: 13px;
  color: var(--grey);
  line-height: 1.6;
  flex: 1;
  min-width: 200px;
}
.cookie-banner__text a {
  color: var(--orange);
  text-decoration: underline;
}
.cookie-banner__text a:hover {
  color: var(--white);
}
.cookie-banner__actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.cookie-banner__btn {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 10px 20px;
  cursor: pointer;
  border: none;
  min-height: 40px;
  transition: all var(--transition);
  white-space: nowrap;
}
.cookie-banner__btn--secondary {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.2);
  color: var(--grey);
}
.cookie-banner__btn--secondary:hover {
  border-color: var(--orange);
  color: var(--white);
}
.cookie-banner__btn--primary {
  background: var(--orange);
  color: var(--white);
}
.cookie-banner__btn--primary:hover {
  background: #d4681e;
}
@media (max-width: 480px) {
  .cookie-banner {
    flex-direction: column;
    align-items: flex-start;
  }
  .cookie-banner__actions {
    width: 100%;
  }
  .cookie-banner__btn {
    flex: 1;
    text-align: center;
  }
}
.call-panel__heading {
  font-family: var(--font-display);
  font-size: 32px;
  letter-spacing: 0.04em;
  color: var(--white);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.call-panel__body {
  font-size: 15px;
  line-height: 1.75;
  color: var(--grey);
  margin-bottom: 28px;
}
.call-panel__divider {
  height: 1px;
  background: rgba(255,255,255,0.08);
  margin: 32px 0;
}
.call-panel__social-heading {
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: 0.06em;
  color: var(--orange);
  text-transform: uppercase;
  margin-bottom: 16px;
}
.call-panel__social-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.call-panel__social-link {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey);
  text-decoration: none;
  padding: 10px 16px;
  border: 1px solid rgba(255,255,255,0.1);
  transition: all var(--transition);
  min-height: 48px;
}
.call-panel__social-link:hover {
  color: var(--white);
  border-color: var(--orange);
  background: rgba(232,118,44,0.06);
}
.call-panel__social-link svg { flex-shrink: 0; opacity: 0.7; }
.call-panel__social-link:hover svg { opacity: 1; }

/* =====================
   42. DISPLAY HELPERS
   ===================== */
@media (max-width: 767px)  { .hide-mobile  { display: none !important; } }
@media (min-width: 768px)  { .hide-tablet  { display: none !important; } }
@media (min-width: 1024px) { .hide-desktop { display: none !important; } }

/* =====================
   42. SECTION BACKGROUND IMAGE PLACEHOLDER
   ===================== */
.bg-image-placeholder {
  background: linear-gradient(135deg, #1a1a2e 0%, #0d1117 100%);
}

/* =====================
   43. LARGE DESKTOP
   ===================== */
@media (min-width: 1280px) {
  .section    { padding: 100px 40px; }
  .section-sm { padding: 72px 40px; }
  .section-lg { padding: 140px 40px; }
  .container  { max-width: 1240px; }
}

/* =====================
   44. LOGO IMAGE
   mix-blend-mode: screen makes the black bg
   invisible against the dark navy site.
   ===================== */
.nav__logo {
  flex-direction: row;
  align-items: center;
  padding: 4px 0;
}
.nav__logo-img {
  height: 44px;
  width: auto;
  display: block;
  flex-shrink: 0;
}
.footer__logo {
  flex-direction: row;
  align-items: center;
}
.footer__logo-img {
  height: 68px;
  width: auto;
  display: block;
}
.footer__logo-img--small {
  height: 30px;
  opacity: 0.45;
}