/* ==========================================================================
   Marston Athletics
   Gym print culture: rafter banners, taped photographs, painted court lines,
   screen-printed buttons, black & white roster photography.

   THE PALETTE
   The official brand colours are the five below and nothing else. They are
   declared once, at the top of :root, and every other colour on the site is
   mixed from them with color-mix(). If you need to adjust the brand, change a
   value here and it changes everywhere. Do not paste a hex code further down
   this file.

     Purple  #781FD8      Gold  #D4AF76      Silver  #B3B2B2
     Black   #000000      White #FFFFFF
   ========================================================================== */

@font-face { font-family: 'Big Shoulders'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/bigshoulders-700.woff2') format('woff2'); }
@font-face { font-family: 'Big Shoulders'; font-style: normal; font-weight: 800; font-display: swap; src: url('fonts/bigshoulders-800.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/barlow-400.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: italic; font-weight: 400; font-display: swap; src: url('fonts/barlow-400i.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/barlow-500.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/barlow-600.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/barlow-700.woff2') format('woff2'); }
@font-face { font-family: 'Saira Stencil One'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/sairastencil-400.woff2') format('woff2'); }
@font-face { font-family: 'Zilla Slab'; font-style: italic; font-weight: 400; font-display: swap; src: url('fonts/zilla-400i.woff2') format('woff2'); }
@font-face { font-family: 'Zilla Slab'; font-style: italic; font-weight: 500; font-display: swap; src: url('fonts/zilla-500i.woff2') format('woff2'); }

:root {
  /* the five official brand colours */
  --purple: #781FD8;
  --gold:   #D4AF76;
  --silver: #B3B2B2;
  --black:  #000000;
  --white:  #FFFFFF;

  /* everything else is mixed from those five, never pasted in */
  --purple-deep: color-mix(in srgb, var(--purple) 74%, var(--black));  /* link and hover purple */
  --gold-tint:   color-mix(in srgb, var(--gold) 24%, var(--white));    /* tinted section grounds */
  --muted:       color-mix(in srgb, var(--silver) 60%, var(--black));  /* secondary text */
  --rule:        color-mix(in srgb, var(--silver) 45%, var(--white));  /* hairlines */
  --tape:        color-mix(in srgb, var(--gold) 85%, transparent);     /* masking tape */
  --tape-shade:  color-mix(in srgb, var(--gold) 72%, transparent);

  --display: 'Big Shoulders', 'Arial Narrow', sans-serif;
  --body: 'Barlow', 'Helvetica Neue', Arial, sans-serif;
  --stencil: 'Saira Stencil One', 'Arial Black', sans-serif;
  --serif: 'Zilla Slab', Georgia, serif;
  --pad: clamp(1.25rem, 5vw, 4rem);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 4.5rem; overflow-x: clip; }
body {
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--black);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: var(--purple-deep); }

/* paper grain over everything, like a printed page */
body::after {
  content: '';
  position: fixed; inset: 0;
  z-index: 90;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.045 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- shared type ---------- */
.eyebrow {
  font-family: var(--stencil);
  font-size: 0.8125rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--purple-deep);
  margin-bottom: 0.75rem;
}
h1.arc-head,
h2.arc-head {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.25rem, 5.5vw, 3.75rem);
  line-height: 0.95;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  text-wrap: balance;
  margin-bottom: 2.5rem;
  position: relative;
  padding-bottom: 1.25rem;
}
/* painted court marking: baseline + free-throw arc */
h1.arc-head::after,
h2.arc-head::after {
  content: '';
  position: absolute; left: 0; bottom: 0;
  width: min(220px, 60%);
  border-bottom: 3px solid currentColor;
}
h1.arc-head::before,
h2.arc-head::before {
  content: '';
  position: absolute;
  left: calc(min(220px, 60%) / 2 - 27px); bottom: 0;
  width: 54px; height: 27px;
  border: 3px solid currentColor;
  border-bottom: none;
  border-radius: 54px 54px 0 0;
}

/* ---------- screen-printed buttons ---------- */
.btn {
  display: inline-block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
  padding: 0.8rem 1.5rem;
  background: var(--purple);
  color: var(--white);
  border: 2px solid var(--black);
  box-shadow: 5px 5px 0 var(--black);
  transition: background-color 0.15s ease, translate 0.1s ease, box-shadow 0.1s ease, color 0.15s ease;
}
.btn:hover { background: var(--purple-deep); }
.btn:active { translate: 4px 4px; box-shadow: 1px 1px 0 var(--black); }
.btn:focus-visible { outline: 3px solid var(--purple); outline-offset: 3px; }
.btn-sm { font-size: 0.98rem; padding: 0.5rem 1rem; box-shadow: 4px 4px 0 var(--black); }
.btn-outline { background: transparent; color: var(--black); }
.btn-outline:hover { background: var(--black); color: var(--white); }
.btn-ghost {
  background: transparent; color: var(--white);
  border-color: rgba(255,255,255,0.85);
  box-shadow: none;
}
.btn-ghost:hover { background: rgba(255,255,255,0.14); }
.btn-ghost:active { translate: 2px 2px; }
.section-dark .btn, .hero .btn:not(.btn-ghost) {
  border-color: var(--black);
  box-shadow: 5px 5px 0 rgba(0,0,0,0.6);
}
.section-dark .btn:active, .hero .btn:not(.btn-ghost):active { box-shadow: 1px 1px 0 rgba(0,0,0,0.6); }

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 1.5rem;
  padding: 0.6rem var(--pad);
  background: rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 2px solid var(--black);
}
.nav-logo img { height: 42px; width: auto; }
.nav-links { display: flex; gap: 1.1rem; margin-left: auto; flex-wrap: wrap; }
.nav-links a {
  font-family: var(--display); font-weight: 700; font-size: 1.05rem;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--black); text-decoration: none;
  display: inline-block; padding: 0.55rem 0.2rem;
}
.nav-links a:hover { color: var(--purple); }
.nav-links a.is-current { color: var(--purple-deep); box-shadow: inset 0 -3px 0 var(--purple); }
.nav-cta { white-space: nowrap; font-size: 0.95rem; padding: 0.5rem 1rem; box-shadow: 3px 3px 0 var(--black); }
.nav-cta:active { translate: 2px 2px; box-shadow: 1px 1px 0 var(--black); }

.nav-toggle {
  display: none;
  margin-left: auto;
  background: none; border: none; cursor: pointer;
  width: 48px; height: 44px;
  padding: 10px 8px;
  flex-direction: column; justify-content: space-between;
}
.nav-toggle span {
  display: block; height: 3px; width: 100%;
  background: var(--black);
  transition: transform 0.28s cubic-bezier(0.3, 0.7, 0.3, 1), opacity 0.2s ease;
}
.nav-toggle:focus-visible { outline: 3px solid var(--purple); outline-offset: 2px; }
.nav.open .nav-toggle span:nth-child(1) { transform: translateY(10.5px) rotate(45deg); }
.nav.open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav.open .nav-toggle span:nth-child(3) { transform: translateY(-10.5px) rotate(-45deg); }

@media (max-width: 860px) {
  .nav { flex-wrap: wrap; gap: 0 1rem; padding-top: 0.5rem; padding-bottom: 0.5rem; }
  .nav-logo img { height: 34px; }
  .nav-toggle { display: flex; }
  .nav-links {
    order: 3; width: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    max-height: 0; overflow: hidden;
    opacity: 0; visibility: hidden;
    translate: 0 -8px;
    border-top: 0 solid var(--black);
    transition: max-height 0.42s cubic-bezier(0.25, 0.8, 0.35, 1), opacity 0.28s ease,
                translate 0.35s ease, visibility 0s 0.42s;
  }
  .nav.open .nav-links {
    max-height: 480px;
    opacity: 1; visibility: visible;
    translate: 0 0;
    margin-top: 0.5rem;
    padding: 0.5rem 0 0.25rem;
    border-top: 2px solid var(--black);
    transition: max-height 0.45s cubic-bezier(0.25, 0.8, 0.35, 1), opacity 0.3s ease 0.05s,
                translate 0.4s ease;
  }
  .nav-links a { font-size: 1.35rem; padding: 0.7rem 0.2rem; border-bottom: 1px solid var(--gold-tint); }
  .nav-cta {
    order: 4; width: 100%; text-align: center;
    max-height: 0; overflow: hidden; opacity: 0; visibility: hidden;
    padding-top: 0; padding-bottom: 0; border-width: 0; margin: 0;
    transition: max-height 0.42s cubic-bezier(0.25, 0.8, 0.35, 1), opacity 0.28s ease, visibility 0s 0.42s;
  }
  .nav.open .nav-cta {
    max-height: 72px; opacity: 1; visibility: visible;
    padding: 0.7rem 1rem; border-width: 2px;
    margin: 0.9rem 0 0.6rem;
    transition: max-height 0.45s cubic-bezier(0.25, 0.8, 0.35, 1), opacity 0.3s ease 0.1s;
  }
  @media (prefers-reduced-motion: no-preference) {
    .nav.open .nav-links a { animation: navItem 0.35s cubic-bezier(0.25, 0.8, 0.35, 1) both; }
    .nav.open .nav-links a:nth-child(1) { animation-delay: 0.05s; }
    .nav.open .nav-links a:nth-child(2) { animation-delay: 0.09s; }
    .nav.open .nav-links a:nth-child(3) { animation-delay: 0.13s; }
    .nav.open .nav-links a:nth-child(4) { animation-delay: 0.17s; }
    .nav.open .nav-links a:nth-child(5) { animation-delay: 0.21s; }
    .nav.open .nav-links a:nth-child(6) { animation-delay: 0.25s; }
    @keyframes navItem { from { opacity: 0; translate: 0 10px; } }
  }
}

/* ---------- hero ---------- */
.hero { position: relative; min-height: min(92vh, 900px); display: flex; align-items: flex-end; overflow: hidden; }
.hero-photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: center 30%;
}
.hero::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.55) 55%, rgba(0,0,0,0.9) 100%);
}
.hero-inner { position: relative; z-index: 1; padding: 6rem var(--pad) 4rem; max-width: 60rem; }
.hero-e { color: var(--gold); }
/* The strapline sits over the brightest part of the photo on wide screens,
   where the gold measured under 3:1 on half its pixels. A soft, blurred scrim
   behind the line plus a tight shadow round the letters bring every glyph
   pixel to 4.5:1 or better at desktop and mobile widths. The gold, the type
   and the layout are unchanged: the scrim is absolutely positioned, and the
   box only shrinks to the width of its own text. */
.hero-e {
  position: relative;
  width: fit-content;
  text-shadow: 0 1px 2px rgba(0,0,0,0.9), 0 0 10px rgba(0,0,0,0.65);
}
.hero-e::before {
  content: '';
  position: absolute; z-index: -1;
  inset: -0.6em -1.1em;
  background: rgba(0,0,0,0.55);
  filter: blur(14px);
  border-radius: 999px;
}
.hero-h {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(3.25rem, 10.5vw, 7.5rem);
  line-height: 0.9;
  text-transform: uppercase;
  color: var(--white);
  display: flex; flex-direction: column;
  margin-bottom: 1.25rem;
}
.hero-h-accent { color: var(--purple); }
.hero-sub { color: rgba(255,255,255,0.92); font-size: clamp(1.05rem, 2vw, 1.3rem); max-width: 38rem; margin-bottom: 1.75rem; }
.hero-ctas { display: flex; gap: 1rem; flex-wrap: wrap; }

@media (prefers-reduced-motion: no-preference) {
  .hero-photo { animation: heroSettle 2.4s cubic-bezier(0.2, 0.6, 0.25, 1) both; }
  @keyframes heroSettle { from { scale: 1.07; } to { scale: 1; } }
  .hero-h span { opacity: 0; translate: 0 0.45em; animation: rise 0.6s cubic-bezier(0.2, 0.7, 0.3, 1) forwards; }
  .hero-h span:nth-child(2) { animation-delay: 0.1s; }
  .hero-h span:nth-child(3) { animation-delay: 0.2s; }
  .hero-h span:nth-child(4) { animation-delay: 0.34s; }
  .hero-e, .hero-sub, .hero-ctas { opacity: 0; animation: fade 0.7s ease 0.55s forwards; }
  @keyframes rise { to { opacity: 1; translate: 0 0; } }
  @keyframes fade { to { opacity: 1; } }
}

/* ---------- ticker ---------- */
.ticker { background: var(--black); color: var(--white); overflow: hidden; border-bottom: 3px solid var(--purple); }
.ticker-track { display: flex; gap: 2.75rem; width: max-content; padding: 0.8rem 0; align-items: center; }
.ticker-track span { font-family: var(--display); font-weight: 700; font-size: 1.15rem; text-transform: uppercase; letter-spacing: 0.08em; white-space: nowrap; }
.ticker-track span::before { content: '/'; color: var(--purple); margin-right: 2.75rem; font-weight: 800; }
.ticker-label { color: var(--gold); }
.ticker-label::before { content: '' !important; margin: 0 !important; }
@media (prefers-reduced-motion: no-preference) {
  .ticker-track { animation: scroll 36s linear infinite; }
  @keyframes scroll { to { transform: translateX(-50%); } }
}
@media (prefers-reduced-motion: reduce) {
  .ticker-track { flex-wrap: wrap; width: auto; padding: 0.8rem var(--pad); }
  .ticker-track span[aria-hidden] { display: none; }
}

/* ---------- sections ---------- */
.section { padding: clamp(3.5rem, 8vw, 6.5rem) var(--pad); }
.section-dark { background: var(--black); color: var(--white); }
.section-dark a { color: var(--gold); }
.section-dark a.btn { color: var(--white); }
.section-dark .eyebrow { color: var(--gold); }
.section-tint { background: var(--gold-tint); }

/* scroll reveals: translate/rotate as separate properties so tilted items settle into place */
.reveal { opacity: 0; translate: 0 20px; transition: opacity 0.6s ease, translate 0.65s cubic-bezier(0.22, 0.61, 0.36, 1); }
.reveal.in { opacity: 1; translate: 0 0; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; translate: 0 0; transition: none; } }

/* ---------- taped photographs ---------- */
.taped { position: relative; box-shadow: 0 12px 26px rgba(0,0,0,0.22); }
.taped img { border: 8px solid var(--white); outline: 1px solid rgba(0,0,0,0.3); width: 100%; }
.taped::before, .taped::after {
  content: '';
  position: absolute; top: -13px;
  width: 84px; height: 26px;
  background: linear-gradient(var(--tape), var(--tape-shade));
  box-shadow: 0 1px 2px rgba(0,0,0,0.18);
  z-index: 2;
}
.taped::before { left: -17px; transform: rotate(-37deg); }
.taped::after { right: -17px; transform: rotate(35deg); }

/* ---------- mission ---------- */
.mission-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center; max-width: 72rem; margin: 0 auto; }
.mission-grid > div > p { max-width: 34rem; }
.mission-photo { rotate: 1.4deg; margin-top: 1rem; }
.pull {
  margin-top: 2rem;
  border-left: 4px solid var(--purple);
  padding-left: 1.25rem;
  max-width: 34rem;
}
.pull p {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.2rem, 2vw, 1.45rem);
  line-height: 1.5;
}
.pull cite {
  display: block; margin-top: 0.75rem;
  font-family: var(--stencil); font-style: normal;
  font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted);
}
@media (max-width: 820px) { .mission-grid { grid-template-columns: 1fr; } .mission-photo { max-width: 24rem; margin: 1.5rem auto 0; } }

/* ---------- rafter banners ---------- */
.banners {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: clamp(0.9rem, 2.5vw, 1.75rem);
  max-width: 70rem;
  margin: 0 auto clamp(3rem, 7vw, 5rem);
}
.banner {
  clip-path: polygon(0 0, 100% 0, 100% 76%, 50% 100%, 0 76%);
  padding: 1.3rem 0.9rem 2.9rem;
  text-align: center;
  transform-origin: top center;
}
.banner small { display: block; font-family: var(--stencil); font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.85; }
.banner strong {
  display: block;
  font-family: var(--display); font-weight: 800;
  font-size: clamp(2rem, 4.5vw, 2.9rem);
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.banner span { display: block; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.9; }
.b-gold { background: var(--gold); color: var(--black); rotate: -1.1deg; }
.b-purple { background: var(--purple); color: var(--white); rotate: 0.9deg; }
.b-silver { background: var(--silver); color: var(--black); rotate: -0.7deg; }
.b-white { background: var(--white); color: var(--black); rotate: 1.2deg; }
/* banners drop from the rafters instead of rising */
.banner.reveal { translate: 0 -26px; transition-property: opacity, translate, rotate; }
.banner.reveal:not(.in) { rotate: 0deg; }
.banners .banner:nth-child(2) { transition-delay: 0.08s; }
.banners .banner:nth-child(3) { transition-delay: 0.16s; }
.banners .banner:nth-child(4) { transition-delay: 0.24s; }

/* ---------- programs: the price-board list ---------- */
.programs { max-width: 72rem; margin: 0 auto; }
.program {
  display: grid;
  grid-template-columns: minmax(180px, 320px) 1fr;
  gap: 0.5rem 3rem;
  align-items: start;
  padding: 1.9rem 0;
  border-top: 1px solid rgba(255,255,255,0.22);
}
.program:last-of-type { border-bottom: 1px solid rgba(255,255,255,0.22); }
.program-name h3 {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(1.9rem, 3.6vw, 2.7rem);
  line-height: 0.95;
  text-transform: uppercase;
  color: var(--white);
  transition: color 0.25s ease;
}
.program:hover .program-name h3 { color: var(--gold); }
.program-tag {
  display: inline-block;
  font-family: var(--stencil); font-size: 0.62rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  background: var(--purple); color: var(--white);
  padding: 0.25rem 0.55rem;
  margin-top: 0.5rem;
}
.program > p { font-size: 1rem; color: rgba(255,255,255,0.85); max-width: 46rem; }
.programs .program:nth-child(even).reveal { transition-delay: 0.06s; }
@media (max-width: 720px) { .program { grid-template-columns: 1fr; } }


/* ---------- page heads (interior pages) ---------- */
.page-head { padding-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.page-head h1.arc-head { margin-bottom: 1.75rem; }
.lede { max-width: 46rem; font-size: clamp(1.05rem, 1.6vw, 1.18rem); }
.lede + .cta-row, .lede + .pay-policy { margin-top: 1.75rem; }
.lede-invert { color: rgba(255,255,255,0.88); }

/* ---------- the free-first-workout stamp ---------- */
.free-banner {
  display: block;
  width: fit-content;
  margin: 2.25rem auto 0;
  rotate: -0.6deg;
  background: var(--purple);
  color: var(--white);
  font-family: var(--stencil);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  padding: 0.6rem 1.1rem;
  box-shadow: 4px 4px 0 var(--black);
}

/* ---------- the live schedule (Canva embed, training page only) ----------
   The design is 768 x 768, so the frame is held exactly square: at the
   design's own ratio Canva fills it edge to edge with no letterboxing. The
   gold rule is an outline, not a border, so it cannot eat into that ratio. */
.schedule-embed {
  position: relative;
  width: 100%;
  max-width: 44rem;
  aspect-ratio: 1 / 1;
  margin-top: 2rem;
  background: rgba(255,255,255,0.06);
  outline: 3px solid var(--gold);
}
.schedule-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.schedule-embed + .cta-row { margin-top: 2.25rem; }

/* ---------- rows of buttons ---------- */
.cta-row { display: flex; gap: 1.1rem; flex-wrap: wrap; align-items: center; margin-top: 1.75rem; }
.consent-note { margin-top: 1.25rem; font-size: 0.92rem; color: var(--muted); }
.section-dark .consent-note { color: rgba(255,255,255,0.7); }
/* Outline buttons on a dark ground. On dark sections every button's border
   is darkened by '.section-dark .btn', which outranks a single class, so
   '.btn-on-dark' alone lost and outline buttons rendered as bare text. Both
   selectors below match that rule's weight and come after it in the file, so
   they win; the first also catches any outline button placed on a dark
   section without the extra class. */
.section-dark .btn-outline,
.btn.btn-on-dark { color: var(--white); border-color: var(--white); }
.section-dark .btn-outline:hover,
.btn.btn-on-dark:hover { background: var(--white); color: var(--black); }

/* ---------- the paid-in-advance note ----------
   The client was specific that this cannot live only in general copy, so it
   sits beside every registration and payment link on the site. Same markup
   every time, on light and dark sections both. */
.pay-policy {
  max-width: 46rem;
  margin-top: 1.5rem;
  border-left: 4px solid var(--purple);
  background: var(--gold-tint);
  padding: 0.85rem 1.1rem;
  font-size: 0.98rem;
}
.pay-policy a { white-space: nowrap; }
.section-dark .pay-policy { background: rgba(255,255,255,0.08); color: var(--white); }
.section-tint .pay-policy { background: rgba(255,255,255,0.6); }

/* the same statement, said once and loudly, at the top of the payment page */
.policy-statement {
  max-width: 46rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.4rem, 3vw, 2rem);
  line-height: 1.15;
  text-transform: uppercase;
  border-left: 6px solid var(--purple);
  padding: 0.75rem 0 0.75rem 1.25rem;
  margin-bottom: 1.75rem;
}
.policy-statement strong { display: block; color: var(--purple-deep); }

/* ---------- teaser grid (home page training preview) ---------- */
.teasers {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1.75rem 2rem;
  max-width: 72rem;
  margin: 0 auto;
}
.teaser { border-top: 3px solid var(--gold); padding-top: 1rem; }
.teaser h3 {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 0.95; text-transform: uppercase;
  color: var(--white);
}
.teaser p { font-size: 0.96rem; color: rgba(255,255,255,0.82); margin-top: 0.5rem; }
.teasers .teaser:nth-child(2).reveal { transition-delay: 0.06s; }
.teasers .teaser:nth-child(3).reveal { transition-delay: 0.12s; }
.teasers .teaser:nth-child(4).reveal { transition-delay: 0.18s; }
.teaser-more { max-width: 72rem; margin: 2.75rem auto 0; }

/* ---------- Marston Select: a pointer to a separate program ---------- */
.next-step { max-width: 46rem; }
.next-step h2 {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(1.9rem, 3.6vw, 2.7rem);
  line-height: 0.95; text-transform: uppercase;
  margin-bottom: 0.9rem;
}
.next-step .cta-row { margin-top: 1.4rem; }

/* ---------- generic cards ---------- */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: 2rem;
  max-width: 72rem;
  margin: 0 auto;
  align-items: start;
}
.card {
  border: 3px solid var(--black);
  background: var(--white);
  box-shadow: 9px 9px 0 var(--gold);
  padding: 1.6rem 1.5rem;
}
.card h3 { font-family: var(--display); font-weight: 800; font-size: 1.6rem; text-transform: uppercase; line-height: 1; margin-bottom: 0.75rem; }
.card p + p { margin-top: 0.8rem; }
.card p { font-size: 0.98rem; }
.card-invert { background: var(--black); border-color: var(--gold); box-shadow: 9px 9px 0 rgba(0,0,0,0.5); }
.card-invert h3 { color: var(--white); }
.card-invert p { color: rgba(255,255,255,0.85); }
.pay-handle { font-family: var(--display); font-weight: 800; font-size: clamp(1.3rem, 2.4vw, 1.75rem); word-break: break-word; }
.cards + .pay-policy, .cards + .pay-qrs { margin-top: 2.5rem; }
.pay-qrs + .pay-policy { margin-top: 2rem; }

/* ---------- split media (list beside a photo) ---------- */
.split-media {
  display: grid; grid-template-columns: 1.2fr 0.8fr;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  max-width: 72rem; margin: 0 auto; align-items: center;
}
.skill-list { list-style: none; display: grid; gap: 1.1rem; }
.skill-list li { border-top: 1px solid var(--rule); padding-top: 0.85rem; }
.skill-list strong {
  display: block;
  font-family: var(--display); font-weight: 700; font-size: 1.3rem;
  text-transform: uppercase; letter-spacing: 0.02em;
}
.skill-list span { font-size: 0.96rem; color: var(--muted); }
@media (max-width: 820px) { .split-media { grid-template-columns: 1fr; } .split-media figure { max-width: 24rem; margin: 0 auto; } }

/* ---------- location tags ---------- */
.loc-tag {
  display: inline-block;
  font-family: var(--stencil); font-size: 0.78rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.12rem 0.5rem;
  background: var(--purple); color: var(--white);
}
.loc-tag-alt { background: var(--gold); color: var(--black); }

/* ---------- links out to a Google Doc ---------- */
.doc-link { color: inherit; text-decoration: none; border-bottom: 1.5px dotted var(--purple); }
.doc-link::after { content: ' \2197'; font-size: 0.75em; color: var(--purple-deep); }
.doc-link:hover { color: var(--purple-deep); }

/* ---------- events feed ----------
   Empty on purpose. The styling below is written for cards that are not there
   yet, so a list published from a Google Sheet can drop straight in. See the
   EVENTS FEED comment in events.html for the markup shape. */
.events-feed {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 2rem;
  max-width: 76rem;
  margin: 0 auto;
  align-items: start;
}
.events-empty {
  grid-column: 1 / -1;
  max-width: 46rem;
  border: 3px dashed var(--muted);
  background: rgba(255,255,255,0.55);
  padding: 1.75rem 1.6rem;
  font-size: 1rem;
}
.events-empty strong { display: block; font-family: var(--display); font-weight: 800; font-size: 1.5rem; text-transform: uppercase; margin-bottom: 0.5rem; }
/* the empty state stands down as soon as there is a single real event */
.events-feed:has(.event-card) .events-empty { display: none; }

.event-card {
  border: 3px solid var(--black);
  background: var(--white);
  box-shadow: 9px 9px 0 var(--gold);
  padding: 1.5rem 1.4rem;
}
.event-when {
  font-family: var(--stencil); font-size: 0.76rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--purple-deep);
  margin-bottom: 0.5rem;
}
.event-what { font-family: var(--display); font-weight: 800; font-size: 1.7rem; line-height: 0.98; text-transform: uppercase; }
.event-where, .event-who, .event-note { font-size: 0.95rem; color: var(--muted); margin-top: 0.6rem; }
.event-cost {
  font-family: var(--display); font-weight: 800; font-size: 1.35rem;
  color: var(--purple-deep); font-variant-numeric: tabular-nums;
  margin-top: 0.6rem;
}
.event-go { margin-top: 1.1rem; }

/* ---------- FAQ ---------- */
.draft-note {
  max-width: 52rem;
  border: 3px solid var(--purple);
  background: var(--gold-tint);
  padding: 1.5rem 1.5rem 1.35rem;
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
.draft-flag {
  font-family: var(--stencil); font-size: 0.8rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--purple-deep);
  margin-bottom: 0.6rem;
}
.draft-note p + p { margin-top: 0.8rem; font-size: 0.98rem; }

.qa-list { max-width: 56rem; border-top: 2px solid var(--black); }
.qa { border-bottom: 1px solid var(--rule); }
.qa summary {
  cursor: pointer;
  list-style: none;
  display: flex; align-items: baseline; gap: 0.9rem;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.15rem, 2.2vw, 1.45rem);
  text-transform: uppercase; line-height: 1.15;
  padding: 1.15rem 0;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::before {
  content: '+';
  flex: none;
  font-size: 1.1em; line-height: 1;
  color: var(--purple);
  transition: transform 0.2s ease;
}
.qa[open] summary::before { content: '\2013'; }
.qa summary:hover { color: var(--purple-deep); }
.qa summary:focus-visible { outline: 3px solid var(--purple); outline-offset: 2px; }
.qa > *:not(summary) { margin-left: 2rem; }
.qa > p, .qa > ul, .qa > table { margin-bottom: 1.15rem; font-size: 0.98rem; }
.qa-source, .qa-flag {
  border-left: 3px solid var(--gold);
  padding: 0.5rem 0 0.5rem 0.9rem;
  color: var(--muted);
  font-size: 0.93rem !important;
}
.qa-flag { border-left-color: var(--purple); }
.plain-list { list-style: none; display: grid; gap: 0.6rem; }

/* the answers carry a 2rem indent, which a 100%-wide table would push past
   the edge of the column, so the table subtracts it back */
.rates { border-collapse: collapse; width: calc(100% - 2rem); max-width: 34rem; }
/* on a phone the indent costs more than it gives: answers run full width */
@media (max-width: 560px) {
  .qa > *:not(summary) { margin-left: 0; }
  .rates { width: 100%; }
}
.rates th, .rates td { text-align: left; padding: 0.55rem 0.75rem 0.55rem 0; border-bottom: 1px solid var(--rule); font-size: 0.98rem; }
.rates th { font-weight: 600; }
.rates .rates-group th {
  font-family: var(--stencil); font-weight: 400; font-size: 0.72rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
  padding-top: 1.2rem; white-space: normal;
}
.rates tbody:first-of-type .rates-group th { padding-top: 0.2rem; }
.rates td { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.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;
}

/* ---------- marked TODOs ----------
   Deliberately visible. These are gaps we could not fill without inventing a
   business fact, and they should be answered before launch, not styled away. */
.todo {
  max-width: 46rem;
  margin-top: 1.75rem;
  border: 2px dashed var(--purple);
  padding: 1rem 1.1rem;
  font-size: 0.95rem;
  color: var(--muted);
}
.todo strong { color: var(--purple-deep); }


/* ---------- coaches ---------- */
.pete {
  display: grid; grid-template-columns: minmax(240px, 370px) 1fr;
  gap: clamp(2.5rem, 4vw, 4rem);
  max-width: 72rem; margin: 0 auto 4rem;
  align-items: start;
}
.pete-photo { rotate: -1.1deg; margin-top: 0.75rem; }
.pete-bio h2 { font-family: var(--display); font-weight: 800; font-size: clamp(1.8rem, 3.5vw, 2.6rem); text-transform: uppercase; line-height: 1; }
.coach-role { font-family: var(--stencil); font-size: 0.72rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--purple-deep); margin: 0.4rem 0 1rem; }
.pete-bio p + p { margin-top: 0.9rem; }
.pete-creds { margin-top: 1.1rem; padding-left: 1.2rem; font-size: 0.95rem; display: grid; gap: 0.3rem; }
.pete-creds li::marker { color: var(--purple); }
@media (max-width: 820px) { .pete { grid-template-columns: 1fr; } .pete-photo { max-width: 19rem; margin: 0 auto; } }

/* roster: black & white until you meet them */
.staff {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 3rem 2.25rem;
  max-width: 76rem; margin: 0 auto;
}
.coach figure {
  border: 3px solid var(--black);
  box-shadow: 7px 7px 0 var(--gold);
  overflow: hidden;
}
.coach figure img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center top;
  filter: grayscale(1) contrast(1.05);
  transition: filter 0.45s ease, scale 0.5s cubic-bezier(0.2, 0.6, 0.3, 1);
}
@media (hover: hover) {
  .coach:hover figure img { filter: grayscale(0) contrast(1); scale: 1.03; }
}
.coach h3 { font-family: var(--display); font-weight: 700; font-size: 1.5rem; text-transform: uppercase; margin-top: 1.1rem; }
.coach .coach-role { margin: 0.25rem 0 0.5rem; }
.coach-motto { font-family: var(--serif); font-style: italic; font-size: 1.02rem; color: var(--muted); }
.coach-motto::before { content: '\201C'; }
.coach-motto::after { content: '\201D'; }
.coach details { margin-top: 0.6rem; font-size: 0.93rem; }
.person-bio { margin-top: 0.7rem; font-size: 0.95rem; }
.person figure img { filter: grayscale(1) contrast(1.05); }
.coach summary {
  cursor: pointer; width: fit-content;
  font-weight: 600; color: var(--purple-deep);
  text-decoration: underline; text-underline-offset: 3px;
  padding: 0.4rem 0;
}
.coach details p { margin-top: 0.4rem; }
.staff-group { max-width: 72rem; margin: 0 auto; rotate: 0.5deg; }
.staff-group figcaption {
  font-family: var(--stencil); font-size: 0.78rem;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--muted);
  margin-top: 1rem; text-align: center;
}

.page-photo { max-width: 46rem; margin: 0 auto 3rem; rotate: -0.6deg; }
.page-photo figcaption {
  font-family: var(--stencil); font-size: 0.76rem;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--muted);
  margin-top: 1rem; text-align: center;
}

/* ---------- testimonials: the quote wall ---------- */
.quotes {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 3rem clamp(2.5rem, 6vw, 5.5rem);
  max-width: 68rem; margin: 0 auto;
  align-items: start;
}
.quote { position: relative; padding-left: 2.5rem; }
.quote::before {
  content: '\201C';
  position: absolute; left: 0; top: -0.55rem;
  font-family: var(--serif); font-style: italic;
  font-size: 4.4rem; line-height: 1;
  color: var(--purple);
}
.quote p {
  font-family: var(--serif); font-style: italic;
  font-size: 1.16rem; line-height: 1.55;
}
.quote footer {
  display: flex; align-items: center; gap: 0.7rem;
  margin-top: 0.9rem;
  font-family: var(--stencil); font-size: 0.74rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--purple-deep);
}
.quote footer::before { content: ''; width: 28px; height: 2px; background: var(--purple); }
.quotes .quote:nth-child(even) { margin-top: 3rem; }
@media (max-width: 720px) {
  .quotes { grid-template-columns: 1fr; }
  .quotes .quote:nth-child(even) { margin-top: 0; }
}

/* ---------- gear ---------- */
.gear-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2.5rem 2rem;
  max-width: 58rem; margin: 0 auto; padding-top: 0.75rem;
}
.gear-grid figure img { aspect-ratio: 1; object-fit: cover; }
.gear-grid figure:nth-child(1) { rotate: -1.4deg; }
.gear-grid figure:nth-child(2) { rotate: 1deg; }
.gear-grid figure:nth-child(3) { rotate: -0.7deg; }
.gear-note { text-align: center; margin-top: 2.25rem; color: var(--muted); }
.pay-qrs { display: flex; gap: 2.5rem; justify-content: center; flex-wrap: wrap; margin-top: 1.75rem; }
.qr { width: 148px; text-align: center; }
.qr img { border: 6px solid var(--white); outline: 1px solid rgba(0,0,0,0.3); box-shadow: 0 8px 18px rgba(0,0,0,0.18); }
.qr figcaption { font-family: var(--stencil); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-top: 0.6rem; }

/* ---------- contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 5vw, 4rem); max-width: 72rem; margin: 0 auto; align-items: start; }
.contact-big { margin: 0.5rem 0; }
.contact-big a {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(2.4rem, 6vw, 4rem);
  color: var(--white); text-decoration: none; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.contact-big a:hover { color: var(--gold); }
.contact-links { display: flex; gap: 1.5rem; flex-wrap: wrap; margin-top: 1.5rem; }
.contact-links a {
  font-family: var(--display); font-weight: 700; font-size: 1.15rem;
  text-transform: uppercase; letter-spacing: 0.05em;
  text-underline-offset: 4px;
}
.locations { display: grid; gap: 1rem; margin-top: 2rem; font-size: 0.98rem; }

/* ---------- footer ---------- */
.footer { background: var(--black); color: rgba(255,255,255,0.75); text-align: center; padding: 3rem var(--pad) 2.5rem; border-top: 3px solid var(--gold); }
.footer-logo { width: 190px; height: auto; margin: 0 auto 1.25rem; }
.footer-line { font-family: var(--stencil); font-size: 0.85rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.75rem; }
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2.25rem;
  max-width: 72rem;
  margin: 2.5rem auto;
  text-align: left;
}
.footer-col h2 {
  font-family: var(--stencil); font-size: 0.72rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.85rem;
}
.footer-col p + p { margin-top: 0.6rem; }
.footer-col p, .footer-col li { font-size: 0.95rem; }
.footer-col a { color: var(--white); text-underline-offset: 3px; }
.footer-col a:hover { color: var(--gold); }
.footer-phone a {
  font-family: var(--display); font-weight: 800;
  font-size: 1.6rem; line-height: 1;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.footer-list { list-style: none; display: grid; gap: 0.45rem; }
.footer .loc-tag { margin-bottom: 0.3rem; }
.footer-fine { font-size: 0.85rem; border-top: 1px solid rgba(255,255,255,0.18); padding-top: 1.5rem; max-width: 72rem; margin: 0 auto; }
.footer-fine a { color: inherit; }