/* ==========================================================================
   The Ultimate Escape Rooms: Lead Gen Landing Page
   Brand palette lifted from theultimateescaperooms.com (verified 2026):
   teal #00A89C · orange #F6921E · indigo #2E3191 · ink #0C0D0E · paper #F8F8F8

   Design idea: "Solvang through a keyhole". A storybook village seen through
   an escape-room keyhole, dressed in game-ticket details (notched stubs,
   perforated rules, a 60:00 game clock). Brand colours and Roboto only; the
   warmth comes from a bakery-cream paper tone, not from extra fonts.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  --teal: #00a89c;
  --teal-dark: #00867d;
  --teal-darker: #006a63;
  --teal-light: #7fe3da;
  --teal-tint: #e6f6f5;
  --teal-tint-2: #cceeeb;

  --orange: #f6921e;
  --orange-dark: #dd7c0b;
  --orange-light: #ffd29c;
  --orange-tint: #fff2e0;

  --indigo: #2e3191;
  --indigo-dark: #22246b;

  --ink: #0c0d0e;
  --ink-2: #16181c;
  --ink-3: #23262c;
  --slate: #54595f;
  --grey: #6b7076;
  --line: #e2e5e9;
  --paper: #f8f8f8;
  --white: #ffffff;

  /* Warm paper for the tinted sections: reads as bakery box and old ticket
     stock rather than the cold grey of a default admin theme. */
  --cream: #f7f1e6;
  --cream-2: #efe5d3;
  --line-warm: #e7dcc8;

  --star: #fbbc04;

  --font: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --font-display: "Roboto Condensed", "Roboto", Arial, sans-serif;

  --radius-sm: 6px;
  --radius: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(12, 13, 14, .06), 0 2px 8px rgba(12, 13, 14, .06);
  --shadow: 0 4px 12px rgba(12, 13, 14, .08), 0 14px 36px rgba(12, 13, 14, .12);
  --shadow-lg: 0 10px 30px rgba(12, 13, 14, .18), 0 30px 70px rgba(12, 13, 14, .22);

  /* Ticket stub: a semicircle notch punched out of each side. Applied as a
     mask, so it shows whatever sits behind the element. */
  --ticket-mask:
    radial-gradient(circle 9px at 0 50%, #0000 96%, #000) left / 51% 100% no-repeat,
    radial-gradient(circle 9px at 100% 50%, #0000 96%, #000) right / 51% 100% no-repeat;

  /* Keyhole silhouette for the hero photo (viewBox matches a 2:3 box). */
  --keyhole: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 150'%3E%3Ccircle cx='50' cy='50' r='46'/%3E%3Cpath d='M31 78h38l15 72H16z'/%3E%3C/svg%3E");

  /* Faint dot grid used on the dark sections for depth. */
  --dots: radial-gradient(rgba(255, 255, 255, .055) 1px, transparent 1.6px) 0 0 / 22px 22px;

  --wrap: 1160px;
  --gutter: 20px;
  --header-h: 64px;
}

/* --------------------------------------------------------------------------
   2. Reset / base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-2);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

h1, h2, h3, h4 {
  margin: 0 0 .5em;
  line-height: 1.12;
  letter-spacing: -.015em;
  color: var(--ink);
  font-weight: 900;
}

/* Display headings in the condensed face: poster-like, and it fits long
   keyword headlines on two phone lines instead of four. */
h1,
h2 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -.01em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.3rem, 5.6vw + 1rem, 4.25rem); line-height: .98; }
h2 { font-size: clamp(1.75rem, 3.4vw + .9rem, 2.75rem); line-height: 1.04; }
h3 { font-size: clamp(1.1rem, 2.4vw, 1.35rem); font-weight: 700; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--teal-dark); }

ul { margin: 0; padding: 0; list-style: none; }

button { font: inherit; cursor: pointer; }

:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 2px;
  border-radius: 4px;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding: clamp(48px, 7.5vw, 96px) 0; }
.section--tint { background: var(--cream); }
.section--dark {
  position: relative;
  background:
    var(--dots),
    radial-gradient(70% 60% at 100% 0%, rgba(46, 49, 145, .38), transparent 70%),
    radial-gradient(60% 50% at 0% 100%, rgba(0, 168, 156, .14), transparent 70%),
    var(--ink);
  color: #d7dbe0;
}
.section--dark h2,
.section--dark h3 { color: var(--white); }

/* Perforated top edge on the dark bands, like the tear line on a ticket.
   Every dark section follows a white one, so the punched holes are white. */
.section--dark::before,
.finalcta::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -1px;
  height: 9px;
  background: radial-gradient(circle at 50% 0, var(--white) 5px, transparent 5.5px) 0 0 / 20px 9px repeat-x;
  pointer-events: none;
}

/* Every CTA on the page jumps to a section. Without this the sticky header
   sits on top of the heading it lands on. */
section[id] { scroll-margin-top: calc(var(--header-h) + 8px); }

.section-head { max-width: 740px; margin: 0 auto clamp(26px, 4vw, 44px); text-align: center; }
.section-head p { color: var(--slate); font-size: 1.05rem; }
.section--dark .section-head p { color: #a8b0ba; }

.section-cta { display: flex; justify-content: center; margin-top: clamp(28px, 4vw, 40px); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--teal-dark);
  margin-bottom: 10px;
}
/* A small keyhole mark in front of every eyebrow ties the sections together. */
.eyebrow::before {
  content: "";
  flex: none;
  width: 9px; height: 13px;
  background: var(--orange);
  -webkit-mask: var(--keyhole) center / contain no-repeat;
          mask: var(--keyhole) center / contain no-repeat;
}
.section--dark .eyebrow { color: var(--teal-light); }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 12px; top: -60px;
  z-index: 200;
  background: var(--ink);
  color: var(--white);
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  transition: top .15s ease;
}
.skip-link:focus { top: 12px; }

/* Text-style CTA used inside sections that already have a primary button
   nearby. Same #book target and tracking as the buttons. */
.plan__link,
.reviews__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 3px solid var(--orange);
}
.plan__link svg,
.reviews__link svg { width: 18px; height: 18px; fill: currentColor; transition: transform .18s ease; }
.plan__link:hover,
.reviews__link:hover { color: var(--orange-dark); }
.plan__link:hover svg,
.reviews__link:hover svg { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   3. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 14px 26px;
  border: 0;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.04rem;
  letter-spacing: .03em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  transition: transform .12s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn svg { width: 20px; height: 20px; flex: none; fill: currentColor; transition: transform .18s ease; }
.btn:hover svg { transform: translateX(3px); }
.btn:active { transform: translateY(3px); }

/* Chunky arcade-button orange: the one colour on the page that always
   means "book". */
.btn--primary {
  background: var(--orange);
  color: #2a1600;
  box-shadow: 0 5px 0 0 var(--orange-dark), 0 12px 28px rgba(246, 146, 30, .32);
}
.btn--primary:hover { background: #ffa337; transform: translateY(-1px); box-shadow: 0 6px 0 0 var(--orange-dark), 0 16px 34px rgba(246, 146, 30, .42); }
.btn--primary:active { transform: translateY(3px); box-shadow: 0 2px 0 0 var(--orange-dark), 0 6px 14px rgba(246, 146, 30, .3); }

.btn--teal {
  background: var(--teal);
  color: #002e2b;
  box-shadow: 0 5px 0 0 var(--teal-darker), var(--shadow-sm);
}
.btn--teal:hover { background: #0abfb2; }
.btn--teal:active { box-shadow: 0 2px 0 0 var(--teal-darker); }

.btn--ghost {
  background: transparent;
  color: var(--white);
  border: 2px solid rgba(255, 255, 255, .45);
}
.btn--ghost:hover { border-color: var(--white); background: rgba(255, 255, 255, .08); }

.btn--outline {
  background: var(--white);
  color: var(--ink);
  border: 2px solid var(--ink);
}
.btn--outline:hover { background: var(--ink); color: var(--white); }

.btn--block { width: 100%; }
.btn--lg { min-height: 62px; font-size: 1.16rem; padding-inline: 34px; }
.btn--sm { min-height: 48px; padding: 10px 18px; font-size: .94rem; }

/* --------------------------------------------------------------------------
   4. Header
   -------------------------------------------------------------------------- */
.header {
  position: sticky;
  top: 0;
  z-index: 90;
  background: rgba(12, 13, 14, .9);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: var(--header-h);
  padding-block: 8px;
}

.header__logo { display: flex; align-items: center; gap: 10px; }
.header__logo img { width: auto; height: 40px; }

.header__actions { display: flex; align-items: center; gap: 12px; }

/* Tap to call. Deliberately the quieter of the two header buttons: the
   booking widget is the conversion, and a call is the fallback for people
   who will not book without talking to someone first. */
.header__phone {
  min-height: 44px;
  padding: 10px 14px;
  font-size: .92rem;
  gap: 8px;
  border-width: 1px;
  border-color: rgba(255, 255, 255, .28);
  letter-spacing: 0;
}
.header__phone svg { width: 18px; height: 18px; fill: var(--teal); flex: none; }
.header__phone:hover svg { fill: #0abfb2; transform: none; }

/* Under 720px the digits do not fit beside the booking CTA, so the button
   collapses to a circle. The link keeps its aria-label, so the number is
   still announced. */
.header__phone-text { display: none; }
.header__phone { padding: 10px; width: 44px; }

.header__cta { min-height: 44px; padding: 10px 20px; font-size: .94rem; box-shadow: 0 4px 0 0 var(--orange-dark); }
.header__cta:hover { box-shadow: 0 4px 0 0 var(--orange-dark); }

@media (min-width: 720px) {
  .header__phone-text { display: inline; }
  .header__phone { width: auto; padding: 10px 16px; }
  .header__logo img { height: 46px; }
}

/* --------------------------------------------------------------------------
   5. Hero ("pick your trip")

   lp-2 serves four ad groups from one page (family and kids, couples and
   groups, today / rainy day / evening, valley towns), so the hero names the
   keyword once in the H1 and then lets each visitor see their own situation
   in a row of four trip tickets. Every ticket goes to #book.

   Sized by its content, not by a viewport-height minimum. On a phone the
   badge, H1, sub, CTA and rating have to land inside the first screen; the
   tickets sit directly under them as a 2 x 2 grid.

   Phone: the windmill photo is a full-bleed backdrop under a scrim.
   860px up: the tickets become a cream four-across strip along the bottom
   edge, and the scrim opens up on the right so the windmill shows.
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  background: var(--ink);
  color: #e7eaee;
  isolation: isolate;
  overflow: hidden;
}

.hero__visual {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--ink-3);
}
.hero__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Solvang skyline: the windmill sits in the right third of the photo, so
     the crop on a narrow phone is pushed right to keep it in frame. */
  object-position: 80% 50%;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Heavier on the left where the copy sits, lighter top-right so the
     windmill and the blue sky still read. */
  background:
    linear-gradient(180deg, rgba(12, 13, 14, .1) 0%, rgba(12, 13, 14, .55) 55%, rgba(12, 13, 14, .9) 100%),
    linear-gradient(90deg, rgba(12, 13, 14, .86) 0%, rgba(12, 13, 14, .55) 70%, rgba(12, 13, 14, .3) 100%);
}

/* padding-block only. A `padding` shorthand here would wipe out the
   horizontal gutter that .wrap sets and push copy to the screen edge. */
.hero__inner {
  display: grid;
  gap: 22px;
  padding-block: clamp(26px, 6vw, 64px) clamp(26px, 5vw, 48px);
}
.hero__copy { max-width: 660px; }

.hero h1 {
  color: var(--white);
  margin-bottom: .32em;
  text-transform: uppercase;
  font-size: clamp(2.1rem, 5vw + 1rem, 3.9rem);
}
.hero h1 .accent {
  /* Block-like so "Try an escape room." never splits across two lines. */
  display: inline-block;
  color: var(--teal);
  /* Hand-drawn orange underline under the second line. */
  padding-bottom: .1em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 24' preserveAspectRatio='none'%3E%3Cpath d='M4 17C70 7 170 3 296 11' fill='none' stroke='%23F6921E' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E") 0 100% / 100% .2em no-repeat;
}

/* Offer badge styled as a torn ticket stub. */
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 11px;
  margin-bottom: 16px;
  border: 1px dashed rgba(246, 146, 30, .7);
  background: rgba(246, 146, 30, .14);
  border-radius: var(--radius-sm);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--orange-light);
  text-align: left;
  line-height: 1.35;
}
.hero__badge svg { width: 16px; height: 16px; fill: var(--orange); flex: none; }

.hero__sub {
  font-size: clamp(1rem, 2.2vw, 1.2rem);
  line-height: 1.5;
  color: #cfd5dc;
  max-width: 54ch;
  margin: 0 0 18px;
}
.hero__sub strong { color: var(--white); font-weight: 500; }

.hero__cta { display: flex; flex-direction: column; align-items: stretch; gap: 14px; width: 100%; }
.hero__cta .btn { width: 100%; }
@media (min-width: 520px) {
  .hero__cta { align-items: flex-start; }
  .hero__cta .btn { width: auto; min-width: 320px; }
}

/* Rating directly under the button: the doubt a visitor has at the moment
   of the click is "is this place any good?", so the answer sits right there. */
.hero__proof {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
  margin: 0;
  font-size: .9rem;
  color: #b4bcc6;
}
.hero__proof > span { display: inline-flex; align-items: center; gap: 6px; }
.hero__proof strong { color: var(--white); }
.hero__proof .stars { display: inline-flex; gap: 1px; }
.hero__proof .stars svg { width: 16px; height: 16px; fill: var(--star); }

/* The phone as a real second route: "today", "tonight" and valley-town
   searchers often want a slot that isn't on the calendar. Same number and
   same phone_click event as the header button. */
.hero__call {
  margin: 0;
  font-size: .9rem;
  color: #b4bcc6;
}
.hero__call a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  /* Padding for a 44px tap target, pulled back with the margin so it adds
     no height to the hero. */
  padding: 12px 4px;
  margin: -12px 0;
  color: var(--white);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--orange);
  text-underline-offset: 3px;
}
.hero__call svg { width: 14px; height: 14px; fill: var(--teal); }

/* Trip tickets: one per ad group, cut like a paper ticket. Cream stock,
   a row of round perforation notches punched out of the top and bottom edges
   (the same semicircle bites as the section dividers; a mask, so the photo
   shows through them) and a dashed inner line. Phone: 2 x 2.
   A mask clips a box-shadow, so the lift is a drop-shadow on the <li>. */
.trips__head {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--orange-light);
}
.trips {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.trips li { filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .4)); }
.trip {
  --r: 4px;        /* notch radius */
  --pitch: 16px;   /* distance between notches */
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 100%;
  min-height: 44px;
  padding: calc(var(--r) + 10px) 14px calc(var(--r) + 12px);
  background: var(--cream);
  color: var(--ink);
  text-decoration: none;
  outline: 1.5px dashed rgba(12, 13, 14, .3);
  outline-offset: calc(var(--r) * -1 - 4px);
  /* Each layer covers one half and `round` fits a whole number of notches
     across the width, so the row ends cleanly at both corners. */
  -webkit-mask:
    radial-gradient(circle at 50% 0, #0000 var(--r), #000 calc(var(--r) + .5px)) top / var(--pitch) 51% round no-repeat,
    radial-gradient(circle at 50% 100%, #0000 var(--r), #000 calc(var(--r) + .5px)) bottom / var(--pitch) 51% round no-repeat;
          mask:
    radial-gradient(circle at 50% 0, #0000 var(--r), #000 calc(var(--r) + .5px)) top / var(--pitch) 51% round no-repeat,
    radial-gradient(circle at 50% 100%, #0000 var(--r), #000 calc(var(--r) + .5px)) bottom / var(--pitch) 51% round no-repeat;
  transition: transform .18s ease, background .18s ease;
}
.trip:hover { background: #fff; transform: translateY(-4px); }
/* Inside the cut edge, where the mask can't clip it. */
.trip:focus-visible { outline: 3px solid var(--orange); }
.trip__icon { display: flex; }
.trip__icon svg { width: 22px; height: 22px; fill: var(--teal-dark); }
.trip__name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--ink);
}
.trip__line { font-size: .84rem; line-height: 1.35; color: var(--slate); }
.trip__go { display: none; }

@media (min-width: 860px) {
  .hero { background: var(--ink); }
  .hero::before {
    background:
      linear-gradient(180deg, rgba(12, 13, 14, 0) 45%, rgba(12, 13, 14, .78) 100%),
      linear-gradient(90deg, rgba(12, 13, 14, .9) 0%, rgba(12, 13, 14, .62) 42%, rgba(12, 13, 14, .08) 78%);
  }
  .hero__visual img { object-position: 60% 38%; }

  /* Content-sized so the CTA and the top of the tickets share one laptop
     screen. */
  .hero__inner { gap: 30px; padding-block: 44px 36px; }
  .hero__copy { max-width: 780px; }
  .hero__sub { max-width: 62ch; }

  /* Button, rating and phone on one row to save height. */
  .hero__cta { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px 24px; }

  /* Bigger tickets along the bottom edge, with the same 5px / 20px notches
     as the section dividers. */
  .trips { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .trip { --r: 5px; --pitch: 20px; padding-inline: 18px; }
  .trip__name { font-size: 1.2rem; }
  .trip__line { font-size: .9rem; }
  .trip__go {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    padding-top: 8px;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--teal-darker);
  }
  .trip__go svg { width: 14px; height: 14px; fill: currentColor; transition: transform .18s ease; }
  .trip:hover .trip__go svg { transform: translateX(4px); }
}

/* One short entrance: copy rises in order, then the tickets. The CTA is
   usable almost at once. */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
.hero__copy > * { animation: rise .55s cubic-bezier(.2, .7, .2, 1) both; }
.hero__copy > :nth-child(2) { animation-delay: .06s; }
.hero__copy > :nth-child(3) { animation-delay: .12s; }
.hero__copy > :nth-child(4) { animation-delay: .18s; }
.hero__copy > :nth-child(5) { animation-delay: .24s; }
.trips-wrap { animation: rise .55s cubic-bezier(.2, .7, .2, 1) .3s both; }
@media (prefers-reduced-motion: reduce) {
  .hero__copy > *, .trips-wrap { animation: none; }
}


/* --------------------------------------------------------------------------
   6. Reviews / social proof

   Phone: big rating, heading, then a swipeable row of quotes.
   1000px up: the rating and heading stay pinned in a left column while the
   six quotes run down a two-column grid beside them.
   -------------------------------------------------------------------------- */
.reviews { display: grid; gap: 26px; }

.reviews__head h2 { font-size: clamp(1.6rem, 2.6vw + .9rem, 2.3rem); }
.reviews__head h2 [data-rating],
.reviews__head h2 [data-reviews] { color: var(--teal-dark); }
.reviews__head p { color: var(--slate); font-size: 1.02rem; margin-bottom: 8px; }

.scoreboard {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 2px 0 14px;
}
.scoreboard__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(4rem, 9vw, 6rem);
  line-height: .85;
  letter-spacing: -.03em;
  color: var(--ink);
}
.scoreboard__side { display: flex; flex-direction: column; gap: 6px; }
.scoreboard .stars { display: flex; gap: 2px; }
.scoreboard .stars svg { width: 22px; height: 22px; fill: var(--star); }
.scoreboard__label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--grey);
}

@media (min-width: 1000px) {
  .reviews { grid-template-columns: 330px minmax(0, 1fr); gap: 56px; align-items: start; }
  .reviews__head { position: sticky; top: calc(var(--header-h) + 32px); }
}

/* A swipeable row on a phone (the next card peeks in, so it reads as
   scrollable) and a plain grid from tablet. */
.quotes {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  /* Bleeds to the screen edges so the peek isn't clipped by the gutter. */
  margin-inline: calc(var(--gutter) * -1);
  padding: 4px var(--gutter) 16px;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}
.quotes::-webkit-scrollbar { display: none; }
.quotes .quote { flex: 0 0 84%; scroll-snap-align: start; }

@media (min-width: 800px) {
  .quotes {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    overflow: visible;
    margin-inline: 0;
    padding: 0;
  }
  .quotes .quote { flex: none; }
}

.quote {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line-warm);
  border-radius: var(--radius-lg);
  padding: 22px 22px 18px;
  margin: 0;
  box-shadow: 0 1px 0 var(--line-warm), 0 10px 26px rgba(80, 60, 20, .06);
  transition: transform .18s ease, box-shadow .18s ease;
}
.quote:hover { transform: translateY(-3px); box-shadow: 0 1px 0 var(--line-warm), 0 18px 34px rgba(80, 60, 20, .1); }
/* Oversized quote mark in the corner. */
.quote::before {
  content: "\201C";
  position: absolute;
  top: 2px; right: 18px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 5rem;
  line-height: 1;
  color: var(--teal);
  opacity: .22;
  pointer-events: none;
}
.quote .stars { display: flex; gap: 2px; margin-bottom: 12px; }
.quote .stars svg { width: 17px; height: 17px; fill: var(--star); }
.quote p {
  font-size: 1rem;
  line-height: 1.58;
  color: var(--ink-2);
  margin-bottom: 16px;
}
/* Pushes every attribution to the bottom of its card, so the footers line
   up across a row however long the quote above them runs. The dashed rule
   is the perforation line of a ticket. */
.quote footer {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1.5px dashed var(--line-warm);
  font-size: .84rem;
  color: var(--grey);
  font-weight: 500;
}
.quote footer strong { color: var(--ink); display: block; font-size: .95rem; }

/* --------------------------------------------------------------------------
   6b. Plan your visit
   Phone: short photo with the rain note on it, then a vertical timeline.
   From 860px: photo left, timeline right. The afternoon item is the card.
   -------------------------------------------------------------------------- */
.plan { display: grid; gap: 26px; align-items: center; }

.plan__media {
  position: relative;
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: var(--paper);
}
.plan__media img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: 50% 40%;
}
.plan__rain {
  position: absolute;
  left: 10px; right: 10px; bottom: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius);
  background: rgba(12, 13, 14, .82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--white);
  font-size: .9rem;
  line-height: 1.35;
}
.plan__rain svg { width: 20px; height: 20px; flex: none; fill: var(--teal); }

.plan__list { list-style: none; margin: 0; padding: 0; }
.plan__item { position: relative; display: flex; gap: 14px; padding-bottom: 20px; }
.plan__item:last-child { padding-bottom: 0; }
/* Dashed path between the stops, like a route on a village map. */
.plan__item::before {
  content: "";
  position: absolute;
  left: 21px; top: 50px; bottom: 4px;
  width: 2px;
  background: repeating-linear-gradient(to bottom, var(--teal-tint-2) 0 6px, transparent 6px 12px);
}
.plan__item:last-child::before { display: none; }

.plan__icon {
  flex: none;
  width: 44px; height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--teal-tint);
}
.plan__icon svg { width: 22px; height: 22px; fill: var(--teal-dark); }

.plan__when {
  display: block;
  font-family: var(--font-display);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--grey);
}
.plan__item h3 { font-size: 1.1rem; margin: 2px 0 2px; }
.plan__item p { margin: 0; font-size: .95rem; color: var(--slate); }

.plan__item--us .plan__icon {
  background: var(--orange);
  box-shadow: 0 0 0 6px var(--orange-tint);
}
.plan__item--us .plan__icon svg { fill: #2a1600; }
/* The escape room stop is a ticket: notched sides and a dashed inner rule. */
.plan__card {
  flex: 1;
  padding: 16px 22px 14px;
  border-radius: var(--radius);
  background: #ffefd8;
  outline: 1.5px dashed rgba(221, 124, 11, .5);
  outline-offset: -7px;
  -webkit-mask: var(--ticket-mask);
          mask: var(--ticket-mask);
}
.plan__item--us .plan__when { color: var(--orange-dark); }
.plan__link { margin-top: 6px; }

@media (min-width: 860px) {
  .plan { grid-template-columns: 1fr 1fr; gap: 64px; }
  .plan__media { transform: rotate(-1deg); }
  .plan__media img { aspect-ratio: 4 / 3; object-position: 50% 50%; }
  .plan__rain { left: 14px; right: 14px; bottom: 14px; font-size: 1rem; padding: 12px 16px; }
  .plan__item { gap: 18px; padding-bottom: 26px; }
  .plan__item h3 { font-size: 1.25rem; }
  .plan__item p { font-size: 1rem; }
}

/* --------------------------------------------------------------------------
   7. Rooms

   Phone: a thumbnail beside the level / name / who-it's-for, with the button
   underneath, so all three rooms fit on about one screen instead of three.
   `display: contents` on the body lets its children take part in the card's
   own grid, which is how the button can span the full width under the
   thumbnail without a second copy of the markup.

   Tablet up: ordinary stacked cards. The Beginner room is the featured one
   (orange frame, "Start here" ribbon, the only orange room button), because
   it is the room this variant pushes hardest.
   -------------------------------------------------------------------------- */
.rooms {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
}

.room {
  position: relative;
  display: grid;
  grid-template-columns: 104px 1fr;
  grid-template-rows: auto auto auto 1fr auto auto;
  column-gap: 14px;
  row-gap: 4px;
  padding: 14px;
  background: var(--white);
  border: 1px solid var(--line-warm);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 0 var(--line-warm), 0 10px 26px rgba(80, 60, 20, .06);
}
.room--featured { border: 2px solid var(--orange); box-shadow: 0 14px 34px rgba(246, 146, 30, .2); }
.room__body { display: contents; }

.room__media {
  grid-column: 1;
  grid-row: 1 / span 4;
  align-self: start;
  position: relative;
  width: 104px;
  aspect-ratio: 1;
  border-radius: var(--radius);
  background: var(--ink-3);
  overflow: hidden;
}
.room__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }

/* All three room photos are square (client's own Things to Do images), so the
   card image is square too and nothing is cropped. */

/* Phone: a strip across the foot of the thumbnail. Tablet up: a corner tag. */
.room__ribbon {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 1;
  padding: 3px 4px;
  background: var(--orange);
  color: #2a1600;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .68rem;
  letter-spacing: .1em;
  text-align: center;
  text-transform: uppercase;
}

.room__rank {
  grid-column: 2;
  align-self: end;
  display: flex;
  align-items: center;
  gap: 10px;
}

.room__tag {
  padding: 3px 11px;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--white);
  background: var(--ink);
}
.room__tag--beginner { background: var(--teal); color: #002e2b; }
.room__tag--intermediate { background: var(--orange); color: #2a1600; }
.room__tag--advanced { background: var(--indigo); }

/* Difficulty meter: three bars, filled up to the room's level. */
.room__level { display: inline-flex; gap: 3px; }
.room__level i { width: 14px; height: 6px; border-radius: 3px; background: var(--line); }
.room__level i.is-on { background: currentColor; }
.room__tag--beginner + .room__level { color: var(--teal); }
.room__tag--intermediate + .room__level { color: var(--orange); }
.room__tag--advanced + .room__level { color: var(--indigo); }

.room h3 { grid-column: 2; margin: 0; font-size: 1.14rem; line-height: 1.2; }

.room__pick {
  grid-column: 2;
  margin: 0;
  font-size: .9rem;
  line-height: 1.4;
  font-weight: 500;
  color: var(--teal-darker);
}

/* "Explore" toggle: its own small outlined button under the "who it's for"
   line, 44px tall. It sits beside the thumbnail so the card stays compact,
   and it is deliberately quieter than the orange room CTA below it. */
.room__toggle {
  grid-column: 2;
  justify-self: start;
  align-self: start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 44px;
  margin-top: 6px;
  padding: 0 14px 0 18px;
  border: 1.5px solid var(--teal-darker);
  border-radius: var(--radius-pill);
  background: var(--white);
  font-family: var(--font-display);
  font-size: .86rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--teal-darker);
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.room__toggle:hover,
.room__toggle[aria-expanded="true"] { background: var(--teal-tint); }
.room__toggle svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
  transition: transform .25s ease;
}
.room__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.room__toggle-close { display: none; }
.room__toggle[aria-expanded="true"] .room__toggle-open { display: none; }
.room__toggle[aria-expanded="true"] .room__toggle-close { display: inline; }

/* Phone: story and meta sit in a panel that animates open by growing its
   grid row from 0fr to 1fr (no measured heights, no max-height guess).
   Closed, it is also visibility:hidden so its text is out of the tab order
   and the reading order; the visibility change waits out the collapse. */
.room__more {
  grid-column: 1 / -1;
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows .28s ease, visibility 0s linear .28s;
}
.room__more-inner { min-height: 0; overflow: hidden; }
.room.is-open .room__more {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows .28s ease, visibility 0s;
}

.room__story { margin: 12px 0 10px; font-size: .93rem; line-height: 1.5; color: var(--slate); }
.room__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 0;
  font-size: .85rem;
  color: var(--slate);
}
.room__meta span { display: inline-flex; align-items: center; gap: 6px; }
.room__meta svg { width: 16px; height: 16px; fill: var(--teal-dark); }

.room__cta { grid-column: 1 / -1; margin-top: 10px; }
.room .btn--outline { border-color: var(--line-warm); }
.room .btn--outline:hover { border-color: var(--ink); }

@media (min-width: 700px) {
  .rooms { grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }

  .room {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease;
  }
  .room:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
  .room:hover .room__media img { transform: scale(1.05); }
  .room--featured:hover .room__media img { transform: none; }

  .room__body { display: flex; flex-direction: column; flex: 1; padding: 18px 20px 20px; }

  /* flex:none keeps every card's image the same height regardless of how
     much copy sits below it. min-height:0 matters too: as a column flex item
     this box gets an automatic minimum size from its content, and that beats
     aspect-ratio, so cards with differently proportioned artwork end up
     different heights. */
  .room__media {
    flex: none;
    width: 100%;
    min-height: 0;
    aspect-ratio: 1;
    border-radius: 0;
  }

  .room__ribbon {
    left: 14px; right: auto; bottom: auto; top: 14px;
    padding: 5px 12px;
    border-radius: var(--radius-pill);
    font-size: .76rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
  }

  .room__rank { align-self: flex-start; margin-bottom: 12px; }
  .room h3 { margin-bottom: 4px; font-size: 1.35rem; }
  .room__pick { margin-bottom: 10px; font-size: .95rem; }
  .room__story { margin: 0 0 16px; }

  /* The panel is always showing here, so the toggle goes and the wrappers
     dissolve, leaving story and meta as direct children of the card body
     (the margin-top:auto trick below depends on that). */
  .room__toggle { display: none; }
  .room__more,
  .room__more-inner { display: contents; visibility: visible; }

  /* margin-top:auto eats the leftover height in the card, so the divider,
     the meta row and the CTA below it are pinned to the bottom and line up
     across all three cards however long the description above them runs.
     Only ONE element in the column may claim auto, or the free space is
     split between them and nothing lines up, which is why the CTA does not. */
  .room__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin: auto 0 14px;
    padding-top: 12px;
    border-top: 1.5px dashed var(--line-warm);
    font-size: .85rem;
    color: var(--slate);
  }
  .room__meta span { display: inline-flex; align-items: center; gap: 6px; }
  .room__meta svg { width: 16px; height: 16px; fill: var(--teal-dark); }

  .room__cta { margin-top: 0; }
}

/* --------------------------------------------------------------------------
   8. Pricing
   Phone: best-value strip, the table, then the notes.
   860px up: table left, notes as a side card on the right.
   -------------------------------------------------------------------------- */
.pricing { max-width: 980px; margin-inline: auto; display: grid; gap: 16px; }
@media (min-width: 860px) {
  .pricing { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 24px; align-items: stretch; }
}

/* The cheapest row, said in words above the table so a scanner gets it
   without reading the grid. Notched like a ticket. */
.pricing__best {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin: 0 0 12px;
  padding: 12px 24px;
  border-radius: var(--radius);
  background: var(--ink);
  color: #d7dbe0;
  font-size: .95rem;
  line-height: 1.4;
  -webkit-mask: var(--ticket-mask);
          mask: var(--ticket-mask);
}
.pricing__best strong { color: var(--white); }
.pricing__best-tag {
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--orange);
  color: #2a1600;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.pricetable {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.pricetable table { width: 100%; border-collapse: collapse; }

.pricetable thead th {
  padding: 13px 14px;
  background: var(--ink-2);
  color: var(--white);
  font-family: var(--font-display);
  font-size: .82rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: right;
  white-space: nowrap;
}
.pricetable thead th:first-child { text-align: left; padding-left: 20px; }
.pricetable thead th:last-child { background: var(--teal-dark); padding-right: 20px; }

.pricetable tbody th,
.pricetable tbody td { padding: 16px 14px; font-size: 1rem; }
.pricetable tbody th { padding-left: 20px; text-align: left; font-weight: 500; color: var(--slate); }
.pricetable tbody td {
  text-align: right;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--ink);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.pricetable tbody td:last-child { padding-right: 20px; }
.pricetable tbody tr + tr th,
.pricetable tbody tr + tr td { border-top: 1px solid var(--line); }
.pricetable tbody td.is-best { color: var(--teal-darker); background: var(--teal-tint); }

.price-note {
  display: grid;
  gap: 12px;
  padding: 20px 20px;
  background: var(--orange-tint);
  border: 1px solid #f7dcb4;
  border-radius: var(--radius-lg);
  font-size: .93rem;
  color: #6b4004;
}
.price-note strong { color: #4d2e02; }
.price-note li { display: flex; align-items: flex-start; gap: 12px; line-height: 1.45; }
.price-note svg {
  width: 32px; height: 32px;
  padding: 7px;
  border-radius: 50%;
  background: var(--white);
  fill: var(--orange-dark);
  flex: none;
  margin-top: -4px;
}
@media (min-width: 640px) and (max-width: 859px) { .price-note { grid-template-columns: 1fr 1fr; gap: 14px 24px; } }
/* Side card stretches to the strip + table height; spread the notes to fill it. */
@media (min-width: 860px) { .price-note { gap: 16px; padding: 24px; align-content: space-evenly; } }

/* --------------------------------------------------------------------------
   9. Live booking widget (Bookeo)
   -------------------------------------------------------------------------- */
.booking .section-head { margin-bottom: 20px; }

.booking__trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 0 auto 24px;
  font-size: .88rem;
  font-weight: 500;
  color: #e3e7eb;
}
.booking__trust li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 6px 9px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .05);
}
.booking__trust svg { width: 17px; height: 17px; fill: var(--teal); flex: none; }

.booking__card {
  position: relative;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: 0 0 0 6px rgba(255, 255, 255, .06), var(--shadow-lg);
  overflow: hidden;
  max-width: 960px;
  margin-inline: auto;
}

/* Teal rather than ink: the section around this card is dark, and an ink
   header bar would dissolve straight into the background. */
.booking__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 22px;
  padding: 13px 18px;
  background: linear-gradient(135deg, var(--teal-darker) 0%, var(--teal) 100%);
  color: var(--white);
  font-size: .88rem;
  font-weight: 500;
}
.booking__meta > span { display: inline-flex; align-items: center; gap: 8px; }
.booking__meta svg { width: 17px; height: 17px; fill: rgba(255, 255, 255, .95); flex: none; }

/* "Live availability" with a pulsing dot: tells the visitor the calendar
   below is real-time, not an enquiry form. */
.booking__live {
  padding: 3px 11px 3px 9px;
  border-radius: var(--radius-pill);
  background: rgba(12, 13, 14, .28);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.booking__live i {
  position: relative;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #9ff7ee;
}
.booking__live i::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #9ff7ee;
  animation: pulse 1.8s ease-out infinite;
}
@keyframes pulse { to { transform: scale(3); opacity: 0; } }

.booking__frame {
  position: relative;
  /* Reserve height so the iframe arriving doesn't shove the page around.
     Bookeo resizes its own frame past this once it has loaded. */
  min-height: 560px;
  padding: 8px 10px 16px;
}
@media (min-width: 600px) { .booking__frame { padding: 14px 18px 20px; } }

/* Bookeo injects its iframe into this container at runtime. */
#bookeo_position { width: 100%; }
#bookeo_position iframe { width: 100% !important; border: 0; display: block; }

.booking__placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 24px;
  text-align: center;
  color: var(--grey);
  font-size: .95rem;
}
.booking__placeholder.is-hidden { display: none; }

.booking__foot {
  max-width: 660px;
  margin: 24px auto 0;
  text-align: center;
  font-size: .93rem;
  color: #a8b0ba;
}
.booking__foot strong,
.booking__foot [data-capacity] { color: var(--white); font-weight: 700; }
.booking__foot a { color: var(--white); font-weight: 700; text-decoration-color: var(--orange); text-underline-offset: 3px; }

/* --------------------------------------------------------------------------
   10. Feature grid / how it works
   -------------------------------------------------------------------------- */
.features {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
  counter-reset: clue;
}
@media (min-width: 620px) { .features { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
@media (min-width: 1000px) { .features { grid-template-columns: repeat(3, 1fr); gap: 18px; } }

/* Icon beside the text rather than above it: halves the height of each card
   on a phone, where six stacked icon-over-text cards run very long. Each
   card carries a faint clue number in the corner. */
.feature {
  position: relative;
  display: grid;
  grid-template-columns: 46px 1fr;
  column-gap: 16px;
  align-content: start;
  background: var(--white);
  border: 1px solid var(--line-warm);
  border-radius: var(--radius-lg);
  padding: 20px 20px 20px 18px;
  box-shadow: 0 1px 0 var(--line-warm);
  counter-increment: clue;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.feature:hover { transform: translateY(-3px); border-color: var(--teal-tint-2); box-shadow: var(--shadow); }
.feature::after {
  content: counter(clue, decimal-leading-zero);
  position: absolute;
  top: 12px; right: 16px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--cream-2);
}
.feature__icon {
  grid-row: 1 / span 2;
  width: 46px; height: 46px;
  border-radius: 14px;
  background: var(--teal);
  display: grid;
  place-items: center;
  transform: rotate(-4deg);
}
.feature__icon svg { width: 24px; height: 24px; fill: var(--white); }
.feature h3 { font-size: 1.1rem; margin-bottom: 4px; padding-right: 32px; }
.feature p { font-size: .93rem; color: var(--slate); margin: 0; }

.steps {
  position: relative;
  display: grid;
  gap: 22px;
  counter-reset: step;
}
.stepcard { position: relative; padding-left: 70px; min-height: 52px; }
.stepcard::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0; top: -2px;
  width: 52px; height: 52px;
  border-radius: 14px;
  background: var(--orange);
  color: #2a1600;
  box-shadow: 0 4px 0 var(--orange-dark);
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  display: grid;
  place-items: center;
}
/* Dashed connector between the numbers on a phone (vertical). */
.stepcard:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 25px; top: 60px; bottom: -18px;
  width: 2px;
  background: repeating-linear-gradient(to bottom, var(--cream-2) 0 6px, transparent 6px 12px);
}
.stepcard h3 { font-size: 1.15rem; margin-bottom: 4px; }
.stepcard p { font-size: .95rem; margin: 0; color: var(--slate); }

@media (min-width: 780px) {
  .steps { grid-template-columns: repeat(3, 1fr); gap: 36px; }
  .stepcard { padding-left: 0; padding-top: 74px; }
  /* Horizontal connector from each number to the next. */
  .stepcard:not(:last-child)::after {
    left: 66px; right: -24px; top: 25px; bottom: auto;
    width: auto; height: 2px;
    background: repeating-linear-gradient(to right, var(--cream-2) 0 8px, transparent 8px 16px);
  }
}

/* --------------------------------------------------------------------------
   11. Occasions
   -------------------------------------------------------------------------- */
.occasions {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, 1fr);
}
/* Five cards: on two columns the last one would sit alone on a half row. */
.occasion:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (min-width: 760px) {
  .occasions { grid-template-columns: repeat(3, 1fr); }
  .occasion:last-child:nth-child(odd) { grid-column: auto; }
}

/* Desktop: photo on the left, heading and a stacked list of rows on the right,
   so the five audiences read as one scannable list instead of a thin card strip.
   Below 900px the DOM order stays: heading, photo, cards. */
@media (min-width: 900px) {
  .who {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
    grid-template-rows: auto 1fr;
    column-gap: clamp(36px, 5vw, 72px);
    align-items: start;
  }
  /* Doubled class beats the later .polaroid / .polaroid--wide rules. */
  .who__photo.polaroid--wide { grid-column: 1; grid-row: 1 / span 2; align-self: center; max-width: 480px; margin: 0 auto; }
  .who__photo.polaroid--wide img { aspect-ratio: 4 / 5; object-position: 50% 40%; }
  .who__head { grid-column: 2; grid-row: 1; margin: 0 0 22px; text-align: left; align-self: end; }
  .who__list { grid-column: 2; grid-row: 2; grid-template-columns: 1fr; gap: 10px; }

  .who__list .occasion {
    display: grid;
    grid-template-columns: 48px 1fr;
    column-gap: 16px;
    align-items: center;
    padding: 14px 18px;
    text-align: left;
  }
  .who__list .occasion svg {
    grid-row: 1 / span 2;
    width: 48px; height: 48px;
    padding: 12px;
    margin: 0;
  }
  .who__list .occasion h3 { font-size: 1.1rem; margin: 0 0 2px; }
  .who__list .occasion p { font-size: .92rem; }
}

.occasion {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--radius);
  padding: 18px 16px;
  text-align: center;
  transition: background-color .18s ease, border-color .18s ease;
}
.occasion:hover { background: rgba(255, 255, 255, .07); border-color: rgba(0, 168, 156, .5); }
.occasion svg {
  width: 44px; height: 44px;
  padding: 10px;
  border-radius: 50%;
  background: rgba(0, 168, 156, .16);
  fill: var(--teal-light);
  margin: 0 auto 10px;
}
.occasion h3 { font-size: 1rem; margin-bottom: 4px; }
.occasion p { font-size: .86rem; color: #9aa3ad; margin: 0; }

/* --------------------------------------------------------------------------
   12. Location / visit
   -------------------------------------------------------------------------- */
.visit {
  display: grid;
  gap: 34px;
  align-items: start;
}
@media (min-width: 900px) { .visit { grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; } }
.visit__lead { margin: 0 0 16px; color: var(--slate); font-size: 1.05rem; }

/* Instant-photo frame for the real group shots, held on with a strip of
   tape. Not wrapped in .reveal on purpose: reveal animates transform and
   would flatten the tilt. */
.polaroid {
  position: relative;
  margin: 0 auto;
  max-width: 440px;
  padding: 10px 10px 0;
  background: var(--white);
  border-radius: 4px;
  box-shadow: var(--shadow-lg);
  transform: rotate(-1.6deg);
}
.polaroid::before {
  content: "";
  position: absolute;
  top: -13px; left: 50%;
  width: 116px; height: 28px;
  transform: translateX(-50%) rotate(-3deg);
  background: rgba(246, 146, 30, .55);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}
.polaroid img { display: block; width: 100%; height: auto; border-radius: 2px; }
.polaroid figcaption {
  padding: 14px 8px 16px;
  text-align: center;
  font-family: var(--font-display);
  font-size: 1.08rem;
  line-height: 1.3;
  color: var(--ink);
}
.polaroid--team { transform: rotate(1.6deg); }
.polaroid--team::before { background: rgba(0, 168, 156, .45); transform: translateX(-50%) rotate(4deg); }
/* Family photo is portrait: a landscape crop on the faces and the signs. */
.polaroid--wide { margin-bottom: 30px; padding-bottom: 10px; }
.polaroid--wide img { aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 42%; }
@media (min-width: 760px) and (max-width: 899px) {
  .polaroid--wide { max-width: 520px; }
  .polaroid--wide img { aspect-ratio: 3 / 2; }
}

.visit__media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: var(--ink-3);
}
.visit__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.hours { width: 100%; border-collapse: collapse; margin: 16px 0 14px; }
.hours th,
.hours td { padding: 10px 0; font-size: .96rem; text-align: left; }
.hours th { font-weight: 500; color: var(--slate); }
.hours td { text-align: right; font-weight: 700; color: var(--ink); }
.hours tr + tr th,
.hours tr + tr td { border-top: 1.5px dashed var(--line-warm); }
.hours .closed td { color: var(--grey); font-weight: 500; }
.hours tr.is-today th,
.hours tr.is-today td { color: var(--teal-darker); }
.hours tr.is-today th::after {
  content: "Today";
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--teal-tint);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  vertical-align: middle;
}

.visit__note { margin: 0 0 20px; font-size: .92rem; color: var(--slate); }

.addr {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 16px 18px;
  background: var(--white);
  border: 1px solid var(--line-warm);
  border-radius: var(--radius);
  margin-bottom: 8px;
}
.addr svg {
  width: 42px; height: 42px;
  padding: 10px;
  border-radius: 50%;
  background: var(--orange);
  fill: #2a1600;
  flex: none;
}
.addr p { margin: 0; font-size: .98rem; line-height: 1.4; }
.addr strong { display: block; font-size: 1.05rem; }

.visit__btns { display: grid; gap: 12px; }
@media (min-width: 520px) { .visit__btns { grid-template-columns: 1fr 1fr; } }

/* --------------------------------------------------------------------------
   13. FAQ
   -------------------------------------------------------------------------- */
.faq { max-width: 820px; margin-inline: auto; }

.faq details {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 10px;
  overflow: hidden;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.faq details[open] { border-color: var(--teal-tint-2); box-shadow: inset 4px 0 0 var(--teal), var(--shadow-sm); }

.faq summary {
  list-style: none;
  cursor: pointer;
  /* 58px tall at minimum: comfortably past the 44px touch target. */
  min-height: 58px;
  display: flex;
  align-items: center;
  padding: 13px 62px 13px 20px;
  font-weight: 700;
  font-size: 1.03rem;
  line-height: 1.35;
  position: relative;
  color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
/* Plus that turns into a minus: a round teal button on the right. */
.faq summary::before,
.faq summary::after {
  content: "";
  position: absolute;
  right: 31px; top: 50%;
  width: 12px; height: 2.5px;
  margin: -1.25px -6px 0 0;
  border-radius: 2px;
  background: var(--teal-darker);
  transition: transform .22s ease;
}
.faq summary::after { transform: rotate(90deg); }
.faq details[open] summary::after { transform: rotate(0deg); }
.faq summary { background-image: radial-gradient(circle 15px at calc(100% - 31px) 50%, var(--teal-tint) 98%, transparent); }
.faq summary:hover { color: var(--teal-dark); }

.faq .faq__a { padding: 0 20px 20px; font-size: .97rem; color: var(--slate); }
.faq .faq__a p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   14. Final CTA

   A giant outlined 60:00 game clock sits behind the closing line.
   -------------------------------------------------------------------------- */
.finalcta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(60% 80% at 15% 100%, rgba(0, 168, 156, .45), transparent 70%),
    radial-gradient(55% 75% at 90% 0%, rgba(246, 146, 30, .28), transparent 70%),
    radial-gradient(80% 90% at 50% 50%, rgba(46, 49, 145, .55), transparent 80%),
    var(--ink);
  color: var(--white);
  text-align: center;
  padding-block: clamp(64px, 10vw, 128px);
}
.finalcta__clock {
  position: absolute;
  left: 50%; top: 50%;
  z-index: -1;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(9rem, 36vw, 27rem);
  line-height: 1;
  letter-spacing: -.02em;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 2px rgba(255, 255, 255, .08);
  pointer-events: none;
  user-select: none;
}
.finalcta .eyebrow { color: var(--teal-light); }
.finalcta h2 {
  color: var(--white);
  text-transform: uppercase;
  font-size: clamp(2.1rem, 5vw + 1rem, 4rem);
  line-height: .98;
  max-width: 16ch;
  margin-inline: auto;
}
.finalcta p { color: rgba(255, 255, 255, .86); max-width: 600px; margin-inline: auto; font-size: 1.08rem; }
.finalcta__btns {
  display: flex;
  justify-content: center;
  margin: 30px auto 0;
}
.finalcta__btns .btn { width: 100%; max-width: 360px; }
.finalcta__call { margin: 18px auto 0; font-size: 1rem; }
.finalcta__call a {
  display: inline-block;
  padding: 10px 4px;
  margin: -10px 0;
  color: var(--white);
  font-weight: 700;
  text-decoration-color: var(--orange);
  text-underline-offset: 3px;
}
.finalcta small { display: block; margin-top: 18px; font-size: .86rem; color: rgba(255, 255, 255, .62); }

/* --------------------------------------------------------------------------
   15. Footer
   -------------------------------------------------------------------------- */
.footer {
  background: #08090a;
  color: #8d959f;
  padding: 34px 0;
  font-size: .88rem;
  border-top: 1px solid rgba(255, 255, 255, .06);
}

.footer__inner {
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: center;
  text-align: center;
}
@media (min-width: 760px) {
  .footer__inner { flex-direction: row; justify-content: space-between; text-align: left; }
}
.footer img { height: 38px; width: auto; }
.footer a { color: #b9c0c8; text-decoration: none; }
.footer a:hover { color: var(--teal); }
.footer__links { display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center; }

/* --------------------------------------------------------------------------
   16. Sticky mobile CTA

   Phones only. Slides up once the hero CTA has scrolled away and slides
   away again while the booking section is in view (main.js drives the
   `is-on` class). `visibility` is switched as well as the transform so the
   link is not in the tab order while it is off screen.
   -------------------------------------------------------------------------- */
.stickybar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(12, 13, 14, .96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 2px solid var(--orange);
  box-shadow: 0 -10px 30px rgba(0, 0, 0, .25);
  transform: translateY(110%);
  visibility: hidden;
  transition: transform .25s ease, visibility 0s linear .25s;
}
.stickybar.is-on {
  transform: none;
  visibility: visible;
  transition: transform .25s ease;
}
.stickybar__text { margin: 0; display: flex; flex-direction: column; line-height: 1.25; font-size: .8rem; color: #a8b0ba; }
.stickybar__text strong { color: var(--white); font-family: var(--font-display); font-size: 1.08rem; letter-spacing: .01em; }
.stickybar .btn { min-height: 48px; padding: 10px 24px; box-shadow: 0 4px 0 0 var(--orange-dark); }

@media (max-width: 719px) {
  /* Clears the bar so it never sits on top of the footer text. */
  .footer { padding-bottom: calc(34px + 76px); }
}
@media (min-width: 720px) { .stickybar { display: none; } }

/* --------------------------------------------------------------------------
   17. Reveal-on-scroll (progressive enhancement)
   -------------------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(22px); }
.js .reveal { transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1); }
.reveal.is-in { opacity: 1; transform: none; }
html:not(.js) .reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}