/* ==========================================================================
   CLAYTON PHILLIPS JIU JITSU
   Design language: THE CUT — sheared corners, hard diagonals, heavy condensed
   display type, oversized background lettering, pink light-leak gradients.
   Palette: pink #FF77B7 (hot pink #FF3B8D on hover) · black #000201 · white #FFFFFF
   Plus one off-white (#FBF7F9 = white + ~2% pink) for section grounds.
   Every other neutral is an alpha mix of black or white. No other hues.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  --pink:#FF77B7;
  --pink-hot:#FF3B8D;   /* every button/control hover state */
  --pink-ink:#B80059;   /* pink TEXT on a light ground: 6.6:1 on white vs 2.45:1 for --pink */
  --on-pink:#000201;    /* text on a pink fill: 8.5:1 on --pink, 6.2:1 on --pink-hot */
  --black:#000201;
  --white:#FFFFFF;
  --off:#FBF7F9;   /* off-white = white + ~2% pink */

  --ink-1:#000201;
  --ink-2:#05070a;
  --ink-3:#0a0e15;
  --ink-4:#111722;

  --on-dark:#FFFFFF;
  --on-dark-mute:rgba(255,255,255,.68);
  --on-dark-faint:rgba(255,255,255,.44);
  --on-light:#000201;
  --on-light-mute:rgba(0,2,1,.68);
  --on-light-faint:rgba(0,2,1,.46);

  --line-dark:rgba(255,255,255,.14);
  --line-light:rgba(0,2,1,.12);

  --pink-08:rgba(255,119,183,.08);
  --pink-14:rgba(255,119,183,.14);
  --pink-28:rgba(255,119,183,.28);
  --pink-55:rgba(255,119,183,.55);
  --pink-hot-24:rgba(255,59,141,.24);

  /* gradients derived only from the approved palette */
  --grad-pink:linear-gradient(112deg,#FF77B7 0%,#FFA0CD 52%,#FF77B7 100%);
  --steel:#8b95a8;
  --steel-light:#c6cede;
  --grad-steel:linear-gradient(112deg,#4a566e 0%,#232b3b 100%);
  --grad-steel-band:linear-gradient(92deg,#1c2330 0%,#05070a 100%);
  --grad-ink:linear-gradient(168deg,var(--ink-4) 0%,var(--ink-1) 68%);
  --grad-leak:radial-gradient(78% 62% at 88% 6%,rgba(139,149,168,.16) 0%,transparent 62%);
  --grad-leak-l:radial-gradient(70% 60% at 6% 0%,rgba(139,149,168,.12) 0%,transparent 60%);
  --grad-text:linear-gradient(180deg,var(--white) 0%,rgba(255,255,255,.35) 100%);

  --display:"Anton","Archivo Black","Arial Narrow",Impact,sans-serif;
  --body:"Chivo","Helvetica Neue",Helvetica,Arial,sans-serif;

  --fs-eyebrow:clamp(.68rem,.63rem + .16vw,.8rem);
  --fs-body-s:clamp(.9rem,.87rem + .12vw,.95rem);
  --fs-body:clamp(1rem,.96rem + .2vw,1.08rem);
  --fs-lead:clamp(1.06rem,.98rem + .5vw,1.3rem);
  --fs-h4:clamp(1.02rem,.97rem + .3vw,1.18rem);
  --fs-h3:clamp(1.45rem,1.2rem + 1.1vw,2.1rem);
  --fs-h2:clamp(2.1rem,1.5rem + 3vw,4rem);
  --fs-h1:clamp(2.5rem,1.7rem + 4.2vw,5.2rem);
  --fs-hero:clamp(2.3rem,1.2rem + 6.2vw,7rem);
  --fs-numeral:clamp(3.4rem,2rem + 6vw,8rem);
  --fs-bigtype:clamp(3.5rem,2.4rem + 9vw,11rem);

  --gutter:clamp(1.15rem,.7rem + 2.2vw,2.5rem);
  --band-y:clamp(3.75rem,2.5rem + 6vw,8rem);
  --band-y-tight:clamp(2.75rem,2rem + 4vw,5.5rem);
  --maxw:1280px;
  --maxw-narrow:820px;

  --cut:13px;
  --cut-sm:9px;
  --cut-lg:clamp(20px,2.2vw,34px);
  --radius:0px;
  --radius-lg:0px;

  --header-h:116px;
  --header-h-sm:70px;

  --ease:cubic-bezier(.19,.72,.28,1);

  /* the shear that defines the brand: cut top-left + bottom-right */
  --clip-btn:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));
  --clip-btn-sm:polygon(var(--cut-sm) 0,100% 0,100% calc(100% - var(--cut-sm)),calc(100% - var(--cut-sm)) 100%,0 100%,0 var(--cut-sm));
  /* mirrored shear for media: cut top-right + bottom-left */
  --clip-frame:polygon(0 0,calc(100% - var(--cut-lg)) 0,100% var(--cut-lg),100% 100%,var(--cut-lg) 100%,0 calc(100% - var(--cut-lg)));
  --clip-card:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,0 100%);
}

/* ---------- 2. Reset & base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html:focus-within{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto}}
body{
  margin:0;font-family:var(--body);font-size:var(--fs-body);line-height:1.66;
  font-feature-settings:"kern" 1,"liga" 1;
  color:var(--on-light);background:var(--white);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
body.is-locked{overflow:hidden}
h1,h2,h3,h4,h5{margin:0}
h1,h2{
  font-family:var(--display);font-weight:400;
  line-height:.92;letter-spacing:-.012em;text-transform:uppercase;
}
h1{font-size:var(--fs-h1)}
h2{font-size:var(--fs-h2)}
h3{font-family:var(--display);font-weight:400;font-size:var(--fs-h3);
  line-height:1.02;letter-spacing:-.006em;text-transform:uppercase}
h4{font-family:var(--body);font-size:var(--fs-h4);font-weight:800;
  letter-spacing:-.008em;line-height:1.28}
p{margin:0}
p+p{margin-top:1.05em}
ul,ol{margin:0;padding:0}
img,picture,svg,iframe{display:block;max-width:100%}
/* a class-level `display` beats the [hidden] UA rule — this keeps hidden hidden
   (the contact form's spam honeypot was visible because of it) */
[hidden]{display:none!important}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,textarea,select{font:inherit;color:inherit}
address{font-style:normal}
::selection{background:var(--pink);color:var(--on-pink)}

:focus-visible{outline:2px solid var(--pink);outline-offset:3px}
.skip-link{
  position:absolute;left:var(--gutter);top:.5rem;z-index:200;
  transform:translateY(-180%);background:var(--pink);color:var(--on-pink);
  padding:.75rem 1.15rem;font-weight:800;font-size:.9rem;
  clip-path:var(--clip-btn-sm);transition:transform .18s var(--ease);
}
.skip-link:focus-visible{transform:translateY(0)}
.visually-hidden{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* film grain — static, sits above everything, never intercepts a click */
body::after{
  content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;
  opacity:.05;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px;
}
@media print{body::after{display:none}}

/* ---------- 3. Layout ---------- */
.shell{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);position:relative;z-index:2}
.shell--narrow{max-width:var(--maxw-narrow)}

.band{position:relative;padding-block:var(--band-y);isolation:isolate;overflow:hidden}
.band--tight{padding-block:var(--band-y-tight)}
.band--light{background:var(--white);color:var(--on-light)}
.band--light-grad{
  background-color:var(--white);
  background-image:
    radial-gradient(46% 38% at 99% 4%,rgba(139,149,168,.12) 0%,transparent 68%),
    radial-gradient(42% 34% at 0% 99%,rgba(139,149,168,.08) 0%,transparent 70%),
    linear-gradient(168deg,rgba(139,149,168,0) 0%,rgba(139,149,168,.05) 46%,rgba(139,149,168,0) 100%);
  color:var(--on-light);
}
.band--light-grad p,.band--light-grad li{color:var(--on-light-mute)}
/* keep the aside callout crisp against the tinted ground */
.band--light-grad .callout,.band--soft .callout{background:var(--white)}
.band--off{background:var(--off);color:var(--on-light)}
.band--soft{
  background:
    radial-gradient(34% 26% at 100% 0%,rgba(139,149,168,.11) 0%,transparent 72%),
    radial-gradient(30% 24% at 0% 100%,rgba(139,149,168,.06) 0%,transparent 74%),
    linear-gradient(174deg,var(--white) 0%,rgba(139,149,168,.04) 50%,var(--white) 100%);
  background-color:var(--white);
  color:var(--on-light);
}
.band--soft p,.band--soft li{color:var(--on-light-mute)}
.band--dark{background:var(--ink-1);color:var(--on-dark)}
.band--ink{background:var(--grad-leak),var(--grad-ink);color:var(--on-dark)}
.band--dark p,.band--ink p,.band--dark li,.band--ink li{color:var(--on-dark-mute)}
.band--light p,.band--off p,.band--light li,.band--off li{color:var(--on-light-mute)}

/* hard diagonal seam between bands */
.band--shear{
  margin-top:calc(-1 * clamp(28px,4vw,72px));
  padding-top:calc(var(--band-y) + clamp(28px,4vw,72px));
  clip-path:polygon(0 clamp(28px,4vw,72px),100% 0,100% 100%,0 100%);
}
.band--shear-b{
  margin-bottom:calc(-1 * clamp(28px,4vw,72px));
  padding-bottom:calc(var(--band-y) + clamp(28px,4vw,72px));
  clip-path:polygon(0 0,100% 0,100% calc(100% - clamp(28px,4vw,72px)),0 100%);
}
.band--shear.band--shear-b{
  clip-path:polygon(0 clamp(28px,4vw,72px),100% 0,100% calc(100% - clamp(28px,4vw,72px)),0 100%);
}

/* mat-grid texture */
.band--dark::before,.band--ink::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(0deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:74px 74px;
  mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);
}
.band--no-texture::before{display:none}

/* oversized background lettering — decorative, aria-hidden in markup */
.bigtype{
  position:absolute;z-index:0;pointer-events:none;user-select:none;
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:var(--fs-bigtype);line-height:.72;letter-spacing:-.04em;
  white-space:nowrap;
  color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.085);
}
.band--light .bigtype,.band--off .bigtype{-webkit-text-stroke-color:rgba(0,2,1,.07)}
.bigtype--tr{top:.2em;right:-.03em}
.bigtype--bl{bottom:.08em;left:-.03em}
.bigtype--fill{
  -webkit-text-stroke:0;
  background:linear-gradient(180deg,rgba(139,149,168,.16),rgba(139,149,168,0) 78%);
  -webkit-background-clip:text;background-clip:text;
}

/* ---------- 4. Type helpers ---------- */
.eyebrow{
  display:flex;align-items:center;gap:.7rem;
  font-family:var(--display);font-weight:400;font-size:var(--fs-eyebrow);
  letter-spacing:.24em;text-transform:uppercase;color:var(--on-light);
  margin:0 0 1.2rem;
}
.eyebrow::before{content:"";width:30px;height:3px;background:var(--pink);flex:none;
  transform:skewX(-24deg)}
.eyebrow--num::before{display:none}
.eyebrow__num{color:inherit;opacity:.62;font-variant-numeric:tabular-nums}
/* photo heroes are dark grounds too: .phero and .ahero were missing here, so
   their eyebrow rendered in --on-light black over the photograph */
.band--dark .eyebrow,.band--ink .eyebrow,.cta .eyebrow,
.phero .eyebrow,.ahero .eyebrow,.hero .eyebrow{color:var(--on-dark)}
.eyebrow__num::after{content:"";display:inline-block;width:22px;height:3px;background:var(--pink);
  vertical-align:.24em;margin-left:.7rem;opacity:.65;transform:skewX(-24deg)}

.lead{font-size:var(--fs-lead);line-height:1.55;max-width:56ch}
.measure{max-width:65ch}
.balance{text-wrap:balance}
.pink{color:var(--pink)}

/* gradient-filled display text */
.gradtext{
  background:var(--grad-text);-webkit-background-clip:text;background-clip:text;
  color:transparent;
}
.pinktext{background:var(--grad-pink);-webkit-background-clip:text;background-clip:text;color:transparent}

/* pink slab behind a run of text */
.slab{
  display:inline-block;position:relative;padding:0 .34em .04em;color:var(--white);
  isolation:isolate;white-space:nowrap;max-width:100%;
}
.slab::before{
  content:"";position:absolute;inset:.06em 0 .1em;z-index:-1;
  background:var(--grad-pink);
  clip-path:polygon(.32em 0,100% 0,calc(100% - .32em) 100%,0 100%);
}

.mat-line{border:0;height:3px;background:var(--line-light);margin:0;position:relative;
  transform:skewX(-24deg);width:calc(100% - 8px);margin-left:4px}
.mat-line::after{content:"";position:absolute;left:0;top:0;width:76px;height:3px;background:var(--pink)}
.band--dark .mat-line,.band--ink .mat-line{background:var(--line-dark)}

.section-head{max-width:56ch;margin-bottom:clamp(2rem,1.4rem + 2vw,3.5rem)}
.section-head h2{margin-bottom:1.15rem}
.section-head--split{
  max-width:none;display:grid;gap:clamp(1.25rem,.8rem + 2vw,3.25rem);
  grid-template-columns:1fr;align-items:end;
}
@media (min-width:900px){
  .section-head--split{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
  .section-head--split>*:last-child{padding-bottom:.4rem}
}

/* ---------- 5. Buttons: the sheared blade ---------- */
.btn{
  /* --fg stays white here: it is the fallback for a .btn with no variant class
     (the hero's secondary CTA), whose fill is dark glass, not pink. Every
     pink-filled variant sets --fg:var(--on-pink) for itself below. */
  --bd:var(--pink);--fill:var(--pink);--fg:var(--white);
  position:relative;display:inline-block;padding:2px;
  background:var(--bd);clip-path:var(--clip-btn);
  transition:transform .22s var(--ease),background .22s var(--ease);
}
.btn__i{
  position:relative;display:flex;align-items:center;justify-content:center;gap:.65rem;
  min-height:54px;padding:.95rem 1.7rem;
  font-family:var(--display);font-weight:400;font-size:clamp(.9rem,.86rem + .12vw,1rem);
  letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;
  color:var(--fg);background:var(--fill);clip-path:var(--clip-btn);
  overflow:hidden;transition:color .22s var(--ease),background .22s var(--ease);
}
/* diagonal sheen sweep */
.btn__i::after{
  content:"";position:absolute;top:-60%;bottom:-60%;left:-40%;width:38%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.34),transparent);
  transform:skewX(-22deg) translateX(-140%);
  transition:transform .55s var(--ease);pointer-events:none;
}
.btn:hover .btn__i::after,.btn:focus-visible .btn__i::after{transform:skewX(-22deg) translateX(420%)}
.btn__arrow{flex:none;transition:transform .3s var(--ease)}
.btn:hover .btn__arrow,.btn:focus-visible .btn__arrow{transform:translateX(6px)}
.btn:hover{transform:translate(-2px,-2px)}
.btn:active{transform:translate(0,0)}
.btn:focus-visible{outline-offset:5px}

.btn--primary{--bd:var(--pink);--fill:var(--pink);--fg:var(--on-pink)}
.btn--primary:hover,.btn--primary:focus-visible{--bd:var(--pink-hot);--fill:var(--pink-hot);--fg:var(--on-pink)}
.btn--ghost-light{--bd:rgba(255,255,255,.46);--fill:rgba(0,2,1,.74);--fg:var(--on-dark)}
.btn--ghost-light .btn__i{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.btn--ghost-light:hover,.btn--ghost-light:focus-visible{--bd:var(--pink-hot);--fill:var(--pink-hot-24);--fg:var(--white)}
.btn--ghost-dark{--bd:rgba(0,2,1,.3);--fill:var(--white);--fg:var(--on-light)}
.btn--ghost-dark:hover,.btn--ghost-dark:focus-visible{--bd:var(--pink-hot);--fill:var(--pink-hot);--fg:var(--on-pink)}
.btn--sm .btn__i{min-height:46px;padding:.6rem 1.2rem;font-size:.84rem}
.btn--sm{--cut:10px}

.btn-row{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:clamp(1.6rem,1.2rem + 1vw,2.4rem)}
.btn-row--center{justify-content:center}
@media (max-width:430px){
  .btn-row{gap:.7rem}
  .btn-row .btn{width:100%}
  .btn__i{white-space:normal;text-align:center}
}

.textlink{
  display:inline-flex;align-items:center;gap:.5rem;min-height:44px;
  font-family:var(--display);font-weight:400;font-size:.95rem;
  letter-spacing:.07em;text-transform:uppercase;color:var(--pink);
  position:relative;
}
.textlink::before{
  content:"";position:absolute;left:0;right:0;bottom:8px;height:3px;
  background:var(--pink);transform:skewX(-24deg) scaleX(1);transform-origin:left;
  opacity:.4;transition:opacity .2s var(--ease),transform .28s var(--ease);
}
.textlink:hover::before{opacity:1;transform:skewX(-24deg) scaleX(1.04)}
.textlink:hover{gap:.72rem}
/* On light grounds the brand pink is only 2.45:1, so pink text steps down to
   --pink-ink. Fills, rules, dots and anything on a dark band keep --pink. */
.band--light .textlink,.band--off .textlink,.band--soft .textlink,
.band--light-grad .textlink,.band--light .pink,.band--off .pink,
.band--soft .pink,.band--light-grad .pink{color:var(--pink-ink)}
.band--light .textlink::before,.band--off .textlink::before,
.band--soft .textlink::before,.band--light-grad .textlink::before{background:var(--pink-ink)}

/* ---------- 6. Marquee ---------- */
.marquee{
  position:relative;overflow:hidden;background:var(--grad-steel-band);color:var(--white);
  border-block:3px solid var(--pink);padding-block:.7rem;z-index:3;
}
.marquee__track{display:flex;width:max-content;animation:slide 34s linear infinite}
.marquee ul{display:flex;list-style:none;gap:2.6rem;padding-right:2.6rem;flex:none}
.marquee li{
  font-family:var(--display);font-weight:400;font-size:clamp(.82rem,.78rem + .2vw,1rem);
  letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;
  display:flex;align-items:center;gap:2.6rem;color:var(--white);
}
.marquee li::after{content:"";width:7px;height:7px;background:var(--white);
  transform:skewX(-24deg);flex:none}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .marquee__track{animation:none}
  .marquee ul:nth-child(n+2){display:none}
  .marquee ul{flex-wrap:wrap;gap:1.2rem;padding:0}
}
.marquee--dark{background:var(--ink-1);color:var(--on-dark);border-block:3px solid var(--pink)}
.marquee--dark li{color:var(--on-dark)}
.marquee--dark li::after{background:var(--pink)}

/* ---------- 7. Header: utility strip + floating sheared nav plate ----------
   Not an edge-to-edge bar. A thin pink info strip sits across the top and the
   navigation itself is a detached, sheared glass plate inset from the viewport,
   with the logo left, the links centred, and the booking blade right. On scroll
   the strip collapses and the plate tightens. */
.site-header{
  position:fixed;inset:0 0 auto;z-index:100;
  background:none;pointer-events:none;
}
.site-header>*{pointer-events:auto}

/* --- the utility strip --- */
.nav-util{
  height:34px;overflow:hidden;
  background:linear-gradient(92deg,#232b3b 0%,rgba(17,23,34,.96) 40%,
             rgba(0,2,1,.96) 100%);
  transition:height .3s var(--ease),opacity .25s var(--ease);
}
.is-scrolled .nav-util{height:0;opacity:0}
.nav-util__in{
  height:34px;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  font-family:var(--display);font-weight:400;font-size:.68rem;
  letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.94);
}
.nav-util__in p{margin:0}
@media (max-width:719px){.nav-util__loc{display:none}}
.nav-util__act{display:flex;align-items:center;gap:clamp(.9rem,2.4vw,1.6rem)}
.nav-util__act a{border-bottom:2px solid rgba(255,255,255,.42)}
.nav-util__act a:hover{border-bottom-color:var(--white)}
.nav-util__act span{display:flex;align-items:center;gap:.5rem;color:rgba(255,255,255,.72)}
.nav-util__act span::before{
  content:"";flex:none;width:7px;height:7px;background:var(--pink);transform:skewX(-24deg);
}

/* --- the plate --- */
.nav{
  position:relative;isolation:isolate;
  height:72px;display:flex;align-items:center;gap:1rem;
  width:calc(100% - var(--gutter) * 2);max-width:var(--maxw);
  margin:.6rem auto 0;
  padding-left:clamp(.9rem,.6rem + 1.2vw,1.5rem);
  padding-right:clamp(1.5rem,1.1rem + 1.6vw,2.3rem);
  transition:height .3s var(--ease),margin .3s var(--ease);
}
/* surface drawn as a pseudo-element, so the dropdown is free to overflow it */
.nav::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(140deg,rgba(12,17,25,.9) 0%,rgba(0,2,1,.86) 62%);
  -webkit-backdrop-filter:blur(15px) saturate(1.15);backdrop-filter:blur(15px) saturate(1.15);
  border:1px solid rgba(255,255,255,.13);
  clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,22px 100%,0 calc(100% - 22px));
  box-shadow:0 24px 52px -28px rgba(0,2,1,.95);
  transition:background .3s var(--ease),border-color .3s var(--ease);
}
.nav::after{
  content:"";position:absolute;left:0;top:0;height:3px;width:36%;z-index:1;
  background:linear-gradient(90deg,#8b95a8,rgba(139,149,168,.2));pointer-events:none;
}
.is-scrolled .nav{height:60px;margin-top:.45rem}
.is-scrolled .nav::before{
  background:linear-gradient(140deg,rgba(12,17,25,.985) 0%,rgba(0,2,1,.97) 62%);
  border-color:rgba(255,255,255,.17);
}

.hero,.phero,.ahero{padding-top:calc(var(--header-h) + clamp(2.25rem,1.6rem + 3.4vw,4.5rem))}
[id]{scroll-margin-top:calc(var(--header-h-sm) + 1.25rem)}

.nav__brand{display:flex;align-items:center;flex:none}
.nav__brand img{width:auto;height:50px;transition:height .3s var(--ease)}
.is-scrolled .nav__brand img{height:42px}

/* links sit in the centre of the plate, not bunched against the button */
.nav__list{display:none;list-style:none;align-items:center;gap:.15rem;margin-inline:auto}
@media (min-width:1140px){.nav__list{display:flex}}
.nav__link{
  position:relative;isolation:isolate;display:block;padding:.58rem .85rem;
  font-family:var(--display);font-weight:400;font-size:.82rem;
  letter-spacing:.13em;text-transform:uppercase;
  color:var(--on-dark-mute);transition:color .2s var(--ease);
}
/* a sheared plate that fills, instead of an underline that grows */
.nav__link::after{
  content:"";position:absolute;inset:.16rem .05rem;z-index:-1;
  background:rgba(255,255,255,.09);
  clip-path:polygon(9px 0,100% 0,calc(100% - 9px) 100%,0 100%);
  opacity:0;transform:scaleY(.55);transform-origin:bottom;
  transition:opacity .2s var(--ease),transform .22s var(--ease);
}
.nav__link:hover{color:var(--white)}
.nav__link:hover::after{opacity:1;transform:scaleY(1)}
.nav__link[aria-current="page"]{color:var(--white)}
.nav__link[aria-current="page"]::after{opacity:1;transform:scaleY(1);background:rgba(255,255,255,.16)}

.nav__group{position:relative}
.nav__toggle{display:flex;align-items:center;gap:.42rem}
.nav__toggle svg{flex:none;transition:transform .26s var(--ease)}
.nav__toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
.nav__toggle[aria-expanded="true"]{color:var(--white)}
.nav__panel{
  position:absolute;top:calc(100% + .85rem);left:50%;min-width:392px;padding:.5rem;
  counter-reset:np;
  background:linear-gradient(152deg,rgba(17,23,34,.99) 0%,rgba(0,2,1,.99) 74%);
  border:1px solid rgba(255,255,255,.14);
  clip-path:polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,20px 100%,0 calc(100% - 20px));
  box-shadow:0 34px 74px -22px rgba(0,2,1,.95);list-style:none;
  opacity:0;visibility:hidden;transform:translate(-50%,-10px);
  transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s;
}
.nav__group:hover .nav__panel,
.nav__toggle[aria-expanded="true"]+.nav__panel{opacity:1;visibility:visible;transform:translate(-50%,0)}
.nav__panel li{counter-increment:np}
.nav__panel a{
  display:block;padding:.78rem 2.6rem .78rem .95rem;position:relative;
  transition:background .18s var(--ease);
}
.nav__panel a::before{
  content:"";position:absolute;left:0;top:.55rem;bottom:.55rem;width:3px;background:var(--pink);
  transform:skewX(-20deg) scaleY(0);transform-origin:top;transition:transform .22s var(--ease);
}
.nav__panel a::after{
  content:"0" counter(np);position:absolute;right:.95rem;top:50%;transform:translateY(-50%);
  font-family:var(--display);font-weight:400;font-size:.95rem;letter-spacing:.04em;
  color:var(--steel-light);opacity:.45;transition:opacity .2s var(--ease);
}
.nav__panel a:hover{background:rgba(255,255,255,.06)}
.nav__panel a:hover::after{opacity:.9}
.nav__panel a:hover::before,.nav__panel a[aria-current="page"]::before{transform:skewX(-20deg) scaleY(1)}
.nav__panel a[aria-current="page"]{background:rgba(255,255,255,.06)}
.nav__panel strong{
  display:block;font-family:var(--display);font-weight:400;font-size:1rem;
  letter-spacing:.03em;text-transform:uppercase;color:var(--on-dark);
}
.nav__panel span{display:block;font-size:.79rem;color:var(--on-dark-faint);line-height:1.45;margin-top:.2rem}

.nav__cta{display:none;flex:none;margin-left:.4rem}
@media (min-width:1140px){.nav__cta{display:inline-block}}

/* burger: a sheared pink blade, X on open */
.nav__burger{
  position:relative;display:block;flex:none;margin-left:auto;
  width:58px;height:46px;
  background:var(--grad-pink);
  clip-path:polygon(11px 0,100% 0,calc(100% - 11px) 100%,0 100%);
  transition:filter .2s var(--ease);
}
@media (min-width:1140px){.nav__burger{display:none}}
.nav__burger:hover{filter:brightness(1.1)}
.nav__burger span{
  position:absolute;left:50%;top:50%;width:22px;height:3px;margin:-1.5px 0 0 -11px;
  background:var(--white);
  transition:transform .3s var(--ease),opacity .16s var(--ease);
}
.nav__burger span:nth-child(1){transform:translateY(-7px)}
.nav__burger span:nth-child(3){transform:translateY(7px)}
.nav__burger[aria-expanded="true"] span:nth-child(1){transform:rotate(45deg)}
.nav__burger[aria-expanded="true"] span:nth-child(2){opacity:0;transform:scaleX(.2)}
.nav__burger[aria-expanded="true"] span:nth-child(3){transform:rotate(-45deg)}

/* --- menu: a full-screen overlay, not a side panel --- */
.drawer{position:fixed;inset:0;z-index:99;visibility:hidden;pointer-events:none}
.drawer.is-open{visibility:visible;pointer-events:auto}
.drawer__scrim{position:absolute;inset:0;background:rgba(0,2,1,.55);opacity:0;
  transition:opacity .3s var(--ease)}
.drawer.is-open .drawer__scrim{opacity:1}
.drawer__panel{
  position:absolute;inset:0;width:100%;
  display:flex;flex-direction:column;
  padding:calc(var(--header-h) + 1rem) var(--gutter) 2rem;
  background:
    radial-gradient(74% 52% at 100% 0%,rgba(139,149,168,.18) 0%,transparent 62%),
    linear-gradient(168deg,var(--ink-4) 0%,var(--ink-1) 70%);
  overflow-y:auto;overscroll-behavior:contain;
  opacity:0;transform:translateY(-2.5%);
  transition:opacity .3s var(--ease),transform .38s var(--ease);
}
.drawer.is-open .drawer__panel{opacity:1;transform:none}
.drawer__panel::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(0deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:74px 74px;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 78%);
  mask-image:linear-gradient(180deg,#000,transparent 78%);
}
@media (prefers-reduced-motion:reduce){.drawer__panel,.drawer__scrim{transition:none}}
.drawer__list{
  position:relative;z-index:1;list-style:none;counter-reset:d;
  display:flex;flex-direction:column;
  width:100%;max-width:var(--maxw);margin-inline:auto;
}
.drawer__list>li{counter-increment:d;border-bottom:1px solid var(--line-dark)}
.drawer__link{
  display:flex;align-items:center;gap:clamp(.8rem,3vw,1.4rem);
  width:100%;min-height:66px;padding:.75rem 0;
  font-family:var(--display);font-weight:400;
  font-size:clamp(1.75rem,1.1rem + 4.4vw,3.1rem);line-height:1;
  letter-spacing:.01em;text-transform:uppercase;color:var(--on-dark);
  transition:color .2s var(--ease);
}
.drawer__link::before{
  content:"0" counter(d);flex:none;
  font-size:clamp(.72rem,.66rem + .3vw,.86rem);letter-spacing:.2em;
  color:var(--steel-light);opacity:.7;align-self:center;
}
.drawer__link:hover{color:var(--pink)}
.drawer__link[aria-current="page"]{color:var(--pink)}
.drawer__link[aria-current="page"]::after{content:"";width:11px;height:11px;background:var(--pink);
  transform:skewX(-24deg);flex:none;margin-left:auto}
.drawer__sub-toggle svg{flex:none;margin-left:auto;width:20px;height:20px;
  transition:transform .26s var(--ease);color:var(--pink)}
.drawer__sub-toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
.drawer__sub{list-style:none;overflow:hidden;max-height:0;transition:max-height .32s var(--ease)}
.drawer__sub.is-open{max-height:420px}
.drawer__sub a{
  display:flex;align-items:center;min-height:54px;padding:.7rem 0 .7rem 1.2rem;
  margin-bottom:.1rem;position:relative;
  font-family:var(--display);font-weight:400;font-size:1.05rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--on-dark-mute);
}
.drawer__sub a::before{content:"";position:absolute;left:0;top:.65rem;bottom:.65rem;width:3px;
  background:var(--line-dark);transform:skewX(-20deg)}
.drawer__sub a:hover,.drawer__sub a[aria-current="page"]{color:var(--white)}
.drawer__sub a:hover::before,.drawer__sub a[aria-current="page"]::before{background:var(--pink)}
.drawer__foot{
  position:relative;z-index:1;margin-top:auto;padding-top:clamp(1.6rem,1.2rem + 2vw,2.75rem);
  width:100%;max-width:var(--maxw);margin-inline:auto;
  display:grid;gap:1.15rem;
}
@media (min-width:720px){
  .drawer__foot{grid-template-columns:minmax(0,auto) minmax(0,1fr);align-items:center;
    gap:clamp(1.5rem,4vw,3rem)}
}
.drawer__foot .btn{width:100%}
@media (min-width:720px){.drawer__foot .btn{width:auto}}
.drawer__meta{
  display:flex;flex-wrap:wrap;gap:.4rem 1.5rem;
  font-family:var(--display);font-weight:400;font-size:.76rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--on-dark-faint);
}
.drawer__meta a{color:var(--on-dark);border-bottom:2px solid var(--pink-28)}
.drawer__meta a:hover{border-bottom-color:var(--pink)}

/* ---------- 8. Hero: split panel ----------
   The photograph lives inside a sheared panel instead of sitting under a scrim, so
   no type ever lands on a face and the image reads at full contrast. */
.hero{
  position:relative;overflow:hidden;isolation:isolate;
  background:var(--grad-leak-l),var(--grad-ink);
  color:var(--on-dark);
  padding-top:calc(var(--header-h) + clamp(1.25rem,.9rem + 2.6vw,2.75rem));
  padding-bottom:clamp(2.5rem,2rem + 4vw,5rem);
}
.hero__cols{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:calc(100% / 6) 100%;
  mask-image:linear-gradient(180deg,transparent,#000 20%,#000 82%,transparent);
}
.hero__rail{
  position:absolute;left:0;top:0;bottom:0;width:clamp(4px,.45vw,7px);z-index:1;
  background:linear-gradient(180deg,transparent,var(--steel-light) 22%,var(--steel-light) 70%,transparent);
}

.hero__grid{
  position:relative;z-index:2;
  width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);
  display:grid;gap:clamp(1.75rem,1.4rem + 2.4vw,3rem);
}
@media (min-width:1024px){
  .hero__grid{
    grid-template-columns:minmax(0,1fr) minmax(0,.9fr);
    align-items:center;
    gap:clamp(2rem,1rem + 3.6vw,4.5rem);
  }
}

/* --- media panel --- */
.hero__media{position:relative;order:-1}
@media (min-width:1024px){.hero__media{order:0}}
.hero__panel{
  position:relative;overflow:hidden;background:var(--ink-3);
  aspect-ratio:16/10;clip-path:var(--clip-frame);
}
@media (min-width:1024px){.hero__panel{aspect-ratio:4/5}}
.hero__panel img{width:100%;height:100%;object-fit:cover;object-position:17% 50%}
.hero__panel::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(198deg,rgba(255,119,183,.2) 0%,transparent 38%,
              transparent 58%,rgba(0,2,1,.58) 100%);
}
.hero__chamfer{
  position:absolute;z-index:2;right:0;top:0;pointer-events:none;
  width:calc(var(--cut-lg) * 2.2);height:calc(var(--cut-lg) * 2.2);
  background:var(--grad-pink);clip-path:polygon(100% 0,100% 100%,0 0);
}
.hero__badge{
  position:absolute;z-index:3;left:0;bottom:clamp(1.1rem,3vw,2.25rem);
  display:flex;align-items:center;gap:.6rem;
  margin:0;padding:.72rem 1.5rem .72rem 1.15rem;
  background:var(--grad-pink);color:var(--on-pink);
  clip-path:polygon(0 0,100% 0,calc(100% - 15px) 100%,0 100%);
  font-family:var(--display);font-weight:400;font-size:clamp(.74rem,.7rem + .18vw,.86rem);
  letter-spacing:.17em;text-transform:uppercase;white-space:nowrap;
  box-shadow:0 20px 44px -20px rgba(0,2,1,.95);
}
.hero__badge svg{flex:none}
@media (min-width:1024px){.hero__badge{left:calc(-1 * clamp(.75rem,1.4vw,1.5rem))}}

/* --- headline: outline / solid / gradient --- */
.hero h1{font-size:var(--fs-hero);line-height:.84;letter-spacing:-.022em;margin:0}
.hline{display:block}
.hline--out{
  font-size:.44em;letter-spacing:.045em;margin-bottom:.12em;
  color:transparent;-webkit-text-stroke:2.2px rgba(255,255,255,.74);
}
.hline--big{font-size:1em}
.hline--grad{
  font-size:.63em;margin-top:.08em;
  background:var(--grad-pink);-webkit-background-clip:text;background-clip:text;
  color:transparent;
}
/* if text-stroke or background-clip:text is unsupported, keep the words readable */
@supports not (-webkit-text-stroke:1px red){
  .hline--out{color:var(--on-dark-mute);-webkit-text-stroke:0}
  .prow__num,.pswitch__n,.bigtype{color:rgba(139,149,168,.55);-webkit-text-stroke:0}
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .hline--grad,.gradtext,.pinktext,.stats b,.dropin-card__price{
    background:none;color:var(--pink);
  }
}

.hero__sub{
  font-size:var(--fs-lead);color:var(--on-dark-mute);max-width:46ch;line-height:1.55;
  margin-top:clamp(1.15rem,1rem + 1vw,1.75rem);
}

/* --- proof strip --- */
.hero__proof{
  list-style:none;display:flex;flex-wrap:wrap;
  gap:.65rem clamp(1rem,2.2vw,2rem);
  margin-top:clamp(1.5rem,1.2rem + 1.4vw,2.25rem);
  padding-top:clamp(1.15rem,1rem + 1vw,1.6rem);
  border-top:1px solid var(--line-dark);
}
.hero__proof li{
  display:flex;align-items:center;gap:.6rem;
  font-family:var(--display);font-weight:400;font-size:.75rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--on-dark-mute);
}
.hero__proof li::before{
  content:"";flex:none;width:7px;height:7px;background:var(--pink);transform:skewX(-24deg);
}
.hero__proof a{color:var(--on-dark);border-bottom:2px solid var(--pink-28)}
.hero__proof a:hover{border-bottom-color:var(--pink)}

@media (prefers-reduced-motion:no-preference){
  .hero__panel img{animation:drift 36s var(--ease) infinite alternate}
}
@keyframes drift{from{transform:scale(1.02)}to{transform:scale(1.09)}}

/* inner-page hero */
.phero{
  position:relative;background:var(--ink-1);color:var(--on-dark);
  overflow:hidden;isolation:isolate;
  padding-bottom:clamp(2.75rem,2.2rem + 3.6vw,5rem);
}
.phero--media{min-height:min(62svh,600px);display:flex;align-items:flex-end}
.phero__media{position:absolute;inset:0;z-index:-3}
.phero__media img{width:100%;height:100%;object-fit:cover}
.phero__scrim{
  position:absolute;inset:0;z-index:-2;
  background:linear-gradient(180deg,rgba(0,2,1,.74) 0%,rgba(0,2,1,.26) 15%,transparent 30%),
             linear-gradient(95deg,rgba(0,2,1,.95) 0%,rgba(0,2,1,.78) 42%,rgba(0,2,1,.3) 100%),
             linear-gradient(0deg,var(--ink-1),transparent 58%);
}
@media (max-width:899px){
  .phero__scrim{background:linear-gradient(180deg,rgba(0,2,1,.85) 0%,rgba(0,2,1,.66) 14%,rgba(0,2,1,.5) 38%,var(--ink-1))}
}

/* A lighter scrim for heroes whose photo should carry the section -- the stock
   shots needed a heavy wash, real photography does not. Opted into per page so
   the slots still on placeholder art keep the darker treatment. */
.phero--light .phero__scrim{
  background:linear-gradient(180deg,rgba(0,2,1,.58) 0%,rgba(0,2,1,.18) 16%,transparent 32%),
             linear-gradient(95deg,rgba(0,2,1,.8) 0%,rgba(0,2,1,.52) 44%,rgba(0,2,1,.12) 100%),
             linear-gradient(0deg,var(--ink-1),transparent 52%);
}
@media (max-width:899px){
  .phero--light .phero__scrim{
    background:linear-gradient(180deg,rgba(0,2,1,.72) 0%,rgba(0,2,1,.5) 14%,rgba(0,2,1,.34) 38%,var(--ink-1));
  }
}
.phero__inner{position:relative;z-index:2;width:100%;max-width:var(--maxw);
  margin-inline:auto;padding-inline:var(--gutter)}

/* ---- split hero: copy left, square photo right ----
   For heroes where the photograph is better contained than blown up full-bleed.
   The pink is line work only -- an offset outline echoing the sheared frame and
   a chamfer filling the cut corner -- so the photo stays the loudest thing. */
.phero--split{
  background:var(--grad-leak),var(--grad-ink);
  display:flex;align-items:center;
  min-height:min(62svh,600px);
}
.phero__split{display:grid;gap:clamp(2rem,1.4rem + 3.4vw,4rem);align-items:center}
@media (min-width:900px){
  .phero__split{grid-template-columns:minmax(0,1.06fr) minmax(300px,.94fr)}
}
.phero--split .phero__copy{position:relative;z-index:2;min-width:0}
.phero--split h1{max-width:20ch}
.phero--split .lead{max-width:46ch}

.phero__visual{position:relative;width:min(100%,500px);margin-inline:auto}
@media (min-width:900px){.phero__visual{margin-inline:0 auto}}
/* the offset pink outline, behind and down-right of the frame */
.phero__outline{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  transform:translate(clamp(9px,1.1vw,15px),clamp(9px,1.1vw,15px));
  border:2px solid var(--pink);
  clip-path:var(--clip-frame);
}
.phero__square{
  position:relative;z-index:1;aspect-ratio:1;overflow:hidden;
  background:var(--ink-3);clip-path:var(--clip-frame);
  box-shadow:0 34px 70px -30px rgba(0,2,1,.9);
}
.phero__square img{width:100%;height:100%;object-fit:cover}
/* pink chamfer filling the corner the clip cuts away */
.phero__chamfer{
  position:absolute;z-index:2;right:0;top:0;pointer-events:none;
  width:calc(var(--cut-lg) * 2);height:calc(var(--cut-lg) * 2);
  background:var(--grad-pink);
  clip-path:polygon(100% 0,100% 100%,0 0);
}
.pos-kidsgroupsq img{object-position:50% 42%}
.phero h1{max-width:24ch;margin-bottom:1.15rem;line-height:.9}
.phero .lead{color:var(--on-dark-mute)}
.phero--plain{
  background:
    radial-gradient(58% 48% at 88% 6%,rgba(255,119,183,.15) 0%,transparent 62%),
    radial-gradient(40% 38% at 6% 94%,rgba(255,119,183,.09) 0%,transparent 56%),
    var(--grad-ink);
  min-height:min(52svh,460px);display:flex;align-items:center;
}
.phero--plain .bigtype{-webkit-text-stroke-width:2px;top:auto;bottom:28%}
.phero--plain::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(0deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:74px 74px;
  mask-image:linear-gradient(180deg,transparent,#000 34%,#000 100%);
}
.phero__rail{position:absolute;left:0;top:0;bottom:0;width:clamp(4px,.5vw,7px);z-index:1;
  background:linear-gradient(180deg,transparent,var(--steel-light) 34%,var(--steel-light) 74%,transparent)}

/* decorative hero background: greyscale photo + pink duotone, so a page that has
   already shown every large photo can still carry a header image as texture */
.phero--duo .phero__media img{filter:grayscale(1) contrast(1.3) brightness(.6)}
.phero__duo{
  position:absolute;inset:0;z-index:-2;pointer-events:none;mix-blend-mode:color;
  background:linear-gradient(118deg,rgba(139,149,168,.32) 0%,rgba(139,149,168,.9) 54%,rgba(139,149,168,.46) 100%);
}
@supports not (mix-blend-mode:color){
  .phero__duo{background:linear-gradient(122deg,rgba(139,149,168,.4),transparent 70%);mix-blend-mode:normal}
}
.phero--duo .phero__scrim{z-index:-1}

/* ---------- 8b. About hero: full-bleed photo, split head, fact rail ---------- */
.ahero{
  --fseam:clamp(26px,3.6vw,60px);
  position:relative;isolation:isolate;overflow:hidden;
  display:flex;flex-direction:column;
  background:var(--ink-1);color:var(--on-dark);
  min-height:min(80svh,760px);
  padding-top:calc(var(--header-h) + clamp(1.9rem,1.4rem + 2.6vw,3.75rem));
}
.ahero__media{position:absolute;inset:0;z-index:-4}
.ahero__media img{width:100%;height:100%;object-fit:cover;object-position:58% 34%;
  filter:contrast(1.16) saturate(.8) brightness(.94)}
.ahero__grade{
  position:absolute;inset:0;z-index:-3;
  background:
    radial-gradient(42% 38% at 97% 10%,rgba(139,149,168,.18) 0%,transparent 66%),
    linear-gradient(97deg,rgba(0,2,1,.96) 0%,rgba(0,2,1,.88) 26%,rgba(0,2,1,.44) 58%,rgba(0,2,1,.62) 100%),
    linear-gradient(180deg,rgba(0,2,1,.88) 0%,rgba(0,2,1,.3) 17%,transparent 32%),
    linear-gradient(0deg,var(--ink-1) 0%,rgba(0,2,1,.86) 20%,rgba(0,2,1,.18) 56%,transparent 74%);
}
/* photo-free About hero: no photograph to grade, so the ground is the ink
   gradient plus one pink light-leak, and the oversized lettering carries it. */
.ahero--plain{background:var(--grad-ink);min-height:min(64svh,560px)}
.ahero--plain .ahero__grade{
  background:
    radial-gradient(58% 46% at 88% 4%,rgba(255,119,183,.16) 0%,transparent 62%),
    radial-gradient(42% 40% at 6% 96%,rgba(255,119,183,.10) 0%,transparent 58%),
    linear-gradient(0deg,var(--ink-1) 0%,rgba(0,2,1,.5) 26%,transparent 62%);
}
.ahero--plain .ahero__mesh{
  -webkit-mask-image:linear-gradient(103deg,#000 0%,#000 46%,transparent 82%);
  mask-image:linear-gradient(103deg,#000 0%,#000 46%,transparent 82%);
}
/* drop it clear of the floating nav plate rather than letting it tuck behind */
.ahero--plain .bigtype{-webkit-text-stroke-width:2px;top:auto;bottom:34%}

.ahero__mesh{
  position:absolute;inset:0;z-index:-2;pointer-events:none;
  background-image:
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(0deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:74px 74px;
  -webkit-mask-image:linear-gradient(103deg,#000 0%,#000 28%,transparent 58%);
  mask-image:linear-gradient(103deg,#000 0%,#000 28%,transparent 58%);
}
.ahero__edge{
  position:absolute;right:0;top:0;bottom:0;z-index:3;width:clamp(4px,.5vw,7px);
  background:linear-gradient(180deg,transparent,var(--steel-light) 28%,var(--steel-light) 60%,transparent);
}
.ahero__tag{
  display:none;position:absolute;z-index:3;
  right:clamp(1.15rem,1.7vw,2rem);top:36%;
  writing-mode:vertical-rl;
  font-family:var(--display);font-weight:400;font-size:.74rem;
  letter-spacing:.42em;text-transform:uppercase;color:rgba(255,255,255,.5);
}
@media (min-width:1200px){.ahero__tag{display:block}}

.ahero__inner{
  position:relative;z-index:2;flex:1;display:flex;flex-direction:column;
  width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);
  padding-bottom:clamp(1.7rem,1.3rem + 1.5vw,2.5rem);
}
.ahero__head{margin-top:auto}
.ahero h1{
  font-size:clamp(2.55rem,1.65rem + 4.3vw,5.2rem);
  line-height:.86;letter-spacing:-.02em;max-width:13ch;
}
.ahero .eyebrow{margin-bottom:clamp(.9rem,.7rem + .6vw,1.35rem)}


/* fact rail: ink strip cut away on a rising diagonal */
.ahero__rail{
  position:relative;z-index:2;margin-top:clamp(1.85rem,1.4rem + 1.9vw,2.9rem);
  background:var(--ink-1);
  clip-path:polygon(0 var(--fseam),100% 0,100% 100%,0 100%);
  padding-top:calc(var(--fseam) + clamp(1.15rem,.9rem + 1vw,1.75rem));
  padding-bottom:clamp(1.3rem,1rem + 1.1vw,1.9rem);
}
.ahero__rail::before{
  content:"";position:absolute;left:0;right:0;top:0;height:calc(var(--fseam) + 4px);
  background:var(--grad-pink);
  clip-path:polygon(0 var(--fseam),100% 0,100% 4px,0 calc(var(--fseam) + 4px));
}
.ahero__facts{
  list-style:none;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1rem,.8rem + 1vw,1.6rem);
}
.ahero__facts li{position:relative;padding-left:clamp(.85rem,.65rem + .8vw,1.45rem)}
.ahero__facts li::before{
  content:"";position:absolute;left:0;top:.15rem;bottom:.15rem;width:2px;
  background:var(--line-dark);transform:skewX(-24deg);
}
.ahero__facts li:first-child::before{background:var(--pink)}
.ahero__fnum{
  display:block;font-family:var(--display);font-weight:400;font-size:.72rem;
  letter-spacing:.22em;color:var(--steel-light);opacity:.66;margin-bottom:.35rem;
}
.ahero__facts b{
  display:block;font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(1rem,.9rem + .5vw,1.35rem);line-height:1.04;color:var(--white);
}
.ahero__ftxt{display:block;margin-top:.3rem;font-size:.85rem;line-height:1.45;
  color:var(--on-dark-faint)}
@media (min-width:820px){
  .ahero__facts{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:999px){
  .ahero{min-height:auto}
  .ahero__grade{
    background:
      radial-gradient(70% 40% at 84% 2%,rgba(139,149,168,.18) 0%,transparent 66%),
      linear-gradient(180deg,rgba(0,2,1,.58) 0%,rgba(0,2,1,.8) 40%,rgba(0,2,1,.94) 74%,var(--ink-1) 100%);
  }
  .ahero__mesh{
    -webkit-mask-image:linear-gradient(180deg,#000,transparent 62%);
    mask-image:linear-gradient(180deg,#000,transparent 62%);
  }
}
@media (prefers-reduced-motion:no-preference){
  .ahero__media img{animation:drift 44s var(--ease) infinite alternate}
}

.crumbs{margin-bottom:1.4rem;font-size:.78rem}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:.45rem}
.crumbs li{display:flex;align-items:center;gap:.45rem;
  font-family:var(--display);letter-spacing:.14em;text-transform:uppercase}
.crumbs li+li::before{content:"/";color:var(--pink)}
.crumbs a{display:inline-flex;align-items:center;min-height:32px;color:var(--on-dark-faint)}
.crumbs a:hover{color:var(--on-dark)}
.crumbs [aria-current="page"]{color:var(--on-dark)}

/* ---------- 9. Media frames ---------- */
.frame{position:relative;overflow:hidden;background:var(--ink-3);clip-path:var(--clip-frame)}
.frame img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.frame--16x9{aspect-ratio:16/9}
.frame--4x3{aspect-ratio:4/3}
.frame--3x2{aspect-ratio:3/2}
.frame--5x4{aspect-ratio:5/4}
.frame--portrait{aspect-ratio:4/5}
.frame--tall{aspect-ratio:3/4}
.frame::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(200deg,rgba(139,149,168,.14) 0%,transparent 42%,transparent 62%,rgba(0,2,1,.42) 100%);
}
/* pink chamfer: fills the sheared corner the clip-path cuts out */
.frame--bracket::before,.frame--bracket-tr::before{
  content:"";position:absolute;z-index:2;pointer-events:none;
  width:calc(var(--cut-lg) * 2.2);height:calc(var(--cut-lg) * 2.2);
  background:var(--grad-steel);
}
.frame--bracket::before{left:0;bottom:0;clip-path:polygon(0 0,100% 100%,0 100%)}
.frame--bracket-tr::before{right:0;top:0;clip-path:polygon(100% 0,100% 100%,0 0)}
/* subtle lift on hover */
.frame img{will-change:transform}
.prow__media:hover .frame img,.insight__rail:hover .frame img,
.acad-feature__media:hover .frame img{transform:scale(1.04)}
.pos-hero img{object-position:74% 40%}
.pos-nogi img{object-position:26% 62%}
.pos-gi img{object-position:50% 44%}
/* the kids photos are pre-framed at build time (see _tools/build_kids_photos.py),
   so they only need a light nudge rather than the big offsets the stock shots had */
.pos-kids img{object-position:50% 46%}
.pos-detail img{object-position:50% 38%}
.pos-coach img{object-position:50% 32%}
.pos-adultportrait img{object-position:50% 40%}
.pos-adultgisq img{object-position:50% 44%}
.pos-adultclasssq img{object-position:50% 50%}
.pos-adultcompsq img{object-position:50% 46%}
.pos-adultdrill img{object-position:52% 52%}
.pos-adultcompteam img{object-position:50% 44%}
.pos-adultcomppodium img{object-position:50% 40%}
.pos-nogiteam img{object-position:50% 42%}
.pos-kidsmedals img{object-position:50% 42%}
.pos-kidsline img{object-position:46% 44%}
.pos-comppodium img{object-position:50% 44%}
/* portrait 3:4 sources in a 3:4 frame -- no crop, but keep faces safe if the frame shifts */
.pos-compmedal img{object-position:50% 38%}
.pos-compbelt img{object-position:50% 40%}
.pos-compcoach img{object-position:52% 38%}
.pos-adulthome img{object-position:50% 60%}

/* ---------- 10. Program rows: fight-card layout ---------- */
.prow{display:grid;gap:clamp(1.5rem,1rem + 3vw,3.5rem);align-items:center;position:relative}
.prow+.prow{margin-top:clamp(2.5rem,1.8rem + 2.6vw,4.25rem);
  padding-top:clamp(2.5rem,1.8rem + 2.6vw,4.25rem);position:relative}
.prow+.prow::before{
  content:"";position:absolute;top:0;left:4px;right:8px;height:3px;
  background:var(--line-dark);transform:skewX(-24deg);
}
.band--light .prow+.prow::before,.band--off .prow+.prow::before{background:var(--line-light)}
@media (min-width:880px){
  .prow--a{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
  .prow--b{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)}
  .prow--b .prow__media{order:2}
  .prow--c{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}
}
.prow__num{
  display:block;font-family:var(--display);font-weight:400;
  font-size:var(--fs-numeral);line-height:.76;letter-spacing:-.045em;
  color:transparent;-webkit-text-stroke:2px rgba(139,149,168,.55);margin-bottom:.55rem;
}
.prow h3{margin-bottom:.85rem;font-size:clamp(1.7rem,1.3rem + 1.7vw,2.7rem)}
.prow__tag{
  display:inline-block;margin-bottom:.9rem;padding:.34rem .8rem;
  font-family:var(--display);font-weight:400;font-size:.72rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--white);
  background:var(--ink-4);clip-path:var(--clip-btn-sm);
}
.prow__facts{list-style:none;display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1.4rem}
.prow__facts li,.tag{
  padding:.4rem .8rem;font-family:var(--display);font-weight:400;font-size:.74rem;
  letter-spacing:.13em;text-transform:uppercase;
  color:var(--on-dark-mute);background:rgba(255,255,255,.05);
  border:1px solid var(--line-dark);clip-path:var(--clip-btn-sm);
}
.band--light .prow__facts li,.band--off .prow__facts li,
.band--light .tag,.band--off .tag{
  color:var(--on-light-mute);background:rgba(0,2,1,.03);border-color:var(--line-light);
}

/* ---------- 11. Pillars ---------- */
.pillars{list-style:none;display:grid;gap:clamp(1.25rem,1rem + 1.4vw,2rem)}
@media (min-width:700px){.pillars{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1040px){.pillars--3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.pillar{
  position:relative;overflow:hidden;
  padding:clamp(1.4rem,1.1rem + 1.1vw,2.1rem);
  background:
    linear-gradient(158deg,rgba(255,255,255,.06) 0%,rgba(255,255,255,.012) 46%,transparent 72%),
    rgba(255,255,255,.04);
  border:1px solid var(--line-dark);
  clip-path:var(--clip-card);
  transition:background .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease);
}
.band--light .pillar,.band--off .pillar,.band--soft .pillar{
  background:
    linear-gradient(150deg,rgba(139,149,168,.14) 0%,rgba(139,149,168,.04) 34%,rgba(255,255,255,0) 58%),
    var(--white);
  border-color:rgba(0,2,1,.1);
  box-shadow:0 20px 44px -30px rgba(0,2,1,.45);
}
/* gradient rule across the full top edge */
.pillar::before{
  content:"";position:absolute;left:0;right:0;top:0;height:4px;
  background:linear-gradient(90deg,#8b95a8 0%,rgba(139,149,168,.5) 38%,rgba(139,149,168,0) 82%);
}
/* ghosted index numeral, only where the card supplies one */
.pillar[data-n]::after{
  content:attr(data-n);position:absolute;right:.75rem;bottom:-.1rem;
  font-family:var(--display);font-weight:400;
  font-size:clamp(3rem,2.2rem + 2.6vw,4.6rem);line-height:1;letter-spacing:-.05em;
  color:transparent;-webkit-text-stroke:2px rgba(139,149,168,.45);
  pointer-events:none;transition:-webkit-text-stroke-color .3s var(--ease);
}
.pillar:hover{transform:translate(-4px,-4px);border-color:var(--pink-28)}
.pillar:hover::after{-webkit-text-stroke-color:rgba(139,149,168,.7)}
.band--dark .pillar:hover,.band--ink .pillar:hover{
  background:
    linear-gradient(158deg,rgba(255,255,255,.1) 0%,rgba(255,255,255,.02) 50%,transparent 78%),
    rgba(255,255,255,.05);
}
.band--light .pillar:hover,.band--off .pillar:hover,.band--soft .pillar:hover{
  background:
    linear-gradient(150deg,rgba(139,149,168,.22) 0%,rgba(139,149,168,.06) 38%,rgba(255,255,255,0) 62%),
    var(--white);
  box-shadow:0 30px 60px -30px rgba(0,2,1,.5);
}
.pillar__num{
  display:block;font-family:var(--display);font-weight:400;font-size:.8rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--on-light-mute);margin-bottom:.75rem;
}
.band--dark .pillar__num,.band--ink .pillar__num,.pillars--ink .pillar__num{color:var(--steel-light)}
.pillar h3,.pillar h4{
  position:relative;margin-bottom:.6rem;
  font-size:clamp(1.15rem,1.05rem + .55vw,1.42rem);
}
.pillar p{position:relative;font-size:var(--fs-body-s);line-height:1.65}

/* ---------- 12. Stats ---------- */
.stats{list-style:none;display:grid;gap:clamp(.75rem,.6rem + .6vw,1.1rem)}
@media (min-width:620px){.stats{grid-template-columns:repeat(3,1fr)}}
.stats li{
  position:relative;padding:clamp(1.3rem,1.05rem + 1vw,2rem);
  background:var(--ink-1);border:1px solid var(--line-dark);clip-path:var(--clip-card);
  overflow:hidden;
}
.band--light .stats li{background:var(--ink-1);border-color:transparent}
.band--off .stats li{background:var(--ink-1);border-color:transparent}
.stats li::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 0% 100%,rgba(139,149,168,.12),transparent 60%);
}
.stats b{
  position:relative;z-index:1;display:block;font-family:var(--display);font-weight:400;
  font-size:clamp(1.85rem,1.4rem + 1.5vw,2.6rem);letter-spacing:-.02em;line-height:.95;
  margin-bottom:.6rem;text-wrap:balance;
  background:linear-gradient(180deg,#ffffff 0%,rgba(198,206,222,.45) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  text-transform:uppercase;
}
.stats span{position:relative;z-index:1;display:block;font-size:.87rem;line-height:1.55;
  color:var(--on-dark-mute)!important}

/* ---------- 13. Editorial ---------- */
/* ---------- Insight: media stack beside a spined sequence ----------
   Replaces the old `.editorial` (sticky aside + long text column), which left a
   dead gutter once the copy ran past the photo. The narrow column is required —
   three of the photos are 342–500px native and must never upscale — so instead of
   leaving it empty it now stacks the photo with that section's pullquote and
   callout, and the copy column runs down a skewed pink spine with a node per
   block. Deliberately not cards (`.steps`, `.pillars`) and not rows
   (`.acad-list`). */
.insight{margin-top:clamp(1.9rem,1.5rem + 2vw,3rem)}
/* The media floats INSIDE the copy column rather than sitting in its own grid
   track. A grid column always ends where its content ends, and these photos are
   342–500px native (they must not upscale), so a two-column version always left
   a tall dead gutter under the picture. Floated, the copy wraps beside it and
   then continues full width — no gap is possible whatever the copy length. */
.insight__rail{margin-bottom:clamp(1.1rem,.9rem + 1vw,1.75rem)}
@media (min-width:940px){
  .insight__rail{
    float:right;width:min(375px,34%);
    margin:.35rem 0 clamp(1.2rem,1rem + 1.2vw,1.9rem) clamp(1.75rem,1.2rem + 2.6vw,3.25rem);
  }
  .insight--flip .insight__rail{
    float:left;
    margin:.35rem clamp(1.75rem,1.2rem + 2.6vw,3.25rem) clamp(1.2rem,1rem + 1.2vw,1.9rem) 0;
  }
}
/* brand panel: a logo in a rail slot, not a photo. Off-white against the light
   band so the panel reads without competing with the pink in the mark. */
.brandpanel{
  padding:clamp(1.1rem,.9rem + 1.1vw,1.85rem);
  background:var(--off);border:1px solid var(--line-light);
  clip-path:var(--clip-frame);
}
.brandpanel img{display:block;width:100%;height:auto}

.insight__body{position:relative;padding-left:clamp(1.5rem,1.1rem + 1.5vw,2.4rem);overflow:hidden}
/* No spine down the blocks: it was positioned inside the already-indented copy
   column, so it ran through the text rather than sitting in the gutter with the
   markers. The skewed markers carry the sequence on their own. */
.insight__block{position:relative}
.insight__block+.insight__block{margin-top:clamp(1.6rem,1.25rem + 1.8vw,2.75rem)}
.insight__block::before{
  content:"";position:absolute;top:.46em;
  left:calc(-1 * clamp(1.5rem,1.1rem + 1.5vw,2.4rem));
  width:15px;height:11px;background:var(--grad-steel);transform:skewX(-24deg);
}
.insight__block h3{margin-bottom:.7rem;font-size:clamp(1.2rem,1.05rem + .7vw,1.6rem)}
.insight__body .btn-row{clear:both;margin-top:clamp(1.7rem,1.35rem + 1.6vw,2.6rem)}

/* the pullquote and callout sit in a full-width row UNDER the copy */
.insight__notes{
  display:grid;gap:clamp(1rem,.85rem + 1vw,1.75rem);
  margin-top:clamp(1.6rem,1.3rem + 1.6vw,2.5rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));
}
.insight__notes>*{margin:0;display:flex;flex-direction:column;justify-content:center}

/* ---------- About / "The academy": feature strip + numbered editorial rows ---------- */
.acad-feature{
  display:grid;gap:clamp(1.5rem,1.1rem + 2.4vw,3rem);
  margin-top:clamp(2rem,1.5rem + 2.4vw,3.25rem);
}
@media (min-width:880px){
  .acad-feature{grid-template-columns:minmax(0,340px) minmax(0,1fr);align-items:center}
}
@media (min-width:1160px){
  .acad-feature{grid-template-columns:minmax(0,400px) minmax(0,1fr);
    gap:clamp(2rem,1.2rem + 3vw,4rem)}
}
.acad-feature__body{display:grid;gap:clamp(1.05rem,.85rem + 1vw,1.6rem);align-content:center}
.acad-feature__body .pullquote{margin:0}
.acad-feature__body .pullquote p{font-size:clamp(1.3rem,1rem + 1.6vw,2.3rem);line-height:1.02}
.acad-feature__body .callout{background:var(--white);border-color:rgba(0,2,1,.16)}

/* numbered rows — an editorial spec sheet, deliberately not the card grid below */
.acad-list{margin-top:clamp(2.25rem,1.7rem + 2.6vw,3.75rem)}
.acad-row{display:grid;gap:clamp(.85rem,.7rem + 1vw,1.6rem)}
@media (min-width:900px){
  .acad-row{grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);
    gap:clamp(1.5rem,.9rem + 2.8vw,3.5rem);align-items:start}
}
.acad-row+.acad-row{
  position:relative;
  margin-top:clamp(1.9rem,1.5rem + 2vw,3.1rem);
  padding-top:clamp(1.9rem,1.5rem + 2vw,3.1rem);
}
.acad-row+.acad-row::before{
  content:"";position:absolute;top:0;left:4px;right:8px;height:3px;
  background:var(--line-light);transform:skewX(-24deg);
}
.acad-row__i{display:flex;align-items:baseline;gap:clamp(.7rem,.5rem + .8vw,1.15rem)}
@media (min-width:900px){.acad-row__i{display:block}}
.acad-row__n{
  flex:none;display:block;font-family:var(--display);font-weight:400;line-height:.78;
  font-size:clamp(2.3rem,1.5rem + 3.4vw,4.6rem);letter-spacing:-.04em;
  color:transparent;-webkit-text-stroke:2px rgba(139,149,168,.5);
}
@media (min-width:900px){.acad-row__n{margin-bottom:.6rem}}
@supports not (-webkit-text-stroke:1px red){
  .acad-row__n{color:rgba(139,149,168,.55);-webkit-text-stroke:0}
}
.acad-row h3{font-size:clamp(1.28rem,1.05rem + .9vw,1.85rem);max-width:13ch;text-wrap:balance}
.acad-row__c{max-width:66ch}
.acad-row__c p{color:var(--on-light-mute)}
.acad-row__c .ticks{margin-top:1.35rem}

.pullquote{
  position:relative;margin:clamp(2rem,1.5rem + 2vw,3rem) 0;
  padding:clamp(1.5rem,1.1rem + 1.8vw,2.4rem);
  background:linear-gradient(104deg,rgba(139,149,168,.14),transparent 74%);
  clip-path:polygon(0 0,calc(100% - 26px) 0,100% 26px,100% 100%,26px 100%,0 calc(100% - 26px));
}
.pullquote::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--pink)}
.pullquote p{
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  /* a pull quote alone in the notes grid gets the whole row, which is far too
     wide a measure for uppercase display type -- cap it, narrower quotes are
     already under this and so unaffected */
  max-width:46ch;
  font-size:clamp(1.25rem,1.05rem + 1.1vw,1.9rem);line-height:1.06;letter-spacing:-.008em;
  color:inherit!important;
}
.pullquote cite{
  display:block;margin-top:1rem;font-style:normal;
  font-family:var(--display);font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--on-light-mute);
}

.callout{
  position:relative;padding:clamp(1.15rem,.95rem + 1vw,1.7rem);
  background:var(--off);border:1px solid var(--line-light);
  clip-path:polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,0 100%);
}
.band--dark .callout,.band--ink .callout{background:rgba(255,255,255,.05);border-color:var(--line-dark)}
.callout::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--pink)}
.callout__title{
  font-family:var(--display);font-weight:400;font-size:var(--fs-h4);
  letter-spacing:.03em;text-transform:uppercase;line-height:1.16;
  color:inherit;margin-bottom:.55rem;
}
.band--dark .callout__title,.band--ink .callout__title{color:var(--on-dark)}
.callout p{font-size:var(--fs-body-s)}
.h2-sub{font-size:var(--fs-h3)}

.ticks{list-style:none;display:grid;gap:.85rem}
.ticks li{position:relative;padding-left:2rem;font-size:var(--fs-body-s);line-height:1.6}
.ticks li::before{
  content:"";position:absolute;left:0;top:.45em;width:12px;height:12px;background:var(--on-light-mute);
  clip-path:polygon(0 38%,36% 100%,100% 4%,84% 0,34% 72%,10% 28%);
}
.band--dark .ticks li::before,.band--ink .ticks li::before{background:var(--on-dark-mute)}
.ticks--2{gap:.85rem 2rem}
@media (min-width:700px){.ticks--2{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- 14. Schedule ---------- */
/* filter rail + programme key */
.sched-bar{
  display:grid;gap:clamp(.9rem,.75rem + .8vw,1.4rem);
  margin-bottom:clamp(1.5rem,1.2rem + 1vw,2.25rem);
}
@media (min-width:940px){
  .sched-bar{grid-template-columns:minmax(0,1fr) auto;align-items:center;
    gap:clamp(1.25rem,.8rem + 2vw,2.5rem)}
}
.sched-filters{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:0}
.chip{
  min-height:46px;padding:.55rem 1.1rem;
  font-family:var(--display);font-weight:400;font-size:.82rem;
  letter-spacing:.13em;text-transform:uppercase;color:var(--on-light-mute);
  background:rgba(0,2,1,.03);border:1px solid var(--line-light);border-radius:999px;
  transition:color .18s var(--ease),background .18s var(--ease),border-color .18s var(--ease);
}
.chip:hover{color:var(--on-light);border-color:rgba(0,2,1,.32)}
.chip[aria-pressed="true"]{background:var(--pink);border-color:var(--pink);color:var(--on-pink)}
.band--dark .chip,.band--ink .chip{color:var(--on-dark-mute);border-color:var(--line-dark);
  background:rgba(255,255,255,.05)}
.band--dark .chip:hover,.band--ink .chip:hover{color:var(--on-dark)}
.band--dark .chip[aria-pressed="true"],.band--ink .chip[aria-pressed="true"]{color:var(--white)}

.sched-key{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem 1.15rem}
.sched-key li{
  display:flex;align-items:center;gap:.5rem;
  font-family:var(--display);font-weight:400;font-size:.72rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--on-light-mute);
}
/* programme colour: one dot, four values, identical in the key and on the row */
.sched-key li::before{
  content:"";flex:none;width:10px;height:10px;border-radius:50%;background:var(--pink);
}
.sched-key li[data-program="gi"]::before{background:var(--steel)}
.sched-key li[data-program="kids"]::before{background:var(--on-light)}
.sched-key li[data-program="comp"]::before{background:var(--pink-55)}

/* ---- the week ---------------------------------------------------------
   A timetable is a reading task, so it is laid out as one plain block per
   day and one row per class: time in a fixed left column so the times line
   up down the day, class name next, programme tag last. Every row shares a
   single style — colour rides on one small dot rather than on four different
   card fills. */
.sched{display:grid;gap:clamp(.6rem,.5rem + .4vw,.9rem)}
.day{
  position:relative;overflow:hidden;
  background:var(--white);border:1px solid var(--line-light);border-radius:12px;
}
.day.is-today{border-color:var(--pink-55)}

.day__head{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  width:100%;min-height:52px;padding:.6rem clamp(.9rem,.8rem + .6vw,1.25rem);text-align:left;
  background:var(--off);color:var(--on-light);
}
.day:not(.is-empty) .day__head{border-bottom:1px solid var(--line-light)}
.day__name{display:flex;align-items:center;gap:.6rem;min-width:0}
.day__head h3{
  font-size:clamp(.95rem,.9rem + .25vw,1.08rem);letter-spacing:.1em;
  text-transform:uppercase;color:var(--on-light);
}
.day__today{
  flex:none;padding:.2rem .55rem;border-radius:999px;background:var(--pink);color:var(--on-pink);
  font-family:var(--display);font-weight:400;font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;
}
.day__count{
  flex:none;display:flex;align-items:center;gap:.5rem;
  font-family:var(--display);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--on-light-mute);
}
.day__count svg{transition:transform .26s var(--ease)}
.day__head[aria-expanded="true"] .day__count svg{transform:rotate(180deg)}
@media (min-width:900px){
  .day__head{pointer-events:none}
  .day__head .day__count svg{display:none}
}

.day__body{padding:0}
.day__grid{display:grid}
.class-row{
  display:grid;grid-template-columns:1fr;gap:.1rem .9rem;
  padding:.75rem clamp(.9rem,.8rem + .6vw,1.25rem);
}
.class-row + .class-row{border-top:1px solid var(--line-light)}
@media (min-width:700px){
  .class-row{grid-template-columns:9.5rem minmax(0,1fr) auto;align-items:center;gap:0 1rem}
}
.class-row__time{
  font-family:var(--display);font-weight:400;font-size:.92rem;letter-spacing:.02em;
  color:var(--on-light);font-variant-numeric:tabular-nums;white-space:nowrap;
}
.class-row__main{min-width:0}
.class-row__main b{
  display:block;font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(.95rem,.9rem + .22vw,1.06rem);line-height:1.15;letter-spacing:.02em;
  color:var(--on-light);
}
.class-row__meta{
  display:block;margin-top:.12rem;font-size:.8rem;line-height:1.45;color:var(--on-light-mute);
}
.class-row__tag{
  justify-self:start;display:inline-flex;align-items:center;gap:.45rem;
  margin-top:.3rem;padding:.24rem .62rem;border-radius:999px;
  background:rgba(0,2,1,.04);border:1px solid var(--line-light);
  font-family:var(--display);font-weight:400;font-size:.66rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--on-light-mute);white-space:nowrap;
}
@media (min-width:700px){.class-row__tag{justify-self:end;margin-top:0}}
.class-row__tag::before{
  content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--pink);
}
.class-row[data-program="gi"] .class-row__tag::before{background:var(--steel)}
.class-row[data-program="kids"] .class-row__tag::before{background:var(--on-light)}
.class-row[data-program="comp"] .class-row__tag::before{background:var(--pink-55)}

.day__empty{
  padding:.85rem clamp(.9rem,.8rem + .6vw,1.25rem);
  font-family:var(--display);font-weight:400;font-size:.74rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--on-light-faint);
}

/* the standing note that replaces a published timetable */
.sched-note{
  position:relative;overflow:hidden;color:var(--on-dark);
  margin-top:clamp(1.75rem,1.4rem + 1.6vw,2.75rem);
  padding:clamp(1.5rem,1.2rem + 1.6vw,2.4rem);
  background:
    radial-gradient(118% 96% at 100% 0%,rgba(139,149,168,.2) 0%,rgba(139,149,168,.04) 44%,transparent 70%),
    linear-gradient(168deg,var(--ink-4) 0%,var(--ink-1) 76%);
  border:1px solid rgba(255,255,255,.12);
  clip-path:polygon(0 0,calc(100% - 30px) 0,100% 30px,100% 100%,30px 100%,0 calc(100% - 30px));
  box-shadow:0 34px 70px -34px rgba(0,2,1,.9);
}
.sched-note[hidden]{display:none}
.sched-note::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;
  background:linear-gradient(90deg,#ffffff 0%,rgba(255,255,255,.7) 30%,rgba(255,255,255,0) 88%)}
.sched-note .sched-note__eyebrow{
  font-family:var(--display);font-weight:400;font-size:.7rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--on-dark)!important;margin-bottom:.9rem;
}
.sched-note__grid{display:grid;gap:clamp(1.25rem,1rem + 1.6vw,2.5rem)}
@media (min-width:940px){
  .sched-note__grid{grid-template-columns:minmax(0,1fr) minmax(0,auto);align-items:center}
}
.sched-note .sched-note__h{
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(1.3rem,1.05rem + 1.1vw,2rem);line-height:1.04;
  color:var(--on-dark)!important;margin-bottom:.8rem;
}
.sched-note p{color:var(--on-dark-mute)!important;font-size:var(--fs-body-s);max-width:56ch}
.sched-note__act{display:flex;flex-wrap:wrap;gap:.75rem}
@media (min-width:940px){.sched-note__act{flex-direction:column}}
.sched-note__act .btn{width:100%}
@media (min-width:520px) and (max-width:939px){.sched-note__act .btn{width:auto}}

.sched-peek{list-style:none;display:grid;gap:clamp(.75rem,.6rem + .6vw,1.1rem)}
@media (min-width:620px){.sched-peek{grid-template-columns:repeat(3,1fr)}}
.sched-peek li{
  position:relative;background:var(--white);border:1px solid var(--line-light);
  padding:clamp(1.3rem,1.05rem + 1vw,1.9rem) 1.2rem;clip-path:var(--clip-card);
  transition:border-color .24s var(--ease),transform .24s var(--ease);
}
.sched-peek li:hover{border-color:var(--pink-28);transform:translate(-3px,-3px)}
.sched-peek li::before{content:"";position:absolute;left:1.2rem;top:0;width:46px;height:4px;
  background:var(--pink);transform:skewX(-24deg)}
.sched-peek b{display:block;font-family:var(--display);font-weight:400;font-size:1.05rem;
  letter-spacing:.05em;text-transform:uppercase;color:var(--on-light);margin-bottom:.35rem}
.sched-peek span{font-size:.85rem;color:var(--on-light-mute);line-height:1.5;display:block}

/* ---------- 15. Pricing ---------- */
.photo-pair{display:grid;gap:clamp(1rem,.85rem + .8vw,1.5rem)}
@media (min-width:800px){.photo-pair{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* three-up row: two columns on tablets so nothing gets squeezed, three on desktop */
.photo-trio{display:grid;gap:clamp(1rem,.85rem + .8vw,1.5rem)}
@media (min-width:640px){.photo-trio{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.photo-trio{grid-template-columns:repeat(3,minmax(0,1fr))}}
.plans{display:grid;gap:clamp(1rem,.85rem + .8vw,1.5rem)}
@media (min-width:800px){.plans{grid-template-columns:repeat(2,minmax(0,1fr))}}
.plan{
  position:relative;display:flex;flex-direction:column;
  padding:clamp(1.5rem,1.2rem + 1.6vw,2.5rem);
  background:var(--white);border:1px solid var(--line-light);
  clip-path:polygon(0 0,calc(100% - 30px) 0,100% 30px,100% 100%,30px 100%,0 calc(100% - 30px));
  transition:border-color .26s var(--ease),transform .26s var(--ease);
}
.band--dark .plan,.band--ink .plan{background:var(--ink-2);border-color:var(--line-dark)}
.plan:hover{border-color:var(--pink-28);transform:translate(-3px,-3px)}
.plan__name{
  font-family:var(--display);font-weight:400;font-size:.84rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--on-light-mute);margin-bottom:1.15rem;
}
.band--dark .plan__name,.band--ink .plan__name{color:var(--steel-light)}
.plan__price{display:flex;align-items:baseline;gap:.45rem;margin-bottom:.4rem;
  font-family:var(--display);font-weight:400;letter-spacing:-.03em}
.plan__price b{font-size:clamp(2.9rem,2.2rem + 2.8vw,4.2rem);line-height:.86;font-weight:400}
.plan__price span{font-size:1rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  font-family:var(--body);color:var(--on-light-faint)}
.band--dark .plan__price span,.band--ink .plan__price span{color:var(--on-dark-faint)}
.plan__note{font-size:var(--fs-body-s);margin-bottom:1.5rem}
.plan .ticks{margin-bottom:1.75rem}
.plan .btn{margin-top:auto}
.plan--accent{border-color:var(--pink-28);
  background:linear-gradient(166deg,rgba(139,149,168,.12),transparent 52%),var(--white)}
.band--dark .plan--accent,.band--ink .plan--accent{
  background:linear-gradient(166deg,rgba(139,149,168,.14),transparent 56%),var(--ink-2)}

.dropin-card{
  position:relative;display:grid;gap:clamp(1.25rem,1rem + 1.5vw,2.5rem);align-items:center;
  padding:clamp(1.5rem,1.2rem + 1.6vw,2.5rem);
  background:linear-gradient(102deg,rgba(139,149,168,.14),transparent 64%),var(--ink-2);
  border:1px solid var(--line-dark);
  clip-path:polygon(0 0,calc(100% - 30px) 0,100% 30px,100% 100%,30px 100%,0 calc(100% - 30px));
}
@media (min-width:820px){.dropin-card{grid-template-columns:minmax(0,1fr) auto}}
.dropin-card--light{background:linear-gradient(102deg,rgba(139,149,168,.12),transparent 64%),var(--off);
  border-color:var(--line-light)}
.dropin-card__price{font-family:var(--display);font-weight:400;
  font-size:clamp(2.6rem,2rem + 2.4vw,3.8rem);letter-spacing:-.03em;line-height:.9;
  background:var(--grad-pink);-webkit-background-clip:text;background-clip:text;color:transparent}
.dropin-card__per{font-family:var(--body);font-size:1rem;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--on-light-mute);margin-left:.45rem;
  -webkit-text-fill-color:currentColor}
.band--dark .dropin-card__per,.band--ink .dropin-card__per{color:var(--on-dark-faint)}

/* ---------- 16. FAQ ---------- */
.faq{border-top:3px solid var(--line-light)}
.band--dark .faq,.band--ink .faq{border-top-color:var(--line-dark)}
.faq details{border-bottom:1px solid var(--line-light)}
.band--dark .faq details,.band--ink .faq details{border-bottom-color:var(--line-dark)}
.faq summary{
  display:flex;align-items:center;justify-content:space-between;gap:1.25rem;
  min-height:66px;padding:1.15rem 0;cursor:pointer;list-style:none;
  font-family:var(--display);font-weight:400;font-size:clamp(1.05rem,.98rem + .5vw,1.32rem);
  letter-spacing:.02em;text-transform:uppercase;line-height:1.18;
  transition:color .18s var(--ease);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--pink)}
.faq summary::after{
  content:"";flex:none;width:20px;height:20px;position:relative;
  background:
    linear-gradient(var(--pink),var(--pink)) center/100% 3px no-repeat,
    linear-gradient(var(--pink),var(--pink)) center/3px 100% no-repeat;
  transition:transform .3s var(--ease);
}
.faq details[open] summary::after{
  transform:none;
  background:linear-gradient(var(--pink),var(--pink)) center/100% 3px no-repeat;
}
.faq details[open] summary{color:var(--pink)}
.faq__a{padding:0 0 1.5rem;max-width:70ch}
.faq__a p{font-size:var(--fs-body-s);line-height:1.68}

/* ---------- 18. Steps: numbered sequence cards ---------- */
.steps{list-style:none;counter-reset:s;display:grid;gap:clamp(1rem,.8rem + 1.2vw,1.6rem)}
@media (min-width:800px){.steps{grid-template-columns:repeat(3,minmax(0,1fr))}}
.steps li{
  --sp:clamp(1.35rem,1.05rem + 1.2vw,2rem);
  position:relative;counter-increment:s;overflow:hidden;isolation:isolate;
  display:flex;flex-direction:column;
  padding:var(--sp);
  background:
    linear-gradient(158deg,rgba(255,255,255,.06) 0%,rgba(255,255,255,.012) 46%,transparent 72%),
    rgba(255,255,255,.04);
  border:1px solid var(--line-dark);
  clip-path:var(--clip-card);
  transition:background .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease),
             box-shadow .3s var(--ease);
}
.band--light .steps li,.band--off .steps li,.band--soft .steps li{
  background:
    linear-gradient(152deg,rgba(139,149,168,.14) 0%,rgba(139,149,168,.03) 27%,rgba(255,255,255,0) 46%),
    var(--white);
  border-color:rgba(0,2,1,.1);
  box-shadow:0 20px 44px -30px rgba(0,2,1,.45);
}
/* gradient rule across the full top edge */
.steps li::before{
  content:"";position:absolute;left:0;right:0;top:0;height:4px;z-index:2;
  background:linear-gradient(90deg,#ffffff 0%,rgba(255,255,255,.5) 38%,rgba(255,255,255,0) 82%);
}
/* steel chamfer filling the sheared top-right corner */
.steps li::after{
  content:"";position:absolute;right:0;top:0;z-index:2;pointer-events:none;
  width:44px;height:44px;background:var(--grad-steel);
  clip-path:polygon(100% 0,100% 100%,0 0);
  opacity:.9;transition:opacity .3s var(--ease);
}
.steps li:hover{transform:translate(-4px,-4px);border-color:var(--pink-28)}
.steps li:hover::after{opacity:1}
.band--light .steps li:hover,.band--off .steps li:hover,.band--soft .steps li:hover{
  box-shadow:0 30px 60px -30px rgba(0,2,1,.5)}

/* header: outlined index numeral on a skewed hairline */
.step__h{display:flex;align-items:center;gap:clamp(.75rem,.6rem + .6vw,1.1rem);
  margin-bottom:clamp(.9rem,.75rem + .7vw,1.35rem);padding-right:2.1rem}
.step__n{flex:none;font-family:var(--display);font-weight:400;line-height:.82;
  font-size:clamp(2.4rem,1.9rem + 1.9vw,3.4rem);letter-spacing:-.04em;
  color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.85)}
.step__n::before{content:"0" counter(s)}
@supports not (-webkit-text-stroke:1px red){
  .step__n{color:rgba(255,255,255,.55);-webkit-text-stroke:0}
}
.step__h::after{content:"";flex:1 1 auto;height:3px;transform:skewX(-24deg);
  background:linear-gradient(90deg,rgba(255,255,255,.35),rgba(255,255,255,0))}

.steps h3,.steps h4{margin-bottom:.6rem;font-size:clamp(1.15rem,1.05rem + .55vw,1.42rem)}
.steps p{font-size:var(--fs-body-s)}
.band--dark .steps h3,.band--ink .steps h3{color:var(--on-dark)}

/* closing tag line, pinned to the bottom so the three cards line up */
.step__tag{
  display:flex;align-items:center;gap:.55rem;
  margin-top:auto;padding-top:clamp(1rem,.85rem + .7vw,1.4rem);
  font-family:var(--display);font-weight:400;font-size:.72rem!important;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.66)!important;
}
.step__tag::before{content:"";flex:none;width:8px;height:8px;background:rgba(255,255,255,.66);
  transform:skewX(-24deg)}

/* ---------- 19. Contact ---------- */
.contact-grid{display:grid;gap:clamp(1.75rem,1.3rem + 2.5vw,3.25rem)}
@media (min-width:940px){.contact-grid{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:start}}
/* the contact details run as a full-width strip ABOVE the form. Beside it they
   were a 451px column next to an 857px form — a 400px hole down the left. */
.contact-stack{display:grid;gap:clamp(2rem,1.55rem + 2.2vw,3.25rem)}
/* the panel is full width now: a 900px centred cap left symmetric holes */
.contact-stack__form{min-width:0}
.nap{list-style:none;display:grid;gap:1.5rem}
.nap--row{grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));
  gap:clamp(1.35rem,1.1rem + 1.4vw,2.25rem)}
.nap li{display:flex;gap:1rem;align-items:flex-start}
.nap svg{flex:none;color:var(--on-light-mute);margin-top:.2rem}
.nap strong{display:block;font-family:var(--display);font-weight:400;font-size:.76rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--on-light-mute);margin-bottom:.3rem}
.nap a{display:inline-flex;align-items:center;min-height:32px;font-weight:700}
.nap a:hover{color:var(--pink)}
.nap p,.nap address{font-size:var(--fs-body-s);line-height:1.6}
.map{background:var(--off);border:1px solid var(--line-light);clip-path:var(--clip-card)}
.band--dark .map,.band--ink .map{border-color:var(--line-dark);background:var(--ink-2)}
.map iframe{width:100%;height:clamp(300px,42svh,470px);border:0;display:block;
  filter:grayscale(.3) contrast(1.06)}

.form{display:grid;gap:1.05rem}
.field{display:grid;gap:.42rem}
.field label{font-family:var(--display);font-weight:400;font-size:.76rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--on-light-mute)}
.band--dark .field label,.band--ink .field label{color:var(--on-dark-mute)}
.field .req{color:var(--pink)}
.field input,.field select,.field textarea{
  width:100%;min-height:54px;padding:.9rem 1rem;background:var(--white);color:var(--on-light);
  border:1px solid var(--line-light);border-radius:0;font-size:1rem;
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));
  transition:border-color .18s var(--ease),background .18s var(--ease);
}
.band--dark .field input,.band--dark .field textarea,.band--dark .field select,
.band--ink .field input,.band--ink .field textarea,.band--ink .field select{
  background:rgba(255,255,255,.06);color:var(--on-dark);border-color:var(--line-dark)}
/* `.field` sets display:grid, which beats the UA rule for the `hidden`
   attribute — restate it, or every honeypot field renders in plain sight. */
.field[hidden]{display:none!important}
/* the off-canvas honeypot: out of sight, out of the tab order, still in the DOM
   for a bot to fill in */
.hp{
  position:absolute!important;left:-9999px;top:auto;
  width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none;
}
.field textarea{min-height:136px;resize:vertical;line-height:1.6}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--pink);
  background:var(--pink-08)}
.field .err{font-family:var(--display);font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--pink)}
.field.is-invalid input,.field.is-invalid select,.field.is-invalid textarea{border-color:var(--pink)}
@media (min-width:620px){.form__row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.05rem}}
.form__note{font-size:.82rem;line-height:1.6;color:var(--on-light-faint)}
.band--dark .form__note,.band--ink .form__note{color:var(--on-dark-faint)}
/* Fine print under every lead form: links to the two legal pages. Inherits the
   surrounding surface, so it works on the light contact console and inside the
   dark trial modal without a per-context override. */
.form__legal{margin:0;font-size:.78rem;line-height:1.6;color:var(--on-light-faint)}
.form__legal a{color:inherit;border-bottom:1px solid var(--pink-28);padding-bottom:1px}
.form__legal a:hover{color:var(--pink);border-bottom-color:var(--pink)}
.band--dark .form__legal,.band--ink .form__legal,.tmodal__form .form__legal,
.cform .form__legal{color:var(--on-dark-faint)}
.tmodal__form .form__legal{margin-top:-.2rem}

.form__status{padding:1rem 1.15rem;background:var(--pink-14);border:1px solid var(--pink-28);
  font-size:.9rem;font-weight:600;line-height:1.55;
  clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,0 100%)}
.form__status[hidden]{display:none}

/* ---------- Contact form: the intake console ----------
   Round two. Round one was an ink slab with numbered fields and chip programme
   picking — right skin, wrong footprint: it was capped at --maxw-narrow inside a
   full-width band, so a ~380px hole sat down its right side and every field ran
   one per row like a default browser form.
   Now the panel is full width and composed of three full-width tiers:
     · a pink gradient strip (badge + three verified facts),
     · a field grid that is three-up on desktop — name / phone / email in one
       row of equal columns, picker and message spanning all of them,
     · an action bar with the send blade left and the call/book fallback right.
   No row can leave a gutter: each one either splits into equal-height columns
   or spans the whole width. `.field` wrappers and the input names are unchanged,
   so site.js validation and submission are untouched. */
.cform{
  --ccut:clamp(24px,3vw,40px);
  position:relative;overflow:hidden;color:var(--on-dark);
  background:
    radial-gradient(120% 92% at 100% 0%,rgba(139,149,168,.2) 0%,rgba(139,149,168,.04) 44%,transparent 70%),
    linear-gradient(168deg,var(--ink-4) 0%,var(--ink-1) 76%);
  border:1px solid rgba(255,255,255,.12);
  clip-path:polygon(0 0,calc(100% - var(--ccut)) 0,100% var(--ccut),100% 100%,var(--ccut) 100%,0 calc(100% - var(--ccut)));
  box-shadow:0 34px 70px -34px rgba(0,2,1,.9);
}

/* tier 1 — the pink strip. It replaces the old 4px top rule: same job, but it
   carries the label and the three facts instead of being a bare bar. */
.cform__strip{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:.6rem clamp(1rem,.8rem + 1vw,2rem);
  padding:.8rem clamp(1.15rem,.95rem + 1.1vw,2.2rem);
  /* the panel's top-right cut eats the strip's full height at that corner, so
     the last fact needs the cut's width plus a little clear of it */
  padding-right:calc(var(--ccut) + 1.15rem);
  background:var(--grad-steel-band);
}
.cform .cform__badge,.cform__facts li{
  display:flex;align-items:center;gap:.55rem;
  font-family:var(--display);font-weight:400;letter-spacing:.16em;text-transform:uppercase;
  font-size:.75rem;color:var(--white)!important;
}
.cform .cform__badge{font-size:.85rem;letter-spacing:.2em;margin:0}
.cform .cform__badge::before{content:"";flex:none;width:10px;height:10px;background:var(--pink);
  transform:skewX(-24deg)}
.cform__facts{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem 1.15rem}
.cform__facts li::before{content:"";flex:none;width:7px;height:7px;
  background:rgba(255,255,255,.5);transform:skewX(-24deg)}

.cform__body{padding:clamp(1.5rem,1.2rem + 1.7vw,2.5rem)}

/* tier 2 — head. A straight pink spine runs the left edge of this tier; skewed
   spines drift into the copy over any real height (see section 12). */
.cform__head{
  position:relative;display:grid;gap:.9rem;
  padding-left:clamp(.9rem,.75rem + .7vw,1.4rem);
  padding-bottom:clamp(1.2rem,1rem + 1vw,1.75rem);margin-bottom:clamp(1.3rem,1.1rem + 1vw,1.9rem);
  border-bottom:1px solid rgba(255,255,255,.14);
}
/* headline left, lede right. Both tiers are short, so neither can run the other
   out and open a gutter - and the tier now spans the panel instead of leaving
   ~700px of empty ink beside the headline. */
@media (min-width:900px){
  .cform__head{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
    column-gap:clamp(1.5rem,1.2rem + 1.6vw,3.25rem);align-items:start}
}
.cform__head::before{content:"";position:absolute;left:0;top:.25rem;bottom:1.1rem;width:3px;
  background:linear-gradient(180deg,var(--steel-light) 0%,rgba(198,206,222,0) 100%)}
.cform__head h3{
  color:var(--on-dark);margin-bottom:.65rem;
  font-size:clamp(1.5rem,1.1rem + 1.7vw,2.75rem);line-height:1.02;
}
.cform__head p{color:var(--on-dark-mute)!important;font-size:var(--fs-body-s);max-width:52ch}
.cform .cform__req{
  margin-top:.85rem;font-family:var(--display);font-weight:400;font-size:.72rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--on-dark-faint)!important;
}
.cform .cform__req b{color:var(--pink);font-weight:400}

/* tier 3 — the field grid. One row of equal columns, then full-width rows. */
.cform__grid{display:grid;gap:clamp(1.05rem,.9rem + .55vw,1.5rem)}
@media (min-width:660px){
  .cform__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cform__grid .field--wide{grid-column:1 / -1}
}
/* In the two-column band the third field would sit alone in row 2 with an empty
   cell beside it - a hole the height-based gap detector cannot see, because
   nothing is short, something is simply missing. Span it instead. */
@media (min-width:660px) and (max-width:1039.98px){
  .cform__grid > .field:nth-child(3){grid-column:1 / -1}
}
@media (min-width:1040px){
  .cform__grid{grid-template-columns:repeat(3,minmax(0,1fr));
    column-gap:clamp(1.25rem,1rem + 1.1vw,2.1rem)}
}

.cform .field{position:relative}
.cform .field label,.cform .field legend{
  display:flex;align-items:center;gap:.6rem;
  font-family:var(--display);font-weight:400;font-size:.74rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--on-dark-mute);padding:0;
}
.field__n{
  flex:none;font-family:var(--display);font-weight:400;font-size:.72rem;letter-spacing:.1em;
  color:var(--steel-light);opacity:.8;
}
.cform .field .req{color:var(--pink)}
.cform .field input,.cform .field textarea{
  background-color:rgba(255,255,255,.06);color:var(--on-dark);
  border-color:rgba(255,255,255,.16);
  background-image:linear-gradient(90deg,var(--pink-28) 0 2px,rgba(255,119,183,0) 2px);
  background-repeat:no-repeat;padding-left:1.15rem;
}
.cform .field input::placeholder,.cform .field textarea::placeholder{color:rgba(255,255,255,.32)}
.cform .field input:focus,.cform .field textarea:focus{
  border-color:var(--pink);background-color:rgba(255,119,183,.11);
  background-image:linear-gradient(90deg,var(--pink) 0 3px,rgba(255,119,183,0) 3px);
}
.cform .field.is-invalid input,.cform .field.is-invalid textarea{
  border-color:var(--pink);
  background-image:linear-gradient(90deg,var(--pink) 0 3px,rgba(255,119,183,0) 3px);
}
.cform .field .err{color:var(--pink)}
.cform .field textarea{min-height:150px}

/* programme picker: chips, not a dropdown */
.cform__pick{border:0;padding:0;margin:0;min-width:0}
/* flex-grow, not a fixed track count: every row - the last one included -
   stretches its chips to the full width, so the row never stops short. A grid
   with auto-fit leaves empty cells on the final row instead. */
.cform__opts{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.6rem}
.pick{flex:1 1 190px;cursor:pointer}
/* A chip label lives inside a `.field`, so `.cform .field label{display:flex}`
   catches it and the span shrink-wraps to its text instead of filling the label
   the flex-grow just widened - chips read as content-width boxes floating in
   equal slots. Blockify the label so the span fills it. Needs three classes to
   outrank the (0,2,1) label rule. Same bite in the trial modal. */
.cform .cform__opts .pick{display:block}
.pick input{position:absolute;opacity:0;width:0;height:0}
.pick span{
  display:block;padding:.6rem 1rem;
  font-family:var(--display);font-weight:400;font-size:.78rem;
  letter-spacing:.11em;text-transform:uppercase;color:var(--on-dark-mute);text-align:center;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.17);
  clip-path:var(--clip-btn-sm);
  transition:color .18s var(--ease),background .18s var(--ease),border-color .18s var(--ease);
}
.pick:hover span{color:var(--on-dark);border-color:rgba(255,255,255,.4)}
.pick input:checked+span{
  color:var(--on-pink);background:var(--grad-pink);border-color:transparent;
}
.pick input:focus-visible+span{outline:2px solid var(--pink);outline-offset:3px}

/* tier 4 — action bar */
.cform__foot{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:1rem clamp(1.25rem,1rem + 1.2vw,2.5rem);
  margin-top:clamp(.9rem,.8rem + .5vw,1.35rem);
  padding-top:clamp(1.15rem,1rem + .8vw,1.6rem);
  border-top:1px solid rgba(255,255,255,.14);
}
.cform .form__status{background:rgba(255,119,183,.16);border-color:var(--pink-28);color:var(--on-dark);
  margin-top:clamp(1.1rem,.9rem + .8vw,1.6rem)}
.cform__send{flex:none;width:100%}
@media (min-width:560px){.cform__send{width:auto}}
.cform .form__note{flex:1 1 300px;max-width:54ch;margin:0;
  color:var(--on-dark-faint)!important}
.cform .form__note a{color:var(--on-dark)}

/* ---------- 20. Final CTA ----------
   The loudest block on the site: a duotone photograph (grayscale image + a pink
   `mix-blend-mode:color` layer, so it reads as brand texture rather than a repeat
   of a photo used higher up), a rotated pink offer stamp, and an oversized button. */
.cta{
  --seam:clamp(28px,4vw,72px);
  position:relative;overflow:hidden;isolation:isolate;color:var(--on-dark);
  background:var(--ink-1);
  margin-top:calc(-1 * var(--seam));
  padding-top:calc(var(--band-y) + var(--seam));
  padding-bottom:var(--band-y);
  clip-path:polygon(0 var(--seam),100% 0,100% 100%,0 100%);
}
.cta::after{
  content:"";position:absolute;left:0;right:0;top:0;z-index:3;pointer-events:none;
  height:calc(var(--seam) + 3px);
  background:linear-gradient(90deg,var(--pink) 0%,var(--pink) 36%,rgba(255,119,183,.46) 74%,rgba(255,119,183,.14) 100%);
  clip-path:polygon(0 var(--seam),100% 0,100% 3px,0 calc(var(--seam) + 3px));
}
.cta__media{position:absolute;inset:0;z-index:-4}
.cta__media img{
  width:100%;height:100%;object-fit:cover;object-position:50% 42%;
  filter:grayscale(1) contrast(1.28) brightness(.52);
}
/* pink duotone: takes hue+saturation from here, luminosity from the photo below */
.cta__duo{
  position:absolute;inset:0;z-index:-3;pointer-events:none;
  mix-blend-mode:color;
  background:linear-gradient(118deg,
    rgba(139,149,168,.3) 0%,
    rgba(139,149,168,.9) 52%,
    rgba(139,149,168,.45) 100%);
}
.cta__scrim{
  position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:
    linear-gradient(96deg,rgba(0,2,1,.95) 0%,rgba(0,2,1,.82) 40%,rgba(0,2,1,.4) 100%),
    radial-gradient(70% 90% at 95% 2%,rgba(139,149,168,.12) 0%,transparent 64%);
}
.cta__lines{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:calc(100% / 6) 100%;
  mask-image:linear-gradient(180deg,transparent,#000 22%,#000 80%,transparent);
}

.cta__inner{
  position:relative;z-index:1;
  width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);
  display:grid;gap:clamp(2rem,1.5rem + 2.6vw,3.5rem);
}
@media (min-width:960px){
  .cta__inner{grid-template-columns:minmax(0,1.32fr) minmax(0,.68fr);align-items:center}
}
.cta__body{min-width:0}
.cta h2{
  font-size:clamp(2.15rem,1.45rem + 3.5vw,4.35rem);line-height:.9;
  margin-bottom:1.1rem;text-wrap:balance;
}
/* pink slab under the payoff words */
.cta__hit{
  display:inline-block;position:relative;white-space:nowrap;
  padding:0 .34em .04em;color:var(--on-light);isolation:isolate;
}
.cta__hit::before{
  content:"";position:absolute;inset:.06em 0 .1em;z-index:-1;
  background:var(--white);
  clip-path:polygon(.32em 0,100% 0,calc(100% - .32em) 100%,0 100%);
}
.cta__sub{font-size:var(--fs-lead);color:var(--on-dark-mute);max-width:46ch;line-height:1.5}
/* the single biggest button on the site */
.cta .btn-row{margin-top:clamp(1.75rem,1.4rem + 1.4vw,2.5rem)}
.cta .btn--primary .btn__i{
  min-height:66px;padding:1.15rem 2.3rem;font-size:clamp(.98rem,.92rem + .3vw,1.14rem);
}
.cta .btn--ghost-light .btn__i{min-height:66px;padding:1.15rem 1.9rem}
.cta__meta{
  list-style:none;display:flex;flex-wrap:wrap;
  gap:.6rem clamp(1rem,2.2vw,2rem);
  margin-top:clamp(1.6rem,1.3rem + 1.4vw,2.25rem);
  padding-top:clamp(1.2rem,1rem + 1vw,1.6rem);
  border-top:1px solid rgba(255,255,255,.16);
}
.cta__meta li{
  display:flex;align-items:center;gap:.55rem;
  font-family:var(--display);font-weight:400;font-size:.74rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--on-dark-mute);
}
.cta__meta svg{flex:none;color:var(--on-dark)}
.cta__meta a{color:var(--on-dark);border-bottom:2px solid rgba(255,255,255,.3)}
.cta__meta a:hover{border-bottom-color:var(--pink)}

/* rotated offer stamp */
.cta__aside{display:flex;flex-direction:column;align-items:center;gap:1.5rem;order:-1}
@media (min-width:960px){.cta__aside{order:0}}
.cta__stamp{
  position:relative;display:grid;place-items:center;gap:.25rem;
  padding:clamp(1.4rem,1.1rem + 1.8vw,2.4rem) clamp(1.7rem,1.3rem + 2.4vw,3rem);
  background:var(--grad-pink);color:var(--on-pink);text-align:center;
  clip-path:polygon(22px 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%,0 22px);
  transform:rotate(-4deg);
  box-shadow:0 32px 72px -26px rgba(0,2,1,.95);
}
@media (min-width:960px){.cta__stamp{transform:rotate(-6deg)}}
.cta__stamp::before{
  content:"";position:absolute;inset:9px;pointer-events:none;
  border:2px solid rgba(255,255,255,.45);clip-path:inherit;
}
.cta__stamp b{
  font-family:var(--display);font-weight:400;
  font-size:clamp(3.2rem,2.4rem + 3.4vw,5.4rem);line-height:.82;letter-spacing:-.03em;
}
.cta__stamp span{
  font-family:var(--display);font-weight:400;font-size:clamp(.72rem,.68rem + .18vw,.84rem);
  letter-spacing:.22em;text-transform:uppercase;
}
/* sized in CSS, not by the asset: the mark used to inherit its intrinsic 160px
   and jumped when the artwork changed to the 300px lockup */
.cta__mark{width:clamp(112px,10vw,140px);height:auto;opacity:.9}

@media (prefers-reduced-motion:no-preference){
  .cta__stamp{transition:transform .5s var(--ease)}
  .cta:hover .cta__stamp{transform:rotate(-2deg) scale(1.03)}
}
/* if colour blending is unsupported the photo simply stays dark greyscale */
@supports not (mix-blend-mode:color){
  .cta__duo{background:linear-gradient(122deg,rgba(139,149,168,.4),transparent 70%);
    mix-blend-mode:normal}
}

/* ---------- 21. Footer ----------
   Four tiers on a diagonal seam: an asymmetric brand block beside hairline-divided
   link columns, a service-area line, an oversized outlined wordmark that acts as the
   sign-off, and a three-zone legal bar. */
.site-footer{
  --seam:clamp(22px,3vw,54px);
  position:relative;overflow:hidden;isolation:isolate;
  /* its own ground: a lifted plate that separates it from the black CTA above */
  background:linear-gradient(180deg,var(--ink-3) 0%,var(--ink-2) 38%,var(--ink-1) 100%);
  color:var(--on-dark);
  margin-top:calc(-1 * var(--seam));
  padding-top:var(--seam);
  clip-path:polygon(0 var(--seam),100% 0,100% 100%,0 100%);
}
.site-footer::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(58% 62% at 96% 0%,rgba(139,149,168,.12) 0%,transparent 64%);
}
/* pink seam rule traced along the diagonal cut itself */
.site-footer::after{
  content:"";position:absolute;left:0;right:0;top:0;z-index:3;pointer-events:none;
  height:calc(var(--seam) + 3px);
  background:linear-gradient(90deg,var(--pink) 0%,var(--pink) 40%,rgba(255,119,183,.5) 76%,rgba(255,119,183,.16) 100%);
  clip-path:polygon(0 var(--seam),100% 0,100% 3px,0 calc(var(--seam) + 3px));
}

/* --- tier 1: brand + columns --- */
.foot-top{
  display:grid;gap:clamp(2rem,1.5rem + 2.4vw,3.25rem);
  padding-block:clamp(2.75rem,2.2rem + 3vw,4.5rem);
}
@media (min-width:900px){
  .foot-top{grid-template-columns:minmax(0,1.05fr) minmax(0,1.55fr);
    gap:clamp(2rem,1rem + 3.4vw,4.5rem)}
}
.foot-brand img{height:92px;width:auto;margin-bottom:1.25rem}
.foot-brand p{font-size:var(--fs-body-s);color:var(--on-dark-mute);max-width:36ch;line-height:1.65}

.foot-cols{display:grid;gap:clamp(1.5rem,1.2rem + 1.4vw,2rem)}
@media (min-width:620px){.foot-cols{grid-template-columns:repeat(3,minmax(0,1fr));gap:0}}
.foot-col{min-width:0}
@media (min-width:620px){
  .foot-col{padding-inline:clamp(1rem,2vw,1.9rem);border-left:1px solid rgba(255,255,255,.13)}
  .foot-col:first-child{padding-left:0;border-left:0}
  .foot-col:last-child{padding-right:0}
}
.foot-col h2{
  display:flex;align-items:center;gap:.6rem;
  font-family:var(--display);font-weight:400;font-size:.74rem;
  letter-spacing:.22em;text-transform:uppercase;color:var(--on-dark);margin-bottom:1.1rem;
}
.foot-col h2::after{content:"";flex:1 1 auto;height:2px;transform:skewX(-24deg);
  background:linear-gradient(90deg,rgba(255,119,183,.5),rgba(255,119,183,0))}
.foot-col ul{list-style:none;display:grid;gap:.1rem}
.foot-col a{
  display:inline-flex;align-items:center;min-height:34px;
  font-size:.92rem;color:var(--on-dark-mute);
  transition:color .18s var(--ease),transform .18s var(--ease);
}
.foot-col a:hover{color:var(--pink);transform:translateX(3px)}
.foot-col address,.foot-col p{font-size:.9rem;color:var(--on-dark-mute);line-height:1.6}
.foot-col address a{font-weight:700;color:var(--on-dark);min-height:0;display:inline}
.foot-col address a:hover{transform:none}
.foot-phone{
  display:inline-flex;align-items:center;min-height:38px;margin-top:.55rem;
  font-family:var(--display);font-weight:400;font-size:1.05rem;letter-spacing:.04em;
  color:var(--on-dark)!important;border-bottom:2px solid var(--pink-28);
}
.foot-phone:hover{border-bottom-color:var(--pink);transform:none}

.socials{display:flex;gap:.6rem;margin-top:1.35rem}
.socials a{
  display:grid;place-items:center;width:46px;height:46px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.16);
  color:var(--on-dark-mute);clip-path:var(--clip-btn-sm);
  transition:color .2s var(--ease),border-color .2s var(--ease),background .2s var(--ease);
}
.socials a:hover{color:var(--white);border-color:var(--pink);background:var(--pink-14)}

/* --- tier 2: service areas --- */
.foot-areas{
  padding-block:clamp(1.1rem,1rem + .8vw,1.5rem);
  border-top:1px solid rgba(255,255,255,.12);
  font-family:var(--display);font-weight:400;font-size:.72rem;
  letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.45);
  line-height:1.7;
}
.foot-areas b{color:var(--on-dark);font-weight:400}

/* --- sign-off wordmark: full-bleed watermark sitting behind the footer --- */
.foot-mark{
  position:absolute;left:0;right:0;bottom:0;z-index:0;
  display:grid;justify-items:center;gap:clamp(.15rem,.5vw,.55rem);
  padding-bottom:clamp(.2rem,.7vw,.8rem);
  user-select:none;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 76%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 76%,transparent 100%);
}
.foot-mark__script{
  font-family:var(--display);font-weight:400;
  font-size:clamp(.7rem,.52rem + .78vw,1.1rem);
  letter-spacing:.42em;text-transform:uppercase;color:rgba(255,255,255,.4);
  padding-left:.42em;
}
.foot-mark__big{
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(3rem,calc(15vw + 40px),21rem);line-height:1;letter-spacing:-.02em;
  white-space:nowrap;
  color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.14);
}
@supports not (-webkit-text-stroke:1px red){
  .foot-mark__big{color:rgba(255,255,255,.085);-webkit-text-stroke:0}
}
/* on narrow screens the lockup's script line lands on the copyright line — drop it */
@media (max-width:900px){.foot-mark__script{display:none}}

/* --- tier 4: legal bar --- */
.foot-legal{
  display:grid;gap:.65rem 1.5rem;align-items:center;
  padding-block:1.35rem;border-top:1px solid rgba(255,255,255,.12);
  font-size:.79rem;color:rgba(255,255,255,.46);
}
@media (min-width:860px){
  .foot-legal{grid-template-columns:auto 1fr auto;gap:1.75rem}
  .foot-legal__links{justify-content:center}
}
.foot-legal p{margin:0;color:inherit}
.foot-legal__links{list-style:none;display:flex;flex-wrap:wrap;gap:0 1.35rem}
.foot-legal__links a{display:inline-flex;align-items:center;min-height:34px;color:inherit}
.foot-legal__links a:hover{color:var(--pink)}
.foot-credit{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--display);font-weight:400;font-size:.72rem;
  letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.5);
}
.foot-credit::before{content:"";width:7px;height:7px;background:var(--pink);
  transform:skewX(-24deg);flex:none}
.foot-credit b{color:var(--white);font-weight:400;letter-spacing:.2em}

/* ---------- 22. Prose ---------- */
.prose{max-width:70ch}
.prose h2{font-size:var(--fs-h3);margin:clamp(2rem,1.6rem + 1.5vw,3rem) 0 .9rem}
.prose h3{font-size:var(--fs-h4);font-family:var(--body);font-weight:800;
  text-transform:none;margin:1.8rem 0 .6rem}
.prose p,.prose li{font-size:var(--fs-body-s);line-height:1.72}
.prose ul,.prose ol{margin:.9rem 0;padding-left:1.35rem;display:grid;gap:.55rem}
.prose li::marker{color:var(--pink)}
.prose>p:first-child{font-size:var(--fs-body)}
.legal-dates{font-size:.8rem;letter-spacing:.04em;text-transform:uppercase;
  color:var(--on-light-faint);padding-bottom:.9rem;border-bottom:1px solid var(--line-light)}
.prose>.legal-dates{font-size:.8rem}

/* ---------- 23. Utilities ---------- */
.mb-xs{margin-bottom:.7rem}
.mb-sm{margin-bottom:1.1rem}
.mb-md{margin-bottom:1.6rem}
.mt-md{margin-top:1.6rem}
.mt-lg{margin-top:clamp(2rem,1.5rem + 2vw,3.25rem)}

/* ---------- 24. Reveal ---------- */
.reveal{opacity:0;transform:translateY(26px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.is-in{opacity:1;transform:none}
.reveal-d1{transition-delay:.09s}
.reveal-d2{transition-delay:.18s}
.reveal-d3{transition-delay:.27s}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .btn:hover,.plan:hover,.pillar:hover,.sched-peek li:hover{transform:none}
  .hero__media img{animation:none}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}
.no-js .reveal{opacity:1;transform:none}

/* ---------- 25. Print ---------- */
@media print{
  .site-header,.drawer,.cta,.map,.btn-row,.marquee,.bigtype{display:none!important}
  body{color:#000;background:#fff}
  .band{padding-block:1.5rem;clip-path:none!important;margin:0!important}
  .band--dark,.band--ink,.site-footer{background:#fff!important;color:#000!important}
  h1,h2,h3{color:#000!important}
}

/* brand mark block for light bands */
.brandmark{
  position:relative;display:flex;align-items:center;gap:clamp(1rem,.8rem + 1.2vw,2.25rem);
  padding:clamp(1.3rem,1.05rem + 1.4vw,2.1rem);
  background:linear-gradient(102deg,rgba(139,149,168,.14),transparent 70%);
  border:1px solid var(--line-light);
  clip-path:polygon(0 0,calc(100% - 26px) 0,100% 26px,100% 100%,26px 100%,0 calc(100% - 26px));
}
.brandmark::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--pink)}
.brandmark img{width:clamp(82px,8vw,112px);height:auto;flex:none}
.brandmark p{font-size:var(--fs-body-s);line-height:1.6;max-width:56ch}
.brandmark strong{font-family:var(--display);font-weight:400;letter-spacing:.04em;
  text-transform:uppercase;color:var(--on-light)}
@media (max-width:600px){.brandmark{flex-direction:column;align-items:flex-start;gap:1rem}}






/* ---------- 27. Orchestrated hero entrance ----------
   One staggered load sequence instead of scattered micro-interactions. Everything
   starts hidden ONLY inside this query, so a reduced-motion visitor simply sees
   the finished hero. */
@media (prefers-reduced-motion:no-preference){
  .hero .eyebrow,
  .hero .hline,
  .hero__sub,
  .hero .btn-row,
  .hero__proof,
  .hero__media{
    opacity:0;animation:heroIn .85s var(--ease) both;
  }
  .hero .eyebrow{animation-delay:.06s}
  .hero .hline--out{animation-delay:.15s}
  .hero .hline--big{animation-delay:.24s}
  .hero .hline--grad{animation-delay:.33s}
  .hero__sub{animation-delay:.44s}
  .hero .btn-row{animation-delay:.53s}
  .hero__proof{animation-delay:.62s}
  .hero__media{animation:panelIn 1.05s var(--ease) both;animation-delay:.16s}
  .hero__badge{opacity:0;animation:heroIn .7s var(--ease) both;animation-delay:.9s}
  .hero__rail{transform-origin:top;animation:railIn 1.1s var(--ease) both;animation-delay:.1s}
}
@keyframes heroIn{
  from{opacity:0;transform:translateY(20px)}
  to{opacity:1;transform:none}
}
@keyframes panelIn{
  from{opacity:0;transform:translateY(26px) scale(.985)}
  to{opacity:1;transform:none}
}
@keyframes railIn{
  from{transform:scaleY(0)}
  to{transform:scaleY(1)}
}


/* ---------- 28. Ink pillar cards (dark cards on a light band) ---------- */
.pillars--ink .pillar,
.band--light .pillars--ink .pillar,
.band--off .pillars--ink .pillar,
.band--soft .pillars--ink .pillar{
  background:
    radial-gradient(124% 104% at 0% 0%,rgba(139,149,168,.2) 0%,rgba(139,149,168,.04) 42%,transparent 66%),
    linear-gradient(166deg,var(--ink-4) 0%,var(--ink-1) 74%);
  border-color:rgba(255,255,255,.11);
  box-shadow:0 28px 56px -32px rgba(0,2,1,.8);
}
.pillars--ink .pillar::before{
  background:linear-gradient(90deg,#ffffff 0%,rgba(255,255,255,.7) 30%,rgba(255,255,255,0) 88%);
}
.pillars--ink .pillar h3,.pillars--ink .pillar h4{color:var(--on-dark)}
.pillars--ink .pillar p{color:var(--on-dark-mute)!important}
.pillars--ink .pillar[data-n]::after{-webkit-text-stroke-color:rgba(255,255,255,.35)}
.band--light .pillars--ink .pillar:hover,
.band--off .pillars--ink .pillar:hover,
.band--soft .pillars--ink .pillar:hover,
.pillars--ink .pillar:hover{
  background:
    radial-gradient(124% 104% at 0% 0%,rgba(139,149,168,.3) 0%,rgba(139,149,168,.08) 46%,transparent 70%),
    linear-gradient(166deg,var(--ink-4) 0%,var(--ink-1) 74%);
  border-color:var(--pink-28);
  box-shadow:0 36px 74px -32px rgba(0,2,1,.85);
}
.pillars--ink .pillar:hover::after{-webkit-text-stroke-color:rgba(255,255,255,.6)}


/* ---------- 26. Program mosaic ----------
   One dominant tile plus two compact ones. Asymmetric by construction, so the three
   programs cannot read as repeats — and it costs roughly a third of the height the
   previous full-bleed bands did. Copy is deliberately short: the detail belongs on
   each program page, the homepage only has to make someone pick a room. */
.pmosaic{display:grid;gap:clamp(.85rem,.7rem + .6vw,1.25rem)}
/* Two programmes, so two tiles side by side: the lead takes the wider column
   and the sibling stretches to match its height. (It was a 2x2 grid with the
   lead spanning both rows, which left an empty cell once no-gi folded into the
   adult programme.) */
@media (min-width:900px){
  .pmosaic{grid-template-columns:minmax(0,1.34fr) minmax(0,1fr)}
}

.ptile{
  position:relative;display:flex;align-items:flex-end;overflow:hidden;isolation:isolate;
  min-height:clamp(285px,42vw,330px);
  background:var(--ink-3);color:var(--on-dark);
  clip-path:var(--clip-card);
  transition:transform .38s var(--ease);
}
.ptile--lead{min-height:clamp(380px,58vw,690px)}
.ptile > img{
  position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;
  transition:transform .9s var(--ease);
}
.ptile::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(to top,rgba(0,2,1,.97) 0%,rgba(0,2,1,.92) 40%,rgba(0,2,1,.46) 68%,rgba(0,2,1,.52) 100%),
    linear-gradient(122deg,rgba(139,149,168,.2) 0%,transparent 50%);
  transition:background .4s var(--ease);
}
.ptile--lead::after{
  background:
    linear-gradient(to top,rgba(0,2,1,.95) 0%,rgba(0,2,1,.8) 27%,rgba(0,2,1,.24) 58%,rgba(0,2,1,.44) 100%),
    linear-gradient(122deg,rgba(139,149,168,.2) 0%,transparent 50%);
}
.ptile:hover{transform:translate(-4px,-4px)}
.ptile:hover > img{transform:scale(1.06)}
.ptile:hover::after{
  background:
    linear-gradient(to top,rgba(0,2,1,.97) 0%,rgba(0,2,1,.9) 40%,rgba(0,2,1,.42) 70%,rgba(0,2,1,.48) 100%),
    linear-gradient(122deg,rgba(139,149,168,.3) 0%,transparent 58%);
}
.ptile--lead:hover::after{
  background:
    linear-gradient(to top,rgba(0,2,1,.95) 0%,rgba(0,2,1,.78) 27%,rgba(0,2,1,.2) 60%,rgba(0,2,1,.4) 100%),
    linear-gradient(122deg,rgba(139,149,168,.3) 0%,transparent 58%);
}
.ptile__chamfer{
  position:absolute;z-index:2;right:0;top:0;pointer-events:none;
  width:calc(var(--cut-lg) * 1.7);height:calc(var(--cut-lg) * 1.7);
  background:var(--grad-steel);clip-path:polygon(100% 0,100% 100%,0 0);
}
.ptile__n{
  position:absolute;z-index:1;
  top:clamp(.85rem,1.6vw,1.4rem);left:clamp(1.15rem,.9rem + 1.1vw,1.9rem);
  font-family:var(--display);font-weight:400;
  font-size:clamp(2rem,1.5rem + 1.9vw,3.4rem);line-height:1;letter-spacing:-.04em;
  color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.75);
  transition:-webkit-text-stroke-color .3s var(--ease);
}
.ptile:hover .ptile__n{-webkit-text-stroke-color:var(--white)}

.ptile__body{
  position:relative;z-index:1;width:100%;
  padding:clamp(1.15rem,.9rem + 1.1vw,1.9rem);
}
.ptile__tag{
  font-family:var(--display);font-weight:400;font-size:.68rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--steel-light);margin-bottom:.55rem;
}
.ptile h3{
  margin-bottom:.55rem;color:var(--on-dark);
  font-size:clamp(1.35rem,1.1rem + 1.1vw,2rem);line-height:.98;
}
.ptile--lead h3{font-size:clamp(1.8rem,1.3rem + 2.4vw,3.2rem)}
.ptile__lede{
  font-size:var(--fs-body-s);line-height:1.55;
  color:rgba(255,255,255,.84)!important;max-width:44ch;
}
.ptile--lead .ptile__lede{font-size:clamp(1rem,.94rem + .35vw,1.16rem);line-height:1.5}
.ptile__facts{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1.1rem}
.ptile__facts li{
  padding:.34rem .72rem;font-family:var(--display);font-weight:400;font-size:.68rem;
  letter-spacing:.13em;text-transform:uppercase;color:var(--on-dark);
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.18);
  clip-path:var(--clip-btn-sm);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.ptile__go{
  display:inline-flex;align-items:center;gap:.5rem;margin-top:1.15rem;position:relative;
  font-family:var(--display);font-weight:400;font-size:.82rem;
  letter-spacing:.13em;text-transform:uppercase;color:var(--pink);
}
.ptile__go::before{
  content:"";position:absolute;left:0;right:0;bottom:-4px;height:3px;background:var(--pink);
  transform:skewX(-24deg) scaleX(.34);transform-origin:left;
  transition:transform .34s var(--ease);
}
.ptile:hover .ptile__go::before{transform:skewX(-24deg) scaleX(1)}
.ptile:hover .ptile__go svg{transform:translateX(5px)}
.ptile__go svg{transition:transform .3s var(--ease)}


/* ---------- 30. Creed ----------
   Not cards. A full-width editorial list: source in a narrow margin column, the
   statement set large in the display face, hairline rules between. The opening
   statement is set bigger than the rest so the block has a clear entry point. */
.creed-wrap{position:relative}
.creed{position:relative;list-style:none;border-top:1px solid var(--line-dark)}
.creed__row{
  position:relative;display:grid;gap:.6rem;
  padding:clamp(1.5rem,1.2rem + 1.6vw,2.5rem) 0;
  border-bottom:1px solid var(--line-dark);
  transition:background .3s var(--ease);
}
.creed__row::before{
  content:"";position:absolute;left:0;top:-1px;height:3px;width:0;
  background:var(--pink);transform:skewX(-24deg);
  transition:width .4s var(--ease);
}
.creed__row:hover::before{width:min(120px,32%)}
.creed__row:hover{background:linear-gradient(90deg,rgba(255,255,255,.05),transparent 62%)}
@media (min-width:860px){
  .creed__row{
    grid-template-columns:minmax(150px,.24fr) minmax(0,1fr);
    gap:clamp(1.5rem,1rem + 2.6vw,3.5rem);
    align-items:start;
  }
}
.creed__meta{display:flex;align-items:baseline;gap:.7rem;padding-top:.4rem}
.creed__i{
  font-family:var(--display);font-weight:400;font-size:.82rem;letter-spacing:.14em;
  color:var(--steel-light);flex:none;
}
.creed__src{
  font-family:var(--display);font-weight:400;font-size:.7rem;letter-spacing:.17em;
  text-transform:uppercase;color:rgba(255,255,255,.58);line-height:1.5;
}
.creed__say{
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(1.1rem,1rem + .7vw,1.62rem);line-height:1.1;letter-spacing:.004em;
  color:var(--on-dark-mute);margin:0;
  transition:color .3s var(--ease);
}
.creed__row:hover .creed__say{color:var(--on-dark)}
.creed__row--lead .creed__say{
  font-size:clamp(1.6rem,1.25rem + 2.1vw,3rem);line-height:1.02;
  color:var(--on-dark);
}
.creed__row--lead .creed__say em{
  font-style:normal;
  background:var(--grad-pink);-webkit-background-clip:text;background-clip:text;color:transparent;
}
/* oversized opening quote mark, bleeding off the top-left */
.creed__mark{
  position:absolute;z-index:0;pointer-events:none;user-select:none;
  top:clamp(-2.6rem,-2vw,-1.2rem);right:0;
  font-family:var(--display);font-weight:400;
  font-size:clamp(7rem,5rem + 12vw,17rem);line-height:1;
  color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.12);
}
@media (max-width:860px){.creed__mark{display:none}}

/* ---------- 31. FAQ, enriched ---------- */
.faq details{position:relative;padding-left:clamp(.8rem,1.6vw,1.25rem);
  transition:background .3s var(--ease)}
.faq details::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--pink);
  transform:scaleY(0);transform-origin:top;transition:transform .32s var(--ease);
}
.faq details[open]::before{transform:scaleY(1)}
.faq details[open]{background:linear-gradient(90deg,rgba(139,149,168,.1),transparent 62%)}
.band--dark .faq details[open],.band--ink .faq details[open]{
  background:linear-gradient(90deg,rgba(255,255,255,.06),transparent 62%)}
.faq summary{gap:1rem}
.faq__n{
  flex:none;font-family:var(--display);font-weight:400;font-size:.8rem;
  letter-spacing:.12em;color:var(--on-light-faint);opacity:.9;
  min-width:2.1em;padding-top:.2em;
}
.faq details[open] .faq__n{opacity:1}
.faq__q{flex:1 1 auto;min-width:0}
.faq__a{padding-left:calc(2.1em + 1rem)}
@media (max-width:560px){.faq__a{padding-left:0}}
.faq-cat{
  display:flex;align-items:center;gap:.7rem;margin:clamp(1.6rem,1.3rem + 1vw,2.4rem) 0 .35rem;
  font-family:var(--display);font-weight:400;font-size:.72rem;
  letter-spacing:.22em;text-transform:uppercase;color:var(--on-light);
}
.faq-cat:first-child{margin-top:0}
.faq-cat::after{content:"";flex:1 1 auto;height:3px;transform:skewX(-24deg);
  background:linear-gradient(90deg,rgba(255,119,183,.5),rgba(255,119,183,0))}

.faq-grid{display:grid;gap:clamp(1.75rem,1.3rem + 2.4vw,3rem)}
@media (min-width:1000px){
  .faq-grid{grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);
    column-gap:clamp(2rem,1rem + 3.4vw,4.5rem);align-items:start}
  .faq-aside{position:sticky;top:calc(var(--header-h-sm) + 2rem)}
}
.faq-help{
  position:relative;overflow:hidden;color:var(--on-dark);
  padding:clamp(1.5rem,1.2rem + 1.5vw,2.25rem);
  background:
    radial-gradient(124% 100% at 0% 0%,rgba(139,149,168,.2) 0%,rgba(139,149,168,.05) 44%,transparent 68%),
    linear-gradient(166deg,var(--ink-4) 0%,var(--ink-1) 74%);
  border:1px solid rgba(255,255,255,.11);
  clip-path:polygon(0 0,calc(100% - 28px) 0,100% 28px,100% 100%,28px 100%,0 calc(100% - 28px));
  box-shadow:0 28px 56px -32px rgba(0,2,1,.8);
}
.faq-help::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;
  background:linear-gradient(90deg,#ffffff 0%,rgba(255,255,255,.7) 32%,rgba(255,255,255,0) 86%)}
.faq-help h3{color:var(--on-dark);margin-bottom:.7rem;
  font-size:clamp(1.3rem,1.1rem + .9vw,1.75rem)}
.faq-help p{color:var(--on-dark-mute)!important;font-size:var(--fs-body-s)}
.faq-help__facts{list-style:none;display:grid;gap:.55rem;margin:1.25rem 0 1.5rem}
.faq-help__facts li{
  display:flex;align-items:center;gap:.6rem;
  font-family:var(--display);font-weight:400;font-size:.76rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark)!important;
}
.faq-help__facts li::before{content:"";flex:none;width:8px;height:8px;background:var(--pink);
  transform:skewX(-24deg)}
.faq-help .btn{width:100%}
.faq-help .btn-row{margin-top:0;gap:.6rem}

/* ---------- Find us: address slab + filling map, arrival tiles, serving rail ----------
   Replaced the old map with a card floating over its right edge and a chip row that
   ran out two-thirds across. Both columns here stretch to the same height and every
   row fills its width. */
.arrive{
  display:grid;gap:clamp(1rem,.85rem + 1vw,1.6rem);
  margin-top:clamp(1.9rem,1.5rem + 2vw,3rem);
}
@media (min-width:940px){
  .arrive{grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);align-items:stretch}
}
.arrive__slab{
  position:relative;overflow:hidden;color:var(--on-dark);
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(1.6rem,1.25rem + 1.8vw,2.6rem);
  background:
    radial-gradient(122% 96% at 100% 0%,rgba(139,149,168,.2) 0%,rgba(139,149,168,.04) 44%,transparent 70%),
    linear-gradient(168deg,var(--ink-4) 0%,var(--ink-1) 76%);
  border:1px solid rgba(255,255,255,.12);
  clip-path:polygon(0 0,calc(100% - 30px) 0,100% 30px,100% 100%,30px 100%,0 calc(100% - 30px));
  box-shadow:0 34px 70px -34px rgba(0,2,1,.9);
}
.arrive__slab::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;
  background:linear-gradient(90deg,#ffffff 0%,rgba(255,255,255,.7) 30%,rgba(255,255,255,0) 88%)}
.arrive .arrive__eyebrow{
  font-family:var(--display);font-weight:400;font-size:.7rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--on-dark)!important;margin-bottom:.9rem;
}
.arrive .arrive__addr{
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(1.75rem,1.3rem + 2.1vw,3.1rem);line-height:.98;letter-spacing:-.012em;
  color:var(--on-dark)!important;margin:0 0 1.1rem;
}
.arrive .arrive__note{
  font-size:var(--fs-body-s);line-height:1.6;color:var(--on-dark-mute)!important;max-width:44ch;
  padding-top:1.1rem;border-top:1px solid rgba(255,255,255,.14);
}
.arrive__slab .btn-row .btn{width:100%}
@media (min-width:520px){.arrive__slab .btn-row .btn{width:auto}}

.arrive__map{
  position:relative;overflow:hidden;background:var(--ink-2);
  min-height:clamp(300px,32vw,430px);
  clip-path:var(--clip-frame);
}
.arrive__map iframe{
  position:absolute;inset:0;width:100%;height:100%;border:0;display:block;
  filter:grayscale(.34) contrast(1.08);
}
.arrive__chamfer{
  position:absolute;z-index:2;left:0;bottom:0;pointer-events:none;
  width:calc(var(--cut-lg) * 2);height:calc(var(--cut-lg) * 2);
  background:var(--grad-steel);clip-path:polygon(0 0,100% 100%,0 100%);
}
.arrive__pin{
  position:absolute;z-index:3;left:0;top:clamp(1rem,3vw,1.75rem);
  display:flex;align-items:center;gap:.6rem;margin:0;
  padding:.7rem 1.45rem .7rem 1.1rem;
  background:var(--grad-steel-band);color:var(--white);
  clip-path:polygon(0 0,100% 0,calc(100% - 15px) 100%,0 100%);
  font-family:var(--display);font-weight:400;font-size:clamp(.7rem,.66rem + .18vw,.8rem);
  letter-spacing:.15em;text-transform:uppercase;
  box-shadow:0 18px 40px -20px rgba(0,2,1,.9);
}
.arrive__pin svg{flex:none}

/* three arrival tiles — equal tracks, so they always end level */
.arrive__tiles{
  list-style:none;display:grid;gap:clamp(1rem,.85rem + 1vw,1.6rem);
  margin-top:clamp(1rem,.85rem + 1vw,1.6rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));
}
.arrive__tiles li{
  position:relative;overflow:hidden;
  padding:clamp(1.3rem,1.05rem + 1.2vw,1.9rem);
  background:var(--white);border:1px solid var(--line-light);
  clip-path:var(--clip-card);
  box-shadow:0 20px 44px -32px rgba(0,2,1,.45);
  transition:border-color .24s var(--ease),transform .24s var(--ease);
}
.arrive__tiles li:hover{border-color:var(--pink-28);transform:translate(-3px,-3px)}
.arrive__tiles li::before{content:"";position:absolute;left:0;top:0;height:4px;width:44%;
  background:var(--grad-steel)}
.arrive__n{
  display:block;font-family:var(--display);font-weight:400;line-height:1;
  font-size:clamp(1.6rem,1.3rem + 1.2vw,2.3rem);letter-spacing:-.03em;
  color:transparent;-webkit-text-stroke:2px rgba(139,149,168,.55);margin-bottom:.75rem;
}
@supports not (-webkit-text-stroke:1px red){.arrive__n{color:rgba(139,149,168,.55);-webkit-text-stroke:0}}
.arrive__tiles b{
  display:block;font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(1.05rem,.98rem + .4vw,1.28rem);line-height:1.06;color:var(--on-light);
  margin-bottom:.55rem;
}
.arrive__tiles span:not(.arrive__n){
  display:block;font-size:var(--fs-body-s);line-height:1.6;color:var(--on-light-mute);
}

/* serving rail: the chips grow so the row is always full */
.arrive__serving{
  display:flex;flex-wrap:wrap;align-items:center;gap:.75rem clamp(1rem,2vw,1.75rem);
  margin-top:clamp(1.5rem,1.25rem + 1.4vw,2.25rem);
  padding-top:clamp(1.25rem,1rem + 1vw,1.75rem);
  border-top:1px solid var(--line-light);
}
.arrive__serving-label{
  flex:none;margin:0;font-family:var(--display);font-weight:400;font-size:.72rem;
  letter-spacing:.22em;text-transform:uppercase;color:var(--on-light)!important;
}
.arrive__serving ul{flex:1 1 320px;list-style:none;display:flex;flex-wrap:wrap;gap:.5rem}
.arrive__serving li{
  flex:1 1 auto;text-align:center;padding:.45rem .9rem;
  font-family:var(--display);font-weight:400;font-size:.72rem;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--on-light-mute);background:rgba(0,2,1,.035);
  border:1px solid var(--line-light);clip-path:var(--clip-btn-sm);
}
.arrive__serving li:first-child{color:var(--white);background:var(--ink-1);border-color:transparent}


/* the FAQ help card still uses this label class */
.visit__eyebrow{
  font-family:var(--display);font-weight:400;font-size:.7rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--on-dark)!important;margin-bottom:.8rem;
}

/* keep the label readable inside the help card (beats `.faq-help p`) */
.faq-help .visit__eyebrow{color:var(--on-dark)!important}


/* ---------- 32. Free-trial dialog ----------
   Opened by every [data-booking] trigger. Deliberately ONE column: a banner
   (duotone photo, outlined display word, rotated $0 stamp) over a fact strip
   and the form, so no layout can open a dead gutter and the dialog reads the
   same from 375px up. THE CUT shows in the panel shear (top-left +
   bottom-right), the pink chamfer filling the top-left cut, and the sheared
   chips, inputs and stamp. */
.tmodal{
  position:fixed;inset:0;z-index:300;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(.6rem,2vw,2rem);
  visibility:hidden;pointer-events:none;
}
.tmodal.is-open{visibility:visible;pointer-events:auto}
.tmodal__scrim{
  position:absolute;inset:0;background:rgba(0,2,1,.72);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;transition:opacity .3s var(--ease);
}
.tmodal.is-open .tmodal__scrim{opacity:1}

/* One ink panel, one pink rule along the top, one cut at the bottom-right.
   The top edge stays square so the pink rule runs the full width without a
   corner inlay to patch it. */
.tmodal__panel{
  position:relative;z-index:1;
  width:min(560px,100%);max-height:calc(100svh - clamp(1.2rem,4vw,4rem));
  display:flex;flex-direction:column;
  color:var(--on-dark);
  background:linear-gradient(168deg,var(--ink-4) 0%,var(--ink-1) 74%);
  border:1px solid rgba(255,255,255,.14);border-top:3px solid var(--pink);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 28px),calc(100% - 28px) 100%,0 100%);
  box-shadow:0 46px 90px -30px rgba(0,2,1,.94);
  opacity:0;transform:translateY(18px) scale(.985);
  transition:opacity .34s var(--ease),transform .34s var(--ease);
}
.tmodal.is-open .tmodal__panel{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .tmodal__panel,.tmodal__scrim{transition:none}
  .tmodal__panel{transform:none}
}

.tmodal__x{
  position:absolute;z-index:6;top:0;right:0;
  width:46px;height:46px;display:grid;place-items:center;
  color:var(--on-dark);background:rgba(0,2,1,.5);
  border:0;border-left:1px solid rgba(255,255,255,.16);border-bottom:1px solid rgba(255,255,255,.16);
  cursor:pointer;transition:background .18s var(--ease),color .18s var(--ease);
}
.tmodal__x:hover{background:var(--pink-hot);color:var(--on-pink)}
.tmodal__x:focus-visible{outline:2px solid var(--pink);outline-offset:-4px}

/* ---- head: a title and one line, nothing behind them ---- */
.tmodal__head{
  flex:none;padding:clamp(1.3rem,1rem + 1vw,1.75rem) clamp(1.15rem,.8rem + 1.8vw,2rem)
        clamp(1rem,.85rem + .6vw,1.25rem);
  padding-right:clamp(3.4rem,3rem + 1.8vw,4.2rem);
  border-bottom:1px solid rgba(255,255,255,.12);
}
.tmodal__head h2{
  margin:0 0 .5rem;color:var(--on-dark);
  font-size:clamp(1.55rem,1.25rem + 1.4vw,2.15rem);line-height:.98;
}
.tmodal__head h2 em{font-style:normal;color:var(--pink)}
.tmodal__lede{
  margin:0;max-width:44ch;
  color:var(--on-dark-mute)!important;font-size:var(--fs-body-s);line-height:1.55;
}

/* ---- body ---- */
.tmodal__body{
  position:relative;z-index:2;min-width:0;flex:1 1 auto;
  overflow-y:auto;overscroll-behavior:contain;
  padding:clamp(1.15rem,.95rem + .8vw,1.5rem) clamp(1.15rem,.8rem + 1.8vw,2rem)
          clamp(1.25rem,1rem + .9vw,1.65rem);
}

/* `.form` sets display:grid, which beats the UA [hidden] rule — restate it
   so the success panel can swap in over the form. */
.tmodal__form[hidden]{display:none}
.tmodal__form{gap:.9rem}
/* direct child only: the programme pills are <label>s too, further down the
   tree, and display:flex here would shrink-wrap their spans off the pill */
.tmodal__form .field > label,.tmodal__form .field legend{
  display:flex;align-items:center;gap:.3rem;padding:0;
  font-family:var(--display);font-weight:400;font-size:.74rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--on-dark-mute);
}
.tmodal__form .field input{
  min-height:50px;padding:.8rem .95rem;background:rgba(255,255,255,.05);color:var(--on-dark);
  border-color:rgba(255,255,255,.14);border-radius:10px;clip-path:none;
}
.tmodal__form .field input::placeholder{color:rgba(255,255,255,.3)}
.tmodal__form .field input:focus{border-color:var(--pink);background:rgba(255,119,183,.09)}

.tmodal__pick{border:0;padding:0;margin:0;min-width:0}
.tmodal__opts{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.5rem}
/* two options, so let them split the row evenly instead of sizing to their
   labels, which left a ragged gap down the middle */
.tmodal__opts .pick{flex:1 1 0;min-width:11rem;display:block}
.tmodal__opts .pick span{
  text-align:center;font-size:.74rem;letter-spacing:.06em;
  padding:.62rem 1rem;border-radius:999px;clip-path:none;
}
.tmodal__pick .err{display:block;margin-top:.4rem}
.tmodal__pick.is-invalid .pick span{border-color:var(--pink)}

/* ---- SMS opt-ins ----
   Native checkboxes tinted with accent-color rather than a custom box: two
   states, no pseudo-element, no svg. The copy is legal wording, so it is set
   in body type at full length -- never truncated or hidden behind a toggle. */
.tmodal__consent{display:grid;gap:.62rem;margin-top:.1rem}
/* Both opt-ins are required, so an unticked one has to read as an error rather
   than as fine print the visitor skipped. The message sits under the label it
   belongs to, not in a shared slot, so it is obvious which box is missing. */
.consent.is-invalid > span:first-of-type{color:var(--on-dark)}
.consent.is-invalid input{outline:2px solid var(--pink);outline-offset:2px}
.consent .err{display:block;grid-column:2;margin-top:.3rem;font-size:.76rem;color:var(--pink)}
.consent .err:empty{display:none}
.consent{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:.6rem;
  align-items:start;cursor:pointer;
}
.consent input{
  flex:none;width:17px;height:17px;min-height:0;margin:.16rem 0 0;padding:0;
  accent-color:var(--pink);background:none;border:0;border-radius:3px;clip-path:none;
  /* renders the native unchecked box dark instead of stark white on this panel;
     its boundary still measures 5.6:1 against the ground, and accent-color
     keeps the checked state pink */
  color-scheme:dark;
}
.consent input:focus-visible{outline:2px solid var(--pink);outline-offset:2px}
.consent > span{
  font-family:var(--body);font-size:.71rem;line-height:1.5;letter-spacing:0;
  text-transform:none;color:var(--on-dark-faint);
}
.consent:hover > span{color:var(--on-dark-mute)}

/* "Optional" sits where the required asterisk would be, so a field without an
   asterisk is never just ambiguous */
.tmodal__form .field .opt{
  font-size:.62rem;letter-spacing:.14em;color:var(--on-dark-faint);
}

/* First/last name are two short fields: pair them well before the viewport is
   wide enough for phone + email, so a phone screen loses a row of height. */
@media (min-width:380px){
  .tmodal__form .form__row--tight{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem;
  }
}

.tmodal__send{width:100%;margin-top:.15rem;border-radius:12px;clip-path:none}
.tmodal__send .btn__i{border-radius:10px;clip-path:none}
.tmodal__alt{
  margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:.15rem .5rem;
  font-size:.8rem;color:var(--on-dark-faint)!important;
}
.tmodal__alt a{
  font-family:var(--display);font-weight:400;font-size:1rem;letter-spacing:.06em;
  color:var(--white);border-bottom:2px solid var(--pink-28);padding-bottom:1px;
}
.tmodal__alt a:hover{border-bottom-color:var(--pink);color:var(--pink)}
.tmodal__form .form__status{
  background:rgba(255,119,183,.16);border-color:var(--pink-28);color:var(--on-dark);
  border-radius:10px;clip-path:none;
}

/* ---- success state ---- */
.tmodal__done[hidden]{display:none}
.tmodal__done{padding:.2rem 0}
.tmodal__done:focus{outline:0}
.tmodal__done-badge{
  display:grid;place-items:center;width:54px;height:54px;margin-bottom:1.15rem;
  color:var(--on-pink);background:var(--grad-pink);clip-path:var(--clip-btn-sm);
}
.tmodal__done-badge svg{width:25px;height:25px}
.tmodal__done h3{
  margin:0 0 .7rem;color:var(--on-dark);
  font-size:clamp(1.5rem,1.2rem + 1.4vw,2.2rem);line-height:1;
}
.tmodal__done-copy{
  margin:0;color:var(--on-dark-mute)!important;font-size:var(--fs-body-s);line-height:1.62;
}
.tmodal__done .btn-row{margin-top:clamp(1.2rem,1rem + 1vw,1.8rem)}

/* Short windows. With the banner gone there is far less to give back, so this
   is one step instead of three: tighten the head and the field gaps and the
   four inputs plus the button still land without scrolling. */
@media (max-height:660px){
  .tmodal{padding:.45rem}
  .tmodal__head{padding-top:.95rem;padding-bottom:.8rem}
  .tmodal__head h2{font-size:clamp(1.35rem,1.1rem + 1vw,1.7rem);margin-bottom:.35rem}
  .tmodal__lede{display:none}
  .tmodal__body{padding-top:.9rem;padding-bottom:.95rem}
  .tmodal__form{gap:.62rem}
  .tmodal__form .field{gap:.3rem}
  .tmodal__form .field input{min-height:45px}
  .tmodal__consent{gap:.5rem}
  .consent input{width:16px;height:16px}
  .consent > span{font-size:.68rem;line-height:1.42}
}

/* ---------- 33. Booking page (step 2 of the free-trial funnel) ----------
   One photo-led header carries the whole message: a skewed pink alert ribbon
   bleeding off both edges of the frame, the copy on the shadowed side, and a
   boarding-pass stub holding the price, the two-step progress and the scroll
   cue. The calendar band below meets it on a diagonal seam. Glow comes from
   layered pink radials and rim shadows — same palette, no new hues. */

.bkhero{
  --bk-seam:clamp(26px,4vw,68px);
  position:relative;isolation:isolate;overflow:hidden;color:var(--on-dark);
  background:var(--ink-1);
  padding-top:calc(var(--header-h) + clamp(.5rem,.4rem + .4vw,.9rem));
  padding-bottom:calc(clamp(2.5rem,1.9rem + 3vw,4.75rem) + var(--bk-seam));
}
.bkhero__media{position:absolute;inset:0;z-index:-3}
.bkhero__media img{
  width:100%;height:100%;object-fit:cover;object-position:74% 40%;
  filter:grayscale(.8) contrast(1.16) brightness(.38);
}
/* legibility: dark on the copy side, plus a top band so the transparent nav
   plate stays readable, plus a pink light-leak from the top right */
.bkhero__scrim{
  position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(0,2,1,.88) 0%,rgba(0,2,1,.34) 22%,transparent 42%),
    linear-gradient(96deg,rgba(0,2,1,.96) 0%,rgba(0,2,1,.9) 34%,rgba(0,2,1,.66) 62%,rgba(0,2,1,.5) 82%,rgba(0,2,1,.68) 100%),
    radial-gradient(72% 58% at 92% 4%,rgba(139,149,168,.18) 0%,transparent 64%);
}
.bkhero__word{
  position:absolute;z-index:-1;right:-.05em;bottom:-.22em;pointer-events:none;user-select:none;
  font-family:var(--display);font-weight:400;line-height:1;
  font-size:clamp(4.5rem,15vw,13rem);letter-spacing:-.02em;text-transform:uppercase;
  color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.14);
}

/* ---- the alert ribbon: skewed, bleeding off both edges ---- */
.bkhero__ribbon{
  position:relative;z-index:2;
  margin:0 0 clamp(1.9rem,1.5rem + 1.8vw,3.25rem);
  transform:skewY(-1.1deg);
  background:var(--grad-pink);
  box-shadow:0 22px 54px -20px rgba(255,119,183,.66);
}
.bkhero__ribbon::before,.bkhero__ribbon::after{
  content:"";position:absolute;left:0;right:0;height:2px;pointer-events:none;
}
.bkhero__ribbon::before{top:0;background:rgba(255,255,255,.8)}
.bkhero__ribbon::after{
  bottom:0;background:rgba(0,2,1,.3);
  animation:bkPulse 2.6s var(--ease) infinite;
}
@keyframes bkPulse{0%,100%{opacity:.35}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.bkhero__ribbon::after{animation:none;opacity:.7}}
.bkhero__ribbon-in{
  transform:skewY(1.1deg);
  width:100%;max-width:var(--maxw);margin-inline:auto;
  padding:clamp(.8rem,.65rem + .6vw,1.15rem) var(--gutter);
  display:flex;align-items:center;gap:clamp(.7rem,.55rem + .6vw,1.1rem);
}
.bkhero__bang{
  flex:none;display:grid;place-items:center;width:36px;height:36px;
  font-family:var(--display);font-weight:400;font-size:1.45rem;line-height:1;
  color:var(--pink-ink);background:var(--white);clip-path:var(--clip-btn-sm);
  box-shadow:0 0 0 4px rgba(255,255,255,.2);
}
.bkhero__ribbon-t{margin:0;line-height:1.32;color:var(--white)}
.bkhero__ribbon-t b{
  display:block;font-family:var(--display);font-weight:400;
  font-size:clamp(1.02rem,.92rem + .7vw,1.45rem);letter-spacing:.04em;text-transform:uppercase;
}
.bkhero__ribbon-t span{display:block;margin-top:.1rem;font-size:var(--fs-body-s)}

/* ---- copy + stub ---- */
.bkhero__grid{position:relative;z-index:1;display:grid;gap:clamp(1.75rem,1.4rem + 1.6vw,2.75rem)}
@media (min-width:940px){
  .bkhero__grid{grid-template-columns:minmax(0,1fr) minmax(0,330px);align-items:stretch}
}
.bkhero__copy{min-width:0;max-width:60ch}
.bkhero__greet{
  margin:0 0 .5rem;font-family:var(--display);font-weight:400;
  font-size:clamp(1rem,.9rem + .5vw,1.28rem);letter-spacing:.05em;text-transform:uppercase;
  color:var(--white);
}
.bkhero__greet[hidden]{display:none}
.bkhero__eyebrow{
  margin:0 0 .8rem;display:flex;align-items:center;gap:.7rem;
  font-family:var(--display);font-weight:400;font-size:.72rem;
  letter-spacing:.26em;text-transform:uppercase;color:var(--on-dark)!important;
}
.bkhero__eyebrow::before{
  content:"";flex:none;width:34px;height:3px;background:var(--grad-pink);transform:skewX(-22deg);
}
.bkhero h1{
  margin:0 0 .85rem;font-size:var(--fs-h1);line-height:.92;
  text-shadow:0 18px 44px rgba(0,2,1,.6);
}
.bkhero__lead{
  margin:0;font-size:var(--fs-lead);line-height:1.5;color:rgba(255,255,255,.84);max-width:44ch;
}

/* Phones: the copy spans the full width, so the horizontal scrim has nothing
   left to shade. Even it out and lift the frame a little instead, or the photo
   reads as flat black — which defeats having a photo at all. */
@media (max-width:939px){
  .bkhero__media img{object-position:60% 38%;filter:grayscale(.78) contrast(1.14) brightness(.46)}
  .bkhero__scrim{
    background:
      linear-gradient(180deg,rgba(0,2,1,.9) 0%,rgba(0,2,1,.4) 20%,rgba(0,2,1,.16) 38%),
      linear-gradient(0deg,rgba(0,2,1,.86) 0%,rgba(0,2,1,.5) 26%,rgba(0,2,1,.26) 52%),
      radial-gradient(84% 46% at 88% 2%,rgba(139,149,168,.16) 0%,transparent 66%);
  }
  .bkhero__lead{color:rgba(255,255,255,.9)}
}

/* the boarding-pass stub */
.bkstub{
  position:relative;align-self:stretch;
  display:flex;flex-direction:column;gap:1.1rem;
  padding:clamp(1.3rem,1.1rem + .8vw,1.75rem);
  background:
    radial-gradient(120% 90% at 100% 0%,rgba(139,149,168,.18) 0%,rgba(139,149,168,.04) 48%,transparent 74%),
    linear-gradient(168deg,rgba(17,23,34,.92) 0%,rgba(0,2,1,.94) 76%);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.16);
  clip-path:var(--clip-frame);
  box-shadow:0 0 0 1px rgba(255,255,255,.12),0 42px 84px -34px rgba(0,2,1,.95);
}
/* pink chamfer filling the stub's top-right cut, so the shear reads deliberate */
.bkstub__notch{
  position:absolute;right:0;top:0;width:var(--cut-lg);height:var(--cut-lg);pointer-events:none;
  background:var(--grad-steel);
  clip-path:polygon(0 0,100% 100%,100% 0);
}
.bkstub__k{
  margin:0;font-family:var(--display);font-weight:400;font-size:.68rem;
  letter-spacing:.26em;text-transform:uppercase;color:var(--on-dark)!important;
}
.bkstub__price{
  margin:0;display:flex;align-items:baseline;gap:.5rem;
  padding-bottom:1.1rem;border-bottom:1px solid rgba(255,255,255,.16);
}
.bkstub__price b{
  font-family:var(--display);font-weight:400;line-height:1;
  font-size:clamp(3.1rem,2.4rem + 2.4vw,4.4rem);letter-spacing:-.02em;color:var(--white);
}
.bkstub__price span{
  font-family:var(--display);font-weight:400;font-size:.76rem;
  letter-spacing:.22em;text-transform:uppercase;color:var(--pink);
}

/* vertical two-step progress, joined by a pink spine */
.bkstub__steps{list-style:none;margin:0;padding:0;position:relative;display:grid;gap:1.1rem}
.bkstub__steps::before{
  content:"";position:absolute;left:17px;top:16px;bottom:16px;width:2px;
  background:linear-gradient(180deg,var(--pink-55),var(--pink));
}
.bkstub__steps li{
  position:relative;display:grid;grid-template-columns:36px minmax(0,1fr);
  gap:.15rem .8rem;align-items:center;
}
.bkstub__n{
  grid-row:span 2;display:grid;place-items:center;width:36px;height:36px;
  font-family:var(--display);font-weight:400;font-size:.95rem;line-height:1;
  clip-path:var(--clip-btn-sm);
}
.bkstub__n svg{width:18px;height:18px}
.bkstub__steps b{
  align-self:end;font-family:var(--display);font-weight:400;font-size:.86rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark);line-height:1.1;
}
.bkstub__steps i{align-self:start;font-style:normal;font-size:.76rem;color:var(--on-dark-faint)}
.bkstub__steps .is-done .bkstub__n{background:rgba(255,255,255,.16);color:var(--white)}
.bkstub__steps .is-now .bkstub__n{
  background:var(--grad-pink);color:var(--on-pink);
  box-shadow:0 0 0 4px rgba(255,119,183,.22),0 14px 30px -12px rgba(255,119,183,.8);
}
.bkstub__steps .is-now i{color:var(--pink)}

.bkstub__cue{
  margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  padding:.8rem 1rem;color:var(--white);
  background:rgba(255,119,183,.14);border:1px solid var(--pink-55);
  clip-path:var(--clip-btn-sm);
  font-family:var(--display);font-weight:400;font-size:.8rem;
  letter-spacing:.14em;text-transform:uppercase;
  transition:background .2s var(--ease),transform .2s var(--ease);
}
.bkstub__cue:hover{background:var(--pink-hot);color:var(--on-pink);transform:translateY(2px)}
.bkstub__cue svg{flex:none}

/* ---- calendar band: meets the header on a diagonal seam ---- */
.bk{position:relative;isolation:isolate;overflow:hidden}
.bk--seam{
  --seam:clamp(26px,4vw,68px);
  margin-top:calc(-1 * var(--seam));
  padding-top:calc(var(--band-y) + var(--seam));
  clip-path:polygon(0 var(--seam),100% 0,100% 100%,0 100%);
}
/* the pink rule has to be traced along the cut — a flat top bar gets clipped away */
.bk--seam::after{
  content:"";position:absolute;left:0;right:0;top:0;z-index:3;pointer-events:none;
  height:calc(var(--seam) + 3px);
  background:linear-gradient(90deg,var(--pink) 0%,var(--pink) 38%,rgba(255,119,183,.44) 76%,rgba(255,119,183,.12) 100%);
  clip-path:polygon(0 var(--seam),100% 0,100% 3px,0 calc(var(--seam) + 3px));
}
.bk__glow{
  position:absolute;z-index:-1;pointer-events:none;
  left:50%;top:-30%;width:120%;height:80%;transform:translateX(-50%);
  background:radial-gradient(closest-side,rgba(139,149,168,.14) 0%,transparent 72%);
}
.bk__head{max-width:60ch;margin-bottom:clamp(1.5rem,1.2rem + 1.2vw,2.25rem)}
.bk__head h2{margin-bottom:.6rem}
.bk__head .lead{color:var(--on-dark-mute);font-size:var(--fs-body-s)}

/* program switch: two sheared plates, the live one lit pink */
.bk__tabs{display:grid;gap:.6rem;margin-bottom:clamp(1.3rem,1.1rem + 1vw,1.9rem)}
@media (min-width:640px){.bk__tabs{grid-template-columns:repeat(2,minmax(0,1fr))}}
.bk__tab{
  position:relative;text-align:left;cursor:pointer;
  padding:1rem 1.15rem;color:var(--on-dark);
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);
  clip-path:var(--clip-btn);
  transition:background .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease);
}
.bk__tab:hover{background:rgba(255,255,255,.09);transform:translate(-2px,-2px)}
.bk__tab-k{
  display:block;font-family:var(--display);font-weight:400;font-size:.66rem;
  letter-spacing:.24em;text-transform:uppercase;color:var(--steel-light);margin-bottom:.4rem;
}
.bk__tab b{
  display:block;font-family:var(--display);font-weight:400;
  font-size:clamp(1.05rem,.95rem + .5vw,1.35rem);letter-spacing:.02em;text-transform:uppercase;
  line-height:1.05;
}
.bk__tab-m{display:block;margin-top:.3rem;font-size:.8rem;color:var(--on-dark-faint)}
.bk__tab[aria-selected="true"]{
  background:
    radial-gradient(120% 140% at 100% 0%,rgba(255,119,183,.34) 0%,transparent 62%),
    rgba(255,119,183,.12);
  border-color:var(--pink);
  box-shadow:0 0 0 1px var(--pink-28),0 24px 54px -24px rgba(255,119,183,.6);
}
.bk__tab[aria-selected="true"]::after{
  content:"";position:absolute;left:0;top:0;height:3px;width:44%;background:var(--grad-pink);
}
.bk__tab:focus-visible{outline:2px solid var(--pink);outline-offset:4px}

/* the widget on its own lit slab, so a white third-party calendar reads as a
   deliberate surface rather than a hole in a dark page */
.bk__frame[hidden]{display:none}
.bk__card{
  position:relative;background:var(--white);
  border:1px solid var(--pink-28);clip-path:var(--clip-frame);
  box-shadow:0 0 0 1px rgba(255,119,183,.18),0 44px 90px -34px rgba(255,119,183,.42),
             0 34px 70px -40px rgba(0,2,1,.9);
}
.bk__card-h{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.6rem;
  margin:0;padding:.85rem clamp(1rem,.8rem + 1vw,1.5rem);
  background:var(--grad-pink);color:var(--on-pink);
}
.bk__card-h span{
  font-family:var(--display);font-weight:400;font-size:.78rem;
  letter-spacing:.18em;text-transform:uppercase;
}
.bk__card-h b{
  font-family:var(--display);font-weight:400;font-size:.72rem;
  letter-spacing:.16em;text-transform:uppercase;
  padding:.3rem .7rem;background:rgba(0,2,1,.34);clip-path:var(--clip-btn-sm);
}
.bk__noscript{margin:0;padding:1.4rem;text-align:center;font-size:.9rem;color:var(--on-light)}
.bk__noscript a{color:var(--pink-ink);text-decoration:underline}
/* The calendar fills the card edge to edge. The old widget was a white page and
   sat on a white slab with padding around it; this one ships its own dark theme,
   so any padding would read as a pale border round a dark panel. 760px is the
   height Studio ProfitOS specifies for the embed -- below it the list of class
   times is cut off rather than scrolled to. */
.bk__embed{padding:0}
.bk__embed iframe{
  display:block;width:100%;border:0;overflow:hidden;min-height:760px;background:transparent;
}
@media (max-width:640px){.bk__embed iframe{min-height:840px}}
.bk__fallback{
  margin:clamp(1.1rem,.9rem + .8vw,1.6rem) 0 0;
  font-size:var(--fs-body-s);color:var(--on-dark-mute);
}
.bk__fallback a{
  color:var(--white);font-family:var(--display);letter-spacing:.05em;
  border-bottom:2px solid var(--pink-28);
}
.bk__fallback a:hover{border-bottom-color:var(--pink);color:var(--pink)}


/* ---------- 34. Mobile navigation, redesigned ----------
   Overrides section 8's drawer. Appended rather than edited in place so it can
   be deleted in one block to go back. CSS only — the drawer markup in parts.py
   is untouched, which matters because index.html and contact.html are now
   hand-edited and cannot be regenerated.

   What changed and why:
   - The rows now distribute across the panel instead of stacking at the top,
     which removes the ~125px of dead space that sat above the CTA.
   - Each row reads as a sheared plate: boxed pink numeral, chevron on the
     right, a pink rail that wipes in on press. The old list had an empty right
     half and nothing to press against.
   - An oversized outlined wordmark anchors the panel, the way the footer and
     hero bigtype do elsewhere on the site.
   - Rows stagger in on open (disabled under prefers-reduced-motion). */

.drawer__scrim{
  background:rgba(0,2,1,.74);
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
}
.drawer__panel{
  padding:calc(var(--header-h) + .5rem) var(--gutter) 1.25rem;
  background:
    radial-gradient(78% 46% at 100% 0%,rgba(139,149,168,.2) 0%,transparent 60%),
    radial-gradient(64% 40% at 0% 100%,rgba(139,149,168,.1) 0%,transparent 62%),
    linear-gradient(168deg,var(--ink-4) 0%,var(--ink-1) 68%);
}
/* the anchor wordmark. No negative offsets: the panel scrolls on the y axis,
   which makes overflow-x compute to auto, so a bleed would add a scrollbar. */
.drawer__panel::after{
  content:"CPJJ";
  position:absolute;right:0;bottom:0;z-index:0;
  display:block;overflow:hidden;
  /* line-height:1 + overflow:hidden, deliberately: a tighter line-height lets
     the glyph ink spill past this box, and because the panel scrolls on y its
     overflow-x computes to auto — that spill added 48px of phantom scroll to
     the whole drawer. */
  font-family:var(--display);font-weight:400;line-height:1;
  font-size:clamp(6rem,32vw,12rem);letter-spacing:-.05em;
  color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.09);
  pointer-events:none;user-select:none;
}

/* rows fill the panel instead of leaving a gap above the CTA */
.drawer__list{flex:1 0 auto;justify-content:space-evenly}
.drawer__list>li{position:relative;border-bottom:1px solid rgba(255,255,255,.1)}
.drawer__list>li:last-child{border-bottom:0}

.drawer__link{
  position:relative;isolation:isolate;
  gap:clamp(.85rem,3.4vw,1.3rem);
  min-height:clamp(50px,7.4svh,72px);padding:.55rem .35rem .55rem 0;
  font-size:clamp(1.6rem,1.05rem + 4vw,2.7rem);
  transition:color .2s var(--ease),transform .24s var(--ease);
}
/* the pink rail that wipes in behind the row */
.drawer__link::before{
  content:"0" counter(d);
  flex:none;display:grid;place-items:center;
  width:38px;height:27px;
  font-family:var(--body);font-size:.68rem;font-weight:700;letter-spacing:.12em;
  color:var(--steel-light);opacity:1;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.24);
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease);
}
/* chevron on the right of every destination row (the Programs toggle keeps its
   own svg, so it is excluded) */
.drawer__link:not(.drawer__sub-toggle)::after{
  content:"";flex:none;margin-left:auto;
  width:9px;height:9px;
  border-top:2px solid rgba(255,255,255,.34);border-right:2px solid rgba(255,255,255,.34);
  transform:rotate(45deg);
  transition:border-color .2s var(--ease),transform .24s var(--ease);
}
.drawer__link:hover,.drawer__link:focus-visible{color:var(--pink);transform:translateX(5px)}
.drawer__link:hover::before,.drawer__link:focus-visible::before{
  background:var(--pink-hot);color:var(--on-pink);border-color:transparent;
}
.drawer__link:hover:not(.drawer__sub-toggle)::after{
  border-color:var(--pink);transform:rotate(45deg) translate(2px,-2px);
}

/* current page: pink rail down the left edge and a lit numeral */
.drawer__link[aria-current="page"]{color:var(--pink)}
.drawer__link[aria-current="page"]::before{
  background:var(--grad-pink);color:var(--on-pink);border-color:transparent;
}
.drawer__link[aria-current="page"]:not(.drawer__sub-toggle)::after{
  width:11px;height:11px;border:0;background:var(--pink);
  transform:skewX(-24deg);
}
.drawer__list>li:has(> [aria-current="page"])::before{
  content:"";position:absolute;left:calc(-1 * var(--gutter));top:0;bottom:0;width:4px;
  background:var(--grad-pink);transform:skewX(-14deg);
}

/* Programs submenu */
.drawer__sub-toggle svg{width:22px;height:22px}
.drawer__sub.is-open{max-height:460px}
.drawer__sub{padding-left:calc(38px + clamp(.85rem,3.4vw,1.3rem))}
.drawer__sub a{
  min-height:46px;padding:.55rem 0 .55rem 1rem;font-size:.98rem;
  transition:color .18s var(--ease),transform .18s var(--ease);
}
.drawer__sub a:hover{transform:translateX(4px)}

/* footer: CTA and contact details as one grounded block */
.drawer__foot{
  margin-top:0;padding-top:clamp(1.1rem,.9rem + 1.4vw,1.7rem);
  border-top:1px solid rgba(255,255,255,.14);gap:.9rem;
}
.drawer__foot .btn__i{min-height:58px;font-size:.92rem}
.drawer__meta{
  gap:.25rem 1.25rem;align-items:baseline;
  font-size:.7rem;letter-spacing:.14em;color:var(--on-dark-mute);
}
.drawer__meta a{
  font-size:1.12rem;letter-spacing:.05em;color:var(--white);
  border-bottom:2px solid var(--pink-55);
}

/* Very short phones (360x640 and similar): trim the rows just enough that all
   seven plus the CTA fit with no scroll. 46px still clears the 44px minimum
   touch target. */
@media (max-height:670px){
  .drawer__link{min-height:46px;padding-block:.45rem}
  .drawer__link::before{width:34px;height:24px}
  .drawer__foot{padding-top:.9rem;gap:.7rem}
  .drawer__foot .btn__i{min-height:52px}
  .drawer__panel{padding-bottom:.9rem}
}

/* staggered entrance */
@media (prefers-reduced-motion:no-preference){
  .drawer.is-open .drawer__list>li{animation:drawerRow .4s var(--ease) both}
  .drawer.is-open .drawer__list>li:nth-child(1){animation-delay:.05s}
  .drawer.is-open .drawer__list>li:nth-child(2){animation-delay:.09s}
  .drawer.is-open .drawer__list>li:nth-child(3){animation-delay:.13s}
  .drawer.is-open .drawer__list>li:nth-child(4){animation-delay:.17s}
  .drawer.is-open .drawer__list>li:nth-child(5){animation-delay:.21s}
  .drawer.is-open .drawer__list>li:nth-child(6){animation-delay:.25s}
  .drawer.is-open .drawer__list>li:nth-child(7){animation-delay:.29s}
  .drawer.is-open .drawer__foot{animation:drawerRow .44s .33s var(--ease) both}
  @keyframes drawerRow{
    from{opacity:0;transform:translateX(-16px)}
    to{opacity:1;transform:none}
  }
}


/* ---------- 35. Schedule ----------
   Section 8 carries the whole timetable now: one row style, one colour dot.
   The four per-programme card skins that used to live here (fill, outline,
   hatch, invert) plus their dark-band variants and the index counter are gone
   — .class-chip no longer exists in the markup. */