/* hero */
/**
 * Hero Block styles.
 *
 * One layout, five modifiers. The variants differ only in height, how far the image
 * bleeds in from the right, and how wide the copy column runs — everything else is
 * shared, which is the whole reason these are one block rather than five.
 *
 * Below 860px the image unpins into a band above the copy, so the headline sits on
 * flat background instead of a busy part of the photograph.
 */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  min-height: 440px;
  background: var(--bg-base, #121412);
  color: var(--text, #ffffff);
}

.hero--homepage { min-height: 600px; }
.hero--interior { min-height: 525px; }
.hero--plain    { min-height: 525px; }
.hero--service  { min-height: 525px; }
.hero--article  { min-height: 546px; }

/* Media ------------------------------------------------------------------
   Absolutely positioned so the photograph bleeds off the right edge with no
   container margin. The inset controls how far it reaches toward the copy. */

.hero__media {
  position: absolute;
  inset: 0 0 0 42%;
  z-index: 0;
}

.hero--homepage .hero__media { inset: 0 0 0 38%; }
.hero--article  .hero__media { inset: 0 0 0 40%; }
.hero--plain    .hero__media { inset: 0 0 0 44%; }
.hero--service  .hero__media { inset: 0 0 0 46%; }

.hero__media picture,
.hero__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Carries the image into the flat background behind the copy. */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    var(--bg-base, #121412) 0%,
    rgba(18, 20, 18, 0.88) 20%,
    rgba(18, 20, 18, 0.28) 62%,
    rgba(18, 20, 18, 0) 100%
  );
}

.hero__placeholder {
  height: 100%;
  border-radius: 0;
}

/* Copy -------------------------------------------------------------------- */

/* Padded measure, not --container: the gutter sits on this element rather than
   an outer box, so the copy lines up with the .section blocks either side. */
.hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--container-padded);
  margin-inline: auto;
  padding-inline: var(--space-gutter);
}

.hero__copy {
  max-width: 560px;
  padding-block: clamp(2.75rem, 6.5vw, 5rem);
}

.hero--homepage .hero__copy {
  max-width: 80%;
  padding-top: clamp(3.5rem, 6.4vw, 5.75rem);
  padding-bottom: clamp(3.5rem, 8.3vw, 7.45rem);
}
/* The interior and service comps run the copy to a 1280px measure with a tight
   band above and below — the height comes from the copy, not from padding. In rem
   so it tracks the root scale; at 960px flat the H1s wrapped a line early. */
.hero--interior .hero__copy,
.hero--plain    .hero__copy {
  max-width: 60rem;
  padding-top: 2.3rem;
  padding-bottom: 2.95rem;
}

.hero--service .hero__copy {
  max-width: 60rem;
  padding-top: 3.5rem;
  padding-bottom: 2.3rem;
}

/* The article hero carries just the kicker and the title — the comp sets it on a
   900px measure with a tighter band than the interior heroes. */
.hero--article .hero__copy {
  max-width: 56.25rem;
  padding-top: 4.9rem;
  padding-bottom: 2.9rem;
}

/* Eyebrow, headline and intro sit further apart on the interior heroes than on
   the homepage, where the whole stack is tighter. */
.hero__copy .eyebrow { margin-bottom: 1.625rem; font-size: 1.375rem; }

.hero--interior .hero__heading,
.hero--service  .hero__heading,
.hero--plain    .hero__heading { margin-bottom: 1.47rem; }

.hero--interior .hero__intro,
.hero--service  .hero__intro,
.hero--plain    .hero__intro { max-width: 44rem; margin-bottom: 4.3rem; }

.hero__heading {
  margin: 0 0 0.875rem;
  font-size: clamp(2.1rem, 4.4vw, 3.25rem);
  line-height: 1.19;
  color: var(--text, #ffffff);
}

.hero__subtitle {
  margin: 0 0 0.5rem;
  font-size: 1.656rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted, #c9cfc9);
}

.hero__intro {
  max-width: 30rem;
  margin: 0 0 1.5rem;
  font-size: 1.3125rem;
  line-height: 1.71;
  color: var(--text, #ffffff);
}

/* The comp drops the homepage button row a long way clear of the intro — roughly
   9% of the viewport width — so the gap is set in vw and capped, not a flat rem. */
.hero--homepage .hero__intro { max-width: 38rem; margin-bottom: clamp(2.5rem, 8.2vw, 7.375rem); }

.hero__note {
  margin-top: 1.5rem;
  font-size: 1.3125rem;
  color: var(--muted, #c9cfc9);
}

.hero__note a {
  color: var(--accent, #5ad05a);
  font-weight: 600;
  text-decoration: none;
}

.hero__note a:hover,
.hero__note a:focus-visible { text-decoration: underline; }

.hero__note > :first-child { margin-top: 0; }
.hero__note > :last-child  { margin-bottom: 0; }

/* The intro is the last element before the buttons on most variants, so the
   button row carries no extra top margin of its own. */
.hero__buttons { margin-top: 0; }

/* Editor-only prompt when no button has been added yet. */
.hero__buttons-empty {
  margin: 0;
  font-size: 1.0625rem;
  color: var(--muted, #c9cfc9);
  font-style: italic;
}

/* Responsive -------------------------------------------------------------- */

@media (max-width: 860px) {
  .hero,
  .hero--homepage,
  .hero--interior,
  .hero--plain,
  .hero--service,
  .hero--article {
    display: block;
    min-height: 0;
  }

  .hero__media,
  .hero--homepage .hero__media,
  .hero--article .hero__media,
  .hero--plain .hero__media,
  .hero--service .hero__media {
    position: relative;
    inset: auto;
    aspect-ratio: 16 / 10;
  }

  .hero__media::after {
    background: linear-gradient(180deg, rgba(18, 20, 18, 0.5) 0%, rgba(18, 20, 18, 0) 45%);
  }

  .hero__copy,
  .hero--homepage .hero__copy,
  .hero--plain .hero__copy,
  .hero--service .hero__copy,
  .hero--article .hero__copy {
    max-width: none;
    padding-block: clamp(2rem, 8vw, 3rem);
  }

  .hero__intro,
  .hero--homepage .hero__intro { max-width: none; }

  .hero--homepage .hero__intro { margin-bottom: 2rem; }
}

@media (max-width: 560px) {
  .hero__media { aspect-ratio: 16 / 9; }
}

/* split-content */
/**
 * Split Content Block styles.
 *
 * Copy is first in the DOM; --media-left moves the image to column one visually with
 * `order`, so the heading still leads for screen readers and on mobile.
 */

.split-content {
  background: var(--bg-base, #121412);
  color: var(--text, #ffffff);
}

.split-content__inner {
  display: grid;
  grid-template-columns: 1fr 0.953fr;
  gap: clamp(1.75rem, 4.2vw, 3.75rem);
  align-items: center;
}

.split-content--media-left .split-content__inner { grid-template-columns: 0.953fr 1fr; }

/* A portrait image takes a narrower column than a landscape one — the comps run
   535px against 656px, with the same 60px gutter either way. */
.split-content__inner:has(.split-content__media--portrait) { grid-template-columns: 1fr 0.738fr; }
.split-content--media-left .split-content__inner:has(.split-content__media--portrait) { grid-template-columns: 0.738fr 1fr; }

/* Narrow — the image takes a smaller share so the copy carries the section. Written
   after the :has() portrait rules above so it wins for a portrait image too, which is
   the case it was added for. */
.split-content--width-narrow .split-content__inner,
.split-content--width-narrow .split-content__inner:has(.split-content__media--portrait) {
  grid-template-columns: 1fr 0.48fr;
}

.split-content--width-narrow.split-content--media-left .split-content__inner,
.split-content--width-narrow.split-content--media-left .split-content__inner:has(.split-content__media--portrait) {
  grid-template-columns: 0.48fr 1fr;
}
.split-content--media-left .split-content__media { order: -1; }

/* Copy ---------------------------------------------------------------------- */

/* The comps run the copy the full width of its column (≈630px), not a 560 measure. */
.split-content__copy { max-width: 40rem; }

.split-content__heading {
  margin: 0 0 1.25rem;
  font-size: clamp(1.75rem, 3.2vw, 2.8125rem);
  color: var(--text, #ffffff);
}

.split-content__heading.h-underline { margin-bottom: 1.5rem; }

/* The comps leave ~75px under the homepage's "ABOUT" — it carries the band on its
   own, with no eyebrow above it. Scoped to the display style so the plain and
   underlined instances keep their tighter spacing. */
.split-content__heading.h-display:not(.h-underline) { margin-bottom: 3.5rem; }

.split-content__body {
  font-size: 1.3125rem;
  line-height: 1.7;
  color: var(--muted, #c9cfc9);
}

.split-content__body > :first-child { margin-top: 0; }
.split-content__body > :last-child  { margin-bottom: 0; }

/* Signature ----------------------------------------------------------------- */

.split-content__signature { margin-top: 1.5rem; }

.split-content__sig-name {
  margin: 0;
  font-size: 1.3125rem;
  font-weight: 700;
  color: var(--text, #ffffff);
}

.split-content__sig-role {
  margin: 0;
  font-size: 1.3125rem;
  color: var(--muted, #c9cfc9);
}

.split-content__buttons { margin-top: 1.5rem; }

/* Media --------------------------------------------------------------------- */

.split-content__media { margin: 0; }

.split-content__media picture,
.split-content__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.split-content__media--landscape { aspect-ratio: 3 / 2; }
.split-content__media--portrait  { aspect-ratio: 3 / 4; }
.split-content__media--square    { aspect-ratio: 1 / 1; }

/* Responsive ---------------------------------------------------------------- */

@media (max-width: 860px) {
  /* The --width-narrow selectors must be listed here too: they carry two classes and
     would otherwise outweigh the bare .split-content__inner below and keep the image
     in its own narrow column on a phone. */
  .split-content__inner,
  .split-content--media-left .split-content__inner,
  .split-content--width-narrow .split-content__inner,
  .split-content--width-narrow .split-content__inner:has(.split-content__media--portrait),
  .split-content--width-narrow.split-content--media-left .split-content__inner,
  .split-content--width-narrow.split-content--media-left .split-content__inner:has(.split-content__media--portrait) {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  /* Image always leads once stacked, whichever side it sat on. */
  .split-content__media,
  .split-content--media-left .split-content__media { order: -1; }

  .split-content__copy { max-width: none; }

  .split-content__media--landscape,
  .split-content__media--portrait,
  .split-content__media--square { aspect-ratio: 16 / 10; }
}

/* split-points */
/**
 * Split Points Block styles.
 *
 * Three arrangements of the same content: points stacked under the intro, points as
 * hairline-divided rows in their own column, or points side by side as columns.
 */

.split-points {
  background: var(--bg-base, #121412);
  color: var(--text, #ffffff);
}

.split-points__inner {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(1.75rem, 5vw, 4.5rem);
  align-items: center;
}

.split-points--media-right .split-points__media { order: 2; }
.split-points--media-none .split-points__inner { grid-template-columns: 1.05fr 0.95fr; }

/* The divided layout splits copy and points into the two columns instead. */
.split-points--divided .split-points__inner { align-items: start; }

.split-points--divided .split-points__copy {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(1.75rem, 5vw, 4.5rem);
  grid-column: 1 / -1;
}

/* Media --------------------------------------------------------------------- */

.split-points__media {
  margin: 0;
  aspect-ratio: 4 / 3;
}

.split-points--stacked .split-points__media { aspect-ratio: 1 / 1; }

.split-points__media picture,
.split-points__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Copy ---------------------------------------------------------------------- */

.split-points__heading {
  margin: 0 0 1rem;
  font-size: clamp(1.75rem, 3.2vw, 2.8125rem);
  color: var(--text, #ffffff);
}

.split-points__intro {
  max-width: 33rem;
  margin: 0 0 1.5rem;
  font-size: 1.3125rem;
  line-height: 1.65;
  color: var(--muted, #c9cfc9);
}

/* Points -------------------------------------------------------------------- */

.split-points__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.split-points__point {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 1rem;
  padding-block: 0.75rem;
}

.split-points__icon {
  margin-top: 2px;
  color: var(--muted, #c9cfc9);
}

.split-points__title {
  margin: 0 0 0.125rem;
  font-size: 1.125rem;
}

.split-points--divided .split-points__title {
  font-size: 1.28rem;
  font-weight: 700;
  color: var(--text, #ffffff);
}

.split-points__text {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.55;
  color: var(--muted, #c9cfc9);
}

.split-points__button { margin-top: 1rem; }

/* Divided — rows separated by hairlines, no icons column shift. ------------- */

.split-points--divided .split-points__point {
  padding-block: 1.5rem;
  border-bottom: 1px solid var(--border);
}

.split-points--divided .split-points__point:first-child { padding-top: 0; }
.split-points--divided .split-points__point:last-child  { border-bottom: 0; }

/* Columns — points side by side, each with its own CTA. -------------------- */

.split-points--columns .split-points__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.split-points--columns .split-points__point {
  display: block;
  padding-block: 0;
}

.split-points--columns .split-points__icon {
  display: block;
  margin: 0 0 0.75rem;
}

/* Responsive ---------------------------------------------------------------- */

@media (max-width: 860px) {
  .split-points__inner,
  .split-points--media-none .split-points__inner,
  .split-points--divided .split-points__copy {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  /* Image leads once stacked, whichever side it sat on. */
  .split-points__media,
  .split-points--media-right .split-points__media { order: -1; }

  .split-points--stacked .split-points__media { aspect-ratio: 16 / 10; }
  .split-points__intro { max-width: none; }

  .split-points--divided .split-points__point:first-child { padding-top: 1.5rem; }
}

@media (max-width: 520px) {
  .split-points--columns .split-points__list { grid-template-columns: 1fr; gap: 2rem; }
  .split-points--columns .split-points__button { width: 100%; }
}

/* card-grid */
/**
 * Card Grid Block styles.
 *
 * Two fills: solid green cards, or plain columns with a hairline above them. A card
 * with no body text becomes an icon-and-label tile, which is what the homepage
 * audience row uses.
 */

.card-grid {
  background: var(--bg-base, #121412);
  color: var(--text, #ffffff);
}

.card-grid--cards.card-grid--center { background: var(--bg-alt, #1b1e1b); }

.card-grid__heading {
  margin: 0;
  font-size: clamp(1.75rem, 3.2vw, 2.8125rem);
  color: var(--text, #ffffff);
}

.card-grid__head { margin-bottom: 1.5rem; }
.card-grid--center .card-grid__head { margin-bottom: 2rem; }

/* Grid ---------------------------------------------------------------------- */

.card-grid__grid {
  display: grid;
  gap: 1.125rem;
  align-items: stretch;
}

.card-grid__grid--2 { grid-template-columns: repeat(2, 1fr); }
.card-grid__grid--3 { grid-template-columns: repeat(3, 1fr); }
.card-grid__grid--4 { grid-template-columns: repeat(4, 1fr); }

.card-grid--columns .card-grid__grid { gap: 1.5rem; }

/* Cards --------------------------------------------------------------------- */

.card-grid__card {
  display: block;
  padding: 1.5rem;
  text-decoration: none;
}

.card-grid--cards .card-grid__card {
  background: var(--accent, #5ad05a);
  color: var(--green-ink, #0e1c0e);
  transition:
    background-color 0.22s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-grid--cards a.card-grid__card:hover,
.card-grid--cards a.card-grid__card:focus-visible {
  background: var(--accent-l);
  transform: translateY(-3px);
}

/* Plain columns — a rule above, no fill. */
.card-grid--columns .card-grid__card {
  padding: 1rem 0 0;
  border-top: 1px solid var(--border);
  background: none;
  color: var(--text, #ffffff);
  transition: border-color 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Columns sit on the dark page, so a fill on hover would sink the white copy —
   the rule and the title pick up the accent instead. */
.card-grid--columns a.card-grid__card:hover,
.card-grid--columns a.card-grid__card:focus-visible { border-top-color: var(--accent, #5ad05a); }

.card-grid--columns a.card-grid__card:hover .card-grid__title,
.card-grid--columns a.card-grid__card:focus-visible .card-grid__title { color: var(--accent, #5ad05a); }

/* Icon-and-label tile — centred, taller, no body copy. */
.card-grid--cards .card-grid__card--label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 1rem;
  /* The comps' 252px tile, in proportion to the narrower measure. */
  min-height: 9.5rem;
  padding: 2rem 1rem;
  text-align: center;
}

.card-grid__icon { flex: none; }

.card-grid--cards .card-grid__icon { color: var(--green-ink, #0e1c0e); }
.card-grid--columns .card-grid__icon { margin-bottom: 0.75rem; color: var(--muted, #c9cfc9); }

/* Icon-and-label tiles carry no body copy, so the icon is the card's main visual
   weight — sized up from the base 32px. These are filled shapes with no stroke
   of their own, so a bit of weight is added with a hairline currentColor outline
   rather than just scaling the fill up; non-scaling-stroke keeps that outline a
   constant pixel width across the icons' very different source viewBoxes. */
.card-grid__card--label .card-grid__icon {
  width: 3rem;
  height: 3rem;
}
.card-grid__card--label .card-grid__icon path,
.card-grid__card--label .card-grid__icon g {
  stroke: currentColor;
  stroke-width: 1.25;
  vector-effect: non-scaling-stroke;
}

.card-grid__title {
  margin: 0 0 0.5rem;
  font-size: 1.3125rem;
  font-weight: 700;
  line-height: 1.3;
}

.card-grid--columns .card-grid__title { font-size: 1.125rem; color: var(--text, #ffffff); }

/* The label tile sets its title in small caps and drops the gap.

   Medium, not the heading weight, and untracked: the artwork sets these labels in
   Montserrat Medium 29/34.8 with no letter-spacing. Tracked-out Bold is what
   pushed "CLUBS AND SPORTING ORGANISATIONS" onto a third line — the artwork has
   every one of these on two. */
.card-grid__card--label .card-grid__title {
  margin: 0;
  /* Sized against the tile, not the artboard: the comps run the label at 29px in a
     422px tile — the same ratio in the narrower signed-off measure. Any larger and
     "Clubs and sporting organisations" takes a third line. */
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: uppercase;
}

.card-grid__text {
  margin: 0;
  font-size: 1.3125rem;
  line-height: 1.5;
}

.card-grid--cards .card-grid__text { color: rgba(14, 28, 14, 0.86); }
.card-grid--columns .card-grid__text { font-size: 1.125rem; line-height: 1.6; color: var(--muted, #c9cfc9); }

/* Responsive ---------------------------------------------------------------- */

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

@media (max-width: 520px) {
  .card-grid__grid--2,
  .card-grid__grid--3,
  .card-grid__grid--4 { grid-template-columns: 1fr; }

  /* Label tiles read better as rows than as a stack of tall centred boxes. */
  .card-grid--cards .card-grid__card--label {
    flex-direction: row;
    justify-content: flex-start;
    min-height: 0;
    padding: 1.25rem;
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  .card-grid--cards .card-grid__card,
  .card-grid--columns .card-grid__card { transition: none; }
  .card-grid--cards a.card-grid__card:hover,
  .card-grid--cards a.card-grid__card:focus-visible { transform: none; }
}

/* how-it-works */
/**
 * How It Works Block styles.
 *
 * The connector rules between circles are drawn with ::before / ::after on each step
 * and suppressed on the first and last, so no extra markup or JS is needed and the
 * line count follows the number of steps automatically.
 */

.how-it-works {
  background: var(--bg-base, #121412);
  color: var(--text, #ffffff);
}

.how-it-works__heading {
  margin: 0;
  font-size: clamp(1.75rem, 3.2vw, 2.8125rem);
  color: var(--text, #ffffff);
}

.how-it-works--expanded .how-it-works__head { max-width: 46rem; }

/* Steps -------------------------------------------------------------------- */

.how-it-works__steps {
  /* Geometry the connector rules and the circle both read, so a size variant or a
     step count only has to restate these three rather than every rule downstream. */
  --hiw-circle: 4.5rem;          /* circle diameter */
  --hiw-gap:    1.125rem;        /* must track `gap` below, or connectors mis-reach */
  --hiw-clear:  6.42rem;         /* centre of circle to start of rule */

  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(3, 1fr);   /* fallback; the count class below wins */
  gap: var(--hiw-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Track count follows the step count, emitted by the template. Six wraps to 3 + 3
   rather than running six narrow columns. */
.how-it-works__steps--1 { grid-template-columns: 1fr; }
.how-it-works__steps--2 { grid-template-columns: repeat(2, 1fr); }
.how-it-works__steps--3 { grid-template-columns: repeat(3, 1fr); }
.how-it-works__steps--4 { grid-template-columns: repeat(4, 1fr); }
.how-it-works__steps--5 { grid-template-columns: repeat(5, 1fr); }
.how-it-works__steps--6 { grid-template-columns: repeat(3, 1fr); }

/* Four and five give ~250px columns instead of ~440px. The 6.42rem clearance was
   measured for the wide column and would leave a 60px stub, so tighten both the
   clearance and the circle at these counts. */
.how-it-works__steps--4,
.how-it-works__steps--5 {
  --hiw-circle: 3.5rem;
  --hiw-clear:  3.6rem;
}

.how-it-works--large .how-it-works__steps {
  max-width: 60rem;
  margin-inline: auto;
}

.how-it-works--expanded .how-it-works__steps {
  --hiw-gap:    clamp(1.5rem, 4vw, 3.5rem);
  --hiw-circle: 3rem;
}

.how-it-works__step {
  counter-increment: step;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.how-it-works--expanded .how-it-works__step {
  align-items: flex-start;
  text-align: left;
}

/* Connector rules ----------------------------------------------------------
   In the artwork this is one continuous 3px white rule running circle-to-circle,
   vertically centred on them. Drawing it as two halves — one per step, each
   stopping at its own column edge — leaves the grid gap punched out of the
   middle, so only ::after is used and it reaches across the gap into the next
   column with a negative right offset.

   Geometry, measured off the comps: circles are 96px and sit 595px apart, with
   the rule clearing each one by 88px. So it starts 137px (radius + clearance)
   past the centre and ends the same distance short of the next centre, which
   from this column's right edge is 137px − gap − 50%. */

.how-it-works__step::after {
  content: "";
  position: absolute;
  top: calc(var(--hiw-circle) / 2);
  left: calc(50% + var(--hiw-clear));
  right: calc(var(--hiw-clear) - var(--hiw-gap) - 50%);
  height: 0.14rem;
  background: var(--text, #ffffff);
}

.how-it-works__step:last-child::after { display: none; }
.how-it-works__steps--6 .how-it-works__step:nth-child(3n)::after { display: none; }

/* Expanded left-aligns the circles, so the rule starts at the circle's edge
   rather than from the column centre. */
.how-it-works--expanded .how-it-works__step::after {
  top: calc(var(--hiw-circle) / 2);
  left: calc(var(--hiw-circle) + 3.2rem);   /* 6.2rem at the comped 3rem circle */
  right: calc(-1 * var(--hiw-gap));
}

.how-it-works--expanded .how-it-works__step:last-child::after { display: none; }
.how-it-works__steps--6 .how-it-works__step:nth-child(3n)::after { display: none; }

/* Circle ------------------------------------------------------------------- */

.how-it-works__circle {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  /* 96px across in every comp that has this row; --hiw-circle carries it so the
     connector can position itself off the same number. */
  width: var(--hiw-circle);
  height: var(--hiw-circle);
  margin-bottom: 1.75rem;
  border-radius: 50%;
  background: var(--accent, #5ad05a);
  color: var(--green-ink, #0e1c0e);
  font-family: var(--f-display);
  font-size: 3.28rem;
  font-weight: 500;   /* Medium 70px — the numerals are not bold in the artwork */
}

.how-it-works__circle::before { content: counter(step); }

.how-it-works--large .how-it-works__circle {
  margin-bottom: 1.5rem;
  font-size: 2.1rem;
}

.how-it-works--expanded .how-it-works__circle {
  margin-bottom: 1.5rem;
  font-size: 1.25rem;
}

/* The numeral has to come down with the smaller circle at four and five steps. */
.how-it-works__steps--4 .how-it-works__circle,
.how-it-works__steps--5 .how-it-works__circle { font-size: 2.1rem; }

/* Copy --------------------------------------------------------------------- */

.how-it-works__title {
  margin: 0 0 0.5rem;
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--text, #ffffff);
}

.how-it-works--large .how-it-works__title,
.how-it-works--expanded .how-it-works__title {
  margin-bottom: 0.75rem;
  font-size: 1.125rem;
}

.how-it-works__text {
  max-width: 14.5rem;
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.55;
  color: var(--muted, #c9cfc9);
}

.how-it-works--large .how-it-works__text { max-width: 15.5rem; line-height: 1.6; }

.how-it-works__steps--4 .how-it-works__text,
.how-it-works__steps--5 .how-it-works__text { max-width: 100%; }
.how-it-works--expanded .how-it-works__text { max-width: none; line-height: 1.65; }

/* Responsive ---------------------------------------------------------------- */

/* Four, five and six columns get too narrow before the generic 720px stack, so they
   drop to two first. Five then leaves step five alone on row three, which is tidier
   than the ragged 3 + 2 that going to three columns would give. The columns are wide
   again at two up, so the clearance goes back to the measured value. */
@media (max-width: 1100px) {
  .how-it-works__steps--4,
  .how-it-works__steps--5,
  .how-it-works__steps--6 {
    grid-template-columns: repeat(2, 1fr);
    --hiw-clear: 6.42rem;
  }

  .how-it-works__steps--4 .how-it-works__step:nth-child(2n)::after,
  .how-it-works__steps--5 .how-it-works__step:nth-child(2n)::after,
  .how-it-works__steps--6 .how-it-works__step:nth-child(2n)::after { display: none; }

  /* Six is two up here, not three, so the row-end rule from the wide layout no
     longer describes where its rows break. */
  .how-it-works__steps--6 .how-it-works__step:nth-child(3n)::after { display: revert; }
}

@media (max-width: 820px) {
  .how-it-works--expanded .how-it-works__steps { grid-template-columns: 1fr; gap: 2rem; }
  .how-it-works--expanded .how-it-works__step::after { display: none; }
  .how-it-works--expanded .how-it-works__circle { margin-bottom: 1rem; }
}

@media (max-width: 720px) {
  .how-it-works__steps { grid-template-columns: 1fr; gap: 2rem; }
  .how-it-works--large .how-it-works__steps { gap: 3rem; }

  /* Connectors become vertical once the steps stack.

     ::before carries no `content` anywhere else in this file, so it generated no box
     and the vertical connector has never actually drawn. Declaring it here is what
     the surrounding rules were always written for. */
  .how-it-works__step::before { content: ""; }

  .how-it-works__step::before,
  .how-it-works__step::after {
    top: auto;
    left: 50%;
    right: auto;
    width: 1px;
    height: 2rem;
  }

  .how-it-works__step::before { bottom: 100%; }
  .how-it-works__step::after  { display: none; }
  .how-it-works__step:first-child::before { display: none; }

  /* One column: the nth-child suppressions above describe rows that no longer
     exist, and ::after is hidden outright, so nothing needs reinstating. */
  .how-it-works__steps--4,
  .how-it-works__steps--5,
  .how-it-works__steps--6 { grid-template-columns: 1fr; }

  .how-it-works__text { max-width: 21rem; }
}

/* topic-cards */
/**
 * Topic Cards Block styles.
 */

.topic-cards {
  background: var(--bg-base, #121412);
  color: var(--text, #ffffff);
}

/* Head ----------------------------------------------------------------------- */

.topic-cards__head { margin-bottom: 1.5rem; }

/* Split puts the heading and the intro side by side. */
.topic-cards--split .topic-cards__head {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
}

.topic-cards__heading {
  margin: 0;
  font-size: clamp(1.75rem, 3.2vw, 2.8125rem);
  color: var(--text, #ffffff);
}

.topic-cards__intro {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.65;
  color: var(--muted, #c9cfc9);
}

.topic-cards--stacked .topic-cards__intro {
  max-width: 45rem;
  margin-top: 1rem;
}

.topic-cards--split .topic-cards__intro { padding-top: 0.5rem; }

/* Grid ------------------------------------------------------------------------ */

.topic-cards__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}

.topic-cards__card {
  padding: 1.5rem;
  background: var(--accent, #5ad05a);
  color: var(--green-ink, #0e1c0e);
}

.topic-cards__title {
  margin: 0 0 0.5rem;
  font-size: 1.28rem;
  font-weight: 700;
}

.topic-cards__text {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.5;
  color: rgba(14, 28, 14, 0.86);
}

/* Foot ------------------------------------------------------------------------ */

.topic-cards__foot {
  display: flex;
  justify-content: center;
  margin-top: 1.5rem;
}

/* Responsive ------------------------------------------------------------------ */

@media (max-width: 900px) {
  .topic-cards--split .topic-cards__head { grid-template-columns: 1fr; gap: 1.5rem; }
  .topic-cards__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 520px) {
  .topic-cards__grid { grid-template-columns: 1fr; }
  .topic-cards__foot .btn { width: 100%; }
}

/* cta-panel */
/**
 * CTA Panel Block styles.
 *
 * The panel is white on the dark page. .on-light (shared.css) flips --text/--muted for
 * the subtree, so everything inside can keep using the same tokens as any other block.
 *
 * `simple` is one column; the other three are aside + body divided by a vertical rule
 * that becomes a horizontal one when the panel stacks.
 */

.cta-panel {
  padding-block: 3rem;
  background: var(--bg-base, #121412);
  color: var(--text, #ffffff);
}

.cta-panel__inner {
  max-width: var(--container-padded);
  margin-inline: auto;
  padding-inline: var(--space-gutter);
}

.cta-panel__panel {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  padding: clamp(1.75rem, 4vw, 3.5rem);
}

/* Simple is a single row: copy then button, divided by a rule. -------------- */

.cta-panel--simple .cta-panel__panel { grid-template-columns: 1.4fr auto; }

.cta-panel--simple .cta-panel__body {
  padding-right: clamp(1.5rem, 4vw, 3.5rem);
  border-right: 1px solid var(--border);
}

/* When the panel carries no aside — the pattern the comps use — the copy and the
   button share one row inside the body instead of stacking. */
.cta-panel--simple .cta-panel__body:only-child {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: clamp(1.5rem, 4vw, 3.5rem);
  padding-right: 0;
  border-right: 0;
}

.cta-panel--simple .cta-panel__body:only-child .cta-panel__buttons {
  grid-column: 2;
  grid-row: 1 / -1;
}

/* The other three put the aside first and the CTA to its right. ------------- */

.cta-panel--quote .cta-panel__panel,
.cta-panel--points .cta-panel__panel { grid-template-columns: 1fr 1.15fr; }

.cta-panel--image .cta-panel__panel {
  grid-template-columns: 1fr 1.15fr;
  gap: 0;
  padding: 0;
  align-items: stretch;
}

.cta-panel--quote .cta-panel__body,
.cta-panel--points .cta-panel__body {
  padding-left: clamp(1.5rem, 4vw, 3.5rem);
  border-left: 1px solid var(--border);
}

.cta-panel--image .cta-panel__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1.75rem, 4vw, 3.5rem);
}

/* Copy ---------------------------------------------------------------------- */

.cta-panel__eyebrow {
  margin: 0 0 0.75rem;
  font-size: 1.3125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted, #c9cfc9);
}

.cta-panel__heading {
  margin: 0 0 1.5rem;
  font-size: clamp(1.5rem, 3.6vw, 3.28rem);
  line-height: 1.18;
  color: var(--text, #ffffff);
}

.cta-panel--simple .cta-panel__heading { margin-bottom: 0.75rem; }

.cta-panel__sub {
  margin: 0;
  font-size: 1.3125rem;
  color: var(--muted, #c9cfc9);
}

.cta-panel__buttons { margin-top: 0; }

.cta-panel__buttons-empty {
  margin: 0;
  font-size: 1.0625rem;
  font-style: italic;
  color: var(--muted, #c9cfc9);
}

/* Quote --------------------------------------------------------------------- */

.cta-panel__figure { margin: 0; }

.cta-panel__quote {
  margin: 0 0 1.5rem;
  font-size: clamp(1.15rem, 2vw, 1.78rem);
  font-style: italic;
  line-height: 1.55;
  color: var(--text, #ffffff);
}

/* Quotation marks are decoration, not content — kept out of the field value. */
.cta-panel__quote::before { content: "\201C"; }
.cta-panel__quote::after  { content: "\201D"; }

.cta-panel__attr {
  display: inline-block;
  padding-top: 0.75rem;
  border-top: 2px solid var(--accent, #5ad05a);
  font-size: 1.125rem;
  font-style: normal;
  line-height: 1.5;
  color: var(--muted, #c9cfc9);
}

.cta-panel__name {
  display: block;
  font-weight: 700;
  color: var(--text, #ffffff);
}

/* Image --------------------------------------------------------------------- */

.cta-panel__media { position: relative; }

.cta-panel__media picture,
.cta-panel__image {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 17.5rem;
  object-fit: cover;
}

/* Points -------------------------------------------------------------------- */

.cta-panel__points {
  margin: 0;
  padding: 0;
  list-style: none;
}

.cta-panel__point {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 1rem;
  padding-block: 0.75rem;
}

.cta-panel__icon {
  margin-top: 2px;
  color: var(--muted, #c9cfc9);
}

.cta-panel__point-text {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--text, #ffffff);
}

/* Responsive ---------------------------------------------------------------- */

@media (max-width: 820px) {
  .cta-panel--quote .cta-panel__panel,
  .cta-panel--points .cta-panel__panel,
  .cta-panel--image .cta-panel__panel,
  .cta-panel--simple .cta-panel__panel {
    grid-template-columns: 1fr;
  }

  /* The divider flips from vertical to horizontal. */
  .cta-panel--quote .cta-panel__body,
  .cta-panel--points .cta-panel__body {
    padding-left: 0;
    padding-top: 1.5rem;
    border-left: 0;
    border-top: 1px solid var(--border);
  }

  .cta-panel--simple .cta-panel__body {
    padding-right: 0;
    border-right: 0;
  }

  .cta-panel--image .cta-panel__panel { gap: 0; }
  .cta-panel__media picture,
  .cta-panel__image { min-height: 0; aspect-ratio: 16 / 9; }
}