/* ==========================================================================
   2030 Strategy page — strategy-2030.css
   Figma frame 11008:11220 (1440 × 6179). Desktop-first, max-width breakpoints.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Block 4 — Intro: Vision / Mission / Ambition
   Figma node 11008:11370
   -------------------------------------------------------------------------- */
.s2030-intro {
  padding: 112px 92px; /* Figma layout_8LJOF9 */
  background-color: var(--color-white);
}

.s2030-intro__inner {
  max-width: 1280px; /* Pastel 2026-06-15 #1 — cap inner at 1280px */
  margin-inline: auto;
  border-radius: var(--radius-sm); /* 4px — Figma 11008:11371 */
  overflow: hidden;
}

.s2030-intro__image {
  position: relative;
  width: 100%;
}

.s2030-intro__image img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Corner badge — 82×82 white triangle top-right. Figma node 11008:11373 */
.s2030-intro__image::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-top: 82px solid var(--color-white);
  border-left: 82px solid transparent;
}

.s2030-intro__content {
  display: flex;
  flex-direction: column;
  gap: 48px; /* Figma 11008:11374 layout_XGIXHU */
  padding: 36px; /* Figma 11008:11374 */
  background-color: var(--color-accent-light-blue); /* #CBDAE6 */
}

.s2030-intro__heading-group {
  display: flex;
  flex-direction: column;
  gap: 24px; /* Figma 11008:11375 */
}

/* Override section-tagline default tangerine → navy for this section */
.s2030-intro__tagline {
  color: var(--color-navy); /* Figma 11008:11376 */
}

.s2030-intro__tagline::after {
  background-color: var(--color-navy); /* line inherits navy */
}

/* Hook SVG is hardcoded tangerine — override with navy data-URI */
.s2030-intro__tagline::before {
  background-image: url("data:image/svg+xml,%3Csvg width='9' height='7' viewBox='0 0 9 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.728 6.011L0.211 0.501' stroke='%230B1628'/%3E%3C/svg%3E");
}

.s2030-intro__heading {
  margin: 0;
  font-size: 44px; /* Pastel 2026-06-15 — H2 44px (was 48px) */
  font-weight: 400;
  line-height: 1.1; /* Pastel 2026-06-15 — H2 lh 1.1 */
  letter-spacing: -0.01em;
  color: var(--color-navy); /* Figma 11008:11378 */
}

.s2030-intro__lead {
  margin: 0;
  max-width: 768px; /* Figma 11008:11380 container W */
  font-size: 20px; /* Figma Text/Large/Bold */
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-navy-darkest); /* #03060C — Figma 11008:11380 */
}

/* Cards row — 3 equal-width cards */
.s2030-intro__cards {
  display: flex;
  gap: 24px; /* Figma 11008:11382 layout_BQR56K */
  align-items: stretch;
}

/* XSmall card variant — no image, no CTA, no tagline, no link */
.card--xsmall {
  flex: 1;
  border: 1px solid var(--color-navy-lightest); /* #E6E7E9 — Figma stroke */
  box-shadow: var(--shadow-md); /* Figma shadow:medium */
}

.card--xsmall .card__content {
  padding: 24px; /* Figma card content */
  gap: 16px;
}

.card--xsmall .card__title {
  font-size: 20px; /* Figma Heading/H6 */
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--color-navy);
}

.card--xsmall .card__excerpt {
  font-size: 14px; /* Figma Text/Small/Normal */
  font-weight: 400;
  line-height: 1.4;
  color: var(--color-navy);
}

/* --------------------------------------------------------------------------
   Block 5 — Download the Plan ("2030" gradient hero text)
   Figma node 11008:11354
   -------------------------------------------------------------------------- */
.s2030-download {
  padding: 64px 80px; /* Figma layout_WLIIQD */
  background-color: var(--color-navy); /* #0B1628 */
}

.s2030-download__inner {
  display: flex;
  justify-content: space-between; /* Figma 11008:11355 layout_Q8BJDQ */
  align-items: stretch;
  max-width: 1280px; /* Pastel 2026-06-15 #2 — cap inner at 1280px */
  margin-inline: auto;
  width: 100%;
}

.s2030-download__hero-text {
  width: 635px; /* Figma 11008:11357 */
  display: flex;
  align-items: center;
  font-size: 240px; /* Figma custom */
  font-weight: 700;
  line-height: 1.4;
  background: linear-gradient(121deg, rgba(255,102,0,1) 22%, rgba(219,174,7,1) 77%); /* untokenized: one-off gradient stop #DBAE07 */
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  user-select: none;
}

/* Section tagline on dark bg — tangerine color inherits from .section-tagline default */
.s2030-download__tagline {
  color: var(--color-tangerine); /* explicit for clarity */
}

.s2030-download__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* prevent children (button) from stretching full width */
  gap: 32px; /* Figma 11008:11359 layout_MCBOIQ */
  max-width: 641px; /* Figma content container W */
  justify-content: center;
}

.s2030-download__heading {
  margin: 0;
  font-size: 44px; /* Pastel 2026-06-15 — H2 44px (was 48px) */
  font-weight: 400;
  line-height: 1.1; /* Pastel 2026-06-15 — H2 lh 1.1 */
  letter-spacing: -0.01em;
  color: var(--color-white);
}

.s2030-download__body {
  margin: 0;
  font-size: 18px; /* Figma Text/Medium/Normal */
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-white);
}

/* --------------------------------------------------------------------------
   Block 6 — Values ("What We Stand For")
   Figma node 11008:11320
   -------------------------------------------------------------------------- */
.s2030-values {
  padding: 112px 80px 64px; /* Figma layout_QQ7G2J */
  background-color: var(--color-white);
}

.s2030-values__wrapper {
  display: flex;
  flex-direction: column;
  gap: 48px; /* Figma 11008:11321 layout_8UZ28I */
  max-width: 1280px; /* Pastel 2026-06-15 #3 — cap inner at 1280px */
  margin-inline: auto;
  width: 100%;
}

.s2030-values__intro {
  display: flex;
  justify-content: space-between; /* Figma 11008:11322 layout_UFU42I */
  align-items: flex-start;
  /* no max-width: intro spans the same width as the content row below,
     so the button stays flush with its right edge on wide screens
     (QA 2026-06-10 — button shifted right) */
}

.s2030-values__intro-content {
  display: flex;
  flex-direction: column;
  gap: 22px; /* Figma 11008:11323 layout_UBGD75 */
}

.s2030-values__heading {
  margin: 0;
  max-width: 648px; /* Figma container */
  font-size: 44px; /* Pastel 2026-06-15 — H2 44px (was 48px) */
  font-weight: 400;
  line-height: 1.1; /* Pastel 2026-06-15 — H2 lh 1.1 */
  letter-spacing: -0.01em;
  color: var(--color-navy);
}

.s2030-values__heading-accent {
  color: var(--color-tangerine); /* Figma ts1 span — "Our" in tangerine */
}

/* Content row: list + image */
.s2030-values__content-row {
  display: flex;
  gap: 64px; /* Figma 11008:11330 layout_30ROU6 */
}

.s2030-values__list {
  flex: 1;
  margin: 0;
  padding: 3px 1px; /* Figma 11008:11331 */
}

.s2030-values__list-item {
  display: flex;
  justify-content: space-between; /* Figma row layout */
  align-items: center;
  padding: 16px 0; /* Figma row padding */
  border-bottom: 1px solid var(--color-tangerine); /* Figma stroke bottom #FF6600 */
}

.s2030-values__list-item dt {
  font-size: 20px; /* Figma Emphasis */
  font-weight: 700;
  font-style: italic;
  line-height: 1.4;
  color: var(--color-navy);
}

.s2030-values__list-item dd {
  margin: 0;
  max-width: 320px; /* QA R3 part-2 — client-specified 320px (was derived 360px) */
  font-size: 14px; /* Figma Text/Small/Normal */
  font-weight: 400;
  line-height: 1.4;
  color: var(--color-navy);
  text-align: right; /* Figma dd textAlign:RIGHT */
}

/* Values image — right column with corner badge */
.s2030-values__image {
  position: relative;
  width: 100%;              /* QA R3 part-2 #4 — was fixed 618px non-shrink */
  max-width: 618px;         /* Figma 11008:11352 W:618 (cap) */
  flex-shrink: 1;           /* QA R3 part-2 #4 — allow shrink */
  min-width: 0;
  align-self: flex-start;   /* QA R3 part-2 #4 — don't stretch to list height (was cropping the photo to a sliver); scale the whole photo, like the history image */
  aspect-ratio: 4096 / 2296; /* QA R3 part-2 #4 — source strategy-values.png; fixed ratio so the photo scales down instead of cover-cropping */
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.s2030-values__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Corner badge — 82×82 white triangle top-right. Figma 11008:13963 */
.s2030-values__image::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-top: 82px solid var(--color-white);
  border-left: 82px solid transparent;
}

/* --------------------------------------------------------------------------
   Block 7 — Products ("What We Offer")
   Figma node 11008:11298
   -------------------------------------------------------------------------- */
.s2030-products {
  padding: 112px 80px; /* Figma layout_RSRQF9 */
  background-color: var(--color-white);
}

.s2030-products__wrapper {
  display: flex;
  flex-direction: column;
  gap: 48px; /* Figma 11008:11299 layout_8UZ28I */
  max-width: 1280px; /* Pastel 2026-06-15 #4 — cap inner at 1280px */
  margin-inline: auto;
  width: 100%;
}

.s2030-products__intro {
  display: flex;
  justify-content: space-between; /* Figma 11008:11300 layout_O4RG6E */
  align-items: flex-start;
  /* no max-width: keeps the button flush with the card grid's right edge
     on wide screens (QA 2026-06-10 — button shifted right) */
}

.s2030-products__intro-content {
  display: flex;
  flex-direction: column;
  gap: 22px; /* Figma 11008:11301 */
}

.s2030-products__heading {
  margin: 0;
  max-width: 648px;
  font-size: 44px; /* Pastel 2026-06-15 — H2 44px (was 48px) */
  font-weight: 400;
  line-height: 1.1; /* Pastel 2026-06-15 — H2 lh 1.1 */
  letter-spacing: -0.01em;
  color: var(--color-navy-darkest); /* #03060C — Figma 11008:11305 */
}

.s2030-products__heading-accent {
  color: var(--color-tangerine); /* Figma ts1 span — "Our" in tangerine */
}

.s2030-products__lead {
  margin: 0;
  font-size: 20px; /* Figma Text/Large/Bold */
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-navy-darkest); /* #03060C */
}

.s2030-products__btn {
  flex-shrink: 0;
}

/* Card grid — 2 rows */
.s2030-products__grid {
  display: flex;
  flex-direction: column;
  gap: 24px; /* Figma cards column gap */
  min-width: 0; /* flex overflow prevention per css-architecture.md */
}

.s2030-products__row {
  display: flex;
  gap: 24px; /* Figma row gap */
  min-width: 0;
}

/* All cards equal width — row 1 fills full width evenly, row 2 left-aligned */
.s2030-products__row .card--icon-strip {
  flex: 1 1 0;
  min-width: 0;
}

/* QA R3 #13 — products cards title 18px (Figma smaller than generic 20px H6).
   Generic .card--icon-strip .card__title = 20px; scope to this section only. */
.s2030-products__row .card--icon-strip .card__title {
  font-size: 18px; /* QA R3 #13 */
}

/* Row 2: 3 cards same size as row 1 — cap max-width so they don't over-stretch */
.s2030-products__row:last-child {
  justify-content: flex-start;
}

.s2030-products__row:last-child .card--icon-strip {
  flex: 0 0 calc((100% - 72px) / 4); /* same width as row 1: (full - 3×24px gap) / 4 */
}

/* Icon-strip card base (.card--icon-strip, .card__content, .card__icon,
   .card__title, .card__excerpt, .card__strip) now lives in cards.css (shared,
   globally enqueued). Only 2030-specific overrides remain above
   (.s2030-products__row .card--icon-strip ...). Moved 2026-06-19. */

/* --------------------------------------------------------------------------
   Block 8 — Five Sectors
   Figma node 11008:11235
   -------------------------------------------------------------------------- */
.s2030-sectors {
  padding: 112px 80px; /* Figma layout_VTRMD5 */
  background-color: var(--color-navy); /* #0B1628 */
}

.s2030-sectors__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 1280px; /* Pastel 2026-06-15 #5 — cap inner at 1280px */
  margin-inline: auto;
  width: 100%;
}

/* Header — centered text block */
.s2030-sectors__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 32px; /* Figma 11008:11238 layout_V1POQG */
  margin-bottom: 48px;
}

.s2030-sectors__heading {
  margin: 0;
  max-width: 641px; /* Figma container */
  font-size: 44px; /* Pastel 2026-06-15 — H2 44px (was 48px) */
  font-weight: 400;
  line-height: 1.1; /* Pastel 2026-06-15 — H2 lh 1.1 */
  letter-spacing: -0.01em;
  color: var(--color-white);
}

.s2030-sectors__body {
  margin: 0;
  max-width: 641px;
  font-size: 18px; /* Figma Text/Medium/Normal */
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-white);
}

/* Grid: left col | center image | right col */
.s2030-sectors__grid {
  display: flex;
  align-items: center;
  gap: 48px; /* Figma 11008:11249 */
  position: relative;
  width: 100%;
  margin-bottom: 48px;
}

/* Decorative outline rectangle — Figma 11008:11250: absolute x:131 y:132, W:993 H:543.
   Positioned on .s2030-sectors__grid; extends below grid to visually unite with bottom card.
   z-index:0 keeps it behind text/image (content has z-index:1). */
.s2030-sectors__outline {
  position: absolute;
  top: 132px; /* Figma y:132 */
  left: 50%;
  transform: translateX(-50%);
  width: 993px; /* Figma W:993 */
  height: 543px; /* Figma H:543 */
  border: 1px solid var(--color-white);
  border-radius: var(--radius-sm);
  pointer-events: none;
  z-index: 0;
}

/* Content above outline */
.s2030-sectors__col,
.s2030-sectors__center-image {
  position: relative;
  z-index: 1;
}

.s2030-sectors__col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 64px; /* Figma col gap */
}

/* Center image — Figma W:540 (was square 540×540, which cropped the 3:2 landscape) */
.s2030-sectors__center-image {
  width: 540px; /* Figma 11008:11271 W:540 */
  aspect-ratio: 3 / 2;      /* QA R3 part-2 #5 — source strategy-sectors-center.png is 1920×1280 (3:2); was a 540×540 square crop. Show the full photo, scaling instead of cropping */
  align-self: center;       /* centre vertically between the two taller card columns */
  flex-shrink: 1;           /* QA R3 part-2 #5 — allow shrink */
  min-width: 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.s2030-sectors__center-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Sector card */
.s2030-sectors__card {
  padding: 16px; /* Figma card padding */
  display: flex;
  flex-direction: column;
  gap: 16px;
  background-color: var(--color-navy);
  border: 1px solid rgba(230, 231, 233, 0.5); /* --color-navy-lightest-50 */
  border-radius: var(--radius-sm);
  text-align: start;
}

.s2030-sectors__card-title {
  margin: 0;
  font-size: 24px; /* QA R3 #14 — H5/24px (was 30px H4; client requested smaller); Figma 11008:11256 Heading/H4 32px original, but client override to 24px */
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--color-white);
}

.s2030-sectors__divider {
  margin: 0;
  border: none;
  border-top: 1px solid var(--color-tangerine); /* #FF6600 — Figma divider */
}

.s2030-sectors__card-body {
  margin: 0;
  font-size: 14px; /* Figma Text/Small/Normal */
  font-weight: 400;
  line-height: 1.4;
  color: var(--color-white);
}

/* Bottom card — slightly wider than center image (540px), centered under grid */
.s2030-sectors__card--full {
  width: 600px;
  max-width: 100%;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   Block 9 — Colour CTA (tangerine membership card + watermark)
   Figma node 11008:11221. CSS copied from advice.css .advice-cta pattern
   per user decision (page stays independent).
   -------------------------------------------------------------------------- */
.s2030-cta {
  padding: 112px 80px; /* Figma layout_N2MNGJ */
  background-color: var(--color-white);
}

.s2030-cta__card {
  position: relative;
  max-width: 1280px; /* Pastel 2026-06-15 #6 — cap card at 1280px (client reversed the 2026-06-10 uncapped decision; all section inners now consistently 1280) */
  margin-inline: auto;
  padding: 64px; /* Figma 11008:11222 layout_409JPO */
  background-color: var(--color-tangerine);
  border-radius: var(--radius-sm);
  color: var(--color-white);
  overflow: hidden;
}

.s2030-cta__content {
  position: relative;
  z-index: 1;
  max-width: 659px; /* Figma 11008:11224 W:659 */
  display: flex;
  flex-direction: column;
  gap: 46px; /* Figma content wrapper gap */
}

.s2030-cta__heading {
  margin: 0;
  font-size: 44px; /* Pastel 2026-06-15 — H2 44px (was 48px) */
  font-weight: 400;
  line-height: 1.1; /* Pastel 2026-06-15 — H2 lh 1.1 */
  letter-spacing: -0.01em;
  color: var(--color-white);
}

.s2030-cta__body {
  margin: 0;
  font-size: 20px; /* Figma Text/Large/Normal */
  font-weight: 400;
  line-height: 1.3;
  color: var(--color-white);
}

.s2030-cta__buttons {
  display: flex;
  flex-direction: row;
  gap: 24px; /* Figma 11008:11232 row gap */
  flex-wrap: wrap;
}

.s2030-cta__link-plain {
  text-decoration: none;
}

/* Watermark — MBA Logo Stacked white SVG. Figma 11008:11223: abs x:820 y:0 W:498 H:498 */
/* Watermark — same pattern as .advice-cta__watermark.
   SVG bakes 45° rotation; AABB ≈ 700×700 for the 498×498 Figma frame.
   Values user-tuned on advice CTA, reused here (same component). */
.s2030-cta__watermark {
  position: absolute;
  top: -80px;
  right: -125px;
  width: 700px;
  height: 700px;
  background-image: url('../images/mba-logo-stacked-white.svg');
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
  z-index: 0;
}


/* ==========================================================================
   Responsive — Watermark cascade (same steps as advice-cta)
   ========================================================================== */
@media (min-width: 1201px) and (max-width: 1280px) {
  .s2030-cta__watermark {
    width: 580px;
    height: 580px;
    top: 20px;
    right: -118px;
  }
}

@media (min-width: 1101px) and (max-width: 1200px) {
  .s2030-cta__watermark {
    width: 410px;
    height: 410px;
    top: 145px;
    right: -70px;
  }
}

@media (min-width: 1025px) and (max-width: 1100px) {
  .s2030-cta__watermark {
    width: 330px;
    height: 330px;
    top: 200px;
    right: -56px;
  }
}

/* ==========================================================================
   Responsive — Narrow desktop (<1328px)
   Five Sectors stacks early: below 1328px the desktop 3-col layout breaks —
   side columns get too narrow and sector titles/body get clipped
   (QA 2026-06-10 — "text is not displayed fully on some desktop sizes";
   1328 threshold confirmed by user observation).
   ========================================================================== */
@media (max-width: 1327px) {
  .s2030-sectors__grid {
    flex-direction: column;
  }

  .s2030-sectors__outline {
    display: none; /* too complex to reflow */
  }

  .s2030-sectors__center-image {
    width: 100%;
    height: auto;             /* QA R3 part-2 — was fixed 400px + object-fit:cover, which cropped the 3:2 photo to a wide sliver as the column narrowed; let aspect-ratio (3/2 from base) drive height so the whole photo scales, like the history image */
    order: -1; /* image above cards */
  }

  .s2030-sectors__col {
    width: 100%;
    gap: 32px;
  }

  /* Bottom card matches the other stacked cards — desktop keeps it 600px
     centered, stacked layout stretches all cards full width
     (QA 2026-06-10) */
  .s2030-sectors__card--full {
    width: 100%;
  }
}

/* ==========================================================================
   Responsive — Tablet (≤1024px)
   ========================================================================== */
@media (max-width: 1024px) {
  /* Intro */
  .s2030-intro {
    padding: 80px 40px;
  }

  /* Download */
  .s2030-download {
    padding: 64px 40px;
  }

  .s2030-download__inner {
    flex-direction: column;
    gap: 32px;
  }

  .s2030-download__hero-text {
    width: auto;
    font-size: 120px;
    text-align: center;
  }

  .s2030-download__content {
    max-width: 100%;
  }

  /* Values */
  .s2030-values {
    padding: 80px 40px 48px;
  }

  .s2030-values__content-row {
    flex-direction: column-reverse; /* image above list */
  }

  .s2030-values__image {
    width: 100%;
    height: 400px;
  }

  /* Products */
  .s2030-products {
    padding: 80px 40px;
  }

  .s2030-products__row {
    flex-wrap: wrap;
  }

  .s2030-products__row .card--icon-strip {
    flex: 0 0 calc(50% - 12px) !important;
    width: auto !important;
  }

  /* Five Sectors — grid stacking happens at <1328px (see block above) */
  .s2030-sectors {
    padding: 80px 40px;
  }

  /* CTA */
  .s2030-cta {
    padding: 80px 40px;
  }

  /* Pastel R2 2026-06-15 #11 — anchor the watermark to the bottom-right for the
     whole tablet/narrow range instead of top:NNN. The top-based cascade dropped
     the logo below the card (clipped, invisible) whenever the heading wrapped —
     worst at 769–860. Bottom-anchoring is independent of card height, so one rule
     covers 769–1024 and the old per-100px @860 hack is gone. */
  .s2030-cta__watermark {
    width: 280px;
    height: 280px;
    top: auto;
    bottom: -75px;
    left: auto;
    right: -48px;
  }
}


/* ==========================================================================
   Responsive — Phone (≤768px)
   ========================================================================== */
@media (max-width: 768px) {
  /* Intro */
  .s2030-intro {
    padding: 50px 20px;
  }

  /* Pastel 2026-06-15 #7 — intro content box padding 24px on mobile */
  .s2030-intro__content {
    padding: 24px;
  }

  .s2030-intro__heading {
    font-size: 32px; /* Pastel 2026-06-15 — H2 mobile 32px (was 36px) */
  }

  .s2030-intro__lead {
    font-size: 18px;
  }

  .s2030-intro__cards {
    flex-direction: column;
  }

  .s2030-intro__image::after {
    border-top-width: 60px;
    border-left-width: 60px;
  }

  /* Download */
  .s2030-download {
    padding: 50px 20px;
  }

  /* Pastel 2026-06-15 #8 — "2030" fills the screen width on mobile */
  .s2030-download__hero-text {
    width: 100%;
    justify-content: center;
    font-size: 40vw; /* Pastel R2 2026-06-15 #8 — fill the width ("2030" ≈ 2.0em wide; 38vw left ~27px gaps each side) */
  }

  .s2030-download__heading {
    font-size: 32px; /* Pastel 2026-06-15 — H2 mobile 32px (was 36px) */
  }

  .s2030-download__body {
    font-size: 16px;
  }

  /* Values */
  .s2030-values {
    padding: 50px 20px 32px;
  }

  .s2030-values__intro {
    flex-direction: column;
    gap: 24px;
  }

  .s2030-values__heading {
    font-size: 32px; /* Pastel 2026-06-15 — H2 mobile 32px (was 36px) */
  }

  /* Pastel 2026-06-15 #9 — reduce gap between image and list when stacked */
  .s2030-values__content-row {
    gap: 32px;
  }

  .s2030-values__image {
    height: 300px;
  }

  .s2030-values__image::after {
    border-top-width: 60px;
    border-left-width: 60px;
  }

  .s2030-values__list-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .s2030-values__list-item dd {
    text-align: left;
  }

  /* Products */
  .s2030-products {
    padding: 50px 20px;
  }

  .s2030-products__intro {
    flex-direction: column;
    gap: 24px;
  }

  .s2030-products__heading {
    font-size: 32px; /* Pastel 2026-06-15 — H2 mobile 32px (was 36px) */
  }

  /* Cards stack in a single full-width column on phone — no carousel, nothing off-screen */
  .s2030-products__row {
    flex-direction: column;
    gap: 24px;
  }

  .s2030-products__row .card--icon-strip {
    flex: 1 1 auto !important;
    width: 100% !important;
  }

  /* Five Sectors */
  .s2030-sectors {
    padding: 50px 20px;
  }

  .s2030-sectors__heading {
    font-size: 32px; /* Pastel 2026-06-15 — H2 mobile 32px (was 36px) */
  }

  .s2030-sectors__card-title {
    font-size: 24px; /* mobile H4 per style guide */
  }

  /* QA R3 part-2 — no fixed height; aspect-ratio 3/2 (base) keeps the full photo, no cover-crop */

  /* Pastel 2026-06-15 #10 — uniform gap between all sector cards when stacked */
  .s2030-sectors__grid {
    gap: 24px;
    margin-bottom: 24px;
  }

  .s2030-sectors__col {
    gap: 24px;
  }

  /* CTA */
  .s2030-cta {
    padding: 50px 20px;
  }

  .s2030-cta__card {
    padding: 24px;
    /* QA 2026-06-10: no min-height — unlike advice-cta there is no advisor
       photo to reserve space for; card height is content + watermark sliver */
    padding-bottom: 150px; /* reserve for the watermark sliver below content — user-tuned */
  }

  .s2030-cta__heading {
    font-size: 32px; /* Pastel 2026-06-15 — H2 mobile 32px (was 34px) */
  }

  /* QA R3 #15 — body text 18px on mobile (was 20px desktop) */
  .s2030-cta__body {
    font-size: 18px;
  }

  /* QA R3 #16+#17 — 36px gap above and below the body paragraph within CTA content on mobile.
     The content is a flex column; row-gap:36px covers both the space above and below .s2030-cta__body. */
  .s2030-cta__content {
    gap: 36px;
  }

  /* Pastel 2026-06-15 #11 — left-align button + link, tighten the gap between them */
  .s2030-cta__buttons {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  /* Pastel R2 2026-06-15 #11 — white logo peeks from the bottom-right corner.
     The earlier -80/-50 + 300px pushed the rotated logo almost entirely past the
     card's overflow:hidden edge (QA: "not visible"); smaller offsets keep a clear
     wedge of it anchored in the corner. */
  .s2030-cta__watermark {
    bottom: -63px;
    top: auto;
    right: -40px;
    left: auto;
    width: 240px;
    height: 240px;
  }
}


/* ==========================================================================
   Responsive — Small phone (≤402px)
   ========================================================================== */
@media (max-width: 402px) {
  .s2030-download__hero-text {
    font-size: 40vw; /* Pastel R2 2026-06-15 #8 — fill width on small phones */
  }

  /* QA R3 part-2 — center image keeps aspect-ratio 3/2 (base), no fixed height */
}