/* INVICTUS Training Center
 *
 * Built from the PSDs in design/psd/ (1920px artboards). Every size below is
 * the PSD value scaled with the viewport: clamp(min, PSD/1920*100vw, PSD).
 * Gotham is the design face; Montserrat stands in until a Gotham web licence
 * is in place (see README).
 */

:root {
  --orange: #f29821;
  --black: #000;
  --white: #fff;
  --paper: #fdf9f5;      /* hero type */
  --grey: #cdcdcd;       /* location band */
  --card-line: #d4d4d4;  /* review cards */
  --star: #e6b05f;
  --muted: #9a9a9a;

  --font: "Montserrat", "Gotham", "Helvetica Neue", Arial, sans-serif;

  /* Content sits 92px in at 1920; the narrower column (FAQ, reviews, map) is 1410 wide. */
  --gutter: clamp(20px, 4.8vw, 92px);
  --wrap: 1744px;
  --inner: 1410px;

  /* Montserrat 300/500 set within 2% of Gotham Light/Medium at the PSD sizes.
     Its 900 runs ~20% wider than Gotham Black, so the display and nav sizes
     are reduced to hold the PSD's line lengths. Every size here was then taken
     down about 2px at desktop and 1px at the small end (Sean, 2026-10-16:
     "the fonts are big across the whole site"). */
  --fs-display: clamp(38px, calc(36.9px + 3.1vw), 96px);    /* PSD 119 Gotham Black; 60px at 760 */
  --fs-h2: clamp(24px, 2.3vw, 44px);         /* PSD 48 */
  --fs-h3: clamp(18px, 1.4vw, 27px);         /* PSD 30 */
  --fs-lead: clamp(15px, 1.15vw, 22px);      /* PSD 24 */
  --fs-body: clamp(14px, 0.84vw, 16px);      /* PSD 18 / 24 */
  --fs-nav: clamp(13px, 0.9vw, 17px);        /* PSD 20 Gotham Black */
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font);
  font-weight: 300;
  font-size: var(--fs-body);
  line-height: 1.34;
  color: var(--black);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.inner { width: min(100% - 2 * var(--gutter), var(--inner)); margin-inline: auto; }

.h2 {
  font-size: var(--fs-h2);
  font-weight: 500;
  line-height: 1.05;
  text-transform: uppercase;
}
.h3 { font-size: var(--fs-h3); font-weight: 500; line-height: 1.1; }
.accent { color: var(--orange); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--orange); color: var(--black); padding: 12px 16px; font-weight: 700;
}
.skip:focus { left: 16px; top: 16px; }

:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }

/* Placeholder copy that must be supplied before launch. Bracketed in the
   markup so it cannot ship unnoticed: grep -rn "\[.* TO COME" site/ */
.todo { font-style: italic; opacity: 0.85; }

/* ---------- buttons ---------- */

.btn {
  display: inline-block;
  font-family: inherit;
  font-weight: 500;
  font-size: var(--fs-lead);
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.btn:hover { transform: translateY(-2px); }

/* GET STARTED: 209 x 58 orange block, white 24px type */
.btn--solid {
  background: var(--orange);
  color: var(--white);
  padding: 0.71em 0.81em;
  border: 0;
}
.btn--solid:hover { background: #e0861a; }

/* BOOK YOUR FREE INTRO SESSION: 472 x 84, 2px outline */
.btn--outline {
  color: var(--paper);
  border: 2px solid var(--paper);
  padding: 1.24em 0.94em;
}
.btn--outline:hover { background: rgba(253, 249, 245, 0.08); }

/* ---------- header ---------- */

.site-header {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 20;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  /* Left edge is the page's content edge, so the logo lines up with the hero headline. */
  padding: clamp(14px, 1.05vw, 20px) clamp(16px, 1.9vw, 36px) 0 max(var(--gutter), (100% - var(--wrap)) / 2);
}

.brand { margin-top: clamp(0px, 0.7vw, 13px); flex: none; }
.brand img { width: clamp(132px, 11.35vw, 218px); }

.site-nav ul { display: flex; align-items: center; gap: clamp(14px, 1.45vw, 28px); }
.site-nav a {
  font-size: var(--fs-nav);
  font-weight: 900;
  color: var(--white);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}
.site-nav a:not(.nav-cta):hover { color: var(--orange); }
/* Teeej's hover: an orange rule sweeps in under the link from the left. */
@media (min-width: 1081px) {
  .site-nav a:not(.nav-cta) { position: relative; }
  .site-nav a:not(.nav-cta)::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -0.35em;
    width: 100%;
    height: 2px;
    background: var(--orange);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.18s ease;
  }
  .site-nav a:not(.nav-cta):hover::after,
  .site-nav a:not(.nav-cta):focus-visible::after { transform: scaleX(1); }
}

.site-nav .nav-cta {
  display: inline-block;
  background: var(--orange);
  padding: 0.68em 0.6em;
  margin-left: -0.3em;
  transition: background-color 0.15s ease;
}
.site-nav .nav-cta:hover { background: #e0861a; }

.nav-toggle {
  display: none;
  margin-top: 6px;
  width: 44px;
  height: 44px;
  padding: 10px;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  height: 3px;
  margin: 5px 0;
  background: var(--white);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 1080px) {
  .js .nav-toggle { display: block; }
  .js .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.94);
    padding: 12px var(--gutter) 28px;
  }
  .js .site-nav.is-open { display: block; }
  .site-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav li a:not(.nav-cta) {
    display: block;
    padding: 14px 0;
    font-size: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  }
  .site-nav .nav-cta { margin: 20px 0 0; font-size: 16px; padding: 16px 18px; text-align: center; display: block; }
  /* No JS: the menu simply wraps under the logo. */
  html:not(.js) .site-header { flex-wrap: wrap; gap: 12px; }
  html:not(.js) .site-nav ul { flex-direction: row; flex-wrap: wrap; gap: 4px 18px; }
  html:not(.js) .site-nav li a:not(.nav-cta) { border: 0; padding: 4px 0; font-size: 14px; }
  html:not(.js) .site-nav .nav-cta { margin: 0; padding: 8px 10px; font-size: 14px; }
}

/* ---------- home: hero ---------- */

.hero {
  position: relative;
  z-index: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: max(620px, min(100svh, 56.25vw));
  padding: 150px 0 clamp(40px, 3.6vw, 69px);
  color: var(--paper);
  background: #161616;
  overflow: hidden;
}
.hero__bg img,
.hero__video { transform-origin: 70% 50%; }   /* the curtain's zoom holds on the athlete */
.hero__bg,
.hero__bg img,
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 50%;
}
/* Header loop: loaded without reduced motion, a landscape cut on wide screens and a
   portrait cut on phones (index.html). No fade: the still under it is its own first
   frame. Without a source (reduced motion) there is nothing to show. */
.hero__video:not([src]) { display: none; }
@media (max-width: 900px) and (prefers-reduced-motion: no-preference) {
  /* The portrait loop is framed for the middle, not the PSD photo's right-hand athlete. */
  .hero__bg img,
  .hero__video { object-position: 50% 50%; transform-origin: 50% 50%; }
}
/* PSD "Gradient Fill 1": #161616 to transparent at 63deg, anchored bottom-left.
   The top fade is not in the PSD: it keeps the white nav legible where the
   header loop passes bright gym walls, and is invisible over the photo. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(22, 22, 22, 0.55) 0, rgba(22, 22, 22, 0) 190px),
    linear-gradient(27deg, rgba(22, 22, 22, 0.92) 0%, rgba(22, 22, 22, 0.62) 32%, rgba(22, 22, 22, 0) 62%);
}
.hero__content { position: relative; z-index: 1; }

.hero h1 {
  font-size: var(--fs-display);
  font-weight: 900;
  line-height: 0.98;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
/* Held to the left ~54%, as in the PSD, so it never crosses the athlete's face. */
.hero p {
  max-width: min(1040px, 54vw);
  margin-top: clamp(18px, 1.5vw, 29px);
  line-height: 1.34;
}
.hero .btn { margin-top: clamp(24px, 2.1vw, 40px); }

@media (max-width: 760px) {
  /* Keeps "REAL MUAY THAI." on one line down to 320px wide. */
  :root { --fs-display: min(9vw, 60px); }
  .hero { min-height: 88svh; padding-top: 130px; }
  .hero p { max-width: none; }
  .hero::after {
    background:
      linear-gradient(180deg, rgba(22, 22, 22, 0.55) 0, rgba(22, 22, 22, 0) 150px),
      linear-gradient(0deg, rgba(22, 22, 22, 0.95) 0%, rgba(22, 22, 22, 0.7) 45%, rgba(22, 22, 22, 0.1) 80%);
  }
  .hero .btn { white-space: normal; text-align: center; padding: 1em 0.9em; }
}

/* ---------- home: programs ---------- */

/* The bottom padding keeps the space the PSD gives the Get Started button
   (67 + 58 + 87 = 212 at 1920), which the orange coaches panel rises into. */
.programs {
  position: relative;
  z-index: 1;
  background: var(--white);
  padding: clamp(64px, 6.65vw, 128px) 0 clamp(56px, 11.05vw, 212px);
}

.program-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(28px, 2.5vw, 48px) clamp(14px, 1.05vw, 20px);
  margin-top: clamp(32px, 4vw, 77px);
}
.program img {
  width: 100%;
  aspect-ratio: 421 / 318;
  object-fit: cover;
  background: var(--black);
}
.program .h3 { margin-top: clamp(16px, 1.6vw, 31px); }
.program p { margin-top: clamp(8px, 0.85vw, 16px); }

.rule {
  height: 3px;
  margin: clamp(40px, 3.95vw, 76px) 0 0;
  border: 0;
  background: var(--black);
}

.supporting { margin-top: clamp(36px, 3.65vw, 70px); }
.supporting p { margin-top: clamp(10px, 1vw, 20px); max-width: 1000px; }

@media (max-width: 1100px) {
  .program-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .program-grid { grid-template-columns: 1fr; }
}

/* ---------- home: coaches ---------- */

/* The orange panel breaks out of its band: it starts 143px up into the
   programs section and hangs 92px into the reviews below (PSD "Color Fill 6"). */
.coaches {
  position: relative;
  z-index: 2;   /* above .programs, which its photo and orange panel rise into */
  overflow-x: clip;   /* the side-in columns start 72px outside their box */
  display: grid;
  grid-template-columns: 927fr 993fr;
}
.coaches__photo {
  display: grid;
  margin-top: -1.3vw;
  min-height: 100%;
}
.coaches__photo img {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 45% 40%;
}
/* Each coach has their own photo; script.js moves .is-shown as the bio changes.
   Without JS only the first (Nate, whose bio is open) shows. */
.coaches__photo img:not(.is-shown) { display: none; }
.js .coaches__photo img:not(.is-shown) { display: block; opacity: 0; }
.js .coaches__photo img { transition: opacity 0.45s ease; }
@media (prefers-reduced-motion: reduce) { .js .coaches__photo img { transition: none; } }
.coaches__panel {
  background: var(--orange);
  margin: -7.45vw 0 -4.8vw;
  padding: 9.4vw clamp(24px, 6vw, 115px) 8.7vw 4.2vw;
}
.coaches__sub {
  margin-top: clamp(8px, 0.9vw, 18px);
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: 1.1;
  text-transform: uppercase;
}
.coaches__intro { margin-top: clamp(12px, 1.1vw, 21px); max-width: 745px; }

.coach-list { margin-top: clamp(32px, 3.45vw, 66px); max-width: 800px; }
.coach + .coach { margin-top: clamp(20px, 1.95vw, 37px); }
.coach__name { font-size: var(--fs-lead); font-weight: 500; line-height: 1.1; }
.coach__name button {
  font: inherit;
  color: inherit;
  text-align: left;
  background: none;
  cursor: pointer;
  border: 3px solid var(--black);
  padding: 0.83em 0.92em;
  min-width: min(100%, 388px);
  transition: background-color 0.15s ease;
}
.coach__name button:hover { background: rgba(0, 0, 0, 0.06); }
.coach.is-open .coach__name button {
  border-color: transparent;
  padding: 0;
  min-width: 0;
  cursor: default;
  background: none;
}
.coach.is-open + .coach { margin-top: clamp(28px, 2.75vw, 53px); }
.coach__bio { margin-top: 0.15em; }
.coach__bio p + p { margin-top: 1em; }

@media (max-width: 1000px) {
  .coaches { grid-template-columns: 1fr; }
  .coaches__photo { margin: 0; }
  .coaches__photo img { aspect-ratio: 4 / 3; height: auto; }
  .coaches__panel { margin: 0; padding: 48px var(--gutter) 56px; }
}

/* ---------- home: reviews ---------- */

.reviews { padding: clamp(64px, 10vw, 193px) 0 clamp(56px, 7.2vw, 138px); }
.reviews .h2 { text-align: center; }

.carousel {
  position: relative;
  margin-top: clamp(28px, 2.7vw, 52px);
  padding-inline: clamp(0px, 1.7vw, 32px);
}
.carousel__track {
  display: grid;
  align-items: start;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 2 * var(--gap)) / 3);
  gap: var(--gap);
  --gap: clamp(14px, 1.4vw, 27px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-block: 2px;
}
.carousel__track::-webkit-scrollbar { display: none; }

.carousel__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 48px;
  padding: 0;
  display: grid;
  place-items: center;
  background: none;
  border: 0;
  color: var(--black);
  cursor: pointer;
}
.carousel__arrow svg { width: 14px; height: 24px; }
.carousel__arrow:hover { color: var(--orange); }
.carousel__arrow--prev { left: -8px; }
.carousel__arrow--next { right: -8px; }

.review {
  display: flex;
  flex-direction: column;
  scroll-snap-align: start;
  margin: 0;
  min-height: 342px;
  padding: clamp(22px, 1.75vw, 34px);
  border: 2px solid var(--card-line);
  border-radius: 12px;
  background: var(--white);
  color: #222;
}
.review__head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
}
/* The initial shows only if the photo fails to load (script.js removes it). */
.review__avatar {
  position: relative;
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--orange);
  color: var(--white);
  font-weight: 500;
  font-size: 28px;
}
.review__avatar::before { content: attr(data-initial); }
.review__avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.review__name { font-weight: 700; font-size: clamp(15px, 0.88vw, 16.5px); line-height: 1.2; font-style: normal; }
.review__stars { margin-top: 4px; color: var(--star); font-size: 17px; letter-spacing: 3px; line-height: 1; }
.review__google { width: 26px; height: 26px; align-self: start; margin-top: 6px; }
/* Google reviews run long; show seven lines, "Read more" for the rest. */
.review__text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 7;
  overflow: hidden;
  margin: 20px 0 0;
  font-size: clamp(14px, 0.84vw, 16px);
  line-height: 1.5;
}
.review.is-expanded .review__text { display: block; -webkit-line-clamp: unset; }
.review__more {
  align-self: flex-start;
  margin-top: 10px;
  padding: 0;
  background: none;
  border: 0;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  color: #555;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.review__more:hover { color: var(--black); }

@media (max-width: 1000px) {
  .carousel__track { grid-auto-columns: calc((100% - var(--gap)) / 2); }
}
@media (max-width: 640px) {
  .carousel { padding-inline: 0; }
  .carousel__track { grid-auto-columns: 86%; }
  .carousel__arrow { display: none; }
  .review { min-height: 0; }
}


/* ---------- home: FAQ ---------- */

.faq {
  position: relative;
  padding: clamp(60px, 5.75vw, 110px) 0 clamp(56px, 7.2vw, 138px);
  color: var(--white);
  background: #111 var(--faq-bg, url("img/faq-bg.jpg")) center / cover no-repeat;
}
/* PSD "Color Fill 8 copy": black at 54% over the photo. */
.faq::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.54); }
.faq > * { position: relative; }

.faq-list { margin-top: clamp(28px, 3.3vw, 64px); }
.faq-item { border-bottom: 2px solid var(--white); }
.faq-item summary {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  padding: 0.75em 10px 0.6em;
  font-size: var(--fs-lead);
  font-weight: 500;
  line-height: 1.2;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  flex: none;
  font-weight: 300;
  font-size: 1.2em;
  line-height: 0.8;
  transition: transform 0.2s ease;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item summary:hover { color: var(--orange); }
.faq-item__answer { padding: 0 10px 1.2em; max-width: 60em; }
.faq-item__answer a { color: inherit; text-decoration: underline; }
.faq-item__answer p + p { margin-top: 1em; }


/* ---------- home: location ---------- */

.location {
  /* Room at the foot for the pinned Get Started to come to rest in:
     gap above + button + gap below (32 + 58 + 38 at 1920). */
  padding: clamp(60px, 5.8vw, 111px) 0 calc(clamp(24px, 1.65vw, 32px) + 2.42 * var(--fs-lead) + var(--cta-gap));
  background: var(--grey);
}
.location__address {
  margin-top: clamp(12px, 1.3vw, 25px);
  font-size: var(--fs-lead);
  font-weight: 500;
  line-height: 1.25;
  text-transform: uppercase;
}
.location__map {
  display: block;
  width: 100%;
  height: clamp(320px, 24.85vw, 477px);
  margin-top: clamp(28px, 3.2vw, 61px);
  border: 0;
  background: #e5e3df;
}

/* ---------- pinned Get Started (home) ---------- */

/* Sticky, not fixed: it rides the bottom-left of the viewport while <main> is
   on screen, then stops at its place in the flow, the foot of the location
   band, so it never sits on the footer. The negative top margin keeps it from
   taking up space there. The gap clears the footer logo, which rises 22-39px
   into the band. */
:root { --cta-gap: clamp(28px, 2vw, 38px); }
.sticky-cta {
  position: sticky;
  z-index: 15;
  bottom: var(--cta-gap);
  display: block;
  width: fit-content;
  margin: calc(-2.42em - var(--cta-gap)) 0 var(--cta-gap) max(var(--gutter), (100% - var(--wrap)) / 2);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease, background-color 0.15s ease;
}
/* Hidden over the hero, which has its own call to action (script.js). */
.js .sticky-cta:not(.is-visible) {
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
}

/* ---------- footer ---------- */

.site-footer {
  position: relative;
  padding: 0 var(--gutter) clamp(36px, 2.55vw, 49px);
  background: var(--black);
  color: var(--white);
  text-align: center;
  font-size: clamp(12px, 0.84vw, 16px);
  font-weight: 500;
}
/* The logo straddles the top edge of the footer, over whatever sits above it:
   in the About PSD it overlaps the corner of the orange panel (z-index 1). */
.site-footer__logo {
  position: relative;
  z-index: 2;
  display: inline-block;
  margin-top: calc(-1 * clamp(22px, 2vw, 39px));
}
.site-footer__logo img { width: clamp(200px, 15.6vw, 300px); }
.site-footer__contact { margin-top: clamp(22px, 1.9vw, 36px); line-height: 1.5; }
.site-footer__contact a { text-decoration: none; }
.site-footer__contact a:hover { color: var(--orange); }
.site-footer__legal { margin-top: clamp(18px, 1.4vw, 26px); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; }
.site-footer__legal a { text-decoration: none; opacity: 0.7; }
.site-footer__legal a:hover { color: var(--orange); opacity: 1; }
.site-footer__partners-label { margin-top: clamp(12px, 0.9vw, 17px); text-transform: uppercase; }

.partners {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 18px clamp(22px, 1.8vw, 35px);
  margin-top: 12px;
}
.partners img { width: auto; }
.partners .bjjf { height: 35px; }

.social { display: flex; justify-content: center; gap: 12px; margin-top: clamp(16px, 1vw, 19px); }
.social a {
  display: grid;
  place-items: center;
  width: 35px;
  height: 35px;
  transition: transform 0.15s ease;
}
.social a:hover { transform: translateY(-2px); }
.social svg { width: 30px; height: 30px; }   /* white on the black footer, no coloured tile */

/* ---------- about ---------- */

/* The page is shorter than a tall monitor; keep what shows below the footer black. */
.page-about { background: var(--black); }

/* Sean, 2026-10-16: new photo, no orange block, the copy simply sits over the
   photo. The shade on the left (and at the foot, where the footer logo
   straddles the edge) is what keeps white type readable on it. */
.about-hero {
  position: relative;
  overflow-x: clip;
  padding-top: max(130px, 10.26vw);
  background: var(--black);
}
.about-hero__bg { position: absolute; inset: 0; z-index: 0; }
.about-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 50%;
}
.about-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0, rgba(0, 0, 0, 0) 190px),
    linear-gradient(0deg, rgba(0, 0, 0, 0.9) 0, rgba(0, 0, 0, 0) 160px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.74) 34%, rgba(0, 0, 0, 0) 66%);
}
.about-panel {
  position: relative;
  z-index: 1;
  width: clamp(560px, 46.25vw, 888px);
  padding: clamp(40px, 4.1vw, 79px) clamp(28px, 3.3vw, 63px) clamp(64px, 6vw, 112px) max(var(--gutter), (100% - var(--wrap)) / 2);
  color: var(--white);
}
.about-panel h1 {
  font-size: var(--fs-h2);
  font-weight: 500;
  line-height: 1.05;
  text-transform: uppercase;
}
.about-panel .coaches__sub { margin-top: clamp(4px, 0.45vw, 9px); color: var(--orange); }
.prose {
  margin-top: clamp(20px, 1.9vw, 36px);
  font-size: clamp(14px, 0.78vw, 15px);
  line-height: 1.5;
}
.prose p + p { margin-top: 1.5em; }
.prose__more { display: none; }

@media (max-width: 1000px) {
  /* The phone photo (1124 x 1000) fills the top of the page and fades to black
     under the copy, which starts over its lower half. */
  .about-hero { padding-top: 0; }
  .about-hero__bg { inset: 0 0 auto 0; height: auto; aspect-ratio: 1124 / 1000; }
  .about-hero__bg img { height: 100%; object-position: 50% 50%; }
  .about-hero::after {
    background:
      linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0, rgba(0, 0, 0, 0) 150px),
      linear-gradient(180deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) calc(100vw * 0.5), #000 calc(100vw * 0.89));
  }
  .about-panel { width: auto; padding: calc(100vw * 0.62) var(--gutter) 64px; }
  /* Phones read the first two paragraphs, then tap for the rest (script.js).
     Without JS the button never shows and everything stays open. */
  .js .prose.is-collapsed p:nth-child(n + 3) { display: none; }
  .js .prose__more {
    display: block;
    margin-top: 22px;
    padding: 0;
    background: none;
    border: 0;
    font: inherit;
    font-weight: 700;
    color: var(--white);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
  }
}

/* ---------- scroll motion (motion.js), after the Teeej site ---------- */

/* The curtain pins the hero for a screen and a bit, so it has to be exactly one
   screen tall while it runs. */
.is-curtain .hero { min-height: 100svh; }
/* When a phone's address bar slides away mid-pin, the screen grows taller than
   the pinned hero and the strip below it shows the pin's spacer. Paint it the
   hero's own dark, which the mobile gradient already fades to at the bottom. */
.is-curtain .pin-spacer:has(> .hero) { background: #161616; }

/* Only ever added by motion.js, so content stays visible without it. No
   will-change: it would promote every paragraph to its own layer (Teeej found
   Safari chokes on that). */
.fade-in {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.fade-in.is-visible { opacity: 1; transform: none; }

/* The four programs arrive one after another when they share a row. */
@media (min-width: 1101px) {
  .program.fade-in:nth-child(2) { transition-delay: 0.12s; }
  .program.fade-in:nth-child(3) { transition-delay: 0.24s; }
  .program.fade-in:nth-child(4) { transition-delay: 0.36s; }
}

.side-in-left,
.side-in-right {
  opacity: 0;
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.side-in-left { transform: translateX(-72px); }
.side-in-right { transform: translateX(72px); }
.side-in-left.is-visible,
.side-in-right.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .fade-in, .side-in-left, .side-in-right { opacity: 1; transform: none; transition: none; }
}

/* ---------- toast for links that have no destination yet ---------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 50;
  transform: translate(-50%, 20px);
  opacity: 0;
  pointer-events: none;
  padding: 12px 18px;
  background: var(--black);
  color: var(--white);
  border: 2px solid var(--orange);
  font-size: 14px;
  font-weight: 500;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* ---------- schedule / get started (third-party embeds) ---------- */

.page-embed { background: var(--black); color: #fff; }
.embed-page {
  width: min(var(--wrap), 100% - 2 * var(--gutter));
  margin-inline: auto;
  padding-block: max(130px, 10.26vw) clamp(48px, 5vw, 96px);
}
.embed-page h1 {
  font-size: var(--fs-h2);
  font-weight: 500;
  line-height: 1.05;
  text-transform: uppercase;
}
.embed-page__sub { margin-top: 12px; font-size: clamp(15px, 0.9vw, 17px); }
.embed-page__sub a { text-decoration: underline; }
.embed-page__frame {
  display: block;
  width: 100%;
  margin-top: clamp(24px, 2.5vw, 48px);
  border: 0;
  background: #fff;
}
.embed-page__frame--form { height: 800px; }   /* form_embed.js resizes it to fit */

/* ---------- get started popup (as on the old site) ---------- */

.intro {
  width: min(640px, 100% - 24px);
  max-height: calc(100dvh - 24px);
  padding: 40px 42px 24px;
  border: 0;
  border-radius: 15px;
  background: #fff;
  color: #101010;
  text-align: center;
  overscroll-behavior: contain;
}
.intro::backdrop { background: rgba(0, 0, 0, .8); }
html:has(.intro[open]) { overflow: hidden; }
.intro__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  border: 1.5px solid #000;
  background: #fff;
  color: #000;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
.intro__logo { width: 234px; margin: 0 auto 18px; }
.intro__title {
  font: 300 clamp(22px, 5vw, 29px)/1.1 Lato, sans-serif;
  text-transform: uppercase;
  color: #000;
}
.intro__title b { font-weight: 400; }
.intro__lead {
  margin-top: 8px;
  font: 400 clamp(13px, 3.4vw, 14px)/1.2 Lato, sans-serif;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}
.intro__body { margin-top: 8px; font: 400 16px/1.2 "Open Sans", sans-serif; }
.intro__note { margin-top: 10px; font: italic 10px/1.4 "Open Sans", sans-serif; }
.intro__form { display: block; width: 100%; height: 800px; margin-top: 12px; border: 0; }
@media (max-width: 600px) { .intro { padding: 44px 16px 16px; } }

/* ---------- schedule (as on the old site: white card over the mats photo) ---------- */

.page-schedule { background: var(--black); }
.schedule {
  padding: max(130px, 10.26vw) 20px clamp(48px, 5vw, 96px);
  background:
    linear-gradient(rgba(0, 0, 0, .85), rgba(0, 0, 0, 0) max(130px, 10.26vw)),
    var(--schedule-bg, url("img/schedule-bg.jpg")) 50% 50% / cover;
}
.schedule__card {
  max-width: 874px;
  margin-inline: auto;
  padding: 32px;
  border-radius: 20px;
  background: rgba(255, 255, 255, .95);
  box-shadow: 0 0 10px rgba(0, 0, 0, .35);
  color: #000;
  text-align: center;
}
.schedule__logo { width: 284px; margin: 0 auto 16px; }
.schedule h1 {
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(0, 0, 0, .1);
  font: 700 clamp(26px, 4.7vw, 48px)/1.2 "Open Sans", sans-serif;
  text-transform: uppercase;
  color: #222;
}
.schedule__intro {
  padding: 14px 0;
  border-bottom: 1px solid rgba(0, 0, 0, .1);
  font: 400 clamp(15px, 1.9vw, 19.2px)/1.4 "Open Sans", sans-serif;
  text-transform: uppercase;
}
.schedule__intro a { color: inherit; }
.schedule__frame { display: block; width: 100%; height: 800px; margin-top: 16px; border: 0; }
@media (max-width: 600px) { .schedule__card { padding: 24px 14px; } .schedule__logo { width: 200px; } }

/* ---------- any other page (WordPress page.php): text on the schedule card ---------- */

.page-card { text-align: left; }
.page-card h1 { text-align: center; }
.page-card__body { margin-top: 24px; font: 400 17px/1.6 "Open Sans", sans-serif; }
.page-card__body > * + * { margin-top: 1em; }
.page-card__body a { color: inherit; text-decoration: underline; }