/* ==========================================================================
   PINNACLE BRAZILIAN JIU JITSU — pinnaclebjjaz.com
   Hand-built design system. Monochrome. No frameworks, no libraries.
   ==========================================================================
   01 Tokens
   02 Reset & base
   03 Typography
   04 Layout primitives
   05 Section themes & seams
   06 Header / navigation
   07 Buttons & links
   08 Hero
   09 Editorial blocks
   10 Program cards
   11 Schedule
   12 Team
   13 Testimonial & partners
   14 Values
   15 Closing CTA
   16 Footer
   17 Trial modal
   18 Gallery
   19 Motion & reveal
   20 Responsive
   ========================================================================== */

/* 01 TOKENS ---------------------------------------------------------------- */
:root{
  /* value scale — strictly monochrome */
  --ink:        #0A0A0A;
  --ink-deep:   #000000;
  --ink-soft:   #161616;
  --bone:       #F4F1EA;
  --bone-deep:  #E7E2D7;
  --bone-mute:  #D8D3C6;          /* semi-light: a step under bone-deep */
  --white:      #FFFFFF;

  /* accent — two-tone blue. Used sparingly: indices, rules, arrows, states.
     Never as a section background. --acc-c is resolved per theme below so it
     always clears contrast on whichever ground it lands on. */
  --acc:        #0067AA;          /* mid azure   — default / light grounds */
  --acc-deep:   #000285;          /* ultramarine — light grounds, heavy type */
  --acc-lift:   #2E9BDD;          /* lifted      — small text on black */
  --acc-line:   rgba(0,103,170,.34);
  --acc-wash:   rgba(0,103,170,.08);
  --acc-cyan:   #10E3DC;          /* highlight — the bright edge of the band */
  --acc-royal:  #0B3FD4;          /* mid band */
  /* the signature diagonal: indigo → azure → cyan, as in the reference */
  --acc-grad:   linear-gradient(115deg,var(--acc-deep) 0%,var(--acc-royal) 34%,var(--acc) 62%,var(--acc-cyan) 100%);
  --err:        #C0362C;

  /* belt colours — the one place literal colour is correct */
  --belt-black: #0A0A0A;
  --belt-blue:  #0B57A4;
  --belt-purple:#5B2A86;

  --rule-on-dark:  rgba(255,255,255,.16);
  --rule-on-light: rgba(10,10,10,.16);
  --hair-on-dark:  rgba(255,255,255,.08);
  --hair-on-light: rgba(10,10,10,.08);
  --mute-on-dark:  rgba(255,255,255,.62);
  --mute-on-light: rgba(10,10,10,.62);

  /* type */
  --display: "Anton", "Haettenschweiler", "Arial Narrow", Impact, sans-serif;
  --serif:   "Instrument Serif", "Times New Roman", Georgia, serif;
  --body:    "Barlow", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --t-hero:  clamp(3.4rem, 12vw, 11rem);
  --t-h1:    clamp(2.6rem, 7vw, 6rem);
  --t-h2:    clamp(2rem, 4.6vw, 4rem);
  --t-h3:    clamp(1.35rem, 2vw, 1.9rem);
  --t-quote: clamp(1.5rem, 3.4vw, 3rem);
  --t-body:  clamp(1rem, .55vw + .88rem, 1.15rem);
  --t-small: .82rem;

  --track-display: .012em;
  --track-eyebrow: .34em;

  /* space */
  --gut: clamp(1.25rem, 4vw, 3.5rem);
  --shell: 1340px;
  --sect-y: clamp(4rem, 5.6vw, 6rem);            /* 64 → 96px */
  --sect-y-tight: clamp(3rem, 4.2vw, 4.5rem);    /* 48 → 72px */

  /* motion */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --chrome-t: 260ms;

  /* outline-text stroke colour. NEVER use currentColor for a text stroke on
     an element whose own colour is transparent — the stroke goes transparent
     with it. This is resolved per theme instead. */
  --stroke-c: var(--bone);

  --head-pad: 40px;              /* header inset, both tiers */
  --brand-h: 56px;                /* badge logo height — sets the bar rhythm */
  --bar-h:  78px;                 /* main nav row */
  --head-h: 78px;                 /* total — every offset uses this */
}
/* the bar condenses a second time once you are off the hero */
body[data-scrolled]{ --bar-h:62px; --brand-h:44px; }
@media (max-width: 1024px){ :root{ --sect-y:clamp(3.25rem,6.5vw,4.5rem); --sect-y-tight:clamp(2.5rem,5vw,3.5rem); } }
@media (max-width: 900px){
  :root{ --bar-h:64px; --head-h:64px; --brand-h:46px; }
  body[data-scrolled]{ --bar-h:64px; --brand-h:42px; }
}
@media (max-width: 640px){ :root{ --head-pad:20px; } }

/* 02 RESET & BASE --------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%; scroll-behavior:smooth;
  /* the header is fixed, so an #anchor jump would otherwise land under it */
  scroll-padding-top:calc(var(--head-h) + 1rem);
}
body{
  margin:0;
  background:var(--ink);
  color:var(--bone);
  font-family:var(--body);
  font-size:var(--t-body);
  line-height:1.62;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body.is-locked{ overflow:hidden; }
/* overflow:hidden on <body> alone does not hold on iOS — the page behind the
   open menu still rubber-bands. The overlay's own overscroll-behavior:contain
   catches most of it; locking the root element catches the rest. */
html:has(body.is-locked){ overflow:hidden; }
img,picture,svg,iframe{ display:block; max-width:100%; }
img{ height:auto; }
h1,h2,h3,h4,p,figure,blockquote,ul,ol{ margin:0; }
ul,ol{ padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ background:none; border:0; cursor:pointer; }
::selection{ background:var(--acc-deep); color:#fff; }

/* film grain — generated, not an image asset */
body::after{
  content:"";
  position:fixed; inset:-50%;
  z-index:9000;
  pointer-events:none;
  opacity:.05;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* focus — visible, monochrome, never removed */
:focus{ outline:none; }
:focus-visible{
  outline:2px solid var(--acc-c);
  outline-offset:3px;
}
.skip{
  position:absolute; left:1rem; top:-100px; z-index:10000;
  background:var(--bone); color:var(--ink);
  padding:.75rem 1.25rem; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; font-size:.78rem;
  transition:top 160ms var(--ease);
}
.skip:focus{ top:1rem; }

/* 03 TYPOGRAPHY ----------------------------------------------------------- */
.display,h1,h2,h3{
  font-family:var(--display);
  font-weight:400;
  line-height:.9;
  letter-spacing:var(--track-display);
  text-transform:uppercase;
}
h1{ font-size:var(--t-h1); }
h2{ font-size:var(--t-h2); }
h3{ font-size:var(--t-h3); line-height:1.02; }
.serif{ font-family:var(--serif); font-weight:400; text-transform:none; letter-spacing:-.01em; line-height:1.1; }

.eyebrow{
  font-family:var(--body);
  font-size:.7rem;
  font-weight:600;
  letter-spacing:var(--track-eyebrow);
  text-transform:uppercase;
  display:flex; align-items:center; gap:.9rem;
  margin-bottom:1.6rem;
}
.eyebrow::before{
  content:""; width:clamp(28px,4vw,56px); height:2px;
  background:var(--acc-c); opacity:.95; flex:none;
}
.lede{
  font-size:clamp(1.1rem,1.4vw,1.35rem);
  line-height:1.55;
}
.prose p{ line-height:1.68; }
.prose p + p{ margin-top:1.3em; }
.prose strong{ font-weight:600; }
.muted{ opacity:.68; }

/* stat / numeral */
.numeral{
  font-family:var(--display);
  font-size:clamp(2.6rem,6vw,5.5rem);
  line-height:.8;
  opacity:.16;
  display:block;
}

/* 04 LAYOUT PRIMITIVES ---------------------------------------------------- */
.shell{
  width:100%;
  max-width:var(--shell);
  margin-inline:auto;
  padding-inline:var(--gut);
}
.shell-wide{ max-width:1620px; }
.s{ position:relative; padding-block:var(--sect-y); }
.s-tight{ padding-block:var(--sect-y-tight); }
.s-flush{ padding-block:0; }
.grid{ display:grid; gap:var(--gut); }
.rule{ height:1px; background:currentColor; opacity:.16; border:0; }

/* 05 SECTION THEMES & SEAMS ---------------------------------------------- */
[data-theme="light"],[data-theme="light-deep"]{ --stroke-c:var(--ink); }
[data-theme="dark"],[data-theme="black"]{ --stroke-c:var(--bone); }

/* accent resolution — deep ultramarine on bone, lifted azure on ink */
:root,
[data-theme="light"],[data-theme="light-deep"]{ --acc-c:var(--acc-deep); --acc-c2:var(--acc); }
[data-theme="dark"],[data-theme="black"]{ --acc-c:var(--acc-lift); --acc-c2:var(--acc-lift); }
[data-theme="dark"],[data-theme="black"]{ --acc-line:rgba(46,155,221,.38); --acc-wash:rgba(46,155,221,.10); }
.marquee{ --stroke-c:var(--ink); }
.marquee.inv{ --stroke-c:var(--bone); }

.s[data-theme="dark"]{ background:var(--ink); color:var(--bone); }
.s[data-theme="black"]{ background:var(--ink-deep); color:var(--bone); }
.s[data-theme="light"]{ background:var(--bone); color:var(--ink); }
.s[data-theme="light-deep"]{ background:var(--bone-deep); color:var(--ink); }
/* semi-light band: deeper ground, light-mode behaviour inherited */
.s[data-theme="light-deep"].tone-mute{ background:var(--bone-mute); }

/* seam A — hairline */
/* seam B — shallow diagonal cut into the section above */
.seam-diag{
  clip-path:polygon(0 0, 100% 3.2vw, 100% 100%, 0 100%);
  margin-top:-3.2vw;
  padding-top:calc(var(--sect-y) + 3.2vw);
}
/* seam C — a photo that straddles the boundary */

/* 06 HEADER / NAVIGATION -------------------------------------------------
   A single nav row that condenses on scroll. A scroll-progress hairline runs
   along the foot.
   ------------------------------------------------------------------------ */
.site-head{
  position:fixed; inset-inline:0; top:0; z-index:8000;
  height:var(--head-h);
  color:var(--bone);
  transition:height 420ms var(--ease), color var(--chrome-t) var(--ease),
             background-color var(--chrome-t) var(--ease), border-color var(--chrome-t) var(--ease);
  border-bottom:1px solid transparent;
}
body[data-chrome="light"] .site-head{ color:var(--ink); }
body[data-scrolled] .site-head{
  height:var(--bar-h);
  background:rgba(10,10,10,.90);
  backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  border-bottom-color:var(--hair-on-dark);
}
body[data-scrolled][data-chrome="light"] .site-head{
  background:rgba(244,241,234,.93);
  border-bottom-color:var(--hair-on-light);
}

/* ── main row ────────────────────────────────────────────────────────── */
/* Three tracks — 1fr | auto | 1fr — so the nav sits on the true centre of
   the bar regardless of how wide the logo or the CTA happen to be. A flex
   row with margin-left:auto only centres by accident. */
.head-in{
  height:var(--bar-h);
  max-width:var(--shell); margin-inline:auto; padding-inline:var(--gut);
  display:grid; grid-template-columns:1fr auto 1fr;
  align-items:center; gap:clamp(.75rem,2vw,1.6rem);
  transition:height 420ms var(--ease);
}

/* ── brand ───────────────────────────────────────────────────────────── */
/* Two marks, stacked: the bone-on-black lockup and the ink one. Swapping
   opacity beats filter:invert() — inverting would throw the blue accents
   to orange. The ink copy is taken out of flow so the link keeps one height. */
.brand{ grid-column:1; justify-self:start; position:relative; display:block; line-height:0; }
.brand img{
  display:block; height:var(--brand-h); width:auto;
  transition:height 420ms var(--ease), opacity var(--chrome-t) var(--ease);
}
.brand .brand-mark-ink{ position:absolute; inset:0; opacity:0; }
body[data-chrome="light"] .brand .brand-mark{ opacity:0; }
body[data-chrome="light"] .brand .brand-mark-ink{ opacity:1; }

.nav{ grid-column:2; justify-self:center; }
.nav-list{ display:flex; align-items:center; }
.nav-item{ display:flex; align-items:center; }
/* hairline dividers instead of plain gaps */
.nav-item + .nav-item::before{
  content:""; width:1px; height:11px; background:currentColor; opacity:.18; flex:none;
  margin-inline:clamp(.55rem,1.2vw,1.05rem);
}
.nav-link{
  font-size:.69rem; font-weight:700;
  letter-spacing:.15em; text-transform:uppercase;
  padding:.5rem 0; position:relative; display:block; white-space:nowrap;
}
/* one flat accent, wiped in from the left — no gradient */
.nav-link::after{
  content:""; position:absolute; left:0; bottom:.2rem;
  width:100%; height:2px; background:var(--acc-lift);
  transform:scaleX(0); transform-origin:left;
  transition:transform 340ms var(--ease-out);
}
body[data-chrome="light"] .nav-link::after{ background:var(--acc); }
.nav-link:hover::after,.nav-link:focus-visible::after{ transform:scaleX(1); }
.nav-item[aria-current="page"] > .nav-link::after,
.nav-link[aria-current="page"]::after{ transform:scaleX(1); }

/* dropdowns */
.has-sub{ position:relative; }
.has-sub > .nav-link{ display:flex; align-items:center; gap:.45rem; }
.has-sub > .nav-link::before{
  content:""; width:5px; height:5px; margin-top:-2px;
  border-right:1px solid currentColor; border-bottom:1px solid currentColor;
  transform:rotate(45deg); opacity:.65; order:2;
  transition:transform 240ms var(--ease);
}
.has-sub:hover > .nav-link::before,
.has-sub:focus-within > .nav-link::before{ transform:rotate(225deg); }
.sub{
  position:absolute; top:calc(100% + .45rem); left:-1.1rem;
  min-width:252px; padding:.5rem 0;
  background:var(--ink-deep); color:var(--bone);
  border:1px solid var(--rule-on-dark);
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity 220ms var(--ease), transform 220ms var(--ease), visibility 220ms;
}
/* accent bar across the top of the panel */
.sub::before{
  content:""; position:absolute; inset-inline:0; top:0; height:3px;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform 480ms var(--ease-out) 90ms;
}
.has-sub:hover > .sub::before,.has-sub:focus-within > .sub::before{ transform:scaleX(1); }
body[data-chrome="light"] .sub{
  background:var(--bone); color:var(--ink); border-color:var(--rule-on-light);
}
.has-sub:hover > .sub,.has-sub:focus-within > .sub{ opacity:1; visibility:visible; transform:none; }
.sub a{
  display:block; padding:.7rem 1.35rem;
  font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  transition:background-color 180ms var(--ease), padding-left 220ms var(--ease);
}
.sub a:hover,.sub a:focus-visible{ background:rgba(255,255,255,.07); padding-left:1.8rem; }
body[data-chrome="light"] .sub a:hover,
body[data-chrome="light"] .sub a:focus-visible{ background:rgba(10,10,10,.06); }

/* the trial button must invert with the chrome or it goes bone-on-bone */
.head-cta{ grid-column:3; justify-self:end; }
body[data-chrome="light"] .head-cta{ --btn-bg:var(--ink); --btn-fg:var(--bone); }
body[data-chrome="light"] .head-cta::before{ background:var(--bone); }
body[data-chrome="light"] .head-cta:hover,
body[data-chrome="light"] .head-cta:focus-visible{ color:var(--ink); }

/* scroll progress hairline */
.head-progress{
  position:absolute; left:0; bottom:-1px; height:2px;
  width:var(--sp,0%); background:var(--acc-lift); opacity:1;
  transition:width 120ms linear;
  pointer-events:none;
}
body[data-chrome="light"] .head-progress{ background:var(--acc); }

.burger{
  display:none; grid-column:3; justify-self:end;
  width:46px; height:46px; position:relative;
}
.burger span{
  position:absolute; left:11px; width:24px; height:2px;
  background:currentColor;
  transition:transform 300ms var(--ease-out), opacity 200ms var(--ease);
}
.burger span:nth-child(1){ top:17px; }
.burger span:nth-child(2){ top:23px; }
.burger span:nth-child(3){ top:29px; }
body.is-menu .burger span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
body.is-menu .burger span:nth-child(2){ opacity:0; }
body.is-menu .burger span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* ── mobile overlay ──────────────────────────────────────────────────── */
.mobile-nav{
  position:fixed; inset:0; z-index:7900;
  background:var(--ink-deep); color:var(--bone);
  padding:calc(var(--bar-h) + 1.25rem) var(--gut) 1.5rem;
  display:flex; flex-direction:column;
  overflow-y:auto; overscroll-behavior:contain;
  opacity:0; visibility:hidden;
  transition:opacity 320ms var(--ease), visibility 320ms;
}
/* the band motif, so the panel belongs to the rest of the site */
.mobile-nav::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(112deg,transparent 38%,rgba(0,2,133,.45) 52%,
             rgba(0,103,170,.28) 64%,rgba(16,227,220,.10) 72%,transparent 86%);
}
.mobile-nav > *{ position:relative; z-index:1; }
body.is-menu .mobile-nav{ opacity:1; visibility:visible; }

/* The links sit inside <nav>, not directly in .mobile-nav — the column has
   to be declared here or the anchors stay inline and wrap across the page. */
.mnav{ display:flex; flex-direction:column; }
.mnav-label{
  display:block; font-size:.58rem; font-weight:700;
  letter-spacing:.26em; text-transform:uppercase;
  color:var(--acc-cyan); margin-bottom:.7rem;
}
.mnav-list{
  list-style:none; display:flex; flex-direction:column;
  counter-reset:mnav; border-top:1px solid var(--hair-on-dark);
}
.mnav-list > li{ border-bottom:1px solid var(--hair-on-dark); counter-increment:mnav; }

/* a top-level row: the label links to its own page, the chevron opens the group */
.mnav-row{ display:flex; align-items:stretch; }
.mnav-list > li > a,
.mnav-row > a{
  flex:1; display:flex; align-items:center; gap:.7rem;
  font-family:var(--display); text-transform:uppercase;
  font-size:clamp(1.3rem,5.2vw,1.8rem); line-height:1.05;
  padding:.68rem 0; min-height:48px;
}
/* the numeral — same counting language the page sections use */
.mnav-list > li > a::before,
.mnav-row > a::before{
  content:"0" counter(mnav);
  font-size:.52em; letter-spacing:.06em;
  color:var(--acc-lift); opacity:.85; flex:none;
}
.mnav-toggle{
  flex:none; width:52px; background:none; border:0; cursor:pointer;
  color:var(--bone); position:relative;
  border-left:1px solid var(--hair-on-dark);
}
.mnav-toggle::after{
  content:""; position:absolute; left:50%; top:50%;
  width:10px; height:10px; margin:-7px 0 0 -5px;
  border-right:2px solid var(--acc-lift); border-bottom:2px solid var(--acc-lift);
  transform:rotate(45deg); transition:transform .28s var(--ease);
}
.mnav-toggle[aria-expanded="true"]::after{ transform:rotate(-135deg); margin-top:-3px; }
.mnav-toggle:focus-visible{ outline:2px solid var(--acc-cyan); outline-offset:-3px; }

/* the collapsible group */
.mnav-sub{ list-style:none; padding:.1rem 0 .7rem; margin-left:.2rem; }
.mnav-sub li{ border-left:2px solid var(--acc-lift); }
.mnav-sub a{
  display:block; font-family:var(--body);
  font-size:.78rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  padding:.62rem 0 .62rem 1.05rem; min-height:44px;
  color:var(--bone); opacity:.82;
  /* revealed by the toggle, so never animated — an animation that already
     finished while hidden would leave these stuck at zero opacity */
  transform:none; animation:none;
}
.mnav-sub a:hover{ opacity:1; color:var(--acc-cyan); }
.mnav-sub a[aria-current="page"]{ opacity:1; color:var(--acc-cyan); }
.mnav-list > li > a[aria-current="page"],
.mnav-row > a[aria-current="page"]{ color:var(--acc-cyan); }

/* the only trial CTA at this size — the header button is hidden on mobile */
.mnav-cta{
  margin-top:1.1rem; display:grid; gap:.15rem; justify-items:center;
  padding:.8rem 1rem; text-align:center;
  background:var(--acc-grad); color:#fff;
  font-family:var(--display); text-transform:uppercase;
  font-size:clamp(1.05rem,4.4vw,1.35rem); line-height:1;
}
.mnav-cta small{
  font-family:var(--body); font-size:.56rem; font-weight:700;
  letter-spacing:.2em; opacity:.85;
}

/* top-level links fade in on open; sub-links are excluded above */
body.is-menu .mnav-list > li > a,
body.is-menu .mnav-row > a,
body.is-menu .mnav-cta{ animation:mnav 520ms var(--ease-out) forwards; }
.mnav-list > li > a,.mnav-row > a,.mnav-cta{ opacity:0; transform:translateY(16px); }
@keyframes mnav{ to{ opacity:1; transform:none; } }

.mobile-foot{
  margin-top:auto; padding-top:1.6rem;
  display:grid; gap:.28rem;
  font-size:.84rem; color:var(--mute-on-dark);
}
/* inline anchors here were 18px tall — under any usable tap-target size.
   inline-flex with a min-height gives a real 44px target without changing
   how the block reads. */
.mobile-foot a{
  font-family:var(--body); font-size:.84rem; border:0;
  letter-spacing:0; opacity:1; transform:none; animation:none;
  display:inline-flex; align-items:center; min-height:44px; padding:.2rem 0;
  background:none; color:inherit;
}
.mobile-foot p{ line-height:1.4; }
.mobile-foot a:hover{ color:var(--acc-cyan); }
.mnav-hours{ font-size:.74rem; opacity:.7; margin-top:.2rem; }
.mnav-social{ display:flex; gap:.5rem; margin-top:.7rem; }
.mnav-social a{
  font-size:.58rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  padding:.6rem .9rem; border:1px solid var(--rule-on-dark);
  min-height:44px; display:inline-flex; align-items:center;
}
.mnav-social a:hover{ border-color:var(--acc-cyan); color:var(--acc-cyan); }
/* visually hidden, still read aloud */
.vh{
  position:absolute!important; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

/* 07 BUTTONS & LINKS ----------------------------------------------------- */
.btn{
  --btn-fg:var(--ink); --btn-bg:var(--bone);
  display:inline-flex; align-items:center; gap:.85rem;
  padding:1.05rem 1.9rem;
  background:var(--btn-bg); color:var(--btn-fg);
  font-size:.76rem; font-weight:700;
  letter-spacing:.19em; text-transform:uppercase;
  position:relative; overflow:hidden;
  transition:color 380ms var(--ease), background-color 380ms var(--ease);
  white-space:nowrap;
}
.btn > *{ position:relative; z-index:2; }
.btn::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:var(--ink); transform:translateY(101%);
  transition:transform 420ms var(--ease-out);
}
.btn:hover,.btn:focus-visible{ color:var(--bone); }
.btn:hover::before,.btn:focus-visible::before{ transform:none; }
.btn .arrow{
  width:1.1em; height:1px; background:currentColor; position:relative; flex:none;
  transition:width 380ms var(--ease-out);
}
.btn .arrow::after{
  content:""; position:absolute; right:0; top:-3px;
  width:7px; height:7px;
  border-top:1px solid currentColor; border-right:1px solid currentColor;
  transform:rotate(45deg);
}
.btn:hover .arrow{ width:1.9em; }

.btn-ghost{ --btn-bg:transparent; --btn-fg:currentColor; border:1px solid currentColor; }
.btn-ghost::before{ background:var(--bone); }
.btn-ghost:hover,.btn-ghost:focus-visible{ color:var(--ink); }
[data-theme="light"] .btn-ghost::before,
[data-theme="light-deep"] .btn-ghost::before{ background:var(--ink); }
[data-theme="light"] .btn-ghost:hover,
[data-theme="light-deep"] .btn-ghost:focus-visible{ color:var(--bone); }
[data-theme="light"] .btn,[data-theme="light-deep"] .btn{ --btn-bg:var(--ink); --btn-fg:var(--bone); }
[data-theme="light"] .btn::before,[data-theme="light-deep"] .btn::before{ background:var(--bone); }
[data-theme="light"] .btn:hover,[data-theme="light-deep"] .btn:hover{ color:var(--ink); }
.btn-sm{ padding:.72rem 1.25rem; font-size:.68rem; letter-spacing:.16em; }

.tlink{
  display:inline-flex; align-items:center; gap:.7rem;
  font-size:.76rem; font-weight:700; letter-spacing:.19em; text-transform:uppercase;
  padding-bottom:.35rem; border-bottom:2px solid var(--acc-c);
  transition:gap 300ms var(--ease-out), border-color 300ms var(--ease-out);
}
.tlink:hover,.tlink:focus-visible{ gap:1.3rem; }

/* 08 HERO ---------------------------------------------------------------- */
.hero{
  position:relative;
  min-height:clamp(520px,72svh,720px);
  display:flex; flex-wrap:wrap; align-items:flex-end;
  background:var(--ink-deep); color:var(--bone);
  overflow:hidden;
  padding-block:calc(var(--head-h) + 3rem) clamp(2.5rem,6vw,5rem);
}
.hero-media{ position:absolute; inset:0; z-index:0; }
.hero-media img{
  width:100%; height:100%;
  object-fit:cover; object-position:50% 32%;
  filter:contrast(1.06) brightness(.74);
  transform:scale(1.06);
  animation:heroDrift 24s var(--ease) forwards;
}
@keyframes heroDrift{ to{ transform:scale(1); } }
.hero-media::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(to top, rgba(0,0,0,.92) 0%, rgba(0,0,0,.55) 42%, rgba(0,0,0,.28) 70%, rgba(0,0,0,.6) 100%),
    radial-gradient(120% 90% at 50% 100%, transparent 40%, rgba(0,0,0,.55) 100%);
}
.hero-in{ position:relative; z-index:2; width:100%; }
.hero h1{
  font-size:var(--t-hero);
  line-height:.84;
  margin-bottom:clamp(1.25rem,2.4vw,2rem);
}
.hero h1 .l1{ display:block; }
/* rotating line */
.hero-actions{ display:flex; flex-wrap:wrap; gap:.9rem 1rem; align-items:center; }

/* ── page masthead ─ diagonal split: type on solid ink, photo bleeding to
   the right edge at full contrast. Not a second hero: it is capped short,
   and no text ever sits on top of the photograph. ─────────────────────── */
.phero{
  position:relative; overflow:hidden;
  background:var(--ink-deep); color:var(--bone);
  display:flex; align-items:center;
  min-height:clamp(300px,34vh,400px);
  padding-block:calc(var(--head-h) + clamp(1.6rem,3.2vw,2.8rem)) clamp(1.8rem,3.4vw,3rem);
}
/* the photograph owns the right side and slants into the panel */
.phero-media{
  position:absolute; z-index:0; inset:0 0 0 auto;
  width:47%;
  clip-path:polygon(4.6vw 0, 100% 0, 100% 100%, 0 100%);
}
.phero-media img{
  width:100%; height:100%;
  object-fit:cover; object-position:50% 26%;
  filter:contrast(1.06) brightness(.76);
}
/* only a short blend at the seam — the photo stays readable */
.phero-media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to right, rgba(0,0,0,.92) 0%, rgba(0,0,0,.35) 22%, rgba(0,0,0,0) 46%);
}
/* hairline that traces the diagonal seam */
.phero-seam{
  position:absolute; z-index:2; top:0; bottom:0; right:47%;
  width:max(1px,.1vw); background:var(--bone); opacity:.3;
  transform:translateX(4.6vw) skewX(-6deg);
  transform-origin:top;
  pointer-events:none;
}

.phero-in{
  position:relative; z-index:2;
  /* Genuinely locked to the header inset: .head-in is a shell, so matching it
     means using the shell too. The old --head-pad (40px) sat the hero copy
     ~37px left of the logo above it and of every section below it. */
  width:100%; max-width:var(--shell); margin-inline:auto;
  padding-inline:var(--gut);
}
/* keep every line clear of the photograph */
.phero-in > *{ max-width:min(46%,56ch); }
/* no photograph on this hero, so the copy is not boxed into the left 46% */
.phero--plain{ min-height:clamp(240px,26vh,320px); }
@media (min-width:901px){
  .phero--plain .phero-in > *{ max-width:min(70%,68ch); }
}
.phero h1{
  font-size:clamp(2.1rem,4.6vw,3.9rem); line-height:.88;
  margin-bottom:0;
}
.phero .cta-line{ margin-block:1rem 1.1rem; }
.phero .lede{ color:var(--mute-on-dark); }
.phero::after{
  content:""; position:absolute; z-index:3; inset-inline:var(--head-pad); bottom:0;
  height:1px; background:var(--bone); opacity:.18;
}

/* breadcrumbs */
.crumbs{
  display:flex; flex-wrap:wrap; align-items:center; gap:.55rem;
  font-size:.62rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--mute-on-dark); margin-bottom:1.3rem;
  padding-bottom:.8rem; border-bottom:1px solid var(--rule-on-dark);
}
.crumbs li:not(:last-child)::after{ content:"/"; margin-left:.55rem; opacity:.45; }
.crumbs a:hover{ color:var(--bone); text-decoration:underline; text-underline-offset:3px; }

/* chip row */
.phero-tags{ display:flex; flex-wrap:wrap; gap:.45rem; margin-top:clamp(1.1rem,2.2vw,1.6rem); }
.phero-tags span{
  border:1px solid var(--rule-on-dark);
  padding:.42rem .7rem;
  font-size:.58rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--mute-on-dark);
}
.phero .deco-ticks i{ opacity:.26; }
/* .phero is a flex row, so this decoration was an in-flow item stealing ~22px
   from the start of the line and shifting the hero copy off the shell grid */
.phero > .deco-ticks{
  position:absolute; left:0; top:50%; transform:translateY(-50%); z-index:2;
}

/* ── stacked on tablet and phone: photo band first, then the type ─────── */
@media (max-width:900px){
  .phero{
    display:block;
    min-height:0;
    padding-block:var(--head-h) clamp(1.6rem,5vw,2.4rem);
  }
  .phero-media{
    position:relative; inset:auto; width:100%;
    height:clamp(185px,36vw,255px);
    clip-path:none;
  }
  .phero-media img{ object-position:50% 40%; }
  .phero-media::after{
    background:linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0) 60%);
  }
  .phero-seam{ display:none; }
  .phero-in{ margin-top:clamp(1.3rem,4vw,2rem); }
  .phero-in > *{ max-width:none; }
  .phero .hero-grid{ display:none; }
  /* With a photo band the header sits on the photograph and the copy starts
     below it. With no photo the breadcrumbs came within ~28px of the fixed
     bar, which reads as a collision rather than a masthead. */
  .phero--plain{ padding-top:calc(var(--head-h) + clamp(.75rem,3vw,1.4rem)); }
  /* an in-flow decoration pinned to the left edge of the section: at this
     size it prints as four stray hairlines beside the breadcrumbs */
  .phero > .deco-ticks{ display:none; }
}
@media (max-width:560px){
  .phero h1{ font-size:clamp(1.9rem,9vw,2.6rem); }
  .crumbs{ font-size:.58rem; }
}

/* 09 STATEMENT TYPE & SPLITS --------------------------------------------- */
.statement{
  font-family:var(--display);
  font-size:clamp(2rem,4.6vw,4rem);
  line-height:.9; letter-spacing:var(--track-display); text-transform:uppercase;
  text-wrap:balance;                 /* no orphaned last word */
  max-width:26ch;
}
.statement em{ font-style:normal; color:var(--acc-c); }

/* generic split */
.split{
  position:relative;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1.4rem,2.8vw,2.6rem);
  align-items:start;                 /* was center — that let short columns float */
}
.split.split-40{ grid-template-columns:minmax(0,.68fr) minmax(0,1fr); }
.split.split-60{ grid-template-columns:minmax(0,1fr) minmax(0,.68fr); }
/* hairline between the columns */
.split > * + *{ position:relative; padding-left:clamp(1.3rem,2.6vw,2.2rem); }
.split > * + *::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:1px;
  background:currentColor; opacity:.14;
}
/* the media column tracks the copy instead of sitting dead centre */
.split figure{ position:sticky; top:calc(var(--head-h) + clamp(1rem,2vw,1.6rem)); }
.split figure::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  border:1px solid var(--acc-c); opacity:.45;
  transform:translate(clamp(.55rem,1.2vw,.9rem), clamp(.55rem,1.2vw,.9rem));
}
.split img{ width:100%; object-fit:cover; filter:none; }
/* Spec strip. Numbered accent markers, a gradient top edge and a faint
   tinted ground give it presence without turning it back into boxed cards. */
.facts{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0; margin:0;
  counter-reset:fact;
  border-top:3px solid transparent;
  border-image:var(--acc-grad) 1;
  border-image-width:3px 0 0 0;
}
/* a facts list used as a split column reads better in one column */
.split .facts{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0;
  background:none; border:0;
  border-top:1px solid var(--rule-on-light);
}
[data-theme="dark"] .facts,[data-theme="black"] .facts{ border-top-color:var(--rule-on-dark); }
.facts > div{
  counter-increment:fact;
  position:relative;
  padding:clamp(1rem,1.9vw,1.35rem) clamp(1rem,2vw,1.6rem) clamp(1rem,1.9vw,1.35rem) clamp(2.6rem,4vw,3.4rem);
  border-bottom:1px solid var(--hair-on-light);
  background:linear-gradient(180deg,var(--acc-wash),transparent 70%);
  transition:background .35s ease;
}
[data-theme="dark"] .facts > div,[data-theme="black"] .facts > div{ border-bottom-color:var(--hair-on-dark); }
/* the numeral marker */
.facts > div::before{
  content:"0" counter(fact);
  position:absolute; left:clamp(.6rem,1.4vw,1.1rem); top:clamp(1rem,1.9vw,1.35rem);
  font-family:var(--display); font-size:.92rem; line-height:1;
  color:var(--acc-c); opacity:.85;
}
/* accent edge that lights up on hover */
.facts > div::after{
  content:""; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:var(--acc-c); opacity:.22; transition:opacity .3s ease;
}
@media (hover:hover) and (pointer:fine){
  .facts > div:hover{ background:linear-gradient(180deg,var(--acc-wash),var(--acc-wash)); }
  .facts > div:hover::after{ opacity:1; }
}
.facts > div:nth-child(2n){ border-left:1px solid var(--hair-on-light); }
[data-theme="dark"] .facts > div:nth-child(2n){ border-left-color:var(--hair-on-dark); }
.facts dt{
  display:flex; align-items:center; gap:.55rem;
  font-size:.56rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  color:var(--acc-c); opacity:.95; margin-bottom:.5rem;
}
.facts dt::after{
  content:""; flex:1; height:1px; background:currentColor; opacity:.28;
}
.facts dd{ margin:0; font-size:.92rem; line-height:1.55; }
.facts dd a{ border-bottom:1px solid currentColor; }
@media (max-width:620px){
  .facts{ grid-template-columns:1fr; }
  /* The left inset is not decoration — the numbered marker in ::before lives
     inside it. Zeroing padding-inline printed "01" straight on top of the
     term. The right edge goes flush to the shell; the left keeps its gutter,
     narrowed to what the marker actually needs. */
  .facts > div,.facts > div:nth-child(2n){
    padding-right:0; padding-left:2.25rem; border-left:0;
  }
  .facts > div::before{ left:.35rem; }
}

/* ── interior CTA: same compact strip as the home page, one class ───────── */
.cta-strip.cta-interior{ padding-block:clamp(2.8rem,4.6vw,4.6rem); }
.cta-strip.cta-interior .cta-strip.cta-interior .cta-copy h2{ font-size:clamp(1.9rem,4vw,3.1rem); }

/* ── 2-up coach cards ─ portrait beside the copy so the page stays short.
   Full bios live in a disclosure inside each card: collapsed by default,
   still in the DOM for search engines. ─────────────────────────────────── */
.cteam--2up{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.cteam--2up .ccard{ flex-direction:row; align-items:stretch; }
/* an odd number of coaches would leave the last card orphaned at half
   width — span it across instead, and narrow its portrait to suit */
.cteam--2up .ccard:last-child:nth-child(odd){ grid-column:1 / -1; }
.cteam--2up .ccard:last-child:nth-child(odd) .ccard-media{
  width:21%;
  aspect-ratio:auto;            /* the copy sets the height, not a 4/5 frame */
}
.cteam--2up .ccard-media{ width:37%; flex:none; }
.cteam--2up .ccard-media img{
  height:100%; min-height:100%; aspect-ratio:auto;
  object-position:50% 16%;
}
.cteam--2up .ccard-media::after{ display:none; }
.cteam--2up .ccard-body{
  border-top:0;
  border-left:1px solid rgba(10,10,10,.2);
}
[data-theme="dark"] .cteam--2up .ccard-body{ border-left-color:var(--rule-on-dark); }

/* a static card is not a link — no lift, but the photo still warms up */
.ccard--static{ cursor:default; }
@media (hover:hover) and (pointer:fine){
  .ccard--static:hover{ transform:none; }
}

/* the bio disclosure */
.ccard-bio{ margin-top:clamp(.7rem,1.4vw,1rem); border-top:1px solid rgba(10,10,10,.12); }
[data-theme="dark"] .ccard-bio{ border-top-color:var(--hair-on-dark); }
.ccard-bio summary{
  cursor:pointer; list-style:none; position:relative;
  padding:.7rem 1.6rem .1rem 0;
  font-size:.58rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  opacity:.6; transition:opacity 220ms var(--ease);
}
.ccard-bio summary::-webkit-details-marker{ display:none; }
.ccard-bio summary:hover{ opacity:1; }
.ccard-bio summary::after{
  content:""; position:absolute; right:.2rem; top:.95rem;
  width:8px; height:8px;
  border-right:1px solid currentColor; border-bottom:1px solid currentColor;
  transform:rotate(45deg);
  transition:transform 300ms var(--ease);
}
.ccard-bio[open] summary::after{ transform:rotate(225deg); top:.85rem; }
.ccard-bio .bio-text{ padding-top:.6rem; }
.ccard-bio .bio-text p{ font-size:.83rem; line-height:1.5; opacity:.72; }
.ccard-bio .bio-text p + p{ margin-top:.7em; }
.ccard-bio .bio-text blockquote{
  margin-top:.8rem; padding-left:.8rem;
  border-left:2px solid currentColor;
  font-family:var(--serif); font-size:.98rem; line-height:1.3; opacity:.85;
}
.ccard-bio .bio-text cite{
  display:block; margin-top:.5rem; font-style:normal;
  font-size:.55rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; opacity:.5;
}

@media (max-width:900px){ .cteam--2up{ grid-template-columns:1fr; } }
@media (max-width:560px){
  .cteam--2up .ccard{ flex-direction:column; }
  .cteam--2up .ccard-media{ width:100%; }
  .cteam--2up .ccard-media img{ aspect-ratio:16/10; height:auto; min-height:0; }
    .cteam--2up .ccard-body{ border-left:0; border-top:1px solid rgba(10,10,10,.2); }
}

/* ── TIMELINE ─ dated story beats on a continuous vertical rule ────────── */
.tline{
  margin-top:clamp(1.6rem,3.2vw,2.6rem);
  border-top:1px solid currentColor;
}
.tline > li{ border-bottom:1px solid var(--hair-on-light); }
[data-theme="dark"] .tline > li,[data-theme="black"] .tline > li{ border-bottom-color:var(--hair-on-dark); }
.tline-row{
  display:grid;
  grid-template-columns:clamp(96px,13vw,168px) minmax(0,1fr);
  gap:clamp(1.2rem,2.6vw,2.4rem);
  padding-block:clamp(1.1rem,2.2vw,1.7rem);
}
/* the year cell's right edge forms the spine */
.tline-year{
  position:relative;
  border-right:1px solid var(--rule-on-light);
  padding-right:clamp(.8rem,1.6vw,1.2rem);
  align-self:stretch;
}
[data-theme="dark"] .tline-year,[data-theme="black"] .tline-year{ border-right-color:var(--rule-on-dark); }
.tline-year::after{
  content:""; position:absolute; right:-4px; top:.45em;
  width:7px; height:7px; background:currentColor;
  transform:rotate(45deg);
}
.tline-year b{
  display:block; font-family:var(--display); font-weight:400; text-transform:uppercase;
  font-size:clamp(1.2rem,2.2vw,1.8rem); line-height:1; color:var(--acc-c);
  letter-spacing:var(--track-display);
}
.tline-year span{
  display:block; margin-top:.35rem;
  font-size:.56rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; opacity:.5;
}
.tline-body h3{
  font-size:clamp(1.05rem,1.8vw,1.4rem); margin-bottom:.5rem;
}
.tline-body p{ font-size:.93rem; line-height:1.55; opacity:.74; max-width:62ch; }

@media (max-width:640px){
  .tline-row{ grid-template-columns:1fr; gap:.7rem; }
  .tline-year{
    border-right:0; padding-right:0;
    border-left:2px solid var(--rule-on-light); padding-left:.8rem;
  }
  [data-theme="dark"] .tline-year{ border-left-color:var(--rule-on-dark); }
  .tline-year::after{ display:none; }
  .tline-year b{ display:inline; }
  .tline-year span{ display:inline; margin-left:.6rem; }
}

/* ==========================================================================
   REBUILT COMPONENT LAYER — A: textures, decoration, hero extras, bands
   ========================================================================== */

/* — background textures. CSS only, drawn from currentColor + masks, so they
     invert with the section theme and cost no requests. ------------------- */
.bg-blueprint,.bg-lattice,.bg-ledger,.bg-dots,.bg-cols,.bg-spot,.bg-rings,.bg-mesh{
  position:relative; isolation:isolate;
}
.bg-blueprint::before,.bg-lattice::before,.bg-ledger::before,.bg-dots::before,
.bg-cols::before,.bg-spot::before,.bg-rings::before,.bg-mesh::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  color:inherit;
}
.bg-blueprint::before{
  background-image:
    linear-gradient(to right, currentColor 1px, transparent 1px),
    linear-gradient(to bottom, currentColor 1px, transparent 1px);
  background-size:78px 78px; opacity:.07;
  mask-image:radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 78%);
}
.bg-lattice::before{
  background-image:
    repeating-linear-gradient(45deg, currentColor 0 1px, transparent 1px 15px),
    repeating-linear-gradient(-45deg, currentColor 0 1px, transparent 1px 15px);
  opacity:.055;
  mask-image:linear-gradient(to bottom, #000, transparent 92%);
}
.bg-ledger::before{
  background-image:repeating-linear-gradient(to bottom, currentColor 0 1px, transparent 1px 42px);
  opacity:.08;
  mask-image:linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
}
.bg-dots::before{
  background-image:radial-gradient(currentColor 1.1px, transparent 1.2px);
  background-size:26px 26px; opacity:.10;
  mask-image:radial-gradient(100% 80% at 100% 0%, #000 20%, transparent 72%);
}
.bg-cols::before{
  background-image:repeating-linear-gradient(to right, currentColor 0 1px, transparent 1px 11.111%);
  opacity:.07;
  mask-image:linear-gradient(to bottom, #000 0 40%, transparent 96%);
}
.bg-spot::before{
  background:radial-gradient(58% 68% at 82% 12%, var(--acc-wash), transparent 70%);
  opacity:1;
}
.bg-spot::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:radial-gradient(currentColor .9px, transparent 1px);
  background-size:22px 22px; opacity:.07;
  mask-image:radial-gradient(70% 70% at 18% 90%, #000, transparent 74%);
}
.bg-rings::before{
  background-image:repeating-radial-gradient(circle at 88% 8%, currentColor 0 1px, transparent 1px 46px);
  opacity:.07;
}
.bg-mesh::before{
  background-image:
    repeating-linear-gradient(to right, currentColor 0 1px, transparent 1px 60px),
    repeating-linear-gradient(to bottom, currentColor 0 1px, transparent 1px 60px);
  opacity:.05;
  mask-image:radial-gradient(90% 90% at 10% 50%, #000, transparent 70%);
}
/* sections that host bleeding decoration must clip it */
.clip{ overflow:hidden; }

/* — outlined display type used as a watermark ---------------------------- */
/* It is a watermark, so it has to come out of the flow — left static it was
   adding its own line box (~325px on the instructors page) and pushing the
   section's real content down. The inline right/bottom offsets each usage
   carries only mean something once it is positioned. */
.outline-type{
  position:absolute; z-index:0;
  font-family:var(--display); text-transform:uppercase;
  letter-spacing:var(--track-display); line-height:.78;
  color:transparent; -webkit-text-stroke:1.5px var(--stroke-c);
  opacity:.30; user-select:none; pointer-events:none;
}
@supports not (-webkit-text-stroke:1px #000){
  .outline-type{ color:inherit; opacity:.10; }
}
/* marks a section that carries an .outline-type watermark */
.has-watermark > .shell{ position:relative; z-index:1; }

/* — decorative arc, belt tab, tick row ---------------------------------- */
.deco-arc{
  position:absolute; pointer-events:none; aspect-ratio:1;
  width:clamp(220px,30vw,460px);
  border:1px solid currentColor; border-radius:50%;
  opacity:.14; right:-8%; top:-14%;
}
.deco-arc::after{
  content:""; position:absolute; inset:14%;
  border:1px solid var(--acc-c); border-radius:50%; opacity:.5;
}
.deco-stripes{ display:inline-flex; gap:5px; align-items:flex-end; }
.deco-stripes i{
  display:block; width:8px; height:26px; background:currentColor; opacity:.9;
}
.deco-stripes i:nth-child(2){ background:var(--acc-c); }
.deco-stripes i:nth-child(3){ opacity:.5; }
.deco-stripes.edge{
  position:absolute; left:0; top:0; gap:0;
}
.deco-stripes.edge i{ width:5px; height:100%; opacity:.16; }
.deco-stripes.edge i:nth-child(2){ background:var(--acc-c); opacity:.7; }
.deco-ticks{ display:flex; gap:6px; align-items:center; }
.deco-ticks i{ display:block; width:1px; height:12px; background:currentColor; opacity:.4; }
.edge-label{
  position:absolute; writing-mode:vertical-rl; text-orientation:mixed;
  font-family:var(--body); font-weight:600; font-size:.66rem;
  letter-spacing:var(--track-eyebrow); text-transform:uppercase;
  opacity:.42; right:clamp(10px,1.6vw,22px); top:clamp(16px,3vw,40px);
  pointer-events:none;
}

/* — section index: "01 —— THE ADULT PROGRAM" ---------------------------- */
.sindex{
  display:inline-flex; align-items:center; gap:.7rem;
  font-family:var(--body); font-weight:600; font-size:.7rem;
  letter-spacing:var(--track-eyebrow); text-transform:uppercase;
  opacity:.9; margin-bottom:.9rem;
}
.sindex b{
  font-family:var(--display); font-size:1.15rem; line-height:1;
  letter-spacing:0; color:var(--acc-c); opacity:1;
}
.sindex::after{
  content:""; width:clamp(28px,4vw,64px); height:1px;
  background:currentColor; opacity:.34;
}

/* — misc inline utilities ------------------------------------------------ */
.leader{ flex:1; border-bottom:1px dotted currentColor; opacity:.28; margin:0 .5rem; min-width:14px; }
.pull{
  font-family:var(--serif); font-size:var(--t-quote); line-height:1.14;
  margin:1.6rem 0; max-width:34ch;
}
.pull em{ font-style:italic; color:var(--acc-c); }
.pull cite{
  display:block; margin-top:1.1rem; font-style:normal;
  font-family:var(--body); font-size:.72rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--acc-c); opacity:.95;
}
.pull cite::before{
  content:""; display:inline-block; width:20px; height:2px;
  background:currentColor; vertical-align:middle; margin-right:.6rem;
}
.panel-lift{ box-shadow:0 26px 60px -30px rgba(0,0,0,.55); }
.ratio-34{ aspect-ratio:3/4; overflow:hidden; }
.ratio-45{ aspect-ratio:4/5; overflow:hidden; }
.ratio-34 img,.ratio-45 img{ width:100%; height:100%; object-fit:cover; }
.dim{ opacity:.28 !important; }
.hot dt,.hot dd{ color:var(--acc-c); }

/* — hero additions ------------------------------------------------------ */
/* ── split hero ─────────────────────────────────────────────────────────
   Type on clean ink at the left, the photograph owning the whole right half
   and bleeding off three edges. The previous build laid the headline over a
   darkened full-bleed photo; this lets the picture be a picture and stops
   the h1 fighting the image for contrast.
   ------------------------------------------------------------------------ */
.hero-split{
  display:flex; flex-direction:column; flex-wrap:nowrap; align-items:stretch;
  min-height:min(88vh,860px);
  padding-block:0;
}
.hero-shot{
  position:absolute; z-index:0; margin:0; overflow:hidden;
  top:0; bottom:0; right:0; width:48%;
}
/* the element box is sized to the photograph itself (not the column) so it can
   be centred with auto margins and so the mask below lands on the picture's own
   edges rather than on empty space beside it */
.hero-shot img{
  position:relative; z-index:1;
  display:block; width:auto; max-width:100%; height:100%;
  margin-inline:auto;
  object-fit:contain;
  filter:contrast(1.04) saturate(1.02);
  -webkit-mask-image:linear-gradient(to right,
    transparent 0%, #000 13%, #000 87%, transparent 100%);
          mask-image:linear-gradient(to right,
    transparent 0%, #000 13%, #000 87%, transparent 100%);
}
/* the column is close to square, the photograph is a tall portrait: a blurred,
   dimmed copy of the same frame fills the column behind it so the whole picture
   can be shown without a hard edge where it stops */
.hero-shot::before{
  content:""; position:absolute; inset:-6%; z-index:0;
  background:url("../../Images/home-hero-bjj-phoenix.webp") center / cover no-repeat;
  filter:blur(46px) brightness(.3) saturate(.6);
}
/* the left edge dissolves into the ink so there is no hard seam beside the
   type; the top band keeps the fixed header legible where it crosses the photo */
.hero-shot::after{
  content:""; position:absolute; inset:0; z-index:2;
  background:
    linear-gradient(to right, var(--ink-deep) 0%, rgba(10,10,10,.74) 15%, rgba(10,10,10,0) 48%),
    linear-gradient(to bottom, rgba(10,10,10,.8) 0%, rgba(10,10,10,0) 28%),
    linear-gradient(to top, rgba(10,10,10,.45) 0%, rgba(10,10,10,0) 20%);
}
.hero-split .hero-in{
  flex:1 1 auto;
  display:flex; flex-direction:column; justify-content:center;
  padding-block:calc(var(--head-h) + clamp(1.4rem,3vw,2.4rem)) clamp(2rem,4vw,3rem);
}
.hero-split .hero-in > *{ max-width:min(50%,44rem); }
.hero-split h1{ font-size:clamp(3rem,7.4vw,7.2rem); line-height:.86; }
/* .edge-label carries a default `right`; the inline `left` here can only win
   if that is cleared, otherwise the box stretches and the label prints on the
   far right edge — on top of the photograph. */
.hero-split .edge-label{ right:auto; }
/* the strip keeps the page's shell width for its content, but its ground has
   to run the full bleed or the photograph shows through past the right rule */
.hero-split .hero-strip{
  flex:0 0 auto; position:relative; z-index:3;
  border-top:0;
  padding-bottom:clamp(1.1rem,2.4vw,1.8rem);
}
/* the rule rides on the full-bleed ground, not on the shell, so it does not
   stop short of the band it is capping */
.hero-split .hero-strip::before{
  content:""; position:absolute; z-index:-1;
  inset-block:0; left:50%; margin-left:-50vw; width:100vw;
  background:var(--ink-deep);
  border-top:1px solid var(--rule-on-dark);
}

@media (max-width:900px){
  /* stack: copy, then the photograph as a full-width band, then the strip */
  .hero-split{ min-height:0; }
  .hero-split .hero-in{
    padding-block:calc(var(--head-h) + clamp(1.6rem,6vw,2.4rem)) clamp(1.6rem,5vw,2.2rem);
  }
  .hero-split .hero-in > *{ max-width:none; }
  .hero-split h1{ font-size:clamp(3rem,13vw,5rem); }
  .hero-shot{
    position:relative; top:auto; right:auto; bottom:auto;
    width:100%; height:auto; aspect-ratio:4 / 5; max-height:70svh;
  }
  .hero-shot::after{
    background:linear-gradient(to bottom, rgba(10,10,10,.55) 0%, rgba(10,10,10,0) 30%);
  }
  .hero-split .hero-grid{ display:none; }
  .hero-split .edge-label{ display:none; }
}
.hero-kicker{
  display:block; font-family:var(--body); font-weight:600; font-size:.74rem;
  letter-spacing:var(--track-eyebrow); text-transform:uppercase;
  color:var(--acc-lift); margin-bottom:1rem;
}
.hero-line{ display:block; }
.hero-rule{
  display:block; width:clamp(60px,9vw,140px); height:3px; margin:1.4rem 0;
  background:linear-gradient(to right,var(--acc-lift),var(--acc));
}
.hero-strip{
  border-top:1px solid var(--rule-on-dark); margin-top:clamp(1.6rem,3vw,2.6rem);
  padding-top:1rem;
}
.hero-strip ul{ display:flex; flex-wrap:wrap; gap:clamp(1.2rem,3vw,2.6rem); }
.hero-strip li{
  font-size:.8rem; letter-spacing:.05em; text-transform:uppercase;
  opacity:.72; display:flex; align-items:baseline; gap:.5rem;
}
.hero-strip li b{
  font-family:var(--display); font-size:1.5rem; line-height:1;
  letter-spacing:0; opacity:1; color:var(--acc-lift);
}

/* — marquee ------------------------------------------------------------- */
.marquee{
  overflow:hidden; border-top:1px solid var(--rule-on-light);
  border-bottom:1px solid var(--rule-on-light);
  background:var(--bone-deep); color:var(--ink); padding:.75rem 0;
}
.marquee.inv{ background:var(--ink); color:var(--bone); border-color:var(--rule-on-dark); }
.marquee-track{
  display:flex; align-items:center; gap:clamp(1.4rem,3vw,3rem);
  width:max-content; animation:marq 38s linear infinite;
}
.marquee:hover .marquee-track{ animation-play-state:paused; }
@keyframes marq{ from{ transform:translate3d(0,0,0) } to{ transform:translate3d(-50%,0,0) } }
.marquee-item{
  font-family:var(--display); text-transform:uppercase; white-space:nowrap;
  font-size:clamp(1.1rem,2.2vw,1.9rem); letter-spacing:var(--track-display);
  line-height:1;
}
/* the accent must be resolved against the BAND, not the page: the bone band
   takes the deep navy, the black band takes the lifted azure. Without this
   the emphasised items inherit the light-ground navy and vanish on black. */
.marquee{ --acc-c:var(--acc-deep); }
.marquee.inv{ --acc-c:var(--acc-lift); }
/* filled, not outlined — hairline stroked type is unreadable at this size */
.marquee-item.em{
  color:var(--acc-c); -webkit-text-stroke:0; opacity:1;
}

/* — collage: three photographs breaking the grid ------------------------ */
.collage{
  display:grid; grid-template-columns:repeat(12,1fr);
  gap:clamp(.7rem,1.4vw,1.2rem); align-items:start;
}
.collage figure{ position:relative; overflow:hidden; }
.collage img{ width:100%; height:100%; object-fit:cover; display:block; filter:none; }
.collage figcaption{
  position:absolute; left:0; bottom:0; padding:.45rem .7rem;
  background:var(--ink); color:var(--bone);
  font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; font-weight:600;
}
.collage figcaption::before{
  content:""; display:inline-block; width:6px; height:6px; margin-right:.5rem;
  background:var(--acc-lift); vertical-align:middle;
}
.collage .c1{ grid-column:1/8;  aspect-ratio:4/3; }
.collage .c2{ grid-column:8/13; aspect-ratio:3/4; margin-top:clamp(1.4rem,4vw,3.4rem); }
.collage .c3{ grid-column:3/10; aspect-ratio:16/9; margin-top:clamp(-3rem,-4vw,-1rem); z-index:1;
  border:clamp(6px,1vw,12px) solid var(--bone); }
[data-theme="dark"] .collage .c3,[data-theme="black"] .collage .c3{ border-color:var(--ink); }
@media (hover:hover) and (pointer:fine){
  .collage figure:hover img{ transform:scale(1.03); }
  .collage img{ transition:filter .5s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
}
@media (max-width:760px){
  .collage .c1{ grid-column:1/13; }
  .collage .c2{ grid-column:1/8; margin-top:0; }
  .collage .c3{ grid-column:6/13; margin-top:-2rem; }
}

/* — mission pull-quote -------------------------------------------------- */
.rules-mission{
  border-left:3px solid var(--acc-c);
  padding:clamp(1rem,2vw,1.6rem) 0 clamp(1rem,2vw,1.6rem) clamp(1.1rem,2.2vw,2rem);
  max-width:60ch;
}
.rules-mission p{
  font-family:var(--serif); font-size:clamp(1.25rem,2.4vw,2rem); line-height:1.24;
}
.rules-mission cite{
  display:block; margin-top:1rem; font-style:normal;
  font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; font-weight:600; opacity:.6;
}

/* — quote card: the black inset on bone --------------------------------- */
.quote-card{
  background:var(--ink); color:var(--bone);
  padding:clamp(1.6rem,3.4vw,3.2rem);
  position:relative; overflow:hidden;
}
.quote-card::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:linear-gradient(to bottom,var(--acc-lift),var(--acc-deep));
}
.quote-card::after{
  content:"”"; position:absolute; right:.3em; top:-.16em;
  font-family:var(--serif); font-size:14rem; line-height:1;
  color:var(--acc-lift); opacity:.12; pointer-events:none;
}
.quote-card blockquote{
  font-family:var(--serif); font-size:var(--t-quote); line-height:1.2;
  max-width:44ch; position:relative; z-index:1;
}
.quote-card cite{
  display:block; margin-top:1.4rem; font-style:normal;
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; font-weight:600;
  color:var(--acc-lift);
}
.quote-card cite span{ display:block; margin-top:.3rem; color:var(--bone); opacity:.56; letter-spacing:.12em; }

/* — section head row --------------------------------------------------- */
.head-row{
  display:grid; grid-template-columns:1fr .82fr;
  gap:clamp(1.2rem,3vw,3rem); align-items:end;
  margin-bottom:clamp(1.6rem,3vw,2.6rem);
}
.head-copy h2{ margin-bottom:0; }
.head-row > .lede{ padding-bottom:.4rem; }
@media (max-width:820px){ .head-row{ grid-template-columns:1fr; align-items:start; } }

/* ==========================================================================
   REBUILT COMPONENT LAYER — B: program cards, founder feature, coach cards,
                                gallery, FAQ
   ========================================================================== */

/* — program cards ------------------------------------------------------- */
.pcards{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1rem,1.8vw,1.5rem);
}
/* The card needs a real surface. It previously sat on a 1.5%-opacity tint
   with an 8%-opacity border, so on the bone page it read as loose text
   rather than a card, and the spec labels at .56 opacity were close to
   unreadable. White ground, visible edge, and honest contrast. */
.pcard{
  display:flex; flex-direction:column; text-decoration:none; color:inherit;
  position:relative; overflow:hidden;
  background:var(--white);
  border:1px solid var(--bone-mute);
  box-shadow:0 14px 34px -28px rgba(0,0,0,.5);
  transition:border-color .35s ease, transform .5s cubic-bezier(.2,.8,.2,1),
             box-shadow .35s ease;
}
[data-theme="dark"] .pcard,[data-theme="black"] .pcard{
  background:rgba(255,255,255,.045); border-color:var(--rule-on-dark); box-shadow:none;
}
/* each program keeps the colour it has on the timetable */
.pcard::before{
  content:""; position:absolute; left:0; right:0; top:0; height:3px; z-index:3;
  background:var(--t,var(--acc-c));
}
.pcard-media{ position:relative; aspect-ratio:4/3; overflow:hidden; }
.pcard-media img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .8s cubic-bezier(.2,.8,.2,1);
}
.pcard-media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.55), transparent 55%);
}
.pcard-num{
  position:absolute; left:0; top:0; z-index:2;
  font-family:var(--display); font-size:1rem; line-height:1;
  padding:.5rem .7rem; background:var(--t,var(--acc-deep)); color:#fff;
  letter-spacing:.04em;
}
.pcard-badge{
  position:absolute; right:.7rem; top:.7rem; z-index:2;
  font-size:.6rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  padding:.34rem .6rem; background:var(--acc-cyan); color:var(--ink-deep);
}
.pcard-body{
  padding:clamp(1rem,1.8vw,1.4rem); display:flex; flex-direction:column;
  gap:.5rem; flex:1;
}
.pcard-name{ font-size:clamp(1.2rem,1.9vw,1.6rem); line-height:1; }
.pcard-line{ font-size:.93rem; line-height:1.55; opacity:.82; }

/* spec table — a real two-column grid so values align down the card
   instead of drifting with each row's label width */
.pcard-spec{
  display:grid; gap:0; margin-top:.35rem;
  border-top:1px solid var(--bone-mute); padding-top:.2rem;
}
[data-theme="dark"] .pcard-spec{ border-top-color:var(--rule-on-dark); }
.pcard-spec > div{
  display:grid; grid-template-columns:auto 1fr auto;
  align-items:baseline; gap:.4rem;
  padding:.42rem 0;
  border-bottom:1px solid var(--bone-deep);
  font-size:.8rem;
}
[data-theme="dark"] .pcard-spec > div{ border-bottom-color:var(--hair-on-dark); }
.pcard-spec > div:last-child{ border-bottom:0; }
.pcard-spec dt{
  font-size:.6rem; letter-spacing:.14em; text-transform:uppercase;
  font-weight:700; opacity:.72;
}
.pcard-spec dd{ font-weight:600; text-align:right; }
.pcard-spec > div.hot dd{ color:var(--t,var(--acc-c)); }
.pcard-spec .leader{ opacity:.22; }

.pcard-go{
  margin-top:auto; padding-top:.9rem; display:inline-flex; align-items:center; gap:.5rem;
  font-size:.7rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--t,var(--acc-c));
}
.pcard-go .arrow{
  display:inline-block; width:22px; height:1px; background:currentColor; position:relative;
  transition:width .35s ease;
}
.pcard-go .arrow::after{
  content:""; position:absolute; right:0; top:-3px;
  border:3px solid transparent; border-left-color:currentColor;
}
@media (hover:hover) and (pointer:fine){
  .pcard:hover{
    border-color:var(--t,var(--acc-c));
    transform:translateY(-4px);
    box-shadow:0 22px 48px -26px rgba(0,0,0,.5);
  }
  .pcard:hover .pcard-media img{ transform:scale(1.05); }
  .pcard:hover .pcard-go .arrow{ width:34px; }
}
.pcard:focus-visible{ outline:2px solid var(--t,var(--acc-c)); outline-offset:3px; }
@media (max-width:900px){ .pcards{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .pcards{ grid-template-columns:1fr; } }

/* — the facility: three rooms in one unit ------------------------------- */
/* Same card family as .pcards, minus the link behaviour — these are plain
   figures, so no hover lift and no go-link. The media is 16/9 because the
   source photographs are wide room shots, not the 4/3 program crops. */
.facility{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1rem,1.8vw,1.5rem);
}
.fcard{
  display:flex; flex-direction:column; position:relative; overflow:hidden;
  background:var(--white);
  border:1px solid var(--bone-mute);
  box-shadow:0 14px 34px -28px rgba(0,0,0,.5);
}
[data-theme="dark"] .fcard,[data-theme="black"] .fcard{
  background:rgba(255,255,255,.03); border-color:var(--rule-on-dark); box-shadow:none;
}
.fcard-media{ position:relative; aspect-ratio:16/9; overflow:hidden; }
.fcard-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.fcard-media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.5), transparent 55%);
}
.fcard-num{
  position:absolute; left:0; top:0; z-index:2;
  font-family:var(--display); font-size:1rem; line-height:1;
  padding:.5rem .7rem; background:var(--acc-deep); color:#fff;
  letter-spacing:.04em;
}
.fcard-body{
  padding:clamp(1rem,1.8vw,1.4rem); display:flex; flex-direction:column;
  gap:.5rem; flex:1;
}
.fcard-name{ font-size:clamp(1.15rem,1.8vw,1.5rem); line-height:1; }
.fcard-line{ font-size:.93rem; line-height:1.55; opacity:.82; }
@media (max-width:900px){ .facility{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .facility{ grid-template-columns:1fr; } }

/* — a wide room shot: the building as a figure, caption in the corner --- */
.room-shot{
  position:relative; overflow:hidden;
  border:1px solid var(--bone-mute);
}
[data-theme="dark"] .room-shot,[data-theme="black"] .room-shot{ border-color:var(--rule-on-dark); }
.room-shot img{
  display:block; width:100%; height:100%;
  aspect-ratio:16/9; object-fit:cover;
}
.room-shot figcaption{
  position:absolute; left:0; bottom:0; z-index:2;
  padding:.5rem .8rem; background:var(--acc-deep); color:#fff;
  font-size:.62rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
}
.room-shot figcaption::before{
  content:""; display:inline-block; width:6px; height:6px; margin-right:.5rem;
  background:var(--acc-cyan); vertical-align:middle;
}

/* a plain two-up band. Unlike .split this has no sticky figure and no
   hairline divider, so a short copy column cannot push its partner out of
   the section — which is what .split--fit did here. */
.pair{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1.4rem,2.8vw,2.4rem); align-items:center;
}
.pair .map-frame{ aspect-ratio:16/9; }
@media (max-width:820px){
  .pair{ grid-template-columns:1fr; }
}

/* — legal pages: privacy policy, terms ---------------------------------- */
/* Long-form statutory text. The measure is deliberately narrow and the
   section index sticks beside it, because these documents are scanned for
   one clause rather than read start to finish. */
.legal{
  display:grid; grid-template-columns:minmax(0,14rem) minmax(0,1fr);
  gap:clamp(1.6rem,4vw,3.6rem); align-items:start;
}
.legal-dates{
  margin-top:1rem; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  opacity:.7;
}
.legal-dates b{ font-weight:700; opacity:.55; margin-right:.25rem; }
.legal-dates b + b{ margin-left:.4rem; }

.legal-toc{
  position:sticky; top:calc(var(--head-h) + clamp(1rem,2vw,1.6rem));
  border-left:3px solid var(--acc-c); padding-left:1rem;
}
.legal-toc-h{
  display:block; font-size:.6rem; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; opacity:.5; margin-bottom:.7rem;
}
.legal-toc ol{ list-style:none; margin:0; padding:0; display:grid; gap:.42rem; }
.legal-toc a{
  font-size:.78rem; line-height:1.35; opacity:.75;
  transition:opacity .2s ease, color .2s ease;
}
.legal-toc a:hover{ opacity:1; color:var(--acc-c); }

.legal-body{ max-width:74ch; }
.legal-body > p,
.legal-body li{ line-height:1.68; }
.legal-body > p{ margin-bottom:1.1rem; }
.legal-body h2{
  font-size:clamp(1.15rem,2vw,1.55rem); line-height:1.1;
  margin-top:clamp(2rem,3.6vw,2.9rem); margin-bottom:.85rem;
  padding-top:clamp(1.1rem,2vw,1.5rem);
  border-top:1px solid var(--bone-deep);
  scroll-margin-top:calc(var(--head-h) + 1.5rem);
}
.legal-body > h2:first-of-type{ border-top:0; }
.legal-body h3{
  font-family:var(--body); font-size:.72rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  margin-top:1.6rem; margin-bottom:.55rem; color:var(--acc-deep);
}
.legal-body ul{ margin:0 0 1.1rem; padding-left:1.1rem; display:grid; gap:.45rem; }
.legal-body li{ font-size:.95rem; }
.legal-body a{ border-bottom:1px solid var(--acc-line); }
.legal-body a:hover{ color:var(--acc-c); }
.legal-contact{
  font-style:normal; line-height:1.8; font-size:.95rem;
  padding:clamp(.9rem,2vw,1.3rem) clamp(1rem,2.2vw,1.5rem);
  background:var(--white); border:1px solid var(--bone-mute);
  border-left:3px solid var(--acc-c);
}

@media (max-width:900px){
  .legal{ grid-template-columns:1fr; gap:clamp(1.2rem,3vw,2rem); }
  .legal-toc{ position:static; }
  .legal-toc ol{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:.4rem .9rem; }
}
@media (max-width:520px){
  .legal-toc ol{ grid-template-columns:1fr; }
}

/* — the founder / lead feature ------------------------------------------ */
.lead{ position:relative; }
/* the two stacked feature rows need real separation, not just a gap */
.lead-row + .lead-row{
  margin-top:clamp(2.6rem,5vw,4.5rem);
  padding-top:clamp(2.6rem,5vw,4.5rem);
  border-top:1px solid var(--rule-on-light);
}
[data-theme="dark"] .lead-row + .lead-row,
[data-theme="black"] .lead-row + .lead-row{ border-top-color:var(--rule-on-dark); }
.lead-row{
  display:grid; grid-template-columns:.42fr 1fr;
  gap:clamp(1.4rem,3.4vw,3.4rem); align-items:start;
}
.lead-row--alt{ grid-template-columns:1fr .42fr; }
/* A compact variant for the founder: a smaller portrait so the block stops
   dominating the page, with the measure capped so the wider text column does
   not run to 100+ characters a line. */
.lead-row--compact{ grid-template-columns:.3fr 1fr; align-items:center; }
.lead-row--compact .prose{ max-width:74ch; }
.lead-row--compact .lead-title{ margin-bottom:1.1rem; }
.lead-row--compact .lead-quote{ margin:1.4rem 0 0; }
.lead-row--alt .lead-shot{ order:2; }
/* The head instructor's bio is long; a fixed-ratio portrait beside it would
   strand several hundred pixels of empty column. Sticky keeps the portrait
   with the reader instead. */
.lead-shot{ position:relative; }
@media (min-width:861px){
  .lead-shot{ position:sticky; top:calc(var(--head-h) + clamp(1rem,2vw,1.6rem)); }
}
.lead-media{ position:relative; overflow:hidden; aspect-ratio:4/5; }
.lead-media img{
  width:100%; height:100%; object-fit:cover; object-position:50% 40%; display:block;
}
.lead-shot::after{
  content:""; position:absolute; inset:0;
  border:1px solid var(--acc-line);
  transform:translate(clamp(8px,1.4vw,18px),clamp(8px,1.4vw,18px));
  pointer-events:none; z-index:-1;
}
.lead-tab{
  display:flex; align-items:center; gap:.6rem;
  margin-top:1.05rem; font-size:.66rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; opacity:.72;
}
.lead-tab::before{ content:""; width:18px; height:2px; background:var(--acc-c); flex:none; }
.lead-body{ min-width:0; }
.lead-eyebrow{
  display:block; font-size:.7rem; font-weight:700;
  letter-spacing:var(--track-eyebrow); text-transform:uppercase;
  color:var(--acc-c); margin-bottom:.95rem;
}
.lead-name{ margin-bottom:.5rem; }
.lead-title{
  display:block; font-size:.86rem; letter-spacing:.1em; text-transform:uppercase;
  font-weight:600; opacity:.62; margin-bottom:1.5rem;
}
.lead-quote{
  font-family:var(--serif); font-size:clamp(1.2rem,2.2vw,1.8rem); line-height:1.24;
  border-left:3px solid var(--acc-c); padding-left:clamp(1.1rem,1.8vw,1.6rem);
  margin:2rem 0; max-width:40ch;
}
.lead-stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  border-top:1px solid var(--rule-on-light); margin-top:2.1rem;
}
[data-theme="dark"] .lead-stats,[data-theme="black"] .lead-stats{ border-top-color:var(--rule-on-dark); }
.lead-stats > div{
  padding:1.15rem .9rem .3rem; border-left:1px solid var(--hair-on-light);
  display:flex; flex-direction:column; gap:.4rem;
}
[data-theme="dark"] .lead-stats > div{ border-left-color:var(--hair-on-dark); }
.lead-stats > div:first-child{ border-left:0; padding-left:0; }
.lead-stats b{
  font-family:var(--display); font-size:clamp(1.5rem,2.6vw,2.2rem); line-height:.95;
  color:var(--acc-c);
}
.lead-stats span{
  font-size:.64rem; letter-spacing:.15em; text-transform:uppercase; font-weight:600; opacity:.6;
}
@media (max-width:860px){
  .lead-row,.lead-row--alt,.lead-row--compact{ grid-template-columns:1fr; }
  .lead-row--alt .lead-shot{ order:0; }
  /* Both portraits in this component (Nolan, Brito) are ~2:3 studio frames
     with the head near the top edge. Stacked, a 16/10 band cropped them to a
     244px strip taken from the middle of the frame, which cut the top of the
     head off on every phone. A portrait frame with a capped width keeps the
     plate a plate instead of a full-bleed band, and keeps the face in it. */
  .lead-shot{ max-width:min(100%,400px); }
  .lead-media{ aspect-ratio:4/5; }
  /* The per-file crop anchors in section Q are tuned for the desktop plate and
     match `.lead-media img` on specificity, so they were winning here. One
     class heavier pins the phone crop to the head. */
  .lead-shot .lead-media img{ object-position:50% 12%; }
  .lead-stats{ grid-template-columns:repeat(2,1fr); }
  .lead-stats > div:nth-child(3){ border-left:0; padding-left:0; }
  .lead-stats > div:nth-child(n+3){ border-top:1px solid var(--hair-on-light); }
  [data-theme="dark"] .lead-stats > div:nth-child(n+3){ border-top-color:var(--hair-on-dark); }
}

/* — coaching team ------------------------------------------------------- */
.cteam-head{ margin-bottom:clamp(1.6rem,3vw,2.6rem); max-width:66ch; }
/* three coaches read as one straight row, then a stack — never a grid that
   leaves a single orphan on a second line */
.cteam{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1rem,1.6vw,1.4rem);
  align-items:stretch;
}
.cteam--2up{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.ccard{
  position:relative; display:flex; flex-direction:column;
  border:1px solid var(--hair-on-light); overflow:hidden;
  background:rgba(10,10,10,.015);
  transition:border-color .35s ease, transform .5s cubic-bezier(.2,.8,.2,1);
}
[data-theme="dark"] .ccard,[data-theme="black"] .ccard{
  border-color:var(--hair-on-dark); background:rgba(255,255,255,.02);
}
.ccard-idx{
  position:absolute; right:.6rem; top:.5rem; z-index:2;
  font-family:var(--display); font-size:.9rem; line-height:1;
  color:var(--acc-c); opacity:.8;
}
.ccard-media{ position:relative; overflow:hidden; aspect-ratio:4/5; background:var(--bone-mute); }
[data-theme="dark"] .ccard-media{ background:var(--ink-soft); }
.ccard-media img{
  width:100%; height:100%; object-fit:cover; object-position:50% 42%; display:block;
  filter:none;
  transition:transform .8s cubic-bezier(.2,.8,.2,1);
}
/* no headshot yet — a monogram plate rather than a broken frame */
/* the markup supplies the initials — no second mark on top of them */
.ccard-body{
  padding:clamp(.95rem,1.6vw,1.4rem); display:flex; flex-direction:column;
  gap:.4rem; flex:1;
}
.ccard-name{ font-size:clamp(1.05rem,1.6vw,1.35rem); line-height:1.05; }
.ccard-role{
  font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; font-weight:600;
  color:var(--acc-c);
}
.ccard-note{ font-size:.88rem; line-height:1.55; opacity:.74; flex:1; }
.ccard-belt{ display:block; margin-top:auto; padding-top:.5rem; }
.ccard-belt b{ display:flex; gap:4px; width:64px; }
.ccard-belt i{ display:block; height:5px; flex:1; background:currentColor; opacity:.22; }
.ccard--black .ccard-belt b{ color:var(--belt-black); }
[data-theme="dark"] .ccard--black .ccard-belt b{ color:var(--bone); }
.ccard--blue   .ccard-belt b{ color:var(--belt-blue); }
.ccard--purple .ccard-belt b{ color:var(--belt-purple); }
.ccard--black .ccard-belt i,
.ccard--blue  .ccard-belt i,
.ccard--purple .ccard-belt i{ opacity:1; }
/* the spine: a belt-coloured edge identifying rank at a glance */
.ccard-spine{
  position:absolute; left:0; top:0; bottom:0; width:4px; z-index:2;
}
.ccard--black  .ccard-spine{ background:var(--belt-black); }
[data-theme="dark"] .ccard--black .ccard-spine{ background:var(--bone); }
.ccard--blue   .ccard-spine{ background:var(--belt-blue); }
.ccard--purple .ccard-spine{ background:var(--belt-purple); }
@media (hover:hover) and (pointer:fine){
  .ccard:not(.ccard--static):hover{ border-color:var(--acc-line); transform:translateY(-4px); }
  .ccard:hover .ccard-media img{ transform:scale(1.04); }
}
@media (max-width:980px){ .cteam{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:620px){ .cteam,.cteam--2up{ grid-template-columns:1fr; } }

/* — gallery: an asymmetric mosaic on a 12-column field ------------------ */
.gallery{
  display:grid; grid-template-columns:repeat(12,1fr);
  gap:clamp(.6rem,1.2vw,1.1rem);
}
.gallery figure{ position:relative; overflow:hidden; }
.gallery img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:none;
  transition:filter .55s ease, transform .8s cubic-bezier(.2,.8,.2,1);
}
.gallery figcaption{
  position:absolute; left:0; bottom:0; padding:.4rem .65rem;
  background:var(--ink); color:var(--bone);
  font-size:.6rem; letter-spacing:.15em; text-transform:uppercase; font-weight:600;
  opacity:0; transform:translateY(100%);
  transition:opacity .35s ease, transform .35s ease;
}
.gallery figure:focus-within figcaption{ opacity:1; transform:none; }
.gallery .g-4{ grid-column:span 4; aspect-ratio:1; }
.gallery .g-5{ grid-column:span 5; aspect-ratio:4/5; }
.gallery .g-6{ grid-column:span 6; aspect-ratio:3/2; }
.gallery .g-7{ grid-column:span 7; aspect-ratio:16/10; }
.gallery .g-8{ grid-column:span 8; aspect-ratio:2/1; }
@media (hover:hover) and (pointer:fine){
  .gallery figure:hover img{ transform:scale(1.04); }
  .gallery figure:hover figcaption{ opacity:1; transform:none; }
}
@media (max-width:820px){
  .gallery .g-4,.gallery .g-5{ grid-column:span 6; aspect-ratio:1; }
  .gallery .g-6,.gallery .g-7,.gallery .g-8{ grid-column:span 12; aspect-ratio:16/9; }
}
@media (max-width:480px){
  .gallery{ gap:.5rem; }
  .gallery figure{ grid-column:span 12 !important; aspect-ratio:4/3 !important; }
}

/* — FAQ ----------------------------------------------------------------- */
.faq{ border-top:1px solid var(--rule-on-light); max-width:80ch; }
[data-theme="dark"] .faq,[data-theme="black"] .faq{ border-top-color:var(--rule-on-dark); }
.faq details{ border-bottom:1px solid var(--hair-on-light); }
[data-theme="dark"] .faq details{ border-bottom-color:var(--hair-on-dark); }
.faq summary{
  list-style:none; cursor:pointer; padding:1rem 2.4rem 1rem 0; position:relative;
  font-family:var(--display); text-transform:uppercase;
  font-size:clamp(1rem,1.5vw,1.25rem); letter-spacing:.01em; line-height:1.2;
  transition:color .25s ease;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color:var(--acc-c); }
.faq summary::after{
  content:""; position:absolute; right:.4rem; top:1.35rem;
  width:13px; height:13px;
  border-right:2px solid var(--acc-c); border-bottom:2px solid var(--acc-c);
  transform:rotate(45deg); transition:transform .3s ease;
}
.faq details[open] summary::after{ transform:rotate(-135deg); }
.faq details[open] summary{ color:var(--acc-c); }
.faq-a{ padding:0 2.4rem 1.2rem 0; }
.faq-a p{ font-size:.95rem; line-height:1.62; opacity:.76; max-width:70ch; }
.faq-a p + p{ margin-top:.7rem; }

/* ==========================================================================
   REBUILT COMPONENT LAYER — C: schedule, contact, modal, footer, closing CTA
   ========================================================================== */

/* — weekly schedule (rendered by schedule.js) --------------------------- */
/* One board, seven aligned columns — not seven floating cards. Equal-height
   columns with hairline dividers read as an actual timetable; the previous
   card grid left ragged bottoms because each day holds a different number of
   classes. Markup comes from schedule.js and is unchanged. */
.sched-filters{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:clamp(1.1rem,2.2vw,1.7rem); }
.chip{
  font-family:var(--body); font-size:.68rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  padding:.6rem 1rem; border:1px solid var(--rule-on-light);
  background:transparent; color:inherit; cursor:pointer;
  transition:border-color .25s ease, color .25s ease, background .25s ease;
}
[data-theme="dark"] .chip,[data-theme="black"] .chip{ border-color:var(--rule-on-dark); }
.chip:hover{ border-color:var(--acc-c); color:var(--acc-c); }
.chip[aria-pressed="true"],.chip.on{
  background:var(--acc-deep); border-color:var(--acc-deep); color:#fff;
}
[data-theme="dark"] .chip[aria-pressed="true"],
[data-theme="black"] .chip[aria-pressed="true"]{ background:var(--acc); border-color:var(--acc); }
.chip.off{ display:none; }

.week{
  display:grid; grid-template-columns:repeat(7,minmax(0,1fr));
  align-items:stretch;
  background:var(--white);
  border:1px solid var(--bone-mute);
  border-top:3px solid transparent;
  border-image:var(--acc-grad) 1;
  border-image-width:3px 0 0 0;
  box-shadow:0 18px 44px -34px rgba(0,0,0,.5);
  overflow:hidden;
}
[data-theme="dark"] .week,[data-theme="black"] .week{
  background:rgba(255,255,255,.03); border-color:var(--rule-on-dark); box-shadow:none;
}
.day{
  display:flex; flex-direction:column; min-width:0;
  border-left:1px solid var(--bone-deep);
  padding-bottom:.5rem;
}
[data-theme="dark"] .day{ border-left-color:var(--hair-on-dark); }
.day:first-child{ border-left:0; }
.day.is-today{ background:var(--acc-wash); }
[data-theme="dark"] .day.is-today{ background:rgba(46,155,221,.10); }
.day-name{
  display:flex; align-items:center; justify-content:space-between; gap:.4rem;
  font-family:var(--display); text-transform:uppercase;
  font-size:.9rem; letter-spacing:.03em; line-height:1;
  padding:.85rem .75rem;
  border-bottom:1px solid var(--bone-mute);
  background:var(--bone);
}
[data-theme="dark"] .day-name{ background:rgba(255,255,255,.04); border-bottom-color:var(--rule-on-dark); }
.day.is-today .day-name{
  background:var(--acc-deep); color:#fff; border-bottom-color:var(--acc-deep);
}
.today-tag{
  font-family:var(--body); font-size:.5rem; font-weight:700; letter-spacing:.14em;
  padding:.2rem .38rem; background:var(--acc-cyan); color:var(--ink-deep); flex:none;
}
.day ul{ display:flex; flex-direction:column; }
.slot{
  display:grid; gap:.1rem;
  padding:.62rem .75rem;
  border-bottom:1px solid var(--bone-deep);
}
[data-theme="dark"] .slot{ border-bottom-color:var(--hair-on-dark); }
.day ul .slot:last-child{ border-bottom:0; }
.slot-time{
  font-family:var(--display); font-size:.86rem; line-height:1.1;
  color:var(--acc-deep); letter-spacing:.01em;
}
[data-theme="dark"] .slot-time{ color:var(--acc-lift); }
.day.is-today .slot-time{ color:var(--acc); }
.slot-name{ font-size:.78rem; font-weight:600; line-height:1.3; }
.slot-who{ font-size:.66rem; opacity:.55; }
.slot-tag{
  justify-self:start; margin-top:.25rem;
  font-size:.5rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  padding:.14rem .34rem;
  background:var(--acc-wash); border:1px solid var(--acc-line); color:var(--acc-c);
}
.day-rest{
  display:block; font-size:.74rem; opacity:.45; font-style:italic;
  padding:.75rem;
}
.sched-note{
  margin-top:1.1rem; font-size:.8rem; opacity:.66; max-width:70ch;
  padding-left:.9rem; border-left:3px solid var(--acc-c);
}

/* — live schedule embed (GymDesk widget) -------------------------------- */
/* widgets.js finds .gymdesk-schedule, drops an iframe in it and drives that
   iframe's height by postMessage, so we own the frame and nothing inside it.
   Same treatment as .book-cal-frame: white panel, gradient edge, and a held
   height so the page does not jump when the third party finally paints. */
.sched-live{
  position:relative; min-height:460px;
  background:var(--white);
  border:1px solid var(--bone-mute);
  box-shadow:0 18px 44px -34px rgba(0,0,0,.5);
  padding:clamp(.4rem,1vw,.8rem);
}
.sched-live::before{
  content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:var(--acc-grad); z-index:2;
}
.sched-live-loading{
  position:absolute; inset:0; z-index:0; display:grid; place-items:center;
  font-size:.8rem; letter-spacing:.16em; text-transform:uppercase;
  font-weight:600; opacity:.5;
}
/* the iframe is opaque and sits above the notice; :has() retires it outright
   on browsers that have it */
.sched-live .gymdesk-schedule{ position:relative; z-index:1; }
.sched-live:has(.gymdesk-schedule iframe) .sched-live-loading{ display:none; }
.sched-live iframe{ display:block; width:100%; border:0; }
.sched-live-alt{
  position:relative; z-index:1; margin:1rem .4rem; font-size:.84rem; opacity:.75;
  padding-left:.9rem; border-left:3px solid var(--acc-c);
}
.sched-live-alt a{ border-bottom:1px solid var(--acc-line); }
[data-theme="dark"] .sched-live,[data-theme="black"] .sched-live{
  background:rgba(255,255,255,.03); border-color:var(--rule-on-dark); box-shadow:none;
}
@media (max-width:720px){
  .sched-live{ padding:.3rem; }
}

/* tablet: two rows of columns, still aligned and edge-to-edge */
@media (max-width:1100px){
  .week{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .day:nth-child(4n+1){ border-left:0; }
  .day:nth-child(n+5){ border-top:1px solid var(--bone-deep); }
  [data-theme="dark"] .day:nth-child(n+5){ border-top-color:var(--hair-on-dark); }
}
@media (max-width:720px){
  .week{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .day:nth-child(2n+1){ border-left:0; }
  .day:nth-child(n+3){ border-top:1px solid var(--bone-deep); }
}
@media (max-width:460px){
  .week{ grid-template-columns:1fr; }
  .day{ border-left:0; }
  .day + .day{ border-top:1px solid var(--bone-deep); }
  .day-name{ font-size:1.05rem; }
}

/* — contact / trial form ------------------------------------------------ */
.form-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:.9rem 1rem; }
.field{ display:grid; gap:.35rem; min-width:0; }
.field.full{ grid-column:1/-1; }
.field label{
  font-size:.66rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  opacity:.72;
}
.req{ color:var(--acc-c); margin-left:.2rem; }
/* the counterpart to .req — says outright that a field can be skipped,
   which is faster to read than noticing the absence of an asterisk */
.opt{
  margin-left:.35rem; font-size:.52rem; letter-spacing:.12em;
  padding:.14rem .34rem; opacity:.85; font-weight:700;
  background:var(--acc-wash); border:1px solid var(--acc-line); color:var(--acc-c);
}
.modal-body .opt,.contact-form .opt{
  background:rgba(46,155,221,.14); border-color:var(--acc-line); color:var(--acc-lift);
}
.field input,.field select,.field textarea{
  width:100%; padding:.72rem .8rem;
  background:transparent; color:inherit;
  border:1px solid var(--rule-on-light); border-radius:0;
  font-family:var(--body); font-size:.95rem;
  transition:border-color .22s ease, box-shadow .22s ease;
}
[data-theme="dark"] .field input,[data-theme="dark"] .field select,
[data-theme="black"] .field input,[data-theme="black"] .field select,
.modal .field input,.modal .field select{ border-color:var(--rule-on-dark); }
.field select{ appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 18px) 52%, calc(100% - 13px) 52%;
  background-size:5px 5px,5px 5px; background-repeat:no-repeat;
  padding-right:2.2rem;
}
.field option{ background:var(--ink); color:var(--bone); }
.field input:focus,.field select:focus{
  outline:none; border-color:var(--acc-c);
  box-shadow:0 0 0 2px var(--acc-wash);
}
.field.has-err input,.field.has-err select{ border-color:var(--err); }
.err{ font-size:.7rem; color:var(--err); min-height:0; display:none; }
.field.has-err .err{ display:block; }
/* Honey trap. Kept in the DOM and submittable (so a bot fills it) but out
   of reach of people: off-canvas, zero-size, not focusable, not announced.
   Never use display:none — many bots skip fields that are display:none. */
.hp{
  position:absolute !important; left:-9999px !important; top:auto !important;
  width:1px !important; height:1px !important; overflow:hidden !important;
  opacity:0 !important; pointer-events:none !important;
}
.hp input,.hp label{ pointer-events:none; }
.form-status{
  margin-top:.9rem; font-size:.84rem; padding:.7rem .9rem;
  border-left:3px solid var(--acc-c); background:var(--acc-wash);
  display:none;
}
.form-status.show{ display:block; }
.form-foot{
  margin-top:1.1rem; display:flex; flex-wrap:wrap; gap:1rem;
  align-items:center; justify-content:space-between;
}
.fineprint{ font-size:.72rem; opacity:.56; max-width:44ch; line-height:1.5; }

/* — SMS consent checkboxes --------------------------------------------- */
/* Two separate opt-ins, transactional and marketing, because the FCC's
   one-to-one rule wants each purpose consented to on its own. Both are
   unchecked and neither is required: consent cannot be a condition of
   service, so nothing here blocks the submit. The native input stays in the
   DOM and focusable — only its paint is replaced. */
.consent-group{ display:grid; gap:.6rem; margin-top:.2rem; }
.consent-h{
  display:flex; align-items:center; gap:.5rem;
  font-size:.6rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  opacity:.72;
}
.consent-opt{
  font-size:.5rem; letter-spacing:.12em; padding:.16rem .4rem;
  background:var(--acc-wash); border:1px solid var(--acc-line); color:var(--acc-c);
  opacity:1;
}
.consent{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:.6rem;
  align-items:start; cursor:pointer;
}
.consent input{
  position:absolute; width:1px; height:1px; opacity:0;
  margin:0; pointer-events:none;
}
.consent-box{
  width:16px; height:16px; margin-top:.2rem; flex:none; position:relative;
  border:1px solid var(--rule-on-light); background:var(--white);
  transition:background .2s ease, border-color .2s ease;
}
.consent:hover .consent-box{ border-color:var(--acc-c); }
.consent input:checked + .consent-box{ background:var(--acc-deep); border-color:var(--acc-deep); }
.consent input:checked + .consent-box::after{
  content:""; position:absolute; left:4px; top:1px;
  width:5px; height:9px; border:solid #fff; border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
.consent input:focus-visible + .consent-box{ outline:2px solid var(--acc-c); outline-offset:2px; }
/* .field label sets uppercase + wide tracking for the short field names.
   A consent disclosure has to be read, not scanned, so it opts out of both —
   set-in-caps legal text is measurably harder to read and this is the wording
   someone is agreeing to. */
.consent-text{
  font-size:.75rem; line-height:1.55; opacity:.8;
  text-transform:none; letter-spacing:0; font-weight:400;
}
.consent-note{
  font-size:.7rem; line-height:1.5; opacity:.6; max-width:54ch;
  text-transform:none; letter-spacing:0;
}

/* the contact page form sits on an ink panel, not a white one */
.contact-form .consent-box{
  border-color:var(--rule-on-dark); background:rgba(255,255,255,.08);
}
.contact-form .consent input:checked + .consent-box{
  background:var(--acc); border-color:var(--acc);
}
.contact-form .consent:hover .consent-box{ border-color:var(--acc-lift); }
.contact-form .consent-opt{ border-color:var(--acc-line); color:var(--acc-lift); background:rgba(46,155,221,.12); }
.fineprint a{ color:var(--acc-c); text-decoration:underline; text-underline-offset:2px; }
/* Phone layout. Collapsing all five fields to one column made the panel
   1168px tall in an 844px viewport — a third of the form below the fold
   before anyone has typed anything. First and last name are short enough to
   share a row at this width; everything else keeps the full measure, and the
   rhythm tightens rather than the legal text shrinking. */
/* Phone: the aside is a pitch, and the pitch already happened on the page
   behind this. It collapses to a title bar — which also keeps the h2 the
   dialog is labelled by, so the accessible name survives. */
@media (max-width:760px){
  .modal-panel{ max-height:min(94svh,860px); }
  .modal-aside{ padding:.85rem 1.1rem; gap:.3rem; }
  .modal-aside .eyebrow,
  .modal-aside .modal-points,
  .modal-aside .modal-call{ display:none; }
  .modal-aside h2{ font-size:1.05rem; line-height:1.1; }
  .modal-body{ padding:1.1rem 1.1rem 1.3rem; }
}
@media (max-width:560px){
  .form-grid{ gap:.65rem .7rem; }
  .form-grid > .field{ grid-column:1/-1; }
  .form-grid > .field:nth-child(1),
  .form-grid > .field:nth-child(2){ grid-column:auto; }
  .field{ gap:.28rem; }
  .field label{ font-size:.6rem; letter-spacing:.12em; }
  .field input,.field select{ padding-block:.62rem; }
  /* the aside above already pitches the free trial; this repeats it */
  .modal-intro{ display:none; }
  .consent-group{ gap:.5rem; }
  .consent-text{ font-size:.72rem; line-height:1.45; }
  .consent-note{ font-size:.66rem; }
  .form-foot{ gap:.5rem; }
}

/* — map + socials ------------------------------------------------------- */
.map-frame{
  position:relative; aspect-ratio:16/10; overflow:hidden;
  border:1px solid var(--rule-on-light);
}
[data-theme="dark"] .map-frame{ border-color:var(--rule-on-dark); }
.map-frame iframe{ width:100%; height:100%; border:0; display:block; filter:none; }
.socials{ display:flex; gap:.5rem; flex-wrap:wrap; margin-top:1rem; }
.socials a{
  font-size:.64rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  padding:.5rem .8rem; border:1px solid var(--rule-on-dark);
  transition:border-color .25s ease,color .25s ease;
}
.socials a:hover{ border-color:var(--acc-lift); color:var(--acc-lift); }

/* — trial modal --------------------------------------------------------- */
/* ── Trial modal ──────────────────────────────────────────────────────
   Two columns on a wide screen: a rail carrying the offer and the reasons
   to say yes, and the form beside it. Wider but much SHORTER than a single
   stacked column, which matters — on a 1280x570 laptop the old one-column
   panel scrolled inside itself. Collapses to one column below 860px.
   ------------------------------------------------------------------- */
/* Above .site-head (8000) and .mobile-nav (7900) — at z-index 200 the fixed
   header painted straight over the top of the dialog. Stays under the grain
   overlay at 9000, which is decorative and pointer-events:none, and under the
   skip link at 10000. */
.modal{
  position:fixed; inset:0; z-index:8500; display:none;
  align-items:center; justify-content:center; padding:clamp(.75rem,3vw,2rem);
}
.modal.is-open{ display:flex; }
.modal-veil{
  position:absolute; inset:0; background:rgba(0,0,0,.82);
  backdrop-filter:blur(4px); animation:veil .3s ease both;
}
@keyframes veil{ from{ opacity:0 } to{ opacity:1 } }

.modal-panel{
  position:relative; z-index:1;
  width:min(940px,100%);
  /* svh, not vh: on a phone vh is measured against the *largest* viewport, so
     a 92vh panel is taller than the screen while the browser toolbars are up
     and the submit button sits under them. */
  max-height:min(92vh,860px);
  max-height:min(92svh,860px);
  overflow-y:auto; overscroll-behavior:contain;
  display:grid; grid-template-columns:minmax(0,.72fr) minmax(0,1fr);
  background:var(--ink-deep); color:var(--bone);
  border:1px solid var(--rule-on-dark);
  animation:panelUp .38s cubic-bezier(.2,.8,.2,1) both;
  box-shadow:0 40px 90px -40px rgba(0,0,0,.8);
}
.modal-panel::before{
  content:""; position:absolute; left:0; right:0; top:0; height:4px;
  background:var(--acc-grad); z-index:3;
}
@keyframes panelUp{ from{ opacity:0; transform:translateY(18px) } to{ opacity:1; transform:none } }

/* ── the rail ── */
.modal-aside{
  position:relative; overflow:hidden;
  padding:clamp(1.5rem,3vw,2.4rem) clamp(1.3rem,2.4vw,2rem);
  background:var(--acc-deep);
  display:flex; flex-direction:column; gap:1rem;
}
.modal-aside::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(112deg,
    transparent 30%, rgba(11,63,212,.55) 46%, rgba(0,103,170,.4) 60%,
    rgba(16,227,220,.16) 70%, transparent 84%);
}
.modal-aside > *{ position:relative; z-index:1; }
.modal-aside .eyebrow{ color:var(--acc-cyan); opacity:.95; }
.modal-aside .eyebrow::before{ background:var(--acc-cyan); }
.modal-aside h2{
  font-size:clamp(1.5rem,2.6vw,2.2rem); line-height:.98; margin:0;
  text-wrap:balance;
}
.modal-points{ display:grid; gap:.6rem; margin-top:.3rem; }
.modal-points li{
  position:relative; padding-left:1.5rem;
  font-size:.88rem; line-height:1.45; opacity:.9;
}
.modal-points li::before{
  content:""; position:absolute; left:0; top:.42em;
  width:9px; height:9px; border:2px solid var(--acc-cyan); border-radius:50%;
}
.modal-call{
  margin-top:auto; padding-top:1rem;
  border-top:1px solid rgba(255,255,255,.2);
  font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  font-weight:600; opacity:.75;
  display:flex; flex-direction:column; gap:.3rem;
}
.modal-call a{
  font-family:var(--display); font-size:1.25rem; letter-spacing:.02em;
  text-transform:none; color:var(--acc-cyan); opacity:1;
}

/* ── the form side ── */
.modal-body{
  padding:clamp(1.5rem,3vw,2.4rem) clamp(1.3rem,2.4vw,2rem);
  min-width:0;
}
.modal-intro{
  font-size:.9rem; line-height:1.55; opacity:.7;
  margin-bottom:1.2rem; max-width:48ch;
}
.modal-body .field label{ opacity:.78; }
.modal-body .field input,
.modal-body .field select{
  background-color:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.2);
  color:var(--bone);
}
.modal-body .field input:focus,
.modal-body .field select:focus{
  border-color:var(--acc-cyan);
  box-shadow:0 0 0 2px rgba(16,227,220,.18);
  background-color:rgba(255,255,255,.08);
}
.modal-body .field input::placeholder{ color:rgba(244,241,234,.35); }
.modal-body .req{ color:var(--acc-cyan); }
.modal-body .form-status{
  border-left-color:var(--acc-cyan);
  background:rgba(16,227,220,.10);
}
.modal-body .btn{ --btn-bg:var(--bone); --btn-fg:var(--ink); }
.modal-body .btn::before{ background:var(--acc-cyan); }
.modal-body .btn:hover,.modal-body .btn:focus-visible{ color:var(--ink-deep); }
.modal-body .fineprint{ opacity:.55; }
.modal-body .fineprint a{ color:var(--acc-cyan); opacity:1; }

.modal-close{
  position:absolute; right:.6rem; top:.6rem; z-index:4;
  width:36px; height:36px;
  background:rgba(0,0,0,.4); border:1px solid rgba(255,255,255,.28); color:var(--bone);
  cursor:pointer; font-size:1.15rem; line-height:1;
  transition:border-color .25s ease,color .25s ease,background .25s ease;
}
.modal-close:hover{ border-color:var(--acc-cyan); color:var(--acc-cyan); background:rgba(0,0,0,.7); }

@media (max-width:860px){
  .modal-panel{ grid-template-columns:1fr; }
  /* the rail becomes a compact header — drop the reasons list so the
     fields stay above the fold on a phone */
  .modal-aside{ gap:.7rem; padding-bottom:clamp(1.1rem,3vw,1.5rem); }
  .modal-points,.modal-call{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .modal-veil,.modal-panel{ animation:none; }
}

/* — footer -------------------------------------------------------------- */
.site-foot{ background:var(--ink-deep); color:var(--bone); position:relative; }
.site-foot::before{
  content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:var(--acc-grad);
}
.foot-top{
  display:grid; grid-template-columns:1.3fr repeat(3,1fr);
  gap:clamp(1.4rem,3vw,3rem);
  padding:clamp(2.4rem,4.5vw,4rem) 0 clamp(1.8rem,3vw,2.6rem);
}
.foot-brand img{ width:auto; height:clamp(62px,6vw,78px); margin-bottom:1.1rem; }
.foot-brand p{ font-size:.86rem; line-height:1.6; opacity:.62; max-width:38ch; }
.foot-col h3{
  font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
  font-family:var(--body); font-weight:700; color:var(--acc-lift);
  margin-bottom:.9rem;
}
.foot-col ul{ display:grid; gap:.5rem; }
.foot-col a{ font-size:.88rem; opacity:.7; transition:opacity .2s ease,color .2s ease; }
.foot-col a:hover{ opacity:1; color:var(--acc-lift); }
.foot-col address{ font-style:normal; font-size:.88rem; line-height:1.7; opacity:.7; }
.foot-col address a:hover{ color:var(--acc-lift); opacity:1; }
.foot-bottom{
  border-top:1px solid var(--hair-on-dark);
  padding:1.1rem 0 1.6rem;
  display:flex; flex-wrap:wrap; gap:.8rem 1.6rem;
  align-items:center; justify-content:space-between;
}
.foot-bottom p{ font-size:.74rem; opacity:.5; }
.foot-bottom ul{ display:flex; flex-wrap:wrap; gap:1.1rem; }
.foot-bottom a{ font-size:.74rem; opacity:.5; }
.foot-bottom a:hover{ opacity:.9; color:var(--acc-lift); }
.strip-foot{
  display:flex; flex-wrap:wrap; gap:.6rem 1.4rem; align-items:center;
  font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; opacity:.6;
  margin-top:1.2rem;
}
@media (max-width:900px){ .foot-top{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .foot-top{ grid-template-columns:1fr; } }

/* — closing CTA strip --------------------------------------------------- */
.cta-strip{ position:relative; overflow:hidden; background:var(--ink-deep); color:var(--bone); }
/* The photograph behind this band was removed; the blue wash that sat over it
   is what gave the strip its depth, so it moves onto the band itself rather
   than being lost with the .cta-bg wrapper it used to live on. */
.cta-strip::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(100deg,var(--ink-deep) 22%,rgba(0,2,133,.55) 58%,transparent 100%);
}
.cta-glow{
  position:absolute; z-index:0; pointer-events:none;
  width:60vw; height:60vw; max-width:760px; max-height:760px;
  right:-14%; top:-28%; border-radius:50%;
  background:radial-gradient(circle,rgba(16,227,220,.20),rgba(0,103,170,.10) 45%,transparent 70%);
  filter:blur(6px);
}
.cta-word{
  position:absolute; z-index:0; left:-.04em; bottom:-.22em;
  font-family:var(--display); text-transform:uppercase; line-height:.72;
  font-size:clamp(6rem,20vw,18rem);
  color:transparent; -webkit-text-stroke:1.5px rgba(255,255,255,.12);
  pointer-events:none; user-select:none;
}
@supports not (-webkit-text-stroke:1px #000){ .cta-word{ display:none; } }
.cta-strip-in{
  position:relative; z-index:1;
  display:grid; grid-template-columns:minmax(0,1fr);
  gap:clamp(1.6rem,3.4vw,3.4rem); align-items:center;
  padding-block:clamp(3.2rem,5.5vw,5.5rem);
}
.cta-copy h2{ margin:.2rem 0 .9rem; max-width:22ch; }
.cta-copy p{ font-size:1.02rem; line-height:1.6; opacity:.76; max-width:52ch; }
.cta-line{
  display:block; width:clamp(70px,10vw,150px); height:3px; margin:1.1rem 0;
  background:var(--acc-grad); transform-origin:left;
}
.cta-btns,.cta-actions{
  display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.5rem;
}
.cta-trust{
  display:flex; flex-wrap:wrap; gap:.5rem 1.4rem; margin-top:1.5rem;
  font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; opacity:.6;
}
.cta-trust li{ display:flex; align-items:center; gap:.45rem; }
.cta-trust li::before{ content:""; width:5px; height:5px; background:var(--acc-cyan); flex:none; }
.cta-trust a:hover{ color:var(--acc-cyan); opacity:1; }
.cta-strip.cta-interior .cta-strip-in{ padding-block:clamp(2.6rem,4.4vw,4.2rem); }
@media (max-width:860px){
  .cta-strip-in{ grid-template-columns:1fr; }
  }

/* ==========================================================================
   THE DIAGONAL BAND — the reference motif, drawn in CSS on dark grounds
   ========================================================================== */
.bg-bands{ position:relative; isolation:isolate; overflow:hidden; }
.bg-bands::before{
  content:""; position:absolute; inset:-20% -10%; z-index:-1; pointer-events:none;
  background:
    linear-gradient(115deg, transparent 0 18%, rgba(0,2,133,.85) 18% 27%, transparent 27% 34%,
                             rgba(11,63,212,.55) 34% 41%, transparent 41% 52%,
                             rgba(0,103,170,.62) 52% 60%, transparent 60% 66%,
                             rgba(16,227,220,.45) 66% 70%, transparent 70%);
  filter:blur(28px);
  opacity:.55;
  mask-image:radial-gradient(120% 100% at 78% 0%, #000 18%, transparent 74%);
}
.bg-bands::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    repeating-linear-gradient(115deg,
      transparent 0 62px,
      rgba(255,255,255,.045) 62px 63px,
      transparent 63px 126px);
  mask-image:linear-gradient(115deg, #000, transparent 72%);
}
/* A single diagonal beam. Implemented as a background LAYER, not a pseudo,
   because these sections already spend ::before and ::after on their texture
   (.bg-spot uses both). background-image paints over the theme's
   background-color, so the two compose instead of fighting. */
.beam{ position:relative; }
.beam[data-theme="dark"],.beam[data-theme="black"]{
  background-image:linear-gradient(112deg,
    transparent 36%,
    rgba(0,2,133,.42) 46%,
    rgba(11,63,212,.26) 54%,
    rgba(0,103,170,.16) 61%,
    rgba(16,227,220,.07) 66%,
    transparent 73%);
}
.beam[data-theme="light"],.beam[data-theme="light-deep"]{
  background-image:linear-gradient(112deg,
    transparent 40%,
    rgba(0,2,133,.09) 48%,
    rgba(0,103,170,.07) 57%,
    transparent 68%);
}
@media (prefers-reduced-motion:no-preference){
  .bg-bands::before{ animation:bandDrift 22s ease-in-out infinite alternate; }
}
@keyframes bandDrift{
  from{ transform:translate3d(0,0,0) }
  to{ transform:translate3d(-3.5%,2%,0) }
}

/* ==========================================================================
   REBUILT — D: motion & scroll reveal
   Elements are only ever hidden when JavaScript is actually running
   (html.has-js, set synchronously by main.js). If the script fails to load,
   errors, or is blocked, every [data-reveal] element renders normally — no
   blank sections, ever. This guard is deliberate: two separate bugs in this
   build were caused by reveal states that never cleared.
   ========================================================================== */
.has-js [data-reveal]{
  opacity:0;
  transform:translate3d(0,22px,0);
  transition:opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1),
             clip-path .8s cubic-bezier(.2,.8,.2,1);
  will-change:opacity,transform;
}
.has-js [data-reveal="left"]{ transform:translate3d(-26px,0,0); }
.has-js [data-reveal="mask"]{
  transform:none; opacity:1;
  clip-path:inset(0 100% 0 0);
}
.has-js [data-reveal="line"]{
  transform:none; opacity:1;
  clip-path:inset(0 100% 0 0);
  transition:clip-path .9s cubic-bezier(.2,.8,.2,1);
}
/* the settled state — always fully open, never a partial value */
.has-js [data-reveal].in{
  opacity:1;
  transform:none;
  clip-path:inset(0 0 0 0);
  will-change:auto;
}
/* staggered groups — main.js sets --d per element in a reveal group */
.has-js [data-reveal].in{ transition-delay:var(--d,0ms); }

@media (prefers-reduced-motion:reduce){
  .has-js [data-reveal],
  .has-js [data-reveal="mask"],
  .has-js [data-reveal="left"],
  .has-js [data-reveal="line"]{
    opacity:1 !important; transform:none !important; clip-path:none !important;
    transition:none !important;
  }
  .marquee-track{ animation:none !important; }
  .bg-bands::before{ animation:none !important; }
  .hero-media img,.hero-shot img{ animation:none !important; transform:none !important; }
  *{ scroll-behavior:auto !important; }
}

/* ==========================================================================
   REBUILT — E: header responsive breakpoints
   Below 1024px the desktop nav is replaced by the burger + full-screen
   overlay. Without this block the desktop nav stays in flow and pushes the
   page sideways on phones.
   ========================================================================== */
@media (max-width:1024px){
  .nav{ display:none; }
  .burger{ display:block; grid-column:2; }
  .head-in{ grid-template-columns:1fr auto; gap:.75rem; }
  .head-cta{ display:none; }

}
/* In this band the burger is already the only way to navigate, but the
   mastheads have not stacked yet — the photograph still runs under the header,
   and the burger lands on it. On about.html that is a black-and-white flag and
   three ink bars disappear into it; a phone held in landscape (915–932px on
   current handsets) sits squarely in this range. A plate that inverts with the
   chrome keeps the control readable over any frame, and retires the moment the
   bar has a ground of its own. Below 901px the photograph stacks under the
   header instead, so no plate is needed and none is drawn. */
@media (min-width:901px) and (max-width:1024px){
  .burger::before{
    content:""; position:absolute; inset:0; z-index:0;
    background:rgba(244,241,234,.86);
    border:1px solid rgba(10,10,10,.16);
    transition:opacity var(--chrome-t) var(--ease),
               background-color var(--chrome-t) var(--ease);
  }
  body[data-chrome="dark"] .burger::before{
    background:rgba(10,10,10,.6);
    border-color:rgba(255,255,255,.24);
  }
  body[data-scrolled] .burger::before,
  body.is-menu .burger::before{ opacity:0; }
  .burger span{ z-index:1; }
}
@media (max-width:420px){
  :root{ --brand-h:40px; }
}

/* ==========================================================================
   REBUILT — F: hero column guides, hero strip, split stacking
   ========================================================================== */
.hero-grid{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  display:grid; grid-template-columns:repeat(4,1fr);
}
.hero-grid i{ border-right:1px solid var(--hair-on-dark); }
.hero-grid i:last-child{ border-right:0; }
.hero-strip{
  position:relative; z-index:2;
  flex:0 0 100%; width:100%;
  max-width:var(--shell); margin-inline:auto;
  padding-inline:var(--gut);
}

/* Two-column splits must stack on narrow screens. Without this the grid
   stays at two tracks and the second column runs off the page. */
@media (max-width:820px){
  .split,.split.split-40,.split.split-60{ grid-template-columns:minmax(0,1fr); }
  .split > * + *{ padding-left:0; padding-top:clamp(1.2rem,3vw,1.8rem); }
  .split > * + *::before{
    left:0; right:0; top:0; bottom:auto; width:auto; height:1px;
  }
  /* the sticky offset has to go with the sticky, or it comes back the moment
     a variant re-positions this figure */
  .split figure{ position:static; top:auto; }
}
@media (max-width:860px){
  .hero-strip ul{ gap:.7rem 1.4rem; }
  .hero-strip li{ font-size:.72rem; }
  .hero-strip li b{ font-size:1.15rem; }
  .hero-grid{ grid-template-columns:repeat(2,1fr); }
}

/* ==========================================================================
   REBUILT — G: Feature panel (shared)
   A solid navy panel carries the statement, copy and numbers, optionally beside
   a tall portrait. Shared by the Home academy block and the interior intro
   sections that used to run the old .editorial newspaper layout.
   Variants: --alt puts the shot first; .feature-row--solo drops the shot.
   ========================================================================== */
.feature-row{
  display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.72fr);
  gap:clamp(.9rem,1.6vw,1.4rem);
  align-items:stretch;
  margin-bottom:clamp(.9rem,1.6vw,1.4rem);
}
.feature-panel{
  position:relative; overflow:hidden;
  background:var(--acc-deep); color:#fff;
  padding:clamp(1.6rem,3.2vw,3rem) clamp(1.4rem,2.8vw,2.6rem);
  display:flex; flex-direction:column; gap:.9rem;
}
/* the band motif, echoed at low intensity across the panel */
.feature-panel::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(112deg,
    transparent 40%, rgba(11,63,212,.55) 52%,
    rgba(0,103,170,.42) 62%, rgba(16,227,220,.18) 70%, transparent 82%);
}
.feature-panel > *{ position:relative; z-index:1; }
.feature-panel .sindex{ color:#fff; opacity:.9; margin-bottom:0; }
.feature-panel .sindex b{ color:var(--acc-cyan); }
.feature-panel .sindex::after{ background:var(--acc-cyan); opacity:.7; }
.feature-title{
  font-size:clamp(2rem,4vw,3.4rem); line-height:.96; color:#fff; margin:0;
}
.feature-title em{ font-style:normal; color:var(--acc-cyan); }
.feature-panel .prose p{
  font-size:.97rem; line-height:1.62; color:#fff; opacity:.82; max-width:52ch;
}
.feature-panel .prose p + p{ margin-top:.75rem; }
.feature-panel .tlink{
  align-self:flex-start; color:#fff; border-bottom-color:var(--acc-cyan);
}
.feature-panel .tlink:hover{ color:var(--acc-cyan); }
.feature-stats{
  /* sits directly under the copy — an auto top margin left a dead gap when
     the panel stretched to the height of the portrait beside it */
  margin:clamp(.6rem,1.4vw,1.1rem) 0 0; padding-top:clamp(1.1rem,2vw,1.6rem);
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0; border-top:1px solid rgba(255,255,255,.22);
}
.feature-stats > div{
  padding:.9rem .7rem 0 0; border-left:1px solid rgba(255,255,255,.14);
  padding-left:.7rem;
}
.feature-stats > div:first-child{ border-left:0; padding-left:0; }
.feature-stats dt{
  font-family:var(--display); font-size:clamp(1.15rem,1.9vw,1.7rem);
  line-height:1.05; color:var(--acc-cyan); letter-spacing:.02em;
}
.feature-stats dt small{
  font-family:var(--body); font-size:.34em; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; margin-left:.15em; opacity:.85;
}
.feature-stats dd{
  margin:.3rem 0 0; font-size:.62rem; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase; color:#fff; opacity:.62;
  line-height:1.35;
}
.feature-shot{ position:relative; overflow:hidden; min-height:clamp(340px,36vw,500px); }
/* absolutely positioned so the portrait's intrinsic 1289x2048 ratio cannot
   drive the row height — the copy panel decides how tall this section is */
.feature-shot img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; object-position:50% 30%; display:block;
  filter:none;
  transition:filter .55s ease, transform .8s cubic-bezier(.2,.8,.2,1);
}
.feature-shot figcaption{
  position:absolute; left:0; bottom:0; z-index:2;
  padding:.5rem .8rem; background:var(--acc-deep); color:#fff;
  font-size:.62rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
}
.feature-shot figcaption::before{
  content:""; display:inline-block; width:6px; height:6px; margin-right:.5rem;
  background:var(--acc-cyan); vertical-align:middle;
}
@media (hover:hover) and (pointer:fine){
  .feature-shot:hover img{ transform:scale(1.04); }
}
@media (max-width:900px){
  .feature-row{ grid-template-columns:1fr; }
  .feature-shot{ aspect-ratio:16/9; min-height:0; }
  .feature-shot img{ position:static; }
}
@media (max-width:620px){
  .feature-stats{ grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:.2rem; }
  .feature-stats > div:nth-child(3){ border-left:0; padding-left:0; }
  }

/* ==========================================================================
   REBUILT — H: section rhythm
   Every section's vertical space comes from the same two tokens. The one
   place that needed a different gap (the quote card straddling the seam,
   which carries its own visual weight) gets a named class, not an inline
   style, so the rhythm stays auditable.
   ========================================================================== */
.shell-pt{
  padding-top:clamp(1.75rem,3.4vw,2.75rem);
  padding-bottom:var(--sect-y);
}
/* a section that ends in a full-bleed card needs no extra floor under it */
.s-flush > .shell:first-child{ padding-top:var(--sect-y); }

/* ==========================================================================
   REBUILT — I: partner logo marquee
   A quiet strip of affiliation marks. The logos arrive in mixed formats — an
   opaque JPEG seal, a transparent PNG, a mark on its own black field — so
   each sits on a white plate rather than being edited.
   ========================================================================== */
.logo-marquee{
  margin-top:clamp(1.8rem,3.2vw,3rem);
  padding:clamp(1.2rem,2vw,1.7rem) 0;
  border-top:1px solid var(--rule-on-light);
  border-bottom:1px solid var(--rule-on-light);
  overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);
}
[data-theme="dark"] .logo-marquee,[data-theme="black"] .logo-marquee{
  border-top-color:var(--rule-on-dark); border-bottom-color:var(--rule-on-dark);
}
.logo-marquee .marquee-track{
  display:flex; align-items:center; gap:clamp(1.6rem,4vw,4rem);
  width:max-content;
  animation:marq 34s linear infinite;
}
.logo-marquee:hover .marquee-track{ animation-play-state:paused; }
.logo-item{
  display:grid; place-items:center; flex:none;
  height:clamp(84px,9vw,116px); aspect-ratio:1;
  background:#fff; padding:.6rem;
}
.logo-item img{ width:100%; height:100%; object-fit:contain; display:block; }
@media (prefers-reduced-motion:reduce){
  .logo-marquee .marquee-track{ animation:none; justify-content:center; width:100%; }
  .logo-marquee{ -webkit-mask-image:none; mask-image:none; }
}

/* ==========================================================================
   REBUILT — J: House Rules
   The four rules read as a posted list on a dark board inset into the light
   section — one inversion, the same trick the veteran's quote card uses.
   Replaces the four-column grid.
   ========================================================================== */
.rulebook{
  position:relative; overflow:hidden;
  background:var(--ink-deep); color:var(--bone);
  padding:clamp(1.4rem,2.8vw,2.4rem) clamp(1.2rem,2.4vw,2.2rem);
  margin-top:clamp(1.4rem,2.6vw,2.2rem);
  box-shadow:0 30px 70px -40px rgba(0,0,0,.6);
}
/* the band motif, low and wide across the board */
.rulebook::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(112deg,
    transparent 34%, rgba(0,2,133,.5) 46%, rgba(11,63,212,.3) 56%,
    rgba(0,103,170,.2) 64%, rgba(16,227,220,.09) 70%, transparent 80%);
}
/* corner brackets — the board reads as a mounted plate */
.rulebook::after{
  content:""; position:absolute; left:10px; right:10px; top:10px; bottom:10px;
  border:1px solid rgba(255,255,255,.10); pointer-events:none;
}
.rulebook > *{ position:relative; z-index:1; }
.rulebook-tag{
  display:inline-block; margin-bottom:.9rem;
  font-size:.6rem; font-weight:700; letter-spacing:.24em; text-transform:uppercase;
  color:var(--acc-cyan); opacity:.9;
}
.rulelist{ display:grid; list-style:none; }
.rulerow{
  display:grid;
  grid-template-columns:auto minmax(140px,.62fr) minmax(0,1.5fr);
  gap:clamp(.9rem,2.2vw,2.2rem);
  align-items:start;
  padding:clamp(1rem,2vw,1.5rem) 0;
  border-top:1px solid rgba(255,255,255,.12);
  transition:background .35s ease;
}
.rulerow:first-child{ border-top:0; }
@media (hover:hover) and (pointer:fine){
  .rulerow:hover{ background:rgba(46,155,221,.07); }
}
.rule-n{
  font-family:var(--display); line-height:.8;
  font-size:clamp(2.1rem,4vw,3.4rem);
  color:transparent; -webkit-text-stroke:1.5px var(--acc-lift);
  min-width:2.2ch;
}
@supports not (-webkit-text-stroke:1px #000){ .rule-n{ color:var(--acc-lift); } }
.rule-head h3{
  font-size:clamp(1.15rem,1.9vw,1.55rem); line-height:1; margin-bottom:.6rem;
}
.rule-head .vstripes{ display:flex; gap:4px; max-width:120px; }
.rule-head .vstripes i{ display:block; width:100%; height:3px; background:var(--acc-lift); }
.rule-head .vstripes i.dim{ background:var(--bone); opacity:.2; }
.rule-pts{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.4rem clamp(1rem,2vw,1.8rem);
  list-style:none;
}
.rule-pts li{
  font-size:.89rem; line-height:1.5; opacity:.78;
  padding-left:.95rem; position:relative;
}
.rule-pts li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:5px; height:1px; background:var(--acc-cyan); opacity:.9;
}
@media (max-width:860px){
  .rulerow{ grid-template-columns:auto minmax(0,1fr); }
  .rule-pts{ grid-column:1/-1; }
}
@media (max-width:520px){
  .rule-pts{ grid-template-columns:1fr; }
}

/* ==========================================================================
   REBUILT — K: feature panel variants
   The Home composition is panel-left / portrait-right. Interior pages reuse
   the same panel but vary the arrangement so no two pages read identically.
   ========================================================================== */
/* portrait first, panel second */
.feature-row--alt{ grid-template-columns:minmax(0,.72fr) minmax(0,1.08fr); }
.feature-row--alt .feature-shot{ order:-1; }
/* no portrait — the panel carries the section on its own */
.feature-row--solo{ grid-template-columns:minmax(0,1fr); }
.feature-row--solo .feature-panel{
  padding:clamp(1.6rem,3.4vw,3.2rem) clamp(1.4rem,3vw,3rem);
}
/* a wider measure reads better when nothing sits beside the copy */
.feature-row--solo .prose{
  columns:2; column-gap:clamp(1.6rem,3.2vw,3rem);
  column-rule:1px solid rgba(255,255,255,.16);
}
.feature-row--solo .prose p{ break-inside:avoid; max-width:none; }
.feature-row--solo .feature-title{ max-width:20ch; }
.feature-row--solo .tlink{ margin-top:.4rem; }
@media (max-width:820px){
  .feature-row--alt{ grid-template-columns:1fr; }
  .feature-row--alt .feature-shot{ order:0; }
  .feature-row--solo .prose{ columns:1; column-rule:0; }
}

/* ==========================================================================
   REBUILT — L: rules-board variants
   The board is the shared pattern for "a short list of named things, each
   with its own bullet points" — house rules, class formats, benefits.
   ========================================================================== */
/* no belt meters: the index cell carries a duration or plain number */
.rulebook--plain .rule-head h3{ margin-bottom:0; }
.rule-n small{
  font-family:var(--body); font-size:.3em; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  margin-left:.15em; vertical-align:.9em; -webkit-text-stroke:0;
  color:var(--acc-lift);
}
/* on an already-dark section a solid ink board disappears — raise a
   translucent surface instead, same rows, same accents */
.rulebook--inset{
  background:rgba(255,255,255,.04);
  border:1px solid var(--rule-on-dark);
  box-shadow:none;
}
.rulebook--inset::before{ opacity:.55; }
.rulebook--inset::after{ border-color:rgba(255,255,255,.07); }

/* ==========================================================================
   REBUILT — M: shared spacing utilities + heading rhythm
   These replace the one-off inline margins that had drifted across pages, so
   the vertical rhythm is defined in one place and can be audited.
   ========================================================================== */
.mt-sm{ margin-top:clamp(1.1rem,2vw,1.5rem); }
.mt-md{ margin-top:clamp(1.75rem,3.4vw,2.75rem); }
.mt-lg{ margin-top:clamp(2.2rem,4.2vw,3.4rem); }

/* heading -> body and body -> action spacing, set once instead of per page */
h2 + .lede,
h2 + .prose,
.feature-title + .prose,
.head-copy h2 + .lede{ margin-top:clamp(.85rem,1.5vw,1.15rem); }
.lede + .prose,
.prose + .tlink,
.lede + .tlink{ margin-top:clamp(1.2rem,2.2vw,1.75rem); }
.sindex + h2{ margin-top:0; }
.quote-card{ margin-inline:0; }

/* ==========================================================================
   REBUILT — N: .split--fit
   A fixed-ratio figure beside a short copy column dictates the row height and
   opens dead space under the copy. With --fit the copy sets the height and
   the photograph fills whatever that is.
   ========================================================================== */
.split--fit{ align-items:stretch; }
.split--fit > figure{
  position:relative; aspect-ratio:auto;
  min-height:clamp(240px,26vw,360px);
  overflow:hidden;
}
.split--fit > figure img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; object-position:50% 42%;
}
@media (max-width:820px){
  /* top:auto is the whole fix. `.split figure` is sticky on a wide screen with
     top:calc(var(--head-h) + …); the stacking rule drops it to position:static
     but never clears that offset, and `.split--fit > figure` then puts the
     figure back to position:relative — where an 80px `top` is live again. The
     figure dropped 80px out of its grid row and the copy below printed over
     the photograph. */
  .split--fit > figure{ min-height:0; aspect-ratio:16/10; top:auto; }
  .split--fit > figure img{ position:static; }
}

/* Per-image crop anchors. object-position defaults suit centred subjects; a
   few photographs carry their subject high or low in frame (measured by edge
   density, not guessed). */
.pos-low  img,img.pos-low { object-position:50% 62% !important; }
.pos-high img,img.pos-high{ object-position:50% 26% !important; }

/* ==========================================================================
   REBUILT — O: contact section
   Form on the left as a solid navy panel (the same surface language as the
   feature panels and the rules board), contact details on the right as a
   readable stack. Replaces the split whose narrow right column wrapped the
   address onto three lines and stretched the mat hours down the page.
   The form's fields, validation and submit path are shared with the trial
   modal via wireForm() in main.js — no duplicated logic.
   ========================================================================== */
.contact-grid{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.72fr);
  gap:clamp(1rem,2vw,1.6rem);
  align-items:start;
}
/* with the form gone the details are the only child, so they take the whole
   width — and the rows go two-up rather than stretching one address across
   a full-width measure */
.contact-grid--solo{ grid-template-columns:1fr; }
@media (min-width:760px){
  .contact-grid--solo .nap{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .contact-grid--solo .nap > div:last-child{ grid-column:1/-1; }
}

/* ── the form panel ─────────────────────────────────────────────────── */
.contact-form{
  position:relative; overflow:hidden;
  background:var(--ink-deep); color:var(--bone);
  padding:clamp(1.5rem,3vw,2.6rem) clamp(1.3rem,2.6vw,2.2rem);
  box-shadow:0 30px 70px -44px rgba(0,0,0,.6);
}
.contact-form::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(112deg,
    transparent 36%, rgba(0,2,133,.5) 47%, rgba(11,63,212,.3) 57%,
    rgba(0,103,170,.2) 65%, rgba(16,227,220,.08) 71%, transparent 82%);
}
.contact-form > *{ position:relative; z-index:1; }
.contact-form-h{
  font-size:clamp(1.3rem,2.2vw,1.9rem); line-height:1; margin:.55rem 0 .5rem;
}
.contact-form-note{
  font-size:.88rem; line-height:1.55; opacity:.72; margin-bottom:1.3rem; max-width:46ch;
}
.contact-form .field label{ color:var(--bone); opacity:.8; }
/* background-COLOR, not the shorthand: the shorthand wipes the select's
   arrow, which is drawn with background-image on .field select */
.contact-form .field input,
.contact-form .field select{
  background-color:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.22);
  color:var(--bone);
}
.contact-form .field input::placeholder{ color:rgba(244,241,234,.4); }
.contact-form .field input:focus,
.contact-form .field select:focus{
  border-color:var(--acc-cyan);
  box-shadow:0 0 0 2px rgba(16,227,220,.18);
  background-color:rgba(255,255,255,.08);
}
.contact-form .req{ color:var(--acc-cyan); }
.opt{
  font-weight:600; letter-spacing:.1em; opacity:.45; margin-left:.35rem;
}
.contact-form .field.has-err input,
.contact-form .field.has-err select{ border-color:var(--err); }
.contact-form .form-status{
  border-left-color:var(--acc-cyan);
  background:rgba(16,227,220,.10);
  color:var(--bone);
}
.contact-form .fineprint{ color:var(--bone); opacity:.6; }
.contact-form .fineprint a{ color:var(--acc-cyan); opacity:1; }
/* the button sits on ink, so it must be the light-on-dark variant */
.contact-form .btn{ --btn-bg:var(--bone); --btn-fg:var(--ink); }
.contact-form .btn::before{ background:var(--acc-cyan); }
.contact-form .btn:hover,.contact-form .btn:focus-visible{ color:var(--ink-deep); }

/* ── the details stack ──────────────────────────────────────────────── */
.contact-aside{
  border-top:3px solid transparent;
  border-image:var(--acc-grad) 1;
  border-image-width:3px 0 0 0;
  background:linear-gradient(180deg,var(--acc-wash),transparent 55%);
}
.nap{ display:grid; }
.nap > div{
  padding:clamp(.9rem,1.7vw,1.2rem) clamp(1rem,1.9vw,1.4rem);
  border-bottom:1px solid var(--hair-on-light);
}
[data-theme="dark"] .nap > div{ border-bottom-color:var(--hair-on-dark); }
.nap > div:last-child{ border-bottom:0; }
.nap dt{
  display:flex; align-items:center; gap:.55rem;
  font-size:.56rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  color:var(--acc-c); margin-bottom:.5rem;
}
.nap dt::after{ content:""; flex:1; height:1px; background:currentColor; opacity:.28; }
.nap dd{ margin:0; font-size:.93rem; line-height:1.6; }
.nap address{ font-style:normal; }
.nap a{ border-bottom:1px solid var(--acc-line); }
.nap a:hover{ color:var(--acc-c); border-bottom-color:currentColor; }
.nap-row{
  display:flex; justify-content:space-between; gap:1rem;
  font-size:.85rem; padding:.16rem 0;
  border-bottom:1px dotted var(--hair-on-light);
}
.nap-row:last-child{ border-bottom:0; }
.nap-row b{ font-weight:600; }
.nap-row.is-off{ opacity:.5; }
.nap-links{ display:flex; flex-wrap:wrap; gap:.5rem 1.1rem; }

@media (max-width:900px){
  .contact-grid{ grid-template-columns:1fr; }
}

/* ==========================================================================
   REBUILT — P: schedule enrichment
   Colour here is information, not decoration: every class is tinted by its
   program, and the same four colours drive the legend and the filter chips.
   Read the type from data-type, which schedule.js emits from the WEEK data,
   so adding a class to the array styles itself.
   ========================================================================== */
:root{
  --t-adults: var(--acc-deep);      /* gi        — deep ultramarine */
  --t-nogi:   var(--acc);           /* no-gi     — azure */
  --t-womens: #6C2BD9;              /* women's   — violet */
  /* teal, held down in value. At #0F9E96 this was 3.3:1 on white — fine for a
     belt spine, not for the 11-14px class times and card labels it also
     drives, which is exactly the type a phone has to carry. This clears 4.5:1
     on all four grounds of the light ladder and sits closer in weight to the
     violet beside it. */
  --t-kids:   #097069;              /* kids      — teal */
}
[data-theme="dark"],[data-theme="black"]{
  --t-adults: var(--acc-lift);
  --t-womens: #9B7BFF;
  --t-kids:   var(--acc-cyan);
}
[data-type="adults"]{ --t: var(--t-adults); }
[data-type="nogi"]  { --t: var(--t-nogi); }
[data-type="womens"]{ --t: var(--t-womens); }
[data-type="kids"]  { --t: var(--t-kids); }

/* ── at-a-glance cluster beside the heading ─────────────────────────── */
.sched-aside{ display:grid; gap:clamp(.9rem,1.8vw,1.3rem); justify-items:start; }
.sched-glance{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0; width:100%;
  border-top:3px solid transparent;
  border-image:var(--acc-grad) 1;
  border-image-width:3px 0 0 0;
}
.sched-glance > div{
  padding:.75rem .9rem .7rem 0;
  border-bottom:1px solid var(--hair-on-light);
}
.sched-glance > div:nth-child(2n){
  padding-left:.9rem; padding-right:0;
  border-left:1px solid var(--hair-on-light);
}
[data-theme="dark"] .sched-glance > div{ border-color:var(--hair-on-dark); }
.sched-glance dt{
  font-family:var(--display); font-size:clamp(1.4rem,2.4vw,2rem); line-height:1;
  color:var(--acc-c);
}
.sched-glance dd{
  margin:.3rem 0 0; font-size:.6rem; font-weight:600;
  letter-spacing:.15em; text-transform:uppercase; opacity:.6;
}

/* ── colour key ─────────────────────────────────────────────────────── */
.sched-legend{
  display:flex; flex-wrap:wrap; gap:.5rem 1.3rem;
  margin:-.4rem 0 clamp(1rem,2vw,1.5rem);
  list-style:none;
}
.sched-legend li{
  display:flex; align-items:center; gap:.5rem;
  font-size:.64rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  opacity:.72;
}
.sched-legend li::before{
  content:""; width:14px; height:3px; background:var(--t); flex:none;
}

/* ── the board, enriched ────────────────────────────────────────────── */
.day-name{ position:relative; }
.day-count{
  font-family:var(--body); font-size:.56rem; font-weight:700;
  letter-spacing:.06em; opacity:.4; flex:none;
}
.day.is-today .day-count{ opacity:.85; }
.day--rest{ background:repeating-linear-gradient(115deg,transparent 0 9px,var(--hair-on-light) 9px 10px); }
[data-theme="dark"] .day--rest{ background:repeating-linear-gradient(115deg,transparent 0 9px,var(--hair-on-dark) 9px 10px); }

/* every class row is tinted by its program */
.slot{ position:relative; padding-left:1.1rem; transition:background .28s ease; }
.slot::before{
  content:""; position:absolute; left:.55rem; top:.78rem;
  width:3px; height:calc(100% - 1.5rem); min-height:14px;
  background:var(--t,var(--acc-c)); border-radius:1px;
}
.slot .slot-time{ color:var(--t,var(--acc-deep)); }
.slot .slot-tag{
  background:color-mix(in srgb, var(--t,var(--acc-c)) 12%, transparent);
  border-color:color-mix(in srgb, var(--t,var(--acc-c)) 42%, transparent);
  color:var(--t,var(--acc-c));
}
@supports not (color: color-mix(in srgb, red 50%, blue)){
  .slot .slot-tag{ background:var(--acc-wash); border-color:var(--acc-line); color:var(--t,var(--acc-c)); }
}
@media (hover:hover) and (pointer:fine){
  .slot:hover{ background:color-mix(in srgb, var(--t,var(--acc-c)) 7%, transparent); }
  @supports not (color: color-mix(in srgb, red 50%, blue)){
    .slot:hover{ background:var(--acc-wash); }
  }
}
@media (max-width:900px){
  .sched-glance{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .sched-glance > div:nth-child(2n){ border-left:0; padding-left:0; }
  .sched-glance > div + div{ border-left:1px solid var(--hair-on-light); padding-left:.9rem; }
}
@media (max-width:520px){
  .sched-glance{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .sched-glance > div + div{ border-left:0; padding-left:0; }
  .sched-glance > div:nth-child(2n){ border-left:1px solid var(--hair-on-light); padding-left:.9rem; }
}

/* the active filter takes its program's colour, tying chips to the board */
.chip[data-filter="adults"]{ --t:var(--t-adults); }
.chip[data-filter="nogi"]  { --t:var(--t-nogi); }
.chip[data-filter="womens"]{ --t:var(--t-womens); }
.chip[data-filter="kids"]  { --t:var(--t-kids); }
.chip[data-filter]:not([data-filter="all"]):hover{ border-color:var(--t); color:var(--t); }
.chip[data-filter]:not([data-filter="all"])[aria-pressed="true"]{
  background:var(--t); border-color:var(--t); color:#fff;
}
/* headings should not orphan a single word onto the last line */
.head-copy h2,.feature-title,.cta-copy h2{ text-wrap:balance; }

/* ==========================================================================
   REBUILT — Q: crop anchors
   object-fit:cover crops from the centre by default, which slices heads off
   when a tall photograph is shown in a wide band. These anchors come from
   measuring each file's detail distribution, clamped so a crop never sits
   below mid-frame. Keyed to the filename so any use of the photo — CTA
   band, card, masthead — is framed correctly.
   ========================================================================== */
img[src$="adult-bjj-guard-drill.webp"]           { object-position:50% 42%; }
img[src$="adult-bjj-guard-training.webp"]        { object-position:50% 38%; }
img[src$="bjj-academy-team-photo.webp"]          { object-position:50% 29%; }
img[src$="bjj-black-belt-closeup.webp"]          { object-position:50% 44%; }
img[src$="bjj-competition-match.webp"]           { object-position:50% 30%; }
img[src$="bjj-competition-winner.webp"]          { object-position:50% 38%; }
img[src$="bjj-ground-grappling.webp"]            { object-position:50% 38%; }
img[src$="bjj-masters-cup-team.webp"]            { object-position:50% 36%; }
img[src$="bjj-mobility-training.webp"]           { object-position:50% 39%; }
img[src$="bjj-tournament-grappling.webp"]        { object-position:50% 37%; }
img[src$="bjj-white-gi-uniform.webp"]            { object-position:50% 45%; }
img[src$="kids-bjj-class.webp"]                  { object-position:50% 37%; }
img[src$="kids-bjj-students-north-phoenix.webp"]{ object-position:50% 40%; }
img[src$="kids-bjj-mat-talk-north-phoenix.webp"] { object-position:50% 38%; }
img[src$="womens-bjj-training.webp"]             { object-position:50% 27%; }
img[src$="albert-abril-coach-pinnacle-bjj.jpg"]  { object-position:50% 32%; }
img[src$="alef-brito-head-instructor-black-belt-pinnacle-bjj.jpg"]{ object-position:50% 38%; }
img[src$="jessica-lang-coach-pinnacle-bjj.jpg"]  { object-position:50% 39%; }
img[src$="ken-ota-black-belt-instructor-pinnacle-bjj.jpg"]{ object-position:50% 31%; }
img[src$="tony-nolan-founder-black-belt-pinnacle-bjj.jpg"]{ object-position:50% 35%; }
/* the per-image anchors above beat the component defaults; .pos-low /
   .pos-high stay available to override a specific placement */

/* ==========================================================================
   REBUILT — R: booking page (book.html)
   The final funnel step. Its whole job is to say "you are not done" and get
   a slot chosen, so the chrome is stripped to a logo and a phone number and
   the alert carries real visual weight.
   ========================================================================== */
.book-head{ position:static; background:var(--ink-deep); border-bottom:1px solid var(--rule-on-dark); }
.book-head::after{
  content:""; display:block; height:3px; background:var(--acc);
}
.book-head .head-in{ grid-template-columns:1fr auto; height:auto; padding-block:.9rem; }
.book-tel{
  grid-column:2; justify-self:end;
  display:inline-flex; align-items:baseline; gap:.5rem;
  font-family:var(--display); font-size:1.1rem; letter-spacing:.02em;
  color:var(--acc-cyan);
}
.book-tel span{
  font-family:var(--body); font-size:.6rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--bone); opacity:.6;
}

.book-hero{ padding-top:clamp(2rem,4vw,3.2rem); }

/* ── the "you are not done" alert ─────────────────────────────────────── */
.book-alert{
  position:relative; overflow:hidden;
  display:flex; align-items:flex-start; gap:clamp(.8rem,1.6vw,1.2rem);
  padding:clamp(1rem,2.2vw,1.5rem) clamp(1.1rem,2.4vw,1.7rem);
  background:var(--acc-deep); color:#fff;
  box-shadow:0 24px 60px -34px rgba(0,103,170,.9);
}
.book-alert::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(112deg,transparent 34%,rgba(11,63,212,.6) 48%,
             rgba(0,103,170,.4) 60%,rgba(16,227,220,.22) 70%,transparent 84%);
}
.book-alert > *{ position:relative; z-index:1; }
.book-alert p{ font-size:clamp(.98rem,1.5vw,1.15rem); line-height:1.5; max-width:70ch; }
.book-alert strong{ color:var(--acc-cyan); }
.book-alert-mark{
  flex:none; width:34px; height:34px; border-radius:50%;
  border:2px solid var(--acc-cyan); position:relative;
}
.book-alert-mark::before{
  content:"!"; position:absolute; inset:0;
  display:grid; place-items:center;
  font-family:var(--display); font-size:1.15rem; color:var(--acc-cyan);
}
@media (prefers-reduced-motion:no-preference){
  .book-alert-mark{ animation:bkPulse 2.4s ease-in-out infinite; }
}
@keyframes bkPulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(16,227,220,.5) }
  70%    { box-shadow:0 0 0 12px rgba(16,227,220,0) }
}

/* ── progress ─────────────────────────────────────────────────────────── */
.book-steps{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(.6rem,1.4vw,1rem);
  margin:clamp(1.2rem,2.4vw,1.9rem) 0 clamp(1.4rem,3vw,2.4rem);
  list-style:none; counter-reset:none;
}
.book-steps li{
  display:grid; grid-template-columns:auto 1fr; gap:.2rem .7rem;
  align-items:center;
  padding-top:.8rem; border-top:3px solid var(--rule-on-dark);
  opacity:.45;
}
.book-steps .is-done{ opacity:.8; border-top-color:var(--acc); }
.book-steps .is-current{ opacity:1; border-top-color:var(--acc-cyan); }
.book-step-n{
  grid-row:1 / span 2; width:30px; height:30px;
  display:grid; place-items:center;
  border:1px solid currentColor; border-radius:50%;
  font-family:var(--display); font-size:.85rem;
}
.book-steps .is-done .book-step-n{ background:var(--acc); border-color:var(--acc); color:#fff; }
.book-steps .is-current .book-step-n{ background:var(--acc-cyan); border-color:var(--acc-cyan); color:var(--ink-deep); }
.book-step-t{ font-family:var(--display); font-size:1rem; line-height:1; text-transform:uppercase; }
.book-step-s{ font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; font-weight:600; opacity:.7; }
.book-steps .is-current .book-step-s{ color:var(--acc-cyan); opacity:1; }

.book-head-row{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.68fr);
  gap:clamp(1.2rem,3vw,2.8rem); align-items:start;
}
.book-title{ font-size:clamp(2rem,4.4vw,3.6rem); line-height:.96; margin-bottom:.7rem; }
.book-title em{ font-style:normal; color:var(--acc-cyan); }
.book-facts{
  border-top:3px solid transparent;
  border-image:var(--acc-grad) 1; border-image-width:3px 0 0 0;
}
.book-facts > div{ padding:.8rem 0; border-bottom:1px solid var(--hair-on-dark); }
.book-facts > div:last-child{ border-bottom:0; }
.book-facts dt{
  font-size:.56rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  color:var(--acc-cyan); margin-bottom:.35rem;
}
.book-facts dd{ margin:0; font-size:.92rem; line-height:1.55; opacity:.85; }

/* ── the calendar ─────────────────────────────────────────────────────── */
.book-cal-sect{ padding-top:clamp(1.1rem,2.4vw,1.8rem); padding-bottom:clamp(1.4rem,3vw,2.4rem); }
/* the four-row facts table collapsed into one line that wraps on a phone */
.book-meta{
  display:flex; flex-wrap:wrap; gap:.4rem clamp(1rem,2.4vw,2rem);
  list-style:none; margin:.85rem 0 clamp(1.1rem,2.4vw,1.6rem); padding:0;
  font-size:.85rem;
}
.book-meta li{ display:flex; align-items:baseline; gap:.45rem; min-width:0; }
.book-meta b{
  font-size:.56rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--acc-deep); flex:none;
}
.book-title{ margin-top:clamp(.9rem,2vw,1.3rem); }
@media (max-width:640px){
  .book-meta{ gap:.3rem 1rem; font-size:.8rem; }
  .book-cal-frame,.book-cal-frame.is-ready,.book-cal-frame iframe{ min-height:700px; }
}
.book-cal-h{
  font-size:clamp(1.2rem,2vw,1.6rem); margin-bottom:clamp(.9rem,1.8vw,1.3rem);
  display:flex; align-items:center; gap:.7rem;
}
.book-cal-h::after{ content:""; flex:1; height:1px; background:currentColor; opacity:.16; }
.book-cal{ position:relative; }
/* The frame holds its height until the widget reports in, so the page does
   not jump when a third-party iframe finally paints.

   is-ready used to drop the floor to 0, which trusted LeadConnector's
   reported height absolutely — and when it reports early, or small, the
   frame collapsed onto a half-drawn calendar with nothing to catch it. The
   floor now stays on both the frame and the iframe itself: a taller calendar
   still grows past it, a short report can no longer clip one. */
.book-cal-frame.is-ready{ min-height:620px; }
.book-cal-frame.is-ready .book-cal-loading{ display:none; }
.book-cal-frame iframe{ min-height:620px; display:block; }
.book-cal-frame{
  position:relative; min-height:620px;
  background:var(--white);
  border:1px solid var(--bone-mute);
  box-shadow:0 26px 60px -40px rgba(0,0,0,.5);
  padding:clamp(.4rem,1vw,.8rem);
}
.book-cal-frame::before{
  content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:var(--acc-grad); z-index:1;
}
.book-cal-loading{
  position:absolute; inset:0; display:grid; place-items:center;
  font-size:.8rem; letter-spacing:.16em; text-transform:uppercase;
  font-weight:600; opacity:.5;
}
.book-cal-alt{
  margin-top:1rem; font-size:.84rem; opacity:.7;
  padding-left:.9rem; border-left:3px solid var(--acc-c);
}
.book-cal-alt a{ border-bottom:1px solid var(--acc-line); }


.book-foot .foot-bottom{ border-top:0; padding-top:1.4rem; }

@media (max-width:820px){
  .book-head-row{ grid-template-columns:1fr; }
  .book-steps{ grid-template-columns:1fr; gap:.5rem; }
  .book-steps li{ padding-top:.6rem; }
  .book-cal-frame{ min-height:620px; }
}

/* ── booking: program tabs ────────────────────────────────────────────── */
.book-tabs{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(.4rem,.9vw,.7rem);
  margin-bottom:clamp(.9rem,1.8vw,1.3rem);
}
.book-tab{
  display:grid; gap:.15rem; text-align:left;
  padding:clamp(.75rem,1.5vw,1rem) clamp(.85rem,1.7vw,1.15rem);
  background:var(--white);
  border:1px solid var(--bone-mute);
  border-top:3px solid var(--bone-mute);
  color:inherit; cursor:pointer;
  transition:border-color .25s ease, background .25s ease, transform .25s ease;
}
[data-theme="dark"] .book-tab,[data-theme="black"] .book-tab{
  background:rgba(255,255,255,.04); border-color:var(--rule-on-dark);
}
.book-tab-n{
  font-family:var(--display); text-transform:uppercase;
  font-size:clamp(1rem,1.7vw,1.3rem); line-height:1;
}
.book-tab-s{
  font-size:.58rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  opacity:.55;
}
@media (hover:hover) and (pointer:fine){
  .book-tab:hover{ border-color:var(--acc-c); transform:translateY(-2px); }
}
.book-tab:focus-visible{ outline:2px solid var(--acc-c); outline-offset:2px; }
/* the chosen program, matching the programme colours used elsewhere */
.book-tab[data-cal="kids"] { --t:var(--t-kids); }
.book-tab[data-cal="adult"]{ --t:var(--t-adults); }
.book-tab[data-cal="women"]{ --t:var(--t-womens); }
.book-tab[aria-selected="true"]{
  border-color:var(--t,var(--acc-c));
  border-top-color:var(--t,var(--acc-c));
  background:color-mix(in srgb, var(--t,var(--acc-c)) 8%, var(--white));
  box-shadow:0 14px 30px -22px var(--t,var(--acc-c));
}
@supports not (color: color-mix(in srgb, red 50%, blue)){
  .book-tab[aria-selected="true"]{ background:var(--acc-wash); }
}
.book-tab[aria-selected="true"] .book-tab-n{ color:var(--t,var(--acc-c)); }
.book-tab[aria-selected="true"] .book-tab-s{ opacity:.85; }

.book-panel:focus-visible{ outline:2px solid var(--acc-c); outline-offset:3px; }
/* [hidden] is an attribute selector with the same specificity as a class,
   so a later `display:grid` silently beats it. These panels are toggled
   with el.hidden, so the guard has to be explicit. */
.book-cal-loading[hidden],
.book-cal-prompt[hidden],
.book-panel[hidden]{ display:none !important; }
.book-cal-prompt{
  position:absolute; inset:0; display:grid; place-items:center; padding:1rem;
  text-align:center; font-size:.85rem; letter-spacing:.1em; text-transform:uppercase;
  font-weight:600; opacity:.55;
}
@media (max-width:560px){
  .book-tabs{ grid-template-columns:1fr; }
  .book-tab{ display:flex; align-items:baseline; gap:.6rem; }
}

/* ==========================================================================
   REBUILT — S: the phone pass
   Everything below is scoped to a narrow viewport or a coarse pointer. None
   of it changes the desktop composition; it exists because three things stop
   holding once the layout collapses to one column on a handset:

     1. Button rows that wrap on a laptop have nowhere left to wrap to. .btn
        carries overflow:hidden, and a flex item with a clipped overflow has
        an automatic minimum size of zero — so instead of pushing the row to
        a second line it silently shrinks and cuts its own label off.
     2. Every hit target that reads as a quiet text link on a mouse pointer
        (breadcrumbs, footer columns, .tlink) lands between 11 and 28px tall,
        well under the 44px a thumb needs.
     3. Inputs under 16px make iOS Safari zoom the whole page on focus, and
        it does not zoom back out.
   ========================================================================== */

/* — 1. button rows -------------------------------------------------------- */
/* The guard: a label that can wrap has a real min-content width, so no button
   can be squeezed narrower than its own text no matter what contains it. */
@media (max-width:560px){
  .btn{ white-space:normal; padding-inline:1.35rem; }
  .btn-sm{ padding-inline:1.1rem; }

  /* Side by side these two would each get ~165px on a 390px screen. Stacked
     and full width they read as the primary and secondary action they are,
     and the arrow keeps its own end of the button. */
  .hero-actions,.cta-btns,.cta-actions{
    flex-direction:column; align-items:stretch; gap:.7rem;
  }
  .hero-actions .btn,.cta-btns .btn,.cta-actions .btn{
    width:100%; justify-content:space-between;
  }
}

/* — 2. hit targets -------------------------------------------------------- */
/* Where the element is already a row of its own, it gets a real minimum
   height. Where it is a text link sitting in running copy, growing the box
   would break the line rhythm, so the target is grown with a transparent
   pseudo-element instead: the type does not move, the thumb gets its 44px. */
@media (pointer:coarse){
  .tlink,
  .crumbs a,
  .foot-col a,
  .foot-bottom a,
  .strip-foot a,
  .cta-trust a,
  .nap a,
  .sched-note a,
  .book-facts a,
  .book-cal-alt a,
  .contact-form .fineprint a,
  .modal-body .fineprint a,
  .brand,
  .book-tel{ position:relative; }

  .brand::after,
  .tlink::after,
  .crumbs a::after,
  .foot-col a::after,
  .foot-bottom a::after,
  .strip-foot a::after,
  .cta-trust a::after,
  .nap a::after,
  .sched-note a::after,
  .book-facts a::after,
  .book-cal-alt a::after,
  .contact-form .fineprint a::after,
  .modal-body .fineprint a::after,
  .book-tel::after{
    content:""; position:absolute; left:-6px; right:-6px;
    top:50%; height:44px; transform:translateY(-50%);
  }
  /* the logo is 40px tall in a 64px bar — the target is grown into the bar,
     not the mark, so the header rhythm is untouched */
  .brand::after{ left:0; right:0; }
  /* the columns are 8px apart in the footer, so two stacked 44px targets
     would overlap; the gap opens up to keep them separable */
  .foot-col ul{ gap:.85rem; }
  .foot-bottom ul{ gap:1.1rem 1.6rem; }

  /* rows that can simply be taller */
  .chip{ min-height:44px; display:inline-flex; align-items:center; }
  .btn-sm{ min-height:44px; }
  .modal-close{ width:44px; height:44px; }
  .socials a,
  .mnav-social a{ min-height:44px; display:inline-flex; align-items:center; }
  .faq summary{ padding-block:1.15rem; }
  .faq summary::after{ top:1.5rem; }

  .ccard-bio summary{
    display:flex; align-items:center; min-height:44px; padding-block:.45rem;
  }
  .ccard-bio summary::after,
  .ccard-bio[open] summary::after{ top:50%; margin-top:-5px; }
}

/* — 3. form fields -------------------------------------------------------- */
/* 15.2px is under the threshold, so iOS zooms in on focus and leaves the page
   scaled. 16px is the whole fix. */
@media (pointer:coarse){
  .field input,.field select,.field textarea{ font-size:16px; }
}

/* — 4. landscape phones --------------------------------------------------- */
/* Rotated, a handset has ~390px of height and the stacked hero was spending
   840 of it before the first call to action. The type scale here is driven by
   vh rather than vw, because width is the thing that is no longer scarce. */
/* max-width is part of the query on purpose: these rules assume the stacked
   layout, so the breakpoint has to match the one that stacks it. A short but
   wide desktop window keeps the two-column composition. */
@media (orientation:landscape) and (max-height:520px) and (max-width:900px){
  .hero-split .hero-in{
    padding-block:calc(var(--head-h) + .9rem) 1.1rem;
  }
  .hero-split h1{ font-size:clamp(2.2rem,11vh,3.4rem); }
  .hero-rule{ margin:.8rem 0; }
  .hero-shot{ max-height:56svh; }
  .phero{ padding-block:calc(var(--head-h) + .6rem) 1.1rem; }
  .phero-media{ height:clamp(120px,26vh,180px); }
  /* the overlay is scrollable, but the tall type made the first two items the
     whole screen */
  .mnav-list > li > a,.mnav-row > a{ font-size:1.15rem; padding-block:.45rem; }
  .mobile-nav{ padding-top:calc(var(--bar-h) + .75rem); }
}

/* — 5. hero kicker -------------------------------------------------------- */
/* Four phrases set as one running line at .34em tracking. On a laptop that is
   two lines; at 390px it was five, and it pushed the headline most of the way
   down the first screen. */
@media (max-width:560px){
  .hero-kicker{
    font-size:.6rem; letter-spacing:.2em; line-height:1.7;
    margin-bottom:.85rem;
  }
}