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

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

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

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

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