/* ============================================================================
   Carlson Gracie Jiu Jitsu Maui
   Built on the "Industry" design system, inverted to a dark ground.

   Rules that must not be broken (see handoff README):
   - Blueprint framing: square corners, hairline border, transparent fill,
     a "+" registration mark at each corner. Never round, never fill,
     never drop the corner marks. The solid primary button is the one
     deliberate exception to "no fill".
   - Duotone photography, dialled way down per photo (--wash).
   - Barlow Condensed 600 for headings/labels/times/nav; Barlow for body.
   - No decorative colour beyond the steel accent. No shadows. No radii.
   ========================================================================= */

/* ---------------------------------------------------------------- tokens */

:root {
  /* Ground — site override. The system ships light (#f2f2f3); we paint dark. */
  --color-bg: #0f1418;
  --color-text: #f5f5f8;

  --text-body: rgba(245, 245, 248, 0.85);
  --text-secondary: rgba(245, 245, 248, 0.8);
  --text-muted: rgba(245, 245, 248, 0.7);
  --text-min: rgba(245, 245, 248, 0.65); /* contrast floor — do not go lower */

  --hairline: rgba(245, 245, 248, 0.14);
  --hairline-strong: rgba(245, 245, 248, 0.16);
  --border-card: rgba(245, 245, 248, 0.3);
  --border-soft: rgba(245, 245, 248, 0.5);
  --corner: rgba(245, 245, 248, 0.5);
  --color-divider: var(--border-card);

  /* Accent ramp — from the system, unchanged. Mono palette: steel only. */
  --color-accent: #5980a6;
  --color-accent-100: #eef6ff;
  --color-accent-200: #d6ebff;
  --color-accent-300: #b5d9fd;
  --color-accent-400: #94bce3;
  --color-accent-500: #749dc4;
  --color-accent-600: #597ea3;
  --color-accent-700: #416180;
  --color-accent-800: #2c455d;
  --color-accent-900: #1d2d3d;

  --font-heading: "Barlow Condensed", system-ui, sans-serif;
  --font-heading-weight: 600;
  --font-body: "Barlow", system-ui, sans-serif;

  --shell: 1280px;
  --gutter: 28px;
}

/* ------------------------------------------------------------------ base */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  text-transform: uppercase;
  color: #fff;
}

p { margin: 0; }
img { display: block; max-width: 100%; }

a {
  color: var(--color-accent-300);
  text-decoration: none;
  text-underline-offset: 3px;
}
a:hover { color: #fff; }

:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
::selection { background: rgba(89, 128, 166, 0.4); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  padding: 12px 18px;
  transform: translateY(-120%);
  background: var(--color-accent-900);
  color: #fff;
  font-family: var(--font-heading);
  font-size: 15px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.skip-link:focus-visible { transform: translateY(0); }

/* ------------------------------------------------- blueprint + duotone */

.blueprint {
  position: relative;
  border: 1px solid var(--color-divider);
  border-radius: 0;
}

/* The duotone overlay clips itself (overflow:hidden); a blueprint wrapper
   draws its registration marks outside the box, so when both classes share
   a wrapper the frame must win. */
.blueprint.duotone { overflow: visible; }

.blueprint > .corner {
  position: absolute;
  width: 11px;
  height: 11px;
  color: var(--corner);
}
.blueprint > .corner::before,
.blueprint > .corner::after {
  content: "";
  position: absolute;
  background: currentColor;
}
.blueprint > .corner::before { left: 5px; top: 0; width: 1px; height: 100%; }
.blueprint > .corner::after  { top: 5px; left: 0; width: 100%; height: 1px; }
.blueprint > .corner.tl { top: -6px; left: -6px; }
.blueprint > .corner.tr { top: -6px; right: -6px; }
.blueprint > .corner.bl { bottom: -6px; left: -6px; }
.blueprint > .corner.br { bottom: -6px; right: -6px; }

.blueprint--accent {
  border-color: var(--color-accent);
}

.duotone { position: relative; overflow: hidden; }
.duotone::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--color-accent);
  mix-blend-mode: color;
  opacity: var(--wash, 1);
}

/* Photos fill their frame. */
.frame-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.frame-img--contain { object-fit: contain; }

/* Placeholder for the photos the client still owes us. Deliberately reads
   as unfinished — replace each with a real <img class="frame-img">. */
.photo-pending {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
  font-family: var(--font-heading);
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245, 245, 248, 0.42);
  background:
    repeating-linear-gradient(
      -45deg,
      rgba(245, 245, 248, 0.035) 0 1px,
      transparent 1px 11px
    ),
    #141b21;
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  text-decoration: none;
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 17px;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 14px 26px;
  color: #fff;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 0;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.btn-primary {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}
.btn-primary:hover  { background: var(--color-accent-600); border-color: var(--color-accent-600); color: #fff; }
.btn-primary:active { background: var(--color-accent-700); border-color: var(--color-accent-700); }

.btn-outline { border-color: var(--border-soft); }
.btn-outline:hover { border-color: #f5f5f8; color: #fff; }

.btn-sm { font-size: 16px; padding: 13px 24px; }

/* --------------------------------------------------------------- layout */

.shell {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 88px var(--gutter) 0;
}
.shell--flush { padding-top: 0; }
.shell--pad { padding: 80px var(--gutter); }

.rule-top    { border-top: 1px solid var(--hairline); }
.rule-bottom { border-bottom: 1px solid var(--hairline); }

/* Section header: big H2 with a small accent label beside it. */
.section-head {
  display: flex;
  align-items: flex-end;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}
.section-head .label,
.section-head a { padding-bottom: 10px; }
.section-head a { margin-left: auto; }

h2, .h2 {
  font-size: clamp(38px, 5.5vw, 72px);
  line-height: 0.95;
}
.h2-sm { font-size: clamp(34px, 4.6vw, 60px); line-height: 0.95; }
.h2-lg { font-size: clamp(40px, 6vw, 80px); line-height: 0.9; }

/* Small uppercase accent labels — the system's workhorse. */
.label {
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-accent-300);
}
.label--tight { letter-spacing: 0.22em; }
.label--wide  { letter-spacing: 0.3em; }

.link-cap {
  font-family: var(--font-heading);
  font-size: 15px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Auto-collapsing columns — no media queries needed. */
.cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 44px;
  align-items: start;
}
.cols--centered { align-items: center; }

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

.site-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
}
.site-header__inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 22px var(--gutter);
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}
.brand {
  display: flex;
  flex-direction: column;
  line-height: 1;
  color: #fff;
}
.brand:hover { color: #fff; }
.brand__name {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 26px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.brand__meta {
  margin-top: 5px;
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--color-accent-300);
}
.site-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  font-family: var(--font-heading);
  font-size: 15px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.site-nav a { color: rgba(245, 245, 248, 0.85); }
.site-nav a:hover { color: #fff; }
.header-cta { font-size: 15px; padding: 10px 20px; flex: none; }

/* ----------------------------------------------------------------- hero */

.hero {
  position: relative;
  min-height: min(88vh, 820px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.hero__photo {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
/* The prototype's hero carried a rotate(1.9deg) scale(1.07) horizon
   correction tuned to a different photo. The team shot in use now is level
   and posed, so the rotation is gone — reinstate it only for a photo that
   needs it, and keep the paired scale so the rotated corners stay hidden. */
.hero__img {
  /* Both rows of faces sit between 38% and 68%; bias the crop to hold them. */
  object-position: center 45%;
}
.hero__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(15, 20, 24, 0.84) 0%,
    rgba(15, 20, 24, 0.45) 38%,
    rgba(15, 20, 24, 0.95) 100%
  );
}
.hero__content {
  position: relative;
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  /* The header is absolutely positioned over the hero and grows as the nav
     wraps — up to ~200px on a phone. A small script measures it into
     --header-h; the 180px floor is the desktop value and the fallback when
     the script has not run. */
  padding: max(180px, calc(var(--header-h, 0px) + 34px)) var(--gutter) 56px;
  pointer-events: none;
}
.hero__kicker {
  margin-bottom: 22px;
  font-family: var(--font-heading);
  font-size: 14px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-accent-300);
}
.hero h1 {
  font-size: clamp(50px, 9.5vw, 134px);
  line-height: 0.88;
  margin: 0 0 26px;
  max-width: 18ch;
  text-wrap: balance;
}
.hero__lede {
  font-size: 19px;
  line-height: 1.55;
  max-width: 50ch;
  margin: 0 0 34px;
  color: rgba(245, 245, 248, 0.88);
  text-wrap: pretty;
}
/* Lifts the lineage claim out of the paragraph without bolding it — the
   system carries emphasis with the accent tint, not with weight. */
.hero__lede strong {
  font-weight: inherit;
  color: var(--color-accent-300);
}
.hero__actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  pointer-events: auto;
}

/* ----------------------------------------------------------------- kids */

.lede-display {
  font-family: var(--font-heading);
  font-size: clamp(26px, 3.2vw, 38px);
  line-height: 1.15;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 24px;
}
.body-lg {
  font-size: 18px;
  line-height: 1.65;
  color: var(--text-body);
  margin: 0 0 18px;
}
.body-lg--accent { color: var(--color-accent-300); margin-bottom: 28px; }

.panel {
  padding: 26px;
  margin-bottom: 28px;
}
.panel p {
  font-size: 17px;
  line-height: 1.6;
  color: rgba(245, 245, 248, 0.9);
  margin: 0 0 14px;
}
.panel p:last-of-type { margin-bottom: 0; }
.panel__photo {
  position: relative;
  margin-top: 22px;
  aspect-ratio: 16 / 10;
  border-color: var(--color-accent);
}
.panel .label { display: block; margin-bottom: 12px; }

/* The competition-team panel carries more weight than the other panels:
   it is the section's argument, so it gets a display line, a highlighted
   proof statement and its own photo carousel. */
.pathway { padding: 30px 28px; }
.pathway__lead {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: clamp(26px, 3vw, 36px) !important;
  line-height: 1.1;
  text-transform: uppercase;
  color: #fff !important;
  margin: 0 0 18px !important;
}
.pathway__proof {
  color: var(--color-accent-300) !important;
  border-left: 2px solid var(--color-accent);
  padding-left: 16px;
}
.pathway__carousel {
  margin: 26px 0 0;
  border-color: var(--color-accent);
}

/* Numbered benefit list. */
.numbered > li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  padding: 15px 0;
  border-top: 1px solid var(--hairline);
}
.numbered > li:last-child { border-bottom: 1px solid var(--hairline); }
.numbered {
  list-style: none;
  margin: 0;
  padding: 0;
}
.numbered .n {
  font-family: var(--font-heading);
  font-size: 15px;
  color: var(--color-accent-300);
}
.numbered .t {
  font-size: 17px;
  line-height: 1.5;
  color: rgba(245, 245, 248, 0.9);
}

/* Photo carousel — CSS scroll-snap. Grid auto-columns, NOT flex-basis:100%:
   a percentage flex-basis resolves against a content-derived width and makes
   each slide wider than the scroll port, leaving a seam of the next photo at
   every snap position. Grid percentage columns resolve against the scroll
   container's content box and snap cleanly. */
.carousel {
  position: relative;
  margin-bottom: 24px;
  border-color: var(--border-card);
}
.carousel__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}
.carousel__slide {
  position: relative;
  aspect-ratio: 4 / 3;
  min-height: 260px;
  scroll-snap-align: start;
}
/* Arrows are progressive enhancement — the script reveals them. */
.carousel__nav {
  display: none;
  position: absolute;
  bottom: 12px;
  right: 12px;
  gap: 8px;
  z-index: 2;
}
.carousel[data-enhanced="true"] .carousel__nav { display: flex; }
.carousel__nav button {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-heading);
  font-size: 18px;
  color: #fff;
  background: rgba(15, 20, 24, 0.72);
  border: 1px solid var(--border-soft);
  border-radius: 0;
}
.carousel__nav button:hover:not(:disabled) { border-color: #f5f5f8; background: rgba(15, 20, 24, 0.9); }
.carousel__nav button:disabled { opacity: 0.35; cursor: default; }

.class-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 16px;
}
.class-card { padding: 22px; }
.class-card .label { display: block; margin-bottom: 10px; }
.class-card__title {
  font-family: var(--font-heading);
  font-size: 26px;
  line-height: 1.1;
  color: #fff;
  margin-bottom: 8px;
}
.class-card__times {
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-secondary);
}

/* ------------------------------------------------------- mat etiquette */

.etiquette { margin-bottom: 0; }
.etiquette__rules {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 0 26px;
  margin: 24px 0 0;
}
.etiquette__rules > div {
  padding: 16px 0 0;
  border-top: 1px solid rgba(245, 245, 248, 0.22);
}
.etiquette__rules dt {
  font-family: var(--font-heading);
  font-size: 15px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent-300);
  margin-bottom: 5px;
}
.etiquette__rules dd {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-secondary);
}

/* Two closing notes from Professor Christian. Softer than the bordered
   panels above — these should read as an open hand, not framed claims. */
.kids-notes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 32px 40px;
  margin-top: 44px;
  padding-top: 26px;
  border-top: 1px solid var(--hairline);
}
.kids-note .label { display: block; margin-bottom: 12px; }
.kids-note p {
  font-size: 17px;
  line-height: 1.65;
  color: var(--text-body);
  margin: 0 0 14px;
}
.kids-note p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------- adults */

.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 34px;
  align-items: center;
  padding: 34px 0;
  border-top: 1px solid var(--hairline);
}
.split:last-of-type { border-bottom: 1px solid var(--hairline); }

.photo-frame {
  position: relative;
  border-color: var(--border-card);
}
.photo-frame--16x10 { aspect-ratio: 16 / 10; min-height: 200px; }
.photo-frame--4x5   { aspect-ratio: 4 / 5;  min-height: 360px; }
.photo-frame--3x4   { aspect-ratio: 3 / 4;  min-height: 300px; max-width: 300px; }

.split h3 {
  font-size: 40px;
  line-height: 1;
  margin: 0 0 14px;
}
.split p {
  font-size: 17px;
  line-height: 1.6;
  margin: 0 0 16px;
  color: var(--text-secondary);
  max-width: 48ch;
}
.times {
  font-family: var(--font-heading);
  font-size: 16px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
}

/* ----------------------------------------------------------- Will Wilson */

.plate {
  padding: 32px;
  background: var(--color-accent-900);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 36px;
  align-items: center;
}
.plate__body {
  grid-column: span 2;
  min-width: 0;
}
.plate .label { display: block; margin-bottom: 14px; }
.plate h3 {
  font-size: clamp(30px, 4vw, 52px);
  line-height: 0.95;
  margin: 0 0 18px;
}
.plate p {
  font-size: 18px;
  line-height: 1.65;
  color: rgba(245, 245, 248, 0.9);
  max-width: 56ch;
  margin: 0;
}

/* ------------------------------------------------------------- schedule */

.schedule-note {
  margin: 0 0 34px;
  color: var(--text-muted);
  max-width: 64ch;
}
/* The padding / negative-margin pair keeps the corner marks from being
   clipped by the scroll box. */
.schedule-scroll {
  overflow-x: auto;
  padding: 6px 6px 10px;
  margin: -6px -6px 0;
}
.schedule-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
  min-width: 1000px;
}
.day {
  padding: 20px 18px;
  border-color: var(--border-card);
  display: flex;
  flex-direction: column;
}
.day__name {
  font-family: var(--font-heading);
  font-size: 30px;
  line-height: 1;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 14px;
}
.slot {
  border-top: 1px solid var(--hairline-strong);
  padding: 14px 0;
}
.slot__time {
  font-family: var(--font-heading);
  font-size: 16px;
  line-height: 1.15;
  color: #fff;
  white-space: nowrap;
}
.slot__label {
  margin-top: 6px;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-min);
}
.slot--kids {
  padding: 14px 12px;
  margin: 0 -12px;
  background: var(--color-accent-900);
}
.slot--kids .slot__label { color: var(--color-accent-300); }

.day--rest { border-color: rgba(245, 245, 248, 0.18); }
.day--rest .day__name { color: rgba(245, 245, 248, 0.45); }
.day--rest .slot { border-top-color: rgba(245, 245, 248, 0.12); }
.day--rest .slot__time { color: var(--text-secondary); }
.day--rest .slot__label { color: rgba(245, 245, 248, 0.68); }

.legend {
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 24px;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.legend > span {
  display: flex;
  align-items: center;
  gap: 9px;
}
.swatch { width: 14px; height: 14px; }
.swatch--kids  { background: var(--color-accent-900); border: 1px solid var(--color-accent); }
.swatch--adult { border: 1px solid rgba(245, 245, 248, 0.45); }

/* Below ~760px the seven-column scroller is a two-finger fight on a phone,
   so the days stack instead. (Judgement call the prototype left open.) */
@media (max-width: 760px) {
  .schedule-scroll { overflow-x: visible; padding: 6px; margin: -6px -6px 0; }
  .schedule-grid {
    grid-template-columns: 1fr;
    min-width: 0;
    gap: 16px;
  }
  .day { padding: 18px 18px 20px; }
}

/* ------------------------------------------------------------ instructor */

.spec-rows { display: grid; gap: 0; max-width: 520px; }
.spec-row {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid var(--hairline);
  font-size: 16px;
}
.spec-row:last-child { border-bottom: 1px solid var(--hairline); }
.spec-row dt {
  font-family: var(--font-heading);
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent-300);
}
.spec-row dd {
  margin: 0;
  color: rgba(245, 245, 248, 0.9);
}

.instructor__rank {
  font-family: var(--font-heading);
  font-size: 18px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent-300);
  margin-bottom: 28px;
}
.instructor h2 { margin: 0 0 10px; }
.instructor p { max-width: 52ch; }
.instructor p:last-of-type { margin-bottom: 26px; }
.instructor .label { display: block; margin-bottom: 16px; }

/* --------------------------------------------------------------- pricing */

/* Four cards, and the CTA card must never be orphaned on a row of its own.
   auto-fit + minmax cannot guarantee that with four items: a 300px floor never
   fits four tracks inside the 1224px shell (4*300 + 3*20 = 1260), so it lands
   3+1, and a lower floor only moves the 3+1 band to narrower widths.
   Explicit steps instead — 4, then 2+2, then 1. */
.price-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
@media (max-width: 1080px) {
  .price-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .price-grid { grid-template-columns: 1fr; }
}
.price-card { padding: 28px; }
.price-card .label { display: block; margin-bottom: 14px; }
.price-card__amount {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin-bottom: 14px;
}
.price-card__amount strong,
.price-card__free {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 54px;
  line-height: 1;
  color: #fff;
}
.price-card__free { display: block; margin-bottom: 14px; }
.price-card__unit { font-size: 15px; color: var(--text-muted); }
.price-card p {
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 0;
}
.price-card--cta { background: var(--color-accent-900); }
.price-card--cta p { color: rgba(245, 245, 248, 0.85); margin-bottom: 18px; }
.price-card--cta .btn { font-size: 15px; padding: 12px 22px; }

.price-note {
  margin: 26px 0 0;
  font-size: 15px;
  color: var(--text-muted);
}

/* -------------------------------------------------------------- visiting */

.visiting__rows { display: grid; gap: 0; }
.visiting-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 20px;
  padding: 18px 0;
  border-top: 1px solid var(--hairline);
}
.visiting__rows .visiting-row:last-child { border-bottom: 1px solid var(--hairline); }
.visiting-row dt {
  font-family: var(--font-heading);
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent-300);
}
.visiting-row dd {
  margin: 0;
  line-height: 1.55;
  color: var(--text-body);
}

/* -------------------------------------------------------------- reviews */

.quote-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
  gap: 20px;
}
.quote-card { padding: 28px; }
.quote-card blockquote {
  margin: 0 0 18px;
  font-family: var(--font-heading);
  font-size: 24px;
  line-height: 1.3;
  color: var(--text-body);
}
.quote-card cite {
  display: block;
  font-style: normal;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent-300);
}

/* ----------------------------------------------------------- closing CTA */

.closing {
  position: relative;
  margin-top: 88px;
  overflow: hidden;
}
.closing__photo { position: absolute; inset: 0; }
/* The closing section's photo slot is still empty. Behind an 0.87 scrim the
   placeholder's label reads as a rendering glitch rather than a note, so keep
   the hatch and drop the text until a photo goes in. */
.closing__photo .photo-pending { color: transparent; }

.closing__scrim {
  position: absolute;
  inset: 0;
  background: rgba(15, 20, 24, 0.87);
  pointer-events: none;
}
.closing__content {
  position: relative;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 88px var(--gutter);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 48px;
  align-items: start;
}
.closing h2 { margin: 0 0 22px; }
.closing__lede {
  font-size: 18px;
  line-height: 1.6;
  max-width: 44ch;
  margin: 0 0 30px;
  color: var(--text-body);
}
.contact { display: grid; gap: 26px; }
.contact .label { display: block; margin-bottom: 7px; letter-spacing: 0.2em; }
.contact__value {
  font-family: var(--font-heading);
  font-size: 26px;
  line-height: 1.25;
  color: #fff;
}
a.contact__value:hover { color: var(--color-accent-300); }
.contact__note {
  margin-top: 8px;
  font-size: 16px;
  line-height: 1.5;
  color: rgba(245, 245, 248, 0.75);
  max-width: 34ch;
}
.contact__dir {
  display: inline-block;
  margin-top: 8px;
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

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

.site-footer { border-top: 1px solid var(--hairline); }
.site-footer__inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 34px var(--gutter);
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
  align-items: center;
  font-size: 14px;
  color: rgba(245, 245, 248, 0.6);
}
/* Registered team mark — unaltered, uncropped, full colour, no frame. */
.site-footer img {
  width: 72px;
  height: 72px;
  object-fit: contain;
}
.site-footer__wordmark {
  font-family: var(--font-heading);
  font-size: 17px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
}
.site-footer__links {
  margin-left: auto;
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  align-items: center;
}
.site-footer__links a { color: rgba(245, 245, 248, 0.6); }
.site-footer__links a:hover { color: #fff; }

/* ------------------------------------------------------------ narrow fit */

/* ---------------------------------------------------------------- phone */

/* The six nav links plus a button will not sit on one line with the brand
   below ~760px, and wrapping them left a ragged three-line block over the
   hero. Two deliberate rows instead: brand + CTA, then the links as a single
   line that scrolls sideways. */
@media (max-width: 760px) {
  /* The header joins the flow rather than floating over the photo. Overlaying
     a header that needs two rows costs more than it gains at this size, and
     it was sitting exactly where the faces are. */
  .site-header {
    position: static;
    background: var(--color-bg);
    border-bottom: 1px solid var(--hairline);
  }

  /* The hero photo is a wide group shot: cover-cropping 1.45:1 into a
     715px-tall portrait box showed about a fifth of the team. So the photo
     runs full width at its true aspect ratio — whole team visible — and the
     headline still sits over it, starting low enough that it lands on the
     mat rather than on anyone's face, then carries on down onto the dark
     ground as the photo fades out. */
  .hero { min-height: 0; display: block; }
  .hero__photo {
    position: absolute;
    inset: 0 0 auto 0;
    height: auto;
    aspect-ratio: 2048 / 1588;
  }
  .hero__img { object-position: center; }

  /* Keeps the faint steel layer across the whole photo — the same read as the
     desktop scrim — then deepens it so the bottom of the photo fades into the
     page ground and the overlaid text has something to sit on. Sized to the
     photo, not the hero. */
  .hero__scrim {
    display: block;
    inset: 0 0 auto 0;
    height: auto;
    aspect-ratio: 2048 / 1588;
    background: linear-gradient(
      180deg,
      rgba(15, 20, 24, 0.42) 0%,
      rgba(15, 20, 24, 0.3) 30%,
      rgba(15, 20, 24, 0.36) 48%,
      rgba(15, 20, 24, 0.7) 68%,
      rgba(15, 20, 24, 0.92) 89%,
      #0f1418 100%
    );
  }

  /* 0.72 x the photo height: the copy sits further over the photo while
     staying clear of the kneeling row's faces, which land around 68%. */
  .hero__content {
    padding: calc(100vw / 1.29 * 0.72) var(--gutter) 8px;
  }

  /* Kids section: the two desktop columns stack text-first, which buried the
     photos below every paragraph. Flatten both columns with display:contents
     so the children can be ordered individually — photos straight under the
     heading, then the copy, then class times and the sign-up. */
  #kids .cols {
    display: flex;
    flex-direction: column;
    /* .cols sets align-items:start for the desktop two-column layout. In a
       column flex container that is the CROSS axis, so items sized to their
       content width instead of the column — the carousel ballooned to its
       695px max-content inside a 335px column. */
    align-items: stretch;
    gap: 0 !important;
  }
  #kids .cols > div { display: contents; }
  #kids .cols > div > * { min-width: 0; max-width: 100%; }

  /* A square frame suits a phone and shows much more of these portrait
     shots than the desktop 4:3 crop. */
  #kids .carousel__slide { aspect-ratio: 1 / 1; min-height: 0; }
  #kids .carousel { order: 1; margin-bottom: 30px; }
  #kids .lede-display,
  #kids .body-lg,
  #kids .panel,
  #kids .numbered { order: 2; }
  #kids .class-cards { order: 3; margin-top: 30px; }
  #kids .cols .btn { order: 4; }

  .site-header__inner {
    padding: 18px var(--gutter);
    gap: 12px 14px;
    align-items: center;
  }
  /* flex-basis 0 so the brand shares the row rather than claiming its
     max-content width and pushing the CTA onto a line of its own. */
  .brand { flex: 1 1 0; min-width: 0; }
  /* Sized so "Carlson Gracie Jiu Jitsu" holds one line next to the CTA. */
  .brand__name { font-size: 19px; letter-spacing: 0.03em; }
  .brand__meta { font-size: 9px; letter-spacing: 0.12em; margin-top: 5px; }

  /* Break the strap line deliberately, one fact per line. Left to wrap on its
     own it stranded the separator at the head of the next line. */
  .brand__meta-line { display: block; line-height: 1.55; }
  .brand__meta-sep { display: none; }

  .header-cta { order: 2; font-size: 13px; padding: 9px 14px; }

  /* All six links fit a 375px screen at this size; narrower phones scroll,
     and the right-edge fade says so rather than just clipping a word. */
  .site-nav {
    order: 3;
    width: 100%;
    margin-left: 0;
    flex-wrap: nowrap;
    gap: 15px;
    overflow-x: auto;
    scrollbar-width: none;
    font-size: 12px;
    letter-spacing: 0.1em;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent 100%);
  }
  .site-nav::-webkit-scrollbar { display: none; }
  .site-nav a { white-space: nowrap; }
}

@media (max-width: 640px) {
  :root { --gutter: 20px; }

  /* 88px of air between sections is a desktop rhythm; on a phone it just
     makes the page long. */
  .shell { padding-top: 56px; }
  .shell--pad { padding: 56px var(--gutter); }
  .closing { margin-top: 56px; }
  .closing__content { padding: 56px var(--gutter); gap: 36px; }
  .instructor { margin-top: 56px !important; }
  .cols { gap: 32px !important; }

  /* The small accent label sits on the H2's baseline on desktop; on a phone
     it crowds the heading, so it goes underneath. */
  .section-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 28px;
  }
  .section-head .label,
  .section-head a { padding-bottom: 0; margin-left: 0; }

  /* Buttons of different intrinsic widths stacked left-aligned read as
     ragged; full width is both tidier and an easier tap target. */
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { width: 100%; }
  .hero__lede { font-size: 17px; }
  .hero__kicker { font-size: 12px; letter-spacing: 0.22em; margin-bottom: 16px; }
  .hero h1 { font-size: clamp(40px, 12vw, 54px); margin-bottom: 20px; }

  .carousel__nav button { width: 44px; height: 44px; }

  .split { padding: 28px 0; gap: 26px; }
  .split h3 { font-size: 34px; }

  .plate { padding: 24px; gap: 26px; }
  .plate__body { grid-column: auto; }

  .spec-row { grid-template-columns: 1fr; gap: 6px; padding: 12px 0; }
  .visiting-row { grid-template-columns: 1fr; gap: 6px; padding: 14px 0; }

  .price-card, .quote-card { padding: 24px; }
  .panel { padding: 22px; }

  .site-footer__inner { gap: 18px; padding: 28px var(--gutter); }
  .site-footer__links { margin-left: 0; gap: 16px; }
}