/* ============ Navbar ============ */

.navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid transparent;
  transition: border-color var(--duration-base) var(--ease-out);
}

/*
  The blur/tint lives on a pseudo-element rather than directly on .navbar.
  backdrop-filter on an element makes it the containing block for any
  position:fixed descendant (per spec) — and .nav-links is fixed on mobile.
  Putting it here on .navbar directly clipped the mobile menu to the
  navbar's own ~84px box instead of the full viewport.
*/
.navbar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(20, 18, 15, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.navbar.is-scrolled {
  border-bottom-color: var(--border-hairline);
}

.navbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 84px;
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  letter-spacing: 0.02em;
}

.brand__mark {
  width: 30px;
  height: 30px;
  color: var(--color-gold);
}

.brand__name {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.brand__name small {
  font-family: var(--font-body);
  font-size: 0.55rem;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 2px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.nav-links a {
  position: relative;
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
  padding-block: var(--space-2);
  transition: color var(--duration-fast) var(--ease-out);
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 1px;
  background: var(--color-gold);
  transition: right var(--duration-base) var(--ease-out);
}

.nav-links a:hover,
.nav-links a:focus-visible,
.nav-links a.is-active {
  color: var(--text-primary);
}

.nav-links a:hover::after,
.nav-links a:focus-visible::after,
.nav-links a.is-active::after {
  right: 0;
}

/* The "Book a Trial" button also lives inside .nav-links (it's the CTA in
   the open mobile menu), where the muted link colour above out-specifies
   .btn-primary's own — leaving the primary CTA at roughly 1.3:1 against
   its gold fill, well under the 4.5:1 minimum. These restore the button's
   intended colours, and suppress the underline sweep that's meant for
   plain nav links, not for a filled button. */
.nav-links a.btn-primary,
.nav-links a.btn-primary:hover,
.nav-links a.btn-primary:focus-visible {
  color: var(--color-ink);
}

.nav-links a.btn-primary::after {
  content: none;
}

.navbar__actions {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

/* This "Book a Trial" only belongs in the mobile dropdown (re-shown in the
   @media block below) — the desktop CTA lives in .navbar__actions instead.
   Without this, both rendered at once on desktop. */
.nav-links .btn-primary {
  display: none;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  /* 44px meets Apple/Google's touch-target guidance — the icon itself
     stays visually smaller (see .nav-toggle span) via centering, not by
     scaling the whole tap target up. */
  width: 44px;
  height: 44px;
  padding: 0;
  flex-shrink: 0;
  -webkit-appearance: none;
  appearance: none;
}

.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  flex-shrink: 0;
  background: var(--text-primary);
  transition: transform var(--duration-fast) var(--ease-out), opacity var(--duration-fast) var(--ease-out);
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

@media (max-width: 900px) {
  .nav-links {
    position: fixed;
    inset: 84px 0 0 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: var(--space-6) var(--content-pad);
    background: var(--color-ink);
    border-top: 1px solid var(--border-hairline);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transition: opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
  }

  .nav-links.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  .nav-links a {
    width: 100%;
    padding-block: var(--space-4);
    font-size: var(--fs-sm);
    border-bottom: 1px solid var(--border-hairline);
  }

  .navbar__actions .btn-primary {
    display: none;
  }

  .nav-links .btn-primary {
    display: inline-flex;
    margin-top: var(--space-5);
  }

  .nav-toggle {
    display: flex;
  }
}

/* ============ Hero ============ */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-10) var(--space-9);
  border-bottom: 1px solid var(--border-hairline);
}

.hero__grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(var(--border-hairline) 1px, transparent 1px),
    linear-gradient(90deg, var(--border-hairline) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 70% 60% at 70% 30%, black, transparent);
  opacity: 0.5;
  pointer-events: none;
}

.hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: var(--space-8);
}

.hero__eyebrow {
  margin-bottom: var(--space-5);
}

.hero__title {
  font-size: clamp(2.5rem, 5vw, var(--fs-4xl));
  max-width: 14ch;
}

.hero__title em {
  font-style: italic;
  color: var(--color-gold);
}

.hero__desc {
  margin-top: var(--space-5);
  max-width: 46ch;
  font-size: var(--fs-lg);
  color: var(--text-muted);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-7);
}

.hero__visual {
  position: relative;
  aspect-ratio: 4 / 5;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero__visual-frame {
  position: absolute;
  inset: var(--space-5);
  border: 1px solid var(--border-hairline);
}

.hero__knight {
  width: 62%;
  color: var(--color-gold);
  filter: drop-shadow(0 24px 48px rgba(0, 0, 0, 0.45));
}

.hero__coord {
  position: absolute;
  font-size: var(--fs-2xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-muted);
}

.hero__coord--tl {
  top: var(--space-3);
  left: var(--space-3);
}

.hero__coord--br {
  bottom: var(--space-3);
  right: var(--space-3);
}

@media (max-width: 900px) {
  .hero__inner {
    grid-template-columns: 1fr;
  }

  .hero__visual {
    aspect-ratio: 3 / 2;
    order: -1;
  }
}

/* ============ About / intro ============ */

.about-split {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: var(--space-8);
  align-items: start;
}

.about-split__lead {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
}

.about-split__body p + p {
  margin-top: var(--space-4);
}

.about-split__body {
  color: var(--text-muted);
}

/* Used both on the default dark surface (about.html's own intro) and inside
   .surface-inverse (home.html's About section) — --text-muted above is the
   dark-surface default; only override for the ivory surface-inverse context. */
.surface-inverse .about-split__body {
  color: var(--text-inverse-muted);
}

@media (max-width: 800px) {
  .about-split {
    grid-template-columns: 1fr;
  }
}

/* ============ Programs ============ */

.program-list {
  display: flex;
  flex-direction: column;
}

.program-row {
  display: grid;
  grid-template-columns: 90px 1fr auto;
  align-items: center;
  gap: var(--space-6);
  padding-block: var(--space-6);
  border-top: 1px solid var(--border-hairline);
  transition: padding-inline var(--duration-base) var(--ease-out),
    background-color var(--duration-base) var(--ease-out);
}

.program-list > :last-child {
  border-bottom: 1px solid var(--border-hairline);
}

.program-row:hover {
  padding-inline: var(--space-4);
  background: var(--surface-secondary);
}

.program-row__icon {
  width: 44px;
  height: 44px;
  color: var(--color-gold);
}

.program-row__age {
  display: block;
  font-size: var(--fs-2xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: var(--space-2);
}

.program-row__name {
  font-size: var(--fs-xl);
}

.program-row__summary {
  margin-top: var(--space-2);
  max-width: 56ch;
  color: var(--text-muted);
}

.program-row__highlights {
  margin-top: var(--space-3);
}

.program-row__highlights summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-2xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-gold);
  cursor: pointer;
  list-style: none;
  transition: color var(--duration-fast) var(--ease-out);
}

.program-row__highlights summary::-webkit-details-marker {
  display: none;
}

.program-row__highlights summary:hover {
  color: var(--color-gold-bright);
}

.program-row__highlights summary::after {
  content: "+";
  font-family: var(--font-body);
}

.program-row__highlights[open] summary::after {
  content: "\2212"; /* minus sign — visually matched to the "+" */
}

.program-row__highlights-list {
  margin-top: var(--space-3);
  padding-left: var(--space-5);
  max-width: 52ch;
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

.program-row__highlights-list li {
  margin-bottom: var(--space-2);
}

.program-row__highlights-list li:last-child {
  margin-bottom: 0;
}

/* ---- Per-session pricing ----
   Two rates sitting side by side on one line each, so adding price costs a
   programme row about one line of height rather than a block. The format
   label carries the gold eyebrow treatment already used by
   .program-row__age, so this reads as part of the existing row rather than
   a panel bolted onto it.

   The unit is spelled out in full on every price ("per 60-min session")
   instead of once as a footnote: these are per-session rates, and a reader
   scanning a single figure has to be unable to mistake it for a monthly
   one. */
.session-price {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  margin-top: var(--space-4);
}

.session-price__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.session-price__format {
  font-size: var(--fs-2xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-gold);
}

.session-price__value {
  margin: 0;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.session-price__amount {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.session-price__unit {
  font-size: var(--fs-2xs);
  color: var(--text-muted);
}

/* Ivory sections (About page) need the darker gold to stay legible — the
   same swap the rest of the site makes on this surface. */
.surface-inverse .session-price__format {
  color: var(--color-gold-contrast);
}

.surface-inverse .session-price__amount {
  color: var(--text-inverse);
}

/* ---- Rate comparison table (/programs/) ----
   Hairline rules and generous row padding, matching .program-row above,
   so the table reads as the same material as the rest of the page rather
   than a component from somewhere else. */
.rate-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--space-7);
}

.rate-table th,
.rate-table td {
  text-align: left;
  padding: var(--space-4) var(--space-4) var(--space-4) 0;
  border-bottom: 1px solid var(--border-hairline);
  vertical-align: baseline;
}

.rate-table thead th {
  font-family: var(--font-body);
  font-size: var(--fs-2xs);
  font-weight: 400;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-gold);
  border-bottom-color: var(--color-gold-dim);
}

.rate-table tbody th {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
}

.rate-table__amount {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-md);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.rate-table__unit {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-2xs);
  color: var(--text-muted);
}

.rate-note {
  margin-top: var(--space-5);
  max-width: 62ch;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

/* Below 640px the column headers stop being useful — three columns leave
   each price roughly 90px, which is why so many responsive tables end up
   scrolling sideways. Instead each row becomes its own block and each cell
   carries its own label from data-label, so the format is stated next to
   the figure it belongs to and nothing overflows. */
@media (max-width: 640px) {
  .rate-table thead {
    /* Not display:none — that would drop the header from the a11y tree.
       Off-screen keeps the column names available to screen readers. */
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .rate-table,
  .rate-table tbody,
  .rate-table tr,
  .rate-table th,
  .rate-table td {
    display: block;
    width: auto;
  }

  .rate-table tr {
    padding-block: var(--space-5);
    border-bottom: 1px solid var(--border-hairline);
  }

  .rate-table tr:last-child {
    border-bottom: none;
  }

  .rate-table tbody th {
    padding: 0 0 var(--space-3);
    border-bottom: none;
    white-space: normal;
  }

  .rate-table td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-2) 0;
    border-bottom: none;
  }

  .rate-table td::before {
    content: attr(data-label);
    font-size: var(--fs-2xs);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-gold);
    flex-shrink: 0;
  }

  .rate-table__amount,
  .rate-table__unit {
    text-align: right;
  }
}

@media (max-width: 700px) {
  .program-row {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  .program-row__icon {
    display: none;
  }
}

/* ============ Why us ============ */

.why-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  border-top: 1px solid var(--border-hairline);
  border-left: 1px solid var(--border-hairline);
}

.why-item {
  padding: var(--space-6) var(--space-5);
  border-right: 1px solid var(--border-hairline);
  border-bottom: 1px solid var(--border-hairline);
}

.why-item__index {
  font-size: var(--fs-2xs);
  color: var(--color-gold);
  letter-spacing: var(--tracking-wide);
}

.why-item__title {
  margin-top: var(--space-5);
  font-size: var(--fs-md);
}

.why-item__desc {
  margin-top: var(--space-3);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

/* --color-gold/--text-muted are calibrated for the dark surface; on the
   ivory .surface-inverse background (see about.html) they drop to ~2.5:1
   and ~2:1 — both well under WCAG AA's 4.5:1 minimum for this text size. */
.surface-inverse .why-item__index {
  color: var(--color-gold-contrast);
}

.surface-inverse .why-item__desc {
  color: var(--text-inverse-muted);
}

/* Below 1000px/560px this used to keep stacking into a shorter grid, then
   a full single column — still true for other pages that reuse .why-grid
   (about.html). The homepage's #why-us instance overrides this further
   down into a carousel instead; see "Carousel (mobile/tablet)" below. */
@media (max-width: 1000px) {
  .why-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .why-grid {
    grid-template-columns: 1fr;
  }
}

/* Below 900px (the site's established mobile/tablet breakpoint — see the
   nav and hero), the HOMEPAGE's Why-Us grid specifically (scoped to
   #why-us, not every .why-grid — about.html's own copy keeps the plain
   stacking behaviour above, since it wasn't part of this request) becomes
   a swipeable, snap-scrolling carousel instead of a tall single column.
   Native overflow + scroll-snap does the actual scrolling; main.js only
   adds the pagination dots and mouse-drag support, neither of which CSS
   alone can do. See "Carousel (mobile/tablet)" below for the shared dot
   styles. */
@media (max-width: 900px) {
  #why-us .why-grid {
    display: flex;
    grid-template-columns: none;
    border: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-padding-inline: var(--content-pad);
    gap: var(--space-4);
    margin-inline: calc(-1 * var(--content-pad));
    padding-inline: var(--content-pad);
    padding-bottom: var(--space-2);
    scrollbar-width: none;
  }

  #why-us .why-grid::-webkit-scrollbar {
    display: none;
  }

  #why-us .why-item {
    flex: 0 0 78%;
    max-width: 360px;
    scroll-snap-align: start;
    border: 1px solid var(--border-hairline);
  }
}

/* ============ Coaches ============ */

/* The full-roster grid on /coaches/. The homepage's own #coaches instance
   overrides all of this into a carousel further down.

   3 columns rather than 4: with 5 coaches, 4 columns orphans the 5th onto a
   row of its own, and 5 columns only fits by squeezing every card down to
   ~200px. 3 columns gives a 3+2 split that reads as an intentional shorter
   final row, and keeps cards ~350px wide — the roster page is the one place
   a visitor wants to see every coach at once, so a grid stays right here. */
.coach-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

.coach-card {
  display: block;
  border: 1px solid var(--border-hairline);
  transition: border-color var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
}

.coach-card:hover {
  border-color: var(--color-gold-dim);
  transform: translateY(-4px);
}

.coach-card__photo {
  position: relative;
  aspect-ratio: 4 / 5;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-secondary);
  overflow: hidden;
}

.coach-card__monogram {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  color: var(--border-hairline);
  transition: color var(--duration-base) var(--ease-out), transform var(--duration-slow) var(--ease-out);
}

.coach-card:hover .coach-card__monogram {
  color: var(--color-gold-dim);
  transform: scale(1.06);
}

.coach-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.coach-card:hover .coach-card__img {
  transform: scale(1.06);
}

.coach-card__credential {
  display: inline-block;
  margin-top: var(--space-3);
}

.coach-card__body {
  padding: var(--space-5);
}

.coach-card__title {
  font-size: var(--fs-2xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-gold);
}

.coach-card__name {
  margin-top: var(--space-2);
  font-size: var(--fs-lg);
}

.coach-card__summary {
  margin-top: var(--space-3);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.coach-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  font-size: var(--fs-2xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-primary);
}

.coach-card__link svg {
  width: 12px;
  height: 12px;
  transition: transform var(--duration-fast) var(--ease-out);
}

.coach-card:hover .coach-card__link svg {
  transform: translateX(3px);
}

/* Same reasoning as .why-grid above: other pages that reuse .coach-grid
   (coaches.html) keep the plain stacking grid. */
@media (max-width: 1000px) {
  .coach-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .coach-grid {
    grid-template-columns: 1fr;
  }
}

/* ---- Homepage Coaches carousel ----
   Unlike #why-us (which is a carousel only below 900px and a grid above),
   the homepage's #coaches track scrolls at EVERY width. With 5 coaches
   there is no column count that fits them in one clean row without either
   orphaning the last card or shrinking all of them past comfortable
   reading width, so the row scrolls instead of wrapping.

   Still native overflow + scroll-snap rather than a transform-based
   slider: the browser keeps doing the scrolling, the momentum, and the
   snapping, and the whole thing degrades to a plain scrollable row with
   JavaScript off. main.js adds only what CSS cannot — grouped pagination,
   prev/next, and drag-to-scroll for mice.

   Card counts per view are set by flex-basis with the gap subtracted, so
   they stay exact as coaches are added or removed; nothing here assumes
   there are five. */
#coaches .coach-grid {
  display: flex;
  grid-template-columns: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scroll-padding-inline: var(--content-pad);
  gap: var(--space-5);
  /* Bleed to the container's edge so a partially-scrolled card runs to the
     edge of the content column rather than stopping short inside it. */
  margin-inline: calc(-1 * var(--content-pad));
  padding-inline: var(--content-pad);
  padding-bottom: var(--space-2);
  scrollbar-width: none;
  cursor: grab;
}

#coaches .coach-grid::-webkit-scrollbar {
  display: none;
}

#coaches .coach-grid.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
}

/* 4 across on large desktop (~265px cards at the 1240px content max). */
#coaches .coach-card {
  flex: 0 0 calc((100% - 3 * var(--space-5)) / 4);
  scroll-snap-align: start;
}

/* 3 across on standard desktop/laptop (~350px cards). */
@media (max-width: 1199px) {
  #coaches .coach-card {
    flex-basis: calc((100% - 2 * var(--space-5)) / 3);
  }
}

/* 2 across on tablet. */
@media (max-width: 899px) {
  #coaches .coach-card {
    flex-basis: calc((100% - var(--space-5)) / 2);
  }
}

/* 1 across on phones, keeping the partial next card visible — the peek is
   what signals the row scrolls at all before anyone touches it. */
@media (max-width: 599px) {
  #coaches .coach-grid {
    gap: var(--space-4);
  }

  #coaches .coach-card {
    flex-basis: 78%;
    max-width: 340px;
  }
}

/* ============ Carousel controls ============
   Shared pagination-dot, prev/next and drag-affordance styles for the
   homepage's #why-us and #coaches carousels above.

   Two different visibility rules, because the two carousels differ:
   #why-us is a carousel only below 900px, so its bare .carousel-dots stay
   hidden above that; #coaches scrolls at every width, so its dots live
   inside .carousel-controls, which is always shown. main.js hides the whole
   control row via .carousel--inert whenever everything already fits and
   there is nothing to page through. */

.carousel-dots {
  display: none;
}

.carousel-dot {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

/* State is carried by shape and size as well as colour (a 6px dot grows
   into a 20px bar), so the active slide is still identifiable without
   relying on the gold alone. */
.carousel-dot::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--border-hairline);
  transition: width var(--duration-fast) var(--ease-out),
    border-radius var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out);
}

.carousel-dot:hover::before {
  background: var(--color-gold-dim);
}

.carousel-dot.is-active::before {
  width: 20px;
  border-radius: 3px;
  background: var(--color-gold);
}

.carousel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

/* Nothing to page through — main.js sets this when every card already fits. */
.carousel--inert .carousel-controls {
  display: none;
}

.carousel-controls .carousel-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  margin-top: 0;
}

/* Square hairline buttons, matching the card borders rather than the
   pill-shaped arrows a generic slider would ship with. */
.carousel-arrow {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
  background: none;
  border: 1px solid var(--border-hairline);
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
}

.carousel-arrow:hover {
  border-color: var(--color-gold-dim);
  color: var(--color-gold);
}

.carousel-arrow svg {
  width: 14px;
  height: 14px;
}

/* Reuses #icon-arrow rather than adding a mirrored twin to the sprite. */
.carousel-arrow--prev svg {
  transform: scaleX(-1);
}

/* Mandatory snap pulls the track back to the nearest card on every frame,
   which fights the continuous auto-scroll. Suspended while the carousel is
   driving itself; main.js restores it the moment the visitor takes over, so
   their own swipes still settle neatly on a card. Outside any media query:
   #coaches auto-scrolls at every width, and for #why-us (a plain grid above
   900px, with nothing to scroll) this is simply inert. */
#why-us .why-grid.is-autoscrolling,
#coaches .coach-grid.is-autoscrolling {
  scroll-snap-type: none;
}

@media (max-width: 900px) {
  #why-us .why-grid {
    cursor: grab;
  }

  #why-us .why-grid.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
  }

  .carousel-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-1);
    margin-top: var(--space-5);
  }
}

/* ============ Blog ============ */

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

.blog-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-hairline);
  transition: border-color var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
}

.blog-card:hover {
  border-color: var(--color-gold-dim);
  transform: translateY(-4px);
}

.blog-card__image {
  position: relative;
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-secondary);
  overflow: hidden;
}

.blog-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.blog-card:hover .blog-card__img {
  transform: scale(1.06);
}

.blog-card__icon {
  width: 40px;
  height: 40px;
  color: var(--border-hairline);
}

.blog-card__body {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.blog-card__meta {
  font-size: var(--fs-2xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-gold);
}

.blog-card__title {
  margin-top: var(--space-3);
  font-size: var(--fs-lg);
}

.blog-card__excerpt {
  margin-top: var(--space-3);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  flex-grow: 1;
}

.blog-card__link {
  margin-top: var(--space-5);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-2xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-primary);
  align-self: flex-start;
}

.blog-card__link svg {
  width: 12px;
  height: 12px;
  transition: transform var(--duration-fast) var(--ease-out);
}

.blog-card:hover .blog-card__link svg {
  transform: translateX(3px);
}

.blog-detail__hero {
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  border: 1px solid var(--border-hairline);
}

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

@media (max-width: 640px) {
  .blog-grid {
    grid-template-columns: 1fr;
  }

  .blog-detail__hero {
    aspect-ratio: 4 / 3;
  }
}

/* ============ Events ============ */

.event-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

.event-card {
  padding: var(--space-6);
  border: 1px solid var(--border-hairline);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.event-card__date {
  font-size: var(--fs-2xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-gold);
}

.event-card__name {
  margin-top: var(--space-4);
  font-size: var(--fs-lg);
}

.event-card__location {
  margin-top: var(--space-2);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.event-card__desc {
  margin-top: var(--space-4);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  flex-grow: 1;
}

.event-card .btn-text {
  margin-top: var(--space-5);
  align-self: flex-start;
}

@media (max-width: 900px) {
  .event-grid {
    grid-template-columns: 1fr;
  }
}

/* ============ Final CTA ============ */

.final-cta {
  text-align: center;
  padding-block: var(--space-9);
}

.final-cta__title {
  font-size: clamp(2rem, 4.5vw, var(--fs-3xl));
  max-width: 20ch;
  margin-inline: auto;
}

.final-cta__desc {
  margin: var(--space-4) auto 0;
  max-width: 46ch;
  color: var(--text-muted);
}

.final-cta__actions {
  display: flex;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-7);
}

/* ============ Footer ============ */

.footer {
  border-top: 1px solid var(--border-hairline);
  padding-block: var(--space-8) var(--space-6);
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr 0.8fr 1fr;
  gap: var(--space-6);
}

.footer__brand .brand {
  margin-bottom: var(--space-4);
}

.footer__tagline {
  max-width: 32ch;
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

.footer__heading {
  font-size: var(--fs-2xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: var(--space-4);
}

.footer__links li + li {
  margin-top: var(--space-3);
}

.footer__links a {
  display: inline-block;
  /* Text alone renders ~19px tall — padding brings the actual tap target
     to WCAG 2.5.8's 24px minimum without changing the visible spacing
     rhythm (the li+li margin below already accounts for this). */
  padding-block: 3px;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  transition: color var(--duration-fast) var(--ease-out);
}

.footer__links a:hover {
  color: var(--text-primary);
}

/* One row of the footer's Contact column: a gold icon, the channel name,
   and the value beneath it. Was .footer-location when the map link was the
   only thing using it; renamed once email, phone and WhatsApp adopted the
   same shape, since the old name no longer described any of them. */
.footer__links a.footer-contact {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--space-2);
}

.footer-contact__icon {
  width: 14px;
  height: 14px;
  margin-top: 3px;
  flex-shrink: 0;
  color: var(--color-gold);
}

.footer-contact__cue {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-2xs);
  letter-spacing: var(--tracking-wide);
  /* Deliberately not uppercased: an email address and a phone number are
     literal values a visitor may copy, unlike the map link's "View on
     Google Maps" prompt, so they're shown exactly as they're written. */
  color: var(--color-gold);
  transition: color var(--duration-fast) var(--ease-out);
}

.footer-contact--prompt .footer-contact__cue {
  text-transform: uppercase;
}

.footer-contact:hover .footer-contact__cue,
.footer-contact:focus-visible .footer-contact__cue {
  color: var(--text-primary);
}

.footer__bottom a {
  /* Matches .footer__links a — standalone link, so it needs the 24px
     minimum target height that inline prose links are exempt from. */
  display: inline-block;
  padding-block: 3px;
  transition: color var(--duration-fast) var(--ease-out);
}

.footer__bottom a:hover {
  color: var(--text-primary);
}

.footer__bottom {
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-size: var(--fs-2xs);
  color: var(--text-muted);
}

@media (max-width: 900px) {
  .footer__grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px) {
  .footer__grid {
    grid-template-columns: 1fr;
    gap: var(--space-7);
  }
}

/* ============ Page header (inner pages) ============ */

.page-header {
  padding-block: var(--space-9) var(--space-8);
  border-bottom: 1px solid var(--border-hairline);
}

.page-header__title {
  font-size: clamp(2.25rem, 4vw, var(--fs-3xl));
  max-width: 20ch;
}

.page-header__desc {
  margin-top: var(--space-4);
  max-width: 52ch;
  font-size: var(--fs-lg);
  color: var(--text-muted);
}

/* Base resets a { color: inherit } site-wide, so inline links in prose-style
   copy need to be made visibly distinct or they read as plain text. */
.page-header__desc a {
  color: var(--color-gold);
  border-bottom: 1px solid var(--border-hairline);
  transition: border-color var(--duration-fast) var(--ease-out);
}

.page-header__desc a:hover {
  border-bottom-color: var(--color-gold);
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-2xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-5);
}

.breadcrumb a:hover {
  color: var(--color-gold);
}

/* ============ Coach detail ============ */

.coach-detail {
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  gap: var(--space-8);
}

.coach-detail__photo {
  aspect-ratio: 4 / 5;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-secondary);
  border: 1px solid var(--border-hairline);
  overflow: hidden;
}

.coach-detail__monogram {
  font-family: var(--font-display);
  font-size: 5rem;
  color: var(--color-gold-dim);
}

.coach-detail__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---- Coach achievements ----
   A short list on the coach's own page, sitting between the bio and the
   focus tags. Deliberately quiet: the gold rule and eyebrow-cased heading
   are the same treatment .section-label already uses elsewhere, so this
   reads as another part of the profile rather than a badge shelf bolted on.

   Markers are drawn with a pseudo-element rather than list-style, so a
   wrapped second line indents under the text instead of under the bullet. */
.coach-detail__achievements {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-subtle, rgba(246, 242, 232, 0.12));
  max-width: 60ch;
}

.coach-detail__achievements-title {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent, #c9a227);
  margin-bottom: var(--space-4);
}

.coach-detail__achievements-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.coach-detail__achievements-list li {
  position: relative;
  padding-left: var(--space-5);
  margin-bottom: var(--space-3);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  line-height: 1.6;
}

.coach-detail__achievements-list li:last-child {
  margin-bottom: 0;
}

.coach-detail__achievements-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent, #c9a227);
}

.coach-detail__focus {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-5);
}

.coach-detail__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-5);
  margin-top: var(--space-7);
}

/* Deliberately quieter than .btn-primary beside it — this is a secondary
   contact channel, not a second call to action competing for attention. */
.coach-detail__whatsapp {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-muted);
  transition: color var(--duration-fast) var(--ease-out);
}

.coach-detail__whatsapp svg {
  width: 20px;
  height: 20px;
  color: var(--color-gold);
  flex-shrink: 0;
}

.coach-detail__whatsapp span {
  display: flex;
  flex-direction: column;
  font-size: var(--fs-2xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.coach-detail__whatsapp-number {
  margin-top: 2px;
  font-size: var(--fs-sm);
  letter-spacing: normal;
  text-transform: none;
  color: var(--text-primary);
}

.coach-detail__whatsapp:hover,
.coach-detail__whatsapp:focus-visible {
  color: var(--color-gold);
}

.tag {
  font-size: var(--fs-2xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  border: 1px solid var(--border-hairline);
  padding: var(--space-2) var(--space-3);
  color: var(--text-muted);
}

@media (max-width: 800px) {
  .coach-detail {
    grid-template-columns: 1fr;
  }
}

/* ============ FAQ ============ */

/* Native <details>/<summary> — accordion behaviour, keyboard support and
   screen-reader semantics all come free, with no JS to load or maintain. */

.faq-list {
  max-width: 70ch;
  border-top: 1px solid var(--border-hairline);
}

.faq-item {
  border-bottom: 1px solid var(--border-hairline);
}

.faq-item summary {
  display: flex;
  align-items: baseline;
  gap: var(--space-5);
  padding-block: var(--space-5);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  cursor: pointer;
  /* Both are needed: list-style is the standard way to drop the disclosure
     triangle, the -webkit- pseudo-element covers older WebKit. */
  list-style: none;
  transition: color var(--duration-fast) var(--ease-out);
}

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

.faq-item summary:hover {
  color: var(--color-gold);
}

.faq-item summary::after {
  content: "+";
  margin-left: auto;
  flex-shrink: 0;
  font-family: var(--font-body);
  color: var(--color-gold);
}

.faq-item[open] summary::after {
  content: "\2212"; /* minus sign — visually matched to the "+" */
}

.faq-item__answer {
  padding-bottom: var(--space-5);
  max-width: 62ch;
  color: var(--text-muted);
}

.faq-item__answer a {
  color: var(--color-gold);
  border-bottom: 1px solid var(--border-hairline);
  transition: border-color var(--duration-fast) var(--ease-out);
}

.faq-item__answer a:hover {
  border-bottom-color: var(--color-gold);
}

@media (max-width: 560px) {
  .faq-item summary {
    font-size: var(--fs-md);
  }
}

/* ============ Contact ============ */

.contact-layout {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--space-8);
}

.contact-info__item + .contact-info__item {
  margin-top: var(--space-6);
}

.contact-info__label {
  font-size: var(--fs-2xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-gold);
}

.contact-info__value {
  margin-top: var(--space-2);
  font-size: var(--fs-md);
}

.location-link {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.location-link__icon {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  flex-shrink: 0;
  color: var(--color-gold);
  transition: transform var(--duration-fast) var(--ease-out);
}

.location-link__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.location-link__name {
  font-size: var(--fs-md);
  transition: color var(--duration-fast) var(--ease-out);
}

.location-link__cue {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  width: fit-content;
  font-size: var(--fs-2xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-gold);
  border-bottom: 1px solid var(--border-hairline);
  padding-bottom: 1px;
  transition: border-color var(--duration-fast) var(--ease-out), gap var(--duration-fast) var(--ease-out);
}

.location-link__cue svg {
  width: 12px;
  height: 12px;
  transition: transform var(--duration-fast) var(--ease-out);
}

.location-link:hover .location-link__name,
.location-link:focus-visible .location-link__name {
  color: var(--color-gold);
}

.location-link:hover .location-link__icon,
.location-link:focus-visible .location-link__icon {
  transform: translateY(-2px);
}

.location-link:hover .location-link__cue,
.location-link:focus-visible .location-link__cue {
  border-color: var(--color-gold);
  gap: var(--space-2);
}

.location-link:hover .location-link__cue svg,
.location-link:focus-visible .location-link__cue svg {
  transform: translateX(2px);
}

.contact-expect {
  margin-top: var(--space-7);
}

.contact-expect__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.contact-expect__list li {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: var(--lh-normal);
}

.contact-expect__num {
  color: var(--color-gold);
  font-family: var(--font-display);
  margin-right: var(--space-2);
}

.contact-expect__more {
  margin-top: var(--space-5);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.contact-expect__more a {
  color: var(--color-gold);
  border-bottom: 1px solid var(--border-hairline);
  transition: border-color var(--duration-fast) var(--ease-out);
}

.contact-expect__more a:hover {
  border-bottom-color: var(--color-gold);
}

.form-row {
  margin-bottom: var(--space-5);
}

.form-row--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}

.form-label {
  display: block;
  font-size: var(--fs-2xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}

.required-marker {
  color: var(--color-gold);
}

.form-legend {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-bottom: var(--space-5);
}

.form-legend span {
  color: var(--color-gold);
}

/* Live rate readout under the programme/format pair. A quiet inset note
   rather than a panel — it is confirming a choice the visitor just made,
   not selling. */
.form-rate {
  margin-bottom: var(--space-5);
  padding: var(--space-3) var(--space-4);
  border-left: 2px solid var(--color-gold-dim);
  background: var(--surface-secondary);
  font-size: var(--fs-sm);
  color: var(--text-primary);
}

.form-rate[hidden] {
  display: none;
}

.form-input {
  width: 100%;
  background: transparent;
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  padding: 0.85rem 1rem;
  color: var(--text-primary);
  transition: border-color var(--duration-fast) var(--ease-out);
}

.form-input:focus {
  border-color: var(--color-gold);
  outline: none;
}

.form-input::placeholder {
  color: var(--text-muted);
}

.field-hint {
  margin-top: var(--space-2);
  font-size: var(--fs-2xs);
  color: var(--text-muted);
}

.form-errors {
  margin-top: var(--space-2);
  font-size: var(--fs-xs);
  color: var(--color-error);
  min-height: 0;
}

.form-errors:empty {
  display: none;
}

.form-input.has-error {
  border-color: var(--color-error);
}

select.form-input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b6ae9e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 16px;
  padding-right: 2.75rem;
}

select.form-input option {
  background: var(--color-ink-soft);
  color: var(--text-primary);
}

.form-success {
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-gold-dim);
  color: var(--color-gold-bright);
  font-size: var(--fs-sm);
  margin-bottom: var(--space-6);
}

.form-feedback {
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-gold-dim);
  color: var(--color-gold-bright);
  font-size: var(--fs-sm);
  margin-bottom: var(--space-6);
}

.form-feedback[hidden] {
  display: none;
}

.form-feedback--error {
  border-color: var(--color-error);
  color: var(--color-error);
}

.form-tabs {
  display: flex;
  gap: var(--space-6);
  border-bottom: 1px solid var(--border-hairline);
  margin-bottom: var(--space-6);
}

.form-tab {
  padding-bottom: var(--space-3);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}

.form-tab:hover {
  color: var(--text-primary);
}

.form-tab.is-active {
  color: var(--color-gold);
  border-bottom-color: var(--color-gold);
}

.form-panel[hidden] {
  display: none;
}

.form-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.btn[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

@media (max-width: 800px) {
  .contact-layout {
    grid-template-columns: 1fr;
  }

  .form-row--split {
    grid-template-columns: 1fr;
  }
}

/* ---- Coach reviews ----
   A list of approved reviews plus a collapsed submission form, sitting
   between the profile and the "More Coaches" strip.

   The form is inside <details> so the page still leads with the coach rather
   than with a form nobody asked for; a visitor who wants to write one opens
   it deliberately. Stars are rendered as text characters (aria-hidden, with
   the real value beside them for screen readers) rather than as images, so
   they inherit the accent colour and need no extra request. */
.review-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-5);
}

.review {
  padding: var(--space-5);
  border: 1px solid var(--border-subtle, rgba(246, 242, 232, 0.12));
  border-radius: var(--radius-md, 8px);
  background: var(--surface-raised, rgba(246, 242, 232, 0.03));
}

.review__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.review__author {
  font-weight: 500;
  color: var(--text-primary, #f6f2e8);
}

.review__stars {
  color: var(--accent, #c9a227);
  letter-spacing: 0.1em;
  font-size: var(--fs-sm);
}

.review__body {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  line-height: 1.7;
  /* Reviews are visitor-written and arrive as one blob of text; this keeps a
     pasted line break looking intentional instead of collapsing it. */
  white-space: pre-line;
}

.review__date {
  margin-top: var(--space-3);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  opacity: 0.75;
}

.review-empty {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  max-width: 60ch;
}

.review-form-wrap {
  margin-top: var(--space-6);
  max-width: 60ch;
}

.review-form-toggle {
  cursor: pointer;
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent, #c9a227);
}

.review-form {
  margin-top: var(--space-5);
}

.review-form__note {
  margin-bottom: var(--space-5);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}