/* Invisible Bot Defense Trap Fields - Zero Layout Footprint */
.dl-honeypot,
.dl-honeypot-wrap {
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  z-index: -999 !important;
  overflow: hidden !important;
}

:root {
  color-scheme: dark;
  --bg: #020203;
  --ink: #f7f8f5;
  --muted: #abb1b3;
  --soft: rgba(247, 248, 245, 0.72);
  --line: rgba(247, 248, 245, 0.14);
  --glass: rgba(12, 14, 16, 0.58);
  --glass-strong: rgba(18, 20, 23, 0.78);
  --accent-rgb: 56, 225, 255;
  --accent: #38e1ff;
  --green: var(--accent);
  --accent-glow: rgba(var(--accent-rgb), 0.45);
  --accent-subtle: rgba(var(--accent-rgb), 0.12);
  --accent-border: rgba(var(--accent-rgb), 0.35);
  --cyan: #38e1ff;
  --magenta: #ff47cc;
  --blue: #7ca7ff;
  --amber: #ffd66e;
  --quote-bg: rgba(247, 248, 245, 0.105);
  --quote-border: rgba(247, 248, 245, 0.22);
  --max: 1180px;
  --header: 42px;
  --tilt-progress: 0;
  --tilt-haze-opacity: 0.22;
  --device-left: 58%;
  --device-top: 45%;
  --device-tx: 28vw;
  --device-ty: 18vh;
  --device-tz: -260px;
  --device-rx: 11deg;
  --device-ry: -18deg;
  --device-rz: -5deg;
  --device-opacity: 0.38;
  --device-glow: 10px;
  --beam-left: 49%;
  --beam-top: 52%;
  --beam-opacity: 0;
  --sheet-a-rotate: -18deg;
  --sheet-a-scale: 0.2;
  --sheet-b-rotate: 18deg;
  --sheet-b-scale: 0.18;
  --sheet-b-opacity: 0;
  --line-1-rotate: -34deg;
  --line-1-scale: 0.28;
  --line-2-rotate: -18deg;
  --line-2-scale: 0.24;
  --line-3-rotate: 8deg;
  --line-3-scale: 0.18;
  --line-4-rotate: 25deg;
  --line-4-scale: 0.16;
  --line-5-rotate: 42deg;
  --line-scale: 0.28;

  /* Apple Design Squircle Curvature System */
  --squircle-xs: 6px;
  --squircle-sm: 8px;
  --squircle-md: 12px;
  --squircle-base: 14px;
  --squircle-lg: 16px;
  --squircle-xl: 18px;
  --squircle-2xl: 22px;
  --squircle-3xl: 28px;
  --squircle-pill: 999px;
}

/* ==========================================================================
   Curated Accent Palette Themes (Ultra-Professional & High-Luminance Dark Mode)
   ========================================================================== */
:root[data-theme="cyan"], [data-theme="cyan"], body.theme-cyan {
  --accent-rgb: 56, 225, 255;
  --accent: #38e1ff;
  --green: #38e1ff;
}

:root[data-theme="emerald"], [data-theme="emerald"], body.theme-emerald {
  --accent-rgb: 0, 245, 160;
  --accent: #00f5a0;
  --green: #00f5a0;
}

:root[data-theme="gold"], [data-theme="gold"], body.theme-gold {
  --accent-rgb: 245, 186, 66;
  --accent: #f5ba42;
  --green: #f5ba42;
}

:root[data-theme="titanium"], [data-theme="titanium"], body.theme-titanium {
  --accent-rgb: 240, 244, 248;
  --accent: #f0f4f8;
  --green: #f0f4f8;
}

:root[data-theme="iris"], [data-theme="iris"], body.theme-iris {
  --accent-rgb: 124, 139, 255;
  --accent: #7c8bff;
  --green: #7c8bff;
}

:root[data-theme="lime"], [data-theme="lime"], body.theme-lime {
  --accent-rgb: 169, 255, 85;
  --accent: #a9ff55;
  --green: #a9ff55;
}

/* ==========================================================================
   Apple Design Squircle Curvature System
   Continuous G2 superellipse curves for all UI surfaces, cards, and controls
   ========================================================================== */

* {
  box-sizing: border-box;
  corner-shape: squircle;
  -webkit-corner-shape: squircle;
}

/* Explicit round for true circular elements (close buttons, status dots, scrubber thumbs) */
.video-modal-close,
.vision-pulse-dot,
.ba-handle-thumb {
  corner-shape: round !important;
  -webkit-corner-shape: round !important;
}

html {
  scroll-behavior: smooth;
  background: var(--bg);
  scrollbar-width: none;
  overflow-x: hidden;
  max-width: 100%;
  width: 100%;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 0;
  height: 0;
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  max-width: 100%;
  width: 100%;
  color: var(--ink);
  background: rgba(2, 2, 3, 0.98);
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
  letter-spacing: 0;
}

body::selection {
  background: rgba(112, 255, 244, 0.28);
}

::selection {
  background: rgba(var(--accent-rgb), 0.28);
}

a {
  color: inherit;
}

button,
input,
select,
textarea {
  font: inherit;
}

.site-backdrop,
#laser-canvas,
.ambient-depth {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.site-backdrop {
  z-index: 0;
  overflow: hidden;
}

.backdrop-media {
  position: absolute;
  inset: -12%;
  width: 124%;
  height: 124%;
  pointer-events: none;
}

.site-video-backdrop {
  position: absolute;
  inset: -12%;
  width: 124%;
  height: 124%;
  object-fit: cover;
  object-position: left bottom;
  opacity: 0.95;
  filter: blur(36px) brightness(0.95) saturate(1.42);
  transform: scale(1.14);
  pointer-events: none;
  transition: opacity 500ms ease, filter 500ms ease;
}

.backdrop-home-frozen {
  object-fit: cover;
  object-position: left bottom;
  opacity: 0;
  filter: blur(36px) brightness(0.95) saturate(1.42);
  transform: scale(1.14);
  pointer-events: none;
  transition: opacity 500ms ease;
}

.backdrop-page-image {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  filter: blur(38px) brightness(0.95) saturate(1.4);
  transform: scale(1.14);
  opacity: 0;
  pointer-events: none;
  transition: opacity 600ms ease, background-image 600ms ease;
}

.backdrop-gradient-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 12%, rgba(124, 167, 255, 0.12), transparent 36rem),
    radial-gradient(circle at 20% 65%, rgba(255, 71, 204, 0.08), transparent 32rem),
    linear-gradient(180deg, rgba(2, 2, 3, 0.08) 0%, rgba(2, 2, 3, 0.17) 42%, rgba(2, 2, 3, 0.23) 85%, rgba(2, 2, 3, 0.25) 100%);
  pointer-events: none;
}

/* Home page scroll-away background states (lightened significantly) */
body[data-page="home"].scrolled-away-from-hero .site-video-backdrop {
  opacity: 0.95;
}

body[data-page="home"].scrolled-away-from-hero .backdrop-home-frozen {
  opacity: 0.95;
}

/* Page backgrounds using each page's landing image (lightened significantly) */
body[data-page="about"] #backdrop-page-image {
  background-image: url('../assets/dante-media/landing/start-image.jpg');
  opacity: 0.92;
}

body[data-page="services"] #backdrop-page-image {
  background-image: url('../assets/dante-media/landing/moving-heads-01.jpg');
  opacity: 0.92;
}

body[data-page="rental"] #backdrop-page-image {
  background-image: url('../assets/dante-media/fixtures/uplighting-04.jpg');
  opacity: 0.92;
}

body[data-page="support"] #backdrop-page-image {
  background-image: url('../assets/dante-media/landing/technical-show-support.jpg');
  opacity: 0.92;
}

body[data-page="full-show"] #backdrop-page-image {
  background-image: url('../assets/dante-media/landing/full-visual-production.png');
  opacity: 0.92;
}

body[data-page="dj-services"] #backdrop-page-image {
  background-image: url('../assets/dante-media/landing/professional-dj-services.jpg');
  opacity: 0.92;
}

body[data-page="quote"] #backdrop-page-image {
  background-image: url('../assets/dante-media/landing/start-image.jpg');
  opacity: 0.82;
}

/* On subpages, video backdrops are hidden */
body:not([data-page="home"]) .site-video-backdrop,
body:not([data-page="home"]) .backdrop-home-frozen {
  opacity: 0;
}

#laser-canvas {
  z-index: 0;
  opacity: 0.28;
  transition: filter 420ms ease, opacity 420ms ease;
}

body:not([data-page="home"]) #laser-canvas {
  filter: blur(18px) brightness(0.68) saturate(1.2);
  opacity: 0.35;
}

.ambient-depth {
  z-index: 1;
  background:
    radial-gradient(circle at 50% 8%, rgba(124, 167, 255, 0.08), transparent 30rem),
    radial-gradient(circle at 18% 62%, rgba(255, 71, 204, 0.05), transparent 26rem),
    linear-gradient(180deg, rgba(2, 2, 3, 0.02), rgba(2, 2, 3, 0.16));
  opacity: 0.2;
  filter: blur(12px);
}

.skip-link {
  position: fixed;
  left: 1rem;
  top: 1rem;
  z-index: 30;
  transform: translateY(-160%);
  border-radius: var(--squircle-xs, 6px);
  corner-shape: squircle;
  -webkit-corner-shape: squircle;
  background: var(--ink);
  color: #050606;
  padding: 0.7rem 0.95rem;
}

.skip-link:focus {
  transform: translateY(0);
}

.site-header {
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  right: 0;
  display: grid;
  justify-items: center;
  padding: 0.34rem clamp(0.8rem, 3vw, 2rem);
}

.nav-shell {
  position: relative;
  display: flex;
  min-height: var(--header);
  align-items: center;
  justify-content: center;
  gap: clamp(0.12rem, 0.8vw, 0.42rem);
  padding: 0.18rem;
  border: 1px solid rgba(247, 248, 245, 0.1);
  border-radius: var(--squircle-sm, 8px);
  corner-shape: squircle;
  -webkit-corner-shape: squircle;
  background: rgba(7, 8, 9, 0.36);
  box-shadow:
    0 12px 48px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(26px) saturate(150%);
  overflow: visible;
}

.nav-shell::before,
.booking-form::before,
.button::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  corner-shape: inherit;
  -webkit-corner-shape: inherit;
  pointer-events: none;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.16), transparent 8rem);
  opacity: 0;
  transition: opacity 220ms ease;
}

.nav-shell:hover::before,
.booking-form:hover::before,
.button:hover::before {
  opacity: 1;
}

.nav-item {
  display: inline-flex;
  min-width: 66px;
  height: 28px;
  min-height: 28px;
  max-height: 28px;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  border-radius: var(--squircle-xs, 6px);
  corner-shape: squircle;
  -webkit-corner-shape: squircle;
  padding: 0 0.62rem;
  color: rgba(247, 248, 245, 0.76);
  text-decoration: none;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  transition:
    transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1),
    color 220ms ease,
    background 220ms ease,
    filter 220ms ease;
}

.nav-logo {
  display: inline-flex;
  min-width: 66px;
  height: 28px;
  min-height: 28px;
  max-height: 28px;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  padding: 0 0.62rem;
  overflow: hidden;
}

.nav-logo img {
  display: block;
  height: 32px;
  max-height: 32px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.16));
  transform: none;
  margin: 0 auto;
  transition:
    transform 320ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 320ms ease;
}

.nav-logo:hover img {
  transform: scale(1.08);
  filter: drop-shadow(0 0 18px rgba(var(--accent-rgb), 0.42));
}

.nav-group {
  position: relative;
  display: flex;
  align-items: center;
}

.nav-group .nav-item {
  width: 100%;
}

.service-menu {
  position: absolute;
  top: calc(100% + 0.45rem);
  left: 50%;
  min-width: 275px;
  display: grid;
  gap: 0.25rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-top: 1px solid rgba(255, 255, 255, 0.38);
  border-left: 1px solid rgba(255, 255, 255, 0.26);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--squircle-lg, 16px);
  corner-shape: squircle;
  -webkit-corner-shape: squircle;
  padding: 0.45rem;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.04) 40%, rgba(18, 22, 28, 0.35) 100%),
    rgba(8, 10, 14, 0.42);
  box-shadow:
    0 24px 60px -10px rgba(0, 0, 0, 0.65),
    0 8px 24px -4px rgba(0, 0, 0, 0.35),
    inset 0 1.5px 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 0 24px 0 rgba(255, 255, 255, 0.04),
    inset 0 -1px 1px 0 rgba(0, 0, 0, 0.25);
  -webkit-backdrop-filter: blur(36px) saturate(190%) contrast(105%);
  backdrop-filter: blur(36px) saturate(190%) contrast(105%);
  opacity: 0;
  pointer-events: none;
  transform-origin: top center;
  transform: translate(-50%, -10px) scale(0.96);
  transition:
    opacity 240ms cubic-bezier(0.32, 0.72, 0, 1),
    transform 320ms cubic-bezier(0.32, 0.72, 0, 1),
    backdrop-filter 240ms ease;
}

.service-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -0.65rem;
  height: 0.85rem;
  pointer-events: none;
}

.service-menu::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: var(--squircle-base, 15px);
  corner-shape: squircle;
  -webkit-corner-shape: squircle;
  pointer-events: none;
  background: linear-gradient(125deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.03) 30%, transparent 60%);
  z-index: 0;
}

.service-menu a {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid transparent;
  border-radius: var(--squircle-md, 11px);
  corner-shape: squircle;
  -webkit-corner-shape: squircle;
  padding: 0.72rem 0.95rem;
  color: rgba(247, 248, 245, 0.88);
  text-decoration: none;
  font-size: 0.84rem;
  font-weight: 650;
  letter-spacing: 0.015em;
  transition:
    transform 220ms cubic-bezier(0.16, 1, 0.3, 1),
    background 200ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 200ms ease,
    box-shadow 220ms cubic-bezier(0.16, 1, 0.3, 1),
    color 180ms ease;
}

.service-menu a:hover,
.service-menu a:focus-visible {
  color: #ffffff;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.08) 100%),
    rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.2);
  border-top-color: rgba(255, 255, 255, 0.36);
  box-shadow:
    inset 0 1px 1px 0 rgba(255, 255, 255, 0.32),
    0 4px 14px rgba(0, 0, 0, 0.24),
    0 0 14px rgba(var(--accent-rgb), 0.18);
  transform: translateX(4px);
}

.service-menu a.is-active-service {
  color: #ffffff;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 100%),
    rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.18);
  border-top-color: rgba(255, 255, 255, 0.3);
  box-shadow:
    inset 0 1px 1px 0 rgba(255, 255, 255, 0.25),
    0 2px 10px rgba(0, 0, 0, 0.2),
    0 0 12px rgba(var(--accent-rgb), 0.15);
}

.nav-group:hover .service-menu,
.nav-group:focus-within .service-menu,
.nav-group.is-open .service-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0) scale(1);
}

.nav-group:hover .service-menu::before,
.nav-group:focus-within .service-menu::before,
.nav-group.is-open .service-menu::before {
  pointer-events: auto;
}

.quote-nav {
  color: rgba(247, 248, 245, 0.9);
  border: 1px solid var(--quote-border);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), transparent),
    var(--quote-bg);
  box-shadow: inset 0 0 24px rgba(var(--accent-rgb), 0.05);
}

.nav-shell:hover .nav-item {
  color: rgba(247, 248, 245, 0.54);
  filter: blur(0.2px);
}

.nav-shell .nav-item:hover,
.nav-shell .nav-item:focus-visible,
.nav-shell .nav-item.is-active,
.nav-group:hover .nav-trigger,
.nav-group:focus-within .nav-trigger {
  color: var(--ink);
  background: rgba(247, 248, 245, 0.1);
  transform: none;
  filter: none;
}

.quote-nav:hover,
.quote-nav:focus-visible,
.quote-nav.is-active {
  border-color: rgba(var(--accent-rgb), 0.44);
  background: rgba(var(--accent-rgb), 0.12);
  box-shadow: 0 0 34px rgba(var(--accent-rgb), 0.14);
}

main,
.site-footer {
  position: relative;
  z-index: 2;
  transition:
    filter 260ms ease,
    opacity 260ms ease;
}

body.nav-hover main,
body:has(.nav-group.is-open) main,
body:has(.service-menu.is-open) main {
  filter: blur(8px) brightness(0.5) saturate(0.78);
}

body.nav-hover .site-footer,
body:has(.nav-group.is-open) .site-footer,
body:has(.service-menu.is-open) .site-footer {
  filter: blur(8px) brightness(0.54) saturate(0.82);
}

.page-view {
  display: none;
}

.page-view.is-active {
  display: block;
}

.section-band {
  min-height: 86vh;
  display: grid;
  align-items: center;
  padding: clamp(5.5rem, 10vw, 9rem) clamp(1.1rem, 5vw, 4rem);
}

.page-view:not([data-page="home"]) {
  background:
    linear-gradient(180deg, rgba(2, 2, 3, 0.06) 0%, rgba(2, 2, 3, 0.22) 30rem, rgba(2, 2, 3, 0.38) 100%);
}

.home-hero {
  position: relative;
  min-height: 100svh;
  max-height: 100svh;
  display: grid;
  grid-template-rows: minmax(0, 1.08fr) auto minmax(0, 0.34fr);
  place-items: center;
  overflow: hidden;
  padding: calc(var(--header) + 0.6rem) 1.2rem 5.8rem;
  isolation: isolate;
  background:
    linear-gradient(180deg, rgba(2, 2, 3, 0.12), rgba(2, 2, 3, 0.72) 66%, #020203),
    url("../assets/dante-media/start-image.jpg") center 42% / cover no-repeat;
}

.home-page > .intro-video-section:first-child {
  min-height: 100svh;
}

.home-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 50% 57%, rgba(255, 255, 255, 0.08), transparent 17rem),
    linear-gradient(90deg, rgba(2, 2, 3, 0.84), transparent 32%, transparent 68%, rgba(2, 2, 3, 0.78));
}

.hero-full-logo {
  width: min(60vw, 500px);
  height: auto;
  align-self: end;
  margin-top: 7vh;
  transform: translateY(18px);
  filter:
    drop-shadow(0 0 22px rgba(255, 255, 255, 0.22))
    drop-shadow(0 0 44px rgba(112, 255, 244, 0.18));
  animation: logo-arrive 1700ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.hero-full-logo::selection {
  background: transparent;
}

.home-hero-copy {
  align-self: start;
  display: grid;
  justify-items: center;
  gap: 0.7rem;
  max-width: 720px;
  text-align: center;
  color: rgba(247, 248, 245, 0.82);
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.8);
  transform: translateY(3vh);
}

.home-hero-copy p {
  margin: 0;
  font-size: clamp(1rem, 2vw, 1.42rem);
}

.home-hero-copy p:first-child {
  color: var(--green);
  font-size: clamp(1.85rem, 4vw, 4.2rem);
  font-weight: 850;
  line-height: 1;
}

.hero-note {
  max-width: 720px;
  font-size: clamp(0.9rem, 1.45vw, 1.08rem) !important;
}

.text-link {
  color: var(--cyan);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 800;
}

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 1.35rem;
  width: 1px;
  height: 58px;
  overflow: hidden;
  background: rgba(247, 248, 245, 0.18);
}

.statement-marquee {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 3.6rem;
  overflow: hidden;
  border-block: 1px solid rgba(var(--accent-rgb), 0.34);
  background:
    linear-gradient(90deg, rgba(var(--accent-rgb), 0.16), transparent 16%, transparent 84%, rgba(var(--accent-rgb), 0.16)),
    rgba(8, 10, 12, 0.86);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 60px rgba(var(--accent-rgb), 0.08);
}

.intro-video-section {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: end center;
  overflow: hidden;
  isolation: isolate;
  background: transparent;
}

.intro-video-section video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left bottom;
  filter: saturate(1.06) brightness(0.78);
  transition: object-position 300ms ease, transform 300ms ease;
}

/* Narrow device & mobile viewing formats: center video and keep DANTE Light & Laser logo out of sight so hero text does not collide with it */
@media (max-width: 768px),
  (orientation: portrait) and (max-width: 900px),
  (orientation: landscape) and (max-height: 520px) {
  .intro-video-section video {
    object-position: center center;
    transform: scale(1.24);
    transform-origin: center center;
  }
}

.intro-video-section::before,
.intro-video-section::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.intro-video-section::before {
  background:
    linear-gradient(180deg, rgba(2, 2, 3, 0.38) 0%, rgba(2, 2, 3, 0.06) 26%, transparent 50%),
    linear-gradient(90deg, rgba(2, 2, 3, 0.32), transparent 42%, transparent 70%, rgba(2, 2, 3, 0.62));
}

.intro-video-section::after {
  background: radial-gradient(circle at 50% 50%, transparent 0 42%, rgba(2, 2, 3, 0.36) 78%);
}

.intro-video-overlay {
  position: absolute;
  left: clamp(1.1rem, 5vw, 4rem);
  bottom: clamp(2.4rem, 7vw, 5rem);
  z-index: 1;
  max-width: 680px;
  display: grid;
  gap: 1rem;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.8);
}

.intro-video-section .home-hero-copy {
  position: relative;
  z-index: 1;
  align-self: end;
  max-width: min(760px, calc(100vw - 2rem));
  margin: 0 auto clamp(1.7rem, 5vh, 3.4rem);
  padding-inline: 1rem;
  transform: none;
}

.intro-video-section .home-hero-copy p:first-child {
  color: var(--green);
  font-size: clamp(1.25rem, 2.7vw, 2.35rem);
  font-weight: 820;
}

.intro-video-section .hero-note {
  max-width: 620px;
  color: rgba(247, 248, 245, 0.76);
  font-size: clamp(0.8rem, 1.08vw, 0.96rem) !important;
}

.intro-video-overlay img {
  width: min(44vw, 360px);
  height: auto;
  filter: drop-shadow(0 0 26px rgba(255, 255, 255, 0.18));
}

.intro-video-overlay p {
  max-width: 42rem;
  margin: 0;
  color: rgba(247, 248, 245, 0.82);
  font-size: clamp(1rem, 1.8vw, 1.35rem);
  font-weight: 760;
}

.marquee-track {
  width: max-content;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2rem);
  padding: 0.82rem 0;
  animation: marquee-drift 34s linear infinite;
}

.marquee-track span {
  color: rgba(247, 248, 245, 0.9);
  font-size: clamp(0.92rem, 1.6vw, 1.28rem);
  font-weight: 850;
  white-space: nowrap;
}

.marquee-track img {
  width: 72px;
  height: auto;
  filter: drop-shadow(0 0 12px rgba(var(--accent-rgb), 0.22));
}

.scroll-cue span {
  display: block;
  width: 1px;
  height: 22px;
  background: var(--green);
  animation: scan-cue 1.6s ease-in-out infinite;
}

.eyebrow {
  margin: 0;
  color: var(--green);
  font-size: 0.76rem;
  font-weight: 850;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  overflow-wrap: anywhere;
}

.page-copy h1,
.contact-copy h1 {
  margin: 0.45rem 0 1rem;
  font-size: clamp(2.75rem, 5.8vw, 5.25rem);
  line-height: 0.94;
  letter-spacing: 0;
  text-wrap: balance;
}

/* Scroll-driven Text Chase Effect (Inspired by XOYO) */
.chase-word {
  display: inline-block;
  white-space: nowrap;
  vertical-align: baseline;
}

.chase-space {
  display: inline;
  vertical-align: baseline;
}

.chase-char {
  display: inline-block;
  vertical-align: baseline;
  color: rgba(247, 248, 245, 0.72);
  opacity: 0.22;
  filter: none;
  transform: none;
  transition:
    opacity 180ms cubic-bezier(0.25, 1, 0.5, 1),
    color 180ms cubic-bezier(0.25, 1, 0.5, 1),
    text-shadow 180ms cubic-bezier(0.25, 1, 0.5, 1);
  will-change: opacity, color, text-shadow;
}

.chase-char.is-lit {
  color: var(--ink);
  opacity: 1;
  text-shadow: 0 0 16px rgba(255, 255, 255, 0.22);
}

@media (prefers-reduced-motion: reduce) {
  .chase-char {
    color: var(--ink) !important;
    opacity: 1 !important;
    text-shadow: none !important;
    transition: none !important;
  }
}

/* Ensure Landing Page text is 100% static, immediately visible, with ZERO animations, text effects or delays */
.intro-video-section .home-hero-copy,
.intro-video-section .home-hero-copy *,
.intro-video-overlay,
.intro-video-overlay *,
.image-landing .page-copy,
.image-landing .page-copy *,
.page-hero .page-copy,
.page-hero .page-copy *,
.detail-hero .page-copy,
.detail-hero .page-copy * {
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
}

.chase-heading,
.reveal .chase-heading,
.reveal.is-visible .chase-heading,
.reveal h1.chase-heading,
.reveal h2.chase-heading,
.reveal h3.chase-heading,
.reveal.is-visible h1.chase-heading,
.reveal.is-visible h2.chase-heading,
.reveal.is-visible h3.chase-heading {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

.page-copy p:not(.eyebrow),
.contact-copy p:not(.eyebrow) {
  max-width: 760px;
  margin: 0;
  color: var(--soft);
  font-size: clamp(1rem, 1.55vw, 1.2rem);
}

.summary-copy,
.media-copy,
.process-copy,
.page-copy,
.contact-copy,
.summary-grid,
.proof-strip,
.process-grid,
.event-choice,
.about-story,
.timeline,
.booking-form {
  width: min(100%, var(--max));
  margin-inline: auto;
}

.home-summary {
  gap: 2.4rem;
  background: transparent;
}

.home-media {
  gap: clamp(2rem, 5vw, 3.4rem);
}

.home-showcase {
  width: min(100%, var(--max));
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(260px, 0.85fr);
  gap: 1rem;
  margin-inline: auto;
}

.home-showcase video,
.photo-rail {
  min-height: clamp(360px, 52vw, 660px);
  border: 1px solid rgba(247, 248, 245, 0.14);
  border-radius: var(--squircle-sm, 8px);
  corner-shape: squircle;
  -webkit-corner-shape: squircle;
  background: #000;
  box-shadow: 0 32px 100px rgba(0, 0, 0, 0.46);
}

.home-showcase video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-showcase video,
.photo-rail,
.feature-video {
  transition:
    transform 400ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 380ms ease,
    border-color 300ms ease,
    box-shadow 400ms cubic-bezier(0.16, 1, 0.3, 1);
}

.home-showcase video:hover,
.photo-rail:hover,
.feature-video:hover {
  transform: translateY(-4px) scale(1.01);
  filter: brightness(1.06) saturate(1.08);
  border-color: rgba(var(--accent-rgb), 0.36);
  box-shadow:
    0 32px 90px rgba(0, 0, 0, 0.58),
    0 0 45px rgba(var(--accent-rgb), 0.12);
}

.photo-rail {
  position: relative;
  overflow: hidden;
}

.photo-rail img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: translateX(8%) scale(1.02);
  animation: home-photo-slide 27s ease-in-out infinite;
}

.photo-rail img:nth-child(1) { animation-delay: 0s; }
.photo-rail img:nth-child(2) { animation-delay: 3s; }
.photo-rail img:nth-child(3) { animation-delay: 6s; }
.photo-rail img:nth-child(4) { animation-delay: 9s; }
.photo-rail img:nth-child(5) { animation-delay: 12s; }
.photo-rail img:nth-child(6) { animation-delay: 15s; }
.photo-rail img:nth-child(7) { animation-delay: 18s; }
.photo-rail img:nth-child(8) { animation-delay: 21s; }
.photo-rail img:nth-child(9) { animation-delay: 24s; }

.home-faq {
  min-height: auto;
  gap: 2rem;
}

.faq-list {
  width: min(100%, var(--max));
  display: grid;
  gap: 0.7rem;
  margin-inline: auto;
}

.faq-list details {
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-top: 1px solid rgba(255, 255, 255, 0.36);
  border-left: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: var(--squircle-base, 14px);
  corner-shape: squircle;
  -webkit-corner-shape: squircle;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.03) 100%),
    rgba(255, 255, 255, 0.04);
  box-shadow:
    0 16px 40px -10px rgba(0, 0, 0, 0.35),
    inset 0 1px 1px 0 rgba(255, 255, 255, 0.28);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  backdrop-filter: blur(28px) saturate(180%);
  overflow: hidden;
  transition:
    background 380ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 350ms ease,
    box-shadow 380ms ease,
    transform 350ms cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-list details:hover {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.35);
  border-top-color: rgba(255, 255, 255, 0.55);
  box-shadow:
    0 0 24px rgba(var(--accent-rgb), 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}

.faq-list details[open] {
  border-color: rgba(var(--accent-rgb), 0.38);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.04) 100%),
    rgba(var(--accent-rgb), 0.05);
}

.faq-list details[open]:hover {
  background: transparent;
  border-color: rgba(var(--accent-rgb), 0.5);
}

.faq-list summary {
  cursor: pointer;
  padding: 1.1rem clamp(1rem, 3vw, 1.4rem);
  color: var(--ink);
  font-weight: 850;
}

.faq-list p {
  margin: 0;
  padding: 0 clamp(1rem, 3vw, 1.4rem) 1.2rem;
  color: var(--soft);
}

.summary-copy {
  max-width: 930px;
}

.summary-copy h2,
.media-copy h2,
.process-copy h2,
.story-copy h2 {
  margin: 0.4rem 0 1rem;
  font-size: clamp(2.1rem, 5.8vw, 5.2rem);
  line-height: 0.95;
  letter-spacing: 0;
}

.summary-copy p:not(.eyebrow),
.story-copy p:not(.eyebrow) {
  margin: 0;
  color: var(--soft);
  font-size: clamp(1rem, 1.5vw, 1.16rem);
}

.story-copy .eyebrow {
  color: var(--green);
  font-size: 0.76rem;
  font-weight: 850;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-shadow: 0 0 12px rgba(var(--accent-rgb), 0.4);
}

.summary-copy p + p {
  margin-top: 1rem;
}

.story-copy p + p {
  margin-top: 1rem;
}

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

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

.service-teasers {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.service-teasers a {
  width: fit-content;
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border-radius: var(--squircle-pill, 999px);
  corner-shape: squircle;
  -webkit-corner-shape: squircle;
  padding: 0.5rem 1.05rem;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.04) 100%),
    rgba(20, 24, 30, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-top: 1px solid rgba(255, 255, 255, 0.42);
  box-shadow:
    inset 0 1px 1px 0 rgba(255, 255, 255, 0.35),
    0 6px 20px -4px rgba(0, 0, 0, 0.35);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  color: #ffffff;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  transition:
    transform 450ms cubic-bezier(0.16, 1, 0.3, 1),
    background 400ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 350ms ease,
    box-shadow 450ms cubic-bezier(0.16, 1, 0.3, 1);
}

.service-teasers a:hover,
.service-teasers a:focus-visible {
  transform: translateY(-2px) scale(1.03);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.1) 100%),
    rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.4);
  border-top-color: rgba(255, 255, 255, 0.65);
  box-shadow:
    inset 0 1px 1.5px 0 rgba(255, 255, 255, 0.55),
    0 8px 24px -2px rgba(0, 0, 0, 0.45),
    0 0 22px rgba(var(--accent-rgb), 0.25);
  color: #ffffff;
}

.glass-panel {
  border: 1px solid rgba(247, 248, 245, 0.13);
  border-radius: var(--squircle-sm, 8px);
  corner-shape: squircle;
  -webkit-corner-shape: squircle;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), transparent),
    var(--glass);
  box-shadow:
    0 28px 90px rgba(0, 0, 0, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(22px) saturate(135%);
}

.glass-panel {
  min-height: 218px;
  padding: clamp(1rem, 2vw, 1.35rem);
  transition:
    transform 450ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 350ms ease,
    background 350ms ease,
    box-shadow 450ms cubic-bezier(0.16, 1, 0.3, 1);
}

.glass-panel:hover,
.glass-panel:focus-within,
.event-card:hover,
.event-card:focus-within {
  transform: translateY(-5px) scale(1.008);
  border-color: rgba(255, 255, 255, 0.36);
  box-shadow:
    0 32px 100px rgba(0, 0, 0, 0.58),
    0 0 50px rgba(var(--accent-rgb), 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.service-thumb {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  overflow: hidden;
  border-radius: var(--squircle-xl, 18px);
  corner-shape: squircle;
  -webkit-corner-shape: squircle;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-top: 1px solid rgba(255, 255, 255, 0.36);
  background:
    linear-gradient(180deg, rgba(12, 14, 18, 0.4) 0%, rgba(6, 7, 9, 0.72) 60%, rgba(3, 4, 5, 0.92) 100%),
    var(--thumb-image) center / cover no-repeat;
  box-shadow:
    0 30px 100px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    inset 0 -1px 0 rgba(255, 255, 255, 0.08);
  transition:
    transform 750ms cubic-bezier(0.2, 0.8, 0.2, 1),
    border-color 550ms ease,
    box-shadow 750ms cubic-bezier(0.2, 0.8, 0.2, 1),
    background 700ms ease;
}

.service-thumb:hover,
.service-thumb:focus-within {
  transform: translateY(-8px) scale(1.018);
  border-color: rgba(var(--accent-rgb), 0.45);
  border-top-color: rgba(var(--accent-rgb), 0.85);
  box-shadow:
    0 36px 90px -10px rgba(0, 0, 0, 0.82),
    0 0 35px rgba(var(--accent-rgb), 0.25),
    inset 0 1.5px 1px rgba(255, 255, 255, 0.5);
  filter: brightness(1.16);
}

.service-thumb::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 28%), rgba(var(--accent-rgb), 0.18), transparent 16rem);
  opacity: 0;
  transition: opacity 650ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.service-thumb:hover::before {
  opacity: 1;
}

.service-thumb > * {
  position: relative;
}

.service-thumb span {
  display: inline-grid;
  min-width: 2.35rem;
  height: 2.35rem;
  place-items: center;
  border-radius: var(--squircle-pill, 999px);
  corner-shape: squircle;
  -webkit-corner-shape: squircle;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.05) 100%),
    rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-top: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow:
    inset 0 1px 1px 0 rgba(255, 255, 255, 0.35),
    0 4px 14px rgba(0, 0, 0, 0.25);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  color: #ffffff;
  font-size: 0.85rem;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  width: fit-content;
  transition: transform 600ms cubic-bezier(0.2, 0.8, 0.2, 1), border-color 450ms ease, box-shadow 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.service-thumb:hover span {
  transform: translateY(-2px) scale(1.08);
  border-color: rgba(var(--accent-rgb), 0.6);
  border-top-color: #ffffff;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.7),
    0 0 18px rgba(var(--accent-rgb), 0.5);
  color: #ffffff;
}

.service-thumb:hover a {
  border-color: rgba(var(--accent-rgb), 0.55);
  border-top-color: rgba(var(--accent-rgb), 0.8);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.5),
    0 0 16px rgba(var(--accent-rgb), 0.35);
  color: #ffffff;
  transform: translateY(-1px);
}

.glass-panel span,
.timeline-item span {
  color: #050505;
  font-weight: 850;
}

.glass-panel:not(.service-thumb):not(.standard-card):not(.package-card):not(.compliance-strip):not(.compliance-badge) span {
  display: inline-grid;
  min-width: 2.2rem;
  min-height: 2.2rem;
  place-items: center;
  border-radius: var(--squircle-pill, 999px);
  corner-shape: squircle;
  -webkit-corner-shape: squircle;
  background: rgba(247, 248, 245, 0.82);
}

.glass-panel h3 {
  margin: 0.45rem 0 0;
  font-size: 1.1rem;
}

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

.media-proof {
  gap: 2rem;
}

.proof-strip {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr 1fr;
  gap: 1rem;
  align-items: stretch;
}

.proof-strip img,
.story-card img,
.portrait-shell img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.proof-strip img {
  min-height: 420px;
  border-radius: var(--squircle-sm, 8px);
  corner-shape: squircle;
  -webkit-corner-shape: squircle;
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.38);
}

.page-hero {
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 5rem);
  min-height: 100svh;
  padding-top: calc(var(--header) + clamp(4rem, 8vw, 7rem));
  align-items: end;
}

.image-landing {
  position: relative;
  min-height: 100svh;
  align-content: end;
  overflow: hidden;
  isolation: isolate;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 56%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 56%, transparent 100%);
  background:
    linear-gradient(180deg, rgba(2, 2, 3, 0.14) 0%, rgba(2, 2, 3, 0.04) 44%, transparent 100%),
    var(--landing-image) var(--landing-position, center bottom) / cover no-repeat;
}

.image-landing::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(2, 2, 3, 0.22) 0%, transparent 36%),
    linear-gradient(0deg, transparent 0%, rgba(2, 2, 3, 0.5) 8%, rgba(2, 2, 3, 0.2) 22%, transparent 44%);
}

.services-hero {
  grid-template-columns: minmax(0, 1fr);
  min-height: 100svh;
  align-content: end;
}

.image-landing .page-copy {
  position: relative;
  z-index: 1;
  width: min(100%, 800px);
  margin-inline: 0 auto;
  padding: clamp(1rem, 3vw, 1.65rem);
}

.image-landing .page-copy h1,
.image-landing .page-copy p {
  text-shadow: 0 3px 28px rgba(0, 0, 0, 0.88);
}

.image-landing .landing-blend-photo {
  display: none;
}

.landing-blend-photo {
  position: relative;
  z-index: 1;
  width: min(100%, 420px);
  aspect-ratio: 4 / 5;
  align-self: end;
  justify-self: end;
  object-fit: cover;
  border: 1px solid rgba(247, 248, 245, 0.08);
  border-radius: var(--squircle-sm, 8px);
  corner-shape: squircle;
  -webkit-corner-shape: squircle;
  opacity: 0.46;
  mix-blend-mode: screen;
  filter: saturate(0.78) brightness(0.68) contrast(1.04);
  box-shadow:
    0 34px 120px rgba(0, 0, 0, 0.5),
    0 0 90px rgba(112, 255, 244, 0.06);
  -webkit-mask-image:
    radial-gradient(ellipse at 50% 48%, #000 0 48%, rgba(0, 0, 0, 0.72) 64%, transparent 100%);
  mask-image:
    radial-gradient(ellipse at 50% 48%, #000 0 48%, rgba(0, 0, 0, 0.72) 64%, transparent 100%);
}

[data-page="services"] .landing-blend-photo,
[data-page="full-show"] .landing-blend-photo {
  aspect-ratio: 5 / 4;
}

[data-page="dj-services"] .landing-blend-photo {
  object-position: center;
}

.portrait-shell {
  min-height: 520px;
  margin: 0;
  overflow: hidden;
  border-radius: var(--squircle-sm, 8px);
  corner-shape: squircle;
  -webkit-corner-shape: squircle;
  background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.03));
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.44);
}

.portrait-shell img {
  object-position: center top;
  mix-blend-mode: luminosity;
}

.about-intro,
.what-we-do {
  min-height: auto;
}

.about-gallery {
  min-height: auto;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr 1fr;
  gap: 1rem;
}

.about-gallery img {
  width: 100%;
  height: clamp(360px, 48vw, 620px);
  object-fit: cover;
  border-radius: var(--squircle-sm, 8px);
  corner-shape: squircle;
  -webkit-corner-shape: squircle;
  border: 1px solid rgba(247, 248, 245, 0.12);
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.4);
  transition:
    transform 380ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 300ms ease,
    box-shadow 380ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 300ms ease;
}

.about-gallery img:first-child,
.about-gallery img[src*="about-laser-portrait"] {
  object-position: center 20%;
}

.about-gallery img:hover {
  transform: translateY(-5px) scale(1.015);
  border-color: rgba(var(--accent-rgb), 0.4);
  box-shadow:
    0 34px 100px rgba(0, 0, 0, 0.55),
    0 0 35px rgba(var(--accent-rgb), 0.14);
  filter: brightness(1.06) saturate(1.08);
}

.about-story {
  display: grid;
  grid-template-columns: minmax(280px, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.story-card {
  overflow: visible;
  border-radius: var(--squircle-sm, 8px);
  corner-shape: squircle;
  -webkit-corner-shape: squircle;
  background: transparent;
  box-shadow: none;
  border: none;
}

.story-card img {
  min-height: 500px;
  object-fit: contain;
  object-position: center;
  background: transparent;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.65)) drop-shadow(0 0 25px rgba(var(--accent-rgb), 0.12));
  transition:
    transform 400ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 380ms ease;
}

.story-card:hover img {
  transform: translateY(-4px) scale(1.015);
  filter: drop-shadow(0 26px 50px rgba(0, 0, 0, 0.75)) drop-shadow(0 0 35px rgba(var(--accent-rgb), 0.22)) brightness(1.05);
}

.timeline {
  display: grid;
  gap: 1px;
  border: 1px solid var(--line);
  padding: 0;
  background: var(--line);
}

.timeline-item {
  display: grid;
  grid-template-columns: minmax(120px, 180px) 1fr;
  gap: 1rem;
  padding: clamp(1rem, 3vw, 1.55rem);
  background: rgba(5, 6, 8, 0.86);
}

.timeline-item p {
  margin: 0;
  color: var(--soft);
}

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

.event-card {
  position: relative;
  min-height: 520px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--squircle-sm, 8px);
  corner-shape: squircle;
  -webkit-corner-shape: squircle;
  padding: clamp(1rem, 3vw, 1.55rem);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(2, 2, 3, 0.18) 42%, rgba(2, 2, 3, 0.88) 100%),
    var(--event-image) center / cover no-repeat;
  box-shadow:
    0 28px 90px rgba(0, 0, 0, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    inset 0 -1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(26px) saturate(135%);
  transition:
    transform 380ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 300ms ease,
    box-shadow 380ms ease,
    filter 300ms ease;
}

.event-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at var(--mx, 50%) var(--my, 34%), rgba(255, 255, 255, 0.28), transparent 16rem),
    linear-gradient(120deg, rgba(255, 255, 255, 0.18), transparent 26%, transparent 76%, rgba(255, 255, 255, 0.08));
  opacity: 0.86;
}

.event-card > div,
.event-card a {
  position: relative;
}

.event-card span {
  display: inline-flex;
  width: fit-content;
  border-radius: var(--squircle-pill, 999px);
  corner-shape: squircle;
  -webkit-corner-shape: squircle;
  padding: 0.38rem 0.85rem;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.05) 100%),
    rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-top: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow:
    inset 0 1px 1px 0 rgba(255, 255, 255, 0.35),
    0 4px 14px rgba(0, 0, 0, 0.25);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  color: #ffffff;
  font-size: 0.76rem;
  font-weight: 850;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  transition: all 450ms cubic-bezier(0.16, 1, 0.3, 1);
}

.event-card:hover span {
  transform: scale(1.05);
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.55),
    0 0 16px rgba(var(--accent-rgb), 0.25);
}

.event-card h2 {
  max-width: 13ch;
  margin: 0.45rem 0 0.75rem;
  font-size: clamp(2rem, 4.8vw, 4.2rem);
  line-height: 0.93;
}

.event-card p {
  max-width: 48ch;
  margin: 0;
  color: var(--soft);
}

.event-card a {
  width: fit-content;
  margin-top: clamp(1.2rem, 3vw, 1.8rem);
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border-radius: var(--squircle-pill, 999px);
  corner-shape: squircle;
  -webkit-corner-shape: squircle;
  padding: 0.5rem 1.1rem;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.04) 100%),
    rgba(20, 24, 30, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-top: 1px solid rgba(255, 255, 255, 0.42);
  box-shadow:
    inset 0 1px 1px 0 rgba(255, 255, 255, 0.35),
    0 6px 20px -4px rgba(0, 0, 0, 0.35);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  color: #ffffff;
  font-size: 0.84rem;
  font-weight: 750;
  text-decoration: none;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  transition:
    transform 450ms cubic-bezier(0.16, 1, 0.3, 1),
    background 400ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 350ms ease,
    box-shadow 450ms cubic-bezier(0.16, 1, 0.3, 1);
}

.event-card a:hover,
.event-card a:focus-visible {
  transform: translateY(-2px) scale(1.03);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.1) 100%),
    rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.4);
  border-top-color: rgba(255, 255, 255, 0.65);
  box-shadow:
    inset 0 1px 1.5px 0 rgba(255, 255, 255, 0.55),
    0 8px 24px -2px rgba(0, 0, 0, 0.45),
    0 0 22px rgba(var(--accent-rgb), 0.25);
  color: #ffffff;
}

.process {
  gap: 2rem;
}

.contact-experience {
  grid-template-columns: minmax(0, 0.82fr) minmax(320px, 1.18fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
  padding-top: calc(var(--header) + clamp(4rem, 8vw, 7rem));
}

.detail-hero {
  position: relative;
  min-height: 100svh;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-content: end;
  background:
    linear-gradient(90deg, rgba(2, 2, 3, 0.94), rgba(2, 2, 3, 0.42) 58%, rgba(2, 2, 3, 0.75)),
    var(--detail-image) center / cover no-repeat;
}

.detail-hero.image-landing {
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 56%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 56%, transparent 100%);
  background:
    linear-gradient(180deg, rgba(2, 2, 3, 0.14) 0%, rgba(2, 2, 3, 0.04) 44%, transparent 100%),
    var(--landing-image) var(--landing-position, center bottom) / cover no-repeat;
}

.about-hero {
  --landing-image: url('../assets/dante-media/landing/start-image.jpg');
  --landing-position: center 58%;
}

.services-hero {
  --landing-image: url('../assets/dante-media/landing/moving-heads-01.jpg');
  --landing-position: center center;
}

.rental-hero {
  --landing-image: url('../assets/dante-media/fixtures/uplighting-04.jpg');
  --landing-position: center center;
}

.technical-support-hero {
  --landing-image: url('../assets/dante-media/landing/technical-show-support.jpg');
  --landing-position: center center;
}

.full-show-hero {
  --landing-image: url('../assets/dante-media/landing/full-visual-production.png');
  --landing-position: center center;
}

.dj-services-hero {
  --landing-image: url('../assets/dante-media/landing/professional-dj-services.jpg');
  --landing-position: center bottom;
}

.service-thumb-rental,
.event-card-rental {
  --thumb-image: url('../assets/dante-media/fixtures/uplighting-04.jpg');
  --event-image: url('../assets/dante-media/fixtures/uplighting-04.jpg');
}

.service-thumb-support,
.event-card-support {
  --thumb-image: url('../assets/dante-media/landing/technical-show-support.jpg');
  --event-image: url('../assets/dante-media/landing/technical-show-support.jpg');
}

.service-thumb-production,
.event-card-production {
  --thumb-image: url('../assets/dante-media/landing/full-visual-production.png');
  --event-image: url('../assets/dante-media/landing/full-visual-production.png');
}

.service-thumb-dj,
.event-card-dj {
  --thumb-image: url('../assets/dante-media/landing/professional-dj-services.jpg');
  --event-image: url('../assets/dante-media/landing/professional-dj-services.jpg');
}

.image-landing .page-copy,
.detail-hero .page-copy {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.image-landing .page-copy::before,
.detail-hero .page-copy::before {
  display: none !important;
  content: none !important;
}

.youtube-dj-thumb {
  display: block;
  width: min(100%, 420px);
  aspect-ratio: 16 / 9;
  min-height: 220px;
  margin-top: 1.75rem;
}

.full-show-hero {
  box-shadow: inset 0 -120px 160px rgba(var(--accent-rgb), 0.08);
}

[data-page="full-show"] .detail-copy {
  background:
    radial-gradient(circle at 14% 12%, rgba(var(--accent-rgb), 0.13), transparent 26rem),
    radial-gradient(circle at 82% 32%, rgba(255, 71, 204, 0.12), transparent 24rem);
}

.detail-logo,
.hero-mark {
  width: min(36vw, 260px);
  height: auto;
  align-self: start;
  justify-self: start;
  filter: drop-shadow(0 0 20px rgba(112, 255, 244, 0.18));
}

.hero-mark {
  margin-top: 2rem;
}

.detail-copy {
  min-height: auto;
  gap: 2rem;
}

.two-column {
  width: min(100%, var(--max));
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.4rem, 4vw, 3rem);
  margin-inline: auto;
}

.full-show .two-column,
[data-page="full-show"] .two-column,
[data-page="dj-services"] .two-column {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  row-gap: clamp(2rem, 5vw, 3.5rem);
}

.two-column h2,
.section-intro h2 {
  margin: 0.35rem 0 0.8rem;
  font-size: clamp(2rem, 4.8vw, 4.8rem);
  line-height: 0.95;
}

.two-column p,
.section-intro p:not(.eyebrow) {
  margin: 0;
  color: var(--soft);
  font-size: clamp(1rem, 1.45vw, 1.16rem);
}

.feature-video {
  width: min(100%, var(--max));
  aspect-ratio: 16 / 9;
  margin-inline: auto;
  border: 1px solid var(--line);
  border-radius: var(--squircle-sm, 8px);
  corner-shape: squircle;
  -webkit-corner-shape: squircle;
  background: #000;
  object-fit: cover;
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.44);
}

.feature-video-large {
  aspect-ratio: 21 / 9;
  border-color: rgba(var(--accent-rgb), 0.32);
  box-shadow:
    0 34px 110px rgba(0, 0, 0, 0.58),
    0 0 90px rgba(var(--accent-rgb), 0.1);
}

.section-intro,
.fixture-grid {
  width: min(100%, var(--max));
  margin-inline: auto;
}

.fixtures-section {
  min-height: auto;
  gap: clamp(5.5rem, 12vw, 10rem);
}

.quote-section {
  min-height: auto;
  gap: clamp(2rem, 5vw, 3.5rem);
  width: min(100%, var(--max));
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.quote-section .section-intro {
  width: 100%;
  margin-inline: 0;
  text-align: left;
}

.quote-section .booking-form {
  margin-left: 0;
  margin-right: auto;
  width: min(100%, 680px);
}

@media (max-width: 768px) {
  .quote-section .booking-form {
    margin-inline: 0;
    width: 100%;
  }
}

.fixture-grid {
  display: grid;
  gap: clamp(4.5rem, 11vw, 8.5rem);
}

.fixture-card {
  display: grid;
  min-height: auto;
  grid-template-columns: 1fr;
  align-content: start;
  gap: clamp(1.6rem, 3.8vw, 2.8rem);
  border: none;
  border-radius: 0;
  corner-shape: initial;
  -webkit-corner-shape: initial;
  padding: 0;
  background: transparent;
  box-shadow: none;
  transition: none;
}

.fixture-intro {
  display: block;
}

.fixture-copy h3 {
  margin: 0.25rem 0 0.7rem;
  font-size: clamp(3rem, 8vw, 8.5rem);
  line-height: 0.92;
  text-wrap: balance;
}

.fixture-copy p:not(.eyebrow) {
  max-width: 880px;
  margin: 0;
  color: var(--soft);
  font-size: clamp(1rem, 1.55vw, 1.2rem);
}

.fixture-content {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(260px, 0.82fr);
  gap: clamp(1rem, 3vw, 2rem);
  align-items: stretch;
}

.fixture-media {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  align-items: stretch;
}

.fixture-slideshow,
.fixture-media video {
  width: 100%;
  min-height: clamp(260px, 38vh, 430px);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--squircle-base, 14px);
  corner-shape: squircle;
  -webkit-corner-shape: squircle;
  background: rgba(8, 10, 12, 0.6);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  box-shadow:
    inset 0 1.5px 1px 0 rgba(255, 255, 255, 0.22),
    0 20px 60px rgba(0, 0, 0, 0.4);
}

.fixture-logo {
  display: block;
  width: min(220px, 100%);
  height: auto;
  justify-self: end;
  margin-bottom: 0.4rem;
  filter: drop-shadow(0 0 16px rgba(112, 255, 244, 0.14));
}

.fixture-details {
  display: grid;
  gap: clamp(0.85rem, 1.6vw, 1.25rem);
}

.fixture-details div {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--squircle-base, 14px);
  corner-shape: squircle;
  -webkit-corner-shape: squircle;
  padding: clamp(1.15rem, 2.4vw, 1.5rem);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.11) 0%, rgba(255, 255, 255, 0.035) 45%, rgba(255, 255, 255, 0.015) 70%, rgba(255, 255, 255, 0.065) 100%),
    rgba(10, 12, 16, 0.42);
  backdrop-filter: blur(28px) saturate(180%) brightness(1.08);
  -webkit-backdrop-filter: blur(28px) saturate(180%) brightness(1.08);
  box-shadow:
    inset 0 1.5px 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -1px 1px 0 rgba(0, 0, 0, 0.25),
    0 16px 40px rgba(0, 0, 0, 0.36);
  transition:
    transform 320ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 300ms ease,
    background 300ms ease,
    box-shadow 320ms ease;
  overflow: hidden;
}

.fixture-details div::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  corner-shape: inherit;
  -webkit-corner-shape: inherit;
  pointer-events: none;
  background: radial-gradient(circle at var(--mx, 20%) var(--my, 0%), rgba(255, 255, 255, 0.16), transparent 12rem);
  opacity: 0.8;
  transition: opacity 300ms ease;
}

.fixture-details div:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.32);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.055) 45%, rgba(255, 255, 255, 0.025) 70%, rgba(255, 255, 255, 0.095) 100%),
    rgba(14, 17, 22, 0.52);
  box-shadow:
    inset 0 1.5px 1.5px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 1px 0 rgba(0, 0, 0, 0.3),
    0 22px 50px rgba(0, 0, 0, 0.48),
    0 0 28px rgba(112, 255, 244, 0.08);
}

.fixture-details div:hover::before {
  opacity: 1;
}

.fixture-details span {
  position: relative;
  z-index: 1;
  display: block;
  margin-bottom: 0.45rem;
  color: var(--green);
  font-size: 0.74rem;
  font-weight: 850;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.fixture-details p {
  position: relative;
  z-index: 1;
  margin: 0;
  color: rgba(247, 248, 245, 0.88);
  font-size: clamp(0.92rem, 1.25vw, 1.05rem);
  line-height: 1.55;
}

.dj-gallery {
  width: min(100%, var(--max));
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-inline: auto;
}

.dj-gallery img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: var(--squircle-sm, 8px);
  corner-shape: squircle;
  -webkit-corner-shape: squircle;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.38);
  transition:
    transform 380ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 300ms ease,
    box-shadow 380ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 300ms ease;
}

.dj-gallery img:hover {
  transform: translateY(-5px) scale(1.015);
  border-color: rgba(var(--accent-rgb), 0.4);
  box-shadow:
    0 34px 100px rgba(0, 0, 0, 0.55),
    0 0 35px rgba(var(--accent-rgb), 0.14);
  filter: brightness(1.06) saturate(1.08);
}

.youtube-row,
.about-photos-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
  margin-top: 1.6rem;
}

.youtube-thumb,
.about-photo-card {
  position: relative;
  aspect-ratio: 16 / 9;
  min-height: 150px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-top: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--squircle-md, 12px);
  corner-shape: squircle;
  -webkit-corner-shape: squircle;
  background: #050608;
  color: var(--ink);
  text-decoration: none;
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.34);
  transition:
    transform 450ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 350ms ease,
    filter 350ms ease,
    box-shadow 450ms cubic-bezier(0.16, 1, 0.3, 1);
}

.youtube-thumb:hover,
.youtube-thumb:focus-visible,
.about-photo-card:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--accent-rgb), 0.4);
  border-top-color: rgba(255, 255, 255, 0.5);
  filter: brightness(1.08);
  box-shadow:
    0 28px 88px rgba(0, 0, 0, 0.52),
    0 0 35px rgba(var(--accent-rgb), 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.youtube-thumb img,
.about-photo-card img {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  opacity: 0.85;
  transform: scale(1.02);
  transition: transform 500ms cubic-bezier(0.16, 1, 0.3, 1), opacity 400ms ease;
}

.youtube-thumb:hover img,
.about-photo-card:hover img {
  transform: scale(1.05);
  opacity: 0.98;
}

.youtube-thumb span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
  border-radius: var(--squircle-pill, 999px);
  corner-shape: squircle;
  -webkit-corner-shape: squircle;
  color: #ffffff;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.08) 100%),
    rgba(14, 18, 22, 0.42);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-top: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow:
    inset 0 1.2px 1.5px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 1px 0 rgba(0, 0, 0, 0.3),
    0 10px 32px rgba(0, 0, 0, 0.45);
  transform: translate(-50%, -50%);
  transition:
    transform 450ms cubic-bezier(0.16, 1, 0.3, 1),
    background 350ms ease,
    border-color 350ms ease,
    box-shadow 450ms cubic-bezier(0.16, 1, 0.3, 1);
}

.youtube-thumb:hover span,
.youtube-thumb:focus-visible span {
  transform: translate(-50%, -50%) scale(1.08);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0.12) 100%),
    rgba(20, 26, 32, 0.52);
  border-color: rgba(var(--accent-rgb), 0.45);
  border-top-color: rgba(255, 255, 255, 0.85);
  box-shadow:
    inset 0 1.5px 2px 0 rgba(255, 255, 255, 0.7),
    0 0 26px rgba(var(--accent-rgb), 0.35),
    0 14px 40px rgba(0, 0, 0, 0.5);
}

.youtube-thumb span::before {
  content: "";
  width: 0;
  height: 0;
  margin-left: 4px;
  border-block: 9px solid transparent;
  border-left: 14px solid #ffffff;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.55));
}

.youtube-button {
  display: inline-flex;
  width: 58px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--squircle-sm, 8px);
  corner-shape: squircle;
  -webkit-corner-shape: squircle;
  color: #050505;
  background: rgba(247, 248, 245, 0.88);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.24);
  transition:
    transform 190ms ease,
    filter 190ms ease;
}

.youtube-button:hover,
.youtube-button:focus-visible {
  transform: translateY(-2px);
  filter: brightness(1.08);
}

.youtube-button svg {
  width: 28px;
  height: 28px;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 0;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.youtube-dj-thumb {
  display: block;
  width: min(100%, 420px);
  min-height: 236px;
  margin-top: 1.6rem;
}

.youtube-dj-thumb img {
  min-height: 236px;
}

.fixture-slideshow {
  position: relative;
  contain: layout paint;
}

.fixture-slideshow img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transform: translateX(6%);
  animation: fixture-slide calc(var(--slide-count) * 2.5s) ease-in-out infinite;
  animation-delay: calc(var(--slide-index) * 2.5s - var(--fixture-delay, 0s));
}

.fixture-card[data-slide-count="3"] .fixture-slideshow img,
.fixture-slideshow[data-slide-count="3"] img,
.fixture-card[style*="--slide-count: 3"] .fixture-slideshow img,
.fixture-card[style*="--slide-count:3"] .fixture-slideshow img {
  animation-name: fixture-slide-3;
}

.fixture-card[data-slide-count="5"] .fixture-slideshow img,
.fixture-slideshow[data-slide-count="5"] img,
.fixture-card[style*="--slide-count: 5"] .fixture-slideshow img,
.fixture-card[style*="--slide-count:5"] .fixture-slideshow img {
  animation-name: fixture-slide-5;
}

.fixture-media video {
  display: block;
  object-fit: cover;
}

.direct-contact {
  display: grid;
  gap: 0.55rem;
  margin-top: 1.4rem;
}

.direct-contact a {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 0.65rem;
  color: var(--green);
  font-weight: 800;
  text-decoration: none;
  transition:
    transform 280ms cubic-bezier(0.16, 1, 0.3, 1),
    color 240ms ease,
    filter 240ms ease;
}

.direct-contact a:hover,
.direct-contact a:focus-visible {
  color: #fff;
  transform: translateX(6px);
  filter: drop-shadow(0 0 10px rgba(var(--accent-rgb), 0.5));
}

.direct-contact svg {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition:
    transform 280ms cubic-bezier(0.16, 1, 0.3, 1),
    stroke 240ms ease;
}

.direct-contact a.whatsapp-direct-link svg {
  fill: currentColor;
  stroke: none;
}

.direct-contact a:hover svg {
  transform: scale(1.14);
}

.booking-form {
  position: relative;
  display: grid;
  gap: 1.15rem;
  padding: clamp(1.4rem, 3.5vw, 2.3rem);
  border-radius: var(--squircle-2xl, 22px);
  corner-shape: squircle;
  -webkit-corner-shape: squircle;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.035) 45%, rgba(18, 22, 28, 0.3) 100%),
    rgba(8, 10, 14, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-top: 1px solid rgba(255, 255, 255, 0.45);
  border-left: 1px solid rgba(255, 255, 255, 0.3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    0 30px 80px -15px rgba(0, 0, 0, 0.75),
    0 12px 30px -6px rgba(0, 0, 0, 0.45),
    inset 0 1.5px 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 0 35px 0 rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(40px) saturate(190%) contrast(105%);
  -webkit-backdrop-filter: blur(40px) saturate(190%) contrast(105%);
  transition:
    border-color 320ms ease,
    box-shadow 320ms ease;
  max-width: 680px;
}

.booking-form::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: var(--squircle-2xl, 21px);
  corner-shape: squircle;
  -webkit-corner-shape: squircle;
  pointer-events: none;
  background: linear-gradient(125deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.02) 28%, transparent 60%);
  z-index: 0;
}

.booking-form > * {
  position: relative;
  z-index: 1;
}

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

.booking-form .form-row-dates,
.booking-form .form-row:has(input[name="date_from"]),
.form-row.form-row-dates {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0.85rem !important;
}

.booking-form label {
  display: grid;
  gap: 0.38rem;
  color: var(--soft);
  font-size: 0.76rem;
  font-weight: 650;
  letter-spacing: 0.02em;
}

.booking-form input,
.booking-form select,
.booking-form textarea {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--squircle-md, 12px);
  corner-shape: squircle;
  -webkit-corner-shape: squircle;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 0.85rem 1.05rem;
  font-size: 0.88rem;
  outline: none;
  box-sizing: border-box;
  transition:
    border-color 220ms cubic-bezier(0.16, 1, 0.3, 1),
    background 220ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.booking-form input::placeholder,
.booking-form textarea::placeholder {
  color: rgba(255, 255, 255, 0.36);
}

.booking-form input:hover:not(:focus),
.booking-form select:hover:not(:focus),
.booking-form textarea:hover:not(:focus) {
  border-color: rgba(255, 255, 255, 0.32);
  background: rgba(255, 255, 255, 0.08);
}

.booking-form input:focus,
.booking-form select:focus,
.booking-form textarea:focus {
  border-color: var(--green);
  background: rgba(255, 255, 255, 0.09);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.18), inset 0 1px 1px rgba(255, 255, 255, 0.3);
}

.booking-form input[type="date"] {
  color-scheme: dark;
  cursor: pointer;
}

.booking-form textarea {
  min-height: 95px;
  resize: vertical;
}

/* Roll-down Elements Needed Selector */
.elements-field-unit {
  display: grid;
  gap: 0.38rem;
  position: relative;
  z-index: 1;
}

.elements-field-unit.is-active-dropdown {
  z-index: 500;
}

.elements-main-label {
  color: var(--soft);
  font-size: 0.76rem;
  font-weight: 650;
  letter-spacing: 0.02em;
}

.elements-selector-shell {
  position: relative;
  user-select: none;
}

.elements-trigger-bar {
  width: 100%;
  padding: 0.84rem 1.05rem;
  border-radius: var(--squircle-md, 12px);
  corner-shape: squircle;
  -webkit-corner-shape: squircle;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  color: var(--ink);
  font-size: 0.86rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: all 0.22s ease;
  box-sizing: border-box;
}

.elements-trigger-bar:hover,
.elements-selector-shell.is-open .elements-trigger-bar {
  border-color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.08);
}

.elements-selector-shell.is-open .elements-trigger-bar {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.16);
}

.elements-trigger-chevron {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.6);
}

.elements-selector-shell.is-open .elements-trigger-chevron {
  transform: rotate(180deg);
  color: var(--green);
}

.elements-dropdown-panel {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  right: 0;
  z-index: 9999;
  border-radius: var(--squircle-lg, 16px);
  corner-shape: squircle;
  -webkit-corner-shape: squircle;
  padding: 1.15rem;
  background: linear-gradient(135deg, rgba(26, 32, 42, 0.96) 0%, rgba(12, 16, 22, 0.98) 100%);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-top: 1px solid rgba(255, 255, 255, 0.45);
  border-left: 1px solid rgba(255, 255, 255, 0.32);
  box-shadow:
    0 24px 60px -8px rgba(0, 0, 0, 0.95),
    0 0 30px rgba(0, 0, 0, 0.6),
    inset 0 1px 1px 0 rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(48px) saturate(200%);
  -webkit-backdrop-filter: blur(48px) saturate(200%);
  display: none;
  flex-direction: column;
  gap: 0.95rem;
  transform-origin: top center;
  animation: rolldownFadeIn 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes rolldownFadeIn {
  0% { opacity: 0; transform: translateY(-6px) scale(0.98); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.elements-selector-shell.is-open .elements-dropdown-panel {
  display: flex;
}

.elements-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.glass-element-pill {
  padding: 0.5rem 1rem;
  border-radius: var(--squircle-pill, 999px);
  corner-shape: squircle;
  -webkit-corner-shape: squircle;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-top: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.8rem;
  font-weight: 650;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.2);
}

.glass-element-pill:hover {
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.12);
}

.glass-element-pill.selected {
  background: var(--green);
  color: #030406;
  border-color: var(--green);
  font-weight: 750;
  box-shadow: 0 0 18px rgba(var(--accent-rgb), 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.7);
}

.elements-panel-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 0.7rem;
  font-size: 0.74rem;
  color: rgba(255, 255, 255, 0.6);
}

.elements-retract-btn {
  padding: 0.42rem 1.1rem;
  border-radius: var(--squircle-pill, 999px);
  corner-shape: squircle;
  -webkit-corner-shape: squircle;
  background: var(--green);
  border: none;
  color: #030406;
  font-size: 0.76rem;
  font-weight: 750;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.3);
  transition: all 0.18s ease;
}

.elements-retract-btn:hover {
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 6px 16px rgba(var(--accent-rgb), 0.5);
}

.booking-form .form-actions {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  width: 100%;
}

.quote-submit-btn {
  width: 100%;
  min-height: 48px;
  border-radius: var(--squircle-pill, 999px);
  corner-shape: squircle;
  -webkit-corner-shape: squircle;
  background: var(--green);
  color: #030406;
  font-weight: 750;
  font-size: 0.94rem;
  letter-spacing: 0.02em;
  border: none;
  box-shadow: 0 8px 24px -4px rgba(var(--accent-rgb), 0.45);
  cursor: pointer;
  transition:
    transform 220ms cubic-bezier(0.16, 1, 0.3, 1),
    background 200ms ease,
    box-shadow 220ms ease;
}

.quote-submit-btn:hover {
  transform: translateY(-2px) scale(1.015);
  background: #b8ff70;
  box-shadow: 0 12px 32px rgba(var(--accent-rgb), 0.6);
  color: #030406;
}

.direct-contact-minimal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.76rem;
  color: rgba(255, 255, 255, 0.6);
}

.direct-contact-minimal a {
  color: rgba(255, 255, 255, 0.88);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.18s ease;
}

.direct-contact-minimal a:hover {
  color: var(--green);
}

.button {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: var(--squircle-xs, 6px);
  corner-shape: squircle;
  -webkit-corner-shape: squircle;
  padding: 0.82rem 1.05rem;
  color: var(--ink);
  background: rgba(247, 248, 245, 0.055);
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 320ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 280ms ease,
    background 280ms ease,
    box-shadow 320ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 280ms ease;
}

.button::selection,
.nav-item::selection {
  background: transparent;
}

.button:hover,
.button:focus-visible {
  transform: translateY(-3px) scale(1.01);
  border-color: rgba(112, 255, 244, 0.65);
  background: rgba(112, 255, 244, 0.12);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4), 0 0 24px rgba(112, 255, 244, 0.22);
}

.button-primary {
  color: rgba(247, 248, 245, 0.92);
  border-color: var(--quote-border);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent),
    var(--quote-bg);
  font-weight: 850;
}

.button-primary:hover,
.button-primary:focus-visible {
  transform: translateY(-3px) scale(1.015);
  border-color: rgba(var(--accent-rgb), 0.55);
  background: rgba(var(--accent-rgb), 0.15);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.42), 0 0 30px rgba(var(--accent-rgb), 0.25);
}

.button-ghost {
  color: rgba(247, 248, 245, 0.82);
  transition:
    transform 320ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 280ms ease,
    background 280ms ease,
    color 280ms ease,
    box-shadow 320ms ease;
}

.button-ghost:hover,
.button-ghost:focus-visible {
  color: #fff;
  border-color: rgba(247, 248, 245, 0.35);
  background: rgba(247, 248, 245, 0.09);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

#form-status {
  min-height: 1.4rem;
  margin: 0;
  color: var(--muted);
}

.site-footer {
  border-top: 0;
  padding: clamp(5rem, 8vw, 7.5rem) clamp(1.1rem, 5vw, 4rem) 1.5rem;
  color: #111416;
  background:
    linear-gradient(
      180deg,
      rgba(247, 248, 245, 0) 0%,
      rgba(247, 248, 245, 0.45) clamp(1.2rem, 2.5vw, 2.2rem),
      rgba(247, 248, 245, 0.9) clamp(2.6rem, 4.8vw, 3.8rem),
      rgba(247, 248, 245, 1) clamp(3.8rem, 6.2vw, 4.8rem),
      #f7f8f5 100%
    );
}

.footer-inner {
  width: min(100%, var(--max));
  display: grid;
  grid-template-columns: minmax(220px, 0.42fr) minmax(0, 0.58fr);
  gap: clamp(1.25rem, 4vw, 3rem);
  align-items: center;
  justify-items: stretch;
  text-align: left;
  margin-inline: auto;
}

.footer-brand {
  display: grid;
  justify-items: start;
  gap: 0.55rem;
}

.footer-brand img {
  width: min(230px, 70vw);
  height: auto;
  filter: invert(1) drop-shadow(0 0 18px rgba(0, 0, 0, 0.06));
  transition:
    transform 320ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 320ms ease;
}

.footer-brand:hover img {
  transform: scale(1.03);
  filter: invert(1) drop-shadow(0 0 24px rgba(0, 0, 0, 0.35));
}

.footer-brand p,
.site-footer p {
  margin: 0;
  color: #090d0e;
  font-weight: 850;
}

.footer-brand p,
.footer-brand span,
.footer-brand small {
  display: none;
}

.footer-brand span,
.footer-brand small {
  color: #283033;
}

.footer-brand span {
  font-weight: 760;
}

.footer-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, auto));
  gap: 0.55rem 1rem;
  justify-content: end;
}

.footer-links a,
.footer-line {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  gap: 0.65rem;
  color: #111416;
  text-decoration: none;
  font-weight: 760;
  transition:
    transform 680ms cubic-bezier(0.2, 0.8, 0.2, 1),
    color 600ms cubic-bezier(0.2, 0.8, 0.2, 1),
    filter 680ms cubic-bezier(0.2, 0.8, 0.2, 1),
    text-shadow 680ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.footer-links a:hover,
.footer-links a:focus-visible {
  color: #000000;
  transform: translateX(4px);
  text-shadow: 0 0 16px rgba(var(--accent-rgb), 0.45);
  filter: drop-shadow(0 0 8px rgba(var(--accent-rgb), 0.35));
}

.footer-links a:hover svg {
  transform: scale(1.08);
  filter: drop-shadow(0 0 10px rgba(var(--accent-rgb), 0.6));
}

.footer-links svg {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition:
    transform 680ms cubic-bezier(0.2, 0.8, 0.2, 1),
    filter 680ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.footer-links .button {
  width: fit-content;
  border-radius: var(--squircle-pill, 999px);
  corner-shape: squircle;
  -webkit-corner-shape: squircle;
  padding: 0.72rem 1.65rem;
  color: #0c1012;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.32) 100%),
    rgba(255, 255, 255, 0.35);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-top: 1px solid rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  box-shadow:
    inset 0 1.2px 1.5px 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 1px 0 rgba(0, 0, 0, 0.05),
    0 4px 18px rgba(var(--accent-rgb), 0.16),
    0 0 24px rgba(var(--accent-rgb), 0.12);
  transition:
    transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1),
    background 650ms cubic-bezier(0.2, 0.8, 0.2, 1),
    border-color 650ms ease,
    box-shadow 700ms cubic-bezier(0.2, 0.8, 0.2, 1),
    color 600ms ease;
}

.footer-links .button:hover,
.footer-links .button:focus-visible {
  transform: translateY(-2.5px) scale(1.02);
  color: #000000;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.88) 0%, rgba(255, 255, 255, 0.45) 100%),
    rgba(var(--accent-rgb), 0.15);
  border-color: rgba(var(--accent-rgb), 0.45);
  border-top-color: rgba(255, 255, 255, 0.98);
  box-shadow:
    inset 0 1.5px 2px 0 rgba(255, 255, 255, 0.98),
    0 8px 28px rgba(0, 0, 0, 0.12),
    0 0 32px rgba(var(--accent-rgb), 0.32),
    0 0 50px rgba(var(--accent-rgb), 0.2);
}

.footer-legal-notice {
  width: min(100%, var(--max));
  margin: 1.4rem auto 0;
  padding-top: 1rem;
  border-top: 1px solid rgba(2, 2, 3, 0.1);
}

.footer-legal-notice p {
  margin: 0;
  color: #4b585e;
  font-size: 0.72rem;
  line-height: 1.6;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.footer-legal-notice strong {
  color: #12191c;
  font-weight: 700;
}

.footer-legal-notice a {
  color: #0b1113;
  text-decoration: underline;
  text-underline-offset: 2.5px;
  text-decoration-thickness: 1px;
  transition: color 180ms ease;
}

.footer-legal-notice a:hover,
.footer-legal-notice a:focus-visible {
  color: #000000;
  text-decoration-thickness: 1.5px;
}

.footer-bottom {
  width: min(100%, var(--max));
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 0.9rem auto 0;
  padding-top: 0.8rem;
  border-top: 1px solid rgba(2, 2, 3, 0.08);
  color: #384347;
  font-size: 0.82rem;
  font-weight: 700;
}

.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;
}

.reveal {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 500ms cubic-bezier(0.25, 1, 0.5, 1),
    visibility 0s linear;
}

.reveal.is-visible {
  opacity: 1;
  visibility: visible;
}

.reveal h1:not(.chase-heading),
.reveal h2:not(.chase-heading),
.reveal h3:not(.chase-heading) {
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition:
    opacity 500ms cubic-bezier(0.25, 1, 0.5, 1),
    transform 500ms cubic-bezier(0.25, 1, 0.5, 1),
    visibility 0s linear;
}

.reveal.is-visible h1:not(.chase-heading),
.reveal.is-visible h2:not(.chase-heading),
.reveal.is-visible h3:not(.chase-heading) {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

@keyframes logo-arrive {
  from {
    opacity: 0;
    transform: translateY(46px) scale(0.94);
    filter:
      blur(14px)
      drop-shadow(0 0 0 rgba(255, 255, 255, 0))
      drop-shadow(0 0 0 rgba(112, 255, 244, 0));
    clip-path: inset(0 50% 0 50%);
  }
  62% {
    clip-path: inset(0 0 0 0);
    filter:
      blur(0)
      drop-shadow(0 0 34px rgba(255, 255, 255, 0.32))
      drop-shadow(0 0 68px rgba(112, 255, 244, 0.32));
  }
  to {
    opacity: 1;
    transform: translateY(18px) scale(1);
  }
}

@keyframes marquee-drift {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes home-photo-slide {
  0% { opacity: 0; transform: translateX(8%) scale(1.02); }
  2.5%, 8.8% { opacity: 1; transform: translateX(0) scale(1); }
  11.5%, 100% { opacity: 0; transform: translateX(-8%) scale(1.02); }
}

@keyframes scan-cue {
  0% {
    transform: translateY(-24px);
    opacity: 0;
  }
  30%,
  70% {
    opacity: 1;
  }
  100% {
    transform: translateY(62px);
    opacity: 0;
  }
}

@keyframes fixture-slide {
  0% {
    opacity: 0;
    transform: translateX(6%);
  }
  6%,
  22% {
    opacity: 1;
    transform: translateX(0);
  }
  28%,
  100% {
    opacity: 0;
    transform: translateX(-6%);
  }
}

@keyframes fixture-slide-3 {
  0% {
    opacity: 0;
    transform: translateX(6%);
  }
  8%,
  29.33% {
    opacity: 1;
    transform: translateX(0);
  }
  37.33%,
  100% {
    opacity: 0;
    transform: translateX(-6%);
  }
}

@keyframes fixture-slide-5 {
  0% {
    opacity: 0;
    transform: translateX(6%);
  }
  4.8%,
  17.6% {
    opacity: 1;
    transform: translateX(0);
  }
  22.4%,
  100% {
    opacity: 0;
    transform: translateX(-6%);
  }
}

@media (max-width: 980px) {
  .summary-grid,
  .process-grid,
  .proof-strip,
  .home-showcase,
  .page-hero,
  .about-story,
  .about-gallery,
  .two-column,
  [data-page="full-show"] .two-column,
  [data-page="dj-services"] .two-column,
  .fixture-card,
  .fixture-media,
  .fixture-content,
  .fixture-intro,
  .dj-gallery,
  .footer-inner,
  .contact-experience {
    grid-template-columns: 1fr;
  }

  .service-teasers,
  .footer-links,
  .youtube-row,
  .about-photos-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .youtube-row:not(.dj-youtube-row) > .youtube-thumb:nth-child(3),
  .youtube-row:not(.dj-youtube-row) > .youtube-thumb:last-child {
    grid-column: span 2;
    justify-self: center;
    width: calc((100% - 0.8rem) / 2);
    max-width: 100%;
    margin: 0 auto;
  }

  .event-choice {
    grid-template-columns: 1fr;
  }

  fieldset {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  :root {
    --header: 42px;
  }

  .site-header {
    padding-inline: 0.65rem;
  }

  .nav-shell {
    width: min(100%, 420px);
    justify-content: space-between;
    gap: 0.1rem;
  }

  .nav-item {
    min-width: 0;
    flex: 1;
    height: 28px;
    min-height: 28px;
    max-height: 28px;
    padding-inline: 0.34rem;
    font-size: 0.7rem;
  }

  .quote-nav {
    font-size: 0;
  }

  .quote-nav::after {
    content: "Quote";
    font-size: 0.7rem;
  }

  .nav-group {
    flex: 1;
  }

  .nav-logo {
    flex: 1.1;
    height: 28px;
    min-height: 28px;
    max-height: 28px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .nav-logo img {
    height: 26px;
    max-height: 26px;
    width: auto;
  }

  .home-hero {
    grid-template-rows: minmax(0, 1.02fr) auto minmax(0, 0.36fr);
    padding-bottom: 6.3rem;
    background-position: center 38%;
  }

  .statement-marquee {
    bottom: 3.2rem;
  }

  .marquee-track {
    gap: 1rem;
    padding-block: 0.7rem;
  }

  .marquee-track img {
    width: 58px;
  }

  .home-hero::before {
    background:
      linear-gradient(180deg, rgba(2, 2, 3, 0.18), rgba(2, 2, 3, 0.54) 48%, rgba(2, 2, 3, 0.88)),
      linear-gradient(90deg, rgba(2, 2, 3, 0.74), transparent 44%, rgba(2, 2, 3, 0.62));
  }

  .home-hero-copy {
    gap: 0.58rem;
    transform: translateY(1.5vh);
  }

  .home-hero-copy p:first-child {
    font-size: clamp(1.65rem, 9vw, 3.2rem);
  }

  .hero-note {
    max-width: 34rem;
    font-size: 0.9rem !important;
  }

  .hero-full-logo {
    width: min(84vw, 420px);
    margin-top: 4vh;
  }

  .intro-video-overlay img {
    width: min(70vw, 300px);
  }

  .page-copy h1,
  .contact-copy h1 {
    font-size: clamp(2.45rem, 12vw, 4.4rem);
  }

  .section-band {
    min-height: auto;
    padding-block: 5.5rem;
  }

  .page-hero,
  .detail-hero,
  .contact-experience,
  .services-hero {
    min-height: 100svh;
    padding-top: calc(var(--header) + 2.4rem);
    padding-bottom: 2.8rem;
  }

  .detail-hero {
    align-content: center;
  }

  .service-menu {
    left: auto;
    right: 0;
    min-width: min(86vw, 280px);
    transform-origin: top right;
    transform: translate(0, -10px) scale(0.96);
  }

  .nav-group:hover .service-menu,
  .nav-group:focus-within .service-menu,
  .nav-group.is-open .service-menu {
    transform: translate(0, 0) scale(1);
  }

  .proof-strip img,
  .story-card img,
  .portrait-shell {
    min-height: 360px;
  }

  .landing-blend-photo {
    width: min(100%, 320px);
    aspect-ratio: 16 / 10;
    justify-self: start;
    opacity: 0.36;
  }

  .detail-logo,
  .hero-mark {
    width: min(54vw, 210px);
  }

  .event-card {
    min-height: 440px;
  }

  .form-row:not(.form-row-dates):not(:has(input[name="date_from"])),
  fieldset,
  .timeline-item,
  .service-teasers,
  .footer-links,
  .about-photos-row,
  .footer-inner {
    grid-template-columns: 1fr;
  }

  .youtube-row:not(.dj-youtube-row) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
  }

  .youtube-row:not(.dj-youtube-row) > .youtube-thumb:nth-child(3),
  .youtube-row:not(.dj-youtube-row) > .youtube-thumb:last-child {
    grid-column: span 2;
    justify-self: center;
    width: calc((100% - 0.55rem) / 2);
    max-width: 100%;
    margin: 0 auto;
  }

  .booking-form .form-row-dates,
  .booking-form .form-row:has(input[name="date_from"]),
  .form-row.form-row-dates {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.65rem !important;
  }

  .footer-inner,
  .footer-brand,
  .footer-links {
    justify-items: start;
    justify-content: start;
  }

  .footer-bottom {
    display: grid;
  }

  .fixture-copy h3 {
    font-size: clamp(2.1rem, 14vw, 4rem);
  }

  .fixture-logo {
    justify-self: start;
    width: min(180px, 62vw);
  }

  .fixture-card {
    min-height: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .scroll-cue {
    display: none;
  }

  .fixture-slideshow img:first-child {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  .fixture-slideshow img:not(:first-child) {
    display: none !important;
  }
}

@media (max-width: 580px) {
  .booking-form {
    padding: 1.25rem 1rem;
    border-radius: var(--squircle-xl, 18px);
    corner-shape: squircle;
    -webkit-corner-shape: squircle;
  }

  .booking-form .form-row:not(.form-row-dates):not(:has(input[name="date_from"])) {
    grid-template-columns: 1fr;
  }

  .booking-form .form-row-dates,
  .booking-form .form-row:has(input[name="date_from"]),
  .form-row.form-row-dates {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.5rem !important;
  }

  .direct-contact-minimal {
    flex-direction: column;
    gap: 0.4rem;
    align-items: flex-start;
  }
}

/* Scroll-driven Text Chase Effect (Inspired by XOYO) */
.text-chase-target {
  opacity: 1;
}

.chase-word {
  display: inline;
  color: rgba(247, 248, 245, 0.2);
  transition:
    color 260ms cubic-bezier(0.16, 1, 0.3, 1),
    text-shadow 260ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: color, text-shadow;
}

@supports (color: color-mix(in srgb, white, black)) {
  .chase-word {
    color: color-mix(in srgb, var(--ink) calc(var(--word-p, 0) * 100%), rgba(247, 248, 245, 0.2));
    text-shadow: 0 0 calc(var(--word-p, 0) * 18px) rgba(255, 255, 255, calc(var(--word-p, 0) * 0.22));
  }
}

.chase-word.is-lit {
  color: var(--ink);
  text-shadow: 0 0 18px rgba(255, 255, 255, 0.22);
}

@media (prefers-reduced-motion: reduce) {
  .chase-word {
    color: var(--ink) !important;
    text-shadow: none !important;
    transition: none !important;
  }
}

/* Video Modal Lightbox */
.video-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(2, 2, 3, 0.88);
  backdrop-filter: blur(16px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms ease;
}

.video-modal-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

.video-modal-container {
  position: relative;
  width: 100%;
  max-width: 900px;
  background: #090b0d;
  border: 1px solid rgba(112, 255, 244, 0.3);
  border-radius: var(--squircle-lg, 16px);
  corner-shape: squircle;
  -webkit-corner-shape: squircle;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.9), 0 0 30px rgba(112, 255, 244, 0.15);
  overflow: hidden;
  transform: scale(0.92);
  transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

.video-modal-backdrop.is-open .video-modal-container {
  transform: scale(1);
}

.video-modal-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 10;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  corner-shape: round;
  -webkit-corner-shape: round;
  background: rgba(247, 248, 245, 0.15);
  border: 1px solid rgba(247, 248, 245, 0.3);
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 200ms ease, transform 200ms ease;
}

.video-modal-close:hover {
  background: var(--cyan);
  color: #000;
  transform: scale(1.08);
}

.video-modal-body {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}

.video-modal-body iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ==========================================================================
   Apple-Style Sequential Fade-Ins (Soft, 500ms Pace, 50% / 250ms Constant Stagger)
   ========================================================================== */

/* ==========================================================================
   Cinematic Soft Reveals (Silk-Smooth 850-950ms Duration, Zero Strobing)
   ========================================================================== */

/* 1. Home Page Photo & Video Section Soft Fade-In */
.home-showcase video,
.home-showcase .photo-rail {
  opacity: 0;
  visibility: hidden;
  transform: translateY(18px);
  transition:
    opacity 900ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 900ms cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s linear,
    border-color 400ms ease,
    box-shadow 400ms ease;
  will-change: opacity, transform;
}

.home-showcase.is-visible video {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0ms;
}

.home-showcase.is-visible .photo-rail {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 220ms;
}

/* 2. Home Page FAQ Soft Sequential Fade-In */
.faq-list details {
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition:
    opacity 850ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 850ms cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s linear,
    border-color 300ms ease,
    background 300ms ease,
    box-shadow 350ms ease;
  will-change: opacity, transform;
}

.faq-list.is-visible details:nth-child(1) {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0ms;
}

.faq-list.is-visible details:nth-child(2) {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 180ms;
}

.faq-list.is-visible details:nth-child(3) {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 360ms;
}

.faq-list.is-visible details:nth-child(4) {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 540ms;
}

.faq-list.is-visible details:nth-child(5) {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 720ms;
}

.faq-list.is-visible details:nth-child(6) {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 900ms;
}

.faq-list.is-visible details:nth-child(7) {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 1080ms;
}

.faq-list.is-visible details:nth-child(8) {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 1260ms;
}

.faq-list.is-visible details:nth-child(n + 9) {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 1440ms;
}

/* 3. About Section: Sequential Videos Soft Fade-In */
.what-we-do .youtube-row .youtube-thumb {
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition:
    opacity 850ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 850ms cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s linear,
    border-color 350ms ease,
    box-shadow 350ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.what-we-do.is-visible .youtube-row .youtube-thumb:nth-child(1),
.what-we-do .youtube-row.is-visible .youtube-thumb:nth-child(1),
.what-we-do .youtube-thumb:nth-child(1).is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0ms;
}

.what-we-do.is-visible .youtube-row .youtube-thumb:nth-child(2),
.what-we-do .youtube-row.is-visible .youtube-thumb:nth-child(2),
.what-we-do .youtube-thumb:nth-child(2).is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 180ms;
}

.what-we-do.is-visible .youtube-row .youtube-thumb:nth-child(3),
.what-we-do .youtube-row.is-visible .youtube-thumb:nth-child(3),
.what-we-do .youtube-thumb:nth-child(3).is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 360ms;
}

/* 3b. About Section: Engineered Visuals Photos Soft Fade-In */
.about-intro .about-photos-row .about-photo-card {
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition:
    opacity 850ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 850ms cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s linear,
    border-color 350ms ease,
    box-shadow 350ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.about-intro.is-visible .about-photos-row .about-photo-card:nth-child(1),
.about-intro .about-photos-row.is-visible .about-photo-card:nth-child(1),
.about-intro .about-photo-card:nth-child(1).is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0ms;
}

.about-intro.is-visible .about-photos-row .about-photo-card:nth-child(2),
.about-intro .about-photos-row.is-visible .about-photo-card:nth-child(2),
.about-intro .about-photo-card:nth-child(2).is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 180ms;
}

.about-intro.is-visible .about-photos-row .about-photo-card:nth-child(3),
.about-intro .about-photos-row.is-visible .about-photo-card:nth-child(3),
.about-intro .about-photo-card:nth-child(3).is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 360ms;
}

/* 4. About Section: 3 Images Soft Fade-In */
.about-gallery img {
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition:
    opacity 850ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 850ms cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s linear,
    border-color 300ms ease,
    box-shadow 350ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.about-gallery.is-visible img:nth-child(1),
.about-gallery img:nth-child(1).is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0ms;
}

.about-gallery.is-visible img:nth-child(2),
.about-gallery img:nth-child(2).is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 180ms;
}

.about-gallery.is-visible img:nth-child(3),
.about-gallery img:nth-child(3).is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 360ms;
}

/* 5. Services Page: 4 Categories Smooth Sequential Reveal (One after another) */
.event-choice .event-card {
  opacity: 0;
  visibility: hidden;
  transform: translateY(28px);
  transition:
    opacity 850ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 850ms cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s linear 850ms,
    border-color 400ms ease,
    box-shadow 400ms ease;
  will-change: opacity, transform;
}

.event-choice.is-visible .event-card:nth-child(1),
.event-choice .event-card:nth-child(1).is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0ms;
}

.event-choice.is-visible .event-card:nth-child(2),
.event-choice .event-card:nth-child(2).is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 350ms;
}

.event-choice.is-visible .event-card:nth-child(3),
.event-choice .event-card:nth-child(3).is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 700ms;
}

.event-choice.is-visible .event-card:nth-child(4),
.event-choice .event-card:nth-child(4).is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 1050ms;
}

/* Home 01,02,03,04 Sequential Soft Entrance */
.home-summary .service-teasers .service-thumb {
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition:
    opacity 850ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 850ms cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s linear;
  will-change: opacity, transform;
}

.home-summary .service-teasers.is-visible .service-thumb:nth-child(1),
.home-summary .service-thumb:nth-child(1).is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0ms;
}

.home-summary .service-teasers.is-visible .service-thumb:nth-child(2),
.home-summary .service-thumb:nth-child(2).is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 180ms;
}

.home-summary .service-teasers.is-visible .service-thumb:nth-child(3),
.home-summary .service-thumb:nth-child(3).is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 360ms;
}

.home-summary .service-teasers.is-visible .service-thumb:nth-child(4),
.home-summary .service-thumb:nth-child(4).is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 540ms;
}

/* 6. Technical Show Support & Feature Video: Smooth Soft Reveal */
.service-detail[data-page="support"] .feature-video,
.feature-video {
  opacity: 0;
  visibility: hidden;
  transform: translateY(18px) scale(0.99);
  transition:
    opacity 900ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 900ms cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s linear,
    border-color 350ms ease,
    box-shadow 350ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.service-detail[data-page="support"] .feature-video.is-visible,
.feature-video.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  transition-delay: 50ms;
}

/* 7. Product Category Singular Detail Boxes ("Best for", "Includes", "Support") Smooth Individual Reveal */
.fixture-details .fixture-detail-box.reveal {
  opacity: 0;
  visibility: hidden;
  transform: translateY(18px);
  transition:
    opacity 850ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 850ms cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s linear 850ms,
    border-color 300ms ease,
    background 300ms ease,
    box-shadow 320ms ease;
  will-change: opacity, transform;
}

.fixture-details .fixture-detail-box.reveal.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}

/* Align Rental Page Paragraph Tops */
[data-page="rental"] .two-column > div {
  display: flex;
  flex-direction: column;
}

[data-page="rental"] .two-column h2 {
  min-height: 2.15em;
}

@supports (grid-template-rows: subgrid) {
  [data-page="rental"] .two-column {
    grid-template-rows: auto 1fr;
  }
  [data-page="rental"] .two-column > div {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 2;
  }
  [data-page="rental"] .two-column h2 {
    min-height: 0;
  }
}

/* About Page Portrait Photo Reveal */
.story-card img {
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition:
    opacity 850ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 850ms cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s linear;
  will-change: opacity, transform;
}

.story-card.is-visible img,
.story-card img.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* About Page "OWNER | DESIGNER | OPERATOR" Lime Green Accent */
.about-story .eyebrow,
.story-copy .eyebrow {
  color: var(--accent) !important;
  text-shadow: 0 0 16px rgba(var(--accent-rgb), 0.45);
  letter-spacing: 0.14em;
  font-weight: 700;
  text-transform: uppercase;
}

.about-story .eyebrow .v-chase-word,
.story-copy .eyebrow .v-chase-word {
  color: rgba(var(--accent-rgb), 0.35) !important;
  transition:
    color 160ms ease-out,
    opacity 160ms ease-out,
    text-shadow 160ms ease-out;
}

.about-story .eyebrow .v-chase-word.is-lit,
.story-copy .eyebrow .v-chase-word.is-lit {
  color: var(--accent) !important;
  opacity: 1 !important;
  text-shadow: 0 0 18px rgba(var(--accent-rgb), 0.75) !important;
}

/* About Page Vertical Text Illumination (Owner | Designer | Operator down to bottom) */
.story-v-chase .v-chase-word {
  display: inline;
  color: rgba(247, 248, 245, 0.22);
  transition:
    color 120ms ease-out,
    text-shadow 120ms ease-out;
  will-change: color, text-shadow;
}

.story-v-chase .v-chase-word.is-lit {
  color: var(--ink);
  text-shadow: 0 0 14px rgba(255, 255, 255, 0.22);
}

.story-v-chase h2 {
  color: var(--ink) !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

/* 8. Professional DJ Services: 3 Images Soft Fade-In */
.dj-gallery img {
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition:
    opacity 850ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 850ms cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s linear,
    border-color 300ms ease,
    box-shadow 350ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.dj-gallery.is-visible img:nth-child(1) {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0ms;
}

.dj-gallery.is-visible img:nth-child(2) {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 180ms;
}

.dj-gallery.is-visible img:nth-child(3) {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 360ms;
}

/* 9. Professional DJ Services: Horizontal Line-by-Line Chase & Left-to-Right Video Reveal */
.dj-horizontal-section {
  position: relative;
}

.dj-horizontal-section + .dj-horizontal-section {
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

.dj-chase-title,
.dj-chase-body,
.dj-horizontal-section .dj-col,
.dj-horizontal-section .dj-col * {
  visibility: visible !important;
}

.dj-chase-title,
.dj-chase-body {
  opacity: 1 !important;
  transform: none !important;
}

.dj-chase-title .chase-char,
.dj-chase-body .chase-char {
  display: inline-block;
  vertical-align: baseline;
  color: rgba(247, 248, 245, 0.72);
  opacity: 0.22;
  transition:
    opacity 160ms cubic-bezier(0.25, 1, 0.5, 1),
    color 160ms cubic-bezier(0.25, 1, 0.5, 1),
    text-shadow 160ms cubic-bezier(0.25, 1, 0.5, 1);
  will-change: opacity, color, text-shadow;
}

.dj-chase-title .chase-char.is-lit,
.dj-chase-body .chase-char.is-lit {
  color: var(--ink) !important;
  opacity: 1 !important;
  text-shadow: 0 0 16px rgba(255, 255, 255, 0.4) !important;
}

@media (prefers-reduced-motion: reduce) {
  .dj-chase-title .chase-char,
  .dj-chase-body .chase-char {
    color: var(--ink) !important;
    opacity: 1 !important;
    text-shadow: none !important;
    transition: none !important;
  }
}

.dj-youtube-row {
  margin-top: clamp(2.8rem, 5vw, 4.5rem);
}

.dj-youtube-row .youtube-thumb {
  opacity: 0.18;
  visibility: visible;
  transform: translateY(24px) scale(0.97);
  filter: grayscale(0.5) brightness(0.7);
  transition:
    opacity 240ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 240ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 240ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 200ms ease,
    box-shadow 240ms ease;
  will-change: opacity, transform, filter;
}

.dj-youtube-row .youtube-thumb.is-lit-video {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: none;
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.55), 0 0 24px rgba(var(--accent-rgb), 0.12);
}

@media (prefers-reduced-motion: reduce) {
  .dj-youtube-row .youtube-thumb {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}

/* 10. Full Visual Production: Scroll-Driven Center Reveal */
.full-show-scroll-reveal-group,
.full-show-wave-group {
  position: relative;
}

.full-show-scroll-reveal-group .wave-item,
.full-show-wave-group .wave-item {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  filter: none !important;
}

.full-show-scroll-reveal-group .full-show-char {
  display: inline-block;
  opacity: 0;
  filter: blur(5px);
  will-change: opacity, filter, color;
  transition:
    opacity 100ms ease-out,
    filter 100ms ease-out,
    color 100ms ease-out,
    text-shadow 100ms ease-out;
}

.full-show-scroll-reveal-group .reveal-word {
  display: inline-block;
  white-space: nowrap;
}

.full-show-scroll-reveal-group .reveal-space {
  display: inline;
}

.full-show-video,
.wave-video {
  opacity: 0;
  visibility: hidden;
  transform: translateY(24px);
  transition:
    opacity 140ms ease-out,
    transform 140ms ease-out,
    visibility 0s linear,
    border-color 300ms ease,
    box-shadow 350ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

@media (prefers-reduced-motion: reduce) {
  .full-show-scroll-reveal-group .full-show-char {
    opacity: 1 !important;
    filter: none !important;
    color: inherit !important;
    text-shadow: none !important;
  }
  .full-show-video,
  .wave-video {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }
}

/* 11. Request a Quote: Continuous Top-to-Bottom Line Fade Reveal */
.quote-side-copy {
  position: relative;
}

.quote-side-copy .quote-fade-line {
  display: block;
  opacity: 0;
  will-change: opacity;
  transition: opacity 1050ms cubic-bezier(0.25, 0.1, 0.25, 1);
  transition-delay: var(--line-delay, 0s);
}

.quote-side-copy .quote-fade-line.eyebrow {
  margin: 0 0 0.5rem;
  color: var(--accent);
  text-shadow: 0 0 16px rgba(var(--accent-rgb), 0.45);
}

.quote-side-copy .quote-fade-line.heading-line-1 {
  margin-top: 0.45rem;
  margin-bottom: 0.2rem;
}

.quote-side-copy .quote-fade-line.heading-line-2 {
  margin-bottom: 1rem;
}

.quote-side-copy .quote-fade-line.desc-line-1 {
  margin-bottom: 0.18rem;
}

.quote-side-copy .quote-fade-line.desc-line-2 {
  margin-bottom: 0;
}

.quote-side-copy .direct-contact a.quote-fade-line {
  display: inline-flex;
  width: fit-content;
  transition:
    opacity 1050ms cubic-bezier(0.25, 0.1, 0.25, 1),
    transform 280ms cubic-bezier(0.16, 1, 0.3, 1),
    color 240ms ease,
    filter 240ms ease;
  transition-delay: var(--line-delay, 0s), 0s, 0s, 0s;
}

/* Revealed state triggered when Request a Quote tab opens */
.quote-side-copy.is-revealed .quote-fade-line {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .quote-side-copy .quote-fade-line {
    opacity: 1 !important;
    transition: none !important;
  }
}

/* ========================================================================= */
/* LIQUID GLASS "MAKE YOUR VISION REALITY" CALL REQUEST COMPONENT             */
/* ========================================================================= */

.vision-card-wrapper {
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
}

.home-vision-call,
.services-vision-call {
  padding-top: clamp(2rem, 5vw, 4rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
}

.liquid-glass-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--squircle-3xl, 28px);
  corner-shape: squircle;
  -webkit-corner-shape: squircle;
  padding: clamp(2rem, 4.5vw, 3.25rem);
  background:
    radial-gradient(110% 120% at var(--mx, 30%) var(--my, 15%), rgba(255, 255, 255, 0.11) 0%, rgba(255, 255, 255, 0.02) 42%, transparent 70%),
    linear-gradient(150deg, rgba(255, 255, 255, 0.09) 0%, rgba(16, 20, 26, 0.68) 42%, rgba(5, 7, 10, 0.92) 100%);
  backdrop-filter: blur(44px) saturate(200%) brightness(106%);
  -webkit-backdrop-filter: blur(44px) saturate(200%) brightness(106%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-top: 1px solid rgba(255, 255, 255, 0.38);
  box-shadow:
    0 35px 100px -15px rgba(0, 0, 0, 0.75),
    0 0 1px 1px rgba(255, 255, 255, 0.12) inset,
    0 16px 36px -10px rgba(0, 0, 0, 0.45),
    inset 0 1.5px 0 rgba(255, 255, 255, 0.4);
  transition:
    border-color 350ms ease,
    box-shadow 450ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 450ms cubic-bezier(0.16, 1, 0.3, 1);
}

.liquid-glass-card:hover {
  border-color: rgba(255, 255, 255, 0.32);
  box-shadow:
    0 45px 120px -10px rgba(0, 0, 0, 0.85),
    0 0 50px rgba(var(--accent-rgb), 0.14),
    inset 0 1.5px 0 rgba(255, 255, 255, 0.55);
}

.liquid-glass-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: var(--squircle-3xl, 28px);
  corner-shape: squircle;
  -webkit-corner-shape: squircle;
  background: linear-gradient(130deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.02) 26%, transparent 65%);
  z-index: 1;
}

.liquid-glass-card > * {
  position: relative;
  z-index: 2;
}

/* Apple-style Staggered Fade-in Animation */
.apple-fade-item {
  opacity: 0;
  transform: translateY(24px);
  filter: blur(4px);
  transition:
    opacity 850ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 850ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 850ms cubic-bezier(0.16, 1, 0.3, 1);
}

.liquid-glass-card.is-apple-revealed .apple-fade-item {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

.fade-delay-1 { transition-delay: 60ms; }
.fade-delay-2 { transition-delay: 150ms; }
.fade-delay-3 { transition-delay: 240ms; }
.fade-delay-4 { transition-delay: 330ms; }
.fade-delay-5 { transition-delay: 420ms; }
.fade-delay-6 { transition-delay: 510ms; }

/* Card Header */
.vision-card-header {
  margin-bottom: 2rem;
}

.vision-eyebrow-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.85rem;
  border-radius: var(--squircle-pill, 999px);
  corner-shape: squircle;
  -webkit-corner-shape: squircle;
  background: rgba(var(--accent-rgb), 0.1);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  color: var(--accent);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.95rem;
  box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.15);
}

.vision-pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  corner-shape: round;
  -webkit-corner-shape: round;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
  animation: visionPulse 2.2s infinite ease-in-out;
}

@keyframes visionPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.35); opacity: 0.55; }
}

.vision-card-title {
  margin: 0 0 0.8rem;
  font-size: clamp(2.2rem, 4.4vw, 3.4rem);
  font-weight: 850;
  letter-spacing: -0.025em;
  line-height: 1.05;
  background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.84) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 35px rgba(255, 255, 255, 0.2);
}

.vision-card-desc {
  margin: 0;
  font-size: clamp(0.95rem, 1.4vw, 1.12rem);
  line-height: 1.55;
  color: var(--soft);
  max-width: 680px;
}

/* Service Selector Pills */
.vision-service-selection {
  margin-bottom: 1.75rem;
}

.vision-field-label {
  display: block;
  font-size: 0.76rem;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 0.75rem;
}

.vision-service-pills {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.65rem;
  transition: transform 200ms ease;
}

.vision-service-pills.has-error {
  animation: visionShake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

@keyframes visionShake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(3px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}

.vision-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.75rem 1.05rem;
  border-radius: var(--squircle-pill, 999px);
  corner-shape: squircle;
  -webkit-corner-shape: squircle;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-top: 1px solid rgba(255, 255, 255, 0.32);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 220ms cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.18);
  text-align: center;
}

.vision-pill:hover {
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  transform: translateY(-1px);
}

.vision-pill.is-selected {
  background: var(--accent);
  color: #030406;
  border-color: var(--accent);
  font-weight: 800;
  box-shadow:
    0 0 25px rgba(var(--accent-rgb), 0.45),
    inset 0 1.5px 1px #ffffff;
  transform: translateY(-1px);
}

.vision-pill-check {
  display: none;
  font-size: 0.9em;
}

.vision-pill.is-selected .vision-pill-check {
  display: inline-block;
}

/* Phone Number Input Cluster */
.vision-input-group {
  margin-bottom: 1.25rem;
}

.vision-phone-cluster {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  max-width: 480px;
  width: 100%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-top: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: var(--squircle-pill, 999px);
  corner-shape: squircle;
  -webkit-corner-shape: squircle;
  padding: 0.32rem 0.75rem;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  transition: all 240ms cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.35),
    inset 0 1px 1px rgba(255, 255, 255, 0.15);
  box-sizing: border-box;
}

.vision-phone-cluster:focus-within {
  border-color: var(--accent);
  box-shadow:
    0 0 0 3px rgba(var(--accent-rgb), 0.22),
    0 12px 35px rgba(0, 0, 0, 0.45),
    inset 0 1px 1px rgba(255, 255, 255, 0.3);
}

.vision-dialcode-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  max-width: 90px;
}

.vision-dialcode-select {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: none;
  color: #ffffff;
  font-size: 0.76rem;
  font-weight: 600;
  padding: 0.32rem 0.85rem 0.32rem 0.15rem;
  cursor: pointer;
  outline: none;
  letter-spacing: -0.01em;
}

.vision-dialcode-select option {
  background: #0f1217;
  color: #ffffff;
}

.vision-dialcode-chevron {
  position: absolute;
  right: 0.12rem;
  pointer-events: none;
  font-size: 0.52rem;
  color: rgba(255, 255, 255, 0.55);
}

.vision-cluster-divider {
  width: 1px;
  height: 16px;
  align-self: center;
  background: rgba(255, 255, 255, 0.18);
  flex-shrink: 0;
  margin: 0 0.15rem;
}

.vision-phone-slot {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
}

.vision-phone-input {
  width: 100%;
  min-width: 0;
  background: transparent;
  border: none;
  color: #ffffff;
  font-size: 0.88rem;
  font-weight: 550;
  letter-spacing: 0.02em;
  padding: 0.42rem 0.5rem;
  outline: none;
}

.vision-phone-input::placeholder {
  color: rgba(255, 255, 255, 0.35);
  font-weight: 450;
}

.vision-name-slot {
  width: 100%;
  max-width: 480px;
  margin-top: 0.65rem;
}

.vision-name-input {
  width: 100%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--squircle-pill, 999px);
  corner-shape: squircle;
  -webkit-corner-shape: squircle;
  padding: 0.5rem 0.95rem;
  color: #ffffff;
  font-size: 0.82rem;
  outline: none;
  transition: border-color 180ms ease;
  box-sizing: border-box;
}

.vision-name-input:focus {
  border-color: rgba(255, 255, 255, 0.35);
}

.vision-name-input::placeholder {
  color: rgba(255, 255, 255, 0.38);
}

.vision-submit-row {
  margin-top: 0.75rem;
  max-width: 480px;
  width: 100%;
  display: flex;
  align-items: center;
}

.vision-submit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.58rem 1.45rem;
  border-radius: var(--squircle-pill, 999px);
  corner-shape: squircle;
  -webkit-corner-shape: squircle;
  background: var(--accent);
  border: 1px solid var(--accent);
  color: #040507;
  font-size: 0.84rem;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  transition: all 220ms cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 0 20px rgba(var(--accent-rgb), 0.35);
  flex-shrink: 0;
}

.vision-submit-btn:hover {
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 0 32px rgba(var(--accent-rgb), 0.6);
}

.vision-submit-btn svg {
  transition: transform 200ms ease;
}

.vision-submit-btn:hover svg {
  transform: translateX(3px);
}

.vision-card-subrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 0.65rem;
  padding: 0 0.5rem;
}

/* Direct Reach Section (Alternative instant connection options) */
.vision-direct-reach {
  margin-top: 1.75rem;
  padding-top: 1.35rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
  width: 100%;
  box-sizing: border-box;
}

.vision-direct-label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.55);
  white-space: nowrap;
}

.vision-direct-options {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
}

.vision-direct-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.38rem 0.85rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--squircle-pill, 999px);
  corner-shape: squircle;
  -webkit-corner-shape: squircle;
  color: rgba(255, 255, 255, 0.88);
  text-decoration: none;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: all 200ms cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  white-space: nowrap;
}

.vision-direct-chip:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.3);
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

.vision-direct-chip.is-whatsapp {
  color: #4ade80;
}

.vision-direct-chip.is-whatsapp svg {
  color: #25d366;
}

.vision-direct-chip.is-whatsapp:hover {
  background: rgba(37, 211, 102, 0.12);
  border-color: rgba(37, 211, 102, 0.45);
  color: #22c55e;
  box-shadow: 0 0 18px rgba(37, 211, 102, 0.25);
}

.vision-direct-chip svg {
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.7);
  transition: transform 180ms ease, color 180ms ease;
}

.vision-direct-chip:hover svg {
  color: #ffffff;
  transform: scale(1.08);
}

.vision-chip-tag {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 750;
  letter-spacing: 0.05em;
  padding: 0.1rem 0.32rem;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.2;
}

.vision-direct-chip:hover .vision-chip-tag {
  background: rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.95);
}

.vision-form-status {
  font-size: 0.86rem;
  padding: 0 0.25rem;
  transition: all 200ms ease;
}

.vision-form-status:empty {
  display: none;
  min-height: 0;
  margin: 0;
  padding: 0;
}

.vision-form-status:not(:empty) {
  margin-top: 0.85rem;
  min-height: 1.4rem;
}

.vision-form-status.is-success {
  color: var(--accent);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.vision-form-status.is-error {
  color: #ff6b6b;
  font-weight: 650;
}

.vision-status-sub a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Service Detail Note */
.detailed-quote-link-note {
  margin: 1.25rem 0 0;
  text-align: center;
  font-size: 0.82rem;
  color: var(--soft);
}

.detailed-quote-link-note a {
  color: var(--ink);
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 180ms ease;
}

.detailed-quote-link-note a:hover {
  color: var(--accent);
}

/* Quote Page Architecture (Quick Call at Top + Full Spec Below) */
.quote-primary-flow {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  width: 100%;
}

.quote-primary-flow .liquid-glass-card {
  width: 100%;
  box-sizing: border-box;
}

.contact-experience {
  min-height: auto;
  padding-bottom: clamp(2rem, 4vw, 3.5rem);
}

/* Full Event Specifications Section (Horizontally centered on the entire website page) */
.detailed-quote-section {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 clamp(1.1rem, 5vw, 4rem) clamp(5rem, 9vw, 8rem);
}

.detailed-quote-wrapper {
  width: 100%;
  max-width: 780px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: clamp(2.5rem, 5vw, 4.5rem);
}

.detailed-quote-intro {
  margin: 0 auto 2.25rem;
  text-align: center;
  max-width: 840px;
  width: 100%;
}

.detailed-quote-intro .eyebrow {
  margin: 0 auto 0.45rem;
  color: var(--accent);
  text-shadow: 0 0 16px rgba(var(--accent-rgb), 0.45);
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-align: center;
}

.detailed-quote-intro h2 {
  font-size: clamp(1.5rem, 3vw, 2.3rem);
  margin: 0 auto 0.75rem;
  color: #ffffff;
  text-align: center;
}

.detailed-quote-intro p {
  color: var(--soft);
  font-size: 0.94rem;
  line-height: 1.6;
  margin: 0 auto;
  text-align: center;
  max-width: 580px;
}

.detailed-quote-wrapper .booking-form {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 720px;
}

/* Responsive Overrides */
@media (max-width: 680px) {
  .vision-phone-cluster {
    display: flex;
    flex-direction: row;
    align-items: center;
    border-radius: var(--squircle-pill, 999px);
    padding: 0.28rem 0.65rem 0.28rem 0.55rem;
    gap: 0.35rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .vision-dialcode-wrapper {
    border-bottom: none;
    padding-bottom: 0;
    max-width: 85px;
    flex-shrink: 0;
  }

  .vision-dialcode-select {
    font-size: 0.74rem;
    font-weight: 600;
    padding: 0.28rem 0.75rem 0.28rem 0.15rem;
    letter-spacing: -0.01em;
  }

  .vision-cluster-divider {
    display: block;
    height: 16px;
    margin: 0 0.15rem;
  }

  .vision-phone-slot {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
  }

  .vision-phone-input {
    width: 100%;
    min-width: 0;
    font-size: 16px;
    padding: 0.35rem 0.4rem;
  }

  .vision-submit-row {
    margin-top: 0.55rem;
    width: 100%;
    max-width: 100%;
    display: flex;
  }

  .vision-submit-btn {
    width: 100%;
    justify-content: center;
    padding: 0.62rem 1.25rem;
    font-size: 0.86rem;
    box-sizing: border-box;
  }

  .vision-service-pills {
    grid-template-columns: 1fr;
  }

  .vision-card-subrow {
    flex-direction: column;
    align-items: stretch;
  }

  .vision-name-slot {
    max-width: 100%;
  }

  .vision-direct-reach {
    margin-top: 1.45rem;
    padding-top: 1.15rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    flex-direction: column;
    align-items: flex-start;
    gap: 0.55rem;
  }

  .vision-direct-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.5);
  }

  .vision-direct-options {
    gap: 0.45rem;
  }

  .vision-direct-chip {
    font-size: 0.76rem;
    padding: 0.36rem 0.72rem;
  }
}

/* =========================================================================
   Modernised Components: Standards, Packages, Contextual CTAs
   ========================================================================= */

.home-standards .section-intro,
.home-packages .section-intro {
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.standards-lead {
  max-width: 680px;
  margin: 0.75rem 0 0;
  color: var(--soft);
  font-size: 1.05rem;
}

.standards-grid,
.packages-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.45rem);
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
}

@media (max-width: 1024px) {
  .standards-grid,
  .packages-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.15rem;
  }
}

@media (max-width: 680px) {
  .standards-grid,
  .packages-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.1rem;
  }
}

/* Standards & Discipline and Curated Packages Cards:
   Styled after the luminous liquid glass of .fixture-details div ("Best for, Includes, Support") */
.standard-card,
.package-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--squircle-base, 14px);
  corner-shape: squircle;
  -webkit-corner-shape: squircle;
  padding: clamp(1.2rem, 2.5vw, 1.6rem);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.11) 0%, rgba(255, 255, 255, 0.035) 45%, rgba(255, 255, 255, 0.015) 70%, rgba(255, 255, 255, 0.065) 100%),
    rgba(10, 12, 16, 0.42);
  backdrop-filter: blur(28px) saturate(180%) brightness(1.08);
  -webkit-backdrop-filter: blur(28px) saturate(180%) brightness(1.08);
  box-shadow:
    inset 0 1.5px 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -1px 1px 0 rgba(0, 0, 0, 0.25),
    0 16px 40px rgba(0, 0, 0, 0.36);
  transition:
    transform 320ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 300ms ease,
    background 300ms ease,
    box-shadow 320ms ease;
  min-height: 240px;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  overflow: visible;
}

.standard-card {
  overflow: visible;
}

.package-card {
  overflow: visible;
}

.package-card.is-popular {
  margin-top: 0;
}

.standard-card::before,
.package-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  corner-shape: inherit;
  -webkit-corner-shape: inherit;
  pointer-events: none;
  background: radial-gradient(circle at var(--mx, 20%) var(--my, 0%), rgba(255, 255, 255, 0.16), transparent 12rem);
  opacity: 0.8;
  transition: opacity 300ms ease;
}

.standard-card:hover,
.package-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.32);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.055) 45%, rgba(255, 255, 255, 0.025) 70%, rgba(255, 255, 255, 0.095) 100%),
    rgba(14, 17, 22, 0.52);
  box-shadow:
    inset 0 1.5px 1.5px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 1px 0 rgba(0, 0, 0, 0.3),
    0 22px 50px rgba(0, 0, 0, 0.48),
    0 0 28px rgba(var(--accent-rgb), 0.12);
}

.standard-card:hover::before,
.package-card:hover::before {
  opacity: 1;
}

/* Most Popular Badge centered seamlessly on the top border of Tier 2 */
.package-popular-badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.28rem 0.85rem;
  border-radius: var(--squircle-pill, 999px);
  corner-shape: squircle;
  -webkit-corner-shape: squircle;
  background: var(--accent);
  color: #060904;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.45);
  margin: 0;
  white-space: nowrap;
  pointer-events: none;
}

/* Prevent any white circular highlight on spans */
.standard-card span,
.package-card span {
  background: none;
  border: none;
  box-shadow: none;
  min-width: unset;
  min-height: unset;
  border-radius: 0;
  corner-shape: initial;
  -webkit-corner-shape: initial;
}

/* Top Kicker Tag */
.standard-card .card-kicker,
.package-card .package-kicker {
  position: relative;
  z-index: 1;
  display: block;
  margin-bottom: 0.25rem;
  color: var(--green);
  font-size: 0.74rem;
  font-weight: 850;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-shadow: 0 0 12px rgba(var(--accent-rgb), 0.35);
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  min-width: unset !important;
  min-height: unset !important;
}

.package-card .package-kicker {
  text-align: center;
}

.standard-card h3 {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: clamp(1.08rem, 2.2vw, 1.18rem);
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.015em;
  background: transparent !important;
  text-shadow: none !important;
  overflow-wrap: break-word;
  word-break: normal;
}

.package-card h3 {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: clamp(1.1rem, 2.2vw, 1.25rem);
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.015em;
  text-align: center;
  background: transparent !important;
  text-shadow: none !important;
  overflow-wrap: break-word;
  word-break: normal;
}

.standard-card p {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: clamp(0.92rem, 1.25vw, 1.02rem);
  line-height: 1.55;
  color: rgba(247, 248, 245, 0.88);
  flex-grow: 1;
  overflow-wrap: break-word;
}

.standard-pill {
  position: relative;
  z-index: 1;
  margin-top: auto;
  width: fit-content;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.32rem 0.8rem;
  border-radius: var(--squircle-pill, 999px);
  corner-shape: squircle;
  -webkit-corner-shape: squircle;
  background: rgba(var(--accent-rgb), 0.08);
  border: 1px solid rgba(var(--accent-rgb), 0.28);
  color: var(--accent);
  transition: border-color 350ms ease, background 350ms ease, color 350ms ease, box-shadow 350ms ease;
}

.standard-card:hover .standard-pill {
  background: rgba(var(--accent-rgb), 0.18);
  border-color: rgba(var(--accent-rgb), 0.65);
  color: #ffffff;
  box-shadow: 0 0 14px rgba(var(--accent-rgb), 0.32);
}

/* Package Price Row: completely clean typography, centered, zero highlights/bubbles */
.package-card .package-price-row {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.4rem;
  margin: 0.2rem 0 0.55rem;
}

.package-card .price-prefix {
  font-size: 0.76rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.package-card .price-val {
  font-size: 1.7rem;
  font-weight: 850;
  color: #ffffff;
  letter-spacing: -0.025em;
  line-height: 1;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.package-card .price-term {
  font-size: 0.82rem;
  color: var(--muted);
  font-weight: 500;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.package-card .package-features {
  position: relative;
  z-index: 1;
  list-style: none;
  padding: 0;
  margin: 0.35rem 0 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex-grow: 1;
}

.package-card .package-features li {
  font-size: 0.9rem;
  color: rgba(247, 248, 245, 0.88);
  line-height: 1.48;
  position: relative;
  padding-left: 1.15rem;
  overflow-wrap: break-word;
}

.package-card .package-features li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 700;
}

.package-card .package-cta {
  position: relative;
  z-index: 1;
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  font-size: 0.9rem;
  font-weight: 750;
  padding: 0.72rem 1.35rem;
  border-radius: var(--squircle-pill, 999px);
  corner-shape: squircle;
  -webkit-corner-shape: squircle;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-top: 1px solid rgba(255, 255, 255, 0.45);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.04) 100%),
    rgba(255, 255, 255, 0.03);
  color: #ffffff;
  text-decoration: none;
  box-shadow:
    inset 0 1px 1px 0 rgba(255, 255, 255, 0.35),
    0 4px 14px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  text-align: center;
  transition:
    transform 320ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 300ms ease,
    box-shadow 320ms ease,
    background 300ms ease,
    color 300ms ease;
}

.package-card:hover .package-cta {
  border-color: rgba(var(--accent-rgb), 0.65);
  border-top-color: #ffffff;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.7),
    0 0 20px rgba(var(--accent-rgb), 0.45);
  color: #ffffff;
  transform: translateY(-2px);
}

/* Standards and Packages Sequential Soft Entrance (Matches Home 01,02,03,04) */
.standards-grid .standard-card,
.packages-grid .package-card {
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition:
    opacity 850ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 850ms cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s linear;
  will-change: opacity, transform;
}

.standards-grid.is-visible .standard-card:nth-child(1),
.standards-grid .standard-card:nth-child(1).is-visible,
.packages-grid.is-visible .package-card:nth-child(1),
.packages-grid .package-card:nth-child(1).is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0ms;
}

.standards-grid.is-visible .standard-card:nth-child(2),
.standards-grid .standard-card:nth-child(2).is-visible,
.packages-grid.is-visible .package-card:nth-child(2),
.packages-grid .package-card:nth-child(2).is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 180ms;
}

.standards-grid.is-visible .standard-card:nth-child(3),
.standards-grid .standard-card:nth-child(3).is-visible,
.packages-grid.is-visible .package-card:nth-child(3),
.packages-grid .package-card:nth-child(3).is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 360ms;
}

.standards-grid.is-visible .standard-card:nth-child(4),
.standards-grid .standard-card:nth-child(4).is-visible,
.packages-grid.is-visible .package-card:nth-child(4),
.packages-grid .package-card:nth-child(4).is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 540ms;
}

/* On narrower screens and mobile, prevent cards from staying hidden, delayed, or cut off during scroll */
@media (max-width: 980px) {
  .standards-grid .standard-card,
  .packages-grid .package-card,
  .about-intro .about-photos-row .about-photo-card {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    transition: opacity 400ms ease !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .standards-grid .standard-card,
  .packages-grid .package-card,
  .about-intro .about-photos-row .about-photo-card {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Service Action Banner - Liquid Glass Apple Style */
.service-action-banner {
  padding: clamp(3rem, 6vw, 6rem) clamp(1.1rem, 5vw, 4rem);
  min-height: auto;
}

.service-action-card {
  position: relative;
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(2.2rem, 4vw, 3.5rem) clamp(1.4rem, 3vw, 2.8rem);
  border-radius: var(--squircle-base, 14px);
  corner-shape: squircle;
  -webkit-corner-shape: squircle;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.11) 0%, rgba(255, 255, 255, 0.035) 45%, rgba(255, 255, 255, 0.015) 70%, rgba(255, 255, 255, 0.065) 100%),
    rgba(10, 12, 16, 0.42);
  backdrop-filter: blur(28px) saturate(180%) brightness(1.08);
  -webkit-backdrop-filter: blur(28px) saturate(180%) brightness(1.08);
  box-shadow:
    inset 0 1.5px 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -1px 1px 0 rgba(0, 0, 0, 0.25),
    0 16px 40px rgba(0, 0, 0, 0.36);
  text-align: center;
  overflow: hidden;
  transition:
    transform 320ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 300ms ease,
    background 300ms ease,
    box-shadow 320ms ease;
}

.service-action-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.32);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.055) 45%, rgba(255, 255, 255, 0.025) 70%, rgba(255, 255, 255, 0.095) 100%),
    rgba(14, 17, 22, 0.52);
  box-shadow:
    inset 0 1.5px 1.5px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 1px 0 rgba(0, 0, 0, 0.3),
    0 22px 50px rgba(0, 0, 0, 0.48),
    0 0 28px rgba(112, 255, 244, 0.08);
}

.service-action-content {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

/* Service name label on service action banner: unboxed clean text in lime green accent */
.service-action-badge {
  display: block;
  padding: 0;
  margin: 0;
  background: none;
  border: none;
  border-radius: 0;
  corner-shape: initial;
  -webkit-corner-shape: initial;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  color: var(--accent);
  font-size: 0.82rem;
  font-weight: 850;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
}

.service-action-badge span {
  display: inline-block;
  background: none;
  border: none;
  box-shadow: none;
  color: var(--accent);
  text-shadow: 0 0 12px rgba(var(--accent-rgb), 0.35);
}

.service-action-card h2 {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 850;
  letter-spacing: -0.02em;
  margin: 0.2rem 0 0.4rem;
  color: #ffffff;
}

.service-action-card p {
  font-size: 1.05rem;
  color: rgba(247, 248, 245, 0.88);
  margin: 0 0 1.5rem;
  line-height: 1.6;
}

.service-action-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

/* Request Quote & Direct Line buttons: Apple Liquid Glass Style */
.service-action-buttons .service-liquid-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.8rem 1.6rem;
  border-radius: var(--squircle-pill, 999px);
  corner-shape: squircle;
  -webkit-corner-shape: squircle;
  font-size: 0.92rem;
  font-weight: 700;
  color: #ffffff;
  text-decoration: none;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.05) 100%),
    rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-top: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow:
    inset 0 1px 1px 0 rgba(255, 255, 255, 0.35),
    0 4px 14px rgba(0, 0, 0, 0.25);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  transition:
    transform 600ms cubic-bezier(0.2, 0.8, 0.2, 1),
    border-color 450ms ease,
    box-shadow 600ms cubic-bezier(0.2, 0.8, 0.2, 1),
    color 300ms ease;
}

.service-action-buttons .service-liquid-btn:hover {
  transform: translateY(-2px) scale(1.03);
  border-color: rgba(var(--accent-rgb), 0.6);
  border-top-color: #ffffff;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.7),
    0 0 18px rgba(var(--accent-rgb), 0.5);
  color: #ffffff;
}

/* ========================================================================= */
/* DESIGN PROTOCOL: OPTICAL CYAN EYEBROWS & LIQUID GLASS CARD STYLES         */
/* ========================================================================= */

.cyan-eyebrow,
.lime-eyebrow {
  color: var(--accent) !important;
  text-shadow: 0 0 16px rgba(var(--accent-rgb), 0.45);
  letter-spacing: 0.14em;
  font-weight: 700;
  text-transform: uppercase;
}

.liquid-glass-card {
  position: relative;
  border-radius: var(--squircle-base, 14px);
  corner-shape: squircle;
  -webkit-corner-shape: squircle;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.11) 0%, rgba(255, 255, 255, 0.035) 45%, rgba(255, 255, 255, 0.015) 70%, rgba(255, 255, 255, 0.065) 100%),
    rgba(10, 12, 16, 0.42);
  backdrop-filter: blur(28px) saturate(180%) brightness(1.08);
  -webkit-backdrop-filter: blur(28px) saturate(180%) brightness(1.08);
  box-shadow:
    inset 0 1.5px 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -1px 1px 0 rgba(0, 0, 0, 0.25),
    0 16px 40px rgba(0, 0, 0, 0.36);
  transition:
    transform 320ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 300ms ease,
    background 300ms ease,
    box-shadow 320ms ease;
}

.liquid-glass-card:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--accent-rgb), 0.4);
  box-shadow:
    inset 0 1.5px 1.5px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 1px 0 rgba(0, 0, 0, 0.3),
    0 22px 50px rgba(0, 0, 0, 0.48),
    0 0 24px rgba(var(--accent-rgb), 0.15);
}

/* ========================================================================= */
/* UNIFIED VENUE TRANSFORMATIONS (3 SLIDERS + CROWD SPOTLIGHT)              */
/* ========================================================================= */

.home-transformations {
  padding-top: clamp(2.5rem, 5vw, 4.5rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
}

.event-slider-tabs-wrap {
  display: flex;
  justify-content: center;
  margin: 2rem auto 1.8rem;
}

.event-slider-tabs {
  position: relative;
  display: inline-flex;
  min-height: var(--header);
  align-items: center;
  justify-content: center;
  gap: clamp(0.12rem, 0.8vw, 0.42rem);
  padding: 0.18rem;
  border: 1px solid rgba(247, 248, 245, 0.1);
  border-radius: var(--squircle-sm, 8px);
  corner-shape: squircle;
  -webkit-corner-shape: squircle;
  background: rgba(7, 8, 9, 0.36);
  box-shadow:
    0 12px 48px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(26px) saturate(150%);
  -webkit-backdrop-filter: blur(26px) saturate(150%);
  overflow: visible;
}

.event-slider-tabs::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  corner-shape: inherit;
  -webkit-corner-shape: inherit;
  pointer-events: none;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.16), transparent 8rem);
  opacity: 0;
  transition: opacity 220ms ease;
}

.event-slider-tabs:hover::before {
  opacity: 1;
}

.liquid-tab-btn {
  position: relative;
  display: inline-flex;
  min-width: 66px;
  height: 28px;
  min-height: 28px;
  max-height: 28px;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  border-radius: var(--squircle-xs, 6px);
  corner-shape: squircle;
  -webkit-corner-shape: squircle;
  padding: 0 0.85rem;
  border: 1px solid transparent;
  background: transparent;
  color: rgba(247, 248, 245, 0.76);
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition:
    transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1),
    color 220ms ease,
    background 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease,
    filter 220ms ease;
}

.liquid-tab-btn .tab-kicker {
  color: rgba(var(--accent-rgb), 0.8);
  font-size: 0.7rem;
  font-weight: 800;
  margin-right: 0.4rem;
  letter-spacing: 0.05em;
  transition: color 220ms ease, text-shadow 220ms ease;
}

.event-slider-tabs:hover .liquid-tab-btn {
  color: rgba(247, 248, 245, 0.54);
  filter: blur(0.2px);
}

.event-slider-tabs .liquid-tab-btn:hover,
.event-slider-tabs .liquid-tab-btn:focus-visible {
  color: var(--ink);
  background: rgba(247, 248, 245, 0.1);
  transform: none;
  filter: none;
  border-color: rgba(255, 255, 255, 0.08);
}

.event-slider-tabs .liquid-tab-btn.is-active,
.event-slider-tabs .liquid-tab-btn[aria-selected="true"] {
  color: var(--ink);
  background: rgba(247, 248, 245, 0.14);
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  box-shadow:
    0 0 16px rgba(var(--accent-rgb), 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
  transform: none;
  filter: none;
}

.event-slider-tabs .liquid-tab-btn.is-active .tab-kicker,
.event-slider-tabs .liquid-tab-btn[aria-selected="true"] .tab-kicker {
  color: var(--accent);
  text-shadow: 0 0 10px rgba(var(--accent-rgb), 0.5);
}

.event-sliders-shell {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto 3rem;
}

.event-slider-panel {
  display: flex;
  flex-direction: column;
}

.event-slider-panel[hidden] {
  display: none !important;
}

.slider-panel-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.9rem;
  padding: 0 0.4rem;
}

.panel-venue-info {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.venue-tag {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  text-shadow: 0 0 10px rgba(var(--accent-rgb), 0.35);
}

.venue-name {
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  font-weight: 800;
  color: #ffffff;
  margin: 0;
}

.before-after-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  max-height: 620px;
  border-radius: var(--squircle-xl, 18px);
  corner-shape: squircle;
  -webkit-corner-shape: squircle;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-top: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.65), 0 0 35px rgba(var(--accent-rgb), 0.08);
  background: #030406;
  user-select: none;
  touch-action: pan-y;
}

.ba-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.ba-layer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.ba-badge {
  position: absolute;
  top: 1.2rem;
  padding: 0.45rem 1rem;
  border-radius: var(--squircle-pill, 999px);
  corner-shape: squircle;
  -webkit-corner-shape: squircle;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  z-index: 5;
  pointer-events: none;
}

.ba-badge-after {
  left: 1.2rem;
  color: var(--accent);
  background: rgba(10, 22, 14, 0.75);
  border: 1px solid rgba(var(--accent-rgb), 0.45);
}

.ba-badge-before {
  right: 1.2rem;
  color: #ffb4a2;
  background: rgba(20, 10, 10, 0.75);
  border: 1px solid rgba(255, 120, 100, 0.4);
}

.ba-badge-sub,
.crowd-tag-sub {
  display: inline;
}

@media (max-width: 768px), (orientation: portrait) and (max-width: 900px) {
  .ba-badge {
    top: 0.8rem;
    padding: 0.32rem 0.68rem;
    font-size: 0.66rem;
    letter-spacing: 0.06em;
  }

  .ba-badge-after {
    left: 0.8rem;
  }

  .ba-badge-before {
    right: 0.8rem;
  }

  .ba-badge-sub,
  .crowd-tag-sub {
    display: none;
  }

  .spotlight-overlay {
    padding: 0.8rem;
  }

  .crowd-tag {
    padding: 0.32rem 0.68rem;
    font-size: 0.66rem;
    letter-spacing: 0.06em;
  }
}

.ba-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.ba-handle-line {
  flex: 1;
  width: 2px;
  background: #ffffff;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.8), 0 0 20px rgba(var(--accent-rgb), 0.5);
}

.ba-handle-thumb {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  corner-shape: round;
  -webkit-corner-shape: round;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.1) 100%),
    rgba(14, 20, 24, 0.85);
  border: 2px solid #ffffff;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 0 24px rgba(var(--accent-rgb), 0.5),
    0 6px 18px rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  cursor: grab;
}

.ba-range-slider {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: ew-resize;
  margin: 0;
  z-index: 20;
  touch-action: pan-y;
}

.ba-toolbar {
  display: flex;
  align-items: center;
}

.ba-buttons {
  position: relative;
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  justify-content: center;
  gap: clamp(0.12rem, 0.6vw, 0.35rem);
  padding: 0.18rem;
  border: 1px solid rgba(247, 248, 245, 0.1);
  border-radius: var(--squircle-sm, 8px);
  corner-shape: squircle;
  -webkit-corner-shape: squircle;
  background: rgba(7, 8, 9, 0.36);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
}

.ba-toggle-btn {
  display: inline-flex;
  min-width: 60px;
  height: 26px;
  min-height: 26px;
  max-height: 26px;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  border-radius: var(--squircle-xs, 6px);
  corner-shape: squircle;
  -webkit-corner-shape: squircle;
  padding: 0 0.72rem;
  border: 1px solid transparent;
  background: transparent;
  color: rgba(247, 248, 245, 0.72);
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: all 220ms ease;
}

.ba-toggle-btn:hover {
  color: #ffffff;
  background: rgba(247, 248, 245, 0.08);
}

.ba-toggle-btn.is-active {
  color: var(--ink);
  background: rgba(247, 248, 245, 0.14);
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  box-shadow:
    0 0 14px rgba(var(--accent-rgb), 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.crowd-spotlight-wrap {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

.crowd-spotlight-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 520px;
  overflow: hidden;
  border-radius: var(--squircle-xl, 18px);
  corner-shape: squircle;
  -webkit-corner-shape: squircle;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-top: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
  background: #05070a;
}

.crowd-spotlight-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.spotlight-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.5rem;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, transparent 40%, rgba(0, 0, 0, 0.88) 100%);
  pointer-events: none;
}

.spotlight-top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  width: 100%;
}

.crowd-tag {
  display: inline-block;
  padding: 0.32rem 0.8rem;
  border-radius: var(--squircle-pill, 999px);
  corner-shape: squircle;
  -webkit-corner-shape: squircle;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(10, 22, 14, 0.78);
  border: 1px solid rgba(var(--accent-rgb), 0.4);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.spotlight-audio-btn {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.42rem 0.95rem;
  border-radius: var(--squircle-pill, 999px);
  corner-shape: squircle;
  -webkit-corner-shape: squircle;
  background: rgba(10, 15, 24, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.24);
  color: #ffffff;
  font-family: inherit;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
}

.spotlight-audio-btn:hover {
  background: rgba(var(--accent-rgb), 0.16);
  border-color: rgba(var(--accent-rgb), 0.65);
  color: var(--accent);
  box-shadow: 0 0 20px rgba(var(--accent-rgb), 0.35);
  transform: translateY(-1px);
}

.spotlight-audio-btn .audio-icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.spotlight-audio-btn.is-muted .icon-unmuted {
  display: none;
}

.spotlight-audio-btn.is-muted .icon-muted {
  display: block;
}

.spotlight-audio-btn:not(.is-muted) .icon-muted {
  display: none;
}

.spotlight-audio-btn:not(.is-muted) .icon-unmuted {
  display: block;
  stroke: var(--accent);
}

.spotlight-audio-btn:not(.is-muted) {
  border-color: rgba(var(--accent-rgb), 0.5);
  color: var(--accent);
}

.spotlight-caption {
  max-width: 600px;
}

.spotlight-caption h4 {
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 0.35rem;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
}

.spotlight-caption p {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.45;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}

@media (max-width: 640px) {
  .slider-panel-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
  }
  .event-slider-tabs {
    flex-wrap: wrap;
    border-radius: var(--squircle-sm, 8px);
    corner-shape: squircle;
    -webkit-corner-shape: squircle;
    justify-content: center;
  }
  .spotlight-overlay {
    padding: 0.8rem;
  }
  .crowd-tag {
    padding: 0.32rem 0.68rem;
    font-size: 0.66rem;
    letter-spacing: 0.06em;
  }
  .crowd-tag-sub {
    display: none;
  }
  .spotlight-top-bar {
    flex-wrap: wrap;
    gap: 0.6rem;
  }
  .spotlight-audio-btn {
    padding: 0.35rem 0.75rem;
    font-size: 0.7rem;
  }
}

/* ========================================================================= */
/* FEATURED SHOWREEL SECTION (5 VIDEOS)                                      */
/* ========================================================================= */

.home-showreel {
  padding-top: clamp(2.5rem, 5vw, 4.5rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
}

.home-showreel .section-intro .lime-eyebrow {
  margin-bottom: 0.15rem;
}

.home-showreel .section-intro h2 {
  margin-top: 0.15rem;
  margin-bottom: 0.75rem;
}

.showreel-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(1.4rem, 2.5vw, 2rem);
  margin-top: clamp(3.2rem, 6.5vw, 4.8rem);
}

.showreel-card {
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition:
    opacity 850ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 850ms cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s linear;
  will-change: opacity, transform;
}

.showreel-grid.is-visible > .showreel-card:nth-child(1),
.showreel-grid > .showreel-card:nth-child(1).is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0ms;
}

.showreel-grid.is-visible > .showreel-card:nth-child(2),
.showreel-grid > .showreel-card:nth-child(2).is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 150ms;
}

.showreel-grid.is-visible > .showreel-card:nth-child(3),
.showreel-grid > .showreel-card:nth-child(3).is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 300ms;
}

.showreel-grid.is-visible > .showreel-card:nth-child(4),
.showreel-grid > .showreel-card:nth-child(4).is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 450ms;
}

.showreel-grid.is-visible > .showreel-card:nth-child(5),
.showreel-grid > .showreel-card:nth-child(5).is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 600ms;
}

.showreel-grid > .showreel-card:nth-child(4) {
  grid-column: 2 / span 2;
}

.showreel-grid > .showreel-card:nth-child(5) {
  grid-column: 4 / span 2;
}

.showreel-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  text-shadow: 0 0 12px rgba(var(--accent-rgb), 0.4);
  margin-bottom: 0.65rem;
}

@media (max-width: 980px) {
  .showreel-grid {
    --showreel-gap: 1.4rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--showreel-gap);
  }
  .showreel-card {
    grid-column: span 1 !important;
  }
  .showreel-grid > .showreel-card:last-child {
    grid-column: span 2 !important;
    justify-self: center !important;
    width: calc((100% - var(--showreel-gap)) / 2) !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }
}

@media (max-width: 600px) {
  .showreel-grid {
    --showreel-gap: 0.6rem;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--showreel-gap) !important;
  }
  .showreel-card {
    grid-column: span 1 !important;
    max-width: 100% !important;
  }
  .showreel-grid > .showreel-card:last-child {
    grid-column: span 2 !important;
    justify-self: center !important;
    width: calc((100% - var(--showreel-gap)) / 2) !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }
  .showreel-grid .youtube-thumb {
    min-height: auto !important;
    aspect-ratio: 16 / 9 !important;
    border-radius: 8px !important;
  }
  .showreel-grid .youtube-thumb span {
    width: 32px !important;
    height: 32px !important;
  }
  .showreel-grid .youtube-thumb span::before {
    border-block-width: 5px !important;
    border-left-width: 8px !important;
    margin-left: 2px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .showreel-card {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ========================================================================= */
/* COMPACT CLIENT FEEDBACK (6 CARDS - LIQUID GLASS STYLE)                    */
/* ========================================================================= */

.home-feedback-compact {
  padding-top: clamp(2.5rem, 5vw, 4rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

.feedback-compact-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.15rem;
  max-width: 1200px;
  margin: 2rem auto 0;
}

.feedback-card-compact {
  padding: 1.25rem 1.4rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 175px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition:
    opacity 850ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 850ms cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s linear,
    border-color 300ms ease,
    background 300ms ease,
    box-shadow 350ms ease;
  will-change: opacity, transform;
}

.feedback-compact-grid.is-visible .feedback-card-compact:nth-child(1) {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0ms;
}

.feedback-compact-grid.is-visible .feedback-card-compact:nth-child(2) {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 140ms;
}

.feedback-compact-grid.is-visible .feedback-card-compact:nth-child(3) {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 280ms;
}

.feedback-compact-grid.is-visible .feedback-card-compact:nth-child(4) {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 420ms;
}

.feedback-compact-grid.is-visible .feedback-card-compact:nth-child(5) {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 560ms;
}

.feedback-compact-grid.is-visible .feedback-card-compact:nth-child(6) {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 700ms;
}

.feedback-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.65rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.feedback-client-name {
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  text-shadow: 0 0 10px rgba(var(--accent-rgb), 0.35);
}

.feedback-stars {
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  color: #ffd66e;
}

.feedback-compact-quote {
  margin: 0 0 0.8rem 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
  font-style: italic;
  flex: 1;
}

.feedback-compact-role {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.02em;
}

@media (max-width: 980px) {
  .feedback-compact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }
}

@media (max-width: 600px) {
  .feedback-compact-grid {
    grid-template-columns: 1fr;
    gap: 0.9rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .feedback-card-compact {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ========================================================================= */
/* WHATSAPP LINKS & CHIPS                                                    */
/* ========================================================================= */

.vision-whatsapp-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: #25d366;
  text-decoration: none;
  font-weight: 600;
  transition: color 240ms ease, transform 240ms ease;
}

.vision-whatsapp-link svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  fill: currentColor;
  stroke: none;
}

.vision-whatsapp-link:hover {
  color: #4df58a;
  transform: translateY(-1px);
}

.direct-contact a.whatsapp-direct-link:hover,
.direct-contact a.whatsapp-direct-link:focus-visible {
  color: #25d366;
  border-color: rgba(37, 211, 102, 0.4);
  box-shadow: 0 0 20px rgba(37, 211, 102, 0.2);
}

/* ========================================================================= */
/* COMPLIANCE & SAFETY STRIP                                                 */
/* ========================================================================= */

/* ========================================================================= */
/* COMPLIANCE & SAFETY STRIP (Liquid Glass Style Matching Above Boxes)       */
/* ========================================================================= */

.compliance-strip {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.6rem);
  margin-top: clamp(1.4rem, 2.5vw, 2rem);
  padding: clamp(1.1rem, 2vw, 1.35rem) clamp(1.2rem, 2.5vw, 1.8rem);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--squircle-base, 14px);
  corner-shape: squircle;
  -webkit-corner-shape: squircle;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.11) 0%, rgba(255, 255, 255, 0.035) 45%, rgba(255, 255, 255, 0.015) 70%, rgba(255, 255, 255, 0.065) 100%),
    rgba(10, 12, 16, 0.42);
  backdrop-filter: blur(28px) saturate(180%) brightness(1.08);
  -webkit-backdrop-filter: blur(28px) saturate(180%) brightness(1.08);
  box-shadow:
    inset 0 1.5px 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -1px 1px 0 rgba(0, 0, 0, 0.25),
    0 16px 40px rgba(0, 0, 0, 0.36);
  transition:
    transform 320ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 300ms ease,
    background 300ms ease,
    box-shadow 320ms ease;
  overflow: visible;
  align-items: center;
}

.compliance-strip::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  corner-shape: inherit;
  -webkit-corner-shape: inherit;
  pointer-events: none;
  background: radial-gradient(circle at var(--mx, 20%) var(--my, 0%), rgba(255, 255, 255, 0.16), transparent 12rem);
  opacity: 0.8;
  transition: opacity 300ms ease;
}

.compliance-strip:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.32);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.055) 45%, rgba(255, 255, 255, 0.025) 70%, rgba(255, 255, 255, 0.095) 100%),
    rgba(14, 17, 22, 0.52);
  box-shadow:
    inset 0 1.5px 1.5px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 1px 0 rgba(0, 0, 0, 0.3),
    0 22px 50px rgba(0, 0, 0, 0.48),
    0 0 28px rgba(var(--accent-rgb), 0.12);
}

.compliance-strip:hover::before {
  opacity: 1;
}

.compliance-badge {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-width: 0;
}

.compliance-icon {
  font-size: 1.5rem;
  line-height: 1;
  flex: 0 0 auto;
}

.compliance-meta {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  min-width: 0;
  overflow-wrap: break-word;
}

.compliance-meta strong {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: -0.01em;
  text-shadow: 0 0 10px rgba(var(--accent-rgb), 0.28);
  line-height: 1.3;
  overflow-wrap: break-word;
}

.compliance-meta span {
  font-size: 0.74rem;
  color: rgba(247, 248, 245, 0.78);
  line-height: 1.35;
  overflow-wrap: break-word;
}

.compliance-strip span {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  min-width: unset !important;
  min-height: unset !important;
  border-radius: 0 !important;
}

@media (max-width: 1024px) {
  .compliance-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.75rem 1.2rem;
    padding: 0.85rem 1.15rem;
  }
}

@media (max-width: 600px) {
  .compliance-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.55rem 0.85rem !important;
    padding: 0.65rem 0.85rem !important;
    margin-top: 1rem !important;
  }

  .compliance-badge {
    gap: 0.45rem !important;
    align-items: flex-start !important;
  }

  .compliance-icon {
    font-size: 1.05rem !important;
    margin-top: 0.08rem !important;
  }

  .compliance-meta {
    gap: 0.08rem !important;
  }

  .compliance-meta strong {
    font-size: 0.68rem !important;
    line-height: 1.2 !important;
    letter-spacing: -0.01em !important;
  }

  .compliance-meta span {
    font-size: 0.58rem !important;
    line-height: 1.25 !important;
    opacity: 0.82 !important;
  }
}

/* ========================================================================= */
/* BESPOKE PRODUCTION BANNER (Matches Curated Packages Card Language)         */
/* ========================================================================= */

.bespoke-production-banner {
  margin-top: clamp(1rem, 2vw, 1.45rem);
  width: 100%;
}

.bespoke-banner-inner.package-card {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: clamp(1.4rem, 2.5vw, 1.85rem) clamp(1.5rem, 3vw, 2.4rem);
  min-height: unset;
}

.bespoke-banner-copy {
  max-width: 680px;
}

.bespoke-banner-copy .package-kicker {
  text-align: left;
  margin-bottom: 0.25rem;
}

.bespoke-banner-copy h3 {
  text-align: left;
  font-size: 1.35rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0.25rem 0 0.45rem;
  letter-spacing: -0.015em;
}

.bespoke-banner-copy p {
  font-size: clamp(0.92rem, 1.25vw, 1.02rem);
  line-height: 1.55;
  color: rgba(247, 248, 245, 0.88);
  margin: 0;
}

.bespoke-banner-actions {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  flex: 0 0 auto;
}

.bespoke-banner-actions .package-cta {
  width: auto;
  white-space: nowrap;
  margin-top: 0;
}

.bespoke-banner-actions .whatsapp-cta {
  border-color: rgba(37, 211, 102, 0.35);
  color: #25d366;
}

.bespoke-banner-actions .whatsapp-cta:hover {
  border-color: rgba(37, 211, 102, 0.75);
  color: #ffffff;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.7),
    0 0 20px rgba(37, 211, 102, 0.45);
}

@media (max-width: 980px) {
  .bespoke-banner-inner.package-card {
    flex-direction: column;
    align-items: flex-start;
    padding: 1.4rem;
    gap: 1.25rem;
  }

  .bespoke-banner-copy .package-kicker,
  .bespoke-banner-copy h3 {
    text-align: left;
  }

  .bespoke-banner-actions {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.65rem;
  }

  .bespoke-banner-actions .package-cta {
    flex: 1 1 200px;
    text-align: center;
    white-space: normal;
    box-sizing: border-box;
  }
}

@media (max-width: 520px) {
  .bespoke-banner-actions {
    flex-direction: column;
  }

  .bespoke-banner-actions .package-cta {
    width: 100%;
    flex: 0 0 auto;
  }
}

/* ========================================================================= */
/* DETAILED QUOTE COMPLIANCE PILLS (Single Line, Centered to Page)           */
/* ========================================================================= */

.quote-compliance-strip {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: 0.55rem;
  margin: 1.15rem auto 0;
  width: 100%;
}

.quote-compliance-strip span {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  padding: 0.24rem 0.58rem;
  font-size: 0.68rem;
  font-weight: 600;
  color: rgba(242, 255, 252, 0.88);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--squircle-pill, 999px);
  backdrop-filter: blur(8px);
}

@media (max-width: 768px) {
  .quote-compliance-strip {
    flex-wrap: wrap;
    gap: 0.4rem;
  }

  .quote-compliance-strip span {
    font-size: 0.65rem;
    padding: 0.2rem 0.48rem;
  }
}

/* ========================================================================= */
/* FORM STATUS REFINEMENTS                                                   */
/* ========================================================================= */

.form-status.is-success,
.vision-form-status.is-success {
  display: block;
  margin-top: 1rem;
  padding: 1rem 1.25rem;
  border-radius: var(--squircle-md, 12px);
  background: rgba(var(--accent-rgb), 0.1);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  color: var(--accent);
  font-size: 0.88rem;
  line-height: 1.5;
  text-align: left;
}

.form-status.is-success a,
.vision-form-status.is-success a {
  color: #fff;
  text-decoration: underline;
  font-weight: 700;
}

.form-status.is-error,
.vision-form-status.is-error {
  display: block;
  margin-top: 1rem;
  padding: 0.9rem 1.1rem;
  border-radius: var(--squircle-md, 12px);
  background: rgba(255, 77, 109, 0.1);
  border: 1px solid rgba(255, 77, 109, 0.3);
  color: #ff6b8b;
  font-size: 0.85rem;
  line-height: 1.45;
  text-align: left;
}

.quote-status-sub,
.vision-status-sub {
  display: inline-block;
  margin-top: 0.35rem;
  font-size: 0.8rem;
  color: rgba(242, 255, 252, 0.82);
}

/* ========================================================================= */
/* FLOATING WHATSAPP BUTTON                                                  */
/* ========================================================================= */

.floating-whatsapp-btn {
  position: fixed;
  bottom: 22px;
  right: 22px;
  z-index: 999;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.04) 50%, rgba(255, 255, 255, 0.015) 75%, rgba(255, 255, 255, 0.08) 100%),
    rgba(10, 12, 16, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-top: 1px solid rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    inset 0 1px 1px 0 rgba(255, 255, 255, 0.4),
    0 8px 24px rgba(0, 0, 0, 0.4),
    0 0 16px rgba(37, 211, 102, 0.15);
  transition:
    transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1),
    border-color 220ms ease,
    background 220ms ease,
    box-shadow 220ms ease;
  text-decoration: none;
}

.floating-whatsapp-btn:hover {
  transform: scale(1.08) translateY(-2px);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.07) 50%, rgba(255, 255, 255, 0.03) 75%, rgba(255, 255, 255, 0.12) 100%),
    rgba(14, 18, 24, 0.68);
  border-color: rgba(37, 211, 102, 0.65);
  border-top-color: rgba(255, 255, 255, 0.6);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.6),
    0 12px 30px rgba(0, 0, 0, 0.5),
    0 0 24px rgba(37, 211, 102, 0.35);
}

.floating-whatsapp-btn:active {
  transform: scale(0.96);
}

.floating-whatsapp-btn svg {
  width: 22px;
  height: 22px;
  fill: #25d366;
  filter: drop-shadow(0 0 6px rgba(37, 211, 102, 0.35));
  transition: fill 200ms ease, filter 200ms ease;
}

.floating-whatsapp-btn:hover svg {
  fill: #4df58a;
  filter: drop-shadow(0 0 8px rgba(37, 211, 102, 0.6));
}

.floating-whatsapp-tooltip {
  position: absolute;
  right: 56px;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(10, 12, 16, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: #f2fffc;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.35rem 0.75rem;
  border-radius: var(--squircle-sm, 8px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 180ms ease, transform 180ms ease;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.floating-whatsapp-btn:hover .floating-whatsapp-tooltip {
  opacity: 1;
  transform: translateY(-50%) translateX(-4px);
}

@media (max-width: 480px) {
  .floating-whatsapp-btn {
    bottom: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
  }
  .floating-whatsapp-btn svg {
    width: 20px;
    height: 20px;
  }
  .floating-whatsapp-tooltip {
    display: none;
  }
}

/* ========================================================================= */
/* MOBILE FORM ZOOM PREVENTION (ALL MOBILE VIEWPORTS <= 768px)               */
/* Prevents iOS Safari from auto-zooming in on input focus and getting stuck */
/* ========================================================================= */

@media screen and (max-width: 768px) {
  input,
  select:not(.vision-dialcode-select),
  textarea,
  .booking-form input,
  .booking-form select,
  .booking-form textarea,
  .vision-phone-input,
  .vision-name-input {
    font-size: 16px !important;
  }
}

/* ========================================================================= */
/* MOBILE VERTICAL (PORTRAIT) OPTIMIZATIONS                                  */
/* Applied EXCLUSIVELY to mobile phones in vertical (portrait) orientation   */
/* ========================================================================= */

@media screen and (max-width: 768px) and (orientation: portrait) {
  /* 0. Tighter vertical section pacing across pages so it doesn't feel endlessly long */
  .section-band {
    padding-block: 2.8rem 2.4rem !important;
  }

  .section-intro {
    margin-bottom: 1.25rem !important;
  }

  .home-standards,
  .home-showreel,
  .home-feedback-compact,
  .home-faq,
  .home-vision-call,
  .services-vision-call,
  .detailed-quote-section {
    padding-block: 2.4rem 2rem !important;
  }

  /* 1. Standards & Discipline: 2 boxes next to each other, smaller to fit */
  .home-standards .standards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.5rem !important;
  }

  .home-standards .standard-card {
    min-height: auto !important;
    padding: 0.75rem 0.65rem !important;
    gap: 0.3rem !important;
  }

  .home-standards .standard-card .card-kicker {
    font-size: 0.58rem !important;
    letter-spacing: 0.08em !important;
    margin-bottom: 0.15rem !important;
    line-height: 1.2 !important;
  }

  .home-standards .standard-card h3 {
    font-size: 0.82rem !important;
    line-height: 1.25 !important;
    margin: 0 !important;
  }

  .home-standards .standard-card p {
    font-size: 0.68rem !important;
    line-height: 1.35 !important;
    margin: 0 !important;
  }

  .home-standards .standard-card .standard-pill {
    font-size: 0.56rem !important;
    padding: 0.2rem 0.45rem !important;
    margin-top: 0.35rem !important;
    letter-spacing: 0.04em !important;
  }

  /* 1b. Standards & Discipline Compliance Strip: 2 stats next to each other, smaller & neat */
  .home-standards .compliance-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.55rem 0.85rem !important;
    padding: 0.65rem 0.85rem !important;
    margin-top: 0.85rem !important;
    border-radius: 12px !important;
  }

  .home-standards .compliance-badge {
    gap: 0.45rem !important;
    align-items: flex-start !important;
  }

  .home-standards .compliance-icon {
    font-size: 1.05rem !important;
    line-height: 1.2 !important;
    margin-top: 0.05rem !important;
    flex: 0 0 auto !important;
  }

  .home-standards .compliance-meta {
    gap: 0.08rem !important;
    min-width: 0 !important;
  }

  .home-standards .compliance-meta strong {
    font-size: 0.68rem !important;
    line-height: 1.2 !important;
    letter-spacing: -0.01em !important;
  }

  .home-standards .compliance-meta span {
    font-size: 0.58rem !important;
    line-height: 1.25 !important;
    opacity: 0.82 !important;
  }

  /* 1c. Venue Transformations: bottom video crowd tag matches before/after badge size & placement */
  .spotlight-overlay {
    padding: 0.8rem !important;
  }

  .crowd-tag {
    padding: 0.32rem 0.68rem !important;
    font-size: 0.66rem !important;
    letter-spacing: 0.06em !important;
  }

  .crowd-tag-sub {
    display: none !important;
  }

  .spotlight-caption h4 {
    font-size: 0.95rem !important;
    margin-bottom: 0.2rem !important;
  }

  .spotlight-caption p {
    font-size: 0.72rem !important;
    line-height: 1.35 !important;
  }

  /* 2. Featured Showreels: 2 videos next to each other, smaller & compact */
  .showreel-grid {
    --showreel-gap: 0.55rem;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--showreel-gap) !important;
    margin-top: 1.15rem !important;
  }

  .showreel-card {
    grid-column: span 1 !important;
    max-width: 100% !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .showreel-grid > .showreel-card:last-child {
    grid-column: span 2 !important;
    justify-self: center !important;
    width: calc((100% - var(--showreel-gap)) / 2) !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }

  .showreel-badge {
    font-size: 0.54rem !important;
    letter-spacing: 0.05em !important;
    margin-bottom: 0.2rem !important;
    line-height: 1.2 !important;
  }

  .showreel-grid .youtube-thumb,
  .youtube-row:not(.dj-youtube-row) .youtube-thumb {
    min-height: auto !important;
    aspect-ratio: 16 / 9 !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
  }

  .showreel-grid .youtube-thumb span,
  .youtube-row:not(.dj-youtube-row) .youtube-thumb span {
    width: 32px !important;
    height: 32px !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
  }

  .showreel-grid .youtube-thumb span::before,
  .youtube-row:not(.dj-youtube-row) .youtube-thumb span::before {
    border-block-width: 5px !important;
    border-left-width: 8px !important;
    margin-left: 2px !important;
  }

  .youtube-row:not(.dj-youtube-row) {
    --yt-gap: 0.55rem;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--yt-gap) !important;
  }

  .youtube-row:not(.dj-youtube-row) > .youtube-thumb:last-child,
  .youtube-row:not(.dj-youtube-row) > .youtube-thumb:nth-child(3),
  .what-we-do .youtube-row > .youtube-thumb:nth-child(3) {
    grid-column: span 2 !important;
    justify-self: center !important;
    width: calc((100% - var(--yt-gap)) / 2) !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }

  /* 2b. About Gallery: 2 images side-by-side, 3rd centered underneath, smaller & compact */
  .about-gallery {
    --about-gap: 0.65rem;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--about-gap) !important;
  }

  .about-gallery img {
    width: 100% !important;
    height: clamp(180px, 46vw, 260px) !important;
    object-fit: cover !important;
    border-radius: var(--squircle-sm, 8px) !important;
  }

  .about-gallery img:first-child,
  .about-gallery img[src*="about-laser-portrait"] {
    object-position: center 20% !important;
  }

  .about-gallery img:nth-child(3),
  .about-gallery img:last-child {
    grid-column: span 2 !important;
    justify-self: center !important;
    width: calc((100% - var(--about-gap)) / 2) !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }

  /* 3. Client Feedbacks: 3 feedbacks next to each other, smaller */
  .feedback-compact-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0.4rem !important;
    margin-top: 1.2rem !important;
  }

  .feedback-card-compact {
    min-height: auto !important;
    padding: 0.55rem 0.45rem !important;
  }

  .feedback-card-top {
    margin-bottom: 0.25rem !important;
    padding-bottom: 0.2rem !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.15rem !important;
  }

  .feedback-client-name {
    font-size: 0.62rem !important;
    letter-spacing: 0.03em !important;
    line-height: 1.2 !important;
  }

  .feedback-stars {
    font-size: 0.5rem !important;
    letter-spacing: 0.04em !important;
    line-height: 1 !important;
  }

  .feedback-compact-quote {
    font-size: 0.58rem !important;
    line-height: 1.3 !important;
    margin: 0 0 0.35rem 0 !important;
  }

  .feedback-compact-role {
    font-size: 0.5rem !important;
    line-height: 1.2 !important;
  }

  /* 4. FAQ: smaller to use less space */
  .home-faq {
    gap: 1.2rem !important;
  }

  .faq-list {
    gap: 0.35rem !important;
  }

  .faq-list details {
    border-radius: 10px !important;
  }

  .faq-list summary {
    padding: 0.65rem 0.85rem !important;
    font-size: 0.82rem !important;
    line-height: 1.35 !important;
  }

  .faq-list p {
    padding: 0 0.85rem 0.65rem !important;
    font-size: 0.74rem !important;
    line-height: 1.4 !important;
  }

  /* 5. Direct Production Callback: smaller, 2 production categories next to each other */
  .home-vision-call,
  .services-vision-call {
    padding-block: 2.2rem !important;
  }

  .vision-card-wrapper .liquid-glass-card {
    padding: 1.2rem 0.95rem !important;
    border-radius: 16px !important;
  }

  .vision-card-header {
    margin-bottom: 0.9rem !important;
  }

  .vision-eyebrow-badge {
    padding: 0.25rem 0.65rem !important;
    font-size: 0.65rem !important;
    margin-bottom: 0.45rem !important;
  }

  .vision-card-title {
    font-size: 1.3rem !important;
    line-height: 1.2 !important;
    margin: 0 0 0.35rem 0 !important;
  }

  .vision-card-desc {
    font-size: 0.76rem !important;
    line-height: 1.38 !important;
    margin: 0 0 0.75rem 0 !important;
  }

  .vision-service-selection {
    margin-bottom: 0.9rem !important;
  }

  .vision-field-label {
    font-size: 0.68rem !important;
    margin-bottom: 0.4rem !important;
  }

  .vision-service-pills {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.45rem !important;
  }

  .vision-pill {
    padding: 0.45rem 0.5rem !important;
    font-size: 0.72rem !important;
    line-height: 1.2 !important;
    gap: 0.3rem !important;
    min-height: 38px !important;
    text-align: center !important;
    justify-content: center !important;
    white-space: normal !important;
  }

  .vision-input-group {
    margin-bottom: 0.7rem !important;
  }

  .vision-phone-cluster {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    border-radius: var(--squircle-pill, 999px) !important;
    padding: 0.28rem 0.65rem 0.28rem 0.55rem !important;
    gap: 0.3rem !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .vision-dialcode-wrapper {
    flex: 0 0 auto !important;
    max-width: 82px !important;
    border-bottom: none !important;
    padding-bottom: 0 !important;
  }

  .vision-cluster-divider {
    display: block !important;
    width: 1px !important;
    height: 16px !important;
    background: rgba(255, 255, 255, 0.18) !important;
    flex-shrink: 0 !important;
    margin: 0 0.15rem !important;
  }

  .vision-phone-slot {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
  }

  .vision-dialcode-select {
    font-size: 0.74rem !important;
    font-weight: 600 !important;
    padding: 0.28rem 0.75rem 0.28rem 0.15rem !important;
    letter-spacing: -0.01em !important;
  }

  .vision-dialcode-chevron {
    font-size: 0.5rem !important;
    right: 0.1rem !important;
  }

  .vision-phone-input {
    font-size: 16px !important;
    padding: 0.36rem 0.4rem !important;
    min-width: 0 !important;
    width: 100% !important;
    font-weight: 500 !important;
  }

  .vision-submit-row {
    margin-top: 0.55rem !important;
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
  }

  .vision-submit-btn {
    width: 100% !important;
    justify-content: center !important;
    padding: 0.65rem 1.25rem !important;
    font-size: 0.86rem !important;
    white-space: nowrap !important;
    border-radius: var(--squircle-pill, 999px) !important;
    margin-top: 0 !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
  }

  .vision-card-subrow {
    margin-top: 0.55rem !important;
    gap: 0.45rem !important;
  }

  .vision-name-slot {
    min-width: 100% !important;
    max-width: 100% !important;
  }

  .vision-name-input {
    font-size: 16px !important;
    padding: 0.45rem 0.75rem !important;
  }

  .vision-direct-reach {
    margin-top: 1.45rem !important;
    padding-top: 1.2rem !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.55rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .vision-direct-label {
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: rgba(255, 255, 255, 0.52) !important;
  }

  .vision-direct-options {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.45rem !important;
    width: 100% !important;
  }

  .vision-direct-chip {
    font-size: 0.76rem !important;
    padding: 0.38rem 0.72rem !important;
    border-radius: var(--squircle-pill, 999px) !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
  }

  .vision-chip-tag {
    font-size: 0.62rem !important;
    padding: 0.08rem 0.32rem !important;
    border-radius: 4px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    color: rgba(255, 255, 255, 0.6) !important;
  }

  /* 6. Services menubar: preserves the exact same liquid glass finish as on PC */

  /* 7. Production rental & Full visual production categories */
  .fixtures-section .fixture-intro {
    display: block !important;
    margin-bottom: 0.75rem !important;
  }

  .fixtures-section .fixture-copy {
    width: 100% !important;
  }

  .fixtures-section .fixture-copy h3 {
    font-size: clamp(2.35rem, 13vw, 4rem) !important;
    line-height: 0.95 !important;
    letter-spacing: -0.025em !important;
    margin: 0.25rem 0 0.55rem !important;
  }

  .fixtures-section .fixture-copy p:not(.eyebrow) {
    font-size: 0.84rem !important;
    line-height: 1.45 !important;
    max-width: 100% !important;
  }

  /* 8. Professional DJ Services: 2 photos side-by-side, 3rd centered underneath; 2 videos side-by-side, 3rd centered underneath */
  [data-page="dj-services"] .dj-gallery {
    --dj-gap: 0.65rem;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--dj-gap) !important;
    margin-top: 1.2rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  [data-page="dj-services"] .dj-gallery img {
    width: 100% !important;
    aspect-ratio: 4 / 5 !important;
    object-fit: cover !important;
    border-radius: var(--squircle-sm, 8px) !important;
  }

  [data-page="dj-services"] .dj-gallery img:nth-child(3),
  [data-page="dj-services"] .dj-gallery img:last-child {
    grid-column: span 2 !important;
    justify-self: center !important;
    width: calc((100% - var(--dj-gap)) / 2) !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }

  [data-page="dj-services"] .dj-youtube-row {
    --dj-yt-gap: 0.65rem;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--dj-yt-gap) !important;
    margin-top: 1.35rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  [data-page="dj-services"] .dj-youtube-row .youtube-thumb {
    width: 100% !important;
    min-height: auto !important;
    aspect-ratio: 16 / 9 !important;
    border-radius: var(--squircle-sm, 8px) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
  }

  [data-page="dj-services"] .dj-youtube-row .youtube-thumb span {
    width: 32px !important;
    height: 32px !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
  }

  [data-page="dj-services"] .dj-youtube-row .youtube-thumb span::before {
    border-block-width: 5px !important;
    border-left-width: 8px !important;
    margin-left: 2px !important;
  }

  [data-page="dj-services"] .dj-youtube-row > .youtube-thumb:nth-child(3),
  [data-page="dj-services"] .dj-youtube-row > .youtube-thumb:last-child {
    grid-column: span 2 !important;
    justify-self: center !important;
    width: calc((100% - var(--dj-yt-gap)) / 2) !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }

  /* 9. Full event specifications form: event date from and date to on one line */
  .booking-form .form-row-dates,
  .booking-form .form-row:has(input[name="date_from"]),
  .form-row.form-row-dates {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.5rem !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .booking-form .form-row-dates label,
  .booking-form .form-row:has(input[name="date_from"]) label,
  .form-row.form-row-dates label {
    font-size: clamp(0.62rem, 2.7vw, 0.72rem) !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.25rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    box-sizing: border-box !important;
  }

  .booking-form .form-row-dates input,
  .booking-form .form-row:has(input[name="date_from"]) input,
  .form-row.form-row-dates input {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0.65rem 0.45rem !important;
    font-size: 16px !important;
    box-sizing: border-box !important;
    -webkit-appearance: none !important;
    appearance: none !important;
  }

  /* 10. Footer: smaller, more compact, keep current layout and look */
  .site-footer {
    padding: 2.2rem clamp(1rem, 4vw, 1.8rem) 1.2rem !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  .footer-inner {
    grid-template-columns: 1fr !important;
    gap: 1.1rem !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .footer-brand img {
    width: clamp(110px, 35vw, 135px) !important;
  }

  .footer-links {
    grid-template-columns: 1fr !important;
    gap: 0.35rem 0.75rem !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .footer-links a,
  .footer-line {
    min-height: 32px !important;
    font-size: 0.76rem !important;
    gap: 0.45rem !important;
    word-break: break-word !important;
    max-width: 100% !important;
  }

  .footer-links svg {
    width: 17px !important;
    height: 17px !important;
    flex-shrink: 0 !important;
  }

  .footer-links .button {
    padding: 0.45rem 1.1rem !important;
    font-size: 0.78rem !important;
  }

  .footer-legal-notice {
    margin: 0.75rem auto 0 !important;
    padding-top: 0.65rem !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .footer-legal-notice p {
    font-size: 0.62rem !important;
    line-height: 1.45 !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
  }

  .footer-bottom {
    margin: 0.6rem auto 0 !important;
    padding-top: 0.5rem !important;
    font-size: 0.68rem !important;
    gap: 0.3rem !important;
    line-height: 1.35 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Prevent any element or main container from exceeding 100vw, scaling, or having side borders */
  main,
  body.nav-hover main,
  body:has(.nav-group.is-open) main,
  body:has(.service-menu.is-open) main {
    transform: none !important;
    max-width: 100vw !important;
    width: 100% !important;
    overflow-x: hidden !important;
  }
}

/* ========================================================================= */
/* MOBILE SERVICES DROPDOWN APPLE-STYLE DISSOLVE                            */
/* Applied EXCLUSIVELY to mobile phones (portrait & landscape)               */
/* ========================================================================= */

@media (max-width: 980px), (orientation: landscape) and (max-height: 600px) {
  .service-menu {
    left: auto !important;
    right: 0 !important;
    min-width: min(86vw, 280px) !important;
    transform-origin: top right !important;
    transform: translate(0, -14px) scale(0.92) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
    transition:
      opacity 240ms cubic-bezier(0.32, 0.72, 0, 1),
      transform 280ms cubic-bezier(0.32, 0.72, 0, 1),
      visibility 280ms ease,
      backdrop-filter 240ms ease !important;
  }

  /* Force dissolve: prevent sticky mobile touch hover / focus-within from keeping dropdown open */
  .nav-group:not(.is-open) .service-menu,
  .nav-group:not(.is-open):hover .service-menu,
  .nav-group:not(.is-open):focus-within .service-menu {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translate(0, -14px) scale(0.92) !important;
    visibility: hidden !important;
    transition:
      opacity 240ms cubic-bezier(0.32, 0.72, 0, 1),
      transform 280ms cubic-bezier(0.32, 0.72, 0, 1),
      visibility 280ms ease,
      backdrop-filter 240ms ease !important;
  }

  /* Open state: smoothly expands downward from the menubar */
  .nav-group.is-open .service-menu {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translate(0, 0) scale(1) !important;
    visibility: visible !important;
    transition:
      opacity 240ms cubic-bezier(0.32, 0.72, 0, 1),
      transform 280ms cubic-bezier(0.32, 0.72, 0, 1),
      visibility 0s ease,
      backdrop-filter 240ms ease !important;
  }
}

/* ========================================================================= */
/* MOBILE LANDSCAPE OPTIMIZATIONS                                            */
/* Applied EXCLUSIVELY to mobile phones in horizontal (landscape) orientation*/
/* ========================================================================= */

@media screen and (orientation: landscape) and (max-height: 520px) {
  :root {
    --header: 36px;
  }

  .site-header {
    padding: 0.2rem clamp(0.6rem, 2vw, 1.2rem) !important;
  }

  .nav-shell {
    min-height: 32px !important;
    gap: 0.15rem !important;
  }

  .nav-item {
    height: 24px !important;
    min-height: 24px !important;
    font-size: 0.65rem !important;
    padding: 0 0.45rem !important;
  }

  .nav-logo img {
    height: 20px !important;
    max-height: 20px !important;
  }

  /* Home Landing Page: Hero text never cuts into Dante Light & Laser corner logo or header */
  .intro-video-section {
    min-height: 100svh !important;
    padding-top: calc(var(--header, 36px) + 0.4rem) !important;
    place-items: end center !important;
  }

  .intro-video-section video {
    object-position: center center !important;
    transform: scale(1.25) !important;
    transform-origin: center center !important;
  }

  .intro-video-section .home-hero-copy {
    max-width: min(540px, calc(100vw - 4.5rem)) !important;
    margin: 0 auto clamp(0.5rem, 2.5vh, 1rem) !important;
    padding-inline: 0.75rem !important;
    gap: 0.3rem !important;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.95) !important;
  }

  .intro-video-section .home-hero-copy p:first-child {
    font-size: clamp(1.05rem, 3.8vh, 1.35rem) !important;
    line-height: 1.1 !important;
  }

  .intro-video-section .hero-note {
    font-size: clamp(0.68rem, 2.2vh, 0.78rem) !important;
    line-height: 1.35 !important;
    max-width: 500px !important;
    margin: 0 auto !important;
  }

  /* About Gallery: first two images smaller side-by-side, third image centered underneath */
  .about-gallery {
    --about-gap: 0.65rem;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--about-gap) !important;
  }

  .about-gallery img {
    width: 100% !important;
    height: clamp(150px, 40vh, 215px) !important;
    object-fit: cover !important;
    border-radius: var(--squircle-sm, 8px) !important;
  }

  /* Portrait with laser: ensure head and full face are NEVER cut off when phone is turned landscape */
  .about-gallery img:first-child,
  .about-gallery img[src*="about-laser-portrait"] {
    object-position: center 32% !important;
  }

  .about-gallery img:nth-child(3),
  .about-gallery img:last-child {
    grid-column: span 2 !important;
    justify-self: center !important;
    width: calc((100% - var(--about-gap)) / 2) !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }

  /* About Story: editorial wrap layout in mobile landscape */
  .about-story {
    display: block !important;
    overflow: visible !important;
  }

  .about-story::after {
    content: "" !important;
    display: table !important;
    clear: both !important;
  }

  .story-card {
    float: left !important;
    width: clamp(150px, 22vw, 195px) !important;
    max-width: 200px !important;
    margin: 0 clamp(1.2rem, 3vw, 1.8rem) 0.65rem 0 !important;
    display: block !important;
    clear: none !important;
  }

  .story-card img {
    min-height: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 !important;
  }

  .story-copy {
    display: block !important;
    text-align: left !important;
    min-width: 0 !important;
  }

  .story-copy .eyebrow {
    font-size: 0.65rem !important;
    margin-bottom: 0.2rem !important;
  }

  .story-copy h2 {
    font-size: clamp(1.35rem, 4.5vw, 1.8rem) !important;
    line-height: 1.1 !important;
    margin: 0.15rem 0 0.45rem !important;
  }

  .story-copy p {
    font-size: 0.78rem !important;
    line-height: 1.45 !important;
    margin-bottom: 0.65rem !important;
    margin-top: 0 !important;
  }

  /* Paragraph 1 stays strictly in the column to the right of the portrait and never wraps around it */
  .story-copy h2 + p,
  .story-copy p:nth-of-type(2) {
    display: flow-root !important;
  }

  /* Paragraph 2 ('His philosophy balances...') clears the portrait float, starting the wrap underneath on the left */
  .story-copy h2 + p + p,
  .story-copy p:nth-of-type(3) {
    clear: both !important;
    display: block !important;
    margin-top: 0.65rem !important;
  }

  /* Paragraph 3 ('Clients and promoters...') follows full-width */
  .story-copy h2 + p + p + p,
  .story-copy p:nth-of-type(4) {
    display: block !important;
    margin-top: 0.65rem !important;
  }

  /* Fixture Categories: bold commanding fixture titles */
  .fixtures-section .fixture-copy h3 {
    font-size: clamp(2.1rem, 7.5vw, 3.4rem) !important;
    line-height: 0.96 !important;
    letter-spacing: -0.02em !important;
    margin: 0.25rem 0 0.5rem !important;
  }

  /* DJ Services: 2 photos side-by-side, 3rd centered underneath; 2 videos side-by-side, 3rd centered underneath */
  [data-page="dj-services"] .dj-gallery {
    --dj-gap: 0.65rem;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--dj-gap) !important;
  }

  [data-page="dj-services"] .dj-gallery img {
    width: 100% !important;
    height: clamp(140px, 35vh, 210px) !important;
    aspect-ratio: auto !important;
    object-fit: cover !important;
    border-radius: var(--squircle-sm, 8px) !important;
  }

  [data-page="dj-services"] .dj-gallery img:nth-child(3),
  [data-page="dj-services"] .dj-gallery img:last-child {
    grid-column: span 2 !important;
    justify-self: center !important;
    width: calc((100% - var(--dj-gap)) / 2) !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }

  [data-page="dj-services"] .dj-youtube-row {
    --dj-yt-gap: 0.65rem;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--dj-yt-gap) !important;
  }

  [data-page="dj-services"] .dj-youtube-row > .youtube-thumb:nth-child(3),
  [data-page="dj-services"] .dj-youtube-row > .youtube-thumb:last-child {
    grid-column: span 2 !important;
    justify-self: center !important;
    width: calc((100% - var(--dj-yt-gap)) / 2) !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }
}