/* ============================================================
   EXECUTIVE SUMMARY — kinetic editorial treatment.
   Loaded after styles.css so it can override defaults.
   ============================================================ */

/* ---------- Scroll-triggered colour cascade on key phrases ----------
   Wraps an inline phrase whose letters fade from ink → orange one at a
   time when scrolled into view. */
.hl {
  display: inline;
  color: inherit;
  font-weight: 700;
  --hl-color: var(--pf-orange);
}
.hl .hl-letter {
  transition: color 420ms cubic-bezier(0.22, 1, 0.36, 1);
}
.hl.is-seen .hl-letter {
  color: var(--hl-color);
}

/* Number count-up reusable styling (used everywhere) */
.anim-num {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.anim-num-digits { display: inline-block; min-width: 1ch; }

/* ============================================================
   EXEC SUMMARY ROOT
   ============================================================ */
/* Scroll-spy + anchor target sentinel for the executive-summary chapter.
   Has no visible footprint; sits at the top of the chapter so the TOC's
   IntersectionObserver and the cover-page "scroll to exec summary" link
   both have a small DOM element to lock onto. */
.exec-chapter-anchor {
  position: absolute;
  top: 0; left: 0;
  width: 1px; height: 1px;
  pointer-events: none;
}
.exec-summary {
  /* lives in chapter-block slot (grid-column: 2); centered as a single column */
  max-width: var(--reader-max);
  margin: 0 auto;
  padding-top: 56px;
  padding-bottom: 96px;
  position: relative;
  font-family: var(--font-body);
}

/* ----- Hero opener ----- */
.exec-hero {
  position: relative;
  padding: 32px 0 64px;
  overflow: visible;
  isolation: isolate;
}
.exec-hero-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(56px);
  z-index: -1;
  pointer-events: none;
}
.exec-hero-blob-a {
  width: 460px; height: 460px;
  background: radial-gradient(circle, var(--pf-orange) 0%, transparent 65%);
  opacity: 0.5;
  top: -120px; right: -120px;
  animation: blobDrift 20s ease-in-out infinite alternate;
}
.exec-hero-blob-b {
  width: 320px; height: 320px;
  background: radial-gradient(circle, #c97a3a 0%, transparent 60%);
  opacity: 0.35;
  top: 160px; right: 320px;
  animation: blobDrift 26s ease-in-out infinite alternate-reverse;
}
@keyframes blobDrift {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-50px, 36px) scale(1.12); }
}
.exec-hero-grid {
  position: absolute; inset: -20px;
  background-image:
    linear-gradient(var(--rule) 1px, transparent 1px),
    linear-gradient(90deg, var(--rule) 1px, transparent 1px);
  background-size: 80px 80px;
  opacity: 0.32;
  mask-image: radial-gradient(ellipse 80% 70% at top right, black 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at top right, black 0%, transparent 70%);
  z-index: -2;
}

.exec-chip {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--font-ui);
  margin-bottom: 36px;
  animation: execFade .6s var(--ease-out) both;
}
.exec-chip-num {
  font-family: var(--font-ui);
  font-size: 12px; font-weight: 500;
  color: var(--ink); background: transparent;
  padding: 0;
  letter-spacing: 0.12em;
}
.exec-chip-num::before { content: '— '; color: var(--pf-orange); }
.exec-chip-line { display: none; }
.exec-chip-label {
  font-size: 12px; font-weight: 500; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--pf-orange);
  font-family: var(--font-ui);
}

.exec-display {
  font-family: var(--font-display);
  font-weight: 800; font-size: clamp(56px, 9.4vw, 144px);
  line-height: 0.92; letter-spacing: -0.05em;
  margin: 0; color: var(--ink);
  animation: execDisplayIn 1s var(--ease-spring) both;
}
@keyframes execDisplayIn {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: none; }
}
@keyframes execFade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.exec-display-accent {
  display: inline-block; margin-left: 0.18em;
  font-family: var(--font-accent); font-style: italic;
  font-weight: 400; color: var(--pf-orange);
  letter-spacing: -0.03em;
  vertical-align: baseline;
  font-size: 1.04em;
}

.exec-rotator {
  position: relative;
  display: inline-block;
  vertical-align: baseline;
  white-space: nowrap;
}
.exec-rotator-spacer { visibility: hidden; display: inline-block; }
.exec-rotator-word {
  position: absolute; top: 0; left: 0;
  opacity: 0;
  transform: translateY(0.4em) rotate(3deg);
  transition: opacity .55s var(--ease-spring), transform .55s var(--ease-spring);
}
.exec-rotator-word.is-active {
  opacity: 1; transform: none;
  transition-delay: .18s;
}
.exec-rotator-word.is-leaving {
  opacity: 0;
  transform: translateY(-0.35em) rotate(-2deg);
}

.exec-hero-sub {
  font-family: var(--font-body);
  font-size: clamp(18px, 2vw, 26px);
  line-height: 1.45;
  color: var(--ink-2);
  max-width: 640px;
  margin: 32px 0 0;
  letter-spacing: -0.005em;
  animation: execDisplayIn 1s .2s var(--ease-spring) both;
}

/* ----- Marquee ticker ----- */
.exec-ticker {
  position: relative;
  margin: 16px 0 56px;
  padding: 22px 0;
  background: var(--ink);
  color: #fff;
  border-radius: var(--r-pill);
  overflow: hidden;
}
.exec-ticker::before, .exec-ticker::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 90px;
  z-index: 2; pointer-events: none;
}
.exec-ticker::before { left: 0;  background: linear-gradient(90deg, var(--ink), transparent); }
.exec-ticker::after  { right: 0; background: linear-gradient(270deg, var(--ink), transparent); }

.exec-ticker-track {
  display: flex; align-items: baseline; gap: 48px;
  white-space: nowrap;
  animation: tickerScroll 56s linear infinite;
  will-change: transform;
  width: max-content;
  padding: 0 24px;
}
.exec-ticker:hover .exec-ticker-track { animation-play-state: paused; }
@keyframes tickerScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.exec-ticker-item {
  display: inline-flex; align-items: baseline; gap: 14px;
  font-family: var(--font-display);
  letter-spacing: -0.02em;
}
.exec-ticker-val {
  font-size: 30px; font-weight: 700; color: var(--pf-orange);
}
.exec-ticker-label {
  font-size: 15px; font-weight: 500; color: rgba(255,240,220,0.86);
  font-family: var(--font-body);
}
.exec-ticker-dot {
  color: var(--pf-orange-soft); font-size: 14px; padding-left: 28px; opacity: 0.45;
}

/* Static variant — every stat visible at once, no marquee animation.
   Each item is its own dark pill (rather than one big pill wrapping
   them all), so the row reads as four discrete chips that wrap onto
   multiple lines on narrow viewports. */
.exec-ticker.exec-ticker-static {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 14px;
  row-gap: 14px;
  padding: 0;
  margin: 16px 0 56px;
  background: transparent;
  color: var(--ink);
  border-radius: 0;
  overflow: visible;
}
.exec-ticker.exec-ticker-static::before,
.exec-ticker.exec-ticker-static::after { content: none; }
.exec-ticker.exec-ticker-static .exec-ticker-item {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  padding: 14px 22px;
  background: var(--ink);
  color: #fff;
  border-radius: var(--r-pill);
  white-space: normal;
  font-family: var(--font-display);
  letter-spacing: -0.015em;
  animation: none;
}
.exec-ticker.exec-ticker-static .exec-ticker-val {
  font-size: 22px; font-weight: 700;
  color: var(--pf-orange);
  font-family: var(--font-display);
}
.exec-ticker.exec-ticker-static .exec-ticker-label {
  font-size: 13px; font-weight: 500;
  color: rgba(255,240,220,0.88);
  font-family: var(--font-body);
  letter-spacing: 0;
  text-transform: none;
}

/* ----- Definition ----- */
.exec-definition {
  position: relative;
  margin: 24px 0 36px;
  padding: 36px 44px 38px;
  background: var(--paper-warm);
  border-radius: var(--r-lg);
  max-width: var(--reader-max);
  border-left: 6px solid var(--pf-orange);
}
.exec-definition-tag {
  display: inline-block;
  font-family: var(--font-ui); font-size: 11px;
  font-weight: 500; letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--pf-orange);
  margin-bottom: 16px;
}
.exec-definition p {
  font-family: var(--font-accent);
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.32; font-weight: 400;
  color: var(--ink); letter-spacing: -0.015em;
  margin: 0; text-wrap: pretty;
}

/* ----- Lead body sizes ----- */
.exec-lead {
  font-family: var(--font-body);
  color: var(--ink-2);
  letter-spacing: -0.005em;
  max-width: var(--reader-max);
  text-wrap: pretty;
}
.exec-lead-mid {
  font-size: 19.5px; line-height: 1.55;
  margin: 32px 0;
}
.exec-lead-big {
  font-family: var(--font-accent);
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.28; font-weight: 400;
  color: var(--ink); letter-spacing: -0.015em;
  margin: 32px 0 24px;
  max-width: 100%;
  text-wrap: balance;
}

/* ----- Intro cards (3-up) — Creative sector / Aspiring creators /
   Wider economy. Big number + short heading in the head; the longer
   phrase is bolded at the start of the paragraph. */
.exec-intro-cards {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
  margin: 40px 0 64px;
  max-width: 100%;
}
.exec-intro-card {
  position: relative; overflow: hidden;
  padding: 30px 28px;
  border-radius: var(--r-lg);
  background: #fff; border: 1px solid var(--rule);
  transition: transform .3s var(--ease-spring), box-shadow .3s var(--ease-out);
  display: flex; flex-direction: column; gap: 18px;
  min-height: 320px;
}
.exec-intro-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); }
.exec-intro-card[data-i="0"] { background: var(--paper-warm); }
.exec-intro-card[data-i="1"] { background: var(--pf-orange); color: var(--ink); border-color: var(--pf-orange-dark); }
.exec-intro-card[data-i="2"] { background: var(--ink); color: var(--paper-warm); border-color: var(--ink); }

.exec-intro-card-head {
  display: flex; align-items: flex-end; gap: 18px;
}
.exec-intro-card-num {
  font-family: var(--font-display); font-weight: 700;
  font-size: 84px; line-height: 0.84;
  color: var(--pf-orange); letter-spacing: -0.05em;
  flex-shrink: 0;
}
.exec-intro-card[data-i="1"] .exec-intro-card-num { color: var(--ink); }
.exec-intro-card[data-i="2"] .exec-intro-card-num { color: var(--pf-orange); }

/* Short heading next to the number. */
.exec-intro-card-lead {
  font-family: var(--font-display);
  font-weight: 700; font-size: 22px;
  line-height: 1.15; letter-spacing: -0.015em;
  text-wrap: balance;
  padding-bottom: 4px;
}
/* Bold inline phrase at the start of the body paragraph. */
.exec-intro-card-leadbold { font-weight: 700; }
.exec-intro-card p {
  font-family: var(--font-body);
  font-size: 14.5px; line-height: 1.55;
  margin: 0; color: inherit; opacity: 0.92;
}

/* ----- Hero stat ($920B) ----- */
.exec-herostat {
  position: relative;
  margin: 56px 0 72px;
  padding: 64px 48px 60px;
  background: var(--ink);
  color: #fff;
  border-radius: var(--r-xl);
  overflow: hidden;
  isolation: isolate;
  max-width: 100%;
}
.exec-herostat-shapes { position: absolute; inset: 0; z-index: -1; }
.exec-herostat-shapes span { position: absolute; border-radius: 50%; filter: blur(48px); }
.exec-herostat-shapes span:nth-child(1) {
  width: 460px; height: 460px;
  background: var(--pf-orange); opacity: 0.42;
  top: -150px; right: -120px;
  animation: blobDrift 18s ease-in-out infinite alternate;
}
.exec-herostat-shapes span:nth-child(2) {
  width: 280px; height: 280px;
  background: #c97a3a; opacity: 0.3;
  bottom: -120px; left: 60px;
  animation: blobDrift 24s ease-in-out infinite alternate-reverse;
}
.exec-herostat-shapes span:nth-child(3) {
  width: 160px; height: 160px;
  background: var(--pf-orange-soft); opacity: 0.18;
  top: 30%; left: 36%;
  animation: blobDrift 28s ease-in-out infinite alternate;
}

.exec-herostat-tag {
  display: inline-block;
  font-family: var(--font-ui); font-size: 12px; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--pf-orange);
  background: transparent;
  padding: 0;
  margin-bottom: 32px;
}

.exec-herostat-figure {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(56px, 11vw, 132px);
  line-height: 0.9; letter-spacing: -0.05em;
  color: var(--pf-orange);
  display: flex; align-items: baseline; gap: 8px;
  flex-wrap: wrap;
  max-width: 100%;
  word-break: keep-all;
}
.exec-herostat-prefix {
  font-size: 0.46em; color: rgba(255,255,255,0.78);
  font-weight: 600;
}
.exec-herostat-num { font-variant-numeric: tabular-nums; }
.exec-herostat-suffix {
  /* Same display font as the number; only size + colour differ. */
  font-size: 0.38em; font-weight: 400;
  color: rgba(255,255,255,0.82);
  margin-left: 6px;
  letter-spacing: -0.01em;
}
.exec-herostat-label {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(20px, 2.4vw, 32px);
  font-weight: 600;
  color: var(--paper-warm);
  margin-top: 16px;
  letter-spacing: -0.015em;
}
.exec-herostat-desc {
  font-family: var(--font-body);
  font-size: 17px; line-height: 1.55;
  color: rgba(255,240,220,0.82);
  margin: 36px 0 0;
  max-width: 600px;
}

/* ----- "In this report" anchor cards ----- */
.exec-explore {
  margin: 48px 0 80px;
  max-width: 100%;
}
.exec-explore-intro {
  font-family: var(--font-body);
  font-size: 18px; line-height: 1.5;
  color: var(--ink-2);
  margin: 0 0 24px;
  max-width: 60ch;
}
.exec-explore-cards {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.exec-explore-card {
  position: relative; display: flex; flex-direction: column;
  gap: 18px; padding: 28px;
  background: #fff; border: 1px solid var(--rule);
  border-radius: var(--r-lg); color: var(--ink);
  text-decoration: none;
  transition: transform .3s var(--ease-spring), border-color .25s, box-shadow .25s var(--ease-out);
}
.exec-explore-card:hover {
  transform: translateY(-5px);
  border-color: var(--pf-orange);
  box-shadow: var(--shadow-lift);
}
.exec-explore-num {
  font-family: var(--font-display); font-weight: 700;
  font-size: 44px; line-height: 0.92;
  color: var(--pf-orange); letter-spacing: -0.03em;
}
.exec-explore-text {
  font-family: var(--font-body); font-size: 15.5px;
  line-height: 1.5; color: var(--ink-2);
  flex: 1;
}
.exec-explore-arrow {
  position: absolute; top: 24px; right: 24px;
  color: var(--ink-3);
  transition: transform .3s var(--ease-spring), color .25s;
}
.exec-explore-card:hover .exec-explore-arrow {
  color: var(--pf-orange);
  transform: translate(4px, -4px);
}

/* ----- Sub-chapter preview panels ----- */
.exec-subchapter {
  margin: 56px 0 0;
  max-width: 100%;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}
.exec-subchapter-banner {
  display: flex; align-items: center; gap: 24px;
  padding: 28px 36px;
  background: var(--pf-orange);
  color: var(--ink);
  position: relative; overflow: hidden;
}
.exec-subchapter.accent-plum .exec-subchapter-banner { background: #5b4a6e; color: #fff; }
.exec-subchapter.accent-green .exec-subchapter-banner { background: #2f5a3a; color: #fff; }
/* The banner-text is a button — it toggles the subchapter open/closed.
   Reset the native button chrome so it visually matches the original
   non-interactive div. */
button.exec-subchapter-banner-text {
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; color: inherit; text-align: left;
  cursor: pointer;
}
button.exec-subchapter-banner-text:focus-visible {
  outline: 2px solid currentColor; outline-offset: 4px;
  border-radius: 6px;
}
.exec-subchapter-banner-text {
  display: flex; align-items: baseline; gap: 24px;
  flex: 1; min-width: 0;
}
/* Banner action buttons (Read more / Jump to chapter). Stacked vertically
   on the right of the banner; each is a clearly labeled pill so the
   affordances are unmistakable. */
.exec-subchapter-actions {
  display: flex; flex-direction: column; gap: 10px;
  align-items: stretch; flex-shrink: 0;
  align-self: center;
}
.exec-subchapter-toggle,
.exec-subchapter-jump {
  display: inline-flex; align-items: center; justify-content: space-between;
  gap: 14px;
  min-width: 200px;
  padding: 12px 18px;
  border-radius: 999px;
  font-family: var(--font-ui);
  font-size: 14px; font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  text-decoration: none;
  transition: transform .2s var(--ease-out), background .2s var(--ease-out), color .2s var(--ease-out), box-shadow .2s var(--ease-out);
  border: 2px solid currentColor;
  background: transparent;
  color: inherit;
  white-space: nowrap;
}
.exec-subchapter-toggle-icon,
.exec-subchapter-jump-icon {
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .25s var(--ease-spring);
}
.exec-subchapter.is-open .exec-subchapter-toggle-icon { transform: rotate(180deg); }

/* Primary action: Read more / Show less — solid inverse pill */
.exec-subchapter.accent-orange .exec-subchapter-toggle {
  background: var(--ink); color: var(--pf-orange); border-color: var(--ink);
}
.exec-subchapter.accent-plum  .exec-subchapter-toggle,
.exec-subchapter.accent-green .exec-subchapter-toggle {
  background: #fff; color: var(--ink); border-color: #fff;
}
.exec-subchapter-toggle:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0,0,0,0.18);
}
.exec-subchapter.accent-orange .exec-subchapter-toggle:hover { background: #000; color: #fff; border-color: #000; }
.exec-subchapter.accent-plum  .exec-subchapter-toggle:hover,
.exec-subchapter.accent-green .exec-subchapter-toggle:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

/* Secondary action: Jump to chapter — outlined pill in current banner ink */
.exec-subchapter.accent-orange .exec-subchapter-jump { color: var(--ink); border-color: var(--ink); }
.exec-subchapter.accent-plum  .exec-subchapter-jump,
.exec-subchapter.accent-green .exec-subchapter-jump { color: #fff; border-color: #fff; }
.exec-subchapter-jump:hover { transform: translateY(-2px); }
.exec-subchapter.accent-orange .exec-subchapter-jump:hover { background: var(--ink); color: var(--pf-orange); }
.exec-subchapter.accent-plum  .exec-subchapter-jump:hover,
.exec-subchapter.accent-green .exec-subchapter-jump:hover { background: rgba(255,255,255,0.18); }
.exec-subchapter-toggle:focus-visible,
.exec-subchapter-jump:focus-visible {
  outline: 3px solid #fff; outline-offset: 3px;
}
.exec-subchapter.accent-orange .exec-subchapter-toggle:focus-visible,
.exec-subchapter.accent-orange .exec-subchapter-jump:focus-visible {
  outline-color: var(--ink);
}

@media (max-width: 700px) {
  .exec-subchapter-actions { flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .exec-subchapter-toggle,
  .exec-subchapter-jump { min-width: 0; flex: 1 1 auto; padding: 10px 14px; font-size: 13px; }
}

/* Collapsed-state preview: matched copy from the ExploreCards / report
   contents list — short paragraph that previews the full body. */
.exec-subchapter-summary {
  padding: 28px 40px 32px;
  background: #fff;
  border: 1px solid var(--rule);
  border-top: none;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}
.exec-subchapter-summary p {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px; line-height: 1.6;
  color: var(--ink-2);
  max-width: 68ch;
  letter-spacing: -0.005em;
  text-wrap: pretty;
}
@media (max-width: 700px) {
  .exec-subchapter-summary { padding: 22px 22px 24px; }
  .exec-subchapter-summary p { font-size: 16px; }
}
.exec-subchapter-num {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(56px, 7vw, 96px);
  line-height: 0.9; letter-spacing: -0.05em;
  color: currentColor; opacity: 0.85;
}
.exec-subchapter-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.02; letter-spacing: -0.025em;
  text-wrap: balance;
}
.exec-subchapter-body {
  padding: 40px 40px 44px;
  background: #fff;
  border: 1px solid var(--rule);
  border-top: none;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}
.exec-subchapter-lead {
  font-family: var(--font-body);
  font-size: 18px; line-height: 1.6;
  color: var(--ink-2); margin: 0 0 32px;
  max-width: 68ch;
  letter-spacing: -0.005em;
  text-wrap: pretty;
}
.exec-subchapter-stats {
  display: grid; gap: 16px;
  margin: 24px 0;
}
.exec-subchapter-stats[data-cols="1"] { grid-template-columns: 1fr; }
.exec-subchapter-stats[data-cols="2"] { grid-template-columns: 1fr 1fr; }
.exec-subchapter-stats[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }

/* 3-stat layout variations */
.exec-subchapter-stats[data-cols="3"][data-layout="row"]   { grid-template-columns: repeat(3, 1fr); }
.exec-subchapter-stats[data-cols="3"][data-layout="2-1"]   { grid-template-columns: 1fr 1fr; }
.exec-subchapter-stats[data-cols="3"][data-layout="2-1"] > :nth-child(3) { grid-column: 1 / -1; }
.exec-subchapter-stats[data-cols="3"][data-layout="1-2"]   { grid-template-columns: 1fr 1fr; }
.exec-subchapter-stats[data-cols="3"][data-layout="1-2"] > :nth-child(1) { grid-column: 1 / -1; }
.exec-subchapter-stats[data-cols="3"][data-layout="stack"] { grid-template-columns: 1fr; }
.exec-subchapter-stats[data-cols="3"][data-layout="hero-2"] {
  grid-template-columns: 1.5fr 1fr;
  grid-template-rows: 1fr 1fr;
}
.exec-subchapter-stats[data-cols="3"][data-layout="hero-2"] > :nth-child(1) {
  grid-row: 1 / span 2;
}
.exec-subchapter-stats[data-cols="3"][data-layout="hero-2"] > :nth-child(1) .exec-bigstat-num {
  font-size: clamp(56px, 6.4vw, 84px);
}

.exec-bigstat {
  padding: 28px 26px;
  background: var(--paper-warm);
  border-radius: var(--r-lg);
  display: flex; flex-direction: column; gap: 8px;
  transition: transform .25s var(--ease-spring), box-shadow .25s var(--ease-out);
  position: relative; overflow: hidden;
}
.exec-bigstat::after {
  content: ''; position: absolute; top: 18px; right: 18px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--pf-orange);
}
.exec-bigstat:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.exec-subchapter.accent-plum .exec-bigstat { background: #ede5f4; }
.exec-subchapter.accent-plum .exec-bigstat::after { background: #5b4a6e; }
.exec-subchapter.accent-green .exec-bigstat { background: #e2ecdc; }
.exec-subchapter.accent-green .exec-bigstat::after { background: #2f5a3a; }
.exec-subchapter .exec-bigstat[data-i="1"] { background: #fff; border: 1px solid var(--rule); }
.exec-subchapter .exec-bigstat[data-i="2"] { background: var(--pf-orange-mist); }

.exec-bigstat-num {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(44px, 5vw, 68px);
  line-height: 0.96; letter-spacing: -0.04em;
  color: var(--ink);
  display: flex; align-items: baseline; gap: 4px;
  flex-wrap: wrap;
}
.exec-bigstat-prefix {
  /* "$" sits inline with the digits at the same size, in ink — reads
     as part of the number rather than a separate decorative element. */
  color: inherit;
}
.exec-bigstat-digits { font-variant-numeric: tabular-nums; }
.exec-bigstat-suffix {
  /* Same display font as the number; only size differs — keep the
     unit/symbol ("hours", "%", "bn") in ink so it reads as part of
     the number rather than a separate orange element. */
  font-size: 0.36em; font-weight: 400;
  color: var(--ink);
  margin-left: 6px;
}
.exec-bigstat-label {
  font-family: var(--font-ui); font-size: 11px; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--pf-orange);
  margin-top: 6px;
}
.exec-subchapter.accent-plum .exec-bigstat-label { color: #5b4a6e; }
.exec-subchapter.accent-green .exec-bigstat-label { color: #2f5a3a; }
.exec-bigstat-desc {
  font-family: var(--font-body);
  font-size: 14px; line-height: 1.5;
  color: var(--ink-2); margin: 18px 0 0;
}

.exec-subchapter-after {
  font-family: var(--font-body); font-size: 16px; line-height: 1.6;
  color: var(--ink-2); margin: 28px 0 0;
  max-width: 68ch;
}
.exec-subchapter-footnote {
  font-family: var(--font-body); font-size: 13.5px;
  font-style: italic; color: var(--muted);
  margin: 28px 0 0; padding: 14px 18px;
  background: var(--paper-2); border-radius: var(--r-md);
}

/* ============================================================
   GLOBAL TOUCHES applied to the rest of the report
   ============================================================ */

/* Stat values count up; ensure layout doesn't jump as digits change */
.r-stat-value .anim-num-digits { display: inline-block; }

/* Chapter divider headline: subtle word-reveal on intersection.
   Already animates via .r-section.in fade-up; keep that, just tighten timing. */
.chapter-divider .heading { transition: opacity .8s var(--ease-out); }

/* ----- Responsive ----- */
@media (max-width: 1140px) {
  .exec-herostat { padding: 56px 40px 64px; }
  .exec-subchapter-banner { padding: 24px 28px; gap: 16px; }
  .exec-subchapter-body { padding: 32px 28px 36px; }
}
@media (max-width: 900px) {
  .exec-intro-cards { grid-template-columns: 1fr; }
  .exec-explore-cards { grid-template-columns: 1fr; }
  .exec-subchapter-stats[data-cols="3"], .exec-subchapter-stats[data-cols="2"] { grid-template-columns: 1fr; }
  .exec-subchapter-banner-text { flex-direction: column; align-items: flex-start; gap: 8px; }
  .exec-ticker-val { font-size: 22px; }
  .exec-ticker-track { gap: 32px; }
  .exec-hero { padding: 12px 0 40px; }
  .exec-definition { padding: 28px 28px; }
  .exec-herostat { padding: 44px 28px; margin-left: 0; max-width: 100%; }
  .exec-herostat-figure { font-size: clamp(64px, 18vw, 120px); }
  .exec-subchapter { margin-left: 0; max-width: 100%; }
}


/* ============================================================
   RESPONSIVE / MOBILE LAYER (from Claude Design round-trip)
   Appended here — exec-summary.css is the last stylesheet the
   page loads, so these rules win the cascade over both the
   styles.css base rules and the exec-summary.css base rules.
   Append-only: no class names or markup were changed.
   ============================================================ */
/* ╔══════════════════════════════════════════════════════════════╗
   ║  MOBILE + TABLET RESPONSIVE OPTIMISATIONS                    ║
   ║  ────────────────────────────────────────────────────────    ║
   ║  Append-only block. No class names or markup were changed —  ║
   ║  every selector resolves against the existing live-site DOM. ║
   ║                                                              ║
   ║  Breakpoints (mobile-first reading order, top → bottom):     ║
   ║    • Tablet …………… max-width: 1000px   (collapses 2-col grids)║
   ║    • Mobile …………… max-width: 640px    (single column, tight) ║
   ║    • Small phone ‥ max-width: 380px    (last-mile fixes)     ║
   ║                                                              ║
   ║  Existing @media (max-width:1000px) blocks above still       ║
   ║  apply; these rules extend, refine, and fix bugs in them.    ║
   ║  The block is grouped by component so it's easy to lift      ║
   ║  individual sections back into shared/styles.css.            ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* ─── CRITICAL LAYOUT FIX (≤ 1000px) ────────────────────────────
   The existing 1000px block sets `.layout` to `minmax(0, 1fr)` —
   one explicit column — but the base `.chapter-block { grid-column: 2; }`
   rule still applies, which creates an implicit 2nd column. The
   chapter-block lands in column 2, and any sibling spanning `1 / -1`
   (the .chapter-divider) ends up sharing a row with it, getting
   stretched to the chapter-block's full height (~2100px in places).
   It also kills the `calc(50% - 50vw)` full-bleed because percentages
   resolve against the narrow implicit track, not the viewport.

   Force the chapter-block back to a true single column so the grid
   has one track and divider rows size to their content. Then replace
   the 100vw full-bleed trick with explicit negative margins matching
   the layout's gutter — simpler and correct. */
@media (max-width: 1000px) {
  .chapter-block { grid-column: 1 / -1; }
  .chapter-divider {
    width: auto;
    max-width: none;
    margin-left: -20px;   /* .layout padding at this breakpoint = 20px */
    margin-right: -20px;
  }
}

/* ─── TABLET (≤ 1000px) ─────────────────────────────────────────
   The existing 1000px block already drops the TOC, switches the
   case-card to stacked, and forces some grids to 1-column.
   On a tablet that's overkill — there's room for 2 columns of
   statgroups / icongrids / explore cards. Restore that here. */
@media (max-width: 1000px) and (min-width: 641px) {
  /* Stat groups: 2-up reads better than full-width single column.
     Selector includes data-layout variants for the same specificity
     reason explained in the icon-grid block below. */
  .r-statgroup[data-cols="3"],
  .r-statgroup[data-cols="4"],
  .r-statgroup[data-cols="3"][data-layout="row"],
  .r-statgroup[data-cols="3"][data-layout="2-1"],
  .r-statgroup[data-cols="3"][data-layout="1-2"],
  .r-statgroup[data-cols="3"][data-layout="stack"],
  .r-statgroup[data-cols="3"][data-layout="hero-2"] {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
  }
  .r-statgroup[data-cols="3"] > :nth-child(3) { grid-column: 1 / -1; }
  .r-statgroup[data-cols="3"][data-layout="hero-2"] > :nth-child(1) { grid-row: auto; }

  /* Icon grids: card text runs long enough that 2-up squashes
     (cards drop to ~100px wide and headings break per-letter).
     Stack them — matches the original ≤1000px behaviour.
     NOTE: must include [data-layout="..."] in the selector. The
     base CSS defines variants like
       .r-icongrid[data-cols="3"][data-layout="row"] { ... 3 cols }
     which outrank a plain `.r-icongrid[data-cols="3"]` selector,
     so the original responsive rule was silently being overridden
     and never actually stacking. */
  .r-icongrid[data-cols="3"],
  .r-icongrid[data-cols="4"],
  .r-icongrid[data-cols="3"][data-layout="row"],
  .r-icongrid[data-cols="3"][data-layout="2-1"],
  .r-icongrid[data-cols="3"][data-layout="1-2"],
  .r-icongrid[data-cols="3"][data-layout="stack"],
  .r-icongrid[data-cols="3"][data-layout="hero-2"] {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .r-icongrid[data-cols="3"][data-layout="hero-2"] > :nth-child(1) { grid-row: auto; }

  /* Exec-summary explore cards + intro cards: pair them up */
  .exec-explore-cards { grid-template-columns: repeat(2, 1fr); }
  .exec-intro-cards   { grid-template-columns: repeat(2, 1fr); }
  .exec-intro-cards > :nth-child(3) { grid-column: 1 / -1; }
  .exec-subchapter-stats[data-cols="3"],
  .exec-subchapter-stats[data-cols="3"][data-layout="row"],
  .exec-subchapter-stats[data-cols="3"][data-layout="2-1"],
  .exec-subchapter-stats[data-cols="3"][data-layout="1-2"],
  .exec-subchapter-stats[data-cols="3"][data-layout="stack"],
  .exec-subchapter-stats[data-cols="3"][data-layout="hero-2"] {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
  }
  .exec-subchapter-stats[data-cols="3"] > :nth-child(3) { grid-column: 1 / -1; }
  .exec-subchapter-stats[data-cols="3"][data-layout="hero-2"] > :nth-child(1) { grid-row: auto; }

  /* Cover footer: 4 columns is too tight; 2x2+brand reads better */
  .cover-footer {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 32px;
  }
  .cover-footer > :nth-last-child(2) { display: none; } /* spacer column not needed */
  .cover-footer > :last-child { grid-column: 1 / -1; padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.15); }

  /* Chapter divider: don't reserve half a viewport on a tablet */
  .chapter-divider {
    min-height: 0;
    padding: 80px 32px;
    margin: 64px 0;
  }
  .chapter-divider .heading { font-size: clamp(44px, 7vw, 84px); }

  /* Report footer: 2-up reads cleanly */
  .report-footer .grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
}

/* ─── MOBILE (≤ 640px) ──────────────────────────────────────────
   Phone layout. Everything single-column, padding tightened,
   type clamps cut a notch, hit targets ≥ 44px preserved. */
@media (max-width: 640px) {

  /* ---- Document base ------------------------------------------- */
  html, body { font-size: 16px; }

  /* ---- Top nav -------------------------------------------------- */
  .topnav {
    top: 10px; left: 10px; right: 10px;
    height: 52px;
    padding: 0 14px 0 18px;
    border-radius: 26px;
  }
  .topnav-brand { gap: 10px; }
  .topnav-brand img { height: 18px; }
  .topnav .burger { width: 44px; height: 44px; } /* keep tap target */

  /* ---- Cover ---------------------------------------------------- */
  .cover {
    padding: 16px;
    /* min-height: 100vh stays — page should still feel like a cover */
  }
  .cover-image {
    inset: 8px;
    border-radius: 24px;
  }
  .cover-image::after { border-radius: 24px; }
  .cover-shell {
    padding: 80px 16px 20px;       /* clear the 52px-tall floating topnav */
    min-height: calc(100vh - 32px);
    gap: 24px;
  }
  .cover-header {
    font-size: 11px;
  }
  /* Drop the meta chips ("A Public First Report" / "Commissioned by
     Google" / "May 2026") on phones — they overlap the cover image
     awkwardly and the same info is already in the footer block. */
  .cover-header .right { display: none; }
  .cover-header img { height: 18px; }
  .cover-main { padding-bottom: 8px; }
  .cover-eyebrow {
    font-size: 11px; margin-bottom: 18px;
    letter-spacing: 0.18em;
  }
  .cover-eyebrow .dot { width: 8px; height: 8px; }
  .cover-title {
    /* clamp() floor is 56px; drop to 44px on phones */
    font-size: clamp(40px, 11vw, 56px);
    letter-spacing: -0.035em;
    line-height: 0.96;
  }
  .cover-subtitle {
    font-size: 17px; line-height: 1.4;
    margin-top: 20px;
  }
  .cover-footer {
    grid-template-columns: 1fr 1fr;
    gap: 18px 20px;
    padding-top: 20px;
  }
  .cover-footer > :nth-last-child(2) { display: none; }
  .cover-footer > :last-child {
    grid-column: 1 / -1;
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,0.18);
  }
  .cover-footer .label { font-size: 10px; letter-spacing: 0.06em; }
  .cover-footer .val { font-size: 15px; }
  .cover-footer .pf-img { height: 22px; }
  /* The bouncing scroll arrow eats real estate on a phone — hide it */
  .cover-scroll { display: none; }

  /* ---- Layout shell -------------------------------------------- */
  .layout { padding: 0 16px; }
  .chapter-block { padding: 56px 0 32px; }

  /* ---- Section + headings -------------------------------------- */
  .r-section { margin-bottom: 56px; }
  .r-h1 { font-size: clamp(34px, 9vw, 48px); letter-spacing: -0.03em; }
  .r-h2 { font-size: clamp(26px, 7vw, 36px); margin-bottom: 20px; letter-spacing: -0.025em; }
  .r-h3 { font-size: 20px; margin-bottom: 12px; }
  .r-h4 { font-size: 11px; margin-bottom: 12px; letter-spacing: 0.16em; }

  /* ---- Body copy ----------------------------------------------- */
  .r-body { font-size: 16px; line-height: 1.6; }
  .r-body.r-lead { font-size: 19px; line-height: 1.38; margin-bottom: 1.1em; }
  .r-body.r-def { padding: 16px 18px; font-size: 16.5px; }
  .r-body.r-def::before { top: 12px; bottom: 12px; width: 3px; }

  /* ---- Lists --------------------------------------------------- */
  .r-list li { padding: 10px 0 10px 40px; font-size: 16px; }
  .r-list-ordered li::before { width: 24px; height: 24px; font-size: 12px; top: 10px; }
  .r-list-unordered li::before { width: 8px; height: 8px; top: 20px; }

  /* ---- Stats / stat groups ------------------------------------ */
  /* Selector includes data-layout variants — see icon-grid block. */
  .r-statgroup,
  .r-statgroup[data-cols="2"],
  .r-statgroup[data-cols="3"],
  .r-statgroup[data-cols="4"],
  .r-statgroup[data-cols="3"][data-layout="row"],
  .r-statgroup[data-cols="3"][data-layout="2-1"],
  .r-statgroup[data-cols="3"][data-layout="1-2"],
  .r-statgroup[data-cols="3"][data-layout="stack"],
  .r-statgroup[data-cols="3"][data-layout="hero-2"] {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 12px;
    margin: 24px 0;
  }
  /* Reset hero-2 / 2-1 / 1-2 / row variants — all become 1-col stacks */
  .r-statgroup[data-cols="3"][data-layout="hero-2"] > :nth-child(1) { grid-row: auto; }
  .r-statgroup[data-cols="3"][data-layout="hero-2"] > :nth-child(1) .r-stat-value { font-size: 48px; }
  .r-statgroup .r-stat { padding: 20px 22px; }
  .r-statgroup .r-stat-value { font-size: 44px; }
  .r-stat { padding: 22px 24px; margin: 24px 0; }
  .r-stat::before { top: 18px; right: 18px; width: 10px; height: 10px; }
  .r-stat-value { font-size: clamp(44px, 12vw, 64px); letter-spacing: -0.04em; }
  .r-stat-label { font-size: 11px; margin: 10px 0 10px; letter-spacing: 0.14em; }
  .r-stat-desc { font-size: 15px; margin-top: 16px; }

  /* ---- Pull-stat callout --------------------------------------- */
  .r-pullstat {
    padding: 28px 22px;
    margin: 32px 0;
    font-size: clamp(22px, 6vw, 28px);
    border-radius: var(--r-lg);
  }
  .r-pullstat::before { top: 16px; right: 18px; font-size: 18px; }

  /* ---- Case card ----------------------------------------------- */
  /* The 1000px block already collapses head/body — tighten further */
  .r-case-card { border-radius: var(--r-lg); }
  .r-case-card__head { padding: 16px 18px; gap: 10px; }
  .r-case-card__head-left { gap: 10px; }
  .r-case-card__label { font-size: 10px; letter-spacing: 0.18em; gap: 8px; }
  .r-case-card__label::before { width: 20px; }
  .r-case-card__org { font-size: 18px; }
  .r-case-card__tag { font-size: 10px; padding: 5px 9px; }
  .r-case-card__image img { min-height: 240px; }
  .r-case-card__badge { top: 14px; left: 14px; font-size: 10px; padding: 5px 9px; }
  .r-case-card__copy { padding: 22px 18px 24px; }
  .r-case-card__lead { font-size: 18px; line-height: 1.4; margin-bottom: 18px; }
  .r-case-card__copy .r-body { font-size: 15.5px; margin-bottom: 14px; }
  /* Stats grid: keep 2-up on mobile — short values (e.g. "0.0×",
     "$0–0k") fit comfortably side-by-side at 390px. Only the 3-up
     variant needs to drop to 1-col here. */
  .r-case-card__stats { grid-template-columns: repeat(2, 1fr); margin-top: 22px; }
  .r-case-card__stats[data-count="3"] { grid-template-columns: 1fr; }
  .r-case-card__stat { padding: 14px 16px; }
  .r-case-card__stat-val { font-size: 22px; }
  .r-case-card__stat-lbl { font-size: 10px; letter-spacing: 0.05em; }
  /* Dark quote band: aggressive tightening */
  .r-case-card__quote { padding: 64px 22px 28px; }
  .r-case-card__quote::before { width: 48px; height: 48px; left: 18px; top: 20px; }
  .r-case-card__quote-eyebrow { right: 18px; top: 18px; font-size: 9px; letter-spacing: 0.18em; }
  .r-case-card__quote-text { font-size: 19px; line-height: 1.35; margin-top: 56px; }
  .r-case-card__quote-att { margin-top: 28px; padding-top: 20px; }
  .r-case-card__quote-name { font-size: 20px; }
  .r-case-card__quote-role { font-size: 14px; }

  /* ---- Pull quote (standalone) --------------------------------- */
  .r-quote { padding: 56px 22px 24px; margin: 32px 0 40px; }
  .r-quote::before { left: 20px; top: 22px; width: 32px; height: 32px; }
  .r-quote blockquote { font-size: 18px; line-height: 1.4; }
  .r-quote figcaption { font-size: 13px; margin-top: 18px; padding-top: 14px; }

  /* ---- Quotebox ------------------------------------------------ */
  .r-quotebox { padding: 22px; margin: 24px 0; }
  .r-quotebox li { font-size: 17px; padding: 12px 16px; }

  /* ---- Icon grids ---------------------------------------------- */
  /* Include the data-layout variants — see tablet block for why
     plain `[data-cols="3"]` alone gets out-ranked. */
  .r-icongrid,
  .r-icongrid[data-cols="2"],
  .r-icongrid[data-cols="3"],
  .r-icongrid[data-cols="4"],
  .r-icongrid[data-cols="3"][data-layout="row"],
  .r-icongrid[data-cols="3"][data-layout="2-1"],
  .r-icongrid[data-cols="3"][data-layout="1-2"],
  .r-icongrid[data-cols="3"][data-layout="stack"],
  .r-icongrid[data-cols="3"][data-layout="hero-2"] {
    grid-template-columns: 1fr;
    gap: 14px;
    margin: 24px 0;
  }
  /* All data-layout variants collapse to single column */
  .r-icongrid[data-cols="3"][data-layout="hero-2"] { grid-template-rows: auto; }
  .r-icongrid[data-cols="3"][data-layout="hero-2"] > :nth-child(1) { grid-row: auto; }
  .r-icongrid-item { padding: 20px 22px; font-size: 15.5px; }
  .r-icongrid-item .r-h4 { font-size: 19px; margin-bottom: 10px; }
  .r-icongrid-item .r-leadin { font-size: 16px; }

  /* ---- Comparison block ---------------------------------------- */
  .r-comparison { padding: 22px; margin: 28px 0; }
  .r-comp-title { font-size: 19px; margin-bottom: 12px; }
  .r-comp-list li { padding: 16px 0; font-size: 15.5px; gap: 12px; }
  .r-comp-icon { width: 44px; height: 44px; }

  /* ---- Tables -------------------------------------------------- */
  /* Real horizontal scroll instead of squashing columns */
  .r-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 24px -16px; /* break out of the 16px gutter so scroll feels native */
    padding: 0 16px;
  }
  .r-table { min-width: 520px; font-size: 14px; }
  .r-table th, .r-table td { padding: 14px 16px; }
  .r-table-title { font-size: 20px; margin-bottom: 12px; }

  /* ---- Barrier → Solution -------------------------------------- */
  /* Existing 720px rule already stacks the card — refine spacing */
  .r-barsol-title { font-size: 20px; margin-bottom: 14px; }
  .r-barsol-side { padding: 20px 22px; font-size: 15px; }
  .r-barsol-label { font-size: 22px; }
  .r-barsol-arrow { height: 40px; }

  /* ---- Timeline carousel --------------------------------------- */
  /* The existing 1000px rule sets event flex to calc(100% - 8px) and
     drops to single-column inside the card. That's right; only tighten
     padding and controls here. */
  .r-tl-controls { gap: 14px; margin-bottom: 14px; }
  .r-tl-btn { width: 40px; height: 40px; }
  .r-tl-event { padding: 18px; }
  .r-tl-title { font-size: 17px; }
  .r-tl-body { font-size: 14px; -webkit-line-clamp: 6; }

  /* ---- Image strip carousel ------------------------------------ */
  /* Existing 720px rule sets item flex to 85%. Just shrink chrome. */
  .r-imgstrip-controls { gap: 14px; margin-bottom: 14px; }
  .r-imgstrip-btn { width: 40px; height: 40px; }
  .r-imgstrip-item figcaption { font-size: 22px; padding: 36px 14px 12px; }

  /* ---- Wordcloud ----------------------------------------------- */
  .r-wordcloud { padding: 36px 22px; }
  .r-wc-terms { gap: 16px 22px; min-height: 180px; padding: 18px 4px 4px; }

  /* ---- Example block ------------------------------------------- */
  .r-example {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 22px;
  }

  /* ---- Chart block --------------------------------------------- */
  .r-chart-block { margin: 36px 0; }
  .r-chart-title { font-size: 20px; margin-bottom: 14px; }
  .chart { padding: 18px; border-radius: var(--r-md); }
  .chart-legend { gap: 8px; font-size: 13px; margin-top: 14px; }
  .chart-legend span { padding: 5px 11px; }

  /* ---- CHAPTER DIVIDER (the known problem area) ---------------
     The critical layout fix above (≤1000px block) already keeps the
     divider from getting stretched. Here we just refine padding,
     type sizes, and bump the negative margin to match the 16px
     mobile gutter. */
  .chapter-divider {
    min-height: 0;
    padding: 72px 22px;
    margin: 56px -16px;   /* -16px overrides the -20px from the ≤1000px fix */
  }
  .chapter-divider .chip { margin-bottom: 22px; font-size: 11px; letter-spacing: 0.18em; }
  .chapter-divider .heading {
    font-size: clamp(36px, 10vw, 56px);
    margin-bottom: 18px;
    max-width: 12ch;
    letter-spacing: -0.03em;
  }
  .chapter-divider .intro {
    font-size: 16px;
    line-height: 1.45;
    max-width: 100%;
  }
  /* Less aggressive scrim — there's no parallax on mobile so we can
     let the photo breathe; bump the bottom dark stop a bit. */
  .chapter-divider {
    background:
      linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.35) 50%, rgba(0,0,0,0.8) 100%),
      url('assets/chapter-bg.jpg') center / cover no-repeat #0a0a0a;
  }

  /* ---- Chapter opener (non-bleed variant) ---------------------- */
  .chapter-opener { margin-bottom: 32px; }
  .chapter-opener .r-h1 { font-size: clamp(32px, 9vw, 48px); }

  /* ---- Footnote ------------------------------------------------ */
  .r-footnote { padding: 12px 14px; font-size: 13px; margin-top: 24px; }

  /* ---- Footer -------------------------------------------------- */
  .report-footer { padding: 56px 20px 36px; margin-top: 56px; }
  .report-footer .grid { grid-template-columns: 1fr; gap: 28px; }
  .report-footer .brand p { font-size: 13.5px; }
  .report-footer .colophon { margin-top: 36px; padding-top: 20px; flex-direction: column; gap: 8px; }

  /* ============================================================
     EXEC SUMMARY (mobile)
     ============================================================ */
  .exec-summary { padding-top: 40px; padding-bottom: 64px; }
  .exec-hero { padding: 16px 0 32px; }
  .exec-chip { margin-bottom: 24px; gap: 10px; }
  .exec-chip-num, .exec-chip-label { font-size: 11px; letter-spacing: 0.16em; }
  .exec-display { font-size: clamp(40px, 11vw, 56px); letter-spacing: -0.035em; line-height: 0.96; }
  .exec-hero-sub { font-size: 17px; line-height: 1.4; margin-top: 22px; }

  .exec-ticker { padding: 16px 0; margin: 8px 0 36px; }
  .exec-ticker-val { font-size: 22px; }
  .exec-ticker-label { font-size: 13px; }
  .exec-ticker-track { gap: 28px; }
  .exec-ticker::before, .exec-ticker::after { width: 48px; }

  .exec-definition { padding: 24px 22px; margin: 16px 0 28px; border-left-width: 4px; }
  .exec-definition-tag { font-size: 10px; margin-bottom: 12px; }
  .exec-definition p { font-size: 19px; line-height: 1.32; }

  .exec-lead-mid { font-size: 17px; margin: 22px 0; }
  .exec-lead-big { font-size: clamp(22px, 6vw, 28px); margin: 22px 0 18px; }

  .exec-intro-cards { grid-template-columns: 1fr; gap: 12px; margin: 28px 0 40px; }
  .exec-intro-card { padding: 22px 22px; min-height: 0; gap: 14px; }
  .exec-intro-card-num { font-size: 60px; }
  .exec-intro-card-lead { font-size: 19px; }
  .exec-intro-card-head { gap: 14px; }

  .exec-herostat { padding: 36px 24px; margin: 32px 0 48px; border-radius: var(--r-lg); }
  .exec-herostat-tag { margin-bottom: 22px; font-size: 11px; letter-spacing: 0.16em; }
  .exec-herostat-figure { font-size: clamp(52px, 16vw, 84px); }
  .exec-herostat-suffix { font-size: 0.32em; }
  .exec-herostat-label { font-size: 18px; margin-top: 12px; }
  .exec-herostat-desc { font-size: 15px; margin-top: 24px; }
  /* Tame the giant blurred shapes — they overflow on phones */
  .exec-herostat-shapes span:nth-child(1) { width: 280px; height: 280px; top: -100px; right: -100px; }
  .exec-herostat-shapes span:nth-child(2) { width: 180px; height: 180px; bottom: -80px; }
  .exec-herostat-shapes span:nth-child(3) { width: 100px; height: 100px; }

  .exec-explore { margin: 32px 0 48px; }
  .exec-explore-intro { font-size: 16px; margin-bottom: 18px; }
  .exec-explore-cards { grid-template-columns: 1fr; gap: 12px; }
  .exec-explore-card { padding: 22px; gap: 14px; }
  .exec-explore-num { font-size: 36px; }
  .exec-explore-text { font-size: 14.5px; }
  .exec-explore-arrow { top: 18px; right: 18px; }

  .exec-subchapter { margin-top: 36px; border-radius: var(--r-lg); }
  .exec-subchapter-banner { padding: 22px 20px; gap: 14px; flex-direction: column; align-items: flex-start; }
  .exec-subchapter-banner-text { flex-direction: column; align-items: flex-start; gap: 6px; }
  .exec-subchapter-num { font-size: clamp(44px, 13vw, 64px); }
  .exec-subchapter-title { font-size: clamp(24px, 7vw, 36px); }
  .exec-subchapter-actions { width: 100%; align-self: stretch; }
  .exec-subchapter-body { padding: 26px 22px 28px; border-radius: 0 0 var(--r-lg) var(--r-lg); }
  .exec-subchapter-lead { font-size: 16px; margin-bottom: 22px; }
  .exec-subchapter-stats,
  .exec-subchapter-stats[data-cols="2"],
  .exec-subchapter-stats[data-cols="3"],
  .exec-subchapter-stats[data-cols="3"][data-layout="row"],
  .exec-subchapter-stats[data-cols="3"][data-layout="2-1"],
  .exec-subchapter-stats[data-cols="3"][data-layout="1-2"],
  .exec-subchapter-stats[data-cols="3"][data-layout="stack"],
  .exec-subchapter-stats[data-cols="3"][data-layout="hero-2"] { grid-template-columns: 1fr; gap: 12px; grid-template-rows: auto; }
  .exec-subchapter-stats[data-cols="3"][data-layout="hero-2"] > :nth-child(1) { grid-row: auto; }
  .exec-bigstat { padding: 22px 22px; }
  .exec-bigstat-num { font-size: clamp(36px, 11vw, 52px); }
  .exec-bigstat-suffix { font-size: 0.32em; }
  .exec-bigstat-label { font-size: 10px; letter-spacing: 0.16em; }
  .exec-bigstat-desc { font-size: 13.5px; margin-top: 14px; }
  .exec-subchapter-after { font-size: 15px; margin-top: 22px; }
  .exec-subchapter-footnote { font-size: 13px; padding: 12px 14px; margin-top: 22px; }
}

/* ─── SMALL PHONE (≤ 380px) ─────────────────────────────────────
   Last-mile fixes for narrow devices (iPhone SE, Galaxy A-series).
   Only address things that visibly break below ~390px. */
@media (max-width: 380px) {
  .cover-shell { padding: 72px 12px 16px; }
  .cover-title { font-size: 38px; }
  .cover-footer { grid-template-columns: 1fr; }
  .cover-footer > :nth-last-child(2) { display: none; }
  .layout { padding: 0 12px; }
  .chapter-divider { margin-left: -12px; margin-right: -12px; }
  .r-case-card__quote { padding: 60px 18px 24px; }
  .r-case-card__quote-text { font-size: 17px; }
  .chapter-divider .heading { font-size: 32px; }
  .exec-herostat { padding: 28px 18px; }
}


/* ============================================================
   MOBILE OVERFLOW CONTAINMENT (follow-up to the responsive layer)
   The live site overflowed horizontally on phones where the design
   harness didn't — because the harness omitted these real
   components. Contain the bleed at its source rather than relying
   on the root overflow-x (which isn't reliable on older iOS Safari).
   ============================================================ */
@media (max-width: 1000px) {
  /* Exec-hero has overflow:visible for an artistic glow on desktop;
     its two blurred blobs are positioned with negative offsets
     (right:-120px etc.) that spill ~120px past a phone's viewport.
     overflow:hidden clips them — universally supported, unlike clip. */
  .exec-hero { overflow: hidden; }

  /* Timeline + image-strip tracks bleed a few px horizontally
     (margin: -4px / -24px) so hover shadows aren't cropped on
     desktop. That bleed widens the page on mobile — zero it out;
     the inner overflow-x:auto still handles the carousel scroll. */
  .r-tl-track,
  .r-imgstrip-track { margin-left: 0; margin-right: 0; }
}

@media (max-width: 1000px) {
  /* Belt-and-braces: the cover and the bespoke exec-summary chapter
     are full-width sections that should never scroll sideways. Clip
     horizontal overflow at the section level so any bleeding child
     (decorative shapes, the marquee track, wide grids) is contained
     without relying on the root overflow-x, which isn't dependable
     on older iOS Safari. Height is auto so vertical flow is intact. */
  .cover { overflow: hidden; }
  .exec-summary { overflow-x: hidden; }
}

@media (max-width: 1000px) {
  /* BULLETPROOF mobile layout fix.
     The .layout grid kept resurrecting an implicit 2nd column sized to
     the exec-summary's max-width (720px), so the whole page laid out
     ~720px wide and overflowed a phone screen (text clipped mid-word).
     `.chapter-block { grid-column: 1 / -1 }` wasn't reliably stopping
     it. Dropping the grid to block flow removes grid columns entirely —
     children stack full-width and grid-column declarations go inert. */
  .layout { display: block; padding: 0 16px; }
}