/* ============================================================================
   NOVA — "Sound & Celebration" wedding DJ template
   Modern-luxury nightlife editorial: deep midnight ground, electric
   violet→magenta gradient accents, champagne serif flourishes.
   Fraunces (display) · Outfit (body). Fonts are <link>ed in the chrome +
   each page head. This file is the SINGLE source of tokens + chrome + the
   bespoke section styles. Booking is widget-only: every data-bookuble button
   opens the Bookuble widget, in the surface its data-bookuble-panel names
   — the ONLY inline storefront section is the inquiry form at #inquire.
   ============================================================================ */

:root {
  /* Ink + grounds */
  --ink: #F4F5FA;
  --ink-soft: #C3C7D8;
  --muted: #8B90A6;
  --bg: #0A0B10;           /* deep midnight page */
  --bg-2: #0E1018;         /* lighter band */
  --card: #131522;
  --dark: #07080C;         /* deepest panels */
  --dark-soft: #10121B;

  /* Electric + champagne */
  --vio: #8E6BFF;
  --vio-soft: #A78BFF;
  --pink: #FF4D8D;
  --champ: #E9CD9A;
  --champ-deep: #C8A968;
  --grad: linear-gradient(120deg, #7C5CFF, #FF4D8D);

  /* Lines + shadow */
  --line: #23263B;
  --line-2: #33375A;
  --shadow: 0 28px 70px -30px rgba(124, 92, 255, 0.45);
  --shadow-sm: 0 12px 34px -18px rgba(10, 11, 16, 0.9);

  /* Type */
  --serif: "Fraunces", "Georgia", serif;
  --sans: "Outfit", -apple-system, "Segoe UI", sans-serif;

  --radius: 10px;
  --radius-lg: 18px;
  --maxw: 1200px;
  --nav-h: 78px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Sticky footer: main grows so the footer pins to the bottom on short pages. */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
body > main { flex: 1 0 auto; }
.footer { flex-shrink: 0; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 480; line-height: 1.06; margin: 0; letter-spacing: 0; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 calc(28px * var(--gutter-scale, 1)); }
.eyebrow {
  font-family: var(--sans); font-weight: 500; font-size: 12px;
  letter-spacing: 0.34em; text-transform: uppercase; color: var(--champ);
}
.lede { font-size: 19px; color: var(--ink-soft); font-weight: 300; line-height: 1.75; }
.rule { width: 46px; height: 1px; background: var(--champ-deep); opacity: .8; }
/* Electric gradient text — the "poppin" flourish for key words. */
.zap { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Entrance animation — hidden at rest, revealed when the /embed/v1.js observer
   adds `.in` on scroll (it scans stylesheets for `.in` selectors and observes
   the base elements; it reveals everything immediately under reduced motion or
   when IntersectionObserver is missing). The old one-shot load animation that
   replaced this never animated on scroll and is gone — one mechanism, not two.
   The <noscript> fallback in each page's head covers JS-off. */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity calc(.9s * var(--dur-scale, 1)) cubic-bezier(.2,.7,.2,1), transform calc(.9s * var(--dur-scale, 1)) cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; } }

/* ── Buttons ──────────────────────────────────────────────────────────── */
.cta-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--sans); font-weight: 600; font-size: 13px;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 15px 34px; border-radius: 999px; cursor: pointer; border: 0;
  background: var(--grad);
  color: #FFF; box-shadow: 0 14px 34px -14px rgba(255, 77, 141, .55), 0 10px 30px -14px rgba(124, 92, 255, .6);
  transition: transform calc(.3s * var(--dur-scale, 1)) ease, box-shadow calc(.3s * var(--dur-scale, 1)) ease, filter calc(.3s * var(--dur-scale, 1)) ease;
}
.cta-btn:hover { transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 20px 44px -16px rgba(255, 77, 141, .6), 0 14px 40px -16px rgba(124, 92, 255, .65); }
.btn-ghost {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--sans); font-weight: 500; font-size: 13px;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 15px 32px; border-radius: 999px; cursor: pointer;
  background: rgba(244,245,250,.02); color: var(--ink); border: 1px solid var(--line-2);
  transition: border-color calc(.3s * var(--dur-scale, 1)) ease, color calc(.3s * var(--dur-scale, 1)) ease, background calc(.3s * var(--dur-scale, 1)) ease;
}
.btn-ghost:hover { border-color: var(--vio); color: var(--vio-soft); background: rgba(142,107,255,.06); }

/* ── Navbar (chrome contract) ─────────────────────────────────────────── */
.navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  height: var(--nav-h);
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: blur(16px) saturate(1.3);
  border-bottom: 1px solid transparent;
  transition: background calc(.4s * var(--dur-scale, 1)) ease, border-color calc(.4s * var(--dur-scale, 1)) ease, box-shadow calc(.4s * var(--dur-scale, 1)) ease;
}
.navbar.scrolled { background: color-mix(in srgb, var(--bg) 92%, transparent); border-bottom-color: var(--line); box-shadow: 0 10px 34px -22px rgba(0,0,0,.8); }
/* 3-col grid (brand | links | actions) with EQUAL minmax(0,1fr) side tracks so
   the centre nav is GEOMETRICALLY page-centred and cannot move when the header
   actions change width. They are composed on the server into
   [data-bookuble-actions], so they never arrive late — but a longer CTA label
   still must not move the links. (The old
   flex + margin-inline:auto only centred the links in the LEFTOVER space, so
   they sat off-centre and nudged whenever the right side changed.) The wide
   "sound & celebration" script that once overflowed a 1fr side track is no
   longer in the nav (brand-2 is empty); min-width:0 + overflow on the brand
   clips a long custom brand text instead of running under the centred links —
   same guard the ≤980 flex fallback already uses. */
.nav-inner { max-width: var(--maxw); margin: 0 auto; height: 100%; padding: 0 calc(28px * var(--gutter-scale, 1)); display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; gap: 24px; }
.nav-brand { display: inline-flex; align-items: center; gap: 12px; justify-self: start; min-width: 0; overflow: hidden; }
.nav-brand img { height: 40px; width: auto; }
.nav-wordmark { font-family: var(--sans); font-weight: 700; font-size: 22px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink); white-space: nowrap; }
.nav-wordmark .wm-soft { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: 0.02em; text-transform: none; color: var(--champ); }
.nav-links { display: inline-flex; align-items: center; gap: 34px; justify-self: center; }
.nav-link { font-family: var(--sans); font-weight: 400; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); position: relative; padding: 6px 0; transition: color calc(.3s * var(--dur-scale, 1)) ease; }
.nav-link::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px; background: var(--grad); border-radius: 2px; transition: right calc(.35s * var(--dur-scale, 1)) cubic-bezier(.2,.7,.2,1); }
.nav-link:hover { color: var(--ink); }
.nav-link:hover::after { right: 0; }
/* min-height reserves the populated row height so the bar never grows when the
   widget swaps the baked Book fallback for the hydrated CTA/account/cart. */
.nav-right { display: inline-flex; align-items: center; justify-content: flex-end; gap: 18px; justify-self: end; min-height: 44px; }
/* Squeeze tiers before the 980px mobile switch: shrink the wordmark, then
   drop its italic script half, so brand + links + Book never crowd. */
@media (max-width: 1240px) {
  .nav-wordmark { font-size: 18px; letter-spacing: 0.15em; }
  .nav-links { gap: 24px; }
}
/* Six links plus three composed header actions is the widest the bar ever
   gets. One more squeeze tier before the 980 mobile switch keeps them on one
   row instead of letting the centre track push into the actions. */
@media (max-width: 1140px) {
  .nav-links { gap: 17px; }
  .nav-link { font-size: 12px; letter-spacing: 0.1em; }
}
@media (max-width: 1090px) {
  .nav-wordmark .wm-soft { display: none; }
}
.nav-cta { padding: 12px 26px; }

.nav-toggle { display: none; align-items: center; background: none; border: 0; cursor: pointer; color: var(--ink); padding: 8px; }
.nav-toggle svg { width: 26px; height: 26px; }

/* ── Mobile menu — opened by CSS, not by a script ─────────────────────────
   nav.js used to add `.open` on click. It was deleted with the rest of the
   BookingXi runtime, which left a burger that did nothing on every page.
   The panel is a `:target` instead: the burger links to #mobilePanel, the
   scrim and the ✕ link back to #navbar, and tapping any link inside closes
   it for free — navigating moves the target off the panel.

   #navbar is the "close" href on purpose. It is position:fixed, so the
   browser has nothing to scroll to and the page does not jump. And the
   panel is `visibility:hidden` when shut, so its links are out of the tab
   order on desktop instead of lurking off-screen. Same rule as .reveal:
   nothing on this site may depend on JavaScript to be seen or reached. */
.mobile-overlay { position: fixed; inset: 0; background: rgba(4,5,9,.6); backdrop-filter: blur(4px); opacity: 0; pointer-events: none; transition: opacity calc(.35s * var(--dur-scale, 1)) ease; z-index: 55; }
body:has(.mobile-panel:target) .mobile-overlay { opacity: 1; pointer-events: auto; }
.mobile-panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(86vw, 380px); background: var(--bg-2); border-left: 1px solid var(--line); transform: translateX(100%); visibility: hidden; transition: transform calc(.45s * var(--dur-scale, 1)) cubic-bezier(.2,.7,.2,1), visibility calc(0s * var(--dur-scale, 1)) linear calc(.45s * var(--dur-scale, 1)); z-index: 56; padding: 92px 34px 40px; overflow-y: auto; }
.mobile-panel:target { transform: none; visibility: visible; transition: transform calc(.45s * var(--dur-scale, 1)) cubic-bezier(.2,.7,.2,1), visibility calc(0s * var(--dur-scale, 1)); }
.panel-close { position: absolute; top: 22px; right: 26px; display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-soft); }
.panel-close svg { width: 20px; height: 20px; }
.panel-close:hover { color: var(--ink); border-color: var(--vio); }
.panel-links { display: flex; flex-direction: column; gap: 8px; }
.mobile-link { font-family: var(--serif); font-size: 26px; font-weight: 460; color: var(--ink); padding: 10px 0; border-bottom: 1px solid var(--line); }
.mobile-link:hover { color: var(--vio-soft); }
.mobile-divider { height: 18px; }
.mobile-cta { margin-top: 14px; }
.mobile-meta { margin-top: 18px; display: block; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.mobile-meta:hover { color: var(--champ); }

/* ── Page shell ───────────────────────────────────────────────────────── */
.page-main { padding-top: var(--nav-h); }

/* ── HERO — midnight with drifting electric orbs ─────────────────────── */
.hero { position: relative; min-height: 100vh; display: grid; align-items: center; overflow: hidden; background: radial-gradient(120% 90% at 70% 0%, #12142A 0%, var(--bg) 55%); }
.hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .34; }
.hero__shade { position: absolute; inset: 0; background: linear-gradient(90deg, var(--bg) 10%, transparent 60%), linear-gradient(0deg, var(--bg) 6%, transparent 46%); }
.orb { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5; pointer-events: none; }
.orb--v { width: 480px; height: 480px; background: radial-gradient(circle, rgba(124,92,255,.55), transparent 65%); top: -120px; right: -80px; animation: orbdrift 14s ease-in-out infinite; }
.orb--p { width: 380px; height: 380px; background: radial-gradient(circle, rgba(255,77,141,.4), transparent 65%); bottom: -60px; left: 12%; animation: orbdrift 18s ease-in-out infinite reverse; }
@keyframes orbdrift { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-40px, 30px) scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .orb { animation: none; } }
.hero__inner { position: relative; max-width: var(--maxw); margin: 0 auto; padding: calc(var(--nav-h) + 40px) 28px 80px; width: 100%; }
.hero__logo { height: 64px; width: auto; margin-bottom: 26px; }
.hero__eyebrow { display: inline-flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.hero h1 { font-size: clamp(52px, 8.5vw, 112px); font-weight: 460; line-height: 0.98; letter-spacing: -0.015em; max-width: 12ch; }
.hero h1 em { font-style: italic; font-weight: 420; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero__sub { max-width: 48ch; margin: 30px 0 40px; font-size: 20px; color: var(--ink-soft); font-weight: 300; }
.hero__cta { display: flex; gap: 16px; flex-wrap: wrap; }
.hero__scroll { position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%); display: inline-flex; flex-direction: column; align-items: center; gap: 8px; font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--muted); }
.hero__scroll svg { width: 20px; height: 20px; animation: floaty 2.4s ease-in-out infinite; }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

/* ── Marquee strip — scrolling, champagne on near-black ──────────────── */
.strip { background: var(--dark); color: var(--champ); border-block: 1px solid var(--line); overflow: hidden; }
.strip__track { display: flex; width: max-content; animation: marquee 30s linear infinite; }
@media (prefers-reduced-motion: reduce) { .strip__track { animation: none; flex-wrap: wrap; } }
@keyframes marquee { to { transform: translateX(-50%); } }
.strip__inner { display: flex; align-items: center; gap: 26px; padding: 18px 13px; font-size: 12px; letter-spacing: .26em; text-transform: uppercase; white-space: nowrap; }
.strip__inner .dot { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.strip__inner b { color: #FFF; font-weight: 500; }

/* ── Section frame ────────────────────────────────────────────────────── */
.section { padding: calc(clamp(72px, 11vw, 140px) * var(--section-pad-scale, 1)) 0; }
.section--dark { background: var(--dark); }
.section--tint { background: var(--bg-2); }
.section-head { max-width: 660px; }
.section-head.center { margin: 0 auto; text-align: center; }
.section-head h2 { font-size: clamp(34px, 5.4vw, 62px); font-weight: 460; margin: 18px 0 0; }
.section-head h2 em { font-style: italic; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.section-head p { margin-top: 18px; }

/* ── Packages (bespoke cards, popup booking) ─────────────────────────── */
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 56px; }
.svc-card { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow-sm); transition: transform calc(.5s * var(--dur-scale, 1)) cubic-bezier(.2,.7,.2,1), box-shadow calc(.5s * var(--dur-scale, 1)) ease, border-color calc(.5s * var(--dur-scale, 1)) ease; }
.svc-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: var(--line-2); }
.svc-card--feat { border-color: rgba(142,107,255,.5); }
.svc-card--feat::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--grad); z-index: 1; }
.svc-card__media { aspect-ratio: 4/3; background: linear-gradient(135deg, #191B2E, #22172E); position: relative; overflow: hidden; }
.svc-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform calc(.8s * var(--dur-scale, 1)) ease; opacity: .92; }
.svc-card:hover .svc-card__media img { transform: scale(1.05); }
.svc-card__num { position: absolute; top: 16px; left: 18px; font-family: var(--sans); font-weight: 600; font-size: 13px; letter-spacing: .1em; color: #FFF; background: rgba(10,11,16,.55); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(6px); padding: 7px 13px; border-radius: 999px; }
.svc-card__tag { position: absolute; top: 16px; right: 18px; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #FFF; background: var(--grad); padding: 7px 13px; border-radius: 999px; }
.svc-card__body { padding: 30px 30px 34px; display: flex; flex-direction: column; flex: 1; }
.svc-card__name { font-size: 27px; font-weight: 480; }
.svc-card__meta { margin-top: 10px; display: flex; gap: 14px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.svc-card__meta .price { color: var(--champ); font-weight: 500; }
.svc-card__blurb { margin-top: 16px; color: var(--ink-soft); font-weight: 300; flex: 1; }
.svc-card__list { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 14.5px; color: var(--ink-soft); }
.svc-card__list li { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; }
.svc-card__list li::before { content: "✦"; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 11px; margin-top: 5px; }
.svc-card__book { margin-top: 26px; width: 100%; }
/* Details, under Book. Positioning only — the look is .btn-ghost, unchanged. */
.svc-card__more { margin-top: 12px; width: 100%; justify-content: center; text-decoration: none; }

/* ── The Experience / split feature (dark) ───────────────────────────── */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.split__media { position: relative; aspect-ratio: 4/5; border-radius: var(--radius-lg); overflow: hidden; background: linear-gradient(140deg, #191B2E, #22172E); box-shadow: var(--shadow); }
.split__media img { width: 100%; height: 100%; object-fit: cover; }
.split__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(200deg, rgba(124,92,255,.16), transparent 55%); }
.split__list { margin: 30px 0 0; padding: 0; list-style: none; display: grid; gap: 20px; }
.split__list li { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; padding-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,.09); }
.split__list .n { font-family: var(--serif); font-style: italic; font-size: 26px; color: var(--champ); line-height: 1; }
.split__list b { font-weight: 480; font-family: var(--serif); font-size: 22px; display: block; margin-bottom: 4px; color: var(--ink); }

/* ── Set-list / pricing rows ─────────────────────────────────────────── */
.menu { max-width: 820px; margin: 56px auto 0; display: grid; gap: 4px; }
.menu-row { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: baseline; padding: 22px 4px; border-bottom: 1px solid var(--line); }
.menu-row__name { font-family: var(--serif); font-size: 26px; font-weight: 480; }
.menu-row__desc { color: var(--muted); font-size: 15px; margin-top: 2px; }
.menu-row__price { font-family: var(--serif); font-size: 26px; color: var(--champ); white-space: nowrap; }
/* "Most added" ribbon on an add-on row — same gradient as the card tag. */
.menu-row__tag { display: inline-block; margin-left: 12px; vertical-align: 3px; font-family: var(--sans); font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #FFF; background: var(--grad); padding: 4px 10px; border-radius: 999px; }
.menu-note { max-width: 820px; margin: 30px auto 0; text-align: center; color: var(--muted); font-size: 15px; }

/* ── Testimonials ────────────────────────────────────────────────────── */
.testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 56px; }
.testi { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 34px 32px; box-shadow: var(--shadow-sm); }
.testi__stars { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: 3px; font-size: 14px; }
.testi__quote { font-family: var(--serif); font-size: 22px; font-style: italic; line-height: 1.5; margin: 18px 0 22px; color: var(--ink); }
.testi__by { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }

/* ── Inquiry section (#inquire — the ONE inline widget form) ─────────── */
.inquire { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 64px; align-items: start; margin-top: 26px; }
.inquire__points { margin: 26px 0 0; padding: 0; list-style: none; display: grid; gap: 16px; }
.inquire__points li { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; color: var(--ink-soft); }
.inquire__points li::before { content: "✦"; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 12px; margin-top: 6px; }
.inquire__form { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 10px; box-shadow: var(--shadow-sm); }
/* The card's inner panel. The 10px on .inquire__form is a frame; everything
   readable sits in here so the border reads as a mount around the content. */
.inquire__panel { border: 1px solid var(--line); border-radius: calc(var(--radius-lg) - 4px); background: linear-gradient(180deg, rgba(124,92,255,.07), transparent 55%); padding: 34px 30px 30px; }
.inquire__panel h3 { font-size: 27px; font-weight: 480; }
.inquire__panel > p { margin: 12px 0 0; color: var(--ink-soft); font-weight: 300; font-size: 15.5px; }
.inquire__steps { margin: 26px 0 0; padding: 0; list-style: none; display: grid; gap: 18px; counter-reset: step; }
.inquire__steps li { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; }
.inquire__steps li::before { counter-increment: step; content: "0" counter(step); font-family: var(--serif); font-style: italic; font-size: 20px; line-height: 1.2; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.inquire__steps b { display: block; font-family: var(--serif); font-size: 19px; font-weight: 480; color: var(--ink); }
.inquire__steps span { color: var(--ink-soft); font-size: 15px; font-weight: 300; }
.inquire__act { margin-top: 30px; display: grid; gap: 12px; }
.inquire__act .cta-btn, .inquire__act .btn-ghost { width: 100%; justify-content: center; }
.inquire__direct { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--line); display: grid; gap: 10px; font-size: 15px; color: var(--ink-soft); }
.inquire__direct a { display: inline-flex; align-items: center; gap: 10px; }
.inquire__direct a:hover { color: var(--champ); }
.inquire__direct .k { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }

/* ── Closing CTA band ────────────────────────────────────────────────── */
.cta-band { position: relative; overflow: hidden; text-align: center; background: radial-gradient(90% 130% at 50% 110%, #181A30 0%, var(--dark) 60%); padding: calc(clamp(80px, 12vw, 150px) * var(--section-pad-scale, 1)) 0; }
.cta-band .orb--v { top: auto; bottom: -180px; right: 8%; opacity: .38; }
.cta-band .orb--p { left: 4%; top: -120px; bottom: auto; opacity: .3; }
.cta-band h2 { font-size: clamp(38px, 6vw, 76px); font-weight: 460; position: relative; }
.cta-band h2 em { font-style: italic; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cta-band p { max-width: 46ch; margin: 22px auto 40px; color: var(--ink-soft); position: relative; }
.cta-band .cta-btn { position: relative; }

/* ── Bespoke footer ──────────────────────────────────────────────────── */
.footer { background: var(--dark); color: var(--ink-soft); padding: 80px 0 40px; border-top: 1px solid var(--line); }
.footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.1fr; gap: 44px; }
.footer__brand .fname { font-family: var(--sans); font-weight: 700; font-size: 26px; letter-spacing: .22em; text-transform: uppercase; color: #FFF; }
.footer__brand .fname em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: .02em; text-transform: none; color: var(--champ); }
.footer__brand p { margin-top: 16px; max-width: 34ch; color: var(--muted); font-weight: 300; }
.footer__col h4 { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--champ); margin-bottom: 18px; }
.footer__col a, .footer__col p, .footer__col address { display: block; color: var(--ink-soft); padding: 6px 0; font-weight: 300; font-style: normal; }
.footer__col a:hover { color: #FFF; }
.footer__col .hours { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; padding: 6px 0; font-weight: 300; }
.footer__col .hours dt { color: var(--muted); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }
.footer__col .hours dd { margin: 0; color: var(--ink-soft); }
/* Social row — 36px discs, gradient on hover, the same electric accent the
   buttons use. Labels stay in the markup for screen readers. */
.footer__social { display: flex; gap: 12px; margin-top: 24px; }
.footer__social a { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--ink-soft); transition: color calc(.3s * var(--dur-scale, 1)) ease, border-color calc(.3s * var(--dur-scale, 1)) ease, background calc(.3s * var(--dur-scale, 1)) ease, transform calc(.3s * var(--dur-scale, 1)) ease; }
.footer__social a:hover { color: #FFF; border-color: transparent; background: var(--grad); transform: translateY(-2px); }
.footer__social svg { width: 18px; height: 18px; }
.footer__social span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.footer__legal { margin-top: 56px; padding-top: 26px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.footer__legal a { color: var(--ink-soft); }
.footer__legal a:hover { color: #FFF; }
.footer__legal .sep { opacity: .45; margin: 0 8px; }
/* Four columns need more room than three did. This tier comes BEFORE the
   980 block on purpose — both match on a phone and the later single-column
   rule is the one that wins. */
@media (max-width: 1180px) { .footer__grid { grid-template-columns: 1fr 1fr; } }

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .nav-links { display: none; }
  /* With the center links display:none'd, grid auto-placement drops the
     remaining cells into the wrong tracks (burger mid-bar — .nav-inner has
     FOUR children, so a track pin can't fix it). Revert to flex: brand left,
     actions + burger right (same fix as luxespa/haunt/photographer).
     min-width:0 + overflow lets the wordmark clip instead of shoving the
     controls off-screen. */
  .nav-inner { display: flex; align-items: center; gap: 12px; }
  .nav-brand { margin-right: auto; min-width: 0; overflow: hidden; }
  .nav-toggle { display: inline-flex; flex: none; }
  .svc-grid, .testi-grid { grid-template-columns: 1fr; }
  .split, .inquire { grid-template-columns: 1fr; gap: 40px; }
  .footer__grid { grid-template-columns: 1fr; gap: 34px; }
}
/* Header-action responsive behaviour lives in lib/site/header.ts's skin
   for this template — one owner, so the bar cannot disagree with itself. */
@media (max-width: 560px) {
  body { font-size: 16px; }
  .wrap { padding: 0 20px; }
  /* Wordmark is wide + nowrap — shrink it so brand · Book · burger share a
     375px bar without clipping mid-word. */
  .nav-wordmark { font-size: 16px; letter-spacing: 0.16em; }
  .nav-brand img { height: 32px; }
  .menu-row { grid-template-columns: 1fr; }
}

/* ── Package detail page (experience.html · .xp-*) ───────────────────── */
.xp-wrap { max-width: 1120px; margin: 0 auto; padding: 48px 28px 100px; }
.xp-crumb { display: flex; gap: 10px; align-items: center; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 34px; }
.xp-crumb a:hover { color: var(--vio-soft); }
.xp-crumb span { opacity: .5; }
.xp-hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; margin-bottom: 72px; }
.xp-hero h1 { font-size: clamp(38px, 6vw, 66px); font-weight: 460; }
.xp-lead { margin-top: 18px; font-size: 19px; color: var(--ink-soft); font-weight: 300; }
.xp-specs { display: flex; gap: 34px; margin: 30px 0; flex-wrap: wrap; }
.xp-spec { display: grid; gap: 4px; }
.xp-spec .k { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.xp-spec .v { font-family: var(--serif); font-size: 24px; color: var(--champ); }
.xp-media { aspect-ratio: 4/3; border-radius: var(--radius-lg); background: linear-gradient(140deg, #191B2E, #22172E); background-size: cover; background-position: center; box-shadow: var(--shadow); }
.xp-layout { display: grid; grid-template-columns: 1fr 360px; gap: 56px; align-items: start; }
.xp-sec { margin-bottom: 52px; }
.xp-eyebrow { display: block; margin-bottom: 12px; }
.xp-sec h2 { font-size: clamp(26px, 3.6vw, 40px); font-weight: 460; }
.xp-desc { margin-top: 18px; color: var(--ink-soft); font-weight: 300; line-height: 1.85; }
.xp-desc p { margin: 0 0 1em; }
.xp-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 26px; }
.xp-info-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow-sm); }
.xp-info-card h4 { font-family: var(--serif); font-size: 21px; font-weight: 480; margin-bottom: 8px; }
.xp-info-card p { color: var(--ink-soft); font-weight: 300; font-size: 15px; }
.xp-bullets { display: grid; gap: 12px; margin-top: 24px; }
.xp-bullet { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; }
.xp-bullet::before { content: "✦"; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 13px; margin-top: 5px; }
.xp-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 26px; }
.xp-gallery__item { aspect-ratio: 1/1; border-radius: var(--radius); background: var(--dark-soft) center/cover; border: 1px solid var(--line); }
.xp-booking { position: sticky; top: calc(var(--nav-h) + 24px); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 30px; box-shadow: var(--shadow); }
.xp-booking__price { font-family: var(--serif); font-size: 42px; color: var(--champ); margin: 12px 0 6px; }
.xp-fee-note, .xp-fine { font-size: 12px; color: var(--muted); }
.xp-booking__specs { display: grid; gap: 12px; margin: 22px 0; }
.xp-booking__spec { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.xp-booking__spec .k { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.xp-booking__spec .v { font-family: var(--serif); font-size: 18px; }
.xp-book { width: 100%; margin-top: 8px; }
.xp-fine { margin-top: 14px; text-align: center; }
@media (max-width: 900px) { .xp-hero, .xp-layout, .xp-cards { grid-template-columns: 1fr; } .xp-booking { position: static; } }