/* ============================================================
   ESSENCE SPORTS
   ============================================================
   Cameron's own logo, blue and lime. The palette is lifted from
   the v1 build, not re-picked by eye, so the site matches the
   wordmark and anything else already in his hands.

   v3 (30 Sep 2026) restructure, from Roy Edwards' review:
     - a bigger logo with Cameron's own strapline
     - clear page categories (Home, camps, clubs, schools, team,
       gallery, FAQs, safeguarding, jobs, contact) instead of
       homepage anchors that landed in the wrong place
     - a shorter homepage that explains the business up top
     - forms instead of a published phone number
     - a proper footer with privacy and contact pages
   ============================================================ */
@font-face{font-family:'Baloo 2';font-style:normal;font-weight:500 800;font-display:swap;
  src:url(/assets/fonts/baloo2-latin.woff2) format('woff2')}
@font-face{font-family:'Nunito';font-style:normal;font-weight:400 800;font-display:swap;
  src:url(/assets/fonts/nunito-latin.woff2) format('woff2')}

/* Width-matched stand-ins, used only for the moment before Baloo 2 and Nunito
   arrive. Without them the hero is laid out in the system font, re-wraps when
   the real fonts land, and the page jumps (live CLS 0.22 on desktop, 8 Oct 2026).
   Measured with canvas on the hero headline and paragraph. */
@font-face{font-family:'Baloo 2 Fallback';font-weight:500 800;src:local('Arial Bold'),local('Arial-BoldMT'),local('Arial');size-adjust:93.8%}
@font-face{font-family:'Nunito Fallback';font-weight:400;src:local('Arial'),local('ArialMT');size-adjust:101.3%}
@font-face{font-family:'Nunito Fallback';font-weight:600 800;src:local('Arial Bold'),local('Arial-BoldMT');size-adjust:96.7%}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --blue:#0e6bff;
  --blue-dk:#0a4fce;
  --lime:#c9e23f;
  --lime-dk:#aac71f;
  --ink:#14213a;
  --muted:#5b6b86;
  --paper:#ffffff;
  --wash:#f2f6ff;
  --coral:#ff6b5c;
  --purple:#8b5cf6;
  --sun:#ffb020;
  --line:rgba(20,33,58,.10);
  --radius:22px;
  --shadow:0 24px 60px -22px rgba(14,107,255,.35);
  --shadow-sm:0 10px 26px -14px rgba(20,33,58,.28);
  --display:'Baloo 2','Baloo 2 Fallback',system-ui,sans-serif;
  --body:'Nunito','Nunito Fallback',system-ui,-apple-system,sans-serif;
  --wrap:1180px;
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --ease:cubic-bezier(.16,1,.3,1);
  --nav-h:56px;
}

html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--nav-h) + 1rem)}
body{background:var(--paper);color:var(--ink);font:17px/1.65 var(--body);
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{width:min(var(--wrap),100% - 2.5rem);margin-inline:auto}
.num{font-variant-numeric:tabular-nums}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- scroll reveal ----------
   Content is only hidden once JS has confirmed it can reveal it again
   (html.js is set by an inline script in <head>; main.js adds .in).
   With no JS, reduced motion, or a script that fails, nothing is hidden. */
.js .rv:not(.in){opacity:0;transform:translateY(22px)}
.js .rv{transition:opacity .6s var(--ease),transform .6s var(--ease)}
@media (prefers-reduced-motion:reduce){
  .js .rv:not(.in){opacity:1;transform:none}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;
    animation-iteration-count:1!important;scroll-behavior:auto!important}
}

/* ============================================================
   HEADER
   ============================================================
   Two rows on a wide screen: the brand row (big logo, strapline,
   the two things people come to do) scrolls away, and the category
   bar under it sticks. On a phone it is one sticky row with a Menu
   button, and the category bar becomes the menu panel.
   ============================================================ */
.top{background:var(--paper);padding:calc(.9rem + var(--safe-t)) 0 .9rem}
.top-in{display:flex;align-items:center;gap:1.2rem}
.brand{display:flex;align-items:center;gap:1rem;text-decoration:none;min-height:44px}
.brand img{height:64px;width:auto}
.strap{font-family:var(--display);font-weight:700;font-size:1.02rem;line-height:1.15;
  color:var(--ink);border-left:3px solid var(--lime);padding-left:.9rem}
.strap small{display:block;font-family:var(--body);font-weight:700;font-size:.8rem;
  color:var(--muted);letter-spacing:.01em;margin-top:.2rem}
.top-cta{margin-left:auto;display:flex;gap:.6rem;align-items:center}
.pill{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;min-height:46px;
  padding:.55rem 1.2rem;border-radius:999px;text-decoration:none;font-weight:800;
  font-size:.95rem;white-space:nowrap}
.pill svg{flex:0 0 auto}
.pill-blue{background:var(--blue);color:#fff;box-shadow:var(--shadow-sm)}
.pill-lime{background:var(--lime);color:var(--ink)}
.menu-btn{display:none;align-items:center;gap:.55rem;min-height:44px;margin-left:auto;
  padding:.45rem 1rem .45rem .85rem;border:1px solid var(--line);border-radius:999px;
  background:#fff;color:var(--ink);font:inherit;font-weight:800;font-size:.95rem;cursor:pointer}
.menu-btn .bars{position:relative;display:inline-block;width:18px;height:12px}
.menu-btn .bars::before,.menu-btn .bars::after,.menu-btn .bars i{content:"";position:absolute;
  left:0;right:0;height:2px;border-radius:2px;background:currentColor;
  transition:transform .22s,opacity .22s,top .22s}
.menu-btn .bars::before{top:0}
.menu-btn .bars i{top:5px}
.menu-btn .bars::after{top:10px}
.menu-open .menu-btn .bars::before{top:5px;transform:rotate(45deg)}
.menu-open .menu-btn .bars i{opacity:0}
.menu-open .menu-btn .bars::after{top:5px;transform:rotate(-45deg)}

.navbar{position:sticky;top:0;z-index:60;background:var(--ink);color:#fff}
.navbar .wrap{display:flex;align-items:center;min-height:var(--nav-h)}
.navbar nav{display:flex;align-items:center;gap:.2rem;width:100%}
.navbar nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 .72rem;
  border-radius:10px;text-decoration:none;font-weight:700;font-size:.93rem;
  color:rgba(255,255,255,.86);white-space:nowrap;transition:background .15s,color .15s}
.navbar nav a:hover{color:#fff;background:rgba(255,255,255,.08)}
.navbar nav a[aria-current="page"]{color:var(--ink);background:var(--lime)}
.navbar nav .nav-contact{margin-left:auto;border:2px solid rgba(255,255,255,.35);border-radius:999px;
  color:#fff;padding:0 1.05rem}
.navbar nav .nav-contact[aria-current="page"]{border-color:var(--lime)}
.navbar nav .m-only{display:none}
.nav-scrim{position:fixed;inset:0;z-index:55;background:rgba(20,33,58,.45)}
/* Lock the page behind the open menu by BODY, not html. body has
   overflow-x:hidden; putting overflow on html stops body's overflow passing
   up to the viewport, body becomes its own scroller, and the sticky header
   (with the Close button in it) scrolls away the moment the menu opens. */
html.menu-open body{overflow:hidden}

@media(max-width:1079px){
  :root{--nav-h:0px}
  .top{position:sticky;top:0;z-index:70;border-bottom:1px solid var(--line);
    padding:calc(.55rem + var(--safe-t)) 0 .55rem}
  html{scroll-padding-top:5.5rem}
  .brand img{height:48px}
  .top-cta{display:none}
  .menu-btn{display:inline-flex}
  .navbar{position:fixed;left:0;right:0;top:var(--top-h,70px);bottom:0;z-index:65;
    background:#fff;color:var(--ink);display:none;overflow-y:auto;overscroll-behavior:contain;
    box-shadow:0 18px 40px -18px rgba(20,33,58,.35)}
  .menu-open .navbar{display:block}
  .navbar .wrap{display:block;padding:.3rem 0 calc(1.4rem + var(--safe-b))}
  .navbar nav{flex-direction:column;align-items:stretch;gap:0}
  .navbar nav a{min-height:54px;font-size:1.08rem;color:var(--ink);border-radius:0;
    border-bottom:1px solid var(--line);padding:0 .2rem}
  .navbar nav a:hover{background:none;color:var(--blue)}
  .navbar nav a[aria-current="page"]{background:none;color:var(--blue)}
  .navbar nav .nav-contact{margin:0;border:0;border-bottom:1px solid var(--line);border-radius:0;
    color:var(--ink);padding:0 .2rem}
  .navbar nav .m-only{display:flex}
  .navbar nav .m-row{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-top:1.1rem;border:0}
  .navbar nav .m-row a{justify-content:center;border:0;border-radius:999px;min-height:52px;font-weight:800}
  .navbar nav .m-row .pill-blue{color:#fff}
  .navbar nav .m-row .pill-lime{color:var(--ink)}
}
@media(max-width:600px){
  .strap{font-size:.86rem;padding-left:.7rem}
  .strap small{display:none}
  .brand{gap:.7rem}
  .brand img{height:42px}
}
@media(max-width:380px){ .strap{display:none} }
/* No JavaScript: the Menu button can't open anything, so the category bar
   is shown as a plain wrapped list instead. Lives in each page's <noscript>. */

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:54px;
  padding:.9rem 1.7rem;border-radius:999px;text-decoration:none;font-weight:800;border:0;cursor:pointer;
  font-size:1.02rem;transition:transform .14s var(--ease),background .15s;font-family:var(--body);
  max-width:100%;overflow-wrap:anywhere;text-align:center}
.btn:active{transform:scale(.97)}
.btn-pri{background:var(--blue);color:#fff;box-shadow:var(--shadow)}
.btn-pri:hover{background:var(--blue-dk)}
.btn-lime{background:var(--lime);color:var(--ink)}
.btn-lime:hover{background:var(--lime-dk)}
.btn-ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--line)}
.btn-ghost:hover{box-shadow:inset 0 0 0 2px var(--blue);color:var(--blue)}
.cta-row{display:flex;gap:.7rem;flex-wrap:wrap}
.link-arrow{display:inline-flex;align-items:center;gap:.4rem;min-height:44px;font-weight:800;
  color:var(--blue);text-decoration:none}
.link-arrow::after{content:'→';transition:transform .15s}
.link-arrow:hover::after{transform:translateX(3px)}

/* ============================================================
   HOME HERO — what Essence is, then the next camp, then the photos
   ============================================================ */
.hero{padding:clamp(2rem,5vw,3.8rem) 0 clamp(2.4rem,5vw,3.6rem);
  background:linear-gradient(180deg,var(--wash),var(--paper))}
.eyebrow{display:inline-flex;align-items:center;gap:.5rem;background:var(--lime);
  color:var(--ink);font-weight:800;font-size:.82rem;letter-spacing:.04em;text-decoration:none;
  text-transform:uppercase;padding:.45rem .9rem;border-radius:999px;margin-bottom:1.1rem;line-height:1.35}
a.eyebrow{min-height:44px}
a.eyebrow:hover{background:var(--lime-dk)}
.hero h1{font-family:var(--display);font-weight:800;letter-spacing:-.01em;line-height:1.02;
  font-size:clamp(2.35rem,5.6vw,4.3rem);max-width:17ch;margin-bottom:1rem}
.hero h1 em{font-style:normal;color:var(--blue)}
.hero .lede{font-size:clamp(1.04rem,1.7vw,1.2rem);max-width:52ch;color:var(--muted);margin-bottom:1.3rem}
.hero .lede b{color:var(--ink);font-weight:800}
.proof{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.6rem;list-style:none}
.proof li{display:inline-flex;align-items:center;gap:.45rem;background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:.38rem .85rem .38rem .45rem;font-weight:700;font-size:.9rem}
.proof li i{width:22px;height:22px;border-radius:50%;background:var(--lime);display:grid;place-items:center}
.why{margin-top:1rem;color:var(--muted);font-size:.95rem;max-width:52ch}
.why b{color:var(--ink)}

.hero-grid{display:grid;gap:2rem}
@media(min-width:960px){
  .hero-grid{grid-template-columns:1.08fr .92fr;align-items:center;gap:3rem}
}

/* photo carousel in the hero */
.reel{position:relative;aspect-ratio:1/1;border-radius:28px;overflow:hidden;background:var(--ink);
  box-shadow:0 30px 70px -30px rgba(14,107,255,.55)}
.reel figure{position:absolute;inset:0;margin:0;opacity:0;transition:opacity 1s ease}
.reel figure.on{opacity:1}
.reel img{width:100%;height:100%;object-fit:cover}
.reel figure.top img{object-position:50% 15%}
.reel::after{content:"";position:absolute;left:0;right:0;bottom:0;height:45%;z-index:1;pointer-events:none;
  background:linear-gradient(0deg,rgba(10,16,32,.72),rgba(10,16,32,0))}
.reel-bar{position:absolute;z-index:2;left:1rem;right:1rem;bottom:1rem;display:flex;align-items:flex-end;
  gap:.7rem;flex-wrap:wrap}
.reel-film{display:inline-flex;align-items:center;gap:.55rem;min-height:48px;padding:.6rem 1.1rem .6rem .7rem;
  border-radius:999px;background:var(--lime);color:var(--ink);font-weight:800;font-size:.95rem;
  text-decoration:none;border:0;cursor:pointer;font-family:var(--body)}
.reel-film span{width:30px;height:30px;border-radius:50%;background:var(--ink);color:var(--lime);
  display:grid;place-items:center}
.reel-cap{color:#fff;font-size:.85rem;font-weight:700;text-shadow:0 1px 6px rgba(0,0,0,.6);
  margin-right:auto;flex-basis:100%}
.reel-dots{display:flex;gap:.1rem;margin-left:auto}
.reel-dots button{width:30px;height:44px;border:0;background:none;cursor:pointer;display:grid;place-items:center}
.reel-dots button::before{content:"";width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.5)}
.reel-dots button[aria-current="true"]::before{background:#fff;transform:scale(1.25)}
.reel-toggle{width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center;
  background:rgba(10,16,32,.58);color:#fff}
.reel-toggle .i-play,.reel.paused .reel-toggle .i-pause{display:none}
.reel.paused .reel-toggle .i-play{display:block}
.reel button:focus-visible{outline:3px solid #fff;outline-offset:2px}
html:not(.js) .reel-dots,html:not(.js) .reel-toggle{display:none}
@media(max-width:959px){ .reel{aspect-ratio:4/3} }

/* ---------- the next camp, spelled out ---------- */
.nextcamp{display:grid;gap:1.4rem;background:#fff;border:1px solid var(--line);border-radius:28px;
  box-shadow:var(--shadow);padding:clamp(1.4rem,3.4vw,2.4rem);position:relative;overflow:hidden}
.nextcamp::before{content:"";position:absolute;left:0;top:0;bottom:0;width:8px;background:var(--lime)}
@media(min-width:900px){ .nextcamp{grid-template-columns:1.15fr .85fr;align-items:center;gap:2.4rem} }
/* On a phone the list above already gives the times; the card would just repeat them. */
@media(max-width:899px){ .nextcamp [data-nc="timescard"]{display:none} }
.nextcamp h2{font-family:var(--display);font-weight:800;line-height:1.05;font-size:clamp(1.8rem,4vw,2.6rem);margin-bottom:.4rem}
.nextcamp h2 em{font-style:normal;color:var(--blue)}
.nextcamp .sub{color:var(--muted);margin-bottom:1.1rem}
.facts-list{display:grid;gap:.1rem;margin-bottom:1.4rem}
.facts-list div{display:grid;grid-template-columns:6.2rem 1fr;gap:.8rem;padding:.6rem 0;border-bottom:1px solid var(--line)}
.facts-list div:last-child{border-bottom:0}
.facts-list dt{font-weight:800;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--blue);padding-top:.2rem}
.facts-list dd{font-weight:700}
.facts-list dd span{display:block;font-weight:600;color:var(--muted);font-size:.93rem}
.also{margin-top:1rem;font-size:.93rem;color:var(--muted)}

/* times card — confirmed opening times only */
.times{background:var(--paper);border-radius:var(--radius);box-shadow:var(--shadow-sm);
  overflow:hidden;border:1px solid var(--line)}
.times-hd{background:var(--blue);color:#fff;padding:1rem 1.3rem;
  display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap}
.times-hd b{font-family:var(--display);font-size:1.1rem;font-weight:700}
.times-hd span{font-size:.85rem;color:#fff}
.trow{display:grid;grid-template-columns:auto 1fr auto;gap:1rem;align-items:center;
  padding:.9rem 1.3rem;border-bottom:1px solid var(--line)}
.trow:last-child{border-bottom:0}
.trow .t{font-weight:800;font-size:1rem;white-space:nowrap;color:var(--blue)}
.trow .l{font-weight:600}
.trow .n{font-size:.8rem;color:var(--muted);text-align:right;white-space:nowrap}
.trow.opt{background:var(--wash)}
.trow.opt .t{color:var(--muted)}

/* ---------- sections ---------- */
section{padding:clamp(3rem,6.5vw,5.2rem) 0}
.band{background:var(--wash)}
.sec-hd{margin-bottom:2.2rem;max-width:62ch}
.sec-hd h2{font-family:var(--display);font-weight:800;letter-spacing:-.01em;line-height:1.06;
  font-size:clamp(1.9rem,4.6vw,3rem);margin-bottom:.6rem}
.sec-hd h2 em{font-style:normal;color:var(--blue)}
.sec-hd p{color:var(--muted);font-size:1.05rem}
.sec-hd p a{color:var(--blue);font-weight:700}
.sec-foot{margin-top:1.6rem}

/* ---------- inner page hero ---------- */
.phero{padding:clamp(2.2rem,5vw,3.8rem) 0 clamp(2rem,4vw,3rem);background:linear-gradient(180deg,var(--wash),var(--paper))}
.phero h1{font-family:var(--display);font-weight:800;line-height:1.02;letter-spacing:-.01em;
  font-size:clamp(2.2rem,6vw,4rem);max-width:18ch;margin-bottom:1rem}
.phero h1 em{font-style:normal;color:var(--blue)}
.phero .lede{max-width:56ch;color:var(--muted);font-size:clamp(1.04rem,1.7vw,1.16rem);margin-bottom:1.6rem}
.phero .lede b{color:var(--ink)}
.crumbs{font-size:.88rem;color:var(--muted);margin-bottom:.9rem}
.crumbs a{color:var(--muted);font-weight:700;display:inline-flex;min-height:44px;align-items:center}
.crumbs a:hover{color:var(--blue)}
.phero-grid{display:grid;gap:2rem}
@media(min-width:940px){ .phero-grid{grid-template-columns:1.1fr .9fr;align-items:center;gap:2.8rem} }
.phero-photo{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);aspect-ratio:4/3}
.phero-photo img{width:100%;height:100%;object-fit:cover}

/* ---------- what we do (three doors) ---------- */
.doors{display:grid;gap:1.1rem}
@media(min-width:820px){ .doors{grid-template-columns:repeat(3,1fr)} }
.door{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow-sm);text-decoration:none;transition:transform .2s var(--ease),box-shadow .2s}
.door:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.door-img{aspect-ratio:16/10;overflow:hidden;background:var(--wash)}
@media(max-width:819px){ .door-img{aspect-ratio:2/1} }
.door-img img{width:100%;height:100%;object-fit:cover}
.door-body{padding:1.3rem 1.4rem 1.5rem;display:flex;flex-direction:column;flex:1}
.door .kicker{font-size:.74rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--blue);margin-bottom:.3rem}
.door h3{font-family:var(--display);font-weight:800;font-size:1.45rem;line-height:1.1;margin-bottom:.45rem}
.door p{color:var(--muted);font-size:.97rem;margin-bottom:1rem}
.door .go{margin-top:auto;font-weight:800;color:var(--blue)}
.door .go::after{content:' →'}

/* ---------- about + team strip ---------- */
.about{display:grid;gap:2rem}
@media(min-width:900px){ .about{grid-template-columns:1fr 1fr;gap:3rem;align-items:start} }
.about p{color:var(--muted);margin-bottom:1rem;font-size:1.03rem}
.about p b{color:var(--ink)}
.coaches{display:grid;gap:.8rem}
.coach{display:grid;grid-template-columns:76px 1fr;gap:1rem;align-items:center;background:#fff;
  border:1px solid var(--line);border-radius:18px;padding:.8rem;box-shadow:var(--shadow-sm)}
.coach img{width:76px;height:76px;border-radius:14px;object-fit:cover;object-position:50% 22%}
.coach h3{font-family:var(--display);font-weight:800;font-size:1.12rem;line-height:1.15}
.coach .r{font-size:.86rem;color:var(--muted);font-weight:700}
.coach .y{font-size:.86rem;color:var(--blue);font-weight:800}

/* ---------- photos ---------- */
.shots{display:grid;gap:1rem;grid-template-columns:1fr}
.shot{border-radius:var(--radius);overflow:hidden;background:var(--wash);box-shadow:var(--shadow-sm)}
.shot img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.shot.tall img{aspect-ratio:3/4}
@media(min-width:760px){
  .shots{grid-template-columns:repeat(3,1fr)}
  .shot.wide{grid-column:span 2}
}

/* ---------- trust ---------- */
.trust{display:grid;gap:1rem}
.tcard{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.5rem;box-shadow:var(--shadow-sm)}
.tcard .ic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;
  margin-bottom:.9rem;background:var(--blue)}
.tcard:nth-child(2) .ic{background:var(--coral)}
.tcard:nth-child(3) .ic{background:var(--purple)}
.tcard h3{font-family:var(--display);font-size:1.16rem;font-weight:700;margin-bottom:.3rem}
.tcard p{font-size:.96rem;color:var(--muted)}
.tcard p a{color:var(--blue);font-weight:700}
@media(min-width:760px){ .trust{grid-template-columns:repeat(3,1fr)} }
.note{margin-top:1.4rem;font-size:.95rem;color:var(--muted);
  border-left:4px solid var(--lime);padding-left:1rem;max-width:62ch}
.note a{color:var(--blue);font-weight:700}

/* ---------- prices ---------- */
.prices{display:grid;gap:1rem}
.price{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.7rem;box-shadow:var(--shadow-sm)}
.price.feat{background:var(--blue);color:#fff;box-shadow:var(--shadow);border-color:transparent}
.price .amt{font-family:var(--display);font-weight:800;font-size:clamp(2.5rem,6vw,3.3rem);
  line-height:1;margin-bottom:.25rem}
.price .per{font-weight:700;font-size:.9rem;color:var(--muted);margin-bottom:.8rem}
.price.feat .per{color:#fff}
.price p{font-size:.96rem;color:var(--muted)}
.price.feat p{color:#fff}
.price .flag{display:inline-block;background:var(--lime);color:var(--ink);font-weight:800;
  font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;padding:.28rem .6rem;
  border-radius:999px;margin-bottom:.7rem}
@media(min-width:760px){ .prices{grid-template-columns:repeat(3,1fr)} }
.sib{margin-top:1.3rem;font-size:.97rem;color:var(--muted)}
.sib a{color:var(--blue);font-weight:700}

/* ---------- venues ---------- */
.venues{display:grid;gap:1rem}
.ven{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.6rem;box-shadow:var(--shadow-sm);border-top:5px solid var(--blue)}
.ven.prov{border-top-color:var(--sun);background:#FFFDF6}
.ven h3{font-family:var(--display);font-size:1.25rem;font-weight:700;margin:.7rem 0 .15rem}
.ven .pc{font-size:.9rem;color:var(--muted);margin-bottom:.8rem}
.ven .dates{font-weight:800;margin-bottom:.4rem}
.ven p{color:var(--muted);font-size:.95rem}
.ven p a{color:var(--blue);font-weight:700}
.tag{display:inline-block;font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;
  padding:.3rem .65rem;border-radius:999px;font-weight:800}
.tag.ok{background:var(--lime);color:var(--ink)}
.tag.tbc{background:var(--sun);color:var(--ink)}
@media(min-width:760px){ .venues{grid-template-columns:1fr 1fr} }
#clubList[hidden]{display:none}
#clubList:not([hidden]){margin-bottom:1.6rem}

/* ---------- fact cards (clickable) ---------- */
.facts{display:grid;gap:1rem}
.fact{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.5rem;box-shadow:var(--shadow-sm);display:grid;grid-template-columns:auto 1fr;
  gap:1.1rem;align-items:start;text-decoration:none;color:inherit}
a.fact{transition:transform .2s var(--ease),box-shadow .2s,border-color .2s}
a.fact:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:rgba(14,107,255,.35)}
.fact .badge{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;
  background:var(--lime);color:var(--ink);font-family:var(--display);font-weight:800;
  font-size:1.2rem;line-height:1}
.fact:nth-child(2) .badge{background:var(--sun)}
.fact h3{font-family:var(--display);font-size:1.15rem;font-weight:700;margin-bottom:.2rem}
.fact p{color:var(--muted);font-size:.96rem}
.fact .go{display:inline-block;margin-top:.55rem;font-weight:800;color:var(--blue);font-size:.95rem}
.fact .go::after{content:' →'}
@media(min-width:820px){ .facts{grid-template-columns:1fr 1fr} }

/* ---------- steps ---------- */
.steps{display:grid;gap:1rem;counter-reset:st}
@media(min-width:820px){ .steps{grid-template-columns:repeat(3,1fr)} }
.step{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem;box-shadow:var(--shadow-sm)}
.step::before{counter-increment:st;content:counter(st);display:grid;place-items:center;width:40px;height:40px;
  border-radius:12px;background:var(--blue);color:#fff;font-family:var(--display);font-weight:800;font-size:1.2rem;margin-bottom:.8rem}
.step h3{font-family:var(--display);font-weight:800;font-size:1.2rem;margin-bottom:.3rem}
.step p{color:var(--muted);font-size:.96rem}

/* ---------- contact band ---------- */
.contact{background:var(--blue);color:#fff;border-radius:var(--radius);
  padding:clamp(2rem,5vw,3.4rem);box-shadow:var(--shadow)}
.contact h2{font-family:var(--display);font-size:clamp(1.9rem,4.8vw,3rem);font-weight:800;
  line-height:1.06;margin-bottom:.7rem;max-width:18ch}
.contact p{color:#fff;max-width:50ch;margin-bottom:1.7rem}
.contact .btn-pri{background:#fff;color:var(--blue);box-shadow:none}
.contact .btn-pri:hover{background:var(--lime);color:var(--ink)}
.contact .btn-ghost{color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.6)}
.contact .btn-ghost:hover{color:#fff;box-shadow:inset 0 0 0 2px #fff}

/* ---------- team ---------- */
.team{display:grid;gap:1.6rem}
@media(min-width:820px){ .team{grid-template-columns:repeat(3,1fr);gap:1.8rem} }
.mate{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow-sm);display:flex;flex-direction:column}
/* height:auto is load-bearing: with width/height attributes and no
   height:auto, aspect-ratio is ignored and the three headshots render at
   three different heights. */
.mate-photo{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 22%;
  background:var(--wash);display:block}
.mate-body{padding:1.4rem;display:flex;flex-direction:column;flex:1}
.mate .role{display:inline-block;align-self:flex-start;background:var(--lime);color:var(--ink);
  font-weight:800;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;
  padding:.3rem .6rem;border-radius:999px;margin-bottom:.7rem}
.mate h3{font-family:var(--display);font-weight:800;font-size:1.4rem;margin-bottom:.15rem}
.mate .yrs{font-weight:700;font-size:.9rem;color:var(--blue);margin-bottom:.7rem}
.mate p{color:var(--muted);font-size:.96rem;margin-bottom:.7rem}
.mate p:last-child{margin-bottom:0}

/* ---------- offers / ticks / two columns ---------- */
.offers{display:grid;gap:1.1rem}
@media(min-width:760px){ .offers{grid-template-columns:repeat(3,1fr)} }
.offer{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.6rem;box-shadow:var(--shadow-sm);border-top:5px solid var(--blue)}
.offer:nth-child(2){border-top-color:var(--lime)}
.offer:nth-child(3){border-top-color:var(--coral)}
.offer h3{font-family:var(--display);font-weight:800;font-size:1.3rem;margin-bottom:.4rem}
.offer p{color:var(--muted);font-size:.96rem}
.offer p+p{margin-top:.6rem}
.offer .tagline{display:block;font-weight:700;color:var(--ink);font-size:.9rem;margin-bottom:.5rem}
.offer ul{margin:.7rem 0 0 1.1rem;color:var(--muted);font-size:.94rem}
.offer li{margin-bottom:.25rem}
.ticks{display:grid;gap:.8rem;margin-top:.4rem}
.ticks li{list-style:none;display:grid;grid-template-columns:auto 1fr;gap:.8rem;
  align-items:start;color:var(--muted);font-size:.98rem}
.ticks .tk{width:24px;height:24px;border-radius:50%;background:var(--lime);
  display:grid;place-items:center;flex:0 0 auto;margin-top:.15rem}
.ticks b{color:var(--ink)}
.twocol{display:grid;gap:1.6rem}
@media(min-width:820px){ .twocol{grid-template-columns:1fr 1fr;gap:2.4rem} }
.panelbox{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.7rem;box-shadow:var(--shadow-sm)}
.panelbox h3{font-family:var(--display);font-weight:800;font-size:1.3rem;margin-bottom:1rem}
.panelbox p{color:var(--muted)}
.panelbox p+h3{margin-top:1.3rem}

/* ---------- long-form text (safeguarding, privacy) ---------- */
.prose{max-width:72ch}
.prose h2{font-family:var(--display);font-weight:800;font-size:clamp(1.45rem,3vw,1.9rem);line-height:1.15;margin:2.4rem 0 .6rem}
.prose h2:first-child{margin-top:0}
.prose h3{font-family:var(--display);font-weight:800;font-size:1.18rem;margin:1.5rem 0 .4rem}
.prose p,.prose li{color:#34425c}
.prose p{margin-bottom:.9rem}
.prose ul{margin:0 0 1rem 1.2rem}
.prose li{margin-bottom:.35rem}
.prose a{color:var(--blue);font-weight:700}
.prose b,.prose strong{color:var(--ink)}
.callout{background:var(--wash);border:1px solid var(--line);border-left:6px solid var(--coral);border-radius:16px;
  padding:1.2rem 1.4rem;margin:1.2rem 0 1.6rem}
.callout.blue{border-left-color:var(--blue)}
.callout h2,.callout h3{margin-top:0!important}
.callout p:last-child{margin-bottom:0}
.meta{font-size:.92rem;color:var(--muted)}
.sidecard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem;box-shadow:var(--shadow-sm)}
.sidecard h2{font-family:var(--display);font-weight:800;font-size:1.25rem;margin-bottom:.6rem}
.sidecard p{color:var(--muted);font-size:.95rem;margin-bottom:.9rem}
.sidecard dl{display:grid;gap:.6rem;margin-bottom:1rem}
.sidecard dt{font-size:.76rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--blue)}
.sidecard dd{font-weight:700}
.sidecard dd span{display:block;font-weight:600;color:var(--muted);font-size:.9rem}
.sidecard h2 em{font-style:normal;color:var(--blue)}
.withside{display:grid;gap:2.2rem}
@media(min-width:940px){ .withside{grid-template-columns:minmax(0,1fr) 330px;gap:3.4rem;align-items:start}
  .withside .sidecard{position:sticky;top:calc(var(--nav-h) + 1.4rem)} }

/* ---------- facts still waiting on Cameron ----------
   Loud on purpose. check.py refuses to pass while any of these exist. */
mark.confirm{background:#ffe14d;color:#3b2f00;padding:.1rem .35rem;border-radius:6px;font-weight:800;
  box-shadow:0 0 0 2px #e0b800}

/* ---------- forms ---------- */
.formcard{background:#fff;border:1px solid var(--line);border-radius:26px;box-shadow:var(--shadow);
  padding:clamp(1.3rem,3.5vw,2.3rem)}
.formcard h2{font-family:var(--display);font-weight:800;font-size:clamp(1.5rem,3.4vw,2rem);line-height:1.1;margin-bottom:.4rem}
.formcard .intro{color:var(--muted);margin-bottom:1.4rem}
.fgrid{display:grid;gap:1rem 1.1rem}
@media(min-width:640px){ .fgrid{grid-template-columns:1fr 1fr} .fgrid .full{grid-column:1/-1} }
.field{display:flex;flex-direction:column;gap:.35rem;min-width:0}
.field label,.field legend{font-weight:800;font-size:.95rem}
.field .opt{font-weight:600;color:var(--muted);font-size:.85rem}
.field .hint{font-size:.86rem;color:var(--muted)}
.field input,.field select,.field textarea{font:inherit;font-size:1rem;color:var(--ink);background:#fff;
  border:2px solid #cfd8e8;border-radius:14px;padding:.75rem .9rem;min-height:52px;width:100%}
.field textarea{min-height:130px;resize:vertical;line-height:1.5}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%2314213a' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center;padding-right:2.6rem}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(14,107,255,.15)}
.field [aria-invalid="true"]{border-color:#d93025}
.field .err{color:#b3261e;font-size:.86rem;font-weight:700;display:none}
.field.bad .err{display:block}
fieldset.field{border:0;min-width:0}
.checks{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.2rem}
.check{position:relative;display:inline-flex}
.check input{position:absolute;opacity:0;width:1px;height:1px}
.check span{display:inline-flex;align-items:center;min-height:46px;padding:.45rem 1rem;border:2px solid #cfd8e8;
  border-radius:999px;font-weight:700;font-size:.95rem;cursor:pointer;user-select:none;background:#fff}
.check input:checked+span{background:var(--blue);border-color:var(--blue);color:#fff}
.check input:focus-visible+span{outline:3px solid var(--blue);outline-offset:2px}
.agree{display:grid;grid-template-columns:auto 1fr;gap:.7rem;align-items:start;font-size:.93rem;color:var(--muted)}
.agree input{width:22px;height:22px;margin-top:.15rem;accent-color:var(--blue)}
.agree a{color:var(--blue);font-weight:700}
.hp{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden}
.form-foot{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;margin-top:1.3rem}
.form-foot .small{font-size:.88rem;color:var(--muted);flex:1 1 16rem}
.form-msg{margin-top:1rem;border-radius:14px;padding:1rem 1.2rem;font-weight:700;display:none}
.form-msg.on{display:block}
.form-msg.ok{background:#eef9d6;color:#2c3d07;border:1px solid #c9e23f}
.form-msg.bad{background:#fdecea;color:#8c1d18;border:1px solid #f4b4ae}
.form-msg a{color:inherit}
.sent{text-align:center;padding:1.5rem .5rem}
.sent .tick{width:64px;height:64px;border-radius:50%;background:var(--lime);display:grid;place-items:center;margin:0 auto 1rem}
.sent h2{margin-bottom:.5rem}
.sent p{color:var(--muted);max-width:44ch;margin:0 auto 1.2rem}
button[disabled]{opacity:.7;cursor:progress}

/* ---------- contact page ---------- */
.ways{display:grid;gap:1rem}
.way{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:center;background:#fff;border:1px solid var(--line);
  border-radius:18px;padding:1rem 1.2rem;box-shadow:var(--shadow-sm);text-decoration:none}
a.way:hover{border-color:rgba(14,107,255,.4)}
.way .ic{width:46px;height:46px;border-radius:14px;background:var(--blue);display:grid;place-items:center;color:#fff}
.way b{display:block;font-family:var(--display);font-size:1.1rem}
.way span{color:var(--muted);font-size:.93rem}

/* ============================================================
   A DAY AT CAMP — autoplay slideshow
   ============================================================ */
.ds-show{max-width:1130px;margin:0 auto}
.ds-stage{position:relative;aspect-ratio:3/2;border-radius:var(--radius);overflow:hidden;
  background:var(--ink);box-shadow:0 24px 48px -28px rgba(20,33,58,.55);touch-action:pan-y}
.ds-slide{position:absolute;inset:0;margin:0;opacity:0;transition:opacity .9s ease}
.ds-slide.on{opacity:1}
.ds-slide img{display:block;width:100%;height:100%;object-fit:cover;
  transform:scale(1.06);transition:transform 6s ease-out}
.ds-slide.on img{transform:scale(1)}
.ds-slide.top img{object-position:50% 12%}
.ds-stage::after{content:"";position:absolute;left:0;right:0;top:0;height:5.5rem;z-index:1;
  background:linear-gradient(180deg,rgba(10,16,32,.55),rgba(10,16,32,0));pointer-events:none}
.ds-bars{position:absolute;z-index:2;top:.3rem;left:.8rem;right:.8rem;display:flex;gap:.35rem}
.ds-bar{flex:1;display:flex;align-items:center;min-height:44px;padding:0;border:0;
  background:none;cursor:pointer}
.ds-track{position:relative;display:block;width:100%;height:4px;border-radius:4px;
  overflow:hidden;background:rgba(255,255,255,.38)}
.ds-fill{position:absolute;inset:0;background:#fff;transform:scaleX(0);transform-origin:left center}
.ds-bar:focus-visible .ds-track{outline:2px solid #fff;outline-offset:4px}
.ds-toggle{position:absolute;z-index:2;right:.8rem;bottom:.8rem;width:44px;height:44px;
  display:grid;place-items:center;border:0;border-radius:50%;cursor:pointer;
  background:rgba(10,16,32,.58);color:#fff}
.ds-toggle:focus-visible{outline:3px solid #fff;outline-offset:2px}
.ds-toggle .i-play,.ds-show.paused .ds-toggle .i-pause{display:none}
.ds-show.paused .ds-toggle .i-play{display:block}
.ds-caps{display:grid;padding:1.15rem .15rem 0}
.ds-cap{grid-area:1/1;visibility:hidden;opacity:0;transition:opacity .15s,visibility 0s .15s}
.ds-cap.on{visibility:visible;opacity:1;transition:opacity .25s .15s,visibility 0s}
.ds-step{margin:0 0 .3rem;font-size:.74rem;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--blue);font-variant-numeric:tabular-nums}
.ds-cap h3{margin:0 0 .3rem;font-family:var(--display);font-weight:800;line-height:1.1;
  font-size:clamp(1.35rem,3.2vw,1.9rem);color:var(--ink)}
.ds-note{margin:0;max-width:58ch;color:var(--muted);font-size:1rem}
html:not(.js) .ds-bars,html:not(.js) .ds-toggle{display:none}

/* ---------- FAQ ---------- */
.faq{display:grid;gap:.7rem;max-width:60rem}
.faq details{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);overflow:hidden}
.faq summary{cursor:pointer;list-style:none;padding:1.15rem 1.4rem;font-weight:800;
  font-family:var(--display);font-size:1.08rem;display:flex;align-items:center;
  justify-content:space-between;gap:1rem;min-height:56px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font-size:1.5rem;color:var(--blue);line-height:1;flex:0 0 auto}
.faq details[open] summary::after{content:'–'}
.faq details[open] summary{border-bottom:1px solid var(--line)}
.faq .ans{padding:1.15rem 1.4rem;color:var(--muted);font-size:.99rem}
.faq .ans p+p{margin-top:.6rem}
.faq .ans a{color:var(--blue);font-weight:700}
.faq-group{margin-bottom:2.4rem}
.faq-group h2{font-family:var(--display);font-weight:800;font-size:1.5rem;margin-bottom:.9rem}
.jump{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:2.2rem}
.jump a{display:inline-flex;align-items:center;min-height:44px;padding:0 1rem;border-radius:999px;
  background:#fff;border:1px solid var(--line);text-decoration:none;font-weight:800;font-size:.93rem}
.jump a:hover{border-color:var(--blue);color:var(--blue)}

/* ---------- gallery ---------- */
.gal{display:grid;gap:.9rem;grid-template-columns:repeat(2,1fr)}
@media(min-width:760px){ .gal{grid-template-columns:repeat(3,1fr);gap:1.1rem} }
.gal button{display:block;width:100%;padding:0;border:0;background:var(--wash);cursor:zoom-in;
  border-radius:18px;overflow:hidden;aspect-ratio:1/1;box-shadow:var(--shadow-sm)}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.gal button:hover img{transform:scale(1.04)}
.gal button:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.gal .top img{object-position:50% 15%}
.gal .gal-film{position:relative;cursor:pointer;background:var(--ink)}
.gal .gal-film img{opacity:.72}
.gal .gal-film span{position:absolute;inset:auto 0 0 0;padding:1rem;color:#fff;font-weight:800;text-align:left;
  display:flex;align-items:center;gap:.5rem;background:linear-gradient(0deg,rgba(10,16,32,.8),rgba(10,16,32,0))}
.gal .gal-film i{width:34px;height:34px;border-radius:50%;background:var(--lime);color:var(--ink);display:grid;place-items:center;flex:0 0 auto}
.lb{border:0;padding:0;background:transparent;max-width:none;max-height:none;width:100%;height:100%}
.lb::backdrop{background:rgba(10,16,32,.92)}
.lb-in{position:fixed;inset:0;display:grid;place-items:center;padding:4.5rem 1rem 5.5rem}
.lb img{max-width:min(1200px,100%);max-height:100%;width:auto;height:auto;border-radius:12px;object-fit:contain}
.lb-cap{position:fixed;left:1rem;right:1rem;bottom:1.2rem;text-align:center;color:#fff;font-size:.95rem;padding:0 4rem}
.lb-btn{position:fixed;width:52px;height:52px;border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center;
  background:rgba(255,255,255,.14);color:#fff;font-size:1.6rem;line-height:1}
.lb-btn:hover{background:rgba(255,255,255,.26)}
.lb-btn:focus-visible{outline:3px solid var(--lime);outline-offset:2px}
.lb-close{top:1rem;right:1rem}
.lb-prev{left:1rem;top:50%;transform:translateY(-50%)}
.lb-next{right:1rem;top:50%;transform:translateY(-50%)}
@media(max-width:600px){ .lb-prev,.lb-next{top:auto;bottom:.8rem;transform:none} .lb-cap{bottom:5rem;padding:0} }

/* ============================================================
   THE FILM — Cameron's promo (never autoplays; sound on press)
   ============================================================ */
.film{background:var(--ink);color:#fff}
.film-grid{display:grid;gap:2rem;align-items:center}
@media(min-width:900px){ .film-grid{grid-template-columns:1fr minmax(290px,360px);gap:3.4rem} }
.film-stage{order:-1}
@media(min-width:900px){ .film-stage{order:0} }
.film-frame{position:relative;aspect-ratio:9/16;width:100%;max-width:360px;
  margin-inline:auto;border-radius:var(--radius);overflow:hidden;background:#0a1020;
  box-shadow:0 40px 80px -34px rgba(0,0,0,.9)}
.film-frame video,.film-frame .film-poster{width:100%;height:100%;object-fit:cover;display:block}
.film-frame .film-poster{position:absolute;inset:0;z-index:1;transition:opacity .3s ease}
.film-frame video{position:absolute;inset:0;z-index:0;background:#0a1020}
.film-frame.playing .film-poster{opacity:0;pointer-events:none}
.film-frame.playing video{z-index:2}
.film-play{position:absolute;inset:0;z-index:3;width:100%;height:100%;border:0;
  cursor:pointer;color:#fff;font:inherit;display:grid;place-items:center;
  background:linear-gradient(180deg,rgba(10,16,32,.12),rgba(10,16,32,.6))}
.film-frame.playing .film-play{display:none}
.film-play .pill{background:var(--lime);color:var(--ink);font-size:1rem;padding:.85rem 1.35rem;
  box-shadow:0 14px 34px -10px rgba(0,0,0,.75)}
.film-play .dur{display:block;margin-top:.75rem;font-size:.85rem;font-weight:600;
  color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.7)}
.film-copy h2{font-family:var(--display);font-weight:800;line-height:1.04;
  font-size:clamp(2rem,5vw,3.2rem);margin-bottom:.7rem}
.film-copy h2 em{font-style:normal;color:var(--lime)}
.film-copy p{color:rgba(255,255,255,.88);font-size:1.06rem;margin-bottom:1rem;max-width:48ch}
.film-copy .tagline{display:inline-block;background:var(--lime);color:var(--ink);
  font-weight:800;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  padding:.3rem .7rem;border-radius:999px;margin-bottom:1rem}
.film .btn-ghost{color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.5)}
.film .btn-ghost:hover{color:#fff;box-shadow:inset 0 0 0 2px #fff}
.film-peek{display:grid;grid-template-columns:1fr 1fr;gap:.9rem;margin-top:1.7rem;max-width:400px}
.peek{position:relative;aspect-ratio:9/16;border-radius:14px;overflow:hidden;background:#0a1020}
.peek video,.peek img{width:100%;height:100%;object-fit:cover;display:block}
.peek img{position:absolute;inset:0;z-index:1}
.peek video{position:absolute;inset:0;z-index:2;opacity:0;transition:opacity .6s ease}
.peek video.on{opacity:1}
.film-peek-cap{font-size:.85rem;color:rgba(255,255,255,.75);margin-top:.6rem}
@media (prefers-reduced-motion:reduce){
  .peek video,.film-frame .film-poster,.reel figure,.ds-slide,.ds-slide img,.ds-cap{transition:none}
  .ds-slide img{transform:none}
}

/* ---------- sticky phone bar ---------- */
.callbar{position:fixed;left:0;right:0;bottom:0;z-index:50;display:none;
  padding:.6rem .8rem calc(.6rem + var(--safe-b));gap:.6rem;
  background:var(--ink);border-top:1px solid rgba(255,255,255,.14)}
.callbar a{flex:1;display:flex;align-items:center;justify-content:center;gap:.5rem;min-height:50px;
  border-radius:999px;text-decoration:none;font-weight:800;font-size:1rem}
.callbar .cb-book{background:var(--lime);color:var(--ink)}
.callbar .cb-call{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.45)}
@media(max-width:820px){
  .callbar{display:flex}
  body{padding-bottom:4.9rem}
}

/* ============================================================
   FOOTER
   ============================================================ */
.ft{background:var(--ink);color:rgba(255,255,255,.8);padding:clamp(2.8rem,6vw,4.2rem) 0 0;font-size:.95rem}
.ft-grid{display:grid;gap:2rem}
@media(min-width:700px){ .ft-grid{grid-template-columns:1fr 1fr} }
@media(min-width:1000px){ .ft-grid{grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2.6rem} }
.ft-brand img{height:56px;width:auto;margin-bottom:1rem;background:#fff;border-radius:12px;padding:.45rem .6rem;box-sizing:content-box}
.ft-brand p{max-width:34ch;margin-bottom:1rem}
.ft h2{font-family:var(--display);font-weight:800;font-size:1.02rem;color:#fff;margin-bottom:.6rem;letter-spacing:.01em}
.ft ul{list-style:none}
.ft li a{display:inline-flex;align-items:center;min-height:44px;color:rgba(255,255,255,.8);text-decoration:none;font-weight:600}
.ft li a:hover{color:var(--lime)}
.ft .areas{color:rgba(255,255,255,.72);font-size:.92rem}
.ft-cta{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.4rem}
.ft-cta .pill{min-height:46px}
.ft-cta .pill-ghost{color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.4)}
.ft-cta .pill-ghost:hover{box-shadow:inset 0 0 0 2px #fff}
.ft-base{margin-top:2.6rem;border-top:1px solid rgba(255,255,255,.14);padding:1.2rem 0 calc(1.3rem + var(--safe-b));
  display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;align-items:center;font-size:.87rem;color:rgba(255,255,255,.66)}
.ft-base a{color:rgba(255,255,255,.8);text-decoration:none;font-weight:700;display:inline-flex;min-height:44px;align-items:center}
.ft-base a:hover{color:var(--lime)}
.ft-base .by{margin-left:auto}

.skip{position:absolute;left:-9999px;background:var(--ink);color:#fff;
  padding:.75rem 1.25rem;border-radius:0 0 10px 0;z-index:200;text-decoration:none}
.skip:focus{left:0;top:0;display:inline-flex;align-items:center;min-height:44px}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.navbar :focus-visible,.ft :focus-visible,.film :focus-visible,.contact :focus-visible{outline-color:var(--lime)}

/* Phone overrides LAST — a media query placed above the rules it overrides
   does nothing, which has bitten this project three times. */
@media(max-width:560px){
  .wrap{width:min(var(--wrap),100% - 2rem)}
  .trow{grid-template-columns:auto 1fr;gap:.8rem;padding:.85rem 1.05rem}
  .trow .n{display:none}
  .times-hd{padding:.9rem 1.05rem}
  .fact{grid-template-columns:auto 1fr;gap:.9rem;padding:1.2rem}
  .fact .badge{width:46px;height:46px;font-size:1.05rem}
  .facts-list div{grid-template-columns:1fr;gap:.1rem}
  .mate-body{padding:1.15rem}
  .offer,.panelbox,.step{padding:1.3rem}
  /* full-bleed on a phone: must equal the .wrap gutter at this width (1rem) */
  .ds-show{margin-inline:-1rem}
  .ds-stage{aspect-ratio:1/1;border-radius:0}
  .ds-caps{padding-inline:1rem}
  .film-frame{max-width:300px}
  .film-copy p{font-size:1rem}
  .film-peek{max-width:300px;margin-inline:auto}
  .hero .cta-row .btn,.phero .cta-row .btn{flex:1 1 100%}
  .ft-base .by{margin-left:0}
}