/*
 * Run Fit Well V2 — section library
 * ---------------------------------------------------------------------------
 * One component set serving BOTH page systems. Where the two designs differ,
 * a modifier class handles it — there is no second copy of any component.
 *
 * All values reproduce design-reference/Corporate Wellness-Final-Design.html
 * and the location reference. Colours come from tokens.css only.
 */

/* ================================================================== *
 * 1. HERO
 * ================================================================== */
.rfw-hero {
  padding: 56px 0 64px;
  background:
    radial-gradient(circle at 15% 14%, var(--rfw-hero-glow-1), transparent 28%),
    radial-gradient(circle at 88% 12%, var(--rfw-hero-glow-2), transparent 29%),
    var(--rfw-paper);
  border-bottom: 1px solid var(--rfw-line-3);
}

.rfw-hero-grid {
  display: grid;
  grid-template-columns: 1.06fr .94fr;
  gap: 62px;
  align-items: center;
}

/*
 * line-height clears Manrope's ink floor. Cap-height (~.73em) + descender
 * (~.25em) needs ~.98em between baselines; the design's .94 made the line box
 * smaller than the glyphs, so descenders landed on the capitals below. Measured
 * overlap in live copy before this fix: 4-5px on the location hero at every
 * width, 3px on Personal Training. Ratio-based, so it scales with clamp().
 */
.rfw-hero-title {
  margin: 0;
  max-width: 760px;
  font-size: clamp(3rem, 5.8vw, 5.8rem);
  line-height: 1.02;
  letter-spacing: -.068em;
  overflow-wrap: break-word;
}

.rfw-hero-title span {
  color: var(--rfw-accent-deep);
}

.rfw-hero-lead {
  max-width: 680px;
  margin: 22px 0 28px;
  color: var(--rfw-text-hero);
  font-size: 1.12rem;
}

.rfw-hero-sub {
  max-width: 680px;
  margin: -12px 0 28px;
  color: var(--rfw-muted);
  font-size: 1rem;
}

.rfw-hero-actions {
  display: flex;
  gap: 11px;
  flex-wrap: wrap;
}

.rfw-micro-points {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 27px;
  color: var(--rfw-text-micro);
  font-size: .86rem;
}

.rfw-micro-points span {
  display: flex;
  align-items: center;
  gap: 7px;
}

.rfw-micro-points span::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rfw-accent-deep);
  box-shadow: 0 0 0 5px var(--rfw-dot-glow);
}

/* Service hero: main image + 2-image stack. */
.rfw-hero-media {
  display: grid;
  grid-template-columns: 1.22fr .78fr;
  gap: 12px;
  min-height: 470px;
}

.rfw-hero-main,
.rfw-hero-stack img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 24px;
}

.rfw-hero-main {
  min-height: 470px;
  box-shadow: var(--rfw-shadow);
}

.rfw-hero-stack {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 12px;
}

.rfw-hero-stack figure {
  margin: 0;
  min-height: 0;
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  background: var(--rfw-media-bg);
}

.rfw-hero-badge {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  padding: 12px 13px;
  color: var(--rfw-on-dark);
  border: 1px solid var(--rfw-line-badge);
  border-radius: 14px;
  background: var(--rfw-badge-bg);
  backdrop-filter: blur(10px);
  font-size: .8rem;
  font-weight: 700;
  line-height: 1.25;
}

/* Location hero: single image + note. */
.rfw-hero-visual {
  position: relative;
  min-height: 470px;
  border-radius: 24px;
  overflow: hidden;
  background: var(--rfw-media-bg);
  box-shadow: var(--rfw-shadow);
}

.rfw-hero-visual img {
  width: 100%;
  height: 100%;
  min-height: 470px;
  object-fit: cover;
}

.rfw-hero-note {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  padding: 14px 16px;
  border: 1px solid var(--rfw-line-badge);
  border-radius: 16px;
  background: var(--rfw-badge-bg);
  backdrop-filter: blur(10px);
  color: var(--rfw-on-dark);
}

.rfw-hero-note small {
  display: block;
  color: var(--rfw-accent-on-dark);
  font-size: .7rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  font-weight: 800;
}

.rfw-hero-note strong {
  display: block;
  margin-top: 4px;
  font-family: Manrope, sans-serif;
  font-size: 1rem;
  line-height: 1.25;
}

/* ================================================================== *
 * 2. ANCHOR NAV
 * ================================================================== */
.rfw-anchor-nav {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--rfw-glass);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--rfw-line-3);
}

.rfw-anchor-nav .rfw-wrap {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 12px 0;
  overflow: auto;
  scrollbar-width: none;
}

.rfw-anchor-nav .rfw-wrap::-webkit-scrollbar {
  display: none;
}

.rfw-sub-link {
  white-space: nowrap;
  padding: 8px 13px;
  border-radius: 999px;
  border: 1px solid var(--rfw-line);
  background: var(--rfw-white);
  color: var(--rfw-sub-link);
  font-size: .84rem;
  font-weight: 600;
}

.rfw-sub-link:first-child {
  background: var(--rfw-pill-bg);
  border-color: var(--rfw-pill-border);
  color: var(--rfw-pill-text);
}

/* ================================================================== *
 * 3. INTRO
 * ================================================================== */
.rfw-intro {
  padding: 86px 0;
}

.rfw-intro-grid {
  display: grid;
  grid-template-columns: .76fr 1.24fr;
  gap: 76px;
  align-items: start;
}

.rfw-intro-card {
  position: sticky;
  top: 88px;
  padding: 26px;
  border-radius: 22px;
  background: var(--rfw-card-dark);
  color: var(--rfw-on-dark);
}

.rfw-intro-card .rfw-eyebrow {
  color: var(--rfw-accent-on-dark);
}

.rfw-intro-card h2 {
  margin: 0 0 10px;
  font-size: 1.65rem;
  line-height: 1.08;
}

.rfw-intro-card p {
  margin: 0;
  color: var(--rfw-on-dark-soft);
  font-size: .92rem;
}

.rfw-intro-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 21px;
}

.rfw-intro-tags span {
  padding: 7px 10px;
  border: 1px solid var(--rfw-line-tag);
  border-radius: 999px;
  color: var(--rfw-tag-text);
  font-size: .78rem;
}

.rfw-intro-copy .rfw-intro-lead {
  /* Specificity must match `.rfw-intro-copy p` below, which would otherwise
     win on source order and shrink the lead back to body size. */
  margin: 0 0 24px;
  font-family: Manrope, sans-serif;
  font-size: clamp(1.55rem, 2.7vw, 2.5rem);
  line-height: 1.28;
  letter-spacing: -.035em;
}

.rfw-intro-copy p {
  color: var(--rfw-text-soft);
  font-size: 1.02rem;
}

/* ================================================================== *
 * 4. PROGRAMS
 * ================================================================== */
.rfw-programs {
  padding: 96px 0;
  border-top: 1px solid var(--rfw-line-4);
  border-bottom: 1px solid var(--rfw-line-4);
}

.rfw-programs-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 40px;
}

.rfw-programs-note {
  max-width: 340px;
  color: var(--rfw-text-note);
  font-size: .9rem;
  text-align: right;
}

.rfw-program-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 42px;
}

.rfw-program {
  position: relative;
  padding: 28px;
  border-radius: 24px;
  border: 1px solid var(--rfw-line-2);
  background: var(--rfw-surface);
  box-shadow: var(--rfw-shadow-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: .22s ease;
  scroll-margin-top: 120px;
}

.rfw-program--rich {
  min-height: 355px;
}

.rfw-program:hover {
  transform: translateY(-5px);
  box-shadow: var(--rfw-shadow-card-hover);
}

.rfw-program::after {
  content: "";
  position: absolute;
  width: 130px;
  height: 130px;
  right: -46px;
  top: -46px;
  border-radius: 50%;
  background: var(--rfw-accent);
  opacity: .13;
}

.rfw-program-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  position: relative;
  z-index: 2;
}

.rfw-program-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--rfw-accent-soft);
  color: var(--rfw-accent-text);
}

.rfw-program-icon svg {
  width: 24px;
  height: 24px;
}

.rfw-program-num {
  color: var(--rfw-num);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .12em;
}

.rfw-program h3 {
  margin: 27px 0 11px;
  font-size: 1.46rem;
  line-height: 1.08;
  letter-spacing: -.035em;
}

.rfw-program p {
  margin: 0;
  color: var(--rfw-muted);
  font-size: .93rem;
}

.rfw-program-best {
  margin-top: 20px;
  padding-top: 17px;
  border-top: 1px solid var(--rfw-line-5);
  color: var(--rfw-text-hero);
  font-size: .82rem;
}

.rfw-program-best strong {
  color: var(--rfw-text-strong);
}

.rfw-program-link {
  margin-top: auto;
  padding-top: 22px;
  color: var(--rfw-accent-text);
  font-weight: 800;
  font-size: .88rem;
}

.rfw-program-link::after {
  content: "  \2192";
}

.rfw-program-tag {
  margin-top: 16px;
  color: var(--rfw-accent-text);
  font-size: .82rem;
  font-weight: 700;
}

/* ================================================================== *
 * 5. FEATURED
 * ================================================================== */
.rfw-featured {
  padding: 82px 0;
}

.rfw-featured-shell {
  display: grid;
  grid-template-columns: 1.06fr .94fr;
  border: 1px solid var(--rfw-line-2);
  border-radius: 30px;
  overflow: hidden;
  box-shadow: var(--rfw-shadow);
}

.rfw-featured-image {
  min-height: 420px;
  background: var(--rfw-media-bg-2);
}

.rfw-featured-image img {
  width: 100%;
  height: 100%;
  min-height: 420px;
  object-fit: cover;
}

.rfw-featured-copy {
  padding: 46px;
  background: var(--rfw-grad-featured);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.rfw-featured-copy h2 {
  margin: 0;
  font-size: clamp(2rem, 3.8vw, 3.65rem);
  line-height: 1.03;
  letter-spacing: -.05em;
}

.rfw-featured-copy p {
  color: var(--rfw-muted);
}

.rfw-feature-points {
  display: grid;
  gap: 10px;
  margin: 18px 0 26px;
}

.rfw-feature-points span {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--rfw-text-tick);
  font-size: .91rem;
}

.rfw-feature-points span::before {
  content: "\2713";
  color: var(--rfw-accent-deep);
  font-weight: 900;
}

/* ================================================================== *
 * 6. DELIVERY
 * ================================================================== */
.rfw-delivery {
  padding: 92px 0;
}

.rfw-delivery .rfw-section-lead {
  color: var(--rfw-section-muted);
}

.rfw-delivery-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 38px;
}

.rfw-delivery-card {
  min-height: 230px;
  padding: 24px;
  border: 1px solid var(--rfw-section-line);
  border-radius: 20px;
  background: var(--rfw-fill-subtle);
}

.rfw-delivery-card b {
  display: block;
  margin-bottom: 34px;
  color: var(--rfw-accent);
  font-size: .76rem;
  letter-spacing: .12em;
}

.rfw-delivery-card h3 {
  margin: 0 0 9px;
  font-size: 1.35rem;
}

.rfw-delivery-card p {
  margin: 0;
  color: var(--rfw-section-muted);
  font-size: .88rem;
}

/* Location variant: image beside a numbered list. */
.rfw-delivery--split .rfw-delivery-grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 62px;
  align-items: center;
}

/*
 * The wrapper carries the radius, shadow and clipping; the image fills it and
 * crops. Both are required: `rfw_image()` renders through
 * wp_get_attachment_image(), which emits real width/height attributes
 * (1536x1024 here), and the global reset in base.css sets `max-width:100%`
 * WITHOUT `height:auto`. With only `width:100%` declared, the height attribute
 * was used verbatim — a 3:2 landscape photo rendered 530x1024, stretched ~2.9x
 * vertically. Giving the image a real height plus object-fit:cover makes that
 * impossible: it can only ever crop, never scale unevenly.
 *
 * Same treatment as .rfw-featured-image above, which is why that one has
 * always rendered correctly.
 */
.rfw-delivery--split .rfw-delivery-image {
  min-height: 430px;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: var(--rfw-shadow);
  background: var(--rfw-media-bg-2);
}

.rfw-delivery--split .rfw-delivery-image img {
  width: 100%;
  height: 100%;
  min-height: 430px;
  object-fit: cover;
  object-position: center;
  border-radius: 0;
  box-shadow: none;
}

.rfw-delivery--split .rfw-delivery-list {
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: 26px;
  border-top: 1px solid var(--rfw-line-step);
}

.rfw-delivery--split .rfw-delivery-card {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 14px;
  min-height: 0;
  padding: 18px 0;
  border: 0;
  border-bottom: 1px solid var(--rfw-line-step);
  border-radius: 0;
  background: none;
}

.rfw-delivery--split .rfw-delivery-card b {
  margin: 0;
  color: var(--rfw-accent-deep);
  font-family: Manrope, sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
}

.rfw-delivery--split .rfw-delivery-card h3 {
  font-size: 1.05rem;
  margin: 0 0 3px;
}

.rfw-delivery--split .rfw-delivery-card p {
  color: var(--rfw-muted);
  font-size: .9rem;
}

/* ================================================================== *
 * 7. PLACES
 * ================================================================== */
.rfw-places {
  padding: 92px 0;
}

.rfw-place-list {
  margin-top: 36px;
  border-top: 1px solid var(--rfw-section-line);
}

.rfw-place {
  display: grid;
  grid-template-columns: 150px 1fr auto;
  gap: 28px;
  align-items: center;
  padding: 24px 0;
  border-bottom: 1px solid var(--rfw-section-line);
}

.rfw-place small {
  color: var(--rfw-section-eyebrow);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .11em;
  font-weight: 800;
}

.rfw-place h3 {
  margin: 0 0 5px;
  font-size: 1.35rem;
}

.rfw-place p {
  margin: 0;
  color: var(--rfw-section-muted);
  font-size: .9rem;
}

.rfw-place-arrow {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid var(--rfw-line-arrow);
  font-size: 1.1rem;
  transition: .2s;
}

.rfw-section--dark .rfw-place-arrow {
  border-color: var(--rfw-line-badge);
}

a.rfw-place:hover .rfw-place-arrow {
  background: var(--rfw-accent);
  border-color: var(--rfw-accent);
  color: var(--rfw-btn-primary-text);
  transform: translateX(3px);
}

/* A non-linked row must not look clickable. */
div.rfw-place .rfw-place-arrow {
  opacity: .35;
}

/* ================================================================== *
 * 8. PROCESS
 * ================================================================== */
.rfw-process {
  padding: 92px 0;
}

.rfw-process-grid {
  display: grid;
  grid-template-columns: .88fr 1.12fr;
  gap: 76px;
}

.rfw-steps {
  border-top: 1px solid var(--rfw-line-step);
}

.rfw-step {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 14px;
  padding: 20px 0;
  border-bottom: 1px solid var(--rfw-line-step);
}

.rfw-step-num {
  color: var(--rfw-accent-deep);
  font-family: Manrope, sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
}

.rfw-step strong {
  display: block;
  margin-bottom: 3px;
  font-family: Manrope, sans-serif;
}

.rfw-step span {
  color: var(--rfw-muted);
  font-size: .9rem;
}

/* Location variant: four across, no copy column. */
.rfw-process--grid .rfw-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 42px;
  border-top: 1px solid var(--rfw-line-step);
  /* Closes the grid. Without the lower rule the columns hung off the top
     border with nothing terminating them. */
  border-bottom: 1px solid var(--rfw-line-step);
}

/*
 * Padding is symmetric so the divider rules sit in the middle of an even
 * gutter. Previously this was `24px 24px 24px 0` — a right pad with no left
 * pad — so every column after the first began flush against the preceding
 * rule: 24px of air on one side, zero on the other.
 */
.rfw-process--grid .rfw-step {
  display: block;
  padding: 28px 22px;
  border-bottom: 0;
  border-right: 1px solid var(--rfw-line-step);
}

/* Outer edges run flush with the heading and with the rules above and below,
   the way the theme's other lists align. Only the inner gutters are padded. */
.rfw-process--grid .rfw-step:first-child {
  padding-left: 0;
}

.rfw-process--grid .rfw-step:last-child {
  padding-right: 0;
  border-right: 0;
}

.rfw-process--grid .rfw-step-num {
  display: block;
  margin-bottom: 20px;
  font-size: 1.7rem;
}

.rfw-process--grid .rfw-step strong {
  margin-bottom: 6px;
}

/* ================================================================== *
 * 9. FAQ
 * ================================================================== */
.rfw-faq {
  padding: 92px 0;
}

.rfw-faq-grid {
  display: grid;
  grid-template-columns: .7fr 1.3fr;
  gap: 76px;
}

/* ================================================================== *
 * 10. CLOSING CTA
 * ================================================================== */
.rfw-cta {
  padding: 86px 0;
  background: var(--rfw-grad-cta);
}

.rfw-cta-shell {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 50px;
  align-items: center;
  padding: 42px;
  border: 1px solid var(--rfw-line-cta);
  border-radius: 30px;
  background: var(--rfw-surface);
  box-shadow: var(--rfw-shadow);
}

.rfw-cta-shell h2 {
  margin: 0;
  font-size: clamp(2rem, 4vw, 3.8rem);
  line-height: 1.05;
  letter-spacing: -.05em;
}

.rfw-cta-shell p {
  color: var(--rfw-muted);
  max-width: 650px;
}

.rfw-cta-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

/* Booking card — hidden until a calendar CTA is clicked. */
.rfw-calendar {
  margin-top: 26px;
  padding: 26px;
  border: 1px solid var(--rfw-line-cta);
  border-radius: 30px;
  background: var(--rfw-surface);
  box-shadow: var(--rfw-shadow);
}

.rfw-calendar iframe {
  width: 100%;
  border: 0;
  display: block;
}

/*
 * The same card, in a dialog, on pages without a closing CTA section
 * (template-parts/shell/calendar.php). Closed by default, so it adds nothing
 * to the page until a calendar CTA is clicked.
 */
.rfw-calendar-dialog {
  width: min(760px, calc(100% - 32px));
  max-height: calc(100% - 32px);
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}

.rfw-calendar-dialog::backdrop {
  background: var(--rfw-badge-bg);
}

.rfw-calendar-dialog .rfw-calendar {
  margin-top: 0;
  max-height: calc(100vh - 32px);
  overflow: auto;
}

.rfw-calendar-close {
  position: absolute;
  top: -14px;
  right: -14px;
  z-index: 1;
  width: 40px;
  height: 40px;
  border: 1px solid var(--rfw-line-btn);
  border-radius: 50%;
  background: var(--rfw-surface);
  color: var(--rfw-text);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--rfw-shadow-card);
}

.rfw-calendar-close:hover {
  background: var(--rfw-surface-alt);
}

.rfw-calendar-close:focus-visible {
  outline: 2px solid var(--rfw-green-deep);
  outline-offset: 2px;
}

@media (max-width: 650px) {
  .rfw-calendar-dialog .rfw-calendar {
    padding: 14px;
    border-radius: 22px;
  }

  .rfw-calendar-close {
    top: -12px;
    right: -6px;
  }
}

/* ================================================================== *
 * SCROLL REVEAL
 *
 * The hidden state is gated behind `.js`, which header.php stamps on
 * <html> before first paint. Two consequences, both deliberate:
 *
 *   - JavaScript disabled -> no `.js` -> content renders normally. An
 *     ungated `opacity: 0` would leave the whole page blank below the
 *     fold for anyone without JS.
 *   - The class lands before paint, so there is no flash of visible
 *     content being hidden and then revealed.
 *
 * Only inner blocks ever carry `.rfw-reveal` — never a section root —
 * so section boxes, backgrounds and padding are untouched and nothing
 * can shift as it reveals.
 *
 * prefers-reduced-motion is handled globally in base.css, which forces
 * transition-duration to .01ms; theme.js additionally reveals every
 * target immediately in that case, so nothing depends on a transition
 * completing. The stagger delay needs its own override — see below.
 * ================================================================== */
.js .rfw-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity .55s cubic-bezier(.22, .61, .36, 1),
    transform .55s cubic-bezier(.22, .61, .36, 1);
}

/* Stagger for card grids. The index is set inline per card; the cap is
   applied in PHP so the sixth card never feels left behind. */
.js .rfw-reveal[style*="--rfw-reveal-i"] {
  transition-delay: calc(var(--rfw-reveal-i, 0) * 60ms);
}

.js .rfw-reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* base.css zeroes transition-duration under reduced motion but not
   transition-delay, which would leave a staggered card invisible for up to
   300ms and then snap it in — motion removed, but the wait kept. Drop the
   delay too so reduced motion is genuinely instant. */
@media (prefers-reduced-motion: reduce) {
  .js .rfw-reveal[style*="--rfw-reveal-i"] {
    transition-delay: 0s;
  }
}

/* ================================================================== *
 * RESPONSIVE — the reference's two breakpoints.
 * ================================================================== */
@media (max-width: 1020px) {
  .rfw-hero-title {
    line-height: 1.04;
  }

  /* ---------------------------------------------------------------- *
   * HERO REORDER — tablet and mobile.
   *
   * Required order: 1 photo, 2 text, 3 CTA.
   *
   * The CTAs live inside .rfw-hero-copy so that the desktop layout is a
   * single text column. `display: contents` dissolves that wrapper at these
   * widths, promoting its children to flex items of the grid so each can be
   * ordered independently — without duplicating markup or moving the CTA out
   * of its semantic block.
   * ---------------------------------------------------------------- */
  .rfw-hero-grid {
    display: flex;
    flex-direction: column;
    gap: 26px;
  }

  .rfw-hero-copy {
    display: contents;
  }

  .rfw-hero-media,
  .rfw-hero-visual {
    order: 1;
  }

  .rfw-hero-copy > .rfw-eyebrow,
  .rfw-hero-title,
  .rfw-hero-lead,
  .rfw-hero-sub {
    order: 2;
  }

  .rfw-hero-actions {
    order: 3;
  }

  /* Supplementary; follows the CTA here as it does on desktop. */
  .rfw-micro-points {
    order: 4;
    margin-top: 0;
  }

  /* The wrapper's own margins are gone with display:contents, so the
     children carry their own rhythm. */
  .rfw-hero-copy > .rfw-eyebrow {
    margin-bottom: 0;
  }

  .rfw-hero-lead,
  .rfw-hero-sub {
    margin: 0;
  }

  .rfw-intro-grid,
  .rfw-featured-shell,
  .rfw-process-grid,
  .rfw-faq-grid,
  .rfw-cta-shell,
  .rfw-delivery--split .rfw-delivery-grid {
    grid-template-columns: 1fr;
  }

  .rfw-intro-card {
    position: static;
  }

  .rfw-program-grid,
  .rfw-delivery-list {
    grid-template-columns: 1fr 1fr;
  }

  /* Full-width column now, so a fixed 430px would read as a tall crop of a
     landscape photo. A ratio lets the container scale with the viewport while
     object-fit:cover keeps the photo undistorted. */
  .rfw-delivery--split .rfw-delivery-image,
  .rfw-delivery--split .rfw-delivery-image img {
    min-height: 0;
  }

  .rfw-delivery--split .rfw-delivery-image {
    aspect-ratio: 16 / 10;
  }

  .rfw-process--grid .rfw-steps {
    grid-template-columns: 1fr 1fr;
  }

  /* Two columns: items 1 and 3 are the left edge, 2 and 4 the right. */
  .rfw-process--grid .rfw-step:nth-child(odd) {
    padding-left: 0;
  }

  .rfw-process--grid .rfw-step:nth-child(even) {
    padding-right: 0;
  }

  .rfw-process--grid .rfw-step:nth-child(2n) {
    border-right: 0;
  }

  /* Separates the two rows, which had no horizontal rule between them. */
  .rfw-process--grid .rfw-step:nth-child(-n + 2) {
    border-bottom: 1px solid var(--rfw-line-step);
  }

  .rfw-hero-media,
  .rfw-hero-main,
  .rfw-hero-visual,
  .rfw-hero-visual img {
    min-height: 400px;
  }

  .rfw-cta-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 650px) {
  .rfw-hero {
    padding: 44px 0 52px;
  }

  .rfw-hero-title {
    font-size: clamp(2.8rem, 15vw, 4.7rem);
    line-height: 1.06;
  }

  .rfw-hero-media {
    grid-template-columns: 1fr;
    min-height: auto;
    margin-top: 2px;
  }

  .rfw-hero-main {
    min-height: 330px;
  }

  .rfw-hero-stack {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: none;
  }

  .rfw-hero-stack figure {
    min-height: 150px;
  }

  .rfw-intro,
  .rfw-programs,
  .rfw-featured,
  .rfw-delivery,
  .rfw-places,
  .rfw-process,
  .rfw-faq,
  .rfw-cta {
    padding: 70px 0;
  }

  .rfw-program-grid,
  .rfw-delivery-list,
  .rfw-process--grid .rfw-steps {
    grid-template-columns: 1fr;
  }

  .rfw-delivery--split .rfw-delivery-image {
    aspect-ratio: 4 / 3;
  }

  .rfw-process--grid .rfw-step {
    border-right: 0;
    border-bottom: 1px solid var(--rfw-line-step);
    padding-inline: 0;
  }

  .rfw-programs-head {
    display: block;
  }

  .rfw-programs-note {
    text-align: left;
    margin-top: 16px;
  }

  .rfw-program--rich {
    min-height: 320px;
  }

  .rfw-featured-image,
  .rfw-featured-image img {
    min-height: 300px;
  }

  .rfw-featured-copy {
    padding: 28px;
  }

  .rfw-place {
    grid-template-columns: 1fr auto;
    gap: 12px;
  }

  .rfw-place small {
    grid-column: 1 / -1;
  }

  .rfw-cta-shell {
    padding: 28px;
  }
}

/* ================================================================== *
 * PAGE + PROSE
 *
 * The presentation layer for WordPress editor content: legal pages,
 * About Us, Contact Us and any other page on the shared template.
 *
 * Every value below composes existing tokens — no new colour is
 * introduced. The rules target editor output (h2, ul, a, table…), which
 * nothing else in the theme styles, so they cannot collide with a
 * section component.
 * ================================================================== */
.rfw-page {
  padding: 72px 0 96px;
}

.rfw-page-head {
  max-width: 38rem;
  margin-bottom: 40px;
}

.rfw-page-title {
  margin: 0;
  font-size: clamp(2.4rem, 5vw, 4rem);
  line-height: 1.04;
  letter-spacing: -.055em;
}

.rfw-page-meta {
  margin: 14px 0 0;
  color: var(--rfw-muted);
  font-size: .88rem;
}

/* ------------------------------------------------------------------ *
 * Prose
 *
 * Caps the measure for long-form reading. Without it a paragraph spans
 * the full 1240px container — about 190 characters per line, far past
 * the comfortable 60–80.
 *
 * Deliberately rem, not ch: `ch` is the width of the "0" glyph, which in
 * DM Sans is much wider than the average character. Measured, `72ch`
 * rendered 803px = 99 real characters. 38rem lands at ~75, the top of
 * the comfortable range.
 * ------------------------------------------------------------------ */
.rfw-prose {
  max-width: 38rem;
  color: var(--rfw-text);
  font-size: 1.02rem;
  line-height: 1.75;
}

.rfw-prose > *:first-child {
  margin-top: 0;
}

.rfw-prose > *:last-child {
  margin-bottom: 0;
}

.rfw-prose p {
  margin: 0 0 1.2em;
}

/* Distinct sizes so hierarchy is readable. The theme's global rule sets
   only font-family, which would render h2 and h3 almost identically. */
.rfw-prose h2 {
  margin: 2.2em 0 .6em;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1.18;
  letter-spacing: -.03em;
}

.rfw-prose h3 {
  margin: 1.8em 0 .5em;
  font-size: clamp(1.2rem, 1.8vw, 1.45rem);
  line-height: 1.25;
  letter-spacing: -.02em;
}

.rfw-prose h4 {
  margin: 1.5em 0 .4em;
  font-size: 1.05rem;
  line-height: 1.3;
}

/* Links must not rely on colour alone (WCAG 1.4.1). The theme's global
   reset is `color:inherit; text-decoration:none`, which would make a link
   inside body copy invisible — so both properties are restored here.

   Colour is --rfw-pill-text, not --rfw-accent-deep: measured on white the
   accent is 4.28:1, under the 4.5 minimum for body text (WCAG 1.4.3).
   --rfw-pill-text is an existing token (already used by the anchor-nav
   pill) and measures 5.53:1, so this passes without inventing a colour. */
.rfw-prose a {
  color: var(--rfw-pill-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.rfw-prose a:hover {
  text-decoration-thickness: 2px;
}

.rfw-prose ul,
.rfw-prose ol {
  margin: 0 0 1.2em;
  padding-left: 1.4em;
}

.rfw-prose li {
  margin-bottom: .5em;
}

.rfw-prose li::marker {
  color: var(--rfw-accent-deep);
}

.rfw-prose ul ul,
.rfw-prose ol ol,
.rfw-prose ul ol,
.rfw-prose ol ul {
  margin: .5em 0 0;
}

.rfw-prose strong,
.rfw-prose b {
  color: var(--rfw-text-strong);
  font-weight: 700;
}

.rfw-prose blockquote {
  margin: 1.6em 0;
  padding: 4px 0 4px 20px;
  border-left: 3px solid var(--rfw-accent);
  color: var(--rfw-text-soft);
}

.rfw-prose blockquote p:last-child {
  margin-bottom: 0;
}

.rfw-prose hr {
  margin: 2.4em 0;
  border: 0;
  border-top: 1px solid var(--rfw-line);
}

.rfw-prose img {
  border-radius: 18px;
  margin: 1.4em 0;
}

.rfw-prose figure {
  margin: 1.6em 0;
}

.rfw-prose figcaption {
  margin-top: 8px;
  color: var(--rfw-muted);
  font-size: .86rem;
}

.rfw-prose code {
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--rfw-surface-alt);
  font-size: .92em;
}

/* Tables can exceed the measure, so they scroll inside their own box
   rather than pushing the page wide. */
.rfw-prose table {
  width: 100%;
  margin: 1.6em 0;
  border-collapse: collapse;
  font-size: .95rem;
}

.rfw-prose th,
.rfw-prose td {
  padding: 10px 12px;
  border: 1px solid var(--rfw-line);
  text-align: left;
}

.rfw-prose th {
  background: var(--rfw-surface-alt);
  font-family: Manrope, sans-serif;
  color: var(--rfw-text-strong);
}

.rfw-prose .wp-block-table,
.rfw-prose figure.wp-block-table {
  overflow-x: auto;
}

@media (max-width: 650px) {
  .rfw-page {
    padding: 48px 0 64px;
  }

  .rfw-page-head {
    margin-bottom: 28px;
  }

  .rfw-prose {
    font-size: 1rem;
  }
}

/* ================================================================== *
 * FRONT PAGE HERO — image showcase
 * ------------------------------------------------------------------
 * ADDITIVE AND HOMEPAGE-ONLY. Nothing above this comment is modified.
 *
 * Three gates keep it off the other six hero pages:
 *
 *   1. hero.php renders this markup only inside `is_front_page()`.
 *   2. .rfw-hero-showcase / -slides / -slide / -dots are NEW class names.
 *      Nothing else in the theme uses them, so no existing rule — including
 *      the .rfw-hero-media / -main / -stack overrides in the two responsive
 *      blocks above — can reach them, and they can reach nothing else.
 *   3. Every selector below is prefixed `body.rfw-system-home`.
 *
 * Gate 2 is the one that matters most: the service hero's media column keeps
 * its own class names, so the responsive rules written for it still apply to
 * Personal Training, Running Coaching and the four location pages untouched.
 *
 * The section keeps `.rfw-hero`, so the background glow, the bottom rule and
 * the token language are inherited rather than restated — this is a premium
 * evolution of the existing hero, not a second one.
 * ================================================================== */

/* ------------------------------------------------------------------ *
 * Desktop proportions — more air than the service hero, because the
 * showcase is the page's first impression.
 *
 * The media query is doing real work, not documenting intent. These
 * selectors score (0,2,1) against the shared responsive block's (0,1,0),
 * and a media query adds nothing to specificity — so unmediated, they
 * would outrank the mobile rules that are supposed to replace them and
 * follow the page down to every width. Fencing them above the shared
 * block's own breakpoint is what lets that block govern below it.
 * ------------------------------------------------------------------ */
@media (min-width: 1021px) {
  body.rfw-system-home .rfw-hero--home {
    padding: 74px 0 82px;
  }

  body.rfw-system-home .rfw-hero--home .rfw-hero-grid {
    grid-template-columns: 1.02fr .98fr;
    gap: 70px;
  }

  body.rfw-system-home .rfw-hero--home .rfw-hero-lead {
    margin: 26px 0 32px;
  }

  body.rfw-system-home .rfw-hero--home .rfw-micro-points {
    margin-top: 32px;
  }
}

/* ------------------------------------------------------------------ *
 * The media box.
 *
 * aspect-ratio rather than min-height: the slides are absolutely
 * positioned, so the box has no content to size itself from, and a ratio
 * also means the reserved space is correct before any image decodes —
 * the carousel contributes nothing to CLS.
 * ------------------------------------------------------------------ */
body.rfw-system-home .rfw-hero-slides {
  position: relative;
  aspect-ratio: 4 / 3.35;
  border-radius: 28px;
  overflow: hidden;
  background: var(--rfw-media-bg);
  box-shadow: var(--rfw-shadow);
}

/*
 * Crossfade.
 *
 * The incoming slide is raised to z-index 2 and fades IN over the outgoing
 * one, which stays beneath at z-index 1 while it fades out. Fading both on
 * the same plane would let the container's background show through at the
 * midpoint — a visible dip on every rotation.
 */
body.rfw-system-home .rfw-hero-slide {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  transition: opacity 700ms ease;
}

body.rfw-system-home .rfw-hero-slide.is-active {
  z-index: 2;
  opacity: 1;
}

body.rfw-system-home .rfw-hero-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ------------------------------------------------------------------ *
 * Indicators — below the image, never over the photograph.
 * ------------------------------------------------------------------ */
body.rfw-system-home .rfw-hero-dots {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-top: 18px;
}

body.rfw-system-home .rfw-hero-dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--rfw-line-step);
  cursor: pointer;
  transition: width 300ms ease, background-color 300ms ease;
}

body.rfw-system-home .rfw-hero-dot:hover {
  background: var(--rfw-muted);
}

body.rfw-system-home .rfw-hero-dot.is-active {
  width: 24px;
  background: var(--rfw-accent-deep);
}

/* :focus-visible is styled globally in base.css; nothing to add here. */

/* ------------------------------------------------------------------ *
 * Tablet and mobile — image, then text, then CTA.
 *
 * Almost nothing is needed here, because the shared responsive block
 * higher up already lays every hero out in exactly that order: it makes
 * .rfw-hero-grid a column flex, dissolves .rfw-hero-copy with
 * `display: contents`, and orders the media column 1, the text 2, the
 * buttons 3 and the micro points 4.
 *
 * The front page misses out on only one line of that: the shared rule
 * names `.rfw-hero-media, .rfw-hero-visual`, and this page's column is
 * `.rfw-hero-showcase` — a separate class precisely so the service and
 * location heroes cannot be reached from here. Giving it the same order
 * slots it into the shared layout, and the front page then stacks the
 * way Personal Training, Running Coaching and the location pages do.
 *
 * `align-self` is load-bearing, not tidying. .rfw-hero-grid carries
 * `align-items: center`, and on a column flex container that centres
 * items on the HORIZONTAL axis — which sizes each one to its content
 * rather than to the container. The service hero survives it because its
 * media column holds a real <img> with an intrinsic 1536px width. Every
 * slide here is absolutely positioned, so the showcase's content width is
 * zero and the box collapses to a thumbnail without this.
 * ------------------------------------------------------------------ */
@media (max-width: 1020px) {
  body.rfw-system-home .rfw-hero-showcase {
    order: 1;
    align-self: stretch;
  }

  /* Full width now, so the desktop portrait crop would run very tall. */
  body.rfw-system-home .rfw-hero-slides {
    aspect-ratio: 16 / 10;
    border-radius: 24px;
  }
}

@media (max-width: 650px) {
  /* Narrow enough that 16/10 leaves the photo too short to carry the hero. */
  body.rfw-system-home .rfw-hero-slides {
    aspect-ratio: 4 / 3;
  }
}

/*
 * Reduced motion: theme.js does not start the rotation at all, so the
 * transition would only ever run on a dot press. Removing it keeps that
 * instant too.
 */
@media (prefers-reduced-motion: reduce) {
  body.rfw-system-home .rfw-hero-slide,
  body.rfw-system-home .rfw-hero-dot {
    transition: none;
  }
}