/* self-hosted fonts (was render-blocking Google Fonts) — */
@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/Anton-400.woff2) format('woff2')}
@font-face{font-family:'Bebas Neue';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/BebasNeue-400.woff2) format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/Montserrat-var.woff2) format('woff2-variations')}
/* ============ Sasquatch / Cloudcroft Ice Skating — site styles ============ */
/* ── Type scale ───────────────────────────────────────────────────────────────
   One modular scale, ten steps. Before this the stylesheet carried 40 distinct
   font sizes, seven of them clustered between .84 and .98rem — differences no one
   can perceive but which guarantee nothing ever aligns. Reach for a token; do not
   introduce a new value. */
:root{
  --fs-2xs:.8rem;   --fs-xs:.875rem;  --fs-sm:.95rem;   --fs-md:1rem;
  --fs-lg:1.125rem; --fs-xl:1.3rem;   --fs-2xl:1.6rem;  --fs-3xl:2rem;
  --fs-4xl:2.6rem;  --fs-5xl:3rem;
  /* Spacing rhythm — section padding and stack gaps should come from here. */
  --sp-1:6px; --sp-2:10px; --sp-3:14px; --sp-4:18px; --sp-5:26px;
  --sp-6:36px; --sp-7:52px; --sp-8:72px; --sp-9:104px;
}
:root{
  --forest:#193A1E; --forest2:#21512a; --black:#1C2120; --ice:#F2EFEB;
  --azure:#C7D3D5; --lime:#C1FF72; --ink:#1C2120; --grey:#5b6660;
  --line:#e2e8e3; --white:#fff; --shadow:0 10px 34px rgba(16,32,20,.09);
  --warn:#b23b3b; --gold:#8a5e00; /* 2.95:1 on white before; now 5.996:1 */
  --surface:#fafdf8; --surface-2:#eef3ec;
  --r-sm:9px; --r-md:13px; --r-lg:18px; --r-pill:999px;
  --e1:0 1px 2px rgba(16,32,20,.05); --e2:0 8px 26px rgba(16,32,20,.06);
  --e3:0 20px 48px rgba(16,32,20,.09); --e4:0 34px 76px rgba(16,32,20,.13);
  --ease:cubic-bezier(.22,.61,.36,1);--ease-slow:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"Montserrat",-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--ink);line-height:1.65;font-size:1rem;background:var(--surface);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
h1,h2{font-family:"Anton",sans-serif;font-weight:400;letter-spacing:.2px;line-height:1.03;text-transform:uppercase}
h3,h4{font-family:"Montserrat",sans-serif;font-weight:700;letter-spacing:-.01em;line-height:1.22;color:var(--forest)}
.label{font-family:"Bebas Neue",sans-serif;letter-spacing:2px;text-transform:uppercase}
a{color:var(--forest);text-decoration:none}
/* WCAG 1.4.1: inline prose links must not rely on color alone — forest-on-ink is only
   1.29:1 against surrounding text. Buttons/cards carry their own affordance. */
section p a:not(.btn),section li a:not(.btn),.soonlink{text-decoration:underline;text-underline-offset:3px}
img{max-width:100%;display:block;height:auto}
.wrap{max-width:1100px;margin:0 auto;padding:0 22px}
.narrow{max-width:820px;margin:0 auto;padding:0 22px}

/* buttons */
.btn{display:inline-block;background:var(--lime);color:var(--forest);font-family:"Bebas Neue";font-size:1.125rem;letter-spacing:1.5px;padding:14px 32px;border-radius:40px;border:2px solid var(--lime);cursor:pointer;transition:transform .3s var(--ease-slow),box-shadow .3s var(--ease-slow),background .25s,border-color .25s;text-align:center}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(25,58,30,.17)}
.btn.outline{background:transparent;border:2px solid var(--ice);color:var(--ice)}
.btn.outline:hover{background:var(--ice);color:var(--forest)}
.btn.dark{background:var(--forest);color:var(--ice);border-color:var(--forest)}
.btn.dark:hover{box-shadow:0 8px 22px rgba(25,58,30,.4)}
.btn.sm{font-size:1rem;padding:11px 20px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.btn[disabled]{opacity:.5;cursor:not-allowed;pointer-events:none}

/* Non-interactive status chip. Deliberately not a .btn and not a link; sized to occupy the same slot as a .btn.sm so card grids keep their rhythm. */
.soon{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:11px 20px;
  font-family:"Bebas Neue";font-size:1rem;letter-spacing:1.5px;border-radius:40px;
  color:var(--grey);background:var(--surface-2);border:2px dashed var(--line);cursor:default}
.soon::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--grey);opacity:.55}
/* on dark panels the light chip would glare */
.night .soon,.panel.dark .soon{color:var(--azure);background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.22)}
.night .soon::before,.panel.dark .soon::before{background:var(--azure)}
/* inline variant for a "Coming Soon" that replaces a link inside a sentence */
.soon-inline{font-weight:600;color:var(--grey);white-space:nowrap}
.night .soon-inline,.panel.dark .soon-inline{color:var(--azure)}
/* secondary text link used alongside the status chip */
.soonlink{display:inline-block;margin-left:10px;padding:11px 2px;font-size:0.95rem;font-weight:600;
  color:var(--forest);text-decoration:underline;text-underline-offset:3px}
.soonlink:hover{color:var(--forest2)}
.night .soonlink,.panel.dark .soonlink{color:var(--lime)}
/* .pcard is a flex column, so the chip fills the width exactly like the buttons it replaced — keep that, and centre the follow-up link under it rather than leaving it hanging left of a full-width pill. */
.pcard .soonlink{align-self:center;margin:12px 0 0}
@media (max-width:520px){.soonlink{display:block;margin:10px 0 0}}
/* placeholder shown in place of the day-tab widget */
.resv-empty{text-align:center;padding:26px 18px;margin:0;font-family:"Bebas Neue";
  font-size:1.125rem;letter-spacing:1.2px;color:var(--azure);
  background:rgba(255,255,255,.05);border:1px dashed rgba(255,255,255,.2);border-radius:var(--r-md)}
section:not(.night) .resv-empty{color:var(--grey);background:var(--surface-2);border-color:var(--line)}

/* header / nav — transparent "Apple glass" overlay, frosts on scroll */
header{position:fixed;top:0;left:0;right:0;z-index:50;
  background:linear-gradient(180deg,rgba(8,14,11,.75) 0%,rgba(8,14,11,.34) 58%,transparent 100%);
  transition:background .35s ease,backdrop-filter .35s ease,border-color .35s ease,box-shadow .35s ease;
  border-bottom:1px solid transparent}
header.scrolled{background:rgba(17,28,22,.72);backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid rgba(255,255,255,.08);box-shadow:0 8px 30px rgba(0,0,0,.28)}
nav{display:flex;align-items:center;justify-content:space-between;padding:10px 22px;max-width:1180px;margin:0 auto}
.brand{display:flex;align-items:center;gap:12px;min-height:44px}
.brand img{height:54px;width:auto}
.brand .bt{font-family:"Anton";color:var(--ice);font-size:1rem;line-height:1;text-shadow:0 2px 10px rgba(0,0,0,.55)}
.brand .bt small{display:block;font-family:"Bebas Neue";color:var(--azure);font-size:0.8rem;letter-spacing:1.2px;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.navlinks{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.navlinks a{color:var(--ice);font-weight:700;font-size:0.875rem;padding:10px 2px;text-transform:uppercase;letter-spacing:.4px;text-shadow:0 1px 10px rgba(0,0,0,.5);transition:color .2s}
.navlinks a:hover,.navlinks a.active{color:var(--lime)}
/* 44x44 tap target — this is the primary nav control on phones and it was 22x32, the one control on the site that missed the 44px rule. */
.menubtn{display:none;align-items:center;justify-content:center;width:44px;height:44px;margin-right:-10px;
  background:none;border:0;font-size:1.6rem;color:var(--ice);cursor:pointer;text-shadow:0 1px 10px rgba(0,0,0,.5)}
.menubtn svg{width:24px;height:24px}
/* Raised from 820px: the header now carries two marks, so the full link row needs
   more room beside it. At 821-900 it used to appear and immediately wrap to a
   second line, doubling the fixed header to 128px. */
@media(max-width:900px){
  .navlinks{display:none;position:absolute;top:100%;left:0;right:0;background:rgba(17,28,22,.95);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);flex-direction:column;gap:0;border-bottom:1px solid rgba(255,255,255,.1);box-shadow:0 14px 40px rgba(0,0,0,.45)}
  .navlinks.open{display:flex}
  .navlinks a{padding:13px 22px;border-top:1px solid rgba(255,255,255,.08);width:100%}
  .menubtn{display:inline-flex}
}

/* page banner (interior pages) */
.pagehead{background:radial-gradient(120% 120% at 80% 10%,#27602f,#193A1E 70%);color:var(--ice);padding:104px 0 46px}
.pagehead .label{color:var(--lime);font-size:1rem}
.pagehead h1{font-size:clamp(2rem,4.6vw,3rem);margin-top:6px}
.pagehead p{color:var(--ice);max-width:62ch;margin-top:10px}

section{padding:clamp(56px,7vw,84px) 0}
section.moment{padding:clamp(84px,10vw,120px) 0}
section.alt+section.alt{padding-top:0}
@media(max-width:760px){section{padding:60px 0}}
section.alt{background:linear-gradient(rgba(233,239,232,.78),rgba(233,239,232,.78)),url(/assets/img/frost-tile.webp?v=2);background-size:auto,800px;border-top:1px solid rgba(25,58,30,.08);border-bottom:1px solid rgba(25,58,30,.08)}
.stitle{text-align:center;margin-bottom:48px}
.stitle .label{color:var(--forest2);font-size:1rem}
.stitle h2{font-size:clamp(1.7rem,4vw,2.4rem);color:var(--forest);margin-top:4px}
.stitle p{color:var(--grey);max-width:660px;margin:10px auto 0}

.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.grid.two{grid-template-columns:repeat(2,1fr)}
@media(max-width:880px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.grid,.grid.two{grid-template-columns:1fr}}

.pcard{background:linear-gradient(180deg,#fff,#f6faf4);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px;display:flex;flex-direction:column;box-shadow:var(--e1);transition:transform .22s var(--ease),box-shadow .22s,border-color .22s;position:relative;overflow:hidden}
.pcard:hover{transform:translateY(-4px);box-shadow:var(--e3);border-color:rgba(33,81,42,.18)}
.pcard::after{content:"";position:absolute;left:0;top:0;height:3px;width:100%;background:linear-gradient(90deg,var(--lime),#7fd45a);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease-slow)}
.pcard:hover::after{transform:scaleX(1)}
.pcard.star{background:#fff;border-color:var(--forest2);box-shadow:0 0 0 1px var(--forest2),var(--e2)}
.pcard .ic{width:46px;height:46px;border-radius:13px;background:var(--surface);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:1.3rem;margin-bottom:14px}
.pcard.star .ic{background:var(--lime);border-color:var(--lime)}
/* line-art icons replaced the emoji tiles — same drawing style as .featstrip */
.ic svg{width:24px;height:24px;flex:none;stroke:var(--forest2);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.pcard.star .ic svg{stroke:var(--forest)}
.pcard .ic.num{font-family:"Bebas Neue";font-size:1.6rem;color:var(--forest2);letter-spacing:1px}
.pcard h2,.pcard h3,.pcard h4{color:var(--forest);font-size:1.125rem;margin:0 0 4px;font-family:"Montserrat",sans-serif;font-weight:700;text-transform:none;letter-spacing:-.01em;line-height:1.22}
.pcard .pr{font-family:"Bebas Neue";font-size:1.3rem;letter-spacing:.5px;color:var(--forest2)}
.pcard p{color:var(--grey);font-size:0.95rem;line-height:1.6;margin:6px 0 18px;flex:1}
.tagstar{display:inline-block;background:var(--lime);color:var(--forest);font-family:"Bebas Neue";letter-spacing:.6px;font-size:0.875rem;padding:2px 9px;border-radius:20px;margin-left:6px}
.cap{display:inline-block;font-family:"Bebas Neue";letter-spacing:1px;color:var(--forest2);font-size:0.95rem;background:#eaf7df;border:1px solid var(--lime);padding:2px 10px;border-radius:20px;margin-top:4px}

.two-col{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start}
@media(max-width:820px){.two-col{grid-template-columns:1fr}}
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;box-shadow:var(--e2);transition:transform .22s var(--ease),box-shadow .22s}
.panel:hover{transform:translateY(-4px);box-shadow:var(--e3)}
.panel.dark{background:var(--forest);color:var(--ice);border:0}
.panel.dark h3{color:var(--ice)}

/* tables */
table.sched{width:100%;border-collapse:collapse;background:#fff;border-radius:12px;overflow:hidden;box-shadow:var(--e2)}
table.sched th{background:var(--forest);color:var(--ice);font-family:"Bebas Neue";letter-spacing:1px;padding:11px 14px;text-align:left;font-weight:400}
table.sched td{padding:11px 14px;border-top:1px solid var(--line);color:var(--ink);font-size:0.95rem}
table.sched tr:nth-child(even) td{background:#fafdf8}

/* forms */
.formcard{max-width:760px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:18px;padding:30px;box-shadow:var(--e2)}
.field{margin-bottom:16px}
.field label{display:block;font-weight:700;font-size:0.875rem;margin-bottom:5px;color:var(--ink)}
.field input,.field select,.field textarea{width:100%;padding:13px 14px;min-height:44px;border:1.5px solid var(--line);border-radius:8px;font-size:1rem;font-family:inherit;background:#fbfdfb}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:none;border-color:var(--forest2);box-shadow:0 0 0 3px var(--lime)}
.field input::placeholder,.field textarea::placeholder{color:#5b6660;opacity:1}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.row2{grid-template-columns:1fr}}
.hide{display:none}
.waiver{background:var(--ice);border:1px solid var(--line);border-radius:10px;padding:14px;font-size:0.875rem;color:var(--grey);max-height:140px;overflow:auto;margin-bottom:10px}
.check{display:flex;gap:10px;align-items:flex-start;font-size:0.875rem}
.check input{width:24px;height:24px;margin-top:2px;flex-shrink:0}
.check{padding:10px 0;cursor:pointer}
.note{font-size:0.95rem;color:var(--grey);font-style:italic;margin-top:8px;max-width:62ch}
.ok{display:none;background:#f1fbe6;border:1px solid var(--lime);border-radius:12px;padding:22px;text-align:center}
.ok h2,.ok h3{color:var(--forest);font-size:1.3rem;font-family:"Montserrat",sans-serif;font-weight:700;text-transform:none}

/* reservation rows — premium */
.resv-group{margin:28px 0 14px;display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding-bottom:11px;border-bottom:1px solid var(--line)}
.resv-group strong{color:var(--forest);font-size:1.125rem;letter-spacing:.3px}
.resv-group .gcap{font-family:"Bebas Neue";letter-spacing:1.5px;color:var(--forest2);font-size:0.875rem;
  background:#eaf7df;border:1px solid rgba(33,81,42,.18);padding:3px 13px;border-radius:30px}

/* banner / cta strip */
.banner{background:radial-gradient(120% 140% at 80% 0%,#27602f,#16331c 75%);color:var(--ice);border:1px solid rgba(193,255,114,.22);border-radius:var(--r-lg);padding:56px 40px;text-align:center;box-shadow:var(--e3)}
.banner .label{color:var(--lime)}
.banner h2{font-size:clamp(1.7rem,4vw,2.4rem);margin:6px 0 10px;color:var(--ice)}
.banner p{opacity:.9;max-width:620px;margin:0 auto 20px}

/* footer */
footer{background:var(--black);color:var(--azure);padding:46px 0 28px}
footer .fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:26px;align-items:start}
/* One centred column turned 19 links into a 1,366px ribbon on a phone. The two
   short link lists sit side by side instead; brand and contact keep the full width. */
@media(max-width:760px){
  footer .fgrid{grid-template-columns:1fr 1fr;gap:24px 18px;text-align:left}
  footer .fgrid>:first-child{grid-column:1/-1;text-align:center}
  footer .fgrid>:last-child{grid-column:1/-1}
}
footer .logos{display:flex;align-items:center;gap:16px}
@media(max-width:760px){footer .logos{justify-content:center}}
footer img.sq{height:64px;width:auto}
footer img.js{height:60px;width:auto}
footer h2{font-family:"Bebas Neue";letter-spacing:1.5px;color:var(--ice);font-size:1rem;margin-bottom:8px;font-weight:inherit}
footer a{color:var(--lime);display:block;font-size:0.95rem;padding:12px 0;line-height:1.35}
footer .vline{font-family:"Anton";color:var(--lime);font-size:1.125rem;margin-top:8px}
footer .fine{font-size:0.875rem;opacity:.7;margin-top:18px;border-top:1px solid #2a2f2e;padding-top:14px}
.todo{background:#fff8ec;border:1px dashed #e6c98a;color:#7a5a1b;border-radius:6px;padding:2px 8px;font-size:0.8rem;font-style:italic}

/* ===== premium programs section (home) ===== */
.prog-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:32px}
.prog-head .label{color:var(--forest2);font-size:1rem}
.prog-head h2{font-size:clamp(1.9rem,4.4vw,2.9rem);color:var(--forest);margin-top:6px;line-height:1.02}
.prog-filters{display:flex;gap:4px;flex-wrap:wrap;background:#fff;border:1px solid var(--line);border-radius:40px;padding:5px}
.pf{min-height:44px;display:inline-flex;align-items:center;font-family:"Montserrat",sans-serif;font-weight:700;font-size:0.875rem;letter-spacing:.2px;color:var(--grey);background:transparent;border:0;padding:9px 17px;border-radius:30px;cursor:pointer;transition:.2s}
.pf:hover{color:var(--forest)}
.pf.active{background:var(--forest);color:var(--ice);box-shadow:0 4px 12px rgba(25,58,30,.22)}

.prog-grid{margin-top:0}
.card2{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;display:flex;flex-direction:column;height:100%;box-shadow:var(--e1);transition:transform .22s var(--ease),box-shadow .22s,border-color .22s}
.card2 .c2d{flex:1}
.card2:hover{transform:translateY(-4px);box-shadow:var(--e3);border-color:rgba(33,81,42,.18)}
.card2.star{background:#fff;border-color:var(--forest2);box-shadow:0 0 0 1px var(--forest2),var(--e2)}
.c2top{display:flex;align-items:center;gap:14px;margin-bottom:15px}
.card2.hidden{display:none} /* used by home filter pills (inline script) — flag was a false positive */
/* A long title used to push the status chip onto its own line, dropping that card's
   price out of alignment with its neighbours. Let the title wrap instead; the chip
   stays on the first line and every card's price sits on the same baseline. */
.c2tt{display:flex;align-items:baseline;gap:8px;flex-wrap:nowrap}
.c2tt h2,.c2tt h3,.c2tt h4{min-width:0}
.c2tt .c2tag{flex:none;align-self:center}
.c2tt h2,.c2tt h3,.c2tt h4{color:var(--forest);font-size:1.125rem;margin:0;line-height:1.1;font-family:"Montserrat",sans-serif;font-weight:700;text-transform:none;letter-spacing:-.01em}
.c2tag{font-family:"Montserrat",sans-serif;font-weight:700;font-size:0.875rem;letter-spacing:.5px;text-transform:uppercase;color:var(--grey);background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-pill);padding:3px 10px}
.c2tag.open{color:var(--forest);background:var(--lime);border-color:var(--lime)}
.c2pr{font-family:"Bebas Neue",sans-serif;font-size:1.3rem;letter-spacing:.5px;color:var(--forest2);margin-bottom:7px}
.c2d{color:var(--grey);font-size:0.95rem;line-height:1.6;margin-bottom:20px;flex:1}
.c2d .cap{margin-top:10px}
.c2btn{display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-family:"Montserrat",sans-serif;font-weight:700;font-size:0.875rem;color:var(--forest2);
  border:0;border-top:1px solid var(--line);border-radius:0;padding:14px 0 0;margin-top:auto;
  min-height:44px;transition:color .22s}
/* the whole card is the click target; the label is the affordance, not the control */
.card2 .c2btn::after{content:"";position:absolute;inset:0;border-radius:inherit}
.card2:focus-within{outline:3px solid var(--forest2);outline-offset:3px}
.c2btn .arr{transition:transform .22s}
.card2:hover .c2btn{color:var(--forest)}
.c2btn:hover .arr{transform:translateX(5px)}
/* Learn to Play card: two real buttons instead of the whole-card link, each with a one-line
   hint so nobody has to guess which one registers and which one just explains. */
.card2.ltp{scroll-margin-top:96px;border-color:var(--forest2);box-shadow:0 0 0 1px var(--forest2),var(--e2)}
.card2.ltp:target{box-shadow:0 0 0 3px var(--lime),0 0 0 5px var(--forest2),var(--e3)}
.c2actions{display:flex;flex-direction:column;gap:10px;margin-top:auto;padding-top:16px;border-top:1px solid var(--line)}
.c2actions .btn{width:100%;gap:8px}
.c2actions .btn.ghost{margin-top:8px}
.c2actions .ext{font-family:"Montserrat",sans-serif;font-size:.95rem;line-height:1}
.c2hint{font-size:.8rem;line-height:1.4;color:var(--grey);text-align:center;padding:0 4px}

/* feature strip */
.featstrip{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:50px;padding-top:36px;border-top:1px solid var(--line)}
.feat{display:flex;align-items:center;gap:14px}
.feat svg{flex:none;width:30px;height:30px;stroke:var(--forest2);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.feat strong{display:block;color:var(--forest);font-size:0.95rem;font-weight:700;line-height:1.25}
.feat span{color:var(--grey);font-size:0.875rem}
@media(max-width:760px){.featstrip{grid-template-columns:1fr 1fr;gap:20px}}
@media(max-width:440px){.featstrip{grid-template-columns:1fr}}

/* ===== accessibility ===== */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--forest);color:var(--ice);
  font-family:"Bebas Neue";letter-spacing:1px;padding:10px 18px;border-radius:0 0 8px 0;text-decoration:none}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--forest2);outline-offset:2px;border-radius:4px;box-shadow:0 0 0 6px rgba(193,255,114,.85)}
a:focus-visible,.btn:focus-visible,button:focus-visible{outline:3px solid var(--forest2);outline-offset:3px;box-shadow:0 0 0 7px rgba(193,255,114,.85)}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .h3reveal{opacity:1!important;transform:none!important}
  .reveal{opacity:1!important;transform:none!important}
}

/* scroll-reveal (applied via JS so content stays visible if JS is off) */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .75s var(--ease-slow),transform .75s var(--ease-slow)}
.reveal.in{opacity:1;transform:none}


/* nav CTA — the one always-visible conversion action */
.btn.nav-cta{font-size:1rem;padding:10px 22px;min-height:44px;display:inline-flex;align-items:center}
.btn.ghost{background:transparent;border:2px solid var(--forest);color:var(--forest)}
.btn.ghost:hover{background:var(--forest);color:var(--ice)}

/* sticky mobile buy bar — persistent conversion on phones only. Sits above content; main gets bottom padding on mobile so focus/content is never obscured (WCAG 2.2). */
.buybar{display:none}
@media(max-width:760px){
  .buybar{position:fixed;bottom:0;left:0;right:0;z-index:60;display:flex;gap:10px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:rgba(17,28,22,.92);backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);border-top:1px solid rgba(255,255,255,.12)}
  .buybar .btn{flex:1;min-height:48px;display:inline-flex;align-items:center;justify-content:center;font-size:1rem;padding:11px 10px}
  .buybar .btn.ghost{border-color:var(--ice);color:var(--ice)}
  /* The bar overlays the END of the document and <footer> follows <main>, so padding
     on main left 84px of dead space above the footer and still hid the copyright. */
  footer{padding-bottom:calc(28px + 84px)}
  html{scroll-padding-bottom:96px}
  .brand img{height:44px}
  .brand .bt{font-size:0.95rem}
}

/* footer utility classes (replace inline styles that drifted per-page) */
.fnote{font-size:0.875rem;margin-top:6px;max-width:340px}
.fsocial{margin-top:8px;font-size:0.875rem;line-height:1.55}
.fsocial a{display:inline-block;padding:12px 0;min-height:44px}
.fbrand{color:var(--ice);font-weight:700}
.fcontact{color:var(--azure);font-size:0.875rem;margin-top:6px}
/* footer a is display:block, so the <br> between these two adds an empty line box */
.fcontact br{display:none}

/* drawer/nav CTA keeps button colors — .navlinks a would otherwise paint it ice-on-lime (AA fail) */
.navlinks a.btn{color:var(--forest);text-shadow:none}

/* utility classes — replaced the repeated per-page inline styles sweep) */
.t-lime{color:var(--lime);font-size:1.125rem}
.t-grey{color:var(--grey)}
.t-forest{color:var(--forest)}
.t-center{text-align:center}
.t-sm{font-size:0.95rem}
.o-dim{opacity:.92}
.mt-8{margin-top:8px}.mt-10{margin-top:10px}.mt-14{margin-top:14px}.mt-18{margin-top:18px}.mt-22{margin-top:22px}
.m-tight{margin:8px 0 14px}
.m0b{margin-bottom:0}
.label-azure{font-family:"Bebas Neue";font-size:1rem;color:var(--azure)}
.stat-num{font-family:"Anton";font-size:3rem;line-height:1;margin:8px 0}
.stat-num.stat-sm{font-size:2.6rem}

/* buy-flow gate */
.pricetable{width:100%;border-collapse:collapse;margin-top:8px}
.pricetable td{padding:10px 4px;border-bottom:1px solid var(--line);font-size:1rem}
.pricetable .num{text-align:right;font-family:"Bebas Neue";font-size:1.125rem;color:var(--forest2)}
.pricetable .total td{border-bottom:0;font-weight:700;color:var(--forest)}
.pricetable .total .num{font-size:1.6rem}
.barefs{border:0;padding:0;margin:0}
#paybtn[disabled]{opacity:.45}

/* Phase C plumbing: page headers accept a cinematic background the moment the asset exists — <section class="pagehead" style="--ph:url(/assets/img/ph-parties.webp)">. Dark gradient keeps header text at AA contrast over any image. */
/* image layer on ::before so it can DRIFT (transform = GPU, no jank); content sits above. Motion is a slow 22s cinematic zoom-drift + a whisper of falling snow — both OFF for prefers-reduced-motion (WCAG 2.2.2). Gradient keeps header text at AA contrast. */
.pagehead{position:relative;overflow:hidden}
.pagehead::before{content:"";position:absolute;inset:0;background-image:linear-gradient(180deg,rgba(10,20,13,.80),rgba(12,24,15,.80)),var(--ph,none);background-size:cover;background-position:center;z-index:0}
.pagehead>*{position:relative;z-index:2}
.pagehead::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.5;
  background-image:radial-gradient(2px 2px at 20% 30%,rgba(255,255,255,.55),transparent 60%),radial-gradient(1.5px 1.5px at 62% 12%,rgba(255,255,255,.4),transparent 60%),radial-gradient(2px 2px at 85% 55%,rgba(255,255,255,.45),transparent 60%),radial-gradient(1.5px 1.5px at 40% 75%,rgba(255,255,255,.35),transparent 60%);
  background-size:340px 340px}
@media (prefers-reduced-motion: no-preference){
  .pagehead::before{animation:ph-drift 22s ease-in-out infinite alternate;will-change:transform}
  .pagehead::after{animation:ph-snow 18s linear infinite}
}
@keyframes ph-drift{from{transform:scale(1.02)}to{transform:scale(1.09) translateY(-1.6%)}}
@keyframes ph-snow{from{background-position:0 -340px}to{background-position:0 340px}}
/* cards lift on hover — quiet depth, desktop pointers only */
@media (hover:hover) and (prefers-reduced-motion: no-preference){
  .pcard{transition:transform .25s var(--ease,ease),box-shadow .25s var(--ease,ease)}
  .pcard:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(20,40,25,.16)}
}

/* lifestyle imagery (Phase C batch 3) */
.lsgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:760px){.lsgrid{grid-template-columns:1fr}}
.lscard{margin:0;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow, 0 10px 30px rgba(20,40,25,.12))}
.lscard img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:3/2}
.lscard figcaption{font-family:"Bebas Neue";letter-spacing:1.5px;color:var(--forest2);padding:10px 14px;background:var(--surface,#fff)}
.pagefig{max-width:920px;margin:0 auto 64px;padding:0 22px}
.pagefig img{border-radius:var(--r-lg)}

/* the Sasquatch himself — decorative personality moments (Phase C batch 2). Always aria-hidden decorative; never blocks content; hidden on small phones where he would crowd the copy. */
.sqmate{position:absolute;bottom:0;right:18px;width:clamp(120px,16vw,230px);pointer-events:none;filter:drop-shadow(0 10px 18px rgba(0,0,0,.35));z-index:2}
.sq-inline{display:block;width:clamp(140px,22vw,240px);margin:0 auto}
@media(max-width:560px){.sqmate{display:none}}

/* Experience Cloudcroft — ambient video (Phase C batch 4) */
.vidwrap{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow,0 14px 40px rgba(20,40,25,.18))}
.vidwrap video{width:100%;display:block;aspect-ratio:16/9;object-fit:cover;background:#0f1e12}
.vidbtn{position:absolute;bottom:14px;right:14px;width:46px;height:46px;border-radius:50%;border:2px solid rgba(255,255,255,.7);background:rgba(15,30,18,.65);color:#fff;font-size:1rem;cursor:pointer;backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center}
.vidbtn:hover{background:rgba(15,30,18,.85)}
.vidbtn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--lime)}

/* ══ SCROLL JOURNEY ═══════════════════════════════════════════ */

/* 5) the mid-page NIGHT band — conversion moments live in the brand's darkest look */
section.night{background:radial-gradient(120% 140% at 75% 0%,#21512a,#0f2613 70%);color:var(--ice);position:relative;overflow:hidden;border:0}
section.night h2,section.night h3{color:var(--ice)}
section.night .label{color:var(--lime)}
section.night::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.3;
  background-image:radial-gradient(2px 2px at 20% 30%,rgba(255,255,255,.55),transparent 60%),radial-gradient(1.5px 1.5px at 62% 12%,rgba(255,255,255,.4),transparent 60%),radial-gradient(2px 2px at 85% 55%,rgba(255,255,255,.45),transparent 60%);background-size:340px 340px}
section.night>.wrap{position:relative;z-index:1}

/* 7) checkout staging: dark "rink pass" receipt + trust strip + CTA that lights up */
.pricetable{background:linear-gradient(160deg,#21512a,#16331c);border-radius:14px;padding:8px 16px;color:var(--ice)}
.pricetable td{border-bottom:1px solid rgba(255,255,255,.12);color:var(--ice)}
.pricetable .num{color:var(--lime)}
.pricetable .total td{border-top:1px dashed rgba(255,255,255,.25);border-bottom:0;color:#fff}
.pricetable .total .num{color:var(--lime)}
#paybtn{box-shadow:0 8px 22px rgba(193,255,114,.45)}
#paybtn[disabled]{box-shadow:none}

/* 9) branded forms + tactile cards */
input,select,textarea,button{accent-color:var(--forest2)}
input[type=checkbox]{accent-color:var(--forest2)}
.formcard[data-label]::before{content:attr(data-label);display:block;font-family:"Bebas Neue";letter-spacing:2px;color:var(--lime);background:linear-gradient(135deg,#21512a,#16331c);margin:-30px -30px 22px;padding:16px 30px;border-radius:18px 18px 0 0;font-size:1rem}
.pcard.star{background:linear-gradient(160deg,#21512a,#16331c);border-color:#16331c;box-shadow:var(--e3)}
.pcard.star h2,.pcard.star h3,.pcard.star h4,.pcard.star p{color:var(--ice)}
.pcard.star .pr{color:var(--lime)}
.pcard:active,.lscard:active{transform:scale(.985)}
.pcard{transition:transform .2s var(--ease,ease),box-shadow .2s var(--ease,ease)}

/* 6) pine ridgeline divider — the site's signature seam */
.ridge{display:block;width:100%;height:34px;margin-bottom:-1px}
.ridge svg{display:block;width:100%;height:100%}

/* pre-footer dark CTA closer */
.closer{background:linear-gradient(0deg,rgba(15,30,18,.92),rgba(15,30,18,.55)),var(--closer,url(/assets/img/closer-dusk.webp) center/cover);background-size:cover;background-position:center;color:var(--ice);text-align:center;padding:clamp(72px,9vw,110px) 0}
.closer h2{color:var(--ice);font-size:clamp(1.7rem,4vw,2.4rem)}
.closer .label{color:var(--lime)}

/* ── SCROLL JOURNEY ─────────────────────────────────────────────────────── */
/* page-wide snowfield: white dots only visible over dark bands — automatic */
.snowfield{position:fixed;inset:0;z-index:3;pointer-events:none;opacity:.14;
  background-image:radial-gradient(2px 2px at 12% 22%,rgba(255,255,255,.5),transparent 60%),radial-gradient(1.5px 1.5px at 48% 64%,rgba(255,255,255,.4),transparent 60%),radial-gradient(2.5px 2.5px at 78% 38%,rgba(255,255,255,.45),transparent 60%),radial-gradient(1.5px 1.5px at 30% 84%,rgba(255,255,255,.35),transparent 60%);
  background-size:420px 420px;display:none}
/* skate-blade trail: draws itself down the right edge as you scroll */
.blade{position:fixed;top:0;right:10px;width:2.5px;height:100svh;z-index:60;pointer-events:none;border-radius:2px;
  background:linear-gradient(180deg,var(--lime),#bfe9ff 70%,rgba(191,233,255,0));opacity:0;transform:scaleY(0);transform-origin:top}
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: scroll()) {
    .snowfield{display:block;animation:snowdrift 26s linear infinite}
    .blade{opacity:.55;animation:bladegrow linear both;animation-timeline:scroll()}
    .vidwrap{animation:arrive both;animation-timeline:view();animation-range:entry 0% entry 70%}
    .pagehead::before{animation:ph-drift 22s ease-in-out infinite alternate, phpar linear both;animation-timeline:auto,scroll()}
  }
}
@keyframes snowdrift{from{background-position:0 -420px}to{background-position:60px 420px}}
@keyframes bladegrow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes arrive{from{transform:scale(.94);filter:brightness(.8)}to{transform:scale(1);filter:brightness(1)}}
@keyframes phpar{from{background-position:center 40%}to{background-position:center 60%}}
@media(max-width:560px){.blade{right:5px}}

/* visit locator card (map-poster) + party package photo headers */
.mapcard{position:relative;display:block;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--e2);aspect-ratio:4/3}
.mapcard img{width:100%;height:100%;object-fit:cover;display:block}
.mapcard .pin{position:absolute;left:50%;top:47%;width:18px;height:18px;border-radius:50%;background:radial-gradient(circle,var(--lime),rgba(193,255,114,.0) 70%);box-shadow:0 0 22px 8px rgba(193,255,114,.55);animation:pinpulse 2.6s ease-in-out infinite}
.mapcard figcaption{position:absolute;left:0;right:0;bottom:0;padding:12px 16px;font-family:"Bebas Neue";letter-spacing:2px;color:var(--ice);background:linear-gradient(transparent,rgba(10,20,13,.85))}
@media (prefers-reduced-motion: reduce){.mapcard .pin{animation:none}}
@keyframes pinpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.25)}}
/* card photo headers — full-bleed to the card edge (cards pad 28px, radius 18px − 1px border = 17px), soft brand grade at the foot, and a quiet zoom on hover. Zoom only runs for pointer devices that welcome motion. */
.pcard .cardphoto,.card2 .cardphoto{position:relative;margin:-28px -28px 18px;border-radius:17px 17px 0 0;overflow:hidden;aspect-ratio:16/9}
.pcard .cardphoto img,.card2 .cardphoto img{width:100%;height:100%;object-fit:cover;display:block}
.cardphoto::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,20,13,0) 55%,rgba(10,20,13,.22));pointer-events:none}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .cardphoto img{transition:transform .7s var(--ease-slow)}
  .pcard:hover .cardphoto img,.card2:hover .cardphoto img{transform:scale(1.05)}
}
/* featured card leads the grid: 2×2 footprint on wide screens (6- and 9-card grids resolve to perfect rectangles), full-width feature row on tablets. Opt-in per grid via .feature so 3-card rows never go ragged. */
@media(min-width:881px){
  .grid.feature .pcard.star,.grid.feature .card2.star{grid-column:span 2;grid-row:span 2}
  .grid.feature .star .cardphoto{aspect-ratio:auto;flex:1 1 auto;min-height:250px}
  .grid.feature .star p,.grid.feature .star .c2d{flex:0 0 auto}
}
@media(max-width:880px) and (min-width:561px){
  .grid.feature .pcard.star,.grid.feature .card2.star{grid-column:1/-1}
}

/* session rows: night-glass panel with date tile */
.resv-group{display:flex;align-items:baseline;justify-content:space-between;margin:26px 0 12px}
section.night .resv-group strong{color:var(--ice);font-size:1rem}
section.night .gcap{color:var(--azure);background:transparent;border:1px solid rgba(255,255,255,.22);font-family:"Bebas Neue";letter-spacing:1.5px;padding:3px 12px;border-radius:20px;font-size:0.8rem}
.sess-chip{font-family:"Bebas Neue";letter-spacing:1px;font-size:0.8125rem;color:var(--forest);background:var(--lime);border-radius:20px;padding:2px 11px}

/* (pine diorama removed — assets were never wired in) */
.vidstage{position:relative}

/* ── the sasquatch skate-by: glides across the night band once when it enters view ── */
.skateby{position:absolute;bottom:6px;left:0;width:min(30vw,220px);z-index:2;pointer-events:none;
  transform:translateX(-110%);visibility:hidden}
section.night{position:relative}
@media (prefers-reduced-motion: no-preference){
  .skateby.go{visibility:visible;animation:skateacross 13s linear 1 forwards}
}
@keyframes skateacross{from{transform:translateX(-110%)}to{transform:translateX(calc(100vw + 40%))}}

/* ══ DYNAMIC PROGRAM CARDS — demo (Taste/Animate/Impeccable direction) ══ Breaks the flat 6-identical-cards grid: featured card goes premium-dark for hierarchy (Taste DESIGN_VARIANCE), and every card gains tactile motion (Animate). All motion is disabled under prefers-reduced-motion via the global block above. */
.card2{position:relative;overflow:hidden;transition:transform .4s var(--ease-slow),box-shadow .4s var(--ease-slow),border-color .4s var(--ease-slow)}
/* accent bar wipes across the top edge on hover/focus */
.card2::after{content:"";position:absolute;left:0;top:0;height:3px;width:100%;z-index:3;
  background:linear-gradient(90deg,var(--lime),#7fd45a);transform:scaleX(0);transform-origin:left;
  transition:transform .55s var(--ease-slow)}
.card2:hover::after,.card2:focus-within::after{transform:scaleX(1)}
.card2:hover{transform:translateY(-6px);box-shadow:var(--e4);border-color:rgba(33,81,42,.28)}
/* CTA stays a text link: label darkens, divider takes the accent, arrow travels. (9/3: the old full-width background fill rendered as an unpadded, square slab — removed) */
.card2:hover .c2btn{color:var(--forest);border-top-color:var(--forest2)}
.card2:hover .c2btn .arr{transform:translateX(6px)}

/* featured card = premium dark, so it reads first (visible even without hover) */
.card2.star{background:linear-gradient(158deg,#21512a,#14301b);border:1px solid #16331c;color:var(--ice);box-shadow:var(--e3)}
.card2.star .c2tt h2,.card2.star .c2tt h3,.card2.star .c2tt h4{color:var(--ice)}
.card2.star .c2d{color:rgba(242,239,235,.86)}
.card2.star .c2pr{color:var(--lime)}
.card2.star .c2tag{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.22);color:var(--ice)}
.card2.star .cap{background:rgba(193,255,114,.14);border-color:rgba(193,255,114,.4);color:var(--lime)}
.card2.star .c2btn{border-color:rgba(255,255,255,.3);color:var(--ice)}
.card2.star:hover{box-shadow:0 0 0 1px var(--forest2),var(--e4)}
.card2.star:hover .c2btn{color:var(--lime);border-top-color:rgba(193,255,114,.6)}

/* filter pills: springier, clearer active state */
.pf{transition:color .25s,background .3s var(--ease-slow),box-shadow .3s,transform .2s}
.pf:hover{transform:translateY(-1px)}
.pf.active{box-shadow:0 6px 16px rgba(25,58,30,.24)}

/* 404 page — now a normal page with real nav + footer */
.nf{padding:clamp(72px,11vw,132px) 0}
.nf .sq-inline{margin:14px auto 6px}
.nf h1{font-size:clamp(2.2rem,6vw,4rem)}
.nf-lead{max-width:460px;margin:12px auto 26px}
.nf-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.nf-links{margin-top:26px;font-size:0.95rem}

/* ── inline links on DARK surfaces ────────────────────────── `a{color:var(--forest)}` is dark green. Inside .banner / .closer / dark panels that is dark-on-dark — on /events/ two links rendered completely invisible. Scoped to plain inline links so buttons and the booking widget keep their own colours. This is the rule, not a per-page patch. */
.banner a:not(.btn),.closer a:not(.btn),.panel.dark a:not(.btn),
section.night p a:not(.btn),section.night li a:not(.btn){
  color:var(--lime);text-decoration:underline;text-underline-offset:3px}
.banner a:not(.btn):hover,.closer a:not(.btn):hover,
.panel.dark a:not(.btn):hover,section.night p a:not(.btn):hover{color:#dcffab}
/* …except inside the white checkout card, which sits on a night band but is light */
section.night .buyform p a:not(.btn){color:var(--forest2)}

/* ── fixes ── */
/* body copy inside dark night bands must never render in --grey */
section.night p{color:var(--azure)}
/* session tiles on LIGHT sections (learn-to-skate, stick-puck render in .alt) */
section.alt .resv-group strong{color:var(--forest)}
section.alt .gcap{color:var(--forest2)}
/* form status notes (AJAX submit feedback) */
.form-note{font-size:0.95rem;font-style:normal;color:var(--forest);margin-top:12px}
.form-note.form-err{color:#8f2f2f;font-weight:700}
section.night .form-note{color:var(--azure)}
section.night .form-note.form-err{color:#ffb4a8}

/* visit page: live Google map + info column */
.mapembed{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--e2);min-height:380px}
.mapembed iframe{width:100%;height:100%;min-height:380px;border:0;display:block}
.visitinfo h2{color:var(--forest);font-size:1.6rem}
.visitinfo .addr{font-weight:700;color:var(--forest);margin-top:8px;line-height:1.5}
.mapcard.mapmini{margin-top:22px;max-width:420px}

/* semantic h2 that keeps panel-heading (h3) typography — heading-order fix */
h2.h3style{font-family:"Montserrat",sans-serif;font-weight:700;letter-spacing:-.01em;line-height:1.22;color:var(--forest);font-size:1.125rem;text-transform:none}
section.night h2.h3style,.panel.dark h2.h3style{color:var(--ice)}

/* ── design-judgment fixes ── */
/* featured card carries the lime CTA (was invisible dark-on-dark) */
.pcard.star .btn.dark{background:var(--lime);color:var(--forest);border-color:var(--lime)}
/* status chip gets its own row instead of wrapping mid-sentence */
.cap{display:block;width:fit-content;margin:10px 0 0}
/* Visit's map column needs to stretch to match the info column beside it. This was applied to ALL .two-col — it fixed the map and left the shorter panel on 3 other pages stretched with measured dead space: figure-skating +167px, learn-to-skate +142px, public-skating +123px. Opt in per-row instead. */
.two-col.fill{align-items:stretch}
.mapembed{display:flex}
.mapembed iframe{flex:1}
/* quiet consent block (was the loudest element on the register form) */
.consentbox{background:transparent;border:1px solid var(--line);border-radius:10px;padding:14px}
/* inline gate error */
/* Visibility is the HTML `hidden` attribute (JS toggles el.hidden) — a display:none here
   used to beat hidden=false, so #saveerr could never render. */
.gate-err{color:#8f2f2f;font-weight:700;margin-top:10px}
.gate-err[hidden]{display:none}

/* ── formcard character upgrade — night header, string lights, mascot peek ── */
.formcard{position:relative;border-radius:var(--r-lg);border:1px solid rgba(33,81,42,.16);
  box-shadow:0 1px 2px rgba(16,32,20,.05),0 18px 48px rgba(16,32,20,.12)}
.formcard[data-label]::before{border-radius:19px 19px 0 0;font-size:1.125rem;letter-spacing:2.5px;
  background:radial-gradient(140% 200% at 80% -20%,#2a6134,#193A1E 55%,#12281a 100%);
  padding:18px 30px 24px}
/* string of glowing bulbs on a sagging wire under the header — the rink's signature */
.formcard[data-label]::after{content:"";position:absolute;left:26px;right:26px;top:56px;height:18px;pointer-events:none;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="140" height="18" viewBox="0 0 140 18"><path d="M0 3 Q 35 11 70 3 Q 105 11 140 3" fill="none" stroke="rgba(255,235,180,.55)" stroke-width="1.1"/><circle cx="18" cy="7.5" r="2.6" fill="%23ffe9a8"/><circle cx="18" cy="7.5" r="5" fill="%23ffe9a8" opacity=".28"/><circle cx="52" cy="8.5" r="2.6" fill="%23c1ff72"/><circle cx="52" cy="8.5" r="5" fill="%23c1ff72" opacity=".25"/><circle cx="88" cy="8.5" r="2.6" fill="%23ffd977"/><circle cx="88" cy="8.5" r="5" fill="%23ffd977" opacity=".28"/><circle cx="122" cy="7.5" r="2.6" fill="%23ffe9a8"/><circle cx="122" cy="7.5" r="5" fill="%23ffe9a8" opacity=".28"/></svg>');
  background-repeat:repeat-x;background-size:140px 18px;
  filter:drop-shadow(0 0 5px rgba(255,220,130,.7))}
.field label{font-family:"Bebas Neue",sans-serif;font-weight:400;font-size:1rem;letter-spacing:1.4px;color:var(--forest2);text-transform:uppercase}
.field input,.field select,.field textarea{border-radius:12px;border-color:rgba(33,81,42,.22);background:#fdfffc;transition:border-color .2s,box-shadow .2s}
.field input:hover,.field textarea:hover,.field select:hover{border-color:rgba(33,81,42,.4)}
/* the mascot leans on the card */
.formcard .sq-peek{position:absolute;top:-58px;right:18px;width:92px;pointer-events:none;
  filter:drop-shadow(0 8px 14px rgba(0,0,0,.35));transform:rotate(4deg);z-index:2}
@media(max-width:560px){.formcard .sq-peek{width:72px;top:-46px;right:10px}}

/* ── session-pass page: premium night checkout ── */
.buycols{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(28px,4vw,56px);align-items:start}
/* Stacked, the sell column came first and buried the form. The form leads on a
   phone; the photo and the "what you get" copy reassure underneath it. */
@media(max-width:880px){.buycols{grid-template-columns:1fr}.buycols .formcard{order:-1}}
.buysell{color:var(--ice)}
.buyphoto{margin:0 0 22px;border-radius:var(--r-lg);overflow:hidden;box-shadow:0 18px 48px rgba(0,0,0,.45)}
.buyphoto img{width:100%;height:auto;display:block}
.buyphoto figcaption{font-family:"Bebas Neue";letter-spacing:1.8px;color:var(--azure);padding:10px 2px 0;font-size:0.875rem}
.buysell h2.h3style{color:var(--ice);font-size:1.3rem;margin:18px 0 10px}
.includes{list-style:none;margin:0 0 16px;padding:0}
.includes li{position:relative;padding:7px 0 7px 30px;color:var(--azure);font-size:1rem}
.includes li::before{content:"";position:absolute;left:0;top:9px;width:18px;height:18px;border-radius:50%;
  background:var(--lime);box-shadow:0 0 10px rgba(193,255,114,.5)}
.includes li::after{content:"";position:absolute;left:5px;top:14px;width:8px;height:5px;
  border-left:2.5px solid var(--forest);border-bottom:2.5px solid var(--forest);transform:rotate(-48deg)}
.minisched{margin-top:22px;border:1px solid rgba(255,255,255,.16);border-radius:var(--r-md);padding:16px 18px;background:rgba(255,255,255,.05)}
.minisched .label{color:var(--lime);font-size:0.95rem}
.minisched p{color:var(--ice);margin-top:6px;line-height:1.7}
/* right: the pass card */
.buyform{max-width:none;margin:0}
.buyform .pricetable{margin-top:0}
.lbl-hint{font-family:"Montserrat",sans-serif;font-weight:400;letter-spacing:0;text-transform:none;color:var(--grey);font-size:0.875rem}
.lbl-legend{font-family:"Bebas Neue",sans-serif;letter-spacing:1.4px;color:var(--forest2);font-size:1rem;margin:6px 0 8px;text-transform:uppercase}
.waiver{max-height:320px;overflow-y:auto;background:var(--surface-2,#f4f7f3);border:1px solid var(--line);border-radius:10px;padding:14px 16px;font-size:0.95rem;line-height:1.65;color:#333d36;margin-bottom:10px}
.waiver:focus-visible{outline:3px solid var(--forest2);outline-offset:2px}
.paycta{width:100%;font-size:1.3rem;padding:16px 20px}
.paysecure{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:12px;font-size:0.875rem;color:var(--forest);font-weight:600}
.paymethods{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;align-items:center;margin-top:12px}
.paymethods img{height:26px;width:auto}
.payword{vertical-align:-2px;width:auto}

/* checkout card: readable controls regardless of the night band around it */
.buyform .check{font-family:"Montserrat",sans-serif;text-transform:none;letter-spacing:0;font-size:0.95rem;color:var(--ink);font-weight:600}
.buyform p{color:var(--ink)}
.buyform .paysecure{color:var(--forest);flex-wrap:wrap;text-align:center}
.buyform .waiver{color:#3c463f}
.buyform .gate-err{color:#8f2f2f}
section.night .buyform p{color:var(--ink)}
section.night .buyform .paysecure{color:var(--forest)}

/* stick & puck: the Sasquatch show */
.sqcols{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(26px,4vw,52px);align-items:center}
@media(max-width:880px){.sqcols{grid-template-columns:1fr}}
.sqshow .vidwrap{box-shadow:0 24px 60px rgba(0,0,0,.5)}
.sqcap{font-family:"Bebas Neue";letter-spacing:2px;color:var(--azure);margin-top:12px;text-align:center;font-size:1rem}
.sqside{color:var(--ice)}
.sqside a.t-lime{text-decoration:underline}

/* waiver: full insurance text formatting */
.waiver p{margin:0 0 10px}
.waiver p:last-child{margin-bottom:0}
.wv-title{font-weight:800;color:var(--forest);letter-spacing:.01em}

/* footer trust strip: Square-secured checkout, sitewide */
.ftrust{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;align-items:center;padding:14px 0 2px;border-top:1px solid rgba(255,255,255,.08);margin-top:18px;opacity:.92}
.ftrust[hidden]{display:none} /* parked while payment is off; display:flex above used to beat the attribute */
.ftrust-label{display:inline-flex;align-items:center;gap:6px;font-size:0.875rem;color:#c9d4cb;font-weight:600}
/* On a phone the label ate most of row 1, leaving 3 marks stranded and centred on
   row 2. Label takes its own row so the six marks read as one deliberate group. */
@media(max-width:560px){.ftrust{gap:10px}.ftrust-label{flex:0 0 100%;justify-content:center}}
.ftrust img{height:20px;width:auto}

/* /buy/ layout: the hub was .wrap.narrow, so four cards stacked in an 820px column on a 1440px screen — the page where people spend money looked the least considered. Featured card leads full-width; the three other ways to buy sit in a row. One column below 881px so 3-in-2-cols can never go ragged. */
.buyhero{margin-bottom:24px}
@media(min-width:881px){.buyhero .cardphoto{max-height:280px}}
@media(max-width:880px){.buygrid{grid-template-columns:1fr}}

/* pcard photo variant (buy hub hero card) */
.pcard.photo{padding:0}
.pcard.photo .cardphoto{border-radius:var(--r-lg) var(--r-lg) 0 0;overflow:hidden;max-height:240px}
.pcard.photo .cardphoto img{width:100%;height:100%;object-fit:cover}
.pcard.photo .pbody{padding:24px 28px 28px;display:flex;flex-direction:column}
.pr-note{font-family:"Montserrat",sans-serif;font-size:0.875rem;color:var(--grey);letter-spacing:0}
.pcard.star .pr-note{color:var(--azure)}

/* day-tab booking widget — the money buttons */
.resvbook{margin-bottom:36px}
.dayrail{display:flex;gap:10px;overflow-x:auto;padding:4px 2px 12px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.dayrail::-webkit-scrollbar{display:none}
.daytab{flex:none;min-width:76px;display:flex;flex-direction:column;align-items:center;gap:1px;padding:10px 15px 9px;border-radius:var(--r-md);cursor:pointer;font:inherit;
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.16);color:var(--ice);
  transition:transform .18s var(--ease),background .2s,border-color .2s,box-shadow .2s,color .2s}
.daytab:hover{transform:translateY(-2px);border-color:rgba(193,255,114,.55)}
.daytab .dt-dow,.daytab .dt-mon{font-family:"Bebas Neue";font-size:0.8125rem;letter-spacing:1.6px;color:var(--azure)}
.daytab .dt-num{font-family:"Anton";font-size:1.6rem;line-height:1.05}
.daytab.active{background:var(--lime);border-color:var(--lime);color:var(--forest);box-shadow:0 6px 28px rgba(193,255,114,.35);transform:translateY(-2px)}
.daytab.active .dt-dow,.daytab.active .dt-mon{color:var(--forest2)}
.slotgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;margin-top:4px}
/* Degrade by session count, not by breakpoint: a day with one session was leaving two thirds of the row empty on learn-to-skate, stick-puck and 2 of 3 groups on /reserve/. One session becomes a full-width row; two split the row. Phone widths keep the single-column stack the base rule already gives. */
@media(min-width:640px){
  .slotgrid[data-count="1"]{grid-template-columns:1fr}
  .slotgrid[data-count="1"] .slot{flex-direction:row;align-items:center;justify-content:space-between;gap:18px}
  .slotgrid[data-count="1"] .slot-cta{white-space:nowrap}
  .slotgrid[data-count="2"]{grid-template-columns:repeat(2,1fr)}
}
.slot{display:flex;flex-direction:column;gap:7px;align-items:flex-start;padding:16px 18px;border-radius:var(--r-md);
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.13);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:transform .18s var(--ease),border-color .2s,background .2s,box-shadow .2s}
.slot:hover{transform:translateY(-3px);border-color:rgba(193,255,114,.6);background:rgba(255,255,255,.09);box-shadow:0 14px 34px rgba(0,0,0,.28)}
.slot:active{transform:scale(.99)}
.slot-time{color:var(--ice);font-weight:700;font-size:1rem}
.slot-cta{font-family:"Bebas Neue";letter-spacing:1.2px;font-size:1rem;color:var(--lime)}
.slot:hover .slot-cta{letter-spacing:1.6px}
/* light-section variants */
section.alt .daytab,section.alt .slot,section:not(.night) .daytab,section:not(.night) .slot{}
section.alt .daytab{background:#fff;border-color:var(--line);color:var(--ink)}
section.alt .daytab .dt-dow,section.alt .daytab .dt-mon{color:var(--grey)}
section.alt .daytab .dt-num{color:var(--forest)}
section.alt .daytab.active{background:var(--lime);border-color:var(--lime);box-shadow:0 6px 24px rgba(25,58,30,.18)}
section.alt .daytab.active .dt-num{color:var(--forest)}
section.alt .slot{background:#fff;border-color:var(--line);backdrop-filter:none;box-shadow:var(--e1)}
section.alt .slot:hover{border-color:var(--forest2);box-shadow:var(--e3)}
section.alt .slot-time{color:var(--forest)}
section.alt .slot-cta{color:var(--forest2)}
/* chosen-session chip on checkout (arrives via /reserve day-tabs) */
.seschip{display:flex;align-items:center;gap:9px;margin:14px 0 2px;padding:10px 14px;border-radius:var(--r-md);
  background:rgba(193,255,114,.12);border:1px solid rgba(193,255,114,.45);color:var(--ice);font-weight:600;font-size:0.95rem}
.seschip .label{color:var(--lime);font-size:0.875rem;letter-spacing:1.5px;flex:none}

/* premium checkout: stepper + trust panel */
.steps{display:flex;gap:8px;list-style:none;margin:0 0 16px;padding:0}
.steps li{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;font-family:"Bebas Neue";letter-spacing:1.3px;font-size:0.95rem;color:var(--grey);padding:9px 8px;border-radius:var(--r-sm);background:var(--surface-2);border:1px solid var(--line);transition:background .25s,border-color .25s,color .25s}
.steps li .s-dot{width:22px;height:22px;border-radius:50%;background:#fff;border:1.5px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:0.8rem;color:var(--grey);flex:none;font-family:"Montserrat";font-weight:700;transition:background .25s,border-color .25s,color .25s}
.steps li.on{color:var(--forest);border-color:rgba(33,81,42,.32);background:#f1fbe6}
.steps li.on .s-dot{background:var(--lime);border-color:var(--lime);color:var(--forest)}
.pricetable .total td{border-top:1px dashed rgba(255,255,255,.28)}
.buyform .pricetable .total .num{color:var(--lime);text-shadow:0 0 12px rgba(193,255,114,.35)}
.barefs:has(#waiveragree:checked) .waiver{border-color:rgba(120,190,80,.65);box-shadow:0 0 0 3px rgba(193,255,114,.22)}
.buyform .check:has(input:checked){color:var(--forest2)}
.trustbox{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
@media(max-width:640px){.trustbox{grid-template-columns:1fr}}
.tb-item{display:flex;gap:10px;align-items:flex-start;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-md);padding:11px 12px}
.tb-item svg{flex:none;margin-top:2px;color:var(--forest2)}
.tb-item strong{display:block;font-size:0.875rem;color:var(--forest);line-height:1.3}
.tb-item span{font-size:0.875rem;color:var(--grey);line-height:1.45;display:block}
.paycta{display:flex;align-items:center;justify-content:center;gap:10px}

/* checkout premium pass 2: readable links on night, ticket receipt, focus rings */
.buysell a:not(.btn){color:var(--lime);text-decoration:underline;text-underline-offset:3px}
.buyphoto{border:1px solid rgba(255,255,255,.14)}
.receipt{background:linear-gradient(165deg,#255c30,#152f1b 72%);border:1px solid rgba(255,255,255,.16);border-radius:var(--r-md);padding:14px 18px 16px;box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 12px 32px rgba(10,26,14,.35)}
.buyform .rc-head{display:flex;align-items:center;justify-content:space-between;margin:0 0 2px}
.buyform .rc-head .label{color:var(--lime);font-size:0.95rem;letter-spacing:2.2px}
.buyform .rc-head svg{color:var(--azure);opacity:.85}
.receipt .pricetable{background:transparent;border-radius:0;padding:0;margin-top:0}
.receipt .pricetable td{padding:9px 2px;font-size:0.95rem;border-bottom:1px solid rgba(255,255,255,.1);color:var(--ice)}
.receipt .pricetable .total td{border-bottom:0;border-top:1px dashed rgba(255,255,255,.32);padding-top:12px}
.receipt .pricetable .total .num{font-size:1.6rem}
.buyform .rc-note{margin:9px 0 0;font-size:0.875rem;color:#cfe0d3;display:flex;gap:7px;align-items:center}
.buyform .rc-note svg{color:var(--lime);flex:none}
/* This used to sit AFTER the :focus-visible rule with equal specificity and win, leaving a 1.07:1 ring — effectively invisible. Keep the border cue only; the visible ring is owned by the :focus-visible rule above. */
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--forest2)}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:3px solid var(--forest2);outline-offset:1px;box-shadow:0 0 0 4px rgba(193,255,114,.6)}
.buyform .field input{padding:13px 14px;font-size:1rem}
.seschip.hide{display:none}
.buyform .rc-note{color:#c8dccc;margin-bottom:2px}
/* dark-surface elements inside the white checkout card must stay light — they lose to `section.night .buyform p{ink}` without these */
section.night .buyform p.rc-note{color:#c8dccc}
section.night .buyform p.rc-head .label{color:var(--lime)}
section.night .buyform p.seschip{color:var(--ice)}
section.night .buyform p.gate-err{color:#c22f2f}
/* the session chip sits on the WHITE card (pale lime tint) — dark text, stronger tint */
section.night .buyform p.seschip{color:var(--forest);background:rgba(193,255,114,.3);border-color:rgba(120,190,80,.75);font-weight:700}
section.night .buyform p.seschip .label{color:var(--forest2)}

/* ═══ cross-device pass: 320px reflow, 200% text, iOS zoom, light-panel labels ═══ */

/* A grid item's automatic minimum is min-content, so `1fr` refused to shrink below
   332px and the sell column ran 34px past a 320px screen (iPhone SE, Galaxy Fold
   cover, any phone at 200% zoom). minmax(0,…) lets it actually reflow. WCAG 1.4.10. */
.buycols{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
@media(max-width:880px){.buycols{grid-template-columns:minmax(0,1fr)}}

/* An email address and a bare domain are single unbreakable words. At 200% text
   (or iOS Dynamic Type / Android "largest") they forced the whole document 76px
   wide and the page scrolled sideways. WCAG 1.4.4. */
.fcontact a,footer .fine,.two-col,.narrow{overflow-wrap:anywhere}

/* .t-lime is for dark surfaces. On a white .panel it lands at 1.18:1 — invisible.
   Any light panel overrides it rather than trusting each page to pick the right class. */
.panel:not(.dark) .t-lime{color:var(--forest2)}

/* Safari needed the prefix until 18.0; without it the control loses its blur on
   every iPhone still on iOS 16/17. */
.vidbtn{-webkit-backdrop-filter:blur(8px)}

/* The /reserve/ notify form had no styles at all — a 149×19px browser-default box
   at 13px, which fails the 24px target minimum AND trips iOS focus-zoom (<16px).
   Mirrors the hero mail block; both sit on a dark section. */
.resvmail{max-width:460px}
.rm-lead{display:block;font-family:"Bebas Neue",sans-serif;letter-spacing:1.6px;
  text-transform:uppercase;color:var(--lime);font-size:1rem;margin-bottom:10px}
.rm-row{display:flex;gap:10px;flex-wrap:wrap}
.rm-row input{flex:1;min-width:210px;min-height:44px;padding:13px 18px;border-radius:40px;
  border:1.5px solid rgba(242,239,235,.35);background:rgba(10,18,16,.5);color:#F2EFEB;
  font-family:"Montserrat",sans-serif;font-size:1rem}
.rm-row input::placeholder{color:rgba(242,239,235,.62)}
.rm-row input:focus-visible{outline:3px solid var(--lime);outline-offset:2px;border-color:var(--lime)}
.rm-note{color:var(--azure);font-size:0.875rem;margin-top:10px}
.rm-ok{color:var(--lime);margin-top:10px}

/* The 3-step checkout indicator is a flex row of three fixed-content chips; at 320px
   the last one cleared the card edge by 3px. Tighten the chrome, not the labels. */
@media(max-width:340px){
  .steps{gap:5px}
  .steps li{padding:9px 4px;font-size:0.85rem;gap:5px}
  .steps li .s-dot{width:19px;height:19px;font-size:0.72rem}
}

/* ═══ phone polish: header offset, menu lock, consent legibility ═══ */

/* The header is fixed, so every anchor jump parked its target underneath it —
   including the skip link, whose whole job is to land you ON the content. */
html{scroll-padding-top:76px}

/* While the menu is open the page used to keep scrolling behind the panel. */
/* iOS Safari ignores overflow:hidden on body; position:fixed is the lock it honours. site.js
   stores/restores scrollY around the toggle. */
body.nav-open{overflow:hidden;position:fixed;width:100%;top:var(--lock-y,0)}

/* A consent checkbox is body copy, not a field label. Inside .field it was
   inheriting Bebas Neue + uppercase, which set the marketing and SMS opt-ins —
   the two that carry legal weight — in condensed caps. .buyform already
   overrode this one form at a time; this covers every form instead. */
.field .check{
  font-family:"Montserrat",sans-serif;text-transform:none;letter-spacing:0;
  font-size:0.95rem;font-weight:400;color:var(--ink);line-height:1.5;
}
.field .check strong{font-weight:700}
.field .check em{font-style:normal;color:var(--grey)}

/* On a phone the programs grid ran 5.7 screens — 41% of the homepage — and five of
   its nine cards are waitlist-only. Those five keep their title, price, description
   and sign-up link; they give up the photo, which is the part carrying the height.
   A photo now means "you can book this". Desktop keeps all nine photos. */
@media(max-width:760px){
  .card2[data-soon] .cardphoto{display:none}
  .card2[data-soon]{padding-top:20px}
  .card2[data-soon] .c2tt h3{font-size:1.15rem}
}

/* ═══ the waiver: the text people are actually agreeing to ═══ */
/* It was 15.2px — under the site's own 16px floor — inside a 320px porthole, so a
   316-word agreement was read six lines at a time. A waiver is defended on whether
   the signer had a fair chance to read it, so it gets body size and a real window. */
.waiver{
  font-size:1rem;
  line-height:1.7;
  color:#2f3a33;
  max-height:min(48vh,420px);
  overscroll-behavior:contain;
  /* Scroll shadows via background-attachment:local — the top and bottom fades appear
     only when there is more text that way, so "there is more to read" is visible
     without a script. */
  background:
    linear-gradient(var(--surface-2,#f4f7f3) 30%, rgba(244,247,243,0)) top / 100% 26px local no-repeat,
    linear-gradient(rgba(244,247,243,0), var(--surface-2,#f4f7f3) 70%) bottom / 100% 26px local no-repeat,
    radial-gradient(farthest-side at 50% 0, rgba(24,40,28,.16), rgba(24,40,28,0)) top / 100% 11px scroll no-repeat,
    radial-gradient(farthest-side at 50% 100%, rgba(24,40,28,.16), rgba(24,40,28,0)) bottom / 100% 11px scroll no-repeat,
    var(--surface-2,#f4f7f3);
}
.buyform .waiver{color:#2f3a33}
@media(max-width:760px){
  /* On a phone the window is the whole point — give it room and keep the agree box
     directly under it so the two never separate across a scroll. */
  .waiver{max-height:52vh;padding:16px}
  .barefs .check{margin-top:12px}
}

/* The buy bar holds back while the hero's own CTA is still on screen — otherwise the
   phone shows four buttons for two intentions. Pages with no hero CTA are unaffected
   and the bar behaves as before. */
@media(max-width:760px){
  .buybar:not(.bar-ready){transform:translateY(110%);pointer-events:none}
  .buybar{transition:transform .28s var(--ease,ease)}
}
@media(max-width:760px) and (prefers-reduced-motion:reduce){
  .buybar{transition:none}
}
/* The required mark was a third flex item, so it broke out of the sentence and
   floated at the far right of the row. It belongs at the end of the words. */
.check .req{color:#a8321f;font-weight:700;margin-left:2px}

/* ═══ responsive images ═══ */
/* Page headers are CSS backgrounds, so srcset cannot reach them. Each page now also
   declares --ph-sm (640w) and --ph-md (960w) beside --ph, and the phone and tablet
   bands pick the right one. The 1600w original is still what desktop paints, so the
   large screens are unchanged. Falls back to --ph if a variant is ever missing. */
@media(max-width:760px){
  .pagehead::before{
    background-image:linear-gradient(180deg,rgba(10,20,13,.80),rgba(12,24,15,.80)),var(--ph-sm,var(--ph,none));
  }
}
@media(min-width:761px) and (max-width:1200px){
  .pagehead::before{
    background-image:linear-gradient(180deg,rgba(10,20,13,.80),rgba(12,24,15,.80)),var(--ph-md,var(--ph,none));
  }
}
/* The closer band reuses a full-size photo; on a phone it takes the 640 like the
   page headers do, so a page never pulls two sizes of the same image. */
@media(max-width:760px){
  .closer{background:linear-gradient(0deg,rgba(15,30,18,.92),rgba(15,30,18,.55)),var(--closer-sm,var(--closer,url(/assets/img/closer-dusk-640.webp) center/cover));background-size:cover}
}

/* ═══ header lockup: the team mark and the rink mark, together ═══ */
/* Sasquatch is the team; James Sewell is the rink it plays in. Both belong at the top,
   not only in the footer. Neither may shrink — a squashed logo is worse than a small one. */
.brand img{flex:none;width:auto}
.brand .bl-js{height:46px}
@media(min-width:761px){
  .brand .bl-sq{height:54px}
  .brand .bl-js{height:50px}
}
@media(max-width:760px){
  .brand{gap:10px}
  .brand .bl-sq{height:46px}
  .brand .bl-js{height:44px}
  /* The second line now names the team and the town, so it earns its place on a
     phone rather than being cut. Kept on one line by tightening it, not by hiding it. */
  .brand .bt{font-size:0.95rem;line-height:1.15}
  .brand .bt small{font-size:0.66rem;letter-spacing:0.6px;white-space:nowrap}
}
/* Only the genuinely narrow phones need the marks to give ground. At 360-430 there is
   room to spare, so the rink crest stays large enough to read as a crest. */
@media(max-width:340px){
  .brand{gap:7px}
  .brand .bl-sq{height:38px}
  .brand .bl-js{height:36px}
  .brand .bt{font-size:0.8rem}
  /* Below ~340px the town line is what has to give — the rink name and the two
     marks carry the identity on their own. */
  .brand .bt small{display:none}
}

/* ═══ light cards inside a night section ═══ */
/* `section.night h2` and `section.night p` are (0,1,2); `.pcard h2` and `.pcard p` are
   (0,1,1), so a WHITE card dropped into a dark section inherited the dark section's
   near-white type and rendered at 1.05:1 — invisible. Same trap the checkout card hit
  . Scoped to the card so the surrounding night copy is untouched. */
section.night .pcard h2,
section.night .pcard h3,
section.night .pcard h4,
section.night .card2 h2,
section.night .card2 h3{color:var(--forest)}
section.night .pcard p,
section.night .card2 p{color:var(--grey)}
section.night .pcard .pr,
section.night .pcard .ic.num{color:var(--forest2)}
/* 341-400px (most Android handsets, iPhone mini/SE2) sat 9px over budget with the
   town line in. Rather than drop the line there, the marks and the line each give a
   little. Below 341px the line still goes — see the rule above. */
@media(min-width:341px) and (max-width:400px){
  .brand{gap:8px}
  .brand .bl-sq{height:42px}
  .brand .bl-js{height:40px}
  .brand .bt{font-size:0.88rem}
  .brand .bt small{font-size:0.6rem;letter-spacing:0.4px}
}
/* The subtitle must never wrap: a second line doubles the fixed header's height and
   pushes every page down behind it. Measured 132px at 960px before this. */
.brand .bt small{white-space:nowrap}
/* 761-1023px shows the FULL nav next to the full brand, and the two genuinely do not
   both fit. The town line stands down through that band; the rink name stays. */
@media(min-width:901px) and (max-width:1023px){
  .brand .bt small{display:none}
}
/* Between the hamburger breakpoint and 1023px the full nav sits beside the full brand,
   and the second logo pushed the link row over the edge — the links wrapped to a
   second line and the fixed header went to 132px. The marks and the link spacing give
   a little through that band instead of a logo being dropped. */
@media(min-width:901px) and (max-width:1023px){
  .brand{gap:9px}
  .brand .bl-sq{height:44px}
  .brand .bl-js{height:40px}
  .navlinks{gap:14px}
}
/* A start month sits beside the price without competing with it. */
.c2pr .c2when{font-size:0.8em;opacity:.85;font-family:"Montserrat",sans-serif;letter-spacing:0}
/* Parties are quoted per booking, so the starting figure is a footnote to the card,
   not its headline the way a fixed session price is. */
.c2pr.c2pr-fine{font-family:"Montserrat",sans-serif;font-size:0.85rem;letter-spacing:0;
  font-weight:500;color:var(--grey);opacity:.95}
/* the hero footer label collided with the CTA area on phones; decorative, so hide it there */
@media (max-width:560px){.skatehint{display:none}}

/* ── Candy-gloss pill buttons ──────────────
   Volume from a radial highlight bubble on top, a saturated lime body, a deep rolled base and a
   real drop shadow; sinks on press. Text stays deep forest on lime / ice on dark, no outline. */
.btn{position:relative;isolation:isolate;border:0;color:#173a1e;text-shadow:0 1px 0 rgba(255,255,255,.35);
  background:radial-gradient(120% 90% at 50% 0%,#f3ffd1 0%,#d2ff86 32%,#bdf860 58%,#9adf3f 100%);
  box-shadow:0 2px 0 #fff inset,0 -6px 10px rgba(70,130,20,.35) inset,0 8px 0 #79b53a,0 14px 26px rgba(0,0,0,.45);
  transition:transform .15s ease,box-shadow .15s ease}
.btn::before{content:"";position:absolute;left:12%;right:12%;top:8%;height:38%;border-radius:999px;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.75),rgba(255,255,255,0));z-index:-1}
.btn:hover{transform:translateY(-1px);box-shadow:0 2px 0 #fff inset,0 -6px 10px rgba(70,130,20,.35) inset,0 9px 0 #79b53a,0 18px 30px rgba(0,0,0,.5)}
.btn:active{transform:translateY(5px) scale(.985);box-shadow:0 2px 0 #fff inset,0 -4px 8px rgba(70,130,20,.3) inset,0 3px 0 #79b53a,0 6px 12px rgba(0,0,0,.35)}
.btn.dark,.btn.ghost:hover,.btn.outline:hover{color:#eef6ee;text-shadow:0 1px 0 rgba(0,0,0,.35);
  background:radial-gradient(120% 90% at 50% 0%,#3f7a48 0%,#255c31 40%,#173a1e 100%);
  box-shadow:0 2px 0 rgba(255,255,255,.25) inset,0 -6px 10px rgba(0,0,0,.45) inset,0 8px 0 #0b1f10,0 14px 26px rgba(0,0,0,.5)}
.btn.dark::before,.btn.outline::before,.btn.ghost::before{background:linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,0))}
.btn.dark:active{transform:translateY(5px) scale(.985);box-shadow:0 2px 0 rgba(255,255,255,.2) inset,0 3px 0 #0b1f10,0 6px 12px rgba(0,0,0,.4)}
.btn.outline{color:#eef6ee;text-shadow:0 1px 0 rgba(0,0,0,.35);border:2px solid rgba(255,255,255,.55);
  background:radial-gradient(120% 90% at 50% 0%,rgba(255,255,255,.28) 0%,rgba(255,255,255,.12) 40%,rgba(0,0,0,.25) 100%);
  box-shadow:0 2px 0 rgba(255,255,255,.3) inset,0 -6px 10px rgba(0,0,0,.35) inset,0 7px 0 rgba(0,0,0,.45),0 14px 26px rgba(0,0,0,.45)}
.btn.outline:active{transform:translateY(5px) scale(.985);box-shadow:0 2px 0 rgba(255,255,255,.25) inset,0 2px 0 rgba(0,0,0,.4),0 6px 12px rgba(0,0,0,.35)}
.btn.ghost{color:#173a1e;text-shadow:none;border:2px solid #cfe0cf;
  background:radial-gradient(120% 90% at 50% 0%,#ffffff 0%,#f4f9f4 50%,#e2ede2 100%);
  box-shadow:0 2px 0 #fff inset,0 -5px 8px rgba(0,0,0,.08) inset,0 6px 0 #c3d3c3,0 12px 22px rgba(25,58,30,.18)}
.btn.ghost:active{transform:translateY(5px) scale(.985);box-shadow:0 2px 0 #fff inset,0 2px 0 #c3d3c3,0 5px 10px rgba(25,58,30,.15)}
.btn.sm,.btn.nav-cta{box-shadow:0 1px 0 #fff inset,0 -4px 7px rgba(70,130,20,.3) inset,0 5px 0 #79b53a,0 10px 18px rgba(0,0,0,.4)}
.btn.sm:active,.btn.nav-cta:active{transform:translateY(3px) scale(.985);box-shadow:0 1px 0 #fff inset,0 2px 0 #79b53a,0 4px 8px rgba(0,0,0,.3)}
/* Small DARK pills (program cards) keep the dark candy base — the lime base above must not bleed under them */
.btn.dark.sm{box-shadow:0 1px 0 rgba(255,255,255,.22) inset,0 -4px 7px rgba(0,0,0,.4) inset,0 5px 0 #0b1f10,0 10px 18px rgba(0,0,0,.45)}
.btn.dark.sm:active{transform:translateY(3px) scale(.985);box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 2px 0 #0b1f10,0 4px 8px rgba(0,0,0,.35)}
.btn.ghost.sm{box-shadow:0 1px 0 #fff inset,0 -4px 7px rgba(0,0,0,.08) inset,0 5px 0 #c3d3c3,0 10px 18px rgba(25,58,30,.16)}
@media (hover:none){.btn:hover,.btn.dark:hover{transform:none}}
/* the sticky bar's "Plan a Visit" was ice text on the near-white ghost candy → unreadable.
   In the bar it is the DARK candy pill (ice text on deep green), matching the bar's dark glass. */
@media (max-width:880px){
  .buybar .btn.ghost{color:#eef6ee;text-shadow:0 1px 0 rgba(0,0,0,.35);border:2px solid rgba(255,255,255,.28);
    background:radial-gradient(120% 90% at 50% 0%,#3f7a48 0%,#255c31 40%,#173a1e 100%);
    box-shadow:0 2px 0 rgba(255,255,255,.25) inset,0 -6px 10px rgba(0,0,0,.45) inset,0 6px 0 #0b1f10,0 12px 22px rgba(0,0,0,.5)}
  .buybar .btn.ghost::before{background:linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,0))}
  .buybar .btn.ghost:active{transform:translateY(4px) scale(.985);box-shadow:0 2px 0 rgba(255,255,255,.2) inset,0 2px 0 #0b1f10,0 5px 10px rgba(0,0,0,.4)}
}

/* ── grand-opening celebration chips (home #early-signup) ── */
.gochips{list-style:none;display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:20px auto 0;padding:0;max-width:660px}
.gochip{font-family:"Bebas Neue",sans-serif;letter-spacing:1.5px;font-size:1.05rem;color:var(--forest);background:#fff;border:2px solid var(--lime);border-radius:40px;padding:8px 18px;box-shadow:0 4px 14px rgba(28,33,32,.07);animation:chipin .5s var(--ease-slow) both}
.gochip:nth-child(2){animation-delay:.08s}.gochip:nth-child(3){animation-delay:.16s}.gochip:nth-child(4){animation-delay:.24s}.gochip:nth-child(5){animation-delay:.32s}
@keyframes chipin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.gochip{animation:none}}
@media (max-width:520px){.gochip{font-size:.95rem;padding:7px 14px}.gochips{gap:8px}}

/* ── grand-opening invite band (home #early-signup) ──
   Photo band under a scrim; the white formcard reads as the lit ticket window.
   Scrim is strongest top and bottom — the headline sits on the image's calm sky,
   chips sit over the mid-frame where string lights get bright. */
section.night.go-invite{background:linear-gradient(180deg,rgba(7,15,10,.82) 0%,rgba(9,19,12,.38) 45%,rgba(7,15,10,.78) 100%),url(/assets/img/go-invite.webp);background-size:cover;background-position:center 32%;padding-top:clamp(64px,8vw,100px);padding-bottom:clamp(64px,8vw,100px)}
/* .stitle's own colours (forest/grey) beat `section.night h2/p` on specificity —
   general night fix, not a per-page patch */
section.night .stitle .label{color:var(--lime)}
section.night .stitle h2{color:var(--ice)}
section.night .stitle p{color:var(--azure)}
.go-invite .stitle{margin-bottom:36px}
.go-invite .stitle h2{font-size:clamp(2rem,6vw,3.2rem);text-shadow:0 2px 26px rgba(0,0,0,.5)}
.go-invite .stitle h2 .go-accent{color:var(--lime)}
.go-invite .stitle p{max-width:640px;text-shadow:0 1px 14px rgba(0,0,0,.55)}
section.night .gochip{display:inline-flex;align-items:center;gap:8px;color:var(--ice);background:rgba(8,18,11,.62);border-color:rgba(193,255,114,.5);box-shadow:0 10px 26px rgba(0,0,0,.35)}
.gochip svg{width:16px;height:16px;flex:none;stroke:var(--lime)}
/* white formcards inside night bands: the card resets the band's ice text — without
   this, input text and checkbox copy inherit near-white-on-white;
   `section.night p` (azure) also bleeds onto the white card, so notes go back to grey */
.formcard{color:var(--ink)}
section.night .formcard p{color:var(--grey)}
section.night .formcard{box-shadow:0 30px 80px rgba(0,0,0,.55)}

/* ── the sheet itself — paper depth, embossed header,
   numbered sections. Applies to every formcard; .sheetsec rows are opt-in markup. */
.formcard{background:linear-gradient(180deg,#ffffff 0%,#fbfdf9 55%,#f3f8f0 100%)}
.formcard[data-label]::before{text-shadow:0 1px 0 rgba(0,0,0,.45);
  box-shadow:0 1px 0 rgba(255,255,255,.16) inset,0 -12px 20px rgba(0,0,0,.28) inset}
.field input,.field select,.field textarea{box-shadow:inset 0 2px 4px rgba(16,32,20,.07)}
.sheetsec,.formcard p.sheetsec,section.night .formcard p.sheetsec{display:flex;align-items:center;gap:10px;
  font-family:"Bebas Neue",sans-serif;letter-spacing:2px;text-transform:uppercase;
  color:var(--forest2);font-size:1.05rem;font-style:normal;margin:26px 0 14px;
  padding-bottom:8px;border-bottom:2px solid var(--line)}
.formcard form>.sheetsec:first-child{margin-top:0}
.sheetsec .snum{width:26px;height:26px;border-radius:50%;flex:none;
  background:radial-gradient(120% 90% at 50% 0%,#3f7a48 0%,#255c31 40%,#173a1e 100%);
  color:var(--lime);display:inline-flex;align-items:center;justify-content:center;
  font-size:.95rem;box-shadow:0 3px 0 #0b1f10,0 6px 12px rgba(16,32,20,.3)}
/* long card labels wrap on phones and collide with the light string — keep them one line */
@media (max-width:560px){.formcard[data-label]::before{font-size:1rem;letter-spacing:1.5px;padding:16px 22px 22px}}

/* fine-print tax line under the home price strip — quiet, centered, hairline above */
.taxnote{text-align:center;font-size:var(--fs-2xs);letter-spacing:.04em;opacity:.72;
  margin:18px auto 0;padding-top:12px;max-width:420px;border-top:1px solid rgba(255,255,255,.14)}

/* ── sasquatch page veil: quick branded loading flash between nav tabs ── */
.pageveil{position:fixed;inset:0;z-index:12000;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(120% 90% at 50% 40%,#1d4526 0%,#0f2613 55%,#081108 100%);
  opacity:0;pointer-events:none;transition:opacity .16s ease}
.pageveil.on{opacity:1;pointer-events:auto}
.pageveil img{width:132px;height:auto;position:relative;z-index:1;
  filter:drop-shadow(0 12px 30px rgba(0,0,0,.6));animation:pv-pop 1.2s ease-in-out infinite}
/* "The Pulse": sonar rings ripple out from the badge */
.pageveil .pv-rip{position:absolute;inset:0;margin:auto;width:150px;height:150px;border-radius:50%;
  border:2.5px solid var(--lime);opacity:0;animation:pv-rip 1.2s ease-out infinite}
.pageveil .pv-rip2{animation-delay:.4s}
@keyframes pv-rip{0%{transform:scale(.9);opacity:.75}100%{transform:scale(2.15);opacity:0}}
@keyframes pv-pop{0%,100%{transform:scale(1)}30%{transform:scale(1.09)}55%{transform:scale(1)}}
@media (max-width:700px){section.night.go-invite{background-image:linear-gradient(180deg,rgba(7,15,10,.84) 0%,rgba(9,19,12,.42) 45%,rgba(7,15,10,.8) 100%),url(/assets/img/go-invite-640.webp);background-position:center 40%}}

/* desktop header: the home hero carries the full-size seal, so the small
   James Sewell mark rides phone-only */
@media(min-width:901px){header .brand .bl-js{display:none}}

/* seven row tabs + CTA: tighten the row below 1200px so it never wraps into a
   double-height header */
@media(min-width:901px) and (max-width:1199px){
  .navlinks{gap:10px}
  .navlinks a{font-size:0.8rem;letter-spacing:.2px}
  .brand .bt small{display:none}
}
/* narrowest desktop band: the badge carries the brand alone */
@media(min-width:901px) and (max-width:1020px){.brand .bt{display:none}}