/* =========================================================
   Midway Motion & Fitness — Design System
   Rehoboth Beach, DE
   ========================================================= */

/* ---------- Tokens ----------
   This :root block is the BASE THEME. Alternate themes (e.g. halloween) live
   at the bottom of this file under html[data-theme="..."] and only override
   tokens + add decor. Switch themes with SITE.theme in build/layout.js. */
:root{
  /* Brand accent — baby blue */
  --red:#7EC8E3;
  --red-hi:#9FDCF2;
  --red-dim:#4A9FC7;
  --blue:#0088CB;
  --blue-hi:#2BA8E6;
  --yellow:#FFCB05;
  /* RGB triplets of the accents/ground, for rgba() washes and glows */
  --red-rgb:126,200,227;
  --blue-rgb:0,136,203;
  --yellow-rgb:255,203,5;
  --ink-rgb:10,10,11;
  /* Text colour that sits ON a filled accent (buttons, marquee, tabs) */
  --on-red:#fff;
  --on-blue:#fff;
  /* Tints for the two gradient feature sections (inline styles in build/) */
  --glow-a:#1a0508;
  --glow-b:#001a28;
  /* Display face for the big headlines (hero/h1/h2) */
  --display-xl:var(--display);

  /* Neutrals */
  --ink:#0A0A0B;
  --ink-2:#121214;
  --ink-3:#1A1A1D;
  --ink-4:#232327;
  --paper:#FFFFFF;
  --paper-2:#F5F5F3;
  --paper-3:#EAEAE6;

  --fg:#FFFFFF;
  --fg-2:#C9C9CF;
  --fg-3:#8B8B93;
  --line:rgba(255,255,255,.11);
  --line-2:rgba(255,255,255,.06);

  /* Type */
  --display:"Barlow Condensed",'Arial Narrow',Impact,system-ui,sans-serif;
  --body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  /* Scale — fluid */
  --t-hero:clamp(2.9rem,8.6vw,8.6rem);
  --t-h1:clamp(2.6rem,6.4vw,6rem);
  --t-h2:clamp(2rem,4.6vw,4rem);
  --t-h3:clamp(1.35rem,2.2vw,2rem);
  --t-lead:clamp(1.05rem,1.45vw,1.35rem);
  --t-body:clamp(1rem,1.05vw,1.075rem);
  --t-sm:.875rem;
  --t-xs:.75rem;

  /* Space */
  --gut:clamp(1.25rem,4vw,3.5rem);
  --sec:clamp(4.5rem,10vw,9.5rem);
  --max:1320px;
  --max-read:68ch;

  --r-sm:6px; --r:14px; --r-lg:24px;
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--ink);color:var(--fg);
  font-family:var(--body);font-size:var(--t-body);line-height:1.65;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  /* overflow-x:clip contains horizontal overflow WITHOUT making body a scroll
     container. overflow-x:hidden here computes overflow-y:auto, which makes
     ScrollTrigger read body.scrollTop (always 0) and silently breaks every
     scroll-triggered reveal on the site. Do not change this back to hidden. */
  overflow-x:clip;
}
@supports not (overflow: clip){
  html{overflow-x:hidden}
  body{overflow-x:visible}
}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
h1,h2,h3,h4,h5{margin:0;font-family:var(--display);font-weight:800;line-height:.95;letter-spacing:-.02em;text-transform:uppercase}
p{margin:0 0 1.15em}
ul,ol{margin:0 0 1.15em;padding-left:1.25em}
hr{border:0;border-top:1px solid var(--line);margin:2.5rem 0}
::selection{background:var(--red);color:var(--on-red)}

/* ---------- Layout ---------- */
.wrap{width:min(100% - (var(--gut)*2),var(--max));margin-inline:auto}
.wrap--wide{width:min(100% - (var(--gut)*2),1560px);margin-inline:auto}
.wrap--read{width:min(100% - (var(--gut)*2),var(--max-read));margin-inline:auto}
.section{padding-block:var(--sec);position:relative}
.section--tight{padding-block:clamp(3rem,6vw,5.5rem)}
.section--light{background:var(--paper);color:var(--ink)}
.section--paper{background:var(--paper-2);color:var(--ink)}
.section--ink2{background:var(--ink-2)}
.section--light h1,.section--light h2,.section--light h3,
.section--paper h1,.section--paper h2,.section--paper h3{color:var(--ink)}

.stack>*+*{margin-top:var(--s,1.5rem)}
.grid{display:grid;gap:clamp(1rem,2vw,1.75rem)}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:960px){.g-3,.g-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.g-2,.g-3,.g-4{grid-template-columns:1fr}}

/* ---------- Type helpers ---------- */
.eyebrow{
  font-family:var(--body);font-size:var(--t-xs);font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:var(--red);
  display:inline-flex;align-items:center;gap:.7em;margin:0 0 1.1rem;
}
.eyebrow::before{content:"";width:2.2rem;height:2px;background:var(--red);display:block}
.eyebrow--blue{color:var(--blue-hi)}.eyebrow--blue::before{background:var(--blue-hi)}
.eyebrow--ink{color:var(--red)}
.h-hero{font-size:var(--t-hero);font-weight:900;letter-spacing:-.035em;line-height:.86}
.h1{font-size:var(--t-h1)}
.h2{font-size:var(--t-h2)}
.h3{font-size:var(--t-h3);letter-spacing:-.01em}
.lead{font-size:var(--t-lead);line-height:1.55;color:var(--fg-2);max-width:60ch}
.section--light .lead,.section--paper .lead{color:#44444C}
.muted{color:var(--fg-3)}
.section--light .muted,.section--paper .muted{color:#6B6B75}
.accent{color:var(--red)}
.outline-txt{-webkit-text-stroke:1.5px var(--red);color:transparent}

/* ---------- Buttons ---------- */
.btn{
  --bg:var(--red);--bd:var(--red);--fg-b:var(--on-red);
  display:inline-flex;align-items:center;justify-content:center;gap:.65em;
  padding:1.05em 2.1em;border:1.5px solid var(--bd);background:var(--bg);color:var(--fg-b);
  font-family:var(--body);font-weight:700;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;
  border-radius:999px;cursor:pointer;position:relative;overflow:hidden;isolation:isolate;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),color .3s var(--ease);
  will-change:transform;
}
.btn::after{
  content:"";position:absolute;inset:0;background:#fff;z-index:-1;
  transform:translateY(101%);transition:transform .45s var(--ease);
}
.btn:hover{transform:translateY(-3px);box-shadow:0 14px 34px -12px rgba(var(--red-rgb),.65)}
.btn:hover::after{transform:translateY(0)}
.btn:hover{color:var(--red)}
.btn:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
.btn .ar{transition:transform .4s var(--ease)}
.btn:hover .ar{transform:translateX(4px)}

.btn--ghost{--bg:transparent;--bd:rgba(255,255,255,.32);--fg-b:#fff}
.btn--ghost:hover{color:var(--ink);box-shadow:0 14px 34px -14px rgba(255,255,255,.4)}
.btn--ghost::after{background:#fff}
.btn--dark{--bg:var(--ink);--bd:var(--ink);--fg-b:#fff}
.btn--dark:hover{color:var(--ink)}
.btn--dark::after{background:var(--yellow)}
.btn--blue{--bg:var(--blue);--bd:var(--blue);--fg-b:var(--on-blue)}
.btn--blue:hover{color:var(--blue);box-shadow:0 14px 34px -12px rgba(var(--blue-rgb),.6)}
.btn--sm{padding:.8em 1.5em;font-size:.72rem}
.btn-row{display:flex;flex-wrap:wrap;gap:.85rem;align-items:center}

/* ---------- Header / Nav ---------- */
.hdr{
  position:fixed;inset:0 0 auto 0;z-index:200;
  padding:1.15rem 0;transition:padding .4s var(--ease),background .4s var(--ease),backdrop-filter .4s var(--ease),border-color .4s var(--ease);
  border-bottom:1px solid transparent;
}
.hdr.is-stuck{
  padding:.6rem 0;background:rgba(var(--ink-rgb),.86);
  -webkit-backdrop-filter:saturate(160%) blur(18px);backdrop-filter:saturate(160%) blur(18px);
  border-bottom-color:var(--line);
}
.hdr__in{display:flex;align-items:center;justify-content:space-between;gap:1.5rem}
.brand{display:flex;align-items:center;gap:.8rem;flex:0 0 auto}
.brand img{height:clamp(72px,9vw,132px);width:auto;transition:height .4s var(--ease)}
.hdr.is-stuck .brand img{height:clamp(56px,6.4vw,88px)}
.brand__txt{font-family:var(--display);font-weight:800;font-size:1.05rem;line-height:1;letter-spacing:.01em;text-transform:uppercase}
.brand__txt span{display:block;font-size:.58rem;font-family:var(--body);font-weight:600;letter-spacing:.24em;color:var(--fg-3);margin-top:.28em}

.nav{display:flex;align-items:center;gap:clamp(.6rem,1.6vw,1.9rem)}
.nav a{
  position:relative;font-size:.79rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  padding:.45em 0;color:var(--fg-2);transition:color .3s var(--ease);white-space:nowrap;
}
.nav a::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--red);
  transform:scaleX(0);transform-origin:right;transition:transform .42s var(--ease);
}
.nav a:hover,.nav a[aria-current="page"]{color:#fff}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}
.nav__cta{margin-left:.6rem}

/* --- Header CTA -------------------------------------------------------
   `.nav a` (specificity 0,0,1,1) outranks `.btn` (0,0,1,0), so the nav's
   link styles were quietly winning over the button's: padding collapsed to
   `.45em 0` (no horizontal padding at all — the text sat on the pill edge),
   the white fill sweep was replaced by the nav underline, and the hover
   colour stayed white so the label vanished against the white fill.
   Everything below re-asserts the button at matching-or-higher specificity.
   Keep the `.nav a.btn` prefix on these — plain `.btn` will not win here. */
.nav a.btn{
  padding:1.15em 2.3em;
  font-size:.84rem;
  color:var(--on-red);
}
.nav a.btn::after{
  content:"";position:absolute;inset:0;width:auto;height:auto;
  background:#fff;z-index:-1;
  transform:translateY(101%);transform-origin:center;
  transition:transform .45s var(--ease);
}
.nav a.btn:hover{color:var(--red)}
.nav a.btn:hover::after{transform:translateY(0)}
.hdr.is-stuck .nav a.btn{padding:.95em 1.95em;font-size:.78rem}
/* Nav gets tight between the big logo and the CTA before the burger kicks
   in at 1080px — ease the CTA back rather than let the row wrap. */
@media (max-width:1240px){
  .nav a.btn{padding:.95em 1.75em;font-size:.78rem}
  .hdr.is-stuck .nav a.btn{padding:.85em 1.6em;font-size:.74rem}
}
@media (max-width:1080px){.nav--main{display:none}}

.burger{
  display:none;width:46px;height:46px;border:1px solid var(--line);background:transparent;
  border-radius:999px;cursor:pointer;place-items:center;flex:0 0 auto;transition:background .3s
}
.burger:hover{background:rgba(255,255,255,.07)}
.burger span{display:block;width:18px;height:1.6px;background:#fff;margin:3.2px auto;transition:transform .4s var(--ease),opacity .3s}
@media (max-width:1080px){.burger{display:grid}}
body.menu-open .burger span:nth-child(1){transform:translateY(4.8px) rotate(45deg)}
body.menu-open .burger span:nth-child(2){opacity:0}
body.menu-open .burger span:nth-child(3){transform:translateY(-4.8px) rotate(-45deg)}

.drawer{
  position:fixed;inset:0;z-index:190;background:var(--ink);
  display:flex;flex-direction:column;justify-content:center;padding:6rem var(--gut) 3rem;
  clip-path:inset(0 0 100% 0);pointer-events:none;
}
.drawer.is-open{pointer-events:auto}
.drawer a{
  font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:-.01em;
  font-size:clamp(2rem,7vw,3.6rem);line-height:1.08;color:var(--fg);padding:.12em 0;
  display:block;transition:color .3s var(--ease),transform .4s var(--ease);
}
.drawer a:hover{color:var(--red);transform:translateX(12px)}
.drawer__meta{margin-top:2.5rem;border-top:1px solid var(--line);padding-top:1.5rem;color:var(--fg-3);font-size:.88rem}
.drawer__meta a{font-family:var(--body);font-size:.88rem;text-transform:none;letter-spacing:0;display:inline;font-weight:600;color:var(--fg-2)}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:100svh;display:grid;align-items:end;overflow:hidden;isolation:isolate}
.hero__media{position:absolute;inset:-8% 0 -8% 0;z-index:-2;will-change:transform}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:center 42%}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgba(var(--ink-rgb),.82) 0%,rgba(var(--ink-rgb),.30) 34%,rgba(var(--ink-rgb),.62) 68%,var(--ink) 100%),
    radial-gradient(90% 70% at 12% 88%,rgba(var(--red-rgb),.30),transparent 62%);
}
.hero__in{padding-block:clamp(10rem,22vh,13.5rem) clamp(3.5rem,9vh,6rem);position:relative}
.hero__kicker{
  display:inline-flex;align-items:center;gap:.7rem;padding:.5rem 1.1rem;border:1px solid rgba(255,255,255,.26);
  border-radius:999px;font-size:.7rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:rgba(255,255,255,.06);margin-bottom:1.6rem;
}
.hero__kicker .dot{width:7px;height:7px;border-radius:50%;background:var(--red);animation:pulse 2.4s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.75)}}
.hero h1{margin-bottom:1.5rem}
.hero h1 .ln{display:block;overflow:hidden}
.hero h1 .ln i{display:block;font-style:normal;will-change:transform}
.hero__lead{max-width:52ch;font-size:var(--t-lead);color:#E4E4EA;margin-bottom:2.2rem}
/* Oversized brand mark on the open right-hand side of the hero. Decorative and
   click-through; centred by flex so GSAP can animate the img's own transform. */
.hero__mark{
  /* Height is pinned to the viewport, not the hero: the hero runs taller than
     one screen (bottom-aligned copy + header clearance), so centring on it
     would drop the mark below the fold. */
  position:absolute;top:0;left:0;right:0;height:100svh;
  display:flex;align-items:center;justify-content:flex-end;
  padding-right:clamp(2rem,7vw,8rem);pointer-events:none;z-index:0;
}
.hero__mark img{
  width:clamp(240px,28vw,540px);height:auto;display:block;margin-top:5vh;
  filter:drop-shadow(0 22px 52px rgba(0,0,0,.55));
}
/* Below this the headline claims the full width — there is no empty side left */
@media (max-width:1100px){.hero__mark{display:none}}
.hero__scroll{
  position:absolute;right:var(--gut);bottom:clamp(2rem,5vh,3.4rem);
  writing-mode:vertical-rl;font-size:.66rem;letter-spacing:.28em;text-transform:uppercase;color:var(--fg-3);
  display:flex;align-items:center;gap:.9rem;
}
.hero__scroll::after{content:"";width:1px;height:64px;background:linear-gradient(var(--red),transparent)}
@media (max-width:760px){.hero__scroll{display:none}}

/* Hero stat strip */
.hero__stats{
  display:flex;flex-wrap:wrap;gap:clamp(1.5rem,4vw,3.6rem);
  margin-top:2.8rem;padding-top:1.9rem;border-top:1px solid var(--line);
}
.hstat b{display:block;font-family:var(--display);font-size:clamp(2rem,3.4vw,3rem);font-weight:800;line-height:1;color:#fff}
.hstat b span{font:inherit;letter-spacing:inherit;text-transform:none;color:inherit}
.hstat > span{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-3);font-weight:600}

/* Live "how busy are we" meter — fills based on time of day, see main.js.
   Sits to the right of the "Right Now" caption, same fonts/colors as the
   other hero stats — just this tile lays its two spans out inline. */
.hstat--busy > span{vertical-align:middle}
.hstat--busy .busy-meter{
  display:inline-block;vertical-align:middle;margin-left:.75rem;
  width:132px;max-width:38vw;height:1.05rem;
  border-radius:999px;background:rgba(255,255,255,.16);
  overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}
.hstat--busy .busy-meter__fill{
  display:block;height:100%;width:6%;border-radius:inherit;
  background:linear-gradient(90deg,var(--yellow),var(--red));
  transition:width 1.1s ease;
}

/* ---------- Marquee ---------- */
.marquee{
  background:var(--red);color:var(--on-red);padding:.95rem 0;overflow:hidden;
  border-block:1px solid rgba(0,0,0,.15);
}
.marquee--blue{background:var(--blue)}
.marquee--yellow{background:var(--yellow);color:var(--ink)}
.marquee__track{display:flex;gap:0;width:max-content;will-change:transform}
.marquee__track span{
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(1.1rem,2vw,1.6rem);letter-spacing:.02em;padding-inline:1.5rem;
  display:inline-flex;align-items:center;gap:1.5rem;white-space:nowrap;
}
.marquee__track span::after{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;opacity:.55}

/* ---------- Cards ---------- */
.card{
  background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(1.5rem,2.4vw,2.2rem);position:relative;overflow:hidden;
  transition:transform .5s var(--ease),border-color .4s var(--ease),background .4s var(--ease);
}
.card::before{
  content:"";position:absolute;left:0;top:0;height:3px;width:100%;background:var(--red);
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease);
}
.card:hover{transform:translateY(-6px);border-color:rgba(255,255,255,.2);background:var(--ink-3)}
.card:hover::before{transform:scaleX(1)}
.card h3{margin-bottom:.6rem}
.card p:last-child{margin-bottom:0}
.section--light .card,.section--paper .card{background:#fff;border-color:rgba(0,0,0,.09);color:var(--ink)}
.section--light .card:hover,.section--paper .card:hover{background:#fff;box-shadow:0 24px 50px -28px rgba(0,0,0,.35)}
.section--light .card p,.section--paper .card p{color:#4A4A52}

.card__num{
  font-family:var(--display);font-size:3.4rem;font-weight:800;line-height:1;
  color:transparent;-webkit-text-stroke:1.2px rgba(255,255,255,.22);margin-bottom:.9rem;display:block;
}
.section--light .card__num,.section--paper .card__num{-webkit-text-stroke-color:rgba(0,0,0,.18)}

/* ---------- Split feature ---------- */
.split{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.split--rev .split__media{order:2}
@media (max-width:920px){.split{grid-template-columns:1fr}.split--rev .split__media{order:0}}
.split__media{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/3;background:var(--ink-3)}
.split__media img{width:100%;height:100%;object-fit:cover;will-change:transform}
.split__media img.app-shot{object-fit:contain;background:#eef1f3;padding:2.2rem}
.split__media--phone{aspect-ratio:3/4}
.split__media::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,transparent 55%,rgba(var(--red-rgb),.16))}

/* ---------- Amenities / gallery ---------- */
.gal{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-flow:dense;gap:clamp(.6rem,1.1vw,1rem)}
.gal figure{margin:0;position:relative;overflow:hidden;border-radius:var(--r);background:var(--ink-3)}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.gal figure:hover img{transform:scale(1.06)}
.gal figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:1.4rem 1.2rem .95rem;
  background:linear-gradient(transparent,rgba(var(--ink-rgb),.9));
  font-family:var(--display);text-transform:uppercase;font-weight:700;font-size:1rem;letter-spacing:.02em;color:#fff;
}
.gal .s4{grid-column:span 4;aspect-ratio:4/3}
.gal .s6{grid-column:span 6;aspect-ratio:16/10}
.gal .s8{grid-column:span 8;aspect-ratio:16/9}
.gal .s3{grid-column:span 3;aspect-ratio:1}
@media (max-width:900px){.gal .s4,.gal .s6,.gal .s8{grid-column:span 6}.gal .s3{grid-column:span 6}}
@media (max-width:560px){.gal figure{grid-column:span 12 !important}}

/* ---------- Accordion (classes) ---------- */
.acc{border-top:1px solid var(--line)}
.section--light .acc,.section--paper .acc{border-color:rgba(0,0,0,.12)}
.acc__item{border-bottom:1px solid var(--line)}
.section--light .acc__item,.section--paper .acc__item{border-color:rgba(0,0,0,.12)}
.acc__btn{
  width:100%;background:none;border:0;text-align:left;cursor:pointer;
  display:flex;align-items:center;gap:1.2rem;padding:clamp(1.1rem,2.1vw,1.7rem) 0;
  font-family:var(--display);text-transform:uppercase;font-weight:800;letter-spacing:-.005em;
  font-size:clamp(1.35rem,2.7vw,2.1rem);line-height:1.05;color:inherit;
  transition:color .3s var(--ease),padding-left .4s var(--ease);
}
.acc__btn:hover{color:var(--red);padding-left:.55rem}
.acc__btn:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}
.acc__idx{font-family:var(--body);font-size:.7rem;font-weight:700;letter-spacing:.12em;color:var(--fg-3);flex:0 0 auto;width:2.4rem;padding-top:.35em}
.section--light .acc__idx,.section--paper .acc__idx{color:#8A8A94}
.acc__ic{margin-left:auto;flex:0 0 auto;width:34px;height:34px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;position:relative;transition:background .35s,border-color .35s,transform .45s var(--ease)}
.section--light .acc__ic,.section--paper .acc__ic{border-color:rgba(0,0,0,.16)}
.acc__ic::before,.acc__ic::after{content:"";position:absolute;background:currentColor;transition:transform .4s var(--ease),opacity .3s}
.acc__ic::before{width:12px;height:1.6px}
.acc__ic::after{width:1.6px;height:12px}
.acc__btn[aria-expanded="true"] .acc__ic{background:var(--red);border-color:var(--red);color:var(--on-red);transform:rotate(180deg)}
.acc__btn[aria-expanded="true"] .acc__ic::after{transform:scaleY(0);opacity:0}
.acc__panel{overflow:hidden;height:0}
.acc__inner{padding:0 0 1.9rem 3.6rem;max-width:72ch;color:var(--fg-2)}
.section--light .acc__inner,.section--paper .acc__inner{color:#4A4A52}
@media (max-width:600px){.acc__inner{padding-left:0}.acc__idx{display:none}}

/* ---------- Trainers ---------- */
.trainer{
  background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  display:flex;flex-direction:column;transition:transform .5s var(--ease),border-color .4s;
}
.trainer:hover{transform:translateY(-8px);border-color:rgba(255,255,255,.22)}
.trainer__ph{aspect-ratio:4/5;overflow:hidden;background:var(--ink-3);position:relative}
.trainer__ph img{width:100%;height:100%;object-fit:cover;object-position:center 22%;transition:transform 1s var(--ease),filter .6s}
.trainer:hover .trainer__ph img{transform:scale(1.05)}
.trainer__ph::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 52%,rgba(var(--ink-rgb),.88))}
.trainer__name{position:absolute;left:1.35rem;right:1.35rem;bottom:1.1rem;z-index:2}
.trainer__name h3{font-size:clamp(1.3rem,2vw,1.7rem);color:#fff}
.trainer__name .role{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--red-hi);font-weight:700;margin-top:.3rem;display:block}
.trainer__bd{padding:1.5rem;flex:1;display:flex;flex-direction:column;gap:1rem}
.trainer__bd p{color:var(--fg-2);font-size:.95rem;margin:0}
.trainer__cred{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem}
.trainer__cred li{position:relative;padding-left:1.15rem;font-size:.88rem;color:var(--fg-2);line-height:1.5}
.trainer__cred li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;background:var(--red);border-radius:50%}
.trainer__ct{margin-top:auto;padding-top:1.1rem;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:.35rem}
.trainer__ct a{font-size:.85rem;color:var(--fg-2);display:inline-flex;align-items:center;gap:.55rem;transition:color .3s;word-break:break-word}
.trainer__ct a:hover{color:var(--red-hi)}

/* ---------- Events ---------- */
.evt{
  display:grid;grid-template-columns:clamp(96px,11vw,140px) 1fr;gap:clamp(1.2rem,3vw,2.6rem);
  padding:clamp(1.6rem,3vw,2.4rem) 0;border-bottom:1px solid var(--line);align-items:start;
}
.evt__date{text-align:center;border:1px solid var(--line);border-radius:var(--r);padding:1rem .5rem;background:var(--ink-2)}
.evt__date .mo{display:block;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--red-hi);font-weight:700}
.evt__date .dy{display:block;font-family:var(--display);font-size:clamp(2.1rem,4vw,3rem);font-weight:800;line-height:1;margin-top:.2rem}
.evt__date .wd{display:block;font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-3);margin-top:.35rem;font-weight:600}
.evt h3{margin-bottom:.7rem}
.evt__meta{display:flex;flex-wrap:wrap;gap:.5rem .9rem;margin-bottom:.9rem}
.evt__meta span{
  font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--fg-2);
  border:1px solid var(--line);border-radius:999px;padding:.35em .95em;
}
.evt p{color:var(--fg-2);margin-bottom:0}
@media (max-width:560px){.evt{grid-template-columns:1fr}.evt__date{display:inline-block;min-width:110px}}

/* ---------- Blog ---------- */
.post-card{
  display:flex;flex-direction:column;background:var(--ink-2);border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;transition:transform .5s var(--ease),border-color .4s;height:100%;
}
.post-card:hover{transform:translateY(-8px);border-color:rgba(255,255,255,.22)}
.post-card__ph{aspect-ratio:16/10;overflow:hidden;background:var(--ink-3)}
.post-card__ph img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.post-card:hover .post-card__ph img{transform:scale(1.06)}
.post-card__bd{padding:1.6rem;display:flex;flex-direction:column;gap:.85rem;flex:1}
.post-card__meta{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3);font-weight:600}
.post-card h3{font-size:clamp(1.15rem,1.7vw,1.45rem);line-height:1.12}
.post-card p{color:var(--fg-2);font-size:.93rem;margin:0}
.post-card__more{margin-top:auto;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--red-hi);display:inline-flex;gap:.5rem;align-items:center}

.book-card__ph{aspect-ratio:3/4;background:#fff}
.book-card__ph img{object-fit:contain;padding:.9rem;box-sizing:border-box}

/* ---------- Meet the Staff ---------- */
/* Staff page */
.crew-intro{display:grid;grid-template-columns:1fr;gap:1.2rem 4rem;align-items:end}
@media (min-width:960px){.crew-intro{grid-template-columns:1.1fr 1fr}.crew-intro .h2{margin-bottom:0}}
.crew-intro .lead{margin:0}
.crew-owners{
  display:flex;align-items:center;gap:clamp(1.2rem,3vw,2.2rem);flex-wrap:wrap;
  padding:clamp(1.5rem,3.5vw,2.4rem);border-radius:var(--r-lg);border:1px solid rgba(var(--red-rgb),.3);
  background:radial-gradient(120% 140% at 0% 0%,rgba(var(--red-rgb),.16),transparent 60%),var(--ink-2)
}
.crew-owners__avs{display:flex}
.crew-owners__avs span{
  width:clamp(64px,8vw,84px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;
  font-family:var(--display);font-weight:800;font-size:clamp(1.4rem,2.4vw,1.9rem);color:var(--ink);
  background:var(--red);border:3px solid var(--ink-2)
}
.crew-owners__avs span+span{margin-left:-.9rem;background:var(--red-hi)}
.crew-owners__role{display:block;font-size:var(--t-xs);font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--red);margin-bottom:.35rem}
.crew-owners h3{font-size:clamp(1.6rem,3.4vw,2.6rem);color:#fff;margin:0;line-height:1.05}
.crew-owners h3 em{font-style:normal;color:var(--red)}

.crew{display:grid;gap:clamp(2.6rem,5vw,4rem);margin-top:clamp(2.6rem,5vw,4rem)}
.crew-group{--acc:var(--red)}
.crew-group--warriors{--acc:var(--red)}
.crew-group--staff{--acc:var(--blue-hi)}
.crew-group--instructors{--acc:var(--yellow)}

.crew-group__hd{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;padding-bottom:.9rem;margin-bottom:1.3rem;border-bottom:1px solid var(--line);position:relative}
.crew-group__hd::after{content:"";position:absolute;left:0;bottom:-1px;width:4.5rem;height:2px;background:var(--acc)}
.crew-group__hd h3{font-size:clamp(1.4rem,2.6vw,2rem);color:#fff;margin:0}
.crew-group__count{font-size:var(--t-xs);font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-3);white-space:nowrap}
.crew-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:.9rem}
.crew-card{
  display:flex;align-items:center;gap:1rem;padding:1rem 1.1rem;border-radius:var(--r);
  background:var(--ink-2);border:1px solid var(--line-2);
  transition:border-color .3s var(--ease),transform .3s var(--ease),background .3s var(--ease)
}
.crew-card:hover{border-color:var(--acc);transform:translateY(-3px);background:var(--ink-3)}
.crew-card__av{
  flex:none;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--display);font-weight:800;font-size:1.15rem;letter-spacing:.02em;
  color:var(--acc);border:1.5px solid var(--acc);background:color-mix(in srgb,var(--acc) 12%,transparent)
}
.crew-card__txt{min-width:0}
.crew-card__txt b{display:block;color:#fff;font-size:1rem;font-weight:700;line-height:1.25}
.crew-card__txt span{display:block;margin-top:.25rem;font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3);line-height:1.4}

/* Article */
.article{background:var(--paper);color:var(--ink)}
.article__hd{padding-block:clamp(11rem,22vh,14rem) clamp(2rem,4vw,3rem);background:var(--ink)}
.article__hd h1{color:#fff;max-width:22ch}
.article__meta{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;margin-top:1.5rem;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3);font-weight:600}
.article__body{padding-block:clamp(3rem,7vw,5.5rem)}
.article__body p,.article__body li{font-size:1.075rem;line-height:1.78;color:#2A2A31}
.article__body h2{font-size:clamp(1.6rem,3vw,2.3rem);margin:2.6em 0 .7em;color:var(--ink)}
.article__body h3{font-size:clamp(1.2rem,2vw,1.55rem);margin:2em 0 .6em;color:var(--ink)}
.article__body h2:first-child,.article__body h3:first-child{margin-top:0}
.article__body strong{color:var(--ink);font-weight:700}
.article__body em{color:#3A3A42}
.article__body ul,.article__body ol{padding-left:1.35em}
.article__body li{margin-bottom:.7em}
.article__body li::marker{color:var(--red)}
.article__body blockquote{
  margin:2.2em 0;padding:1.4em 1.6em;border-left:4px solid var(--red);background:var(--paper-2);
  border-radius:0 var(--r) var(--r) 0;font-size:1.15rem;line-height:1.6;
}
.article__body blockquote p:last-child{margin-bottom:0}
.article__sig{margin-top:3rem;padding-top:1.6rem;border-top:2px solid var(--ink);font-weight:700;font-family:var(--display);text-transform:uppercase;font-size:1.2rem}

/* ---------- Video grid ---------- */
.vid{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:transform .45s var(--ease),border-color .4s}
.vid:hover{transform:translateY(-6px);border-color:rgba(255,255,255,.22)}
.vid__ph{aspect-ratio:16/9;background:var(--ink-3);position:relative;overflow:hidden}
.vid__ph img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.vid:hover .vid__ph img{transform:scale(1.06)}
.vid__play{position:absolute;inset:0;display:grid;place-items:center}
.vid__play i{
  width:58px;height:58px;border-radius:50%;background:rgba(var(--red-rgb),.94);display:grid;place-items:center;
  transition:transform .4s var(--ease);box-shadow:0 10px 30px -8px rgba(0,0,0,.6)
}
.vid:hover .vid__play i{transform:scale(1.12)}
.vid__play svg{width:18px;height:18px;fill:#fff;margin-left:3px}
.vid__bd{padding:1.1rem 1.2rem;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.vid__bd h3{font-size:1rem}
.vid__len{font-size:.72rem;letter-spacing:.1em;color:var(--fg-3);font-weight:600;flex:0 0 auto}

/* ---------- Forms ---------- */
.form{display:grid;gap:1.1rem}
.form__ok{margin-top:1.4rem;padding:1.1rem 1.3rem;border-radius:var(--r);background:rgba(126,200,120,.14);border:1px solid rgba(126,200,120,.4);color:#fff;font-weight:600}
.form .row2{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
@media (max-width:560px){.form .row2{grid-template-columns:1fr}}
.field label{display:block;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--fg-3);margin-bottom:.5rem}
.field input,.field textarea{
  width:100%;background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:.95rem 1.1rem;color:#fff;transition:border-color .3s,background .3s;
}
.field textarea{min-height:150px;resize:vertical}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--red);background:var(--ink-3)}
.field input::placeholder,.field textarea::placeholder{color:#5C5C66}

/* Tally embed (contact page). The form's own theme is set in Tally to these same
   tokens — ground #0A0A0B, inputs #121214, accent #ED1C24, Inter — so the iframe
   reads as part of the page. Min-height holds the layout before embed.js sizes it. */
.tally-wrap{position:relative}
.tally-wrap iframe{display:block;width:100%;min-height:520px;border:0;background:transparent}

/* ---------- Info tiles ---------- */
.info{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.info__i{padding:1.7rem;border:1px solid var(--line);border-radius:var(--r);background:var(--ink-2)}
.info__i h3{font-size:1.05rem;margin-bottom:.85rem;color:var(--red-hi)}
.info__i p,.info__i a{color:var(--fg-2);font-size:.95rem;margin:0}
.info__i a:hover{color:#fff}

/* ---------- Gym Store ---------- */
.shop-hero{
  position:relative;overflow:hidden;isolation:isolate;background:var(--ink);
  padding-block:clamp(8rem,17vh,11rem) clamp(3.5rem,8vh,6rem);
}
.shop-hero__in{position:relative}
.shop-hero .btn-row{margin-top:2.2rem}

/* Decorative scrolling wall of product shots */
.wall{position:absolute;inset:0;z-index:-1;display:grid;align-content:center;gap:clamp(.5rem,1.4vw,1.1rem);opacity:.17;filter:grayscale(1) contrast(1.15)}
.shop-hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,var(--ink) 8%,rgba(var(--ink-rgb),.94) 42%,rgba(var(--ink-rgb),.6) 100%);
}
.wall__row{overflow:hidden}
.wall__t{display:flex;gap:clamp(.5rem,1.4vw,1.1rem);width:max-content;animation:wall 78s linear infinite}
.wall__row--rev .wall__t{animation-direction:reverse;animation-duration:96s}
.wall__i{flex:0 0 auto;width:clamp(108px,12vw,182px);aspect-ratio:1;border-radius:var(--r);overflow:hidden;background:#fff}
.wall__i img{width:100%;height:100%;object-fit:contain}
@keyframes wall{to{transform:translate3d(-50%,0,0)}}
@media (prefers-reduced-motion:reduce){.wall__t{animation:none}}

/* Section head with a note alongside */
.shop-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1.5rem 3rem;margin-bottom:2.5rem}
.shop-head__note{max-width:44ch;font-size:.88rem;line-height:1.6;margin:0}

/* Category filter chips */
.chips{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:clamp(1.75rem,3vw,2.5rem)}
.chip{
  font:inherit;font-size:.74rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  padding:.78em 1.35em;border-radius:999px;cursor:pointer;
  background:transparent;color:#4A4A52;border:1px solid rgba(0,0,0,.16);
  display:inline-flex;align-items:center;gap:.55em;
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease);
}
.chip span{font-size:.68em;opacity:.62;letter-spacing:.06em}
.chip:hover{border-color:var(--red);color:var(--red);transform:translateY(-2px)}
.chip.is-on{background:var(--ink);border-color:var(--ink);color:#fff}
.chip.is-on span{opacity:.72}
.chip:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}

/* Product grid + card */
.prod-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,1.9vw,1.75rem)}
@media (max-width:1180px){.prod-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:860px){.prod-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:380px){.prod-grid{grid-template-columns:1fr}}

.prod{
  display:flex;flex-direction:column;background:#fff;border:1px solid rgba(0,0,0,.09);
  border-radius:var(--r);overflow:hidden;color:var(--ink);text-decoration:none;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .35s;
}
.prod:hover{transform:translateY(-6px);border-color:rgba(0,0,0,.16);box-shadow:0 26px 54px -30px rgba(0,0,0,.42)}
.prod:focus-visible{outline:3px solid var(--red);outline-offset:3px}
.prod__ph{position:relative;display:block;aspect-ratio:1;background:#fff;overflow:hidden;border-bottom:1px solid rgba(0,0,0,.06)}
.prod__ph img{width:100%;height:100%;object-fit:contain;transition:transform 1s var(--ease)}
.prod:hover .prod__ph img{transform:scale(1.05)}
.prod__flag{
  position:absolute;top:.75rem;left:.75rem;background:var(--red);color:var(--on-red);
  font-size:.62rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;padding:.45em .85em;border-radius:999px;
}
.prod__bd{display:flex;flex-direction:column;gap:.5rem;padding:1.1rem 1.15rem 1.25rem;flex:1}
.prod__cat{font-size:.62rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--red)}
.prod__name{font-family:var(--display);font-weight:700;font-size:1.12rem;line-height:1.16;letter-spacing:.005em}
.prod__foot{display:flex;align-items:baseline;flex-wrap:wrap;gap:.6rem;margin-top:auto;padding-top:.35rem}
.prod__price{font-family:var(--display);font-weight:800;font-size:1.3rem;line-height:1;color:var(--ink)}
.prod__price s{font-size:.7em;font-weight:600;color:#8A8A94;margin-left:.4em}
.prod__colors{font-size:.72rem;font-weight:600;color:#6B6B75}
.prod__go{
  display:flex;align-items:center;gap:.45em;font-size:.7rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--red);padding-top:.65rem;border-top:1px solid rgba(0,0,0,.08);
}
.prod:hover .prod__go .ar{transform:translateX(4px)}
.prod__go .ar{transition:transform .4s var(--ease)}
.prod[hidden]{display:none}
.shop-empty{margin-top:2rem;color:#6B6B75}
#gear,#how{scroll-margin-top:clamp(96px,13vh,140px)}
/* two columns on a phone means long garment names; tighten so they do not stack five deep */
@media (max-width:560px){.prod__name{font-size:1rem}.prod__bd{padding:.9rem .9rem 1.05rem;gap:.42rem}.prod__price{font-size:1.15rem}}

/* ---------- Footer ---------- */
.ftr{background:var(--ink-2);border-top:1px solid var(--line);padding-block:clamp(3.5rem,7vw,5.5rem) 2rem}
.ftr__top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:clamp(1.8rem,4vw,3.5rem)}
@media (max-width:1000px){.ftr__top{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.ftr__top{grid-template-columns:1fr}}
.ftr h4{font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;color:#fff;margin-bottom:1.2rem;font-family:var(--body);font-weight:700}
.ftr ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.65rem}
.ftr a,.ftr p{color:var(--fg-3);font-size:.92rem;transition:color .3s}
.ftr a:hover{color:var(--red-hi)}
.ftr__brand img{height:110px;width:auto;margin-bottom:1.4rem}
.ftr__hours{display:flex;flex-direction:column;gap:.5rem}
.ftr__hours div{display:flex;justify-content:space-between;gap:1rem;font-size:.92rem;color:var(--fg-3);border-bottom:1px dashed var(--line-2);padding-bottom:.5rem}
.ftr__hours b{color:#fff;font-weight:600}
.ftr__24{margin-top:.6rem;display:inline-flex;align-items:center;gap:.55rem;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--yellow)}
.ftr__bot{margin-top:3.5rem;padding-top:1.6rem;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center}
.ftr__bot p{margin:0;font-size:.8rem;color:var(--fg-3)}
.social{display:flex;gap:.6rem}
.social a{width:40px;height:40px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;transition:background .3s,border-color .3s,transform .3s var(--ease)}
.social a:hover{background:var(--red);border-color:var(--red);transform:translateY(-3px)}
.social svg{width:16px;height:16px;fill:currentColor}

/* ---------- Page transition curtain ---------- */
.curtain{position:fixed;inset:0;z-index:9999;background:var(--red);transform:scaleY(0);transform-origin:bottom;pointer-events:none}
.curtain__logo{position:absolute;inset:0;display:grid;place-items:center;opacity:0}
.curtain__logo img{height:70px;filter:brightness(0) invert(1)}

/* ---------- Live schedule embed (Club Automation) ----------
   The Club Automation calendar is served from midway.clubautomation.com in
   frame mode (isFrame=1), which strips their site chrome but still ships
   their own light grey / blue styling. It is cross-origin, so none of it can
   be restyled from here — the panel below is the frame we put AROUND it, in
   brand, so the light widget reads as a deliberate inset rather than a leak.
   The widget never posts its height to the parent, so the iframe is a fixed
   height with its own internal scroll. */
.sched{
  background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:0 40px 80px -50px rgba(0,0,0,.9);
}
.sched__bar{
  display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;
  padding:.9rem 1rem;border-bottom:1px solid var(--line);background:var(--ink-3);
}
.sched__tab{
  appearance:none;border:1.5px solid transparent;background:transparent;color:var(--fg-2);
  font-family:var(--body);font-weight:700;font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;padding:.72em 1.5em;border-radius:999px;cursor:pointer;
  transition:color .3s var(--ease),background-color .3s var(--ease),border-color .3s var(--ease);
}
.sched__tab:hover{color:#fff;border-color:var(--line)}
.sched__tab[aria-selected="true"]{background:var(--red);border-color:var(--red);color:var(--on-red)}
.sched__tab:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}
.sched__live{
  margin-left:auto;display:inline-flex;align-items:center;gap:.55rem;
  color:var(--fg-3);font-size:.68rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
}
.sched__dot{width:7px;height:7px;border-radius:50%;background:var(--red);flex:none}
.sched__frame{
  display:block;width:100%;height:clamp(560px,78vh,880px);border:0;background:#fff;
}
.sched__foot{
  display:flex;align-items:center;justify-content:space-between;gap:1.25rem;flex-wrap:wrap;
  padding:1.1rem 1.35rem;border-top:1px solid var(--line);background:var(--ink-3);
}
.sched__note{margin:0;color:var(--fg-3);font-size:.85rem;max-width:52ch}
.sched__out{
  display:inline-flex;align-items:center;gap:.6em;color:#fff;font-weight:700;
  font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;
  border-bottom:1.5px solid var(--red);padding-bottom:.25rem;
  transition:color .3s var(--ease)
}
.sched__out:hover{color:var(--red)}
@media (max-width:640px){
  .sched__bar{padding:.75rem}
  .sched__tab{padding:.7em 1.1em;font-size:.66rem;letter-spacing:.12em}
  .sched__live{display:none}
  .sched__frame{height:clamp(520px,82vh,720px)}
}

/* ---------- Reveal defaults ----------
   Content is visible by default, always. The pre-animation hidden state is
   applied by main.js only once GSAP + ScrollTrigger are confirmed working,
   so nothing can be permanently hidden by a script or network failure. */
[data-rv]{opacity:1}

/* ---------- Utilities ---------- */
.center{text-align:center}
.mx-auto{margin-inline:auto}
.mb0{margin-bottom:0}
.mt2{margin-top:2rem}
.mt3{margin-top:3rem}
.maxw-60{max-width:60ch}
.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{position:absolute;left:-9999px;top:0;z-index:9999;background:var(--red);color:var(--on-red);padding:1rem 1.5rem;font-weight:700}
.skip:focus{left:0}
.hdr-space{height:clamp(128px,18vh,190px)}

/* ---------- Gallery lightbox ---------- */
.gal figure{cursor:zoom-in}
.gal figure:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.lightbox{
  position:fixed;inset:0;z-index:500;display:flex;align-items:center;justify-content:center;
  padding:clamp(1.2rem,5vw,3rem);background:rgba(8,8,9,.94);
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s ease;
}
.lightbox.is-open{opacity:1;visibility:visible;pointer-events:auto}
.lightbox__img{
  max-width:min(94vw,1500px);max-height:90vh;width:auto;height:auto;
  border-radius:var(--r);box-shadow:0 40px 100px rgba(0,0,0,.55);object-fit:contain;
}
.lightbox__close{
  position:absolute;top:clamp(.9rem,3vw,1.6rem);right:clamp(.9rem,3vw,1.8rem);
  width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.3);
  background:rgba(255,255,255,.08);color:#fff;font-size:1.7rem;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background .2s ease;
}
.lightbox__close:hover,.lightbox__close:focus-visible{background:rgba(255,255,255,.2)}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  [data-rv]{opacity:1 !important;transform:none !important}
  .hero__media{transform:none !important}
}

/* Home — personal training CTA (centered panel) */
.pt-cta__panel{
  position:relative;overflow:hidden;isolation:isolate;text-align:center;
  max-width:980px;margin-inline:auto;padding:clamp(2.8rem,6vw,5rem) clamp(1.4rem,5vw,4.5rem);
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:linear-gradient(180deg,var(--ink-2),var(--ink))
}
.pt-cta__panel::before{
  content:"";position:absolute;z-index:-1;left:50%;top:-40%;width:120%;aspect-ratio:2/1;transform:translateX(-50%);
  background:radial-gradient(closest-side,rgba(var(--red-rgb),.18),transparent 70%);pointer-events:none
}
.pt-cta__panel::after{
  content:"";position:absolute;left:50%;top:0;width:min(220px,40%);height:3px;transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,var(--red),transparent)
}
.pt-cta__eyebrow{justify-content:center}
.pt-cta__eyebrow::after{content:"";width:2.2rem;height:2px;background:var(--red);display:block}
.pt-cta__lead{margin:1.25rem auto 0}
.pt-cta__offer{
  display:flex;align-items:center;gap:1rem;text-align:left;
  max-width:640px;margin:2.2rem auto 0;padding:1.1rem 1.4rem;
  border:1px solid rgba(var(--red-rgb),.35);border-radius:var(--r);background:rgba(var(--red-rgb),.07)
}
.pt-cta__offer p{margin:0;color:var(--fg-2);line-height:1.5}
.pt-cta__offer strong{color:#fff}
.pt-cta__tag{
  flex:none;font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.06em;
  font-size:1.05rem;color:var(--ink);background:var(--yellow);padding:.35em .85em;border-radius:999px
}
.pt-cta__btns{justify-content:center;margin-top:2.2rem}
@media (max-width:560px){
  .pt-cta__offer{flex-direction:column;text-align:center;gap:.7rem}
  .pt-cta__btns .btn{width:100%}
}
@media (min-width:1000px){.crew-group--instructors .crew-grid,.crew-group--staff .crew-grid{grid-template-columns:repeat(3,1fr)}}
.crew-card__av{position:relative;overflow:hidden}
.crew-card__av--ph{width:64px;height:64px;border-width:2px}
.crew-card__av--ph span{visibility:hidden}
.crew-card__av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%}
.crew-owners__avs span{position:relative;overflow:hidden}
.crew-owners__avs span i{font-style:normal}
.crew-owners__avs span.has-ph{width:clamp(84px,10vw,112px)}
.crew-owners__avs span.has-ph i{visibility:hidden}
.crew-owners__avs img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.evt p+p{margin-top:.8rem}
.evt p a{color:var(--red-hi);text-decoration:underline}
.evt__date .dy--range{font-size:clamp(1.5rem,2.6vw,2rem)}

/* ---------- Events: fun calendar ---------- */
.evx-hd{max-width:760px}
.evx-hd__badge{display:inline-block;background:var(--yellow);color:var(--ink);font-weight:800;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;padding:.5em 1.1em;border-radius:999px;margin-bottom:1.2rem;transform:rotate(-2deg)}
.evx-jump{display:flex;gap:.7rem;overflow-x:auto;padding:.4rem .2rem 1rem;margin:2.2rem 0 1.4rem;scrollbar-width:thin;scroll-snap-type:x proximity}
.evx-jump a{flex:none;scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;gap:.2rem;min-width:108px;padding:.9rem .8rem;border-radius:18px;background:var(--ink-3);border:1px solid var(--line);text-decoration:none;color:var(--fg);transition:transform .3s var(--ease),border-color .3s,background .3s}
.evx-jump a:hover,.evx-jump a:focus-visible{transform:translateY(-4px) rotate(-1deg);border-color:var(--c);background:color-mix(in srgb,var(--c) 14%,var(--ink-3))}
.evx-jump__ic{font-size:1.7rem;line-height:1}
.evx-jump__d{font-family:var(--display);font-weight:800;font-size:1.05rem;text-transform:uppercase;color:var(--c);white-space:nowrap}
.evx-jump__t{font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3);font-weight:700;white-space:nowrap}
.evx-list{display:grid;gap:1.2rem}
.evx{position:relative;display:grid;grid-template-columns:clamp(110px,12vw,150px) 1fr;border-radius:24px;overflow:hidden;background:var(--ink-3);border:1px solid var(--line);scroll-margin-top:110px;transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s}
.evx:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--c) 55%,transparent);box-shadow:0 22px 50px -28px color-mix(in srgb,var(--c) 70%,transparent)}
.evx__date{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:1.4rem .6rem;background:var(--c);color:var(--ink)}
.evx__ic{font-size:2rem;line-height:1;margin-bottom:.5rem;transition:transform .4s var(--ease)}
.evx:hover .evx__ic{transform:scale(1.2) rotate(-8deg)}
.evx__date .mo{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;font-weight:800}
.evx__date .dy{font-family:var(--display);font-size:clamp(2.4rem,4.4vw,3.4rem);font-weight:800;line-height:1;margin-top:.1rem}
.evx__date .dy--range{font-size:clamp(1.6rem,2.8vw,2.2rem)}
.evx__date .wd{font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;font-weight:800;margin-top:.35rem;opacity:.75}
.evx__bd{padding:clamp(1.3rem,3vw,2rem) clamp(1.2rem,3vw,2.2rem)}
.evx__tag{display:inline-block;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;font-weight:800;color:var(--c);background:color-mix(in srgb,var(--c) 14%,transparent);border-radius:999px;padding:.35em .9em;margin-bottom:.7rem}
.evx h3{margin-bottom:.8rem}
.evx__meta{display:flex;flex-wrap:wrap;gap:.5rem .6rem;margin-bottom:1rem}
.evx__meta span{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:var(--fg-2);background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:999px;padding:.4em .95em}
.evx p{color:var(--fg-2);margin-bottom:0;line-height:1.65}
.evx p+p{margin-top:.8rem}
.evx p a{color:var(--c);text-decoration:underline}
.evx-cta{display:flex;gap:1.4rem;align-items:flex-start;margin-top:2.4rem;padding:clamp(1.5rem,3.5vw,2.4rem);border-radius:24px;background:linear-gradient(135deg,rgba(var(--red-rgb),.14),rgba(var(--yellow-rgb),.1));border:1px solid rgba(var(--red-rgb),.3)}
.evx-cta__ic{font-size:2.4rem;line-height:1}
.evx-cta .lead{margin:0;max-width:none}
@media (max-width:640px){
  .evx{grid-template-columns:1fr}
  .evx__date{flex-direction:row;gap:.6rem;justify-content:flex-start;padding:.8rem 1.2rem}
  .evx__ic{margin:0 .3rem 0 0;font-size:1.5rem}
  .evx__date .dy,.evx__date .dy--range{font-size:1.6rem;margin:0}
  .evx__date .wd{margin:0}
  .evx-cta{flex-direction:column;gap:.8rem}
}
@media (prefers-reduced-motion:reduce){.evx,.evx-jump a,.evx__ic{transition:none}.evx:hover,.evx-jump a:hover{transform:none}.evx:hover .evx__ic{transform:none}}

/* ---------- Policies: cancel membership (locked member login) ---------- */
.cxl{background:var(--ink)}
.cxl__agree{max-width:760px;margin:0 auto 1.6rem}
.cxl__check{display:flex;gap:1rem;align-items:flex-start;cursor:pointer;padding:1.2rem 1.4rem;border-radius:var(--r);background:var(--ink-2);border:1px solid var(--line);color:var(--fg-2);line-height:1.5;transition:border-color .3s}
.cxl__check:hover{border-color:rgba(var(--red-rgb),.5)}
.cxl__check input{position:absolute;opacity:0;width:1px;height:1px}
.cxl__box{flex:none;width:26px;height:26px;border-radius:7px;border:2px solid var(--red);display:grid;place-items:center;margin-top:.05rem;transition:background .2s}
.cxl__box::after{content:"";width:7px;height:13px;border:solid var(--ink);border-width:0 3px 3px 0;transform:rotate(45deg) translate(-1px,-1px);opacity:0}
.cxl__check input:checked+.cxl__box{background:var(--red)}
.cxl__check input:checked+.cxl__box::after{opacity:1}
.cxl__check input:focus-visible+.cxl__box{outline:3px solid var(--yellow);outline-offset:3px}
.cxl__check:has(input:checked){border-color:var(--red);color:#fff}
.cxl__panel{max-width:760px;margin-inline:auto}
.cxl__card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.5rem;padding:clamp(2rem,5vw,3.2rem) clamp(1.4rem,4vw,3rem);border-radius:var(--r-lg);border:1px dashed var(--line);background:repeating-linear-gradient(135deg,rgba(255,255,255,.02) 0 14px,transparent 14px 28px),var(--ink-2);transition:border-color .3s,background .3s}
.cxl__panel.is-open .cxl__card{border-style:solid;border-color:var(--red);background:var(--ink-2)}
.cxl__card-ic{font-size:2.6rem;line-height:1;margin-bottom:.3rem}
.cxl__card-t{margin:0;color:#fff;font-weight:700;font-size:1.05rem}
.cxl__card-sub{margin:0 0 1rem;color:var(--fg-3);font-size:.92rem;max-width:46ch}
.cxl__card-help{margin:.8rem 0 0;color:var(--fg-3);font-size:.82rem}
.cxl__btn[aria-disabled="true"]{opacity:.35;pointer-events:none;filter:grayscale(1)}

/* ---------- Memberships page ---------- */
.mem-steps{list-style:none;margin:0 0 clamp(3rem,6vw,4.5rem);padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.mem-steps li{display:flex;align-items:center;gap:.9rem;padding:1.1rem 1.3rem;border-radius:var(--r);background:var(--ink-2);border:1px solid var(--line);color:var(--fg-2);line-height:1.4}
.mem-steps li span{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--red);color:var(--ink);font-family:var(--display);font-weight:800;font-size:1.2rem}
.mem-steps strong{color:#fff}
.mem-grid{display:grid;gap:1.2rem}
.mem-grid--2{grid-template-columns:repeat(2,1fr)}
.mem-grid--3{grid-template-columns:repeat(3,1fr)}
.mem{display:flex;flex-direction:column;padding:clamp(1.5rem,3vw,2.2rem);border-radius:var(--r-lg);background:var(--ink-2);border:1px solid var(--line);transition:transform .35s var(--ease),border-color .35s,box-shadow .35s}
.mem:hover{transform:translateY(-4px);border-color:rgba(var(--red-rgb),.55);box-shadow:0 22px 50px -30px rgba(var(--red-rgb),.6)}
.mem__ic{font-size:2rem;line-height:1;margin-bottom:.9rem}
.mem__name{font-size:clamp(1.3rem,2.2vw,1.7rem);color:#fff;margin:0 0 1rem}
.mem__price{display:flex;align-items:baseline;flex-wrap:wrap;gap:.2rem .5rem;margin:0 0 1rem;padding-bottom:1rem;border-bottom:1px solid var(--line)}
.mem__from{width:100%;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--fg-3)}
.mem__amt{font-family:var(--display);font-weight:800;font-size:clamp(2.6rem,5vw,3.4rem);line-height:1;color:var(--red)}
.mem__amt sup{font-size:.45em;vertical-align:.9em;margin-right:.05em}
.mem__per{color:var(--fg-2);font-weight:600}
.mem__desc{color:var(--fg-2);line-height:1.6;margin:0 0 1.4rem;flex:1}
.mem__btn{align-self:stretch}
.mem__hint{margin:.8rem 0 0;font-size:.8rem;color:var(--fg-3);text-align:center}
.mem__hint strong{color:var(--fg-2)}
.mem-note{color:var(--fg-3);text-align:center}
.mem-note a{color:var(--red-hi);text-decoration:underline}
@media (max-width:900px){.mem-grid--3{grid-template-columns:1fr 1fr}.mem-steps{grid-template-columns:1fr}}
@media (max-width:640px){.mem-grid--2,.mem-grid--3{grid-template-columns:1fr}}
@media (max-width:640px){.mem__btn{white-space:nowrap;letter-spacing:.1em;font-size:.74rem;padding:1em 1.2em}}

/* ---------- Memberships: insurance ---------- */
.ins{margin-top:clamp(3.5rem,7vw,6rem);padding-top:clamp(3rem,6vw,4.5rem);border-top:1px solid var(--line)}
.ins-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem}
.ins-card{padding:clamp(1.5rem,3vw,2.2rem);border-radius:var(--r-lg);background:var(--ink-2);border:1px solid var(--line)}
.ins-card--hl{border-color:rgba(var(--yellow-rgb),.45);background:radial-gradient(120% 140% at 100% 0%,rgba(var(--yellow-rgb),.1),transparent 60%),var(--ink-2)}
.ins-card__tag{display:inline-block;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;font-weight:800;color:var(--red);background:rgba(var(--red-rgb),.12);border-radius:999px;padding:.35em .9em;margin-bottom:.8rem}
.ins-card--hl .ins-card__tag{color:var(--yellow);background:rgba(var(--yellow-rgb),.12)}
.ins-card h3{color:#fff;font-size:clamp(1.4rem,2.4vw,1.8rem);margin:0}
.ins-card__sub{color:var(--fg-2);margin:.35rem 0 1rem;font-weight:600}
.ins-card ul{margin:0;padding:0;list-style:none;display:grid;gap:.55rem}
.ins-card li{position:relative;padding-left:1.6rem;color:var(--fg-2);line-height:1.5}
.ins-card li::before{content:"\2713";position:absolute;left:0;top:0;color:var(--red);font-weight:800}
.ins-card__list{margin-top:1rem!important}
.ins-card__price{margin:.4rem 0 0;color:var(--fg-2)}
.ins-card__price span{display:block;font-family:var(--display);font-weight:800;font-size:clamp(2.6rem,5vw,3.4rem);line-height:1;color:var(--yellow);margin-bottom:.3rem}
.ins-how{margin-top:1.6rem;padding:clamp(1.6rem,3.5vw,2.6rem);border-radius:var(--r-lg);background:linear-gradient(135deg,rgba(var(--red-rgb),.16),rgba(var(--blue-rgb),.08));border:1px solid rgba(var(--red-rgb),.4)}
.ins-how h3{color:#fff;font-size:clamp(1.5rem,2.8vw,2.1rem);margin:0 0 1.2rem}
.ins-how ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.ins-how li{display:flex;gap:.9rem;align-items:flex-start;color:var(--fg-2);line-height:1.5}
.ins-how li span{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--red);color:var(--ink);font-family:var(--display);font-weight:800;font-size:1.15rem}
.ins-how strong{color:#fff}
@media (max-width:900px){.ins-how ol{grid-template-columns:1fr}}
@media (max-width:640px){.ins-grid{grid-template-columns:1fr}}
.ins-card li.is-no::before{content:"\2013";color:var(--fg-3)}
.mem-ins-link{margin:0 0 clamp(3rem,6vw,4.5rem);color:var(--fg-2)}
.mem-ins-link a{color:var(--red-hi);text-decoration:underline;font-weight:600}
#insurance{scroll-margin-top:110px}
.ins{margin-top:0;padding-top:0;border-top:0;margin-bottom:clamp(3.5rem,7vw,6rem);padding-bottom:clamp(3rem,6vw,4.5rem);border-bottom:1px solid var(--line)}
.ins-card__tag--ltd{color:var(--fg-2);background:rgba(255,255,255,.07)}
.ins-card__tag--full{color:#3DDC97;background:rgba(61,220,151,.13)}
.welcome-tag strong{color:#fff;font-family:var(--display);text-transform:uppercase;letter-spacing:.01em;font-size:clamp(1.25rem,2vw,1.6rem);line-height:1.2;display:block;margin-top:.4rem}
.welcome-sign{color:var(--red);font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:.8rem;margin-top:.2rem}
.split__media--square{aspect-ratio:1/1;align-self:center}
.split__media--square img{object-position:center 40%}

/* ---------- 404 ---------- */
.nf{min-height:100svh;display:flex;align-items:center;background:radial-gradient(70% 60% at 50% 0%,rgba(var(--red-rgb),.14),transparent 70%),var(--ink)}
.nf__in{text-align:center;padding-block:clamp(9rem,18vh,12rem) clamp(3.5rem,8vh,6rem)}
.nf__code{display:flex;align-items:center;justify-content:center;gap:clamp(.6rem,2vw,1.4rem);margin:0 0 1.4rem;font-family:var(--display);font-weight:900;line-height:.85;font-size:clamp(6rem,20vw,13rem);color:#fff}
.nf__plate{width:.72em;height:.72em;border-radius:50%;border:.1em solid var(--red);position:relative;box-shadow:0 0 60px -10px rgba(var(--red-rgb),.6);animation:nf-spin 9s linear infinite}
.nf__plate::before{content:"";position:absolute;inset:32%;border-radius:50%;background:var(--red)}
.nf__plate::after{content:"";position:absolute;left:50%;top:-.12em;width:.08em;height:.18em;background:var(--ink);transform:translateX(-50%)}
@keyframes nf-spin{to{transform:rotate(360deg)}}
.nf__title{max-width:16ch;margin:0 auto}
.nf__lead{max-width:52ch;margin:1.4rem auto 0}
.nf__btns{justify-content:center;margin-top:2rem}
.nf__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.9rem;max-width:920px;margin:clamp(2.6rem,6vw,4rem) auto 0;text-align:left}
.nf__card{display:flex;gap:.9rem;align-items:center;padding:1rem 1.2rem;border-radius:var(--r);background:var(--ink-2);border:1px solid var(--line);color:var(--fg);text-decoration:none;transition:transform .3s var(--ease),border-color .3s}
.nf__card:hover,.nf__card:focus-visible{transform:translateY(-3px);border-color:var(--red)}
.nf__ic{font-size:1.6rem;line-height:1}
.nf__card b{display:block;color:#fff}
.nf__card small{display:block;color:var(--fg-3);font-size:.82rem;margin-top:.15rem}
.nf__help{margin-top:2.4rem;color:var(--fg-3)}
.nf__help a{color:var(--red-hi);text-decoration:underline}
@media (max-width:820px){.nf__grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.nf__grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.nf__plate{animation:none}}


/* =========================================================
   THEME: HALLOWEEN
   Active when <html data-theme="halloween"> (SITE.theme in build/layout.js).
   Overrides the base tokens above, then layers on seasonal decor. Delete or
   switch SITE.theme back to 'base' after the season — nothing else to undo.
   ========================================================= */
html[data-theme="halloween"]{
  --red:#FF7518;        /* pumpkin */
  --red-hi:#FF9A3C;
  --red-dim:#D9560B;
  --red-rgb:255,117,24;
  --blue:#7B2CBF;       /* witch purple */
  --blue-hi:#B07CF0;
  --blue-rgb:123,44,191;
  --yellow:#A6FF3D;     /* slime green */
  --yellow-rgb:166,255,61;

  --ink:#0C0810;
  --ink-2:#150E1B;
  --ink-3:#1E1526;
  --ink-4:#281C33;
  --ink-rgb:12,8,16;
  --paper:#F4EDDF;      /* bone */
  --paper-2:#EAE0CC;
  --paper-3:#DCCFB5;

  --fg:#F7F1E8;
  --fg-2:#D3C8D9;
  --fg-3:#998CA5;
  --line:rgba(255,190,140,.13);
  --line-2:rgba(255,190,140,.07);

  --on-red:#120A16;
  --on-blue:#fff;
  --glow-a:#2B1004;     /* ember */
  --glow-b:#1E0A33;     /* nightshade */
  --display-xl:"Creepster",var(--display);
  --web:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M0 0L200.0 0.0M0 0L190.2 61.8M0 0L161.8 117.6M0 0L117.6 161.8M0 0L61.8 190.2M0 0L0.0 200.0M40.0 0.0Q34.0 5.4 38.0 12.4Q30.7 15.6 32.4 23.5Q24.3 24.3 23.5 32.4Q15.6 30.7 12.4 38.0Q5.4 34.0 0.0 40.0M75.0 0.0Q63.7 10.1 71.3 23.2Q57.5 29.3 60.7 44.1Q45.6 45.6 44.1 60.7Q29.3 57.5 23.2 71.3Q10.1 63.7 0.0 75.0M110.0 0.0Q93.4 14.8 104.6 34.0Q84.3 42.9 89.0 64.7Q66.9 66.9 64.7 89.0Q42.9 84.3 34.0 104.6Q14.8 93.4 0.0 110.0M145.0 0.0Q123.2 19.5 137.9 44.8Q111.1 56.6 117.3 85.2Q88.2 88.2 85.2 117.3Q56.6 111.1 44.8 137.9Q19.5 123.2 0.0 145.0M180.0 0.0Q152.9 24.2 171.2 55.6Q137.9 70.3 145.6 105.8Q109.5 109.5 105.8 145.6Q70.3 137.9 55.6 171.2Q24.2 152.9 0.0 180.0' fill='none' stroke='white' stroke-opacity='.22' stroke-width='1'/%3E%3C/svg%3E");
}

/* Night-sky ground: faint purple + pumpkin glow behind everything */
html[data-theme="halloween"] body{
  background:
    radial-gradient(60% 45% at 85% 0%,rgba(var(--blue-rgb),.18),transparent 70%),
    radial-gradient(50% 40% at 0% 100%,rgba(var(--red-rgb),.10),transparent 70%),
    var(--ink);
  background-attachment:fixed;
}

/* Headlines in a dripping horror face. Creepster ships one weight, and its
   drips hang below the baseline, so loosen line-height and give the
   hero's masked reveal lines room so the drips aren't clipped. */
html[data-theme="halloween"] :is(.h-hero,.h1,.h2){
  font-family:var(--display-xl);font-weight:400;letter-spacing:.02em;line-height:1.02;
}
html[data-theme="halloween"] .h-hero{line-height:.98}
html[data-theme="halloween"] .hero h1 .ln{padding-bottom:.08em}
html[data-theme="halloween"] .h-hero .accent,
html[data-theme="halloween"] .h1 .accent,
html[data-theme="halloween"] .h2 .accent{text-shadow:0 0 28px rgba(var(--red-rgb),.55)}
html[data-theme="halloween"] .outline-txt{-webkit-text-stroke-color:var(--red);text-shadow:0 0 24px rgba(var(--red-rgb),.35)}
html[data-theme="halloween"] .section--light :is(.h1,.h2,.h-hero) .accent,
html[data-theme="halloween"] .section--paper :is(.h1,.h2,.h-hero) .accent{color:var(--red-dim);text-shadow:none}

/* Light sections read as parchment/bone; tame their greys to warm browns */
html[data-theme="halloween"] .section--light .lead,
html[data-theme="halloween"] .section--paper .lead{color:#4A3F3A}
html[data-theme="halloween"] .section--light .muted,
html[data-theme="halloween"] .section--paper .muted{color:#75675E}
html[data-theme="halloween"] :is(.section--light,.section--paper) :is(.eyebrow,.accent){color:var(--red-dim)}
html[data-theme="halloween"] :is(.section--light,.section--paper) .eyebrow::before{background:var(--red-dim)}

/* Buttons: pumpkin fill with dark label; hover sweeps to slime */
html[data-theme="halloween"] .btn{box-shadow:0 0 0 0 rgba(var(--red-rgb),0)}
html[data-theme="halloween"] .btn:hover{box-shadow:0 14px 38px -10px rgba(var(--red-rgb),.75)}
html[data-theme="halloween"] .btn::after,
html[data-theme="halloween"] .nav a.btn::after{background:var(--yellow)}
html[data-theme="halloween"] .btn:hover,
html[data-theme="halloween"] .nav a.btn:hover{color:var(--on-red)}
html[data-theme="halloween"] .btn--ghost:hover{color:var(--ink)}
html[data-theme="halloween"] .btn--dark::after{background:var(--red)}

/* Cards glow like a jack-o'-lantern on hover */
html[data-theme="halloween"] :is(.card,.trainer,.post-card,.vid,.mem):hover{
  border-color:rgba(var(--red-rgb),.55);
  box-shadow:0 22px 50px -26px rgba(var(--red-rgb),.55);
}

/* Marquee: zigzag (jack-o'-lantern teeth) top and bottom edge.
   Drawn as a mask on the band itself so the scrolling track's clip is kept. */
html[data-theme="halloween"] .marquee{
  border:0;padding-block:1.35rem;
  -webkit-mask:linear-gradient(#000 0 0) 0 10px/100% calc(100% - 20px) no-repeat,
    conic-gradient(from -45deg at 50% 100%,#000 90deg,transparent 0) 0 0/20px 10px repeat-x,
    conic-gradient(from 135deg at 50% 0,#000 90deg,transparent 0) 0 100%/20px 10px repeat-x;
  mask:linear-gradient(#000 0 0) 0 10px/100% calc(100% - 20px) no-repeat,
    conic-gradient(from -45deg at 50% 100%,#000 90deg,transparent 0) 0 0/20px 10px repeat-x,
    conic-gradient(from 135deg at 50% 0,#000 90deg,transparent 0) 0 100%/20px 10px repeat-x;
}
html[data-theme="halloween"] .marquee--blue{color:var(--on-blue)}

/* Cobwebs in the corners of the hero, page sections and footer */
html[data-theme="halloween"] .hero::after{
  content:"";position:absolute;right:0;top:0;width:clamp(160px,22vw,320px);aspect-ratio:1;
  background:var(--web) no-repeat right top/contain;transform:scaleX(-1);pointer-events:none;z-index:1;opacity:.9;
}
html[data-theme="halloween"] .ftr{position:relative}
html[data-theme="halloween"] .ftr::before{
  content:"";position:absolute;left:0;top:0;width:clamp(120px,16vw,220px);aspect-ratio:1;
  background:var(--web) no-repeat left top/contain;pointer-events:none;
}
html[data-theme="halloween"] .section--ink2::before{
  content:"";position:absolute;right:0;bottom:0;width:clamp(110px,14vw,200px);aspect-ratio:1;
  background:var(--web) no-repeat left top/contain;transform:rotate(180deg);pointer-events:none;opacity:.7;
}

/* 404 plate becomes a glowing full moon */
html[data-theme="halloween"] .nf__plate{border-color:#F6E7B4;background:radial-gradient(circle at 35% 35%,#FFF6D6,#E9CF85 60%,#C9A85A);box-shadow:0 0 70px -6px rgba(246,231,180,.7)}

/* Witch hat perched on the logo's "M". Sized off the logo height (--lh) so it
   tracks the header shrinking on scroll. Logo art is 1400x1080 with the M's
   top-centre at (50%, 15%), i.e. (0.648H, 0.153H) in logo-height units. */
html[data-theme="halloween"] .brand{position:relative;--lh:clamp(72px,9vw,132px)}
html[data-theme="halloween"] .hdr.is-stuck .brand{--lh:clamp(56px,6.4vw,88px)}
html[data-theme="halloween"] .brand::after{
  content:"";position:absolute;pointer-events:none;
  width:calc(var(--lh) * .44);aspect-ratio:100/82;
  left:calc(var(--lh) * .43);top:calc(50% - var(--lh) * .5 - var(--lh) * .12);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 82'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%232A1740'/%3E%3Cstop offset='.55' stop-color='%23160C22'/%3E%3Cstop offset='1' stop-color='%230B0612'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg stroke='%238B4FD6' stroke-width='1.2' stroke-linejoin='round'%3E%3Cpath d='M27 68C31 50 37 33 45 20C51 10 61 4 78 1C68 9 63 19 64 31C65 44 69 56 73 68Z' fill='url%28%23g%29'/%3E%3Cellipse cx='50' cy='70' rx='48' ry='9.5' fill='url%28%23g%29'/%3E%3Cpath d='M27 68C31 50 37 33 45 20C51 10 61 4 78 1C68 9 63 19 64 31C65 44 69 56 73 68C60 73 40 73 27 68Z' fill='url%28%23g%29'/%3E%3C/g%3E%3Cpath d='M29.5 58C42 63 58 63 70.5 58L72.6 66.5C58 72 42 72 27.6 66.5Z' fill='%23FF7518'/%3E%3Crect x='44.5' y='59.5' width='11' height='9.5' rx='1' fill='none' stroke='%23A6FF3D' stroke-width='2.2'/%3E%3C/svg%3E") no-repeat center/contain;
  transform:rotate(-10deg);transform-origin:50% 85%;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.6));
  transition:width .4s var(--ease),left .4s var(--ease),top .4s var(--ease);
}

/* ---- Decor layer (markup from THEMES.halloween.decor in layout.js) ---- */
.spooky{display:none}
html[data-theme="halloween"] .spooky{display:block;position:fixed;inset:0;pointer-events:none;z-index:150;overflow:hidden}

/* Low ground fog drifting along the bottom of the viewport */
.spooky__fog{
  position:absolute;left:-50%;right:-50%;bottom:-6vh;height:28vh;opacity:.5;
  background:
    radial-gradient(40% 60% at 20% 70%,rgba(220,210,235,.16),transparent 70%),
    radial-gradient(35% 55% at 55% 80%,rgba(220,210,235,.12),transparent 70%),
    radial-gradient(40% 60% at 85% 75%,rgba(220,210,235,.14),transparent 70%);
  filter:blur(8px);animation:spooky-fog 38s linear infinite alternate;
}
@keyframes spooky-fog{to{transform:translateX(18%)}}

/* A spider lowers from the top-right on its thread, then retreats */
.spooky__spider{position:absolute;right:clamp(14px,4vw,64px);top:0;width:30px;color:#0A0610;animation:spooky-drop 14s ease-in-out 3s infinite}
.spooky__spider::before{content:"";position:absolute;left:50%;bottom:calc(100% - 4px);width:1px;height:100vh;background:rgba(255,255,255,.35)}
.spooky__spider svg{width:100%;height:auto;fill:currentColor;filter:drop-shadow(0 0 4px rgba(255,255,255,.25))}
@keyframes spooky-drop{
  0%,100%{transform:translateY(-60px)}
  30%,62%{transform:translateY(34vh)}
  40%{transform:translateY(31vh) rotate(6deg)}
  52%{transform:translateY(35vh) rotate(-6deg)}
}
@media (max-width:760px){.spooky__spider{display:none}}

@media (prefers-reduced-motion:reduce){
  .spooky__spider,.spooky__fog{animation:none !important}
  .spooky__spider{transform:translateY(12vh)}
}

/* =====================================================================
   Holiday Party — Christmas ornament in the menu bar + holiday-party.html
   Colours are fixed Christmas red/green/gold (not theme tokens) so the
   ornament and page stay festive whatever SITE.theme is set to.
   ===================================================================== */
.ornament{
  --os:116px;
  position:relative;display:block;flex:0 0 auto;width:var(--os);
  margin-top:calc(var(--os) * -.12);
  transform-origin:50% -60px;animation:orn-sway 4.5s ease-in-out infinite;
  transition:width .4s var(--ease);
  filter:drop-shadow(0 8px 16px rgba(212,22,30,.35));
}
/* the ribbon it hangs from, running up off the top of the header */
.ornament::before{
  content:"";position:absolute;left:50%;bottom:calc(100% - 4px);width:2px;height:140px;margin-left:-1px;
  background:linear-gradient(to top,#E2C062,rgba(226,192,98,.15));
}
.ornament__ball{display:block;width:100%;height:auto;overflow:visible}
.ornament__ball text{font-family:var(--display,'Barlow Condensed'),sans-serif;font-weight:800;font-size:15px;letter-spacing:.06em;fill:#fff;paint-order:stroke;stroke:rgba(80,0,8,.45);stroke-width:1.4px}
.ornament:hover,.ornament:focus-visible{animation:orn-jingle .9s ease-in-out;filter:drop-shadow(0 10px 22px rgba(247,215,116,.55))}
.ornament[aria-current="page"]{filter:drop-shadow(0 0 18px rgba(247,215,116,.7))}
.hdr.is-stuck .ornament{--os:88px}
@media (max-width:1240px){.ornament{--os:100px}}
@media (max-width:1080px){.ornament{--os:76px;margin-left:auto;margin-right:.4rem}}
@keyframes orn-sway{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
@keyframes orn-jingle{0%{transform:rotate(0)}20%{transform:rotate(12deg)}40%{transform:rotate(-10deg)}60%{transform:rotate(6deg)}80%{transform:rotate(-3deg)}100%{transform:rotate(0)}}
@media (prefers-reduced-motion:reduce){.ornament,.ornament:hover{animation:none}}

/* ---- holiday-party.html ---- */
.xmas-hero{
  position:relative;overflow:hidden;text-align:center;min-height:72svh;display:grid;place-items:center;
  padding:clamp(11rem,24vh,15rem) 0 clamp(4rem,9vh,6rem);
  background:
    radial-gradient(60% 50% at 50% 38%,rgba(247,215,116,.18),transparent 70%),
    radial-gradient(70% 60% at 15% 100%,rgba(15,107,58,.45),transparent 70%),
    radial-gradient(70% 60% at 85% 100%,rgba(212,22,30,.45),transparent 70%),
    #0B0507;
}
.xmas-hero__lights{position:absolute;inset:0 0 auto 0;height:70px;display:flex;justify-content:space-around;pointer-events:none}
.xmas-hero__lights::before{content:"";position:absolute;left:-2%;right:-2%;top:-30px;height:60px;border-bottom:2px solid #2C3A22;border-radius:0 0 50% 50%}
.xmas-hero__lights i{
  --c:#FF3B3B;position:relative;top:calc(26px + 6px * sin(calc(var(--i) * 1rad)));width:11px;height:17px;border-radius:50% 50% 50% 50%/40% 40% 60% 60%;
  background:var(--c);box-shadow:0 0 14px 3px var(--c);animation:xmas-twinkle 2.4s ease-in-out infinite;animation-delay:calc(var(--i) * -.37s)
}
.xmas-hero__lights i:nth-child(3n+2){--c:#3BE37A}
.xmas-hero__lights i:nth-child(3n){--c:#F7D774}
@keyframes xmas-twinkle{0%,100%{opacity:1}50%{opacity:.35}}
.xmas-hero__in{position:relative;z-index:1}
.xmas-hero__badge{display:inline-block;padding:.5em 1.2em;border:1px solid rgba(247,215,116,.5);border-radius:999px;color:#F7D774;font-size:.78rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.xmas-hero__t{
  margin-top:1.4rem;font-family:'Barlow Condensed',sans-serif;font-weight:900;text-transform:uppercase;line-height:.92;
  font-size:clamp(3.2rem,10vw,8.5rem);letter-spacing:.01em;
  background:linear-gradient(180deg,#fff 0%,#D9D9D9 48%,#9A9A9A 52%,#EDEDED 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.6));
}
.xmas-hero__t em{display:block;font-style:normal;background:linear-gradient(180deg,#FFF0B3 0%,#F7D774 45%,#B8861E 55%,#F2C94C 100%);-webkit-background-clip:text;background-clip:text}
.xmas-hero__date{
  display:inline-block;margin-top:1.6rem;padding:.55em 1.4em;background:#C8141C;color:#fff;transform:rotate(-2deg);
  font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:clamp(1.15rem,2.6vw,1.9rem);letter-spacing:.04em;text-transform:uppercase;
  box-shadow:0 12px 30px -10px rgba(200,20,28,.8)
}
.xmas-hero__where{margin-top:1.2rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#E8E2D4}
.xmas-btn.btn{--bg:#C8141C;--bd:#C8141C;background:#C8141C;border-color:#C8141C;color:#fff}
.xmas-btn.btn::after{background:#F7D774 !important}
.xmas-btn.btn:hover{color:#5A0A0E !important;box-shadow:0 14px 34px -12px rgba(247,215,116,.6)}
@media (prefers-reduced-motion:reduce){.xmas-hero__lights i{animation:none}}

.xmas-sec{position:relative}
.xmas-facts{list-style:none;padding:0;margin-left:0;display:grid;gap:1rem}
.xmas-facts li{display:flex;gap:1rem;align-items:flex-start;padding:1rem 1.2rem;border:1px solid var(--line);border-left:3px solid #C8141C;border-radius:var(--r-md,12px);background:rgba(255,255,255,.03)}
.xmas-facts li span{font-size:1.4rem;line-height:1}
.xmas-facts b{display:block;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:#F7D774;margin-bottom:.2rem}
.xmas-flyer{margin:0;border-radius:var(--r-lg,18px);overflow:hidden;border:2px solid rgba(247,215,116,.45);box-shadow:0 30px 60px -30px rgba(212,22,30,.7)}
.xmas-flyer img{display:block;width:100%;height:auto;transition:transform .6s var(--ease)}
.xmas-flyer a:hover img{transform:scale(1.03)}

.xmas-perform{
  display:grid;grid-template-columns:1fr auto;gap:clamp(2rem,5vw,4.5rem);align-items:center;
  padding:clamp(1.8rem,5vw,3.6rem);border-radius:var(--r-lg,18px);
  background:linear-gradient(135deg,rgba(200,20,28,.22),rgba(15,107,58,.18));border:1px solid rgba(247,215,116,.35)
}
.xmas-acts{list-style:none;padding:0;margin-left:0;display:flex;flex-wrap:wrap;gap:.6rem}
.xmas-acts li{padding:.45em 1em;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid var(--line);font-size:.9rem}
.xmas-deadline{padding:.9rem 1.2rem;border-radius:12px;background:#0A0A0B;border:1px solid rgba(247,215,116,.4);color:#E8E2D4}
.xmas-deadline b{color:#F7D774}
.xmas-qr{display:grid;justify-items:center;gap:.9rem;text-align:center}
.xmas-qr__img{width:clamp(170px,20vw,230px) !important;height:auto;padding:10px;background:#fff;border-radius:14px;border:4px solid #F7D774}
.xmas-qr span{font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#F7D774}
@media (max-width:760px){.xmas-perform{grid-template-columns:1fr}.xmas-qr{justify-self:center}}

/* Centered menu bar: logo left, nav links centred on the page, ornament right.
   Equal 1fr side columns keep the nav at the true centre of the header. */
@media (min-width:1081px){
  .hdr__in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
  .hdr__in .brand{justify-self:start}
  .hdr__in .nav--main{justify-self:center}
  .hdr__in .ornament{justify-self:end}
}