/*
 * CSR page.
 *
 * Hero, contact-cta and faq reuse the SHARED .a3-hero / .a3-contact-cta /
 * .a3-faq classes from service.css, also used by Home, Contact, Core Team,
 * Guides, and every service/Awards/Careers page. This page's Figma frame
 * (776:2465) specifies a larger/lighter hero heading and a bolder CTA
 * button than the shared class ships with, so those fixes are scoped to
 * `.a3-csr-page` here rather than edited in service.css - same pattern as
 * awards.css's "Hero overrides" block.
 *
 * The stats section reuses service.css's .a3-stats / .a3-stats__item /
 * .a3-stats__number / .a3-stats__label, but the services layout is an
 * asymmetric 8/4/4/8 grid with per-position background art. The CSR design
 * is four equal flat cards, so .a3-csr-stats resets that art and rebalances
 * the grid rather than forking a second stats component. Its type sizing
 * (14px/1.4px/uppercase label, etc.) already matches Figma via the shared
 * .a3-stats__label base rule - only color/weight needed a local override.
 */

/* =================================================================
 * SECTION WIDTHS - measured from Figma frame 776:2465 (1440 canvas)
 * =================================================================
 *
 * This page does NOT lay every band on one container. The design uses four
 * widths, and the rhythm between them is deliberate: the fund-allocation
 * stack is the widest thing on the page, and the philosophy quote and the
 * FAQ are the narrowest. Measured content spans - the outer edges of the
 * cards/text, not the 1440 section frame:
 *
 *   band      gutter   content   ratio     sections
 *   -------   ------   -------   -------   ------------------------------
 *   wide        44px    1352     93.89%    allocation         (776:2575)
 *   cta         48px    1344     93.33%    contact_cta        (776:2718)
 *   default    168px    1104     76.67%    hero, stats, people,
 *                                          regions, funding
 *   quote      268px     905     62.85%    philosophy quote   (776:2544)
 *   narrow     272px     896     62.22%    faq                (776:2718)
 *
 * .container carries `padding: 0 15px` (global.css:271), so every max-width
 * below is CONTENT + 30: 1104 -> 1134, 1352 -> 1382, 896 -> 926.
 *
 * This supersedes the shared 1320/1290 assumption that used to live on
 * .a3-csr-stats, which was marked PROVISIONAL pending exactly this
 * measurement: the CSR frame is 1104, not 1320. Every default-band section
 * was rendering ~186px wider than the design, and the allocation stack -
 * the one band meant to stand out - was 62px NARROWER than it should be,
 * which is what flattened it against its neighbours.
 *
 * contact_cta is deliberately absent: desktop-refinements.css:1012 already
 * puts it on 1440/48px = 1344 and measures correct against 776:2718. Adding
 * it here would only create a second place to change it.
 *
 * Gated at 992px - below that every band goes fluid and the design's fixed
 * gutters stop applying, which is the tablet/mobile blocks' business at the
 * end of this file.
 */
@media (min-width: 992px) {

  /* The 1104 default.
   *
   * .a3-csr-stats has to stay in this list rather than falling back to the
   * plain .container: desktop-refinements.css:160 pins `.a3-stats .container`
   * to 982px for the SERVICES 8/4 grid at identical specificity, so without
   * an explicit CSR rule the stat cards collapse to two thirds width. csr.css
   * is enqueued after desktop-refinements.css, so load order settles it. */
  /* ALIGNED TO THE HEADER, not to Figma's 1104.
   *
   * The measurement below is real - the CSR frame's default band is 1104 - but
   * it puts the copy 64px right of the logo, because the header runs on a
   * 1280 container with 24px padding and starts its content at 97px. On a page
   * whose first line of copy sits directly under the wordmark that reads as an
   * indent, not as a rhythm. Pradeep asked for the whole band to line up.
   *
   * 1280 + 24px padding reproduces the header's own container exactly, so the
   * hero heading, the stats, the quote, the people, the regions and the funding
   * copy all begin on the same vertical as the logo.
   *
   * The other three bands keep their measured widths on purpose - the
   * allocation stack (1382) is still the widest thing on the page and the FAQ
   * (926) the narrowest, so the design's rhythm survives; only the default band
   * moved. */
  /* Aligned to the header, not to Figma's 1104.
   *
   * The header's gutter is TWO paddings: .a3-site-header carries 24 and
   * .a3-site-header__inner another 24 inside it, and the inner only centres
   * once the viewport clears 1280 + 48. `min()` reproduces the cap and the
   * outer gutter in one value - the same idiom mega-menu.css:105 uses to line
   * the panel up with the header.
   *
   * The hero is listed separately because it is the one band whose container
   * is NOT a direct child of its section: service.css:1 puts
   * `padding: 150px 10px !important` on every .a3-hero, so the container
   * resolves its 100% against a box already inset 10px a side. Subtracting
   * 2x10 from the gutter puts its copy on the same vertical as the other five.
   *
   * The other three bands keep their measured widths on purpose - the
   * allocation stack (1382) is still the widest thing on the page and the FAQ
   * (926) the narrowest, so the design's rhythm survives; only the default
   * band moved. */
  .a3-csr-stats .container,
  .a3-csr-philosophy .container,
  .a3-csr-people .container,
  .a3-csr-regions .container,
  .a3-csr-funding .container {
    width: min(100% - 48px, var(--a3-container-max));
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
  }

  .a3-csr-page .a3-hero .container {
    width: min(100% - 28px, var(--a3-container-max)); /* 48 - 2x10 hero padding */
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
  }

  /* The allocation stack is the one near-full-bleed band on the page. */
  .a3-csr-allocation .container {
    max-width: 1382px;
  }

  /* service.css:1059 ships 1024 on `.a3-faq .container` for every page using
   * the shared FAQ; the CSR frame is 896. Scoped with the page class for
   * unambiguously higher specificity rather than relying on load order. */
  .a3-csr-page .a3-faq .container {
    max-width: 926px;
  }
}

/* The header steps its gutter down twice, so the band follows it down.
 * style.css:430 puts .a3-site-header on 16px and __inner on 16px below 991;
 * mobile-refinements.css:103 zeroes the header's own padding and pins __inner
 * to 20px below 767. Matching those keeps the copy under the logo at every
 * width rather than only on a desktop canvas. */
@media (min-width: 768px) and (max-width: 991.98px) {

  /* style.css:430 steps .a3-site-header and __inner down to 16px each, so the
   * logo sits 32 in. The hero still carries its own 10 a side here. */
  .a3-csr-stats .container,
  .a3-csr-philosophy .container,
  .a3-csr-people .container,
  .a3-csr-regions .container,
  .a3-csr-funding .container {
    width: min(100% - 32px, var(--a3-container-max));
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    padding-left: 16px;
    padding-right: 16px;
  }

  .a3-csr-page .a3-hero .container {
    width: min(100% - 12px, var(--a3-container-max)); /* 32 - 2x10 */
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    padding-left: 16px;
    padding-right: 16px;
  }
}

@media (max-width: 767.98px) {

  /* mobile-refinements.css:103 zeroes the header's own padding and pins
   * __inner to 20px, so the logo sits 20 in. mobile-refinements.css:26 also
   * raises the hero's own padding to 20 - which is already the whole gutter,
   * so the hero's container adds none. */
  .a3-csr-stats .container,
  .a3-csr-philosophy .container,
  .a3-csr-people .container,
  .a3-csr-regions .container,
  .a3-csr-funding .container {
    width: 100%;
    max-width: none;
    padding-left: 20px;
    padding-right: 20px;
  }

  .a3-csr-page .a3-hero .container {
    width: 100%;
    max-width: none;
    padding-left: 0;
    padding-right: 0;
  }
}

/* ---------- Hero overrides (Figma 776:2469-2472) ---------- */

/* The hero photo (corporate-office.jpg, attachment 915 - shared with
   Careers and Our Journey) is a corridor/kitchen shot with a floor across
   its bottom third. desktop-refinements.css forces a two-layer
   background-size of `cover, 104% 98.47%` (tuned for a DIFFERENT hero's
   crop, node 78:5773) at (min-width:992px) with !important - same
   specificity class-count as a single `.a3-hero` override, so it wins over
   a plain one-class override here too. Re-stated with an extra selector
   segment for unambiguously higher specificity (same fix as the Awards
   page). Without this, the crop lands on the image's plain floor area and
   reads as a flat grey band right at the bottom edge of the hero. */
.a3-csr-page .a3-hero.a3-hero {
  background-size: cover !important;
  background-position: center 25% !important;
}

.a3-csr-page .a3-hero__heading {
  font-weight: 400;
  font-size: 72px;
  line-height: 91.2px;
  letter-spacing: -2px;
}

.a3-csr-page .a3-hero__actions .a3-btn {
  font-weight: 700;
}

/* ---------- Our Funding Impact (stats) ---------- */

.a3-csr-stats {
  padding: 80px 0 96px;
}

.a3-csr-stats__heading {
  font-size: 36px;
  font-weight: 700;
  line-height: 40px;
  color: #18181b;
  margin-bottom: 12px;
}

.a3-csr-stats__description {
  font-size: 18px;
  line-height: 29.25px;
  color: #52525b;
  margin-bottom: 56px;
}

/* Neutralise the services-listing per-position card art and orange tier. */
.a3-csr-stats .row > div .a3-stats__item,
.a3-csr-stats .row > div:first-child .a3-stats__item,
.a3-csr-stats .row > div:nth-child(2) .a3-stats__item,
.a3-csr-stats .row > div:nth-child(3) .a3-stats__item,
.a3-csr-stats .row > div:nth-child(4) .a3-stats__item {
  background-image: none;
  background: #fafafa;
  border: 1px solid #f4f4f5;
  border-radius: 16px;
  box-shadow: none;
  min-height: 238px;
  padding: 32px 24px;
  align-items: center;
  text-align: center;
}

/* Selector depth matches service.css's nth-child(4) override, which
   otherwise tints the last number orange. */
.a3-csr-stats .row > div .a3-stats__item .a3-stats__number,
.a3-csr-stats .row > div:nth-child(4) .a3-stats__item .a3-stats__number {
  font-size: 36px;
  line-height: 40px;
  color: #18181b;
  margin-bottom: 8px;
}

.a3-csr-stats .a3-stats__label {
  color: #52525b;
  font-weight: 600;
}

.a3-csr-stats__icon {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px 24px;
}

.a3-csr-stats__icon img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

/* Default icon + tint per card position, mirroring the Figma palette.
   Only applied when no icon has been uploaded in wp-admin (SVG uploads are
   disabled site-wide, so these ship as theme assets under images/). */
.a3-csr-stats .row > div:nth-child(4n + 1) .a3-csr-stats__icon.is-default {
  background-color: #ecfdf5;
  background-image: url(images/csr-icon-funds.svg);
}

.a3-csr-stats .row > div:nth-child(4n + 2) .a3-csr-stats__icon.is-default {
  background-color: #eff6ff;
  background-image: url(images/csr-icon-partners.svg);
}

.a3-csr-stats .row > div:nth-child(4n + 3) .a3-csr-stats__icon.is-default {
  background-color: #fff1f2;
  background-image: url(images/csr-icon-lives.svg);
}

.a3-csr-stats .row > div:nth-child(4n + 4) .a3-csr-stats__icon.is-default {
  background-color: #faf5ff;
  background-image: url(images/csr-icon-projects.svg);
}

/* ---------- CSR Fund Allocation Areas ---------- */

.a3-csr-allocation {
  padding: 80px 0 96px;
  background: #fff;
}

.a3-csr-allocation__heading {
  font-size: 36px;
  font-weight: 500;
  line-height: 40px;
  color: #292929;
  margin-bottom: 16px;
}

.a3-csr-allocation__description {
  font-size: 18px;
  line-height: 29.25px;
  color: #71717a;
  margin-bottom: 56px;
}

.a3-csr-allocation__list {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

/* This list also carries the shared .a3-stack-wrap class (see page-csr.php)
   to inherit the sticky-stack transition and its --a3-stack-pin breakpoints.
   That class was written for a full-bleed section, so it also brings a
   max-width, a 70px top margin and side padding - none of which suit a
   child of .container. Neutralised here; only the stacking behaviour and
   the pin custom property are wanted. */
.a3-csr-allocation__list.a3-stack-wrap {
  max-width: none;
  margin: 0;
  padding: 0;
}

.a3-csr-allocation__card {
  display: grid;
  grid-template-columns: 45% 55%;
  overflow: hidden;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 1px 43.6px 0 rgba(180, 180, 180, 0.25);
}

/* Stacking deltas over the shared .a3-stack-card. Spacing stays owned by the
   list's gap, so the card's own 35px bottom margin (and the 30px it switches
   to under 992px) is dropped rather than adding to it. The upward shadow is
   what reads as depth when the next card slides over this one - kept ahead of
   the card's existing ambient shadow so both apply. The shared class also
   adds a top border; the CSR card is borderless by design, so it's removed. */
.a3-csr-allocation__card.a3-stack-card {
  margin-bottom: 0;
  border-top: 0;
  box-shadow:
    0 -20px 40px rgba(0, 0, 0, 0.08),
    0 1px 43.6px 0 rgba(180, 180, 180, 0.25);
}

.a3-csr-allocation__media {
  position: relative;
  min-height: 450px;
}

.a3-csr-allocation__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Figma fades the photo into the white quote panel with a horizontal
   gradient overlay rather than a hard edge. */
.a3-csr-allocation__media::after {
  content: "";
  position: absolute;
  inset: 0 0 0 68%;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0.8) 50%,
    #fff
  );
  pointer-events: none;
}

.a3-csr-allocation__panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 64px 96px;
  background: #fff;
}

.a3-csr-allocation__quote {
  font-size: 36px;
  font-weight: 700;
  line-height: 45px;
  text-transform: uppercase;
  color: #4f4f4f;
  margin: 0;
}

/* No divider above the attribution. The Figma quote panel (776:2578) holds
   exactly three things - the gradient, the quote, and this line - with no
   rule between them; the border here was invented by the build. Figma also
   sets the gap at 28px (quote ends y=320, attribution starts y=348), where
   this was 32 margin + 24 padding = 56 with a hairline through it. */
.a3-csr-allocation__attribution {
  margin-top: 28px;
  font-size: 18px;
  font-weight: 500;
  line-height: 28px;
  color: #ababab;
}

/* Figma darkens the quote/attribution text on cards 2-4 relative to card 1
   (#4f4f4f/#ababab -> #3f3f46/#3f3f46, with card 2's attribution at an
   in-between #52525b) - each photo has a different brightness, so the text
   color was tuned per card for legibility rather than kept uniform. */
.a3-csr-allocation__card:nth-child(2) .a3-csr-allocation__attribution {
  color: #52525b;
}

.a3-csr-allocation__card:nth-child(3) .a3-csr-allocation__quote,
.a3-csr-allocation__card:nth-child(4) .a3-csr-allocation__quote {
  color: #3f3f46;
}

.a3-csr-allocation__card:nth-child(3) .a3-csr-allocation__attribution,
.a3-csr-allocation__card:nth-child(4) .a3-csr-allocation__attribution {
  color: #3f3f46;
}

/* ---------- Our Core Philosophy ---------- */

.a3-csr-philosophy {
  padding: 96px 0;
  background: #fff;
}

.a3-csr-philosophy__rule {
  display: block;
  width: 64px;
  height: 4px;
  margin: 0 auto 40px;
  border-radius: var(--a3-radius-pill, 999px);
  background: #ff6900;
}

.a3-csr-philosophy__heading {
  font-size: 36px;
  font-weight: 500;
  line-height: 40px;
  color: #18181b;
  margin-bottom: 40px;
}

.a3-csr-philosophy__quote {
  font-size: 24px;
  font-weight: 500;
  line-height: 39px;
  color: #3f3f46;
  /* Figma centres the quote on its own 905 measure inside the 1104 band
     rather than letting it fill the column (776:2544). */
  max-width: 905px;
  margin: 0 auto;
}

/* ---------- Driven by Our People ---------- */

.a3-csr-people {
  padding: 96px 0;
  background: #fafafa;
  border-bottom: 1px solid rgba(228, 228, 231, 0.6);
}

.a3-csr-people__card {
  display: grid;
  grid-template-columns: 42% 58%;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--a3-color-border, #e4e4e7);
  border-radius: 40px;
  box-shadow:
    0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

.a3-csr-people__content {
  padding: 64px;
  border-right: 1px solid #f4f4f5;
}

.a3-csr-people__rule {
  display: block;
  width: 48px;
  height: 4px;
  margin-bottom: 32px;
  border-radius: var(--a3-radius-pill, 999px);
  background: #ff6900;
}

.a3-csr-people__heading {
  font-size: 36px;
  font-weight: 500;
  line-height: 40px;
  color: #18181b;
  margin-bottom: 24px;
}

.a3-csr-people__description {
  font-size: 18px;
  line-height: 29.25px;
  color: #52525b;
  margin-bottom: 40px;
}

.a3-csr-people__badges {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.a3-csr-people__badge {
  display: flex;
  align-items: center;
  gap: 24px;
}

.a3-csr-people__badge-number {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: #fafafa;
  border: 1px solid #f4f4f5;
  box-shadow:
    0 1px 3px 0 rgba(0, 0, 0, 0.1),
    0 1px 2px -1px rgba(0, 0, 0, 0.1);
  font-size: 24px;
  font-weight: 900;
  line-height: 32px;
  color: #ff6900;
}

.a3-csr-people__badge-text {
  display: flex;
  flex-direction: column;
}

.a3-csr-people__badge-label {
  font-size: 18px;
  font-weight: 700;
  line-height: 28px;
  color: #18181b;
}

.a3-csr-people__badge-sublabel {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #52525b;
}

.a3-csr-people__media img {
  width: 100%;
  height: 100%;
  min-height: 560px;
  object-fit: cover;
  display: block;
}

/* ---------- Regions of Impact ---------- */

.a3-csr-regions {
  padding: 80px 0 96px;
  background: #fff;
  border-bottom: 1px solid var(--a3-color-border, #e4e4e7);
}

.a3-csr-regions__heading {
  font-size: 36px;
  font-weight: 500;
  line-height: 40px;
  color: #18181b;
  margin-bottom: 16px;
}

.a3-csr-regions__description {
  font-size: 18px;
  line-height: 29.25px;
  color: #52525b;
  margin-bottom: 56px;
}

.a3-csr-regions__card {
  height: 100%;
  background: #fafafa;
  border: 1px solid #f4f4f5;
  border-radius: 24px;
  padding: 32px;
}

.a3-csr-regions__icon {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  margin-bottom: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px 24px;
}

.a3-csr-regions__icon.is-default {
  background-color: #ffedd4;
  background-image: url(images/csr-icon-region.svg);
}

.a3-csr-regions__icon img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.a3-csr-regions__card-heading {
  font-size: 20px;
  font-weight: 700;
  line-height: 28px;
  color: #18181b;
  margin-bottom: 16px;
}

.a3-csr-regions__card-description {
  font-size: 16px;
  font-weight: 500;
  line-height: 26px;
  color: #52525b;
  margin: 0;
}

/* ---------- How We Fund ---------- */

.a3-csr-funding {
  padding: 80px 0 96px;
  background: #fff;
}

.a3-csr-funding__heading {
  font-size: 36px;
  font-weight: 500;
  line-height: 40px;
  color: #18181b;
  margin-bottom: 16px;
}

.a3-csr-funding__description {
  font-size: 18px;
  line-height: 29.25px;
  color: #52525b;
  max-width: 720px;
  margin-bottom: 56px;
}

.a3-csr-funding__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}

.a3-csr-funding__step {
  position: relative;
  background: #fafafa;
  border: 1px solid #f4f4f5;
  border-radius: 16px;
  padding: 32px;
}

/* Connector arrow. Figma has the arrow's tail flush with (slightly
   overlapping) the PRECEDING card's edge, not centred in the empty gutter.
   The exported SVG's 32x32 viewBox has ~6.67px of built-in left padding
   before the visible glyph starts (the tail line begins at x=6.66797, not
   x=0), so positioning the box flush with the card (right:-32px, i.e. box
   spans card-edge -> card-edge+32) actually renders the visible arrow
   ~6.67px into the gutter, not touching the card. Shifting the box left by
   that same amount (-32px + 6.67px = -25.33px) puts the glyph itself flush
   with the card edge instead of the invisible box. */
.a3-csr-funding__step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -25.33px;
  width: 32px;
  height: 32px;
  transform: translateY(-50%);
  background: url(images/csr-icon-step-arrow.svg) no-repeat center / 32px 32px;
}

.a3-csr-funding__step-number {
  display: block;
  font-size: 36px;
  font-weight: 700;
  line-height: 40px;
  color: var(--a3-color-border, #e4e4e7);
  margin-bottom: 24px;
}

.a3-csr-funding__step-heading {
  font-size: 20px;
  font-weight: 700;
  line-height: 28px;
  color: #18181b;
  margin-bottom: 16px;
}

.a3-csr-funding__step-description {
  font-size: 14px;
  line-height: 22.75px;
  color: #52525b;
  margin: 0;
}

.a3-csr-funding__cta {
  margin-top: 64px;
  text-align: center;
}

.a3-csr-funding__button {
  padding: 16px 32px;
  font-size: 16px;
  font-weight: 700;
  box-shadow:
    0 10px 15px -3px rgba(255, 105, 0, 0.2),
    0 4px 6px -4px rgba(255, 105, 0, 0.2);
}

.a3-csr-funding__caption {
  margin: 26px 0 0;
  font-size: 14px;
  line-height: 20px;
  color: #71717a;
}

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

@media (max-width: 991px) {
  .a3-csr-allocation__card,
  .a3-csr-people__card {
    grid-template-columns: 1fr;
  }

  .a3-csr-allocation__media {
    min-height: 280px;
  }

  /* The photo/panel fade is horizontal; once stacked it would wash out the
     bottom of the image instead, so drop it. */
  .a3-csr-allocation__media::after {
    display: none;
  }

  .a3-csr-allocation__panel {
    padding: 40px 32px;
  }

  .a3-csr-allocation__quote {
    font-size: 26px;
    line-height: 34px;
  }

  .a3-csr-people__content {
    padding: 40px;
    border-right: 0;
    border-bottom: 1px solid #f4f4f5;
  }

  .a3-csr-people__media img {
    min-height: 320px;
  }

  .a3-csr-funding__steps {
    grid-template-columns: repeat(2, 1fr);
  }

  .a3-csr-funding__step:nth-child(2n)::after {
    display: none;
  }
}

@media (max-width: 767px) {
  .a3-csr-stats,
  .a3-csr-allocation,
  .a3-csr-regions,
  .a3-csr-funding {
    padding: 56px 0 64px;
  }

  .a3-csr-philosophy,
  .a3-csr-people {
    padding: 56px 0;
  }

  .a3-csr-stats__heading,
  .a3-csr-allocation__heading,
  .a3-csr-philosophy__heading,
  .a3-csr-people__heading,
  .a3-csr-regions__heading,
  .a3-csr-funding__heading {
    font-size: 28px;
    line-height: 34px;
  }

  .a3-csr-allocation__quote {
    font-size: 22px;
    line-height: 30px;
  }

  .a3-csr-philosophy__quote {
    font-size: 18px;
    line-height: 30px;
  }

  .a3-csr-people__card {
    border-radius: 24px;
  }

  .a3-csr-people__content {
    padding: 32px 24px;
  }

  .a3-csr-funding__steps {
    grid-template-columns: 1fr;
  }

  .a3-csr-funding__step::after {
    display: none;
  }
}

/* =========================================================================
 * Allocation card - label, title, body and bullets
 *
 * The Figma panel holds only a pull-quote, but the client document gives each
 * card a lead-in label, a headline, several paragraphs and (on two of the
 * four) a bullet list. That copy had nowhere to render, so these are the
 * fields added to the repeater.
 *
 * The panel itself stays centred, as designed. The prose does NOT: centred
 * text is fine for one 36px line and unreadable for four paragraphs, so the
 * body and bullets are left-aligned inside a centred, measure-capped column.
 * ========================================================================= */

.a3-csr-allocation__label {
  display: block;
  margin: 0 0 12px;

  font-family: Inter, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #FF6900;
}

.a3-csr-allocation__card-title {
  margin: 0 0 20px;
  max-width: 720px;

  font-family: Inter, sans-serif;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.5px;
  color: #18181B;
}

.a3-csr-allocation__text {
  max-width: 720px;
  margin: 0 auto 16px;
  text-align: left;

  font-family: Inter, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: #3F3F46;
}

.a3-csr-allocation__points {
  max-width: 720px;
  margin: 4px auto 20px;
  padding-left: 22px;
  text-align: left;
  list-style: disc;
}

.a3-csr-allocation__points li {
  margin-bottom: 8px;

  font-family: Inter, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #3F3F46;
}

.a3-csr-allocation__points li::marker {
  color: #FF6900;
}

/* With body copy above it the quote is a closing flourish rather than the
   whole panel, so it steps down from 36px and gains space above. */
.a3-csr-allocation__panel:has(.a3-csr-allocation__text) .a3-csr-allocation__quote,
.a3-csr-allocation__panel:has(.a3-csr-allocation__points) .a3-csr-allocation__quote {
  margin-top: 12px;
  font-size: 24px;
  line-height: 1.35;
}

@media (max-width: 991px) {
  .a3-csr-allocation__card-title { font-size: 24px; }

  .a3-csr-allocation__panel:has(.a3-csr-allocation__text) .a3-csr-allocation__quote,
  .a3-csr-allocation__panel:has(.a3-csr-allocation__points) .a3-csr-allocation__quote {
    font-size: 20px;
  }
}

/* ---- Our Core Philosophy: prose above the quote ------------------------- */

.a3-csr-philosophy__text {
  max-width: 860px;
  margin: 0 auto 18px;

  font-family: Inter, sans-serif;
  font-size: 17px;
  line-height: 1.75;
  color: #3F3F46;
}