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

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

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

/* image-band */
/**
 * Image Band Block styles.
 *
 * Images are butted with a hairline gap rather than spaced, as the design has them.
 * The wide variant is capped in height so a tall source photograph does not dominate
 * the page on a large screen.
 */

.image-band {
  padding-block: 2rem;
  background: var(--bg-base, #121412);
  color: var(--text, #ffffff);
}

.image-band--wide { padding-block: 0; }

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

/* The wide single-image band runs edge to edge with no container. */
.image-band--wide .image-band__inner {
  max-width: none;
  padding-inline: 0;
}

.image-band__row {
  display: grid;
  gap: 2px;
}

.image-band--count-2 .image-band__row { grid-template-columns: repeat(2, 1fr); }
.image-band--count-3 .image-band__row { grid-template-columns: repeat(3, 1fr); }
.image-band--count-4 .image-band__row { grid-template-columns: repeat(4, 1fr); }

.image-band__item {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.image-band--wide .image-band__item {
  aspect-ratio: 32 / 9;
  max-height: 21.25rem;
}

.image-band__item picture,
.image-band__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-band__caption {
  margin: 0.75rem 0 0;
  font-size: 1.125rem;
  color: var(--muted, #c9cfc9);
}

/* Responsive ----------------------------------------------------------------
   Three narrow slivers read poorly on a phone, so a three-up strip goes two-up
   with the last image spanning the full width beneath. */

@media (max-width: 860px) {
  .image-band--wide .image-band__item { aspect-ratio: 21 / 9; max-height: none; }
}

@media (max-width: 700px) {
  .image-band--count-3 .image-band__row,
  .image-band--count-4 .image-band__row { grid-template-columns: repeat(2, 1fr); }

  .image-band--count-3 .image-band__item:last-child {
    grid-column: 1 / -1;
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 440px) {
  .image-band__row,
  .image-band--count-2 .image-band__row,
  .image-band--count-3 .image-band__row,
  .image-band--count-4 .image-band__row { grid-template-columns: 1fr; }

  .image-band--count-3 .image-band__item:last-child { aspect-ratio: 4 / 3; }
  .image-band--wide .image-band__item { aspect-ratio: 16 / 9; }
}

/* faq */
/**
 * FAQ Block styles.
 *
 * The panel animates on grid-template-rows 0fr → 1fr, which transitions to an automatic
 * height without measuring anything in JS or hardcoding a max-height that clips long
 * answers.
 */

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

.faq__head { margin-bottom: 1.5rem; }

.faq__heading {
  margin: 0;
  font-size: clamp(1.35rem, 2.2vw, 1.9rem);
  color: var(--text, #ffffff);
}

.faq__list {
  max-width: 56rem;
  margin-inline: auto;
}

.faq__item + .faq__item { margin-top: 0.75rem; }

/* Trigger -------------------------------------------------------------------- */

/* A wrapper around the trigger, which carries the type itself. The size is pinned
   anyway: the heading level is assigned at render time, and without an explicit
   size this would fall back to the browser's per-level default when it moved. */
.faq__question {
  margin: 0;
  font-size: 1.125rem;
}

.faq__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 1rem 1.25rem;
  border: 0;
  border-radius: var(--radius);
  background: var(--accent, #5ad05a);
  color: var(--green-ink, #0e1c0e);
  font-family: var(--f-body);
  font-size: 1.125rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.22s ease, color 0.22s ease;
}

.faq__trigger:hover { background: var(--accent-l); }

.faq__item.is-open .faq__trigger {
  background: var(--bg-invert, #ffffff);
  color: var(--ink, #121412);
  border-radius: var(--radius) var(--radius) 0 0;
}

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

.faq__item.is-open .faq__chevron { transform: rotate(-135deg) translate(-2px, -2px); }

/* Panel ---------------------------------------------------------------------- */

.faq__panel {
  display: grid;
  grid-template-rows: 0fr;
  background: var(--bg-invert, #ffffff);
  border-radius: 0 0 var(--radius) var(--radius);
  transition: grid-template-rows 0.22s ease;
}

.faq__item.is-open .faq__panel { grid-template-rows: 1fr; }

.faq__panel-inner { overflow: hidden; }

.faq__answer {
  padding: 0 1.25rem 1.125rem;
  font-size: 1.125rem;
  line-height: 1.65;
  color: var(--ink-2);
}

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

.faq__answer a { color: var(--accent, #5ad05a); }

@media (prefers-reduced-motion: reduce) {
  .faq__panel,
  .faq__trigger,
  .faq__chevron { transition: none; }
}

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