/*
 * Run Fit Well V2 — homepage
 * ---------------------------------------------------------------------------
 * ADDITIVE AND HOMEPAGE-ONLY. This file is loaded on one route and cannot be
 * reached from any other, by three gates:
 *
 *   1. inc/enqueue.php loads it only when rfw_current_system() is 'home',
 *      which is true only for the page assigned template-home.php.
 *   2. Every component class below is NEW (.rfw-home-*). Nothing else in the
 *      theme uses these names, so no existing rule can reach them and they
 *      can reach nothing else. The exceptions — .rfw-program, .rfw-faq-grid,
 *      .rfw-accordion, .rfw-section-lead, .rfw-btn, .rfw-hero-slides and
 *      .rfw-hero-dots — are existing components the homepage reuses, and every
 *      rule touching them is fenced under `body.rfw-system-home` so the service
 *      and location pages keep theirs untouched.
 *   3. Every selector is prefixed `body.rfw-system-home`.
 *
 * THE PREFIX IS `rfw-system-home`, NOT `home`, AND THAT IS A BUG FIX.
 *
 * It used to be `body.home`. `home` is a WordPress CORE body class, and core
 * adds it only under is_front_page() (wp-includes/post-template.php). The
 * enqueue gate above, by contrast, keys off the page TEMPLATE. The two
 * disagree the moment the Homepage template is used by a page that is not the
 * static front page — during setup, on a preview, or if Settings > Reading is
 * ever pointed elsewhere. In that state this file still downloads and still
 * returns 200, but not one of its ~180 rules matches: the page loses every
 * grid, every card surface and every section's vertical padding, which reads
 * as a badly broken, compressed layout rather than as missing CSS. It shipped
 * that way in 2.0.5 and was reported from a live install.
 *
 * `rfw-system-home` is emitted by rfw_body_class() in inc/setup.php from
 * rfw_current_system() — the SAME source the enqueue gate uses. So the gate
 * that loads this file and the selector that applies it can no longer drift.
 * It is also a strict superset of `home`: on the real front page both classes
 * are present. Specificity is identical (0,1,1), so nothing in the cascade
 * shifted when the prefix changed.
 *
 * Colours come from tokens.css. The handful of values this design introduces
 * are declared once as homepage tokens in the block below, rather than as hex
 * values scattered through components — the rule tokens.css sets out.
 *
 * CONTENTS
 *   0. Homepage tokens
 *   1. Hero
 *   2. Philosophy
 *   3. Services
 *   4. Corporate programs
 *   5. Running coaching
 *   6. Personal training
 *   7. Statement band
 *   8. Locations (.rfw-home-place, the homepage's own card)
 *   9. FAQs
 *  10. Get started
 *  11. Responsive
 */

/* ================================================================== *
 * 0. HOMEPAGE TOKENS
 *
 * Extracted from the homepage design file, exactly as tokens.css was
 * extracted from the Corporate Wellness design. Anything that already
 * had a token reuses it instead of appearing here.
 * ================================================================== */
body.rfw-system-home {
  --rfw-home-tint-running: #f4faff;
  --rfw-home-grad-running: linear-gradient(145deg, #dff4fb, #f4fbff 60%, #f1edfb);
  --rfw-home-grad-training: linear-gradient(145deg, #fff5ed, #fbf1fc);
  --rfw-home-grad-statement: linear-gradient(110deg, #e6f8ec, #edf9fc 58%, #f7effb);
  --rfw-home-grad-rollout: linear-gradient(145deg, #e8f9ee, #eef9fc);
  --rfw-home-grad-primary: linear-gradient(145deg, #e7faed, #f4fbf7 58%, #eef9fc);
  --rfw-home-grad-featured: linear-gradient(145deg, #e6f9ec, #eaf6fb);
  --rfw-home-grad-proposal: linear-gradient(120deg, #eef9f2, #edf7fb);
  --rfw-home-border-primary: #a9dcbc;
  --rfw-home-border-running: #cae5ef;
  --rfw-home-border-training: #f0ded2;
  --rfw-home-rule-training: #ff994f;
  --rfw-home-rule-rollout: #54cf78;
  --rfw-home-shadow-hero: 0 32px 95px rgba(16, 63, 69, .2);
  --rfw-home-shadow-primary: 0 24px 65px rgba(30, 132, 75, .11);
  --rfw-home-scrim: linear-gradient(180deg, transparent 48%, rgba(5, 20, 25, .78) 100%);
  /* The dots sit on a photograph here, not on the page background. */
  --rfw-home-dot-idle: rgba(255, 255, 255, .55);

  /*
   * The hero's colour blob and the scrim that wipes it off the copy column —
   * the design file's `.hero:before` / `.hero:after` pair, verbatim.
   */
  --rfw-home-hero-blob:
    radial-gradient(circle at 30% 30%, rgba(84, 199, 238, .33), transparent 38%),
    radial-gradient(circle at 70% 34%, rgba(110, 231, 138, .4), transparent 36%),
    radial-gradient(circle at 66% 75%, rgba(255, 132, 56, .25), transparent 38%),
    radial-gradient(circle at 28% 73%, rgba(192, 86, 239, .2), transparent 37%);
  --rfw-home-hero-wash:
    linear-gradient(90deg, rgba(255, 255, 255, .99) 0%, rgba(255, 255, 255, .92) 49%, rgba(255, 255, 255, .28) 100%);

  /*
   * The headline's accent gradient. Stop 1 is the theme's WCAG-corrected green
   * rather than the design's #168c50, so the fallback colour and the gradient's
   * opening stop are the same ink; stops 2 and 3 are the design's own.
   */
  --rfw-home-accent-grad: linear-gradient(95deg, var(--rfw-green-deep), #178fb7 48%, #8242b7);

  /*
   * The running band is BLUE in the design, not the site green — its eyebrow
   * and its feature numbers both. The only band on the page that departs from
   * the green accent, so it is stated once here rather than inline twice.
   */
  --rfw-home-running-eyebrow: #187fa5;
  --rfw-home-running-num: #1594bf;
  --rfw-home-running-blob:
    radial-gradient(circle at 35% 40%, rgba(84, 199, 238, .9), transparent 42%),
    radial-gradient(circle at 65% 68%, rgba(192, 86, 239, .72), transparent 44%);

  /* The statement band's rules, a shade deeper than the shared --rfw-line-3. */
  --rfw-home-line-statement: #dbeae3;

  /* The closing band is a FLAT mint in the design's premium layer, not a gradient. */
  --rfw-home-cta-bg: #eef8f2;
}

/* ================================================================== *
 * 0b. SHARED PRIMITIVES, IN THEIR HOMEPAGE PROPORTIONS
 *
 * base.css sizes .rfw-section-lead and .rfw-btn for the service and
 * location designs. The homepage design sizes both differently, and it
 * is the only page that does — so the values are restated here, under
 * body.rfw-system-home, rather than changed in base.css where they would move all
 * eleven pages.
 * ================================================================== */

/*
 * 1.2rem against base.css's 1.04rem. This is the most widespread single
 * difference on the page: every lead — Corporate, Running, Personal
 * Training, Locations, FAQ — renders a size smaller and wraps a line
 * differently without it.
 */
body.rfw-system-home .rfw-section-lead {
  font-size: clamp(1rem, 1.6vw, 1.2rem);
}

body.rfw-system-home .rfw-btn {
  min-height: 52px;
}

/* ================================================================== *
 * 1. HERO
 *
 * The section itself keeps .rfw-hero, so the glow, the token language
 * and the copy column's type scale are inherited rather than restated.
 * What is homepage-only is the framed media column.
 * ================================================================== */
/*
 * BACKGROUND, NOT A TOKEN REMAP.
 *
 * This used to read `--rfw-section-bg: var(--rfw-white)`, which was a dead
 * rule: .rfw-hero in sections.css sets `background` as a SHORTHAND — two
 * radial glows over --rfw-paper — and a shorthand cannot be reached by
 * remapping the variable .rfw-section would have read. The variable was set
 * and never consulted, so the band kept painting the service pages' green
 * wash instead of the design's white. Overriding the property is what the
 * cascade actually responds to; home.css is enqueued after sections.css, and
 * this selector scores (0,2,0) against .rfw-hero's (0,1,0).
 *
 * position/overflow are here for the same reason: the design's hero carries a
 * blurred colour blob that has to be clipped to the band.
 */
body.rfw-system-home .rfw-home-hero {
  position: relative;
  overflow: hidden;
  padding: 100px 0 105px;
  background: var(--rfw-white);
  border-bottom: 0;
}

/* The blob, bleeding off the right edge behind the photograph. */
body.rfw-system-home .rfw-home-hero::before {
  content: "";
  position: absolute;
  right: -70px;
  top: 30px;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  background: var(--rfw-home-hero-blob);
  filter: blur(5px);
  opacity: .8;
}

/*
 * The wash that keeps the copy column clean: near-opaque white on the left,
 * fading to almost nothing by the right edge so the blob survives only behind
 * the image. pointer-events:none so it never intercepts a button.
 */
body.rfw-system-home .rfw-home-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--rfw-home-hero-wash);
  pointer-events: none;
}

/* Both pseudo-elements are in flow behind this. */
body.rfw-system-home .rfw-home-hero .rfw-hero-grid {
  position: relative;
  z-index: 2;
}

/*
 * LINE-HEIGHT IS .95, NOT THE DESIGN'S .92, AND THAT IS DELIBERATE.
 *
 * sections.css records a measured 4-5px collision between Manrope's
 * descenders and the capitals of the following line at .92 — the reason the
 * shared title sits at 1.02. At this clamp's ceiling the difference between
 * .92 and .95 is about 3px across the whole headline, but .95 cannot bring
 * that bug back if an editor later writes a first line containing a 'g' or a
 * 'y'. Everything else is the design file's own.
 *
 * THE CEILING IS 6.8rem, NOT THE DESIGN'S 7.5rem, AND THAT IS ALSO DELIBERATE.
 *
 * The copy column is 695px at EVERY viewport from 1440px up, because .rfw-wrap
 * caps at 1240px — only the font keeps growing. At 7.5rem (120px) "Work
 * stronger." measures 754px and breaks onto a third line, which is neither the
 * design's two-line intent nor harmless: a wrapped inline's background box ends
 * at each fragment's advance width, and Manrope's "k" overhangs its own advance,
 * so with `background-clip: text` the k's lower leg falls outside the painted
 * area and is sliced off. The design file has the identical defect at 1920px —
 * this is not a regression against it, it is the same latent bug with the
 * condition removed.
 *
 * 6.8rem = 108.8px. Measured: "Work stronger." is 6.28px wide per 1px of
 * font-size, so 683px — it fits the 695px column with room to spare at any
 * width, and the headline stays the two lines the design draws. Below 1511px
 * the 7.2vw term is still the smaller value, so 1440px renders EXACTLY as
 * before; only very wide screens are affected, and there the change is from
 * broken to correct.
 */
body.rfw-system-home .rfw-home-hero .rfw-hero-title {
  max-width: 900px;
  font-size: clamp(3.4rem, 7.2vw, 6.8rem);
  line-height: .95;
  letter-spacing: -.07em;
}

/*
 * THE SPAN STAYS INLINE. IT MUST NOT BE display:block.
 *
 * It was a block once, to force the headline's line break from CSS so an editor
 * would not have to type markup. That silently ate the descender of the "g" in
 * "stronger": with `background-clip: text` the glyphs are cut out of the
 * element's background painting area, and for a BLOCK box that area is the
 * content box — whose height is the line-height, here .95em. Manrope's
 * descender reaches below that, so the tail of the g fell outside the painted
 * area, and because `color` is transparent there was nothing else to draw it.
 * The word rendered as "stronqer".
 *
 * An INLINE box's background area is the font's content area — ascent plus
 * descent — which is independent of line-height, so the descender is covered.
 * The design file does exactly this, and its g is intact at a tighter .92.
 *
 * The line break therefore comes from a <br> that home-hero.php emits between
 * the two fields, which is also what the design's own markup does. The editor
 * still types two plain text fields and never sees the tag.
 *
 * Inline also restores the design's gradient FLOW: one inline box spanning both
 * wrapped lines continues the ramp across them (Work green->teal, stronger
 * teal->purple) instead of restarting it on each line, which is what a block
 * box did.
 *
 * THE FALLBACK COLOUR IS LOAD-BEARING. `background-clip: text` needs
 * `color: transparent` to reveal the gradient, and the two together render
 * INVISIBLE TEXT wherever the clip is unsupported. So the solid accent is
 * declared unconditionally and only the @supports block — which tests the
 * exact property that has to work — trades it for the gradient.
 */
body.rfw-system-home .rfw-home-hero .rfw-hero-title span {
  color: var(--rfw-accent-deep);
}

@supports (-webkit-background-clip: text) or (background-clip: text) {
  body.rfw-system-home .rfw-home-hero .rfw-hero-title span {
    background: var(--rfw-home-accent-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;

    /*
     * The title's -.07em letter-spacing pulls each line's advance edge in
     * past the last glyph's ink, and with `background-clip: text` nothing
     * outside that edge is painted: the final "s" of "Wellness" (where an
     * accent like "Wellness Services" wraps) and of "Services" were sliced
     * flat. pre-wrap keeps the space at a wrap on the end of the line, so
     * that line's box extends past the ink — and lets it hang, so centred
     * lines stay centred (break-spaces shifted them ~3px). The padding does
     * the same at the span's own end, and the equal negative margin gives
     * that room back so nothing moves.
     */
    white-space: pre-wrap;
    padding-right: .1em;
    margin-right: -.1em;
  }
}

body.rfw-system-home .rfw-home-hero .rfw-hero-lead {
  max-width: 620px;
  font-size: 1.22rem;
}

/* The design gives the hero's buttons more air than the rest of the page. */
body.rfw-system-home .rfw-home-hero .rfw-hero-actions {
  gap: 13px;
}

body.rfw-system-home .rfw-home-hero .rfw-hero-actions .rfw-btn--primary {
  padding-inline: 28px;
}

/* ------------------------------------------------------------------ *
 * The frame.
 *
 * isolation:isolate keeps the scrim, the caption and the dots stacking
 * against the figure rather than against the page, so nothing here can
 * paint over the header.
 * ------------------------------------------------------------------ */
body.rfw-system-home .rfw-home-hero-media {
  position: relative;
  margin: 0;
  border-radius: 34px;
  overflow: hidden;
  background: var(--rfw-media-bg-2);
  box-shadow: var(--rfw-home-shadow-hero);
  isolation: isolate;
}

/*
 * The showcase fills the frame; the rounding and the shadow now belong to
 * the figure.
 *
 * NO z-index HERE, deliberately. Giving this element one would open a
 * stacking context, and everything inside it — the caption and the dots
 * included — would then be layered as a single unit against the scrim
 * instead of individually. That is precisely how the caption ended up
 * being painted UNDER the scrim that is supposed to make it readable.
 */
body.rfw-system-home .rfw-home-hero-media .rfw-hero-showcase {
  position: relative;
}

/*
 * The scrim the caption sits on, drawn over the photograph but under the
 * caption and the dots — so it belongs to the slide box, which is what it
 * darkens. pointer-events:none so it never eats a click meant for a dot.
 */
body.rfw-system-home .rfw-home-hero-media .rfw-hero-slides::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background: var(--rfw-home-scrim);
  pointer-events: none;
}

/* A figure with no caption needs no scrim darkening its lower third. */
body.rfw-system-home .rfw-home-hero-media:not(:has(.rfw-home-hero-caption)) .rfw-hero-slides::after {
  content: none;
}

/*
 * The frame owns the rounding and the shadow now, so the slides give up
 * theirs at every width — otherwise a second, smaller card is drawn inside
 * the first and the figure's background shows at the corners.
 */
body.rfw-system-home .rfw-home-hero-media .rfw-hero-slides {
  border-radius: 0;
  box-shadow: none;
}

/*
 * The desktop crop and the column split, fenced above the theme's breakpoint
 * ON PURPOSE.
 *
 * sections.css already gives this box a ratio per width — 16/10 on tablet,
 * 4/3 on phones — and those selectors score (0,2,0) against this one's
 * (0,3,1). A media query adds nothing to specificity, so left unmediated
 * this single line would outrank both and follow the page down to every
 * width, stretching a portrait crop across a full-width column. Fencing it
 * here is what lets the shared rules govern below 1021px, exactly as the
 * front-page hero block in sections.css documents for its own proportions.
 *
 * THE SPLIT IS WHY THE HEADLINE USED TO WRAP ONTO THREE LINES. The block in
 * sections.css sets 1.02fr/.98fr — near half and half — which leaves the copy
 * column too narrow for "Work stronger." at this type size. The design's own
 * split is below; overriding it from here rather than editing sections.css
 * keeps a file all eleven pages parse closed.
 */
@media (min-width: 1021px) {
  body.rfw-system-home .rfw-home-hero .rfw-hero-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(330px, .72fr);
    gap: 90px;
  }

  /*
   * 4/5 rather than the design's flat `min-height: 570px`: at the 1240px wrap
   * this column is ~455px wide, so the ratio resolves to ~569px — the design's
   * frame to within a pixel — and it then scales down with the column instead
   * of staying 570px tall inside a 349px box at 1021px. A ratio also reserves
   * the right space before the first image decodes, which is the property this
   * file's carousel notes rely on for zero CLS.
   */
  body.rfw-system-home .rfw-home-hero-media .rfw-hero-slides {
    aspect-ratio: 4 / 5;
  }
}

/*
 * The design's crop centre. The photograph's subject sits right of middle, and
 * a portrait frame this tall crops hard.
 */
body.rfw-system-home .rfw-home-hero-media .rfw-hero-slide img {
  object-position: 58% center;
}

body.rfw-system-home .rfw-home-hero-caption {
  position: absolute;
  z-index: 4;
  left: 28px;
  right: 28px;
  bottom: 25px;
  color: var(--rfw-on-dark);
  font-family: Manrope, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .35);
}

/*
 * Dots move onto the photograph, opposite the caption. They keep every
 * rule they already had — size, shape, active state, focus ring — and
 * change only where they sit and what they sit on.
 */
body.rfw-system-home .rfw-home-hero-media .rfw-hero-dots {
  position: absolute;
  z-index: 5;
  right: 24px;
  bottom: 26px;
  margin: 0;
}

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

body.rfw-system-home .rfw-home-hero-media .rfw-hero-dot:hover,
body.rfw-system-home .rfw-home-hero-media .rfw-hero-dot.is-active {
  background: var(--rfw-white);
}

/* ================================================================== *
 * 2. PHILOSOPHY
 * ================================================================== */
body.rfw-system-home .rfw-home-intro {
  padding: 120px 0;
}

body.rfw-system-home .rfw-home-intro-grid {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 120px;
  align-items: start;
}

/*
 * Sticky, and therefore never inside anything transformed: .rfw-reveal
 * is deliberately absent from this column and from its wrapper. A
 * transformed ancestor becomes a containing block and sticky silently
 * stops working — the same note intro.php and contact-form.php carry.
 */
body.rfw-system-home .rfw-home-intro-note {
  position: sticky;
  top: 24px;
}

body.rfw-system-home .rfw-home-intro-word {
  font-family: Manrope, sans-serif;
  font-size: clamp(3rem, 6vw, 6rem);
  font-weight: 800;
  line-height: .85;
  letter-spacing: -.07em;
  color: var(--rfw-text);
}

body.rfw-system-home .rfw-home-intro-word span {
  display: block;
  margin-top: 20px;
  color: var(--rfw-accent-deep);
  font-size: .32em;
  letter-spacing: .05em;
}

body.rfw-system-home .rfw-home-intro-statement {
  margin: 0;
  font-family: Manrope, sans-serif;
  font-size: clamp(1.5rem, 3.3vw, 2.95rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.04em;
}

body.rfw-system-home .rfw-home-intro-statement em {
  font-style: normal;
  color: var(--rfw-text-em);
}

body.rfw-system-home .rfw-home-principles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 46px;
}

body.rfw-system-home .rfw-home-principle {
  padding: 25px;
  background: var(--rfw-paper);
  border-top: 4px solid var(--rfw-accent-deep);
  border-radius: 0 0 14px 14px;
}

body.rfw-system-home .rfw-home-principle strong {
  display: block;
  font-family: Manrope, sans-serif;
  font-size: 1.05rem;
}

body.rfw-system-home .rfw-home-principle span {
  font-size: .9rem;
  color: var(--rfw-muted);
}

/* ================================================================== *
 * 3. SERVICES
 *
 * The band's background is .rfw-section--alt, already the design's own
 * #f6f9f7 — a tone modifier, not a new colour.
 * ================================================================== */
body.rfw-system-home .rfw-home-services {
  padding: 120px 0;
  border-top: 1px solid var(--rfw-line-3);
  border-bottom: 1px solid var(--rfw-line-3);
}

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

body.rfw-system-home .rfw-home-services-head .rfw-section-title {
  max-width: 750px;
}

body.rfw-system-home .rfw-home-services-note {
  margin: 0;
  color: var(--rfw-text-note);
  font-size: .86rem;
  letter-spacing: .04em;
}

body.rfw-system-home .rfw-home-service-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr;
  align-items: stretch;
  gap: 22px;
  margin-top: 58px;
}

body.rfw-system-home .rfw-home-service {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 460px;
  padding: 34px;
  border: 1px solid var(--rfw-line-2);
  border-radius: 26px;
  background: var(--rfw-white);
  box-shadow: var(--rfw-shadow-card);
}

/* The accent wash in the top corner, from each card's own --rfw-accent. */
body.rfw-system-home .rfw-home-service::after {
  content: "";
  position: absolute;
  right: -80px;
  top: -65px;
  width: 210px;
  height: 210px;
  border-radius: 50%;
  background: var(--rfw-accent);
  opacity: .12;
  filter: blur(2px);
}

body.rfw-system-home .rfw-home-service--primary {
  min-height: 500px;
  background: var(--rfw-home-grad-primary);
  border-color: var(--rfw-home-border-primary);
  box-shadow: var(--rfw-home-shadow-primary);
}

/*
 * The two secondary cards sit lower than the primary one, which is what
 * gives the row its stagger. A margin, not a transform: .rfw-reveal is
 * already animating these and a second transform would fight it.
 */
body.rfw-system-home .rfw-home-service:not(.rfw-home-service--primary) {
  margin-top: 38px;
}

/*
 * ACCENT COLOURS ARE THE DESIGN'S RAW BRAND HUES, BY DECISION.
 *
 * --rfw-accent is the bright brand colour the card's inline style sets
 * (#6ee78a / #54c7ee / #ff8438); --rfw-accent-text is the theme's darkened,
 * WCAG-corrected companion. The design uses the bright one for the card number
 * and the card link, and visual fidelity to it was chosen over the contrast
 * correction. Recorded here so the trade is visible rather than looking like a
 * slip: on the pale card surfaces these do not reach 4.5:1, and swapping both
 * rules back to --rfw-accent-text is the whole of the fix if that changes.
 */
body.rfw-system-home .rfw-home-service-num {
  position: relative;
  z-index: 1;
  color: var(--rfw-accent);
  font-weight: 800;
  font-size: .8rem;
  letter-spacing: .12em;
}

body.rfw-system-home .rfw-home-service h3 {
  position: relative;
  z-index: 1;
  margin: 64px 0 14px;
  font-size: clamp(1.7rem, 2.8vw, 2.5rem);
  line-height: 1.06;
  letter-spacing: -.045em;
}

body.rfw-system-home .rfw-home-service--primary h3 {
  font-size: clamp(2rem, 3.4vw, 3rem);
}

body.rfw-system-home .rfw-home-service p {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--rfw-muted);
}

body.rfw-system-home .rfw-home-service ul {
  position: relative;
  z-index: 1;
  margin: 24px 0 28px;
  padding: 0;
  list-style: none;
  color: var(--rfw-text-soft);
}

body.rfw-system-home .rfw-home-service li {
  padding: 8px 0;
  border-bottom: 1px solid var(--rfw-line-5);
}

body.rfw-system-home .rfw-home-service-link {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  font-weight: 700;
  color: var(--rfw-accent);
  transition: gap .2s ease;
}

body.rfw-system-home .rfw-home-service-link:hover {
  gap: 13px;
}

/* ================================================================== *
 * 4. CORPORATE PROGRAMS
 * ================================================================== */
body.rfw-system-home .rfw-home-corporate {
  padding: 125px 0;
}

body.rfw-system-home .rfw-home-corporate-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  margin-top: 55px;
  align-items: start;
}

body.rfw-system-home .rfw-home-program-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

/*
 * The compact program card, in its homepage proportions. Everything the
 * component already decides — icon, heading, tag line, reveal stagger —
 * is left alone; only the box changes.
 */
body.rfw-system-home .rfw-home-program-grid .rfw-program {
  min-height: 0;
  padding: 26px;
  border-radius: 20px;
  background: var(--rfw-surface-alt);
}

/*
 * The design's program tile is flat: a bare stroke icon, a title and one line.
 * The shared card adds an accent blob in the corner and seats its icon in a
 * 48px tinted chip — right for the Corporate Wellness programs band, where the
 * cards are large and three across, but at this tile size the two together
 * read as clutter the mockup does not have.
 *
 * SAFE TO RESTYLE RATHER THAN RE-MARK-UP: `variant => 'compact'` has exactly
 * one call site in the whole theme — home-corporate.php — so
 * .rfw-program--compact is a homepage-exclusive modifier and nothing outside
 * this page can be reached from here. The `body.rfw-system-home` prefix is the second
 * gate; neither is load-bearing alone.
 */
body.rfw-system-home .rfw-home-program-grid .rfw-program--compact::after {
  content: none;
}

body.rfw-system-home .rfw-home-program-grid .rfw-program--compact .rfw-program-icon {
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  color: var(--rfw-accent-deep);
}

body.rfw-system-home .rfw-home-program-grid .rfw-program--compact .rfw-program-icon svg {
  width: 28px;
  height: 28px;
}

body.rfw-system-home .rfw-home-rollout {
  padding: 48px;
  border-radius: 32px;
  background: var(--rfw-home-grad-rollout);
  border: 1px solid var(--rfw-line-cta);
  border-left: 6px solid var(--rfw-home-rule-rollout);
}

body.rfw-system-home .rfw-home-rollout h3 {
  margin: 0 0 20px;
  font-size: 2.2rem;
  line-height: 1.1;
  letter-spacing: -.04em;
}

body.rfw-system-home .rfw-home-rollout > p {
  margin: 0;
  color: var(--rfw-muted);
}

body.rfw-system-home .rfw-home-rollout-steps {
  counter-reset: rfw-step;
  margin: 28px 0 30px;
}

body.rfw-system-home .rfw-home-rollout-steps > div {
  counter-increment: rfw-step;
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 13px;
  padding: 15px 0;
  border-top: 1px solid var(--rfw-line-step);
}

/*
 * The number is generated, not stored: the steps are a fixed, ordered
 * four, so a field for "01" would be a field an editor can only get
 * wrong. The service page's own step numbers stay editable there.
 */
body.rfw-system-home .rfw-home-rollout-steps > div::before {
  content: "0" counter(rfw-step);
  color: var(--rfw-accent-deep);
  font-weight: 800;
}

body.rfw-system-home .rfw-home-rollout-steps strong {
  display: block;
  font-family: Manrope, sans-serif;
}

body.rfw-system-home .rfw-home-rollout-steps span {
  display: block;
  color: var(--rfw-muted);
  font-size: .92rem;
}

/* ================================================================== *
 * 5. RUNNING COACHING
 * ================================================================== */
body.rfw-system-home .rfw-home-running {
  --rfw-section-bg: var(--rfw-home-tint-running);
  padding: 120px 0;
}

body.rfw-system-home .rfw-home-running-grid {
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: 90px;
  align-items: center;
}

body.rfw-system-home .rfw-home-running-visual {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 560px;
  padding: 42px;
  border-radius: 34px;
  background: var(--rfw-home-grad-running);
  border: 1px solid var(--rfw-home-border-running);
  box-shadow: var(--rfw-shadow);
}

/*
 * The panel's own colour blob, bleeding off its top-right corner. Without it
 * the panel is a flat gradient and the band loses the only saturated colour
 * the design gives it. Clipped by the panel's own overflow:hidden.
 */
body.rfw-system-home .rfw-home-running-visual::before {
  content: "";
  position: absolute;
  right: -110px;
  top: -80px;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background: var(--rfw-home-running-blob);
  opacity: .32;
}

/*
 * The copy column is inset from the right, which is what makes the design's
 * heading break to four lines rather than three. A measured value from the
 * design, not a nudge.
 */
body.rfw-system-home .rfw-home-running-body {
  padding-right: 25px;
}

/* This band reads blue, not green — the only one on the page that does. */
body.rfw-system-home .rfw-home-running-body .rfw-eyebrow {
  color: var(--rfw-home-running-eyebrow);
}

/* The route: a dashed ellipse with two of its four edges drawn. */
body.rfw-system-home .rfw-home-route {
  position: relative;
  z-index: 1;
  width: 70%;
  height: 190px;
  margin: auto;
  border: 3px dashed var(--rfw-line-2);
  border-left-color: transparent;
  border-bottom-color: var(--rfw-accent-2);
  border-radius: 50%;
  transform: rotate(-12deg);
}

body.rfw-system-home .rfw-home-running-visual-copy {
  position: relative;
  z-index: 1;
}

body.rfw-system-home .rfw-home-running-visual-copy strong {
  display: block;
  font-family: Manrope, sans-serif;
  font-size: 2.1rem;
  line-height: 1.05;
  letter-spacing: -.04em;
}

body.rfw-system-home .rfw-home-running-visual-copy span {
  color: var(--rfw-text-soft);
}

body.rfw-system-home .rfw-home-feature-lines {
  display: grid;
  margin: 32px 0;
}

body.rfw-system-home .rfw-home-feature-line {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 14px;
  padding: 17px 0;
  border-top: 1px solid var(--rfw-line-2);
}

body.rfw-system-home .rfw-home-feature-line b {
  color: var(--rfw-home-running-num);
  font-weight: 800;
}

body.rfw-system-home .rfw-home-feature-line strong {
  display: block;
  font-family: Manrope, sans-serif;
}

body.rfw-system-home .rfw-home-feature-line span {
  color: var(--rfw-muted);
  font-size: .92rem;
}

/* ================================================================== *
 * 6. PERSONAL TRAINING
 * ================================================================== */
body.rfw-system-home .rfw-home-training {
  padding: 110px 0;
}

body.rfw-system-home .rfw-home-training-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 90px;
  align-items: center;
}

body.rfw-system-home .rfw-home-training-card {
  padding: 46px;
  border-radius: 32px;
  background: var(--rfw-home-grad-training);
  border: 1px solid var(--rfw-home-border-training);
  border-left: 6px solid var(--rfw-home-rule-training);
  box-shadow: var(--rfw-shadow);
}

body.rfw-system-home .rfw-home-training-card h3 {
  margin: 0 0 18px;
  font-size: 2rem;
  line-height: 1.1;
  letter-spacing: -.04em;
}

body.rfw-system-home .rfw-home-training-card p {
  margin: 0;
  color: var(--rfw-muted);
}

body.rfw-system-home .rfw-home-training-goals {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 11px;
  margin: 25px 0 30px;
}

body.rfw-system-home .rfw-home-training-goals span {
  padding: 13px;
  border: 1px solid var(--rfw-home-border-training);
  border-radius: 12px;
  background: var(--rfw-glass);
  color: var(--rfw-text-tick);
  font-size: .9rem;
}

body.rfw-system-home .rfw-home-training-goals span::before {
  content: "\2713";
  margin-right: 8px;
  color: var(--rfw-orange);
  font-weight: 800;
}

/* ================================================================== *
 * 7. STATEMENT BAND
 * ================================================================== */
body.rfw-system-home .rfw-home-statement {
  padding: 100px 0;
  background: var(--rfw-home-grad-statement);
  border-top: 1px solid var(--rfw-home-line-statement);
  border-bottom: 1px solid var(--rfw-home-line-statement);
}

body.rfw-system-home .rfw-home-statement-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 90px;
  align-items: center;
}

body.rfw-system-home .rfw-home-statement blockquote {
  margin: 0;
  font-family: Manrope, sans-serif;
  font-size: clamp(2rem, 4.7vw, 4.8rem);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -.055em;
}

body.rfw-system-home .rfw-home-statement blockquote span {
  color: var(--rfw-accent-deep);
}

body.rfw-system-home .rfw-home-statement-copy p {
  margin: 0;
  color: var(--rfw-muted);
  font-size: 1.08rem;
}

body.rfw-system-home .rfw-home-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 25px 0 27px;
}

body.rfw-system-home .rfw-home-chip {
  padding: 8px 13px;
  border: 1px solid var(--rfw-line-cta);
  border-radius: 999px;
  background: var(--rfw-glass);
  color: var(--rfw-text-tick);
  font-size: .85rem;
}

/* ================================================================== *
 * 8. LOCATIONS
 *
 * The homepage's OWN component (.rfw-home-place), not a skin over the
 * shared .rfw-place row. The difference that forced it is the worded
 * "Explore location" link at the foot of each card, which lives in the
 * markup rather than the styling — see home-places.php. Nothing here can
 * reach the shared row, and the shared row's CSS cannot reach this.
 * ================================================================== */
body.rfw-system-home .rfw-home-places {
  padding: 120px 0;
}

body.rfw-system-home .rfw-home-place-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 45px;
}

body.rfw-system-home .rfw-home-place {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 260px;
  padding: 29px;
  border: 1px solid var(--rfw-line-2);
  border-radius: 24px;
  background: var(--rfw-white);
  box-shadow: var(--rfw-shadow-card);
  transition: .2s ease;
}

body.rfw-system-home a.rfw-home-place:hover {
  transform: translateY(-3px);
  box-shadow: var(--rfw-shadow-card-hover);
}

/* The first card is the primary market, as the design sets it. */
body.rfw-system-home .rfw-home-place:first-child {
  background: var(--rfw-home-grad-featured);
  border-color: var(--rfw-home-border-primary);
}

body.rfw-system-home .rfw-home-place-label {
  color: var(--rfw-text-note);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* The featured card takes the accent for its label, as the design does. */
body.rfw-system-home .rfw-home-place:first-child .rfw-home-place-label {
  color: var(--rfw-accent-deep);
}

body.rfw-system-home .rfw-home-place h3 {
  margin: 35px 0 10px;
  font-size: 1.6rem;
  line-height: 1.1;
}

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

/*
 * Pinned to the foot by margin-top:auto, so cards of unequal copy length
 * still line their links up. The arrow is decorative and generated, which
 * keeps it out of the accessible name the card's heading already carries.
 */
body.rfw-system-home .rfw-home-place-link {
  margin-top: auto;
  padding-top: 18px;
  font-weight: 700;
  font-size: .88rem;
}

body.rfw-system-home .rfw-home-place-link::after {
  content: " \2192";
}

/* ================================================================== *
 * 9. FAQs
 *
 * The existing two-column split is already the design's. Only the band
 * tone and rhythm change.
 * ================================================================== */
body.rfw-system-home .rfw-faq {
  --rfw-section-bg: var(--rfw-paper);
  padding: 120px 0;
}

/*
 * .75fr/1.25fr and an 80px gutter; sections.css runs .7/1.3 at 76px.
 *
 * FENCED ABOVE 1021px, AND THAT FENCE IS LOAD-BEARING. sections.css collapses
 * .rfw-faq-grid to a single column inside `@media (max-width: 1020px)`, and a
 * media query contributes nothing to specificity — so this selector's (0,2,0)
 * would beat that block's (0,1,0) at every width and hold the accordion in two
 * columns down to 390px. It did exactly that until this fence was added. Same
 * rule the hero proportions above already document.
 */
@media (min-width: 1021px) {
  body.rfw-system-home .rfw-faq-grid {
    grid-template-columns: .75fr 1.25fr;
    gap: 80px;
  }
}

/*
 * The design's rows are taller and its questions a size up. Weight 700, not
 * base.css's 800: at 1.08rem the extra-bold reads as shouting next to the
 * section title above it.
 */
body.rfw-system-home .rfw-accordion details {
  padding: 22px 0;
}

body.rfw-system-home .rfw-accordion summary {
  font-size: 1.08rem;
  font-weight: 700;
}

body.rfw-system-home .rfw-accordion summary::after {
  font-size: 1.3rem;
}

/* ================================================================== *
 * 10. GET STARTED
 * ================================================================== */
/*
 * The #contact alias (see home-proposal.php). Display:block with no box so it
 * is a scroll target and nothing else — an inline element would land the jump
 * a line off, and a sized one would add a gap between the bands.
 */
body.rfw-system-home .rfw-anchor-alias {
  display: block;
  height: 0;
}

/*
 * A CENTRED BAND, because the form is gone.
 *
 * The design's closing section is two columns only because the right one holds
 * a form. With the form removed there is nothing for a left-aligned column to
 * sit against, and a half-empty row reads as a layout that lost something. The
 * band keeps everything else the design specifies: its gradient, its rhythm and
 * its oversized closing heading.
 */
body.rfw-system-home .rfw-home-proposal {
  padding: 115px 0;
  background: var(--rfw-home-cta-bg);
}

body.rfw-system-home .rfw-home-proposal-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/*
 * .rfw-eyebrow is an inline-flex with a rule before it, so text-align cannot
 * centre it — the flex column's align-items does, and this keeps the rule and
 * the word together as one centred unit.
 */
body.rfw-system-home .rfw-home-proposal-inner .rfw-eyebrow {
  margin-bottom: 18px;
}

/*
 * The design's closing title runs larger than every other section title on the
 * page — clamp(2.6rem, 5.4vw, 5.5rem) against the shared 4.5rem ceiling.
 */
/*
 * text-wrap:balance, because this heading is centred. Left to itself it breaks
 * as "Build the right / program for your team." — a short line over a long one,
 * which on a centred block reads as a mistake rather than a rhythm. The max-width
 * is the fallback for engines without balancing; it is generous enough that it
 * never fights the balancer where one exists.
 */
body.rfw-system-home .rfw-home-proposal .rfw-section-title {
  max-width: 20ch;
  font-size: clamp(2.6rem, 5.4vw, 5.5rem);
  text-wrap: balance;
}

body.rfw-system-home .rfw-home-proposal-copy {
  max-width: 640px;
  margin: 26px 0 0;
  color: var(--rfw-muted);
  font-size: 1.08rem;
  line-height: 1.6;
}

body.rfw-system-home .rfw-home-proposal-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 36px;
}

body.rfw-system-home .rfw-home-proposal-actions .rfw-btn {
  min-height: 54px;
  padding: 0 28px;
}

/* ================================================================== *
 * 11. RESPONSIVE
 *
 * The theme's own two breakpoints, 1020px and 650px. No third one is
 * introduced: the homepage collapses where every other page collapses,
 * so the header, footer and these sections change shape together.
 * ================================================================== */
@media (max-width: 1020px) {
  /*
   * NO PADDING OVERRIDE HERE, deliberately. The design file changes the hero's
   * vertical rhythm only at 650px; at tablet it keeps the desktop 100/105, and
   * the band is tall enough stacked that trimming it reads as a cramped header
   * rather than a deliberate one.
   */

  /*
   * Photo first, then text, then the buttons — the order the shared hero
   * block already establishes at this width by making .rfw-hero-grid a
   * column flex and dissolving .rfw-hero-copy with display:contents.
   *
   * align-self IS LOAD-BEARING, and for the reason sections.css spells out
   * for the showcase it used to wrap: .rfw-hero-grid carries
   * `align-items: center`, which on a column flex container centres items
   * on the HORIZONTAL axis and therefore sizes each to its content. Every
   * slide inside is absolutely positioned, so this figure's content width
   * is zero and it collapses to nothing without the stretch. That rule
   * named .rfw-hero-showcase, which is now nested one level in and no
   * longer the flex item, so the figure has to claim it.
   */
  body.rfw-system-home .rfw-home-hero-media {
    order: 1;
    align-self: stretch;
    max-width: 720px;
  }

  /*
   * 3/2 resolves to 720x480 at the design's own 720px cap — its
   * `.hero-media{min-height:480px}` for this range. sections.css sets 16/10
   * here, which is 30px shallower.
   */
  body.rfw-system-home .rfw-home-hero-media .rfw-hero-slides {
    aspect-ratio: 3 / 2;
  }

  /* Landscape again, so the design re-centres the crop and lifts it. */
  body.rfw-system-home .rfw-home-hero-media .rfw-hero-slide img {
    object-position: center 42%;
  }

  /*
   * Centered text and centered CTAs, tablet and mobile only — the client's
   * explicit spec for this breakpoint range, distinct from every other hero
   * page (which stays left-aligned here; see sections.css's shared rule).
   *
   * Scoped to `body.rfw-system-home .rfw-home-hero` twice over — by the body class and
   * by the homepage-only section class — so it can never reach Personal
   * Training, Running Coaching or the four location heroes, which use the
   * same .rfw-hero-copy / .rfw-hero-title / .rfw-hero-actions class names.
   *
   * Only text-align and margin-inline are added: the shared rule in
   * sections.css never sets either, so this is purely additive, not an
   * override, and there is no specificity race to win.
   */
  body.rfw-system-home .rfw-home-hero .rfw-hero-copy > .rfw-eyebrow,
  body.rfw-system-home .rfw-home-hero .rfw-hero-title,
  body.rfw-system-home .rfw-home-hero .rfw-hero-lead,
  body.rfw-system-home .rfw-home-hero .rfw-hero-sub {
    text-align: center;
    margin-inline: auto;
  }

  body.rfw-system-home .rfw-home-hero .rfw-hero-actions {
    justify-content: center;
  }

  body.rfw-system-home .rfw-home-intro-grid,
  body.rfw-system-home .rfw-home-corporate-grid,
  body.rfw-system-home .rfw-home-running-grid,
  body.rfw-system-home .rfw-home-training-grid,
  body.rfw-system-home .rfw-home-statement-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  body.rfw-system-home .rfw-home-intro-note {
    position: static;
  }

  body.rfw-system-home .rfw-home-services-head {
    flex-direction: column;
    align-items: start;
  }

  body.rfw-system-home .rfw-home-service-grid {
    grid-template-columns: 1fr 1fr;
  }

  body.rfw-system-home .rfw-home-service--primary {
    grid-column: 1 / -1;
    min-height: 0;
  }

  /* The stagger is a desktop idea; in two columns it reads as a mistake. */
  body.rfw-system-home .rfw-home-service:not(.rfw-home-service--primary) {
    margin-top: 0;
  }

  body.rfw-system-home .rfw-home-running-visual {
    min-height: 420px;
  }

  /* Full width now, so the desktop inset would only cramp the copy. */
  body.rfw-system-home .rfw-home-running-body {
    padding-right: 0;
  }

  body.rfw-system-home .rfw-home-place-grid {
    grid-template-columns: 1fr 1fr;
  }

  body.rfw-system-home .rfw-home-rollout,
  body.rfw-system-home .rfw-home-training-card {
    padding: 34px;
  }
}

@media (max-width: 650px) {
  body.rfw-system-home .rfw-home-hero {
    padding: 76px 0;
  }

  body.rfw-system-home .rfw-home-hero-media {
    border-radius: 24px;
  }

  /*
   * Back to a portrait-leaning frame: 4/4.55 is ~389px inside the 342px
   * column a 390px phone leaves, which is the design's `min-height: 390px`
   * for this range. sections.css's 4/3 lands at 256px — short enough that the
   * photograph stops carrying the hero.
   */
  body.rfw-system-home .rfw-home-hero-media .rfw-hero-slides {
    aspect-ratio: 4 / 4.55;
  }

  body.rfw-system-home .rfw-home-hero-caption {
    left: 20px;
    right: 20px;
    bottom: 18px;
    font-size: .92rem;
  }

  body.rfw-system-home .rfw-home-hero-media .rfw-hero-dots {
    right: 18px;
    bottom: 18px;
  }

  body.rfw-system-home .rfw-home-intro,
  body.rfw-system-home .rfw-home-services,
  body.rfw-system-home .rfw-home-corporate,
  body.rfw-system-home .rfw-home-running,
  body.rfw-system-home .rfw-home-training,
  body.rfw-system-home .rfw-home-statement,
  body.rfw-system-home .rfw-home-places,
  body.rfw-system-home .rfw-faq,
  body.rfw-system-home .rfw-home-proposal {
    padding: 72px 0;
  }

  body.rfw-system-home .rfw-home-principles,
  body.rfw-system-home .rfw-home-service-grid,
  body.rfw-system-home .rfw-home-program-grid,
  body.rfw-system-home .rfw-home-training-goals,
  body.rfw-system-home .rfw-home-place-grid {
    grid-template-columns: 1fr;
  }

  body.rfw-system-home .rfw-home-service {
    min-height: 0;
  }

  body.rfw-system-home .rfw-home-service h3 {
    margin-top: 44px;
  }

  body.rfw-system-home .rfw-home-running-visual {
    min-height: 380px;
    padding: 28px;
  }

  body.rfw-system-home .rfw-home-route {
    height: 130px;
  }

  body.rfw-system-home .rfw-home-place {
    min-height: 0;
  }

  body.rfw-system-home .rfw-home-place h3 {
    margin-top: 24px;
  }

  body.rfw-system-home .rfw-home-rollout,
  body.rfw-system-home .rfw-home-training-card {
    padding: 26px;
  }

  body.rfw-system-home .rfw-home-proposal-actions .rfw-btn {
    width: 100%;
  }
}