/* ==========================================================================
   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; }
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; }
}
@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; }
  .facts > div,.facts > div:nth-child(2n){
    padding-inline:0; border-left:0;
  }
}

/* ── 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 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; }
  .lead-media{ aspect-ratio:16/10; }
  .lead-media img{ object-position:50% 42%; }
  .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);
}
/* 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; }
.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; }
.fineprint a{ color:var(--acc-c); text-decoration:underline; text-underline-offset:2px; }
@media (max-width:560px){ .form-grid{ grid-template-columns:1fr; } }

/* — 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.
   ------------------------------------------------------------------- */
.modal{
  position:fixed; inset:0; z-index:200; 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%);
  max-height:min(92vh,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; }
}
@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;
  }
  .split figure{ position:static; }
}
@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){
  .split--fit > figure{ min-height:0; aspect-ratio:16/10; }
  .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;
}

/* ── 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 */
  --t-kids:   #0F9E96;              /* 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-instructor-coaching.webp"]    { object-position:50% 42%; }
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.6rem,3.2vw,2.6rem); }
.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 */
.book-cal-frame.is-ready{ min-height:0; }
.book-cal-frame.is-ready .book-cal-loading{ display:none; }
.book-cal-frame{
  position:relative; min-height:520px;
  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; }
}