/* ==========================================================================
   The Ultimate Escape Rooms: Lead Gen Landing Page (lp-4, Julefest)

   Design idea: "A Danish village window at Julefest". Not the Christmas
   look of lp-3 (no pine, snow, wreath or baubles). This one borrows from
   Solvang's Danish side: Dannebrog red and white, half-timbered walls,
   red shutters with heart cut-outs, woven paper hearts, cross-stitch
   borders, bunting and candlelight on dark walnut timber. Roboto only;
   every extra is CSS or inline SVG, no new fonts and no scripts.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  --teal: #c8102e;
  --teal-dark: #a60d27;
  --teal-darker: #7f0a1f;
  --teal-light: #f0d28e;
  --teal-tint: #f8e6e2;
  --teal-tint-2: #f0cdc8;

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

  /* Julefest layer (lp-4 only). Walnut timber replaces ink as the dark base;
     Dannebrog red replaces orange for decoration. Orange stays reserved for
     the Book buttons (it reads as candle flame on the timber) so the CTA is
     still the one thing to press. */
  --timber: #22150f;
  --timber-2: #3a2418;
  --timber-3: #5a3a28;
  --red: #c8102e;
  --red-dark: #9a0b22;
  --straw: #e8c26a;
  --plaster: #fbf6ec;
  --moss: #2f6b4c;
  --moss-dark: #1f4a34;
  --moss-light: #8fc2a2;
  --moss-tint: #e3efe6;

  /* Generated art (inline SVG, no extra requests). */
  --heart-weave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -10 60 70'%3E%3Cdefs%3E%3CclipPath id='hw'%3E%3Cpath d='M30 56C10 42 3 32 3 21C3 11 10 5 18 5C23 5 27.5 8 30 13C32.5 8 37 5 42 5C50 5 57 11 57 21C57 32 50 42 30 56Z'/%3E%3C/clipPath%3E%3C/defs%3E%3Cpath d='M17 9C15 -9 45 -9 43 9' fill='none' stroke='%23c8102e' stroke-width='2.6' stroke-linecap='round'/%3E%3Cg clip-path='url(%23hw)'%3E%3Crect width='60' height='60' fill='%23fbf6ec'/%3E%3Crect x='0' y='0' width='10' height='10' fill='%23c8102e'/%3E%3Crect x='20' y='0' width='10' height='10' fill='%23c8102e'/%3E%3Crect x='40' y='0' width='10' height='10' fill='%23c8102e'/%3E%3Crect x='10' y='10' width='10' height='10' fill='%23c8102e'/%3E%3Crect x='30' y='10' width='10' height='10' fill='%23c8102e'/%3E%3Crect x='50' y='10' width='10' height='10' fill='%23c8102e'/%3E%3Crect x='0' y='20' width='10' height='10' fill='%23c8102e'/%3E%3Crect x='20' y='20' width='10' height='10' fill='%23c8102e'/%3E%3Crect x='40' y='20' width='10' height='10' fill='%23c8102e'/%3E%3Crect x='10' y='30' width='10' height='10' fill='%23c8102e'/%3E%3Crect x='30' y='30' width='10' height='10' fill='%23c8102e'/%3E%3Crect x='50' y='30' width='10' height='10' fill='%23c8102e'/%3E%3Crect x='0' y='40' width='10' height='10' fill='%23c8102e'/%3E%3Crect x='20' y='40' width='10' height='10' fill='%23c8102e'/%3E%3Crect x='40' y='40' width='10' height='10' fill='%23c8102e'/%3E%3Crect x='10' y='50' width='10' height='10' fill='%23c8102e'/%3E%3Crect x='30' y='50' width='10' height='10' fill='%23c8102e'/%3E%3Crect x='50' y='50' width='10' height='10' fill='%23c8102e'/%3E%3C/g%3E%3Cpath d='M30 56C10 42 3 32 3 21C3 11 10 5 18 5C23 5 27.5 8 30 13C32.5 8 37 5 42 5C50 5 57 11 57 21C57 32 50 42 30 56Z' fill='none' stroke='%238f0b22' stroke-width='1.6'/%3E%3C/svg%3E");
  --heart-solid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath d='M30 56C10 42 3 32 3 21C3 11 10 5 18 5C23 5 27.5 8 30 13C32.5 8 37 5 42 5C50 5 57 11 57 21C57 32 50 42 30 56Z' fill='%23000'/%3E%3C/svg%3E");
  --rule-red: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 26'%3E%3Cg stroke='%23c8102e' stroke-width='2' stroke-linecap='round' stroke-dasharray='5 5'%3E%3Cpath d='M6 13H98'/%3E%3Cpath d='M142 13H234'/%3E%3C/g%3E%3Cg transform='translate(108 0) scale(.4333)'%3E%3Cdefs%3E%3CclipPath id='dv'%3E%3Cpath d='M30 56C10 42 3 32 3 21C3 11 10 5 18 5C23 5 27.5 8 30 13C32.5 8 37 5 42 5C50 5 57 11 57 21C57 32 50 42 30 56Z'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg clip-path='url(%23dv)'%3E%3Crect y='4' width='60' height='56' fill='%23fbf6ec'/%3E%3Crect x='0' y='0' width='10' height='10' fill='%23c8102e'/%3E%3Crect x='20' y='0' width='10' height='10' fill='%23c8102e'/%3E%3Crect x='40' y='0' width='10' height='10' fill='%23c8102e'/%3E%3Crect x='10' y='10' width='10' height='10' fill='%23c8102e'/%3E%3Crect x='30' y='10' width='10' height='10' fill='%23c8102e'/%3E%3Crect x='50' y='10' width='10' height='10' fill='%23c8102e'/%3E%3Crect x='0' y='20' width='10' height='10' fill='%23c8102e'/%3E%3Crect x='20' y='20' width='10' height='10' fill='%23c8102e'/%3E%3Crect x='40' y='20' width='10' height='10' fill='%23c8102e'/%3E%3Crect x='10' y='30' width='10' height='10' fill='%23c8102e'/%3E%3Crect x='30' y='30' width='10' height='10' fill='%23c8102e'/%3E%3Crect x='50' y='30' width='10' height='10' fill='%23c8102e'/%3E%3Crect x='0' y='40' width='10' height='10' fill='%23c8102e'/%3E%3Crect x='20' y='40' width='10' height='10' fill='%23c8102e'/%3E%3Crect x='40' y='40' width='10' height='10' fill='%23c8102e'/%3E%3Crect x='10' y='50' width='10' height='10' fill='%23c8102e'/%3E%3Crect x='30' y='50' width='10' height='10' fill='%23c8102e'/%3E%3Crect x='50' y='50' width='10' height='10' fill='%23c8102e'/%3E%3C/g%3E%3Cpath d='M30 56C10 42 3 32 3 21C3 11 10 5 18 5C23 5 27.5 8 30 13C32.5 8 37 5 42 5C50 5 57 11 57 21C57 32 50 42 30 56Z' fill='none' stroke='%238f0b22' stroke-width='3'/%3E%3C/g%3E%3C/svg%3E");
  --rule-straw: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 26'%3E%3Cg stroke='%23e8c26a' stroke-width='2' stroke-linecap='round' stroke-dasharray='5 5'%3E%3Cpath d='M6 13H98'/%3E%3Cpath d='M142 13H234'/%3E%3C/g%3E%3Cg transform='translate(108 0) scale(.4333)'%3E%3Cdefs%3E%3CclipPath id='dv'%3E%3Cpath d='M30 56C10 42 3 32 3 21C3 11 10 5 18 5C23 5 27.5 8 30 13C32.5 8 37 5 42 5C50 5 57 11 57 21C57 32 50 42 30 56Z'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg clip-path='url(%23dv)'%3E%3Crect y='4' width='60' height='56' fill='%23fbf6ec'/%3E%3Crect x='0' y='0' width='10' height='10' fill='%23c8102e'/%3E%3Crect x='20' y='0' width='10' height='10' fill='%23c8102e'/%3E%3Crect x='40' y='0' width='10' height='10' fill='%23c8102e'/%3E%3Crect x='10' y='10' width='10' height='10' fill='%23c8102e'/%3E%3Crect x='30' y='10' width='10' height='10' fill='%23c8102e'/%3E%3Crect x='50' y='10' width='10' height='10' fill='%23c8102e'/%3E%3Crect x='0' y='20' width='10' height='10' fill='%23c8102e'/%3E%3Crect x='20' y='20' width='10' height='10' fill='%23c8102e'/%3E%3Crect x='40' y='20' width='10' height='10' fill='%23c8102e'/%3E%3Crect x='10' y='30' width='10' height='10' fill='%23c8102e'/%3E%3Crect x='30' y='30' width='10' height='10' fill='%23c8102e'/%3E%3Crect x='50' y='30' width='10' height='10' fill='%23c8102e'/%3E%3Crect x='0' y='40' width='10' height='10' fill='%23c8102e'/%3E%3Crect x='20' y='40' width='10' height='10' fill='%23c8102e'/%3E%3Crect x='40' y='40' width='10' height='10' fill='%23c8102e'/%3E%3Crect x='10' y='50' width='10' height='10' fill='%23c8102e'/%3E%3Crect x='30' y='50' width='10' height='10' fill='%23c8102e'/%3E%3Crect x='50' y='50' width='10' height='10' fill='%23c8102e'/%3E%3C/g%3E%3Cpath d='M30 56C10 42 3 32 3 21C3 11 10 5 18 5C23 5 27.5 8 30 13C32.5 8 37 5 42 5C50 5 57 11 57 21C57 32 50 42 30 56Z' fill='none' stroke='%238f0b22' stroke-width='3'/%3E%3C/g%3E%3C/svg%3E");
  --bunting: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 48'%3E%3Cpath d='M0 4Q48 32 96 4' fill='none' stroke='%233a2418' stroke-width='1.6'/%3E%3Cg transform='translate(12.00 10.13) rotate(23.63)'%3E%3Cpath d='M-11 0H11L0 28Z' fill='%23c8102e' stroke='%238f0b22' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/g%3E%3Cg transform='translate(36.00 17.13) rotate(8.30)'%3E%3Cpath d='M-11 0H11L0 28Z' fill='%23fbf6ec' stroke='%23c8102e' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/g%3E%3Cg transform='translate(60.00 17.13) rotate(-8.30)'%3E%3Cpath d='M-11 0H11L0 28Z' fill='%232f6b4c' stroke='%231f4a34' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/g%3E%3Cg transform='translate(84.00 10.13) rotate(-23.63)'%3E%3Cpath d='M-11 0H11L0 28Z' fill='%23fbf6ec' stroke='%232f6b4c' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E");
  --stitch-red: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 18'%3E%3Cg stroke='%23c8102e' stroke-width='.95' stroke-linecap='round' fill='none'%3E%3Cpath d='M3.5 0.5l2 2m0 -2l-2 2'/%3E%3Cpath d='M6.5 0.5l2 2m0 -2l-2 2'/%3E%3Cpath d='M12.5 0.5l2 2m0 -2l-2 2'/%3E%3Cpath d='M15.5 0.5l2 2m0 -2l-2 2'/%3E%3Cpath d='M0.5 3.5l2 2m0 -2l-2 2'/%3E%3Cpath d='M3.5 3.5l2 2m0 -2l-2 2'/%3E%3Cpath d='M6.5 3.5l2 2m0 -2l-2 2'/%3E%3Cpath d='M9.5 3.5l2 2m0 -2l-2 2'/%3E%3Cpath d='M12.5 3.5l2 2m0 -2l-2 2'/%3E%3Cpath d='M15.5 3.5l2 2m0 -2l-2 2'/%3E%3Cpath d='M18.5 3.5l2 2m0 -2l-2 2'/%3E%3Cpath d='M0.5 6.5l2 2m0 -2l-2 2'/%3E%3Cpath d='M3.5 6.5l2 2m0 -2l-2 2'/%3E%3Cpath d='M6.5 6.5l2 2m0 -2l-2 2'/%3E%3Cpath d='M9.5 6.5l2 2m0 -2l-2 2'/%3E%3Cpath d='M12.5 6.5l2 2m0 -2l-2 2'/%3E%3Cpath d='M15.5 6.5l2 2m0 -2l-2 2'/%3E%3Cpath d='M18.5 6.5l2 2m0 -2l-2 2'/%3E%3Cpath d='M3.5 9.5l2 2m0 -2l-2 2'/%3E%3Cpath d='M6.5 9.5l2 2m0 -2l-2 2'/%3E%3Cpath d='M9.5 9.5l2 2m0 -2l-2 2'/%3E%3Cpath d='M12.5 9.5l2 2m0 -2l-2 2'/%3E%3Cpath d='M15.5 9.5l2 2m0 -2l-2 2'/%3E%3Cpath d='M6.5 12.5l2 2m0 -2l-2 2'/%3E%3Cpath d='M9.5 12.5l2 2m0 -2l-2 2'/%3E%3Cpath d='M12.5 12.5l2 2m0 -2l-2 2'/%3E%3Cpath d='M9.5 15.5l2 2m0 -2l-2 2'/%3E%3C/g%3E%3C/svg%3E");
  --stitch-straw: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 18'%3E%3Cg stroke='%23e8c26a' stroke-width='.95' stroke-linecap='round' fill='none'%3E%3Cpath d='M3.5 0.5l2 2m0 -2l-2 2'/%3E%3Cpath d='M6.5 0.5l2 2m0 -2l-2 2'/%3E%3Cpath d='M12.5 0.5l2 2m0 -2l-2 2'/%3E%3Cpath d='M15.5 0.5l2 2m0 -2l-2 2'/%3E%3Cpath d='M0.5 3.5l2 2m0 -2l-2 2'/%3E%3Cpath d='M3.5 3.5l2 2m0 -2l-2 2'/%3E%3Cpath d='M6.5 3.5l2 2m0 -2l-2 2'/%3E%3Cpath d='M9.5 3.5l2 2m0 -2l-2 2'/%3E%3Cpath d='M12.5 3.5l2 2m0 -2l-2 2'/%3E%3Cpath d='M15.5 3.5l2 2m0 -2l-2 2'/%3E%3Cpath d='M18.5 3.5l2 2m0 -2l-2 2'/%3E%3Cpath d='M0.5 6.5l2 2m0 -2l-2 2'/%3E%3Cpath d='M3.5 6.5l2 2m0 -2l-2 2'/%3E%3Cpath d='M6.5 6.5l2 2m0 -2l-2 2'/%3E%3Cpath d='M9.5 6.5l2 2m0 -2l-2 2'/%3E%3Cpath d='M12.5 6.5l2 2m0 -2l-2 2'/%3E%3Cpath d='M15.5 6.5l2 2m0 -2l-2 2'/%3E%3Cpath d='M18.5 6.5l2 2m0 -2l-2 2'/%3E%3Cpath d='M3.5 9.5l2 2m0 -2l-2 2'/%3E%3Cpath d='M6.5 9.5l2 2m0 -2l-2 2'/%3E%3Cpath d='M9.5 9.5l2 2m0 -2l-2 2'/%3E%3Cpath d='M12.5 9.5l2 2m0 -2l-2 2'/%3E%3Cpath d='M15.5 9.5l2 2m0 -2l-2 2'/%3E%3Cpath d='M6.5 12.5l2 2m0 -2l-2 2'/%3E%3Cpath d='M9.5 12.5l2 2m0 -2l-2 2'/%3E%3Cpath d='M12.5 12.5l2 2m0 -2l-2 2'/%3E%3Cpath d='M9.5 15.5l2 2m0 -2l-2 2'/%3E%3C/g%3E%3C/svg%3E");
  --shutter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 94 350'%3E%3Cdefs%3E%3Cmask id='m'%3E%3Crect width='94' height='350' fill='%23fff'/%3E%3Cg transform='translate(27 38) scale(.67)'%3E%3Cpath d='M30 56C10 42 3 32 3 21C3 11 10 5 18 5C23 5 27.5 8 30 13C32.5 8 37 5 42 5C50 5 57 11 57 21C57 32 50 42 30 56Z' fill='%23000'/%3E%3C/g%3E%3C/mask%3E%3C/defs%3E%3Cg mask='url(%23m)'%3E%3Crect width='94' height='350' rx='4' fill='%232f6b4c'/%3E%3Cg stroke='%231f4a34' stroke-width='2'%3E%3Cpath d='M31 0V350'/%3E%3Cpath d='M63 0V350'/%3E%3C/g%3E%3Crect x='4' y='4' width='86' height='342' rx='2' fill='none' stroke='%235f9a78' stroke-opacity='.6' stroke-width='1.5'/%3E%3Cpath d='M0 150H94M0 158H94' stroke='%231f4a34' stroke-width='3'/%3E%3C/g%3E%3C/svg%3E");

  --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(200, 16, 46, .26), transparent 70%),
    radial-gradient(60% 50% at 0% 100%, rgba(90, 58, 40, .55), transparent 70%),
    var(--timber);
  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(--straw); }

.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: var(--white);
  box-shadow: 0 5px 0 0 var(--teal-darker), var(--shadow-sm);
}
.btn--teal:hover { background: var(--teal-dark); }
.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: var(--timber);
  border-bottom: 3px solid var(--red);
}

.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: #e8c26a; 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

   Sized by its content, not by a viewport-height minimum. On a phone the
   whole thing, CTA included, has to land inside the first screen; a tall
   hero with a short message just pushes the button out of sight.

   Phone: the windmill photo is a full-bleed backdrop under a left-weighted
   scrim, copy left-aligned on top.
   980px up: two columns. Copy left; the photo moves into a keyhole on the
   right with an orange offset print behind it and a 60:00 ticket stub.
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  background: var(--timber);
  color: #e7eaee;
  isolation: isolate;
  overflow: hidden;
}

/* Hero visual (the shuttered window): section 18. */

.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(34, 21, 15, .2) 0%, rgba(34, 21, 15, .58) 50%, rgba(34, 21, 15, .94) 100%),
    linear-gradient(90deg, rgba(34, 21, 15, .88) 0%, rgba(34, 21, 15, .6) 70%, rgba(34, 21, 15, .38) 100%);
}

/* Not positioned: on a phone .hero__visual has to resolve its inset against
   .hero itself so the photo covers the full band. */
.hero__inner {
  /* 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(26px, 6vw, 72px) clamp(32px, 6vw, 80px);
}
.hero__copy { max-width: 640px; }

.hero h1 { color: var(--white); margin-bottom: .32em; text-transform: uppercase; }
.hero h1 .accent {
  color: var(--straw);
  white-space: nowrap;
  /* Hand-drawn berry underline under the key word. */
  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='%23E23A4E' 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(232, 194, 106, .65);
  background: rgba(232, 194, 106, .12);
  border-radius: var(--radius-sm);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--straw);
  text-align: left;
  line-height: 1.35;
}
.hero__badge svg { width: 16px; height: 16px; fill: var(--straw); flex: none; }

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

.hero__points {
  display: grid;
  gap: 8px;
  margin: 0 0 22px;
}
.hero__points li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .96rem;
  color: #dde2e8;
  line-height: 1.35;
}
.hero__points svg { width: 20px; height: 20px; flex: none; fill: var(--teal); }
.hero__points strong { color: var(--white); }
@media (min-width: 640px) {
  .hero__points { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
  .hero__points li {
    padding: 8px 14px 8px 10px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, .05);
    font-size: .95rem;
  }
  .hero__points svg { width: 18px; height: 18px; }
}

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

/* Street address under the proof row: confirms "near me" clicks that the
   visitor has landed on a real place nearby. Below the CTA, so it never
   pushes the button down. */
.hero__loc {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 4px 0 0;
  font-size: .9rem;
  color: #b4bcc6;
}
.hero__loc svg { width: 15px; height: 15px; flex: none; fill: var(--teal); }
.hero__loc strong { color: var(--white); font-weight: 500; }

/* The phone as a real second route here: near-me and "things to do today"
   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); }

@media (min-width: 980px) {
  .hero {
    background:
      var(--dots),
      radial-gradient(55% 75% at 82% 45%, rgba(90, 58, 40, .85), transparent 70%),
      radial-gradient(45% 55% at 0% 0%, rgba(200, 16, 46, .2), transparent 70%),
      var(--timber);
  }
  .hero::before { display: none; }

  .hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
    align-items: center;
    gap: clamp(40px, 5vw, 80px);
    min-height: min(calc(100vh - var(--header-h)), 720px);
  }

}

/* Copy rises in order on load; the scene fades in (section 18). */
@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; }

/* --------------------------------------------------------------------------
   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(--red); box-shadow: 0 14px 34px rgba(200, 16, 46, .18); }
.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(--straw); color: #3a2410; }
.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: #b98a1c; }
.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: var(--straw);
}
.booking__live i::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--straw);
  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(232, 194, 106, .5); }
.occasion svg {
  width: 44px; height: 44px;
  padding: 10px;
  border-radius: 50%;
  background: rgba(232, 194, 106, .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(200, 16, 46, .35); 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(90, 58, 40, .8), transparent 70%),
    radial-gradient(55% 75% at 90% 0%, rgba(200, 16, 46, .4), transparent 70%),
    radial-gradient(80% 90% at 50% 50%, rgba(232, 150, 60, .16), transparent 80%),
    var(--timber);
  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(--straw); }
.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: #150d09;
  color: #a49a92;
  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: var(--timber);
  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; }
}

/* --------------------------------------------------------------------------

/* --------------------------------------------------------------------------
   18. Julefest layer (lp-4 only)

   Danish village, not Christmas card. Dannebrog red and plaster white on
   walnut timber, with a shuttered window for the hero, woven paper hearts
   (julehjerter), bunting, cross-stitch borders and candlelight. Orange is
   still only for the Book buttons. Everything is CSS or inline SVG from the
   custom properties in :root; there is no script and no image to load.
   -------------------------------------------------------------------------- */

/* Eyebrows: a small red heart at both ends (straw on dark bands). */
.eyebrow::before,
.eyebrow::after {
  content: "";
  flex: none;
  width: 15px; height: 14px;
  background: var(--red);
  -webkit-mask: var(--heart-solid) center / contain no-repeat;
          mask: var(--heart-solid) center / contain no-repeat;
}
.section--dark .eyebrow::before, .section--dark .eyebrow::after,
.finalcta .eyebrow::before, .finalcta .eyebrow::after,
.hero .eyebrow::before, .hero .eyebrow::after { background: var(--straw); }

/* Heading ornament: stitched line, woven heart, stitched line. */
.section-head h2::after {
  content: "";
  display: block;
  height: 26px;
  margin-top: 12px;
  background: var(--rule-red) center / 240px 26px no-repeat;
}
.section--dark .section-head h2::after { background-image: var(--rule-straw); }
@media (min-width: 900px) {
  .who__head h2::after { background-position: left center; }
}

/* Dark bands start with a row of cross-stitched hearts (replaces the ticket tear). */
.section--dark::before,
.finalcta::before {
  top: 0;
  height: 18px;
  background: var(--stitch-straw) 0 0 / 24px 18px repeat-x;
  opacity: .85;
}
.finalcta::before { display: none; }

/* Header and small accents on dark. */
.header__phone svg,
.hero__points svg,
.hero__loc svg,
.hero__call svg,
.section--dark .occasion svg,
.booking__trust svg { fill: var(--straw); }
.header__phone:hover svg { fill: #f6d98c; }

/* Pricing: walnut instead of ink for the best-value strip and table head. */
.pricing__best { background: var(--timber); }
.pricetable thead th { background: var(--timber); }
.pricetable thead th:last-child { background: var(--red-dark); }

/* ---- Hero ---------------------------------------------------------------- */
.hero__inner { padding-block-start: clamp(56px, 8vw, 98px); }
/* The two halves of the H1 each get a line from 480px up. */
@media (min-width: 480px) { .hero h1 .hero__line { display: block; } }

.bunting {
  position: absolute;
  left: 0; right: 0; top: 0;
  z-index: 1;
  height: 40px;
  background: var(--bunting) 0 0 / 80px 40px repeat-x;
  pointer-events: none;
}

/* Phone: the Nisse photo is the backdrop under the scrim. The window,
   shutters, sill and hearts only appear from 980px. */
.hero__visual { position: absolute; inset: 0; z-index: -2; }
.window { position: absolute; inset: 0; }
.window__frame { position: absolute; inset: 0; background: var(--timber-2); }
.window__frame img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 28% 50%;
}
.shutter, .window__sill, .hearts { display: none; }

.hero__fest {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 20px;
  font-size: .95rem;
  line-height: 1.4;
  color: #efe3cf;
}
.hero__fest svg { width: 17px; height: 17px; flex: none; margin-top: 2px; fill: var(--straw); }

@media (min-width: 640px) { .bunting { height: 48px; background-size: 96px 48px; } }

@media (min-width: 980px) {
  .hero {
    background:
      var(--dots),
      radial-gradient(46% 70% at 80% 46%, rgba(240, 150, 50, .24), transparent 72%),
      radial-gradient(45% 55% at 0% 0%, rgba(200, 16, 46, .22), transparent 70%),
      var(--timber);
  }
  .hero__inner {
    padding-block-start: clamp(68px, 7vw, 110px);
    grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  }

  .hero__visual {
    position: relative;
    inset: auto;
    z-index: 0;
    justify-self: center;
    width: min(100%, 540px);
    margin-top: 18px;
  }

  .window {
    position: relative;
    inset: auto;
    display: grid;
    grid-template-columns: 1fr 3fr 1fr;
    align-items: stretch;
  }
  /* Candle glow spilling out of the window. */
  .window::before {
    content: "";
    position: absolute;
    inset: -12% -20% -16%;
    z-index: -1;
    background: radial-gradient(closest-side, rgba(255, 170, 60, .34), transparent 74%);
  }

  .window__frame {
    position: relative;
    inset: auto;
    aspect-ratio: 282 / 350;
    padding: 9px;
    background: var(--plaster);
    border-radius: 7px 7px 2px 2px;
    box-shadow: 0 0 0 3px var(--timber-3), 0 22px 44px rgba(0, 0, 0, .45);
  }
  .window__frame img { border-radius: 3px; object-position: 30% 50%; }

  .shutter {
    display: block;
    background: var(--shutter) center / 100% 100% no-repeat;
  }

  .window__sill {
    display: block;
    grid-column: 1 / -1;
    position: relative;
    height: 18px;
    margin: 0 -3%;
    background: var(--plaster);
    border-radius: 3px;
    box-shadow: 0 10px 22px rgba(0, 0, 0, .4), inset 0 -4px 0 rgba(0, 0, 0, .12);
  }

  /* Candles on the sill. */
  .candle {
    position: absolute;
    bottom: 100%;
    left: 7%;
    width: 16px; height: 58px;
    border-radius: 3px 3px 0 0;
    background: linear-gradient(90deg, #efe2c6, #fffaf0 45%, #e6d5b2);
  }
  .candle--s { left: auto; right: 8%; height: 40px; width: 14px; }
  .candle i {
    position: absolute;
    left: 50%; bottom: 100%;
    width: 13px; height: 26px;
    margin: 0 0 3px -6.5px;
    border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
    background: radial-gradient(ellipse at 50% 72%, #fff6c9 0 24%, #ffc247 55%, #f6921e 88%);
    box-shadow: 0 0 16px 5px rgba(255, 176, 60, .55);
    transform-origin: 50% 100%;
  }

  /* Paper hearts hanging from the lintel over the photo. */
  .hearts { display: block; position: absolute; left: 0; right: 0; top: 0; height: 0; }
  .hearts i {
    --len: 30px;
    position: absolute;
    top: calc(-1 * var(--len));
    left: 12%;
    width: 46px;
    height: calc(var(--len) + 56px);
    background:
      linear-gradient(var(--timber-3), var(--timber-3)) 50% 0 / 1.5px var(--len) no-repeat,
      var(--heart-weave) 50% 100% / 46px 54px no-repeat;
    transform-origin: 50% 0;
  }
  .hearts i:nth-child(2) { --len: 46px; left: 46%; }
  .hearts i:nth-child(3) { --len: 22px; left: 78%; }
}

/* ---- Entrance and ambient motion (starts once the page is ready) ---------- */
@keyframes reveal-failsafe { to { opacity: 1; } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes sway { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }
@keyframes flicker {
  0%   { transform: scale(1, 1); }
  35%  { transform: scale(.93, 1.07) skewX(2deg); }
  70%  { transform: scale(1.05, .95) skewX(-2deg); }
  100% { transform: scale(.97, 1.04); }
}
@keyframes breathe { from { opacity: .75; } to { opacity: 1; } }

/* Until the head script adds .is-ready the hero is held at opacity 0, so
   nothing pops in or shifts while fonts and the photo arrive. A CSS timer
   reveals it after 2.6s even if the script never runs. */
.js:not(.is-ready) .hero__copy > *,
.js:not(.is-ready) .hero__visual,
.js:not(.is-ready) .bunting {
  opacity: 0;
  animation: reveal-failsafe .01s 2.6s forwards;
}
.hero__visual, .bunting { animation: fade-in .7s ease .1s both; }

@media (min-width: 980px) {
  .is-ready .hearts i { animation: sway 4.4s ease-in-out infinite alternate; }
  .is-ready .hearts i:nth-child(2) { animation-duration: 5.2s; animation-delay: -1.6s; }
  .is-ready .hearts i:nth-child(3) { animation-duration: 4.8s; animation-delay: -3s; }
  .is-ready .candle i { animation: flicker 2.2s ease-in-out infinite alternate; }
  .is-ready .candle--s i { animation-duration: 1.9s; animation-delay: -.8s; }
  .is-ready .window::before { animation: breathe 4.6s ease-in-out infinite alternate; }
}

/* ---- Rooms, pricing, gift strip ----------------------------------------- */
.room__ribbon { background: var(--red); color: var(--white); }

.gift {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 980px;
  margin: 22px auto 0;
  padding: 20px 22px;
  background: var(--red);
  color: var(--white);
  border-radius: var(--radius);
}
/* A stitched inner border, like the hem of a table runner. */
.gift::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 2px dashed rgba(255, 255, 255, .45);
  border-radius: 8px;
  pointer-events: none;
}
.gift__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 54px; height: 54px;
  border-radius: 50%;
  background: var(--plaster);
}
.gift__icon svg { width: 28px; height: 28px; fill: var(--red); }
.gift h3 { margin: 0 0 2px; color: var(--white); font-size: 1.2rem; }
.gift p { margin: 0; font-size: .96rem; line-height: 1.45; color: rgba(255, 255, 255, .94); }
.gift a {
  display: inline-block;
  padding: 12px 2px;
  margin: -12px 0;
  color: var(--white);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--straw);
  text-underline-offset: 3px;
  white-space: nowrap;
}

/* ---- Final CTA ----------------------------------------------------------- */
.finalcta {
  background:
    var(--dots),
    radial-gradient(60% 80% at 50% 100%, rgba(240, 150, 50, .2), transparent 70%),
    radial-gradient(55% 75% at 90% 0%, rgba(200, 16, 46, .32), transparent 70%),
    var(--timber);
}
.finalcta .bunting { top: 0; }
.finalcta .wrap { padding-top: 26px; }

/* --------------------------------------------------------------------------
   19. Green accents (lp-4 only)

   Red and walnut alone read as a flag. A muted heritage green (moss, not
   pine) sits beside the red: on the shutters and bunting, in the dark
   bands' glow, on the booking card and the best-value prices, and as the
   eyebrow text colour. Orange is still only for the Book buttons.
   -------------------------------------------------------------------------- */
.eyebrow { color: var(--moss); }
.section--dark .eyebrow { color: var(--straw); }

.hero {
  background:
    var(--dots),
    radial-gradient(60% 55% at 0% 100%, rgba(47, 107, 76, .38), transparent 70%),
    var(--timber);
}
@media (min-width: 980px) {
  .hero {
    background:
      var(--dots),
      radial-gradient(46% 70% at 80% 46%, rgba(240, 150, 50, .22), transparent 72%),
      radial-gradient(50% 60% at 0% 100%, rgba(47, 107, 76, .42), transparent 70%),
      radial-gradient(45% 55% at 0% 0%, rgba(200, 16, 46, .2), transparent 70%),
      var(--timber);
  }
}
.section--dark {
  background:
    var(--dots),
    radial-gradient(70% 60% at 100% 0%, rgba(200, 16, 46, .24), transparent 70%),
    radial-gradient(65% 55% at 0% 100%, rgba(47, 107, 76, .45), transparent 70%),
    var(--timber);
}
.finalcta {
  background:
    var(--dots),
    radial-gradient(60% 80% at 50% 100%, rgba(47, 107, 76, .42), transparent 70%),
    radial-gradient(55% 75% at 90% 0%, rgba(200, 16, 46, .3), transparent 70%),
    var(--timber);
}

/* Booking card header and the best-value prices. */
.booking__meta { background: linear-gradient(135deg, var(--moss-dark) 0%, var(--moss) 100%); }
.booking__live { background: rgba(0, 0, 0, .25); }
.pricetable tbody td.is-best { color: var(--moss-dark); background: var(--moss-tint); }
.pricetable thead th:last-child { background: var(--moss); }

/* Feature icons alternate red and green. */
.feature:nth-child(even) .feature__icon { background: var(--moss); }

/* Footer: very dark green instead of near-black. */
.footer { background: #0f1b14; }

/* Header: a thin green line under the red one. */
.header { box-shadow: 0 1px 0 0 var(--moss); }

/* --------------------------------------------------------------------------
   20. Light hero and green header (lp-4 only)

   The dark walnut hero read as muddy next to the red and green. The hero is
   now a plaster-white wall (Danish village, daylight) with timber text, the
   header is moss green with the logo turned white, and the window gets a
   proper timber frame so it stands off the wall. The page's dark bands
   further down are unchanged.
   -------------------------------------------------------------------------- */
.header {
  background: var(--moss-dark);
  border-bottom: 3px solid var(--red);
  box-shadow: none;
}
.header__logo img { filter: brightness(0) invert(1); }

.hero {
  background:
    radial-gradient(60% 70% at 85% 40%, rgba(240, 170, 80, .22), transparent 70%),
    radial-gradient(45% 60% at 0% 0%, rgba(200, 16, 46, .07), transparent 70%),
    linear-gradient(180deg, #fbf6ec 0%, #f6ecd9 100%);
  color: #4b3a30;
}
.hero::before {
  background: linear-gradient(180deg, rgba(251, 246, 236, .9) 0%, rgba(251, 246, 236, .95) 100%);
}
/* A red cross-stitched hem where the wall meets the next section. */
.hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 18px;
  background: var(--stitch-red) 0 0 / 24px 18px repeat-x;
  opacity: .9;
  pointer-events: none;
}
.hero__inner { padding-block-end: clamp(48px, 7vw, 92px); }

.hero h1 { color: #2a1a12; }
.hero h1 .accent {
  color: var(--red);
  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='%232f6b4c' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E") 0 100% / 100% .2em no-repeat;
}
.hero__badge {
  border-color: rgba(200, 16, 46, .5);
  background: rgba(200, 16, 46, .07);
  color: var(--red-dark);
}
.hero__badge svg { fill: var(--red); }
.hero__sub { color: #4b3a30; }
.hero__points li { color: #3a2a21; }
.hero__points strong { color: #2a1a12; }
@media (min-width: 640px) {
  .hero__points li { border-color: rgba(58, 36, 24, .16); background: rgba(255, 255, 255, .7); }
}
.hero__points svg,
.hero__loc svg,
.hero__call svg,
.hero__fest svg { fill: var(--red); }
.hero__fest { color: #3a2a21; }
.hero__proof, .hero__loc, .hero__call { color: #6b5a50; }
.hero__proof strong, .hero__loc strong { color: #2a1a12; }
.hero__call a { color: #2a1a12; }

/* Window on a light wall: timber frame, stone sill, visible candles. */
@media (min-width: 980px) {
  .hero { background:
    radial-gradient(52% 70% at 80% 46%, rgba(240, 170, 80, .26), transparent 72%),
    radial-gradient(45% 60% at 0% 0%, rgba(200, 16, 46, .07), transparent 70%),
    linear-gradient(180deg, #fbf6ec 0%, #f6ecd9 100%); }
  .window::before { background: radial-gradient(closest-side, rgba(255, 190, 90, .45), transparent 74%); }
  .window__frame {
    background: var(--plaster);
    padding: 10px;
    border: 9px solid #6b4429;
    border-radius: 8px 8px 2px 2px;
    box-shadow: 0 0 0 2px #4a2e1b, 0 20px 36px rgba(58, 36, 24, .3);
  }
  .window__sill {
    background: linear-gradient(180deg, #e3d4b8, #cdbb99);
    box-shadow: 0 10px 18px rgba(58, 36, 24, .28), inset 0 -3px 0 rgba(58, 36, 24, .18);
  }
  .candle { box-shadow: inset 0 0 0 1px rgba(90, 58, 40, .35); }
  .shutter { filter: none; }
}