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

   Design idea: "Solvang through a keyhole", wrapped for Christmas (lp-3).
   Same keyhole and game-ticket details as lp-1, but the night is pine green
   instead of ink, the offset print is berry red, the hero ticket is a gift
   tag, and a string of lights and slow snow sit on the hero and the final
   CTA. Brand colours and Roboto only; every extra is CSS, no new fonts.
   ========================================================================== */

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

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

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

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

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

  --star: #fbbc04;

  /* Christmas layer (lp-3 only). Pine replaces ink as the dark base; berry
     replaces orange for the keyhole offset print. Orange stays reserved for
     the Book buttons so the CTA still reads as the one thing to press. */
  --night: #08170f;
  --pine: #0f3d2c;
  --pine-2: #165a41;
  --berry: #c42a3c;
  --berry-dark: #9d1d2d;
  --gold: #ffd479;

  --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(196, 42, 60, .26), transparent 70%),
    radial-gradient(60% 50% at 0% 100%, rgba(22, 90, 65, .55), transparent 70%),
    var(--night);
  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(--gold); }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* --------------------------------------------------------------------------
   5. Hero

   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(--night);
  color: #e7eaee;
  isolation: isolate;
  overflow: hidden;
}

.hero__visual {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__keyhole { position: absolute; inset: 0; background: var(--ink-3); }
.hero__keyhole img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Nisse photo (square): the gnome ornament sits left of centre, so a tall
     phone crop is pulled left to keep it and the lit bulbs in frame. */
  object-position: 28% 50%;
}
.hero__ticket { display: none; }

.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(8, 23, 15, .2) 0%, rgba(8, 23, 15, .58) 50%, rgba(8, 23, 15, .94) 100%),
    linear-gradient(90deg, rgba(8, 23, 15, .88) 0%, rgba(8, 23, 15, .6) 70%, rgba(8, 23, 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(--gold);
  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(255, 212, 121, .65);
  background: rgba(255, 212, 121, .12);
  border-radius: var(--radius-sm);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--gold);
  text-align: left;
  line-height: 1.35;
}
.hero__badge svg { width: 16px; height: 16px; fill: var(--gold); 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(22, 90, 65, .85), transparent 70%),
      radial-gradient(45% 55% at 0% 0%, rgba(196, 42, 60, .2), transparent 70%),
      var(--night);
  }
  .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);
  }

  .hero__visual {
    position: relative;
    inset: auto;
    z-index: 0;
    justify-self: center;
    width: min(100%, 370px);
    aspect-ratio: 2 / 3;
  }
  /* Offset print of the keyhole in brand orange, sitting behind the photo. */
  .hero__visual::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--berry);
    transform: translate(18px, 16px);
    -webkit-mask: var(--keyhole) center / 100% 100% no-repeat;
            mask: var(--keyhole) center / 100% 100% no-repeat;
  }
  .hero__keyhole {
    -webkit-mask: var(--keyhole) center / 100% 100% no-repeat;
            mask: var(--keyhole) center / 100% 100% no-repeat;
  }
  /* The gnome ornament lands in the round of the keyhole. */
  .hero__keyhole img { object-position: 30% 50%; }

  /* The ticket stub becomes a gift tag: clipped corners, a punched hole and
     a red string. Decorative, so it stays aria-hidden in the HTML. */
  .hero__ticket {
    position: absolute;
    left: -64px;
    bottom: 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 34px 30px 14px;
    background: var(--cream);
    color: var(--ink);
    transform: rotate(-7deg);
    box-shadow: inset 0 0 0 1.5px rgba(12, 13, 14, .16);
    clip-path: polygon(16% 0, 84% 0, 100% 20%, 100% 100%, 0 100%, 0 20%);
    -webkit-mask: radial-gradient(circle 6px at 50% 15px, #0000 96%, #000);
            mask: radial-gradient(circle 6px at 50% 15px, #0000 96%, #000);
  }
  .hero__ticket-label,
  .hero__ticket-foot {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .72rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--berry-dark);
  }
  .hero__ticket-time {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 3.2rem;
    line-height: 1;
    letter-spacing: .01em;
    font-variant-numeric: tabular-nums;
    margin: 2px 0 4px;
  }
  .hero__ticket-foot { color: var(--pine-2); letter-spacing: .12em; }
}

/* One orchestrated entrance: copy rises in order, then the keyhole opens
   and the ticket drops onto it. Short, so the CTA is usable almost at once. */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes iris { from { opacity: 0; transform: scale(.94); } }
@keyframes drop { from { opacity: 0; transform: translateY(-24px) rotate(-16deg); } }

.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; }
@media (min-width: 980px) {
  .hero__visual { animation: iris .8s cubic-bezier(.2, .7, .2, 1) .1s both; }
  .hero__ticket { animation: drop .6s cubic-bezier(.3, 1.4, .5, 1) .6s both; }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .room__cta { margin-top: 0; }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

   A giant outlined 60:00 game clock sits behind the closing line.
   -------------------------------------------------------------------------- */
.finalcta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(60% 80% at 15% 100%, rgba(22, 90, 65, .8), transparent 70%),
    radial-gradient(55% 75% at 90% 0%, rgba(196, 42, 60, .4), transparent 70%),
    radial-gradient(80% 90% at 50% 50%, rgba(15, 61, 44, .8), transparent 80%),
    var(--night);
  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(--gold); }
.finalcta h2 {
  color: var(--white);
  text-transform: uppercase;
  font-size: clamp(2.1rem, 5vw + 1rem, 4rem);
  line-height: .98;
  max-width: 16ch;
  margin-inline: auto;
}
.finalcta p { color: rgba(255, 255, 255, .86); max-width: 600px; margin-inline: auto; font-size: 1.08rem; }
.finalcta__btns {
  display: flex;
  justify-content: center;
  margin: 30px auto 0;
}
.finalcta__btns .btn { width: 100%; max-width: 360px; }
.finalcta__call { margin: 18px auto 0; font-size: 1rem; }
.finalcta__call a {
  display: inline-block;
  padding: 10px 4px;
  margin: -10px 0;
  color: var(--white);
  font-weight: 700;
  text-decoration-color: var(--orange);
  text-underline-offset: 3px;
}
.finalcta small { display: block; margin-top: 18px; font-size: .86rem; color: rgba(255, 255, 255, .62); }

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

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

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

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

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

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

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

/* --------------------------------------------------------------------------
   18. Christmas layer (lp-3 only)

   Everything here is decoration: a string of lights, slow snow, a gift-voucher
   strip, berry and pine accents. No new fonts, no JS, no images. Snow and
   twinkle are transform / opacity only and stop under reduced motion (the
   rule at the foot of this file), which leaves a still frame of each.
   -------------------------------------------------------------------------- */

/* String of lights hanging from the top edge of the hero and the closing
   band. The wire and dim bulbs are the element; two pseudo layers light
   alternate bulbs and swap, so the string seems to twinkle. */
.lights {
  position: absolute;
  left: 0; right: 0; top: 0;
  z-index: 2;
  height: 36px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 144 36' width='144' height='36'%3E%3Cpath d='M0 3Q18 22 36 3Q54 22 72 3Q90 22 108 3Q126 22 144 3' fill='none' stroke='%232c3a33' stroke-width='1.6'/%3E%3Crect x='15.8' y='12' width='4.4' height='5' rx='1' fill='%232c3a33'/%3E%3Cellipse cx='18' cy='21.5' rx='4.4' ry='5.6' fill='%23E23A4E' opacity='0.3'/%3E%3Crect x='51.8' y='12' width='4.4' height='5' rx='1' fill='%232c3a33'/%3E%3Cellipse cx='54' cy='21.5' rx='4.4' ry='5.6' fill='%23FFD479' opacity='0.3'/%3E%3Crect x='87.8' y='12' width='4.4' height='5' rx='1' fill='%232c3a33'/%3E%3Cellipse cx='90' cy='21.5' rx='4.4' ry='5.6' fill='%2300A89C' opacity='0.3'/%3E%3Crect x='123.8' y='12' width='4.4' height='5' rx='1' fill='%232c3a33'/%3E%3Cellipse cx='126' cy='21.5' rx='4.4' ry='5.6' fill='%23F6921E' opacity='0.3'/%3E%3C/svg%3E") 0 0 / 144px 36px repeat-x;
  pointer-events: none;
}
.lights::before,
.lights::after {
  content: "";
  position: absolute;
  inset: 0;
  background-repeat: repeat-x;
  background-size: 144px 36px;
  animation: twinkle 2.6s ease-in-out infinite alternate;
}
.lights::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 144 36' width='144' height='36'%3E%3Cdefs%3E%3CradialGradient id='g18'%3E%3Cstop offset='0' stop-color='%23E23A4E' stop-opacity='.55'/%3E%3Cstop offset='1' stop-color='%23E23A4E' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='g90'%3E%3Cstop offset='0' stop-color='%2300A89C' stop-opacity='.55'/%3E%3Cstop offset='1' stop-color='%2300A89C' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='18' cy='21' r='13' fill='url(%23g18)'/%3E%3Crect x='15.8' y='12' width='4.4' height='5' rx='1' fill='%232c3a33'/%3E%3Cellipse cx='18' cy='21.5' rx='4.4' ry='5.6' fill='%23E23A4E' opacity='1'/%3E%3Ccircle cx='90' cy='21' r='13' fill='url(%23g90)'/%3E%3Crect x='87.8' y='12' width='4.4' height='5' rx='1' fill='%232c3a33'/%3E%3Cellipse cx='90' cy='21.5' rx='4.4' ry='5.6' fill='%2300A89C' opacity='1'/%3E%3C/svg%3E"); }
.lights::after  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 144 36' width='144' height='36'%3E%3Cdefs%3E%3CradialGradient id='g54'%3E%3Cstop offset='0' stop-color='%23FFD479' stop-opacity='.55'/%3E%3Cstop offset='1' stop-color='%23FFD479' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='g126'%3E%3Cstop offset='0' stop-color='%23F6921E' stop-opacity='.55'/%3E%3Cstop offset='1' stop-color='%23F6921E' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='54' cy='21' r='13' fill='url(%23g54)'/%3E%3Crect x='51.8' y='12' width='4.4' height='5' rx='1' fill='%232c3a33'/%3E%3Cellipse cx='54' cy='21.5' rx='4.4' ry='5.6' fill='%23FFD479' opacity='1'/%3E%3Ccircle cx='126' cy='21' r='13' fill='url(%23g126)'/%3E%3Crect x='123.8' y='12' width='4.4' height='5' rx='1' fill='%232c3a33'/%3E%3Cellipse cx='126' cy='21.5' rx='4.4' ry='5.6' fill='%23F6921E' opacity='1'/%3E%3C/svg%3E"); animation-delay: -1.3s; }
@keyframes twinkle { from { opacity: .25; } to { opacity: 1; } }

.finalcta .lights { top: 9px; }



/* Room cards: the Christmas room wears berry, not orange. */
.room--featured { border-color: var(--berry); box-shadow: 0 14px 34px rgba(196, 42, 60, .2); }
.room__ribbon { background: var(--berry); color: var(--white); }
.plan__item--us .plan__when { color: var(--berry); }

/* Gift-voucher strip under the pricing table. Candy-stripe top edge. */
.gift {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: clamp(18px, 3vw, 28px);
  padding: 24px 20px 18px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--berry-dark), var(--berry));
  color: var(--white);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.gift::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 7px;
  background: repeating-linear-gradient(135deg, #fff 0 8px, #fff0 8px 16px);
  opacity: .9;
}
.gift__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
}
.gift__icon svg { width: 28px; height: 28px; fill: var(--white); }
.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, .92); }
.gift a {
  display: inline-block;
  padding: 12px 2px;
  margin: -12px 0;
  color: var(--white);
  font-weight: 700;
  text-decoration-color: var(--gold);
  text-underline-offset: 3px;
}
@media (max-width: 479px) {
  .gift { align-items: flex-start; }
}

/* Julefest line in the hero: one line above the button for the "Julefest &
   events" ad group, so it reads its own words before deciding. */
.hero__fest {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 18px;
  max-width: 52ch;
  font-size: .94rem;
  line-height: 1.4;
  color: var(--gold);
}
.hero__fest svg { width: 16px; height: 16px; flex: none; margin-top: 2px; fill: var(--gold); }

/* --------------------------------------------------------------------------
   19. Festive pass (lp-3 only)

   Pine garland with a bow, berries and baubles; layered snow that sways;
   twinkling stars and bokeh; baubles that swing; holly; a snow line on the
   headline; snow-drift edges between sections; candy-cane trim; and the
   accent colours moved from teal / orange to pine / berry / gold. Orange is
   still reserved for Book buttons. Everything is CSS or inline SVG, and all
   motion is transform / opacity so it stays cheap on phones.
   -------------------------------------------------------------------------- */
:root {
  --candy: repeating-linear-gradient(-45deg, #c42a3c 0 7px, #fff 7px 14px);
  --holly: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 60' width='90' height='60'%3E%3Cg transform='translate(45 36)'%3E%3Cg transform='rotate(205)'%3E%3Cpath d='M0 0 L3.8 -3.81 L7.6 -5 L11.4 -9.97 L15.2 -8.08 L19 -12.32 L22.8 -8.08 L26.6 -9.97 L30.4 -5 L34.2 -3.81 L38 0 L38 0 L34.2 3.81 L30.4 5 L26.6 9.97 L22.8 8.08 L19 12.33 L15.2 8.08 L11.4 9.97 L7.6 5 L3.8 3.81 L0 0Z' fill='%231F7A4F' stroke='%230D4A30' stroke-width='1.2' stroke-linejoin='round'/%3E%3Cline x1='2' y1='0' x2='35' y2='0' stroke='%230D4A30' stroke-width='1.2'/%3E%3C/g%3E%3Cg transform='rotate(335)'%3E%3Cpath d='M0 0 L3.8 -3.81 L7.6 -5 L11.4 -9.97 L15.2 -8.08 L19 -12.32 L22.8 -8.08 L26.6 -9.97 L30.4 -5 L34.2 -3.81 L38 0 L38 0 L34.2 3.81 L30.4 5 L26.6 9.97 L22.8 8.08 L19 12.33 L15.2 8.08 L11.4 9.97 L7.6 5 L3.8 3.81 L0 0Z' fill='%231F7A4F' stroke='%230D4A30' stroke-width='1.2' stroke-linejoin='round'/%3E%3Cline x1='2' y1='0' x2='35' y2='0' stroke='%230D4A30' stroke-width='1.2'/%3E%3C/g%3E%3Cg transform='rotate(270)'%3E%3Cpath d='M0 0 L2.6 -2.91 L5.2 -3.82 L7.8 -7.62 L10.4 -6.18 L13 -9.42 L15.6 -6.18 L18.2 -7.62 L20.8 -3.82 L23.4 -2.91 L26 0 L26 0 L23.4 2.91 L20.8 3.82 L18.2 7.62 L15.6 6.18 L13 9.42 L10.4 6.18 L7.8 7.62 L5.2 3.82 L2.6 2.91 L0 0Z' fill='%231F7A4F' stroke='%230D4A30' stroke-width='1.2' stroke-linejoin='round'/%3E%3Cline x1='2' y1='0' x2='23' y2='0' stroke='%230D4A30' stroke-width='1.2'/%3E%3C/g%3E%3Ccircle cx='-5' cy='2' r='5.4' fill='%23E23A4E' stroke='%239D1D2D' stroke-width='1'/%3E%3Ccircle cx='-6.6' cy='0.19999999999999996' r='1.5' fill='%23fff' opacity='.85'/%3E%3Ccircle cx='5' cy='3' r='5.4' fill='%23E23A4E' stroke='%239D1D2D' stroke-width='1'/%3E%3Ccircle cx='3.4' cy='1.2' r='1.5' fill='%23fff' opacity='.85'/%3E%3Ccircle cx='0' cy='-5' r='5.4' fill='%23E23A4E' stroke='%239D1D2D' stroke-width='1'/%3E%3Ccircle cx='-1.6' cy='-6.8' r='1.5' fill='%23fff' opacity='.85'/%3E%3C/g%3E%3C/svg%3E");
  --snowflake: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg transform='translate(12 12)' stroke='%23000' stroke-width='2.2' stroke-linecap='round' fill='none'%3E%3Cg transform='rotate(0)'%3E%3Cline x1='-10' y1='0' x2='10' y2='0'/%3E%3Cpath d='M-5.5 0 l2.2 -2.8000000000000003 M-5.5 0 l2.2 2.8000000000000003'/%3E%3Cpath d='M5.5 0 l-2.2 -2.8000000000000003 M5.5 0 l-2.2 2.8000000000000003'/%3E%3C/g%3E%3Cg transform='rotate(60)'%3E%3Cline x1='-10' y1='0' x2='10' y2='0'/%3E%3Cpath d='M-5.5 0 l2.2 -2.8000000000000003 M-5.5 0 l2.2 2.8000000000000003'/%3E%3Cpath d='M5.5 0 l-2.2 -2.8000000000000003 M5.5 0 l-2.2 2.8000000000000003'/%3E%3C/g%3E%3Cg transform='rotate(120)'%3E%3Cline x1='-10' y1='0' x2='10' y2='0'/%3E%3Cpath d='M-5.5 0 l2.2 -2.8000000000000003 M-5.5 0 l2.2 2.8000000000000003'/%3E%3Cpath d='M5.5 0 l-2.2 -2.8000000000000003 M5.5 0 l-2.2 2.8000000000000003'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* ----- garland (hero, closing band) ----- */
.garland {
  position: absolute;
  left: 0; right: 0; top: 0;
  z-index: 3;
  height: 57px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 90' width='360' height='90'%3E%3Cdefs%3E%3CradialGradient id='bbE23A4E' cx='.35' cy='.3' r='.8'%3E%3Cstop offset='0' stop-color='%23E23A4E'/%3E%3Cstop offset='1' stop-color='%237A1020'/%3E%3C/radialGradient%3E%3CradialGradient id='bbFFD479' cx='.35' cy='.3' r='.8'%3E%3Cstop offset='0' stop-color='%23FFE7A8'/%3E%3Cstop offset='1' stop-color='%23B8862B'/%3E%3C/radialGradient%3E%3CradialGradient id='bb00A89C' cx='.35' cy='.3' r='.8'%3E%3Cstop offset='0' stop-color='%235FE0D3'/%3E%3Cstop offset='1' stop-color='%23006A63'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath d='M0 8Q180 80 360 8' fill='none' stroke='%23082C1E' stroke-width='15' stroke-linecap='round'/%3E%3Cpath d='M0 8Q180 80 360 8' fill='none' stroke='%230F4A34' stroke-width='11' stroke-linecap='round'/%3E%3Cline x1='4.21' y1='9.67' x2='9.5' y2='1.3' stroke='%232E9A69' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='145.99' y1='42.71' x2='153.1' y2='37.41' stroke='%230A3D2A' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='92.81' y1='35.55' x2='97.5' y2='28.31' stroke='%231D7A50' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='132.47' y1='41.49' x2='136.99' y2='36.05' stroke='%233BAE78' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='89.11' y1='34.82' x2='92.98' y2='39.42' stroke='%231D7A50' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='104.74' y1='37.71' x2='105.94' y2='43.1' stroke='%233BAE78' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='199.34' y1='43.58' x2='204.99' y2='53.9' stroke='%230A3D2A' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='331.63' y1='18.45' x2='337.72' y2='19.76' stroke='%230F5A3A' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='153.11' y1='43.2' x2='162.12' y2='38.04' stroke='%230F5A3A' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='153.62' y1='43.23' x2='156.34' y2='33.68' stroke='%230A3D2A' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='119.03' y1='39.87' x2='124.27' y2='37.08' stroke='%233BAE78' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='116.07' y1='39.46' x2='120.48' y2='33.57' stroke='%231D7A50' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='246.33' y1='39.11' x2='253.48' y2='47.19' stroke='%230A3D2A' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='331.16' y1='18.61' x2='333.7' y2='9.41' stroke='%233BAE78' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='345.78' y1='13.46' x2='354.9' y2='20.87' stroke='%233BAE78' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='197.48' y1='43.66' x2='205.18' y2='47.53' stroke='%230F5A3A' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='260.74' y1='36.76' x2='267.11' y2='46.73' stroke='%232E9A69' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='296.34' y1='28.96' x2='298.75' y2='19.08' stroke='%232E9A69' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='112.46' y1='38.93' x2='117.3' y2='37.11' stroke='%233BAE78' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='300.01' y1='28' x2='309.05' y2='30.33' stroke='%232E9A69' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='258.07' y1='37.23' x2='268.03' y2='43.74' stroke='%230A3D2A' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='289.77' y1='30.61' x2='292.96' y2='35.66' stroke='%233BAE78' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='182.5' y1='43.99' x2='188.73' y2='48.63' stroke='%230F5A3A' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='292.88' y1='29.84' x2='298.72' y2='37.47' stroke='%233BAE78' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='219.35' y1='42.28' x2='221.83' y2='50.33' stroke='%230F5A3A' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='210.24' y1='42.98' x2='212.53' y2='48.89' stroke='%232E9A69' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='171.97' y1='43.93' x2='177.23' y2='48.18' stroke='%232E9A69' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='171.9' y1='43.93' x2='177.4' y2='41.03' stroke='%231D7A50' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='38.6' y1='21.79' x2='37.96' y2='27.17' stroke='%231D7A50' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='145.81' y1='42.7' x2='149.36' y2='36.01' stroke='%230F5A3A' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='284.95' y1='31.76' x2='289.72' y2='39.05' stroke='%230A3D2A' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='148.38' y1='42.89' x2='154.22' y2='49.32' stroke='%230A3D2A' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='28.8' y1='18.6' x2='35.34' y2='10.01' stroke='%230A3D2A' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='154.74' y1='43.29' x2='156.73' y2='36.83' stroke='%230F5A3A' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='171.71' y1='43.92' x2='179.22' y2='53.05' stroke='%232E9A69' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='157.07' y1='43.42' x2='161.28' y2='37.75' stroke='%233BAE78' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='206.01' y1='43.25' x2='209.09' y2='51.14' stroke='%232E9A69' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='251.16' y1='38.37' x2='257.58' y2='45.52' stroke='%231D7A50' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='249.59' y1='38.62' x2='253.55' y2='28.37' stroke='%230F5A3A' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='106.34' y1='37.97' x2='112.2' y2='29.72' stroke='%233BAE78' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='114.27' y1='39.2' x2='123.46' y2='35.14' stroke='%233BAE78' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='282.31' y1='32.37' x2='285.04' y2='38.36' stroke='%233BAE78' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='101.73' y1='37.19' x2='106.93' y2='45.73' stroke='%230A3D2A' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='224.54' y1='41.8' x2='229.79' y2='49.3' stroke='%230F5A3A' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='299.5' y1='28.13' x2='305.87' y2='20.35' stroke='%232E9A69' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='201.43' y1='43.49' x2='205.09' y2='54.57' stroke='%231D7A50' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='36.63' y1='21.16' x2='42.74' y2='16.39' stroke='%233BAE78' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='308.62' y1='25.62' x2='312.14' y2='31.61' stroke='%232E9A69' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='333.34' y1='17.88' x2='337.97' y2='23.56' stroke='%233BAE78' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='349.06' y1='12.24' x2='355.17' y2='13.12' stroke='%230A3D2A' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='37.63' y1='21.48' x2='41.28' y2='15.62' stroke='%232E9A69' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='94.38' y1='35.86' x2='95.64' y2='41.11' stroke='%232E9A69' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='352.62' y1='10.89' x2='357.13' y2='4.68' stroke='%230A3D2A' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='248.87' y1='38.73' x2='251.48' y2='33.61' stroke='%232E9A69' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='157.37' y1='43.43' x2='165.32' y2='50.15' stroke='%230F5A3A' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='249.06' y1='38.7' x2='254.89' y2='41.03' stroke='%230A3D2A' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='321.46' y1='21.77' x2='321.55' y2='12.26' stroke='%230F5A3A' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='34.12' y1='20.35' x2='38.8' y2='11.68' stroke='%230F5A3A' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='186.46' y1='43.95' x2='190.91' y2='37.33' stroke='%230A3D2A' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='58.42' y1='27.58' x2='62.47' y2='32.87' stroke='%230F5A3A' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='316.94' y1='23.16' x2='324.8' y2='14.65' stroke='%233BAE78' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='174.15' y1='43.96' x2='176.69' y2='49.61' stroke='%232E9A69' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='26.82' y1='17.93' x2='27.83' y2='28.8' stroke='%231D7A50' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='205.26' y1='43.29' x2='214.67' y2='36.77' stroke='%230F5A3A' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='55.88' y1='26.88' x2='64.91' y2='21.42' stroke='%233BAE78' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='311.77' y1='24.71' x2='319.05' y2='33.03' stroke='%230A3D2A' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='252.74' y1='38.12' x2='259.12' y2='42.65' stroke='%230A3D2A' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='117.86' y1='39.71' x2='124.2' y2='33.06' stroke='%230A3D2A' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='153.55' y1='43.22' x2='160.8' y2='50.34' stroke='%232E9A69' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='158.46' y1='43.48' x2='160.66' y2='38.04' stroke='%232E9A69' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='194.48' y1='43.77' x2='197.33' y2='48.53' stroke='%232E9A69' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='340.29' y1='15.45' x2='348.33' y2='21.17' stroke='%230F5A3A' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='351.23' y1='11.42' x2='351.4' y2='3.3' stroke='%230F5A3A' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='177.2' y1='43.99' x2='180.83' y2='32.56' stroke='%232E9A69' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='340.11' y1='15.52' x2='341.92' y2='9.57' stroke='%231D7A50' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='252.52' y1='38.16' x2='256.87' y2='40.73' stroke='%232E9A69' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='239.37' y1='40.08' x2='244.48' y2='29.69' stroke='%230F5A3A' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='198.4' y1='43.62' x2='202.67' y2='47.44' stroke='%230A3D2A' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='42.86' y1='23.1' x2='46.34' y2='32.16' stroke='%233BAE78' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='266.84' y1='35.62' x2='271.47' y2='42.97' stroke='%230A3D2A' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='220.93' y1='42.14' x2='226.59' y2='50.04' stroke='%230A3D2A' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='259.97' y1='36.89' x2='264.4' y2='45.55' stroke='%230A3D2A' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='54.07' y1='26.38' x2='56.86' y2='20.59' stroke='%233BAE78' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='13.58' y1='13.23' x2='16.25' y2='23.67' stroke='%230F5A3A' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='65.89' y1='29.53' x2='71.94' y2='22.18' stroke='%230F5A3A' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='38.82' y1='21.85' x2='41.68' y2='16.97' stroke='%231D7A50' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='91.16' y1='35.23' x2='98.83' y2='41.64' stroke='%231D7A50' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='351.47' y1='11.33' x2='356.4' y2='19.18' stroke='%230F5A3A' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='277.27' y1='33.49' x2='282.11' y2='25.17' stroke='%230A3D2A' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='194.23' y1='43.77' x2='200.64' y2='50.51' stroke='%230F5A3A' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='22.89' y1='16.57' x2='32.54' y2='12.87' stroke='%231D7A50' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='116.69' y1='39.55' x2='125.79' y2='32.46' stroke='%233BAE78' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='210.18' y1='42.99' x2='211.99' y2='47.77' stroke='%231D7A50' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='74.62' y1='31.66' x2='79.32' y2='27.82' stroke='%232E9A69' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='133.06' y1='41.55' x2='141.75' y2='37.86' stroke='%232E9A69' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='108.43' y1='38.31' x2='116.14' y2='31.32' stroke='%233BAE78' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='194.96' y1='43.75' x2='197.48' y2='55.21' stroke='%230F5A3A' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='311.54' y1='24.77' x2='318.41' y2='34.07' stroke='%230A3D2A' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='254.09' y1='37.9' x2='260.36' y2='29.39' stroke='%230F5A3A' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='274.34' y1='34.11' x2='277.4' y2='25.6' stroke='%230F5A3A' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='165.13' y1='43.75' x2='166.7' y2='50.68' stroke='%231D7A50' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='207.04' y1='43.19' x2='211.45' y2='40.17' stroke='%232E9A69' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='65.9' y1='29.54' x2='67.62' y2='39.98' stroke='%230A3D2A' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='281.15' y1='32.63' x2='286.16' y2='42.84' stroke='%232E9A69' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='340.41' y1='15.41' x2='350.59' y2='20.48' stroke='%230A3D2A' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='178.22' y1='44' x2='184.42' y2='38.23' stroke='%233BAE78' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='263.97' y1='36.17' x2='266.02' y2='26.13' stroke='%230A3D2A' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='259.66' y1='36.95' x2='262.37' y2='41.83' stroke='%230A3D2A' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='330.46' y1='18.85' x2='334.26' y2='9.41' stroke='%230A3D2A' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='183.91' y1='43.98' x2='186.42' y2='32.32' stroke='%231D7A50' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='236.84' y1='40.41' x2='240.31' y2='32.88' stroke='%232E9A69' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='146.91' y1='42.78' x2='151.65' y2='52.57' stroke='%231D7A50' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='69.57' y1='30.45' x2='76.99' y2='38.18' stroke='%230F5A3A' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='231.06' y1='41.1' x2='232.55' y2='34.73' stroke='%231D7A50' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='168.31' y1='43.85' x2='177.93' y2='50.69' stroke='%231D7A50' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='225.03' y1='41.75' x2='234.05' y2='47.35' stroke='%233BAE78' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='242.1' y1='39.72' x2='248.43' y2='33.15' stroke='%230F5A3A' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='109.79' y1='38.52' x2='114.83' y2='35.79' stroke='%232E9A69' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='247.82' y1='38.89' x2='253.51' y2='46.65' stroke='%232E9A69' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='127.05' y1='40.88' x2='134.09' y2='35.27' stroke='%230A3D2A' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='322.18' y1='21.54' x2='324.98' y2='16.81' stroke='%232E9A69' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='255.78' y1='37.62' x2='265.32' y2='41.73' stroke='%233BAE78' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='161.91' y1='43.64' x2='164.18' y2='51.57' stroke='%231D7A50' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='87.26' y1='34.44' x2='92.35' y2='40.05' stroke='%230A3D2A' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='243.97' y1='39.45' x2='248.72' y2='30.14' stroke='%230A3D2A' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='239.18' y1='40.11' x2='247.31' y2='31.78' stroke='%233BAE78' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='133.19' y1='41.57' x2='139.45' y2='32.72' stroke='%231D7A50' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='19.9' y1='15.52' x2='26.11' y2='6.7' stroke='%233BAE78' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='283.96' y1='31.99' x2='287.93' y2='25.5' stroke='%231D7A50' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='170.87' y1='43.91' x2='177' y2='39.87' stroke='%232E9A69' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='93.57' y1='35.7' x2='93.93' y2='47.68' stroke='%231D7A50' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='333.32' y1='17.88' x2='341' y2='25.93' stroke='%232E9A69' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='282.94' y1='32.23' x2='286.79' y2='38.52' stroke='%231D7A50' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='146.57' y1='42.76' x2='156' y2='38.24' stroke='%231D7A50' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='77.62' y1='32.35' x2='87.8' y2='26.9' stroke='%230A3D2A' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='127.48' y1='40.93' x2='131.66' y2='46.26' stroke='%232E9A69' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='180.46' y1='44' x2='182.23' y2='49' stroke='%233BAE78' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='343.18' y1='14.41' x2='351.32' y2='15.74' stroke='%230F5A3A' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='183.73' y1='43.98' x2='192.35' y2='37.42' stroke='%231D7A50' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='52.34' y1='25.89' x2='52.31' y2='33.99' stroke='%233BAE78' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='333.42' y1='17.85' x2='336.95' y2='13.96' stroke='%232E9A69' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='343.6' y1='14.26' x2='350.78' y2='18.96' stroke='%230A3D2A' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='276.16' y1='33.73' x2='283.09' y2='26.94' stroke='%231D7A50' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='51.02' y1='25.52' x2='54.79' y2='22.17' stroke='%230F5A3A' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='355.46' y1='9.79' x2='362.97' y2='18.07' stroke='%230A3D2A' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='152.8' y1='43.18' x2='158.63' y2='51.76' stroke='%230F5A3A' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='31.11' y1='19.37' x2='34.53' y2='24.17' stroke='%230F5A3A' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='83.69' y1='33.69' x2='90.25' y2='39.54' stroke='%230F5A3A' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='201.66' y1='43.48' x2='205.96' y2='40.39' stroke='%230A3D2A' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='96.12' y1='36.18' x2='101.62' y2='29.04' stroke='%230F5A3A' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='168.48' y1='43.85' x2='177.7' y2='37.11' stroke='%230F5A3A' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='276.84' y1='33.58' x2='279.73' y2='22.89' stroke='%233BAE78' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='113.45' y1='39.08' x2='117.22' y2='47.95' stroke='%233BAE78' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='286.49' y1='31.4' x2='290.61' y2='34.24' stroke='%233BAE78' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='319.44' y1='22.39' x2='327.71' y2='26.32' stroke='%232E9A69' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='93.44' y1='35.68' x2='102.45' y2='28.36' stroke='%233BAE78' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='197.98' y1='43.64' x2='204.25' y2='50.01' stroke='%231D7A50' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='63.68' y1='28.97' x2='67.99' y2='36.78' stroke='%230A3D2A' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='68.45' y1='30.17' x2='76.9' y2='38.4' stroke='%232E9A69' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='135.63' y1='41.81' x2='137.93' y2='49.2' stroke='%230A3D2A' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='161.8' y1='43.63' x2='167.55' y2='37.93' stroke='%231D7A50' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='71.31' y1='30.87' x2='72.75' y2='38.08' stroke='%231D7A50' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='277.49' y1='33.44' x2='285.7' y2='37.08' stroke='%231D7A50' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='270.27' y1='34.95' x2='271.17' y2='27.34' stroke='%233BAE78' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='168.06' y1='43.84' x2='173.87' y2='50' stroke='%230A3D2A' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='197.86' y1='43.65' x2='202.81' y2='46.87' stroke='%230F5A3A' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='46.16' y1='24.1' x2='50.41' y2='21.43' stroke='%232E9A69' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='340.2' y1='15.48' x2='342.9' y2='20.12' stroke='%230A3D2A' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='103' y1='37.41' x2='104.28' y2='42.63' stroke='%231D7A50' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='356.91' y1='9.22' x2='364.43' y2='16.65' stroke='%232E9A69' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='332.73' y1='18.08' x2='340.51' y2='22.96' stroke='%230A3D2A' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='231.31' y1='41.07' x2='232.48' y2='30.03' stroke='%233BAE78' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='100.75' y1='37.02' x2='101.36' y2='45.13' stroke='%232E9A69' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='154.96' y1='43.3' x2='159.07' y2='37.08' stroke='%232E9A69' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='334.55' y1='17.46' x2='335.81' y2='12.09' stroke='%230F5A3A' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='192.66' y1='43.82' x2='194.94' y2='53.98' stroke='%230A3D2A' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='249.01' y1='38.71' x2='251.45' y2='27.77' stroke='%232E9A69' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='57.68' y1='27.38' x2='62.33' y2='19.74' stroke='%230A3D2A' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='343.35' y1='14.35' x2='346.73' y2='7.02' stroke='%230A3D2A' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='1.73' y1='8.69' x2='6.54' y2='4.78' stroke='%230F5A3A' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='202.79' y1='43.42' x2='207.23' y2='35.79' stroke='%231D7A50' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='63.67' y1='28.96' x2='64.7' y2='35.7' stroke='%232E9A69' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='257.67' y1='37.3' x2='261.34' y2='31.48' stroke='%230A3D2A' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='318.11' y1='22.81' x2='323.05' y2='26.68' stroke='%232E9A69' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='288.15' y1='31.01' x2='287.9' y2='21.97' stroke='%230F5A3A' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='198.14' y1='43.63' x2='201.47' y2='55.15' stroke='%230A3D2A' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='37.03' y1='21.29' x2='43.93' y2='13.29' stroke='%230F5A3A' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='16.68' y1='14.36' x2='19.5' y2='19.87' stroke='%232E9A69' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='47.13' y1='24.38' x2='51.53' y2='32.38' stroke='%233BAE78' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='246.53' y1='39.08' x2='253.23' y2='43.26' stroke='%233BAE78' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='319.75' y1='22.3' x2='323.98' y2='13.69' stroke='%231D7A50' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='209.05' y1='43.06' x2='215.74' y2='49.13' stroke='%230F5A3A' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='272.85' y1='34.42' x2='276.79' y2='29.75' stroke='%230F5A3A' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='247.38' y1='38.96' x2='251.81' y2='43.73' stroke='%230A3D2A' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='290.88' y1='30.34' x2='295.31' y2='24.48' stroke='%232E9A69' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='256.86' y1='37.44' x2='261.42' y2='26.59' stroke='%232E9A69' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='210.87' y1='42.94' x2='217.18' y2='52.25' stroke='%230A3D2A' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='37.42' y1='21.41' x2='42.43' y2='13.22' stroke='%230F5A3A' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='352.97' y1='10.76' x2='351.1' y2='-0.49' stroke='%233BAE78' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='53.22' y1='26.14' x2='61.59' y2='20.2' stroke='%232E9A69' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='200.14' y1='43.55' x2='205.16' y2='35.43' stroke='%230A3D2A' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='267.97' y1='35.4' x2='273.51' y2='40.99' stroke='%230F5A3A' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='353.09' y1='10.71' x2='363.75' y2='13.29' stroke='%233BAE78' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='98.4' y1='36.6' x2='106.3' y2='33.35' stroke='%232E9A69' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='74.24' y1='31.57' x2='79.65' y2='42.15' stroke='%232E9A69' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='240.61' y1='39.92' x2='248.37' y2='43.59' stroke='%230F5A3A' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='18.21' y1='14.92' x2='24.28' y2='22.8' stroke='%231D7A50' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='223.17' y1='41.93' x2='224.14' y2='34.18' stroke='%230F5A3A' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='111.97' y1='38.86' x2='116.12' y2='43.72' stroke='%231D7A50' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='43.68' y1='23.35' x2='43.66' y2='30.69' stroke='%233BAE78' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='315.42' y1='23.62' x2='324.08' y2='27.47' stroke='%231D7A50' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='32.34' y1='19.78' x2='35.5' y2='25.41' stroke='%230F5A3A' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='280.41' y1='32.8' x2='281.44' y2='26.52' stroke='%230A3D2A' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='116.82' y1='39.57' x2='121.37' y2='49.5' stroke='%230F5A3A' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='155.09' y1='43.31' x2='164.11' y2='36.84' stroke='%230A3D2A' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='268.65' y1='35.27' x2='279.79' y2='39.09' stroke='%230A3D2A' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='109.31' y1='38.45' x2='110.77' y2='45.53' stroke='%230F5A3A' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='65.17' y1='29.35' x2='70.51' y2='19.47' stroke='%230F5A3A' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='201.11' y1='43.5' x2='206' y2='49.17' stroke='%230F5A3A' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='300.64' y1='27.83' x2='305.53' y2='36.56' stroke='%232E9A69' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='220.59' y1='42.17' x2='223.96' y2='32.13' stroke='%233BAE78' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='284.86' y1='31.78' x2='289.14' y2='36.18' stroke='%233BAE78' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='224.35' y1='41.81' x2='226.14' y2='36.02' stroke='%231D7A50' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='120.55' y1='40.07' x2='126.7' y2='32.16' stroke='%230A3D2A' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='240.21' y1='39.97' x2='242.79' y2='35.56' stroke='%230F5A3A' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='56.61' y1='27.08' x2='64.94' y2='23.92' stroke='%230F5A3A' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='41.78' y1='22.77' x2='44.04' y2='31.22' stroke='%230F5A3A' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='102.05' y1='37.25' x2='105.73' y2='30.91' stroke='%230F5A3A' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='9.35' y1='11.64' x2='18.96' y2='6.19' stroke='%233BAE78' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='334.51' y1='17.47' x2='340.44' y2='22.52' stroke='%230A3D2A' stroke-width='2.2' stroke-linecap='round'/%3E%3Cpath d='M0 8Q180 80 360 8' fill='none' stroke='%232E9A69' stroke-width='2.4' stroke-linecap='round' opacity='.45' transform='translate(0 -3)'/%3E%3Ccircle cx='81.4' cy='36.27' r='3.4' fill='%23E23A4E' stroke='%239D1D2D' stroke-width='.8'/%3E%3Ccircle cx='80.4' cy='35.07' r='1' fill='%23fff' opacity='.8'/%3E%3Ccircle cx='90.4' cy='38.27' r='3.4' fill='%23E23A4E' stroke='%239D1D2D' stroke-width='.8'/%3E%3Ccircle cx='89.4' cy='37.07' r='1' fill='%23fff' opacity='.8'/%3E%3Ccircle cx='86.4' cy='31.27' r='3.4' fill='%23E23A4E' stroke='%239D1D2D' stroke-width='.8'/%3E%3Ccircle cx='85.4' cy='30.07' r='1' fill='%23fff' opacity='.8'/%3E%3Ccircle cx='268.6' cy='36.27' r='3.4' fill='%23E23A4E' stroke='%239D1D2D' stroke-width='.8'/%3E%3Ccircle cx='267.6' cy='35.07' r='1' fill='%23fff' opacity='.8'/%3E%3Ccircle cx='277.6' cy='38.27' r='3.4' fill='%23E23A4E' stroke='%239D1D2D' stroke-width='.8'/%3E%3Ccircle cx='276.6' cy='37.07' r='1' fill='%23fff' opacity='.8'/%3E%3Ccircle cx='273.6' cy='31.27' r='3.4' fill='%23E23A4E' stroke='%239D1D2D' stroke-width='.8'/%3E%3Ccircle cx='272.6' cy='30.07' r='1' fill='%23fff' opacity='.8'/%3E%3Cline x1='180' y1='44' x2='180' y2='54' stroke='%23d9b75e' stroke-width='1'/%3E%3Crect x='177' y='51' width='6' height='4' rx='1' fill='%23d9b75e'/%3E%3Ccircle cx='180' cy='61.5' r='7.5' fill='url(%23bbFFD479)' stroke='%23B8862B' stroke-width='.8'/%3E%3Cellipse cx='177.38' cy='58.5' rx='2.1' ry='1.35' fill='%23fff' opacity='.75' transform='rotate(-30 177.38 58.5)'/%3E%3Cline x1='111.6' y1='38.8' x2='111.6' y2='48.8' stroke='%23d9b75e' stroke-width='1'/%3E%3Crect x='108.6' y='45.8' width='6' height='4' rx='1' fill='%23d9b75e'/%3E%3Ccircle cx='111.6' cy='53.8' r='5' fill='url(%23bbE23A4E)' stroke='%237A1020' stroke-width='.8'/%3E%3Cellipse cx='109.85' cy='51.8' rx='1.4' ry='0.9' fill='%23fff' opacity='.75' transform='rotate(-30 109.85 51.8)'/%3E%3Cline x1='248.4' y1='38.8' x2='248.4' y2='48.8' stroke='%23d9b75e' stroke-width='1'/%3E%3Crect x='245.4' y='45.8' width='6' height='4' rx='1' fill='%23d9b75e'/%3E%3Ccircle cx='248.4' cy='53.8' r='5' fill='url(%23bb00A89C)' stroke='%23006A63' stroke-width='.8'/%3E%3Cellipse cx='246.65' cy='51.8' rx='1.4' ry='0.9' fill='%23fff' opacity='.75' transform='rotate(-30 246.65 51.8)'/%3E%3Cline x1='50.4' y1='25.34' x2='50.4' y2='30.34' stroke='%230b3b28' stroke-width='1.2'/%3E%3Crect x='48' y='30.34' width='4.8' height='5.5' rx='1' fill='%232a2f2c'/%3E%3Cellipse cx='50.4' cy='42.34' rx='4.6' ry='6' fill='%23FFD479' opacity='0.32'/%3E%3Cline x1='129.6' y1='41.18' x2='129.6' y2='46.18' stroke='%230b3b28' stroke-width='1.2'/%3E%3Crect x='127.2' y='46.18' width='4.8' height='5.5' rx='1' fill='%232a2f2c'/%3E%3Cellipse cx='129.6' cy='58.18' rx='4.6' ry='6' fill='%23FF6B7D' opacity='0.32'/%3E%3Cline x1='230.4' y1='41.18' x2='230.4' y2='46.18' stroke='%230b3b28' stroke-width='1.2'/%3E%3Crect x='228' y='46.18' width='4.8' height='5.5' rx='1' fill='%232a2f2c'/%3E%3Cellipse cx='230.4' cy='58.18' rx='4.6' ry='6' fill='%237FE3DA' opacity='0.32'/%3E%3Cline x1='309.6' y1='25.34' x2='309.6' y2='30.34' stroke='%230b3b28' stroke-width='1.2'/%3E%3Crect x='307.2' y='30.34' width='4.8' height='5.5' rx='1' fill='%232a2f2c'/%3E%3Cellipse cx='309.6' cy='42.34' rx='4.6' ry='6' fill='%23F6921E' opacity='0.32'/%3E%3Cg%3E%3Cpath d='M0 8 C-30 -14 -36 20 0 8Z' fill='%23C42A3C' stroke='%238F1624' stroke-width='1.2'/%3E%3Cpath d='M0 8 C30 -14 36 20 0 8Z' fill='%23C42A3C' stroke='%238F1624' stroke-width='1.2'/%3E%3Cpath d='M0 8 L-13 36 L-7 32 L-2 38Z' fill='%23A91F30'/%3E%3Cpath d='M0 8 L13 36 L7 32 L2 38Z' fill='%23A91F30'/%3E%3Cpath d='M-20 2 Q-12 6 -6 7' stroke='%23F2677A' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3Cpath d='M20 2 Q12 6 6 7' stroke='%23F2677A' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3Ccircle cx='0' cy='8' r='5' fill='%23D93A4E' stroke='%238F1624' stroke-width='1'/%3E%3C/g%3E%3Cg%3E%3Cpath d='M360 8 C330 -14 324 20 360 8Z' fill='%23C42A3C' stroke='%238F1624' stroke-width='1.2'/%3E%3Cpath d='M360 8 C390 -14 396 20 360 8Z' fill='%23C42A3C' stroke='%238F1624' stroke-width='1.2'/%3E%3Cpath d='M360 8 L347 36 L353 32 L358 38Z' fill='%23A91F30'/%3E%3Cpath d='M360 8 L373 36 L367 32 L362 38Z' fill='%23A91F30'/%3E%3Cpath d='M340 2 Q348 6 354 7' stroke='%23F2677A' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3Cpath d='M380 2 Q372 6 366 7' stroke='%23F2677A' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3Ccircle cx='360' cy='8' r='5' fill='%23D93A4E' stroke='%238F1624' stroke-width='1'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 240px 57px repeat-x;
  pointer-events: none;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .35));
}
.garland::before,
.garland::after {
  content: "";
  position: absolute;
  inset: 0;
  background-repeat: repeat-x;
  background-size: 240px 57px;
  animation: twinkle 2.4s ease-in-out infinite alternate;
}
.garland::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 90' width='360' height='90'%3E%3Cdefs%3E%3CradialGradient id='gl0'%3E%3Cstop offset='0' stop-color='%23FFD479' stop-opacity='.7'/%3E%3Cstop offset='1' stop-color='%23FFD479' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='gl2'%3E%3Cstop offset='0' stop-color='%237FE3DA' stop-opacity='.7'/%3E%3Cstop offset='1' stop-color='%237FE3DA' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='50.4' cy='42.34' r='15' fill='url(%23gl0)'/%3E%3Cline x1='50.4' y1='25.34' x2='50.4' y2='30.34' stroke='%230b3b28' stroke-width='1.2'/%3E%3Crect x='48' y='30.34' width='4.8' height='5.5' rx='1' fill='%232a2f2c'/%3E%3Cellipse cx='50.4' cy='42.34' rx='4.6' ry='6' fill='%23FFD479' opacity='1'/%3E%3Cellipse cx='49' cy='39.84' rx='1.3' ry='2' fill='%23fff' opacity='.8'/%3E%3Ccircle cx='230.4' cy='58.18' r='15' fill='url(%23gl2)'/%3E%3Cline x1='230.4' y1='41.18' x2='230.4' y2='46.18' stroke='%230b3b28' stroke-width='1.2'/%3E%3Crect x='228' y='46.18' width='4.8' height='5.5' rx='1' fill='%232a2f2c'/%3E%3Cellipse cx='230.4' cy='58.18' rx='4.6' ry='6' fill='%237FE3DA' opacity='1'/%3E%3Cellipse cx='229' cy='55.68' rx='1.3' ry='2' fill='%23fff' opacity='.8'/%3E%3C/svg%3E"); }
.garland::after  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 90' width='360' height='90'%3E%3Cdefs%3E%3CradialGradient id='gl1'%3E%3Cstop offset='0' stop-color='%23FF6B7D' stop-opacity='.7'/%3E%3Cstop offset='1' stop-color='%23FF6B7D' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='gl3'%3E%3Cstop offset='0' stop-color='%23F6921E' stop-opacity='.7'/%3E%3Cstop offset='1' stop-color='%23F6921E' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='129.6' cy='58.18' r='15' fill='url(%23gl1)'/%3E%3Cline x1='129.6' y1='41.18' x2='129.6' y2='46.18' stroke='%230b3b28' stroke-width='1.2'/%3E%3Crect x='127.2' y='46.18' width='4.8' height='5.5' rx='1' fill='%232a2f2c'/%3E%3Cellipse cx='129.6' cy='58.18' rx='4.6' ry='6' fill='%23FF6B7D' opacity='1'/%3E%3Cellipse cx='128.2' cy='55.68' rx='1.3' ry='2' fill='%23fff' opacity='.8'/%3E%3Ccircle cx='309.6' cy='42.34' r='15' fill='url(%23gl3)'/%3E%3Cline x1='309.6' y1='25.34' x2='309.6' y2='30.34' stroke='%230b3b28' stroke-width='1.2'/%3E%3Crect x='307.2' y='30.34' width='4.8' height='5.5' rx='1' fill='%232a2f2c'/%3E%3Cellipse cx='309.6' cy='42.34' rx='4.6' ry='6' fill='%23F6921E' opacity='1'/%3E%3Cellipse cx='308.2' cy='39.84' rx='1.3' ry='2' fill='%23fff' opacity='.8'/%3E%3C/svg%3E"); animation-delay: -1.2s; }
@media (min-width: 720px) {
  .garland { height: 90px; background-size: 360px 90px; }
  .garland::before, .garland::after { background-size: 360px 90px; }
}
.finalcta .garland { top: 8px; }
.lights { top: 10px; }

/* ----- atmosphere layer (hero, closing band) ----- */
.fx {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.fx i { position: absolute; display: block; }
.fx-glow {
  inset: 0;
  background:
    radial-gradient(50% 38% at 88% 12%, rgba(255, 196, 90, .26), transparent 70%),
    radial-gradient(60% 40% at 8% 100%, rgba(196, 42, 60, .22), transparent 70%);
}
@media (min-width: 980px) {
  .fx-glow {
    background:
      radial-gradient(34% 62% at 77% 50%, rgba(255, 190, 80, .3), transparent 70%),
      radial-gradient(40% 50% at 0% 0%, rgba(196, 42, 60, .22), transparent 70%),
      radial-gradient(45% 55% at 100% 100%, rgba(255, 212, 121, .12), transparent 70%);
  }
}


/* Retire the section 18 snow (replaced by .fx above). */
.hero::after,
.finalcta::after { content: none; }


/* ----- hero refinements ----- */
.hero__inner { padding-top: 54px; }
@media (min-width: 720px) { .hero__inner { padding-top: 96px; } }

.hero__points svg,
.hero__loc svg,
.hero__call svg { fill: var(--gold); }

/* Slow shine across the main button, so the eye finds it. */
.hero .btn--primary { position: relative; overflow: hidden; }
.hero .btn--primary::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: -40%;
  width: 30%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: skewX(-18deg) translateX(-100%);
  animation: shine 5s ease-in-out 1.6s infinite;
}
@keyframes shine { 0%, 55% { transform: skewX(-18deg) translateX(-100%); } 100% { transform: skewX(-18deg) translateX(560%); } }


/* Snow drift along the foot of the hero, in the colour of the section below. */
.hero__drift {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 30px;
  z-index: 3;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 30' width='160' height='30'%3E%3Crect y='20' width='160' height='10' fill='%23f7f1e6'/%3E%3Ccircle cx='16' cy='21' r='11' fill='%23f7f1e6'/%3E%3Ccircle cx='48' cy='21' r='8' fill='%23f7f1e6'/%3E%3Ccircle cx='80' cy='21' r='13' fill='%23f7f1e6'/%3E%3Ccircle cx='112' cy='21' r='9' fill='%23f7f1e6'/%3E%3Ccircle cx='142' cy='21' r='12' fill='%23f7f1e6'/%3E%3C/svg%3E") 0 100% / 160px 30px repeat-x;
  pointer-events: none;
}

/* ----- section edges: snow caps instead of ticket perforation ----- */
.section--dark::before,
.finalcta::before {
  top: -1px;
  height: 30px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 30' width='160' height='30'%3E%3Crect width='160' height='9' fill='%23ffffff'/%3E%3Ccircle cx='12' cy='9' r='8' fill='%23ffffff'/%3E%3Ccircle cx='36' cy='9' r='6' fill='%23ffffff'/%3E%3Ccircle cx='58' cy='9' r='11' fill='%23ffffff'/%3E%3Ccircle cx='84' cy='9' r='7' fill='%23ffffff'/%3E%3Ccircle cx='104' cy='9' r='9' fill='%23ffffff'/%3E%3Ccircle cx='128' cy='9' r='6' fill='%23ffffff'/%3E%3Ccircle cx='148' cy='9' r='9' fill='%23ffffff'/%3E%3Cpolygon points='46,13 52,13 49,24' fill='%23ffffff'/%3E%3Cpolygon points='92,13 100,13 96,29' fill='%23ffffff'/%3E%3Cpolygon points='118,13 124,13 121,25' fill='%23ffffff'/%3E%3Cpolygon points='28,13 38,13 33,28' fill='%23ffffff'/%3E%3C/svg%3E") 0 0 / 160px 30px repeat-x;
  z-index: 2;
}
.section--dark {
  background:
    var(--dots),
    radial-gradient(70% 60% at 100% 0%, rgba(196, 42, 60, .26), transparent 70%),
    radial-gradient(60% 50% at 0% 100%, rgba(22, 90, 65, .55), transparent 70%),
    var(--night);
}

/* ----- eyebrows and heading flourishes ----- */
.eyebrow { color: var(--berry-dark); }
.eyebrow::before {
  width: 15px; height: 15px;
  background: var(--berry);
  -webkit-mask: var(--snowflake) center / contain no-repeat;
          mask: var(--snowflake) center / contain no-repeat;
}
.section--dark .eyebrow::before,
.finalcta .eyebrow::before { background: var(--gold); }

.section-head h2::after {
  content: "";
  display: block;
  width: 260px; max-width: 80%; height: 34px;
  margin: 10px auto 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 34' width='260' height='34'%3E%3Cpath d='M6 17H96' stroke='%23C42A3C' stroke-width='2' stroke-linecap='round' stroke-dasharray='1 7'/%3E%3Cpath d='M164 17H254' stroke='%23C42A3C' stroke-width='2' stroke-linecap='round' stroke-dasharray='1 7'/%3E%3Cg transform='translate(130 18) scale(.5)'%3E%3Cg transform='translate(-45 -36)'%3E%3Cg transform='translate(45 36)'%3E%3Cg transform='rotate(205)'%3E%3Cpath d='M0 0 L3.8 -3.81 L7.6 -5 L11.4 -9.97 L15.2 -8.08 L19 -12.32 L22.8 -8.08 L26.6 -9.97 L30.4 -5 L34.2 -3.81 L38 0 L38 0 L34.2 3.81 L30.4 5 L26.6 9.97 L22.8 8.08 L19 12.33 L15.2 8.08 L11.4 9.97 L7.6 5 L3.8 3.81 L0 0Z' fill='%231F7A4F' stroke='%230D4A30' stroke-width='1.2' stroke-linejoin='round'/%3E%3Cline x1='2' y1='0' x2='35' y2='0' stroke='%230D4A30' stroke-width='1.2'/%3E%3C/g%3E%3Cg transform='rotate(335)'%3E%3Cpath d='M0 0 L3.8 -3.81 L7.6 -5 L11.4 -9.97 L15.2 -8.08 L19 -12.32 L22.8 -8.08 L26.6 -9.97 L30.4 -5 L34.2 -3.81 L38 0 L38 0 L34.2 3.81 L30.4 5 L26.6 9.97 L22.8 8.08 L19 12.33 L15.2 8.08 L11.4 9.97 L7.6 5 L3.8 3.81 L0 0Z' fill='%231F7A4F' stroke='%230D4A30' stroke-width='1.2' stroke-linejoin='round'/%3E%3Cline x1='2' y1='0' x2='35' y2='0' stroke='%230D4A30' stroke-width='1.2'/%3E%3C/g%3E%3Ccircle cx='-5' cy='2' r='5.4' fill='%23E23A4E' stroke='%239D1D2D' stroke-width='1'/%3E%3Ccircle cx='5' cy='3' r='5.4' fill='%23E23A4E' stroke='%239D1D2D' stroke-width='1'/%3E%3Ccircle cx='0' cy='-5' r='5.4' fill='%23E23A4E' stroke='%239D1D2D' stroke-width='1'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}
.section--dark .section-head h2::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 34' width='260' height='34'%3E%3Cpath d='M6 17H96' stroke='%23FFD479' stroke-width='2' stroke-linecap='round' stroke-dasharray='1 7'/%3E%3Cpath d='M164 17H254' stroke='%23FFD479' stroke-width='2' stroke-linecap='round' stroke-dasharray='1 7'/%3E%3Cg transform='translate(130 18) scale(.5)'%3E%3Cg transform='translate(-45 -36)'%3E%3Cg transform='translate(45 36)'%3E%3Cg transform='rotate(205)'%3E%3Cpath d='M0 0 L3.8 -3.81 L7.6 -5 L11.4 -9.97 L15.2 -8.08 L19 -12.32 L22.8 -8.08 L26.6 -9.97 L30.4 -5 L34.2 -3.81 L38 0 L38 0 L34.2 3.81 L30.4 5 L26.6 9.97 L22.8 8.08 L19 12.33 L15.2 8.08 L11.4 9.97 L7.6 5 L3.8 3.81 L0 0Z' fill='%231F7A4F' stroke='%230D4A30' stroke-width='1.2' stroke-linejoin='round'/%3E%3Cline x1='2' y1='0' x2='35' y2='0' stroke='%230D4A30' stroke-width='1.2'/%3E%3C/g%3E%3Cg transform='rotate(335)'%3E%3Cpath d='M0 0 L3.8 -3.81 L7.6 -5 L11.4 -9.97 L15.2 -8.08 L19 -12.32 L22.8 -8.08 L26.6 -9.97 L30.4 -5 L34.2 -3.81 L38 0 L38 0 L34.2 3.81 L30.4 5 L26.6 9.97 L22.8 8.08 L19 12.33 L15.2 8.08 L11.4 9.97 L7.6 5 L3.8 3.81 L0 0Z' fill='%231F7A4F' stroke='%230D4A30' stroke-width='1.2' stroke-linejoin='round'/%3E%3Cline x1='2' y1='0' x2='35' y2='0' stroke='%230D4A30' stroke-width='1.2'/%3E%3C/g%3E%3Ccircle cx='-5' cy='2' r='5.4' fill='%23E23A4E' stroke='%239D1D2D' stroke-width='1'/%3E%3Ccircle cx='5' cy='3' r='5.4' fill='%23E23A4E' stroke='%239D1D2D' stroke-width='1'/%3E%3Ccircle cx='0' cy='-5' r='5.4' fill='%23E23A4E' stroke='%239D1D2D' stroke-width='1'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }

/* ----- trim: candy-cane under the header, on the footer, on the polaroid tape ----- */
.header { border-bottom: 0; }
.header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -5px;
  height: 5px;
  background: var(--candy);
  pointer-events: none;
}
.footer { position: relative; background: #050d08; border-top: 0; }
.footer::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 6px;
  background: var(--candy);
}
.polaroid::before,
.polaroid--team::before {
  background: repeating-linear-gradient(-45deg, rgba(196, 42, 60, .82) 0 6px, rgba(255, 255, 255, .85) 6px 12px);
}

/* ----- colour moves: teal and orange accents become pine, berry and gold ----- */
.btn--teal { background: var(--pine-2); color: var(--white); box-shadow: 0 5px 0 0 var(--pine), var(--shadow-sm); }
.btn--teal:hover { background: #1b6d4e; }
.btn--teal:active { box-shadow: 0 2px 0 0 var(--pine); }
.header__phone svg { fill: var(--gold); }

.quote::before { color: var(--berry); }
.reviews__head h2 [data-reviews] { color: var(--berry); }
.reviews__link { border-bottom-color: var(--berry); }
.reviews__link:hover { color: var(--berry-dark); }
.plan__link { border-bottom-color: var(--berry); }

.plan__item::before { background: repeating-linear-gradient(to bottom, #e9b9bf 0 6px, transparent 6px 12px); }
.plan__icon { background: #e4f1ea; }
.plan__icon svg { fill: var(--pine-2); }
.plan__item--us .plan__icon { background: var(--berry); box-shadow: 0 0 0 6px #f9dde0; }
.plan__item--us .plan__icon svg { fill: var(--white); }
.plan__rain svg { fill: var(--gold); }

.room__tag--beginner { background: var(--pine-2); color: var(--white); }
.room__tag--beginner + .room__level { color: var(--pine-2); }
.room__toggle { color: var(--pine-2); border-color: var(--pine-2); }
.room__toggle[aria-expanded="true"] { background: #e4f1ea; }
.room__meta svg { fill: var(--pine-2); }
.room--featured { position: relative; }
.room--featured::after {
  content: "";
  position: absolute;
  top: -22px; right: -10px;
  width: 104px; height: 70px;
  background: var(--holly) center / contain no-repeat;
  transform: rotate(8deg);
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .25));
  pointer-events: none;
  z-index: 2;
}

.pricing__best { background: var(--pine); }
.pricing__best-tag { background: var(--berry); color: var(--white); }
.pricetable thead th { background: var(--pine); }
.pricetable thead th:last-child { background: var(--berry-dark); }
.pricetable tbody td.is-best { color: var(--pine); background: #fff3cf; }
.price-note { background: #fff6e0; border-color: #f0dfae; }
.price-note svg { fill: var(--berry); }

.booking__meta { background: linear-gradient(135deg, var(--pine) 0%, var(--pine-2) 100%); }
.booking__trust svg { fill: var(--gold); }

.feature:hover { border-color: #f0dfae; }
.feature__icon { background: var(--pine-2); }
.feature:nth-child(even) .feature__icon { background: var(--berry); transform: rotate(4deg); }
.stepcard::before { background: var(--berry); color: var(--white); box-shadow: 0 4px 0 var(--berry-dark); }

.occasion:hover { border-color: rgba(255, 212, 121, .5); }
.occasion svg { background: rgba(255, 212, 121, .16); fill: var(--gold); }

.addr svg { background: var(--berry); fill: var(--white); }
.hours tr.is-today td { color: var(--pine); }

.faq details[open] { border-color: #f0c8cd; box-shadow: inset 4px 0 0 var(--berry), var(--shadow-sm); }
.faq summary::before,
.faq summary::after { background: var(--berry); }
.faq summary { background-image: radial-gradient(circle 15px at calc(100% - 31px) 50%, #fde8ea 98%, transparent); }
.faq summary:hover { color: var(--berry-dark); }
.footer a:hover { color: var(--gold); }

/* --------------------------------------------------------------------------
   20. Hero scene and snow canvas (lp-3 only)

   Desktop: the keyhole is replaced by a Christmas wreath hung from the
   garland on a red ribbon, with the Nisse photo in its centre, a bow,
   berries, baubles and twinkling lights. It sways a degree or two. Phone:
   unchanged, the photo stays a full-bleed backdrop.
   Snow is drawn by js/snow.js on <canvas class="snow">: "back" sits behind
   the copy, "front" is a few large soft flakes in front of everything.
   -------------------------------------------------------------------------- */
.snow {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  display: block;
  pointer-events: none;
}
.snow--front { z-index: 4; }

.hero__ribbon,
.wreath-lights { display: none; }

@media (min-width: 980px) {
  .hero__visual {
    width: min(116%, 530px);
    aspect-ratio: 500 / 540;
    transform-origin: 50% -190px;
    animation: iris .8s cubic-bezier(.2, .7, .2, 1) .1s both, wreath-swing 5.2s ease-in-out 1s infinite alternate;
  }
  /* Warm glow behind the wreath, in place of the old offset print. */
  .hero__visual::before {
    inset: 6% -4% 4%;
    transform: none;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 190, 80, .42), rgba(255, 190, 80, 0) 66%);
    -webkit-mask: none;
            mask: none;
    filter: blur(8px);
  }
  .hero__keyhole {
    -webkit-mask: none;
            mask: none;
    inset: 13% auto auto 14%;
    width: 72%;
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: inset 0 0 46px rgba(0, 0, 0, .55);
  }
  .hero__keyhole img {
    object-position: center;
    transform: scale(1.3);
    transform-origin: 33% 46%;
  }
  .hero__visual::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: url("../img/wreath.svg") center / 100% 100% no-repeat;
    filter: drop-shadow(0 12px 16px rgba(0, 0, 0, .5));
    pointer-events: none;
  }
  .hero__ribbon {
    display: block;
    position: absolute;
    left: 50%; top: -230px;
    width: 20px; height: 310px;
    margin-left: -10px;
    z-index: 1;
    border-radius: 10px;
    /* Twisted red rope: diagonal strands under a round-shading overlay. */
    background:
      linear-gradient(90deg, rgba(0, 0, 0, .55) 0, rgba(0, 0, 0, .08) 22%, rgba(255, 255, 255, .3) 40%, rgba(0, 0, 0, .1) 62%, rgba(0, 0, 0, .6) 100%),
      repeating-linear-gradient(-62deg, #7d1220 0 2.5px, #c42a3c 2.5px 6px, #f27a89 6px 7.5px, #d83a4e 7.5px 11px);
    box-shadow: 0 0 0 1px rgba(40, 0, 6, .55), 0 6px 10px rgba(0, 0, 0, .3);
  }
  .wreath-lights {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 3;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 540' width='500' height='540'%3E%3Ccircle cx='278.68' cy='45.91' r='6.5' fill='%23FFD479' opacity='0.35'/%3E%3Ccircle cx='350.29' cy='121.63' r='6.5' fill='%23FF6B7D' opacity='0.35'/%3E%3Ccircle cx='441.09' cy='172.79' r='6.5' fill='%237FE3DA' opacity='0.35'/%3E%3Ccircle cx='411.31' cy='272.67' r='6.5' fill='%23F6921E' opacity='0.35'/%3E%3Ccircle cx='412.41' cy='376.89' r='6.5' fill='%23FFD479' opacity='0.35'/%3E%3Ccircle cx='311.02' cy='401.04' r='6.5' fill='%23FF6B7D' opacity='0.35'/%3E%3Ccircle cx='149.71' cy='378.37' r='6.5' fill='%23F6921E' opacity='0.35'/%3E%3Ccircle cx='58.91' cy='327.21' r='6.5' fill='%23FFD479' opacity='0.35'/%3E%3Ccircle cx='88.69' cy='227.33' r='6.5' fill='%23FF6B7D' opacity='0.35'/%3E%3Ccircle cx='87.59' cy='123.11' r='6.5' fill='%237FE3DA' opacity='0.35'/%3E%3Ccircle cx='188.98' cy='98.96' r='6.5' fill='%23F6921E' opacity='0.35'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    pointer-events: none;
  }
  .wreath-lights::before,
  .wreath-lights::after {
    content: "";
    position: absolute;
    inset: 0;
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    animation: twinkle 2.2s ease-in-out infinite alternate;
  }
  .wreath-lights::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 540' width='500' height='540'%3E%3Cdefs%3E%3CradialGradient id='w0'%3E%3Cstop offset='0' stop-color='%23FFD479' stop-opacity='.8'/%3E%3Cstop offset='1' stop-color='%23FFD479' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='w2'%3E%3Cstop offset='0' stop-color='%237FE3DA' stop-opacity='.8'/%3E%3Cstop offset='1' stop-color='%237FE3DA' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='w4'%3E%3Cstop offset='0' stop-color='%23FFD479' stop-opacity='.8'/%3E%3Cstop offset='1' stop-color='%23FFD479' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='w7'%3E%3Cstop offset='0' stop-color='%23F6921E' stop-opacity='.8'/%3E%3Cstop offset='1' stop-color='%23F6921E' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='w9'%3E%3Cstop offset='0' stop-color='%23FF6B7D' stop-opacity='.8'/%3E%3Cstop offset='1' stop-color='%23FF6B7D' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='w11'%3E%3Cstop offset='0' stop-color='%23F6921E' stop-opacity='.8'/%3E%3Cstop offset='1' stop-color='%23F6921E' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='278.68' cy='45.91' r='24' fill='url(%23w0)'/%3E%3Ccircle cx='278.68' cy='45.91' r='6.5' fill='%23FFD479' opacity='1'/%3E%3Ccircle cx='276.68' cy='43.91' r='2' fill='%23fff' opacity='.85'/%3E%3Ccircle cx='441.09' cy='172.79' r='24' fill='url(%23w2)'/%3E%3Ccircle cx='441.09' cy='172.79' r='6.5' fill='%237FE3DA' opacity='1'/%3E%3Ccircle cx='439.09' cy='170.79' r='2' fill='%23fff' opacity='.85'/%3E%3Ccircle cx='412.41' cy='376.89' r='24' fill='url(%23w4)'/%3E%3Ccircle cx='412.41' cy='376.89' r='6.5' fill='%23FFD479' opacity='1'/%3E%3Ccircle cx='410.41' cy='374.89' r='2' fill='%23fff' opacity='.85'/%3E%3Ccircle cx='149.71' cy='378.37' r='24' fill='url(%23w7)'/%3E%3Ccircle cx='149.71' cy='378.37' r='6.5' fill='%23F6921E' opacity='1'/%3E%3Ccircle cx='147.71' cy='376.37' r='2' fill='%23fff' opacity='.85'/%3E%3Ccircle cx='88.69' cy='227.33' r='24' fill='url(%23w9)'/%3E%3Ccircle cx='88.69' cy='227.33' r='6.5' fill='%23FF6B7D' opacity='1'/%3E%3Ccircle cx='86.69' cy='225.33' r='2' fill='%23fff' opacity='.85'/%3E%3Ccircle cx='188.98' cy='98.96' r='24' fill='url(%23w11)'/%3E%3Ccircle cx='188.98' cy='98.96' r='6.5' fill='%23F6921E' opacity='1'/%3E%3Ccircle cx='186.98' cy='96.96' r='2' fill='%23fff' opacity='.85'/%3E%3C/svg%3E"); }
  .wreath-lights::after  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 540' width='500' height='540'%3E%3Cdefs%3E%3CradialGradient id='w1'%3E%3Cstop offset='0' stop-color='%23FF6B7D' stop-opacity='.8'/%3E%3Cstop offset='1' stop-color='%23FF6B7D' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='w3'%3E%3Cstop offset='0' stop-color='%23F6921E' stop-opacity='.8'/%3E%3Cstop offset='1' stop-color='%23F6921E' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='w5'%3E%3Cstop offset='0' stop-color='%23FF6B7D' stop-opacity='.8'/%3E%3Cstop offset='1' stop-color='%23FF6B7D' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='w8'%3E%3Cstop offset='0' stop-color='%23FFD479' stop-opacity='.8'/%3E%3Cstop offset='1' stop-color='%23FFD479' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='w10'%3E%3Cstop offset='0' stop-color='%237FE3DA' stop-opacity='.8'/%3E%3Cstop offset='1' stop-color='%237FE3DA' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='350.29' cy='121.63' r='24' fill='url(%23w1)'/%3E%3Ccircle cx='350.29' cy='121.63' r='6.5' fill='%23FF6B7D' opacity='1'/%3E%3Ccircle cx='348.29' cy='119.63' r='2' fill='%23fff' opacity='.85'/%3E%3Ccircle cx='411.31' cy='272.67' r='24' fill='url(%23w3)'/%3E%3Ccircle cx='411.31' cy='272.67' r='6.5' fill='%23F6921E' opacity='1'/%3E%3Ccircle cx='409.31' cy='270.67' r='2' fill='%23fff' opacity='.85'/%3E%3Ccircle cx='311.02' cy='401.04' r='24' fill='url(%23w5)'/%3E%3Ccircle cx='311.02' cy='401.04' r='6.5' fill='%23FF6B7D' opacity='1'/%3E%3Ccircle cx='309.02' cy='399.04' r='2' fill='%23fff' opacity='.85'/%3E%3Ccircle cx='58.91' cy='327.21' r='24' fill='url(%23w8)'/%3E%3Ccircle cx='58.91' cy='327.21' r='6.5' fill='%23FFD479' opacity='1'/%3E%3Ccircle cx='56.91' cy='325.21' r='2' fill='%23fff' opacity='.85'/%3E%3Ccircle cx='87.59' cy='123.11' r='24' fill='url(%23w10)'/%3E%3Ccircle cx='87.59' cy='123.11' r='6.5' fill='%237FE3DA' opacity='1'/%3E%3Ccircle cx='85.59' cy='121.11' r='2' fill='%23fff' opacity='.85'/%3E%3C/svg%3E"); animation-delay: -1.1s; }

  .hero__ticket { left: -64px; bottom: 30px; z-index: 5; scale: .86; }
}

.baubles { display: none; }
@media (min-width: 980px) {
  .baubles { display: block; position: absolute; left: 0; right: 0; top: -150px; height: 0; z-index: 4; pointer-events: none; }
  .bauble {
    position: absolute; top: 0;
    width: var(--d); height: calc(var(--len) + var(--d));
    margin-left: calc(var(--d) / -2);
    transform-origin: 50% 0;
    animation: swing var(--t, 4.6s) ease-in-out infinite alternate;
  }
  .bauble::before {
    content: ""; position: absolute; left: 50%; top: 0;
    width: 1px; height: var(--len);
    background: rgba(255, 255, 255, .4);
  }
  .bauble i {
    position: absolute; left: 0; top: var(--len);
    width: var(--d); height: var(--d); border-radius: 50%;
    background:
      radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .9) 0 7%, rgba(255, 255, 255, 0) 16%),
      radial-gradient(circle at 36% 32%, var(--c1), var(--c2) 78%);
    box-shadow: 0 6px 14px rgba(0, 0, 0, .35), 0 0 22px var(--glow);
  }
  .bauble i::before {
    content: ""; position: absolute; left: 50%; top: -6px;
    width: 12px; height: 8px; margin-left: -6px; border-radius: 2px 2px 0 0;
    background: linear-gradient(#f4d27a, #b8862b);
  }
  .b1 { --d: 46px; --len: 150px; --c1: #ff7d8d; --c2: #a11a2c; --glow: rgba(226, 58, 78, .45); left: 6%; --t: 5.4s; }
  .b2 { --d: 36px; --len: 84px; --c1: #ffeaa8; --c2: #b8862b; --glow: rgba(255, 212, 121, .5); left: 31%; --t: 4.4s; animation-delay: -1.4s; }
  .b3 { --d: 40px; --len: 96px; --c1: #6fe6da; --c2: #00776e; --glow: rgba(0, 168, 156, .4); left: 67%; --t: 5.8s; animation-delay: -2.8s; }
  .b4 { --d: 50px; --len: 140px; --c1: #ff7d8d; --c2: #a11a2c; --glow: rgba(226, 58, 78, .45); left: 92%; --t: 5s; animation-delay: -0.8s; }
  .b4 { --c1: #ffe39a; --c2: #b8862b; --glow: rgba(255, 212, 121, .5); }
}
@keyframes swing { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }
@keyframes wreath-swing { from { transform: rotate(-1.3deg); } to { transform: rotate(1.3deg); } }

/* Solid header: a backdrop blur over the animated hero canvas can fail to
   paint in Chrome (blank white band), and the header gains nothing from it. */
.header {
  background: #08170f;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
}

/* --------------------------------------------------------------------------
   21. Follow-ups (lp-3 only)
   -------------------------------------------------------------------------- */
/* Gift strip lines up with the pricing block above it (same 980px column). */
.gift { max-width: 980px; margin-inline: auto; }

/* Snow behind the "Who it's for" cards. The canvas sits under the content and
   the cards are solid, so no flake shows in front of or through a card. */
.snow--section { z-index: 0; }
.section--dark > .wrap { position: relative; z-index: 1; }
.occasion { background: #0e2219; }
.occasion:hover { background: #132c20; }

/* --------------------------------------------------------------------------
   22. Load choreography (lp-3 only)

   The hero used to start animating the moment it was parsed, while fonts and
   images were still arriving, so it popped and shifted. Now, until the head
   script adds .is-ready, the hero copy, scene and garland are held at
   opacity 0 and every decorative animation is switched off. When .is-ready
   lands they fade and rise in together and the animations start from the
   same moment. If the script never fires, a CSS timer still reveals the hero
   after 2.6s. Heavy filters (drop-shadow, blur) are removed from the animated
   layers, and the scale-in on the wreath is a plain fade, since scaling an
   art-heavy SVG forces a re-render every frame.
   -------------------------------------------------------------------------- */
@keyframes reveal-failsafe { to { opacity: 1; } }
@keyframes fade-in { from { opacity: 0; } }

.js:not(.is-ready) .hero__copy > *,
.js:not(.is-ready) .hero__visual,
.js:not(.is-ready) .garland {
  opacity: 0;
  animation: reveal-failsafe .01s 2.6s forwards;
}
.js:not(.is-ready) .garland::before,
.js:not(.is-ready) .garland::after,
.js:not(.is-ready) .wreath-lights::before,
.js:not(.is-ready) .wreath-lights::after,
.js:not(.is-ready) .bauble,
.js:not(.is-ready) .hero__ticket,
.js:not(.is-ready) .hero .btn--primary::after { animation: none; }

/* Baseline before the lights start twinkling. */
.garland::before, .garland::after,
.wreath-lights::before, .wreath-lights::after { opacity: .6; }

.garland { filter: none; animation: fade-in .6s ease both; }
.hero__visual { animation: fade-in .8s ease .1s both; }
.snow { opacity: 0; transition: opacity 1.6s ease .2s; }
.is-ready .snow { opacity: 1; }

@media (min-width: 980px) {
  .hero__visual {
    animation: fade-in .8s ease .1s both, wreath-swing 5.2s ease-in-out 0s infinite alternate both;
    will-change: transform;
  }
  .hero__visual::before { filter: none; }
  .hero__visual::after { filter: none; }
  .room--featured::after { filter: none; }
}

/* --------------------------------------------------------------------------
   23. Eyebrows (lp-3 only)
   -------------------------------------------------------------------------- */
/* The snowflake that opens every eyebrow also closes it. */
.eyebrow::after {
  content: "";
  flex: none;
  width: 15px; height: 15px;
  background: var(--berry);
  -webkit-mask: var(--snowflake) center / contain no-repeat;
          mask: var(--snowflake) center / contain no-repeat;
}
.section--dark .eyebrow::after,
.finalcta .eyebrow::after { background: var(--gold); }