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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  /* Connectors become vertical once the steps stack.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.cta-panel__figure { margin: 0; }

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

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

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

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

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

.cta-panel__media { position: relative; }

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

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

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

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

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

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

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

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

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

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

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