/* 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; }
}

/* 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; }
}

/* callout-bar */
/**
 * Callout Bar Block styles.
 *
 * The panel variant is the one place in the design where the button inverts to black on
 * green — that treatment lives in buttons.css as .btn--invert rather than here.
 *
 * Two axes, set independently:
 *   style   panel (green box) or strip (one centred line)
 *   ground  dark (the design's usage) or light (a white band)
 *
 * On the light ground the template adds .on-light, which flips --text/--muted/--border
 * for the subtree. The green box is unaffected — it sets its own fill and ink — so only
 * the band around it changes.
 */

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

.callout-bar--panel { padding-block: 2rem; }
.callout-bar--strip { padding-block: 1.5rem; background: var(--bg-alt, #1b1e1b); }

/* Light ground — after the style rules so it wins the single-class tie. ---- */

.callout-bar--light,
.callout-bar--strip.callout-bar--light { background: var(--bg-invert, #ffffff); }

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

.callout-bar__box {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

/* Panel — solid green, statement left, button right. ----------------------- */

.callout-bar--panel .callout-bar__box {
  justify-content: space-between;
  padding: 2rem clamp(1.25rem, 3vw, 2.5rem);
  background: var(--accent, #5ad05a);
  color: var(--green-ink, #0e1c0e);
}

.callout-bar--panel .callout-bar__copy {
  flex: 1 1 26rem;
  min-width: 0;
}

.callout-bar--panel .callout-bar__title {
  margin: 0 0 0.5rem;
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.callout-bar__text {
  max-width: 35rem;
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.5;
  color: rgba(14, 28, 14, 0.86);
}

/* Strip — one centred line with a bracketed link. -------------------------- */

.callout-bar--strip .callout-bar__box {
  justify-content: center;
  text-align: center;
}

.callout-bar--strip .callout-bar__title {
  margin: 0;
  font-size: 1.78rem;
  font-weight: 800;
  color: var(--text, #ffffff);
}

.callout-bar__link {
  font-size: 1.78rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--accent, #5ad05a);
  transition: opacity 0.22s ease;
}

/* The brand green is a fill colour — as copy on white it sits at about 1.9:1, so the
   link steps down to the darker green that passes AA. Brackets and weight carry the
   affordance either way. */
.callout-bar--light .callout-bar__link { color: var(--accent-ink, #2e7d32); }

/* Brackets are decoration, so they stay out of the field value. */
.callout-bar__link::before { content: "[ "; }
.callout-bar__link::after  { content: " ]"; }

.callout-bar__link:hover,
.callout-bar__link:focus-visible { opacity: 0.75; }

@media (max-width: 640px) {
  .callout-bar--panel .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .callout-bar__link { transition: none; }
}

/* numbered-list */
/**
 * Numbered List Block styles.
 *
 * The numerals are a counter with a short vertical rule beneath, suppressed on the last
 * row so the list reads as a sequence that ends rather than one that trails off.
 *
 * Two layouts on opposite grounds, which is the thing to keep straight when editing:
 *
 *   with-image  a white panel dropped into the dark page — homepage, "Why athletes
 *               choose us". The template adds .on-light, which flips --text, --muted
 *               and --border for the subtree, so nothing here restates a colour.
 *   plain       stays on the dark page background — Start Here, "What happens next".
 *
 * Both draw the numerals the same way: large and light, with a short rule hung off
 * the baseline. Only the numeral colour differs — green on the white panel, muted
 * grey on the dark; the rule itself is --text on both, per the comps.
 */

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

/* .on-light supplies the white ground and the ink text tokens. */
.numbered-list--with-image { background: var(--bg-invert, #ffffff); }

.numbered-list--with-image .numbered-list__inner {
  display: grid;
  grid-template-columns: 316px 1fr;
  gap: clamp(1.75rem, 4.5vw, 4rem);
  align-items: start;
}

.numbered-list--plain .numbered-list__body {
  max-width: 68.5rem;
  margin-inline: auto;
}

.numbered-list__head { margin-bottom: 1.5rem; }

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

.numbered-list--plain .numbered-list__heading { font-size: clamp(1.35rem, 2.2vw, 1.875rem); }

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

.numbered-list__media {
  position: sticky;
  top: 1.5rem;
  margin: 0;
  aspect-ratio: 316 / 721;
}

.numbered-list__media picture,
.numbered-list__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Items --------------------------------------------------------------------- */

.numbered-list__items {
  counter-reset: item;
  margin: 0;
  padding: 0;
  list-style: none;
}

.numbered-list__item {
  counter-increment: item;
  display: grid;
  grid-template-columns: 94px 1fr;
  gap: 0;
  padding-block: 1rem;
}

.numbered-list--plain .numbered-list__item { grid-template-columns: 78px 1fr; }

.numbered-list__num {
  position: relative;
  /* Shrink to the digits instead of stretching across the grid column, so the rule
     below can sit at left: 50% and land on the numeral rather than on the column.
     Tabular figures keep 01–07 the same width, which is what holds the rules in a
     straight line down the list. */
  justify-self: start;
  font-family: var(--f-display);
  /* Set large and light in both layouts — the numerals are a quiet index, not a
     second heading competing with the item titles beside them. */
  font-size: 2.8125rem;
  font-weight: 300;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--accent, #5ad05a);
}

.numbered-list__num::before {
  /* Two digits, matching the design's 01–07 numbering. */
  content: "0" counter(item);
}

/* Connector rule, measured off the comps rather than eyeballed — it used to sit
   hard against the left of the numeral with a 10px gap above it, which is what
   read as wrong.
   Horizontally it is centred on the numeral, which left: 50% gives now the span
   shrink-wraps its digits. Vertically it hangs just past the numeral's box: with
   line-height 1 the baseline sits ~0.85em down, and the comp starts the rule about
   0.2em below that, so 1.05em. Everything is in em so the rule tracks the numeral
   at every breakpoint. Full contrast in both comps — black on the white panel,
   white on the dark page — which is exactly what --text does once .on-light has
   flipped it, so the border token was also too faint. */
.numbered-list__num::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 1.05em;
  width: 2px;
  height: 0.5em;
  margin-left: -1px;
  background: var(--text);
}

.numbered-list__item:last-child .numbered-list__num::after { display: none; }

/* The Start Here comp draws a noticeably longer rule than the homepage one — its
   rows are half again as tall, and the tick grows to match. Same numeral size in
   both, so only the rule changes. */
.numbered-list--plain .numbered-list__num::after {
  top: 1.12em;
  height: 0.86em;
}

/* On the dark ground the numerals step back to grey rather than green. */
.numbered-list--plain .numbered-list__num { color: var(--muted, #c9cfc9); }

.numbered-list__title {
  margin: 0 0 0.5rem;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text, #ffffff);
}

.numbered-list__text {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--muted, #c9cfc9);
}

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

@media (max-width: 860px) {
  .numbered-list--with-image .numbered-list__inner {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .numbered-list__media {
    position: static;
    aspect-ratio: 16 / 10;
  }
}

@media (max-width: 520px) {
  /* Stack the numeral above its copy. Beside it, the text column was down to about
     300px of a 358px screen and every title broke to two lines; stacked, the copy
     gets the full measure. */
  .numbered-list__item,
  .numbered-list--plain .numbered-list__item {
    grid-template-columns: 1fr;
    gap: 0.25rem;
  }

  .numbered-list__num { font-size: 1.375rem; }

  /* The tick joins numerals down a column. With the item stacked there is no column
     to run down — it would drop onto the title underneath instead. */
  .numbered-list__num::after { display: 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; }
}

/* testimonials */
/**
 * Testimonials Block styles.
 *
 * `stars` is white cards on the dark page; `grid` is photograph-led with no panel.
 * Quotes render in full in the card — there is no longer a dialog.
 */

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

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

.testimonials--grid .testimonials__heading { text-align: left; }

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

.testimonials__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.125rem;
  align-items: stretch;
}

.testimonials--grid .testimonials__grid {
  gap: 3rem 1.5rem;

  /* Natural card heights. Rows size to their tallest item, so stretching every
     card to match it pads the short ones with blank space — which is what reads
     as broken now the quotes are full length. `stars` keeps stretching: its CSS
     reorders the attribution below the quote, so that has to sit at the card foot. */
  align-items: start;
}

.testimonials--grid .testimonials__quote { flex: initial; }

/* The quote is now multi-paragraph wysiwyg rather than a single escaped string. */
.testimonials--grid .testimonials__quote > :first-child { margin-top: 0; }
.testimonials--grid .testimonials__quote > :last-child  { margin-bottom: 0; }
.testimonials--grid .testimonials__quote p + p { margin-top: 0.75em; }

/* Video play button, mirroring .ambassadors__play so the two read as one system. */
.testimonials__media { position: relative; }

.testimonials__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0;
  border: 0;
  background: rgba(8, 9, 8, 0.28);
  color: var(--accent, #5ad05a);
  cursor: pointer;
  transition: background-color 0.22s ease;
}

.testimonials__play:hover,
.testimonials__play:focus-visible { background: rgba(8, 9, 8, 0.45); }

@media (prefers-reduced-motion: reduce) {
  .testimonials__play { transition: none; }
}

/* Card ----------------------------------------------------------------------------- */

.testimonials__card {
  display: flex;
  flex-direction: column;
  margin: 0;
}

/* The rows past the sixth carry the `hidden` attribute until the "view all"
   expander is used. A class selector setting display beats the UA's [hidden]
   rule, so without this they render anyway and the expander does nothing. */
.testimonials__card[hidden] { display: none; }

/* The stars layout is a white panel, so it flips its own text tokens. */
.testimonials--stars .testimonials__card {
  --text: var(--ink, #121412);
  --muted: var(--ink-2);
  --border: var(--border-ink);

  padding: 1.5rem;
  background: var(--bg-invert, #ffffff);
  color: var(--ink-2);
}

.testimonials__media {
  margin-bottom: 1rem;
  aspect-ratio: 3 / 2;
}

/* The video stills on the testimonials page are near-square in the comp (428×450),
   not the 3:2 the homepage cards use. */
.testimonials--grid .testimonials__media {
  aspect-ratio: 428 / 450;
  overflow: hidden;
}

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

/* The artwork sets the rating as five 38px glyphs on a 31px pitch — a 155px row,
   not the 87px the 15px inline SVGs produce. The width/height attributes on the
   markup need overriding here, since presentation attributes lose to CSS. */
.testimonials__stars {
  display: flex;
  gap: 0.19rem;
  margin-bottom: 1rem;
  color: var(--accent, #5ad05a);
}

.testimonials__stars .icon--star {
  width: 1.27rem;
  height: 1.27rem;
}

.testimonials__name {
  margin: 0 0 2px;
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--text, #ffffff);
}

.testimonials--grid .testimonials__name {
  font-size: 1.3125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent, #5ad05a);
}

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

.testimonials__quote {
  flex: 1;
  margin: 0 0 1rem;
  font-size: 1.3125rem;
  line-height: 1.65;
  color: var(--muted, #c9cfc9);
}

.testimonials--stars .testimonials__quote {
  font-size: 1.125rem;
  font-style: italic;
  color: var(--ink, #121412);
}

/* Quotation marks are decoration, kept out of the field value. */
.testimonials--stars .testimonials__quote::before { content: "\201C"; }
.testimonials--stars .testimonials__quote::after  { content: "\201D"; }

.testimonials--grid .testimonials__quote::before {
  content: "\201C";
  display: block;
  margin-bottom: 0.5rem;
  font-family: var(--f-display);
  font-size: 1.78rem;
  font-weight: 800;
  line-height: 0.6;
  color: var(--accent, #5ad05a);
}

/* Ordering the attribution above the quote visually, while the name still comes
   first in the DOM, keeps the reading order sensible. */
.testimonials--stars .testimonials__name,
.testimonials--stars .testimonials__role { order: 2; }

.testimonials--stars .testimonials__name {
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.testimonials--stars .testimonials__role { order: 3; margin-bottom: 0; }

/* Expander --------------------------------------------------------------------------- */

.testimonials__expand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
  margin-top: 2rem;
  padding: 1.125rem 1.5rem;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text, #ffffff);
  font-family: var(--f-body);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.22s ease, color 0.22s ease;
}

.testimonials__expand:hover,
.testimonials__expand:focus-visible {
  border-color: var(--accent, #5ad05a);
  color: var(--accent, #5ad05a);
}

.testimonials__chevron {
  flex: none;
  width: 9px;
  height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.22s ease;
}

.testimonials__expand[aria-expanded="true"] .testimonials__chevron {
  transform: rotate(-135deg) translate(-2px, -2px);
}

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

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

  .testimonials--stars .testimonials__grid {
    grid-template-columns: 1fr;
    max-width: 35rem;
    margin-inline: auto;
  }
}

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

@media (prefers-reduced-motion: reduce) {
  .testimonials__expand,
  .testimonials__chevron,
}

/* 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; }
}

/* services-list */
/**
 * Services List Block styles.
 */

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

.services-list__heading {
  margin: 0 0 2rem;
  font-size: clamp(1.75rem, 3.2vw, 2.8125rem);
  text-align: center;
  color: var(--text, #ffffff);
}

.services-list__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.125rem;
  counter-reset: service;
}

.services-list--numbered .services-list__grid { gap: 1rem; }

/* Pills ------------------------------------------------------------------------ */

.services-list__pill {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 4.97rem;
  padding: 1rem 1.5rem;
  background: var(--accent, #5ad05a);
  color: var(--green-ink, #0e1c0e);
  font-size: 1.21875rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.22s ease, transform 0.22s ease;
}

a.services-list__pill:hover,
a.services-list__pill:focus-visible {
  background: var(--accent-l);
  transform: translateY(-2px);
}

/* Numbered cards ----------------------------------------------------------------- */

.services-list__card {
  counter-increment: service;
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  min-height: 8.25rem;
  padding: 1.5rem;
  background: var(--accent, #5ad05a);
  color: var(--green-ink, #0e1c0e);
  transition: background-color 0.22s ease, transform 0.22s ease;
}

.services-list__card:hover {
  background: var(--accent-l);
  transform: translateY(-3px);
}

.services-list__num {
  font-family: var(--f-display);
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
  color: var(--bg-invert, #ffffff);
}

.services-list__num::before { content: "0" counter(service); }

.services-list__body {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.services-list__title {
  margin: 0 0 0.5rem;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--green-ink, #0e1c0e);
}

.services-list__summary {
  flex: 1;
  margin: 0 0 1rem;
  font-size: 1.125rem;
  line-height: 1.5;
  color: rgba(14, 28, 14, 0.86);
}

.services-list__link {
  align-self: flex-end;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--green-ink, #0e1c0e);
  text-decoration: none;
}

/* Stretched over the card so the whole card is clickable. */
.services-list__link::before {
  content: "";
  position: absolute;
  inset: 0;
}

.services-list__link:hover,
.services-list__link:focus-visible { text-decoration: underline; }

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

.services-list__foot {
  display: flex;
  justify-content: center;
  margin-top: 1.5rem;
}

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

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

@media (max-width: 520px) {
  .services-list__grid { grid-template-columns: 1fr; }
  .services-list__card { min-height: 0; }
  .services-list__foot .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .services-list__pill,
  .services-list__card { transition: none; }

  a.services-list__pill:hover,
  .services-list__card:hover { transform: none; }
}

/* article-list */
/**
 * Article List Block styles.
 *
 * Four layouts over one card. `cards` and `white` are white panels, so those variants
 * flip the text tokens on the card itself; `grid` and `related` sit directly on the
 * dark background with no panel.
 */

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

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

.article-list__head {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.125rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

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

.article-list--cards .article-list__head {
  justify-content: center;
  text-align: center;
}

.article-list--cards .article-list__viewall {
  position: absolute;
  right: 0;
  bottom: 0;
}

.article-list__viewall {
  font-size: 1.3125rem;
  color: var(--text, #ffffff);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.article-list__viewall:hover,
.article-list__viewall:focus-visible {
  color: var(--accent, #5ad05a);
  border-bottom-color: var(--accent, #5ad05a);
}

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

.article-list__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.125rem;
}

.article-list--grid .article-list__grid { gap: 2rem 1.5rem; }

/* Related shows two cards but keeps the three-column width, so the cards keep
   their proportions instead of stretching across the container. */
.article-list--related .article-list__card:nth-child(n + 3) { display: none; }

/* Card ---------------------------------------------------------------------------- */

.article-list__card {
  position: relative;
  display: flex;
  flex-direction: column;
}

/* White panel variants. */
.article-list--cards .article-list__card,
.article-list--white .article-list__card {
  --text: var(--ink, #121412);
  --muted: var(--ink-2);

  background: var(--bg-invert, #ffffff);
  color: var(--ink-2);
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.article-list--cards .article-list__card:hover,
.article-list--white .article-list__card:hover { transform: translateY(-4px); }

.article-list--white .article-list__body { padding: 1.5rem; }
.article-list--cards .article-list__body { padding: 1.5rem; }

.article-list__body {
  display: flex;
  flex-direction: column;
  flex: 1;
}

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

.article-list__media {
  aspect-ratio: 16 / 11;
  overflow: hidden;
}

.article-list--grid .article-list__media,
.article-list--related .article-list__media { margin-bottom: 1rem; }

.article-list__media picture,
.article-list__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

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

.article-list__category {
  margin: 0 0 0.75rem;
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted, #c9cfc9);
}

/* The dark variants set the category label in the brand green. */
.article-list--grid .article-list__category,
.article-list--related .article-list__category { color: var(--accent, #5ad05a); }

/* Bold in the artwork. At Regular these read as body copy and the card loses its
   hierarchy — the title is the thing you scan, not the excerpt. */
.article-list__title {
  flex: 1;
  margin: 0 0 0.75rem;
  font-size: 1.3125rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text, #ffffff);
}

.article-list--grid .article-list__title,
.article-list--related .article-list__title {
  font-size: 1.3125rem;
  line-height: 1.5;
}

.article-list__excerpt {
  flex: 1;
  margin: 0 0 1.5rem;
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--muted, #c9cfc9);
}

.article-list__foot { display: flex; }

.article-list--grid .article-list__foot,
.article-list--related .article-list__foot { justify-content: flex-end; }

.article-list__link {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text, #ffffff);
  text-decoration: none;
}

.article-list--cards .article-list__link,
.article-list--white .article-list__link { font-size: 1.21875rem; }

/* Stretched over the card so the whole card is clickable, while the link text
   stays the accessible name. */
.article-list__link::before {
  content: "";
  position: absolute;
  inset: 0;
}

.article-list__link:hover,
.article-list__link:focus-visible { color: var(--accent, #5ad05a); }

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

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

  .article-list--cards .article-list__grid,
  .article-list--white .article-list__grid {
    grid-template-columns: 1fr;
    max-width: 35rem;
    margin-inline: auto;
  }
}

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

@media (prefers-reduced-motion: reduce) {
  .article-list--cards .article-list__card,
  .article-list--white .article-list__card { transition: none; }

  .article-list--cards .article-list__card:hover,
  .article-list--white .article-list__card:hover { transform: none; }
}

/* newsletter */
/**
 * Newsletter Block styles.
 *
 * Three layouts over one DOM. The CF7 form is styled here too — CF7 emits its own
 * markup, so the rules target its classes (.wpcf7-form-control) rather than ours.
 * autop is switched off in app/filters.php, so the fields sit directly in the grid.
 */

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

/* Band — everything centred, fields in one row. --------------------------- */

.newsletter--band { text-align: center; }

.newsletter--band .newsletter__copy { margin-bottom: 3rem; }

.newsletter--band .newsletter__intro {
  max-width: 39rem;
  margin-inline: auto;
}

/* The comps run this row from x=203 to x=1715 — 1512px, not 1194. */
.newsletter--band .newsletter__form {
  max-width: 71rem;
  margin-inline: auto;
  text-align: left;
}

.newsletter--simple .newsletter__form {
  max-width: 56rem;
  margin-inline: auto;
  text-align: left;
}

/* Simple — plain uppercase heading, no intro. ----------------------------- */

.newsletter--simple { text-align: center; }

.newsletter--simple .newsletter__heading {
  margin: 0 0 3rem;
  font-size: clamp(1.35rem, 3.2vw, 2.8125rem);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* Split — copy left, form right. ------------------------------------------ */

.newsletter--split {
  padding-block: 3rem;
  border-top: 1px solid var(--border);
}

.newsletter--split .newsletter__inner {
  display: grid;
  grid-template-columns: 1.65fr 1fr;
  /* 85px between the columns in the comps. A wider gap squeezes the left column
     under the bracketed heading's measure and breaks it onto two lines. */
  gap: clamp(2rem, 6vw, 4rem);
  align-items: start;
}

.newsletter--split .newsletter__heading { margin-bottom: 1.5rem; }

.newsletter__statement {
  margin: 0 0 1rem;
  font-size: clamp(1.25rem, 2.4vw, 2.0625rem);
  font-weight: 700;
  line-height: 1.3;
  color: var(--text, #ffffff);
}

.newsletter__intro {
  margin: 0;
  font-size: 1.3125rem;
  color: var(--text, #ffffff);
}

/* Form ---------------------------------------------------------------------
   CF7 emits the fields as sibling <p> elements inside .wpcf7-form and autop is
   off (app/filters.php), so the form itself is the grid and those paragraphs are
   its items. Split stacks them; band and simple put name, email and the submit
   in one row with the consent line spanning underneath — which means the form
   template has to order its tags name, email, submit, consent.

   The submit carries `class:btn class:btn--outline-light` in the CF7 template, so
   the button treatment comes from buttons.css like every other CTA; the spinner
   is taken out of flow in shared.css, otherwise it steals a column of width. */

.newsletter__form .wpcf7-form {
  display: grid;
  gap: 1.25rem;
}

.newsletter__form .wpcf7-form > p { margin: 0; }

/* Field label sits above its input. The consent label is nested deeper, inside
   CF7's acceptance markup, so `> p > label` leaves it alone. */
.newsletter__form .wpcf7-form > p > label {
  display: block;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--text, #ffffff);
}

.newsletter__form .wpcf7-form-control-wrap { display: block; }

.newsletter__form :where(input[type="text"], input[type="email"]) {
  display: block;
  width: 100%;
  padding: 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  color: var(--text, #ffffff);
  font-family: inherit;
  font-size: 1.125rem;
  line-height: 1.3;
  transition: border-color 0.22s ease;
}

.newsletter__form :where(input[type="text"], input[type="email"])::placeholder { color: var(--muted, #c9cfc9); }

.newsletter__form :where(input[type="text"], input[type="email"]):focus {
  border-bottom-color: var(--accent, #5ad05a);
  outline: none;
}

.newsletter__form input[type="submit"] {
  min-width: 11.25rem;
  white-space: nowrap;
}

/* Consent ------------------------------------------------------------------ */

.newsletter__form .wpcf7-list-item { margin: 0; }

.newsletter__form .wpcf7-acceptance,
.newsletter__consent {
  display: block;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--muted, #c9cfc9);
}

.newsletter__form .wpcf7-list-item label {
  display: flex;
  align-items: center;
  gap: 0.875rem;
}

/* The design runs the privacy-policy link in with the consent text; the underline
   is kept for hover and keyboard focus so it is still identifiable as a link. */
.newsletter__form .wpcf7-list-item-label a {
  color: inherit;
  text-decoration: none;
}

.newsletter__form .wpcf7-list-item-label a:hover,
.newsletter__form .wpcf7-list-item-label a:focus-visible { text-decoration: underline; }

.newsletter__form input[type="checkbox"] {
  flex: none;
  width: 0.9375rem;
  height: 0.9375rem;
  margin: 0;
  accent-color: var(--bg-invert, #ffffff);
}

/* Inline field row for band + simple. */
@media (min-width: 761px) {
  .newsletter--band .newsletter__fallback,
  .newsletter--simple .newsletter__fallback,
  .newsletter--band .newsletter__form .wpcf7-form,
  .newsletter--simple .newsletter__form .wpcf7-form {
    /* The comps set the two fields equal and the button on a fixed 301px, with a
       ~47px gutter — `auto` sized the button to its label and left the fields wide. */
    grid-template-columns: 1fr 1fr 14.1rem;
    column-gap: 2.2rem;
    row-gap: 0.875rem;
    align-items: end;
  }

  .newsletter--band .newsletter__fallback,
  .newsletter--simple .newsletter__fallback { display: grid; }

  /* The button fills its column rather than sizing to its label — 301px in the comps. */
  .newsletter--band .newsletter__form input[type="submit"],
  .newsletter--simple .newsletter__form input[type="submit"] { width: 100%; }

  /* The consent line and CF7's response message each take a row of their own. */
  .newsletter--band .newsletter__consent,
  .newsletter--simple .newsletter__consent,
  .newsletter--band .wpcf7-form > .form__consent,
  .newsletter--simple .wpcf7-form > .form__consent,
  .newsletter--band .wpcf7-form > .wpcf7-response-output,
  .newsletter--simple .wpcf7-form > .wpcf7-response-output { grid-column: 1 / -1; }
}

/* Placeholder fallback ------------------------------------------------------
   Mirrors the CF7 layout so the editor sees the real proportions. Inert. */

.newsletter__field { margin: 0; }

.newsletter__input {
  display: block;
  padding: 0.625rem 0.125rem;
  border-bottom: 1px solid var(--border);
  color: var(--muted, #c9cfc9);
  font-size: 1.125rem;
}

.newsletter__fallback .newsletter__consent { margin-top: 0.25rem; }

.newsletter__hint {
  margin: 1rem 0 0;
  font-size: 1.125rem;
  font-style: italic;
  color: var(--muted, #c9cfc9);
}

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

@media (max-width: 860px) {
  .newsletter--split .newsletter__inner {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

@media (max-width: 760px) {
  .newsletter__field--submit .btn,
  .newsletter__form input[type="submit"] { width: 100%; }
  .newsletter__fallback { display: grid; gap: 1.5rem; }
}

/* Submit treatment per variant ------------------------------------------------
   A single CF7 form is shared by all three variants, so its [submit] can only carry
   one class. The comps set the split variant's Subscribe as a full-width green
   block and the band/simple variants' as a compact light button, so the split
   override lands here rather than in the form template. */

.newsletter--split .newsletter__form input[type="submit"] {
  width: 100%;
  background: var(--accent);
  border-color: var(--accent);
  color: var(--green-ink);
}

.newsletter--split .newsletter__form input[type="submit"]:hover,
.newsletter--split .newsletter__form input[type="submit"]:focus-visible {
  background: var(--accent-l);
  border-color: var(--accent-l);
}

/* The split variant runs its heading in a 682px column, where the band variant has
   the full measure. At the shared 45px the bracketed heading needs 785px and breaks
   onto two lines, so this variant takes a step down. */
.newsletter--split .newsletter__heading {
  font-size: clamp(1.25rem, 2.6vw, 2.4rem);
}