/* =========================================================
   Mustang Wrestling Camp — Design System
   Palette matches Cal Poly's published brand colors (Poly
   Green #154734, Mustang Gold #BD8B13, plus secondary colors
   Poly Canyon, Stadium Gold, Mission Beige, Seal Gray — per
   ucm.calpoly.edu/color-guidelines). Color values themselves
   are not protectable; what this project still deliberately
   excludes is any Cal Poly logo, wordmark, "CP" mark, or
   Mustang mascot artwork. Headline face is Abolition, served
   through the camp's own licensed Adobe Fonts kit
   (use.typekit.net/piz5gep.css). See /BRANDING-NOTES.md.

   NOTE ON ABOLITION: the kit provides weight 400 only, and
   Abolition is a caps-only display face (no true lowercase).
   So every --font-head usage below pins font-weight: 400 to
   avoid faux-bolding, and Abolition is reserved for display
   text (headings, nav, buttons, stats) — longer UI text like
   FAQ questions uses the body font instead.
   ========================================================= */

:root {
  /* Color — Cal Poly published values */
  --color-green-900: #0f3325;  /* darkened Poly Green (header/footer depth) */
  --color-green-800: #154734;  /* Poly Green */
  --color-green-700: #1d5c44;  /* tint */
  --color-green-600: #277356;  /* tint */
  --color-gold-600: #7a5a0c;   /* darkened Mustang Gold — small text on light bg */
  --color-gold-500: #bd8b13;   /* Mustang Gold */
  --color-gold-400: #f2c75c;   /* Poly Canyon */
  --color-gold-100: #f8e08e;   /* Stadium Gold */
  --color-cream-100: #fbfaf4;  /* warm near-white (calpoly.edu is white-heavy) */
  --color-cream-200: #e4e3d3;  /* Mission Beige */
  --color-ink-900: #1e2020;
  --color-ink-700: #3e4242;
  --color-ink-500: #54585a;    /* Seal Gray */
  --color-white: #ffffff;

  /* Type */
  --font-head: "abolition", "Arial Narrow", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Spacing / layout */
  --max-width: 1180px;
  --radius: 10px;
  --shadow-sm: 0 1px 3px rgba(21, 71, 52, 0.12);
  --shadow-md: 0 8px 24px rgba(21, 71, 52, 0.16);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-ink-900);
  background: var(--color-cream-100);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 400; /* Abolition ships in 400 only — prevents faux-bold */
  text-transform: uppercase;
  letter-spacing: 0.025em;
  line-height: 1.08;
  margin: 0 0 0.5em;
  color: var(--color-green-800);
}
h1 { font-size: clamp(2.5rem, 5.5vw, 4rem); }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.7rem); }
h3 { font-size: 1.4rem; }
p { margin: 0 0 1em; }
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}
.section { padding: 72px 0; }
.section--tight { padding: 40px 0; }
.section--green {
  background: var(--color-green-800);
  color: var(--color-cream-200);
}
.section--green h1, .section--green h2, .section--green h3 { color: var(--color-white); }
.hero h1, .hero h2, .hero h3 { color: var(--color-white); }
.section--cream { background: var(--color-cream-200); }
.eyebrow {
  display: inline-block;
  font-family: var(--font-head);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 1.05rem;
  color: var(--color-gold-600); /* darkened gold: Mustang Gold proper is too light for small text on beige/white */
  margin-bottom: 10px;
}
/* On dark green, step the gold up to Poly Canyon for legibility */
.hero .eyebrow, .section--green .eyebrow { color: var(--color-gold-400); }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-head);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 1.05rem;
  padding: 14px 28px;
  border-radius: 6px;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary {
  background: var(--color-gold-500);
  color: var(--color-green-900);
}
.btn-primary:hover { background: var(--color-gold-400); box-shadow: var(--shadow-md); }
.btn-outline {
  background: transparent;
  border-color: var(--color-cream-100);
  color: var(--color-cream-100);
}
.btn-outline:hover { background: rgba(255,255,255,0.08); }
.btn-outline-dark {
  background: transparent;
  border-color: var(--color-green-800);
  color: var(--color-green-800);
}
.btn-outline-dark:hover { background: var(--color-green-800); color: #fff; }
.btn-block { width: 100%; justify-content: center; }

/* Header / Nav */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-green-900);
  border-bottom: 3px solid var(--color-gold-500);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
}
.nav__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--color-white);
}
.nav__brand-mark {
  width: 44px;
  height: 44px;
  flex: none;
  display: block;
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.1, 1);
}
.nav__brand:hover .nav__brand-mark,
.nav__brand:focus-visible .nav__brand-mark {
  transform: rotate(-12deg) scale(1.06);
}
@media (prefers-reduced-motion: reduce) {
  .nav__brand-mark { transition: none; }
  .nav__brand:hover .nav__brand-mark,
  .nav__brand:focus-visible .nav__brand-mark { transform: none; }
}
.nav__brand-text {
  font-family: var(--font-head);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 1.15rem;
  line-height: 1.05;
}
.nav__brand-text span { display: block; font-size: 0.65rem; color: var(--color-gold-400); letter-spacing: 0.15em; }
.nav__links {
  display: flex;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__links a {
  text-decoration: none;
  color: var(--color-cream-200);
  font-family: var(--font-body);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.95rem;
  padding: 8px 2px;
  border-bottom: 2px solid transparent;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.nav__links a:hover, .nav__links a[aria-current="page"] {
  color: var(--color-gold-400);
  border-color: var(--color-gold-500);
}
.nav__cta { display: flex; align-items: center; gap: 16px; }
.nav__toggle {
  display: none;
  background: none;
  border: 2px solid var(--color-cream-200);
  border-radius: 6px;
  color: var(--color-cream-200);
  padding: 8px 10px;
  font-size: 1.1rem;
}

@media (max-width: 860px) {
  .nav__links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-green-900);
    flex-direction: column;
    gap: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
  }
  .nav__links.is-open { max-height: 400px; }
  .nav__links a { display: block; padding: 14px 24px; border-bottom: 1px solid rgba(255,255,255,0.08); }
  .nav__toggle { display: inline-flex; }
  .nav__cta .btn-primary { display: none; }
}

/* Hero — cinematic background: a slow Ken Burns zoom/pan on the image
   layer (CSS animation) inside a wrapper that JS nudges vertically on
   scroll (parallax). Two separate elements on purpose: a CSS animation
   and a JS-driven inline transform on the same element would fight over
   the `transform` property, so the scale animation lives on the inner
   .hero__bg and the scroll parallax lives on the outer .hero__bg-wrap. */
.hero {
  position: relative;
  color: var(--color-white);
  padding: 90px 0 70px;
  overflow: hidden;
}
.hero__bg-wrap {
  position: absolute;
  inset: -40px;
  overflow: hidden;
  z-index: 0;
}
.hero__bg {
  position: absolute;
  inset: 0;
  background-image: url("../img/hero-campus-aerial.jpg");
  background-size: cover;
  background-position: center;
  animation: heroKenBurns 26s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes heroKenBurns {
  from { transform: scale(1.02) translate3d(0, 0, 0); }
  to   { transform: scale(1.12) translate3d(-1.5%, -1.5%, 0); }
}
.hero__overlay {
  position: absolute;
  inset: -40px;
  z-index: 1;
  background: linear-gradient(160deg, rgba(15, 51, 37, 0.92) 0%, rgba(29, 92, 68, 0.88) 100%);
}
@media (prefers-reduced-motion: reduce) {
  .hero__bg { animation: none; }
}
.hero::after {
  content: "";
  position: absolute;
  right: -120px;
  top: -120px;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(189,139,19,0.25) 0%, rgba(189,139,19,0) 70%);
  z-index: 2;
}
.hero > .container {
  position: relative;
  z-index: 2;
}
.hero__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
  position: relative;
  z-index: 2;
}
.hero__lede { font-size: 1.15rem; max-width: 520px; color: var(--color-cream-200); }
.hero__actions { display: flex; gap: 14px; margin-top: 32px; flex-wrap: wrap; }
.hero-sub { font-size: 1.15rem; max-width: 560px; color: var(--color-cream-200); margin-bottom: 28px; }
.hero-under { font-size: 0.9rem; color: var(--color-cream-200); margin: 16px 0 0; }
.hero__card {
  background: var(--color-cream-100);
  color: var(--color-ink-900);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow-md);
}
.hero__card dl { margin: 0; }
.hero__card .row {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-cream-200);
}
.hero__card .row:last-child { border-bottom: none; }
.hero__card dt { color: var(--color-ink-500); font-size: 0.9rem; }
.hero__card dd { margin: 0; font-weight: 600; }

/* Homepage-only hero variant — taller so more of the background photo
   shows through; scoped with a modifier class rather than changing the
   shared .hero rule, since other pages tune their own hero padding
   inline. */
.hero--tall {
  min-height: 78vh;
  display: flex;
  align-items: center;
  padding: 150px 0 130px;
}

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; }
}

/* Mobile hero — the desktop hero's generous padding and stacked,
   full-width stats push the primary CTA buttons two screens down on a
   phone. Tighten padding/margins and force the 3 stats into one
   compact row instead of 3 stacked ones so the buttons stay in the
   first screen or two. */
@media (max-width: 620px) {
  .hero { padding: 52px 0 40px; }
  .hero__grid { gap: 32px; }
  .hero__lede { font-size: 1rem; }
  .hero__actions { margin-top: 22px; }
  .hero__card { padding: 20px; }
  .hero__card .row { padding: 9px 0; }
  .hero--tall { min-height: auto; display: block; padding: 52px 0 40px; }
}

/* Stat band — a standalone section (not inside the hero). Numbers run
   roughly 3x the size of the label underneath them, per design review;
   count-up animation is wired in site.js against .stat-band__item strong. */
.stat-band {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  text-align: center;
}
.stat-band__item strong {
  display: block;
  font-family: var(--font-head);
  font-weight: 400;
  font-size: clamp(2.6rem, 5vw, 3.4rem);
  line-height: 1;
  color: var(--color-gold-400);
  margin-bottom: 10px;
}
.stat-band__item span {
  font-size: 1rem;
  color: var(--color-cream-200);
}
@media (max-width: 620px) {
  .stat-band { grid-template-columns: 1fr; gap: 32px; }
}
.stat-band--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 760px) {
  .stat-band--4 { grid-template-columns: repeat(2, 1fr); }
}
.stat-band--5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 900px) {
  .stat-band--5 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 620px) {
  .stat-band--5 { grid-template-columns: repeat(2, 1fr); }
}

/* Grids / Cards */
.grid { display: grid; gap: 28px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}
.card {
  background: var(--color-white);
  border-radius: var(--radius);
  padding: 26px;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(21,71,52,0.06);
}
/* Flat modifier — strips the box for content that doesn't need a literal
   boundary (team/coach grids). Keeps the hover lift, drops the shadow
   that would otherwise float in mid-air with no card beneath it. */
.card--flat {
  background: transparent;
  box-shadow: none;
  padding: 0;
  border: none;
  border-radius: 0;
}
.card--flat:hover { box-shadow: none; }
.card--coach { text-align: left; }
.card--coach .headshot {
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  overflow: hidden;
}
.card--coach .headshot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 12%;
}
.card--coach .photo-placeholder {
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--color-green-700), var(--color-green-900));
  color: var(--color-gold-400);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-head);
  font-weight: 400;
  font-size: 2.2rem;
  margin-bottom: 16px;
}

/* Feature row — an unboxed alternative to a card grid, for content that
   doesn't need a literal boundary (feature callouts, contact info,
   comparison lists). Items are separated by a thin rule instead of a
   card edge, so a page isn't wall-to-wall white boxes. */
.feature-row { display: grid; gap: 40px; }
.feature-row--2 { grid-template-columns: repeat(2, 1fr); }
.feature-row--3 { grid-template-columns: repeat(3, 1fr); }
.feature-row--4 { grid-template-columns: repeat(4, 1fr); }
.feature-row__item + .feature-row__item {
  border-left: 1px solid rgba(21,71,52,0.14);
  padding-left: 40px;
}
@media (max-width: 900px) {
  .feature-row--4 { grid-template-columns: repeat(2, 1fr); gap: 28px 40px; }
  .feature-row--4 .feature-row__item:nth-child(3) { border-left: none; padding-left: 0; }
}
@media (max-width: 760px) {
  .feature-row--2, .feature-row--3, .feature-row--4 { grid-template-columns: 1fr; gap: 28px; }
  .feature-row__item + .feature-row__item {
    border-left: none;
    padding-left: 0;
    border-top: 1px solid rgba(21,71,52,0.14);
    padding-top: 28px;
  }
}
.feature-row__icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-green-800);
  color: var(--color-gold-400);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.feature-row__icon svg { width: 22px; height: 22px; }

/* Itinerary — a numbered list replacing a 6-box card grid for the camp
   schedule's included activities. Large faint numerals do the work a
   card boundary would otherwise do (visually separating items) without
   boxing everything in. */
.itinerary { display: grid; grid-template-columns: repeat(2, 1fr); gap: 36px 48px; }
.itinerary__item { display: flex; gap: 20px; align-items: flex-start; }
.itinerary__num {
  font-family: var(--font-head);
  font-weight: 400;
  font-size: 2.4rem;
  line-height: 1;
  color: var(--color-gold-500);
  opacity: 0.5;
  flex-shrink: 0;
  min-width: 52px;
}
.itinerary__item h3 { margin-bottom: 6px; }
.itinerary__item p { margin: 0; color: var(--color-ink-500); }
@media (max-width: 700px) {
  .itinerary { grid-template-columns: 1fr; }
}

/* Checklist — a real, checkable packing list instead of plain bullets. */
.checklist { list-style: none; margin: 0; padding: 0; }
.checklist li + li { margin-top: 2px; }
.checklist label {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 0;
  cursor: pointer;
  color: var(--color-ink-900);
}
.checklist input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin: 0;
  border: 2px solid var(--color-green-700);
  border-radius: 4px;
  position: relative;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.checklist input[type="checkbox"]:checked {
  background: var(--color-green-800);
  border-color: var(--color-green-800);
}
.checklist input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid var(--color-gold-400);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.checklist label:has(input:checked) span {
  text-decoration: line-through;
  opacity: 0.6;
}

/* Coach titles (e.g. "Cal Poly Head Coach") — a plain strong subheading
   under the name, not a colored chip; the chip read as decoration
   competing with the name instead of supporting it. */
.badge {
  display: block;
  color: var(--color-green-800);
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0 0 8px;
}

/* Photo placeholder blocks (until real photography is supplied) */
.photo-block {
  background: repeating-linear-gradient(135deg, var(--color-cream-200), var(--color-cream-200) 10px, #dcdacb 10px, #dcdacb 20px);
  border: 1px dashed var(--color-ink-500);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-ink-500);
  font-size: 0.85rem;
  text-align: center;
  padding: 20px;
  min-height: 220px;
}
/* Unified photo treatment — ties together photography sourced from very
   different places (pro Cal Poly marketing stills vs. casual phone
   snapshots) with one consistent crop ratio, a normalizing color/contrast
   filter, and a faint brand-color wash. Applied once here so every photo
   using .photo, current or future, automatically matches. */
.photo {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
}
.photo img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  filter: saturate(0.92) contrast(1.06) brightness(1.02) sepia(0.06);
}
.photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(21,71,52,0.18) 0%, rgba(189,139,19,0.10) 100%);
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* Testimonial — body font on purpose: Abolition has no lowercase,
   and a parent quote in all-caps display type reads as shouting */
.testimonial {
  font-family: var(--font-body);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  line-height: 1.45;
  text-transform: none;
  letter-spacing: 0;
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
  color: var(--color-white);
}
.testimonial cite {
  display: block;
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.95rem;
  color: var(--color-gold-400);
  margin-top: 18px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Testimonial slider — one quote visible at a time (homepage). Deliberately
   simple: the active slide is display:block, every other slide is
   display:none, toggled by site.js. (An earlier version used a sliding
   flex track with transform/overflow-hidden; that put slides 2+ at real
   off-screen page coordinates, which broke a sitewide scroll-reveal
   system keyed on IntersectionObserver — those slides could get stuck
   permanently invisible. display:none removes that whole class of bug:
   a hidden slide has no box to fail to reveal.) Fixes the old 3-column
   grid stacking awkwardly on mobile. */
.testimonial-slider { max-width: 780px; margin: 0 auto; }
.testimonial-slider__track { position: relative; }
.testimonial-slider__slide { display: none; }
.testimonial-slider__slide.is-active {
  display: block;
  animation: testimonialFadeIn 0.4s ease;
}
@keyframes testimonialFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .testimonial-slider__slide.is-active { animation: none; }
}
.testimonial-slider__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 28px;
}
.testimonial-slider__arrow {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.3);
  color: var(--color-white);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}
.testimonial-slider__arrow:hover { background: rgba(255,255,255,0.12); }
.testimonial-slider__dots { display: flex; gap: 10px; }
.testimonial-slider__dots button {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.3);
  padding: 0;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.testimonial-slider__dots button.is-active {
  background: var(--color-gold-400);
  transform: scale(1.2);
}

/* Compact testimonial for light backgrounds (e.g. Camp Info page) */
.testimonial--compact {
  font-family: var(--font-body);
  font-weight: 500;
  font-style: italic;
  font-size: 1.15rem;
  line-height: 1.5;
  color: var(--color-ink-900);
  margin: 0;
  text-align: left;
}
.testimonial--compact cite {
  display: block;
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.9rem;
  color: var(--color-gold-600);
  margin-top: 14px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* FAQ accordion */
.faq-group-title {
  margin-top: 36px;
  padding-top: 8px;
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  color: var(--color-gold-600);
}
.faq-group-title:first-of-type { margin-top: 0; }
.faq-item {
  border-bottom: 1px solid var(--color-cream-200);
  padding: 18px 0;
}
.faq-item summary {
  cursor: pointer;
  /* body font on purpose: full-sentence questions shouldn't render
     in Abolition's caps-only display style */
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--color-green-800);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-size: 1.4rem;
  color: var(--color-gold-500);
  margin-left: 12px;
}
.faq-item[open] summary::after { content: "\2212"; }
.faq-item p { margin-top: 12px; color: var(--color-ink-700); }

/* Forms */
.form-row { display: flex; gap: 10px; flex-wrap: wrap; }
.form-row input[type="email"], .form-row input[type="text"] {
  flex: 1;
  min-width: 220px;
  padding: 13px 16px;
  border-radius: 6px;
  border: 1px solid var(--color-cream-200);
  font-family: var(--font-body);
  font-size: 1rem;
}
.form-note { font-size: 0.8rem; color: var(--color-ink-500); margin-top: 8px; }
.form-success { display: none; color: var(--color-gold-400); font-weight: 600; margin-top: 10px; } /* shows on dark green section */

/* Footer */
.site-footer {
  background: var(--color-green-900);
  color: var(--color-cream-200);
  padding: 56px 0 28px;
}
.site-footer h4 { color: var(--color-white); font-size: 0.95rem; }
.site-footer a { color: var(--color-cream-200); text-decoration: none; }
.site-footer a:hover { color: var(--color-gold-400); }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
@media (max-width: 760px) {
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.footer-bottom {
  padding-top: 24px;
  font-size: 0.8rem;
  color: var(--color-ink-500);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  justify-content: space-between;
}
.footer-disclaimer {
  max-width: 720px;
  line-height: 1.5;
}
.social-row { display: flex; gap: 14px; margin-top: 10px; }
.social-row a {
  width: 36px; height: 36px;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem;
}

/* Social icon buttons — real brand marks (used on Contact) */
.social-icons { display: flex; gap: 12px; flex-wrap: wrap; }
.social-icons a {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-green-800);
  color: var(--color-gold-400);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s ease, transform 0.25s ease;
}
.social-icons a:hover { background: var(--color-green-700); transform: translateY(-2px); }
.social-icons svg { width: 20px; height: 20px; }

/* Utility */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.stack { display: grid; gap: 16px; }
.pill-row { display: flex; gap: 10px; flex-wrap: wrap; }
.pill {
  background: var(--color-cream-200);
  color: var(--color-green-800);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.82rem;
  font-weight: 600;
}

/* Hero dates panel — camp dates are one of the first things a parent
   looks for, so they get a prominent, high-contrast display right under
   the headline. Styled as an info panel (label + big date), not a pill,
   so it doesn't read as a clickable button next to the real CTA. */
.hero__dates {
  display: inline-flex;
  align-items: stretch;
  margin: 26px 0 30px;
  background: rgba(255,255,255,0.12);
  border: 2px solid var(--color-gold-500);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}
.hero__dates-item { padding: 20px 44px; text-align: center; }
.hero__dates-label {
  display: block;
  font-family: var(--font-head);
  font-weight: 400;
  font-size: 0.9rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-gold-400);
  margin-bottom: 6px;
}
.hero__dates strong {
  display: block;
  font-family: var(--font-head);
  font-weight: 400;
  font-size: 2.3rem;
  letter-spacing: 0.02em;
  color: var(--color-gold-400);
  line-height: 1;
}
.hero__dates-divider { width: 2px; background: rgba(242,199,92,0.5); margin: 16px 0; }
@media (max-width: 620px) {
  .hero__dates { flex-direction: column; width: 100%; }
  .hero__dates-divider { width: auto; height: 2px; margin: 0 24px; }
  .hero__dates-item { padding: 16px 24px; }
  .hero__dates strong { font-size: 1.7rem; }
}
.announce-bar {
  /* Poly Canyon rather than Mustang Gold: better small-text contrast
     with the dark green, and it layers cleanly above the gold header CTA */
  background: var(--color-gold-400);
  color: var(--color-green-900);
  text-align: center;
  padding: 11px 16px;
  font-family: var(--font-body);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 0.85rem;
}
.announce-bar strong { letter-spacing: 0.03em; }
.announce-bar a {
  color: var(--color-green-900);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 400; /* Abolition has no bold; underline carries the emphasis */
}
.announce-bar a:hover { color: var(--color-green-700); }
@media (max-width: 620px) {
  .announce-bar { font-size: 0.72rem; padding: 10px 14px; }
}
.banner {
  background: var(--color-gold-100);
  color: var(--color-green-900);
  border-radius: var(--radius);
  padding: 18px 22px;
  font-size: 0.92rem;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

/* Value breakdown — justifies the price right where it's shown, instead
   of leaving a number to speak for itself. */
.value-breakdown {
  background: var(--color-white);
  border-radius: var(--radius);
  padding: 28px 32px;
  border: 1px solid rgba(21,71,52,0.08);
}
.value-breakdown h3 { margin-bottom: 16px; }
.value-breakdown ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 24px;
}
.value-breakdown li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: var(--color-ink-900);
}
.value-breakdown li::before {
  content: "✓";
  color: var(--color-green-700);
  font-weight: 700;
  flex-shrink: 0;
}
.value-breakdown__tagline {
  margin: 20px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--color-cream-200);
  font-style: italic;
  font-weight: 600;
  color: var(--color-green-800);
}
@media (max-width: 620px) {
  .value-breakdown ul { grid-template-columns: 1fr; }
}
.price-note {
  margin-top: 8px;
  font-size: 0.85rem;
  color: var(--color-ink-500);
}

/* Pricing card — $250 is the one number that matters at a glance;
   the current rate is the only other figure on the card. */
.price-hold {
  font-family: var(--font-head);
  font-weight: 400;
  font-size: 2.6rem;
  color: var(--color-green-800);
  margin-bottom: 0;
}
.price-hold-label { color: var(--color-ink-500); margin-top: 0; }
.price-current { color: var(--color-ink-900); margin-top: 14px; }
.price-current strong { color: var(--color-green-800); }
.price-plan { color: var(--color-ink-500); font-size: 0.9rem; }
.pack-line {
  text-align: center;
  margin-top: 8px;
  color: var(--color-ink-500);
  font-size: 0.9rem;
}

/* Rate details — the full ladder collapses behind a details/summary so
   the card above stays the only price a parent has to read at first. */
.rate-details summary {
  cursor: pointer;
  text-align: center;
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--color-green-800);
  list-style: none;
}
.rate-details summary::-webkit-details-marker { display: none; }
.rate-details summary::after {
  content: "+";
  font-size: 1.2rem;
  color: var(--color-gold-500);
  margin-left: 8px;
}
.rate-details[open] summary::after { content: "\2212"; }
.rate-details .ladder { margin-top: 20px; }

/* Card includes list — a short checkmark list instead of a run-on
   sentence, so the Residential and Commuter pricing cards can be built
   from the same number of lines and match height without empty gaps. */
.card__includes { list-style: none; margin: 14px 0 0; padding: 0; }
.card__includes li {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 3px 0;
  color: var(--color-ink-500);
  font-size: 0.95rem;
}
.card__includes li::before { content: "\2713"; color: var(--color-green-700); font-weight: 700; flex-shrink: 0; }

/* Pricing ladder — three rate tiers side by side (early bird / season /
   full), each a small price table. The active tier (today's rate) gets
   a gold border so a visitor immediately sees which price applies now. */
.ladder { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ladder__tier {
  background: var(--color-white);
  border-radius: var(--radius);
  padding: 24px;
  border: 1px solid rgba(21,71,52,0.08);
  text-align: center;
}
.ladder__tier--active { border: 2px solid var(--color-gold-500); box-shadow: var(--shadow-md); }
.ladder__period { font-size: 0.85rem; color: var(--color-ink-500); margin-bottom: 4px; }
.ladder__name { font-family: var(--font-head); font-weight: 400; font-size: 1.55rem; color: var(--color-green-800); margin-bottom: 14px; }
.ladder__price { display: flex; justify-content: space-between; padding: 10px 0; border-top: 1px solid var(--color-cream-200); font-size: 0.95rem; }
.ladder__price:first-of-type { border-top: none; }
.ladder__price strong { color: var(--color-green-800); }
@media (max-width: 760px) { .ladder { grid-template-columns: 1fr; } }

/* Value stack — item vs. dollar value, plus a totals row and a two-card
   comparison. Rows reuse the same look as .hero__card's dt/dd rows. */
.value-stack { background: var(--color-white); border-radius: var(--radius); padding: 28px 32px; border: 1px solid rgba(21,71,52,0.08); }
.value-stack__row { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--color-cream-200); }
.value-stack__row:last-child { border-bottom: none; }
.value-stack__row strong { color: var(--color-green-800); white-space: nowrap; }
.value-stack__totals { margin-top: 8px; padding-top: 16px; border-top: 2px solid var(--color-green-800); }
.value-stack__totals .value-stack__row strong { font-family: var(--font-head); font-weight: 400; font-size: 1.15rem; }
.value-stack__totals .value-stack__row--current strong { font-size: 1.6rem; color: var(--color-gold-600); }
.value-stack__compare { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 28px; }
.value-stack__compare .card { padding: 22px 26px; }
.value-stack__compare h4 { font-family: var(--font-head); font-weight: 400; text-transform: uppercase; letter-spacing: 0.03em; font-size: 1rem; margin-bottom: 8px; color: var(--color-green-800); }
.value-stack__compare p { margin: 0; color: var(--color-ink-500); }
@media (max-width: 620px) { .value-stack__compare { grid-template-columns: 1fr; } }

/* Timeline — a single vertical sequence, one stop per row. The time is
   part of the heading itself (an accent-colored lead-in), not a separate
   badge or block -- two earlier boxed treatments both read as clutter. */
.timeline { display: grid; gap: 26px; max-width: 720px; margin: 0 auto; }
.timeline__item { border-left: 3px solid var(--color-cream-200); padding-left: 20px; }
.timeline__time {
  font-family: var(--font-head);
  font-weight: 400;
  font-size: 1.3rem;
  letter-spacing: 0.02em;
  color: var(--color-gold-600);
  margin-right: 12px;
}
.timeline__item h3 { margin-bottom: 4px; }
.timeline__item p { margin: 0; color: var(--color-ink-500); }

/* Guarantee card — a callout that sits on a dark green section */
.guarantee-card {
  background: var(--color-green-900);
  border: 1px solid rgba(242,199,92,0.35);
  border-radius: var(--radius);
  padding: 28px 32px;
  text-align: center;
}
.guarantee-card h3 { color: var(--color-gold-400); margin-bottom: 10px; }
.guarantee-card p { color: var(--color-cream-200); margin: 0; max-width: 560px; margin-left: auto; margin-right: auto; }

/* Step form — a three-tap qualifier, then contact fields, then a success
   state that replaces the form in place. */
.step-form {
  max-width: 640px;
  margin: 0 auto;
  text-align: left;
  background: var(--color-white);
  border: 1px solid rgba(21,71,52,0.1);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 36px;
}
.step-form__question { margin-bottom: 22px; }
.step-form__question p { font-weight: 600; color: var(--color-green-800); margin-bottom: 10px; }
.step-form__taps { display: flex; gap: 10px; flex-wrap: wrap; }
.tap-btn {
  background: var(--color-cream-100);
  border: 2px solid rgba(21,71,52,0.18);
  border-radius: 6px;
  padding: 11px 20px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-ink-900);
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(21,71,52,0.06);
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.tap-btn:hover { border-color: var(--color-green-700); transform: translateY(-1px); box-shadow: 0 3px 8px rgba(21,71,52,0.12); }
.tap-btn.is-selected { border-color: var(--color-gold-500); background: var(--color-gold-100); color: var(--color-green-900); box-shadow: 0 2px 6px rgba(189,139,19,0.25); }
.step-form__fields {
  display: none;
  margin-top: 28px;
  padding: 24px;
  gap: 14px;
  background: var(--color-cream-100);
  border-radius: var(--radius);
  border: 1px solid var(--color-cream-200);
}
.step-form__fields.is-visible { display: grid; }
.step-form__fields input[type="text"], .step-form__fields input[type="email"], .step-form__fields input[type="tel"], .step-form__fields input[type="number"], .step-form__fields select {
  padding: 13px 16px;
  border-radius: 6px;
  border: 1.5px solid rgba(21,71,52,0.18);
  background: var(--color-white);
  font-family: var(--font-body);
  font-size: 1rem;
  width: 100%;
  color: var(--color-ink-900);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.step-form__fields select { appearance: auto; cursor: pointer; }
.step-form__fields input::placeholder { color: var(--color-ink-500); opacity: 1; }
.step-form__fields select:invalid { color: var(--color-ink-500); }
.step-form__fields select:valid { color: var(--color-ink-900); }
.step-form__fields input[type="text"]:focus, .step-form__fields input[type="email"]:focus, .step-form__fields input[type="tel"]:focus, .step-form__fields input[type="number"]:focus, .step-form__fields select:focus {
  outline: none;
  border-color: var(--color-green-700);
  box-shadow: 0 0 0 3px rgba(21,71,52,0.1);
}
.step-form__checkbox { display: flex; align-items: flex-start; gap: 10px; font-size: 0.85rem; color: var(--color-ink-500); }
.step-form__checkbox input { margin-top: 3px; flex-shrink: 0; }
.step-form__success { text-align: center; }
.step-form__success h3 { color: var(--color-green-800); }
.step-form__success p { color: var(--color-ink-500); }
.step-form--on-green { background: var(--color-green-900); border-color: rgba(242,199,92,0.25); }
.step-form--on-green .step-form__question p { color: var(--color-gold-400); }
.step-form--on-green .tap-btn { background: transparent; border-color: rgba(255,255,255,0.35); color: var(--color-white); box-shadow: none; }
.step-form--on-green .tap-btn:hover { border-color: rgba(255,255,255,0.6); }
.step-form--on-green .tap-btn.is-selected { border-color: var(--color-gold-400); background: rgba(242,199,92,0.18); color: var(--color-white); }
.step-form--on-green .step-form__fields { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.15); }
.step-form--on-green .step-form__fields input { background: var(--color-white); }
.step-form--on-green .step-form__success h3 { color: var(--color-gold-400); }
.step-form--on-green .step-form__success p { color: var(--color-cream-200); }
@media (max-width: 620px) {
  .step-form { padding: 24px 20px; }
  .step-form__fields { padding: 18px; }
}

/* =========================================================
   Premium polish pass — scroll reveals, hover motion, grain
   texture, feature icons. Additive only; every effect degrades
   gracefully (prefers-reduced-motion, no-JS) to the existing
   static design.
   ========================================================= */

/* Scroll reveals — class applied by assets/js/site.js */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* Card lift on hover */
.card { transition: transform 0.35s ease, box-shadow 0.35s ease; }
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }

/* Coach headshots: subtle desaturate -> full color + scale on hover */
.card--coach .headshot img { transition: transform 0.6s ease, filter 0.6s ease; filter: grayscale(30%); }
.card--coach:hover .headshot img { transform: scale(1.06); filter: grayscale(0%); }

/* Button shine sweep */
.btn { position: relative; overflow: hidden; }
.btn::before {
  content: '';
  position: absolute;
  top: 0; left: -60%;
  width: 35%; height: 100%;
  background: rgba(255,255,255,0.35);
  transform: skewX(-20deg);
  transition: left 0.55s ease;
  pointer-events: none;
}
.btn:hover::before { left: 130%; }
@media (prefers-reduced-motion: reduce) {
  .btn::before { display: none; }
}

/* Grain texture over dark green sections — cheap, high perceived value */
.section--green { position: relative; }
.section--green::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.05;
  mix-blend-mode: overlay;
  pointer-events: none;
}