:root {
  --ink: #0b0b0b;
  --black: #111111;
  --coal: #191919;
  --paper: #f4f0e8;
  --paper-light: #fbf9f4;
  --white: #ffffff;
  --muted: #6c6861;
  --muted-dark: #aaa49b;
  --red: #e52b2f;
  --red-dark: #b51620;
  --yellow: #f3c52f;
  --blue: #1d5c9a;
  --line-dark: rgba(255, 255, 255, 0.14);
  --line-light: #dcd5ca;
  --shadow: 0 24px 80px rgba(0, 0, 0, 0.18);
  --max: 1240px;
  --nav-height: 88px;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

body.menu-open {
  overflow: hidden;
}

img,
video {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

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

.skip-link {
  position: fixed;
  left: 16px;
  top: -100px;
  z-index: 9999;
  padding: 12px 16px;
  background: var(--yellow);
  color: var(--black);
  font-weight: 900;
}

.skip-link:focus {
  top: 12px;
}

.wrap {
  width: min(calc(100% - 40px), var(--max));
  margin-inline: auto;
}

.narrow {
  width: min(calc(100% - 40px), 840px);
  margin-inline: auto;
}

.eyebrow {
  color: var(--red);
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  line-height: 1.2;
  text-transform: uppercase;
}

.on-dark .eyebrow,
.eyebrow.yellow {
  color: var(--yellow);
}

h1,
h2,
h3 {
  margin: 0;
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  font-weight: 850;
  letter-spacing: -0.04em;
  line-height: 1.08;
  text-wrap: pretty;
  text-transform: none;
}

.display,
.hero h1 {
  font-family: Impact, "Arial Narrow", "Helvetica Neue Condensed Bold", sans-serif;
  font-weight: 900;
  letter-spacing: -0.025em;
  line-height: 0.94;
  text-transform: uppercase;
}

h1 {
  font-size: clamp(3rem, 5.5vw, 5.5rem);
}

h2 {
  font-size: clamp(2.25rem, 4.2vw, 4rem);
}

h3 {
  font-size: clamp(1.4rem, 2.4vw, 2rem);
}

p,
li {
  color: #4e4a44;
  font-size: 1.0625rem;
  line-height: 1.68;
}

.on-dark p,
.on-dark li {
  color: #c8c4bd;
}

.lead {
  max-width: 720px;
  font-size: clamp(1.1rem, 2vw, 1.35rem);
}

.red {
  color: var(--red);
}

.muted {
  color: var(--muted);
}

.announcement {
  min-height: 34px;
  padding: 8px 20px;
  background: var(--red);
  color: var(--white);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-align: center;
  text-transform: uppercase;
}

/* The blur makes the header a containing block for fixed children, which breaks
   the mobile panel's viewport-relative inset. It is invisible behind an open
   full-screen panel anyway, so drop it while the menu is open. */
body.menu-open .site-header {
  backdrop-filter: none;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  border-bottom: 1px solid var(--line-dark);
  background: rgba(10, 10, 10, 0.96);
  color: var(--white);
  backdrop-filter: blur(14px);
}

.nav {
  min-height: var(--nav-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 12px;
}

.brand img {
  width: 56px;
  height: 60px;
  object-fit: contain;
  filter: drop-shadow(0 5px 12px rgba(0, 0, 0, 0.42));
}

.brand-copy {
  display: grid;
  gap: 3px;
}

.brand-copy strong {
  font-size: 0.88rem;
  letter-spacing: 0.075em;
  text-transform: uppercase;
}

.brand-copy span {
  color: #aaa;
  font-size: 0.61rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.nav-links,
.nav-actions {
  display: flex;
  align-items: center;
}

.nav-links {
  gap: 22px;
  margin-left: auto;
}

.nav-item {
  position: relative;
  display: flex;
  align-items: center;
}

.nav-item > a {
  padding-block: 12px;
  color: #d8d8d8;
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.075em;
  text-transform: uppercase;
}

.nav-item > a:hover,
.nav-item > a[aria-current="page"] {
  color: var(--yellow);
}

/* Caret marks the items that open a panel. */
.has-panel > a::after {
  display: inline-block;
  margin-left: 7px;
  border-top: 4px solid currentColor;
  border-right: 3.5px solid transparent;
  border-left: 3.5px solid transparent;
  vertical-align: 2px;
  opacity: 0.6;
  content: "";
}

/* Panels open on hover and on keyboard focus, so the parent stays a real link. */
.nav-panel {
  position: absolute;
  top: 100%;
  left: -18px;
  z-index: 20;
  min-width: 244px;
  padding: 10px 0;
  display: grid;
  border: 1px solid var(--line-dark);
  background: #101010;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
  visibility: hidden;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
}

.has-panel:hover .nav-panel,
.has-panel:focus-within .nav-panel {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

.has-panel.nav-panel-closed .nav-panel {
  visibility: hidden;
  opacity: 0;
}

.nav-panel a {
  padding: 11px 20px;
  color: #d8d8d8;
  font-size: 0.79rem;
  font-weight: 700;
  line-height: 1.3;
}

.nav-panel a:hover,
.nav-panel a:focus-visible {
  background: #1b1b1b;
  color: var(--yellow);
}

.nav-panel a[aria-current="page"] {
  box-shadow: inset 3px 0 0 var(--red);
  color: var(--yellow);
}

.nav-actions {
  gap: 8px;
}

.nav-toggle {
  display: none;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 0;
  background: transparent;
  color: white;
  cursor: pointer;
}

.nav-toggle span,
.nav-toggle::before,
.nav-toggle::after {
  display: block;
  width: 20px;
  height: 2px;
  margin: 5px auto;
  background: currentColor;
  content: "";
}

.mobile-panel {
  display: none;
}

.btn {
  min-height: 52px;
  padding: 0 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid transparent;
  border-radius: 0;
  cursor: pointer;
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.095em;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
  transition: transform 160ms ease, background 160ms ease, color 160ms ease;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn-red {
  background: var(--red);
  box-shadow: 0 12px 30px rgba(229, 43, 47, 0.24);
  color: white;
}

.btn-red:hover {
  background: var(--red-dark);
}

.btn-dark {
  background: var(--black);
  color: white;
}

.btn-light {
  background: var(--paper);
  color: var(--black);
}

.btn-outline {
  border-color: rgba(255, 255, 255, 0.42);
  background: rgba(255, 255, 255, 0.03);
  color: white;
}

.btn-outline-dark {
  border-color: #aaa299;
  background: transparent;
  color: var(--black);
}

.btn-small {
  min-height: 44px;
  padding-inline: 16px;
}

.text-link {
  border-bottom: 2px solid var(--red);
  font-weight: 850;
}

.hero {
  min-height: 760px;
  position: relative;
  overflow: hidden;
  background: #080808;
  color: white;
}

.hero::after {
  position: absolute;
  inset: auto 0 0;
  height: 140px;
  background: linear-gradient(transparent, #080808);
  content: "";
}

.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.76) contrast(1.04);
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 15% 10%, rgba(229, 43, 47, 0.2), transparent 36%),
    linear-gradient(90deg, rgba(5, 5, 5, 0.98) 0%, rgba(5, 5, 5, 0.91) 42%, rgba(5, 5, 5, 0.38) 68%, rgba(5, 5, 5, 0.82) 100%);
}

.hero-grid {
  min-height: 760px;
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 52% 48%;
  align-items: center;
}

.hero-copy {
  position: relative;
  z-index: 3;
  padding-block: 72px;
}

.hero-kicker {
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 14px;
  color: #f0eee8;
  font-size: 0.8rem;
  font-weight: 850;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.hero-kicker::before {
  width: 42px;
  height: 3px;
  background: var(--yellow);
  content: "";
}

.hero h1 {
  max-width: 650px;
  font-size: clamp(3.5rem, 8vw, 7rem);
  text-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
}

.hero-sub {
  max-width: 650px;
  margin: 28px 0 0;
  color: #d4d0ca;
  font-size: clamp(1.08rem, 2vw, 1.3rem);
  line-height: 1.55;
}

.hero-actions,
.button-row {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.coach-visual {
  position: relative;
  align-self: stretch;
  min-width: 0;
}

.coach-photo {
  position: absolute;
  right: -8px;
  bottom: -3px;
  width: min(648px, 112%);
  height: calc(100% - 54px);
  object-fit: cover;
  object-position: 52% 36%;
  clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%, 0 11%);
  filter: contrast(1.04) saturate(0.95);
  box-shadow: -18px 0 70px rgba(0, 0, 0, 0.45);
}

.hero-vertical-label {
  position: absolute;
  z-index: 2;
  top: 72px;
  right: 18px;
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.62rem;
  font-weight: 850;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.quickbar {
  border-block: 1px solid var(--line-dark);
  background: #0d0d0d;
  color: white;
}

.quickbar-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.quick-item {
  min-height: 132px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-left: 1px solid var(--line-dark);
}

.quick-item:last-child {
  border-right: 1px solid var(--line-dark);
}

.quick-item small,
.quick-item strong,
.quick-item span {
  display: block;
}

.quick-item small {
  margin-bottom: 10px;
  color: #a7a7a7;
  font-size: 0.65rem;
  font-weight: 850;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.quick-item strong {
  font-size: clamp(1.35rem, 2.4vw, 1.8rem);
  line-height: 1.05;
  text-transform: uppercase;
}

.quick-item span {
  margin-top: 7px;
  color: #c0c0c0;
  font-size: 0.75rem;
}

.quick-item.action {
  background: var(--red);
}

.quick-item.action small,
.quick-item.action span {
  color: white;
}

.breadcrumbs {
  padding-block: 18px;
  border-bottom: 1px solid var(--line-light);
  background: var(--paper-light);
  font-size: 0.75rem;
  font-weight: 750;
  letter-spacing: 0.04em;
}

.breadcrumbs ol {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
}

.breadcrumbs li {
  color: #77716a;
  font-size: inherit;
}

.breadcrumbs li:not(:last-child)::after {
  margin-left: 8px;
  color: #aaa39a;
  content: "/";
}

.page-hero {
  min-height: 490px;
  position: relative;
  display: flex;
  align-items: end;
  overflow: hidden;
  background: #090909;
  color: white;
}

.page-hero img {
  position: absolute;
  inset: 0 0 0 auto;
  width: min(58vw, 780px);
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
  filter: saturate(0.8);
}

.page-hero::after {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, #090909 0, rgba(9, 9, 9, 0.98) 36%, rgba(9, 9, 9, 0.73) 62%, rgba(9, 9, 9, 0.24)),
    linear-gradient(0deg, rgba(0, 0, 0, 0.5), transparent 55%);
  content: "";
}

.page-hero .wrap {
  position: relative;
  z-index: 2;
  padding-block: 88px 72px;
}

.page-hero h1 {
  max-width: 880px;
  margin-top: 16px;
  font-size: clamp(2.8rem, 4.6vw, 4.3rem);
}

.page-hero p {
  max-width: 700px;
  margin-top: 24px;
  color: #d6d2cc;
  font-size: 1.18rem;
}

.page-hero-band {
  min-height: 0;
  align-items: center;
  border-bottom: 1px solid var(--line-dark);
}

.page-hero-band::after {
  display: none;
}

.page-hero-band .wrap {
  padding-block: 60px 52px;
}

.page-hero-band h1 {
  max-width: 900px;
  font-size: clamp(2.3rem, 3.6vw, 3.2rem);
}

.page-hero-band p {
  margin-top: 14px;
  font-size: 1.1rem;
}

.first-class-photo-hero {
  min-height: 500px;
  padding-left: max(20px, calc((100vw - var(--max)) / 2));
  display: grid;
  grid-template-columns: minmax(420px, 1.02fr) minmax(0, 0.98fr);
  align-items: stretch;
}

.first-class-photo-hero::after {
  display: none;
}

.first-class-photo-hero img {
  position: relative;
  inset: auto;
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  height: 100%;
  object-position: center 48%;
  filter: none;
}

.first-class-photo-hero .wrap {
  grid-column: 1;
  grid-row: 1;
  width: auto;
  max-width: 690px;
  margin: 0;
  padding: 72px 56px 72px 0;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  justify-content: center;
}

.first-class-photo-hero p {
  max-width: 590px;
  font-size: 1.08rem;
}

.section {
  padding-block: clamp(72px, 9vw, 112px);
}

.section.compact {
  padding-block: 64px;
}

.section-dark {
  background: #111;
  color: white;
}

.section-coal {
  background: #191919;
  color: white;
}

.section-light {
  background: var(--paper-light);
}

.section-red {
  background: var(--red);
  color: white;
}

.section-red p,
.section-red li {
  color: #ffe7e7;
}

.fighter-path-section {
  padding-block: 0;
}

.fighter-path {
  min-height: 440px;
  display: grid;
  grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1.28fr);
  align-items: stretch;
}

.fighter-path > img {
  width: 100%;
  height: 100%;
  min-height: 440px;
  object-fit: cover;
  object-position: center 38%;
}

.fighter-path > div {
  padding: clamp(46px, 7vw, 88px);
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  justify-content: center;
}

.fighter-path h2 {
  max-width: 760px;
  margin-top: 14px;
  font-size: clamp(2.35rem, 4.2vw, 4rem);
}

.fighter-path p {
  max-width: 720px;
  margin-top: 20px;
  font-size: 1.03rem;
}

.fighter-path .text-link {
  border-color: white;
  color: white;
}

.section-head {
  margin-bottom: 48px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 390px);
  align-items: end;
  gap: 64px;
}

.section-head h2 {
  margin-top: 14px;
}

.content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
  gap: 64px;
  align-items: start;
}

.prose h2,
.prose h3 {
  margin-top: 48px;
}

.prose h2:first-child,
.prose h3:first-child {
  margin-top: 0;
}

.prose h2 {
  font-size: clamp(2.2rem, 4vw, 3.6rem);
}

.prose h3 {
  font-size: clamp(1.45rem, 2.5vw, 2rem);
}

.prose p {
  margin: 18px 0 0;
}

.prose ul,
.prose ol {
  margin: 18px 0 0;
  padding-left: 22px;
}

.prose li + li {
  margin-top: 8px;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.card-grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.card-grid.four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.card {
  min-height: 100%;
  padding: 30px;
  border: 1px solid var(--line-light);
  background: white;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.04);
}

.on-dark .card,
.card.dark {
  border-color: var(--line-dark);
  background: #191919;
  color: white;
}

.card .number {
  display: block;
  margin-bottom: 28px;
  color: #d8d1c6;
  font-family: Impact, "Arial Narrow", sans-serif;
  font-size: 3.3rem;
  line-height: 1;
}

.on-dark .card .number {
  color: #383838;
}

.card h3 {
  font-size: 1.7rem;
}

.card p {
  margin: 14px 0 0;
  font-size: 0.96rem;
}

.card .text-link {
  display: inline-block;
  margin-top: 20px;
}

/* Choice cards: photo on top at a near-native 4:5 portrait crop, copy in its
   own block underneath. Text never sits on the image. */
.image-card {
  display: flex;
  overflow: hidden;
  flex-direction: column;
  background: #111;
  color: white;
}

.image-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 38%;
  transition: transform 0.5s ease;
}

.image-card-content {
  padding: 22px 24px 26px;
}

.image-card-content h3 {
  font-size: 1.55rem;
  line-height: 1.2;
  text-wrap: balance;
}

.image-card-content p {
  margin-top: 10px;
  color: #cfcbc5;
  font-size: 0.95rem;
}

.image-card:hover img,
.image-card:focus-visible img {
  transform: scale(1.04);
}

.image-card:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

.media-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
  background: #111;
  box-shadow: var(--shadow);
}

.media-split.reverse .media-split-image {
  order: 2;
}

.media-split-image {
  min-height: 560px;
}

.media-split-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.beginner-welcome-photo img {
  object-position: center 72%;
}

.media-split-copy {
  padding: clamp(40px, 6vw, 72px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: white;
}

.media-split-copy h2 {
  margin-top: 16px;
}

.media-split-copy p {
  margin-top: 22px;
  color: #c8c5bf;
}

/* Gym gallery: every photo keeps its own aspect ratio so nothing is cropped.
   Column widths are tuned so the tall portrait and the stacked column finish
   at almost the same height at any desktop width. */
.facility-gallery {
  display: grid;
  grid-template-columns: minmax(0, 1.03fr) minmax(0, 0.97fr);
  align-items: start;
  gap: 18px;
}

.facility-stack {
  display: grid;
  gap: 18px;
}

.facility-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.facility-tile {
  position: relative;
  display: block;
  margin: 0;
  overflow: hidden;
  background: #111;
  color: white;
}

.facility-tile img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.5s ease;
}

.facility-tile figcaption,
.facility-caption {
  position: absolute;
  inset: auto 0 0;
  display: block;
  padding: 64px 24px 22px;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.72) 42%, transparent);
  color: white;
  pointer-events: none;
}

.facility-tile figcaption > span,
.facility-caption > span {
  display: block;
  color: var(--yellow);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.facility-tile strong {
  display: block;
  margin-top: 7px;
  color: white;
  font-size: 1.15rem;
  line-height: 1.3;
  text-wrap: balance;
}

.facility-pair strong {
  font-size: 1rem;
}

.facility-link::after {
  position: absolute;
  inset: 0;
  border: 2px solid transparent;
  transition: border-color 0.25s ease;
  content: "";
}

.facility-link:hover img,
.facility-link:focus-visible img {
  transform: scale(1.04);
}

.facility-link:hover::after,
.facility-link:focus-visible::after {
  border-color: var(--red);
}

.kids-proof {
  display: grid;
  gap: 16px;
}

.kids-proof figure {
  margin: 0;
  overflow: hidden;
  background: #111;
}

.kids-proof img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
}

.kids-proof figcaption {
  padding: 16px 20px 18px;
  color: white;
  font-size: 0.88rem;
  font-weight: 800;
}

.photo-story-grid {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: 18px;
}

.photo-story {
  position: relative;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  background: #191919;
}

.photo-story img {
  width: 100%;
  height: min(44vw, 540px);
  object-fit: cover;
  object-position: center 28%;
}

.photo-story figcaption {
  padding: 22px 24px 24px;
  border: 1px solid var(--line-dark);
  border-top: 0;
}

.photo-story strong,
.photo-story span {
  display: block;
}

.photo-story strong {
  color: white;
  font-size: 1.25rem;
  text-transform: uppercase;
}

.photo-story span {
  margin-top: 6px;
  color: #aaa;
  font-size: 0.9rem;
  line-height: 1.55;
}

.section-head-secondary {
  margin-top: 64px;
}

.coaches-hero {
  min-height: 500px;
  padding-left: max(20px, calc((100vw - var(--max)) / 2));
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(460px, 0.92fr);
  align-items: stretch;
}

.coaches-hero::after {
  display: none;
}

.coaches-hero img {
  position: relative;
  inset: auto;
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  height: 100%;
  object-position: center 28%;
  filter: none;
}

.coaches-hero .wrap {
  grid-column: 1;
  grid-row: 1;
  width: auto;
  max-width: 680px;
  margin: 0;
  padding: 72px 64px 72px 0;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  justify-content: center;
}

.coaches-hero h1 {
  max-width: 620px;
  font-size: clamp(2.8rem, 4vw, 3.75rem);
}

.coaches-hero p {
  max-width: 580px;
  font-size: 1.08rem;
}

.coaches-section-head h2 {
  max-width: 680px;
  font-size: clamp(2.3rem, 3.8vw, 3.5rem);
}

.coaches-section-head {
  grid-template-columns: 1fr;
}

.coach-profile-copy {
  padding: clamp(32px, 4.5vw, 56px);
}

.coach-profile-copy h3 {
  font-size: clamp(2rem, 3vw, 2.8rem);
}

.coach-role {
  margin: 8px 0 0;
  color: var(--red);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.coach-bio {
  margin: 20px 0 0;
  max-width: 62ch;
  color: #4f493f;
  font-size: 1rem;
  line-height: 1.65;
}

.coach-stats {
  margin: 24px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.coach-stat {
  flex: 1 1 150px;
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid var(--line-light);
  border-left: 3px solid var(--yellow);
  background: var(--paper-light);
}

.coach-stat b {
  display: block;
  color: var(--ink);
  font-size: clamp(1.35rem, 1.9vw, 1.8rem);
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

.coach-stat span {
  display: block;
  margin-top: 6px;
  color: #6d665c;
  font-size: 0.64rem;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.coach-facts {
  margin: 26px 0 0;
  display: grid;
  border-top: 1px solid var(--line-light);
}

.coach-facts div {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 178px) minmax(0, 1fr);
  gap: 6px 24px;
  align-items: baseline;
  padding: 13px 0;
  border-bottom: 1px solid var(--line-light);
}

.coach-facts dt,
.coach-facts dd {
  margin: 0;
}

.coach-facts dt {
  color: #6d665c;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  line-height: 1.5;
  text-transform: uppercase;
}

.coach-facts dd {
  color: var(--ink);
  font-size: 0.97rem;
  font-weight: 600;
  line-height: 1.55;
}

.coach-profile-list {
  display: grid;
  gap: 32px;
}

.coach-profile {
  display: grid;
  grid-template-columns: minmax(300px, 0.72fr) minmax(0, 1.28fr);
  overflow: hidden;
  border: 1px solid var(--line-light);
  background: white;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.05);
}

.coach-profile-copy-only {
  grid-template-columns: 1fr;
}

.coach-profile-brief .coach-profile-copy {
  align-self: center;
}

.coach-profile-visual {
  min-height: 520px;
  padding: 32px;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  justify-content: flex-end;
  border-right: 1px solid var(--line-light);
  background:
    linear-gradient(145deg, rgba(229, 43, 47, 0.08), transparent 52%),
    repeating-linear-gradient(-45deg, #ece7de 0, #ece7de 12px, #f4f0e8 12px, #f4f0e8 24px);
}

.coach-profile-photo {
  padding: 0;
  background: #dd7d43;
}

.coach-profile-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 26%;
}


.coach-choice-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(360px, 0.9fr);
  align-items: center;
  gap: 72px;
}

.coach-choice h2 {
  max-width: 680px;
  margin-top: 12px;
  font-size: clamp(2.3rem, 3.8vw, 3.5rem);
}

.coach-choice p {
  margin: 0;
}

.coach-choice .btn {
  margin-top: 24px;
}

.fact-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line-dark);
  border-left: 1px solid var(--line-dark);
}

.fact {
  min-height: 130px;
  padding: 24px;
  border-right: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
  background: #171717;
}

.fact strong,
.fact span {
  display: block;
}

.fact strong {
  color: white;
  font-size: 1.2rem;
  text-transform: uppercase;
}

.fact span {
  margin-top: 6px;
  color: #949494;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.notice {
  padding: 22px 24px;
  border-left: 4px solid var(--yellow);
  background: rgba(243, 197, 47, 0.09);
}

.notice p {
  margin: 0;
  color: inherit;
  font-size: 0.95rem;
}

.price-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

.price-panel {
  padding: 34px;
  border: 1px solid var(--line-dark);
  background: #181818;
}

.price-panel h2 {
  font-size: 2.8rem;
}

.price-row {
  padding-block: 18px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 20px;
  border-bottom: 1px solid var(--line-dark);
}

.price-row small,
.price-row strong {
  display: block;
}

.price-row small {
  color: #aaa;
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.price-row strong {
  margin-top: 5px;
  color: white;
  font-size: 1.08rem;
  text-transform: uppercase;
}

.price-row b {
  color: var(--yellow);
  font-size: 1.55rem;
}

.schedule-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.schedule-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.55fr);
  gap: 22px;
  align-items: stretch;
}

.weekly-schedule {
  overflow: hidden;
  border: 1px solid var(--line-dark);
  background: #151515;
}

.weekly-schedule table {
  height: 100%;
  background: transparent;
}

.weekly-schedule caption {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.weekly-schedule th,
.weekly-schedule td {
  padding: 15px 20px;
  border-color: var(--line-dark);
}

.weekly-schedule thead th {
  background: #202020;
  color: #aaa49b;
  font-size: 0.68rem;
}

.weekly-schedule tbody th {
  width: 24%;
  background: #202020;
  color: white;
  font-size: 0.9rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.weekly-schedule tbody td {
  color: white;
}

.weekly-schedule td strong,
.weekly-schedule td span {
  display: block;
}

.weekly-schedule td strong {
  color: white;
  font-size: 1rem;
}

.weekly-schedule td span {
  margin-top: 3px;
  color: #888;
  font-size: 0.72rem;
}

.weekly-schedule .rest-day {
  background: rgba(229, 43, 47, 0.07);
}

.weekly-schedule .rest-day strong {
  color: var(--yellow);
}

.schedule-summary {
  padding: 32px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line-dark);
  background: #191919;
}

.schedule-summary h3 {
  margin-top: 14px;
  font-size: clamp(2rem, 3.5vw, 3rem);
}

.schedule-summary > p {
  margin: 18px 0 10px;
  font-size: 0.98rem;
}

.schedule-summary .button-row {
  margin-top: auto;
  padding-top: 26px;
  align-items: flex-start;
  flex-direction: column;
}

.on-dark-link {
  color: white;
}

.first-class-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
  border: 1px solid var(--line-light);
  background: white;
  box-shadow: 0 18px 55px rgba(0, 0, 0, 0.07);
}

.first-class-welcome {
  padding: clamp(36px, 5vw, 64px);
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  justify-content: center;
  background: #151515;
  color: white;
}

.first-class-welcome h3 {
  max-width: 600px;
  margin-top: 14px;
  font-size: clamp(2rem, 2.7vw, 2.7rem);
}

.first-class-welcome p {
  max-width: 620px;
  margin: 22px 0 28px;
  color: #c8c4bd;
}

.arrival-checklist {
  display: grid;
  align-content: center;
  padding: 18px clamp(26px, 4vw, 48px);
}

.arrival-checklist > div {
  padding-block: 28px;
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 16px;
  border-bottom: 1px solid var(--line-light);
}

.arrival-checklist > div:last-child {
  border-bottom: 0;
}

.arrival-checklist span {
  padding-top: 3px;
  color: var(--red);
  font-family: Impact, "Arial Narrow", sans-serif;
  font-size: 1.25rem;
}

.arrival-checklist p {
  margin: 0;
  font-size: 0.98rem;
}

.arrival-checklist strong {
  display: block;
  color: var(--ink);
  font-size: 1.05rem;
}

.experience-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(330px, 0.85fr);
  border: 1px solid var(--line-dark);
  background: #171717;
}

.experience-photo {
  min-height: 640px;
  position: relative;
  margin: 0;
  overflow: hidden;
}

.experience-photo::after {
  position: absolute;
  inset: 50% 0 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.9));
  content: "";
}

.experience-photo img {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  object-fit: cover;
  object-position: center bottom;
}

.experience-photo figcaption {
  position: absolute;
  z-index: 1;
  right: 30px;
  bottom: 26px;
  left: 30px;
  max-width: 560px;
  color: #e6e2db;
  font-size: 0.9rem;
  line-height: 1.55;
}

.experience-copy {
  display: grid;
  align-content: center;
  padding: clamp(30px, 5vw, 56px);
}

.experience-copy > div {
  padding-block: 26px;
  border-bottom: 1px solid var(--line-dark);
}

.experience-copy > div:last-child {
  border-bottom: 0;
}

.experience-copy strong {
  color: white;
  font-size: 1.3rem;
  text-transform: uppercase;
}

.experience-copy p {
  margin: 8px 0 0;
  font-size: 0.96rem;
}

.ao-nang-card {
  margin-top: 22px;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr);
  overflow: hidden;
  border: 1px solid var(--line-dark);
  background: #191919;
}

.ao-nang-card picture,
.ao-nang-card img {
  width: 100%;
  height: 100%;
  min-height: 320px;
}

.ao-nang-card img {
  object-fit: cover;
}

.ao-nang-card > div {
  padding: clamp(32px, 5vw, 52px);
}

.ao-nang-card h3 {
  margin-top: 14px;
  font-size: clamp(2rem, 3.5vw, 3.4rem);
}

.ao-nang-card p {
  margin: 18px 0;
  font-size: 0.96rem;
}

.time-card {
  padding: 28px;
  border: 1px solid var(--line-dark);
  background: #101010;
}

.time-card small,
.time-card strong,
.time-card span {
  display: block;
}

.time-card small {
  color: #aaa;
  font-size: 0.66rem;
  font-weight: 850;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.time-card strong {
  margin-top: 8px;
  color: white;
  font-size: clamp(2.3rem, 4vw, 3.3rem);
  letter-spacing: -0.06em;
}

.time-card span {
  margin-top: 6px;
  color: #ddd;
  font-size: 0.82rem;
}

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line-light);
}

table {
  width: 100%;
  border-collapse: collapse;
  background: white;
}

th,
td {
  padding: 16px 18px;
  border-bottom: 1px solid var(--line-light);
  text-align: left;
  vertical-align: top;
}

th {
  background: #eee8dd;
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

td {
  color: #4e4a44;
  font-size: 0.95rem;
  line-height: 1.5;
}

.faq-list {
  border-top: 1px solid var(--line-light);
}

.faq-list details {
  border-bottom: 1px solid var(--line-light);
}

.faq-list summary {
  padding: 24px 54px 24px 0;
  position: relative;
  cursor: pointer;
  font-size: 1.05rem;
  font-weight: 900;
  list-style: none;
  text-transform: uppercase;
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list summary::after {
  position: absolute;
  right: 0;
  top: 17px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--black);
  color: white;
  content: "+";
}

.faq-list details[open] summary::after {
  content: "−";
}

.faq-answer {
  max-width: 820px;
  padding: 0 60px 24px 0;
  color: #554f48;
  line-height: 1.7;
}

.quote-card {
  padding: 40px;
  background: var(--red);
  color: white;
}

.quote-card blockquote {
  margin: 20px 0;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 850;
  letter-spacing: -0.025em;
  line-height: 1.25;
}

.quote-card cite {
  color: #ffe7e7;
  font-size: 0.72rem;
  font-style: normal;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.video-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.video-card {
  background: #191919;
  color: white;
}

.video-card video {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.video-copy {
  padding: 24px;
}

.video-copy p {
  margin-top: 12px;
  color: #aaa;
  font-size: 0.9rem;
}

.planner {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
  gap: 26px;
  align-items: start;
}

.planner-panel,
.planner-result {
  padding: clamp(24px, 4vw, 40px);
  border: 1px solid var(--line-light);
  background: white;
}

.planner-result {
  position: sticky;
  top: 118px;
  background: #111;
  color: white;
}

.planner-result p {
  color: #c7c3bd;
}

.planner-result h2 {
  font-size: clamp(1.9rem, 3.2vw, 2.7rem);
}

.plan-facts {
  margin-top: 22px;
  display: grid;
  border-top: 1px solid var(--line-dark);
}

.plan-facts div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-dark);
}

.plan-facts small {
  color: #a7a29b;
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.plan-facts strong {
  font-size: 0.98rem;
  text-align: right;
}

.channel-line {
  border-color: #06c755;
}

.choice-grid {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.choice {
  position: relative;
}

.choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.choice label {
  min-height: 150px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 2px solid var(--line-light);
  cursor: pointer;
  transition: border 160ms ease, background 160ms ease;
}

.choice input:focus-visible + label {
  outline: 3px solid var(--yellow);
  outline-offset: 3px;
}

.choice input:checked + label {
  border-color: var(--red);
  background: #fff6f3;
}

.choice strong {
  font-size: 1rem;
  text-transform: uppercase;
}

.choice span {
  color: #69635c;
  font-size: 0.82rem;
  line-height: 1.45;
}

.planner-fields {
  margin-top: 28px;
}

.field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.field {
  display: grid;
  gap: 7px;
}

.field.full {
  grid-column: 1 / -1;
}

.field label,
.field-label {
  color: #37332f;
  font-size: 0.76rem;
  font-weight: 850;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  border: 1px solid #aaa39b;
  border-radius: 0;
  background: white;
  color: #111;
}

.field textarea {
  min-height: 110px;
  resize: vertical;
}

.field-help {
  color: #766f67;
  font-size: 0.78rem;
  line-height: 1.45;
}


.channel-list {
  margin-top: 24px;
  display: grid;
  gap: 10px;
}

.channel {
  width: 100%;
  min-height: 56px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: #202020;
  color: white;
  cursor: pointer;
  font-weight: 850;
  text-align: left;
}

.channel.recommended {
  border-color: #25d366;
}

.channel small {
  color: #aaa;
}

.channel-status {
  min-height: 24px;
  margin-top: 12px;
  color: var(--yellow);
  font-size: 0.82rem;
}


.contact-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 22px;
}

.contact-card,
.form-card {
  padding: clamp(28px, 4vw, 42px);
  border: 1px solid var(--line-light);
  background: white;
}

.contact-methods {
  margin-top: 28px;
  display: grid;
  gap: 14px;
}

.contact-method {
  padding-top: 14px;
  border-top: 1px solid var(--line-light);
}

.contact-method small,
.contact-method strong {
  display: block;
}

.contact-method small {
  color: #77716a;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.contact-method strong {
  margin-top: 5px;
}

.map-frame {
  width: 100%;
  min-height: 460px;
  border: 0;
}

.final-cta {
  padding-block: 80px;
  overflow: hidden;
  background: #101010;
  color: white;
}

.final-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.final-card {
  min-height: 300px;
  padding: clamp(32px, 5vw, 48px);
  border: 1px solid var(--line-dark);
  background: #191919;
}

.final-card.red-card {
  border-color: var(--red);
  background: var(--red);
}

.final-card h2 {
  margin-top: 14px;
  font-size: clamp(2.3rem, 4vw, 3.7rem);
}

.final-card p {
  margin-top: 18px;
  color: #bdbdbd;
  font-size: 0.95rem;
}

.final-card.red-card p {
  color: #ffe7e7;
}

.site-footer {
  padding-block: 64px 104px;
  border-top: 1px solid var(--line-dark);
  background: #101010;
  color: white;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.25fr repeat(4, minmax(0, 0.75fr));
  gap: 32px;
}

.footer-grid h2 {
  font-size: 1rem;
  font-family: inherit;
  letter-spacing: 0.09em;
}

.footer-grid ul {
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  gap: 9px;
  list-style: none;
}

.footer-grid li,
.footer-grid a,
.footer-grid p {
  color: #8f8f8f;
  font-size: 0.82rem;
  line-height: 1.55;
}

.footer-grid a:hover {
  color: white;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.footer-brand img {
  width: 68px;
  height: 68px;
}

.footer-brand strong,
.footer-brand span {
  display: block;
}

.footer-brand strong {
  text-transform: uppercase;
}

.footer-brand span {
  margin-top: 6px;
  color: #777;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.footer-bottom {
  margin-top: 42px;
  padding-top: 22px;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  border-top: 1px solid var(--line-dark);
  color: #777;
  font-size: 0.72rem;
}

.mobile-cta {
  display: none;
}

.tag-list {
  margin: 22px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
}

.tag-list li {
  padding: 8px 10px;
  border: 1px solid var(--line-light);
  color: #4c4741;
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.on-dark .tag-list li {
  border-color: var(--line-dark);
  color: #bbb;
}

.language-note {
  padding: 12px 20px;
  background: var(--yellow);
  color: #111;
  font-size: 0.78rem;
  font-weight: 800;
  text-align: center;
}

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

@media (min-width: 1101px) {
  .single-line-desktop,
  .nowrap-hero h1,
  .coaches-hero h1 {
    max-width: none;
    white-space: nowrap;
  }

  .section-head h2.single-line-desktop {
    font-size: clamp(2.2rem, 3.35vw, 3.35rem);
  }

  .section-head h2.headline-long {
    font-size: clamp(2.1rem, 2.85vw, 2.85rem);
  }

  .nowrap-hero h1 {
    font-size: clamp(2.8rem, 4.2vw, 4rem);
  }
}

@media (max-width: 1100px) {
  .nav-links,
  .nav-actions .btn-outline {
    display: none;
  }

  .nav-toggle {
    display: block;
  }

  .mobile-panel {
    position: fixed;
    inset: var(--panel-top, calc(34px + var(--nav-height))) 0 0;
    z-index: 999;
    padding: 28px 20px 40px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #0b0b0b;
  }

  .mobile-panel.open {
    display: block;
  }

  .mobile-panel nav {
    display: grid;
  }

  /* Answer the two questions people open the menu for, before any navigation. */
  .mobile-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 22px;
    gap: 1px;
    background: var(--line-dark);
    border: 1px solid var(--line-dark);
  }

  .mobile-facts div {
    padding: 14px 14px 16px;
    background: #131313;
  }

  .mobile-facts small {
    display: block;
    color: var(--yellow);
    font-size: 0.6rem;
    font-weight: 900;
    letter-spacing: 0.11em;
    text-transform: uppercase;
  }

  .mobile-facts strong {
    display: block;
    margin-top: 6px;
    color: white;
    font-size: 1.05rem;
    line-height: 1.3;
  }

  .mobile-link,
  .mobile-group > summary {
    padding: 16px 4px;
    border-bottom: 1px solid var(--line-dark);
    color: white;
    font-weight: 850;
    text-transform: uppercase;
  }

  .mobile-group > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    list-style: none;
  }

  .mobile-group > summary::-webkit-details-marker {
    display: none;
  }

  .mobile-group > summary::after {
    width: 9px;
    height: 9px;
    margin-right: 6px;
    border-right: 2px solid var(--yellow);
    border-bottom: 2px solid var(--yellow);
    transform: rotate(45deg) translate(-3px, -3px);
    transition: transform 0.2s ease;
    content: "";
  }

  .mobile-group[open] > summary::after {
    transform: rotate(225deg) translate(-2px, -2px);
  }

  .mobile-sublinks {
    display: grid;
    padding: 6px 0 12px;
    border-bottom: 1px solid var(--line-dark);
  }

  .mobile-sublinks a {
    padding: 12px 4px 12px 18px;
    color: #cdc9c3;
    font-size: 0.92rem;
    font-weight: 650;
  }

  .mobile-sublinks a[aria-current="page"],
  .mobile-link[aria-current="page"] {
    color: var(--yellow);
  }

  .mobile-sublinks a[aria-current="page"] {
    box-shadow: inset 3px 0 0 var(--red);
  }

  .mobile-panel .button-row {
    display: grid;
  }

  .quickbar-grid,
  .fact-strip,
  .card-grid.four {
    grid-template-columns: repeat(2, 1fr);
  }

  .card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer-grid {
    grid-template-columns: 1.2fr 1fr 1fr;
  }

  .footer-grid > :last-child {
    grid-column: auto;
  }
}

@media (max-width: 800px) {
  .wrap,
  .narrow {
    width: min(calc(100% - 32px), var(--max));
  }

  .brand-copy span,
  .nav-actions {
    display: none;
  }

  /* The atmosphere photo is a 768x384 landscape. Cover-fitting it into a tall
     single column upscaled it 2.5x while showing only 21% of the frame, and the
     overlay's 90deg gradient was drawn for the two-column desktop split. Drop
     both on mobile and let the coach photo carry the imagery. */
  .hero-atmosphere,
  .hero-overlay,
  .hero::after {
    display: none;
  }

  .hero,
  .hero-grid {
    min-height: 0;
  }

  .hero-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    align-items: stretch;
  }

  .hero-copy {
    padding-block: 52px 36px;
  }

  /* Full width for the kicker so it stops wrapping mid-phrase. */
  .hero-kicker {
    margin-bottom: 18px;
    display: block;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
  }

  .hero-kicker::before {
    margin-bottom: 14px;
  }

  .hero h1 {
    font-size: clamp(2.9rem, 12.5vw, 3.9rem);
  }

  .hero-sub {
    margin-top: 20px;
    font-size: 1.02rem;
  }

  .coach-visual {
    min-height: 0;
  }

  .coach-photo {
    position: static;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    transform: none;
    clip-path: none;
    object-position: 50% 28%;
    box-shadow: none;
  }

  .hero-vertical-label {
    display: none;
  }

  .coach-photo {
    width: min(430px, 100%);
    margin-inline: auto;
  }

  .quickbar-grid,
  .section-head,
  .content-grid,
  .price-layout,
  .schedule-layout,
  .media-split,
  .photo-story-grid,
  .fighter-path,
  .first-class-layout,
  .experience-grid,
  .ao-nang-card,
  .coach-profile,
  .coach-choice-grid,
  .final-grid,
  .contact-grid,
  .planner,
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .photo-story img {
    height: min(112vw, 520px);
  }

  .fighter-path > img {
    height: min(115vw, 520px);
    min-height: 0;
    object-position: center 32%;
  }

  .fighter-path > div {
    padding-inline: 0;
  }

  .coach-profile-visual {
    min-height: 220px;
    border-right: 0;
    border-bottom: 1px solid var(--line-light);
  }

  .coach-profile-photo {
    min-height: min(112vw, 520px);
  }

  .coach-choice-grid {
    gap: 28px;
  }

  .quick-item:nth-child(odd) {
    border-left: 0;
  }

  .quick-item {
    min-height: 112px;
    padding: 22px 18px;
  }

  .section-head {
    gap: 22px;
  }

  .section-head p {
    margin: 0;
  }

  .page-hero img {
    width: 100%;
    opacity: 0.78;
  }

  .page-hero::after {
    background:
      linear-gradient(90deg, rgba(9, 9, 9, 0.96), rgba(9, 9, 9, 0.5)),
      linear-gradient(0deg, rgba(0, 0, 0, 0.76), transparent 70%);
  }

  .first-class-photo-hero {
    min-height: 0;
    padding-left: 0;
    grid-template-columns: 1fr;
    grid-template-rows: 320px auto;
  }

  .first-class-photo-hero img {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    height: 320px;
    object-position: center 46%;
  }

  .first-class-photo-hero .wrap {
    grid-column: 1;
    grid-row: 2;
    width: min(calc(100% - 32px), var(--max));
    max-width: none;
    margin-inline: auto;
    padding: 48px 0 56px;
  }

  .coaches-hero {
    min-height: 0;
    padding-left: 0;
    grid-template-columns: 1fr;
    grid-template-rows: 320px auto;
  }

  .coaches-hero img {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    height: 320px;
    opacity: 1;
  }

  .coaches-hero .wrap {
    grid-column: 1;
    grid-row: 2;
    width: min(calc(100% - 32px), var(--max));
    max-width: none;
    margin-inline: auto;
    padding: 48px 0 56px;
  }

  .media-split-image {
    min-height: 420px;
  }

  .facility-gallery {
    grid-template-columns: 1fr;
  }

  .facility-tile figcaption,
  .facility-caption {
    padding: 56px 20px 18px;
  }

  .media-split.reverse .media-split-image {
    order: 0;
  }

  .card-grid,
  .card-grid.two,
  .video-grid {
    grid-template-columns: 1fr;
  }

  .card-grid.four,
  .fact-strip {
    grid-template-columns: repeat(2, 1fr);
  }

  .experience-photo {
    min-height: min(118vw, 620px);
  }

  .ao-nang-card picture,
  .ao-nang-card img {
    min-height: 280px;
  }

  .planner-result {
    position: static;
  }

  .footer-grid > :last-child {
    grid-column: auto;
  }

  .footer-bottom {
    padding-bottom: 70px;
    flex-direction: column;
  }

  .mobile-cta {
    position: fixed;
    inset: auto 0 0;
    z-index: 900;
    padding: 8px max(12px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    border-top: 1px solid var(--line-dark);
    background: rgba(10, 10, 10, 0.96);
    backdrop-filter: blur(12px);
  }

  .mobile-cta .btn {
    min-height: 48px;
    padding: 0 10px;
    font-size: 0.68rem;
  }
}

@media (max-width: 560px) {
  .announcement {
    font-size: 0.62rem;
  }

  .nav {
    min-height: 74px;
  }

  .brand img {
    width: 44px;
    height: 44px;
  }

  .brand-copy strong {
    font-size: 0.76rem;
  }

  .hero-copy {
    padding-block: 44px 32px;
  }

  /* Phones: let the coach photo run edge to edge. */
  .coach-visual {
    margin-inline: calc(50% - 50vw);
  }

  .coach-photo {
    width: 100%;
    margin-inline: 0;
  }

  .hero-actions,
  .button-row {
    align-items: stretch;
    flex-direction: column;
  }

  .hero-actions .btn,
  .button-row .btn {
    width: 100%;
  }

  .quickbar-grid,
  .card-grid.four,
  .fact-strip,
  .schedule-cards,
  .field-grid,
  .choice-grid {
    grid-template-columns: 1fr;
  }

  .quick-item,
  .quick-item:last-child {
    border-inline: 0;
    border-bottom: 1px solid var(--line-dark);
  }

  .page-hero {
    min-height: 430px;
  }

  .page-hero-band {
    min-height: 0;
  }

  .page-hero-band .wrap {
    padding-block: 44px 38px;
  }

  .page-hero-band h1 {
    font-size: clamp(2.1rem, 8.6vw, 2.9rem);
  }

  .first-class-photo-hero {
    grid-template-rows: 280px auto;
  }

  .first-class-photo-hero img {
    height: 280px;
  }

  .page-hero .wrap {
    padding-block: 70px 52px;
  }

  .page-hero h1 {
    font-size: clamp(2.5rem, 10.5vw, 3.5rem);
  }

  .coaches-hero h1 {
    font-size: clamp(2.5rem, 10.5vw, 3.25rem);
  }

  .nowrap-hero h1,
  .coaches-hero h1 {
    font-size: 2rem;
  }

  .single-line-desktop,
  .section-head h2.single-line-desktop,
  .media-split-copy h2.single-line-desktop {
    font-size: 1.7rem;
  }

  .first-class-welcome h3.single-line-desktop {
    font-size: 1.4rem;
    letter-spacing: -0.025em;
    white-space: nowrap;
  }

  .media-split-image {
    min-height: 330px;
  }

  .media-split-copy {
    padding: 32px 24px;
  }

  .card,
  .price-panel,
  .planner-panel,
  .planner-result,
  .contact-card,
  .form-card {
    padding: 24px;
  }

  .coach-profile-copy {
    padding: 28px 24px;
  }

  .coach-facts div {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 14px 0;
  }

  .coach-stat {
    flex-basis: 120px;
    padding: 12px 14px;
  }

  .facility-pair {
    grid-template-columns: 1fr;
  }

  .facility-pair strong {
    font-size: 1.05rem;
  }

  .weekly-schedule th,
  .weekly-schedule td {
    padding: 13px 10px;
  }

  .weekly-schedule tbody th {
    width: 28%;
    font-size: 0.75rem;
  }

  .weekly-schedule td strong {
    font-size: 0.82rem;
  }

  .weekly-schedule td span {
    font-size: 0.65rem;
  }

  .schedule-summary,
  .first-class-welcome,
  .arrival-checklist,
  .experience-copy,
  .ao-nang-card > div {
    padding: 26px;
  }

  .arrival-checklist > div {
    padding-block: 22px;
  }

  .footer-grid {
    gap: 28px;
  }
}

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

/* Cookie consent — only rendered when a GA4 measurement ID is configured. */
.consent-banner {
  position: fixed;
  inset: auto 0 0;
  z-index: 1000;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 24px;
  padding: 16px max(20px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  background: var(--coal);
  border-top: 1px solid var(--line-dark);
  color: #d2d0cc;
}

.consent-banner[hidden] {
  display: none;
}

.consent-banner p {
  margin: 0;
  max-width: 62ch;
  font-size: 0.85rem;
  line-height: 1.5;
}

.consent-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
}

.consent-actions .btn {
  min-height: 44px;
  padding: 0 20px;
}

@media (max-width: 800px) {
  /* Clear the sticky mobile CTA bar rather than covering its buttons. Its height
     is 1px border + 8px padding-top + 48px button, plus the same bottom padding
     it uses itself, so this stays exact on notched and flat screens alike. */
  .consent-banner {
    inset: auto 0 calc(57px + max(8px, env(safe-area-inset-bottom))) 0;
    justify-content: flex-start;
    padding-bottom: 16px;
  }

  .consent-actions {
    width: 100%;
  }

  .consent-actions .btn {
    flex: 1 1 auto;
  }
}

/* Matched photo + copy block: group and private training pages, homepage shop.
   Both source photos are ~0.76 portraits, so a 4/5 box crops only about 5%
   and the two pages crop identically. */
.photo-feature {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
  gap: clamp(28px, 4.5vw, 64px);
  align-items: center;
}

.photo-feature-media {
  margin: 0;
  min-width: 0;
}

.photo-feature-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  box-shadow: var(--shadow);
}

.photo-feature-copy {
  min-width: 0;
}

.photo-feature-copy h2 {
  margin: 10px 0 0;
}

.photo-feature-copy p {
  margin: 18px 0 0;
  max-width: 54ch;
}

.photo-feature-copy .button-row {
  margin-top: 28px;
}

@media (max-width: 900px) {
  .photo-feature {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  /* Keep the portrait from dominating the fold on tablets. */
  .photo-feature-media img {
    width: min(430px, 100%);
    margin-inline: auto;
  }
}

@media (max-width: 560px) {
  .photo-feature-media img {
    width: 100%;
  }
}