:root {
  --bg: #ffffff;
  --surface: #f3f6f3;
  --surface-2: #ffffff;
  --border: #dbe2db;
  --green: #2f7d4d;
  --green-dark: #1c5c37;
  --green-light: #4caf6f;
  --gold: #c9a227;
  --white: #ffffff;
  --text: #0d0d0d;
  --grey: #575d57;
  --radius: 4px;
  --max-width: 1100px;
  --font-display: 'Montserrat', 'Segoe UI', sans-serif;
  --font-body: 'Nunito', 'Segoe UI', Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin: 0 0 .5em;
}

h2 {
  font-size: 2rem;
  color: var(--text);
  border-left: 5px solid var(--green);
  padding-left: .5em;
  margin-bottom: 1em;
}

p { color: var(--grey); }

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

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 20px;
}

.section { padding: 70px 0; background: var(--bg); }
.section:nth-of-type(even) { background: var(--surface); }

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,0.97);
  border-bottom: 2px solid var(--green);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 70px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
}
.logo:hover { text-decoration: none; }

.logo-badge {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: transparent;
}
.logo-badge img { width: 100%; height: 100%; object-fit: contain; }
.logo-placeholder {
  min-height: 0;
  border: none;
  font-size: 1.6rem;
  background: var(--green);
  border-radius: 50%;
}

.logo-text {
  font-size: 1.3rem;
  font-weight: 900;
  color: var(--text);
  letter-spacing: 2px;
}
.logo-text span { color: var(--green); }

.main-nav {
  display: flex;
  gap: 8px;
}
.main-nav a {
  color: var(--text);
  font-weight: 600;
  text-transform: uppercase;
  font-size: .75rem;
  letter-spacing: .5px;
  padding: 9px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.main-nav a:hover {
  color: var(--white);
  background: var(--green);
  border-color: var(--green);
  text-decoration: none;
}

.lang-switch {
  display: flex;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  flex-shrink: 0;
}
.lang-btn {
  border: none;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .5px;
  padding: 9px 11px;
  cursor: pointer;
}
.lang-btn + .lang-btn { border-left: 1px solid var(--border); }
.lang-btn:hover { background: var(--surface-2); }
.lang-btn.is-active {
  background: var(--green);
  color: var(--white);
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--text);
  font-size: 1.8rem;
  cursor: pointer;
}

/* Hero */
.hero {
  position: relative;
  /* 100vh minus the sticky header, which sits above this section - without
     the subtraction the last 72px of the hero fall below the fold, which
     hides bottom-anchored content. */
  min-height: calc(100vh - 72px);
  display: flex;
  /* Bottom-anchored, not centred: the backdrop is a portrait photo of people
     standing, so the faces are always in the upper half at every viewport
     width. Centring the text put it across their faces or torsos. */
  align-items: flex-end;
  overflow: hidden;
  /* Matches the logo file's own black background, so the watermark below
     blends into the section with no visible edges. */
  background: #000;
}

/* Photo backdrop. Fills the section and is heavily darkened, so it reads as
   atmosphere behind the wordmark rather than a portrait. That matters on
   phones: a tall viewport crops a wide photo down to a narrow centre strip,
   and at this darkness the crop stops being noticeable. */
.hero-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Source is a portrait photo (1200x1600) in a wide, short hero box, so the
     vertical crop is heavy and gets heavier as the viewport widens. The
     coaches' faces sit ~28-38% down the source frame, and the safe range for
     this value is bounded by width: at 1280px wide anything past ~0.53 crops
     their heads off entirely, while lower values keep them in shot at every
     width tested (1024/1280/1440/1920). Keeping the text clear of them is
     handled by anchoring the hero text to the bottom, not by pushing this
     value up - that trade was what cropped the faces out before. */
  object-position: 60% 30%;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,.62), rgba(0,0,0,.78));
}

/* Faded logo watermark. Sized rather than cover-cropped: it is artwork, not a
   photo, so it must scale down whole on narrow screens instead of being cut off.
   The bottom padding matches .hero-content so the mark sits behind the text. */
.hero-watermark {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  padding-bottom: clamp(50px, 16vh, 170px);
}
.hero-watermark img {
  width: min(85vw, 680px);
  height: auto;
  /* Kept low: the mark sits directly behind the headline, so anything
     stronger competes with the text instead of backing it. */
  opacity: .1;
}

/* The vertical offset that lands the headline on the coaches' chests is set
   by positionHeroText() in js/script.js, which measures the photo's actual
   crop at the current window size. A fixed value here cannot track it: the
   crop shifts continuously as the viewport changes shape. This is only the
   resting position used before that runs (and if JS is unavailable). */
.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  width: 100%;
  padding-bottom: 18px;
}

/* Hero text stays white — it sits over the dark photo overlay */
.hero h1 {
  font-size: clamp(3rem, 11vw, 6.5rem);
  letter-spacing: 4px;
  color: var(--white);
  margin-bottom: .2em;
}
.hero h1 span { color: var(--green-light); }

.hero-subtitle {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(.9rem, 2vw, 1.1rem);
  letter-spacing: 6px;
  color: var(--white);
  text-transform: uppercase;
  margin: 0 0 .6em;
}

.tagline {
  color: var(--white);
  font-size: 1.2rem;
  letter-spacing: 1px;
  /* Tightened from 2em: with the headline pinned to the coaches' chests the
     block sits lower, and the old gap pushed the button past the fold. */
  margin-bottom: 1.2em;
}

.hero-buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Buttons */
.btn {
  display: inline-block;
  padding: 14px 30px;
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: .9rem;
  cursor: pointer;
  border: 2px solid transparent;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.18); }
.btn:active { transform: translateY(0); }

.btn-primary { background: var(--green); color: var(--white); }
.btn-primary:hover { background: var(--green-dark); }

/* See-through with a white edge; fills white with green text once engaged.
   :active carries the same treatment to taps, where there is no hover. */
.btn-outline { border-color: var(--white); color: var(--white); }
.btn-outline:hover,
.btn-outline:focus-visible,
.btn-outline:active { background: var(--white); color: var(--green-dark); }

/* Wide single call-to-action in the hero */
.btn-hero {
  width: min(360px, 100%);
  padding-left: 20px;
  padding-right: 20px;
  font-size: 1rem;
}

.btn-small {
  padding: 8px 18px;
  font-size: .75rem;
  background: var(--green);
  color: var(--white);
}
.btn-small:hover { background: var(--green-dark); }

.btn-full { width: 100%; border: none; }

/* About */
.about { position: relative; overflow: hidden; }

.about-slideshow {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.about-slideshow img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The portrait photos are pre-cropped to squares centred on their faces, so
     a centred window lands on the faces on both shapes this section takes:
     roughly 2:1 on desktop and 1:3 on mobile. */
  object-position: 50% 50%;
  opacity: 0;
  /* Kept well under the 4s hold so each photo settles before the next fade */
  transition: opacity 1s ease;
}
.about-slideshow img.is-active { opacity: 1; }
.about-slideshow img.missing { display: none; }

/* Light veil - just enough to keep black body copy readable over the photos */
.about-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(255,255,255,.55);
}
/* No photos loaded yet - drop the scrim so the plain section shows through */
.about-slideshow.is-empty ~ .about-scrim { background: none; }

.about > .container { position: relative; z-index: 2; }

/* Soft white halo so the intro text stays crisp against a busy photo */
.about > .container > h2,
.about > .container > p {
  text-shadow: 0 1px 3px rgba(255,255,255,.95), 0 0 14px rgba(255,255,255,.85);
}

/* Programs. Each card shows its title and one-line tagline, with the full
   description behind a toggle - the copy runs several paragraphs per program,
   which would bury the schedule if all four were expanded by default. */
/* Stacked, not a grid. Side-by-side cards share a row height, so opening one
   stretched the whole row and left the others floating beside a tall gap -
   it read as broken. Stacked full-width, an open panel simply pushes the
   next program down, which is what an accordion should look like. */
.program-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.program-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-left: 4px solid var(--green);
  border-radius: var(--radius);
  padding: 22px 26px;
}
.program-card h3 {
  color: var(--green-dark);
  font-size: 1.1rem;
  margin-bottom: .35em;
}

.program-tagline {
  color: var(--text);
  font-weight: 600;
  font-size: .95rem;
  margin: 0 0 16px;
}

.program-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: none;
  border-radius: var(--radius);
  background: var(--green);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: .72rem;
  cursor: pointer;
  transition: background .15s ease;
}
.program-toggle:hover { background: var(--green-dark); }
.program-toggle[aria-expanded="true"] .coach-chevron {
  transform: rotate(225deg) translate(-2px, -2px);
}

.program-body {
  margin-top: 18px;
  /* Full-width lines are hard to read on a wide screen, so cap the measure. */
  max-width: 68ch;
}
.program-body p {
  font-size: .93rem;
  margin: 0 0 1em;
}
.program-body p:last-child { margin-bottom: 0; }

/* Coaches */
.coach-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 24px;
  /* start, not stretch, so an open card grows without stretching its row */
  align-items: start;
}

.coach-card {
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface-2);
  transition: box-shadow .2s ease;
}
.coach-card:hover { box-shadow: 0 10px 20px rgba(0,0,0,.15); }

/* The photo fills its own rectangle; the card below it can grow */
.coach-media {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--surface);
}

.coach-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.coach-photo.missing { display: none; }

/* Shown only until a real photo is dropped in - initial on the brand green */
.coach-fallback {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 4.5rem;
  font-weight: 800;
  color: rgba(255,255,255,.92);
  background: linear-gradient(160deg, var(--green), var(--green-dark));
}
.coach-photo.missing ~ .coach-fallback { display: flex; }

.coach-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 40px 14px 14px;
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.55) 35%, rgba(0,0,0,.88));
  text-align: center;
}
.coach-overlay h3 {
  color: var(--white);
  font-size: 1.15rem;
  margin: 0 0 .15em;
}

.coach-role {
  color: var(--green-light);
  text-transform: uppercase;
  font-size: .72rem;
  letter-spacing: 1px;
  font-weight: 700;
  margin: 0;
}

/* Dropdown toggle */
.coach-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  border: none;
  background: var(--green);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: .76rem;
  cursor: pointer;
  transition: background .15s ease;
}
.coach-toggle:hover { background: var(--green-dark); }

.coach-chevron {
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .2s ease;
}
.coach-toggle[aria-expanded="true"] .coach-chevron {
  transform: rotate(225deg) translate(-2px, -2px);
}

.coach-bio {
  padding: 18px 18px 20px;
  border-top: 1px solid var(--border);
  text-align: left;
}
.coach-bio p { margin: 0 0 1em; font-size: .92rem; }
.coach-bio h4 {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: .72rem;
  color: var(--green-dark);
  margin: 0 0 .6em;
}
.coach-bio ul {
  margin: 0;
  padding-left: 1.1em;
  font-size: .9rem;
  color: var(--grey);
}
.coach-bio li { margin-bottom: .35em; }

/* Generic photo placeholder */
.photo-frame { position: relative; background: var(--surface); }
.photo-frame img.missing { display: none; }
.photo-placeholder {
  display: none;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  height: 100%;
  min-height: 160px;
  border: 2px dashed var(--border);
  color: var(--grey);
  font-size: .85rem;
  padding: 10px;
}
.photo-frame img.missing + .photo-placeholder { display: flex; }
.photo-placeholder code {
  background: rgba(0,0,0,.06);
  padding: 2px 8px;
  border-radius: 3px;
  color: var(--green-dark);
  font-size: .8rem;
}

/* Schedule */
.schedule-note { color: var(--grey); font-size: .9rem; margin-top: -.5em; }

.table-wrap { overflow-x: auto; }
.schedule-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 480px;
  background: var(--surface-2);
}
.schedule-table th, .schedule-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.schedule-table th {
  background: var(--green);
  color: var(--white);
  text-transform: uppercase;
  font-size: .8rem;
  letter-spacing: 1px;
}
.schedule-table tr:hover td { background: rgba(47,125,77,0.08); }

.schedule-grid { min-width: 720px; border-collapse: collapse; }
.schedule-grid th, .schedule-grid td {
  text-align: center;
  font-size: .85rem;
  border: 1px solid var(--border);
}
.schedule-grid td:empty::before { content: "\2014"; color: #b9c0b9; }

.pill {
  display: inline-block;
  padding: 5px 10px;
  border-radius: var(--radius);
  font-size: .75rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--green);
}
/* Keeps a range together on one line. A line is allowed to break after an en
   dash, which split "Ages 7-12" and "17:00-18:00" across two lines in narrow
   mobile columns. Applied to the ranges only, so long class names can still
   wrap and the table does not get wider than it needs to be. */
.nw { white-space: nowrap; }

.pill-openmat { border-color: var(--gold); }
.pill-leglocks { border-color: #7a5ba6; }
.pill-mma { border-color: #b3423a; }
.pill-littleheroes { border-color: var(--gold); background: #fdf7e6; }

/* Subheadings splitting the adult and kids timetables */
.schedule-sub {
  font-size: 1.05rem;
  color: var(--green-dark);
  margin: 32px 0 12px;
}
.schedule-sub:first-of-type { margin-top: 20px; }

/* Booking form */
.booking-form {
  max-width: 560px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  padding: 30px;
  border-radius: var(--radius);
  border-top: 3px solid var(--green);
  margin-top: 30px;
  box-shadow: 0 4px 14px rgba(0,0,0,.06);
}
.form-row { margin-bottom: 18px; display: flex; flex-direction: column; gap: 6px; }
.form-row-split { flex-direction: row; gap: 16px; }
.form-row-split > div { flex: 1; display: flex; flex-direction: column; gap: 6px; }

label { font-size: .85rem; color: var(--grey); text-transform: uppercase; letter-spacing: .5px; }

input, select, textarea {
  background: var(--white);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 12px;
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 1rem;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--green);
}

.form-hint {
  margin: 2px 0 0;
  font-size: .8rem;
  color: var(--grey);
  text-transform: none;
  letter-spacing: 0;
}

.booking-alt { text-align: center; margin-top: 16px; font-size: .9rem; color: var(--grey); }

/* Privacy consent checkbox */
.form-consent { margin-bottom: 22px; }
.consent-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: .85rem;
  line-height: 1.5;
  color: var(--grey);
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
}
.consent-label input[type="checkbox"] {
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  margin: 2px 0 0;
  padding: 0;
  accent-color: var(--green);
  cursor: pointer;
}
.consent-label a { text-decoration: underline; }

/* Privacy policy page */
.legal { padding-top: 50px; }
.legal .container { max-width: 780px; }
.legal h3 {
  font-size: 1.05rem;
  color: var(--green-dark);
  margin-top: 1.8em;
}
.legal p, .legal li { color: var(--grey); }
.legal ul { padding-left: 1.2em; margin: 0 0 1em; }
.legal li { margin-bottom: .4em; }
.legal-updated {
  font-size: .85rem;
  margin-top: -.8em;
  margin-bottom: 2em;
}
.legal-back { margin-top: 3em; font-weight: 700; }

.footer-links { display: flex; gap: 18px; flex-wrap: wrap; }

/* Contact */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  align-items: start;
}
.contact-info p { margin: 0 0 14px; }
.map-wrap { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); }

/* Footer */
.site-footer {
  background: var(--surface);
  border-top: 2px solid var(--green);
  padding: 24px 0;
}
.footer-inner {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  font-size: .85rem;
  color: var(--grey);
}
.footer-inner a { color: var(--green-dark); }

/* Responsive */
@media (max-width: 820px) {
  .contact-grid { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  /* Lighten the top of the scrim so the group stays visible, and deepen it
     lower down where the text needs the contrast. */
  .hero-overlay {
    background: linear-gradient(180deg,
      rgba(0,0,0,.30) 0%,
      rgba(0,0,0,.35) 45%,
      rgba(0,0,0,.88) 100%);
  }

  .main-nav {
    position: absolute;
    top: 70px;
    left: 0;
    right: 0;
    background: var(--bg);
    flex-direction: column;
    padding: 16px 20px;
    display: none;
    border-bottom: 2px solid var(--green);
    box-shadow: 0 4px 10px rgba(0,0,0,.15);
  }
  .main-nav.open { display: flex; }
  .main-nav a { text-align: center; }
  .nav-toggle { display: block; }
  .form-row-split { flex-direction: column; }
}