/* ==========================================================================
   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
   ========================================================================== */

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

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

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

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

  --star: #fbbc04;
  --danger: #d64545;
  --success: #1f9d55;

  --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: 18px;
  --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 12px 32px rgba(12, 13, 14, .10);
  --shadow-lg: 0 8px 24px rgba(12, 13, 14, .14), 0 24px 60px rgba(12, 13, 14, .20);

  --wrap: 1160px;
  --gutter: 20px;
}

/* --------------------------------------------------------------------------
   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;
}

h1 { font-size: clamp(2rem, 6.2vw, 3.5rem); }
h2 { font-size: clamp(1.65rem, 4.4vw, 2.5rem); }
h3 { font-size: clamp(1.15rem, 2.6vw, 1.4rem); 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, 8vw, 88px) 0; }
.section--tint { background: var(--paper); }
.section--dark { background: var(--ink); color: #d7dbe0; }
.section--dark h2,
.section--dark h3 { color: var(--white); }

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

.eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--teal-dark);
  margin-bottom: 10px;
}
.section--dark .eyebrow { color: var(--teal); }

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

/* --------------------------------------------------------------------------
   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.02rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  transition: transform .12s ease, box-shadow .18s ease, background-color .18s ease;
}
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--orange);
  color: #2a1600;
  box-shadow: 0 6px 0 0 var(--orange-dark), var(--shadow-sm);
}
.btn--primary:hover { background: #ffa337; }

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

.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(--line);
}
.btn--outline:hover { border-color: var(--teal); color: var(--teal-dark); }

.btn--block { width: 100%; }
.btn--lg { min-height: 60px; font-size: 1.12rem; padding-inline: 32px; }

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

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
  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; }

.header__note {
  display: none;
  color: #b9c0c8;
  font-size: .92rem;
  font-weight: 500;
  white-space: nowrap;
}

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

@media (min-width: 720px) {
  .header__note { display: inline-block; }
  .header__logo img { height: 46px; }
}

/* --------------------------------------------------------------------------
   5. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  background: var(--ink);
  color: #e7eaee;
  isolation: isolate;
  overflow: hidden;
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 50%;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* One vignette rather than stacked scrims: centred copy needs cover
     behind it, but two overlays multiply and black the photograph out. */
  background:
    radial-gradient(115% 88% at 50% 42%, rgba(12, 13, 14, .58) 0%, rgba(12, 13, 14, .82) 58%, rgba(12, 13, 14, .95) 100%);
}

.hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: clamp(480px, 76vh, 720px);
  /* padding-block only. A `padding` shorthand here would wipe out the
     horizontal gutter that .wrap sets and push copy to the screen edge. */
  padding-block: clamp(44px, 8vw, 88px);
}

.hero h1 { color: var(--white); max-width: 16ch; }

/* From tablet up the headline is pinned to exactly two lines by breaking it
   at the phrase rather than trusting a character-count max-width: the second
   line is the teal place name, so the break has to land in the same spot at
   every width. Below this it wraps naturally, because 49 characters cannot
   sit on two readable lines on a phone. */
@media (min-width: 760px) {
  .hero h1 { max-width: none; }
  .hero__line { display: block; }
}
.hero h1 .accent { color: var(--teal); }

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 10px;
  margin-bottom: 18px;
  border: 1px solid rgba(0, 168, 156, .5);
  background: rgba(0, 168, 156, .12);
  border-radius: var(--radius-pill);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #7fe3da;
}
.hero__badge svg { width: 15px; height: 15px; fill: var(--teal); }

.hero__sub {
  font-size: clamp(1.02rem, 2.2vw, 1.22rem);
  color: #c8cfd7;
  max-width: 56ch;
  margin: 0 auto 28px;
  text-wrap: balance;
}
/* Wide enough for the subhead to fall on two lines instead of three. Runs
   past the usual 75-character measure, which is acceptable for two centred
   lines under a headline and would not be for a paragraph of body copy. */
@media (min-width: 760px) { .hero__sub { max-width: 80ch; } }

/* Left-aligned rows inside a centred block: centring the text itself would
   leave the four ticks on a ragged edge and slow the eye down. */
.hero__points {
  display: grid;
  gap: 12px;
  width: 100%;
  max-width: 760px;
  margin: 0 auto 30px;
  text-align: left;
}
@media (min-width: 640px) {
  .hero__points { grid-template-columns: 1fr 1fr; column-gap: 32px; }
}
.hero__points li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: .98rem;
  color: #dde2e8;
  line-height: 1.45;
}
.hero__points svg { width: 20px; height: 20px; flex: none; margin-top: 1px; fill: var(--teal); }

.hero__cta { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.hero__cta .btn { min-width: min(100%, 320px); }

.hero__alt { margin: 0; font-size: .92rem; color: #a8b0ba; }
.hero__alt a { color: var(--teal); font-weight: 700; white-space: nowrap; }
.hero__alt a:hover { color: #4fd8cc; }

/* --------------------------------------------------------------------------
   7. Reviews / social proof
   -------------------------------------------------------------------------- */
.ratings {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
  align-items: stretch;
}
/* Three cards, so an explicit 1 or 3 rather than auto-fit: auto-fit drops to
   two columns first and leaves the third card orphaned on its own row. */
@media (min-width: 600px) { .ratings { grid-template-columns: repeat(3, 1fr); gap: 16px; } }

.rating-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 16px;
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.rating-card .score {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
}
.rating-card .stars { display: flex; justify-content: center; gap: 2px; margin: 8px 0 6px; }
.rating-card .stars svg { width: 18px; height: 18px; fill: var(--star); }
.rating-card .place { font-weight: 700; font-size: 1rem; }
.rating-card .count { font-size: .85rem; color: var(--grey); }
.rating-card.is-primary { border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-tint), var(--shadow-sm); }

/* --------------------------------------------------------------------------
   Review marquee: one self-scrolling row on every screen size.

   The track holds the quotes twice (main.js clones the set) and slides left
   by exactly one set plus one gap, so the loop is seamless. The gap has to be
   folded into the translate, otherwise the second set starts a gap-width too
   early and the row visibly jumps once per cycle.
   -------------------------------------------------------------------------- */
.marquee {
  --marquee-gap: 20px;
  position: relative;
  margin-top: clamp(22px, 3vw, 32px);
  overflow: hidden;
  /* Fades the cards in and out at the edges instead of clipping them dead. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}

.marquee__track {
  display: flex;
  gap: var(--marquee-gap);
  width: max-content;
  align-items: stretch;
  animation: marquee-scroll 60s linear infinite;
}
.marquee__set { display: flex; gap: var(--marquee-gap); align-items: stretch; }

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - (var(--marquee-gap) / 2))); }
}

/* Stop it while someone is reading, or tabbing through the quotes. */
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track { animation-play-state: paused; }

.marquee .quote {
  flex: 0 0 clamp(280px, 78vw, 380px);
  margin: 0;
}

/* Without JS there is no cloned set, so let the row be swiped by hand. */
html:not(.js) .marquee { overflow-x: auto; }
html:not(.js) .marquee__track { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .marquee { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .marquee__track { animation: none; }
}

.quote {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 4px solid var(--teal);
  border-radius: var(--radius);
  padding: 20px 22px;
  margin: 0;
  box-shadow: var(--shadow-sm);
}
.quote .stars { display: flex; gap: 2px; margin-bottom: 10px; }
.quote .stars svg { width: 16px; height: 16px; fill: var(--star); }
.quote p {
  font-size: .97rem;
  line-height: 1.55;
  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. */
.quote footer {
  margin-top: auto;
  padding-top: 4px;
  font-size: .84rem;
  color: var(--grey);
  font-weight: 500;
}
.quote footer strong { color: var(--ink); display: block; font-size: .9rem; }

/* --------------------------------------------------------------------------
   8. Rooms
   -------------------------------------------------------------------------- */
.rooms {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}
@media (min-width: 700px) { .rooms { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .rooms { grid-template-columns: repeat(3, 1fr); } }

.room {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease;
}
.room:hover { transform: translateY(-4px); box-shadow: var(--shadow); }

/* flex:none keeps every card's image the same height regardless of how much
   copy sits below it. Otherwise the flex column stretches the shortest card.
   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 {
  position: relative;
  flex: none;
  min-height: 0;
  aspect-ratio: 3 / 2;
  background: var(--ink-3);
  overflow: hidden;
}
.room__media img { width: 100%; height: 100%; object-fit: cover; }

/* Two of the three Marina del Rey rooms only have a title treatment on a
   transparent background, not a photograph. Those get `contain` plus a
   backdrop tuned to the artwork: the London logo is dark ink, so it needs a
   light ground, and the Pharaohs logo is gold, so it needs a dark one. */
.room__media--art img { object-fit: contain; padding: 9% 8%; }
.room__media--london   { background: linear-gradient(155deg, #e7ecf1 0%, #c3ccd6 100%); }
.room__media--pharaohs { background: linear-gradient(155deg, #2b1c08 0%, #6a4212 100%); }

.room__tag {
  position: absolute;
  top: 12px; left: 12px;
  padding: 5px 12px;
  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: rgba(12, 13, 14, .78);
  backdrop-filter: blur(4px);
}
.room__tag--beginner { background: rgba(0, 168, 156, .92); color: #002e2b; }
.room__tag--intermediate { background: rgba(246, 146, 30, .94); color: #2a1600; }
.room__tag--advanced { background: rgba(46, 49, 145, .94); }

.room__body { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.room__body h3 { margin-bottom: 6px; }
.room__body p { font-size: .94rem; color: var(--slate); }

.room__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 12px 0 16px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  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 .btn { margin-top: auto; }

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

.feature {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 22px;
  box-shadow: var(--shadow-sm);
}
.feature__icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: var(--teal-tint);
  display: grid;
  place-items: center;
  margin-bottom: 14px;
}
.feature__icon svg { width: 26px; height: 26px; fill: var(--teal-dark); }
.feature h3 { font-size: 1.12rem; margin-bottom: 6px; }
.feature p { font-size: .94rem; color: var(--slate); margin: 0; }

.steps {
  display: grid;
  gap: 22px;
  counter-reset: step;
}
@media (min-width: 780px) { .steps { grid-template-columns: repeat(3, 1fr); } }

.stepcard { position: relative; padding-left: 62px; }
.stepcard::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 0; top: -4px;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--orange);
  color: #2a1600;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  display: grid;
  place-items: center;
}
.stepcard h3 { font-size: 1.12rem; margin-bottom: 6px; }
.stepcard p { font-size: .95rem; margin: 0; color: var(--slate); }
/* Kept so the block still reads correctly if it is ever moved back onto a
   dark section as part of a reshuffle. */
.section--dark .stepcard p { color: #a8b0ba; }

/* --------------------------------------------------------------------------
   10. Pricing
   -------------------------------------------------------------------------- */
.pricing {
  display: grid;
  gap: 20px;
  align-items: start;
}
@media (min-width: 860px) { .pricing { grid-template-columns: 1fr 1fr; } }

.pricecard {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.pricecard__head {
  padding: 16px 22px;
  background: var(--ink);
  color: var(--white);
}
.pricecard--weekend .pricecard__head { background: var(--teal-dark); }
.pricecard__head h3 { color: var(--white); font-size: 1.15rem; margin: 0; }
.pricecard__head span { font-size: .86rem; color: rgba(255, 255, 255, .78); }

.pricecard table { width: 100%; border-collapse: collapse; }
.pricecard th,
.pricecard td { padding: 14px 22px; text-align: left; font-size: .97rem; }
.pricecard th { font-weight: 500; color: var(--slate); }
.pricecard td {
  text-align: right;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.28rem;
  color: var(--ink);
  white-space: nowrap;
}
.pricecard tr + tr th,
.pricecard tr + tr td { border-top: 1px solid var(--line); }
.pricecard tr.is-best th { color: var(--teal-darker); font-weight: 700; }
.pricecard tr.is-best td { color: var(--teal-darker); }
.pricecard tr.is-best { background: var(--teal-tint); }

.price-note {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 22px;
  padding: 18px 22px;
  background: var(--orange-tint);
  border: 1px solid #f7dcb4;
  border-radius: var(--radius);
  font-size: .92rem;
  color: #7a4a05;
}
.price-note strong { color: #5c3703; }
.price-note span { display: inline-flex; align-items: center; gap: 8px; }
.price-note svg { width: 18px; height: 18px; fill: var(--orange-dark); flex: none; }

/* --------------------------------------------------------------------------
   11. Occasions
   -------------------------------------------------------------------------- */
.occasions {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 760px) { .occasions { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .occasions { grid-template-columns: repeat(5, 1fr); } }

.occasion {
  background: var(--ink-2);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--radius);
  padding: 20px 18px;
  text-align: center;
}
.occasion svg { width: 30px; height: 30px; fill: var(--teal); 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: 26px;
  align-items: start;
}
@media (min-width: 900px) { .visit { grid-template-columns: 1fr 1fr; gap: 44px; } }
.visit--solo { max-width: 620px; margin-inline: auto; }
@media (min-width: 900px) { .visit--solo { grid-template-columns: 1fr; } }

.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: 18px 0 22px; }
.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: 1px solid var(--line); }
.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;
}

.addr {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 16px 18px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 16px;
}
.addr svg { width: 22px; height: 22px; fill: var(--teal-dark); flex: none; margin-top: 2px; }
.addr p { margin: 0; font-size: .96rem; }
.addr strong { display: block; }

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

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

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

.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 17px 52px 17px 20px;
  font-weight: 700;
  font-size: 1.02rem;
  position: relative;
  color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute;
  right: 20px; top: 50%;
  width: 12px; height: 12px;
  margin-top: -7px;
  border-right: 2.5px solid var(--teal-dark);
  border-bottom: 2.5px solid var(--teal-dark);
  transform: rotate(45deg);
  transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -3px; }
.faq summary:hover { color: var(--teal-dark); }

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

/* --------------------------------------------------------------------------
   13b. Live booking widget (Bookeo)
   -------------------------------------------------------------------------- */
.booking__card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
  max-width: 940px;
  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;
  gap: 10px 24px;
  padding: 14px 20px;
  background: linear-gradient(135deg, var(--teal-dark) 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; }

.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: 640px;
  margin: 22px auto 0;
  text-align: center;
  font-size: .95rem;
  color: #a8b0ba;
}
.booking__foot strong,
.booking__foot [data-capacity] { color: var(--white); font-weight: 700; }

/* --------------------------------------------------------------------------
   14. Final CTA
   -------------------------------------------------------------------------- */
.finalcta {
  background:
    linear-gradient(135deg, rgba(0, 134, 125, .97) 0%, rgba(0, 168, 156, .93) 55%, rgba(46, 49, 145, .9) 100%),
    var(--ink);
  color: var(--white);
  text-align: center;
}
.finalcta h2 { color: var(--white); }
.finalcta p { color: rgba(255, 255, 255, .92); max-width: 620px; margin-inline: auto; font-size: 1.06rem; }
.finalcta__btns {
  display: grid;
  gap: 12px;
  max-width: 460px;
  margin: 26px auto 0;
}
@media (min-width: 520px) {
  .finalcta__btns { grid-template-columns: 1fr 1fr; max-width: 560px; }
  .finalcta__btns--single { grid-template-columns: minmax(0, 340px); max-width: 340px; }
}
.finalcta small { display: block; margin-top: 18px; font-size: .86rem; color: rgba(255, 255, 255, .8); }

/* --------------------------------------------------------------------------
   15. Footer
   -------------------------------------------------------------------------- */
.footer {
  background: var(--ink);
  color: #8d959f;
  padding: 34px 0;
  font-size: .88rem;
}

.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. Reveal-on-scroll (progressive enhancement)
   -------------------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(18px); }
.js .reveal { transition: opacity .5s ease, transform .5s ease; }
.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;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}