/* ==========================================================================
   Jump & Sculpt Events — brand system
   Fixed across every event page. Only the partner layer is variable,
   and it arrives as inline custom properties on <body data-collab>.
   ========================================================================== */

:root{
  /* Experience identity, approved 6 Oct 2026, shared with the Sundays pages
     and the $37 programme so the three read as one brand. */
  --ink:#F5F5F5;          /* Studio White: the page ground, and the text that sits on hot pink */
  --panel:#FFFFFF;
  --raise:#FFFFFF;
  --edge:rgba(231,159,195,.55);
  --edge-hi:rgba(231,159,195,.95);
  --text:#17131A;
  --muted:#555257;
  --dim:#8A8690;
  --neon:#EA4F9E;         /* Hot Pink, CTAs only */
  --neon-dim:#FE87DF;     /* Neon Pink */
  --cotton:#E79FC3;
  --blush:#F2E2EA;        /* the alternating band */
  --gold:#FFC857;
  --orange:#FF6A3D;
  --purple:#8A2BE2;
  --go:#17795A;
  --stop:#C0184F;

  /* partner layer, overwritten inline per collab */
  --p:#EA4F9E; --pt:#EA4F9E; --pon:#FFFFFF;
  --ps:rgba(234,79,158,.10); --pl:rgba(234,79,158,.38);

  --col:660px;
  --pad:20px;
  --r:12px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{background:var(--ink)}
body{
  margin:0;
  color:var(--text);
  font-family:Montserrat,"Segoe UI",system-ui,-apple-system,sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,.display{
  font-family:"Bebas Neue","Arial Narrow",Impact,sans-serif;
  font-weight:400;letter-spacing:.02em;text-wrap:balance;margin:0;line-height:.95;
}
p{margin:0 0 1em}
a{color:inherit}
img,video{max-width:100%;display:block}
/* every display rule below would otherwise beat the browser's own [hidden],
   and the filters hide cards with the hidden attribute */
[hidden]{display:none!important}
/* iPhone Safari sizes an iframe to its content, not to width:100%, so the
   ticket widget or the map could make the page wider than the phone and let
   it slide sideways, clipping the left edge of the hero title. 1px wide with
   a 100% minimum is the standard fix; clip on html stops any leftover drift
   without creating a scroll container (which would break sticky). */
iframe{max-width:100%}
.ticketbox iframe,.mapbox iframe{width:1px!important;min-width:100%!important}
@supports (overflow:clip){html{overflow-x:clip}}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
:focus-visible{outline:2px solid var(--neon);outline-offset:3px;border-radius:4px}
.mono{font-family:"JetBrains Mono",ui-monospace,Consolas,monospace;font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* draft marker: any unfilled config field renders as this, so nothing
   ships half-written by accident. build.mjs fails the build if one
   survives into a published page. */
.tbd{
  background:var(--gold);color:#17131A;font-weight:700;font-size:.78em;
  letter-spacing:.06em;text-transform:uppercase;padding:2px 7px;border-radius:4px;
  font-family:Montserrat,sans-serif;
}

.wrap{width:100%;max-width:var(--col);margin-inline:auto;padding-inline:var(--pad)}
.section{padding-block:40px;border-top:1px solid var(--edge)}
.section:first-of-type{border-top:none}
.section h2{font-size:clamp(28px,7vw,38px);margin-bottom:16px}
.eyebrow{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);font-weight:700;margin:0 0 12px}
.lede{font-size:17px;color:var(--muted)}

/* ---------- site header ---------- */
.site{position:sticky;top:0;z-index:40;background:rgba(245,245,245,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--edge)}
.site .in{display:flex;align-items:center;justify-content:space-between;gap:16px;height:56px}
.site .logo{font-family:"Bebas Neue",sans-serif;font-size:21px;letter-spacing:.03em;text-decoration:none}
.site .logo b{color:var(--neon);font-weight:400}
.site nav{display:flex;gap:18px;font-size:13px;font-weight:600}
.site nav a{color:var(--muted);text-decoration:none}
.site nav a:hover{color:var(--text)}
/* phones keep the nav, just tighter: most traffic arrives from Instagram and
   a header with only a logo gives it nowhere to go */
@media (max-width:560px){
  .site nav{gap:14px;font-size:12px}
  .site .in{gap:10px}
  .site .logo{font-size:18px}
  .site .logo,.site nav a{white-space:nowrap}
  /* the link back to the main site is the one a phone can spare */
  .site nav a[data-secondary]{display:none}
}

/* ---------- buttons: always Jump & Sculpt pink ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--neon);color:#fff;font-weight:700;font-size:15px;
  padding:15px 26px;border-radius:10px;text-decoration:none;letter-spacing:.01em;
  transition:filter .15s;text-align:center;
}
.btn:hover{filter:brightness(1.12)}
.btn.block{display:flex;width:100%}
.btn.ghost{background:transparent;border:1px solid var(--edge-hi);color:var(--text)}
.btn.ghost:hover{border-color:var(--neon);filter:none}
.btn[aria-disabled="true"]{background:var(--raise);color:var(--dim);pointer-events:none}

/* ---------- hero ---------- */
/* Phones: the 4:5 clip is cut from the full frame height, so shown at exactly
   4:5 nothing is trimmed. Width is capped by the viewport height instead of
   capping the height, which would force a crop and could take the head off.
   The title and the buy block sit below the video, never over it. */
.hero{position:relative;background:var(--ink);overflow:hidden;border-bottom:1px solid var(--edge)}
.hero .media{position:relative;aspect-ratio:4/5;width:min(100%,62svh);margin-inline:auto;background:#120a10}
@media (min-width:760px){.hero .media{aspect-ratio:16/9;width:100%}}
.hero video,.hero .media img{display:block;width:100%;height:100%;object-fit:cover;object-position:center top}
.hero .scrim{position:absolute;inset:auto 0 0 0;height:14%;background:linear-gradient(180deg,transparent,var(--ink))}
.hero .over{position:relative;padding-block:18px 22px}
.hero .over .wrap{padding-inline:24px}
/* Desktop: full-width 16:9, uncropped, she stands center-right. The copy block
   sits on the left over a darkened band, raised above the bottom edge so the
   Reserve button shows on first load without scrolling. */
@media (min-width:960px){
  .hero .scrim{inset:0;height:auto;background:linear-gradient(90deg,rgba(245,245,245,.92) 0%,rgba(13,13,13,.72) 24%,rgba(13,13,13,.3) 40%,transparent 50%),linear-gradient(180deg,transparent 80%,rgba(13,13,13,.5) 100%)}
  /* pinned to the left edge, not the centered column, and below the neon sign
     (which sits at 17-33% of the frame height), so it never covers her or it */
  .hero .over{position:absolute;inset:0;padding:0;display:flex;align-items:flex-start}
  .hero .over .wrap{max-width:none;width:100%;margin:0;padding-inline:4.5vw;padding-top:clamp(230px,19.5vw,400px)}
  .hero .copy{max-width:min(520px,40vw)}
  .hero .tagrow{margin-bottom:10px}
  .hero .lockup{font-size:clamp(38px,3.4vw,56px)}
  .hero .ttl{margin:10px 0 4px}
  .hero .sub{font-size:14px}
  .hero .herobar{border:0;padding-block:14px 0}
  .hero .herobar .meta{gap:6px;margin-bottom:14px}
  .hero .herobar .meta span{font-size:12px;padding:6px 10px;background:rgba(30,30,30,.72);backdrop-filter:blur(4px)}
  .hero .herobar .btn{flex:0 1 auto;padding-inline:30px}
}
.hero .tagrow{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.lockup{font-family:"Bebas Neue",sans-serif;line-height:.88;color:var(--text);font-size:clamp(34px,10vw,58px);letter-spacing:.02em}
.lockup .x{color:var(--neon)}
.lockup .pn{color:var(--pt)}
.hero .ttl{font-size:clamp(17px,4.4vw,22px);font-weight:700;margin:14px 0 6px}
.hero .sub{font-size:15px;color:#E3D6DE;max-width:44ch;margin:0}
.plogo{display:inline-grid;place-items:center;border-radius:9px;overflow:hidden;flex:0 0 auto}
.plogo img{width:100%;height:100%;object-fit:contain}
.plogo.dark{background:#161215;border:1px solid var(--edge-hi)}
.plogo.light{background:#fff}
.vtype{display:inline-flex;align-items:center;gap:7px;font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:5px 10px;border-radius:6px;background:rgba(23,19,26,.55);color:var(--text)}
.vtype i{width:6px;height:6px;border-radius:50%;background:var(--pt)}

/* ---------- promise line, straight under the hero ---------- */
.promise{padding-block:30px 26px;border-bottom:1px solid var(--edge);background:linear-gradient(180deg,rgba(255,45,186,.07),transparent)}
.promise .ph{font-family:"Bebas Neue",sans-serif;font-size:clamp(28px,6.4vw,44px);line-height:1.02;margin:0;text-wrap:balance}
.promise .ps{font-size:15px;color:var(--muted);max-width:46ch;margin:10px 0 0}

/* ---------- repeated buy band ---------- */
.ctaband{border-block:1px solid var(--edge);background:var(--panel);padding-block:20px}
.ctaband .wrap{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between}
.ctaband .cb1{font-family:"Bebas Neue",sans-serif;font-size:26px;line-height:1;margin:0}
.ctaband .cb2{font-size:13px;font-weight:600;color:var(--muted);margin:6px 0 0}
.ctaband .cbbuy{display:flex;align-items:center;gap:14px;flex:1 1 260px}
.ctaband .cbp{display:flex;flex-direction:column;line-height:1.1}
.ctaband .cbp span{font-family:"JetBrains Mono",monospace;font-size:20px;font-weight:700}
.ctaband .cbp small{font-size:12px;font-weight:700;color:var(--neon)}
.ctaband .btn{flex:1 1 auto}
@media (min-width:620px){.ctaband .btn{flex:0 0 auto;padding-inline:30px}.ctaband .cbbuy{justify-content:flex-end}}

/* the filming notice stays honest but stops shouting over the sales copy */
.camnote{font-size:12.5px;line-height:1.55;color:var(--muted);margin:22px 0 0;padding-left:12px;border-left:2px solid var(--edge-hi)}

/* ---------- recap: real footage from a past event ---------- */
/* three clips sit in three columns on desktop, under a full-width photo, so
   no column is left empty */
.recap{display:grid;gap:12px;grid-template-columns:repeat(2,1fr);margin-top:20px}
@media (min-width:760px){.recap{grid-template-columns:repeat(3,1fr)}}
.recap .rc{margin:0;border-radius:12px;overflow:hidden;background:var(--raise);aspect-ratio:9/16}
/* the group shot carries the room, so it gets its own full-width row and the
   clips line up underneath, instead of one short tile beside tall ones */
.recap .rc.wide{grid-column:1/-1;aspect-ratio:3/2}
@media (min-width:760px){.recap .rc.wide{aspect-ratio:2/1}}
/* three clips in a two-column phone grid leave a hole, so the last one takes
   the full width and a gentler crop instead of sitting alone */
@media (max-width:759px){
  .recap .rc:last-child{grid-column:1/-1;aspect-ratio:4/5}
  /* a 9:16 clip in a 4:5 box loses the top by default, which takes the head */
  .recap .rc:last-child video{object-position:center 18%}
}
.recap .rc img,.recap .rc video{width:100%;height:100%;object-fit:cover;display:block}
.section .lead{color:var(--muted);max-width:52ch;margin:10px 0 0}

/* hero bar: date, time, city, price, spots, CTA */
.herobar{padding-block:18px 0}
.herobar .meta{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.herobar .meta span{font-size:13px;font-weight:600;padding:8px 12px;border-radius:8px;background:var(--raise);color:var(--text)}
.herobar .buy{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.herobar .price{font-family:"JetBrains Mono",monospace;font-size:24px;font-weight:700;line-height:1.1}
.herobar .spots{font-size:12.5px;font-weight:700;color:var(--neon)}
.herobar .btn{flex:1 1 220px}

/* ---------- event flow ---------- */
.flowbar{display:flex;gap:3px;height:9px;border-radius:9px;overflow:hidden;margin-bottom:20px}
.flowbar i{display:block}
.flowbar .c{background:var(--neon)}
.flowbar .p{background:var(--p)}
.flowbar .r{background:#E9E1E6}
.fblock{display:grid;grid-template-columns:44px 1fr auto;gap:14px;align-items:start;padding-block:16px;border-top:1px solid var(--edge)}
.fblock:first-of-type{border-top:none;padding-top:0}
.fblock .n{font-family:"JetBrains Mono",monospace;font-size:13px;font-weight:700;width:38px;height:38px;border-radius:10px;display:grid;place-items:center}
.fblock.c .n{background:rgba(255,45,186,.14);color:var(--neon)}
.fblock.p .n{background:var(--ps);color:var(--pt);border:1px solid var(--pl)}
.fblock.r .n{background:var(--raise);color:var(--text)}
.fblock .t{font-size:17px;font-weight:700;line-height:1.3}
.fblock .d{font-size:14px;color:var(--muted);margin:4px 0 0}
.fblock .m{font-family:"JetBrains Mono",monospace;font-size:13px;font-weight:700;white-space:nowrap;padding-top:4px}
.flowtotal{display:flex;justify-content:space-between;font-size:13px;color:var(--dim);padding-top:14px;border-top:1px solid var(--edge)}
.flowtotal b{color:var(--text);font-family:"JetBrains Mono",monospace}

/* ---------- instructors ---------- */
.ins{display:grid;grid-template-columns:136px 1fr;gap:16px;padding:16px;border-radius:var(--r);background:var(--panel);border:1px solid var(--edge);border-top-width:2px;position:relative}
.ins + .ins{margin-top:12px}
.ins.host{border-top-color:var(--neon)}
.ins.guest{border-top-color:var(--p)}
@media (min-width:620px){.ins{grid-template-columns:200px 1fr;gap:22px;padding:20px}}
.ins figure{margin:0;aspect-ratio:4/5;border-radius:10px;overflow:hidden;background:var(--raise);position:relative}
.ins figure img,.ins figure video{width:100%;height:100%;object-fit:cover}
.ins figure .fit{object-fit:contain;background:var(--ps)}
/* the corner badge sits over the top right, so the role line stops short of it */
.ins .role{font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;padding-right:46px}
.ins.host .role{color:var(--neon)}
.ins.guest .role{color:var(--pt)}
.ins .nm{font-family:"Bebas Neue",sans-serif;font-size:30px;line-height:1;margin:6px 0 3px}
.ins .mod{font-size:13px;font-weight:600;color:var(--muted);margin-bottom:10px}
.ins .tagline{font-size:13px;font-weight:600;color:var(--text);margin:-4px 0 10px}
.ins p{font-size:14px;margin:0;color:var(--muted)}
.ins .corner{position:absolute;top:14px;right:14px}
.phph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:12px;background:radial-gradient(90% 80% at 50% 30%,var(--ps),transparent 75%),var(--raise)}
.phph b{font-family:"Bebas Neue",sans-serif;font-weight:400;font-size:34px;color:var(--pt);line-height:1}
.phph span{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700;line-height:1.45}

/* ---------- partner brand card ----------
   Used in place of a portrait when the partner has no photo. Her ground, her
   colour, her name set in a serif: it reads as a wordmark rather than a hole. */
.brandcard{background:var(--pbg);display:flex;align-items:center;justify-content:center;padding:16px}
.brandcard .bc{text-align:center;color:var(--pon-bg);width:100%}
.brandcard .bc-top{display:block;font-family:"Playfair Display",Georgia,serif;font-size:clamp(19px,4.6vw,26px);line-height:1;letter-spacing:.01em}
.brandcard .bc-rule{display:block;height:1px;background:currentColor;opacity:.45;margin:9px auto;width:72%}
.brandcard .bc-bot{display:block;font-family:"Playfair Display",Georgia,serif;font-size:clamp(11px,2.6vw,14px);letter-spacing:.22em;line-height:1}
.brandcard .bc-tag{display:block;margin-top:14px;font-family:Montserrat,sans-serif;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;opacity:.7}

/* ---------- ticket tiers ---------- */
.tiers{display:grid;gap:9px;margin-bottom:18px}
.tier{display:flex;align-items:baseline;gap:14px;background:var(--panel);border:1px solid var(--edge);border-radius:10px;padding:14px 16px}
.tier .tn{font-size:15px;font-weight:700}
.tier .tq{font-size:12.5px;color:var(--muted)}
.tier .tp{margin-left:auto;font-family:"JetBrains Mono",monospace;font-size:17px;font-weight:700;white-space:nowrap}
.tier .tnote{display:block;font-size:12.5px;color:var(--muted);font-weight:400;margin-top:2px}
/* a sold-out tier stays visible and struck through: it is a reason to buy the
   next one, not something to hide */
/* the cheap tier is the reason to buy today, so it reads first */
.tier.hot{border-color:var(--neon);background:linear-gradient(180deg,rgba(234,79,158,.10),rgba(255,255,255,.96))}
.tier.hot .tn{font-size:16px;letter-spacing:.02em}
.tier .tbadge{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:var(--neon);padding:3px 7px;border-radius:5px;vertical-align:2px;margin-left:6px}
.tier.gone .tbadge{background:var(--raise);color:var(--dim)}
.tier.gone{opacity:.55}
.tier.gone .tn,.tier.gone .tp{text-decoration:line-through;text-decoration-thickness:1px}
.tier.gone .tq{color:var(--stop)}

/* the cards are buttons: they open the checkout */
button.tier{width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer;align-items:center;transition:border-color .15s,background .15s,transform .1s}
button.tier .tmain{display:block;min-width:0}
button.tier .tgo{flex:0 0 auto;font-size:12px;font-weight:700;color:#fff;background:var(--neon);padding:7px 11px;border-radius:7px;white-space:nowrap}
button.tier:hover:not(:disabled){border-color:var(--neon-dim);background:rgba(255,45,186,.06)}
button.tier:active:not(:disabled){transform:scale(.99)}
button.tier:focus-visible{outline:2px solid var(--neon);outline-offset:3px}
button.tier:disabled{cursor:not-allowed}
button.tier:disabled .tgo{background:var(--raise);color:var(--dim)}
@media (max-width:480px){
  button.tier{flex-wrap:wrap;row-gap:8px}
  button.tier .tmain{flex:1 1 100%}
  button.tier .tgo{margin-left:12px}
}

/* Ticket Tailor's own fallback link is left in its code untouched, as they
   ask, but hidden: the branded fallback below the box does the same job and
   is always present, including with JavaScript off. */
.ticketbox .tt-widget-fallback{display:none}

/* a way out when the embedded checkout does not load */
.tbfallback{margin:12px 0 0;font-size:13px;text-align:center}
.tbfallback a{color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.tbfallback a:hover{color:var(--text)}
.tbfallback.promote a{display:flex;justify-content:center;align-items:center;background:var(--neon);color:#fff;text-decoration:none;font-weight:700;font-size:15px;padding:15px 20px;border-radius:10px}
.tbfallback.promote a:hover{filter:brightness(1.12)}

/* the widget lights up when a card sends the buyer to it */
.ticketbox:focus{outline:none}
.ticketbox.pulse{animation:tbpulse 1.4s ease-out 1}
@keyframes tbpulse{
  0%{box-shadow:0 0 0 0 rgba(234,79,158,.45);border-color:var(--neon)}
  100%{box-shadow:0 0 0 18px rgba(234,79,158,0);border-color:var(--edge)}
}

/* ---------- included / bring ---------- */
.incgrid{display:grid;grid-template-columns:1fr;gap:9px}
@media (min-width:520px){.incgrid{grid-template-columns:1fr 1fr}}
.inc{background:var(--panel);border:1px solid var(--edge);border-radius:10px;padding:14px;display:flex;gap:12px;align-items:flex-start}
.inc .ic{width:28px;height:28px;flex:0 0 28px;border-radius:8px;display:grid;place-items:center;background:rgba(234,79,158,.10);color:var(--neon)}
.inc.pa .ic{background:var(--ps);color:var(--pt)}
.inc .it{font-size:14px;font-weight:600;line-height:1.3}
.inc .is{font-size:12.5px;color:var(--muted);margin-top:2px}
.blist{list-style:none;margin:0;padding:0}
.blist li{display:flex;gap:12px;align-items:center;font-size:15px;padding-block:12px;border-top:1px solid var(--edge)}
.blist li:first-child{border-top:none}
.blist li i{width:7px;height:7px;border-radius:50%;background:var(--neon);flex:0 0 7px}
.blist li.pa i{background:var(--p)}
.blist li small{color:var(--dim);font-size:12.5px;margin-left:auto;text-align:right}

/* ---------- callouts ---------- */
.callout{border-radius:var(--r);padding:16px 18px;font-size:14px;line-height:1.55;margin-top:16px}
.callout b{display:block;font-size:15px;margin-bottom:4px}
.callout.camera{background:rgba(178,107,255,.08);border:1px solid rgba(178,107,255,.3);color:#DFCCF5}
.callout.camera b{color:var(--purple)}
.callout.note{background:rgba(255,200,87,.07);border:1px solid rgba(255,200,87,.25);color:#E9DAB8}
.callout.note b{color:var(--gold)}

/* ---------- location ---------- */
.loc .vn{font-size:19px;font-weight:700}
.loc .ad{font-size:14px;color:var(--muted);margin-top:4px}
.loc .mapbox{margin-block:16px;border-radius:var(--r);overflow:hidden;border:1px solid var(--edge);aspect-ratio:16/9;background:var(--raise)}
.loc .mapbox iframe{width:100%;height:100%;border:0;display:block}
.loc .mapph{width:100%;height:100%;position:relative;background:
  repeating-linear-gradient(0deg,rgba(23,19,26,.05) 0 1px,transparent 1px 22px),
  repeating-linear-gradient(90deg,rgba(23,19,26,.05) 0 1px,transparent 1px 22px),
  linear-gradient(115deg,#18222b 0 46%,#1d2a1f 46% 72%,#1a1517 72%)}
.loc .mapph .pin{position:absolute;left:52%;top:40%;width:18px;height:18px;border-radius:50% 50% 50% 0;background:var(--neon);transform:rotate(-45deg);box-shadow:0 0 16px var(--neon)}
.loc .kv{display:grid;grid-template-columns:96px 1fr;gap:14px;font-size:14px;padding-block:13px;border-top:1px solid var(--edge)}
.loc .kv b{font-weight:700}
.loc .kv span{color:var(--muted)}

/* ---------- faq ---------- */
.faq details{border-top:1px solid var(--edge)}
.faq details:last-of-type{border-bottom:1px solid var(--edge)}
.faq summary{list-style:none;cursor:pointer;padding:16px 32px 16px 0;font-size:16px;font-weight:600;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:13px;font-size:22px;color:var(--neon);font-weight:400}
.faq details[open] summary::after{content:"\2212"}
.faq .a{font-size:14.5px;color:var(--muted);padding-bottom:18px;margin:0}

/* ---------- fine print ---------- */
.policy{display:grid;gap:1px;background:var(--edge);border-radius:var(--r);overflow:hidden}
.policy > div{background:var(--panel);padding:14px 16px;display:grid;grid-template-columns:104px 1fr;gap:14px;font-size:13.5px}
.policy b{font-weight:700}
.policy span{color:var(--muted)}

/* ---------- tickets ---------- */
.ticketbox{background:var(--panel);border:1px solid var(--edge);border-radius:var(--r);padding:18px;min-height:220px}
.ticketbox .placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px;min-height:184px;border:1px dashed var(--edge-hi);border-radius:10px;padding:20px}
.ticketbox .placeholder b{font-family:"Bebas Neue",sans-serif;font-weight:400;font-size:26px}
.ticketbox .placeholder span{font-size:13px;color:var(--muted);max-width:40ch}

/* ---------- waiver and legal text ---------- */
.consent{display:flex;gap:14px;align-items:flex-start;background:var(--panel);border:1px solid var(--edge-hi);border-radius:var(--r);padding:16px 18px;margin-bottom:18px}
.consent .cbox{flex:0 0 24px;width:24px;height:24px;border-radius:6px;background:var(--neon);color:#fff;display:grid;place-items:center;font-size:14px;font-weight:700}
.consent p{margin:0;font-size:15px;font-weight:600;line-height:1.5}
details.legal{border-top:1px solid var(--edge);border-bottom:1px solid var(--edge)}
details.legal summary{list-style:none;cursor:pointer;padding:16px 32px 16px 0;font-size:16px;font-weight:600;position:relative}
details.legal summary::-webkit-details-marker{display:none}
details.legal summary::after{content:"+";position:absolute;right:4px;top:13px;font-size:22px;color:var(--neon)}
details.legal[open] summary::after{content:"\2212"}
details.legal .legaltext{max-height:420px;overflow-y:auto;padding:4px 16px 20px 0;scrollbar-width:thin;scrollbar-color:var(--edge-hi) transparent}
.legaltext{font-size:14.5px;line-height:1.7;color:var(--muted)}
.legaltext h3{font-family:Montserrat,sans-serif;font-size:14px;font-weight:700;letter-spacing:.04em;color:var(--text);margin:26px 0 8px;text-transform:none}
.legaltext h3:first-child{margin-top:8px}
.legaltext p{margin:0 0 12px}
.legaltext ul{margin:0 0 14px;padding-left:20px}
.legaltext li{margin-bottom:5px}
.legaltext .caps{background:var(--raise);border-left:3px solid var(--neon);border-radius:0 8px 8px 0;padding:14px 16px;color:var(--text);font-weight:600;font-size:13.5px;line-height:1.6;letter-spacing:.01em}
.legalfoot{font-size:12.5px;color:var(--dim);margin-top:16px}
.legalfoot a{color:var(--muted)}

.legalpage main{padding-bottom:60px}
.legalh1{font-family:Montserrat,sans-serif;font-size:clamp(23px,5vw,30px);font-weight:700;line-height:1.25;letter-spacing:-.01em;margin:0 0 20px;text-wrap:balance}
.legalmeta{display:grid;gap:1px;background:var(--edge);border-radius:var(--r);overflow:hidden;margin-bottom:28px}
.legalmeta > div{background:var(--panel);padding:12px 16px;display:grid;grid-template-columns:104px 1fr;gap:14px;font-size:14px}
.legalmeta b{font-weight:700}
.legalmeta span{color:var(--muted)}
.signblock{margin-top:30px;border:1px dashed var(--edge-hi);border-radius:var(--r);padding:20px}
.signblock ul{margin:0 0 14px;padding-left:20px;font-size:14.5px;color:var(--muted)}
.signblock li{margin-bottom:5px}
.signblock p{font-size:13.5px;color:var(--muted);margin:0}
@media print{
  .site,.foot,.signblock{display:none}
  html,body{background:#fff}
  body,.legaltext,.legalmeta span{color:#000}
  .legaltext .caps{background:none;border-left:2px solid #000}
  .legalmeta > div{background:none;border-bottom:1px solid #ccc}
}

/* ---------- final cta ---------- */
.finalcta{padding-block:56px;text-align:center;position:relative;overflow:hidden;border-top:1px solid var(--edge);
  background:radial-gradient(60% 70% at 15% 0%,rgba(234,79,158,.16),transparent 70%),
             radial-gradient(60% 70% at 88% 100%,var(--ps),transparent 70%),var(--ink)}
.finalcta .cl{font-size:clamp(17px,4.6vw,21px);font-weight:600;margin:18px auto 10px;max-width:24ch}
.finalcta .mt{font-size:14px;color:var(--muted);margin-bottom:22px}
.finalcta .btn{min-width:240px}

/* ---------- sticky buy ---------- */
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:50;background:rgba(245,245,245,.95);backdrop-filter:blur(10px);border-top:1px solid var(--edge);
  padding-block:11px;padding-bottom:calc(11px + env(safe-area-inset-bottom,0px));transform:translateY(110%);transition:transform .22s ease}
.sticky.on{transform:translateY(0)}
.sticky .in{display:flex;align-items:center;gap:14px}
.sticky .price{font-family:"JetBrains Mono",monospace;font-size:18px;font-weight:700;line-height:1.1}
.sticky .spots{font-size:11.5px;font-weight:700;color:var(--neon)}
.sticky .btn{padding:13px 20px;font-size:14px;margin-left:auto}
@media (min-width:760px){.sticky{display:none}}

/* ---------- hub ---------- */
/* top of the home: copy left, Cat on the trampoline right. The photo is 4:5
   and never cropped, so her body and the trampoline stay whole at any width */
.hubhero{padding-block:34px 30px;background:radial-gradient(90% 90% at 0% 0%,rgba(234,79,158,.14),transparent 62%)}
.hubhero .hh{display:grid;gap:22px;align-items:center}
@media (min-width:820px){.hubhero{padding-block:52px 40px}.hubhero .hh{grid-template-columns:1fr 340px;gap:40px}}
.hubhero .eyebrow{display:block;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--neon);margin-bottom:12px}
.hubhero h1{font-size:clamp(38px,11vw,62px);line-height:.92}
.hubhero p{font-size:16px;color:var(--muted);max-width:46ch;margin-top:16px}
.hubhero .hhcta{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.hubhero .hhcta .btn{flex:1 1 200px;text-align:center}
@media (min-width:620px){.hubhero .hhcta .btn{flex:0 0 auto;padding-inline:26px}}
.hubhero .hhimg{margin:0;border-radius:16px;overflow:hidden;border:1px solid var(--edge-hi);background:var(--raise)}
/* aspect-ratio plus cover, so a future photo with different proportions is
   cropped to the panel rather than stretched */
.hubhero .hhimg img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;display:block}
.filters{display:flex;gap:8px;flex-wrap:wrap;padding-block:18px}
.filters button{font-size:13px;font-weight:600;padding:8px 14px;border-radius:999px;border:1px solid var(--edge-hi);color:var(--muted)}
.filters button[aria-pressed="true"]{border-color:var(--neon);color:var(--text);background:rgba(255,45,186,.1)}
.evlist{display:grid;gap:12px;padding-bottom:10px}
/* the home is a list, not an article, so it gets more room than the 660px
   reading column the event page uses */
body.hub .wrap,body.sundays .wrap{max-width:960px}
@media (min-width:900px){body.hub .pastgrid{grid-template-columns:repeat(3,1fr)}}
.listh{font-size:clamp(26px,6vw,34px);margin:34px 0 4px}
.listp{font-size:14px;color:var(--muted);margin:0 0 16px}
.empty{font-size:14px;color:var(--muted);padding:18px 0}
/* the list keeps its place between events, so the page never restructures */
.soon{display:flex;flex-direction:column;gap:6px;border:1px dashed var(--edge-hi);border-radius:var(--r);padding:22px 20px}
.soon b{font-family:"Bebas Neue",sans-serif;font-weight:400;font-size:26px;line-height:1}
.soon span{font-size:14px;color:var(--muted)}
.evcard{display:grid;grid-template-columns:70px 1fr;gap:14px 16px;background:var(--panel);border:1px solid var(--edge);border-radius:var(--r);padding:16px;text-decoration:none;transition:border-color .15s}
@media (min-width:620px){.evcard{grid-template-columns:70px 1fr auto;align-items:center}}
.evcard:hover{border-color:var(--neon-dim)}
/* one line per fact, so the label, the name and the time stop running together */
.evcard .ebody{display:flex;flex-direction:column;gap:4px;min-width:0}
.evcard .kind{align-self:start;font-size:10.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--neon);background:rgba(234,79,158,.10);padding:4px 8px;border-radius:5px;margin-bottom:4px}
/* --pt is the accent lightened for dark grounds; on her light beige chip the
   readable one is --pon-bg, the accent itself */
.evcard .kind.co{color:var(--pon-bg);background:var(--pbg)}
.evcard .eside{grid-column:2/-1;display:flex;align-items:center;gap:10px}
@media (min-width:620px){.evcard .eside{grid-column:auto;flex-direction:column;align-items:flex-end;gap:2px;text-align:right}}
.evcard .go{font-size:12px;font-weight:700;color:var(--muted);margin-left:auto}
@media (min-width:620px){.evcard .go{margin:6px 0 0}}
.evcard .datebox{border-radius:10px;background:var(--raise);display:flex;flex-direction:column;align-items:center;justify-content:center;padding-block:10px;align-self:start}
.evcard .dm{font-size:10.5px;font-weight:700;letter-spacing:.12em;color:var(--neon)}
.evcard .dd{font-family:"Bebas Neue",sans-serif;font-size:34px;line-height:.95}
.evcard .dw{font-size:10px;font-weight:700;letter-spacing:.1em;color:var(--muted)}
.evcard .et{font-size:18px;font-weight:700;margin:0;line-height:1.25}
.evcard .em{font-size:13px;color:var(--muted)}
.evcard .left{font-size:12px;font-weight:700;color:var(--neon)}
.evcard .pr{font-family:"JetBrains Mono",monospace;font-size:17px;font-weight:700}

/* previous experiences: proof that these evenings actually happen */
.pastgrid{display:grid;gap:14px;grid-template-columns:1fr}
@media (min-width:620px){.pastgrid{grid-template-columns:repeat(2,1fr)}}
.pastcard{margin:0;border:1px solid var(--edge);border-radius:var(--r);overflow:hidden;background:var(--panel)}
.pastcard img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block}
.pastcard figcaption{display:flex;flex-direction:column;gap:3px;padding:14px 16px 16px}
.pastcard .pk{font-size:10.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--neon)}
/* only ever set from a real, checkable fact, like a room that actually sold out */
.pastcard .pb{font-style:normal;color:#fff;background:var(--neon);padding:2px 7px;border-radius:5px;margin-left:6px}
.pastcard .pt{font-size:16px;font-weight:700}
.pastcard .pm{font-size:13px;color:var(--muted)}
/* the next event, solo or collab. Ours is the ground and the lockup; on a
   collab the partner gets a named line and her colour, not half the card */
.feature{display:block;text-decoration:none;border-radius:16px;padding:22px;border:1px solid var(--neon-dim);
  background:linear-gradient(135deg,rgba(234,79,158,.14),rgba(255,255,255,.96) 68%);margin-bottom:22px}
.feature.collab{border-color:var(--pl);background:linear-gradient(135deg,rgba(234,79,158,.14),rgba(255,255,255,.96) 58%,var(--ps) 100%)}
.feature .top{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.feature .lbl{font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--neon)}
.feature .lockup{display:block;font-size:clamp(30px,8vw,44px)}
.feature .t,.feature .m{display:block}
.feature .with{display:block;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-top:8px}
/* her name on its own line, so a phone never splits it across two */
.feature .with b{display:block;color:var(--pt);font-weight:700;font-size:15px;letter-spacing:.02em;margin-top:2px}
.feature .t{font-size:17px;font-weight:700;margin-top:12px}
.feature .m{font-size:13px;color:var(--muted);margin-top:8px}
/* cross-sell for the on-demand product: quiet on purpose. No neon fill, no
   big type, sits under the events so the ticket CTAs stay the loudest thing
   on the page. */
.online{margin-block:30px 0}
.online .ol{border:1px solid var(--edge);border-radius:var(--r);background:var(--panel);padding:22px 20px;max-width:52ch}
.online .oe{display:block;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
/* on a phone the section headings shrink to 26px too, so this drops further:
   the cross-sell must never read as loud as the event sections */
.online .oh{font-family:"Bebas Neue",sans-serif;font-size:22px;line-height:1.02;margin:0}
@media (min-width:760px){.online .oh{font-size:26px}}
.online .ob{font-size:14px;color:var(--muted);margin:8px 0 0}
.online .op{font-family:"JetBrains Mono",monospace;font-size:14px;font-weight:700;margin:10px 0 0}
.online .btn{margin-top:14px}

.notify{border:1px dashed var(--edge-hi);border-radius:var(--r);padding:20px;margin-block:26px}
.notify h3{font-size:24px}
.notify p{font-size:14px;color:var(--muted);margin:6px 0 14px}
.notify form{display:flex;gap:8px;flex-wrap:wrap}
.notify input{flex:1 1 200px;min-width:0;padding:13px 14px;border-radius:9px;border:1px solid var(--edge-hi);background:var(--ink);color:var(--text);font:inherit;font-size:15px}
.notify input:focus{outline:none;border-color:var(--neon)}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--edge);padding-block:32px 40px;margin-top:10px}
.foot .logo{font-family:"Bebas Neue",sans-serif;font-size:22px}
.foot .logo b{color:var(--neon);font-weight:400}
.foot p{font-size:12.5px;color:var(--dim);margin:10px 0 0;line-height:1.6}
.foot a{color:var(--muted)}
.foot .links{display:flex;gap:16px;flex-wrap:wrap;margin-top:14px;font-size:12.5px}

/* private mode banner while the page is not public yet */
.privbar{background:var(--gold);color:#17131A;font-size:12.5px;font-weight:700;text-align:center;padding:9px 16px;letter-spacing:.02em}

/* ==========================================================================
   Jump & Sculpt Sundays: the weekly class. Same brand, its own pages.
   ========================================================================== */
.sunhero{position:relative;overflow:hidden;border-bottom:1px solid var(--edge);
  background:radial-gradient(120% 90% at 10% 0%,rgba(234,79,158,.16),transparent 60%)}
.sunhero .wrap{padding-block:40px 34px}
@media (min-width:820px){.sunhero .wrap{padding-block:64px 52px}}
.sunhero .eyebrow{display:block;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--neon);margin-bottom:12px}
.sunhero h1{font-size:clamp(38px,10vw,64px);line-height:.94}
.sunhero .free{color:var(--neon)}
.sunhero .sub{font-size:16px;color:var(--muted);max-width:44ch;margin-top:16px}
.sunhero .facts{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.sunhero .facts span{font-size:12.5px;font-weight:600;padding:7px 11px;border-radius:8px;background:var(--raise);color:var(--text)}
.sunhero .cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.sunhero .cta .btn{flex:1 1 220px;text-align:center}
@media (min-width:620px){.sunhero .cta .btn{flex:0 0 auto;padding-inline:28px}}

.splits{display:grid;gap:12px;margin-top:18px}
@media (min-width:620px){.splits{grid-template-columns:1fr 1fr}}
.split{background:var(--panel);border:1px solid var(--edge);border-radius:var(--r);padding:18px 20px}
.split b{display:block;font-family:"Bebas Neue",sans-serif;font-weight:400;font-size:30px;line-height:1;color:var(--neon)}
.split .t{font-size:15px;font-weight:700;margin-top:6px}
.split p{font-size:14px;color:var(--muted);margin:6px 0 0}
.splittotal{margin-top:12px;font-family:"JetBrains Mono",monospace;font-size:14px;font-weight:700;color:var(--muted)}

.plans{display:grid;gap:12px;margin-top:18px}
@media (min-width:760px){.plans{grid-template-columns:repeat(3,1fr);align-items:start}}
.plan{position:relative;background:var(--panel);border:1px solid var(--edge);border-radius:14px;padding:22px 20px;display:flex;flex-direction:column;gap:6px}
.plan.hot{border-color:var(--neon);background:linear-gradient(180deg,rgba(234,79,158,.10),rgba(255,255,255,.96))}
.plan .pname{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.plan .pprice{font-family:"Bebas Neue",sans-serif;font-size:46px;line-height:1}
.plan .pper{font-family:"JetBrains Mono",monospace;font-size:13px;color:var(--neon);font-weight:700}
.plan .pnote{font-size:14px;color:var(--muted)}
.plan .btn{margin-top:12px;text-align:center}
.plan .tag{position:absolute;top:-10px;right:14px;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  background:var(--neon);color:#fff;padding:4px 9px;border-radius:5px}
.plansnote{font-size:13px;color:var(--muted);margin-top:14px;max-width:62ch}

.classlist{display:grid;gap:10px;margin-top:18px}
.cday{display:grid;grid-template-columns:62px 1fr auto;gap:14px;align-items:center;
  background:var(--panel);border:1px solid var(--edge);border-radius:12px;padding:14px 16px}
.cday .d{text-align:center}
.cday .dm{display:block;font-size:10.5px;font-weight:700;letter-spacing:.12em;color:var(--neon)}
.cday .dd{display:block;font-family:"Bebas Neue",sans-serif;font-size:30px;line-height:1}
.cday .ct{display:block;font-size:15px;font-weight:700}
.cday .cs{display:block;font-size:13px;color:var(--muted);margin-top:2px}
.cday .cs.few{color:var(--gold,#FFC857);font-weight:700}
.cday .cs.none{color:var(--stop,var(--stop));font-weight:700}
.cday .btn{padding:10px 16px;font-size:13px}
.cday.gone{background:#171317}
.cday.gone .ct{color:var(--muted);font-weight:600}

.loc{background:var(--panel);border:1px solid var(--edge);border-radius:var(--r);padding:20px;margin-top:18px}
.loc .when{font-family:"Bebas Neue",sans-serif;font-size:30px;line-height:1.05}
.loc .where{font-size:15px;font-weight:700;margin-top:10px}
.loc .addr{font-size:14px;color:var(--muted);margin-top:2px}
.loc .park{font-size:13px;color:var(--muted);margin-top:10px}
.loc .btn{margin-top:14px}

/* booking form */
.bform{display:grid;gap:12px;max-width:460px}
.bform label{font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.bform input{width:100%;padding:13px 14px;border-radius:10px;border:1px solid var(--edge-hi);background:var(--ink);color:var(--text);font:inherit;font-size:16px}
.bform input:focus{outline:none;border-color:var(--neon)}
.bform .row{display:flex;flex-direction:column;gap:6px}
.bform .check{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--muted);text-transform:none;letter-spacing:0;font-weight:400}
.bform .check input{width:18px;height:18px;flex:0 0 auto;margin-top:2px}
.bmsg{font-size:14px;margin-top:4px}
.bmsg.err{color:var(--stop,var(--stop))}
.bmsg.ok{color:var(--go,var(--go))}
.booked{background:var(--panel);border:1px solid var(--neon);border-radius:14px;padding:24px 22px}
.booked h2{font-size:34px}
.booked .k{display:flex;gap:12px;font-size:15px;margin-top:10px}
.booked .k b{color:var(--muted);font-weight:600;min-width:64px}

/* admin, deliberately plain */
.adm{display:grid;gap:10px}
.adm table{width:100%;border-collapse:collapse;font-size:13.5px}
.adm th{text-align:left;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:8px 6px;border-bottom:1px solid var(--edge)}
.adm td{padding:9px 6px;border-bottom:1px solid var(--edge)}
.adm .who b{display:block}
.adm .who span{color:var(--muted);font-size:12px}
.adm button{font-size:12px;font-weight:700;padding:6px 9px;border-radius:7px;border:1px solid var(--edge-hi);color:var(--text)}
.adm button:hover{border-color:var(--neon)}
.adm .pill{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;padding:3px 7px;border-radius:5px;background:var(--raise);color:var(--muted)}
.adm .pill.free{background:rgba(255,45,186,.16);color:var(--neon)}
.adm .pill.att{background:rgba(23,121,90,.12);color:var(--go,var(--go))}
.adm .pill.no{background:rgba(192,24,79,.10);color:var(--stop,var(--stop))}


/* an input with no visible focus ring is unusable by keyboard */
.bform input:focus-visible,.notify input:focus-visible{outline:2px solid var(--neon);outline-offset:2px}
/* the pricing cards line up even when one has no per class line */
@media (min-width:760px){.plan{height:100%}.plan .btn{margin-top:auto}}
.plan .btn{white-space:nowrap}
.noscript{border:1px dashed var(--edge-hi);border-radius:var(--r);padding:18px 20px;margin-top:16px;font-size:14px;color:var(--muted)}


/* ==========================================================================
   Light brand, 8 Oct 2026. The rules above were written for a black page;
   these are the handful of places that need more than a token swap.
   ========================================================================== */

/* the hero still runs white type over a photograph, so the scrim stays dark */
.hero .lockup,.hero h1,.hero .herobar,.hero .herobar *{color:#fff}
.hero .herobar .meta span{background:rgba(23,19,26,.55);color:#fff}

/* the chrome carries the logo now, not a text lockup */
.site .logo img,.foot .logo img{display:block;height:30px;width:auto}
.site .logo{display:flex;align-items:center}
.foot .logo{margin-bottom:16px}

/* buttons: the pill from the Experience, not the square neon block */
.btn{border-radius:9999px;letter-spacing:.06em;text-transform:uppercase;font-weight:700}
.btn:not(.ghost){box-shadow:0 10px 28px -10px rgba(234,79,158,.7)}

/* cards sit on white with a soft pink edge instead of glowing on black */
.evcard,.pastcard,.feature,.online .ol,.notify,.tier,.ins figure,.recap .rc{background:var(--panel)}
.section + .section{border-top:1px solid var(--edge)}

/* the preview bar reads as a note, not an alarm */
.privbar{background:var(--blush);color:var(--text);border-bottom:1px solid var(--edge)}

/* the accent bar that marks a section on the Experience and on Sundays, so
   the three sites read as one */
.listh::after,.section > .wrap > h2::after{
  content:"";display:block;width:64px;height:4px;border-radius:2px;
  background:var(--neon);margin:14px 0 18px;
}