/* ==========================================================================
   SYSTEM
   Tokens -> base -> components (btn, sec, card, panel, chip) -> sections.
   Every section is built from the same parts. Only the band colour changes.
   ========================================================================== */
/* Fonts: self-hosted latin variable files. The fallback faces re-scale local Arial to the real
   fonts' measured widths (size-adjust) and vertical metrics (overrides = metric / size-adjust),
   so the swap barely moves anything. Text measures are in em (1ch of Figtree = 0.64em, rounded down so a measure never exceeds its old ch cap), not ch:
   ch follows the zero glyph, which differs between a fallback and the real font, and would re-wrap on swap. */
@font-face{font-family:'Outfit';font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/outfit-latin-wght.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Figtree';font-style:normal;font-weight:300 900;font-display:swap;src:url(fonts/figtree-latin-wght.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Outfit Fallback';font-weight:600 900;font-display:swap;src:local('Arial Bold'),local('Arial-BoldMT');
  size-adjust:95%;ascent-override:105.26%;descent-override:27.37%;line-gap-override:0%}
@font-face{font-family:'Figtree Fallback';font-weight:300 599;font-display:swap;src:local('Arial'),local('ArialMT');
  size-adjust:100.5%;ascent-override:94.53%;descent-override:24.88%;line-gap-override:0%}
@font-face{font-family:'Figtree Fallback';font-weight:600 900;font-display:swap;src:local('Arial Bold'),local('Arial-BoldMT');
  size-adjust:96.2%;ascent-override:98.75%;descent-override:25.99%;line-gap-override:0%}
:root{
  /* colour */
  --navy:#001f5e; --navy-2:#0a2f78; --navy-3:#10388a; --cream:#f7f4f4; --white:#fff;
  --pink:#ffc1bf; --sky:#4dbce3; --red:#d12a32; --red-hover:#b8222a; --link:#1b6f94; --muted:#1b4a8a;
  --on-navy-1:#dbe6f8; --on-navy-2:#c7d6f0; --on-navy-3:#9fb4d8;
  --line-light:color-mix(in srgb,var(--navy) 13%,transparent);
  --line-dark:color-mix(in srgb,#fff 13%,transparent);
  --focus:var(--sky);
  /* hero sky gradient stops and photo placeholder stripes */
  --dusk-1:#0a2a78; --dusk-2:#3a2f93; --dusk-3:#7b4a9e; --dusk-4:#c9708f;
  --ph-a:#d3e2f1; --ph-b:#e6f0f8;
  /* type */
  --display:'Outfit','Outfit Fallback','Century Gothic',sans-serif;
  --body:'Figtree','Figtree Fallback','Segoe UI',system-ui,sans-serif;
  /* Type scale. rem + clamp only, so every size follows the visitor's text setting and viewport. */
  --fs-display:clamp(2.75rem,1.5rem + 5.4vw,5.75rem);   /* hero title */
  --fs-stat:clamp(4.5rem,3rem + 7vw,8rem);               /* the price */
  --fs-hours:clamp(2.75rem,2rem + 3.2vw,4.5rem);         /* opening hours */
  --fs-h2:clamp(2.125rem,1.45rem + 2.7vw,3.625rem);      /* section titles */
  --fs-date:clamp(2.125rem,1.7rem + 1.3vw,2.875rem);     /* week dates */
  --fs-panel:clamp(1.5rem,1.3rem + .9vw,2rem);           /* panel titles */
  --fs-h3:clamp(1.375rem,1.2rem + .75vw,1.75rem);        /* card titles */
  --fs-intro:clamp(1.25rem,1.1rem + .8vw,1.625rem);      /* intro statement */
  --fs-pill:clamp(1.125rem,1rem + .6vw,1.5rem);          /* date pill, banners */
  --fs-h4:clamp(1.125rem,1.05rem + .5vw,1.3125rem);      /* FAQ questions */
  --fs-lead:clamp(1.125rem,1.05rem + .35vw,1.3125rem);   /* section lead-in */
  --fs-body:1.0625rem; --fs-card:1rem; --fs-btn:1.0625rem; --fs-btn-sm:.9375rem;
  --fs-small:.875rem; --fs-label:.8125rem; --fs-micro:.75rem;
  --lh-tight:1.02; --lh-snug:1.2; --lh-body:1.55; --ls-label:.12em;
  /* space: 4px grid */
  --s0:4px; --s1:8px; --s15:12px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:96px;
  /* shape + depth */
  --r-sm:8px; --r-md:12px; --r-lg:24px; --r-pill:9999px; --edge:64px;
  --elev-1:0 4px 12px rgba(0,0,0,.28);
  --elev-2:0 20px 30px rgba(23,73,77,.15);
  --elev-3:0 28px 44px rgba(0,31,94,.28);
  --elev-halo:0 0 0 8px var(--navy);
  --tilt-a:-1.8deg; --tilt-b:1.4deg; --lift-y:12px;
  /* motion */
  --ease:cubic-bezier(.22,1,.36,1); --t:.3s; --t-slow:.7s;
  /* layers */
  --z-band:1; --z-snow:20; --z-toggle:25; --z-header:30;
  --header-h:72px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + var(--s2))}
body{margin:0;background:var(--navy);color:var(--cream);font:400 var(--fs-body)/var(--lh-body) var(--body);overflow-x:hidden}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:var(--lh-tight);margin:0;text-wrap:balance;overflow-wrap:break-word}
h1{font-size:min(var(--fs-display),15vw);font-weight:800}
h2{font-size:min(var(--fs-h2),11.5vw)}
h3{font-size:var(--fs-h3)}
.card h3{line-height:var(--lh-snug)}
@media (min-width:561px){.card h3{min-height:calc(var(--lh-snug) * 2em)}}
p{margin:0}
a{color:inherit}
:where(a,button,summary):focus-visible{outline:3px solid var(--focus);outline-offset:3px}
/* Focus ring colour per band: sky on night, navy on light surfaces (WCAG 1.4.11, 3:1 against what is behind the ring) */
.sec--pink,.sec--cream,.panel,.promo,.intro__card,.week{--focus:var(--navy)}
.hdr,.hero,.sec--navy,.panel--navy,.foot{--focus:var(--sky)}
/* Over the hero render the backdrop can be bright anywhere (a sky ring measured 1.27:1 behind the button on mobile), so back the ring with a navy halo that covers the ring band */
.hero :where(a,button):focus-visible{box-shadow:var(--elev-halo)}
.wrap{width:100%;max-width:1180px;margin-inline:auto;padding-inline:max(20px,env(safe-area-inset-left,0px))}

/* ---------- Button: primary + secondary only ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 28px;border-radius:var(--r-md);
  font:700 var(--fs-btn)/1 var(--display);text-decoration:none;cursor:pointer;border:2px solid transparent;
  transition:transform var(--t) var(--ease),background-color var(--t),color var(--t),border-color var(--t)}
.btn:active{transform:translateY(0) scale(.98)}
.btn--primary{background:var(--red);color:var(--white)}
.btn--secondary{background:transparent;color:inherit;border-color:currentColor}
/* Over the hero picture the outline button carries the glass fill (navy 72%) so its label stays 4.5:1 over any video frame or still */
#hero .btn--secondary{background:color-mix(in srgb,var(--navy) 72%,transparent)}
.btn-row{display:flex;gap:var(--s2);flex-wrap:wrap}
.btn-row--center{justify-content:center}

/* ---------- Header: no menu, no nav ---------- */
.hdr{position:fixed;inset:0 auto auto 0;width:100%;z-index:var(--z-header);display:flex;align-items:center;
  height:calc(var(--header-h) + env(safe-area-inset-top,0px));padding-top:env(safe-area-inset-top,0px);
  background:color-mix(in srgb,var(--navy) 94%,transparent);border-bottom:1px solid transparent;
  transition:background-color var(--t) var(--ease),border-color var(--t) var(--ease)}
.js .hdr:not(.is-scrolled){background:transparent}
.hdr.is-scrolled{background:color-mix(in srgb,var(--navy) 72%,transparent);-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);border-bottom-color:var(--line-dark)}
@supports not (backdrop-filter:blur(1px)){.hdr.is-scrolled{background:color-mix(in srgb,var(--navy) 94%,transparent)}}
.hdr .wrap{width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--s2);flex-wrap:nowrap}
.savedate{display:inline-flex;align-items:center;gap:.75rem;min-height:44px;min-width:0;color:var(--cream);text-decoration:none}
.savedate__cal{flex:none;display:grid;width:3.25rem;border-radius:var(--r-sm);overflow:hidden;background:var(--cream);color:var(--navy);text-align:center;line-height:1;box-shadow:var(--elev-1)}
.savedate__cal b{background:var(--red);color:var(--white);font:800 var(--fs-micro)/1 var(--body);letter-spacing:var(--ls-label);padding:var(--s0) 0}
.savedate__cal i{font:800 var(--fs-btn-sm)/1 var(--display);font-style:normal;padding:var(--s1) var(--s0)}
.savedate__text{display:flex;flex-direction:column;gap:var(--s0);min-width:0;text-align:left}
.savedate__label{font:700 var(--fs-micro)/1 var(--body);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--on-navy-1)}
.savedate__past{display:none}
.savedate__date{font:800 var(--fs-btn)/1.1 var(--display)}
.savedate__time{font:500 var(--fs-label)/1.25 var(--body);color:var(--on-navy-1)}
[data-phase="after"] .savedate__live{display:none}
[data-phase="after"] .savedate__past{display:inline}
@media (hover:hover){.savedate:hover .savedate__cal{transform:translateY(-2px)}}
.savedate__cal{transition:transform var(--t) var(--ease)}
.hdr .btn{min-height:44px;padding:12px 20px;font-size:var(--fs-btn-sm);white-space:nowrap}

/* ---------- Section: band + head ---------- */
.sec{position:relative;z-index:var(--z-band);margin-top:calc(var(--s6) * -1);padding-block:calc(var(--s7) + var(--s2)) var(--s7);
  border-radius:50% 50% 0 0 / var(--edge) var(--edge) 0 0}
.sec--navy{background:var(--navy)}
.sec--pink{background:var(--pink);color:var(--navy)}
.sec--cream{background:var(--cream);color:var(--navy)}
.sec__head{max-width:700px;margin:0 auto var(--s5);text-align:center;display:flex;flex-direction:column;gap:var(--s2);align-items:center}
.sec__lead{font-size:var(--fs-lead);max-width:35.84em}
.eyebrow{font:700 var(--fs-label)/1 var(--body);letter-spacing:var(--ls-label);text-transform:uppercase;padding:8px 16px;border-radius:var(--r-pill);background:var(--navy);color:var(--cream)}
.sec--navy .eyebrow{background:var(--sky);color:var(--navy)}

p,.faq .a{text-wrap:pretty}

/* ---------- Chip ---------- */
.chip{display:inline-block;font:700 var(--fs-micro)/1 var(--body);letter-spacing:.08em;text-transform:uppercase;padding:8px 12px;border-radius:var(--r-sm);background:var(--cream);color:var(--navy)}
.chip--accent{background:var(--sky)}
.chip{text-wrap:balance}

/* ---------- Card (photo card, shared by Four ways + Entertainment) ---------- */
.grid{display:grid;gap:var(--s3)}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.card{--rot:0deg;--lift:0px;position:relative;display:flex;flex-direction:column;min-width:0;background:var(--cream);color:var(--navy);
  border-radius:var(--r-md);overflow:hidden;box-shadow:var(--elev-2);
  rotate:var(--rot);translate:0 var(--lift);
  transition:rotate var(--t) var(--ease),translate var(--t) var(--ease),box-shadow var(--t),opacity var(--t-slow) var(--ease)}
.tilt > .card:nth-child(odd){--rot:var(--tilt-a)}
.tilt > .card:nth-child(even){--rot:var(--tilt-b);--lift:var(--lift-y)}
.card__media{position:relative;overflow:hidden;aspect-ratio:4/3}
.card__media .ph,.card__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease)}
.card__media .chip{position:absolute;top:var(--s2);left:var(--s2)}
.card__body{padding:var(--s3);display:flex;flex-direction:column;gap:var(--s1);flex:1}
.card__body p{font-size:var(--fs-card);max-width:38.40em}
.card__actions{margin-top:auto;display:flex;flex-direction:column;align-items:stretch;gap:var(--s1);padding-top:var(--s2)}
.card__actions .btn{width:100%}
.card__link{align-self:flex-start;font:700 var(--fs-btn-sm) var(--display);color:var(--link);text-decoration:none;display:inline-flex;gap:var(--s1);align-items:center;min-height:44px}
.arrow{flex:none;width:1em;height:1em;vertical-align:-.125em}
.ph{display:grid;place-items:center;text-align:center;padding:12px;font:600 var(--fs-label) var(--body);color:color-mix(in srgb,var(--navy) 80%,transparent);
  background:repeating-linear-gradient(135deg,var(--ph-a) 0 10px,var(--ph-b) 10px 20px)}

/* ---------- Panel (cream surface used for info) ---------- */
.panel{background:var(--white);color:var(--navy);border-radius:var(--r-md);padding:var(--s4);box-shadow:var(--elev-2);display:flex;flex-direction:column;gap:var(--s2);min-width:0}
.panel--navy{background:var(--navy);color:var(--cream);box-shadow:none}
.panel h3{font-size:min(var(--fs-panel),6.4vw)}

/* ==========================================================================
   SECTIONS
   ========================================================================== */
/* Hero: one illustrated scene looking down sideshow alley. Layers zoom toward the vanishing point as you scroll. */
.hero{position:relative;isolation:isolate;overflow:hidden;text-align:center;min-height:calc(clamp(700px,calc(50vw + 340px),940px) + var(--s5));padding-top:calc(var(--header-h) + var(--s5));
  /* keeps the call to action above the lit arch when the content, not min-height, sets the hero height (narrow phones) */
  padding-bottom:calc(var(--s6) * 4 + var(--s2));
  background:var(--navy)}
.hero .wrap{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:var(--s3)}

.scene{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:var(--navy) linear-gradient(180deg,var(--navy) 0%,var(--dusk-1) 36%,var(--dusk-2) 60%,var(--dusk-3) 78%,var(--dusk-4) 100%)}
.scene__stars,.scene__layer{--p:0;transform-origin:50% 64%;transform:scale(calc(1 + var(--z,0) * var(--hero-p,0)))}
.scene__stars{position:absolute;inset:0;width:100%;height:100%}
.scene{--sw:clamp(1180px,100%,1600px)}
.scene__layer{position:absolute;left:50%;bottom:calc(var(--s6) * -1);width:var(--sw);height:auto;margin-left:calc(var(--sw) / -2);will-change:transform}
.wheel{transform-box:fill-box;transform-origin:center;animation:spin 160s linear infinite}
.scene__render{position:absolute;inset:0;transform-origin:var(--vp-x,50%) var(--vp-y,64%);transform:scale(calc(1.02 + .24 * var(--hero-p,0)));will-change:transform}
.scene__render picture{display:block;width:100%;height:100%}
.scene__render img,.scene__video{width:100%;height:100%;object-fit:cover;object-position:50% 70%;display:block}
/* The video sits over the still, invisible until it is really playing, then fades in over --t-slow */
.scene__video{position:absolute;inset:0;opacity:0;transition:opacity var(--t-slow) var(--ease)}
.scene__video.is-playing{opacity:1}
.scene--render::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,24,80,.82) 0%,rgba(0,24,80,.74) 40%,rgba(0,24,80,.4) 62%,rgba(0,24,80,0) 80%)}
.twinkle{animation:twinkle 4s ease-in-out infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes twinkle{50%{opacity:.25}}
.hero__sub{margin:0;max-width:21.76em;font:500 var(--fs-lead)/1.4 var(--body);color:var(--on-navy-1)}
.date-pill{display:inline-block;background:var(--cream);color:var(--navy);font:700 var(--fs-pill)/1 var(--display);padding:12px 24px;border-radius:var(--r-pill)}

/* Intro (glow when scrolled into view) */
.intro__card{position:relative;max-width:780px;margin-inline:auto;background:var(--cream);color:var(--navy);border-radius:var(--r-lg);
  padding:var(--s5) var(--s4);text-align:center;font:700 var(--fs-intro)/1.25 var(--display);isolation:isolate}
.intro__card p{margin:0}
.intro__lead{text-wrap:balance}
.intro__sub{margin-top:var(--s2)!important;font:500 var(--fs-lead)/1.45 var(--body);color:var(--muted)}
.intro__card b{color:var(--link)}
.intro__card::before{content:"";position:absolute;inset:auto 6% -34px 6%;height:110px;z-index:-1;border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(77,188,227,.95),rgba(77,188,227,0) 70%);filter:blur(26px);opacity:0;
  transform:scaleX(.7);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.intro__card.is-in::before,html:not(.js) .intro__card::before{opacity:1;transform:scaleX(1);animation:breathe 4.5s ease-in-out 1.2s infinite}
@keyframes breathe{0%,100%{opacity:1}50%{opacity:.65}}

/* Prices (Winter Wonderland promo pattern) */
.promo{display:grid;grid-template-columns:1.05fr 1fr;border-radius:var(--r-lg);overflow:hidden;background:var(--sky);color:var(--navy);position:relative}
.promo__img{position:relative;min-height:380px;border-radius:0 55% 55% 0 / 0 100% 100% 0;overflow:hidden}
.promo__img .ph{position:absolute;inset:0;height:100%}
.promo__seal{position:absolute;top:var(--s3);left:var(--s3);width:7rem;height:7rem;border-radius:50%;background:var(--cream);color:var(--navy);
  display:grid;place-items:center;text-align:center;font:800 var(--fs-btn-sm)/1.05 var(--display);text-transform:uppercase;border:4px solid var(--sky);box-shadow:var(--elev-2);z-index:2}
.promo__body{padding:clamp(28px,5vw,64px);display:flex;flex-direction:column;gap:var(--s2);justify-content:center}
.promo__body .eyebrow{align-self:flex-start;background:var(--navy);color:var(--cream)}
.price-big{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:var(--s15);font:800 min(var(--fs-stat),28vw)/.85 var(--display)}
.price-big__unit{font:700 var(--fs-lead)/1.1 var(--display);letter-spacing:0}
.coupon{display:flex;gap:var(--s3);align-items:center;margin-top:var(--s2);flex-wrap:wrap}
.burst{flex:none;width:min(9.75rem,100%);height:auto;aspect-ratio:1;display:grid;place-items:center;text-align:center;background:var(--red);color:var(--white);padding:20px;
  font:700 1.1875rem/1.05 var(--display);
  clip-path:polygon(50% 0,59% 8%,71% 4%,76% 15%,88% 15%,88% 27%,98% 33%,92% 44%,100% 55%,91% 63%,94% 75%,83% 79%,80% 91%,68% 90%,59% 100%,50% 93%,41% 100%,32% 90%,20% 91%,17% 79%,6% 75%,9% 63%,0 55%,8% 44%,2% 33%,12% 27%,12% 15%,24% 15%,29% 4%,41% 8%)}
.burst small{display:block;font:500 var(--fs-label) var(--body);margin-top:4px}
.coupon p{flex:1 1 220px}

/* Plan your visit */
.visit{display:grid;grid-template-columns:1.1fr 1fr;gap:var(--s3);align-items:stretch}
.visit__left{display:flex;flex-direction:column;gap:var(--s3);min-width:0}
.hours__big{font:800 min(var(--fs-hours),13vw)/.95 var(--display);letter-spacing:-.01em}
.hours__label{font:700 var(--fs-label)/1 var(--body);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--sky)}
.hours .note{color:var(--on-navy-2);font-size:var(--fs-small)}
.visit__label{margin:var(--s1) 0 calc(var(--s1) * -1);font:700 var(--fs-label)/1 var(--body);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--muted)}
.weeks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2);flex:1}
.week{background:var(--white);border-radius:var(--r-md);padding:var(--s3) var(--s2);text-align:center;box-shadow:var(--elev-2);display:flex;flex-direction:column;gap:var(--s1);align-items:center;
  border-top:8px solid var(--pink);justify-content:center}
.week:nth-child(2){border-top-color:var(--sky)}
.week:nth-child(3){border-top-color:var(--red)}
.week b{font:700 var(--fs-label)/1 var(--body);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--muted)}
.week .d{font:800 var(--fs-date)/1 var(--display)}
.week .m{font:700 var(--fs-small) var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.where{padding:0;overflow:hidden}
.where__map{display:block;width:100%;height:auto;flex:1;min-height:240px}
.where__body{padding:var(--s3) var(--s4) var(--s4);display:flex;flex-direction:column;gap:var(--s2)}

/* Ride rules */
.rides{max-width:760px;margin-inline:auto;display:flex;flex-direction:column}
.rides > div{display:flex;justify-content:space-between;gap:var(--s2);padding:var(--s2) 4px;border-bottom:2px solid var(--line-light);font-size:var(--fs-lead)}
.rides b{font-family:var(--display)}
.rides__note{max-width:760px;margin:var(--s3) auto 0;font-size:var(--fs-small);color:var(--muted);text-align:center}
.rides span{text-align:right;color:var(--muted);font-weight:500}

/* FAQ */
.faq{max-width:780px;margin-inline:auto;display:flex;flex-direction:column;gap:var(--s1)}
.faq details{background:var(--navy-2);border-radius:var(--r-md);transition:background-color var(--t)}
.faq details[open]{background:var(--navy-3)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:var(--s2);min-height:64px;padding:var(--s2) var(--s3);font:700 var(--fs-h4)/var(--lh-snug) var(--display)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:14px;height:14px;border-right:3px solid var(--sky);border-bottom:3px solid var(--sky);rotate:45deg;translate:0 -3px;transition:rotate var(--t) var(--ease)}
.faq details[open] summary::after{rotate:-135deg;translate:0 3px}
.faq .a{padding:0 var(--s3) var(--s3);color:var(--on-navy-1);max-width:39.68em}

/* Footer */
.foot{position:relative;z-index:var(--z-band);background:var(--navy);margin-top:calc(var(--s6) * -1);padding-block:calc(var(--s7) + var(--s2)) calc(var(--s7) + env(safe-area-inset-bottom,0px));text-align:center;
  border-radius:50% 50% 0 0 / var(--edge) var(--edge) 0 0}
.foot .wrap{display:flex;flex-direction:column;align-items:center;gap:var(--s4)}
.foot .fine{font-size:var(--fs-small);color:var(--on-navy-3);max-width:38.40em}

/* Footer bottom row + Powered by Metrix pill (spec v2) */
.foot .foot__bottom{flex-direction:row;flex-wrap:wrap;justify-content:space-between;gap:var(--s2);border-top:1px solid var(--line-dark);margin-top:var(--s6);padding-top:var(--s3);font-size:var(--fs-small);color:var(--on-navy-3)}
.powered-by-metrix-pill{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;padding:.5rem 1rem;border:1px solid currentColor;border-radius:0;color:var(--cream);text-decoration:none;opacity:.85;transition:opacity var(--t)}
.powered-by-metrix-pill__label{font-size:10px;font-weight:500;letter-spacing:.025em}
.powered-by-metrix-pill svg{height:.75rem;width:auto}
@media (hover:hover){.powered-by-metrix-pill:hover{opacity:1}}

/* Motion toggle: a utility control (WCAG 2.2.2), fixed bottom left over any band. Glass like the header; the focus ring is cream with a navy halo so it reads over pink, sky, cream and navy alike. */
.motion-toggle{position:fixed;left:max(var(--s2),env(safe-area-inset-left,0px));bottom:max(var(--s2),env(safe-area-inset-bottom,0px));z-index:var(--z-toggle);
  display:grid;place-items:center;width:48px;height:48px;padding:0;border:1px solid var(--line-dark);border-radius:var(--r-pill);
  background:color-mix(in srgb,var(--navy) 72%,transparent);-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);
  color:var(--cream);box-shadow:var(--elev-1);cursor:pointer;transition:transform var(--t) var(--ease)}
@supports not (backdrop-filter:blur(1px)){.motion-toggle{background:color-mix(in srgb,var(--navy) 94%,transparent)}}
.motion-toggle:focus-visible{outline:3px solid var(--cream);outline-offset:3px;box-shadow:var(--elev-halo)}
.motion-toggle:active{transform:scale(.96)}
.motion-toggle svg{display:block;width:24px;height:24px}
.motion-toggle .motion-toggle__play,.motion-toggle[aria-pressed="true"] .motion-toggle__pause{display:none}
.motion-toggle[aria-pressed="true"] .motion-toggle__play{display:block}
@media (hover:hover){.motion-toggle:hover{transform:translateY(-2px)}}
html:not(.js) .motion-toggle{display:none}

/* The one motion switch: html[data-motion="off"] stops everything that moves for more than 5 s (the video and snow are also stopped by their scripts) */
:root[data-motion="off"] #snow,:root[data-motion="off"] .scene__video{display:none}
:root[data-motion="off"] .wheel,:root[data-motion="off"] .twinkle,:root[data-motion="off"] .intro__card::before{animation:none}
:root[data-motion="off"] .rv{opacity:1;translate:0 var(--lift,0px)}

/* Snow */
#snow{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:var(--z-snow)}

/* Reveal on scroll (content stays visible without JS) */
.js .rv{opacity:0;translate:0 28px}
.js .rv.is-in{opacity:1;translate:0 var(--lift,0px);transition-delay:calc(var(--i,0) * 80ms)}
.js .intro__card.rv,.js .sec__head.rv,.js .promo.rv,.js .visit.rv,.js .rides.rv,.js .faq.rv,.js .foot .wrap.rv{transition:opacity var(--t-slow) var(--ease),translate var(--t-slow) var(--ease)}

/* Focus states (keyboard) always apply; hover states only where hover exists */
.card:focus-within{rotate:0deg;translate:0 -8px;box-shadow:var(--elev-3);transition-delay:0s}
.card:focus-within .card__media .ph{transform:scale(1.08) rotate(.6deg)}
.js .card.rv.is-in:focus-within{translate:0 -8px;transition-delay:0s}
@media (hover:hover){
  .btn:hover{transform:translateY(-3px)}
  .btn--primary:hover{background:var(--red-hover)}
  .btn--secondary:hover{background:color-mix(in srgb,currentColor 14%,transparent)}
  #hero .btn--secondary:hover{background:var(--navy)}
  .card:hover{rotate:0deg;translate:0 -8px;box-shadow:var(--elev-3);transition-delay:0s}
  .card:hover .card__media .ph,.card:hover .card__media img{transform:scale(1.08) rotate(.6deg)}
  .card__link:hover{text-decoration:underline}
  .js .card.rv.is-in:hover{translate:0 -8px;transition-delay:0s}
}

/* Photos */
.card__media picture,.poster picture{display:block;width:100%;height:100%}
.promo__img picture{position:absolute;inset:0;display:block}
.promo__img img{width:100%;height:100%;object-fit:cover;display:block}
.poster{overflow:hidden}
.poster img{width:100%;height:100%;object-fit:cover;display:block}
.poster:has(img){padding:0;border:0;background:none}

/* Skip link + screen-reader text */
.skip{position:absolute;left:var(--s2);top:-80px;z-index:calc(var(--z-header) + 1);background:var(--cream);color:var(--navy);font:700 1rem var(--display);padding:12px 20px;border-radius:var(--r-md);text-decoration:none;transition:top var(--t) var(--ease)}
.skip:focus{top:var(--s1)}
.nowrap{white-space:nowrap}
.sr-only{position:absolute;width:1px;height:1px;margin:0;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Event phase: countdown before, banner after */
.countdown{align-self:center;font-size:var(--fs-label)}
.countdown:empty{display:none}
.after{display:none;max-width:560px;background:var(--cream);color:var(--navy);border-radius:var(--r-lg);padding:var(--s3) var(--s4);font:600 var(--fs-h4)/1.35 var(--display)}
[data-phase="after"] .after{display:block}
[data-phase="after"] #hero .btn,[data-phase="after"] .hdr .btn,[data-phase="after"] .countdown{display:none}

/* Responsive */
@media (max-width:960px){
  .grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid--3,.visit,.promo{grid-template-columns:minmax(0,1fr)}
  .grid--3 > .card{max-width:560px;margin-inline:auto;width:100%}
  .promo__img{min-height:260px;border-radius:0 0 50% 50% / 0 0 var(--edge) var(--edge)}
  .brand small{display:none}
}
@media (max-width:560px){
  .savedate__cal,.savedate__label{display:none}
  /* phones stack the title, subtitle and button lower in a shorter hero, so the scrim holds its strength further down */
  .scene--render::after{background:linear-gradient(180deg,rgba(0,24,80,.82) 0%,rgba(0,24,80,.74) 56%,rgba(0,24,80,.4) 70%,rgba(0,24,80,0) 86%)}
  .hdr .btn{padding:12px 16px}
  .grid--4{grid-template-columns:minmax(0,1fr)}
  .tilt > .card:nth-child(even){--lift:0px}
  .weeks{grid-template-columns:minmax(0,1fr)}
  .week{flex-direction:row;flex-wrap:wrap;justify-content:space-between;border-top:0;border-left:8px solid var(--pink);text-align:left}
  .week:nth-child(2){border-left-color:var(--sky)}
  .week:nth-child(3){border-left-color:var(--red)}
  .rides > div{flex-direction:column;gap:4px}
  .rides span{text-align:left}
  .foot .foot__bottom{flex-direction:column;align-items:center;justify-content:center;text-align:center}
  .btn-row{flex-direction:column;align-items:center}
  .btn{display:flex;width:min(100%,20rem);margin-inline:auto}
  .hdr .btn{display:inline-flex;width:auto;margin-inline:0}
  .card__actions .btn{width:100%}
}
/* The narrowest phones: half the header gap keeps the date on one line beside the one-line Buy tickets button */
@media (max-width:359px){.hdr .wrap{gap:var(--s1)}}
/* The OS reduced-motion setting is the default for the switch (the inline script sets data-motion="off"); a visitor who turns animation on opts back in, so these rules step aside for data-motion="on" */
@media (prefers-reduced-motion:reduce){
  :root:not([data-motion="on"]) *,:root:not([data-motion="on"]) *::before,:root:not([data-motion="on"]) *::after{transition-duration:.01ms!important;animation:none!important;scroll-behavior:auto!important}
  :root:not([data-motion="on"]) .rv{opacity:1;translate:0 var(--lift,0px)}
  :root:not([data-motion="on"]) #snow{display:none}
}
@media (forced-colors:active){.btn,.card,.panel,.chip{border:2px solid CanvasText}}

/* Not-found page (404.html): one centred message on the navy page background. */
.nf{display:grid;place-items:center;min-height:100vh;min-height:100svh;padding-block:var(--s7);text-align:center}
.nf p{max-width:28em;margin:var(--s3) auto var(--s4);font-size:var(--fs-lead);color:var(--on-navy-1)}