/* ═══════════════════════════════════════════════════════════
   VHR SPORTS — COMPONENT STYLES
   Loads after site.css and depends on its tokens.

   Two kinds of rule live here:

   1. De-scoped component CSS. In the Astro build these sat in
      per-component <style> blocks and were emitted with
      [data-astro-cid-*] attribute selectors. Same declarations,
      scope attribute removed.

   2. New for WordPress. The blog re-skin and long-form prose —
      surfaces the static build never had to render.

   Everything derives from the tokens in site.css. No new colours.
═══════════════════════════════════════════════════════════ */

/* ── LEAD MODAL (was scoped to ywqo7ouv) ── */
.lm-overlay{position:fixed;inset:0;background:rgba(35,32,28,.6);backdrop-filter:blur(4px);z-index:1002;
  display:none;align-items:center;justify-content:center;padding:18px;opacity:0;transition:opacity .25s}
.lm-overlay.open{display:flex;opacity:1}
.lm-card{background:#fff;border-radius:var(--radius-lg);max-width:440px;width:100%;padding:30px 28px 26px;
  box-shadow:0 30px 80px rgba(35,32,28,.34);position:relative;max-height:94vh;max-height:94dvh;overflow:auto;
  -webkit-overflow-scrolling:touch;transform:translateY(14px) scale(.98);transition:transform .28s var(--ease)}
.lm-overlay.open .lm-card{transform:none}
.lm-x{position:absolute;top:12px;right:16px;font-size:28px;line-height:1;color:#c3bcae;background:none;z-index:2}
.lm-x:hover{color:var(--ink)}
.lm-head{text-align:center;margin-bottom:20px}
.lm-badge{display:inline-block;background:rgba(214,9,187,.10);color:var(--mag);font-weight:600;font-size:12.5px;
  padding:6px 13px;border-radius:99px;margin-bottom:12px}
.lm-title{font-family:var(--fD);font-weight:600;font-size:28px;color:var(--ink);letter-spacing:-.015em;line-height:1.08}
.lm-sub{color:#5a544a;font-size:15px;line-height:1.55;margin-top:8px}
.lm-form{display:flex;flex-direction:column;gap:14px}
.lm-field label{display:block;font-family:var(--fB);font-weight:600;font-size:13px;color:var(--ink);margin-bottom:6px}
.lm-field input,.lm-field select{width:100%;padding:13px 15px;border:1.5px solid var(--rule);
  border-radius:var(--radius-sm);font-family:var(--fB);font-size:16px;background:#fff;color:var(--ink)}
.lm-field input:focus,.lm-field select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(8,113,201,.12)}
.lm-err{color:var(--mag);font-size:13px;text-align:center;margin-top:-4px}
.lm-fine{font-family:var(--fB);font-size:11px;color:var(--gray);text-align:center;margin-top:2px}
.lm-success{text-align:center;padding:10px 0}
.lm-tick{width:64px;height:64px;border-radius:50%;background:rgba(37,158,79,.12);color:#2e9e4f;font-size:34px;
  display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
@media(max-width:520px){.lm-card{padding:26px 20px 22px}.lm-title{font-size:24px}}

/* ── QUIZ FAB + POPUP (was scoped to mwdgwdrd) ── */
.quiz-fab{position:fixed;bottom:max(24px,calc(env(safe-area-inset-bottom) + 14px));left:max(24px,env(safe-area-inset-left));
  z-index:989;display:inline-flex;align-items:center;gap:9px;background:linear-gradient(135deg,var(--blue),var(--mag));
  color:#fff;padding:12px 18px;border-radius:99px;box-shadow:0 6px 22px rgba(214,9,187,.35);
  font-family:var(--fB);font-weight:600;font-size:14px;transition:transform .2s,box-shadow .2s}
.quiz-fab:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(214,9,187,.45)}
.qf-ic{font-size:17px;line-height:1}
.quiz-pop-overlay{position:fixed;inset:0;background:rgba(35,32,28,.55);backdrop-filter:blur(3px);z-index:1001;
  display:none;align-items:center;justify-content:center;padding:20px;opacity:0;transition:opacity .3s}
.quiz-pop-overlay.open{display:flex;opacity:1}
.quiz-pop{background:#fff;border-radius:var(--radius-lg);max-width:420px;width:100%;padding:36px 30px 28px;
  box-shadow:0 30px 70px rgba(35,32,28,.30);position:relative;text-align:center;
  transform:translateY(14px) scale(.98);transition:transform .3s var(--ease)}
.quiz-pop-overlay.open .quiz-pop{transform:none}
.quiz-pop-x{position:absolute;top:12px;right:16px;font-size:26px;line-height:1;color:#c3bcae;background:none}
.quiz-pop-x:hover{color:var(--ink)}
.qp-emoji{font-size:44px;margin-bottom:12px}
.qp-title{font-family:var(--fD);font-weight:600;font-size:26px;color:var(--ink);letter-spacing:-.01em;line-height:1.1;margin-bottom:12px}
.qp-text{color:#5a544a;font-size:15px;line-height:1.6;margin-bottom:22px}
.qp-later{display:block;width:100%;margin-top:12px;color:var(--gray);font-weight:600;font-size:14px}
.qp-later:hover{color:var(--ink)}
@media(max-width:520px){
  .quiz-fab{bottom:max(18px,calc(env(safe-area-inset-bottom) + 10px));left:max(14px,env(safe-area-inset-left));padding:11px 15px;font-size:13px}
  .qf-label{display:none}
}

/* ── PROGRAM HERO ── */
.phero{padding:calc(var(--nav) + 56px) 0 56px}
.phero-crumb{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--gray);margin-bottom:22px;flex-wrap:wrap}
.phero-crumb a{color:var(--gray)}
.phero-crumb a:hover{color:var(--blue)}
.phero-grid{display:grid;grid-template-columns:1.35fr .8fr;gap:44px;align-items:start}
.phero-body{min-width:0}
.phero-kicker{font-family:var(--fB);font-size:13px;font-weight:600;color:var(--blue);margin-bottom:14px}
.phero-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
@media(max-width:900px){.phero-grid{grid-template-columns:1fr;gap:34px}}
@media(max-width:600px){.phero{padding:calc(var(--nav) + 34px) 0 40px}}

/* ── PROGRAM GRID ── */
.prog-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:2px;margin-top:36px}
.age-filter{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:6px}

/* ── FAQ LIST ── */
.faq-list{margin-top:26px;border-top:1px solid var(--rule)}

/* ── PROGRAM ENQUIRY BAND ──────────────────────────────────────────────
   Holds the slot the per-program session gallery used to occupy (.pg-*,
   removed with it). Same band grammar as .qband on the programs archive, so
   the two read as one component family. The photos are not gone — the full set
   is still on the Gallery page. The band offers no download; its primary button
   just opens a WhatsApp conversation. */

.penq{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;
  background:linear-gradient(135deg,#fff,var(--sand));border:1px solid var(--rule);
  border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:36px 38px}
.penq-txt{flex:1 1 380px;min-width:0}
.penq-eyebrow{font-family:var(--fB);font-weight:600;color:var(--mag);font-size:14px;margin-bottom:8px}
.penq-title{font-family:var(--fD);font-weight:600;font-size:clamp(24px,3vw,34px);color:var(--ink);
  letter-spacing:-.015em;line-height:1.1}
.penq-sub{color:#5a544a;font-size:15px;line-height:1.75;margin-top:10px;max-width:56ch}
.penq-link{display:inline-block;margin-top:16px;font-family:var(--fB);font-size:14px;font-weight:600;
  color:var(--blue);border-bottom:1.5px solid transparent;transition:border-color .18s}
.penq-link:hover{border-bottom-color:var(--blue)}
.penq-cta{flex:0 0 auto;display:flex;flex-direction:column;gap:12px}
@media(max-width:820px){
  .penq{padding:28px 24px}
  .penq-cta{width:100%}
  .penq-cta .btn{width:100%}
}

/* ── LOCATION ── */
.loc-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px;margin-top:34px}
.loc-addr,.loc-sched{background:#fff;border:1px solid var(--rule-soft,rgba(35,32,28,.07));padding:28px 26px}
.loc-addr address{font-style:normal;color:#5a544a;line-height:1.7;margin:12px 0 20px}
.sched-note{font-family:var(--fB);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--gray)}
.sched-row.mag .sched-note{color:var(--mag)}
.loc-map iframe{display:block;filter:grayscale(.2)}
.loc-notice{margin-top:24px;padding:16px 20px;background:rgba(214,9,187,.06);border-left:3px solid var(--mag);
  font-size:14.5px;line-height:1.6;color:#5a544a;max-width:64ch}
@media(max-width:820px){.loc-grid{grid-template-columns:1fr}}

/* ── BLOG (new for WordPress) ── */
.post-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));gap:2px}
.post-card{background:#fff;border:1px solid var(--rule-soft,rgba(35,32,28,.07));display:flex;flex-direction:column;
  transition:box-shadow .25s,transform .25s}
.post-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}
.post-card-media{display:block;overflow:hidden;aspect-ratio:4/3;background:var(--sand)}
.post-card-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--out)}
.post-card:hover .post-card-media img{transform:scale(1.04)}
.post-card-body{padding:22px 22px 24px;display:flex;flex-direction:column;gap:9px;flex:1}
.post-card-cat{font-family:var(--fB);font-size:10.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--blue)}
.post-card-title{font-family:var(--fD);font-size:20px;line-height:1.22;letter-spacing:-.01em;font-weight:600;color:var(--ink)}
.post-card-title a{color:inherit}
.post-card-title a:hover{color:var(--blue)}
.post-card-ex{font-size:14.5px;line-height:1.6;color:#5a544a;flex:1}
.post-card-meta{font-family:var(--fB);font-size:12.5px;color:var(--gray);margin-top:4px}
.post-meta{display:flex;gap:14px;flex-wrap:wrap;font-size:13.5px;color:var(--gray);margin-top:16px}
.post-meta a{color:var(--gray)}
.post-meta a:hover{color:var(--blue)}
.post-hero-img{width:100%;height:auto;margin-top:8px}
.post-tags{margin-top:36px;padding-top:22px;border-top:1px solid var(--rule);display:flex;gap:8px;flex-wrap:wrap}
.post-tags a{display:inline-block;padding:5px 13px;background:var(--sand);border-radius:var(--pill);
  font-size:12.5px;font-weight:500;color:#5a544a}
.post-tags a:hover{background:var(--blue);color:#fff}

/* ── LONG-FORM PROSE ── */
.vhr-prose{font-size:17px;line-height:1.78;color:#4a453d}
.vhr-prose > * + *{margin-top:1.15em}
.vhr-prose h2{font-family:var(--fD);font-size:clamp(26px,3.4vw,36px);line-height:1.14;letter-spacing:-.012em;
  font-weight:600;color:var(--ink);margin-top:1.9em}
.vhr-prose h3{font-family:var(--fD);font-size:clamp(21px,2.4vw,26px);line-height:1.2;font-weight:600;
  color:var(--ink);margin-top:1.7em}
.vhr-prose h4{font-family:var(--fB);font-size:17px;font-weight:650;color:var(--ink);margin-top:1.6em}
.vhr-prose p{max-width:68ch}
.vhr-prose a{color:var(--blue);border-bottom:1px solid rgba(8,113,201,.35)}
.vhr-prose a:hover{border-bottom-color:currentColor}
.vhr-prose strong{color:var(--ink);font-weight:650}
.vhr-prose ul,.vhr-prose ol{padding-left:1.3em;max-width:66ch}
.vhr-prose li + li{margin-top:.5em}
.vhr-prose ul{list-style:disc}
.vhr-prose ol{list-style:decimal}
.vhr-prose blockquote{border-left:3px solid var(--mag);padding:4px 0 4px 22px;margin-left:0;
  font-family:var(--fD);font-size:20px;line-height:1.5;color:var(--ink)}
.vhr-prose img,.vhr-prose figure img{width:100%;height:auto}
.vhr-prose figcaption{font-size:13px;color:var(--gray);margin-top:8px}
.vhr-prose hr{border:0;border-top:1px solid var(--rule);margin:2.4em 0}
.vhr-prose table{width:100%;border-collapse:collapse;font-size:15px}
.vhr-prose th,.vhr-prose td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--rule-soft,rgba(35,32,28,.07))}
.vhr-prose th{font-family:var(--fB);font-weight:650;color:var(--ink);background:var(--sand)}
.vhr-prose code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em;
  background:var(--sand);padding:.14em .42em;border-radius:3px}
.vhr-prose pre{background:var(--ink);color:#f0eae0;padding:20px 22px;border-radius:var(--radius-sm);overflow-x:auto}
.vhr-prose pre code{background:none;padding:0;color:inherit}

/* ── PAGINATION ── */
.vhr-pagination{margin-top:46px;display:flex;justify-content:center}
.vhr-pagination .nav-links{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.vhr-pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;
  padding:0 13px;background:#fff;border:1px solid var(--rule);font-family:var(--fB);font-size:14px;font-weight:600;
  color:#6a6459;border-radius:var(--radius-sm);transition:all .18s}
.vhr-pagination .page-numbers:hover{border-color:var(--blue);color:var(--blue)}
.vhr-pagination .page-numbers.current{background:var(--blue);border-color:var(--blue);color:#fff}
.vhr-pagination .dots{border:0;background:none}

/* ── COMMENTS ── */
.comment-list{list-style:none;padding:0;margin:0}
.comment-list li{padding:20px 0;border-bottom:1px solid var(--rule-soft,rgba(35,32,28,.07))}
.comment-list .children{list-style:none;padding-left:26px}

/* ── ACCESSIBILITY ── */
.screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
.screen-reader-text:focus{position:static;width:auto;height:auto;margin:0;clip:auto;white-space:normal}

/* ── ACCESSIBILITY FIXES (gaps carried over from the Astro build) ──
   .dd-meta at 8px used --gray #8a8378 on light grounds, ~3.2:1 — below the
   4.5:1 WCAG AA floor for small text. Darkened and enlarged slightly; the
   visual weight is unchanged because the tracking carries the style. */
.dd-meta,
.pc-label,
.tcard2-note,
.loc-tag{color:#6a6459}
.dd-meta{font-size:9px}

/* ── GOOGLE REVIEWS (de-scoped from GoogleReviews.astro) ── */
.greview-badge{display:inline-flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--rule);padding:14px 20px}
.greview-badge .g-logo{width:30px;height:30px;flex-shrink:0}
.greview-badge-top{display:flex;align-items:center;gap:8px;font-family:var(--fD);font-size:24px;line-height:1;color:var(--ink)}
.greview-stars{color:#FBBC05;font-size:15px;letter-spacing:2px}
.greview-badge-sub{display:block;margin-top:4px;font-family:var(--fM);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:#6a6459}
.greview-badge-sub:hover{color:var(--blue)}
.greview-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:2px}
.g-logo.sm{width:16px;height:16px;opacity:.9}
.greview-ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.testi-header{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;margin-bottom:52px}
.tgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:16px}
.tcard{background:#fff;border:1px solid var(--rule);padding:30px 28px;display:flex;flex-direction:column;gap:14px}
.tstars{color:#FBBC05;font-size:14px;letter-spacing:2px}
.ttext{font-size:15px;line-height:1.7;color:#5a544a;flex:1}
.tauthor{display:flex;align-items:center;gap:12px;margin-top:4px}
.tavatar{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--fB);font-weight:650;font-size:14px;color:#fff;flex-shrink:0}
.tavatar.av-b{background:var(--blue)}
.tavatar.av-m{background:var(--mag)}
.tavatar.av-g{background:#6a6459}
.tname{font-family:var(--fB);font-weight:650;font-size:14px;color:var(--ink)}
.trole{font-family:var(--fB);font-size:12px;color:#6a6459}
@media(max-width:860px){.testi-header{grid-template-columns:1fr;gap:24px}}

/* ── INSTAGRAM BAND (de-scoped from InstagramBand.astro) ── */
.ig-sec{padding:80px 0}
.ig-head{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:26px}
.ig-id{display:flex;align-items:center;gap:14px}
.ig-logo{width:40px;height:40px;color:var(--mag)}
.ig-name{font-family:var(--fD);font-weight:600;font-size:24px;color:var(--ink);letter-spacing:-.01em}
.ig-tag{color:#6a6459;font-size:14px}
.ig-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.ig-tile{position:relative;aspect-ratio:1/1;overflow:hidden;border-radius:var(--radius-sm);display:block;background:var(--sand)}
.ig-tile img{width:100%;height:100%;object-fit:cover;transition:transform .4s var(--out)}
.ig-tile:hover img{transform:scale(1.08)}
.ig-ov{position:absolute;inset:0;background:rgba(214,9,187,.28);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s}
.ig-ov svg{width:26px;height:26px}
.ig-tile:hover .ig-ov{opacity:1}
@media(max-width:820px){.ig-grid{grid-template-columns:repeat(3,1fr)}}

/* ── NAV FIT (overrides site.css) ──────────────────────────────────────
   The real constraint is not the viewport: `.nav-inner` is capped at
   `max-width: var(--max)` = 1200px, so the nav content box NEVER grows past
   1200px however wide the window is. With 5% padding that leaves ~1080px for
   the logo, nine menu items and two action buttons.

   At the stock gap:20px / font:15px the menu alone measures ~737px, and
   73 + 737 + 238 + gaps lands right on 1080 — so it overlapped at every
   desktop width, not just near the breakpoint. An earlier fix that only
   tightened between 1241–1420px did nothing at wider windows, because the
   extra viewport width is never available to this container.

   Three changes, in order of how much room each frees:
     · tighten spacing at ALL desktop widths, not a band  (~86px)
     · drop the WhatsApp wordmark below 1440px, keeping the icon — the
       floating WhatsApp button is on every page, so the label is a
       duplicate  (~62px)
     · switch to the hamburger at 1240px rather than 1100px
   Together that leaves roughly 150px of headroom instead of zero. */

@media (max-width:1240px){
  .nav-menu{display:none}
  .hamburger{display:flex}
  .nav-wa{display:none}
}

@media (min-width:1241px){
  .nav-menu{gap:14px}
  .nav-link{font-size:14px}
  .nav-wa{padding:8px 12px}
  .nav-trial{padding:8px 14px}
}

/* Icon-only WhatsApp until there is genuinely room for the wordmark. */
@media (max-width:1439px){
  .nav-wa-label{display:none}
  .nav-wa{gap:0}
}

/* Never let the menu push into the action buttons. */
.nav-inner{gap:18px}
.nav-menu{flex-wrap:nowrap;min-width:0}
.nav-actions{flex-shrink:0}
.nav-menu .nav-link{white-space:nowrap}

/* ── GOOGLE REVIEWS (de-scoped from GoogleReviews.astro) ── */
.greview-badge{display:inline-flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--rule);padding:14px 20px}
.greview-badge .g-logo{width:30px;height:30px;flex-shrink:0}
.greview-badge-top{display:flex;align-items:center;gap:8px;font-family:var(--fD);font-size:24px;line-height:1;color:var(--ink)}
.greview-stars{color:#FBBC05;font-size:15px;letter-spacing:2px}
.greview-badge-sub{display:block;margin-top:4px;font-family:var(--fM);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:#6a6459}
.greview-badge-sub:hover{color:var(--blue)}
.greview-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:2px}
.g-logo.sm{width:16px;height:16px;opacity:.9}
.greview-ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.testi-header{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;margin-bottom:52px}
.tgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:16px}
.tcard{background:#fff;border:1px solid var(--rule);padding:30px 28px;display:flex;flex-direction:column;gap:14px}
.tstars{color:#FBBC05;font-size:14px;letter-spacing:2px}
.ttext{font-size:15px;line-height:1.7;color:#5a544a;flex:1}
.tauthor{display:flex;align-items:center;gap:12px;margin-top:4px}
.tavatar{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--fB);font-weight:650;font-size:14px;color:#fff;flex-shrink:0}
.tavatar.av-b{background:var(--blue)}
.tavatar.av-m{background:var(--mag)}
.tavatar.av-g{background:#6a6459}
.tname{font-family:var(--fB);font-weight:650;font-size:14px;color:var(--ink)}
.trole{font-family:var(--fB);font-size:12px;color:#6a6459}
@media(max-width:860px){.testi-header{grid-template-columns:1fr;gap:24px}}

/* ── INSTAGRAM BAND (de-scoped from InstagramBand.astro) ── */
.ig-sec{padding:80px 0}
.ig-head{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:26px}
.ig-id{display:flex;align-items:center;gap:14px}
.ig-logo{width:40px;height:40px;color:var(--mag)}
.ig-name{font-family:var(--fD);font-weight:600;font-size:24px;color:var(--ink);letter-spacing:-.01em}
.ig-tag{color:#6a6459;font-size:14px}
.ig-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.ig-tile{position:relative;aspect-ratio:1/1;overflow:hidden;border-radius:var(--radius-sm);display:block;background:var(--sand)}
.ig-tile img{width:100%;height:100%;object-fit:cover;transition:transform .4s var(--out)}
.ig-tile:hover img{transform:scale(1.08)}
.ig-ov{position:absolute;inset:0;background:rgba(214,9,187,.28);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s}
.ig-ov svg{width:26px;height:26px}
.ig-tile:hover .ig-ov{opacity:1}
@media(max-width:820px){.ig-grid{grid-template-columns:repeat(3,1fr)}}

/* ── NAV FIT (overrides site.css) ──────────────────────────────────────
   site.css switches to the hamburger at 1100px. That threshold was set for
   a 7-item menu; the nav now carries 9 (FAQ and Contact were added), and
   nine items plus the logo and the two action buttons need roughly 1160px.
   Between 1100 and 1160 the menu overflowed into .nav-actions and the items
   visibly overlapped.

   Two changes: switch to the hamburger earlier, and tighten spacing in the
   band just above it so the desktop menu degrades gracefully instead of
   hitting a hard cliff. */

@media (max-width:1240px){
  .nav-menu{display:none}
  .hamburger{display:flex}
  .nav-wa{display:none}
}

/* Just above the switch: keep 9 items comfortable rather than cramped. */
@media (min-width:1241px) and (max-width:1420px){
  .nav-menu{gap:14px}
  .nav-link{font-size:14px}
  .nav-wa{padding:8px 12px}
  .nav-trial{padding:8px 14px}
}

/* Belt and braces: never let the menu push into the action buttons. */
.nav-inner{gap:16px}
.nav-menu{flex-wrap:nowrap;min-width:0}
.nav-actions{flex-shrink:0}

/* ── QUIZ BAND (programs archive) ──────────────────────────────────────
   Page-scoped in src/pages/programs/index.astro. De-scoped here because the
   archive template is the only consumer and the styles never shipped with the
   original port — the band rendered as unstyled stacked text. */

.qband{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;background:linear-gradient(135deg,#fff,var(--sand));border:1px solid var(--rule);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:32px 34px}
.qband-eyebrow{font-family:var(--fB);font-weight:600;color:var(--mag);font-size:14px;margin-bottom:8px}
.qband-title{font-family:var(--fD);font-weight:600;font-size:clamp(24px,3vw,34px);color:var(--ink);letter-spacing:-.015em;line-height:1.1}
.qband-sub{color:#5a544a;font-size:15px;margin-top:8px;max-width:520px}
.qband-cta{flex-shrink:0}
@media(max-width:640px){.qband{padding:26px 22px}.qband-cta{width:100%}}

/* ── GALLERY ───────────────────────────────────────────────────────────
   Page-scoped in src/pages/gallery.astro and missed entirely by the first
   port, so the page shipped with no grid at all: images rendered at their
   natural size in a single column and the filter chips were invisible.
   De-scoped here verbatim — the gallery template is the only consumer. */

.gal-head{padding:calc(var(--nav) + 44px) 0 20px}

.gal-filter{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:26px}
.gal-chip{padding:9px 16px;border:1.5px solid var(--rule);border-radius:99px;background:#fff;cursor:pointer;
  font-family:var(--fB);font-size:14px;font-weight:600;color:var(--ink);transition:all .18s}
.gal-chip:hover{border-color:var(--blue);color:var(--blue)}
.gal-chip.active{background:var(--blue);color:#fff;border-color:var(--blue)}

.gal-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.gal-item{position:relative;margin:0;aspect-ratio:3/4;overflow:hidden;border-radius:var(--radius);
  box-shadow:var(--shadow);background:var(--sand);cursor:zoom-in;padding:0;border:none;width:100%}
.gal-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--out)}
.gal-item:hover img{transform:scale(1.06)}
.gal-item .gal-cap{position:absolute;left:0;right:0;bottom:0;padding:18px 10px 8px;
  font-family:var(--fB);font-size:11px;font-weight:600;color:#fff;letter-spacing:.02em;text-align:left;
  background:linear-gradient(transparent,rgba(0,0,0,.6));opacity:0;transform:translateY(6px);
  transition:opacity .25s,transform .25s}
.gal-item:hover .gal-cap{opacity:1;transform:none}
.gal-item:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.gal-item[hidden]{display:none}

@media(min-width:560px){.gal-grid{grid-template-columns:repeat(3,1fr);gap:12px}}
@media(min-width:900px){.gal-grid{grid-template-columns:repeat(4,1fr)}}
@media(min-width:1280px){.gal-grid{grid-template-columns:repeat(5,1fr)}}

/* Lightbox */
.lb{position:fixed;inset:0;z-index:1100;display:flex;align-items:center;justify-content:center;
  background:rgba(12,10,8,.94);padding:24px}
.lb[hidden]{display:none}
.lb img{max-width:92vw;max-height:88vh;border-radius:8px;box-shadow:0 20px 60px rgba(0,0,0,.5);object-fit:contain}
.lb-x{position:absolute;top:14px;right:18px;font-size:34px;line-height:1;color:#fff;background:none;border:none;cursor:pointer;z-index:2}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);font-size:44px;line-height:1;color:#fff;
  background:rgba(255,255,255,.08);border:none;width:56px;height:56px;border-radius:50%;cursor:pointer}
.lb-prev{left:16px}.lb-next{right:16px}
.lb-nav:hover{background:rgba(255,255,255,.18)}
.lb-cap{position:absolute;bottom:18px;left:0;right:0;text-align:center;color:#fff;font-family:var(--fB);font-size:13px;opacity:.85}
@media(max-width:600px){.lb-nav{width:44px;height:44px;font-size:34px}.lb-x{top:8px;right:12px}}

/* ── BLOG POST ─────────────────────────────────────────────────────────
   The blog has no counterpart in the Astro source — there is no /blog/
   route there at all — so this layout is built from the design system
   rather than ported.

   The first version reused the marketing hero unchanged. That hero is tuned
   for four-word headlines at up to 76px; a twelve-word article title set at
   that size filled the entire first screen before a reader reached a single
   sentence. `.phero-post` keeps the same ground and rhythm but sizes the
   title for reading and tightens the vertical space. */

/* One measure for the whole article.
   `.wrap` resolves its 5% padding against the section, not against itself, so
   two different max-widths produce two different left edges. The title sat at
   x=382 while the image sat at x=312 — a 70px stagger that read as broken
   rather than deliberate. Hero, image and prose now share --post-measure. */
.phero-post,.post-figure,.post-body{--post-measure:860px}
/* `.wrap` pads by 5% of the *section*, so on a 2560px monitor the gutter grows
   to 128px a side and the reading column shrinks to 604px — narrower than on a
   1440px laptop, which made the title wrap onto more lines the wider the screen
   got. Cap the gutter so the measure is stable above laptop widths. */
.phero-post .wrap,.post-figure,.post-body .wrap{padding-inline:clamp(20px,5%,52px)}
.phero-post{padding:calc(var(--nav) + 24px) 0 28px}
.phero-post .wrap{max-width:var(--post-measure)}

.post-cat{font-family:var(--fM);font-size:9px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--blue);font-weight:600;margin-bottom:14px}

/* Article titles run long. At the marketing hero's 50px a twelve-word title
   was 220px tall and pushed the first sentence 1,156px down the page. */
.post-title{font-family:var(--fD);font-weight:600;font-size:clamp(27px,2.8vw,38px);
  line-height:1.14;letter-spacing:-.012em;color:var(--ink);text-wrap:balance}

.post-meta{display:flex;gap:10px;flex-wrap:wrap;align-items:center;
  font-size:13.5px;color:var(--gray);margin-top:18px}
.post-meta a{color:var(--gray)}
.post-meta a:hover{color:var(--blue)}
/* Separators are generated on the following item so a wrap never leaves a
   dangling "·" at the end of a line, which it did on narrow screens. */
.post-meta > * + *::before{content:'·';margin-right:10px;opacity:.45}

/* Featured image sits tight under the hero and overlaps the section below. */
.post-figure{max-width:var(--post-measure);margin:0 auto;padding:0 5%}
/* Crop to a banner. The source images are near-square (1305x1080), which
   rendered 675px tall and buried the article under its own illustration. */
.post-hero-img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
  max-height:440px;margin-top:0;border-radius:var(--radius);
  box-shadow:var(--shadow-lg,var(--shadow));display:block}

.post-body{padding-top:36px}
.post-body .wrap{max-width:var(--post-measure)}

.page-links{margin-top:32px;padding-top:20px;border-top:1px solid var(--rule);
  font-family:var(--fB);font-size:14px;color:var(--gray);display:flex;gap:10px;flex-wrap:wrap}
.page-links a{color:var(--blue)}

/* Previous / next */
.post-nav{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:40px;
  padding-top:26px;border-top:1px solid var(--rule)}
.post-nav-item{display:flex;flex-direction:column;gap:6px;padding:18px 20px;
  background:#fff;border:1px solid var(--rule);border-radius:var(--radius);
  transition:border-color .18s,transform .18s}
.post-nav-item:hover{border-color:var(--blue);transform:translateY(-2px)}
.post-nav-item.is-next{text-align:right;align-items:flex-end}
.post-nav-k{font-family:var(--fM);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--gray)}
.post-nav-t{font-family:var(--fD);font-size:17px;line-height:1.25;color:var(--ink)}
@media(max-width:640px){.post-nav{grid-template-columns:1fr}
  .post-nav-item.is-next{text-align:left;align-items:flex-start}}

/* Article heading scale.
   `.vhr-prose h2` is tuned for program pages, where it is the largest thing
   on screen at up to 36px. Inside an article that put body headings within
   2px of the 38px h1, so the page had no clear hierarchy. Scoped down here
   only — program and location prose are untouched. */
.post-body .vhr-prose h2{font-size:clamp(22px,2.1vw,28px);margin-top:1.9em}
.post-body .vhr-prose h3{font-size:clamp(18px,1.6vw,21px)}
.post-body .vhr-prose h4{font-size:16px}