/* ==========================================================================
   Tewksbury Soccer Club — site styles
   Mobile-first. Base rules are the 390px design; breakpoints step up to
   tablet (>=768px) and the documented desktop layout (>=1024px).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */
:root {
  --green: #123c1e;
  --green-deep: #0e2f17;
  --green-mid: #16491f;
  --green-accent: #1c7a34;
  --gold: #f4b81c;
  --offwhite: #f4f6f2;
  --border: #e3e9e2;
  --input-border: #d4ddd3;

  --ink: #1b2e20;
  --ink-soft: #3a4d3e;
  --ink-softer: #4a5a4c;
  --muted: #7c8a7e; /* darkened from the spec's #8a968b to clear 4.5:1 on white */

  --on-dark: rgba(255, 255, 255, .85);
  --on-dark-link: rgba(255, 255, 255, .82);

  --hero-overlay: linear-gradient(180deg, rgba(18,60,30,.12) 0%, rgba(18,60,30,.4) 45%, rgba(15,52,25,.95) 100%);

  --shadow-card: 0 2px 12px rgba(0, 0, 0, .05);
  --shadow-card-strong: 0 2px 12px rgba(0, 0, 0, .06);
  --shadow-header: 0 2px 14px rgba(0, 0, 0, .18);

  --gutter: 20px;
  --display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --body: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

@media (min-width: 768px) {
  :root { --gutter: 28px; }
}

/* --------------------------------------------------------------------------
   Reset / base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.6;
}

body.nav-open { overflow: hidden; }

img, video { max-width: 100%; }
img { height: auto; }

a { color: var(--green); text-decoration: none; }
a:hover { color: var(--green-accent); }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  color: var(--green);
  margin: 0;
}

p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

input, textarea, button, select { font-family: inherit; font-size: inherit; }

/* Visible focus ring on everything interactive. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
  border-radius: 4px;
}

.on-dark a:focus-visible,
.site-header a:focus-visible,
.site-header button:focus-visible,
.nav-drawer a:focus-visible,
.nav-drawer button:focus-visible,
.site-footer a:focus-visible {
  outline-color: var(--gold);
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--gold);
  color: var(--green);
  font-weight: 700;
  padding: 12px 18px;
  border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

/* --------------------------------------------------------------------------
   Layout helpers
   -------------------------------------------------------------------------- */
.page { display: flex; flex-direction: column; min-height: 100vh; }
main { flex: 1; }

/* Keep in-page anchors clear of the sticky header. */
[id] { scroll-margin-top: 80px; }

.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter); }
/* Header/footer column is deliberately 56px wider so the inner 1200px content
   edge lines up with the header logo. */
.wrap-wide { width: 100%; max-width: 1256px; margin: 0 auto; padding: 0 var(--gutter); }

.section { padding: 40px 0; }
.section--tight { padding: 0 0 40px; }
.section--soft { background: var(--offwhite); }
.section--dark { background: var(--green); color: var(--on-dark); }
.section--dark h1, .section--dark h2, .section--dark h3 { color: #fff; }

@media (min-width: 768px) {
  .section { padding: 56px 0; }
  .section--tight { padding: 0 0 56px; }
}
@media (min-width: 1024px) {
  .section { padding: 64px 0; }
  .section--tight { padding: 0 0 64px; }
}

/* Fade page content in on load, unless the visitor prefers reduced motion. */
@keyframes tscFade {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
.fade-in { animation: tscFade .4s ease both; }

@media (prefers-reduced-motion: reduce) {
  .fade-in { animation: none; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   Typography components
   -------------------------------------------------------------------------- */
.eyebrow {
  font-family: var(--body);
  font-weight: 800;
  font-size: 11.5px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--green-accent);
}
.eyebrow--gold { color: var(--gold); }
.eyebrow--card { letter-spacing: .5px; font-size: 12px; }

.h-section { font-size: 30px; line-height: 1.05; }
.h-sub { font-size: 26px; line-height: 1.08; }
.h-card { font-size: 24px; line-height: 1.1; }
.h-mini { font-size: 19px; line-height: 1.15; }

.lede { font-size: 15px; line-height: 1.55; max-width: 680px; }
.body-copy { font-size: 15px; line-height: 1.65; color: var(--ink-soft); }
.card-copy { font-size: 14px; line-height: 1.55; color: var(--ink-softer); }
.fine-print { font-size: 12px; line-height: 1.5; color: var(--muted); }

@media (min-width: 768px) {
  body { font-size: 16px; }
  .h-section { font-size: 38px; }
  .h-sub { font-size: 30px; }
  .h-card { font-size: 26px; }
  .h-mini { font-size: 21px; }
  .lede { font-size: 17px; }
  .eyebrow { font-size: 12.5px; }
}
@media (min-width: 1024px) {
  .h-section { font-size: 46px; }
  .h-sub { font-size: 32px; }
  .h-card { font-size: 28px; }
  .h-mini { font-size: 22px; }
  .lede { font-size: 18px; }
  .eyebrow { font-size: 13px; }
  .card-copy { font-size: 14.5px; }
}

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 22px;
}
.section-head--center { flex-direction: column; align-items: center; text-align: center; }
.section-head .more-link { font-weight: 700; font-size: 14px; white-space: nowrap; }

@media (min-width: 1024px) {
  .section-head { margin-bottom: 30px; gap: 14px; }
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-block;
  font-family: var(--display);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: .5px;
  text-transform: uppercase;
  padding: 14px 26px;
  border-radius: 8px;
  border: 0;
  cursor: pointer;
  text-align: center;
  line-height: 1.15;
  transition: filter .15s ease, background-color .15s ease, color .15s ease;
}
.btn:hover { filter: brightness(1.06); }

.btn-gold { background: var(--gold); color: var(--green); }
.btn-gold:hover { color: var(--green); }

.btn-green { background: var(--green); color: #fff; }
.btn-green:hover { color: #fff; }

.btn-outline-green {
  background: transparent;
  color: var(--green);
  border: 1.5px solid var(--green);
  padding: 12.5px 24.5px;
}

/* Keeps .btn's display typography: paired beside .btn-gold, a body-font
   sentence-case label read as a mistake rather than as a secondary action.
   Padding is trimmed by the 1.5px border so both buttons match in height. */
.btn-outline-light {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, .55);
  padding: 12.5px 24.5px;
}
.btn-outline-light:hover { color: #fff; background: rgba(255, 255, 255, .1); }

.btn-sm { font-size: 15px; padding: 11px 20px; border-radius: 7px; }
.btn-lg { font-size: 18px; padding: 16px 32px; }
.btn-block { display: block; width: 100%; }

.arrow-link {
  display: inline-block;
  font-weight: 700;
  font-size: 14px;
  border-bottom: 2px solid var(--gold);
  padding-bottom: 2px;
}

@media (min-width: 1024px) {
  .btn-lg { font-size: 19px; padding: 15px 34px; }
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--green);
  color: #fff;
  box-shadow: var(--shadow-header);
}
.header-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 11px;
  padding-bottom: 11px;
  padding-left: 18px;
  padding-right: 18px;
}

.brand { display: flex; align-items: center; gap: 10px; color: #fff; flex: none; }
.brand:hover { color: #fff; }
.brand-crest {
  width: 38px; height: 38px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .9);
  flex: none;
}
.brand-name {
  font-family: var(--display);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: .5px;
  text-transform: uppercase;
  line-height: 1.02;
}
.brand-name span { display: block; }

.nav-desktop { display: none; }
.social-header { display: none; }

.btn-header-register {
  margin-left: auto;
  font-size: 13px;
  padding: 11px 14px;
  border-radius: 7px;
  flex: none;
}

.nav-toggle {
  width: 48px; height: 48px;
  margin-right: -8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: transparent;
  border: 0;
  cursor: pointer;
  flex: none;
}
.nav-toggle i { display: block; width: 22px; height: 2px; background: #fff; border-radius: 2px; }

@media (min-width: 1024px) {
  .header-inner { gap: 22px; padding: 12px var(--gutter); }
  .brand { gap: 11px; }
  .brand-crest { width: 44px; height: 44px; }
  .brand-name { font-size: 18px; line-height: 1; white-space: nowrap; }
  .brand-name span { display: inline; }

  /* .wrap-wide caps the header at 1256px, so the row has ~1200px to work with
     at every desktop width — widening the window does not help. Nine nav items
     plus the brand and the register button need all of it, so the labels never
     wrap and the social icons are dropped here (they remain in the footer and
     in the mobile drawer). */
  .nav-desktop {
    align-items: center;
    gap: 12px;
    margin-left: auto;
  }
  .nav-desktop a {
    color: rgba(255, 255, 255, .92);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: .2px;
    white-space: nowrap;
  }
  .nav-desktop a:hover { color: #fff; }
  .nav-desktop a[aria-current="page"] { color: var(--gold); }

  .social-header {
    display: none;
    align-items: center;
    gap: 9px;
    padding-left: 6px;
    border-left: 1px solid rgba(255, 255, 255, .2);
  }
  .social-header a {
    width: 32px; height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .28);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
  }
  .social-header a:hover { background: rgba(255, 255, 255, .12); color: #fff; }

  .btn-header-register { margin-left: 0; font-size: 15px; padding: 10px 18px; white-space: nowrap; }
}

/* The horizontal nav needs ~1085px for nine items alongside the brand and the
   register button. Below 1200 there is not that much room, so those widths keep
   the drawer, which carries the same nine links. */
@media (min-width: 1200px) {
  .nav-desktop { display: flex; }
  .nav-toggle { display: none; }
}

@media (min-width: 1280px) {
  .header-inner { gap: 24px; }
  .nav-desktop { gap: 15px; }
  .nav-desktop a { font-size: 13.5px; letter-spacing: .3px; }
  .btn-header-register { padding: 10px 20px; }
}

/* --------------------------------------------------------------------------
   Mobile nav drawer
   -------------------------------------------------------------------------- */
.nav-drawer {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--green);
  color: #fff;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  animation: drawerIn .25s ease both;
}
.nav-drawer[hidden] { display: none; }

@keyframes drawerIn {
  from { opacity: 0; transform: translateY(-12px); }
  to { opacity: 1; transform: none; }
}

.drawer-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.drawer-close {
  width: 48px; height: 48px;
  margin-left: auto;
  margin-right: -8px;
  background: transparent;
  border: 0;
  color: var(--gold);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

.drawer-nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  color: #fff;
  font-family: var(--display);
  font-weight: 800;
  font-size: 24px;
  letter-spacing: .4px;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.drawer-nav a:last-child { border-bottom: 0; }
.drawer-nav a .chev { opacity: .5; }
.drawer-nav a[aria-current="page"] { color: var(--gold); }
.drawer-nav a[aria-current="page"] .chev { opacity: 1; }

.drawer-foot { padding: 22px 20px 28px; }
.drawer-foot .btn { margin-bottom: 12px; }
.drawer-social { display: flex; gap: 10px; }
.drawer-social a {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 8px;
  padding: 13px;
  color: #fff;
  font-weight: 700;
  font-size: 15px;
}
.drawer-social a:hover { background: rgba(255, 255, 255, .1); color: #fff; }

@media (min-width: 1024px) {
  .nav-drawer { display: none !important; }
}

/* --------------------------------------------------------------------------
   Page header (inner pages)
   -------------------------------------------------------------------------- */
.page-header {
  background: var(--green);
  color: var(--on-dark);
  padding: 36px 0;
}
.page-header h1 {
  color: #fff;
  font-size: 36px;
  line-height: 1;
  margin: 10px 0 12px;
}
.page-header .lede { color: var(--on-dark); }

@media (min-width: 768px) {
  .page-header { padding: 48px 0; }
  .page-header h1 { font-size: 46px; }
}
@media (min-width: 1024px) {
  .page-header { padding: 56px 0; }
  .page-header h1 { font-size: 56px; }
}

/* --------------------------------------------------------------------------
   Home — hero
   -------------------------------------------------------------------------- */
/* min-height rather than height: the headline wraps to four lines on a narrow
   phone and must not push the season pill up under the header. */
.hero {
  position: relative;
  min-height: 470px;
  background: var(--green) center/cover no-repeat;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.hero-overlay { position: absolute; inset: 0; background: var(--hero-overlay); }
.hero-content {
  position: relative;
  width: 100%;
  padding-top: 28px;
  padding-bottom: 40px;
  color: #fff;
}
.hero-content h1 {
  color: #fff;
  font-size: 40px;
  line-height: .95;
  letter-spacing: -.3px;
  max-width: 820px;
  margin-bottom: 14px;
}
.hero-content p {
  font-size: 15px;
  line-height: 1.5;
  max-width: 560px;
  color: rgba(255, 255, 255, .9);
  margin-bottom: 22px;
}

.season-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--gold);
  color: var(--green);
  padding: 7px 15px;
  border-radius: 100px;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.hero-actions { display: flex; flex-direction: column; gap: 10px; }
.hero-actions .btn { width: 100%; }
.hero-actions .btn-gold { padding: 16px 26px; }

@media (min-width: 768px) {
  .hero { min-height: 540px; }
  .hero-content h1 { font-size: 60px; }
  .hero-content p { font-size: 17px; }
  .hero-actions { flex-direction: row; flex-wrap: wrap; gap: 14px; }
  .hero-actions .btn { width: auto; }
  .season-pill { font-size: 12px; margin-bottom: 20px; }
}
@media (min-width: 1024px) {
  .hero { min-height: 600px; }
  .hero-content { padding-bottom: 58px; }
  .hero-content h1 { font-size: 80px; letter-spacing: -.5px; }
  .hero-content p { font-size: 19px; }
}

/* Below 768px the video is replaced by the poster still to save mobile data. */
@media (max-width: 767px) {
  .hero-video { display: none; }
}

/* --------------------------------------------------------------------------
   Home — trust strip
   -------------------------------------------------------------------------- */
.trust { background: var(--gold); color: var(--green); }
.trust-inner { display: flex; flex-direction: column; }
.trust-item {
  padding: 16px 0;
  border-bottom: 1px solid rgba(18, 60, 30, .18);
}
.trust-item:last-child { border-bottom: 0; }
.trust-stat { font-family: var(--display); font-weight: 800; font-size: 26px; line-height: 1.05; }
.trust-sub { font-size: 13px; font-weight: 700; opacity: .85; }
.trust-partner { display: flex; align-items: center; gap: 14px; }
.trust-partner img { width: 44px; height: 44px; border-radius: 8px; flex: none; }
.trust-partner strong { font-weight: 800; font-size: 15px; display: block; }

@media (min-width: 768px) {
  .trust-inner { flex-direction: row; }
  .trust-item {
    flex: 1;
    padding: 22px 24px;
    border-bottom: 0;
    border-right: 1px solid rgba(18, 60, 30, .18);
  }
  .trust-item:first-child { padding-left: 0; }
  .trust-item:last-child { border-right: 0; padding-right: 0; flex: 1.4; }
  .trust-stat { font-size: 30px; }
  .trust-partner img { width: 48px; height: 48px; }
}

/* --------------------------------------------------------------------------
   Cards & grids
   -------------------------------------------------------------------------- */
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: repeat(2, 1fr); gap: 22px 16px; }

@media (min-width: 768px) {
  .grid { gap: 20px; }
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .grid { gap: 20px; }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); gap: 22px; }
}

/* Program teaser cards (home) */
.program-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-card-strong);
  display: flex;
  flex-direction: column;
}
.program-card img { width: 100%; height: 150px; object-fit: cover; display: block; }
.program-card .body { padding: 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.program-card h3 { font-size: 26px; }
.program-card .arrow-link { margin-top: auto; align-self: flex-start; }
.program-card--dark { background: var(--green); }
.program-card--dark h3 { color: #fff; }
.program-card--dark .card-copy { color: var(--on-dark); }
.program-card--dark .arrow-link { color: #fff; }
.program-card--dark .arrow-link:hover { color: var(--gold); }

@media (min-width: 1024px) {
  .program-card img { height: 160px; }
  .program-card .body { padding: 24px; }
  .program-card h3 { font-size: 28px; }
}

/* "Why families choose TSC" tiles */
.value-tile { text-align: center; }
.value-tile .icon {
  width: 52px; height: 52px;
  margin: 0 auto 12px;
  border-radius: 16px;
  background: var(--offwhite);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}
.value-tile h3 { font-size: 19px; margin-bottom: 6px; }
.value-tile p { font-size: 13.5px; line-height: 1.5; color: var(--ink-softer); }

@media (min-width: 1024px) {
  .value-tile .icon { width: 60px; height: 60px; font-size: 28px; }
  .value-tile h3 { font-size: 22px; }
  .value-tile p { font-size: 14px; }
}

/* Photo grids (home teaser + gallery) */
.photo-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.photo-grid img { width: 100%; height: 120px; object-fit: cover; border-radius: 10px; display: block; }

@media (min-width: 768px) {
  .photo-grid { gap: 12px; }
  .photo-grid img { height: 160px; }
}
@media (min-width: 1024px) {
  .photo-grid { grid-template-columns: repeat(4, 1fr); }
  .photo-grid img { height: 170px; }
}

.gallery-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.gallery-grid img { width: 100%; height: 150px; object-fit: cover; border-radius: 12px; display: block; }

/* Each tile is a link to the full photo. Say so on hover and focus — a crop
   with no affordance reads as decoration, not as something to click. */
.gallery-grid a {
  display: block;
  border-radius: 12px;
  overflow: hidden;
  cursor: zoom-in;
  transition: transform .18s ease, box-shadow .18s ease;
}
.gallery-grid a:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 0, 0, .18); }
.gallery-grid a:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

@media (min-width: 768px) {
  .gallery-grid { gap: 14px; }
  .gallery-grid img { height: 210px; }
}
@media (min-width: 1024px) {
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
  .gallery-grid img { height: 240px; }
}

@media (prefers-reduced-motion: reduce) {
  .gallery-grid a { transition: none; }
  .gallery-grid a:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   Lightbox
   The grid crops to a uniform tile; this is where the whole photo gets seen.
   Built by site.js, so none of it exists until a gallery tile is clicked.
   -------------------------------------------------------------------------- */
body.lb-open { overflow: hidden; }

.lb {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 56px 12px 12px;
  background: rgba(10, 26, 15, .93);
}
.lb[hidden] { display: none; }

.lb-fig {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  min-width: 0;
  width: 100%;
}

/* contain, not cover: the whole frame, letterboxed rather than cropped. */
.lb-img {
  max-width: min(1200px, 100%);
  max-height: 78vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
  background: rgba(255, 255, 255, .06);
  transition: opacity .15s ease;
}
.lb-img.is-loading { opacity: .35; }

.lb-cap {
  color: rgba(255, 255, 255, .88);
  font-size: 14px;
  line-height: 1.45;
  text-align: center;
  max-width: 640px;
}
.lb-count {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 4px;
}

.lb-close, .lb-nav {
  flex: none;
  background: rgba(255, 255, 255, .1);
  border: 0;
  color: #fff;
  cursor: pointer;
  border-radius: 999px;
  line-height: 1;
  transition: background .15s ease;
}
.lb-close:hover, .lb-nav:hover { background: rgba(255, 255, 255, .22); }
.lb-close:focus-visible, .lb-nav:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

.lb-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 44px;
  height: 44px;
  font-size: 28px;
}
/* On a phone there is no room for arrows *beside* the photo — a row of
   [44px][photo][44px] left the picture at 262px on a 390px screen, smaller
   than the tile it was opened from. So they float over the edges here and
   only move out beside the frame once the viewport can spare the width. */
.lb-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  font-size: 30px;
  padding-bottom: 4px;
  background: rgba(10, 26, 15, .55);
}
.lb-prev { left: 8px; }
.lb-next { right: 8px; }
.lb-nav[hidden] { display: none; }

@media (min-width: 768px) {
  .lb { gap: 20px; padding: 64px 24px 24px; }
  .lb-img { max-height: 80vh; }
  .lb-fig { width: auto; }
  .lb-nav {
    position: static;
    transform: none;
    width: 52px;
    height: 52px;
    font-size: 34px;
    background: rgba(255, 255, 255, .1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .lb-img, .lb-close, .lb-nav { transition: none; }
}

/* --------------------------------------------------------------------------
   Program Plan
   -------------------------------------------------------------------------- */
.crumbs { margin-bottom: 14px; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.crumbs li { font-size: 13px; color: var(--on-dark); }
.crumbs li + li::before { content: "/"; margin-right: 6px; opacity: .5; }
.crumbs a { color: var(--on-dark-link); text-decoration: underline; }
.crumbs a:hover { color: #fff; }

/* Whole-card link: the heading is the label, so no nested anchor is needed. */
.pp-card {
  display: block;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 22px;
  box-shadow: var(--shadow-card);
  color: var(--ink);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.pp-card:hover {
  transform: translateY(-2px);
  border-color: var(--green-accent);
  box-shadow: var(--shadow-card-strong);
  color: var(--ink);
}
.pp-card h2 { margin: 4px 0 8px; }
.pp-count { margin-top: 12px; font-weight: 700; font-size: 14px; color: var(--green-accent); }

.pp-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 18px;
  margin: 0 0 22px;
  padding: 18px;
  background: var(--offwhite);
  border-radius: 10px;
}
.pp-lead { font-size: 15px; line-height: 1.6; color: var(--ink-soft); margin-bottom: 10px; }
.pp-lead strong { color: var(--green); }

.pp-fields { margin: 0; }
.pp-field { margin-bottom: 12px; }
.pp-field dt {
  font-family: var(--body);
  font-weight: 800;
  font-size: 11.5px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--green-accent);
  margin-bottom: 3px;
}
.pp-field dd { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); }
.pp-meta .pp-field { margin-bottom: 0; }
.pp-fields--wide .pp-field dd { font-size: 15px; }

.pp-h2 { margin: 6px 0 18px; }
.pp-session { padding-top: 40px; }

.pp-activity {
  background: #fff;
  border: 1px solid var(--border);
  border-left: 4px solid var(--green-accent);
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 16px;
}
.pp-activity h3 { margin: 6px 0 4px; }
.pp-timing { font-size: 12.5px; color: var(--muted); margin-bottom: 12px; }

.pp-badge {
  display: inline-block;
  font-family: var(--body);
  font-weight: 800;
  font-size: 10.5px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 100px;
  background: var(--green);
  color: #fff;
}
.pp-badge--core { background: var(--green-accent); }
.pp-badge--easier { background: #4a5a4c; }
.pp-badge--harder { background: var(--gold); color: var(--green); }

.pp-dl-row { margin: 22px 0 0; }
.pp-dl { display: inline-flex; align-items: center; gap: 10px; }
.pp-kb { font-family: var(--body); font-weight: 600; font-size: 12px; opacity: .75; letter-spacing: 0; text-transform: none; }

.pp-weeklist { list-style: none; padding-left: 0; }
.pp-weeklist li { border-bottom: 1px solid var(--border); padding: 10px 0; margin: 0; }
.pp-weeklist a { color: var(--ink-soft); }
.pp-weeklist a:hover { color: var(--green-accent); }
.pp-weeklist strong { color: var(--green); }

.pp-list { margin: 0 0 8px; padding-left: 20px; list-style: disc; }
.pp-list li { font-size: 15px; line-height: 1.6; color: var(--ink-soft); margin-bottom: 7px; }

.pp-source {
  margin-top: 18px;
  padding: 14px 16px;
  background: var(--offwhite);
  border-radius: 8px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-softer);
}

.pp-nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 28px; }
.pp-nav a { font-weight: 700; font-size: 14.5px; }
.pp-nav .pp-next { margin-left: auto; text-align: right; }

@media (min-width: 768px) {
  .pp-meta { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 20px 22px; }
  .pp-activity { padding: 24px; }
  .crumbs li { font-size: 13.5px; }
}

/* --------------------------------------------------------------------------
   At-home drill pages
   Written for a parent in the back yard on a phone, and to print on one sheet.
   -------------------------------------------------------------------------- */
.drill-head-row { display: flex; flex-direction: column; gap: 18px; }
.drill-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.drill-pill {
  background: var(--gold);
  color: var(--green);
  font-weight: 800;
  font-size: 11.5px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 100px;
}
.drill-chip {
  border: 1px solid rgba(255, 255, 255, .4);
  color: #fff;
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: .6px;
  text-transform: uppercase;
  padding: 4px 11px;
  border-radius: 100px;
}
.drill-skill { margin-top: 14px; color: var(--on-dark); font-size: 15px; line-height: 1.5; }
.drill-skill span {
  color: var(--gold);
  font-weight: 800;
  font-size: 11.5px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin-right: 8px;
}
.drill-acts { display: flex; flex-wrap: wrap; gap: 10px; }

.drill-strip { background: var(--gold); color: var(--green); padding: 16px 0; }
.drill-strip-inner { display: grid; grid-template-columns: 1fr; gap: 12px; }
.drill-strip span {
  display: block;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  opacity: .7;
}
.drill-strip strong { font-family: var(--display); font-weight: 800; font-size: 19px; line-height: 1.2; }

.drill-body { max-width: 1000px; display: flex; flex-direction: column; gap: 18px; }
.drill-any {
  background: var(--offwhite);
  border-radius: 10px;
  padding: 14px 16px;
  font-size: 14.5px;
  color: var(--ink-soft);
}
.drill-blk h2 { margin-bottom: 10px; }
.drill-play {
  background: #fff;
  border: 1px solid var(--border);
  border-left: 4px solid var(--green-accent);
  border-radius: 10px;
  padding: 20px;
}
.drill-score { background: var(--green); border-radius: 10px; padding: 22px; color: #fff; }
.drill-score h2 { color: var(--gold); font-family: var(--display); font-size: 26px; text-transform: uppercase; }
.drill-score-list { margin: 0; padding: 0; list-style: none; }
.drill-score-list li { position: relative; padding-left: 18px; margin-bottom: 8px; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, .92); }
.drill-score-list li::before { content: "\00b7"; position: absolute; left: 0; color: var(--gold); font-weight: 800; font-size: 22px; line-height: 1; }
.drill-win {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, .15);
  font-size: 15px;
  color: rgba(255, 255, 255, .92);
}
.drill-sub { font-size: 14px; color: var(--muted); margin-bottom: 12px; }
.drill-vars { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 0; padding: 0; list-style: none; }
.drill-vars li {
  display: flex;
  gap: 11px;
  background: var(--offwhite);
  border-radius: 10px;
  padding: 14px 16px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.drill-var-n {
  flex: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  font-weight: 800;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.drill-more-card { border-top: 3px solid var(--gold); }

@media (min-width: 768px) {
  .drill-head-row { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 24px; }
  .drill-acts { flex: none; }
  .drill-strip-inner { grid-template-columns: auto 1fr; gap: 32px; }
  .drill-strip-inner > div:first-child { white-space: nowrap; }
  .drill-vars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   Session plan pages
   Values follow design/TSC Session Plan Template.dc.html. Read on a phone at
   the field or printed and carried, so every part is labelled and each
   activity stands on its own.
   -------------------------------------------------------------------------- */
.sess-head-row { display: flex; flex-direction: column; gap: 18px; }
.sess-goal { max-width: 720px; }
.sess-wrap { max-width: 1000px; margin: 0 auto; }

/* Full-bleed gold band with a rule between each column. */
.sess-strip-inner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
.sess-strip-inner > div { padding: 4px 18px; }
.sess-strip-inner > div + div { border-left: 1px solid rgba(18, 60, 30, .18); }
.sess-strip-inner span {
  display: block;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  opacity: .7;
}
.sess-strip-inner strong { font-family: var(--display); font-weight: 800; font-size: 23px; line-height: 1.15; }

.sess-glance { display: grid; grid-template-columns: 1fr; gap: 14px; margin-bottom: 14px; }
.sess-card { background: var(--offwhite); border-radius: 12px; padding: 16px 18px; }
.sess-card h2 {
  font-family: var(--body);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--green-accent);
  margin-bottom: 5px;
}
.sess-card p { font-size: 14.5px; line-height: 1.5; color: #20352a; }
.sess-skill { border-left: 4px solid var(--green-accent); background: #fff; border: 1px solid var(--border); border-left: 4px solid var(--green-accent); }

.sess-run { margin-top: 26px; }
.sess-run-h {
  font-family: var(--display);
  font-weight: 800;
  font-size: 22px;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 12px;
}
.sess-run-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sess-run-chip {
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--offwhite);
  border-radius: 8px;
  padding: 10px 14px;
  font-weight: 700;
  font-size: 13.5px;
  color: var(--green);
}
.sess-run-chip:hover { background: #e8ece5; color: var(--green); }
.sess-run-chip span {
  font-family: var(--display);
  font-weight: 800;
  font-size: 13px;
  background: var(--green);
  color: var(--gold);
  width: 22px; height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.sess-run-chip .sess-run-dur { background: none; color: #7d8a7b; font-weight: 600; width: auto; height: auto; font-family: var(--body); font-size: 13.5px; }

.sess-act { border: 1px solid var(--border); border-radius: 14px; overflow: hidden; margin-bottom: 20px; background: #fff; }
.sess-act-head { display: flex; align-items: center; gap: 14px; padding: 16px 20px; flex-wrap: wrap; }
/* Play phases open and close the hour; practice activities sit between. The
   band alternates on the data's tone flag, not on position. */
.sess-act-head--dark { background: var(--green); color: #fff; }
.sess-act-head--gold { background: var(--gold); color: var(--green); }
.sess-act-n {
  flex: none;
  width: 30px; height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-weight: 800;
  font-size: 16px;
}
.sess-act-head--dark .sess-act-n { background: var(--gold); color: var(--green); }
.sess-act-head--gold .sess-act-n { background: var(--green); color: #fff; }
.sess-act-id { flex: 1; min-width: 200px; }
.sess-act-kind { font-weight: 800; font-size: 10.5px; letter-spacing: 1.2px; text-transform: uppercase; opacity: .75; }
.sess-act-head h3 { font-family: var(--display); font-weight: 800; font-size: 25px; text-transform: uppercase; line-height: 1.1; color: inherit; }
.sess-act-time { flex: none; text-align: right; }
.sess-act-time strong { display: block; font-family: var(--display); font-weight: 800; font-size: 22px; line-height: 1; }
.sess-act-time span { font-size: 11.5px; font-weight: 600; opacity: .8; }

.sess-act-body { padding: 22px; }
.sess-facts { display: grid; grid-template-columns: 1fr; gap: 14px; margin-bottom: 16px; }
.sess-fact { background: var(--offwhite); border-radius: 10px; padding: 14px 16px; }
.sess-fact-k {
  font-weight: 800;
  font-size: 10.5px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--green-accent);
  margin-bottom: 4px;
}
.sess-fact-v { font-size: 14.5px; line-height: 1.5; color: #20352a; }

/* Section label inside an activity — Barlow Condensed, not the body font. */
.sess-h {
  font-family: var(--display);
  font-weight: 700;
  font-size: 17px;
  text-transform: uppercase;
  color: var(--green);
  letter-spacing: .4px;
  margin-bottom: 5px;
}
.sess-blk { margin-bottom: 16px; }
.sess-org { font-size: 15px; line-height: 1.65; color: var(--ink-soft); }

.sess-rules { margin-bottom: 16px; background: #fffaf0; border: 1px solid #f0e0b8; border-radius: 10px; padding: 14px 16px; }
.sess-h--rules { font-size: 16px; color: #8a6a12; margin-bottom: 4px; }
.sess-rules p { font-size: 14.5px; line-height: 1.6; color: #4a4028; }

.sess-kw { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 16px; }
.sess-kw-k { font-weight: 800; font-size: 10.5px; letter-spacing: 1.1px; text-transform: uppercase; color: var(--green-accent); }
.sess-kw span:not(.sess-kw-k) {
  background: var(--green);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  padding: 6px 13px;
  border-radius: 100px;
}

/* Each answer sits with its question. The source sheets list them in separate
   blocks, which is unusable when you are reading it mid-session. */
.sess-qa { background: var(--offwhite); border-radius: 10px; padding: 16px 18px; margin-bottom: 14px; }
.sess-qa .sess-h { font-size: 16px; margin-bottom: 9px; }
.sess-qa-pair + .sess-qa-pair { margin-top: 12px; }
.sess-q { font-size: 14.5px; line-height: 1.5; font-weight: 700; color: #20352a; }
.sess-a {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-softer);
  padding-left: 14px;
  border-left: 2px solid var(--gold);
  margin-top: 4px;
}

.sess-note { display: flex; gap: 11px; align-items: flex-start; }
.sess-note-k {
  font-weight: 800;
  font-size: 10.5px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--muted);
  flex: none;
  padding-top: 2px;
}
.sess-note p { font-size: 14px; line-height: 1.6; color: #5c6b5e; font-style: italic; }

.sess-ref { display: grid; grid-template-columns: 1fr; gap: 20px; }
.sess-five { background: var(--green); color: #fff; border-radius: 14px; padding: 26px; }
.sess-five h2 { color: #fff; font-size: 28px; margin-bottom: 16px; line-height: 1.05; }
.sess-five-row { display: flex; gap: 13px; margin-bottom: 12px; }
.sess-five-row span { flex: none; width: 20px; font-family: var(--display); font-weight: 800; font-size: 14px; color: var(--gold); }
.sess-five-row p { font-size: 14.5px; line-height: 1.55; }
.sess-five-row b { color: #fff; }
.sess-reflect { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 26px; }
.sess-reflect h2 { font-size: 28px; margin-bottom: 16px; line-height: 1.05; }
.sess-reflect-q {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  padding-left: 14px;
  border-left: 2px solid var(--gold);
  margin-bottom: 14px;
}

@media (min-width: 768px) {
  .sess-head-row { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 24px; }
  .sess-strip-inner { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sess-glance { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sess-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sess-ref { grid-template-columns: 1.35fr 1fr; }
}

/* --------------------------------------------------------------------------
   Print — a coach or parent takes this to the field on paper.
   -------------------------------------------------------------------------- */
@media print {
  @page { size: letter; margin: .5in; }
  .no-print,
  .site-header, .nav-drawer, .site-footer, .skip-link { display: none !important; }
  .page-header { padding: 0 0 12pt; }
  .page-header h1 { font-size: 22pt; }
  .section { padding: 10pt 0; }
  .wrap, .wrap-wide { max-width: none; padding: 0; }
  .drill-body { gap: 10pt; }
  /* Keep the green and gold bands — they carry the structure of the page. */
  .drill-strip, .drill-score, .page-header, .pp-badge, .drill-pill,
  .sess-act-head, .sess-five, .sess-act-n, .sess-kw span {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .drill-blk, .pp-activity, .drill-vars li,
  .sess-act, .sess-qa-pair, .sess-five, .sess-reflect { break-inside: avoid; }
  .sess-glance, .sess-act-2col, .sess-ref { gap: 8pt; }

  /* A session runs to five activities. At screen spacing that prints to seven
     sheets, which nobody carries to a field — this brings it back to about
     three without dropping any content. */
  body { font-size: 9.5pt; line-height: 1.4; }
  .page-header h1 { font-size: 18pt; }
  .sess-act { margin-bottom: 7pt; }
  .sess-act-head { padding: 6pt 9pt; gap: 8pt; }
  .sess-act-head h3 { font-size: 13pt; }
  .sess-act-n { width: 18pt; height: 18pt; font-size: 9pt; }
  .sess-act-body { padding: 9pt; }
  .sess-act-2col, .sess-org, .sess-kw, .sess-rules { margin-bottom: 6pt; }
  .sess-qa-pair { margin-bottom: 5pt; }
  .sess-q, .sess-a, .sess-org, .sess-note,
  .pp-field dd, .drill-score-list li { font-size: 9.5pt; line-height: 1.4; }
  .sess-five, .sess-reflect { padding: 10pt; }
  .sess-five h2, .sess-reflect h2 { font-size: 14pt; margin-bottom: 6pt; }
  .sess-five-row, .sess-reflect-q { margin-bottom: 4pt; }
  .sess-five-row p, .sess-reflect-q { font-size: 9pt; line-height: 1.35; }
  .sess-card { padding: 8pt 10pt; }
  .drill-strip { padding: 6pt 0; }
  .h-sub, .pp-h2 { font-size: 14pt; margin-bottom: 6pt; }
  a[href]::after { content: ""; }
}

/* --------------------------------------------------------------------------
   Communities served
   -------------------------------------------------------------------------- */
.areas-lede { margin: 0 auto 16px; text-align: center; max-width: 780px; }
.areas-lede strong { color: var(--green); font-weight: 700; }
.areas-cta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 24px;
}

@media (min-width: 768px) {
  .areas-cta { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 14px; }
}

/* --------------------------------------------------------------------------
   Follow-us CTA
   -------------------------------------------------------------------------- */
.follow { background: var(--green); color: #fff; text-align: center; padding: 40px 0; }
.follow .inner { max-width: 820px; margin: 0 auto; }
.follow h2 { color: #fff; font-size: 30px; margin-bottom: 12px; }
.follow p { color: rgba(255, 255, 255, .82); font-size: 15px; margin-bottom: 20px; }
.follow-actions { display: flex; flex-direction: column; gap: 10px; }
/* inline-flex so the icon and label sit on one baseline; .btn is inline-block. */
.follow-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.follow-btn svg { flex: none; }

@media (min-width: 768px) {
  .follow { padding: 56px 0; }
  .follow h2 { font-size: 40px; }
  .follow p { font-size: 16px; }
  .follow-actions { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 12px; }
}

.form-note { font-size: 13.5px; margin-top: 14px; min-height: 1.2em; }
.form-note--ok { color: var(--gold); font-weight: 700; }
.form-note--err { color: #ffd9a8; font-weight: 700; }

.contact-form .form-note--ok { color: var(--green-accent); }
.contact-form .form-note--err { color: #a3341f; }

/* --------------------------------------------------------------------------
   Programs page
   -------------------------------------------------------------------------- */
.program-section { padding: 40px 0; }
.program-section--soft { background: var(--offwhite); }
/* On mobile the reading order is photo -> eyebrow/H2/intro -> quick facts ->
   detail lists -> CTA, so the wrapper columns collapse and the four blocks are
   ordered directly. `display: contents` lets the grandchildren become the flex
   items without duplicating markup for the two layouts. */
.program-layout { display: flex; flex-direction: column; }
.program-media, .program-body { display: contents; }
.program-media img { order: 1; width: 100%; height: 200px; object-fit: cover; border-radius: 14px; display: block; margin-bottom: 18px; }
.program-intro { order: 2; }
.program-layout .facts { order: 3; }
.program-detail { order: 4; }
.program-body h2 { font-size: 32px; margin: 8px 0 12px; }
.program-intro > p { margin-bottom: 18px; }

.facts {
  background: var(--offwhite);
  border-radius: 12px;
  padding: 18px 20px;
  margin-bottom: 18px;
}
.program-section--soft .facts { background: #fff; box-shadow: var(--shadow-card); }
.facts h3 { font-size: 19px; margin-bottom: 8px; }
.facts dl { margin: 0; font-size: 14.5px; line-height: 1.75; }
.facts dt { font-weight: 700; color: var(--green); display: inline; }
.facts dd { display: inline; margin: 0; color: var(--ink-soft); }
.facts dd::after { content: ""; display: block; }
.facts--dark { background: var(--green); color: var(--on-dark); }
.facts--dark h3 { color: #fff; }
.facts--dark dt { color: var(--gold); }
.facts--dark dd { color: var(--on-dark); }
.program-section--soft .facts--dark { background: var(--green); box-shadow: none; }

.detail-lists { display: grid; gap: 18px; margin-bottom: 22px; }
.detail-lists h3 { font-size: 19px; margin-bottom: 8px; }
.detail-lists li {
  font-size: 14.5px;
  line-height: 1.5;
  padding: 4px 0 4px 18px;
  position: relative;
  color: var(--ink-soft);
}
.detail-lists li::before {
  content: "";
  position: absolute;
  left: 0; top: 12px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--gold);
}

.program-actions { display: flex; flex-direction: column; gap: 12px; }

@media (min-width: 768px) {
  .program-section { padding: 48px 0; }
  .detail-lists { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .program-actions { flex-direction: row; flex-wrap: wrap; }
  .program-media img { height: 260px; }
}
@media (min-width: 1024px) {
  .program-section { padding: 60px 0; }
  /* Back to two real columns: media + quick facts on one side, prose on the other. */
  .program-layout { display: grid; grid-template-columns: 340px 1fr; gap: 44px; align-items: start; }
  .program-media, .program-body { display: block; }
  .program-layout--media-right { grid-template-columns: 1fr 340px; }
  .program-layout--media-right .program-media { order: 2; }
  .program-media img { height: auto; margin-bottom: 16px; }
  .program-media .facts { margin-bottom: 0; }
  .program-body h2 { font-size: 42px; }
}

/* --------------------------------------------------------------------------
   Register page
   -------------------------------------------------------------------------- */
.register-card {
  display: block;
  background: #fff;
  border-radius: 14px;
  padding: 24px;
  box-shadow: var(--shadow-card);
  border-top: 4px solid var(--gold);
  color: inherit;
}
.register-card:hover { color: inherit; box-shadow: 0 6px 22px rgba(0, 0, 0, .1); }
.register-card h3 { font-size: 27px; margin: 8px 0 10px; }
.register-card p { margin-bottom: 18px; }
.register-card .pill {
  display: block;
  text-align: center;
  background: var(--green);
  color: #fff;
  font-family: var(--display);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: .5px;
  text-transform: uppercase;
  padding: 14px;
  border-radius: 7px;
}

.steps { display: grid; gap: 22px; }
.step { display: flex; align-items: flex-start; gap: 16px; }
.step .num {
  flex: none;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--green);
  color: var(--gold);
  font-family: var(--display);
  font-weight: 800;
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.step h3 { font-size: 20px; margin-bottom: 6px; }
.step p { font-size: 14px; line-height: 1.55; color: var(--ink-softer); }

@media (min-width: 768px) {
  .register-card { padding: 28px; }
  .register-card h3 { font-size: 30px; }
  .register-card .pill { display: inline-block; padding: 10px 20px; }
}
@media (min-width: 1024px) {
  .steps { grid-template-columns: repeat(3, 1fr); gap: 22px; }
  .step { flex-direction: column; align-items: center; text-align: center; }
  .step .num { width: 52px; height: 52px; }
}

/* --------------------------------------------------------------------------
   About page
   -------------------------------------------------------------------------- */
/* Mobile puts the crest above the eyebrow and headline; desktop moves it to
   the right of them. */
.about-header { text-align: center; display: flex; flex-direction: column; }
.about-header .crest {
  order: -1;
  width: 104px; height: 104px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .9);
  margin: 0 auto 20px;
  display: block;
}
.about-header h1 { font-size: 34px; line-height: 1.02; }
.about-header .lede { text-align: left; margin: 0 auto; }

@media (min-width: 1024px) {
  .about-header {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 30px;
    align-items: center;
    text-align: left;
  }
  .about-header .crest { width: 150px; height: 150px; order: 0; margin: 0; }
  .about-header h1 { font-size: 50px; }
  .about-header .lede { max-width: 720px; margin: 0; }
}

.coach-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  background: var(--offwhite);
  border-radius: 14px;
  padding: 22px;
}
.coach-card img {
  width: 96px; height: 96px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 2px var(--green);
  flex: none;
}
.coach-card h3 { font-size: 26px; }
.coach-card .role { font-weight: 700; font-size: 14px; color: var(--green-accent); margin-bottom: 6px; }
.coach-card p { font-size: 14px; line-height: 1.55; color: var(--ink-softer); }

@media (min-width: 768px) {
  .coach-card { flex-direction: row; align-items: center; text-align: left; gap: 20px; }
  .coach-card img { width: 104px; height: 104px; }
}

.info-card {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px;
}
.info-card .icon { font-size: 26px; line-height: 1; margin-bottom: 10px; }
.info-card h3 { font-size: 22px; margin-bottom: 8px; }
.info-card p { font-size: 14.5px; line-height: 1.6; color: var(--ink-softer); }

@media (min-width: 1024px) {
  .info-card { padding: 24px; }
  .info-card h3 { font-size: 24px; }
}

.partner-band {
  background: var(--offwhite);
  padding: 36px 0;
  text-align: center;
}
.partner-band .inner { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.partner-band img { width: 200px; height: auto; border-radius: 14px; }
.partner-band h2 { font-size: 26px; margin-bottom: 10px; }
.partner-band p { font-size: 15px; line-height: 1.6; color: var(--ink-soft); text-align: left; max-width: 760px; }

@media (min-width: 1024px) {
  .partner-band { padding: 50px 0; text-align: left; }
  .partner-band .inner { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 26px; }
  .partner-band h2 { font-size: 32px; }
}

/* --------------------------------------------------------------------------
   Schedule page
   -------------------------------------------------------------------------- */
.season-card {
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}
.season-card .bar {
  padding: 14px 20px;
  font-family: var(--display);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: .5px;
  text-transform: uppercase;
}
.season-card .bar--gold { background: var(--gold); color: var(--green); }
.season-card .bar--green { background: var(--green); color: var(--gold); }
.season-card .body { padding: 20px; font-size: 14.5px; line-height: 1.7; color: var(--ink-soft); }
.season-card .body strong { color: var(--green); }

@media (min-width: 1024px) {
  .season-card .bar { font-size: 24px; }
}

.fields-panel {
  background: var(--offwhite);
  border-radius: 14px;
  padding: 24px;
  display: grid;
  gap: 20px;
}
.fields-panel h2 { font-size: 26px; margin-bottom: 12px; }
.fields-panel .body { font-size: 14.5px; line-height: 1.75; color: var(--ink-soft); }
.fields-panel .body strong { color: var(--green); }

@media (min-width: 1024px) {
  .fields-panel { padding: 30px; grid-template-columns: 1fr auto; align-items: center; gap: 24px; }
  .fields-panel h2 { font-size: 30px; }
  .fields-panel .btn { white-space: nowrap; }
}

/* --------------------------------------------------------------------------
   FAQ page
   -------------------------------------------------------------------------- */
.faq { max-width: 820px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-trigger {
  width: 100%;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 2px;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--display);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--green);
}
.faq-trigger .marker {
  flex: none;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--offwhite);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--body);
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
}
.faq-panel { padding: 0 2px 22px; }
.faq-panel p { font-size: 15px; line-height: 1.65; color: var(--ink-softer); }
.faq-panel[hidden] { display: none; }

@media (min-width: 1024px) {
  .faq-trigger { font-size: 22px; padding: 20px 4px; }
  .faq-panel { padding: 0 4px 22px; }
}

.faq-foot { text-align: center; margin-top: 34px; }
.faq-foot p { font-size: 15px; margin-bottom: 18px; }
.faq-foot .btn { width: 100%; }

@media (min-width: 768px) {
  .faq-foot p { margin-bottom: 22px; }
  .faq-foot .btn { width: auto; }
}

/* --------------------------------------------------------------------------
   Contact page
   -------------------------------------------------------------------------- */
.contact-layout { display: grid; gap: 32px; align-items: start; }

.contact-form {
  background: var(--offwhite);
  border-radius: 14px;
  padding: 22px;
}
.field { margin-bottom: 14px; }
.field label {
  display: block;
  font-weight: 700;
  font-size: 13px;
  color: var(--green);
  margin-bottom: 6px;
}
.field input, .field textarea {
  width: 100%;
  padding: 14px;
  border: 1px solid var(--input-border);
  border-radius: 8px;
  font-size: 16px; /* 16px prevents iOS Safari zoom-on-focus */
  background: #fff;
  color: var(--ink);
}
.field textarea { resize: vertical; min-height: 120px; }
.field-row { display: grid; gap: 14px; }

.contact-form .btn { width: 100%; margin-top: 4px; }
.contact-form .fine-print { margin-top: 12px; }

.contact-info h2 { font-size: 24px; margin-bottom: 12px; }
.contact-info + .contact-info { margin-top: 28px; }

.map-card {
  display: block;
  background: var(--offwhite);
  border-radius: 12px;
  padding: 18px;
  color: inherit;
}
.map-card:hover { color: inherit; background: #eef2ec; }
.map-card address {
  font-style: normal;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 6px 0 10px;
}

.social-buttons { display: flex; flex-direction: column; gap: 12px; }
.social-buttons a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--green);
  color: #fff;
  padding: 15px 18px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 14px;
}
.social-buttons a:hover { color: #fff; filter: brightness(1.15); }

@media (min-width: 768px) {
  .contact-form { padding: 28px; }
  .field-row { grid-template-columns: 1fr 1fr; }
  .contact-form .btn { width: auto; padding: 14px 30px; font-size: 17px; }
  .social-buttons { flex-direction: row; }
  .social-buttons a { padding: 11px 18px; }
}
@media (min-width: 1024px) {
  .contact-layout { grid-template-columns: 1.3fr 1fr; gap: 44px; }
  .contact-info h2 { font-size: 26px; }
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer { background: var(--green-deep); color: var(--on-dark-link); }
.footer-inner {
  display: grid;
  gap: 26px;
  padding-top: 36px;
  padding-bottom: 26px;
}
.footer-brand { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; color: #fff; }
.footer-brand:hover { color: #fff; }
.footer-brand img {
  width: 42px; height: 42px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .9);
  flex: none;
}
.footer-brand span {
  font-family: var(--display);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: .5px;
  text-transform: uppercase;
  line-height: 1.02;
}
.footer-brand span span { display: block; }
.footer-blurb { font-size: 13.5px; line-height: 1.6; max-width: 280px; margin-bottom: 16px; }
.footer-partner { width: 150px; height: auto; }

.footer-links { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.footer-col h2 {
  font-size: 15px;
  color: #fff;
  margin-bottom: 10px;
}
.footer-col a {
  display: block;
  color: var(--on-dark-link);
  font-size: 14px;
  padding: 5px 0;
}
.footer-col a:hover { color: var(--gold); }

.footer-social { display: flex; gap: 10px; }
.footer-social a {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(255, 255, 255, .1);
  border-radius: 8px;
  padding: 13px;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
}
.footer-social a:hover { color: var(--gold); background: rgba(255, 255, 255, .16); }

.footer-bottom { border-top: 1px solid rgba(255, 255, 255, .12); }
.footer-bottom .wrap-wide {
  padding-top: 18px;
  padding-bottom: 18px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, .55);
}

@media (min-width: 768px) {
  .footer-inner { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 26px; padding-top: 44px; }
  /* The three link columns become siblings of the brand block. */
  .footer-links { display: contents; }
  /* Below this width the social buttons stand in for the Connect column;
     from here up the Connect column carries the same links. */
  .footer-social { display: none; }
}
@media (min-width: 1024px) {
  .footer-inner { gap: 34px; padding-top: 48px; padding-bottom: 30px; }
  .footer-brand img { width: 46px; height: 46px; }
  .footer-brand span { font-size: 18px; white-space: nowrap; }
  .footer-brand span span { display: inline; }
}

/* --------------------------------------------------------------------------
   404
   -------------------------------------------------------------------------- */
.notfound { text-align: center; padding: 70px 0; }
.notfound h1 { font-size: 40px; margin-bottom: 14px; }
.notfound p { margin-bottom: 24px; color: var(--ink-soft); }

/* Age bands on the at-home index. */
.pp-band + .pp-band { margin-top: 34px; }

/* Session header actions stack, matching the design reference. */
@media (min-width: 768px) {
  .sess-acts { flex-direction: column; align-items: stretch; }
}