:root {
    --paper: #f0f1f4;
    --paper-2: #e3e5ec;
    --surface: #ffffff;
    --ink: #0b0b0e;
    --ink-2: #5a5d6b;
    --ink-deep: #1b1b22;
    --line: rgba(11, 11, 14, 0.12);
    --line-strong: rgba(11, 11, 14, 0.22);
    --muted: rgba(11, 11, 14, 0.70);
    --accent: #2d4ad6;
    --accent-ink: #ffffff;
    --accent-deep: color-mix(in oklch, var(--accent) 82%, #000);
    /* Card elevation — tight contact shadow (negative spread) so cards read as
       grounded objects, not a diffuse soft-halo. Hover tints toward accent. */
    --shadow-card: 0 1px 2px rgba(11,11,14,0.05), 0 12px 24px -16px rgba(11,11,14,0.22);
    --shadow-card-hover: 0 2px 4px rgba(11,11,14,0.06), 0 20px 36px -18px color-mix(in oklch, var(--accent) 32%, rgba(11,11,14,0.20));
    --closed: #c8362b;   /* semantic red for closed / canceled states — fixed, independent of the accent theme so "no/closed" always reads red */
    --display: "Bricolage Grotesque", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --sans: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    --pad: 32px;
    --gutter: 28px;
  }

  * { box-sizing: border-box; }
  /* overflow-x: clip (not hidden) — clip stops sideways scroll without making
     html/body a scroll container, which would break the sticky nav inside. */
  html, body { margin: 0; padding: 0; overflow-x: clip; max-width: 100%; }
  body {
    font-family: var(--sans);
    background: var(--paper);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: clip;
  }
  a { color: inherit; text-decoration: none; }
  button { font: inherit; cursor: pointer; }
  img { display: block; max-width: 100%; }

  /* Skip link + screen-reader utilities */
  .sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }
  .sr-only-focusable:focus-visible {
    position: fixed;
    top: 8px; left: 8px;
    width: auto; height: auto;
    padding: 12px 20px; margin: 0;
    overflow: visible; clip: auto;
    white-space: normal;
    background: var(--ink); color: var(--paper);
    font-weight: 600; font-size: 15px;
    border-radius: 8px; z-index: 9999;
    text-decoration: none;
    outline: 2px solid var(--accent); outline-offset: 2px;
  }

  /* Global keyboard focus indicator */
  :focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 3px;
  }

  .wrap { padding: 0 var(--pad); }
  .rule { border-top: 1px solid var(--line); }
  .rule-strong { border-top: 1px solid var(--ink); }

  .mono {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 500;
  }
  .display { font-family: var(--display); letter-spacing: -0.02em; line-height: 0.92; font-weight: 700; }

  /* Top utility bar */
  .util {
    background: var(--ink);
    color: var(--paper);
    font-size: 12px;
    letter-spacing: 0.04em;
  }
  .util-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px var(--pad);
    gap: 24px;
  }
  .util a { opacity: 0.78; transition: opacity .15s; }
  .util a:hover { opacity: 1; }
  .util .left, .util .right { display: flex; align-items: center; gap: 22px; }
  .util .pip { width: 6px; height: 6px; border-radius: 999px; background: var(--accent); }
  .loc-switch {
    display: inline-flex; align-items: center; gap: 4px;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 999px;
    padding: 4px 4px 4px 12px;
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  }
  .loc-switch .opts { display: inline-flex; gap: 2px; margin-left: 8px; }
  .loc-switch button, .loc-switch a, .loc-switch .cur {
    background: transparent; color: inherit; border: 0;
    padding: 4px 8px; border-radius: 999px;
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
    text-decoration: none;
  }
  /* Current region: highlighted indicator, not a link (no redundant self-navigation). */
  .loc-switch .cur { background: var(--accent); color: #fff; cursor: default; }
  .loc-switch button[aria-pressed="true"], .loc-switch a[aria-pressed="true"] { background: var(--accent); color: white; }

  /* Nav */
  .nav-wrap { position: sticky; top: 0; z-index: 40; background: var(--paper); border-bottom: 1px solid var(--line);
    transition: box-shadow .25s ease, border-color .25s ease, background .25s ease; }
  /* On scroll: elevate + condense so the bar separates cleanly from content. */
  .nav-wrap.is-scrolled { box-shadow: 0 6px 24px rgba(11,11,14,0.10); border-bottom-color: transparent;
    background: color-mix(in oklch, var(--paper) 88%, transparent); backdrop-filter: saturate(1.1) blur(8px); }
  .nav {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    padding: 18px var(--pad);
    gap: 36px;
    transition: padding .25s ease;
  }
  .nav-wrap.is-scrolled .nav { padding-top: 10px; padding-bottom: 10px; }
  .brand { display: flex; align-items: center; gap: 12px; }
  .logo-mark {
    width: 38px; height: 38px;
    background: var(--ink); color: var(--paper);
    display: grid; place-items: center;
    font-family: var(--display); font-weight: 800; font-size: 22px;
    letter-spacing: -0.05em;
    position: relative;
  }
  .logo-mark::after {
    content: ""; position: absolute; inset: 0;
    border: 1px solid var(--ink);
    transform: translate(4px, 4px);
    z-index: -1;
    background: var(--accent);
  }
  .brand-name {
    font-family: var(--display);
    font-weight: 800;
    font-size: 18px;
    letter-spacing: -0.02em;
    line-height: 1;
  }
  .brand-sub {
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.6;
    margin-top: 4px;
  }
  .nav-links {
    display: flex; align-items: center; gap: 4px;
    justify-self: center;
    background: var(--paper-2);
    border-radius: 999px;
    padding: 4px;
    border: 1px solid var(--line);
  }
  .nav-link {
    padding: 9px 16px;
    min-height: 44px;
    font-size: 13px;
    font-weight: 500;
    border-radius: 999px;
    color: var(--ink-2);
    transition: background .15s, color .15s;
    cursor: pointer;
    border: 0; background: transparent;
    display: inline-flex; align-items: center; gap: 6px;
  }
  .nav-link:hover { background: rgba(0,0,0,0.05); }
  .nav-link.is-active { background: var(--ink); color: var(--paper); }
  .nav-link .chev { width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); opacity: 0.5; margin-top: -3px; }
  .nav-cta { display: flex; align-items: center; gap: 10px; }

  .btn {
    display: inline-flex; align-items: center; gap: 10px;
    border: 0; border-radius: 999px;
    padding: 12px 18px;
    font-size: 13px; font-weight: 600;
    letter-spacing: 0.01em;
    transition: transform .12s ease, background .15s, color .15s;
    cursor: pointer;
  }
  .btn:active { transform: translateY(1px); }
  .btn-primary { background: var(--accent); color: white; }
  .btn-primary:hover { background: var(--accent-deep); }
  .btn-ink { background: var(--ink); color: var(--paper); }
  .btn-ink:hover { background: #000; }
  .btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line-strong); }
  .btn-ghost:hover { background: rgba(0,0,0,0.05); }
  .btn .arr {
    display: inline-grid; place-items: center;
    width: 18px; height: 18px; border-radius: 999px;
    background: rgba(255,255,255,0.18);
    transition: transform .2s ease, background .15s;
  }
  .btn-ghost .arr { background: rgba(0,0,0,0.07); }
  .btn .arr svg { width: 10px; height: 10px; }
  /* Forward-arrow CTAs (primary/ink) nudge the arrow on hover — the same "go"
     micro-interaction used on the card more-links and roster links. Scoped to
     primary/ink so it never touches the ghost "show more" chevron toggle. */
  .btn-primary:hover .arr, .btn-ink:hover .arr { transform: translate(2px, -2px); }
  @media (prefers-reduced-motion: reduce) { .btn-primary:hover .arr, .btn-ink:hover .arr { transform: none; } }

  /* Hero */
  .hero {
    padding: 34px var(--pad) 24px;
    position: relative;
    isolation: isolate;
    overflow: clip;
  }
  /* Oversized accent trajectory sweeping in from the top-right — athletic energy
     in the airy first fold without drenching it. Atmosphere only: behind all
     content, no pointer interaction, clipped to the hero box. */
  .hero::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -40vw; right: -24vw;
    width: 80vw; height: 80vw;
    max-width: 1040px; max-height: 1040px;
    border-radius: 50%;
    border: 1.5px solid color-mix(in oklch, var(--accent) 26%, transparent);
    box-shadow: 0 0 160px color-mix(in oklch, var(--accent) 12%, transparent);
    pointer-events: none;
  }
  .hero-meta {
    display: flex; justify-content: space-between; align-items: center;
    padding-bottom: 16px;
  }
  .hero-meta .col { display: flex; gap: 24px; align-items: center; }
  .pill {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 7px 14px;
    border: 0;
    border-radius: 999px;
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
    font-weight: 600;
    background: var(--accent);
    color: var(--accent-ink);
    box-shadow: 0 8px 20px color-mix(in oklch, var(--accent) 32%, transparent);
  }
  .pill .dot { width: 7px; height: 7px; border-radius: 999px; background: #fff; animation: pulse 2s infinite; }
  @keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.2); }
  }
  /* Tap-for-directions address pill — outlined so it reads as a secondary,
     clickable chip next to the solid accent status pill. Address stays
     readable (no all-caps tracking); pin + lift on hover signal the link. */
  .pill-addr {
    background: var(--surface);
    color: var(--ink);
    border: 1px solid var(--line-strong, var(--border));
    box-shadow: none;
    text-transform: none;
    letter-spacing: 0.01em;
    font-size: 11px;
    text-decoration: none;
    transition: border-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease;
  }
  .pill-addr svg { color: var(--accent); flex: none; transition: transform .2s ease; }
  .pill-addr:hover {
    border-color: var(--accent);
    color: var(--accent);
    box-shadow: 0 8px 20px color-mix(in oklch, var(--accent) 18%, transparent);
    transform: translateY(-1px);
  }
  .pill-addr:hover svg { transform: scale(1.12); }
  /* Let the meta row wrap gracefully when both pills + volume label are present. */
  .hero-meta .col { flex-wrap: wrap; row-gap: 10px; }
  @media (prefers-reduced-motion: reduce) {
    .pill-addr, .pill-addr svg { transition: none; }
    .pill-addr:hover { transform: none; }
    .pill-addr:hover svg { transform: none; }
  }

  .hero-title {
    font-family: var(--display);
    font-weight: 800;
    font-size: clamp(72px, 11vw, 96px);
    line-height: 0.84;
    letter-spacing: -0.035em;
    margin: 0;
    text-wrap: balance;
  }
  .hero-title .ital {
    font-style: italic;
    font-weight: 700;
    color: var(--accent);
    position: relative;
    display: inline-block;
    padding-bottom: 0.04em;
  }
  /* Focal word gets a drawn accent stroke that sweeps in once the headline has
     settled — the single bold typographic moment of the fold. */
  .hero-title .ital::after {
    content: "";
    position: absolute;
    left: -0.01em; right: -0.01em; bottom: 0.01em;
    height: 0.11em;
    background: var(--accent);
    border-radius: 999px;
    transform: scaleX(0);
    transform-origin: left center;
    animation: tf-underline 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.8s forwards;
  }
  @keyframes tf-underline { to { transform: scaleX(1); } }
  .hero-title .outline {
    -webkit-text-stroke: 2px var(--ink);
    color: transparent;
  }

  .hero-row2 {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: var(--gutter);
    margin-top: 36px;
    /* Image and tryout card share one row height, so the card matches the photo
       no matter how many tryout dates it lists (each column stretches to fill). */
    align-items: stretch;
  }

  .hero-image {
    aspect-ratio: 16 / 10;
    background: var(--ink);
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 26px 64px -30px rgba(11, 11, 14, 0.6);
  }
  /* Bottom scrim so the overlaid tag reads cleanly over any photo. */
  .hero-image::after {
    content: "";
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(to top, rgba(11, 11, 14, 0.55) 0, transparent 40%);
    pointer-events: none;
  }
  .hero-image img { transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); }
  .hero-image:hover img { transform: scale(1.04); }
  .placeholder-photo {
    width: 100%; height: 100%;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 10px; text-align: center; padding: 16px;
    background: var(--ink-deep);
    color: rgba(255,255,255,0.65);
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  }
  .placeholder-photo .ph-label::before { content: "[ "; }
  .placeholder-photo .ph-label::after { content: " ]"; }
  .placeholder-photo .ph-spec {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 12px;
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 999px;
    font-size: 10px; letter-spacing: 0.14em;
    color: rgba(255,255,255,0.85);
    background: rgba(0,0,0,0.25);
    white-space: nowrap;
  }
  .placeholder-photo .ph-spec::before {
    content: ""; width: 6px; height: 6px; border-radius: 999px;
    background: var(--accent); flex-shrink: 0;
  }

  .hero-image .tag-bl {
    position: absolute; left: 18px; bottom: 18px; z-index: 2;
    background: var(--accent); color: var(--accent-ink);
    padding: 9px 14px; border-radius: 999px;
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
    font-weight: 600;
    box-shadow: 0 10px 24px color-mix(in oklch, var(--accent) 34%, transparent);
  }
  .hero-image .tag-tr {
    position: absolute; right: 20px; top: 20px; z-index: 2;
    color: var(--paper); opacity: 0.85;
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
    /* quiet, repeating nudge toward the scroll the conversion path depends on */
    animation: tf-scroll-cue 2.6s ease-in-out infinite;
  }
  @keyframes tf-scroll-cue {
    0%, 100% { transform: translateY(0); opacity: 0.7; }
    50%      { transform: translateY(4px); opacity: 1; }
  }

  .hero-side {
    display: flex; flex-direction: column; gap: 18px;
  }
  .hero-side-card {
    border: 1px solid #17203a;
    /* brighter brand-navy with soft accent-blue corner glows (echoes the commits
       section) so the card reads with depth + color instead of flat black */
    background:
      radial-gradient(78% 72% at 0% 0%, color-mix(in oklch, var(--accent) 46%, transparent) 0, transparent 60%),
      radial-gradient(78% 72% at 100% 100%, color-mix(in oklch, var(--accent) 34%, transparent) 0, transparent 58%),
      #17203a;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.12); /* hairline top highlight */
    color: var(--paper);
    padding: 22px;
    border-radius: 8px;
    display: flex; flex-direction: column; gap: 14px;
    flex: 1; /* fill the stretched column so the card matches the photo height */
  }
  .hero-side-card .kicker { color: color-mix(in oklch, var(--accent) 35%, #fff); }
  .hero-side-card h2 {
    margin: 0;
    font-family: var(--display);
    font-weight: 800;
    font-size: clamp(28px, 3.2vw, 34px);
    line-height: 0.98;
    letter-spacing: -0.025em;
  }
  .hero-side-card .dates {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
    margin-top: 4px;
  }
  .date-chip {
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 6px;
    padding: 10px 12px;
  }
  .date-chip .d { font-family: var(--display); font-size: 24px; font-weight: 800; line-height: 1; letter-spacing: -0.02em; }
  .date-chip .l { font-family: var(--mono); font-size: 9px; letter-spacing: 0.18em; opacity: 0.7; margin-top: 6px; text-transform: uppercase; }

  .hero-side-cta {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
    margin-top: auto; /* anchor the buttons to the bottom when the card is taller */
  }
  .hero-side-cta .btn { width: 100%; justify-content: center; }
  /* When only one track has a URL set, the lone button spans the full width. */
  .hero-side-cta .btn:only-child { grid-column: 1 / -1; }

  .hero-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 2px solid var(--ink);
    border-bottom: 2px solid var(--ink);
    margin-top: 64px;
  }
  .hero-stat {
    padding: 26px 18px 22px;
    border-right: 1px solid var(--line);
    display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
    position: relative;
  }
  /* Accent tick riding the top rule — turns the row into a scoreboard. */
  .hero-stat::before {
    content: ""; position: absolute; top: -2px; left: 0;
    width: 40px; height: 2px; background: var(--accent);
  }
  .hero-stat:last-child { border-right: 0; }
  .hero-stat .n {
    font-family: var(--display);
    font-weight: 800;
    font-size: clamp(54px, 6.2vw, 82px);
    line-height: 0.84;
    letter-spacing: -0.04em;
  }
  .hero-stat .l {
    text-align: left;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-2);
    max-width: 170px;
    line-height: 1.45;
  }

  /* Marquee */
  .marquee {
    background: var(--ink);
    color: var(--paper);
    overflow: hidden;
    padding: 22px 0;
    border-top: 1px solid var(--ink);
  }
  .marquee-track {
    display: flex;
    gap: 56px;
    width: max-content;
    animation: marq 40s linear infinite;
    will-change: transform;
  }
  .marquee-item {
    display: inline-flex; align-items: center; gap: 56px;
    font-family: var(--display);
    font-size: 40px;
    font-weight: 800;
    letter-spacing: -0.025em;
    white-space: nowrap;
  }
  .marquee-item .star {
    width: 28px; height: 28px;
    color: var(--accent);
    flex-shrink: 0;
  }
  @keyframes marq {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
  }

  /* Program Finder */
  .finder {
    padding: 96px var(--pad) 48px;
    position: relative;
    /* faint accent bleed (top-right) — the light-register echo of the dark
       sections' radial glows, kept at a whisper so it reads as atmosphere */
    background:
      radial-gradient(60% 50% at 100% 0%, color-mix(in oklch, var(--accent) 6%, transparent), transparent 62%),
      var(--paper);
  }
  .section-head {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 36px;
    align-items: end;
    margin-bottom: 48px;
  }
  .section-head .num {
    font-family: var(--mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--muted);
    display: flex; gap: 16px; align-items: center;
  }
  .section-head .num::after {
    content: ""; width: 56px; height: 1px; background: var(--ink);
  }
  .section-head h2 {
    margin: 0;
    font-family: var(--display); font-weight: 700;
    font-size: clamp(40px, 6vw, 84px);
    letter-spacing: -0.03em;
    line-height: 0.96;
    max-width: 14ch;
  }
  .section-head .lede {
    max-width: 38ch;
    font-size: 16px;
    line-height: 1.5;
    color: var(--muted);
    justify-self: start;
    text-wrap: pretty;
  }
  /* On mobile the two-column head (heading | lede) squeezes the lede into a
     narrow side column and wastes vertical space. Stack it: lede sits directly
     under the heading and uses the full width. Applies to every section that
     uses .section-head (commits, testimonials, about, locations, finder, programs). */
  @media (max-width: 720px) {
    .section-head {
      grid-template-columns: 1fr;
      gap: 16px;
      align-items: start;
    }
    .section-head h2 { max-width: 20ch; }
    .section-head .lede { max-width: none; justify-self: stretch; }
  }

  .finder-card {
    border: 1px solid var(--line-strong);
    border-radius: 16px;
    background: var(--paper-2);
    overflow: hidden;
    /* The conversion router should sit highest on the page — accent-tinted
       elevation above the program cards + a crisp top highlight. */
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.6),
      0 2px 4px rgba(11,11,14,0.05),
      0 22px 48px -26px color-mix(in oklch, var(--accent) 30%, rgba(11,11,14,0.32));
  }
  .finder-tabs {
    display: grid; grid-template-columns: repeat(3, 1fr);
    border-bottom: 1px solid var(--line-strong);
  }
  .finder-tab {
    padding: 18px 22px;
    background: transparent;
    border: 0;
    border-right: 1px solid var(--line);
    text-align: left;
    cursor: pointer;
    display: flex; flex-direction: column; gap: 4px;
    transition: background .15s, box-shadow .15s;
  }
  .finder-tab:last-child { border-right: 0; }
  .finder-tab:hover { background: rgba(0,0,0,0.03); }
  /* Active step rides an accent progress tick (same scoreboard-tick motif as
     .hero-stat and the commit-year bar) so the user sees where they are. */
  .finder-tab.is-active { background: var(--paper); box-shadow: inset 0 3px 0 var(--accent); }
  .finder-tab .step {
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted);
  }
  .finder-tab .lbl { font-family: var(--display); font-weight: 700; font-size: 22px; letter-spacing: -0.02em; }
  .finder-tab .val { font-size: 13px; color: var(--muted); margin-top: 2px; }

  .finder-body { padding: 28px; }
  .finder-step h3 {
    margin: 0 0 18px;
    font-family: var(--display); font-weight: 700; font-size: 24px; letter-spacing: -0.02em;
  }
  .finder-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
  .finder-opt {
    border: 1px solid var(--line-strong);
    background: var(--paper);
    border-radius: 10px;
    padding: 14px 14px;
    text-align: left;
    cursor: pointer;
    display: flex; flex-direction: column; gap: 6px;
    transition: border-color .15s, background .15s, box-shadow .15s, transform .12s ease;
  }
  .finder-opt:hover { border-color: color-mix(in oklch, var(--accent) 55%, var(--line-strong)); transform: translateY(-2px); }
  /* Selected = accent fill: brand color injected exactly where the user acts. */
  .finder-opt.is-selected {
    border-color: var(--accent);
    background: var(--accent);
    color: #fff;
    box-shadow: 0 8px 18px -8px color-mix(in oklch, var(--accent) 50%, transparent);
  }
  .finder-opt.is-selected:hover { transform: translateY(-2px); }
  .finder-opt.is-selected .sub { color: rgba(255,255,255,0.9); }
  .finder-opt .ttl { font-weight: 600; font-size: 15px; }
  /* Descriptive helper phrases ("First touches", "I’m flexible", grade ranges) —
     body sans in normal case reads far easier than the mono/all-caps label style,
     which is reserved for true short tags (chips, kickers, the tab step labels). */
  .finder-opt .sub { font-size: 12.5px; color: var(--muted); font-weight: 500; line-height: 1.3; }

  /* The payoff. Deep-navy field (matches the commits 'credential wall') with an
     accent glow behind the matched program, an inset highlight, and a rise-in
     entrance — so completing the funnel feels rewarded, not just answered. */
  .finder-result {
    position: relative;
    overflow: hidden;
    margin-top: 24px;
    padding: 24px;
    border: 1px solid color-mix(in oklch, var(--accent) 30%, #0a1024);
    border-radius: 12px;
    color: var(--paper);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 24px;
    align-items: center;
    background:
      radial-gradient(70% 120% at 100% 0%, color-mix(in oklch, var(--accent) 38%, transparent) 0, transparent 60%),
      linear-gradient(180deg, #16203f 0%, #0e1630 60%, #0a1024 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 16px 36px -18px rgba(10,16,36,0.7);
    animation: tf-finder-pop 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  @keyframes tf-finder-pop { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  @media (prefers-reduced-motion: reduce) { .finder-result { animation: none; } }
  .finder-result .kicker { color: color-mix(in oklch, var(--accent) 55%, white); font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; }
  .finder-result h3 { margin: 4px 0 6px; font-family: var(--display); font-weight: 700; font-size: 28px; letter-spacing: -0.02em; line-height: 1; }
  .finder-result p { margin: 0; opacity: 0.8; font-size: 14px; max-width: 60ch; }

  /* Programs bento */
  .programs {
    padding: 24px var(--pad) 96px;
    background:
      radial-gradient(55% 45% at 0% 8%, color-mix(in oklch, var(--accent) 5%, transparent), transparent 60%),
      var(--paper);
  }
  .bento {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--gutter);
  }
  .card {
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    box-shadow: var(--shadow-card);
    transition: transform .25s ease, border-color .25s, box-shadow .25s ease;
    display: flex; flex-direction: column;
  }
  .card:hover { transform: translateY(-3px); border-color: var(--line-strong); box-shadow: var(--shadow-card-hover); }
  .card .cover { position: relative; overflow: hidden; }
  .card .cover .placeholder-photo { aspect-ratio: 16/10; }
  .card .body { padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
  .card .body .row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .card .ttl {
    font-family: var(--display); font-weight: 700; font-size: 28px; letter-spacing: -0.02em; line-height: 1;
  }
  .card .desc { font-size: 14px; color: var(--muted); line-height: 1.55;
    /* cap card copy at 3 lines so cards stay short; full text lives on the
       program's own page via "Learn more". */
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3;
    overflow: hidden; }
  .card .meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
  .chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 10px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 999px;
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  }
  .card .more {
    margin-top: auto;
    padding-top: 14px;
    display: flex; align-items: center; justify-content: space-between;
    font-size: 13px; font-weight: 600;
    color: var(--ink);
  }
  .card .more .arr {
    width: 36px; height: 36px; border-radius: 999px;
    background: var(--ink); color: var(--paper);
    display: grid; place-items: center;
    transition: background .15s, transform .25s ease;
  }
  .card:hover .more .arr { background: var(--accent); transform: rotate(-45deg); }

  /* spans */
  .c-12 { grid-column: span 12; }
  .c-8 { grid-column: span 8; }
  .c-6 { grid-column: span 6; }
  .c-5 { grid-column: span 5; }
  .c-4 { grid-column: span 4; }
  .c-3 { grid-column: span 3; }
  .c-7 { grid-column: span 7; }

  .card.feature { background: var(--ink); color: var(--paper); border-color: var(--ink); }
  .card.feature .desc { color: rgba(255,255,255,0.65); }
  .card.feature .chip { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.15); color: var(--paper); }
  .card.feature .more { color: var(--paper); }
  .card.feature .more .arr { background: var(--accent); }
  .card.feature .body { padding: 28px; }
  .card.feature .ttl {
    font-size: clamp(36px, 4vw, 56px);
    line-height: 0.92;
  }
  .card.feature .cover .placeholder-photo {
    aspect-ratio: 16/9;
    background: #15151a;
  }

  /* Full-width flagship: a feature card at c-12 becomes a horizontal banner on
     desktop (image beside content) instead of one very tall stacked image.
     Stacks back to image-on-top below the bento breakpoint. */
  .bento .card.feature.c-12 > .cover > img,
  .bento .card.feature.c-12 > .cover > .placeholder-photo { aspect-ratio: 16/9; width: 100%; object-fit: cover; }
  @media (min-width: 901px) {
    .bento .card.feature.c-12 { display: grid; grid-template-columns: 1.15fr 1fr; align-items: stretch; }
    .bento .card.feature.c-12 > .cover { height: 100%; }
    .bento .card.feature.c-12 > .cover > img,
    .bento .card.feature.c-12 > .cover > .placeholder-photo { aspect-ratio: auto; height: 100%; }
    .bento .card.feature.c-12 > .body { padding: 44px; justify-content: center; }
    .bento .card.feature.c-12 .ttl { font-size: clamp(40px, 4.2vw, 60px); }
  }

  .card.accent { background: var(--accent); color: white; border-color: var(--accent); }
  .card.accent .desc { color: rgba(255,255,255,0.78); }
  .card.accent .chip { background: rgba(0,0,0,0.15); border-color: rgba(255,255,255,0.2); color: white; }
  .card.accent .more { color: white; }
  .card.accent .more .arr { background: white; color: var(--accent); }

  /* Commits / scroller — themeable via [data-commits-theme] (set from Site → Brand & Theme).
     Base values = Accent (dark); the [data-commits-theme="paper"] block below flips to light. */
  .commits {
    --cm-bg: #0e1630; --cm-fg: var(--paper); --cm-dim: rgba(240,241,244,0.66);
    --cm-rule: rgba(255,255,255,0.12); --cm-rule-soft: rgba(255,255,255,0.08);
    --cm-accent: var(--accent); --cm-chip-active-bg: var(--accent); --cm-chip-active-fg: #fff;
    color: var(--cm-fg); padding: 96px 0 80px; border-top: 1px solid var(--cm-bg);
    /* Deep brand-navy field with real dynamic range: a dark vertical anchor
       (lit at the top, deep at the floor), ONE concentrated accent "stadium
       light" top-left + a cooler counter-glow, and a fine dot-matrix for
       material — depth and crispness instead of flat mid-navy haze.
       (Paper theme overrides this background entirely, so this is dark-only.) */
    position: relative;
    background:
      radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1.5px) 0 0 / 26px 26px,
      linear-gradient(180deg, rgba(255,255,255,0.07) 0, transparent 200px),
      radial-gradient(42% 52% at 6% -8%, color-mix(in oklch, var(--accent) 42%, transparent) 0, transparent 50%),
      radial-gradient(36% 46% at 102% 108%, color-mix(in oklch, var(--accent) 22%, transparent) 0, transparent 48%),
      linear-gradient(180deg, #16203f 0%, #0e1630 54%, #0a1024 100%); }
  /* hairline highlight at the very top — fades at the edges for a premium lift */
  .commits::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18) 18%, rgba(255,255,255,0.22) 50%, rgba(255,255,255,0.18) 82%, transparent); }
  [data-commits-theme="paper"].commits { background: var(--cm-bg); }
  .commits .section-head h2 { color: var(--cm-fg); }
  .commits .section-head .num { color: var(--cm-dim); }
  .commits .section-head .num::after { background: var(--cm-fg); }
  .commits .section-head .lede { color: var(--cm-dim); }
  .commits .section-head { padding: 0 var(--pad); margin-bottom: 56px; }

  .commit-grid {
    padding: 0 var(--pad);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
  }
  /* Class-year groups */
  .commit-year + .commit-year { margin-top: 30px; }
  .commit-year-label {
    position: relative;
    display: flex; align-items: baseline; gap: 14px;
    margin: 0 var(--pad) 16px;
    padding: 0 0 12px 16px;
    border-bottom: 1px solid var(--cm-rule);
  }
  .commit-year-label::before {
    content: ""; position: absolute; left: 0; top: 2px; bottom: 12px;
    width: 4px; border-radius: 3px; background: var(--accent);
    box-shadow: 0 0 14px color-mix(in oklch, var(--accent) 55%, transparent);
  }
  .commit-year-label .yr { font-family: var(--display); font-weight: 700; font-size: 26px; letter-spacing: -0.02em; line-height: 1; color: var(--cm-fg); }
  .commit-year-label .ct { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cm-dim); }

  .commit {
    position: relative;
    border: 1px solid color-mix(in oklch, var(--cm-fg) 14%, transparent);
    border-radius: 12px;
    padding: 16px;
    display: flex; flex-direction: column; gap: 8px;
    /* glassy raised tile — the "credential wall": top-lit surface + drop shadow
       so each commit reads as a crafted object, not a faint hairline cell.
       Token-based (--cm-fg) so it works in both the dark and paper themes. */
    background: linear-gradient(180deg, color-mix(in oklch, var(--cm-fg) 9%, transparent) 0%, color-mix(in oklch, var(--cm-fg) 3.5%, transparent) 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 8px 18px -10px rgba(0,0,0,0.55);
    transition: border-color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease;
  }
  .commit:hover {
    border-color: color-mix(in oklch, var(--accent) 75%, transparent);
    background: linear-gradient(180deg, color-mix(in oklch, var(--accent) 22%, transparent) 0%, color-mix(in oklch, var(--accent) 8%, transparent) 100%);
    transform: translateY(-3px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 16px 30px -12px color-mix(in oklch, var(--accent) 45%, rgba(0,0,0,0.5));
  }
  .commit .name {
    font-family: var(--display); font-weight: 700; font-size: 20px; letter-spacing: -0.02em; line-height: 1.05;
  }
  .commit-div {
    align-self: flex-start;
    font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
    padding: 4px 8px; border-radius: 999px;
    color: var(--cm-fg);
    background: color-mix(in oklch, var(--accent) 40%, transparent);
    border: 1px solid color-mix(in oklch, var(--accent) 62%, transparent);
  }
  .commit .school { font-size: 14px; opacity: 0.9; margin-top: 6px; display: flex; align-items: center; gap: 8px; }
  .commit .school .accent { color: var(--cm-accent); }
  .commit-logo { position: relative; width: 26px; height: 26px; border-radius: 6px; flex-shrink: 0; display: grid; place-items: center; overflow: hidden; font-family: var(--display); font-weight: 700; font-size: 10px; line-height: 1; color: var(--cm-fg); background: hsl(var(--h, 210) 52% 55% / 0.22); }
  .commit-logo .commit-logo-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 3px; background: #fff; }

  .commits-foot {
    padding: 48px var(--pad) 0;
    display: flex; align-items: center; justify-content: space-between;
    border-top: 1px solid rgba(255,255,255,0.1);
    margin: 56px var(--pad) 0;
    padding: 32px 0 0;
  }

  /* Testimonials */
  .testimonials {
    padding: 96px var(--pad);
    position: relative;
    isolation: isolate;
    background:
      radial-gradient(60% 55% at 0% 100%, color-mix(in oklch, var(--accent) 6%, transparent), transparent 60%),
      var(--paper);
  }
  /* Quiet recurring brand geometry — a faint accent ring echoing the hero's
     orbit, bleeding off the top-right edge. Sits behind content (z-index:-1
     inside the isolated context, the same pattern .hero uses). */
  .testimonials::before {
    content: ""; position: absolute; z-index: -1; pointer-events: none;
    right: -16vw; top: -12vw;
    width: 50vw; height: 50vw; max-width: 700px; max-height: 700px;
    border-radius: 50%;
    border: 1.5px solid color-mix(in oklch, var(--accent) 16%, transparent);
  }
  .test-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--gutter); align-items: start; }
  .test-card {
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    background: var(--ink);
    color: var(--paper);
    display: flex; flex-direction: column;
  }
  .test-card .cover { aspect-ratio: 4 / 5; flex: none; position: relative; }
  .test-card .cover .placeholder-photo { width: 100%; height: 100%; aspect-ratio: auto; }
  .test-card .play {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
    width: 72px; height: 72px; border-radius: 999px;
    background: var(--accent);
    color: #fff;
    display: grid; place-items: center;
    box-shadow: 0 8px 24px -6px rgba(0,0,0,0.45);
    transition: transform .2s, background .15s;
  }
  .test-card:hover .play { transform: translate(-50%,-50%) scale(1.06); background: var(--accent-deep); }

  .pull-quote {
    grid-column: span 1;
    background: var(--paper);
    color: var(--ink);
    padding: 28px;
    border-radius: 16px;
    border: 1px solid var(--line);
    display: flex; flex-direction: column; gap: 18px;
    min-height: 420px;
  }
  .pull-quote .mark {
    font-family: var(--display); font-weight: 800; font-size: 88px; line-height: 0.7;
    color: var(--accent);
  }
  .pull-quote .body {
    font-family: var(--display); font-weight: 500; font-size: 22px; line-height: 1.2; letter-spacing: -0.01em;
    flex: 1; text-wrap: pretty;
  }
  .pull-quote .who { display: flex; gap: 12px; align-items: center; padding-top: 14px; border-top: 1px solid var(--line); }
  .pull-quote .avatar {
    width: 40px; height: 40px; border-radius: 999px;
    flex-shrink: 0; overflow: hidden;
    display: grid; place-items: center;
    background: color-mix(in oklch, var(--accent) 14%, var(--paper-2));
    color: var(--accent);
    font-family: var(--display); font-weight: 700; font-size: 15px; letter-spacing: -0.02em;
  }
  .pull-quote .avatar img { width: 100%; height: 100%; object-fit: cover; }
  .pull-quote .name { font-weight: 600; font-size: 14px; }
  .pull-quote .role { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-top: 2px; }

  /* About */
  .about {
    background:
      radial-gradient(55% 50% at 0% 0%, color-mix(in oklch, var(--accent) 5%, transparent), transparent 58%),
      var(--paper-2);
    padding: 96px var(--pad);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    position: relative;
    isolation: isolate;
  }
  /* Court-line texture — a large faint grid, masked so it fades inward and never
     tiles hard to the edge. Reads as precision/scoreboard, not decoration. */
  .about::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image:
      linear-gradient(to right, rgba(11,11,14,0.045) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(11,11,14,0.045) 1px, transparent 1px);
    background-size: 96px 96px;
    -webkit-mask-image: radial-gradient(120% 80% at 50% 0%, #000 28%, transparent 74%);
            mask-image: radial-gradient(120% 80% at 50% 0%, #000 28%, transparent 74%);
  }
  .about-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 64px;
    align-items: start;
  }
  .about-mission {
    font-family: var(--display); font-weight: 500;
    font-size: clamp(28px, 3vw, 40px);
    line-height: 1.15; letter-spacing: -0.02em;
    text-wrap: pretty;
  }
  .about-mission em { font-style: italic; color: var(--accent); font-weight: 500; }

  .leaders { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 0; }
  .leader {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 16px;
    box-shadow: var(--shadow-card);
    display: flex; flex-direction: column; gap: 12px;
  }
  .leader .pic { aspect-ratio: 1/1; border-radius: 8px; background: var(--ink); overflow: hidden; }
  .leader .pic .placeholder-photo { aspect-ratio: 1/1; }
  .leader .name { font-family: var(--display); font-weight: 700; font-size: 20px; letter-spacing: -0.02em; }
  .leader .role { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }

  /* Locations */
  .locations {
    padding: 96px var(--pad);
    position: relative;
    isolation: isolate;
    background:
      radial-gradient(58% 50% at 100% 0%, color-mix(in oklch, var(--accent) 6%, transparent), transparent 60%),
      var(--paper);
  }
  .locations::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image:
      linear-gradient(to right, rgba(11,11,14,0.04) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(11,11,14,0.04) 1px, transparent 1px);
    background-size: 88px 88px;
    -webkit-mask-image: radial-gradient(120% 75% at 50% 100%, #000 26%, transparent 72%);
            mask-image: radial-gradient(120% 75% at 50% 100%, #000 26%, transparent 72%);
  }
  .loc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); }
  .loc-card {
    border: 1px solid var(--line-strong);
    border-radius: 16px;
    overflow: hidden;
    background: var(--paper-2);
    box-shadow: var(--shadow-card);
    transition: border-color .25s, box-shadow .25s ease, transform .25s ease;
    position: relative;
  }
  .loc-card:hover { border-color: var(--ink); box-shadow: var(--shadow-card-hover); transform: translateY(-3px); }
  .loc-card .map { aspect-ratio: 4/3; position: relative; display: block; background: var(--ink-deep); overflow: hidden; }
  .loc-card .map img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .loc-card .body { padding: 22px; }
  .loc-card h3 { margin: 0 0 6px; font-family: var(--display); font-weight: 700; font-size: 28px; letter-spacing: -0.02em; }
  .loc-card .sub { font-size: 14px; color: var(--muted); }
  .loc-card .stats { display: flex; gap: 18px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
  .loc-card .stat .n { font-family: var(--display); font-weight: 700; font-size: 24px; letter-spacing: -0.02em; line-height: 1; }
  .loc-card .stat .l { font-family: var(--mono); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }

  /* CTA */
  .cta-band {
    background: var(--accent);
    color: white;
    padding: 80px var(--pad);
    position: relative; overflow: hidden;
  }
  .cta-band::before {
    content: ""; position: absolute; inset: 0;
    background:
      radial-gradient(circle at 20% 50%, rgba(255,255,255,0.07) 0, transparent 40%),
      radial-gradient(circle at 80% 30%, rgba(0,0,0,0.15) 0, transparent 40%);
    pointer-events: none;
  }
  .cta-grid {
    position: relative;
    display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: end;
  }
  .cta-band h2 {
    margin: 0;
    font-family: var(--display); font-weight: 800;
    font-size: clamp(56px, 7vw, 96px); line-height: 0.86; letter-spacing: -0.035em;
  }
  .cta-band h2 em { font-style: italic; font-weight: 500; }
  .cta-band .sub {
    font-size: 17px; max-width: 38ch; opacity: 0.9; line-height: 1.5; text-wrap: pretty;
  }
  .cta-band .cta-acts { display: flex; gap: 10px; margin-top: 18px; }
  .cta-band .btn-primary { background: white; color: var(--accent); }
  .cta-band .btn-primary:hover { background: var(--ink); color: white; }
  .cta-band .btn .arr { background: rgba(0,0,0,0.15); }

  /* Footer */
  /* Bottom padding clears the fixed back-to-top button (≈80px tall from the page
     bottom) so the legal + social row is never hidden underneath it. */
  .foot {
    color: var(--paper);
    padding: 64px var(--pad) clamp(84px, 8vw, 96px);
    position: relative;
    /* the only dark block that was flat — now carries the same accent-glow
       depth as commits / guide / cta, calmer (it's the closing note) */
    background:
      radial-gradient(50% 60% at 0% 0%, color-mix(in oklch, var(--accent) 20%, transparent) 0, transparent 55%),
      radial-gradient(46% 56% at 100% 100%, color-mix(in oklch, var(--accent) 14%, transparent) 0, transparent 52%),
      var(--ink);
  }
  /* hairline highlight at the seam with the CTA band above — mirrors .commits::before */
  .foot::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.16) 20%, rgba(255,255,255,0.20) 50%, rgba(255,255,255,0.16) 80%, transparent);
  }
  .foot-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
    gap: 36px;
    padding-bottom: 56px;
    border-bottom: 1px solid rgba(255,255,255,0.12);
  }
  .foot h2 { margin: 0 0 16px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.6; }
  .foot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
  .foot a { font-size: 13px; opacity: 0.8; }
  .foot a:hover { opacity: 1; color: var(--accent); }
  .foot-mark {
    font-family: var(--display); font-weight: 800;
    font-size: clamp(60px, 7vw, 96px);
    line-height: 0.86; letter-spacing: -0.04em;
  }
  .foot-mark em { font-style: italic; font-weight: 500; color: var(--accent); }
  .foot-bot {
    padding-top: 22px;
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 12px 24px;
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  }
  /* opacity on the legal text only — keeping it off the row so the social icons
     below don't inherit a dimmed parent (opacity compounds). */
  .foot-bot > span { opacity: 0.55; }
  .foot-soc { display: inline-flex; align-items: center; gap: 8px; }
  .foot-soc .soc {
    display: inline-grid; place-items: center;
    width: 34px; height: 34px; border-radius: 999px;
    color: var(--paper);
    border: 1px solid rgba(255, 255, 255, 0.16);
    opacity: 0.82;
    transition: background .15s ease, color .15s ease, border-color .15s ease, opacity .15s ease, transform .15s ease;
  }
  .foot-soc .soc:hover {
    background: var(--accent); color: var(--accent-ink);
    border-color: var(--accent); opacity: 1;
    transform: translateY(-2px);
  }
  .foot-soc .soc:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
  /* On phones, stack legal over social and left-align so neither crowds the
     other or the floating back-to-top button. */
  @media (max-width: 520px) {
    .foot-bot { flex-direction: column; align-items: flex-start; gap: 14px; }
  }

  /* Density */
  body[data-density="comfy"] { --pad: 40px; --gutter: 32px; }
  body[data-density="tight"] { --pad: 24px; --gutter: 20px; }

  /* Accent themes */
  body[data-accent="red"] { --accent: #c8362b; }
  body[data-accent="amber"] { --accent: #d97706; }
  body[data-accent="electric"] { --accent: #2d4ad6; }
  body[data-accent="kelly"] { --accent: #15803d; }

  /* Paper themes */
  body[data-paper="warm"] { --paper: #f4f0e6; --paper-2: #ebe6d8; }
  body[data-paper="cool"] { --paper: #f0f1f4; --paper-2: #e3e5ec; }
  body[data-paper="mono"] { --paper: #f4f4f4; --paper-2: #e7e7e7; }

  /* Dark mode */
  body[data-mode="dark"] {
    --paper: #0b0b0e;
    --paper-2: #15151a;
    --ink: #f4f0e6;
    --ink-2: #ebe6d8;
    --ink-deep: #15151a;
    --line: rgba(244,240,230,0.12);
    --line-strong: rgba(244,240,230,0.25);
    --muted: rgba(244,240,230,0.62);
    color: var(--ink);
    background: var(--paper);
  }
  body[data-mode="dark"] .logo-mark { background: var(--paper); color: var(--ink); }
  body[data-mode="dark"] .logo-mark::after { border-color: var(--paper); }
  body[data-mode="dark"] .card.feature { background: #15151a; }
  body[data-mode="dark"] .marquee, body[data-mode="dark"] .commits, body[data-mode="dark"] .foot {
    background: #050507; color: var(--ink); border-color: transparent;
  }
  body[data-mode="dark"] .util { background: #050507; }
  body[data-mode="dark"] .hero-side-card { background: var(--paper-2); }
  body[data-mode="dark"] .placeholder-photo { background: #15151a; color: rgba(255,255,255,0.55); }
  body[data-mode="dark"] .hero-image { background: #15151a; }

  /* Hero variant */
  body[data-hero="overlay"] .hero-row2 { display: none; }
  body[data-hero="overlay"] .hero-fullbg {
    display: block !important;
  }
  .hero-fullbg { display: none; }
  body[data-hero="overlay"] .hero { padding-bottom: 96px; }

  /* Responsive */
  @media (max-width: 1100px) {
    .hero-row2 { grid-template-columns: 1fr; }
    .test-grid { grid-template-columns: 1fr 1fr; }
    .loc-grid, .commit-grid { grid-template-columns: 1fr 1fr; }
    .foot-grid { grid-template-columns: 1fr 1fr 1fr; }
    .about-grid { grid-template-columns: 1fr; }
    .c-8, .c-6, .c-5, .c-4, .c-3, .c-7 { grid-column: span 12; }
    .nav-links { display: none; }
    /* With nav-links hidden, only brand + nav-cta remain in the grid; pin the
       CTA/burger group to the right edge instead of letting it flow into the
       middle 1fr track. */
    .nav-cta { justify-self: end; }
  }
  @media (max-width: 720px) {
    :root { --pad: 18px; --gutter: 16px; }
    .hero-stats { grid-template-columns: 1fr 1fr; }
    .hero-stat:nth-child(2) { border-right: 0; }
    .hero-stat:nth-child(1), .hero-stat:nth-child(2) { border-bottom: 1px solid var(--line); }
    /* stop the big numbers from forcing the grid wider than the screen */
    .hero-stat { min-width: 0; flex-direction: column; align-items: flex-start; gap: 8px; padding: 20px 14px; }
    .hero-stat .n { font-size: clamp(38px, 12vw, 52px); }
    .hero-stat .l { text-align: left; max-width: none; }
    .test-grid, .loc-grid, .commit-grid, .foot-grid { grid-template-columns: 1fr; }
    .util-inner { font-size: 11px; gap: 12px; }
    .util .left .mail, .util .left .addr { display: none; }
    .cta-grid { grid-template-columns: 1fr; }
  }

  /* ── Animation initial states ────────────────────────────────────────────────
     Applied only when JS has confirmed it's running (html.tf-js-anim set in
     <head> inline script). Without JS the class is never added, so all elements
     are visible by default — no content is ever gated on JS loading.

     Backstop: if JS errors after adding the class, a CSS animation reveals
     all elements after 3 s so content is never permanently hidden.
  ──────────────────────────────────────────────────────────────────────────── */
  @keyframes tf-backstop {
    to { opacity: 1; transform: none; }
  }

  html.tf-js-anim .tf-hero-el {
    opacity: 0;
    transform: translateY(22px);
    animation: tf-backstop 0.001ms 2500ms forwards;
  }
  html.tf-js-anim .tf-reveal {
    opacity: 0;
    transform: translateY(32px);
    will-change: opacity, transform;
    animation: tf-backstop 0.001ms 3000ms forwards;
  }
  html.tf-js-anim .tf-reveal[data-reveal-dir="left"] { transform: translateX(-28px); }
  html.tf-js-anim .tf-reveal[data-reveal-dir="right"] { transform: translateX(28px); }
  html.tf-js-anim .tf-stagger-grid > * {
    opacity: 0;
    transform: translateY(24px);
    animation: tf-backstop 0.001ms 3000ms forwards;
  }

  /* Production polish — respect reduced-motion preferences */
  @media (prefers-reduced-motion: reduce) {
    .marquee-track { animation: none; }
    .pill .dot { animation: none; }
    .hero-image .tag-tr { animation: none; opacity: 0.85; }
    .hero-title .ital::after { animation: none; transform: scaleX(1); }
    .hero-image:hover img { transform: none; }
    .foot-soc .soc:hover { transform: none; }
    * { scroll-behavior: auto !important; }
    /* Ensure animated elements are always visible when motion is off */
    html.tf-js-anim .tf-hero-el,
    html.tf-js-anim .tf-reveal,
    html.tf-js-anim .tf-stagger-grid > * {
      opacity: 1 !important;
      transform: none !important;
      animation: none !important;
    }
  }

  /* ============================================================
     MOBILE MENU — hamburger + slide-in drawer
     ============================================================ */
  .nav-burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 46px;
    height: 46px;
    padding: 0 12px;
    border: 1px solid var(--line-strong);
    border-radius: 12px;
    background: var(--paper);
    cursor: pointer;
  }
  .nav-burger span {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--ink);
    border-radius: 2px;
    transition: transform .28s ease, opacity .2s ease;
  }
  body.menu-open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  body.menu-open .nav-burger span:nth-child(2) { opacity: 0; }
  body.menu-open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: var(--ink);
    color: var(--paper);
    display: flex;
    flex-direction: column;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity .3s ease, transform .3s ease;
  }
  body.menu-open .mobile-menu {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  /* the overlay's own header — logo + close X, always pinned at the top */
  .mobile-menu-head {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px var(--pad);
    padding-top: calc(16px + env(safe-area-inset-top, 0px));
    border-bottom: 1px solid rgba(255,255,255,0.14);
    background: var(--ink);
  }
  .mobile-menu-head .brand-name { color: var(--paper); }
  .mobile-menu-head .brand-sub { color: rgba(240,241,244,0.6); }
  .mobile-menu-head .logo-mark { background: var(--paper); color: var(--ink); }
  .mobile-menu-head .logo-mark::after { border-color: var(--paper); }
  .mobile-close {
    flex: none;
    width: 48px; height: 48px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.22);
    background: transparent;
    color: var(--paper);
    display: grid; place-items: center;
    cursor: pointer;
    transition: background .15s, border-color .15s;
  }
  .mobile-close:hover, .mobile-close:active { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.45); }

  /* scrollable region below the header */
  .mobile-menu-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 24px var(--pad) calc(40px + env(safe-area-inset-bottom, 0px));
    display: flex;
    flex-direction: column;
  }

  .mobile-links {
    display: flex;
    flex-direction: column;
    border-top: 1px solid rgba(255,255,255,0.12);
  }
  .mobile-links a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 0;
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(28px, 8vw, 40px);
    letter-spacing: -0.02em;
    line-height: 1;
    border-bottom: 1px solid rgba(255,255,255,0.12);
    transition: color .15s, padding-left .2s;
  }
  .mobile-links a:hover,
  .mobile-links a:active { color: var(--accent); padding-left: 8px; }
  .mobile-links .m-arr { opacity: .45; }

  .mobile-cta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 32px;
  }
  .mobile-cta .btn { width: 100%; justify-content: center; padding: 16px; }

  .mobile-contact {
    margin-top: 28px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.1em;
    opacity: 0.7;
  }
  .mobile-contact a:hover { opacity: 1; color: var(--accent); }

  /* show the burger / hide desktop pieces on tablet + phone */
  @media (max-width: 1100px) {
    .nav-burger { display: flex; }
    .nav-cta .btn-ghost { display: none; }
  }
  @media (max-width: 720px) {
    /* Keep the primary Tryouts CTA reachable in the sticky bar on phones — the
       conversion goal is a tryout click in one session, and this audience is
       mostly mobile. The secondary Open Gym button stays in the drawer. Compact
       the button so it sits beside the burger while holding a 44px touch target. */
    .nav { gap: 14px; }
    .nav-cta { gap: 8px; }
    .nav-cta .btn-ink { padding: 0 15px; min-height: 44px; font-size: 13px; gap: 0; white-space: nowrap; }
    .nav-cta .btn-ink .arr { display: none; }
  }
  @media (max-width: 480px) {
    /* Logo-only brand to guarantee room for logo + Tryouts + burger on small phones. */
    .nav .brand > div:last-child { display: none; }
  }
  /* never let the drawer linger on desktop */
  @media (min-width: 1101px) {
    .mobile-menu { display: none; }
  }

  /* When the tryouts card is toggled off, the hero photo spans full width */
  .hero-row2.no-side { grid-template-columns: 1fr; }

  /* ============================================================
     NAV DROPDOWNS (desktop) + expandable groups (mobile)
     ============================================================ */
  .nav-item.has-dropdown { position: relative; display: inline-flex; }
  .nav-dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    min-width: 240px;
    color: var(--paper);
    /* Same deep-navy command surface as the mega panel, so all dropdowns match. */
    border: 1px solid color-mix(in oklch, var(--accent) 35%, #0a1024);
    border-radius: 14px;
    background:
      radial-gradient(80% 60% at 100% 0%, color-mix(in oklch, var(--accent) 26%, transparent) 0, transparent 60%),
      linear-gradient(180deg, #16203f 0%, #0e1630 100%);
    box-shadow: 0 22px 44px -16px rgba(10,16,36,0.6), inset 0 1px 0 rgba(255,255,255,0.08);
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .16s ease, transform .16s ease;
    z-index: 50;
  }
  /* hover bridge so the menu doesn't vanish when the cursor crosses the gap */
  .nav-item.has-dropdown::after {
    content: "";
    position: absolute;
    top: 100%; left: 0; right: 0;
    height: 10px;
  }
  .nav-item.has-dropdown:hover .nav-dropdown,
  .nav-item.has-dropdown:hover .nav-dropdown,
  .nav-item.has-dropdown.is-open .nav-dropdown,
  .nav-item.has-dropdown:focus-within .nav-dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(8px);
  }
  .dropdown-link {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 6px 14px;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 500;
    color: rgba(240,241,244,0.82);
    white-space: nowrap;
    transition: background .14s, color .14s, padding-left .15s;
  }
  .dropdown-link:hover { background: color-mix(in oklch, var(--accent) 18%, transparent); color: #fff; padding-left: 18px; }

  /* Mobile expandable groups */
  .mobile-group { border-bottom: 1px solid rgba(255,255,255,0.12); }
  .mobile-group-toggle {
    width: 100%;
    background: transparent;
    border: 0;
    color: var(--paper);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 0;
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(28px, 8vw, 40px);
    letter-spacing: -0.02em;
    line-height: 1;
    text-align: left;
  }
  .m-chev {
    width: 14px; height: 14px;
    border-right: 2.5px solid currentColor;
    border-bottom: 2.5px solid currentColor;
    transform: rotate(45deg);
    opacity: .55;
    transition: transform .25s ease;
    margin-right: 4px;
    flex-shrink: 0;
  }
  .mobile-group.open .m-chev { transform: rotate(-135deg); }
  .mobile-sub {
    display: none;
    padding-bottom: 6px;
  }
  .mobile-group.open .mobile-sub { display: block; }
  .mobile-sub a {
    display: block;
    padding: 12px 0 12px 16px;
    font-family: var(--sans);
    font-size: 18px;
    font-weight: 500;
    color: rgba(240,241,244,0.72);
    border-bottom: 1px solid rgba(255,255,255,0.07);
  }
  .mobile-sub a:hover { color: var(--accent); }

  /* ============================================================
     PROGRAM CARD — tier / sub-level list inside a card
     ============================================================ */
  .tier-list { display: flex; flex-direction: column; gap: 4px; margin: 4px 0 2px; }
  .tier {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 11px;
    border-radius: 9px;
    background: var(--paper);
    border: 1px solid var(--line);
    text-decoration: none;
    color: var(--ink);
    transition: border-color .15s, background .15s, transform .12s ease;
  }
  .tier:hover { border-color: var(--ink); transform: translateX(2px); }
  .tier-name { font-weight: 600; font-size: 14px; }
  .tier-meta {
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--muted);
    margin-left: auto;
  }
  .tier-arr {
    display: inline-grid; place-items: center;
    width: 18px; height: 18px; border-radius: 999px;
    background: var(--ink); color: var(--paper);
    flex-shrink: 0;
    transition: background .15s, transform .2s ease;
  }
  .tier-meta + .tier-arr { margin-left: 0; }
  .tier:not(:has(.tier-meta)) .tier-arr { margin-left: auto; }
  .tier:hover .tier-arr { background: var(--accent); transform: rotate(-45deg); }

  /* Named tier toggle: the whole tier list stays collapsed behind a labeled
     button (label is set per card in the Panel). ui.js flips data-collapsed. */
  .tier-block { margin: 4px 0 2px; }
  .tier-list[data-collapsed="true"] { display: none; }
  .tier-toggle {
    display: flex; align-items: center; gap: 10px;
    width: 100%; padding: 9px 12px;
    background: transparent; border: 1px solid var(--line-strong); border-radius: 9px;
    color: var(--ink); cursor: pointer;
    font-family: var(--display); font-weight: 600; font-size: 14px;
    transition: border-color .15s, color .15s, background .15s;
  }
  .tier-toggle:hover { border-color: var(--ink); background: rgba(0,0,0,0.03); }
  .tier-toggle-count {
    font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
    min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
    display: inline-grid; place-items: center;
    background: var(--ink); color: var(--paper);
  }
  .tier-toggle-chev { display: inline-grid; place-items: center; margin-left: auto; transition: transform .2s ease; }
  .tier-toggle[aria-expanded="true"] .tier-toggle-chev { transform: rotate(180deg); }
  .tier-toggle[aria-expanded="true"] { margin-bottom: 6px; }
  /* match the toggle to dark/accent feature cards */
  .card.feature .tier-toggle, .card.accent .tier-toggle { color: var(--paper); border-color: rgba(255,255,255,0.25); }
  .card.feature .tier-toggle:hover, .card.accent .tier-toggle:hover { border-color: rgba(255,255,255,0.6); background: rgba(255,255,255,0.06); }
  .card.feature .tier-toggle-count, .card.accent .tier-toggle-count { background: #fff; color: var(--ink); }

  /* "Read more" under a clamped description (revealed by ui.js on overflow). */
  .card .desc.is-expanded { -webkit-line-clamp: unset; line-clamp: unset; display: block; overflow: visible; }
  .desc-more {
    align-self: flex-start; margin: -2px 0 2px; padding: 2px 0;
    background: none; border: 0; cursor: pointer;
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--accent); text-decoration: underline; text-underline-offset: 3px;
  }
  .desc-more:hover { color: var(--accent-deep); }
  .card.feature .desc-more, .card.accent .desc-more { color: #fff; }
  .desc-more[hidden] { display: none; }

  /* on the dark feature card */
  .card.feature .tier { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.15); color: var(--paper); }
  .card.feature .tier:hover { border-color: rgba(255,255,255,0.45); }
  .card.feature .tier-arr { background: var(--accent); color: #fff; }

  /* on the accent (colored) card */
  .card.accent .tier { background: rgba(0,0,0,0.14); border-color: rgba(255,255,255,0.22); color: #fff; }
  .card.accent .tier:hover { border-color: rgba(255,255,255,0.6); }
  .card.accent .tier-meta { color: rgba(255,255,255,0.7); }
  .card.accent .tier-arr { background: #fff; color: var(--accent); }

  /* ============================================================
     PROGRAM FINDER — "Also consider" secondary recommendations
     ============================================================ */
  .finder-more-label {
    margin: 22px 0 10px;
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--muted);
    display: flex; align-items: center; gap: 14px;
  }
  .finder-more-label::after { content: ""; flex: 1; height: 1px; background: var(--line); }
  .finder-more {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
  }
  .finder-more-card {
    display: flex; flex-direction: column; gap: 4px;
    padding: 16px;
    border: 1px solid var(--line-strong);
    border-radius: 12px;
    background: var(--paper);
    text-decoration: none;
    color: var(--ink);
    position: relative;
    transition: border-color .15s, transform .12s ease;
  }
  .finder-more-card:hover { border-color: var(--ink); transform: translateY(-2px); }
  .fm-title { font-family: var(--display); font-weight: 700; font-size: 18px; letter-spacing: -0.01em; padding-right: 28px; }
  .fm-desc { font-size: 13px; color: var(--muted); line-height: 1.4; }
  .fm-arr {
    position: absolute; top: 14px; right: 14px;
    display: inline-grid; place-items: center;
    width: 24px; height: 24px; border-radius: 999px;
    background: var(--paper-2); color: var(--ink);
    transition: background .15s, transform .2s ease;
  }
  .finder-more-card:hover .fm-arr { background: var(--accent); color: #fff; transform: rotate(-45deg); }

  /* Program Finder — server-rendered fallback inside #tf-finder. finder.js wipes
     and rebuilds the mount on load; this remains only when JS is slow, blocked, or
     fails, so the section is never an empty card. Reuses the .finder-more cards. */
  .finder-fallback { padding: 28px; }
  .finder-fallback-head h3 { margin: 0 0 6px; font-family: var(--display); font-weight: 700; font-size: 24px; letter-spacing: -0.02em; }
  .finder-fallback-head p { margin: 0 0 20px; font-size: 15px; line-height: 1.5; color: var(--muted); max-width: 52ch; text-wrap: pretty; }

  /* ============================================================
     COMMITS — show all / show fewer toggle
     ============================================================ */
  .commit.is-hidden { display: none; }
  .commit-grid.show-all .commit.is-hidden { display: flex; }
  .commits-toggle-wrap { padding: 32px var(--pad) 0; display: flex; justify-content: center; }
  .commits-toggle { cursor: pointer; }
  .commits-toggle .commits-toggle-arr { transition: transform .25s ease; }
  .commits-toggle:hover .commits-toggle-arr { background: color-mix(in oklch, var(--cm-fg) 22%, transparent) !important; }

  /* ============================================================
     MEGA MENU (desktop) — full-width multi-column panel
     ============================================================ */
  .nav-item { position: relative; display: inline-flex; }
  .nav-item.has-mega { position: static; }
  .nav-link.is-open, .nav-item.is-open > .nav-link { background: var(--ink); color: var(--paper); }
  .mega-panel {
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    color: var(--paper);
    /* Deep-navy command panel — the same dark surface as commits / finder
       result. Color alone separates it from the light page (no more white-on-
       near-white blend), with accent glows + an accent seam for premium depth. */
    border-top: 1px solid color-mix(in oklch, var(--accent) 45%, transparent);
    border-bottom: 1px solid #0a1024;
    background:
      radial-gradient(40% 80% at 100% 0%, color-mix(in oklch, var(--accent) 30%, transparent) 0, transparent 55%),
      radial-gradient(30% 70% at 0% 100%, color-mix(in oklch, var(--accent) 18%, transparent) 0, transparent 50%),
      linear-gradient(180deg, #16203f 0%, #0e1630 100%);
    box-shadow: 0 28px 56px -16px rgba(10,16,36,0.55);
    z-index: 45;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-6px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
  }
  .nav-item.has-mega.is-open .mega-panel,
  .nav-item.has-mega:hover .mega-panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }
  /* bridge the gap between the nav link and the panel below.
     Scoped to the LINK width (not the static full-width item) so it doesn't
     create a full-width invisible hover strip under the whole nav bar. */
  .nav-item.has-mega > .nav-link { position: relative; }
  .nav-item.has-mega > .nav-link::after {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 100%;
    height: 12px;
  }
  .mega-inner { max-width: 1400px; margin: 0 auto; padding: 32px var(--pad) 36px; }
  .mega-cols { display: grid; gap: 32px; }
  .mega-col { display: flex; flex-direction: column; min-width: 0; opacity: 0; transform: translateY(10px); transition: opacity .32s cubic-bezier(.22,1,.36,1), transform .32s cubic-bezier(.22,1,.36,1); }
  .mega-heading {
    position: relative;
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
    color: color-mix(in oklch, var(--accent) 50%, white);
    padding-bottom: 12px; margin-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.12);
  }
  /* accent tick riding the heading rule — the scoreboard motif, repeated */
  .mega-heading::after {
    content: ""; position: absolute; left: 0; bottom: -1px;
    width: 28px; height: 2px; background: var(--accent);
  }
  .mega-links { display: flex; flex-direction: column; gap: 1px; }
  .mega-link {
    display: block;
    padding: 9px 10px;
    margin: 0 -10px;
    border-radius: 8px;
    font-size: 15px; font-weight: 500;
    color: rgba(240,241,244,0.82);
    text-decoration: none;
    transition: background .14s, color .14s, padding-left .15s;
  }
  .mega-link:hover { background: color-mix(in oklch, var(--accent) 18%, transparent); color: #fff; padding-left: 16px; }

  /* Columns rise in with a slight stagger when the panel opens. */
  .nav-item.has-mega.is-open .mega-col,
  .nav-item.has-mega:hover .mega-col { opacity: 1; transform: none; }
  .nav-item.has-mega.is-open .mega-col:nth-child(2), .nav-item.has-mega:hover .mega-col:nth-child(2) { transition-delay: .05s; }
  .nav-item.has-mega.is-open .mega-col:nth-child(3), .nav-item.has-mega:hover .mega-col:nth-child(3) { transition-delay: .10s; }
  .nav-item.has-mega.is-open .mega-col:nth-child(4), .nav-item.has-mega:hover .mega-col:nth-child(4) { transition-delay: .15s; }
  @media (prefers-reduced-motion: reduce) {
    .mega-col { opacity: 1; transform: none; transition: none; }
  }

  /* Featured callout (mega menu) — an accent CTA card that stands out against the
     navy panel. Used for seasonal pushes like tryout registration; toggled on/off
     and edited in the Panel (Navigation & CTAs → the menu item → Featured callout).
     When present, the panel splits into [columns | feature]. */
  .mega-inner.has-feature { display: grid; grid-template-columns: 1fr 260px; gap: 32px; align-items: stretch; }
  .mega-feature {
    display: flex; flex-direction: column; gap: 7px; justify-content: center;
    padding: 18px 20px; border-radius: 14px;
    color: #fff; text-decoration: none;
    position: relative; overflow: hidden;
    background:
      radial-gradient(120% 120% at 100% 0%, color-mix(in oklch, #fff 14%, var(--accent)) 0, var(--accent) 55%),
      var(--accent);
    box-shadow: 0 16px 30px -12px color-mix(in oklch, var(--accent) 60%, transparent);
    transition: transform .18s ease, box-shadow .18s ease;
  }
  .mega-feature:hover { transform: translateY(-3px); box-shadow: 0 24px 42px -12px color-mix(in oklch, var(--accent) 72%, transparent); }
  .mf-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; }
  .mf-eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: #fff; animation: pulse 2s infinite; flex-shrink: 0; }
  .mf-title { font-family: var(--display); font-weight: 800; font-size: 22px; letter-spacing: -0.02em; line-height: 1.02; }
  .mf-text { font-size: 13px; line-height: 1.45; color: rgba(255,255,255,0.9); }
  .mf-meta { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.85); }
  .mf-cta {
    margin-top: 8px; align-self: flex-start;
    display: inline-flex; align-items: center; gap: 8px;
    background: #fff; color: var(--accent);
    font-weight: 600; font-size: 13px;
    padding: 9px 15px; border-radius: 999px;
  }
  .mf-cta .arr { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 999px; background: color-mix(in oklch, var(--accent) 14%, transparent); transition: transform .2s ease; }
  .mf-cta .arr svg { width: 10px; height: 10px; }
  .mega-feature:hover .mf-cta .arr { transform: rotate(-45deg); }
  /* In the mobile drawer the card is an <a>, so .mobile-sub a (display:block,
     padding, dim color, 18px, bottom border) would override it and collapse the
     stacked spans into one run-on line. Restore the flex card explicitly with
     higher specificity, and give it generous spacing for clear line separation. */
  .mobile-sub .mega-feature {
    display: flex; flex-direction: column;
    align-items: flex-start; text-align: left; /* one consistent axis (matches the drawer) */
    gap: 11px;
    margin: 4px 0 16px;
    padding: 20px;
    font-family: var(--sans);
    font-size: 14px;
    color: #fff;
    border-bottom: 0;
  }
  .mobile-sub .mega-feature:hover { color: #fff; }
  .mobile-sub .mega-feature .mf-text { line-height: 1.5; }
  @media (prefers-reduced-motion: reduce) { .mf-eyebrow::before { animation: none; } }

  /* mobile sub-groups (mega columns become labeled sections in the drawer) */
  .mobile-subgroup { padding: 4px 0 8px; }
  .mobile-subhead {
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
    color: rgba(240,241,244,0.5);
    padding: 12px 0 4px;
  }
  .mobile-subgroup a { font-size: 16px !important; padding: 10px 0 10px 14px !important; font-family: var(--sans) !important; font-weight: 500 !important; }

  /* ============================================================
     PROGRAM GUIDE callout band
     ============================================================ */
  .guide-band { padding: 8px var(--pad) 88px; }
  .programs .guide-band { padding: 8px 0 64px; }
  .guide-inner {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 48px;
    align-items: center;
    background: var(--ink);
    color: var(--paper);
    border-radius: 20px;
    padding: 48px;
    position: relative;
    overflow: hidden;
  }
  .guide-inner::after {
    content: "";
    position: absolute; right: -80px; top: -80px;
    width: 320px; height: 320px; border-radius: 999px;
    background: radial-gradient(circle, color-mix(in oklch, var(--accent) 35%, transparent) 0, transparent 70%);
    pointer-events: none;
  }
  .guide-eyebrow {
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
    color: color-mix(in oklch, var(--accent) 55%, white);
  }
  .guide-title {
    margin: 12px 0 14px;
    font-family: var(--display); font-weight: 700;
    font-size: clamp(30px, 3.4vw, 46px);
    line-height: 1.02; letter-spacing: -0.025em;
    max-width: 16ch;
  }
  .guide-lede { margin: 0; font-size: 16px; line-height: 1.55; color: rgba(240,241,244,0.7); max-width: 46ch; text-wrap: pretty; }
  .guide-right { position: relative; }
  .guide-points { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
  .guide-points li { display: flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 500; }
  .guide-tick {
    display: inline-grid; place-items: center;
    width: 26px; height: 26px; border-radius: 999px; flex-shrink: 0;
    background: var(--accent); color: #fff;
  }
  .guide-cta { background: var(--paper); color: var(--ink); white-space: nowrap; }
  .guide-cta:hover { background: #fff; }
  .guide-cta .arr { background: rgba(0,0,0,0.1); }
  .guide-meta { margin-top: 12px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(240,241,244,0.5); }

  @media (max-width: 900px) {
    .guide-inner { grid-template-columns: 1fr; gap: 28px; padding: 36px 28px; }
    .guide-title { max-width: none; }
  }

  /* ============================================================
     CLUB PROGRAMS — comparison page
     ============================================================ */
  .cp-hero { padding: 56px var(--pad) 8px; }
  .cp-eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); display: flex; gap: 14px; align-items: center; }
  .cp-eyebrow::after { content: ""; width: 56px; height: 1px; background: var(--ink); }
  .cp-title { font-family: var(--display); font-weight: 800; font-size: clamp(48px, 7vw, 96px); line-height: 0.9; letter-spacing: -0.035em; margin: 20px 0 0; }
  .cp-title .ital { font-style: italic; font-weight: 500; color: var(--accent); }
  .cp-lede { max-width: 60ch; font-size: 17px; line-height: 1.55; color: var(--muted); margin: 22px 0 0; text-wrap: pretty; }
  .cp-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 40px var(--pad) 0; }
  .cp-toggle { display: inline-flex; background: var(--paper-2); border: 1px solid var(--line); border-radius: 999px; padding: 5px; gap: 4px; }
  .cp-toggle button { border: 0; background: transparent; font: inherit; font-weight: 600; font-size: 15px; padding: 11px 26px; border-radius: 999px; cursor: pointer; color: var(--ink-2); transition: background .15s, color .15s; }
  .cp-toggle button.is-active { background: var(--ink); color: var(--paper); }
  .cp-season-note { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
  .cp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); padding: 28px var(--pad) 40px; grid-template-rows: repeat(7, auto); }
  .cp-gender { display: contents; }
  .cp-gender.is-hidden { display: none; }
  .cp-card { grid-row: span 7; display: grid; grid-template-rows: subgrid; row-gap: 0; border: 1px solid var(--line-strong); border-radius: 18px; background: var(--surface); overflow: hidden; box-shadow: var(--shadow-card); }
  .cp-card.is-flagship { border-color: var(--ink); }
  .cp-card > * { padding-left: 26px; padding-right: 26px; }
  .cp-card-head { padding-top: 26px; padding-bottom: 22px; border-bottom: 1px solid var(--line); position: relative; }
  .cp-flag { position: absolute; top: 18px; right: 18px; white-space: nowrap; font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; background: var(--accent); color: #fff; padding: 5px 10px; border-radius: 999px; }
  .cp-tier { font-family: var(--display); font-weight: 700; font-size: 30px; letter-spacing: -0.02em; line-height: 1; padding-right: 130px; margin: 0; }
  .cp-tier-sub { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-top: 8px; }
  .cp-price { margin-top: 18px; display: flex; flex-direction: column; gap: 3px; }
  .cp-price .amt { font-family: var(--display); font-weight: 800; font-size: 38px; letter-spacing: -0.03em; line-height: 1; }
  .cp-price .amt small { font-size: 15px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
  .cp-price .tier2 { font-size: 13px; color: var(--muted); }
  .cp-blurb { padding-top: 22px; margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
  .cp-block { padding-top: 22px; }
  .cp-sec-label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
  .cp-tags { display: flex; flex-wrap: wrap; gap: 6px; }
  .cp-tag { font-size: 12px; font-weight: 500; padding: 5px 10px; border-radius: 999px; background: var(--paper-2); border: 1px solid var(--line); }
  .cp-incl { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
  .cp-incl li { display: flex; gap: 10px; font-size: 14px; line-height: 1.4; }
  .cp-incl .tick { flex-shrink: 0; width: 18px; height: 18px; border-radius: 999px; background: color-mix(in oklch, var(--accent) 16%, transparent); color: var(--accent); display: grid; place-items: center; margin-top: 1px; }
  .cp-season { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .cp-stat { border: 1px solid var(--line); border-radius: 10px; padding: 12px; background: var(--paper-2); }
  .cp-stat .n { font-family: var(--display); font-weight: 700; font-size: 22px; letter-spacing: -0.02em; line-height: 1; }
  .cp-stat .l { font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-top: 6px; line-height: 1.3; }
  .cp-runs { font-size: 13px; color: var(--muted); }
  .cp-runs strong { color: var(--ink); font-weight: 600; }
  .cp-note { padding-top: 16px; margin: 22px 0 0; font-size: 12px; line-height: 1.5; color: var(--muted); border-top: 1px solid var(--line); }
  .cp-foot { padding-top: 22px; padding-bottom: 26px; align-self: end; }
  .cp-cta { width: 100%; justify-content: center; }
  .cp-ages { padding: 48px var(--pad) 96px; }
  .cp-ages-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 22px; }
  .cp-ages-head h2 { font-family: var(--display); font-weight: 700; font-size: clamp(26px, 3.5vw, 40px); letter-spacing: -0.025em; margin: 0; }
  .cp-ages-head p { font-size: 14px; color: var(--muted); margin: 0; }
  .cp-table { width: 100%; border-collapse: collapse; border: 1px solid var(--line-strong); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-card); }
  .cp-table th, .cp-table td { text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--line); font-size: 14px; }
  .cp-table thead th { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); background: var(--paper-2); }
  .cp-table tbody tr:last-child td { border-bottom: 0; }
  .cp-table tbody tr:hover { background: var(--paper-2); }
  .cp-table .age { font-family: var(--display); font-weight: 700; font-size: 17px; letter-spacing: -0.01em; }
  .cp-table .grad { font-family: var(--mono); font-size: 12px; color: var(--accent); }
  @media (max-width: 980px) {
    .cp-grid { display: block; max-width: 560px; margin: 0 auto; }
    .cp-card { display: flex; flex-direction: column; margin-bottom: var(--gutter); }
    .cp-foot { align-self: stretch; margin-top: auto; }
  }

  /* ============================================================
     PROGRAMS — training/camps offerings page
     ============================================================ */
  .pg-hero { padding: 56px var(--pad) 8px; }
  .pg-eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); display: flex; gap: 14px; align-items: center; }
  .pg-eyebrow::after { content: ""; width: 56px; height: 1px; background: var(--ink); }
  .pg-title { font-family: var(--display); font-weight: 800; font-size: clamp(48px, 7vw, 96px); line-height: 0.9; letter-spacing: -0.035em; margin: 20px 0 0; }
  .pg-title .ital { font-style: italic; font-weight: 500; color: var(--accent); }
  .pg-lede { max-width: 60ch; font-size: 17px; line-height: 1.55; color: var(--muted); margin: 22px 0 0; text-wrap: pretty; }
  .pg-jump { position: sticky; top: 0; z-index: 20; background: color-mix(in oklch, var(--paper) 88%, transparent); backdrop-filter: blur(10px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-top: 40px; }
  .pg-jump-inner { display: flex; gap: 6px; padding: 12px var(--pad); overflow-x: auto; scrollbar-width: none; }
  .pg-jump-inner::-webkit-scrollbar { display: none; }
  .pg-jump a { white-space: nowrap; font-size: 13px; font-weight: 600; padding: 9px 15px; border-radius: 999px; color: var(--ink-2); border: 1px solid var(--line); background: var(--paper); transition: background .15s, color .15s, border-color .15s; text-decoration: none; }
  .pg-jump a:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
  .pg-cat { padding: 64px var(--pad) 0; scroll-margin-top: 70px; }
  .pg-cat-head { display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: end; margin-bottom: 28px; }
  .pg-cat-head h2 { font-family: var(--display); font-weight: 700; font-size: clamp(30px, 4.5vw, 56px); letter-spacing: -0.03em; line-height: 0.98; margin: 0; }
  .pg-cat-head .blurb { font-size: 15px; color: var(--muted); line-height: 1.5; max-width: 40ch; justify-self: end; text-align: right; }
  .pg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); }
  .pg-card { display: flex; flex-direction: column; border: 1px solid var(--line-strong); border-radius: 16px; background: var(--surface); padding: 24px; box-shadow: var(--shadow-card); transition: transform .2s, border-color .2s, box-shadow .2s; }
  .pg-card:hover { transform: translateY(-3px); border-color: var(--ink); box-shadow: var(--shadow-card-hover); }
  .pg-card.is-flagship { border-color: var(--ink); }
  .pg-flag { align-self: flex-start; margin-top: 12px; font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; background: var(--accent); color: #fff; padding: 5px 10px; border-radius: 999px; }
  .pg-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
  .pg-card h3 { font-family: var(--display); font-weight: 700; font-size: 22px; letter-spacing: -0.02em; line-height: 1.05; margin: 0; }
  .pg-abbr { flex-shrink: 0; font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; background: var(--ink); color: var(--paper); padding: 4px 8px; border-radius: 6px; }
  .pg-card .desc { font-size: 14px; line-height: 1.55; color: var(--ink-2); margin: 14px 0 0; }
  .pg-meta { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; }
  .pg-meta-row { display: flex; gap: 10px; align-items: baseline; font-size: 13px; }
  .pg-meta-row .k { font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); width: 56px; flex-shrink: 0; }
  .pg-meta-row .v { color: var(--ink); font-weight: 500; }
  .pg-levels { display: flex; gap: 5px; flex-wrap: wrap; }
  .pg-lvl { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--paper-2); border: 1px solid var(--line); }
  .pg-card .more { margin-top: auto; padding-top: 18px; display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 600; color: var(--ink); text-decoration: none; }
  .pg-card .more .arr { width: 32px; height: 32px; border-radius: 999px; background: var(--ink); color: var(--paper); display: grid; place-items: center; transition: background .15s, transform .2s; }
  /* Animate the register arrow only when that link itself is hovered/focused —
     not on whole-card hover — so it doesn't fire alongside the card lift or when
     the pointer is on the dates panel below it. */
  .pg-card .more:hover .arr, .pg-card .more:focus-visible .arr { background: var(--accent); transform: rotate(-45deg); }

  /* Live "Upcoming dates" disclosure on a program card. Collapsed by default;
     the whole list is server-rendered (cached), so opening is instant. The
     summary is a full-width bar button — deliberately distinct from the round
     ".more" arrow above it so it's obvious THIS is what opens/closes the list. */
  .pg-dates { margin-top: 14px; }
  .pg-dates-sum { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 9px; padding: 11px 14px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--paper-2); color: var(--ink); font-size: 13px; font-weight: 600; user-select: none; transition: border-color .15s, background .15s, color .15s; }
  .pg-dates-sum::-webkit-details-marker { display: none; }
  .pg-dates-sum:hover { border-color: var(--accent); color: var(--accent); }
  .pg-dates[open] .pg-dates-sum { border-color: var(--ink); background: var(--surface); border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
  .pg-dates-cal { display: inline-flex; color: var(--accent); flex-shrink: 0; }
  .pg-dates-sum:hover .pg-dates-cal { color: var(--accent); }
  .pg-dates-lbl { display: inline-flex; align-items: center; gap: 8px; }
  .pg-dates-txt.is-open { display: none; }
  .pg-dates[open] .pg-dates-txt.is-closed { display: none; }
  .pg-dates[open] .pg-dates-txt.is-open { display: inline; }
  .pg-dates-count { font-family: var(--mono); font-size: 10px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--accent); color: var(--accent-ink, #fff); display: inline-grid; place-items: center; }
  .pg-dates[open] .pg-dates-count { display: none; }
  .pg-dates-chev { margin-left: auto; display: inline-flex; color: var(--ink-2); flex-shrink: 0; transition: transform .2s, color .15s; }
  .pg-dates-sum:hover .pg-dates-chev { color: var(--accent); }
  .pg-dates[open] .pg-dates-chev { transform: rotate(180deg); color: var(--ink); }
  .pg-dates-body { border: 1px solid var(--ink); border-top: 0; border-radius: 0 0 10px 10px; padding: 4px 14px 8px; }
  .pg-dates-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
  .pg-date { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
  .pg-date:first-child { border-top: 0; }
  .pg-date-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .pg-date-when { font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.3; }
  .pg-date-time { color: var(--ink-2); font-weight: 500; }
  .pg-date-name { font-size: 11.5px; color: var(--muted); line-height: 1.3; }
  /* Nested per-session times (shown when an event's session times vary). */
  .pg-sessions { margin-top: 5px; }
  .pg-sessions-sum { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.04em; color: var(--accent); font-weight: 600; user-select: none; }
  .pg-sessions-sum::-webkit-details-marker { display: none; }
  .pg-sessions-sum:hover { text-decoration: underline; }
  .pg-sessions-chev { display: inline-flex; transition: transform .2s; }
  .pg-sessions[open] .pg-sessions-chev { transform: rotate(180deg); }
  .pg-sessions-list { list-style: none; margin: 6px 0 2px; padding: 8px 10px; display: flex; flex-direction: column; gap: 5px; background: var(--paper-2); border-radius: 8px; }
  .pg-session { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 12px; }
  .pg-session .ps-date { color: var(--ink); font-weight: 500; }
  .pg-session .ps-time { color: var(--ink-2); font-family: var(--mono); font-size: 11px; white-space: nowrap; }
  @media (prefers-reduced-motion: reduce) { .pg-sessions-chev { transition: none; } }
  .pg-date-act { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
  .pg-date-price { font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--ink); }
  .pg-date-reg { font-size: 12px; font-weight: 600; text-decoration: none; color: var(--accent-ink, #fff); background: var(--accent); padding: 6px 12px; border-radius: 999px; white-space: nowrap; transition: filter .15s, transform .15s; }
  .pg-date-reg:hover { filter: brightness(1.08); transform: translateY(-1px); }
  .pg-dates-empty { font-size: 13px; color: var(--ink-2); margin: 4px 0 10px; }
  @media (prefers-reduced-motion: reduce) { .pg-dates-sum, .pg-dates-chev, .pg-date-reg { transition: none; } .pg-date-reg:hover { transform: none; } }
  @media (max-width: 480px) { .pg-date { flex-direction: column; align-items: flex-start; gap: 6px; } .pg-date-act { width: 100%; justify-content: space-between; } }

  .pg-foot { padding: 80px var(--pad) 96px; }
  @media (prefers-reduced-motion: reduce) { .pg-card:hover { transform: none; } .pg-card .more:hover .arr { transform: none; } }
  @media (max-width: 900px) { .pg-grid { grid-template-columns: 1fr 1fr; } .pg-cat-head { grid-template-columns: 1fr; gap: 12px; } .pg-cat-head .blurb { justify-self: start; text-align: left; } }
  @media (max-width: 600px) { .pg-grid { grid-template-columns: 1fr; } }

  /* ============================================================
     FAQ — accordion Q&A grouped by category
     ============================================================ */
  /* FAQ — bold athletic "playbook index": heavy display type, decisive ink
     rules per topic, a circular accent toggle, and an ink-drenched closing CTA. */
  .fq-hero { padding: clamp(52px, 8vw, 92px) var(--pad) 8px; }
  .fq-eyebrow { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink); display: flex; gap: 14px; align-items: center; }
  .fq-eyebrow::before { content: ""; width: 9px; height: 9px; border-radius: 2px; background: var(--accent); flex-shrink: 0; }
  .fq-eyebrow::after { content: ""; width: 48px; height: 3px; border-radius: 2px; background: var(--accent); }
  .fq-title { font-family: var(--display); font-weight: 800; font-size: clamp(54px, 9vw, 96px); line-height: 0.86; letter-spacing: -0.04em; margin: 22px 0 0; text-wrap: balance; }
  .fq-title .ital { font-style: italic; font-weight: 500; color: var(--accent); }
  .fq-lede { max-width: 56ch; font-size: clamp(17px, 2vw, 20px); line-height: 1.5; color: var(--ink-2); margin: 26px 0 0; text-wrap: pretty; }

  /* Search tools — live filter across all questions */
  .fq-tools { padding: clamp(28px, 4vw, 40px) var(--pad) 0; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
  .fq-search { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 240px; max-width: 540px; padding: 15px 18px; border: 2px solid var(--line-strong); border-radius: 14px; background: var(--surface); transition: border-color .15s, box-shadow .15s; }
  .fq-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in oklch, var(--accent) 14%, transparent); }
  .fq-search svg { color: var(--ink-2); flex-shrink: 0; }
  .fq-search input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 16px; font-weight: 500; color: var(--ink); outline: none; }
  .fq-search input::placeholder { color: var(--ink-2); font-weight: 400; }
  .fq-results { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
  .fq-noresults { margin: 36px var(--pad) 0; padding: 30px 24px; border: 2px dashed var(--line-strong); border-radius: 14px; text-align: center; color: var(--ink-2); font-size: 15px; }
  .fq-noresults[hidden] { display: none; }

  /* Sticky topic jump bar */
  .fq-jump { position: sticky; top: 0; z-index: 20; background: color-mix(in oklch, var(--paper) 86%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line-strong); margin-top: clamp(36px, 5vw, 56px); }
  .fq-jump-inner { display: flex; gap: 8px; padding: 14px var(--pad); overflow-x: auto; scrollbar-width: none; }
  .fq-jump-inner::-webkit-scrollbar { display: none; }
  .fq-jump a { white-space: nowrap; font-size: 13px; font-weight: 700; letter-spacing: -0.01em; padding: 10px 16px; border-radius: 999px; color: var(--ink); border: 1.5px solid var(--line-strong); background: var(--surface); transition: background .15s, color .15s, border-color .15s, transform .15s; text-decoration: none; }
  .fq-jump a:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); transform: translateY(-1px); }
  /* Horizontal jump bars (faqs / programs / tournaments): an edge-fade on mobile
     signals the chips scroll sideways. Pure CSS, no JS, shared across the three. */
  @media (max-width: 900px) {
    .fq-jump-inner, .pg-jump-inner, .tn-jump-inner {
      -webkit-mask-image: linear-gradient(to right, transparent, #000 22px, #000 calc(100% - 22px), transparent);
              mask-image: linear-gradient(to right, transparent, #000 22px, #000 calc(100% - 22px), transparent);
    }
  }

  /* Topic sections — each opens with a heavy display masthead over a thick rule */
  .fq-cat { padding: clamp(56px, 8vw, 100px) var(--pad) 0; scroll-margin-top: 76px; }
  .fq-cat:last-of-type { padding-bottom: 8px; }
  .fq-cat-head { display: flex; align-items: center; gap: 18px; margin-bottom: clamp(18px, 2.5vw, 28px); padding-bottom: 16px; border-bottom: 3px solid var(--ink); flex-wrap: wrap; }
  .fq-cat-head h2 { font-family: var(--display); font-weight: 800; font-size: clamp(32px, 5.5vw, 58px); letter-spacing: -0.04em; line-height: 0.92; margin: 0; text-wrap: balance; }
  .fq-count { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin-left: auto; padding: 6px 12px; border: 1.5px solid color-mix(in oklch, var(--accent) 38%, transparent); border-radius: 999px; }

  /* Accordion — list rhythm (not cards); open rows lift into an accent-tinted block */
  .fq-item { border-bottom: 1px solid var(--line-strong); transition: background .2s ease; }
  .fq-q { display: flex; align-items: center; gap: 18px; width: 100%; text-align: left; list-style: none; background: none; border: 0; padding: clamp(20px, 2.6vw, 28px) 8px; cursor: pointer; font-family: var(--display); font-weight: 600; font-size: clamp(18px, 2.1vw, 23px); line-height: 1.28; letter-spacing: -0.02em; color: var(--ink); transition: color .15s; }
  .fq-q::-webkit-details-marker { display: none; }
  .fq-q-text { flex: 1; }
  .fq-q:hover { color: var(--accent); }
  .fq-ic { position: relative; flex-shrink: 0; width: 38px; height: 38px; border-radius: 999px; border: 1.5px solid var(--line-strong); color: var(--ink); transition: background .2s, border-color .2s, color .2s; }
  .fq-q:hover .fq-ic { border-color: var(--accent); color: var(--accent); }
  .fq-ic::before, .fq-ic::after { content: ""; position: absolute; top: 50%; left: 50%; background: currentColor; border-radius: 2px; transition: transform .25s ease, opacity .2s; }
  .fq-ic::before { width: 14px; height: 2px; transform: translate(-50%, -50%); }
  .fq-ic::after { width: 2px; height: 14px; transform: translate(-50%, -50%); }
  .fq-item[open] .fq-ic { background: var(--accent); border-color: var(--accent); color: #fff; }
  .fq-item[open] .fq-ic::after { transform: translate(-50%, -50%) scaleY(0); opacity: 0; }
  /* Open rows lift into their own tinted block; a small vertical gap keeps
     consecutive open items from blending into one continuous tint. */
  .fq-item[open] { background: color-mix(in oklch, var(--accent) 6%, transparent); border-radius: 12px; border-bottom-color: transparent; margin: 8px 0; }
  .fq-item[open] .fq-q { color: var(--accent); }
  /* Native <details> handles show/hide (works with no JS); animate the reveal. */
  .fq-a-inner { padding: 0 56px 28px 8px; font-size: clamp(15px, 1.6vw, 16.5px); line-height: 1.7; color: var(--ink-2); max-width: 70ch; }
  .fq-item[open] .fq-a-inner { animation: fqReveal .26s cubic-bezier(.22, 1, .36, 1); }
  @keyframes fqReveal { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
  .fq-a-inner p { margin: 0 0 14px; }
  .fq-a-inner p:last-child { margin-bottom: 0; }
  .fq-a-inner strong { color: var(--ink); font-weight: 600; }
  .fq-a-inner a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
  .fq-a-inner ul { margin: 0 0 14px; padding-left: 18px; }
  .fq-a-inner li { margin-bottom: 7px; }
  .fq-a-inner h3, .fq-a-inner h4, .fq-a-inner h5, .fq-a-inner h6 { font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin: 18px 0 8px; }
  .fq-sub { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin: 18px 0 8px; }

  /* Closing CTA — ink-drenched band with a single accent glow, the page's one
     loud moment. Replaces the prior bordered paper card. */
  .fq-foot { margin: clamp(64px, 9vw, 110px) var(--pad) 0; padding: clamp(36px, 6vw, 72px); border-radius: 20px; background: var(--ink); color: var(--paper); display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; position: relative; overflow: hidden; }
  .fq-foot::before { content: ""; position: absolute; top: -45%; right: -8%; width: 460px; height: 460px; background: radial-gradient(circle, color-mix(in oklch, var(--accent) 60%, transparent), transparent 70%); pointer-events: none; }
  .fq-foot > * { position: relative; z-index: 1; }
  .fq-foot h3 { font-family: var(--display); font-weight: 800; font-size: clamp(30px, 5vw, 54px); letter-spacing: -0.04em; margin: 0 0 10px; line-height: 0.95; color: #fff; text-wrap: balance; }
  .fq-foot p { margin: 0; color: color-mix(in oklch, var(--paper) 78%, transparent); font-size: clamp(15px, 1.8vw, 17px); max-width: 42ch; }
  .fq-foot-acts { display: flex; gap: 12px; flex-wrap: wrap; }
  .fq-foot .btn-ink { background: var(--accent); color: #fff; }
  .fq-foot .btn-ink:hover { background: var(--accent-deep); }
  .fq-foot .btn-ghost { color: #fff; border-color: color-mix(in oklch, #fff 32%, transparent); }
  .fq-foot .btn-ghost:hover { background: #fff; color: var(--ink); border-color: #fff; }
  .fq-foot .btn-ghost .arr { background: rgba(255,255,255,0.16); }
  .fq-end { height: 96px; }

  @media (prefers-reduced-motion: reduce) {
    .fq-item[open] .fq-a-inner { animation: none; }
    .fq-jump a:hover { transform: none; }
    .fq-ic, .fq-ic::before, .fq-ic::after { transition: none; }
  }
  @media (max-width: 600px) {
    .fq-q { font-size: 17px; gap: 14px; }
    .fq-a-inner { padding-right: 8px; }
    .fq-foot { padding: 32px 24px; flex-direction: column; align-items: flex-start; }
    /* Keep the count chip beside the heading: let the heading text wrap and
       shrink instead of pushing the chip onto its own right-aligned row. */
    .fq-cat-head { align-items: flex-start; gap: 12px; flex-wrap: nowrap; }
    .fq-cat-head h2 { flex: 1 1 auto; min-width: 0; text-wrap: pretty; }
    .fq-count { margin-left: 0; margin-top: 5px; flex: 0 0 auto; }
  }

  /* ============================================================
     STAFF — leadership bios + full coach roster
     ============================================================ */
  .st-hero { padding: 56px var(--pad) 8px; }
  .st-eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); display: flex; gap: 14px; align-items: center; }
  .st-eyebrow::after { content: ""; width: 56px; height: 1px; background: var(--ink); }
  .st-title { font-family: var(--display); font-weight: 800; font-size: clamp(48px, 7vw, 96px); line-height: 0.9; letter-spacing: -0.035em; margin: 20px 0 0; }
  .st-title .ital { font-style: italic; font-weight: 500; color: var(--accent); }
  .st-lede { max-width: 60ch; font-size: 17px; line-height: 1.55; color: var(--muted); margin: 22px 0 0; text-wrap: pretty; }
  .st-banner { margin: 44px var(--pad) 0; border-radius: 18px; overflow: hidden; border: 1px solid var(--line-strong); box-shadow: var(--shadow-card); }
  .st-banner .placeholder-photo { aspect-ratio: 16/9; }
  .st-banner img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
  .st-banner-cap { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin: 12px var(--pad) 0; }
  .st-group { padding: 72px var(--pad) 0; }
  .st-group-head { position: relative; display: flex; align-items: baseline; gap: 18px; margin-bottom: 8px; border-bottom: 1px solid var(--line-strong); padding: 0 0 18px 18px; }
  .st-group-head::before { content: ""; position: absolute; left: 0; top: 2px; bottom: 18px; width: 5px; border-radius: 3px; background: var(--accent); box-shadow: 0 0 12px color-mix(in oklch, var(--accent) 45%, transparent); }
  .st-group-head h2 { font-family: var(--display); font-weight: 700; font-size: clamp(26px, 3.4vw, 42px); letter-spacing: -0.025em; line-height: 1; margin: 0; }
  .st-group-head .count { font-family: var(--mono); font-size: 11px; color: var(--muted); margin-left: auto; }
  .st-leader { display: grid; grid-template-columns: 340px 1fr; gap: 52px; align-items: start; padding: 52px 0; border-bottom: 1px solid var(--line); }
  .st-leader.flip { grid-template-columns: 1fr 340px; }
  .st-leader.flip .st-photo-col { order: 2; }
  /* Photos scroll with their bio. (Was position:sticky, which only visibly
     engaged on the one leader with a bio long enough to scroll past — the photo
     appeared to "stop" at the top while shorter bios scrolled normally, reading
     as a bug. Static keeps every leader consistent.) */
  .st-photo-col { position: static; }
  .st-photo { border-radius: 14px; overflow: hidden; background: var(--ink); border: 1px solid var(--line-strong); box-shadow: var(--shadow-card); }
  .st-photo .placeholder-photo { aspect-ratio: 4/5; }
  .st-photo img { width: 100%; aspect-ratio: 4/5; object-fit: cover; display: block; }
  .st-name { font-family: var(--display); font-weight: 700; font-size: clamp(28px, 3.2vw, 40px); letter-spacing: -0.025em; line-height: 1; margin: 18px 0 0; }
  .st-role { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin-top: 10px; line-height: 1.5; }
  .st-bio { max-width: 64ch; font-size: 15.5px; line-height: 1.7; color: var(--ink-2); }
  .st-bio p { margin: 0 0 16px; }
  .st-bio p:last-child { margin-bottom: 0; }
  .st-bio em { font-style: italic; color: var(--ink); }
  .st-bio strong { color: var(--ink); font-weight: 600; }
  .st-bio ul { margin: 4px 0 16px; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; }
  .st-bio li { font-size: 14.5px; line-height: 1.45; }
  .st-bio h3, .st-bio h4, .st-bio h5, .st-bio h6, .st-sub { font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin: 22px 0 10px; }
  /* Full-roster zone — a subtle tinted band gives the page a second "movement"
     and sets the all-team list apart from the leadership profiles above. */
  .st-roster-sec { margin-top: 88px; padding: 80px var(--pad) 96px; background: var(--paper-2); border-top: 1px solid var(--line); }
  .st-roster-head { margin-bottom: 28px; }
  .st-roster-head h2 { font-family: var(--display); font-weight: 700; font-size: clamp(28px, 4vw, 48px); letter-spacing: -0.03em; line-height: 1; margin: 14px 0 0; }
  .st-roster-head p { color: var(--muted); font-size: 15px; margin: 12px 0 0; max-width: 52ch; }
  .st-roster { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0 32px; border-top: 1px solid var(--line); }
  .st-roster .nm { padding: 13px 0; font-size: 15px; font-weight: 500; color: var(--ink); border-bottom: 1px solid var(--line); }
  @media (max-width: 820px) {
    .st-leader, .st-leader.flip { grid-template-columns: 1fr; gap: 24px; }
    .st-leader.flip .st-photo-col { order: 0; }
    .st-photo-col { position: static; max-width: 300px; }
  }

  /* ============================================================
     LOCATIONS — practice / tournament toggle + search + map links
     ============================================================ */
  .lo-hero { padding: 56px var(--pad) 8px; }
  .lo-eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); display: flex; gap: 14px; align-items: center; }
  .lo-eyebrow::after { content: ""; width: 56px; height: 1px; background: var(--ink); }
  .lo-title { font-family: var(--display); font-weight: 800; font-size: clamp(48px, 7vw, 96px); line-height: 0.9; letter-spacing: -0.035em; margin: 20px 0 0; }
  .lo-title .ital { font-style: italic; font-weight: 500; color: var(--accent); }
  .lo-lede { max-width: 56ch; font-size: 17px; line-height: 1.55; color: var(--muted); margin: 22px 0 0; text-wrap: pretty; }
  .lo-controls { position: sticky; top: 0; z-index: 20; background: color-mix(in oklch, var(--paper) 90%, transparent); backdrop-filter: blur(10px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-top: 40px; }
  .lo-controls-inner { display: flex; align-items: center; gap: 16px; padding: 14px var(--pad); flex-wrap: wrap; }
  .lo-toggle { display: inline-flex; background: var(--paper-2); border: 1px solid var(--line); border-radius: 999px; padding: 4px; gap: 4px; }
  .lo-toggle button { border: 0; background: none; cursor: pointer; font-family: var(--sans); font-weight: 600; font-size: 14px; color: var(--ink-2); padding: 9px 20px; border-radius: 999px; transition: background .15s, color .15s; }
  .lo-toggle button.active { background: var(--ink); color: var(--paper); }
  .lo-search { position: relative; flex: 1; min-width: 220px; max-width: 420px; }
  .lo-search input { width: 100%; box-sizing: border-box; font-family: var(--sans); font-size: 15px; color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 12px; padding: 12px 14px 12px 40px; box-shadow: var(--shadow-card); transition: border-color .15s; }
  .lo-search input:focus { border-color: var(--accent); }
  .lo-search input::placeholder { color: var(--muted); }
  .lo-search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); }
  .lo-result-count { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-left: auto; }
  .lo-section { padding: 44px var(--pad) 0; }
  .lo-section.is-empty { display: none; }
  .lo-subhead { display: flex; align-items: baseline; gap: 14px; margin-bottom: 22px; }
  .lo-subhead .dot { width: 8px; height: 8px; border-radius: 999px; background: var(--accent); }
  .lo-subhead h2 { font-family: var(--display); font-weight: 700; font-size: clamp(22px, 3vw, 32px); letter-spacing: -0.02em; margin: 0; }
  .lo-subhead .n { font-family: var(--mono); font-size: 11px; color: var(--muted); margin-left: auto; }
  .lo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
  .lo-card { border: 1px solid var(--line-strong); border-radius: 14px; background: var(--surface); padding: 22px; display: flex; flex-direction: column; gap: 4px; box-shadow: var(--shadow-card); }
  .lo-card.is-hidden { display: none; }
  .lo-card h3 { font-family: var(--display); font-weight: 700; font-size: 19px; letter-spacing: -0.015em; line-height: 1.15; margin: 0; }
  .lo-card .addr { font-size: 14px; line-height: 1.5; color: var(--muted); margin: 2px 0 0; }
  .lo-acts { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
  .lo-btn { display: inline-flex; align-items: center; gap: 7px; font-family: var(--sans); font-size: 12.5px; font-weight: 600; padding: 8px 13px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--ink); transition: background .15s, color .15s, border-color .15s; }
  .lo-btn:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
  .lo-btn svg { flex-shrink: 0; }
  .lo-cat[hidden] { display: none; }
  .lo-empty { padding: 60px var(--pad); text-align: center; color: var(--muted); font-size: 16px; display: none; }
  .lo-empty.show { display: block; }
  .lo-end { height: 96px; }
  @media (max-width: 600px) {
    .lo-grid { grid-template-columns: 1fr; }
    .lo-result-count { width: 100%; margin-left: 0; order: 5; }
  }

  /* ============================================================
     COLLEGE RECRUITING — hero, SportsRecruits tabs, commit board
     ============================================================ */
  .rc-hero { position: relative; margin: 0; min-height: 460px; display: flex; align-items: flex-end; overflow: hidden; }
  .rc-hero .bg { position: absolute; inset: 0; }
  .rc-hero .bg .placeholder-photo { width: 100%; height: 100%; aspect-ratio: auto; }
  .rc-hero .bg img { width: 100%; height: 100%; object-fit: cover; }
  /* Scrim now carries a corner vignette over the bottom-darkening gradient so the
     photo reads as a framed, editorial image rather than a flat stock crop. */
  .rc-hero .scrim { position: absolute; inset: 0; background:
      radial-gradient(135% 120% at 50% 0%, transparent 52%, rgba(8,8,10,0.55) 100%),
      linear-gradient(180deg, rgba(8,8,10,0.22) 0%, rgba(8,8,10,0.44) 45%, rgba(8,8,10,0.90) 100%); }
  /* Fine film grain — sits above the photo, below the text — for material/texture. */
  .rc-hero::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0.16; mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
  /* text-shadow guarantees label/heading contrast over any uploaded photo,
     independent of how bright the image is behind the lower scrim. */
  .rc-hero-inner { position: relative; z-index: 3; padding: 0 var(--pad) 48px; width: 100%; text-shadow: 0 1px 2px rgba(8,8,10,0.35), 0 2px 16px rgba(8,8,10,0.45); }
  /* Credentials-first stat strip beneath the headline */
  .rc-hero-stats { display: flex; flex-wrap: wrap; gap: 16px 0; margin-top: 30px; }
  .rc-hstat { display: flex; flex-direction: column; justify-content: center; gap: 5px; padding: 2px 34px; }
  .rc-hstat:first-child { padding-left: 0; }
  .rc-hstat + .rc-hstat { border-left: 1px solid rgba(255,255,255,0.22); }
  .rc-hstat .n { font-family: var(--display); font-weight: 800; font-size: clamp(26px, 3.4vw, 40px); line-height: 1; letter-spacing: -0.02em; color: #fff; }
  .rc-hstat .l { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.72); }
  .rc-eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.8); display: flex; gap: 14px; align-items: center; }
  .rc-eyebrow::after { content: ""; width: 56px; height: 1px; background: rgba(255,255,255,0.6); }
  .rc-title { font-family: var(--display); font-weight: 800; font-size: clamp(48px, 7vw, 96px); line-height: 0.9; letter-spacing: -0.035em; margin: 18px 0 0; color: #fff; }
  .rc-title .ital { font-style: italic; font-weight: 500; color: color-mix(in oklch, var(--accent) 60%, white); }
  .rc-intro { display: grid; grid-template-columns: 1.3fr 1fr; gap: 56px; padding: 64px var(--pad) 0; align-items: start; }
  .rc-intro .lead { font-size: clamp(20px, 2.4vw, 26px); line-height: 1.45; letter-spacing: -0.01em; color: var(--ink); margin: 0; text-wrap: pretty; }
  /* Signature accent tick — a small editorial mark that opens the statement */
  .rc-intro .lead::before { content: ""; display: block; width: 52px; height: 3px; border-radius: 2px; background: var(--accent); margin: 0 0 22px; box-shadow: 0 0 12px color-mix(in oklch, var(--accent) 45%, transparent); }
  .rc-intro .lead strong { font-weight: 700; color: var(--accent-deep); }
  .rc-intro p.body { font-size: 15.5px; line-height: 1.65; color: var(--ink-2); margin: 18px 0 0; max-width: 60ch; }
  .rc-card { border: 1px solid var(--line-strong); border-radius: 16px; background: var(--surface); padding: 26px; box-shadow: var(--shadow-card); }
  .rc-card h3 { font-family: var(--display); font-weight: 700; font-size: 20px; letter-spacing: -0.02em; margin: 0 0 6px; }
  .rc-card p { font-size: 14px; line-height: 1.55; color: var(--muted); margin: 0 0 18px; }
  .rc-links { display: flex; flex-direction: column; gap: 9px; }
  .rc-link { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 16px; border-radius: 11px; border: 1px solid var(--line-strong); font-weight: 600; font-size: 14.5px; color: var(--ink); transition: background .15s, color .15s, border-color .15s; }
  .rc-link:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
  .rc-link .arr { width: 28px; height: 28px; border-radius: 999px; background: color-mix(in oklch, var(--accent) 16%, transparent); color: var(--accent); display: grid; place-items: center; flex-shrink: 0; transition: background .15s, color .15s; }
  .rc-link:hover .arr { background: rgba(255,255,255,0.16); color: #fff; }
  .rc-contact { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); line-height: 1.5; }
  .rc-contact a { color: var(--accent); font-weight: 600; }
  .rc-rosters { padding: 88px var(--pad) 0; }
  .rc-sec-head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 8px; }
  .rc-sec-head h2 { font-family: var(--display); font-weight: 700; font-size: clamp(28px, 4vw, 46px); letter-spacing: -0.03em; line-height: 1; margin: 0; }
  .rc-sec-sub { color: var(--muted); font-size: 15px; margin: 12px 0 24px; max-width: 60ch; }
  /* Girls / Boys roster sub-sections — accent-bar header mirrors the commit
     board's year groups, so the two grouping systems read as one language. */
  .rc-roster-group + .rc-roster-group { margin-top: 40px; }
  .rc-roster-grouphead { position: relative; display: flex; align-items: baseline; gap: 14px; padding: 0 0 12px 16px; margin: 4px 0 18px; border-bottom: 1px solid var(--line); }
  .rc-roster-grouphead::before { content: ""; position: absolute; left: 0; top: 1px; bottom: 12px; width: 5px; border-radius: 3px; background: var(--accent); box-shadow: 0 0 12px color-mix(in oklch, var(--accent) 45%, transparent); }
  .rc-roster-grouphead h3 { font-family: var(--display); font-weight: 700; font-size: clamp(22px, 3vw, 30px); letter-spacing: -0.02em; line-height: 1; margin: 0; }
  .rc-roster-grouphead .rc-roster-count { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-left: auto; }
  .rc-roster-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-top: 8px; }
  .rc-roster-link { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 20px; border: 1px solid var(--line-strong); border-radius: 13px; background: var(--surface); font-weight: 600; font-size: 15.5px; color: var(--ink); box-shadow: var(--shadow-card); transition: background .15s, color .15s, border-color .15s, transform .15s, box-shadow .15s; }
  .rc-roster-link:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); transform: translateY(-2px); box-shadow: var(--shadow-card-hover); }
  .rc-roster-link .arr { width: 32px; height: 32px; border-radius: 999px; background: color-mix(in oklch, var(--accent) 16%, transparent); color: var(--accent); display: grid; place-items: center; flex-shrink: 0; transition: background .15s, color .15s, transform .2s ease; }
  .rc-roster-link:hover .arr { background: var(--accent); color: #fff; transform: translate(2px, -2px); }
  .rc-board {
    --cm-bg: #0e1630; --cm-fg: var(--paper); --cm-dim: rgba(240,241,244,0.66);
    --cm-rule: rgba(255,255,255,0.12); --cm-rule-soft: rgba(255,255,255,0.08);
    --cm-accent: color-mix(in oklch, var(--accent) 60%, white); --cm-chip-active-bg: var(--paper); --cm-chip-active-fg: var(--ink);
    color: var(--cm-fg); margin-top: 104px; padding: 88px var(--pad) 96px;
    /* Mirrors the home commits field: deep brand-navy with real range — a top-left
       accent "stadium light", a cooler counter-glow bottom-right, a fine dot-matrix
       for material, and a lit top edge. (Paper theme flattens this below.) */
    position: relative;
    background:
      radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1.5px) 0 0 / 26px 26px,
      linear-gradient(180deg, rgba(255,255,255,0.07) 0, transparent 200px),
      radial-gradient(42% 52% at 6% -8%, color-mix(in oklch, var(--accent) 42%, transparent) 0, transparent 50%),
      radial-gradient(36% 46% at 102% 108%, color-mix(in oklch, var(--accent) 22%, transparent) 0, transparent 48%),
      /* Base resolves to a lifted navy (not pure ink) so the section reads as a
         deep-navy "stadium" sitting on the black footer plinth below, instead of
         a flat dark-to-dark hand-off. */
      linear-gradient(180deg, #16203f 0%, #0f1834 52%, #182442 100%); }
  /* hairline highlight at the very top — fades at the edges for a premium lift */
  .rc-board::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18) 18%, rgba(255,255,255,0.22) 50%, rgba(255,255,255,0.18) 82%, transparent); }
  [data-commits-theme="paper"].rc-board { background: var(--cm-bg); }
  /* Footer that follows the commit board recedes beneath it: a soft recess
     shadow under the existing lit hairline (.foot::before) gives a clean,
     embossed seam — navy stadium above, black footer plinth below. Scoped via
     :has() to this hand-off (.foot is a sibling of <main>, not .rc-board) so
     other pages' footers are untouched. */
  main:has(.rc-board) + .foot { box-shadow: inset 0 14px 22px -14px rgba(0,0,0,0.6); }
  .rc-board h2 { font-family: var(--display); font-weight: 700; font-size: clamp(30px, 5vw, 60px); letter-spacing: -0.03em; line-height: 0.95; margin: 14px 0 0; }
  .rc-board .sub { color: var(--cm-dim); font-size: 15px; margin: 14px 0 0; }
  .rc-filters { display: flex; gap: 8px; flex-wrap: wrap; margin: 32px 0 8px; }
  .rc-filter { display: inline-flex; align-items: center; font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; padding: 9px 15px; border-radius: 999px; border: 1px solid var(--cm-rule); background: none; color: var(--cm-dim); cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
  .rc-filter:hover { border-color: var(--cm-fg); color: var(--cm-fg); }
  .rc-filter.active { background: var(--cm-chip-active-bg); color: var(--cm-chip-active-fg); border-color: var(--cm-chip-active-bg); }
  .rc-year { margin-top: 44px; }
  .rc-year.is-empty { display: none; }
  .rc-year-label { display: flex; align-items: baseline; gap: 14px; border-bottom: 1px solid var(--cm-rule); padding-bottom: 12px; margin-bottom: 18px; position: relative; }
  .rc-year-label h3 { font-family: var(--display); font-weight: 700; font-size: 30px; letter-spacing: -0.02em; margin: 0; color: var(--cm-fg); }
  .rc-year-label .yn { font-family: var(--mono); font-size: 11px; color: var(--cm-dim); margin-left: auto; }
  .rc-commits { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 0 36px; }
  .rc-commit { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--cm-rule-soft); transition: transform .18s ease, border-color .18s ease; }
  .rc-commit > * { position: relative; z-index: 1; }
  /* Hover glow borrows the home .commit:hover treatment (accent fill + border +
     drop-shadow + lift), but drawn as a pseudo-element so the dense ledger-row
     layout is untouched at rest — only the glow blooms on hover. The tile bleeds
     into the column gutter so it reads as a raised object, not a boxed-in row. */
  .rc-commit::before {
    content: ""; position: absolute; inset: 1px -14px; z-index: 0; border-radius: 12px;
    background: linear-gradient(180deg, color-mix(in oklch, var(--accent) 22%, transparent) 0%, color-mix(in oklch, var(--accent) 8%, transparent) 100%);
    border: 1px solid color-mix(in oklch, var(--accent) 60%, transparent);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 16px 30px -12px color-mix(in oklch, var(--accent) 45%, rgba(0,0,0,0.5));
    opacity: 0; transition: opacity .18s ease; pointer-events: none; }
  .rc-commit:hover { transform: translateY(-2px); border-bottom-color: transparent; }
  .rc-commit:hover::before { opacity: 1; }
  .rc-commit.is-hidden { display: none; }
  .rc-logo { position: relative; width: 34px; height: 34px; border-radius: 8px; flex-shrink: 0; display: grid; place-items: center; overflow: hidden; font-family: var(--display); font-weight: 700; font-size: 12px; line-height: 1; letter-spacing: -0.01em; color: var(--cm-fg); background: hsl(var(--h, 210) 52% 55% / 0.22); }
  .rc-logo .rc-logo-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 4px; background: #fff; }
  .rc-commit .nm { font-weight: 600; font-size: 15.5px; flex-shrink: 0; color: var(--cm-fg); }
  /* School + division badge travel together as one right-aligned unit so they
     wrap as a group (see mobile rules) instead of the badge drifting off alone. */
  .rc-commit .rc-meta { margin-left: auto; display: flex; align-items: center; gap: 12px; min-width: 0; }
  .rc-commit .sc { font-size: 13.5px; color: var(--cm-dim); text-align: right; }
  .rc-commit .dv { font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em; color: var(--cm-accent); border: 1px solid var(--cm-rule); padding: 3px 7px; border-radius: 999px; flex-shrink: 0; }
  /* Closing credential line — gives the board a finished bottom edge and a calm
     hand-off into the (now seamlessly-colored) footer below. */
  .rc-board-foot { margin-top: 56px; padding-top: 26px; border-top: 1px solid var(--cm-rule); display: flex; align-items: center; gap: 10px; }
  .rc-board-foot .pip { width: 6px; height: 6px; border-radius: 999px; background: var(--accent); box-shadow: 0 0 10px color-mix(in oklch, var(--accent) 60%, transparent); flex-shrink: 0; }
  .rc-board-foot .mono { font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cm-dim); }
  /* Empty state when a division filter matches nothing */
  .rc-board-empty { margin-top: 40px; padding: 30px 24px; border: 1px dashed var(--cm-rule); border-radius: 14px; text-align: center; color: var(--cm-dim); font-size: 15px; }
  .rc-board-empty[hidden] { display: none; }
  /* Reduced motion: keep the hover glow/color crossfade, drop the positional
     movement (lift + arrow nudge) so nothing slides for motion-sensitive users. */
  @media (prefers-reduced-motion: reduce) {
    .rc-commit:hover, .rc-roster-link:hover { transform: none; }
    .rc-roster-link:hover .arr { transform: none; }
  }

  /* ---- Commit-board THEME B: Paper (light) ---- */
  [data-commits-theme="paper"].commits, [data-commits-theme="paper"].rc-board {
    --cm-bg: var(--paper); --cm-fg: var(--ink); --cm-dim: var(--muted);
    --cm-rule: var(--line-strong); --cm-rule-soft: var(--line);
    --cm-accent: var(--accent); --cm-chip-active-bg: var(--ink); --cm-chip-active-fg: var(--paper);
  }
  /* ---- Commit-board THEME C: Dark + red accent rail (accent extras) ---- */
  [data-commits-theme="accent"].rc-board h2 { display: inline-block; padding-bottom: 14px; border-bottom: 3px solid var(--accent); }
  [data-commits-theme="accent"].rc-board .rc-year-label { padding-left: 16px; }
  [data-commits-theme="accent"].rc-board .rc-year-label::before { content: ""; position: absolute; left: 0; top: 2px; bottom: 12px; width: 5px; border-radius: 3px; background: var(--accent); box-shadow: 0 0 14px color-mix(in oklch, var(--accent) 55%, transparent); }
  [data-commits-theme="accent"].rc-board .rc-commit .dv { color: #fff; background: var(--accent); border-color: transparent; }
  [data-commits-theme="accent"].rc-board .rc-filter.active { background: var(--accent); color: #fff; border-color: var(--accent); }
  @media (max-width: 820px) {
    .rc-intro { grid-template-columns: 1fr; gap: 32px; }
    .rc-commits { grid-template-columns: 1fr; }
    /* Mobile alignment: player name stays hard-left (top); the school name and
       division badge stack as a right-aligned column on the right, so long
       school names wrap cleanly and the badge never drifts under the name/logo. */
    .rc-commit { align-items: flex-start; }
    .rc-commit .nm { flex-shrink: 1; min-width: 0; }
    .rc-commit .rc-meta { flex-direction: column; align-items: flex-end; gap: 5px; }
    .rc-commit .sc { min-width: 0; }
    /* Comfortable touch target for the division filter on phones */
    .rc-filter { min-height: 44px; padding: 9px 16px; }
    /* Drop the vertical dividers so wrapped hero stats don't show stray rules */
    .rc-hstat { padding-left: 0; padding-right: 28px; }
    .rc-hstat + .rc-hstat { border-left: 0; }
  }

  /* ============================================================
     MENTAL HEALTH TRAINING — header, intro, trainer profile
     ============================================================ */
  .mh-head { padding: 56px var(--pad) clamp(8px, 2vw, 24px); }
  .mh-eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); display: flex; gap: 16px; align-items: center; }
  .mh-eyebrow::after { content: ""; flex: 1; height: 1px; background: var(--line-strong); }
  .mh-head-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(36px, 5vw, 80px); align-items: start; margin-top: clamp(20px, 2.6vw, 30px); }
  .mh-title { font-family: var(--display); font-weight: 800; font-size: clamp(46px, 7vw, 92px); line-height: 0.9; letter-spacing: -0.035em; margin: 0; }
  .mh-title .ital { font-style: italic; font-weight: 500; color: var(--accent); }
  .mh-head-side { display: flex; flex-direction: column; gap: clamp(22px, 3vw, 32px); max-width: 46ch; padding-top: clamp(4px, 1vw, 10px); }
  .mh-lede { font-size: 17px; line-height: 1.55; color: var(--muted); margin: 0; text-wrap: pretty; }
  .mh-head-by { display: flex; flex-direction: column; gap: 5px; }
  .mh-head-by .lbl { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); display: flex; gap: 12px; align-items: center; margin-bottom: 7px; }
  .mh-head-by .lbl::after { content: ""; flex: 1; height: 1px; background: color-mix(in oklch, var(--accent) 30%, transparent); }
  .mh-head-by .nm { font-family: var(--display); font-weight: 700; font-size: 20px; letter-spacing: -0.01em; color: var(--ink); }
  .mh-head-by .rl { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); }
  .mh-intro { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: clamp(40px, 5vw, 72px); padding: clamp(64px, 8vw, 88px) var(--pad); align-items: start; }
  .mh-intro h2 { font-family: var(--display); font-weight: 700; font-size: clamp(30px, 4vw, 50px); line-height: 1.0; letter-spacing: -0.03em; margin: 0; text-wrap: balance; }
  .mh-intro h2::before { content: ""; display: block; width: 52px; height: 3px; border-radius: 2px; background: var(--accent); margin: 0 0 22px; box-shadow: 0 0 12px color-mix(in oklch, var(--accent) 45%, transparent); }
  .mh-intro .body p { font-size: 16.5px; line-height: 1.68; color: var(--ink-2); margin: 0 0 18px; max-width: 62ch; }
  .mh-intro .body p:last-child { margin-bottom: 0; }
  .mh-intro .body strong { color: var(--ink); font-weight: 600; }
  .mh-trainer { padding: clamp(72px, 9vw, 104px) var(--pad); background: var(--paper-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); box-shadow: inset 0 12px 22px -20px rgba(11,11,14,0.20); }
  .mh-sec-head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 32px; }
  .mh-sec-head h2 { font-family: var(--display); font-weight: 700; font-size: clamp(26px, 3.4vw, 40px); letter-spacing: -0.03em; line-height: 1; margin: 0; }
  .mh-profile { display: grid; grid-template-columns: 340px 1fr; gap: 48px; align-items: start; }
  .mh-photo-col { position: sticky; top: 24px; }
  .mh-photo { border-radius: 16px; overflow: hidden; border: 1px solid var(--line-strong); background: var(--surface); box-shadow: var(--shadow-card); }
  .mh-photo .placeholder-photo { width: 100%; aspect-ratio: 4/5; }
  .mh-photo img { width: 100%; display: block; }
  .mh-namecard { margin-top: 18px; }
  .mh-namecard h3 { font-family: var(--display); font-weight: 700; font-size: 26px; letter-spacing: -0.02em; margin: 0; }
  .mh-namecard .role { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-top: 8px; }
  .mh-creds-inline { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 6px; }
  .mh-cred { font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); }
  .mh-quote { margin: 0 0 clamp(44px, 6vw, 76px); max-width: 920px; }
  .mh-quote-lbl { font-family: var(--mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); display: flex; gap: 14px; align-items: center; }
  .mh-quote-lbl::after { content: ""; flex: 0 0 56px; height: 1px; background: color-mix(in oklch, var(--accent) 55%, transparent); }
  .mh-quote-text { font-family: var(--display); font-weight: 600; font-size: clamp(30px, 4.8vw, 58px); line-height: 1.08; letter-spacing: -0.03em; color: var(--ink); margin: 22px 0 0; text-wrap: balance; }
  .mh-blocks { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 40px; }
  .mh-block.span2 { grid-column: 1 / -1; }
  .mh-block h4 { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
  .mh-block ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
  .mh-block li { display: flex; gap: 12px; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
  .mh-block li .tick { flex-shrink: 0; width: 18px; height: 18px; border-radius: 999px; background: color-mix(in oklch, var(--accent) 16%, transparent); color: var(--accent); display: grid; place-items: center; margin-top: 2px; }
  .mh-block.is-single p { font-size: 15px; line-height: 1.6; color: var(--ink-2); margin: 0; }
  .mh-foot { padding: clamp(72px, 9vw, 104px) var(--pad) clamp(84px, 8vw, 96px); }
  .mh-cta { border: 1px solid var(--line-strong); border-radius: 18px; background: var(--paper-2); padding: 40px; display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; box-shadow: var(--shadow-card); }
  .mh-cta h3 { font-family: var(--display); font-weight: 700; font-size: clamp(24px, 3vw, 34px); letter-spacing: -0.02em; margin: 0 0 8px; }
  .mh-cta p { color: var(--muted); font-size: 15px; margin: 0; max-width: 48ch; }
  .mh-cta-acts { display: flex; gap: 12px; flex-wrap: wrap; }
  @media (max-width: 900px) {
    .mh-head-grid { grid-template-columns: 1fr; gap: 26px; margin-top: 22px; }
    .mh-head-side { max-width: 60ch; }
    .mh-intro { grid-template-columns: 1fr; gap: 24px; }
    .mh-profile { grid-template-columns: 1fr; gap: 32px; }
    .mh-photo-col { position: static; max-width: 360px; }
    .mh-blocks { grid-template-columns: 1fr; }
  }

  /* ============================================================
     LIVE STREAM — hero, intro, court link-out grid
     ============================================================ */
  .ls-hero { position: relative; margin: 0; min-height: 440px; display: flex; align-items: flex-end; overflow: hidden; }
  .ls-hero .bg { position: absolute; inset: 0; }
  .ls-hero .bg .placeholder-photo { width: 100%; height: 100%; aspect-ratio: auto; }
  .ls-hero .bg img { width: 100%; height: 100%; object-fit: cover; }
  .ls-hero .scrim { position: absolute; inset: 0; background:
      radial-gradient(135% 120% at 50% 0%, transparent 52%, rgba(8,8,10,0.55) 100%),
      linear-gradient(180deg, rgba(8,8,10,0.22) 0%, rgba(8,8,10,0.44) 45%, rgba(8,8,10,0.90) 100%); }
  .ls-hero::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0.16; mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
  .ls-hero-inner { position: relative; z-index: 3; padding: 0 var(--pad) 48px; width: 100%; text-shadow: 0 1px 2px rgba(8,8,10,0.35), 0 2px 16px rgba(8,8,10,0.45); }
  .ls-eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.8); display: flex; gap: 14px; align-items: center; }
  .ls-eyebrow::after { content: ""; width: 56px; height: 1px; background: rgba(255,255,255,0.6); }
  .ls-title { font-family: var(--display); font-weight: 800; font-size: clamp(48px, 7vw, 96px); line-height: 0.9; letter-spacing: -0.035em; margin: 18px 0 0; color: #fff; }
  .ls-title .ital { font-style: italic; font-weight: 500; color: color-mix(in oklch, var(--accent) 60%, white); }
  .ls-intro { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; padding: 64px var(--pad) 0; align-items: start; }
  .ls-intro .lead { font-size: clamp(19px, 2.3vw, 25px); line-height: 1.45; letter-spacing: -0.01em; color: var(--ink); margin: 0; text-wrap: pretty; }
  .ls-intro .lead::before { content: ""; display: block; width: 52px; height: 3px; border-radius: 2px; background: var(--accent); margin: 0 0 22px; box-shadow: 0 0 12px color-mix(in oklch, var(--accent) 45%, transparent); }
  .ls-intro .body p { font-size: 15.5px; line-height: 1.65; color: var(--ink-2); margin: 0 0 16px; }
  .ls-intro .body p:last-child { margin-bottom: 0; }
  .ls-note { margin-top: 22px; display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; border-radius: 12px; background: color-mix(in oklch, var(--accent) 8%, var(--paper-2)); border: 1px solid color-mix(in oklch, var(--accent) 22%, var(--line)); }
  .ls-note .ic { flex-shrink: 0; width: 20px; height: 20px; color: var(--accent); margin-top: 1px; }
  .ls-note p { font-size: 13.5px; line-height: 1.55; color: var(--ink-2); margin: 0; }
  .ls-courts { padding: 72px var(--pad) 0; }
  .ls-sec-head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 8px; flex-wrap: wrap; }
  .ls-sec-head h2 { font-family: var(--display); font-weight: 700; font-size: clamp(28px, 4vw, 46px); letter-spacing: -0.03em; line-height: 1; margin: 0; }
  .ls-sec-sub { color: var(--muted); font-size: 15px; margin: 12px 0 28px; max-width: 60ch; }
  .ls-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
  .ls-court { display: flex; flex-direction: column; gap: 18px; padding: 22px; border: 1px solid var(--line-strong); border-radius: 15px; background: var(--surface); color: var(--ink); box-shadow: var(--shadow-card); transition: transform .18s, border-color .18s, background .18s, box-shadow .18s; }
  .ls-court:hover { transform: translateY(-3px); border-color: var(--ink); box-shadow: var(--shadow-card-hover); }
  .ls-court-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .ls-court .cnum { font-family: var(--display); font-weight: 800; font-size: 26px; letter-spacing: -0.02em; }
  .ls-live { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
  .ls-live .dot { width: 7px; height: 7px; border-radius: 999px; background: var(--accent); box-shadow: 0 0 0 0 color-mix(in oklch, var(--accent) 60%, transparent); animation: lspulse 2s infinite; }
  @keyframes lspulse { 0% { box-shadow: 0 0 0 0 color-mix(in oklch, var(--accent) 55%, transparent); } 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
  @media (prefers-reduced-motion: reduce) { .ls-live .dot { animation: none; } .ls-court:hover { transform: none; } .ls-court:hover .ls-watch .arr { transform: none; } }
  .ls-watch { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-weight: 600; font-size: 14.5px; padding: 12px 14px; border-radius: 11px; background: var(--ink); color: var(--paper); transition: background .15s; }
  .ls-court:hover .ls-watch { background: var(--accent); }
  .ls-watch .arr { width: 26px; height: 26px; border-radius: 999px; background: rgba(255,255,255,0.16); display: grid; place-items: center; flex-shrink: 0; transition: transform .2s ease; }
  .ls-court:hover .ls-watch .arr { transform: translate(2px, -2px); }
  .ls-foot { padding: 80px var(--pad) 96px; }
  .ls-cta { border: 1px solid var(--line-strong); border-radius: 18px; background: var(--paper-2); padding: 40px; display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; box-shadow: var(--shadow-card); }
  .ls-cta h3 { font-family: var(--display); font-weight: 700; font-size: clamp(22px, 3vw, 32px); letter-spacing: -0.02em; margin: 0 0 8px; }
  .ls-cta p { color: var(--muted); font-size: 15px; margin: 0; max-width: 50ch; }
  .ls-cta-acts { display: flex; gap: 12px; flex-wrap: wrap; }
  @media (max-width: 860px) {
    .ls-intro { grid-template-columns: 1fr; gap: 28px; }
    .ls-grid { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 520px) { .ls-grid { grid-template-columns: 1fr; } }

  /* ============================================================
     TOURNAMENTS — hero, events, schedules, policies, referees
     ============================================================ */
  .tn-hero { position: relative; margin: 0; min-height: 420px; display: flex; align-items: flex-end; overflow: hidden; }
  .tn-hero .bg { position: absolute; inset: 0; }
  .tn-hero .bg .placeholder-photo { width: 100%; height: 100%; aspect-ratio: auto; }
  .tn-hero .bg img { width: 100%; height: 100%; object-fit: cover; }
  .tn-hero .scrim { position: absolute; inset: 0; background:
      radial-gradient(135% 120% at 50% 0%, transparent 52%, rgba(8,8,10,0.55) 100%),
      linear-gradient(180deg, rgba(8,8,10,0.22) 0%, rgba(8,8,10,0.44) 45%, rgba(8,8,10,0.90) 100%); }
  .tn-hero::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0.16; mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
  .tn-hero-inner { position: relative; z-index: 3; padding: 0 var(--pad) 44px; width: 100%; text-shadow: 0 1px 2px rgba(8,8,10,0.35), 0 2px 16px rgba(8,8,10,0.45); }
  .tn-eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.8); display: flex; gap: 14px; align-items: center; }
  .tn-eyebrow::after { content: ""; width: 56px; height: 1px; background: rgba(255,255,255,0.6); }
  .tn-title { font-family: var(--display); font-weight: 800; font-size: clamp(46px, 7.5vw, 100px); line-height: 0.9; letter-spacing: -0.035em; margin: 16px 0 0; color: #fff; }
  .tn-lede { padding: 56px var(--pad) 0; max-width: 70ch; }
  .tn-lede p { font-size: clamp(18px, 2.2vw, 23px); line-height: 1.5; color: var(--ink); margin: 0; text-wrap: pretty; }
  .tn-lede p::before { content: ""; display: block; width: 52px; height: 3px; border-radius: 2px; background: var(--accent); margin: 0 0 22px; box-shadow: 0 0 12px color-mix(in oklch, var(--accent) 45%, transparent); }
  .tn-jump { position: sticky; top: 0; z-index: 20; background: color-mix(in oklch, var(--paper) 88%, transparent); backdrop-filter: blur(10px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-top: 36px; }
  .tn-jump-inner { display: flex; gap: 6px; padding: 12px var(--pad); overflow-x: auto; scrollbar-width: none; }
  .tn-jump-inner::-webkit-scrollbar { display: none; }
  .tn-jump a { white-space: nowrap; font-size: 13px; font-weight: 600; padding: 9px 15px; border-radius: 999px; color: var(--ink-2); border: 1px solid var(--line); background: var(--paper); transition: background .15s, color .15s, border-color .15s; text-decoration: none; }
  .tn-jump a:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
  .tn-sec { padding: 64px var(--pad) 0; scroll-margin-top: 70px; }
  .tn-sec-head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 10px; flex-wrap: wrap; }
  .tn-sec-head h2 { font-family: var(--display); font-weight: 700; font-size: clamp(28px, 4vw, 48px); letter-spacing: -0.03em; line-height: 1; margin: 0; }
  .tn-sec-sub { color: var(--muted); font-size: 15px; line-height: 1.6; margin: 12px 0 28px; max-width: 64ch; }
  .tn-sec-sub a { color: var(--accent); font-weight: 600; }
  .tn-events { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
  .tn-event { display: flex; flex-direction: column; gap: 18px; padding: 22px; border: 1px solid var(--line-strong); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-card); transition: transform .18s, border-color .18s, box-shadow .18s; }
  .tn-event:hover { transform: translateY(-3px); border-color: var(--ink); box-shadow: var(--shadow-card-hover); }
  .tn-event-top { display: flex; gap: 16px; align-items: center; }
  .tn-logo { width: 64px; height: 64px; flex-shrink: 0; border-radius: 12px; border: 1px solid var(--line); background: var(--paper); overflow: hidden; }
  .tn-logo .placeholder-photo { width: 100%; height: 100%; aspect-ratio: 1; }
  .tn-logo .placeholder-photo .ph-label { font-size: 8px; }
  .tn-logo .placeholder-photo .ph-spec { display: none; }
  .tn-logo img { width: 100%; height: 100%; object-fit: contain; }
  .tn-event h3 { font-family: var(--display); font-weight: 700; font-size: 19px; letter-spacing: -0.02em; line-height: 1.05; margin: 0; }
  .tn-event .meta { display: flex; flex-direction: column; gap: 3px; margin-top: 5px; }
  .tn-event .when { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
  .tn-event .where { font-size: 12.5px; color: var(--muted); }
  .tn-event-links { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; }
  .tn-elink { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; padding: 9px 13px; border-radius: 9px; border: 1px solid var(--line-strong); color: var(--ink); transition: background .15s, color .15s, border-color .15s; }
  .tn-elink:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
  .tn-elink svg { width: 12px; height: 12px; }
  .tn-two { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
  .tn-panel { border: 1px solid var(--line-strong); border-radius: 16px; background: var(--paper-2); padding: 26px; }
  .tn-panel h3 { font-family: var(--display); font-weight: 700; font-size: 20px; letter-spacing: -0.02em; margin: 0 0 10px; }
  .tn-panel p { font-size: 14px; line-height: 1.6; color: var(--ink-2); margin: 0 0 14px; }
  .tn-panel p:last-child { margin-bottom: 0; }
  .tn-sched-links { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
  .tn-sched-link { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: 11px; background: var(--ink); color: var(--paper); font-weight: 600; font-size: 14.5px; transition: background .15s; }
  .tn-sched-link:hover { background: var(--accent); }
  .tn-sched-link .arr { width: 28px; height: 28px; border-radius: 999px; background: rgba(255,255,255,0.16); display: grid; place-items: center; flex-shrink: 0; }
  .tn-policy-group + .tn-policy-group { margin-top: 36px; }
  .tn-policy-grouplabel { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin: 0 0 22px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
  .tn-policies { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; grid-auto-rows: 1fr; }
  .tn-policy { position: relative; border: 1px solid var(--line); border-radius: 14px; background: var(--paper-2); padding: 22px; height: 100%; }
  .tn-policy.is-featured { border-color: var(--accent); background: color-mix(in oklch, var(--accent) 6%, var(--paper-2)); box-shadow: 0 0 0 1px var(--accent); }
  .tn-policy-flag { position: absolute; top: -10px; left: 22px; font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; background: var(--accent); color: #fff; padding: 4px 10px; border-radius: 999px; }
  .tn-policy.is-featured h4 { margin-top: 4px; }
  .tn-policy h4 { font-family: var(--display); font-weight: 700; font-size: 16px; letter-spacing: -0.01em; margin: 0 0 12px; }
  .tn-policy p, .tn-policy li { font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
  .tn-policy p { margin: 0 0 10px; }
  .tn-policy p:last-child { margin-bottom: 0; }
  .tn-policy ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
  .tn-policy li { display: flex; gap: 9px; }
  .tn-policy li::before { content: ""; flex-shrink: 0; width: 5px; height: 5px; border-radius: 999px; background: var(--accent); margin-top: 7px; }
  .tn-policy .fine { font-size: 12px; color: var(--muted); font-style: italic; margin-top: 12px; }
  .tn-policy a { color: var(--accent); font-weight: 600; }
  /* Schedules pulled from the published Google Sheet (see site/plugins/tf-sheet)
     and re-rendered as native, on-brand tables + a summary stat callout. */
  .tn-stats { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 28px; }
  .tn-stat {
    display: flex; flex-direction: column; gap: 4px;
    padding: 20px 24px; border: 1px solid var(--line-strong); border-radius: 16px;
    background: var(--paper-2); min-width: 200px; box-shadow: var(--shadow-card);
  }
  .tn-stat-num { font-family: var(--display); font-weight: 800; font-size: clamp(34px, 5vw, 52px); letter-spacing: -0.03em; line-height: 1; color: var(--accent); }
  .tn-stat-label { font-size: 14px; color: var(--ink-2); max-width: 30ch; line-height: 1.4; }
  .tn-stat-asof { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-top: 2px; }

  .tn-sheet { border: 1px solid var(--line-strong); border-radius: 16px; background: var(--surface); overflow: hidden; margin-bottom: 22px; box-shadow: var(--shadow-card); }
  .tn-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
  .tn-sheet-head .lbl { font-family: var(--display); font-weight: 700; font-size: 17px; letter-spacing: -0.01em; }
  .tn-sheet-open { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--accent); white-space: nowrap; }
  .tn-sheet-open svg { width: 11px; height: 11px; }

  .tn-sheet-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tn-sheet-scroll:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
  .tn-sheet-table { width: 100%; border-collapse: collapse; font-size: 13.5px; white-space: nowrap; }
  .tn-sheet-table th, .tn-sheet-table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--line); }
  .tn-sheet-table thead th {
    position: sticky; top: 0; z-index: 1;
    background: var(--ink); color: var(--paper);
    font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600;
  }
  .tn-sheet-table tbody tr:nth-child(even) { background: color-mix(in oklch, var(--paper) 55%, transparent); }
  .tn-sheet-table tbody tr:hover { background: color-mix(in oklch, var(--accent) 7%, transparent); }
  .tn-sheet-table td:first-child { font-weight: 600; }
  .tn-sheet-table td a:not(.tn-badge) { color: var(--accent); font-weight: 600; }
  .tn-sheet-table td a:not(.tn-badge):hover { text-decoration: underline; }
  /* status badges driven by the cell text (reliable, unlike the sheet colors) */
  .tn-badge {
    display: inline-block; padding: 3px 10px; border-radius: 999px;
    font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    white-space: nowrap; text-decoration: none;
  }
  .tn-badge.is-open { background: var(--accent); color: #fff; }
  a.tn-badge.is-open:hover { background: var(--accent-deep); }
  .tn-badge.is-done { background: color-mix(in oklch, var(--ink) 8%, transparent); color: var(--ink-2); }
  a.tn-badge.is-done:hover { background: color-mix(in oklch, var(--ink) 14%, transparent); }
  .tn-badge.is-pending { background: color-mix(in oklch, #f6b26b 28%, transparent); color: color-mix(in oklch, #9a5a12 85%, var(--ink)); }
  .tn-sheet-fallback { padding: 22px 20px; color: var(--ink-2); font-size: 14px; }
  .tn-sheet-fallback a { color: var(--accent); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
  .tn-sheet-fallback svg { width: 11px; height: 11px; }
  /* Async schedule loading state (tables fetched after page load) */
  .tn-sheet-loading { display: flex; align-items: center; gap: 11px; padding: 22px 20px; color: var(--muted); font-size: 14px; }
  .tn-sheet-loading::before { content: ""; width: 15px; height: 15px; border-radius: 50%; border: 2px solid var(--line-strong); border-top-color: var(--accent); animation: tn-spin .7s linear infinite; flex-shrink: 0; }
  @keyframes tn-spin { to { transform: rotate(360deg); } }
  @media (prefers-reduced-motion: reduce) { .tn-sheet-loading::before { animation: none; } }
  .tn-ref { border: 1px solid var(--line-strong); border-radius: 18px; background: var(--paper-2); padding: 36px; display: grid; grid-template-columns: 1.4fr 1fr; gap: 36px; align-items: center; box-shadow: var(--shadow-card); }
  .tn-ref h3 { font-family: var(--display); font-weight: 700; font-size: clamp(22px, 2.6vw, 28px); letter-spacing: -0.02em; margin: 0 0 12px; }
  .tn-ref p { font-size: 14.5px; line-height: 1.6; color: var(--ink-2); margin: 0 0 12px; }
  .tn-ref p:last-child { margin-bottom: 0; }
  .tn-ref-acts { display: flex; flex-direction: column; gap: 10px; }
  .tn-foot { padding: 80px var(--pad) 96px; }
  @media (prefers-reduced-motion: reduce) { .tn-event:hover { transform: none; } }
  @media (max-width: 820px) {
    .tn-two { grid-template-columns: 1fr; }
    .tn-ref { grid-template-columns: 1fr; gap: 24px; }
  }

  /* ============================================================
     OPEN GYM — live tonight status, info cards, schedule
     ============================================================ */
  .og-head { padding: 56px var(--pad) 0; }
  .og-eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); display: flex; gap: 14px; align-items: center; }
  .og-eyebrow::after { content: ""; width: 56px; height: 1px; background: var(--ink); }
  .og-title { font-family: var(--display); font-weight: 800; font-size: clamp(46px, 7.5vw, 96px); line-height: 0.9; letter-spacing: -0.035em; margin: 18px 0 0; }
  .og-title .ital { font-style: italic; font-weight: 500; color: var(--accent); }
  .og-status { margin: 36px var(--pad) 0; border-radius: 20px; overflow: hidden; border: 1px solid var(--line-strong); box-shadow: var(--shadow-card); }
  .og-status-bar { height: 6px; }
  .og-status.is-on .og-status-bar { background: #1f9d57; }
  .og-status.is-off .og-status-bar { background: var(--closed); }
  .og-status.is-next .og-status-bar { background: var(--ink); }
  .og-status-body { display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: center; padding: 32px 36px; background: var(--paper-2); }
  .og-badge { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: 130px; height: 130px; border-radius: 18px; flex-shrink: 0; }
  .og-status.is-on .og-badge { background: color-mix(in oklch, #1f9d57 14%, var(--paper)); color: #126e3a; }
  .og-status.is-off .og-badge { background: color-mix(in oklch, var(--closed) 12%, var(--paper)); color: var(--closed); }
  .og-status.is-next .og-badge { background: var(--ink); color: var(--paper); }
  .og-badge .yn { font-family: var(--display); font-weight: 800; font-size: 38px; letter-spacing: -0.02em; line-height: 1; }
  .og-badge .yn.sm { font-size: 26px; }
  .og-badge .lbl { font-family: var(--mono); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; margin-top: 8px; }
  .og-status-text .head { font-family: var(--display); font-weight: 700; font-size: clamp(24px, 3.2vw, 36px); letter-spacing: -0.025em; line-height: 1.05; margin: 0; text-wrap: balance; }
  .og-status-text .sub { font-size: 15.5px; line-height: 1.55; color: var(--ink-2); margin: 12px 0 0; }
  .og-status-text .sub strong { color: var(--ink); font-weight: 600; }
  .og-alert { margin: 36px var(--pad) 0; display: none; gap: 14px; align-items: flex-start; padding: 18px 22px; border-radius: 14px; background: color-mix(in oklch, var(--closed) 12%, var(--paper-2)); border: 1px solid color-mix(in oklch, var(--closed) 35%, var(--line)); }
  .og-alert.show { display: flex; }
  .og-alert .ic { flex-shrink: 0; width: 22px; height: 22px; color: var(--closed); margin-top: 1px; }
  .og-alert .og-alert-title { font-family: var(--display); font-weight: 700; font-size: 17px; margin: 0 0 4px; }
  .og-alert p { font-size: 14px; line-height: 1.5; color: var(--ink-2); margin: 0; }
  .og-info { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; padding: 40px var(--pad) 0; }
  .og-info-card { border: 1px solid var(--line-strong); border-radius: 14px; background: var(--surface); padding: 20px; box-shadow: var(--shadow-card); }
  .og-info-card .k { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
  .og-info-card .v { font-size: 15px; line-height: 1.45; color: var(--ink); margin-top: 8px; font-weight: 500; }
  .og-info-card .v strong { font-weight: 700; }
  .og-info-card .v .free { color: #126e3a; font-weight: 700; }
  .og-blurb { padding: 36px var(--pad) 0; max-width: 72ch; }
  .og-blurb p { font-size: 16px; line-height: 1.65; color: var(--ink-2); margin: 0; }
  .og-sched { padding: 56px var(--pad) 96px; }
  .og-sched-head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 8px; flex-wrap: wrap; }
  .og-sched-head h2 { font-family: var(--display); font-weight: 700; font-size: clamp(26px, 3.6vw, 44px); letter-spacing: -0.03em; line-height: 1; margin: 0; }
  .og-legend { display: flex; gap: 18px; margin: 16px 0 28px; flex-wrap: wrap; }
  .og-legend span { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
  .og-legend .sw { width: 12px; height: 12px; border-radius: 4px; }
  .og-legend .sw.open { background: #1f9d57; }
  .og-legend .sw.closed { background: var(--closed); }
  .og-months { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px 28px; align-items: start; }
  .og-month { break-inside: avoid; }
  .og-month h3 { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); padding-bottom: 10px; border-bottom: 1px solid var(--line); margin: 0 0 8px; }
  .og-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 12px; border-radius: 10px; border: 1px solid transparent; }
  .og-row + .og-row { margin-top: 2px; }
  .og-row .date { font-size: 14px; font-weight: 500; }
  .og-row .tag { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; white-space: nowrap; }
  .og-row.open .tag { background: color-mix(in oklch, #1f9d57 14%, transparent); color: #126e3a; }
  .og-row.closed { background: color-mix(in oklch, var(--closed) 8%, transparent); }
  .og-row.closed .date { color: var(--muted); text-decoration: line-through; text-decoration-color: color-mix(in oklch, var(--closed) 55%, transparent); }
  .og-row.closed .tag { background: color-mix(in oklch, var(--closed) 14%, transparent); color: var(--closed); }
  .og-row.is-today { border-color: var(--ink); background: var(--paper-2); }
  .og-row.is-next { border-color: color-mix(in oklch, #1f9d57 45%, var(--line)); }
  .og-row .now { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.12em; text-transform: uppercase; background: var(--ink); color: var(--paper); padding: 3px 6px; border-radius: 5px; margin-left: 8px; }
  /* JS hides passed dates / empty months via the [hidden] attribute; override the
     flex display so it actually collapses. */
  .og-row[hidden], .og-month[hidden] { display: none !important; }
  .og-empty { color: var(--muted); font-size: 14px; margin: 0; }
  /* Liability waiver — high-visibility "Important" callout (accent-tinted band with
     an Important tag). Sits up the page, after the info cards. */
  .og-waiver { padding: 40px var(--pad) 0; }
  .og-waiver-inner { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; padding: 30px 34px; border-radius: 18px; background: color-mix(in oklch, var(--accent) 8%, var(--surface)); border: 1px solid color-mix(in oklch, var(--accent) 32%, var(--line)); box-shadow: var(--shadow-card); }
  .og-waiver-main { flex: 1; min-width: 280px; }
  .og-waiver-tag { display: inline-block; font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #fff; background: var(--accent); padding: 5px 11px; border-radius: 999px; margin-bottom: 14px; }
  .og-waiver h2 { font-family: var(--display); font-weight: 700; font-size: clamp(22px, 3vw, 30px); letter-spacing: -0.02em; line-height: 1.12; margin: 0; text-wrap: balance; }
  .og-waiver p { color: var(--ink-2); font-size: 15px; margin: 10px 0 0; max-width: 64ch; line-height: 1.55; }
  .og-waiver-btn { flex-shrink: 0; }
  @media (max-width: 760px) {
    .og-info { grid-template-columns: 1fr 1fr; }
    .og-status-body { grid-template-columns: 1fr; gap: 20px; text-align: center; justify-items: center; }
  }
  @media (max-width: 440px) { .og-info { grid-template-columns: 1fr; } }

  /* ============================================================
     BACK TO TOP — floating accent button, fades in after ~1 viewport
     ============================================================ */
  .to-top {
    position: fixed; right: clamp(16px, 4vw, 32px); bottom: clamp(16px, 4vw, 32px); z-index: 45;
    width: 48px; height: 48px; border-radius: 999px; border: none; cursor: pointer;
    display: grid; place-items: center;
    background: var(--accent); color: var(--accent-ink, #fff);
    box-shadow: 0 8px 24px rgba(45,74,214,0.35);
    opacity: 0; visibility: hidden; transform: translateY(12px) scale(0.92);
    transition: opacity .25s ease, transform .25s ease, visibility .25s, background .15s ease;
  }
  .to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
  .to-top:hover { background: color-mix(in oklch, var(--accent) 84%, #000); transform: translateY(-2px) scale(1); }
  .to-top:active { transform: translateY(0) scale(0.96); }
  .to-top:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
  @media (prefers-reduced-motion: reduce) {
    .to-top { transition: opacity .2s ease, visibility .2s; transform: none; }
    .to-top.is-visible { transform: none; }
    .to-top:hover, .to-top:active { transform: none; }
  }

  /* ============================================================
     HOW WE BUILD TEAMS — roster limits & guidelines (rg-)
     Program switch (National & Elite / Regional) + Girls/Boys toggle
     over shared content; position guide is universal at the bottom.
     ============================================================ */
  .rg-hero { padding: 56px var(--pad) 8px; }
  .rg-eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); display: flex; gap: 14px; align-items: center; }
  .rg-eyebrow::after { content: ""; width: 56px; height: 1px; background: var(--ink); }
  .rg-title { font-family: var(--display); font-weight: 800; font-size: clamp(48px, 7vw, 96px); line-height: 0.9; letter-spacing: -0.035em; margin: 20px 0 0; }
  .rg-title .ital { font-style: italic; font-weight: 500; color: var(--accent); }
  .rg-lede { max-width: 62ch; font-size: 17px; line-height: 1.55; color: var(--muted); margin: 22px 0 0; text-wrap: pretty; }

  /* Controls: program tabs (primary distinction) + gender toggle */
  .rg-controls { display: flex; align-items: center; justify-content: flex-start; gap: 14px; flex-wrap: wrap; padding: 36px var(--pad) 0; }
  .rg-tabs { display: inline-flex; gap: 6px; background: var(--paper-2); border: 1px solid var(--line); border-radius: 16px; padding: 6px; }
  .rg-tab { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; border: 0; background: transparent; cursor: pointer; padding: 12px 22px; border-radius: 11px; text-align: left; transition: background .15s, box-shadow .15s; }
  .rg-tab:hover { background: rgba(0,0,0,0.03); }
  .rg-tab-name { font-family: var(--display); font-weight: 800; font-size: 18px; letter-spacing: -0.02em; color: var(--ink-2); }
  .rg-tab-sub { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
  .rg-tab.is-active { background: var(--surface); box-shadow: var(--shadow-card); }
  .rg-tab.is-active .rg-tab-name { color: var(--ink); }
  .rg-tab.is-active .rg-tab-sub { color: var(--accent); }
  .rg-gender { display: inline-flex; background: var(--paper-2); border: 1px solid var(--line); border-radius: 999px; padding: 5px; gap: 4px; }
  .rg-gender button { border: 0; background: transparent; font: inherit; font-weight: 600; font-size: 15px; padding: 11px 26px; border-radius: 999px; cursor: pointer; color: var(--ink-2); transition: background .15s, color .15s; }
  .rg-gender button.is-active { background: var(--ink); color: var(--paper); }

  .rg-main { padding: 26px var(--pad) 0; }
  .rg-program.is-hidden { display: none; }

  /* The four differentiated top sections, as a definition card */
  .rg-overview { display: grid; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 18px; box-shadow: var(--shadow-card); overflow: hidden; }
  .rg-row { display: grid; grid-template-columns: 180px 1fr; gap: 24px; padding: 22px 26px; border-bottom: 1px solid var(--line); }
  .rg-row:last-child { border-bottom: 0; }
  .rg-row-k { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); padding-top: 3px; }
  .rg-row-v p { font-size: 16px; line-height: 1.55; color: var(--ink); margin: 0; max-width: 72ch; text-wrap: pretty; }
  .rg-divisions { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 9px; }
  .rg-divisions li { display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; }
  .rg-div-code { font-family: var(--display); font-weight: 700; font-size: 14px; min-width: 66px; color: var(--ink); }
  .rg-div-detail { font-size: 14px; color: var(--muted); }

  /* Roster limits */
  .rg-limits { margin-top: 20px; padding: 24px 26px; background: var(--paper-2); border: 1px solid var(--line); border-radius: 18px; }
  .rg-limits-kicker { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
  .rg-limits-max { font-family: var(--display); font-weight: 800; font-size: clamp(20px, 2.6vw, 26px); letter-spacing: -0.02em; margin: 6px 0 0; color: var(--ink); }
  .rg-pos { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
  .rg-pos-item { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; }
  .rg-pos-count { font-family: var(--mono); font-weight: 700; font-size: 12px; letter-spacing: 0.03em; color: var(--accent); background: color-mix(in oklch, var(--accent) 12%, transparent); padding: 5px 9px; border-radius: 7px; white-space: nowrap; }
  .rg-pos-name { font-size: 14px; font-weight: 600; color: var(--ink); }

  /* Team options (the only part that changes by gender) — its own section at the
     bottom of the page, after the shared position guide. */
  .rg-teamsec { padding: clamp(40px, 6vw, 72px) var(--pad) 0; }
  .rg-teamblock { margin-top: 22px; }
  .rg-teamsec .rg-teamblock { margin-top: 0; }
  .rg-teamblock-head { display: flex; align-items: center; justify-content: flex-start; gap: 12px 14px; flex-wrap: wrap; margin-bottom: 14px; }
  .rg-teamblock-head h3 { font-family: var(--display); font-weight: 800; font-size: clamp(22px, 3vw, 30px); letter-spacing: -0.025em; margin: 0; color: var(--ink); }
  .rg-teamblock-prog { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); background: color-mix(in oklch, var(--accent) 10%, transparent); padding: 5px 11px; border-radius: 999px; align-self: center; }
  .rg-teamblock-head .rg-gender { margin-left: auto; }
  .rg-teams.is-hidden { display: none; }
  .rg-teams-order { display: flex; align-items: center; gap: 8px; font-size: 13px; font-style: italic; color: var(--muted); margin: 0 0 14px; }
  .rg-teams-order-ic { color: var(--accent); display: inline-flex; flex-shrink: 0; }
  .rg-tracks { display: grid; gap: 10px; }
  .rg-track { display: grid; grid-template-columns: 180px 1fr; gap: 18px; align-items: center; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 14px; padding: 16px 20px; box-shadow: var(--shadow-card); }
  .rg-track-lead { display: flex; align-items: baseline; gap: 11px; }
  .rg-track-rank { font-family: var(--mono); font-weight: 700; font-size: 12px; color: var(--accent); opacity: 0.75; flex-shrink: 0; }
  .rg-track-name { font-family: var(--display); font-weight: 800; font-size: 20px; letter-spacing: -0.02em; color: var(--ink); }
  .rg-track-ages { display: flex; flex-wrap: wrap; gap: 7px; }
  .rg-age { font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--ink-2); background: var(--paper-2); border: 1px solid var(--line); border-radius: 8px; padding: 5px 9px; }
  .rg-teams-note { font-size: 13px; color: var(--muted); margin: 14px 0 0; font-style: italic; }
  .rg-empty { font-size: 15px; color: var(--muted); }

  /* Shared position guide (applies to all teams, both programs) */
  .rg-guide { padding: clamp(48px, 7vw, 84px) var(--pad) 0; }
  .rg-guide-head { max-width: 70ch; }
  .rg-guide-kicker { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
  .rg-guide-head h2 { font-family: var(--display); font-weight: 800; font-size: clamp(32px, 5vw, 52px); letter-spacing: -0.035em; line-height: 0.95; margin: 10px 0 0; color: var(--ink); }
  .rg-guide-intro { font-size: 17px; line-height: 1.55; color: var(--muted); margin: 16px 0 0; text-wrap: pretty; }
  .rg-guide-list { margin-top: 28px; display: grid; gap: 12px; max-width: 920px; }
  .rg-pos-card { background: var(--surface); border: 1px solid var(--line-strong); border-radius: 14px; box-shadow: var(--shadow-card); overflow: hidden; }
  .rg-pos-sum { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; }
  .rg-pos-sum::-webkit-details-marker { display: none; }
  .rg-pos-title { font-family: var(--display); font-weight: 700; font-size: 19px; letter-spacing: -0.015em; color: var(--ink); }
  .rg-pos-chev { color: var(--ink-2); flex-shrink: 0; transition: transform .2s ease; }
  .rg-pos-card[open] .rg-pos-chev { transform: rotate(180deg); }
  .rg-pos-card[open] .rg-pos-sum { padding-bottom: 12px; }
  .rg-pos-body { padding: 0 22px 20px; }
  .rg-pos-body p { font-size: 15px; line-height: 1.6; color: var(--muted); margin: 0; max-width: 74ch; text-wrap: pretty; }
  .rg-foot { height: clamp(60px, 10vw, 120px); }

  @media (prefers-reduced-motion: reduce) {
    .rg-pos-chev { transition: none; }
  }

  @media (max-width: 680px) {
    .rg-controls { flex-direction: column; align-items: stretch; gap: 14px; }
    .rg-tabs { width: 100%; }
    .rg-tab { flex: 1; align-items: center; text-align: center; }
    .rg-gender { align-self: flex-start; }
    .rg-row { grid-template-columns: 1fr; gap: 6px; padding: 18px 20px; }
    .rg-row-k { padding-top: 0; }
    .rg-track { grid-template-columns: 1fr; gap: 10px; padding: 14px 16px; }
  }

  /* ============================================================
     404 / ERROR PAGE
     ============================================================ */
  .err { max-width: 660px; margin: 0 auto; padding: clamp(64px, 12vw, 150px) var(--pad) clamp(48px, 8vw, 96px); text-align: center; }
  .err-code { font-family: var(--mono); font-size: 13px; font-weight: 700; letter-spacing: 0.22em; color: var(--accent); }
  .err-title { font-family: var(--display); font-weight: 800; font-size: clamp(36px, 6vw, 64px); letter-spacing: -0.03em; line-height: 0.95; margin: 14px 0 0; color: var(--ink); }
  .err-lede { font-size: 17px; line-height: 1.55; color: var(--muted); margin: 18px 0 0; text-wrap: pretty; }
  .err-links { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 32px 0 0; }
  .err-link { font-weight: 600; font-size: 14px; padding: 11px 18px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--ink); transition: background .15s, color .15s, border-color .15s; }
  .err-link:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
  .err-contact { font-size: 14px; color: var(--muted); margin: 28px 0 0; }
  .err-contact a { color: var(--accent); font-weight: 600; }