/* ===========================================================================
   Bond's — "The Feed" design system
   One stylesheet for every page. Pages ship markup; this file ships the look.
   Tokens first, then layout, then components in the order a page uses them.
   =========================================================================== */

/* ── Type ────────────────────────────────────────────────────────────────
   Thunder is the brand display face; Inter carries everything else. Both are
   self-hosted. The fallbacks are metric-matched so nothing reflows when the
   real faces arrive. */
@font-face { font-family: 'Thunder'; src: url('fonts/Thunder-ExtraBoldLCItalic.woff2') format('woff2'); font-weight: 800; font-style: italic; font-display: swap; }
@font-face { font-family: 'Thunder'; src: url('fonts/Thunder-ExtraBoldLC.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Thunder'; src: url('fonts/Thunder-BlackLCItalic.woff2') format('woff2'); font-weight: 900; font-style: italic; font-display: swap; }
@font-face { font-family: 'Thunder'; src: url('fonts/Thunder-BoldLC.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Thunder Fallback'; src: local('Arial Narrow'), local('Arial'); size-adjust: 78%; ascent-override: 118%; descent-override: 26%; }
@font-face { font-family: 'Inter'; src: url('fonts/inter-var-latin.woff2') format('woff2'); font-weight: 400 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter Fallback'; src: local('Arial'); size-adjust: 107%; ascent-override: 90%; descent-override: 22%; }

:root {
  --bg: #f3f4f8; --card: #fff; --ink: #0d1230; --mute: #5a607a; --line: #e3e5ee;
  --blue: #1f45ff; --star: #ffb400; --ok: #0f8a5f;
  --grad: linear-gradient(100deg, #2b59ff 0%, #9b3cf4 52%, #ff4a5c 100%);
  --gutter: clamp(16px, 4.6vw, 44px); --maxw: 1260px; --hdr: 58px;
  --sheet-bg: #fff; --sheet-ink: var(--ink); --sheet-row: var(--bg);
  --r-lg: 22px; --r-md: 18px; --r-sm: 14px;

  /* Texture: a dot grid and a sparse keyhole motif, both barely there. They
     give the light grounds a surface without competing with the photography. */
  --tex-dots: radial-gradient(circle at 1px 1px, rgba(13, 18, 48, .05) 1px, transparent 0);
  --tex-keys: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='184' height='184' viewBox='0 0 184 184'%3E%3Cg fill='none' stroke='%230d1230' stroke-opacity='.038' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='34' cy='30' r='6'/%3E%3Cpath d='M34 37v8'/%3E%3Ccircle cx='126' cy='114' r='6'/%3E%3Cpath d='M126 121v8'/%3E%3C/g%3E%3C/svg%3E");
}
@media (min-width: 1024px) { :root { --hdr: 72px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }
body {
  margin: 0; color: var(--ink); font-family: 'Inter', 'Inter Fallback', system-ui, sans-serif; font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  background-color: var(--bg);
  background-image: var(--tex-keys), var(--tex-dots);
  background-size: 184px 184px, 26px 26px;
}
img, video { display: block; max-width: 100%; }
video { object-fit: cover; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd, fieldset { margin: 0; }
ul, ol { padding: 0; list-style: none; }
fieldset { border: 0; padding: 0; min-width: 0; }
[hidden] { display: none !important; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 10px; }

/* ── Layout ─────────────────────────────────────────────────────────────── */
.wrap { width: min(100%, var(--maxw)); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-narrow { width: min(100%, 760px); margin-inline: auto; padding-inline: var(--gutter); }
section { scroll-margin-top: calc(var(--hdr) + 10px); }
.sec { padding: clamp(52px, 8vw, 104px) 0; }
.sec.tight { padding: clamp(36px, 5vw, 64px) 0; }
.sec.white { background: var(--card); }
.sec.ink { background: var(--ink); color: #fff; }
.sec.ink .lede, .sec.ink .mute { color: rgba(255,255,255,.75); }
main > section.sec { content-visibility: auto; contain-intrinsic-size: auto 1000px; }
.display { font-family: 'Thunder', 'Thunder Fallback', Impact, sans-serif; font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: .005em; line-height: .9; }
.h1 { font-size: clamp(44px, 12vw, 84px); }
.h2 { font-size: clamp(38px, 9.5vw, 80px); }
.h3 { font-size: clamp(30px, 6.4vw, 48px); }
.lede { margin-top: 12px; font-size: clamp(16px, 2.2vw, 19px); color: var(--mute); max-width: 58ch; }
.mute { color: var(--mute); }
.sec-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 40px; margin-bottom: clamp(22px, 3vw, 36px); }
.sec-head > * { min-width: 0; }
.grid { display: grid; gap: 14px; }
.grid.g2 { grid-template-columns: 1fr; }
.grid.g3 { grid-template-columns: 1fr; }
.grid.g4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 720px) { .grid.g2 { grid-template-columns: repeat(2, 1fr); } .grid.g3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grid.g3 { grid-template-columns: repeat(3, 1fr); } .grid.g4 { grid-template-columns: repeat(4, 1fr); } .grid { gap: 18px; } }
.split { display: grid; gap: 28px; }
.split > * { min-width: 0; }
@media (min-width: 1024px) { .split { grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } .split.media-right > :first-child { order: 2; } .split.wide-left { grid-template-columns: 1.15fr 1fr; } }
[data-reveal].armed { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
[data-reveal].armed.in { opacity: 1; transform: none; }

/* ── Buttons ───────────────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 24px; border-radius: 999px; border: 0; font-weight: 700; font-size: 16px; text-decoration: none; white-space: nowrap; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
.btn:active { transform: scale(.97); }
.btn-grad { background: var(--grad); color: #fff; box-shadow: 0 10px 26px -12px rgba(111, 60, 244, .8); }
.btn-grad:hover { box-shadow: 0 14px 30px -12px rgba(111, 60, 244, .95); transform: translateY(-1px); }
.btn-line { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 2px var(--line); }
.btn-line:hover { box-shadow: inset 0 0 0 2px var(--ink); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #1a2150; }
.btn-white { background: #fff; color: var(--ink); }
.btn.sm { min-height: 42px; padding: 0 18px; font-size: 15px; }
.btn.lg { min-height: 58px; padding: 0 34px; font-size: 17px; }
.btn.full { width: 100%; }
.link { color: var(--blue); font-weight: 700; text-decoration: none; }
.link:hover { text-decoration: underline; }
.ico { width: 20px; height: 20px; flex: none; }
.cta-row { display: flex; flex-wrap: wrap; gap: 10px; }
.cta-row .btn-grad { flex: 1 1 auto; }
@media (min-width: 1024px) { .cta-row .btn-grad { flex: 0 0 auto; } }
.proof { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 14px; color: var(--mute); }
.proof b { color: var(--ink); }
.stars { color: var(--star); letter-spacing: 1px; }

/* ── Header ────────────────────────────────────────────────────────────── */
.hdr { position: sticky; top: 0; z-index: 50; height: var(--hdr); background: #fff; border-bottom: 1px solid transparent; transition: transform .28s ease, border-color .2s ease; }
.hdr.scrolled { border-color: var(--line); }
.hdr.tucked { transform: translateY(-100%); }
.hdr .wrap { height: 100%; display: flex; align-items: center; gap: 18px; }
.logo { flex: none; }
.logo img { height: 38px; width: auto; }
@media (min-width: 1024px) { .logo img { height: 46px; } }
.nav { display: none; gap: 2px; margin-inline: auto; }
.nav a { padding: 10px 11px; border-radius: 10px; font-size: 15px; font-weight: 600; text-decoration: none; color: var(--ink); white-space: nowrap; }
@media (max-width: 1299px) { .nav a { padding-inline: 9px; } }
.nav > a:hover { background: var(--bg); }
.nav a[aria-current="page"] { background: var(--bg); box-shadow: inset 0 -2px 0 var(--blue); }
.hdr-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.hdr-call { display: none; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; text-decoration: none; padding: 10px 12px; border: 0; background: none; }
.burger { width: 44px; height: 44px; border: 0; background: none; display: grid; place-items: center; margin-right: -8px; }
@media (min-width: 1180px) { .nav { display: flex; } .burger { display: none; } .hdr-actions { margin-left: 0; } .hdr-call { display: inline-flex; } }

/* Escape-rooms mega menu: the label is a real link, the chevron opens the
   panel (hover does too, on devices that can hover). The panel hangs from the
   header, centered, and lists every room grouped by location. */
.nav-item { display: flex; align-items: stretch; border-radius: 10px; }
.nav-item:hover, .nav-item.open { background: var(--bg); }
.nav-item.cur { background: var(--bg); box-shadow: inset 0 -2px 0 var(--blue); }
.nav-item > a { padding-right: 3px; }
.nav-item > a[aria-current="page"] { background: none; box-shadow: none; }
.nav-chev { border: 0; background: none; padding: 0 9px 0 2px; border-radius: 0 10px 10px 0; display: grid; place-items: center; color: var(--mute); }
.nav-chev svg { transition: transform .2s ease; }
.nav-item.open .nav-chev svg { transform: rotate(180deg); }
.mega { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); z-index: 51; width: min(880px, calc(100vw - 2 * var(--gutter))); max-height: calc(100vh - var(--hdr) - 16px); overflow: auto; padding: 18px 20px 16px; background: #fff; color: var(--ink); border-radius: 0 0 var(--r-lg) var(--r-lg); box-shadow: 0 30px 70px -30px rgba(13, 18, 48, .45), 0 0 0 1px var(--line); text-align: left; }
.mega-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 24px; }
/* Was an <h3>. The mega menu sits in the header, so four of these rendered
   before every page's <h1> — an outline where the nav outranked the page.
   Now a <p> with the same look; the id stays so aria-labelledby still names
   the column. */
.mega-col .mega-h { display: flex; align-items: baseline; gap: 8px; padding: 6px 8px 8px; font-size: 15px; font-weight: 800; }
.mega-col .mega-h small { font-size: 12.5px; font-weight: 500; color: var(--mute); }
.mega-col a { display: flex; align-items: center; gap: 11px; padding: 5px 8px; border-radius: 12px; text-decoration: none; }
.mega-col a:hover { background: var(--bg); }
.mega-col img { width: 40px; height: 40px; border-radius: 11px; object-fit: cover; flex: none; background: var(--bg); }
.mega-col b { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.25; }
.mega-col small { display: block; margin-top: 1px; font-size: 12.5px; color: var(--mute); }
.mega-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--line); }
.mega-foot p { font-size: 13.5px; color: var(--mute); }

.menu { position: fixed; inset: var(--hdr) 0 0; z-index: 49; background: #fff; padding: 12px var(--gutter) 32px; overflow: auto; }
.menu a:not(.btn) { display: block; padding: 13px 0; font-size: 21px; font-weight: 700; text-decoration: none; border-bottom: 1px solid var(--line); }
.menu .btn { width: 100%; margin-top: 20px; }
.menu .phones { margin-top: 18px; display: grid; gap: 6px; color: var(--mute); font-size: 15px; }
.menu .phones a { font-size: 15px; padding: 0; border: 0; font-weight: 600; color: var(--ink); display: inline; }
/* Escape Rooms in the mobile menu expands into every room, grouped by location. */
.menu-row { display: flex; align-items: center; border-bottom: 1px solid var(--line); }
.menu .menu-row a { flex: 1; border-bottom: 0; }
.menu-row button { width: 44px; height: 44px; margin-right: -10px; border: 0; background: none; display: grid; place-items: center; color: var(--mute); }
.menu-row button svg { transition: transform .2s ease; }
.menu-group.open .menu-row button svg { transform: rotate(180deg); }
.menu-sub { padding: 2px 0 10px 6px; border-bottom: 1px solid var(--line); }
.menu-sub .menu-h { padding: 14px 0 4px; font-size: 13.5px; font-weight: 700; color: var(--mute); }
.menu .menu-sub a { display: flex; align-items: center; gap: 12px; padding: 7px 0; font-size: 16px; font-weight: 600; border-bottom: 0; }
.menu-sub img { width: 38px; height: 38px; border-radius: 11px; object-fit: cover; flex: none; background: var(--bg); }
.menu-sub b { display: block; font-weight: 600; line-height: 1.25; }
.menu-sub small { display: block; font-size: 12.5px; font-weight: 500; color: var(--mute); }
.menu .menu-sub a.all { padding-top: 14px; color: var(--blue); }

/* ── Sticky actions + call sheet ───────────────────────────────────────── */
.sticky { position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.96); backdrop-filter: blur(10px); border-top: 1px solid var(--line); display: flex; gap: 8px; transform: translateY(110%); transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.sticky.show { transform: none; }
.sticky .btn { min-height: 50px; }
.sticky .btn-grad { flex: 1; }
.sticky .sq { flex: none; width: 50px; padding: 0; }
.sticky .second { flex: none; padding: 0 16px; }
/* The chat button is a fourth thing in a row built for three, and it is only
   there for visitors who have the assistant. So the squeeze is written against
   the button being shown, and the bar is untouched for everyone else. Below
   360px four will not fit beside the longest page labels ("How it works"), so
   the button stays out of the bar and the assistant floats its own launcher
   just above it instead. */
@media (min-width: 360px) and (max-width: 419px) {
  .sticky [data-chat]:not([hidden]) ~ .btn { padding: 0 12px; }
}
@media (min-width: 360px) and (max-width: 374px) {
  .sticky [data-chat]:not([hidden]) ~ .btn { font-size: 15px; }
  .sticky:has([data-chat]:not([hidden])) .sq { width: 46px; }
}
@media (max-width: 359px) {
  .sticky [data-chat] { display: none; }
  /* Three did not fit here either: beside "How it works" the booking button
     ran off the edge of a 320px screen. */
  .sticky .second, .sticky .btn-grad { padding: 0 12px; font-size: 15px; }
}
@media (min-width: 1024px) {
  .sticky { left: auto; right: 24px; bottom: 24px; padding: 8px; border-radius: 999px; border: 1px solid var(--line); box-shadow: 0 18px 40px -18px rgba(13,18,48,.35); transform: translateY(150%); }
  .sticky .btn-grad { flex: none; padding: 0 28px; }
}
.callsheet { position: fixed; inset: 0; z-index: 100; display: grid; place-items: end center; background: rgba(8, 10, 20, .45); opacity: 0; transition: opacity .2s ease; }
.callsheet.open { opacity: 1; }
.callsheet .panel { position: relative; width: min(100%, 460px); margin: 0 auto; padding: 22px 20px calc(22px + env(safe-area-inset-bottom)); border-radius: 22px 22px 0 0; background: var(--sheet-bg); color: var(--sheet-ink); transform: translateY(30px); transition: transform .25s cubic-bezier(.2,.7,.2,1); }
.callsheet.open .panel { transform: none; }
@media (min-width: 700px) { .callsheet { place-items: center; } .callsheet .panel { border-radius: 22px; } }
.callsheet h2 { font-size: 18px; font-weight: 750; margin-bottom: 4px; }
.callsheet p { font-size: 14px; opacity: .7; margin-bottom: 14px; }
.callsheet a.line2 { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: 14px; background: var(--sheet-row); text-decoration: none; margin-top: 8px; font-weight: 650; }
.callsheet a.line2 span { font-weight: 450; opacity: .7; font-size: 14px; }
.callsheet .x { position: absolute; right: 14px; top: 12px; border: 0; background: none; font-size: 26px; line-height: 1; padding: 6px 10px; }

/* ── Home hero deck: slides on a scroll-snap track ──────────────────────────
   The hero is a horizontal carousel. The track owns the height so the deck —
   slides plus the control row — is exactly one mobile viewport tall.

   Nothing here touches vertical scrolling. The track is a scroll container on
   the x axis only: no `touch-action` lock, and `overscroll-behavior` is set on
   x alone, so a finger dragged down the hero or a wheel over it scrolls the
   page as usual and only a sideways drag moves the deck. */
.deck { --deck-ctl: 46px; position: relative; background: var(--ink); }
.deck-track {
  display: flex; height: calc(100svh - var(--hdr) - var(--deck-ctl)); min-height: 440px; max-height: 940px;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain;
  scrollbar-width: none; -ms-overflow-style: none;
}
.deck-track::-webkit-scrollbar { width: 0; height: 0; display: none; }
@media (prefers-reduced-motion: reduce) { .deck-track { scroll-behavior: auto; } }
.deck-slide { flex: 0 0 100%; width: 100%; min-width: 0; display: flex; flex-direction: column; scroll-snap-align: start; scroll-snap-stop: always; }
.deck-slide > * { flex: 1; min-height: 0; }

/* On phones the control row sits under the track rather than over the slides:
   it is part of the hero's height, it never covers a call to action, and it
   reads as the top of the white band that follows. On desktop it becomes a
   small solid pill floating over the hero, so the first slide keeps exactly
   the proportions it has today. */
.deck-ctl { display: flex; align-items: center; justify-content: center; gap: 4px; height: var(--deck-ctl); background: #fff; }
.deck-arrow { width: 40px; height: 40px; border: 0; padding: 0; border-radius: 50%; background: none; color: var(--mute); display: grid; place-items: center; }
.deck-arrow:hover { background: var(--bg); color: var(--ink); }
.deck-dots { display: flex; align-items: center; gap: 2px; }
.deck-dot { width: 30px; height: 40px; border: 0; padding: 0; background: none; display: grid; place-items: center; }
.deck-dot > span[aria-hidden] { width: 8px; height: 8px; border-radius: 999px; background: rgba(13, 18, 48, .24); transition: width .22s ease, background .22s ease; }
.deck-dot:hover > span[aria-hidden] { background: rgba(13, 18, 48, .45); }
.deck-dot[aria-selected="true"] > span[aria-hidden] { width: 24px; background: var(--ink); }
@media (min-width: 1024px) {
  .deck { --deck-ctl: 0px; }
  .deck-track { min-height: 640px; max-height: 900px; }
  .deck-ctl { position: absolute; z-index: 5; left: 0; right: 0; bottom: 20px; width: fit-content; height: auto; margin-inline: auto; padding: 5px 8px; border-radius: 999px; background: rgba(255, 255, 255, .96); backdrop-filter: blur(10px); box-shadow: 0 18px 40px -18px rgba(13, 18, 48, .45); }
}

/* ── Hero slide 1: Stories player + solid sheet ─────────────────────────── */
.hero { position: relative; height: 100%; display: grid; grid-template-rows: minmax(170px, 1fr) auto; background: var(--ink); }
.hero > * { min-width: 0; }
.stage { position: relative; min-height: 0; }
.stories { position: relative; overflow: hidden; background: #0b0e1f; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.stage > .stories { position: absolute; inset: 0; }
.st-media, .st-media > img, .st-media > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Clips sit 2px inside the poster so a clip can never out-measure it and
   become a late LCP candidate; the poster stays the page's largest paint. */
.st-media > video { inset: 2px; width: calc(100% - 4px); height: calc(100% - 4px); opacity: 0; transition: opacity .12s linear; }
.st-media > video.on { opacity: 1; }
.bars { position: absolute; z-index: 3; top: 10px; left: 10px; right: 10px; display: flex; gap: 4px; }
.bars span { flex: 1; height: 3px; border-radius: 3px; background: rgba(255,255,255,.42); overflow: hidden; }
.bars i { display: block; height: 100%; background: #fff; transform-origin: left; transform: scaleX(0); }
.st-cap { position: absolute; z-index: 3; left: 12px; bottom: 36px; display: inline-flex; align-items: center; gap: 10px; max-width: calc(100% - 24px); padding: 8px 14px 8px 8px; border-radius: 999px; background: #fff; color: var(--ink); text-decoration: none; box-shadow: 0 6px 20px rgba(0,0,0,.18); }
.st-cap img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.st-cap b { font-size: 14px; }
.st-cap span { font-size: 13px; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-tap { position: absolute; z-index: 2; top: 0; bottom: 0; border: 0; background: transparent; padding: 0; }
.st-tap.prev { left: 0; width: 32%; } .st-tap.next { right: 0; width: 68%; }
.st-tap:focus-visible { outline-offset: -6px; }
/* The sheet the words sit on: solid white, with a hairline of brand colour at
   the seam. On phones it is the bottom of the hero; on desktop it becomes a
   card floating over the hero film. */
.sheet { position: relative; z-index: 4; margin-top: -22px; padding: 22px var(--gutter) 20px; border-radius: 22px 22px 0 0; background-color: #fff; }
.sheet::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--grad); opacity: .9; }
.hero h1 { display: grid; gap: 10px; }
.hero h1 .display { font-size: clamp(44px, 14vw, 76px); color: var(--ink); }
.hero h1 .sub { font-size: clamp(15px, 4vw, 18px); line-height: 1.4; font-weight: 500; color: var(--mute); max-width: 34ch; }
.side-cards { display: none; }
/* The hero ground on desktop: one still of the venue with a light ink tint
   (--hero-tint) so the white card and the story frame read against it. Only
   the story frame moves. Phones never load it: the stage covers the hero. */
.hero-bg { display: none; }
@media (min-width: 1024px) {
  .hero { --hero-tint: .2; height: 100%; grid-template-rows: none; grid-template-columns: minmax(440px, 48%) 1fr; background: #0b0e1f; overflow: hidden; }
  .hero-bg { display: block; position: absolute; inset: 0; z-index: 0; }
  .hero-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .hero-bg::after { content: ''; position: absolute; inset: 0; background: rgba(11, 14, 31, var(--hero-tint)); }
  .sheet { order: -1; z-index: 3; align-self: center; margin: 0 20px 0 max(var(--gutter), (100vw - var(--maxw)) / 2 + var(--gutter)); border-radius: 26px; display: flex; flex-direction: column; justify-content: center; padding: 40px 36px 36px; background-color: #fff; box-shadow: 0 30px 70px -30px rgba(13, 18, 48, .55); }
  .sheet::before { display: none; }
  .hero h1 .display { font-size: clamp(56px, 5.5vw, 82px); }
  .hero h1 .sub { font-size: 19px; max-width: 30ch; }
  .stage { position: relative; z-index: 1; display: grid; place-items: center; padding: 28px 0; }
  .stage > .stories { position: relative; inset: auto; height: 100%; aspect-ratio: 9 / 16; border-radius: 26px; box-shadow: 0 30px 60px -30px rgba(13, 18, 48, .55); z-index: 2; }
  .side-cards { display: block; position: absolute; inset: 0; pointer-events: none; }
  .side-cards button { pointer-events: auto; position: absolute; top: 50%; height: 74%; aspect-ratio: 9 / 16; border: 0; padding: 0; border-radius: 22px; overflow: hidden; background: #0b0e1f; box-shadow: 0 20px 44px -26px rgba(13,18,48,.5); transition: transform .3s ease; }
  .side-cards button img { width: 100%; height: 100%; object-fit: cover; }
  .side-cards .l { left: calc(50% - 4%); transform: translate(calc(-50% - 56%), -50%) rotate(-4deg); }
  .side-cards .r { left: calc(50% + 4%); transform: translate(calc(-50% + 56%), -50%) rotate(4deg); }
  .side-cards .l:hover { transform: translate(calc(-50% - 58%), -50%) rotate(-5deg); }
  .side-cards .r:hover { transform: translate(calc(-50% + 58%), -50%) rotate(5deg); }
  .st-cap { bottom: 18px; }
}
@media (min-width: 1440px) { .side-cards .l { left: calc(50% - 7%); } .side-cards .r { left: calc(50% + 7%); } }

/* ── Hero slide: full-bleed film + a solid card ─────────────────────────────
   The clip covers the whole slide at full brightness — no tint, no gradient
   wash. The words never sit on the footage: they sit on a white card over it,
   which is what keeps them legible. The poster <img> underneath means the
   slide shows the photograph whenever the film is paused, blocked or
   suppressed by reduced motion. */
.vhero { position: relative; display: flex; align-items: flex-end; overflow: hidden; background: #0b0e1f; }
.vhero-media { position: absolute; inset: 0; z-index: 0; }
.vhero-media > img, .vhero-media > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vhero-media > video { opacity: 0; transition: opacity .8s ease; }
.vhero-media > video.is-playing { opacity: 1; }
.vhero-card { position: relative; z-index: 2; width: min(560px, calc(100% - 24px)); margin: 12px; padding: 20px 20px 18px; border-radius: var(--r-lg); background-color: #fff; box-shadow: 0 26px 60px -26px rgba(13, 18, 48, .75); }
.vh-title { display: grid; gap: 10px; }
.vh-title .display { font-size: clamp(40px, 12.5vw, 68px); color: var(--ink); }
.vh-title .sub { font-size: clamp(15px, 4vw, 18px); line-height: 1.4; font-weight: 500; color: var(--mute); max-width: 34ch; }
@media (min-width: 1024px) {
  .vhero { align-items: center; }
  .vhero-card { width: min(520px, 46%); margin: 0 0 0 max(var(--gutter), (100vw - var(--maxw)) / 2 + var(--gutter)); padding: 38px 34px 32px; border-radius: 26px; }
  .vh-title .display { font-size: clamp(48px, 4.2vw, 64px); }
  .vh-title .sub { font-size: 19px; max-width: 30ch; }
}

/* ── Interior page hero: media + a solid card that holds the words ─────── */
.phero { position: relative; background: var(--ink); }
.phero .ph-media { position: relative; height: clamp(230px, 42svh, 420px); overflow: hidden; background: #0b0e1f; }
.phero .ph-media > img, .phero .ph-media > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.phero .ph-media > video { opacity: 0; transition: opacity .8s ease; }
.phero .ph-media > video.is-playing { opacity: 1; }
.phero .ph-tag { position: absolute; z-index: 2; left: 12px; top: 12px; display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border-radius: 999px; background: #fff; font-size: 13px; font-weight: 700; }
.phero .ph-card { position: relative; z-index: 3; margin-top: -26px; padding: 24px var(--gutter) 22px; border-radius: 24px 24px 0 0; background-color: #fff;
  background-image: radial-gradient(120% 90% at 8% 0%, rgba(43, 89, 255, .07) 0%, rgba(43, 89, 255, 0) 58%), var(--tex-keys), var(--tex-dots);
  background-size: auto, 184px 184px, 26px 26px; }
.phero .ph-card::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--grad); opacity: .9; }
.phero h1 { display: grid; gap: 10px; }
.phero h1 .display { font-size: clamp(40px, 11.5vw, 72px); }
.phero h1 .sub { font-size: clamp(15px, 4vw, 18px); line-height: 1.45; font-weight: 500; color: var(--mute); max-width: 46ch; }
.phero .facts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.phero .facts span { padding: 7px 12px; border-radius: 999px; background: var(--bg); font-size: 13.5px; font-weight: 700; }
@media (min-width: 1024px) {
  .phero { display: grid; grid-template-columns: minmax(420px, 46%) 1fr; align-items: stretch; background: transparent; min-height: min(74svh, 720px); }
  .phero .ph-media { order: 2; height: auto; min-height: 100%; margin: 18px max(var(--gutter), (100vw - var(--maxw)) / 2) 18px 0; border-radius: 26px; }
  .phero .ph-card { margin: 0; border-radius: 0; display: flex; flex-direction: column; justify-content: center; padding: 44px 44px 44px max(var(--gutter), (100vw - var(--maxw)) / 2 + var(--gutter)); background-color: transparent;
    background-image: radial-gradient(80% 70% at 14% 34%, rgba(43, 89, 255, .09) 0%, rgba(43, 89, 255, 0) 62%), var(--tex-keys), var(--tex-dots); }
  .phero .ph-card::before { display: none; }
  .phero h1 .display { font-size: clamp(56px, 5.6vw, 86px); }
  .phero h1 .sub { font-size: 19px; }
}
/* Short hero for utility pages: no media, just the card on the textured ground */
.thero { padding: clamp(26px, 5vw, 56px) 0 clamp(18px, 3vw, 30px); }
.thero h1 .display { font-size: clamp(40px, 10vw, 72px); }
.thero h1 .sub { display: block; margin-top: 10px; font-size: clamp(15px, 2.4vw, 18px); color: var(--mute); font-weight: 500; max-width: 60ch; }
.crumbs { display: flex; flex-wrap: wrap; gap: 6px; font-size: 13.5px; color: var(--mute); margin-bottom: 12px; }
.crumbs a { text-decoration: none; font-weight: 650; }
.crumbs a:hover { text-decoration: underline; }

/* ── Rails, reels, story circles ───────────────────────────────────────── */
.rail { display: flex; gap: var(--rail-gap, 14px); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 4px var(--gutter) 18px; scroll-padding-inline: var(--gutter); }
.rail::-webkit-scrollbar { display: none; }
.rail > * { flex: 0 0 auto; scroll-snap-align: start; }
@media (min-width: 1024px) { .rail.inset { padding-inline: max(var(--gutter), (100vw - var(--maxw)) / 2 + var(--gutter)); scroll-padding-inline: max(var(--gutter), (100vw - var(--maxw)) / 2 + var(--gutter)); } }
.arrows { display: none; gap: 8px; }
.arrows button { width: 48px; height: 48px; border-radius: 50%; border: 0; background: #fff; box-shadow: inset 0 0 0 2px var(--line); display: grid; place-items: center; }
.arrows button:hover { box-shadow: inset 0 0 0 2px var(--ink); }
@media (min-width: 1024px) { .arrows { display: flex; } }

.reels { --rail-gap: 14px; }
.reel { width: min(76vw, 300px); scroll-snap-align: center; }
.reel-frame { position: relative; aspect-ratio: 9 / 16; border-radius: var(--r-lg); overflow: hidden; background: #0b0e1f; }
.reel-frame video, .reel-frame img { width: 100%; height: 100%; object-fit: cover; }
.reel-tag { position: absolute; top: 12px; left: 12px; padding: 6px 11px; border-radius: 999px; background: #fff; font-size: 12.5px; font-weight: 700; }
.reel-cap { position: absolute; left: 10px; right: 10px; bottom: 10px; padding: 14px; border-radius: var(--r-sm); background: #fff; }
.reel-cap h3 { font-size: 19px; font-weight: 800; letter-spacing: -.01em; }
.reel-cap p { font-size: 14px; color: var(--mute); margin-top: 3px; line-height: 1.4; }
.reel-cap .meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
.reel-cap .price { font-size: 14px; font-weight: 700; }
.reel-cap .price small { font-weight: 500; color: var(--mute); font-size: 13px; }
.reel-end { width: min(76vw, 300px); aspect-ratio: 9 / 16; border-radius: var(--r-lg); background: var(--ink); color: #fff; padding: 26px 22px; display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; scroll-snap-align: center; }
.reel-end .display { font-size: 48px; }
.reel-end p { color: rgba(255,255,255,.78); font-size: 15px; }
.reel-end .deal { padding: 12px 14px; border-radius: var(--r-sm); background: rgba(255,255,255,.1); font-size: 14px; }
.heart { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.heart svg { width: 96px; height: 96px; fill: #fff; filter: drop-shadow(0 6px 16px rgba(0,0,0,.35)); animation: pop .8s ease forwards; }
@keyframes pop { 0% { transform: scale(.2); opacity: 0; } 20% { transform: scale(1.1); opacity: 1; } 60% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.3) translateY(-30px); opacity: 0; } }
/* Desktop: the four reels sit in the page column, capped at phone-card size,
   so they never balloon on wide screens. */
@media (min-width: 1100px) { .reels.rail { display: grid; grid-template-columns: repeat(4, minmax(0, 270px)); justify-content: center; gap: 18px; overflow: visible; width: min(100%, var(--maxw)); margin-inline: auto; padding-inline: var(--gutter); } .reel, .reel-end { width: auto; } }

.highlights { background: #fff; border-bottom: 1px solid var(--line); }
.highlights .rail { --rail-gap: 16px; padding-top: 16px; padding-bottom: 14px; }
.hl { display: grid; justify-items: center; gap: 6px; width: 76px; text-decoration: none; border: 0; background: none; padding: 0; }
.hl .ring { width: 72px; height: 72px; border-radius: 50%; padding: 3px; background: var(--grad); }
.hl .ring.seen { background: var(--line); }
.hl .ring img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 3px solid #fff; }
.hl span:last-child { font-size: 12.5px; font-weight: 600; line-height: 1.2; text-align: center; }
@media (min-width: 1024px) { .highlights .rail { justify-content: center; } .hl { width: 88px; } .hl .ring { width: 80px; height: 80px; } }

/* ── Cards ─────────────────────────────────────────────────────────────── */
.card { background: #fff; border-radius: var(--r-lg); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; display: flex; flex-direction: column; }
.card .body { padding: 18px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.card h3 { font-size: 20px; font-weight: 800; letter-spacing: -.01em; }
.card p { font-size: 15px; color: var(--mute); }
.card .acts { margin-top: auto; padding-top: 6px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ph { position: relative; overflow: hidden; background: #dfe2ec; }
.ph > img, .ph > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ph.r169 { aspect-ratio: 16 / 9; } .ph.r45 { aspect-ratio: 4 / 5; } .ph.r11 { aspect-ratio: 1 / 1; } .ph.r32 { aspect-ratio: 3 / 2; }
.tagline { position: absolute; top: 10px; left: 10px; padding: 5px 10px; border-radius: 999px; background: #fff; font-size: 12px; font-weight: 700; z-index: 1; }
.chiprow { display: flex; flex-wrap: wrap; gap: 6px; }
.chiprow span { padding: 6px 10px; border-radius: 999px; background: var(--bg); font-size: 13px; font-weight: 700; }

/* Room cards (rail + grid) */
.room { width: min(64vw, 250px); text-decoration: none; display: block; }
.room .ph { aspect-ratio: 4 / 5; border-radius: var(--r-md); }
.room .ph img { transition: transform .5s ease; }
.room:hover .ph img { transform: scale(1.04); }
.room .loc { position: absolute; top: 10px; left: 10px; padding: 5px 10px; border-radius: 999px; background: #fff; font-size: 12px; font-weight: 700; }
.room h3 { margin-top: 10px; font-size: 16.5px; font-weight: 750; letter-spacing: -.01em; line-height: 1.25; }
.room p { font-size: 13.5px; color: var(--mute); margin-top: 2px; }
.rooms-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.rooms-grid .room { width: auto; }
@media (min-width: 700px) { .rooms-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .rooms-grid { grid-template-columns: repeat(4, 1fr); gap: 18px; } }
@media (min-width: 1024px) { .rooms-rail .room { width: 250px; } }

/* Filter chips */
.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 0 var(--gutter) 14px; margin-inline: calc(var(--gutter) * -1); }
.chips::-webkit-scrollbar { display: none; }
.chips button { flex: none; border: 0; padding: 10px 16px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--line); font-weight: 650; font-size: 14.5px; }
.chips button[aria-pressed="true"] { background: var(--ink); color: #fff; box-shadow: none; }

/* Tabs */
.seg { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--bg); gap: 2px; }
.seg [role="tab"] { border: 0; background: none; padding: 10px 16px; border-radius: 999px; font-weight: 700; font-size: 14.5px; color: var(--mute); }
.seg [role="tab"][aria-selected="true"] { background: #fff; color: var(--ink); box-shadow: 0 2px 8px rgba(13,18,48,.12); }

/* Included / feature tiles */
.incl { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.incl li { padding: 14px; border-radius: var(--r-sm); background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.incl img.e { width: 40px; height: 40px; display: block; margin-bottom: 10px; }
.incl b { display: block; font-size: 15px; }
.incl span { font-size: 13.5px; color: var(--mute); line-height: 1.35; display: block; margin-top: 2px; }

/* Price strip */
.price-strip { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: baseline; margin: 20px 0 6px; }
.price-strip .big { font-family: 'Thunder', 'Thunder Fallback', Impact, sans-serif; font-weight: 800; font-style: italic; font-size: 64px; line-height: .9; }
.price-strip .per { font-weight: 700; }
.price-strip small { color: var(--mute); font-size: 14px; }

/* Numbered steps */
.steps { display: grid; gap: 12px; counter-reset: step; }
.steps li { position: relative; display: grid; grid-template-columns: 42px 1fr; gap: 14px; align-items: start; padding: 16px; border-radius: var(--r-md); background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.steps li::before { counter-increment: step; content: counter(step); display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--ink); color: #fff; font-family: 'Thunder', 'Thunder Fallback', Impact, sans-serif; font-weight: 800; font-size: 24px; }
.steps b { display: block; font-size: 16.5px; }
.steps span { color: var(--mute); font-size: 14.5px; }
@media (min-width: 900px) { .steps.row { grid-template-columns: repeat(3, 1fr); } }

/* Spec list (room / experience details) */
.specs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border-radius: var(--r-md); overflow: hidden; }
.specs div { background: #fff; padding: 14px 16px; }
.specs b { display: block; font-size: 17px; }
.specs small { color: var(--mute); font-size: 12.5px; }
@media (min-width: 700px) { .specs { grid-template-columns: repeat(4, 1fr); } }

/* Quote cards / review posts */
.quote-card { padding: 18px; border-radius: var(--r-md); background: var(--bg); }
.quote-card q { display: block; font-size: 15.5px; line-height: 1.5; quotes: none; }
.quote-card cite { display: block; margin-top: 8px; font-style: normal; font-size: 13.5px; color: var(--mute); }
.sec.ink .quote-card { background: rgba(255,255,255,.07); }
.sec.ink .quote-card cite { color: rgba(255,255,255,.6); }
.post { width: min(84vw, 360px); padding: 18px; border-radius: var(--r-lg); background: #fff; box-shadow: inset 0 0 0 1px var(--line); display: flex; flex-direction: column; gap: 12px; }
.post header { display: flex; align-items: center; gap: 10px; }
.post .av { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff; background: var(--ink); flex: none; }
.post header b { display: block; font-size: 15px; }
.post header small { color: var(--mute); font-size: 13px; }
.post header .pf { margin-left: auto; font-size: 18px; color: var(--mute); }
.post q { quotes: none; font-size: 15.5px; line-height: 1.5; }
.post .tag { align-self: flex-start; margin-top: auto; padding: 5px 10px; border-radius: 999px; background: var(--bg); font-size: 12.5px; font-weight: 700; }

/* Platform ratings */
.pf { display: inline-block; width: 1.1em; height: 1.1em; background: currentColor; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; vertical-align: -0.16em; }
.pf-google { --m: url('img/pf-google.png'); }
.pf-tripadvisor { --m: url('img/pf-tripadvisor.png'); width: 1.45em; }
.pf-facebook { --m: url('img/pf-facebook.png'); }
.pf-yelp { --m: url('img/pf-yelp.png'); }
.platforms { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.platforms a { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--r-sm); background: #fff; text-decoration: none; box-shadow: inset 0 0 0 1px var(--line); }
.platforms .pf { font-size: 26px; color: var(--ink); }
.platforms b { font-size: 22px; font-weight: 800; }
.platforms small { display: block; font-size: 12.5px; color: var(--mute); }
@media (min-width: 900px) { .platforms { grid-template-columns: repeat(4, 1fr); } }

/* Film (poster + play, loads on tap) */
.film { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-lg); overflow: hidden; background: #0b0e1f; }
.film > img, .film > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.film > iframe, .film > div { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.film button { position: absolute; inset: 0; width: 100%; border: 0; background: transparent; display: flex; align-items: flex-end; justify-content: flex-start; padding: 16px; }
.film .play { display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px 12px 14px; border-radius: 999px; background: #fff; color: var(--ink); font-weight: 700; font-size: 15px; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.film .play i { width: 34px; height: 34px; border-radius: 50%; background: var(--ink); display: grid; place-items: center; }
.film .play i svg { width: 14px; height: 14px; fill: #fff; margin-left: 2px; }

/* Stat numbers */
.nums { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 14px; }
.nums li b { display: block; font-family: 'Thunder', 'Thunder Fallback', Impact, sans-serif; font-weight: 800; font-style: italic; font-size: clamp(44px, 10vw, 68px); line-height: .9; }
.nums li span { font-size: 14px; color: var(--mute); }
.sec.ink .nums li span { color: rgba(255,255,255,.72); }
@media (min-width: 900px) { .nums.four { grid-template-columns: repeat(4, 1fr); } }

/* Location cards */
.loc-card { border-radius: var(--r-lg); overflow: hidden; background: #fff; box-shadow: inset 0 0 0 1px var(--line); display: flex; flex-direction: column; }
.loc-card .body { padding: 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.loc-card h3 { font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.loc-card address { font-style: normal; color: var(--mute); font-size: 15px; }
.loc-card .note { font-size: 14px; color: var(--mute); }
.loc-card .acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 8px; align-items: center; }

/* FAQ */
.faq { display: grid; gap: 10px; }
.faq details { border-radius: var(--r-sm); background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 18px 52px 18px 18px; font-weight: 700; font-size: 16.5px; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-size: 24px; font-weight: 500; color: var(--mute); }
.faq details[open] summary::after { content: '\2013'; }
/* Stacked variant: one centred column on hairline rules, with a circled toggle
   that turns from + to x. Ported from the live birthday page. */
.faq-stack { max-width: 780px; }
.faq-stack .fs-head { text-align: center; }
.faq-stack .fs-head .lede { margin-inline: auto; }
.faq.lined { display: block; margin-top: 24px; border-top: 1px solid var(--line); }
.faq.lined details { background: none; box-shadow: none; border-radius: 0; border-bottom: 1px solid var(--line); }
.faq.lined summary { padding: 20px 58px 20px 0; font-size: clamp(17px, 2.4vw, 20px); letter-spacing: -.012em; line-height: 1.3; }
.faq.lined summary::after { right: 0; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--line); font-size: 21px; line-height: 1; color: var(--ink); transition: transform .25s ease, background-color .25s ease, border-color .25s ease; }
.faq.lined details[open] summary::after { content: '+'; transform: translateY(-50%) rotate(45deg); background: var(--ink); border-color: var(--ink); color: #fff; }
.faq.lined details p, .faq.lined details ul { padding: 0 58px 20px 0; }
@media (prefers-reduced-motion: reduce) { .faq.lined summary::after { transition: none; } }
.faq details p, .faq details ul { padding: 0 18px 18px; color: var(--mute); }
.faq details ul { display: grid; gap: 6px; padding-left: 34px; list-style: disc; }
@media (min-width: 1024px) { .faq-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 64px; align-items: start; } }

/* Forms */
.form { display: grid; gap: 14px; padding: clamp(18px, 3vw, 28px); border-radius: var(--r-lg); background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.form .row { display: grid; gap: 14px; }
@media (min-width: 700px) { .form .row.two { grid-template-columns: 1fr 1fr; } }
.form label { display: grid; gap: 6px; font-weight: 650; font-size: 14.5px; }
.form input, .form select, .form textarea { min-height: 50px; border-radius: 12px; border: 1.5px solid var(--line); padding: 12px 14px; font: inherit; background: #fff; color: var(--ink); width: 100%; }
.form textarea { min-height: 110px; resize: vertical; }
.form .hint { font-size: 13px; color: var(--mute); font-weight: 450; }
.form .ok { padding: 16px; border-radius: var(--r-sm); background: rgba(15,138,95,.1); color: var(--ok); font-weight: 700; }
.form-err{margin-top:12px;padding:12px 14px;border-radius:12px;background:#fdecec;color:#8c1d1d;border:1px solid #f3c3c3;font-weight:600;font-size:14.5px}

.signup { padding: 18px; border-radius: var(--r-lg); background: var(--bg); }
.signup label { font-weight: 750; display: block; }
.signup p { font-size: 14px; color: var(--mute); margin: 2px 0 12px; }
.signup form { display: flex; gap: 8px; }
.signup input { flex: 1; min-width: 0; min-height: 50px; border-radius: 999px; border: 1.5px solid var(--line); padding: 0 18px; font: inherit; background: #fff; }
.signup .btn { min-height: 50px; }

/* Tables */
.tablebox { overflow-x: auto; border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--line); background: #fff; }
table.t { width: 100%; border-collapse: collapse; font-size: 15px; }
table.t th, table.t td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.t tr:last-child td { border-bottom: 0; }
table.t thead th { font-size: 12.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--mute); background: var(--bg); white-space: nowrap; }
table.t td.num, table.t th.num { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Long-form article */
.prose { font-size: 17px; line-height: 1.7; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-family: 'Thunder', 'Thunder Fallback', Impact, sans-serif; font-weight: 800; font-style: italic; text-transform: uppercase; font-size: clamp(28px, 5vw, 40px); line-height: .95; margin-top: 1.6em; }
.prose h3 { font-size: 21px; font-weight: 800; margin-top: 1.5em; }
.prose p { color: #22284a; }
.prose ul, .prose ol { display: grid; gap: 8px; padding-left: 22px; list-style: disc; color: #22284a; }
.prose ol { list-style: decimal; }
.prose img { border-radius: var(--r-md); }
.prose blockquote { padding: 4px 0 4px 18px; border-left: 3px solid var(--blue); font-size: 19px; }
.prose a { color: var(--blue); font-weight: 650; }

/* Footer */
.ftr { background: var(--ink); color: rgba(255,255,255,.78); padding: 52px 0 calc(110px + env(safe-area-inset-bottom)); font-size: 15px; }
.ftr .cols { display: grid; gap: 28px; }
.ftr h3 { color: #fff; font-size: 15px; margin-bottom: 10px; }
.ftr a { text-decoration: none; }
.ftr a:hover { color: #fff; text-decoration: underline; }
.ftr ul { display: grid; gap: 6px; }
.ftr .links { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 20px; }
.ftr .social { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.ftr .legal { margin-top: 36px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.12); font-size: 13px; color: rgba(255,255,255,.55); }
/* The signup panel is a light card sitting inside the dark footer, so it has to
   opt out of the footer's near-white text or the title vanishes into it. */
.ftr .signup label { color: var(--ink); font-size: 16px; }
.ftr .signup p { color: var(--mute); }
/* Footer addresses are real <address> elements and tap straight into directions. */
.ftr address { font-style: normal; margin-bottom: 10px; }
.ftr .ftr-dir { display: inline-block; }
.ftr .ftr-dir small { display: block; margin-top: 4px; color: #fff; font-weight: 650; font-size: 13px; }
.ftr .ftr-dir:hover { color: #fff; }
@media (min-width: 900px) { .ftr .cols { grid-template-columns: 1.2fr 1fr 1fr 1.3fr; } }
@media (min-width: 1024px) { .ftr { padding-bottom: 48px; } }

/* Story viewer (full screen) */
.viewer { position: fixed; inset: 0; z-index: 120; background: #05060c; display: grid; place-items: center; }
.viewer .stories { width: min(100vw, calc(100svh * 9 / 16)); height: min(100svh, calc(100vw * 16 / 9)); }
@media (min-width: 700px) { .viewer .stories { height: calc(100svh - 48px); width: calc((100svh - 48px) * 9 / 16); border-radius: 18px; } }
.viewer .v-close { position: absolute; z-index: 5; top: 22px; right: 12px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(0,0,0,.35); color: #fff; font-size: 26px; line-height: 1; }
.viewer .v-cta { position: absolute; z-index: 5; left: 14px; right: 14px; bottom: calc(16px + env(safe-area-inset-bottom)); }
.viewer .v-cta .btn { width: 100%; }
.viewer .st-cap { bottom: calc(84px + env(safe-area-inset-bottom)); }

/* Room chips used inside tabs (birthday age picker, VR party picks) */
.mini { display: flex; gap: 8px; flex-wrap: wrap; }
.mini a { display: flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); text-decoration: none; font-weight: 650; font-size: 14px; }
.mini img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }
.mini small { display: block; font-weight: 500; color: var(--mute); font-size: 12px; }
.sec.ink .mini a { background: rgba(255,255,255,.08); box-shadow: none; color: #fff; }
.sec.ink .mini small { color: rgba(255,255,255,.65); }

/* Logo row */
.logos img { height: 26px; width: auto; }

/* Gallery rail of photos */
.gallery { --rail-gap: 12px; }
.gallery img { width: min(78vw, 420px); aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--r-md); }
@media (min-width: 1024px) { .gallery img { width: 420px; } }

/* Split media/copy inside a card (used by experience pages) */
.feature { display: grid; gap: 18px; align-items: center; }
.feature .ph { border-radius: var(--r-lg); }
@media (min-width: 900px) { .feature { grid-template-columns: 1fr 1fr; gap: 40px; } .feature.flip > :first-child { order: 2; } }

/* Timeline (about) */
.tl { display: grid; gap: 14px; }
.tl li { display: grid; gap: 12px; padding: 16px; border-radius: var(--r-md); background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.tl .yr { font-family: 'Thunder', 'Thunder Fallback', Impact, sans-serif; font-weight: 800; font-style: italic; font-size: 34px; line-height: .9; color: var(--blue); }
.tl b { font-size: 17px; display: block; }
.tl p { color: var(--mute); font-size: 15px; }
.tl .ph { border-radius: var(--r-sm); aspect-ratio: 4 / 3; }
@media (min-width: 800px) { .tl li { grid-template-columns: 200px 90px 1fr; align-items: center; gap: 20px; } .tl li .ph { aspect-ratio: 4 / 3; } }

/* Booking widget facade */
.bookbox { border-radius: var(--r-lg); overflow: hidden; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.bookbox .head { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.bookbox .head b { font-size: 16px; }
.bookbox iframe { width: 100%; height: min(1100px, 120svh); min-height: 520px; border: 0; display: block; }
.bookbox .placeholder { display: grid; place-items: center; gap: 12px; padding: 40px 20px; text-align: center; background: var(--bg); }
.bookbox .placeholder p { color: var(--mute); max-width: 46ch; }

/* Safety net: nothing may push the document sideways on narrow phones.
   clip (not hidden) so position: sticky keeps working. */
html, body { overflow-x: clip; }
.ftr .signup input { min-width: 0; }
.ftr .cols > * { min-width: 0; }
.ftr .links { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
.ftr .links a, .ftr li { overflow-wrap: anywhere; }