/* ══════════════════════════════════════════════════════════════
   HART JIU JITSU — shared stylesheet
   Every page loads this. Page-specific rules live in the page.
   No !important needed anywhere now that Elementor is gone.
   ══════════════════════════════════════════════════════════════ */

:root{
  --red:#D90E16; --red-bright:#F01119; --red-soft:rgba(217,14,22,.08);
  --blue:#1A4FCC; --blue-bright:#2460E8; --blue-soft:rgba(26,79,204,.08);
  --bg:#FFFFFF; --bg-alt:#E8EAED;
  --border:rgba(0,0,0,.08); --border-med:rgba(0,0,0,.14);
  --text-dark:#0F0F14; --text-mid:#3A3A44; --text-light:#65656F;
  --ink:#0F0F14; --ink-2:#1a1a24;
  --shadow-sm:0 2px 8px rgba(0,0,0,.07);
  --shadow-md:0 4px 20px rgba(0,0,0,.10);
  --shadow-lg:0 8px 40px rgba(0,0,0,.12);
  --nav-h:70px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
/* overflow-x:clip rather than hidden. `hidden` makes the element a
   scroll container, which silently disables position:sticky inside it;
   `clip` clips without one. On html as well as body, because clipping
   body alone does not stop the layout viewport widening on mobile
   Chromium — which is why the 4px slid sideways despite body being
   clipped already. This is the safety net; the cause is fixed above at
   .intro-photo::before, and tools/check-overflow.mjs keeps both
   honest. */
html{overflow-x:clip}
body{font-family:'Barlow',sans-serif;background:var(--bg);color:var(--text-dark);
  overflow-x:clip;-webkit-font-smoothing:antialiased;padding-top:var(--nav-h)}
img{max-width:100%;display:block}
a{color:var(--blue-text)}
/* The focus ring follows the same token as the secondary button:
   the brand blue is 2.76:1 on the dark sections, and a focus
   indicator nobody can see is the same as not having one. WCAG
   wants 3:1 for non-text indicators; --blue-cta resolves to
   #4D8DFF (5.98:1) inside dark sections and stays brand blue
   elsewhere, where it already measures ~7:1 on white. */
:focus-visible{outline:2px solid var(--blue-cta);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
}

/* ── full-bleed sections ───────────────────────────────── */
.fw{width:100vw;margin-left:calc(-50vw + 50%);position:relative}

/* ── type ──────────────────────────────────────────────── */
.cond{font-family:'Barlow Condensed',sans-serif}
.section-label{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:.72rem;
  letter-spacing:.28em;text-transform:uppercase;color:var(--red-text);margin-bottom:10px;
  display:flex;align-items:center;gap:10px}
.section-label::before{content:'';display:inline-block;width:24px;height:2px;background:var(--red);flex-shrink:0}
.section-label.blue{color:var(--blue-text)}
.section-label.blue::before{background:var(--blue)}
.section-label.center{justify-content:center}
.section-title{font-family:'Barlow Condensed',sans-serif;font-weight:900;
  font-size:clamp(2.2rem,5vw,3.8rem);line-height:1;text-transform:uppercase;
  letter-spacing:.01em;color:var(--text-dark)}
.section-title span{color:var(--red-text)}
.section-title span.blue{color:var(--blue-text)}
.divider{width:48px;height:3px;background:var(--red);margin:18px 0 30px;border-radius:2px}
.divider.blue{background:var(--blue)}
.divider.center{margin-left:auto;margin-right:auto}

/* ── buttons ───────────────────────────────────────────── */
.btn-primary,.btn-secondary{display:inline-block;font-family:'Barlow Condensed',sans-serif;
  font-weight:700;font-size:1rem;letter-spacing:.12em;text-transform:uppercase;
  text-decoration:none;border-radius:3px;transition:background .22s,border-color .22s,transform .22s,box-shadow .22s}
.btn-primary{padding:16px 40px;color:#fff;background:var(--red);border:2px solid var(--red);
  box-shadow:0 4px 16px rgba(217,14,22,.35)}
.btn-primary:hover{background:var(--red-bright);border-color:var(--red-bright);
  transform:translateY(-2px);box-shadow:0 6px 24px rgba(217,14,22,.45)}
.btn-primary:link,.btn-primary:visited{color:#fff}
.btn-secondary{padding:14px 38px;color:var(--blue-cta);background:transparent;border:2px solid var(--blue-cta);
  box-shadow:0 2px 10px rgba(26,79,204,.15)}
.btn-secondary:hover{background:var(--blue);color:#fff;transform:translateY(-2px)}
.btn-secondary:link,.btn-secondary:visited{color:var(--blue-cta)}
.btn-secondary:hover:link,.btn-secondary:hover:visited{color:#fff}

/* ══ HEADER ════════════════════════════════════════════════ */
.hjj-nav{position:fixed;top:0;left:0;right:0;z-index:1000;display:flex;align-items:center;
  justify-content:center;height:var(--nav-h);background:var(--ink);
  border-bottom:1px solid rgba(255,255,255,.08);box-shadow:0 1px 20px rgba(0,0,0,.3)}
.hjj-nav-inner{max-width:1320px;width:100%;padding:0 48px;display:flex;align-items:center;
  justify-content:space-between;gap:20px}
.hjj-nav-logo{flex-shrink:0;position:relative;z-index:10}
.hjj-nav-logo img{height:90px;width:auto;position:relative;top:18px;
  filter:drop-shadow(0 0 8px rgba(135,206,250,.6)) drop-shadow(0 0 20px rgba(100,200,255,.4))}
.hjj-nav-links{display:flex;gap:22px;list-style:none;align-items:center}
.hjj-nav-links a{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:.88rem;
  letter-spacing:.1em;text-transform:uppercase;text-decoration:none;color:rgba(255,255,255,.7);
  white-space:nowrap;transition:color .18s}
.hjj-nav-links a:hover{color:#fff}
.hjj-nav-links a.active{color:var(--red-text)}
.hjj-nav-right{display:flex;align-items:center;gap:14px}
.hjj-nav-social{display:flex;align-items:center;gap:10px;
  border-right:1px solid rgba(255,255,255,.15);padding-right:14px}
.hjj-soc{display:flex;align-items:center;justify-content:center;width:28px;height:28px;
  opacity:.85;transition:transform .18s,opacity .18s;text-decoration:none}
.hjj-soc:hover{transform:translateY(-2px);opacity:1}
.hjj-soc svg{width:16px;height:16px}
.hjj-soc-fb{color:#4599FF}.hjj-soc-ig{color:#E1306C}.hjj-soc-yt{color:#FF4444}.hjj-soc-tt{color:#fff}
.hjj-nav-phone{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:.85rem;
  color:rgba(255,255,255,.7);text-decoration:none;white-space:nowrap}
.hjj-nav-phone:hover{color:#fff}
.hjj-nav-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}
.hjj-cta{display:inline-flex;align-items:center;justify-content:center;
  font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:.86rem;letter-spacing:.1em;
  text-transform:uppercase;text-decoration:none;color:#fff;background:var(--red);
  border:2px solid var(--red);border-radius:3px;padding:10px 20px;white-space:nowrap;
  box-shadow:0 3px 14px rgba(217,14,22,.38);transition:background .2s,transform .2s}
.hjj-cta:hover{background:var(--red-bright);border-color:var(--red-bright);transform:translateY(-1px)}
.hjj-cta:link,.hjj-cta:visited{color:#fff}
.hjj-hamburger{display:none;flex-direction:column;justify-content:center;align-items:center;gap:6px;
  width:44px;height:44px;background:transparent;border:none;cursor:pointer;padding:10px;flex-shrink:0}
.hjj-hamburger span{display:block;width:24px;height:3px;background:#fff;border-radius:2px;transition:all .3s}
.hjj-mobile-menu{display:none;position:fixed;inset:0;width:100vw;height:100vh;background:var(--ink);
  z-index:999999;flex-direction:column;align-items:center;justify-content:center;gap:24px;
  padding:40px 32px;overflow-y:auto}
.hjj-mobile-menu.hjj-open{display:flex}
.hjj-mobile-close{position:absolute;top:16px;right:20px;background:none;border:none;
  font-size:2.2rem;color:#fff;cursor:pointer;width:48px;height:48px;display:flex;
  align-items:center;justify-content:center}
.hjj-mobile-cta{display:inline-flex;align-items:center;justify-content:center;
  font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:1.15rem;letter-spacing:.12em;
  text-transform:uppercase;text-decoration:none;color:#fff;background:var(--red);
  border:2px solid var(--red);border-radius:4px;padding:15px 34px;
  box-shadow:0 4px 20px rgba(217,14,22,.4)}
.hjj-mobile-cta:link,.hjj-mobile-cta:visited{color:#fff}
.hjj-mobile-links{list-style:none;text-align:center;display:flex;flex-direction:column;gap:20px}
.hjj-mobile-links a{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:1.85rem;
  letter-spacing:.08em;text-transform:uppercase;text-decoration:none;color:#fff;display:block}
.hjj-mobile-links a:hover{color:var(--red-text)}
.hjj-mobile-phone{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:1.3rem;
  color:rgba(255,255,255,.8);text-decoration:none;margin-top:8px}
.hjj-mobile-social{display:flex;gap:14px;margin-top:8px}
.hjj-mobile-social a{width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.25);border-radius:8px;color:rgba(255,255,255,.8)}
.hjj-mobile-social a:hover{border-color:var(--red);color:var(--red-text)}
.hjj-mobile-social a svg{width:20px;height:20px;fill:currentColor}

/* ── page hero (interior pages) ────────────────────────── */
.page-hero{overflow:hidden;background:var(--ink);padding:70px 48px 50px;text-align:center}
.page-hero-stripe{position:absolute;bottom:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--red),var(--blue));
  box-shadow:0 0 12px rgba(217,14,22,.6),0 0 24px rgba(26,79,204,.4)}
.page-hero-eyebrow{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:.78rem;
  letter-spacing:.28em;text-transform:uppercase;color:var(--red-text);margin-bottom:12px}
.page-hero-title{font-family:'Barlow Condensed',sans-serif;font-weight:900;
  font-size:clamp(2.8rem,6vw,5rem);line-height:.92;text-transform:uppercase;color:#fff;margin-bottom:16px}
.page-hero-title .accent{color:var(--red-text)}
.page-hero-title .accent.blue{color:var(--blue-text)}
.page-hero-sub{font-size:1.05rem;line-height:1.65;color:rgba(255,255,255,.55);max-width:600px;margin:0 auto}
.page-hero-accent{position:absolute;border-radius:50%;pointer-events:none}
.page-hero-accent.c1{width:600px;height:600px;top:-150px;right:-100px;
  background:radial-gradient(circle,rgba(26,79,204,.15),transparent 70%)}
.page-hero-accent.c2{width:400px;height:400px;bottom:-80px;left:-80px;
  background:radial-gradient(circle,rgba(217,14,22,.10),transparent 70%)}
/* split hero (program pages) */
.page-hero.split{text-align:left;padding:70px 48px 60px}
.page-hero-inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;
  gap:60px;align-items:center;position:relative;z-index:1}
.page-hero.split .page-hero-eyebrow{display:flex;align-items:center;gap:12px}
.page-hero.split .page-hero-eyebrow::before{content:'';display:block;width:28px;height:2px;background:var(--red)}
.page-hero.split .page-hero-title{font-size:clamp(3rem,6vw,5.5rem);margin-bottom:20px}
.page-hero.split .page-hero-title .accent{display:block}
.page-hero.split .page-hero-sub{color:rgba(255,255,255,.6);margin:0 0 32px;max-width:500px;font-size:1.08rem}
.page-hero-ctas{display:flex;gap:14px;flex-wrap:wrap}
.hero-img-wrap{position:relative;border-radius:8px;overflow:hidden;box-shadow:0 8px 40px rgba(0,0,0,.4)}
.hero-img-wrap img{width:100%;aspect-ratio:4/3;object-fit:cover}
.hero-img-wrap::after{content:'';position:absolute;bottom:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--red),var(--blue))}

/* ── shared cards / grids ──────────────────────────────── */
.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.feature-card{background:var(--bg);border:1px solid var(--border);border-radius:6px;
  padding:32px 28px;border-top:3px solid var(--red);transition:transform .22s,box-shadow .22s}
.feature-card:nth-child(even){border-top-color:var(--blue)}
.feature-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.feature-icon{font-size:2rem;margin-bottom:16px}
.feature-title{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:1.2rem;
  text-transform:uppercase;letter-spacing:.03em;margin-bottom:10px}
.feature-desc{font-size:.95rem;line-height:1.65;color:var(--text-mid)}

/* belt badges — generated from belt colour + degree */
.coach-rank-badge,.bb-belt-badge{position:absolute;z-index:2;display:flex;align-items:stretch;
  overflow:hidden;border-radius:2px;border:1px solid rgba(0,0,0,.45);box-shadow:0 3px 14px rgba(0,0,0,.6)}
.coach-rank-badge{bottom:-10px;right:-10px;height:22px}
.bb-belt-badge{top:14px;left:14px;height:16px}
.crb-black{background:#1a1a1a;height:100%;width:90px;
  background-image:repeating-linear-gradient(90deg,transparent,transparent 3px,rgba(255,255,255,.03) 3px,rgba(255,255,255,.03) 4px)}
.crb-red{background:#C0080F;height:100%;width:40px;flex-shrink:0;display:flex;align-items:center;
  justify-content:center;gap:5px;padding:0 6px}
.crb-stripe{width:3.5px;height:100%;background:#fff;opacity:.92;flex-shrink:0}
.crb-brown{background:#5C3A1E;height:100%;width:90px}
.crb-tail{background:#1a1a1a;height:100%;width:18px;flex-shrink:0}
.crb-brown-tail{background:#5C3A1E;height:100%;width:18px;flex-shrink:0}
.crb-black-bar{background:#1a1a1a;height:100%;width:40px;flex-shrink:0}
.bb-belt-badge .crb-black{width:72px}
.bb-belt-badge .crb-red{width:32px;padding:0 5px;gap:4px}
.bb-belt-badge .crb-stripe{width:3px}
.bb-belt-badge .crb-tail{width:14px}
.bb-belt-badge .crb-brown{width:72px}
.bb-belt-badge .crb-black-bar{width:32px}
.bb-belt-badge .crb-brown-tail{width:14px}

/* ── schedule (shared by homepage + /schedule/) ────────── */
.sched-wrap{background:#fff;border:1px solid var(--border-med);border-radius:8px;
  box-shadow:var(--shadow-lg);overflow:hidden}
.sched-header{display:grid;grid-template-columns:80px 1fr 80px;align-items:center;gap:16px;
  padding:20px 28px;background:#fff;border-bottom:1px solid rgba(0,0,0,.1)}
.sched-logo--king{width:110px;height:110px;object-fit:contain;margin:-15px 0;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.15))}
.sched-header-text{text-align:center}
.sched-gym-name{font-family:'Barlow Condensed',sans-serif;font-weight:900;
  font-size:clamp(18px,2.5vw,28px);letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.sched-gym-sub{font-size:.82rem;color:rgba(0,0,0,.62);margin-top:4px}
.sched-gym-sub a{color:rgba(0,0,0,.55);text-decoration:none;border-bottom:1px dashed rgba(0,0,0,.2)}
.sched-gym-sub a:hover{color:var(--red-text)}
.sched-grid{display:grid;grid-template-columns:72px repeat(7,1fr)}
.sched-time-col{background:#fff;border-right:1px solid rgba(0,0,0,.08);border-bottom:2px solid rgba(0,0,0,.1)}
.sched-day-header{background:#fff;font-family:'Barlow Condensed',sans-serif;font-weight:800;
  font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:#3a3a44;text-align:center;
  padding:12px 6px;border-right:1px solid rgba(0,0,0,.08);border-bottom:2px solid rgba(0,0,0,.1)}
.sched-day-header:last-child{border-right:none}
/* Day headers are no longer coloured: the weekend is not a fact worth
   a colour. Blue now marks classes visitors can drop into. */
.sched-time-label{background:#fff;font-family:'Barlow Condensed',sans-serif;font-weight:800;
  font-size:.72rem;letter-spacing:.06em;color:var(--red-text);text-align:center;padding:10px 4px;
  border-right:1px solid rgba(0,0,0,.08);border-bottom:1px solid rgba(0,0,0,.06);
  display:flex;align-items:center;justify-content:center;line-height:1.2}
.sched-cell{border-right:1px solid rgba(0,0,0,.06);border-bottom:1px solid rgba(0,0,0,.06);
  padding:6px;min-height:60px;display:flex;flex-direction:column;align-items:stretch;
  justify-content:center;gap:5px;text-align:center;transition:opacity .3s}
.sched-cell:nth-child(8n){border-right:none}
.sched-cell.empty{align-items:center}
.sched-cell.empty::after{content:'';display:block;width:20px;height:2px;background:rgba(0,0,0,.1);border-radius:2px}
/* One class per entry. A cell holding two stacks them, so a shared
   start time is one row with a taller cell rather than the same time
   printed twice with a hole under every other day. */
/* flex:1 so an entry fills the height it is given. Without it, Friday's
   single class at 5:00 PM drew a short tile in a row made tall by the
   stacked cells next to it, and the blue tint ended halfway down the
   cell while Monday's ran its full height. */
.sched-entry{flex:1 1 0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;padding:6px 4px;border-radius:4px;
  transition:background .15s,opacity .3s}
.sched-entry:hover{background:#F0F0F3}
/* Two in a cell need a line between them, or they read as one class
   with a two-line name. Drawn as an inset shadow rather than a border:
   a border is part of the box, so it made the lower tile 4px taller
   than the one above it. */
.sched-cell.stacked .sched-entry + .sched-entry{box-shadow:inset 0 1px 0 rgba(0,0,0,.1)}
.sched-class-name{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:.82rem;
  line-height:1.25;color:var(--ink);letter-spacing:.02em;text-transform:uppercase}
.sched-age{font-size:.7rem;color:var(--red-text);font-weight:600;margin-top:3px}
.sched-entry.drop-in .sched-class-name{color:var(--blue-text)}
.sched-entry.drop-in{background:var(--blue-soft)}
.sched-entry.drop-in:hover{background:rgba(26,79,204,.14)}
.sched-entry.filtered-out{opacity:.12;pointer-events:none}
.sched-cell.filtered-out{opacity:.12;pointer-events:none}
.sched-cell.filtered-out::after{display:none}
.sched-mobile-row.drop-in .sched-mobile-class{color:var(--blue-text)}
.sched-legend{display:flex;align-items:center;gap:10px;justify-content:center;
  margin:16px 0 0;font-size:.88rem;color:var(--text-mid)}
.sched-legend-swatch{width:14px;height:14px;border-radius:3px;flex-shrink:0;
  background:var(--blue-soft);border:1.5px solid var(--blue)}
/* The key wraps rather than running off a phone screen. */
@media(max-width:600px){.sched-legend{align-items:flex-start;text-align:left;
  padding:0 16px;font-size:.82rem;line-height:1.45}}
/* Marks drop-in classes where the tint cannot reach: the printable
   table, and anywhere colour is not perceived. */
.dropin-mark{color:var(--blue-text);font-weight:700}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
/* Targets for the in-page anchors the WordPress homepage had. They
   occupy no space; scroll-margin keeps the heading clear of the sticky
   header when one is followed. */
.legacy-anchor{position:relative;height:0;scroll-margin-top:calc(var(--nav-h, 64px) + 12px)}
/* Belt rank under each name on the home grid, as the old site had. */
.bb-rank{font-size:.7rem;line-height:1.35;color:var(--text-light);margin-top:4px}
/* The rating badge is the link to the reviews. Styled as the badge it
   already was, with the affordance only on hover so the band does not
   read as a row of links. */
a.review-badge{text-decoration:none;color:inherit;transition:transform .15s,box-shadow .15s}
a.review-badge:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(0,0,0,.12)}
a.review-badge:hover .review-badge-count strong{text-decoration:underline;text-underline-offset:3px}
/* The coach's name on /coaches/ is the link to their page. Underlined
   on hover only, so the row still reads as a heading. */
.coach-name-link{color:inherit;text-decoration:none}
.coach-name-link:hover{text-decoration:underline;text-underline-offset:4px}
/* WCAG 2.2 2.5.8 wants 24px; these were 16-21px tall. The padding
   rather than a min-height so the text stays where it is. */
.footer-bottom a,.nap-item a{display:inline-block;padding:5px 0;min-height:24px}
.sched-note{padding:14px 24px;text-align:center;font-size:.82rem;color:rgba(0,0,0,.62);
  background:#fff;border-top:1px solid rgba(0,0,0,.08)}
.sched-note a{color:rgba(0,0,0,.55);text-decoration:none;border-bottom:1px dashed rgba(0,0,0,.2)}
.sched-mobile{display:none;padding:16px}
.sched-mobile-day{margin-bottom:16px;border:1px solid rgba(0,0,0,.1);border-radius:6px;overflow:hidden}
.sched-mobile-day-name{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:.9rem;
  letter-spacing:.1em;text-transform:uppercase;padding:10px 14px;background:#fff;
  border-bottom:1px solid rgba(0,0,0,.08);color:#3a3a44}
.sched-mobile-row{display:flex;gap:12px;align-items:center;padding:10px 14px;
  border-bottom:1px solid rgba(0,0,0,.06);background:#fff;transition:opacity .3s}
.sched-mobile-row:last-child{border-bottom:none}
.sched-mobile-row.filtered-out{opacity:.12}
.sched-mobile-time{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:.75rem;
  color:var(--red-text);min-width:58px}
.sched-mobile-class{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:.85rem;color:var(--ink)}
.sched-mobile-age{font-size:.72rem;color:var(--text-light);margin-left:4px}
.sched-actions{display:flex;justify-content:center;gap:12px;margin-top:20px}
.btn-sched-action{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;background:#fff;
  border:1.5px solid var(--border-med);border-radius:6px;font-family:'Barlow Condensed',sans-serif;
  font-weight:700;font-size:.88rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-mid);
  cursor:pointer;transition:all .2s;box-shadow:var(--shadow-sm);line-height:1.2}
.btn-sched-action:hover{border-color:var(--text-mid);color:var(--text-dark);transform:translateY(-1px)}
.btn-sched-action--red{border-color:rgba(217,14,22,.4);color:var(--red-text)}
.btn-sched-action--red:hover{background:var(--red);color:#fff;border-color:var(--red)}
.sched-filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:32px;justify-content:center}
.sched-filter-btn{padding:10px 22px;border:2px solid var(--border-med);border-radius:100px;
  font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:.85rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-mid);background:#fff;cursor:pointer;transition:all .2s;line-height:1.2}
.sched-filter-btn:hover{border-color:var(--text-mid);color:var(--text-dark)}
.sched-filter-btn.active{background:var(--red);color:#fff;border-color:var(--red);
  box-shadow:0 2px 12px rgba(217,14,22,.3)}

/* ── FAQ accordion ─────────────────────────────────────── */
.faq-item{border-bottom:1px solid var(--border);overflow:hidden}
.faq-q{width:100%;background:none;border:none;border-top:1px solid var(--border);
  color:var(--text-dark);text-align:left;padding:22px 0;font-family:'Barlow Condensed',sans-serif;
  font-weight:700;font-size:1.1rem;letter-spacing:.03em;text-transform:uppercase;cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;transition:color .18s;line-height:1.4}
.faq-q:hover{color:var(--red-text)}
.faq-icon{color:var(--red-text);font-size:1.3rem;font-family:'Barlow Condensed',sans-serif;
  font-weight:700;transition:transform .3s;flex-shrink:0;margin-left:12px}
.faq-item.open .faq-icon{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .4s ease}
.faq-item.open .faq-a{max-height:600px}
.faq-a p{padding:0 0 22px;font-size:.98rem;line-height:1.78;color:var(--text-mid)}

/* ── CTA band ──────────────────────────────────────────── */
.join-cta{padding:100px 48px;background:var(--bg-alt);text-align:center;overflow:hidden}
.join-cta::after{content:attr(data-ghost);position:absolute;font-family:'Barlow Condensed',sans-serif;
  font-weight:900;font-size:22vw;color:transparent;-webkit-text-stroke:1px rgba(0,0,0,.03);
  top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;white-space:nowrap;user-select:none}
.join-inner{position:relative;z-index:1;max-width:700px;margin:0 auto}
.join-inner .section-title{font-size:clamp(2.5rem,6vw,5rem)}
.join-sub{font-size:1.05rem;line-height:1.7;color:var(--text-mid);margin:18px auto 36px;max-width:520px}
.join-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ── sticky CTA ────────────────────────────────────────── */
.sticky-cta{position:fixed;bottom:28px;right:28px;z-index:900}
.sticky-cta-btn{display:block;padding:14px 26px;font-family:'Barlow Condensed',sans-serif;
  font-weight:700;font-size:.92rem;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;
  color:#fff;background:var(--red);border-radius:3px;box-shadow:0 4px 20px rgba(217,14,22,.45);
  animation:btn-breathe 2.8s ease-in-out infinite}
.sticky-cta-btn:link,.sticky-cta-btn:visited{color:#fff}
@keyframes btn-breathe{0%,100%{box-shadow:0 4px 20px rgba(217,14,22,.4)}
  50%{box-shadow:0 6px 28px rgba(217,14,22,.55)}}

/* ── footer ────────────────────────────────────────────── */
.site-footer{background:var(--text-dark);padding:48px 48px 28px}
.footer-inner{max-width:1200px;margin:0 auto}
.footer-boxes{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:32px}
.footer-box{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  border-radius:8px;padding:24px;display:flex;flex-direction:column}
.footer-box-label{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:.68rem;
  letter-spacing:.25em;text-transform:uppercase;color:var(--red-text);margin-bottom:16px}
.footer-box--logo{align-items:center;justify-content:center;background:rgba(255,255,255,.02)}
.footer-king{width:100%;max-width:190px;object-fit:contain;filter:drop-shadow(0 4px 20px rgba(0,0,0,.5))}
.footer-map-img-wrap{display:block;position:relative;border-radius:6px;overflow:hidden;
  margin-bottom:10px;border:1px solid rgba(255,255,255,.08);text-decoration:none}
.footer-map-img-wrap img{width:100%;height:180px;object-fit:cover}
.map-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  gap:8px;background:rgba(0,0,0,.35);color:#fff;font-family:'Barlow Condensed',sans-serif;
  font-weight:700;font-size:.85rem;letter-spacing:.12em;text-transform:uppercase;opacity:0;transition:opacity .2s}
.footer-map-img-wrap:hover .map-overlay{opacity:1}
.footer-map-cta{display:flex;align-items:center;gap:8px;font-family:'Barlow Condensed',sans-serif;
  font-weight:700;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--red-text);
  text-decoration:none;padding-top:4px}
.footer-social-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;flex:1}
.fsoc-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  padding:18px 8px;border-radius:6px;text-decoration:none;font-family:'Barlow Condensed',sans-serif;
  font-weight:700;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;
  transition:transform .18s;border:1px solid rgba(255,255,255,.08)}
.fsoc-tile:hover{transform:translateY(-2px)}
.fsoc-tile svg{width:26px;height:26px}
.fsoc-fb{background:rgba(24,119,242,.15);color:#8CBDFA}
.fsoc-ig{background:rgba(225,48,108,.15);color:#F892B4}
.fsoc-yt{background:rgba(255,0,0,.12);color:#FF8585}
.fsoc-tt{background:rgba(255,255,255,.06);color:rgba(255,255,255,.75)}
.footer-nap-items{display:flex;flex-direction:column;gap:12px}
.nap-item{display:flex;align-items:flex-start;gap:10px}
.nap-icon{font-size:.95rem;flex-shrink:0;margin-top:2px}
.nap-item a{color:rgba(255,255,255,.5);text-decoration:none;font-size:.88rem;line-height:1.5;transition:color .18s}
.nap-item a:hover{color:rgba(255,255,255,.9)}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;font-size:.8rem;
  color:rgba(255,255,255,.52);padding-top:24px;border-top:1px solid rgba(255,255,255,.06);
  flex-wrap:wrap;gap:10px}
.footer-bottom a{color:var(--red-text);text-decoration:none}

/* ── reveal animation ──────────────────────────────────── */
.fade-up{opacity:1;transform:none;transition:opacity .65s ease,transform .65s ease}
.js-ready .fade-up{opacity:0;transform:translateY(28px)}
.js-ready .fade-up.visible{opacity:1;transform:translateY(0)}
.delay-1{transition-delay:.1s}.delay-2{transition-delay:.2s}
.delay-3{transition-delay:.3s}.delay-4{transition-delay:.4s}

/* ══ RESPONSIVE ════════════════════════════════════════════ */
@media (max-width:1340px){.hjj-nav-links{gap:18px}}
@media (max-width:1240px){
  .hjj-hamburger{display:flex}
  .hjj-nav-links,.hjj-nav-right{display:none}
  .hjj-nav-inner{padding:0 24px}
}
@media (max-width:1024px){
  .page-hero-inner{grid-template-columns:1fr;gap:40px;text-align:center}
  .page-hero.split .page-hero-eyebrow{justify-content:center}
  .page-hero.split .page-hero-sub{margin-left:auto;margin-right:auto}
  .page-hero-ctas{justify-content:center}
  .hero-img-wrap{max-width:550px;margin:0 auto}
  .features-grid{grid-template-columns:repeat(2,1fr)}
  .footer-boxes{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .sched-grid{grid-template-columns:58px repeat(7,1fr)}
  .sched-cell{min-height:48px;padding:5px 3px}
  .sched-class-name{font-size:.7rem}
  .sched-age{font-size:.62rem}
  .sched-time-label{font-size:.62rem;padding:6px 2px}
}
@media (max-width:768px){
  :root{--nav-h:60px}
  .hjj-nav-inner{padding:0 14px}
  .hjj-nav-logo img{height:75px;top:14px}
  .hjj-cta{font-size:.76rem;padding:9px 14px;letter-spacing:.06em}
  .page-hero{padding:50px 20px 36px}
  .page-hero.split{padding:50px 20px 40px}
  .page-hero-title{font-size:2.2rem}
  .page-hero.split .page-hero-title{font-size:2.4rem}
  .features-grid{grid-template-columns:1fr}
  .sched-grid{display:none}
  .sched-mobile{display:block}
  .sched-filters{gap:6px}
  .sched-filter-btn{padding:8px 16px;font-size:.78rem}
  .sched-actions{flex-direction:column;align-items:center}
  .btn-sched-action{width:100%;max-width:300px;justify-content:center}
  .sched-header{grid-template-columns:60px 1fr 60px;padding:14px 16px;gap:10px}
  .sched-logo--king{width:70px;height:70px;margin:-8px 0}
  .sched-gym-name{font-size:16px}
  .join-cta{padding:60px 20px}
  .join-btns{flex-direction:column;align-items:center}
  .join-btns .btn-primary,.join-btns .btn-secondary{width:100%;max-width:340px;text-align:center}
  .section-title{font-size:clamp(1.8rem,7vw,2.5rem)}
  .site-footer{padding:40px 20px 24px}
  .footer-boxes{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column;text-align:center}
  /* Was pinned 8px under the nav, centred — a fixed element there
     floats over the page for the whole scroll, and on the hero it
     sat 2px off the eyebrow line. Bottom-right instead, as on
     desktop: it stays reachable by thumb, and anything it covers
     can be scrolled out from under it. The footer gains matching
     padding so the end of the page is never permanently hidden. */
  .sticky-cta{top:auto;bottom:14px;left:auto;right:14px;transform:none;z-index:1001}
  .site-footer{padding-bottom:84px}
  .sticky-cta-btn{padding:10px 18px;font-size:.78rem;animation:none}
  .hjj-mobile-links a{font-size:1.7rem}
}
@media (min-width:769px){.sched-mobile{display:none}}
@media (max-width:480px){
  .page-hero{padding:44px 16px 32px}
  .hjj-cta{font-size:.7rem;padding:8px 11px}
  .hjj-nav-actions{gap:4px}
}
@media (max-height:700px){
  .hjj-mobile-menu{justify-content:flex-start;padding-top:76px}
  .hjj-mobile-links{gap:14px}
  .hjj-mobile-links a{font-size:1.45rem}
}

/* ── print: schedule only ──────────────────────────────── */
@media print{
  @page{size:letter landscape;margin:.4in}
  body *{visibility:hidden}
  .sched-wrap,.sched-wrap *{visibility:visible;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .sched-wrap{position:absolute;top:0;left:0;width:100%;box-shadow:none}
  .sched-grid{display:grid}
  .sched-mobile{display:none}
  .sched-cell.filtered-out,.sched-mobile-row.filtered-out{opacity:1}
  .sched-actions,.sched-filters,.hjj-nav,.site-footer,.sticky-cta,.page-hero,.join-cta{display:none}
}

/* ══ EVENT RIBBON ══════════════════════════════════════════
   The one upcoming event, directly under the hero. */
#event-strip{background:var(--ink)}
.event-strip-border-top,.event-strip-border-bottom{height:1px;background:linear-gradient(90deg,transparent,rgba(217,14,22,.5),rgba(26,79,204,.5),transparent)}
.event-strip-inner{max-width:1200px;margin:0 auto;padding:16px 48px;display:flex;align-items:center;
  justify-content:center;gap:10px 22px;flex-wrap:wrap;text-align:center}
.event-strip-type{display:inline-flex;align-items:center;gap:8px;font-family:'Barlow Condensed',sans-serif;
  font-weight:700;font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--red-text);flex-shrink:0}
.event-strip-dot{width:7px;height:7px;border-radius:50%;background:var(--red);
  box-shadow:0 0 0 0 rgba(217,14,22,.7);animation:strip-pulse 2.2s ease-out infinite}
@keyframes strip-pulse{70%{box-shadow:0 0 0 9px rgba(217,14,22,0)}100%{box-shadow:0 0 0 0 rgba(217,14,22,0)}}
.event-strip-title{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:1.05rem;
  letter-spacing:.04em;text-transform:uppercase;color:#fff;min-width:0}
/* The date sits in a pill, which is what gave the old strip its shape. */
.event-strip-date{font-size:.8rem;color:rgba(255,255,255,.72);min-width:0;
  font-family:'Barlow Condensed',sans-serif;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;padding:7px 16px;border-radius:999px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.16)}
.event-strip-cta{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:.78rem;
  letter-spacing:.12em;text-transform:uppercase;color:#fff;text-decoration:none;
  border:1px solid rgba(255,255,255,.25);border-radius:100px;padding:7px 18px;
  white-space:nowrap;transition:background .2s,border-color .2s;flex-shrink:0}
.event-strip-cta:link,.event-strip-cta:visited{color:#fff}
/* Solid red, not an outline — this is the one thing on the strip that
   is meant to be clicked. */
.event-strip-cta{background:var(--red);border-color:var(--red);border-radius:3px}
.event-strip-cta:hover{background:var(--red-bright);border-color:var(--red-bright);
  box-shadow:0 4px 16px rgba(217,14,22,.4)}
@media(max-width:768px){
  .event-strip-inner{padding:14px 18px;gap:8px 14px;flex-direction:column}
  .event-strip-title{font-size:.95rem}
  .event-strip-date{font-size:.82rem}
}


/* ══════════════════════════════════════════════════════════
   This file held three stacked copies of the component and neon
   sections. They were not identical: each was a revision, and
   because the newest sat FIRST the older copies overrode it.
   The last @keyframes neon-strike won, and it was the version
   without a glow in every frame, so the signs ended flat.
   One copy now, newest kept, with the rules only the later
   copies had carried across.
   ══════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════
   COMPONENTS
   ══════════════════════════════════════════════════════════ */

/* ── homepage black-belt cards ──────────────────────────── */
.bb-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.bb-card{background:var(--bg);border:1px solid var(--border);border-radius:6px;overflow:hidden;
  text-decoration:none;color:inherit;display:block;box-shadow:var(--shadow-sm);
  transition:transform .22s,box-shadow .22s}
.bb-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.bb-img-wrap{position:relative;overflow:hidden;padding-bottom:110%;background:var(--bg-alt)}
.bb-img-wrap img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:top center;transition:transform .4s}
/* 1.04 was the original's value and reads as nothing on screen. */
.bb-card:hover .bb-img-wrap img{transform:scale(1.08)}
.bb-info{padding:18px 20px 22px}
.bb-name{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:1.25rem;
  text-transform:uppercase;letter-spacing:.03em;color:var(--text-dark);margin-bottom:5px}
.bb-role{font-size:.78rem;color:var(--text-light);letter-spacing:.04em;text-transform:uppercase;line-height:1.45}

/* ── coach rows (/coaches/ and bio pages) ───────────────── */
/* 420px against a 1200px row rendered these photos small, and the same
   pixels shown small read flat however good the file is. The original
   gives the photo nearer half the row. */
.coach-row{display:grid;grid-template-columns:minmax(0,560px) 1fr;gap:56px;align-items:center;
  padding:64px 0;border-bottom:1px solid var(--border)}
.coach-row:first-of-type{padding-top:0}
.coach-row:last-of-type{border-bottom:none}
.coach-row.single{padding-top:0;border-bottom:none}
.coach-row.reverse .coach-img-col{order:2}
.coach-row.reverse .coach-content{order:1}
/* The old site's coach photos carry a soft red halo and an offset
   bracket. Without them the photo is a bare rectangle on white, which
   is what made these look flat next to the originals. */
.coach-img-wrap{position:relative;padding:10px 10px 12px}
.coach-img-clip{overflow:hidden;border-radius:4px;
  box-shadow:0 0 52px rgba(217,14,22,.42),0 10px 36px rgba(0,0,0,.18)}
.coach-img-wrap img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:top center;
  display:block;transform-origin:top center}
.coach-img-wrap::before{content:'';position:absolute;top:0;left:0;width:62%;height:58%;
  border-top:3px solid var(--red);border-left:3px solid var(--red);border-radius:3px 0 0 0;pointer-events:none}
.coach-row.reverse .coach-img-wrap::before{left:auto;right:0;border-left:none;
  border-right:3px solid var(--red);border-radius:0 3px 0 0}
/* No decorative belt here: beltBadge already renders a real one from
   each coach's rank and degree stripes. Adding a second was my error —
   it put two belts on every photo. */
.coach-name{font-family:'Barlow Condensed',sans-serif;font-weight:900;
  font-size:clamp(2.2rem,4vw,3.2rem);line-height:.95;text-transform:uppercase;
  color:var(--text-dark);margin-bottom:6px}
.coach-name .accent{color:var(--red-text);display:block}
.coach-role{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:.72rem;
  letter-spacing:.28em;text-transform:uppercase;color:var(--red-text);margin-bottom:8px;
  display:flex;align-items:center;gap:10px}
.coach-role::before{content:'';display:inline-block;width:24px;height:2px;background:var(--red);flex-shrink:0}
.coach-rank{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:.88rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--text-light);
  margin-bottom:22px;padding-bottom:20px;border-bottom:1px solid var(--border)}
.coach-bio{font-size:1.02rem;line-height:1.78;color:var(--text-mid);margin-bottom:14px}
.coach-highlights{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:22px 0}
.coach-highlight{padding:14px 16px;background:var(--bg-alt);border:1px solid var(--border);
  border-left:3px solid var(--red);border-radius:3px}
.coach-highlight:nth-child(even){border-left-color:var(--blue)}
.ch-label{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:.64rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--text-light);margin-bottom:3px}
.ch-value{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:.94rem;
  text-transform:uppercase;letter-spacing:.02em;color:var(--text-dark);line-height:1.25}
.coach-cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}

/* ── programs index rows ────────────────────────────────── */
.program-row{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center;
  padding:72px 0;border-bottom:1px solid var(--border)}
.program-row:first-of-type{padding-top:0}
.program-row:last-of-type{border-bottom:none}
.program-row.reverse .program-img-col{order:2}
.program-row.reverse .program-content{order:1}
.program-img-wrap{position:relative}
.program-img-wrap img{width:100%;border-radius:4px;display:block;box-shadow:var(--shadow-lg);
  object-fit:cover;aspect-ratio:4/3}
.program-img-wrap::before{content:'';position:absolute;top:-10px;left:-10px;width:55%;height:55%;
  border-top:3px solid var(--red);border-left:3px solid var(--red);border-radius:3px 0 0 0;pointer-events:none;z-index:1}
.program-row.reverse .program-img-wrap::before{left:auto;right:-10px;border-left:none;
  border-right:3px solid var(--red);border-radius:0 3px 0 0}
.program-img-wrap.blue::before{border-color:var(--blue)}
.program-badge{position:absolute;bottom:-12px;right:-12px;z-index:2;background:var(--red);color:#fff;
  padding:10px 18px;font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:.78rem;
  letter-spacing:.18em;text-transform:uppercase;border-radius:2px;box-shadow:0 4px 16px rgba(217,14,22,.4)}
.program-badge.blue{background:var(--blue);box-shadow:0 4px 16px rgba(26,79,204,.4)}
.program-row.reverse .program-badge{right:auto;left:-12px}
.program-role{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:.72rem;
  letter-spacing:.28em;text-transform:uppercase;color:var(--red-text);margin-bottom:8px;
  display:flex;align-items:center;gap:10px}
.program-role::before{content:'';display:inline-block;width:24px;height:2px;background:var(--red);flex-shrink:0}
.program-role.blue{color:var(--blue-text)}
.program-role.blue::before{background:var(--blue)}
.program-name{font-family:'Barlow Condensed',sans-serif;font-weight:900;
  font-size:clamp(2.2rem,4vw,3.4rem);line-height:.95;text-transform:uppercase;
  color:var(--text-dark);margin-bottom:6px}
.program-name .accent{color:var(--red-text);display:block}
.program-name .accent.blue{color:var(--blue-text)}
.program-tagline{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:.88rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--text-light);margin-bottom:22px;
  padding-bottom:20px;border-bottom:1px solid var(--border)}
.program-desc{font-size:1.02rem;line-height:1.78;color:var(--text-mid);margin-bottom:14px}
.program-features{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:22px 0}
.program-feat{display:flex;align-items:center;gap:10px;padding:14px 16px;background:var(--bg-alt);
  border:1px solid var(--border);border-left:3px solid var(--red);border-radius:3px;
  font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:.85rem;
  letter-spacing:.04em;text-transform:uppercase;color:var(--text-dark);line-height:1.25}
.program-feat.blue{border-left-color:var(--blue)}
.program-feat-icon{font-size:1.1rem;flex-shrink:0}
.program-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.program-schedule-mini{margin:22px 0 0;padding:20px 24px;background:var(--ink);
  border-left:4px solid var(--red);border-radius:6px;box-shadow:0 4px 16px rgba(0,0,0,.15)}
.program-schedule-mini.blue{border-left-color:var(--blue)}
.psm-label{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:.72rem;
  letter-spacing:.22em;text-transform:uppercase;color:var(--red-text);margin-bottom:14px}
.program-schedule-mini.blue .psm-label{color:var(--blue-text)}
.psm-grid{display:flex;flex-wrap:wrap;gap:12px}
.psm-item{display:flex;flex-direction:column;gap:3px;background:#fff;border-radius:6px;
  padding:12px 18px;min-width:150px;box-shadow:0 2px 8px rgba(0,0,0,.1)}
/* The class is what someone is scanning for, so it leads. Days and
   times answer the question once the right card has been found. */
.psm-name{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:1.02rem;
  letter-spacing:.02em;text-transform:uppercase;color:var(--ink);line-height:1.2;
  margin-bottom:2px}
.psm-age{font-weight:700;font-size:.78rem;color:var(--red-text);letter-spacing:.04em}
/* One class, however many day/time pairings it runs on. A second
   pairing is ruled off so it does not read as a continuation of the
   first. */
.psm-when{display:block}
.psm-when + .psm-when{margin-top:6px;padding-top:6px;border-top:1px solid rgba(0,0,0,.08)}
.psm-day{display:block;font-family:'Barlow Condensed',sans-serif;font-weight:700;
  font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--blue-text)}
.psm-time{display:block;font-family:'Barlow Condensed',sans-serif;font-weight:700;
  font-size:.9rem;letter-spacing:.02em;color:var(--text-mid);line-height:1.25}
.psm-note{font-size:.8rem;color:rgba(255,255,255,.5);margin-top:12px;font-style:italic;line-height:1.5}

/* ── program detail page ────────────────────────────────── */
/* The grid used to live in an inline style on the template, which no
   media query can override — so these pages stayed two columns on a
   phone and ran off the side of the screen. */
.overview-inner{max-width:1200px;margin:0 auto;display:grid;
  grid-template-columns:1fr 1fr;gap:70px;align-items:start}
.overview-body{font-size:1.03rem;line-height:1.78;color:var(--text-mid);margin-bottom:16px}
.age-groups{display:grid;gap:14px;margin-top:22px}
.age-group-card{display:flex;align-items:center;gap:16px;padding:18px 22px;background:var(--bg-alt);
  border:1px solid var(--border);border-left:3px solid var(--red);border-radius:4px}
.age-group-card:nth-child(even){border-left-color:var(--blue)}
.age-group-emoji{font-size:1.8rem;flex-shrink:0}
.age-group-name{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:1.1rem;
  text-transform:uppercase;letter-spacing:.03em;color:var(--text-dark)}
.age-group-detail{font-size:.88rem;color:var(--text-mid);margin-top:2px}
.sched-card{background:var(--ink);border-radius:12px;overflow:hidden;
  box-shadow:0 8px 40px rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.08)}
.sched-row{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:14px 0;border-bottom:1px solid rgba(255,255,255,.07);flex-wrap:wrap}
.sched-row:last-child{border-bottom:none}
.sched-row-label{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:1rem;
  text-transform:uppercase;letter-spacing:.03em;color:#fff}
.sched-row-days{font-size:.86rem;color:rgba(255,255,255,.5)}
.sched-row-times{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:1rem;
  letter-spacing:.04em;color:var(--red-text);white-space:nowrap}
/* A class whose times differ by day keeps one row and lists each
   pairing on the right, rather than appearing twice under its own
   name. */
.sched-row-whens{display:flex;flex-direction:column;gap:6px;align-items:flex-end;
  text-align:right;margin-left:auto}
.sched-row-when{display:flex;align-items:baseline;gap:10px;justify-content:flex-end;flex-wrap:wrap}
@media(max-width:600px){
  .sched-row{align-items:flex-start}
  .sched-row-whens{align-items:flex-start;text-align:left;margin-left:0;width:100%}
  .sched-row-when{justify-content:flex-start}
}
.instructors-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.parent-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.parent-info-card{background:var(--bg);border:1px solid var(--border);border-radius:6px;
  padding:26px 24px;border-top:3px solid var(--blue)}
.parent-info-card:nth-child(odd){border-top-color:var(--red)}
.parent-info-icon{font-size:1.7rem;margin-bottom:12px}
.parent-info-title{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:1.1rem;
  text-transform:uppercase;letter-spacing:.03em;margin-bottom:8px}
.parent-info-desc{font-size:.94rem;line-height:1.65;color:var(--text-mid)}
.testimonial-quote{font-size:1.15rem;line-height:1.75;color:var(--text-mid);font-style:italic;margin-bottom:18px}
.testimonial-name{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:1rem;
  text-transform:uppercase;letter-spacing:.06em;color:var(--text-dark)}
.testimonial-detail{font-size:.85rem;color:var(--text-light);margin-top:3px}

/* ── events ─────────────────────────────────────────────── */
.event-row{display:grid;grid-template-columns:380px 1fr;gap:56px;align-items:center;
  background:var(--bg);border:1px solid var(--border);border-radius:10px;
  padding:34px;margin-bottom:24px;box-shadow:var(--shadow-sm)}
.event-flyer-wrap{position:relative;border-radius:8px;overflow:hidden;box-shadow:var(--shadow-md)}
.event-flyer-wrap img{width:100%;display:block;object-fit:cover}
.event-tag{display:inline-flex;align-items:center;gap:8px;font-family:'Barlow Condensed',sans-serif;
  font-weight:700;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--red-text);margin-bottom:12px}
.event-tag.away{color:var(--blue-text)}
.event-tag-dot{width:7px;height:7px;border-radius:50%;background:currentColor}
.event-title{font-family:'Barlow Condensed',sans-serif;font-weight:900;
  font-size:clamp(1.9rem,3.4vw,2.8rem);line-height:1;text-transform:uppercase;
  color:var(--text-dark);margin-bottom:16px}
.event-title .highlight{color:var(--red-text)}
.event-row.away .event-title .highlight{color:var(--blue-text)}
.event-meta{display:grid;gap:10px;margin:18px 0 20px;padding:18px 0;
  border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.event-meta-row{display:flex;align-items:flex-start;gap:12px}
.event-meta-icon{font-size:1rem;flex-shrink:0;margin-top:1px}
.event-meta-label{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:.64rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--text-light)}
.event-meta-value{font-size:.96rem;color:var(--text-dark);font-weight:500;line-height:1.45}
.event-desc{font-size:1rem;line-height:1.72;color:var(--text-mid);margin-bottom:20px}
.event-cta-row{display:flex;gap:12px;flex-wrap:wrap}
.btn-event{display:inline-block;padding:14px 32px;font-family:'Barlow Condensed',sans-serif;
  font-weight:700;font-size:.95rem;letter-spacing:.12em;text-transform:uppercase;
  text-decoration:none;color:#fff;background:var(--red);border:2px solid var(--red);
  border-radius:3px;transition:background .2s,transform .2s;box-shadow:0 4px 16px rgba(217,14,22,.3)}
.btn-event:link,.btn-event:visited{color:#fff}
.btn-event:hover{background:var(--red-bright);border-color:var(--red-bright);transform:translateY(-2px)}
.event-row.away .btn-event{background:var(--blue);border-color:var(--blue);box-shadow:0 4px 16px rgba(26,79,204,.3)}
.event-row.away .btn-event:hover{background:var(--blue-bright);border-color:var(--blue-bright)}
.past-card-title{padding:14px 16px;font-family:'Barlow Condensed',sans-serif;font-weight:700;
  font-size:.88rem;letter-spacing:.04em;text-transform:uppercase;color:rgba(255,255,255,.8);
  text-align:center;line-height:1.3}

/* ── seminar formats ────────────────────────────────────── */
.sem-feat-card{background:var(--bg);border:1px solid var(--border);border-radius:6px;
  padding:30px 26px;border-top:3px solid var(--red);transition:transform .22s,box-shadow .22s}
.sem-feat-card:nth-child(even){border-top-color:var(--blue)}
.sem-feat-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.sem-feat-icon{font-size:1.9rem;margin-bottom:14px}
.sem-feat-title{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:1.15rem;
  text-transform:uppercase;letter-spacing:.03em;margin-bottom:6px}
.sem-feat-duration{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:.72rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--red-text);margin-bottom:10px}
.sem-feat-desc{font-size:.94rem;line-height:1.65;color:var(--text-mid)}

/* ── free trial tiles ───────────────────────────────────── */
.trial-benefit-icon{font-size:1.25rem;flex-shrink:0}

/* ── component responsive ───────────────────────────────── */
@media(max-width:1024px){
  .bb-grid{grid-template-columns:repeat(2,1fr)}
  .coach-row{grid-template-columns:1fr;gap:36px;padding:48px 0}
  .coach-row.reverse .coach-img-col,.coach-row.reverse .coach-content{order:0}
  .coach-img-wrap{max-width:420px;margin:0 auto}
  .program-row{grid-template-columns:1fr;gap:36px;padding:48px 0}
  .program-row.reverse .program-img-col,.program-row.reverse .program-content{order:0}
  .event-row{grid-template-columns:1fr;gap:28px;padding:26px}
  .event-flyer-wrap{max-width:420px;margin:0 auto}
  .instructors-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
  /* Coach cards: two across at phone width squeezed the names until they
     clipped. One per row, photo capped so the card is not a full screen
     tall, and the name allowed to wrap onto a second line. */
  .bb-grid{grid-template-columns:1fr;gap:16px;max-width:420px;margin-inline:auto}
  .bb-img-wrap{padding-bottom:0;height:300px}
  .bb-img-wrap img{position:absolute;inset:0;height:100%}
  .bb-info{padding:16px 18px 20px}
  .bb-name{font-size:1.15rem;line-height:1.15;white-space:normal;overflow-wrap:anywhere}
  .bb-role{font-size:.74rem;line-height:1.4}
  .coach-highlights{grid-template-columns:1fr}
  .program-features{grid-template-columns:1fr}
  .parent-info-grid{grid-template-columns:1fr}
  .overview-inner{grid-template-columns:1fr;gap:34px}
  .instructors-grid{grid-template-columns:1fr}
  .psm-item{width:100%}
  .event-cta-row .btn-event,.event-cta-row .btn-secondary{width:100%;text-align:center}
}

/* ── instructor cards on program pages ──────────────────── */
.instructor-card{background:var(--bg);border:1px solid var(--border);border-radius:6px;
  overflow:hidden;text-decoration:none;color:inherit;display:block;box-shadow:var(--shadow-sm);
  transition:transform .22s,box-shadow .22s}
.instructor-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.instructor-img{position:relative;overflow:hidden;padding-bottom:110%;background:var(--bg-alt)}
.instructor-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center}
.instructor-info{padding:18px 20px 22px}
.instructor-name{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:1.2rem;
  text-transform:uppercase;letter-spacing:.03em;color:var(--text-dark);margin-bottom:4px}
.instructor-role{font-size:.78rem;color:var(--text-light);letter-spacing:.04em;
  text-transform:uppercase;line-height:1.45}

/* ── misc layout holders ────────────────────────────────── */
.sched-card-header{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.event-flyer-col,.event-details-col{min-width:0}

/* ── "what a class looks like" breakdown ────────────────── */
.class-breakdown{display:grid;gap:12px;margin-top:22px}
.class-phase{display:flex;gap:16px;align-items:flex-start;padding:16px 20px;
  background:var(--bg-alt);border:1px solid var(--border);border-left:3px solid var(--red);border-radius:4px}
.class-phase:nth-child(even){border-left-color:var(--blue)}
.class-phase-num{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:1.5rem;
  line-height:1;color:var(--red-text);flex-shrink:0;width:34px}
.class-phase:nth-child(even) .class-phase-num{color:var(--blue-text)}
.class-phase-name{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:1rem;
  text-transform:uppercase;letter-spacing:.03em;color:var(--text-dark);margin-bottom:3px}
.class-phase-detail{font-size:.92rem;line-height:1.6;color:var(--text-mid)}

/* ══ NEON STARTUP ══════════════════════════════════════════
   The glow has to live INSIDE the keyframes. An animation with
   fill-mode `both` leaves its last frame's filter applied for
   good, so any static drop-shadow on the element is overridden
   and the sign ends up flat. Every frame therefore carries its
   own glow, and the tube ends lit rather than merely visible. */

.neon,.neon-slow{will-change:filter,opacity}

.neon{animation:neon-strike 2.6s ease-out both}
.neon-slow{animation:neon-strike 3.2s ease-out .3s both}
.neon.neon-hum{animation:neon-strike 2.6s ease-out both,
                         neon-hum 4.5s ease-in-out 3s infinite}
.neon-slow.neon-hum{animation:neon-strike 3.2s ease-out .3s both,
                              neon-hum 4.5s ease-in-out 3.8s infinite}

/* dark = tube off, lit = tube on and glowing */
/* No opacity in here, deliberately. A neon tube striking is a
   brightness effect, and this used to drop to near-zero alpha for the
   first second. That is invisible to a viewer and, more to the point,
   invisible to the browser: Largest Contentful Paint does not count an
   element that is nearly transparent, so the hero was reported as
   taking 6.9s to paint when its bytes had arrived in 420ms. Two full
   seconds of that was "element render delay" — this animation. The
   flicker looks the same; it is brightness alone now, and these marks
   only ever sit on dark sections where that reads identically. */
@keyframes neon-strike{
  0%  {filter:brightness(.18) saturate(.2)  drop-shadow(0 0 0 rgba(100,200,255,0))}
  3%  {filter:brightness(1.7) saturate(1.3) drop-shadow(0 0 26px rgba(120,210,255,.75))}
  5%  {filter:brightness(.2)  saturate(.22) drop-shadow(0 0 0 rgba(100,200,255,0))}
  10% {filter:brightness(1.8) saturate(1.35)drop-shadow(0 0 30px rgba(120,210,255,.8))}
  12% {filter:brightness(.22) saturate(.25) drop-shadow(0 0 2px rgba(100,200,255,.1))}
  16% {filter:brightness(1)   saturate(.9)  drop-shadow(0 0 12px rgba(100,200,255,.35))}
  18% {filter:brightness(.22) saturate(.25) drop-shadow(0 0 2px rgba(100,200,255,.1))}
  25% {filter:brightness(1.9) saturate(1.4) drop-shadow(0 0 34px rgba(130,215,255,.85))}
  28% {filter:brightness(.5)  saturate(.6)  drop-shadow(0 0 6px rgba(100,200,255,.2))}
  32% {filter:brightness(1.45)saturate(1.2) drop-shadow(0 0 26px rgba(120,210,255,.7))}
  36% {filter:brightness(.95) saturate(.95) drop-shadow(0 0 12px rgba(100,200,255,.35))}
  41% {filter:brightness(1.3) saturate(1.12)drop-shadow(0 0 24px rgba(120,210,255,.6))}
  46% {filter:brightness(1.05)saturate(1.02)drop-shadow(0 0 16px rgba(110,205,255,.45))}
  54% {filter:brightness(1.2) saturate(1.08)drop-shadow(0 0 22px rgba(120,210,255,.55))}
  70% {filter:brightness(1.05)saturate(1.02)drop-shadow(0 0 20px rgba(115,208,255,.5))}
  100%{filter:brightness(1.02)saturate(1)   drop-shadow(0 0 18px rgba(110,205,255,.45))
                          drop-shadow(0 0 42px rgba(90,180,255,.22))}
}

/* lit and breathing */
@keyframes neon-hum{
  0%,100%{filter:brightness(1.02) saturate(1) drop-shadow(0 0 18px rgba(110,205,255,.45))
                 drop-shadow(0 0 42px rgba(90,180,255,.22))}
  50%    {filter:brightness(1.1)  saturate(1.05) drop-shadow(0 0 26px rgba(125,215,255,.6))
                 drop-shadow(0 0 58px rgba(90,180,255,.3))}
}

/* red-dominant marks read better with a warm glow */
.neon-red,.neon-red.neon-hum{--glow-a:rgba(255,120,110,.5);--glow-b:rgba(217,14,22,.25)}

/* no animation? still lit. */
@media(prefers-reduced-motion:reduce){
  .neon,.neon-slow,.neon.neon-hum,.neon-slow.neon-hum{
    animation:none !important;opacity:1 !important;
    filter:drop-shadow(0 0 18px rgba(110,205,255,.45)) drop-shadow(0 0 42px rgba(90,180,255,.22)) !important}
}


/* A bare .neon-hum, for an element that hums without striking first.
   Lower specificity than .neon.neon-hum, so it never competes with it. */
.neon-hum{animation:neon-hum 4.5s ease-in-out 3s infinite}
@media(prefers-reduced-motion:reduce){
  .neon-hum{animation:none !important;opacity:1 !important}
}

/* ── hero stat counters ─────────────────────────────────── */
.hero-stats{display:flex;gap:48px;margin-top:34px;flex-wrap:wrap}
.hero-stat-num{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:2.8rem;
  line-height:1;color:#fff}
.hero-stat-num span{color:var(--red-text)}
.hero-stat-label{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:.68rem;
  letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.45);margin-top:8px}
@media(max-width:1024px){.hero-stats{justify-content:center}}
@media(max-width:768px){.hero-stats{gap:32px;margin-top:26px}.hero-stat-num{font-size:2.2rem}}


/* ── coach cards on the narrowest phones ────────────────── */
@media(max-width:380px){
  .bb-grid{gap:14px}
  .bb-img-wrap{height:260px}
  .bb-name{font-size:1.05rem}
}

/* ══ HOMEPAGE REVIEWS ══════════════════════════════════════ */
.review-badge{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;
  max-width:max-content;margin:0 auto 34px;padding:14px 26px;background:var(--bg);
  border:1px solid rgba(217,14,22,.28);border-radius:14px;box-shadow:var(--shadow-sm)}
.review-badge-score{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:2rem;
  line-height:1;color:var(--text-dark)}
.review-badge-stars{color:#F5A623;font-size:1.25rem;letter-spacing:.06em}
.review-badge-count{font-size:.92rem;color:var(--text-mid)}
.review-badge-count strong{color:var(--text-dark);font-weight:700}
.review-badge-g{font-weight:600;font-size:.95rem;color:var(--text-dark);margin-left:-4px}
/* Outlined pill with the Google mark, as on the old site — a plain blue
   button gave no sign the link goes to Google. */
.btn-google{display:inline-flex;align-items:center;gap:10px;padding:13px 26px;
  border:1px solid rgba(217,14,22,.4);border-radius:999px;background:var(--bg);
  color:var(--red-text);font-weight:700;font-size:.97rem;text-decoration:none;
  transition:border-color .2s,box-shadow .2s}
.btn-google:hover{border-color:var(--red);box-shadow:0 0 14px rgba(217,14,22,.2)}

.reviews-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.review-card{background:var(--bg);border:1px solid rgba(217,14,22,.28);border-radius:14px;
  padding:22px 22px 26px;display:flex;flex-direction:column;box-shadow:var(--shadow-sm);
  transition:border-color .25s,box-shadow .25s,transform .22s}
.review-card:hover{border-color:var(--red);transform:translateY(-3px);
  box-shadow:0 0 16px rgba(217,14,22,.22),0 6px 20px rgba(0,0,0,.07)}
/* The reviewer sits at the top of the card now, with the Google mark
   under the name, the way the old site had it. */
.review-by{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.review-avatar{width:42px;height:42px;border-radius:50%;color:#fff;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.86rem;
  letter-spacing:.02em}
.review-who{display:flex;flex-direction:column;gap:3px;min-width:0}
.review-name{font-weight:700;font-size:.99rem;color:var(--text-dark);
  display:flex;align-items:center;gap:6px}
.review-check{color:var(--blue-text);font-size:.82rem;font-weight:700}
.review-src{display:flex;align-items:center;gap:6px;font-size:.84rem;color:var(--text-light)}
.g-mark{flex-shrink:0;display:block}
.review-stars{color:#F5A623;font-size:1.02rem;letter-spacing:.08em;margin-bottom:12px}
.review-text{font-size:.95rem;line-height:1.72;color:var(--text-mid);font-style:normal}

.review-badge{display:flex;align-items:center;justify-content:center;gap:14px;
  margin:0 auto 40px;padding:14px 26px;background:var(--bg);border:1px solid var(--border);
  border-radius:100px;width:max-content;max-width:100%;box-shadow:var(--shadow-sm);flex-wrap:wrap}
.review-badge-score{font-family:'Barlow Condensed',sans-serif;font-weight:900;
  font-size:1.9rem;line-height:1;color:var(--text-dark)}
.review-badge-stars{color:#F5A623;letter-spacing:.08em;font-size:1.05rem}
.review-badge-count{font-family:'Barlow Condensed',sans-serif;font-weight:700;
  font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-light)}
.reviews-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.review-card{background:var(--bg);border:1px solid var(--border);border-radius:8px;
  padding:26px 24px;display:flex;flex-direction:column;gap:14px;box-shadow:var(--shadow-sm);
  border-top:3px solid var(--red);transition:transform .22s,box-shadow .22s;margin:0}
.review-card:nth-child(even){border-top-color:var(--blue)}
.review-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.review-stars{color:#F5A623;letter-spacing:.1em;font-size:.95rem;line-height:1}
.review-text{font-size:.95rem;line-height:1.7;color:var(--text-mid);margin:0;flex:1;
  border:none;padding:0;font-style:normal}
.review-by{display:flex;align-items:center;gap:12px;padding-top:14px;
  border-top:1px solid var(--border)}
.review-avatar{width:38px;height:38px;border-radius:50%;flex-shrink:0;display:flex;
  align-items:center;justify-content:center;background:var(--ink);color:#fff;
  font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:.88rem;letter-spacing:.04em}
.review-name{display:block;font-family:'Barlow Condensed',sans-serif;font-weight:900;
  font-size:.98rem;letter-spacing:.03em;text-transform:uppercase;color:var(--text-dark);line-height:1.2}
.review-src{display:block;font-size:.74rem;color:var(--text-light);margin-top:2px}
@media(max-width:1024px){.reviews-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){
  .reviews-grid{grid-template-columns:1fr;gap:16px}
  .review-badge{gap:10px;padding:12px 20px}
  .review-badge-score{font-size:1.6rem}
}

/* ══════════════════════════════════════════════════════════════
   CONTENT BANDS
   Shared styles for the content bands the worker renders from the
   content records: prose with a callout, a grid of titled points
   (plain or numbered), the programs grid, the dark CTA strip, the
   facility list and the member videos. They are used on the home
   page, /programs/, /private-lessons/ and /seminar-booking/, and
   each band removes itself when its record is emptied, so nothing
   here may assume a sibling band exists.

   The grids are declared here rather than inline on the template
   because an inline style cannot be overridden by a media query —
   that is exactly what broke the overview pages on mobile.
   ══════════════════════════════════════════════════════════════ */

.band{padding:90px 48px;background:var(--bg);border-bottom:1px solid var(--border)}
.band.alt{background:var(--bg-alt)}
.band-inner{max-width:1200px;margin:0 auto}
.band-inner > .fade-up:first-child{margin-bottom:44px}
.band-lead{font-size:1.06rem;line-height:1.75;color:var(--text-mid);
  max-width:760px;margin:-16px 0 40px}
.band-btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px}
.band-btns.center{justify-content:center;margin-top:44px}

/* ── intro band ───────────────────────────────────────── */
/* Photo on the left, copy on the right, matching the original. The
   no-photo modifier lets the copy run full width when no image is
   set, so a missing file degrades instead of leaving a hole. */
.intro-split{display:grid;grid-template-columns:minmax(0,520px) 1fr;gap:60px;align-items:start}
.intro-split.no-photo{grid-template-columns:1fr;max-width:860px}
/* The original frames the photo with an offset bracket — a rule along
   the top that overshoots to the right and one down the left, sitting
   outside the image — not a box border around it. The padding makes
   room for those rules; the glow sits on the image itself. */
.intro-photo{position:relative;padding:16px 0 0 16px}
.intro-photo img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:center top;
  display:block;box-shadow:0 0 46px rgba(217,14,22,.42),0 10px 40px rgba(0,0,0,.18)}
.intro-photo::before{content:'';position:absolute;top:0;left:16px;right:-44px;height:3px;
  background:var(--red)}
.intro-photo::after{content:'';position:absolute;left:0;top:0;height:62%;width:3px;
  background:var(--red)}
.intro-badge{position:absolute;right:-18px;bottom:28px;background:var(--red);color:#fff;
  font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:.86rem;
  letter-spacing:.18em;padding:10px 18px;box-shadow:0 6px 20px rgba(217,14,22,.45)}
.intro-copy > .fade-up:first-child{margin-bottom:26px}
.intro-body{font-size:1.04rem;line-height:1.78;color:var(--text-mid);margin-bottom:20px}
.intro-body:last-child{margin-bottom:0}
/* The callout sits inside the prose, between paragraphs — not floated
   out beside it, which is what made it read as a separate panel. */
.callout{display:flex;gap:16px;align-items:flex-start;background:var(--bg);
  border:1px solid var(--border);border-left:3px solid var(--blue);border-radius:4px;
  padding:22px 24px;margin:0 0 20px;box-shadow:var(--shadow-sm)}
.callout-icon{font-size:1.4rem;line-height:1.2;flex-shrink:0}
.callout-title{font-family:'Barlow Condensed',sans-serif;font-weight:800;
  font-size:1.08rem;line-height:1.2;letter-spacing:.02em;text-transform:uppercase;
  margin-bottom:8px}
.callout p{font-size:.95rem;line-height:1.7;color:var(--text-mid)}

/* ── programs grid ─────────────────────────────────────── */
.prog-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.prog-card{display:flex;flex-direction:column;background:var(--bg);
  border:1px solid var(--border);border-radius:4px;overflow:hidden;
  text-decoration:none;color:inherit;box-shadow:var(--shadow-sm);
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.prog-card:hover,.prog-card:focus-visible{transform:translateY(-4px);
  box-shadow:var(--shadow-lg);border-color:var(--border-med)}
/* The image box has a fixed height so four cards line up even
   though the source photos are different shapes. */
.prog-card-img{height:176px;overflow:hidden;background:var(--ink)}
.prog-card-img img{width:100%;height:100%;object-fit:cover;
  transition:transform .4s ease}
.prog-card:hover .prog-card-img img{transform:scale(1.05)}
/* The gradient bar wipes in under the photo on hover, left to right —
   the detail that makes the original's cards feel alive. */
.prog-card-img{position:relative}
.prog-card-img::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--red),var(--blue));
  transform:scaleX(0);transform-origin:left;transition:transform .35s ease}
.prog-card:hover .prog-card-img::after{transform:scaleX(1)}
.prog-card-body{padding:24px 22px 26px;display:flex;flex-direction:column;flex:1}
.prog-card-title{font-family:'Barlow Condensed',sans-serif;font-weight:800;
  font-size:1.3rem;line-height:1.12;text-transform:uppercase;letter-spacing:.01em}
.prog-card-badge{align-self:flex-start;margin-top:9px;padding:3px 10px;
  font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:.7rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--blue-text);
  background:var(--blue-soft);border-radius:2px}
.prog-card-text{margin-top:13px;font-size:.94rem;line-height:1.68;
  color:var(--text-mid);flex:1}
.prog-card-link{margin-top:18px;font-family:'Barlow Condensed',sans-serif;
  font-weight:700;font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--red-text)}

/* ── private lessons ──────────────────────────────────── */
.cta-strip{padding:64px 48px;background:var(--ink);color:#fff}
.cta-strip-inner{display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:30px}
.cta-strip .section-label{color:var(--red-text)}
.cta-strip-title{font-family:'Barlow Condensed',sans-serif;font-weight:800;
  font-size:clamp(1.6rem,3.4vw,2.3rem);line-height:1.08;text-transform:uppercase;
  letter-spacing:.01em}
.cta-strip-body{margin-top:12px;max-width:640px;font-size:1rem;line-height:1.72;
  color:rgba(255,255,255,.8)}
.cta-strip-btns{display:flex;flex-wrap:wrap;gap:14px;flex-shrink:0}
/* The secondary button is outlined for a light page; on the dark
   strip it needs a light outline to be visible at all. */
.cta-strip .btn-secondary{border-color:rgba(255,255,255,.4);color:#fff}
.cta-strip .btn-secondary:hover{border-color:#fff;background:rgba(255,255,255,.1)}

/* ── what sets us apart ───────────────────────────────── */
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.why-card{background:var(--bg);border:1px solid var(--border);border-top:3px solid var(--red);
  border-radius:4px;padding:30px 26px 32px;box-shadow:var(--shadow-sm)}
.why-num{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:2.1rem;
  line-height:1;color:var(--red-soft);-webkit-text-stroke:1px var(--red);
  color:transparent;margin-bottom:12px}
.why-title{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:1.22rem;
  line-height:1.16;text-transform:uppercase;letter-spacing:.01em;margin-bottom:11px}
.why-body{font-size:.94rem;line-height:1.72;color:var(--text-mid)}

/* ── titled points, plain ─────────────────────────────── */
/* cols-N comes from the record so a four-point band is not forced
   into a three-column grid with one card orphaned on its own row. */
.pillar-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.pillar-grid.cols-2{grid-template-columns:repeat(2,1fr)}
.pillar-grid.cols-4{grid-template-columns:repeat(4,1fr)}
.why-grid.cols-2{grid-template-columns:repeat(2,1fr)}
.why-grid.cols-4{grid-template-columns:repeat(4,1fr)}
.pillar-card{background:var(--bg);border:1px solid var(--border);
  border-left:3px solid var(--blue);border-radius:4px;padding:26px 24px 28px;
  box-shadow:var(--shadow-sm)}
.pillar-icon{display:block;font-size:1.5rem;line-height:1;margin-bottom:12px}
/* accent:"alt" moves the accent bar to the top and alternates red/blue
   across the grid, the way the old site's benefit cards read. Opt-in
   from the content record so the default pillar card is unchanged. */
.pillar-grid.accent-alt .pillar-card{border-left:1px solid var(--border);
  border-top:3px solid var(--red)}
.pillar-grid.accent-alt .pillar-card:nth-child(even){border-top-color:var(--blue)}
.pillar-title{font-family:'Barlow Condensed',sans-serif;font-weight:800;
  font-size:1.14rem;line-height:1.18;text-transform:uppercase;letter-spacing:.01em;
  margin-bottom:10px}
.pillar-body{font-size:.93rem;line-height:1.7;color:var(--text-mid)}
/* A prose band with no callout should not run the full 1200px — long
   lines are hard to read. */
.prose-single{max-width:860px}

/* ── inside the gym ───────────────────────────────────── */
/* Two columns of quiet grey tiles. White cards with shouting uppercase
   labels pulled focus away from the video they sit next to. */
.gym-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.gym-item{display:flex;align-items:center;gap:13px;padding:17px 18px;
  background:rgba(15,15,20,.045);border:1px solid rgba(0,0,0,.05);border-radius:6px}
.gym-item-icon{font-size:1.15rem;line-height:1;flex-shrink:0}
.gym-item-title{font-weight:600;font-size:.97rem;line-height:1.3;color:var(--text-dark)}

/* The tour video on the left, everything else in the column beside
   it — heading, intro, tiles and the call to action. */
.gym-split{display:grid;grid-template-columns:minmax(0,380px) 1fr;gap:56px;align-items:start}
.gym-split.no-tour{grid-template-columns:1fr}
.gym-copy > .fade-up:first-child{margin-bottom:22px}
.gym-copy .band-lead{margin:0 0 26px}
/* Blue frame and halo on the tour clip — the member videos are red,
   and the old site set this one apart the same way. */
.tour-tile{margin:0;aspect-ratio:9/16;width:100%;border-color:var(--blue);
  box-shadow:0 0 34px rgba(26,79,204,.4),0 8px 28px rgba(0,0,0,.18)}
.tour-tile:hover{box-shadow:0 0 44px rgba(26,79,204,.55),var(--shadow-lg)}
.gym-cta{display:block;text-align:center;margin-top:22px;
  box-shadow:0 6px 26px rgba(217,14,22,.4)}

/* ── member videos ────────────────────────────────────── */
/* The clips are vertical 9:16 phone video, so the tiles are too —
   a 16:9 tile would letterbox them into a thin strip. Four across
   at full width keeps them a sensible height. */
/* No max-width here. Capping this narrower than the rest of the page
   inset the clips and made them look shrunken next to everything else. */
.vid-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.vid-tile{position:relative;aspect-ratio:9/16;width:100%;padding:0;
  border:2px solid var(--red);border-radius:8px;cursor:pointer;overflow:hidden;
  box-shadow:var(--shadow-md);background:var(--ink) center/cover no-repeat;
  display:flex;align-items:center;justify-content:center;
  transition:transform .22s ease,box-shadow .22s ease}
/* A scrim so the play button and name stay legible whatever the frame. */
.vid-tile::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(15,15,20,.15) 0%,rgba(15,15,20,.1) 55%,rgba(15,15,20,.72) 100%)}
.vid-tile:hover,.vid-tile:focus-visible{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.vid-play{position:relative;z-index:1;width:66px;height:66px;border-radius:50%;
  background:var(--red);color:#fff;font-size:1rem;display:flex;align-items:center;
  justify-content:center;padding-left:4px;box-shadow:0 4px 18px rgba(217,14,22,.5)}
.vid-name{position:absolute;z-index:1;left:0;right:0;bottom:42px;text-align:center;
  font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:1.18rem;
  letter-spacing:.06em;text-transform:uppercase;color:#fff;padding:0 10px;
  text-shadow:0 2px 10px rgba(0,0,0,.6)}
.vid-dur{position:absolute;z-index:1;left:10px;bottom:10px;padding:2px 7px;
  border-radius:3px;background:rgba(0,0,0,.72);color:#fff;font-size:.74rem;
  font-variant-numeric:tabular-nums}
.vid-frame{aspect-ratio:9/16;width:100%;border-radius:8px;overflow:hidden;background:#000}
.vid-frame iframe{width:100%;height:100%;border:0;display:block}

@media (max-width:1024px){
  .intro-split{grid-template-columns:1fr;gap:38px}
  .intro-photo{max-width:460px}
  .gym-split{grid-template-columns:1fr;gap:28px}
  .tour-tile{max-width:320px}
  .prog-grid{grid-template-columns:repeat(2,1fr)}
  .why-grid,.why-grid.cols-4,.gym-grid,
  .pillar-grid,.pillar-grid.cols-4{grid-template-columns:repeat(2,1fr)}
  .vid-grid{grid-template-columns:repeat(4,1fr);max-width:none}
  .intro-grid{grid-template-columns:1fr;gap:34px}
}
@media (max-width:768px){
  .band{padding:62px 20px}
  .cta-strip{padding:48px 20px}
  .prog-grid,.why-grid,.why-grid.cols-2,.why-grid.cols-4,
  .gym-grid,
  .pillar-grid,.pillar-grid.cols-2,.pillar-grid.cols-4{grid-template-columns:1fr;gap:18px}
  /* Vertical clips stay two-up on a phone: one per row would be
     taller than the screen. */
  .vid-grid{grid-template-columns:repeat(2,1fr);gap:14px}
  .vid-name{bottom:32px;font-size:.9rem}
  .vid-play{width:44px;height:44px;font-size:.85rem}
  .band-inner > .fade-up:first-child{margin-bottom:30px}
  .band-lead{margin:-8px 0 28px}
  .cta-strip-inner{flex-direction:column;align-items:flex-start}
  .why-card{padding:24px 20px 26px}
  .intro-photo{max-width:none;padding:12px 0 0 12px}
  /* The red bracket used to reach -24px while .band padding is 20px,
     so it ended 4px past the viewport — the entire horizontal overflow
     measured on every phone size. Flush with the padding instead. */
  .intro-photo::before{right:-20px;left:12px}
  .intro-badge{right:-10px;bottom:20px;font-size:.78rem;padding:8px 14px}
  .callout{padding:18px 18px}
  .gym-grid{grid-template-columns:1fr}
  .tour-tile{max-width:none}
}

/* ── draft pages ──────────────────────────────────────── */
/* Only a signed-in admin can reach a draft page, so this strip is
   only ever seen by someone who can publish it. */
.draft-banner{position:relative;z-index:60;background:#B45309;color:#fff;
  padding:11px 20px;text-align:center;font-size:.9rem;line-height:1.5}
.draft-banner strong{font-weight:700}
.draft-banner code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.86em;background:rgba(255,255,255,.18);padding:1px 5px;border-radius:2px}
.draft-banner a{color:#fff;text-decoration:underline}

/* ── amenities cards ──────────────────────────────────── */
.amen-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.amen-card{background:var(--bg);border:1px solid var(--border);
  border-top:3px solid var(--red);border-radius:4px;padding:28px 24px 30px;
  box-shadow:var(--shadow-sm)}
.amen-icon{display:block;font-size:1.7rem;line-height:1;margin-bottom:14px}
.amen-title{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:1.2rem;
  line-height:1.16;text-transform:uppercase;letter-spacing:.01em;margin-bottom:10px}
.amen-body{font-size:.94rem;line-height:1.7;color:var(--text-mid)}
@media (max-width:1024px){ .amen-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:768px){ .amen-grid{grid-template-columns:1fr;gap:18px} }

/* ── forms ────────────────────────────────────────────── */
/* The seminar form and the private-lesson form are the same form
   furniture: a bordered frame, a two-column grid, labelled inputs
   and a pair of result messages. These used to live in the seminar
   template's own <style>, which meant a second form had no styles
   until they were copied. They are here now so every form built
   later is styled by default. */
.sem-frame{background:var(--bg);border:1px solid var(--border-med);border-radius:8px;
  padding:38px;box-shadow:var(--shadow-lg);position:relative}
.sem-frame::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--red),var(--blue));border-radius:8px 8px 0 0}
.sem-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;position:relative}
.sem-grid .full{grid-column:1/-1}
.sem-label{display:block;font-family:'Barlow Condensed',sans-serif;font-weight:700;
  font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:8px}
.sem-label span{color:var(--red-text)}
.sem-in{width:100%;font-size:1rem;line-height:1.5;padding:13px 14px;
  border:1.5px solid var(--border-med);border-radius:4px;background:#fff;
  min-height:50px;transition:border-color .2s,box-shadow .2s}
textarea.sem-in{min-height:130px;resize:vertical}
.sem-in:focus{border-color:var(--red);outline:none;
  box-shadow:0 0 0 3px rgba(217,14,22,.28)}
.sem-help{font-size:.82rem;color:var(--text-light);margin-top:6px}
.sem-msg{display:none;padding:18px 20px;border-radius:6px;font-size:.98rem;
  line-height:1.55;margin-top:20px}
.sem-msg.show{display:block}
.sem-msg.ok{background:rgba(26,79,204,.06);border:1px solid rgba(26,79,204,.25);color:var(--blue-text)}
.sem-msg.err{background:rgba(217,14,22,.06);border:1px solid rgba(217,14,22,.25);color:var(--red-text)}
@media(max-width:768px){.sem-frame{padding:26px 20px}.sem-grid{grid-template-columns:1fr}}

/* Skip link: off-screen until focused, then a real target. Restores
   what the old site had — without it a keyboard user tabs the whole
   nav again on every page. */
/* Clipped rather than pushed to left:-9999px: an off-screen element
   still contributes to document width in some engines, and a skip link
   that creates horizontal overflow defeats its own purpose. */
.skip-link{position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;top:0;left:0;z-index:10000;
  background:var(--red);color:#fff;padding:0;border-radius:0 0 6px 0;
  font-family:'Barlow Condensed',sans-serif;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;text-decoration:none}
.skip-link:focus{width:auto;height:auto;overflow:visible;clip-path:none;
  padding:12px 20px}
#main:focus{outline:none}

/* Card titles are h3 for screen-reader heading navigation (the old
   site had them; the rebuild used plain divs). The classes already
   carry the type styling — this only strips the browser's default
   heading margins so nothing moves. */
.prog-card-title,.why-title,.pillar-title,.feature-title,
.amen-title,.instructor-name{margin-top:0}

/* Secondary button colour, by background rather than by page.
   The brand blue #1A4FCC is 2.76:1 on the dark sections — below WCAG
   AA at both the 4.5:1 and 3:1 thresholds — while reading correctly on
   white. So the token defaults to the brand blue and the dark sections
   raise it; custom properties inherit, so a button added inside any of
   them is covered without touching this rule again.
   #4D8DFF measures 5.98:1 on --ink. */
/* The same problem applies to red text, and to every blue that is not
   a button: brand red #D90E16 is 3.66:1 on the dark sections and 4.33:1
   on the light grey band, both under 4.5:1 for normal-size text. So
   text colours go through tokens too. --blue-cta follows --blue-text,
   which keeps the focus ring, the secondary button and body text on
   one source.

     --red-text   #C70D14  6.01:1 on white, 4.98:1 on the grey band
                  #FF6B70  6.91:1 on --ink, 6.33:1 on the footer
     --blue-text  #1A4FCC  ~7:1 on white
                  #4D8DFF  5.98:1 on --ink

   Only text uses these. Fills, borders and rules keep the brand red
   and blue, so nothing about the look of a button changes.

   Custom properties inherit, so anything added inside one of these
   containers is covered without touching this rule again. Anything
   added inside a NEW dark container is not — that is what
   tools/check-contrast.mjs is for, and why it runs in CI. */
:root{--red-text:#C70D14;--blue-text:#1A4FCC;--blue-cta:#1A4FCC;--text-soft:var(--text-light)}
.page-hero,.cta-strip,.hjj-nav,.hjj-mobile-menu,#event-strip,
.sched-card,.program-schedule-mini,.site-footer,.band.dark,
.trial-form-wrap,.trial-contact,.band-ink{--red-text:#FF6B70;--blue-text:#4D8DFF;
  --blue-cta:#4D8DFF;--text-soft:rgba(255,255,255,.75)}
/* the skip link is a child of body but sits over the dark nav */
.skip-link{--red-text:#FF6B70;--blue-text:#4D8DFF;--blue-cta:#4D8DFF}
/* A white card inside a dark panel is light again, so the tokens go
   back. Inheritance cannot know what is painted behind an element;
   only the rule that paints it can. */
.psm-item,.sched-cell,.sched-mobile-row{--red-text:#C70D14;--blue-text:#1A4FCC;
  --blue-cta:#1A4FCC;--text-soft:var(--text-light)}

/* Touch targets. On a phone the footer contact links and the inline
   call/email links were 16–21px tall — the phone number is the single
   most likely tap on the whole site, and it was the smallest thing on
   the page. Scoped to coarse pointers so the desktop layout is
   untouched, and done with min-height plus centring rather than
   padding so nothing reflows. */
@media (pointer: coarse) {
  .nap-item a,
  .footer-map-cta,
  .footer-col a,
  .trial-contact a,
  .ty-contact a {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
  }
}

/* Pricing cards. These lived entirely in an inline style on the
   element, which outranks every media query in this file — so the
   grid stayed four columns at 390px and the coach names wrapped a
   letter at a time. Same bug as .bb-grid. Rules belong here, where a
   breakpoint can reach them. */
/* Flex, not grid, so a trailing row centres. A fixed 4-column grid
   left the 5th coach alone against the left edge the moment Tom was
   added, and would do it again at 9, 13 and so on. The basis keeps
   the same four-up rhythm; only the last row behaves differently. */
.pricing-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:20px}
.pricing-grid > .pricing-card{flex:0 1 calc(25% - 15px)}
@media(max-width:1024px){
  .pricing-grid > .pricing-card{flex-basis:calc(50% - 10px)}
}
@media(max-width:768px){
  .pricing-grid{gap:16px;max-width:420px;margin-inline:auto}
  .pricing-grid > .pricing-card{flex-basis:100%}
}

/* The floating trial pill must not sit over the open mobile menu —
   the menu already has its own Book Free Trial button, so the pill is
   both redundant and in the way there. */
body.menu-open .sticky-cta{display:none}