/* ========================================
   LABYRINTH BJJ: PROGRAM PAGES
   ========================================

   Loaded only by the pages under /programs/, on top of style.css. Everything
   these pages share with the front page, the nav, buttons, section headings,
   coach cards, the FAQ accordion. Comes from style.css and is not repeated
   here. What is here is the handful of blocks that only a program page has:
   its header, its fact strip, its own slice of the timetable, and the price
   row at the bottom.

   The front page does not load this file, which is the point of it being
   separate: four program pages should not make the homepage's stylesheet
   bigger. */

/* ===== SECTION RHYTHM ===== */
/* style.css gives each front-page section its own padding rule by name
   (.programs, .coaches, .faq …) and has no generic one, so these pages bring
   their own. Same clamp as the front page uses, so the two feel like one site
   when a visitor moves between them. */
.prog-section { padding: clamp(48px, 6vw, 80px) 0; }

.prog-section--surface {
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* ===== BREADCRUMBS ===== */
.prog-crumbs {
  padding: calc(var(--nav-height) + var(--space-8)) 0 0;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.prog-crumbs a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.prog-crumbs a:hover { color: var(--gold); }
.prog-crumbs__sep { margin: 0 var(--space-2); color: var(--text-faint); }
.prog-crumbs__current { color: var(--text); }

/* ===== HEADER ===== */
.prog-hero { padding: var(--space-8) 0 var(--space-12); }

.prog-hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.25rem, 6vw, 4rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin: var(--space-3) 0 var(--space-5);
}

.prog-hero__lead {
  font-size: clamp(1.0625rem, 2.2vw, 1.25rem);
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 60ch;
}

.prog-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-8);
}

/* The photograph sits beside the words on a wide screen and above them on a
   narrow one, where a side-by-side would leave both too small to do any work. */
.prog-hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--space-12);
  align-items: center;
}

.prog-hero__shot {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  aspect-ratio: 4 / 3;
}

/* <picture> is the element the height has to be given to: the <img> inside it
   resolves height:100% against its parent, and a bare <picture> is auto-height,
   so without this the photograph sits short and leaves a band of empty card
   under it. */
.prog-hero__shot picture {
  display: block;
  width: 100%;
  height: 100%;
}

.prog-hero__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ===== FACT STRIP ===== */
/* auto-fit rather than a fixed count: the pages carry four facts each today,
   but a page with three should not leave a hole where the fourth would be. */
.prog-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-top: var(--space-12);
}

.prog-fact { background: var(--surface); padding: var(--space-6); }

.prog-fact__label {
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}

.prog-fact__value {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.3;
  color: var(--text);
}

.prog-fact__value em {
  font-style: normal;
  color: var(--gold);
}

/* A phone number in a fact strip is the one value anybody taps. It inherits
   the display face and weight from the value above; it just needs to look
   like something you can press. */
.prog-fact__value a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(200, 162, 76, 0.4);
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.prog-fact__value a:hover {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

/* ===== PROSE ===== */
.prog-prose { max-width: 68ch; }
.prog-prose p { margin-bottom: var(--space-5); line-height: 1.75; color: var(--text-muted); }
.prog-prose p strong { color: var(--text); font-weight: 600; }
.prog-prose a { color: var(--gold); text-decoration: none; border-bottom: 1px solid rgba(200,162,76,0.35); }
.prog-prose a:hover { border-bottom-color: var(--gold); }

.prog-prose h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--text);
  margin: var(--space-10) 0 var(--space-4);
}

.prog-prose ul { margin: 0 0 var(--space-5) var(--space-5); }
.prog-prose li { margin-bottom: var(--space-3); line-height: 1.7; color: var(--text-muted); }
.prog-prose li strong { color: var(--text); font-weight: 600; }

/* ===== CLASS BREAKDOWN CARDS ===== */
.prog-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-10);
}

.prog-group {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
}

.prog-group__tag {
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--space-3);
}

.prog-group__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.125rem;
  margin-bottom: var(--space-3);
}

.prog-group__desc { font-size: 0.9375rem; line-height: 1.65; color: var(--text-muted); }

/* ===== THIS PROGRAM'S TIMETABLE ===== */
/* One column per training day rather than the front page's seven-column grid:
   a program that runs three days a week in a seven-column table is four
   columns of dashes, which reads as a gap rather than as a schedule. */
/* 180px, not 200: the kids timetable runs six days, and at 200 the sixth wraps
   onto a row of its own with five columns of empty space beside it. */
.prog-week {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-10);
}

.prog-day {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}

.prog-day__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9375rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gold);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-4);
}

.prog-slot { margin-bottom: var(--space-4); }
.prog-slot:last-child { margin-bottom: 0; }

.prog-slot__time {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--text);
}

.prog-slot__name { font-size: 0.875rem; color: var(--text-muted); margin-top: 2px; }

.prog-slot__badge {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: var(--space-2);
  vertical-align: 2px;
}

.prog-slot__badge--gi { background: rgba(200,162,76,0.16); color: var(--gold); }
.prog-slot__badge--nogi { background: rgba(231,76,60,0.16); color: var(--red-hover); }
.prog-slot__badge--adv { background: rgba(255,255,255,0.08); color: var(--text-muted); }

.prog-week__note {
  margin-top: var(--space-6);
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.7;
}

/* ===== PRICE ROW ===== */
.prog-prices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-10);
}

.prog-price {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  text-align: center;
}

.prog-price--feature { border-color: var(--gold); }

.prog-price__name {
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-3);
}

.prog-price__amount {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2rem;
  color: var(--text);
}

.prog-price__amount span { font-size: 0.875rem; font-weight: 400; color: var(--text-muted); }
.prog-price__note { font-size: 0.875rem; color: var(--text-muted); margin-top: var(--space-3); line-height: 1.6; }

/* ===== COACH ROW ===== */
.prog-coaches {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-10);
}

/* style.css spans every non-featured coach card across two columns, which is
   right for the front page's six-column grid and wrong here, with auto-fit
   it silently halved this grid to two cards a row. Three across divides the
   roster evenly and keeps the pairs that belong together on one row. */
.prog-coaches .coach-card {
  grid-column: auto;
}

/* Three across or one. A two-column step would put the ninth coach alone on
   a row of her own, away from the eighth, and the last two on this roster are
   the pair that most belongs side by side. */
@media (max-width: 720px) {
  .prog-coaches { grid-template-columns: 1fr; }
}

/* ===== CLOSING CTA ===== */
.prog-close {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-16) var(--space-8);
  text-align: center;
  margin: var(--space-20) 0;
}

.prog-close__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}

.prog-close__text {
  color: var(--text-muted);
  max-width: 52ch;
  margin: 0 auto var(--space-8);
  line-height: 1.7;
}

/* ===== SIBLING PROGRAMS ===== */
.prog-siblings {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-10);
}

.prog-sibling {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  text-decoration: none;
  transition: border-color var(--transition-fast), transform var(--transition-fast);
}

.prog-sibling:hover { border-color: var(--gold); transform: translateY(-2px); }

.prog-sibling__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--text);
  margin-bottom: var(--space-2);
}

.prog-sibling__desc { font-size: 0.875rem; color: var(--text-muted); line-height: 1.6; }

/* ===== NARROW SCREENS ===== */
@media (max-width: 899px) {
  .prog-hero__grid { grid-template-columns: 1fr; gap: var(--space-8); }
  /* Photograph first: it says what the class is faster than the heading does. */
  .prog-hero__shot { order: -1; }
}

@media (max-width: 560px) {
  .prog-hero__cta { flex-direction: column; align-items: stretch; }
  .prog-hero__cta .btn { justify-content: center; }
  .prog-close { padding: var(--space-12) var(--space-5); }
}

/* ========================================
   SCHEDULE, PRICING AND COACH PAGES
   ======================================== */

/* ── /schedule ── */
.sched-pg__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-5);
}

.sched-pg__filters {
  display: flex;
  gap: var(--space-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 4px;
}

.sched-pg__filter {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-muted);
  background: none;
  border: none;
  border-radius: 6px;
  padding: 8px 14px;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.sched-pg__filter:hover { color: var(--text); }

.sched-pg__filter.is-active {
  background: var(--gold);
  color: #0A0A0A;
}

.sched-pg__ages { color: var(--text-faint); }

/* A day emptied by a filter is hidden outright rather than left as a titled
   empty card. [hidden] is display:none and .prog-day sets display:block, so
   the attribute needs the extra weight to win. */
.prog-day[hidden], .prog-slot[hidden] { display: none !important; }

/* ── /pricing ── */
.price-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-10);
}

.price-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
}

.price-card--feature { border-color: var(--gold); }

.price-card__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-4);
}

.price-card__amount {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.75rem;
  line-height: 1;
  color: var(--text);
  margin-bottom: var(--space-6);
}

.price-card__amount span {
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--text-muted);
}

.price-card__list {
  list-style: none;
  margin: 0 0 var(--space-8);
  padding: 0;
  flex: 1;
}

.price-card__list li {
  position: relative;
  padding-left: 24px;
  margin-bottom: var(--space-3);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--text-muted);
}

.price-card__list li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--gold);
  font-weight: 700;
}

.price-card__btn {
  display: block;
  text-align: center;
  padding: 13px 20px;
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
  border: 1px solid var(--border-strong);
  transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.price-card--feature .price-card__btn {
  background: var(--gold);
  color: #0A0A0A;
  border-color: var(--gold);
}

.price-card__btn:hover { transform: translateY(-2px); border-color: var(--gold); }
.price-card--feature .price-card__btn:hover { background: var(--gold-hover); }

.price-extras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-10);
}

.price-extra {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
}

.price-extra__name {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-3);
}

.price-extra__amount {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--text);
}

.price-extra__amount span { font-size: 0.8125rem; font-weight: 400; color: var(--text-muted); }
.price-extra__note { font-size: 0.875rem; color: var(--text-muted); margin-top: var(--space-2); line-height: 1.55; }

/* ── /coaches ── */
/* .prog-coaches is defined once, higher up, with its column counts. */

.coach-card__link {
  display: inline-block;
  margin-top: var(--space-4);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--gold);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition-fast);
}

.coach-card__link:hover { border-bottom-color: var(--gold); }

/* The coach portraits are 200x200 headshots. Left as a 4:3 hero they would be
   blown up four times over, so the frame is square and capped. */
.coach-hero__shot {
  aspect-ratio: 1 / 1;
  max-width: 340px;
  margin-left: auto;
  border-radius: 50%;
}

@media (max-width: 899px) {
  .coach-hero__shot { margin: 0 auto; max-width: 220px; }
}

@media (max-width: 560px) {
  .sched-pg__head { flex-direction: column; align-items: stretch; }
  .sched-pg__filters { justify-content: space-between; }
  .sched-pg__filter { flex: 1; padding: 10px 8px; }
}

/* ── Lineage ── */
/* Who promoted whom, given a card of its own beside the explanation. It is the
   one claim on a coach page a rival cannot write for themselves, so it does not
   sit buried in a paragraph. */
.lineage {
  display: grid;
  grid-template-columns: minmax(240px, 340px) 1fr;
  gap: var(--space-12);
  align-items: start;
  margin-top: var(--space-10);
}

.lineage__card {
  background: var(--bg);
  border: 1px solid var(--gold);
  border-radius: var(--radius-md);
  padding: var(--space-8);
  position: sticky;
  top: calc(var(--nav-height) + var(--space-6));
}

.lineage__label {
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-3);
}

.lineage__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.15;
  color: var(--gold);
  margin-bottom: var(--space-2);
}

.lineage__name a { color: inherit; border-bottom: 1px solid rgba(200,162,76,0.4); }
.lineage__name a:hover { border-bottom-color: var(--gold); }

.lineage__where { font-size: 0.875rem; color: var(--text-muted); line-height: 1.5; }

@media (max-width: 899px) {
  .lineage { grid-template-columns: 1fr; gap: var(--space-8); }
  .lineage__card { position: static; }
}

/* ===== ENNOVA RESIDENT OFFER (/ennova) ===== */
/* The page is built out of the landing page's own components: .hero,
   .programs__grid, .trial, .faq. Only three things on it have no equivalent
   there, and they are all that lives here. Everything is namespaced so
   nothing outside /ennova can pick it up by accident. */

/* The headline is two fixed phrases, and both of them have to stay whole: the
   offer is "$0 enrollment" and "50% off month one", not "$0" and "ENROLLMENT.
   50% OFF MONTH" and "ONE.". At the shared 40px phone size the second phrase
   is 438px wide with 294px to put it in, so it broke into three lines and
   orphaned "$0" on a line by itself.

   Two changes buy the room. The hero pads twice over, once on .hero and again
   on .hero__content, which costs 96px of a 390px screen; on a phone this page
   takes the inner one back. And the size is set from the width of the longer
   phrase rather than inherited, so the pair always lands on exactly two lines.
   Measured, not guessed: 24px at 320, 30px at 390, up to the full 80px. */
.ennova-hero .hero__h1-visual {
  font-size: clamp(24px, 7.6vw, 80px);
  white-space: nowrap;
}

/* The gold half onto its own line. The span is already gold from style.css. */
.ennova-hero .hero__h1-visual span { display: block; }

@media (max-width: 560px) {
  .ennova-hero .hero__content { padding-left: 0; padding-right: 0; }
}

/* The front page gives every card image the same 800x600 attributes, so its
   cards line up despite .program-card__image's aspect-ratio never getting a
   say: a width/height pair on the <img> is a presentational hint that still
   counts as a real height. These five photographs are their own shapes, one
   of them portrait, so the ratio has to be allowed to decide. Scoped here
   rather than fixed in style.css, which would restyle the front page. */
.ennova-programs .program-card__image { height: auto; }

/* ===== TEAM LEGACY MERGER (/legacy/) ===== */

/* Two crests, side by side, which is the whole story in one picture.
   Both marks are black artwork on transparency: the Labyrinth one is inverted
   to white in the nav, but the Team Legacy crest carries real brand colour in
   its ring and its lettering, and inverting that turns the blue orange. So
   neither is inverted here and both sit on the same light disc instead, which
   is how a crest is shown on a dark page anyway. */
/* .prog-facts fits two columns at 390px, which is right for "Seven days" or
   "6:30 AM" but not for a street address: it broke the building number away
   from the street and ran to five lines. One column on a phone. */
@media (max-width: 560px) {
  .legacy-facts { grid-template-columns: 1fr; }
}

/* Three stats, not the front page's four: the head count came off. The row
   sits outside the copy column and spans the whole grid, under copy and art
   alike. */
.legacy-hero .hero__stats {
  grid-template-columns: repeat(3, 1fr);
  grid-column: 1 / -1;
}

/* The hero splits: the announcement copy on the left, the two head coaches
   from the "Two Schools. One Team." art on the right. The panel is capped
   rather than fluid because the crop is 1280x800 and a panel wider than the
   copy column would demote the headline to a caption. */
.legacy-hero .hero__content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
  gap: clamp(var(--space-8), 4vw, var(--space-16));
  align-items: center;
}

.legacy-hero__duo {
  display: block;
}

.legacy-hero__duo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(200, 162, 76, 0.35);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}

/* Sized from the width of the longer phrase in the narrowed copy column, the
   same trick the ennova hero uses, so the headline is always exactly two
   lines: TWO SCHOOLS. over ONE TEAM. At the front page's 6vw it wrapped after
   the first word. */
.legacy-hero .hero__h1-visual {
  font-size: clamp(32px, 4.6vw, 64px);
  white-space: nowrap;
}
.legacy-hero .hero__h1-visual span { display: block; }

/* One column once the panel would squeeze the copy: art below the message,
   centred, never wider than it is sharp. */
@media (max-width: 960px) {
  .legacy-hero .hero__content { grid-template-columns: 1fr; }
  .legacy-hero__duo { max-width: 520px; }
}

.legacy-marks {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(var(--space-5), 5vw, var(--space-10));
  margin-top: var(--space-12);
}

.legacy-mark { text-align: center; }

.legacy-mark img {
  width: clamp(104px, 15vw, 168px);
  height: clamp(104px, 15vw, 168px);
  border-radius: 50%;
  background: #F4F1EA;
  /* No padding: both marks are already circular artwork trimmed to their own
     edges, so any inset here shows as a cream ring around the logo rather
     than as breathing room. They fill the disc. */
  object-fit: cover;
  border: 1px solid var(--border);
  display: block;
}

.legacy-mark__label {
  margin-top: var(--space-4);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  max-width: 15ch;
  margin-inline: auto;
  line-height: 1.4;
}

.legacy-marks__join {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700;
  color: var(--gold);
  line-height: 1;
  padding-bottom: var(--space-8);
}

/* Scott gets the pull-quote treatment: he is the reason a Team Legacy parent
   is reading this at all. The wordmark stands in for a portrait, because we
   do not have one of him and a stock face would be worse than none. */
.legacy-coach {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(var(--space-6), 4vw, var(--space-10));
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius-lg);
  padding: clamp(var(--space-6), 4vw, var(--space-10));
}

.legacy-coach__shot picture { display: block; }

.legacy-coach__shot img {
  width: 100%;
  height: auto;
  display: block;
}

/* The portrait is a square photograph now, and the circle and its ring are
   drawn by the browser. The version that shipped carried both baked in, and
   the gold ring was one pixel wide sitting in the anti-aliased alpha edge: at
   150px on a phone that is a third of a pixel, so it broke into a dotted arc.
   border-radius redraws at whatever size the page actually uses.

   Capped rather than filling the column, because a head shot at 420px on a
   wide screen stops being a portrait and starts being a poster. */
.legacy-coach__shot > picture:first-child img {
  max-width: 320px;
  margin-inline: auto;
  aspect-ratio: 1;
  height: auto;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid var(--gold);
}

/* His school's mark under his face, which is the pairing the section is about.
   Held well back: it is a caption, not a second logo lockup. */
.legacy-coach__mark {
  margin: var(--space-6) auto 0;
  max-width: 210px;
  opacity: 0.75;
}

.legacy-coach__body .section-title { margin-bottom: var(--space-5); }
.legacy-coach__body .section-title span { color: var(--gold); }

.legacy-coach__pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}

/* .hero__badge is a block-level pill in the hero; here several sit in a row. */
.legacy-coach__pills .hero__badge { margin-bottom: 0; }

.legacy-coach__text {
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-muted);
  margin-bottom: var(--space-4);
}
.legacy-coach__text:last-child { margin-bottom: 0; }
.legacy-coach__text strong { color: var(--text); }

.legacy-transfer-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-8);
}

/* The transfer form is a .trial section with no second column, so the form
   should not stretch to the full width of a desktop container. */
.legacy-transfer .trial-form { margin-top: var(--space-8); }
.legacy-transfer__hint {
  margin-top: var(--space-2);
  font-size: 12px;
  color: var(--text-faint);
}

.legacy-transfer__done {
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-muted);
  margin-bottom: var(--space-6);
}

/* The honeypot. Off-screen rather than display:none, because a bot that reads
   the stylesheet skips anything hidden outright, and left focusable only to
   whatever is filling every input it finds: tabindex="-1" and aria-hidden keep
   it away from anybody using a keyboard or a screen reader. */
.legacy-transfer__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* The billing authorisation is a paragraph, not a label. It has to be
   readable, so it gets its own measure rather than the single line the other
   consent boxes use. */
.legacy-transfer .ennova-check span { line-height: 1.6; }
.legacy-transfer .ennova-check strong { color: var(--text); }
.form-group__hint {
  font-weight: 400;
  color: var(--text-faint);
  text-transform: none;
  letter-spacing: 0;
}

@media (max-width: 860px) {
  .legacy-coach { grid-template-columns: 1fr; text-align: left; }
  .legacy-coach__shot { max-width: 320px; }
}

@media (max-width: 560px) {
  .legacy-marks { gap: var(--space-4); }
  .legacy-mark__label { font-size: 12px; }
  .legacy-transfer-cta .btn { width: 100%; justify-content: center; }
}

/* Three numbered steps for proving you live there. Same card treatment as
   .program-card so the section does not read as a different website. */
.ennova-proof {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-12);
}

/* The number sits BESIDE the text, not above it. Stacked, the equal-height
   grid rows stretched every card to the tallest one and the gap between a
   lone numeral and its paragraph read as a layout fault, which on a phone it
   effectively was. Side by side there is nothing to stretch. */
.ennova-proof__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  transition: transform var(--transition-fast), border-color var(--transition-fast);
}

.ennova-proof__item:hover {
  transform: translateY(-5px);
  border-color: rgba(200, 162, 76, 0.3);
}

.ennova-proof__item > span {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(200, 162, 76, 0.35);
  background: rgba(200, 162, 76, 0.08);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--gold);
  /* Optically centres the circle on the paragraph's first line. */
  margin-top: -3px;
}

.ennova-proof__item p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-muted);
}

/* Anthony saying he lives there is the single most persuasive line on the
   page, so it gets the room a pull quote gets and nothing else competes. */
.ennova-quote {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--space-10);
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius-lg);
  padding: var(--space-10);
}

.ennova-quote__shot picture { display: block; }

.ennova-quote__shot img {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--gold);
  display: block;
}

.ennova-quote__body .hero__badge { margin-bottom: var(--space-5); }

.ennova-quote__text {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(22px, 3vw, 34px);
  line-height: 1.25;
  color: var(--text);
  margin: 0 0 var(--space-6);
}

.ennova-quote__who {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: var(--space-4);
}

.ennova-quote__who strong {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}

.ennova-quote__who span {
  font-size: 13px;
  color: var(--gold);
  letter-spacing: 0.04em;
}

.ennova-quote__where {
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.65;
}

/* The claim form reuses .trial-form wholesale; these are the few bits the
   front page's contact form does not have. */
.ennova-check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: var(--space-2) 0 var(--space-6);
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.5;
}

.ennova-check input {
  margin-top: 3px;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  accent-color: var(--gold);
}

.trial-form__submit { width: 100%; }

.ennova-form__error { margin-top: var(--space-4); color: var(--red-hover, #E74C3C); }
.ennova-form__ok { margin-top: var(--space-4); color: var(--gold); line-height: 1.6; }

.ennova-fine {
  margin-top: var(--space-6);
  font-size: 13px;
  color: var(--text-faint);
  line-height: 1.6;
}

@media (max-width: 899px) {
  .ennova-proof { grid-template-columns: 1fr; gap: var(--space-4); }
  .ennova-quote {
    grid-template-columns: 1fr;
    gap: var(--space-6);
    padding: var(--space-7);
    text-align: center;
    justify-items: center;
  }
  .ennova-quote__who { align-items: center; }
}

@media (max-width: 560px) {
  .ennova-quote__shot img { width: 140px; height: 140px; }
}