/* XLR Entertainment — The Site
   Phase 1 marketing site stylesheet (ADR-0002: plain static, no build step).
   Built up from the prior slice's inline styles, reviewed and reorganized:
   tokens · base · header · hero · Trust Strip · service intro · Packages · motion/responsive.
   Sections present in this file are issues 01–02 (scaffold + SEO, Packages).
   Quote Request, media, and footer arrive in issues 03–05. */

/* ---- Tokens ---------------------------------------------------------------- */
:root {
  --blue: #006fff;
  --blue-dark: #0059dd;
  --ink: #001733;
  --muted: #5e6b7d;
  --white: #fff;
  --nav-h: 64px;
  font-family: "Inter var", Inter, "SF Pro Display", "Segoe UI Variable", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}

/* ---- Base ------------------------------------------------------------------ */
* { box-sizing: border-box; }
/* Smooth in-page jumps (Get a Quote / package CTAs), offset so anchored
   sections clear the sticky header instead of hiding under it. */
html { scroll-behavior: smooth; scroll-padding-top: var(--nav-h); }
html, body { margin: 0; min-height: 100%; background: #f6f7f9; color: var(--ink); }
body { overflow-x: hidden; -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision; }
a { color: inherit; text-decoration: none; }

/* ---- Header (sticky) ------------------------------------------------------- */
.topbar {
  height: var(--nav-h);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(24px, 4vw, 48px);
  border-bottom: 1px solid rgba(0,23,51,.06);
  position: sticky;
  top: 0;
  z-index: 20;
}
.brand {
  display: inline-flex;
  align-items: center;
  font-weight: 760;
  letter-spacing: -.032em;
  font-size: clamp(20px, 1.5vw, 24px);
  color: #071321;
}
.nav-actions { display: flex; align-items: center; gap: clamp(16px, 2.6vw, 26px); }
.nav-phone { color: #142033; font-weight: 650; font-size: 14px; display: inline-flex; opacity: .72; }
.cta {
  background: var(--blue);
  color: white;
  border: 0;
  border-radius: 999px;
  font-weight: 550;
  font-size: 14px;
  padding: 10px 17px;
  min-width: 100px;
  display: inline-flex;
  justify-content: center;
  box-shadow: none;
  transition: transform .15s ease, background .15s ease;
}
.cta:hover { background: var(--blue-dark); transform: translateY(-1px); }

/* ---- Hero (DJ montage — 6 clips hard-cut every 1.5s, autoplay + loop) ------ */
.hero {
  position: relative;
  min-height: calc(100svh - var(--nav-h));
  height: calc(100svh - var(--nav-h));
  overflow: hidden;
  background: #080c0f;
  isolation: isolate;
}
.hero-media, .hero-video, .video-fallback, .shade, .edge-vignette { position: absolute; inset: 0; }
.hero-video {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 58%;
  transform: scale(1.014);
  /* Clips are locally trimmed/compressed; CSS only fine-tunes the look. */
  filter: saturate(.96) contrast(1.02) brightness(.94);
}
/* Montage stack: all 6 clips cover the frame; only .is-active is shown. The
   switch is opacity 0<->1 with NO transition, so each cut is instant. */
.hero-clip { opacity: 0; }
.hero-clip.is-active { opacity: 1; }
.video-fallback {
  background:
    radial-gradient(circle at 20% 30%, rgba(0,111,255,.28), transparent 30%),
    radial-gradient(circle at 78% 42%, rgba(65,210,255,.14), transparent 28%),
    linear-gradient(110deg, #101516, #22312a 42%, #111316 100%);
  animation: drift 13s ease-in-out infinite alternate;
  transform: scale(1.06);
}
.shade {
  background:
    linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.10) 42%, rgba(0,0,0,.40) 78%, rgba(0,0,0,.60) 100%),
    linear-gradient(90deg, rgba(0,0,0,.30) 0%, rgba(0,0,0,.08) 46%, rgba(0,0,0,0) 100%);
  z-index: 2;
}
.edge-vignette {
  z-index: 3;
  box-shadow: inset 0 -70px 96px rgba(0,0,0,.26), inset 0 0 120px rgba(0,0,0,.10);
  pointer-events: none;
}
.hero-copy {
  position: absolute;
  z-index: 4;
  left: clamp(32px, 4vw, 56px);
  bottom: clamp(64px, 9vh, 104px);
  max-width: min(560px, 76vw);
  color: white;
  text-shadow: 0 3px 24px rgba(0,0,0,.4);
}
.eyebrow {
  display: none;
  margin: 0 0 18px;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .76;
}
h1 {
  margin: 0;
  font-size: clamp(40px, 4.5vw, 56px);
  line-height: 1.08;
  letter-spacing: -.028em;
  font-weight: 600;
  max-width: 540px;
}
.subhead {
  margin: 22px 0 0;
  max-width: 480px;
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.45;
  font-weight: 540;
  letter-spacing: -.025em;
  color: rgba(255,255,255,.90);
}
.hero-actions { display: flex; align-items: center; gap: 18px; margin-top: 29px; flex-wrap: wrap; }
.hero-actions .cta { padding: 12px 22px; min-width: 116px; font-size: 14.5px; }
.ghost-call {
  display: none;
  color: #fff;
  font-weight: 820;
  padding: 15px 0;
  border-bottom: 2px solid rgba(255,255,255,.55);
}
/* Visually-hidden runtime hero-proof badge (drives window.__XLR_HERO__). */
.proof-badge {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---- Trust Strip — light proof marquee ---------------------------------- */
.credibility {
  position: relative;
  background: #f6f7f9;                  /* light, calm beat between hero and band */
  padding: clamp(42px, 5vw, 66px) 0;
  overflow: hidden;
}
/* gentle top edge-fade: ease the dark hero above into the light strip. The strip's
   BOTTOM dissolves into the cinematic band via .cinematic-seam--top (light). */
.credibility::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 30px;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(8,12,15,.16), rgba(8,12,15,0));
}
.pm-cap {
  text-align: center;
  margin: 0 0 16px;
  font-size: 12.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 600;
  color: #8a93a0;
}
.pm-marquee {
  width: 100%;
  overflow: hidden;
  /* soft edge mask: phrases ease in/out at the strip edges */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
}
.pm-track {
  display: flex;
  width: max-content;
  align-items: center;
  animation: pmScroll 64s linear infinite reverse;   /* slow + calm; reverse = scrolls right */
  will-change: transform;
}
.pm-marquee:hover .pm-track,
.pm-marquee:focus-within .pm-track { animation-play-state: paused; }
.pm-group { display: flex; flex: 0 0 auto; align-items: center; }
.pm-phrase {
  white-space: nowrap;
  padding: 0 clamp(20px, 2.4vw, 40px);
  font-size: clamp(14.5px, 1.25vw, 17px);
  font-weight: 500;
  letter-spacing: .005em;
  color: #3a424d;                      /* dark ink on the light strip */
}
/* restrained brand: a dim blue dot between phrases — no icons */
.pm-sep {
  flex: 0 0 auto;
  color: #006fff;
  opacity: .55;
  font-size: 15px;
  line-height: 1;
  transform: translateY(-1px);
}
@keyframes pmScroll { to { transform: translateX(-50%); } }

/* ---- Cinematic strip (full-bleed landscape still band) -------------------- */
.cinematic {
  position: relative;
  height: clamp(220px, 26vw, 300px);
  overflow: hidden;
  background: #080c0f;
  isolation: isolate;
  display: grid;
  align-items: center;
}
.cinematic-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #080c0f url("hero-mix-2-poster.jpg") center 50% / cover no-repeat;  /* static still */
}
.cinematic-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.46) 42%, rgba(0,0,0,.12) 78%, rgba(0,0,0,0) 100%),
    linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.35) 100%);
}
/* "Dissolve" seams (issue #16): the band fades into its neighbours instead of
   butting against them. These sit above the footage/shade inside .cinematic-media;
   .cinematic-copy stays crisp because it's a later sibling (its own stacking
   layer), not because of z-index. The band is short — clamp(220px, 26vw, 300px) —
   so the bottom fade only covers the lower ~half and the top is a thin ease-in;
   both reach the EXACT neighbour colour so the join is invisible. */
.cinematic-seam {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 2;
  pointer-events: none;
}
/* Top: dissolve the light trust strip into the band — the band's top picks up the
   strip colour (#f6f7f9) and fades into the footage, so there's no hard seam. */
.cinematic-seam--top {
  top: 0;
  height: 16%;
  background: linear-gradient(180deg, #f6f7f9 0%, rgba(246,247,249,0) 100%);
}
/* Bottom (the main fix): dissolve the dark footage into the Packages background.
   Faint through the middle, fully opaque #f6f7f9 at the very edge — no residual
   dark line at the .cinematic / .packages boundary. */
.cinematic-seam--bottom {
  bottom: 0;
  height: 52%;
  background: linear-gradient(180deg,
    rgba(246,247,249,0) 0%,
    rgba(246,247,249,.12) 38%,
    rgba(246,247,249,.55) 72%,
    #f6f7f9 100%);
}

.cinematic-copy {
  position: relative;
  z-index: 2;
  max-width: 1180px;
  width: 100%;
  margin: 0 auto;
  padding: 0 clamp(22px, 5vw, 64px);
  color: #fff;
  text-shadow: 0 3px 24px rgba(0,0,0,.4);
  /* Lift the copy clear of the bottom dissolve so the white headline never sits
     over the light wash. */
  transform: translateY(clamp(-24px, -3vw, -12px));
}
.cinematic-eyebrow {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 780;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .82;
}
.cinematic-headline {
  margin: 0;
  max-width: 620px;
  font-size: clamp(22px, 2.6vw, 34px);
  line-height: 1.16;
  letter-spacing: -.03em;
  font-weight: 620;
}

/* ---- Packages ------------------------------------------------------------- */
.packages {
  background: #f6f7f9;
  border-top: 1px solid rgba(0,23,51,.045);
  padding: clamp(72px, 8.5vw, 124px) clamp(22px, 5vw, 64px) clamp(80px, 9.5vw, 130px);
}
/* The cinematic band now dissolves straight into this background, so the section
   hairline would reappear as a fine line exactly at the seam — drop it only where
   Packages follows the band (issue #16 "Dissolve"). */
.cinematic + .packages { border-top: 0; }
.packages-wrap { max-width: 1180px; margin: 0 auto; }
.packages-head {
  display: grid;
  grid-template-columns: minmax(0, .98fr) minmax(320px, .76fr);
  gap: clamp(34px, 6vw, 96px);
  align-items: end;
  margin-bottom: clamp(40px, 5vw, 64px);
}
.packages-eyebrow {
  margin: 0 0 18px;
  color: rgba(0,111,255,.92);
  font-size: 12px;
  font-weight: 780;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.packages-title {
  margin: 0;
  color: #071321;
  font-size: clamp(36px, 4.6vw, 60px);
  line-height: 1.0;
  letter-spacing: -.05em;
  font-weight: 610;
  max-width: 640px;
}
.packages-lede {
  margin: 0;
  color: #465366;
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: 1.56;
  letter-spacing: -.02em;
  max-width: 520px;
}
.package-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 1.7vw, 22px);
}
/* B1 "Sharp Editorial": square corners, heavier borders, flat (no shadow). */
.package-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1.5px solid rgba(0,23,51,.2);
  border-radius: 4px;
  padding: clamp(22px, 1.9vw, 28px);
  min-width: 0;
}
.package-card[hidden] { display: none; }
.package-card--featured {
  border-color: var(--blue);
  border-width: 2px;
}
.package-tag {
  position: absolute;
  top: -1px;
  right: -1px;
  background: var(--blue);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 0 4px 0 8px;
}
.package-card-head {
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1.5px solid rgba(0,23,51,.14);
  /* Reserve the height of a name + guest-count line so cards that omit the guest
     line (e.g. DJ Event Party) keep their divider, price and CTA on the same
     baseline as the others — a consistent row instead of a ragged one. */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 47px;
}
.package-name {
  margin: 0;
  color: #071321;
  font-size: clamp(18px, 1.4vw, 21px);
  line-height: 1.12;
  letter-spacing: -.03em;
  font-weight: 760;
}
.package-guests {
  margin: 7px 0 0;
  color: #697789;
  font-size: 13px;
  font-weight: 560;
  letter-spacing: -.005em;
}
.package-price {
  margin: 0 0 14px;
  display: flex;
  align-items: baseline;
  gap: 4px;
  color: #071321;
}
.price-amount {
  font-size: clamp(30px, 2.6vw, 38px);
  font-weight: 780;
  letter-spacing: -.045em;
}
.price-unit {
  font-size: 14px;
  font-weight: 600;
  color: #697789;
  letter-spacing: -.01em;
}
.package-price--inquiry {
  font-size: clamp(15px, 1.2vw, 17px);
  font-weight: 640;
  letter-spacing: -.015em;
  color: var(--blue);
  min-height: clamp(34px, 2.4vw, 41px);
  display: flex;
  align-items: center;
}
.package-includes {
  margin: 0 0 22px;
  color: #5b6778;
  font-size: 14.5px;
  line-height: 1.55;
  letter-spacing: -.01em;
  flex: 1 1 auto;
}
.package-cta {
  margin-top: auto;
  align-self: stretch;
  text-align: center;
  background: #fff;
  color: var(--blue);
  border: 1.5px solid var(--blue);
  border-radius: 4px;
  font-weight: 660;
  font-size: 14px;
  padding: 11px 20px;
  display: inline-flex;
  justify-content: center;
  transition: background .15s ease, color .15s ease;
}
.package-cta:hover { background: var(--blue); color: #fff; }
.package-cta:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.package-card--featured .package-cta { background: var(--blue); color: #fff; }
.package-card--featured .package-cta:hover { background: var(--blue-dark); }
.packages-actions { margin-top: clamp(26px, 3vw, 38px); display: flex; justify-content: center; }
.packages-toggle {
  background: #fff;
  color: #071321;
  border: 1px solid rgba(0,23,51,.16);
  border-radius: 999px;
  font: inherit;
  font-weight: 600;
  font-size: 14.5px;
  letter-spacing: -.01em;
  padding: 12px 26px;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.packages-toggle:hover { border-color: rgba(0,111,255,.5); background: #fbfcff; transform: translateY(-1px); }
/* ---- Booking funnel ("Media Split": narrow clip left, stepper right) -------
   Issue 09: the multi-step funnel shell. Reuses the clip/field tokens from the
   shipped Quote Request (issue 03); the stepper, calendar, estimate and summary
   are ported from previews/booking-lab-2.html?v=funnel. All funnel rules are
   scoped under .quote so the generic class names (.steps/.pane/.cal/.summary…)
   never leak to the rest of the page. */
.quote {
  background: #f6f7f9;
  border-top: 1px solid rgba(0,23,51,.045);
  display: grid;
  /* Media column is ~40% but capped at 440px; the section height is driven by
     the funnel panel (align-items:stretch) so the clip never leaves dead space. */
  grid-template-columns: minmax(0, clamp(300px, 40%, 440px)) minmax(0, 1fr);
  align-items: stretch;
}
/* Left: real vertical clip, text spilling over the footage. */
.quote-media {
  position: relative;
  overflow: hidden;
  background: #080c0f;
  isolation: isolate;
  min-height: 100%;
}
.quote-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 68% 50%;
  z-index: 0;
}
.quote-media-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,.2) 76%, rgba(0,0,0,.52) 100%);
}
.quote-media-copy {
  position: absolute;
  z-index: 2;
  left: clamp(24px, 3vw, 44px);
  right: clamp(24px, 3vw, 44px);
  bottom: clamp(28px, 4vw, 48px);
  color: #fff;
  text-shadow: 0 3px 24px rgba(0,0,0,.42);
}
.quote-name {
  margin: 0;
  font-size: clamp(30px, 3.4vw, 42px);
  font-weight: 720;
  letter-spacing: -.04em;
  line-height: .98;
}
.quote-sub {
  margin: 8px 0 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
}
.quote-ig {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 16px;
  padding: 8px 13px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.28);
  color: #fff;
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 640;
  letter-spacing: -.01em;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: background .15s;
}
.quote-ig:hover { background: rgba(255,255,255,.2); }
.quote-ig:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(255,255,255,.55); }
.quote-ig svg { width: 15px; height: 15px; }
/* Right: white panel, vertically centered, generous padding. */
.quote-panel {
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(26px, 3vw, 44px) clamp(24px, 4vw, 56px);
}
/* The funnel column itself: capped + centered inside the panel. */
.bf-funnel { width: 100%; max-width: 560px; margin: 0 auto; }
/* Shared field tokens (B1 look), reused by every funnel step. */
.qf-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 1.4vw, 18px); }
.qf-field { display: grid; gap: 7px; min-width: 0; }
.qf-label {
  font-size: 13px;
  font-weight: 640;
  letter-spacing: -.01em;
  color: #1d2b40;
}
.qf-req { color: var(--blue); margin-left: 2px; }
/* B1 input styling: white bg, 1.5px border, 4px radius, brand-blue focus ring. */
.qf-input {
  width: 100%;
  background: #fff;
  border: 1.5px solid rgba(0,23,51,.2);
  border-radius: 4px;
  font: inherit;
  color: var(--ink);
  padding: 11px 13px;
  letter-spacing: -.01em;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.qf-input:focus {
  outline: none;
  border-color: #006fff;
  box-shadow: 0 0 0 3px rgba(0,111,255,.14);
}
.qf-input[aria-invalid="true"] {
  border-color: #d23b3b;
  box-shadow: 0 0 0 3px rgba(210,59,59,.13);
}
.qf-select {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%235e6b7d' stroke-width='1.6' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat; background-position: right 13px center; padding-right: 34px;
}
.qf-textarea { resize: vertical; min-height: 96px; line-height: 1.5; }
.qf-hint {
  margin: -2px 0 0;
  color: #697789;
  font-size: 12.5px;
  font-weight: 540;
  letter-spacing: -.005em;
}
.qf-error {
  margin: 0;
  min-height: 0;
  color: #c62f2f;
  font-size: 12.5px;
  font-weight: 560;
  letter-spacing: -.005em;
}
.qf-error:empty { display: none; }
.quote-success {
  max-width: 560px;
  background: #f3f9f5;
  border: 1.5px solid rgba(29,122,68,.4);
  border-radius: 4px;
  padding: clamp(24px, 3vw, 36px);
}
.quote-success-title {
  margin: 0 0 10px;
  color: #0f3d24;
  font-size: clamp(20px, 1.9vw, 26px);
  line-height: 1.1;
  letter-spacing: -.03em;
  font-weight: 680;
}
.quote-success-body { margin: 0; color: #3a5546; font-size: 15px; line-height: 1.56; letter-spacing: -.01em; }
.quote-success-body a { color: var(--blue); font-weight: 640; }

/* ---- Funnel: "wired later" placeholder badge ------------------------------ */
.quote .ph {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: #8a6d00; background: #fff6da; border: 1px dashed #e2b800; border-radius: 999px;
  padding: 3px 9px; white-space: nowrap; line-height: 1.1;
}
.quote .ph::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: #e2b800; flex: none; }
/* On the blue Reserve button the badge flips to a light-on-blue treatment. */
.quote .ph-on-blue { background: rgba(255,255,255,.18); color: #fff; border-color: rgba(255,255,255,.45); }
.quote .ph-on-blue::before { background: #fff; }

/* ---- Funnel: step progress indicator -------------------------------------- */
.quote .steps { display: flex; align-items: center; gap: 0; margin: 0 0 20px; padding: 0; }
.quote .stp { display: flex; align-items: center; flex: 1; }
.quote .stp:last-child { flex: none; }
.quote .num {
  width: 30px; height: 30px; flex: none; border-radius: 999px; display: grid; place-items: center;
  font-size: 13px; font-weight: 700; background: #fff; border: 1.5px solid rgba(0,23,51,.18);
  color: #8a96a6; transition: .2s;
}
.quote .lbl { font-size: 11.5px; font-weight: 640; color: #8a96a6; margin-left: 8px; white-space: nowrap; transition: .2s; }
.quote .bar { flex: 1; height: 2px; background: rgba(0,23,51,.12); margin: 0 9px; border-radius: 2px; min-width: 12px; }
.quote .stp.done .num, .quote .stp.cur .num { border-color: var(--blue); color: var(--blue); }
.quote .stp.cur .num, .quote .stp.done .num { background: var(--blue); color: #fff; }
.quote .stp.cur .lbl, .quote .stp.done .lbl { color: #1d2b40; }

/* ---- Funnel: animated step panes ------------------------------------------ */
/* All panes are stacked into a single grid cell, so the funnel always reserves
   the height of the TALLEST step (the calendar). Inactive panes are hidden with
   visibility (not display:none) so they still occupy the cell — the card height
   stays constant between steps instead of jumping. */
.quote .bf-panes { display: grid; }
.quote .pane {
  grid-area: 1 / 1;            /* stack every pane in the same cell */
  display: grid; gap: 16px;
  align-content: start;        /* content sits at the top; spare height falls below */
  visibility: hidden; opacity: 0; pointer-events: none;
}
.quote .pane.on {
  visibility: visible; opacity: 1; pointer-events: auto;
  animation: bf-slidein .34s cubic-bezier(.2,.7,.3,1);
}
.quote .pane:focus { outline: none; }
@keyframes bf-slidein { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
.quote .pane h3 { margin: 0 0 2px; font-size: 21px; font-weight: 640; letter-spacing: -.035em; color: #071321; }
.quote .psub { margin: -2px 0 4px; color: #697789; font-size: 14px; letter-spacing: -.01em; }

/* ---- Funnel: nav + buttons (scoped — never touch the global pill .cta) ----- */
.quote .nav { display: flex; justify-content: space-between; align-items: center; margin-top: 26px; gap: 12px; }
.quote .bf-cta {
  appearance: none; border: 0; background: var(--blue); color: #fff; font: inherit; font-weight: 640; font-size: 15px;
  padding: 13px 26px; border-radius: 4px; cursor: pointer; transition: background .15s, transform .15s;
  display: inline-flex; align-items: center; gap: 8px;
}
.quote .bf-cta:hover { background: var(--blue-dark); transform: translateY(-1px); }
.quote .bf-cta:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(255,255,255,.55), 0 0 0 5px rgba(0,111,255,.5); }
.quote .bf-cta:disabled { opacity: .6; cursor: progress; transform: none; }
.quote .bf-ghost {
  appearance: none; background: #fff; border: 1.5px solid rgba(0,23,51,.2); color: #1d2b40; font: inherit;
  font-weight: 620; font-size: 14px; padding: 12px 22px; border-radius: 4px; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.quote .bf-ghost:hover { border-color: rgba(0,23,51,.4); }
.quote .bf-ghost:focus-visible { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0,111,255,.14); }

/* ---- Funnel: running-estimate chip (early steps) -------------------------- */
.quote .estchip {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: #f4f8ff; border: 1px solid rgba(0,111,255,.2); border-radius: 6px; padding: 12px 15px; margin-top: 2px;
}
.quote .estchip .small { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #5e6b7d; }
.quote .estchip .note { font-size: 12px; color: #697789; margin-top: 3px; letter-spacing: -.005em; }
.quote .estchip .big { font-size: 22px; font-weight: 740; letter-spacing: -.03em; color: #071321; white-space: nowrap; }

/* ---- Funnel: availability ping (placeholder) ------------------------------ */
.quote .avail { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 12.5px; font-weight: 600; color: #697789; flex-wrap: wrap; }
.quote .avail:empty { display: none; }
.quote .avail .dot { width: 8px; height: 8px; border-radius: 999px; background: #e2b800; animation: bf-pulse 1.4s infinite ease-in-out; flex: none; }
@keyframes bf-pulse { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }

/* ---- Funnel: interactive calendar (placeholder availability) -------------- */
.quote .cal { user-select: none; }
.quote .cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.quote .cal-head .mname { font-size: 15px; font-weight: 680; letter-spacing: -.02em; }
.quote .cal-nav { display: flex; gap: 6px; }
.quote .cal-nav button {
  width: 30px; height: 30px; border-radius: 6px; border: 1.5px solid rgba(0,23,51,.16); background: #fff;
  cursor: pointer; font-size: 15px; color: #1d2b40; display: grid; place-items: center; line-height: 1;
}
.quote .cal-nav button:hover { border-color: var(--blue); color: var(--blue); }
.quote .cal-nav button:focus-visible { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0,111,255,.14); }
.quote .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.quote .cal-dow { font-size: 11px; font-weight: 700; color: #8a96a6; text-align: center; padding: 4px 0; letter-spacing: .04em; }
.quote .cal-day {
  /* Less squat than 1.5 so the month grid gets real vertical breathing room (it
     read "a tad too short" before); min-height keeps each day a comfortable tap
     target (≥44px) on narrow phones where the cells get wide and short. */
  aspect-ratio: 1.3; min-height: 44px; border: 1.5px solid transparent; border-radius: 6px; background: #f4f6f9; font: inherit;
  font-size: 13.5px; font-weight: 560; color: #1d2b40; cursor: pointer; display: grid; place-items: center;
  position: relative; transition: .12s;
}
.quote .cal-day:hover { border-color: var(--blue); background: #fff; }
.quote .cal-day:focus-visible { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0,111,255,.14); }
.quote .cal-day.empty { background: transparent; cursor: default; }
.quote .cal-day.booked { background: #fdeeee; color: #c98d8d; cursor: not-allowed; text-decoration: line-through; }
.quote .cal-day.booked:hover { border-color: transparent; background: #fdeeee; }
.quote .cal-day.sel { background: var(--blue); color: #fff; border-color: var(--blue); font-weight: 680; }
.quote .cal-day .mk { position: absolute; bottom: 5px; width: 4px; height: 4px; border-radius: 999px; }
.quote .cal-day.open .mk { background: #33b06a; }
.quote .cal-legend { display: flex; gap: 16px; margin-top: 14px; font-size: 12px; color: #697789; flex-wrap: wrap; align-items: center; }
.quote .cal-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.quote .cal-legend .lg-open i { background: #33b06a; }
.quote .cal-legend .lg-booked i { background: #fdeeee; border: 1px solid #e8c4c4; }
.quote .cal-legend .lg-sel i { background: var(--blue); }
.quote .datebanner {
  background: #f4f8ff; border: 1px solid rgba(0,111,255,.2); border-radius: 6px; padding: 11px 14px;
  font-size: 13px; font-weight: 600; color: #1d2b40; display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
}
.quote .datebanner.none { background: #fff6da; border-color: #e2b800; color: #8a6d00; }

/* ---- Funnel: Review booking summary --------------------------------------- */
.quote .summary { border: 1px solid rgba(0,23,51,.1); border-radius: 8px; overflow: hidden; }
.quote .summary .sh { background: #071321; color: #fff; padding: 15px 18px; }
.quote .summary .sh p { margin: 0; font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #8fb6ee; }
.quote .summary .sb { padding: 16px 18px; }
.quote .summary .meta { display: grid; gap: 0; margin-bottom: 8px; }
.quote .summary .ml { display: flex; justify-content: space-between; gap: 14px; font-size: 13px; padding: 6px 0; }
.quote .summary .ml span:first-child { color: #8a96a6; }
.quote .summary .ml b { font-weight: 620; color: #1d2b40; text-align: right; }
.quote .est-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 13.5px; padding: 8px 0; border-bottom: 1px solid rgba(0,23,51,.07); }
.quote .est-row span:first-child { color: #465366; }
.quote .est-row b { font-weight: 650; }
.quote .est-row.disc span, .quote .est-row.disc b { color: #1d7a44; }
.quote .grand { display: flex; justify-content: space-between; align-items: baseline; margin-top: 12px; padding-top: 14px; border-top: 1.5px solid rgba(0,23,51,.1); }
.quote .grand .lab { font-size: 13px; font-weight: 660; color: #465366; }
.quote .est-total { font-size: 30px; font-weight: 740; letter-spacing: -.04em; color: #071321; line-height: 1; }

/* ---- Funnel: single submit status region ---------------------------------- */
.quote .bf-status { margin: 14px 0 0; font-size: 13.5px; font-weight: 560; letter-spacing: -.01em; }
.quote .bf-status:empty { display: none; }
.quote .bf-status[data-tone="error"] { color: #c62f2f; }
.quote .bf-status[data-tone="success"] { color: #1d7a44; }

/* ---- Motion --------------------------------------------------------------- */
@keyframes drift { from { transform: scale(1.06) translate3d(-1.5%, 0, 0); } to { transform: scale(1.1) translate3d(1.5%, -1%, 0); } }

/* ---- Responsive ----------------------------------------------------------- */
@media (max-width: 640px) {
  :root { --nav-h: 58px; }
  .topbar { padding: 0 20px; }
  .brand { font-size: 22px; }
  .nav-phone { display: none; }
  .cta { min-width: 100px; padding: 11px 17px; }
  /* Trim from full-screen so the section below peeks above the fold (signals
     "scroll"); a dead full-height hero reads like a dead-end on a phone. */
  .hero { min-height: calc(90svh - var(--nav-h)); height: calc(90svh - var(--nav-h)); }
  .hero-video { object-position: 52% 56%; filter: saturate(.94) contrast(1.02) brightness(.9); }
  .hero-copy { left: 22px; right: 22px; bottom: 64px; max-width: none; }
  h1 { font-size: clamp(33px, 9vw, 44px); line-height: 1.12; max-width: 320px; }
  .subhead { font-size: 16px; max-width: 320px; margin-top: 16px; }
  .proof-badge { display: none; }
  .packages { padding: 66px 22px 78px; }
  .packages-head { grid-template-columns: 1fr; gap: 22px; margin-bottom: 36px; }
  .packages-eyebrow { margin-bottom: 14px; font-size: 11px; }
  .packages-title { font-size: clamp(32px, 9vw, 42px); letter-spacing: -.045em; }
  .packages-lede { max-width: none; font-size: 16px; }
  .package-grid { grid-template-columns: 1fr; gap: 14px; }
}

@media (min-width: 641px) and (max-width: 980px) {
  .package-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Funnel "Media Split" collapses to one column: a clip band on top, funnel below. */
@media (max-width: 840px) {
  .quote { grid-template-columns: 1fr; }
  .quote-media { min-height: 240px; }
  .quote-panel { padding: clamp(28px, 7vw, 44px) clamp(20px, 6vw, 36px); }
  .qf-row { grid-template-columns: 1fr; }
  .bf-funnel, .quote-success { max-width: none; }
}
/* Tight quarters: drop the step labels, keep the numbered circles + connectors.
   With the labels gone the steps no longer fill their flex space, so spread the
   four circles evenly across the full width (was bunching to the right) and let
   the connector bars stretch between them. */
/* Mobile: the panes normally stack in one grid cell (so the card width never
   jumps between steps on desktop). On a phone that makes step 1 reserve the
   TALLEST step's height (the calendar) → a huge empty void + a stranded
   Continue button. Un-stack: show only the active pane so the card sizes to
   the current step. */
@media (max-width: 640px) {
  .quote .bf-panes { display: block; }
  .quote .pane { grid-area: auto; }
  .quote .pane:not(.on) { display: none; }
}

@media (max-width: 700px) {
  .quote .lbl { display: none; }
  /* Circles size to content; the connector bars (flex:1) take all remaining
     space, which is what spreads the four circles evenly across the full width.
     justify-content:space-between is only a fallback for the (no-bar) edge case —
     with the bars growing there is no free space for it to distribute. */
  .quote .steps { width: 100%; justify-content: space-between; }
  .quote .stp { flex: 0 0 auto; }
  .quote .bar { flex: 1 1 auto; margin: 0 8px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .video-fallback { animation: none; }
  .pm-marquee { -webkit-mask-image: none; mask-image: none; }
  .pm-track { animation: none; width: 100%; flex-wrap: wrap; justify-content: center; }
  .pm-group:nth-child(2) { display: none; }   /* hide the loop duplicate */
  .pm-group { flex-wrap: wrap; justify-content: center; row-gap: 10px; }
  /* Hero montage: no autoplay, no hard-cutting — hide the clips and show a
     single still (hero-mix-1 poster) as the hero background instead. */
  .hero-clip { display: none; }
  .video-fallback {
    background: #080c0f url("hero-mix-1-poster.jpg") center / cover no-repeat;
    transform: none;
  }
  /* No autoplay for the booking reel; the cinematic band is already a static still. */
  .quote-video { display: none; }
  .quote-media {
    background: #080c0f url("xlr-reel-d-poster.jpg") center / cover no-repeat;
  }
  /* No motion: panes appear instantly; the availability ping stops pulsing. */
  .quote .pane.on { animation: none; }
  .quote .avail .dot { animation: none; }
}

/* ---- Footer ("Blue Card", omisdigital-style) ------------------------------ */
.site-footer {
  padding: clamp(20px, 3vw, 40px);
  margin-top: clamp(64px, 9vw, 120px);
}
.footer-card {
  position: relative;
  overflow: hidden;
  max-width: 1240px;
  margin: 0 auto;
  background: var(--blue);
  color: var(--white);
  border-radius: 28px;
  padding: clamp(30px, 4vw, 52px) clamp(24px, 4vw, 52px) clamp(26px, 3vw, 40px);
}
.footer-nav {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.footer-pill {
  background: var(--white);
  color: var(--ink);
  font-weight: 600;
  font-size: 14.5px;
  padding: 10px 18px;
  border-radius: 999px;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.footer-pill:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(0, 0, 0, .16); }
.footer-mark {
  position: relative;
  z-index: 1;
  margin: clamp(26px, 4vw, 48px) 0 0;
  width: calc(100% + clamp(80px, 12vw, 160px));
  max-width: none;
  font-weight: 800;
  letter-spacing: -.04em;
  font-size: clamp(72px, 16vw, 210px);
  line-height: .84;
  color: var(--white);
  white-space: nowrap;
  -webkit-mask-image: linear-gradient(90deg, #fff 64%, rgba(255, 255, 255, .22));
  mask-image: linear-gradient(90deg, #fff 64%, rgba(255, 255, 255, .22));
  user-select: none;
  pointer-events: none;
}
.footer-base {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
  margin-top: clamp(24px, 3vw, 36px);
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .22);
}
.footer-base a, .footer-base span { font-size: 13px; color: var(--white); overflow-wrap: anywhere; text-decoration: none; }
.footer-base a:hover { text-decoration: underline; }
.footer-sep { width: 3px; height: 3px; border-radius: 50%; background: rgba(255, 255, 255, .5); }
.footer-spacer { flex: 1 1 20px; }
.footer-privacy {
  position: relative;
  z-index: 2;
  margin: 16px 0 0;
  max-width: 560px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--white);
}

@media (max-width: 560px) {
  .footer-spacer { display: none; }
  .footer-base { gap: 6px 12px; }
  .footer-base a, .footer-base span { font-size: 12.5px; }
}

/* ---- Accessibility polish (issue #8) -------------------------------------- */
/* Visually hidden but available to screen readers (e.g. the trust strip list). */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Skip-to-content: visually hidden until keyboard-focused, then pinned top-left. */
.skip-link {
  position: absolute;
  left: 12px;
  top: -48px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--blue);
  color: var(--white);
  font-weight: 600;
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0, 23, 51, .25);
  transition: top .15s ease;
}
.skip-link:focus { top: 12px; outline: none; }
/* main is a focus target for the skip link but must not show a focus ring itself. */
main:focus { outline: none; }

/* Keyboard focus rings for interactive elements that lacked them. Mouse clicks
   stay clean (:focus-visible only fires for keyboard/AT). Custom rings already
   on form/package/calendar controls are left untouched. */
.brand:focus-visible,
.nav-phone:focus-visible,
.cta:focus-visible,
.ghost-call:focus-visible,
.packages-toggle:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 4px;
}
/* Focus ring — white on the blue card (a blue ring would be invisible there). */
.footer-pill:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 3px;
  border-radius: 999px;
}
.footer-base a:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 3px;
  border-radius: 4px;
}
.quote-success a:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: 3px;
}