/* ===== Tokens ===== */

:root {
  color-scheme: light dark;
  --navy: #073A6D;
  --warm-white: #FBF8F1;
  --gold: #C5A15A;
  --care-blue: #E8F1F5;
  --skin: #D8B7A7;
  --ink: #142F49;
  --serif: Georgia, 'Times New Roman', serif;
  --sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --content: 76rem;
  --reading: 44rem;
  --ease: cubic-bezier(.2, .7, .2, 1);

  /* Semantic roles (light) */
  --bg: var(--warm-white);
  --surface: #FFFFFF;
  --tint: var(--care-blue);
  --text: var(--ink);
  --muted: #142f49b3;
  --accent: var(--navy);
  --rule: #073a6d26;
  --stat-bg: var(--navy);
  --stat-text: #FFFFFF;
  --shadow: 0 1px 2px #073a6d0f, 0 12px 32px -12px #073a6d33;
  --shadow-lift: 0 2px 4px #073a6d14, 0 24px 48px -16px #073a6d4d;
  --glass: #fbf8f1d9;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0B1828;
    --surface: #10223A;
    --tint: #132B47;
    --text: #DCE6EE;
    --muted: #dce6eeb3;
    --accent: #BFD7EA;
    --rule: #bfd7ea24;
    --stat-bg: #0F3560;
    --stat-text: #FBF8F1;
    --shadow: 0 1px 2px #0006, 0 12px 32px -12px #000a;
    --shadow-lift: 0 2px 4px #0008, 0 24px 48px -16px #000c;
    --glass: #0b1828d9;
  }
}

/* ===== Base ===== */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 6rem; background: var(--bg); color: var(--text); }
body { margin: 0; font: 1rem/1.7 var(--sans); background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; }
img, iframe { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; }
a { color: var(--accent); text-underline-offset: .25em; text-decoration-thickness: 1px; transition: color .2s, text-decoration-color .2s; }
a:hover { text-decoration-thickness: .15em; text-decoration-color: var(--gold); }
button, summary { cursor: pointer; }
button, summary, .site-header a, .scroll-cue, .skip-link { min-height: 2.75rem; }
button { min-width: 2.75rem; }
:focus-visible { outline: .2rem solid var(--accent); outline-offset: .25rem; box-shadow: 0 0 0 .25rem var(--bg); border-radius: .25rem; }
[hidden] { display: none !important; }
::selection { color: var(--navy); background: var(--skin); }
p { max-width: var(--reading); margin: 0 0 1rem; }
h3 { margin: 0 0 .75rem; font-size: 1.15rem; line-height: 1.35; color: var(--accent); }
small, .source { font-size: .8rem; line-height: 1.5; color: var(--muted); }
strong { color: var(--accent); font-weight: 700; }

.skip-link { position: fixed; z-index: 100; left: 1rem; top: -6rem; padding: .75rem 1rem; background: var(--surface); }
.skip-link:focus { top: 1rem; }

/* ===== Header ===== */
.site-header {
  position: sticky; z-index: 50; top: 0; display: flex; align-items: center;
  gap: 2rem; min-height: 4.75rem; padding: .65rem max(1.5rem, calc((100% - var(--content)) / 2));
  border-bottom: 1px solid transparent; background: var(--glass);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  transition: min-height .35s var(--ease), border-color .35s, box-shadow .35s;
}
.site-header[data-scrolled] { min-height: 3.75rem; border-color: var(--rule); box-shadow: 0 8px 24px -18px #073a6d66; }
.wordmark { display: inline-flex; flex-shrink: 0; align-items: center; gap: .4rem; color: var(--accent); text-decoration: none; font: italic 2.3rem/1 var(--serif); transition: font-size .35s var(--ease); }
.site-header[data-scrolled] .wordmark { font-size: 1.9rem; }
.wordmark span { color: var(--gold); font-size: 1.8rem; display: inline-block; transition: transform .6s var(--ease); }
.wordmark:hover span { transform: rotate(-18deg) scale(1.1); }
#chapter-nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .1rem 1rem; margin-left: auto; }
#chapter-nav a { position: relative; display: inline-flex; align-items: center; padding: .4rem .1rem; color: var(--text); font-size: .85rem; font-weight: 600; text-decoration: none; opacity: .72; transition: opacity .2s, color .2s; }
#chapter-nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: .35rem; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
#chapter-nav a:hover { opacity: 1; }
#chapter-nav a:hover::after, #chapter-nav a[aria-current]:not([aria-current="false"])::after { transform: scaleX(1); }
#chapter-nav a[aria-current]:not([aria-current="false"]) { opacity: 1; color: var(--accent); }
.menu-button { display: none; border: 1px solid var(--accent); border-radius: 999px; padding: .5rem 1rem; background: transparent; color: var(--accent); }
.progress { position: absolute; inset: auto 0 -1px; height: .2rem; transform: scaleX(var(--progress, 0)); transform-origin: left; background: linear-gradient(90deg, var(--gold), #E2C58A); }

/* ===== Chapters ===== */
.chapter { position: relative; isolation: isolate; overflow: clip; min-height: 100svh; padding: clamp(5rem, 9vw, 9rem) max(1.5rem, calc((100% - var(--content)) / 2)); border-bottom: 1px solid var(--rule); }
.chapter > * + * { margin-top: 2rem; }
.chapter[data-code]::before {
  content: attr(data-code); position: absolute; z-index: -1; top: clamp(2rem, 5vw, 4rem); right: max(1rem, calc((100% - var(--content)) / 2 - 2rem));
  font: 400 clamp(9rem, 22vw, 20rem)/1 var(--serif); letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 1px var(--rule); pointer-events: none;
}
.chapter h1, .chapter h2 { max-width: 15ch; margin: 0; color: var(--accent); font: 400 clamp(3.25rem, 6.5vw, 6.8rem)/1.03 var(--serif); letter-spacing: -.045em; text-wrap: balance; }
.chapter h2 { max-width: 18ch; font-size: clamp(2.7rem, 5.6vw, 5.6rem); margin-bottom: 1.5rem; }
.eyebrow { margin: 0 0 1.5rem; color: var(--accent); font-size: .75rem; font-weight: 750; letter-spacing: .16em; text-transform: uppercase; }
.chapter > .eyebrow::before { content: ''; display: inline-block; width: 2rem; height: 1px; margin: 0 .8rem .3em 0; background: var(--gold); }
.dek, .verdict, .closing { font: 400 clamp(1.5rem, 2.3vw, 2.2rem)/1.35 var(--serif); }
.verdict { max-width: 34ch; color: var(--accent); }

/* Chapter intro (from the chapter question and summary data) */
.chapter-intro { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1rem 3rem; align-items: end; max-width: 60rem; padding-bottom: 2rem; border-bottom: 1px solid var(--rule); }
.chapter-question { margin: 0; padding-left: 1.25rem; border-left: 3px solid var(--gold); font: italic 400 clamp(1.35rem, 2.2vw, 1.9rem)/1.3 var(--serif); color: var(--text); }
.chapter-summary { margin: 0; color: var(--muted); font-size: .8rem; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; }

/* Next chapter link */
.next-chapter { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.5rem; margin-top: 5rem !important; padding: 1.75rem 0; border-top: 1px solid var(--accent); border-bottom: 1px solid var(--rule); text-decoration: none; color: var(--accent); }
.next-label { font-size: .75rem; font-weight: 750; letter-spacing: .16em; text-transform: uppercase; }
.next-title { font: 400 clamp(1.6rem, 3vw, 2.6rem)/1.1 var(--serif); letter-spacing: -.02em; }
.next-code { color: var(--gold); }
.next-arrow { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border: 1px solid var(--accent); border-radius: 50%; font-size: 1.4rem; transition: transform .45s var(--ease), background .3s, color .3s; }
.next-chapter:hover .next-arrow { transform: translateX(.5rem); background: var(--accent); color: var(--bg); }

/* ===== Hero ===== */
.hero { display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; min-height: calc(100svh - 4.75rem); background: radial-gradient(ellipse at 85% 45%, var(--tint), transparent 60%); }
.hero > * { grid-column: 1; }
.hero { padding-block: clamp(3rem, 6vw, 5.5rem); }
.hero > :not(.hero-art) { max-width: min(44rem, 54%); }
.hero > * + * { margin-top: 1.5rem; }
.hero > .dek + p { margin-top: 2rem; }
.hero .dek { max-width: 29ch; }
.hero h1 { font-size: clamp(3.25rem, 6.3vw, 6.6rem); }
.hero-meta { display: flex; gap: 1.25rem; margin: 0; color: var(--muted); font-size: .8rem; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; }
.hero-meta span + span::before { content: '·'; margin-right: 1.25rem; color: var(--gold); }
.scroll-cue { display: inline-flex; align-items: center; gap: 1rem; width: fit-content; padding: .75rem 1.5rem; border-radius: 999px; background: var(--accent); color: var(--bg); font-size: .85rem; font-weight: 650; text-decoration: none; box-shadow: var(--shadow); transition: transform .3s var(--ease), box-shadow .3s; }
.scroll-cue:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.scroll-cue::after { content: '↓'; font-size: 1.1rem; animation: bob 1.8s var(--ease) infinite; }


/* Hero portrait image */
.hero-art { position: absolute; top: 50%; right: max(1.5rem, calc((100% - var(--content)) / 2)); translate: 0 -50%; width: min(36rem, 42vw); margin: 0 !important; }
.hero-art img { display: block; width: 100%; height: auto; border-radius: 1.5rem; transition: filter 1.4s var(--ease), transform 1.4s var(--ease); }
html[data-motion] .hero-art[data-uniform] img { filter: grayscale(1) contrast(.9) brightness(1.05); transform: scale(.97); }

/* ===== Cards & blocks ===== */
#first-look, #world { background: var(--surface); }
#impact { background: var(--tint); }
.personal-comment, .comparison article, details { padding: clamp(1.25rem, 3vw, 2.5rem); border-radius: 1.5rem; background: var(--tint); }
#impact .personal-comment, #impact details { background: var(--surface); }
.personal-comment { position: relative; max-width: 52rem; border-left: .25rem solid var(--gold); }
.personal-comment::after { content: '“'; position: absolute; top: .25rem; right: 1.5rem; font: 6rem/1 var(--serif); color: var(--gold); opacity: .35; pointer-events: none; }
.personal-comment h3 { font-size: .75rem; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; }
.personal-comment p { font: 1.4rem/1.5 var(--serif); }
.personal-comment p:last-child, article p:last-child { margin-bottom: 0; }

.video-shell { width: 100%; aspect-ratio: 16 / 9; display: grid; align-content: center; justify-items: center; gap: .75rem; padding: 1.5rem; text-align: center; border-radius: 1.5rem; background: var(--navy); color: white; overflow: hidden; }
.video-shell p { margin: 0; font: clamp(1.3rem, 3vw, 2.5rem)/1.2 var(--serif); }
.video-shell span { font-size: .8rem; color: var(--warm-white); }
.video-shell:has(iframe) { padding: 0; display: block; }
.video-shell iframe { border: 0; width: 100%; height: 100%; aspect-ratio: 16 / 9; }
.video-shell[data-shape="portrait"] { width: min(100%, 22rem); aspect-ratio: 9 / 16; box-shadow: var(--shadow-lift); }
.video-shell[data-shape="portrait"] iframe { aspect-ratio: 9 / 16; }
/* Click-to-play video cover */
.video-shell:has(.video-facade) { padding: 0; display: block; }
.video-facade { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; border-radius: inherit; overflow: hidden; background: var(--navy); color: #fff; cursor: pointer; text-align: left; }
.video-facade img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease), filter .6s; }
.video-facade::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, #073a6d1a 0%, transparent 35%, #071a30d9 100%); transition: opacity .4s; }
.play-icon { position: absolute; z-index: 1; left: 50%; top: 50%; width: 5.5rem; height: 5.5rem; translate: -50% -50%; border-radius: 50%; background: var(--gold); box-shadow: 0 12px 32px -8px #0009; transition: transform .45s var(--ease), background .3s; }
.play-icon::before { content: ''; position: absolute; left: 54%; top: 50%; width: 1.7rem; height: 2rem; translate: -50% -50%; background: var(--navy); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.play-icon::after { content: ''; position: absolute; inset: -.6rem; border: 2px solid var(--gold); border-radius: 50%; animation: ring 2.2s ease-out infinite; }
.video-facade .video-label { position: absolute; z-index: 1; left: 1.5rem; right: 1.5rem; bottom: 1.5rem; font: 400 1.35rem/1.25 var(--serif); text-shadow: 0 2px 12px #0008; }
.video-facade:hover img, .video-facade:focus-visible img { transform: scale(1.05); }
.video-facade:hover .play-icon, .video-facade:focus-visible .play-icon { transform: scale(1.12); background: #E2C58A; }
.video-facade:focus-visible { outline: .2rem solid var(--gold); outline-offset: .3rem; }

/* Centre vertical videos with their watch link and caption as one block */
.video-shell[data-shape="portrait"] { margin-inline: auto; }
.video-shell[data-shape="portrait"] + .video-watch { display: flex; width: fit-content; margin-inline: auto; }
.video-shell[data-shape="portrait"] + .video-watch + .source { margin-inline: auto; text-align: center; }
.video-watch { display: inline-flex; align-items: center; min-height: 2.75rem; margin-top: .75rem; padding: .5rem 0; }

.process, .comparison, #segment-grid, #metric-grid, #platform-grid, #tbl-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.comparison, #segment-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#platform-grid, #tbl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#stp-flow .process { grid-template-columns: repeat(5, minmax(0, 1fr)); }
#metric-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.process { list-style: none; counter-reset: process; padding: 0; margin-bottom: 0; }
.process li { counter-increment: process; padding: 1rem 0; border-top: 1px solid var(--gold); }
.process li::before { content: '0' counter(process); display: block; margin-bottom: .75rem; color: var(--accent); font: 1.75rem/1 var(--serif); }

.card-base, #segment-grid > article, #metric-grid > article, #platform-grid > article, #tbl-grid > article, .rec-row > article, .score-item {
  min-width: 0; padding: clamp(1.25rem, 2vw, 2rem); border: 1px solid var(--rule); border-radius: 1.4rem; background: var(--surface); overflow-wrap: anywhere;
  box-shadow: var(--shadow); transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
}
:is(#segment-grid, #metric-grid, #platform-grid, #tbl-grid, .rec-row) > article:hover, .score-item:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); border-color: #c5a15a80; }
#first-look :is(#segment-grid, #platform-grid) > article, #world .score-item { background: var(--bg); }
.segment-card[data-kind="soft"] { background: linear-gradient(160deg, var(--surface), var(--tint)); }
.platform-card h3 { font: 400 1.6rem/1.15 var(--serif); }

/* Metrics */
#metric-grid > article { position: relative; background: var(--stat-bg); color: var(--stat-text); border-color: transparent; }
#metric-grid > article[data-origin="entrant"] { background: transparent; color: var(--text); border: 1px dashed var(--gold); box-shadow: none; }
#metric-grid > article[data-origin="entrant"] small { color: var(--muted); }
#metric-grid > article[data-origin="entrant"] a { color: var(--accent); }
#metric-grid small { color: #fbf8f1bf; }
#metric-grid a { color: var(--warm-white); }
#metric-grid h3, .data-card strong { display: block; color: var(--gold); font: 400 clamp(2rem, 3.1vw, 3.5rem)/1.05 var(--serif); letter-spacing: -.03em; margin-bottom: 1rem; font-variant-numeric: tabular-nums; }
.data-card span { display: block; margin-bottom: 1rem; font-weight: 650; }
.state { display: inline-block; border-bottom: 2px solid var(--gold); font-size: .8rem; font-weight: 750; }

/* Segment scorecard */
#segment-scorecard dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 0; }
.score-item { box-shadow: none; }
.score-item dt { margin-bottom: .5rem; color: var(--accent); font: 400 1.35rem/1.2 var(--serif); }
.score-item dt::before { content: ''; display: block; width: 1.5rem; height: 2px; margin-bottom: .9rem; background: var(--gold); }
.score-item dd { margin: 0; font-size: .95rem; }

/* Positioning statement */
#positioning-statement { position: relative; max-width: 60rem; margin-inline: 0; padding: clamp(2rem, 4vw, 3.5rem); border-radius: 1.75rem; background: var(--stat-bg); color: var(--stat-text); box-shadow: var(--shadow-lift); }
#positioning-statement::before { content: '“'; position: absolute; top: -.2em; left: .2em; font: 10rem/1 var(--serif); color: var(--gold); }
#positioning-statement p { position: relative; max-width: none; font: 400 clamp(1.25rem, 2.1vw, 1.75rem)/1.45 var(--serif); }
#positioning-statement cite { display: block; margin-top: 1.5rem; color: var(--gold); font: normal 700 .75rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; }

/* Four Cs */
#four-c { max-width: 60rem; }
#four-c dl { display: grid; grid-template-columns: 14rem minmax(0, 1fr); margin: 0; }
#four-c dt, #four-c dd { padding: 1.1rem 0; margin: 0; border-bottom: 1px solid var(--rule); }
#four-c dt { font-weight: 750; color: var(--accent); }

/* Perceptual map */
#perceptual-map { position: relative; padding: clamp(1.25rem, 3vw, 2.5rem); border: 1px solid var(--rule); border-radius: 1.75rem; background: var(--tint); }
.map-note { color: var(--muted); font-size: .9rem; }
.map-plot { position: relative; height: clamp(20rem, 42vw, 30rem); margin-top: 1rem; padding: 2.5rem 1rem; }
.map-field { position: absolute; inset: 2.75rem 1rem; border-radius: 1rem;
  background:
    linear-gradient(var(--rule), var(--rule)) center / 1px 100% no-repeat,
    linear-gradient(90deg, var(--rule), var(--rule)) center / 100% 1px no-repeat,
    radial-gradient(circle at 100% 0, #c5a15a33, transparent 55%);
}
.axis { position: absolute; color: var(--muted); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.axis-top { top: 0; left: 50%; transform: translateX(-50%); }
.axis-bottom { bottom: 0; left: 50%; transform: translateX(-50%); }
.axis-left { left: 1rem; top: 50%; transform: translateY(calc(-50% - 1rem)); }
.axis-right { right: 1rem; top: 50%; transform: translateY(calc(-50% - 1rem)); }
.map-point { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); min-width: 2.75rem; min-height: 2.75rem; padding: .6rem 1rem; border: 0; border-radius: 999px; background: var(--navy); color: white; font-size: .8rem; font-weight: 650; box-shadow: var(--shadow); transition: transform .35s var(--ease), box-shadow .35s; }
.map-point:hover, .map-point[data-selected] { transform: translate(-50%, -50%) scale(1.08); box-shadow: var(--shadow-lift); }
.map-point[data-brand="Dove"] { background: var(--gold); color: var(--navy); font-weight: 750; }
.map-point[data-brand="Dove"]::after { content: ''; position: absolute; inset: -6px; border: 2px solid var(--gold); border-radius: inherit; opacity: 0; }
#map-detail { min-height: 3rem; margin: 1rem 0 0; padding-left: 1rem; border-left: 3px solid var(--gold); font: italic 1.1rem/1.5 var(--serif); }
#perceptual-map-description { font-size: .9rem; color: var(--muted); }

/* International stepper + roadmap timeline */
#international-path, #roadmap { max-width: var(--reading); list-style: none; padding: 0; counter-reset: step; }
#international-path > li, #roadmap > li { counter-increment: step; display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); gap: 1rem; align-items: center; padding: 1rem 0; border-top: 1px solid var(--rule); }
#international-path > li::before, #roadmap > li::before, .path-step > span, .roadmap-step > span { content: counter(step, decimal-leading-zero); display: grid; place-items: center; width: 2.75rem; aspect-ratio: 1; border: 1px solid var(--gold); border-radius: 50%; color: var(--accent); background: var(--surface); font-size: .8rem; font-weight: 700; }
#international-path > .path-step::before, #roadmap > .roadmap-step::before { content: none; }
#roadmap strong { display: block; color: var(--accent); font: 400 1.5rem/1.2 var(--serif); }

@media (min-width: 62rem) {
  #international-path, #roadmap { position: relative; max-width: none; display: grid; gap: 1.25rem; }
  #international-path { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  #roadmap { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
  #international-path > li:not(:last-child)::after, #roadmap > li:not(:last-child)::after { content: ''; position: absolute; z-index: -1; top: 1.375rem; left: 2.75rem; width: calc(100% - 2.75rem + var(--gap)); height: 1px; background: var(--gold); transform-origin: left; transition: transform .7s var(--ease); transition-delay: calc(.3s + var(--n, 0) * .12s); }
  #international-path { --gap: 1.25rem; }
  #roadmap { --gap: 2rem; }
  :is(#international-path, #roadmap) > li:nth-child(2) { --n: 1; } :is(#international-path, #roadmap) > li:nth-child(3) { --n: 2; } #international-path > li:nth-child(4) { --n: 3; } #international-path > li:nth-child(5) { --n: 4; } #international-path > li:nth-child(6) { --n: 5; }
  #international-path > li, #roadmap > li { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; padding: 0; border: 0; font-size: .92rem; line-height: 1.5; }
  #roadmap > li { font-size: 1rem; }
  #international-path > li > span, #roadmap > li::before { flex-shrink: 0; transition: background .3s, color .3s, transform .4s var(--ease); }
  #international-path > li:hover > span, #roadmap > li:hover::before { background: var(--gold); color: var(--navy); transform: scale(1.1); }
}

/* Triple Bottom Line states */
.tbl-card { position: relative; overflow: hidden; }
.tbl-card::before { content: ''; position: absolute; inset: 0 0 auto; height: 5px; background: var(--state-colour, var(--gold)); }
.tbl-card .eyebrow { display: inline-flex; align-items: center; gap: .5rem; padding: .3rem .7rem; border-radius: 999px; background: color-mix(in srgb, var(--state-colour, var(--gold)) 18%, transparent); color: var(--text); letter-spacing: .12em; }
.tbl-card .eyebrow::before { content: ''; width: .5rem; height: .5rem; border-radius: 50%; background: var(--state-colour, var(--gold)); }
.tbl-card h3 { font: 400 2rem/1.1 var(--serif); }
.tbl-card[data-state="strongest"] { --state-colour: #2E8B6A; }
.tbl-card[data-state="strong"] { --state-colour: #3D7FB8; }
.tbl-card[data-state="gap"] { --state-colour: #D9822B; border-color: #d9822b66; }

#sdg-mapping { max-width: 52rem; padding: clamp(1.25rem, 3vw, 2.5rem); border-radius: 1.5rem; background: var(--surface); border: 1px solid var(--rule); border-top: 4px solid var(--gold); }

/* Recommendations grouped by audience */
#recommendation-grid { display: grid; gap: 2.5rem; }
.rec-group { display: grid; gap: 1rem; }
.rec-audience { display: flex; align-items: center; gap: 1rem; margin: 0; color: var(--accent); font-size: .75rem; font-weight: 750; letter-spacing: .16em; text-transform: uppercase; max-width: none; }
.rec-audience::after { content: ''; flex: 1; height: 1px; background: var(--rule); }
.rec-row { display: grid; grid-template-columns: repeat(var(--cards, 3), minmax(0, 1fr)); gap: 1rem; }
.rec-row > article { display: flex; flex-direction: column; }
.rec-row > article h3 { display: inline-block; align-self: flex-start; padding: .3rem .8rem; border-radius: 999px; background: var(--tint); font-size: .8rem; font-weight: 700; letter-spacing: .04em; }
.rec-row > article p:first-of-type { color: var(--accent); font: 400 1.3rem/1.35 var(--serif); }
.rec-row > article p:nth-of-type(2) { color: var(--muted); font-size: .95rem; }
.rec-row > article a { margin-top: auto; padding-top: 1rem; font-size: .85rem; font-weight: 650; text-decoration: none; }
.rec-row > article a::after { content: ' →'; display: inline-block; transition: transform .3s var(--ease); }
.rec-row > article a:hover::after { transform: translateX(4px); }

.closing { padding-block: 2rem; border-top: 1px solid var(--gold); color: var(--accent); }
details { margin-top: 3rem; }
summary { padding-block: .6rem; color: var(--accent); font-weight: 700; }
#references { max-width: var(--reading); padding-left: 1.5rem; }
#references > li { padding: .65rem 0 .65rem .25rem; border-bottom: 1px solid var(--rule); overflow-wrap: anywhere; font-size: .9rem; }
.noscript { margin: 2rem auto; padding-inline: 1.5rem; }

/* Chapter rail + back to top */
.chapter-rail { position: fixed; z-index: 40; right: 1.25rem; top: 50%; display: none; flex-direction: column; gap: .35rem; transform: translateY(-50%); }
.chapter-rail a { display: flex; align-items: center; justify-content: flex-end; gap: .75rem; padding: .3rem 0; color: var(--accent); text-decoration: none; }
.rail-dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--rule); box-shadow: 0 0 0 1px var(--accent); transition: transform .35s var(--ease), background .35s, height .35s; }
.rail-label { font-size: .7rem; font-weight: 700; letter-spacing: .08em; white-space: nowrap; opacity: 0; transform: translateX(6px); transition: opacity .25s, transform .3s var(--ease); }
.chapter-rail a:hover .rail-label { opacity: 1; transform: none; }
.chapter-rail a[data-active] .rail-dot { height: 1.6rem; border-radius: 999px; background: var(--gold); box-shadow: none; }
@media (min-width: 88rem) { .chapter-rail { display: flex; } }
.back-to-top { position: fixed; z-index: 45; right: 1.25rem; bottom: 1.25rem; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--accent); color: var(--bg); font-size: 1.2rem; text-decoration: none; box-shadow: var(--shadow-lift); opacity: 0; pointer-events: none; transform: translateY(1rem); transition: opacity .3s, transform .4s var(--ease); }
.back-to-top[data-show] { opacity: 1; pointer-events: auto; transform: none; }
.back-to-top:hover { transform: translateY(-3px); }
@media (min-width: 88rem) { .back-to-top { right: 1.4rem; } }

/* ===== Motion (only once JavaScript sets html[data-motion]) ===== */
@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes pop { from { opacity: 0; transform: translate(-50%, -50%) scale(.4); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes tile-in { from { opacity: 0; transform: translateY(18px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes ring { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.6); } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
@keyframes drift { from { transform: translateY(3rem); } to { transform: translateY(-3rem); } }

html[data-motion] .chapter:not(.hero) > :not([data-visible]) { opacity: 0; }
html[data-motion] .hero > :not(.hero-art) { animation: rise 1s var(--ease) both; }
html[data-motion] .hero > .eyebrow { animation-delay: .1s; }
html[data-motion] .hero > h1 { animation-delay: .22s; }
html[data-motion] .hero > .dek { animation-delay: .38s; }
html[data-motion] .hero > p:nth-of-type(3) { animation-delay: .5s; }
html[data-motion] .hero > p:nth-of-type(4) { animation-delay: .58s; }
html[data-motion] .hero > .hero-meta { animation-delay: .66s; }
html[data-motion] .hero > .scroll-cue { animation-delay: .74s; }
html[data-motion] .hero-art { animation: tile-in 1s var(--ease) .2s both; }

html[data-motion] :is(#metric-grid, #segment-grid, #platform-grid, #tbl-grid, .process, #international-path, #roadmap, #segment-scorecard dl, .comparison) > * { opacity: 0; }
html[data-motion] :is(#metric-grid, #segment-grid, #platform-grid, #tbl-grid, #international-path, #roadmap, .comparison)[data-visible] > *,
html[data-motion] [data-visible] :is(.process, #segment-scorecard dl) > *,
html[data-motion] .process[data-visible] > * { animation: rise .75s var(--ease) both; }
html[data-motion] [data-visible] .rec-row > * { animation: rise .75s var(--ease) both; }
:is(#metric-grid, #segment-grid, #platform-grid, #tbl-grid, .process, #international-path, #roadmap, #segment-scorecard dl, .comparison, .rec-row) > :nth-child(1) { animation-delay: .05s; }
:is(#metric-grid, #segment-grid, #platform-grid, #tbl-grid, .process, #international-path, #roadmap, #segment-scorecard dl, .comparison, .rec-row) > :nth-child(2) { animation-delay: .13s; }
:is(#metric-grid, #segment-grid, #platform-grid, #tbl-grid, .process, #international-path, #roadmap, #segment-scorecard dl, .comparison, .rec-row) > :nth-child(3) { animation-delay: .21s; }
:is(#metric-grid, #segment-grid, #platform-grid, #tbl-grid, .process, #international-path, #roadmap, #segment-scorecard dl, .comparison, .rec-row) > :nth-child(4) { animation-delay: .29s; }
:is(#metric-grid, #segment-grid, #platform-grid, #tbl-grid, .process, #international-path, #roadmap, #segment-scorecard dl, .comparison, .rec-row) > :nth-child(5) { animation-delay: .37s; }
:is(#metric-grid, #segment-grid, #platform-grid, #tbl-grid, .process, #international-path, #roadmap, #segment-scorecard dl, .comparison, .rec-row) > :nth-child(6) { animation-delay: .45s; }
:is(#metric-grid, #segment-grid, #platform-grid, #tbl-grid, .process, #international-path, #roadmap, #segment-scorecard dl, .comparison, .rec-row) > :nth-child(7) { animation-delay: .53s; }

html[data-motion] :is(#international-path, #roadmap):not([data-visible]) > li::after { transform: scaleX(0); }
html[data-motion] #perceptual-map .map-point { opacity: 0; }
html[data-motion] #perceptual-map[data-visible] .map-point { animation: pop .7s var(--ease) both; animation-delay: calc(.4s + var(--i) * .18s); }
html[data-motion] #perceptual-map[data-visible] .map-point[data-brand="Dove"]::after { animation: ring 1.6s ease-out 1.2s 3; }

@supports (animation-timeline: view()) {
  html[data-motion] .chapter[data-code]::before { animation: drift linear both; animation-timeline: view(); }
}

/* ===== Responsive ===== */
@media (max-width: 68rem) {
  .site-header { gap: 1rem; }
  #chapter-nav { gap: 0 .6rem; }
  #chapter-nav a { font-size: .8rem; }
  #metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #segment-scorecard dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rec-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #stp-flow .process { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 48rem) {
  html { scroll-padding-top: 5rem; }
  .site-header { position: relative; flex-wrap: wrap; padding: .65rem 1rem; }
  #chapter-nav { justify-content: flex-start; flex-basis: 100%; gap: 0 1rem; margin: 0; }
  html[data-enhanced] .site-header { position: sticky; }
  html[data-enhanced] .menu-button { display: inline-flex; align-items: center; margin-left: auto; }
  html[data-enhanced] #chapter-nav { display: none; }
  html[data-enhanced] #chapter-nav[data-open] { display: grid; position: absolute; inset: 100% 0 auto; max-height: calc(100svh - 5rem); overflow-y: auto; padding: 1rem 1.5rem; background: var(--bg); border-bottom: 1px solid var(--rule); box-shadow: 0 1rem 2rem #073a6d14; }
  #chapter-nav a { font-size: .95rem; opacity: 1; }
  .chapter { min-height: auto; padding: 4.5rem 1.25rem; }
  .chapter > * + * { margin-top: 1.5rem; }
  .chapter h2 { margin-bottom: 1rem; }
  .chapter[data-code]::before { top: 1.5rem; right: .5rem; font-size: 8rem; }
  .chapter-intro { grid-template-columns: 1fr; }
  .hero { grid-template-columns: minmax(0, 1fr); min-height: auto; padding-top: 2.5rem; }
  .hero > :not(.hero-art) { max-width: none; }
  .hero-art { position: static; translate: none; grid-row: 1; width: 100%; margin: 0 0 1rem !important; }
  .hero h1 { max-width: 14ch; }
  .hero .dek { max-width: 34ch; }
  .process, .comparison, #segment-grid, #metric-grid, #platform-grid, #tbl-grid, .rec-row, #stp-flow .process, #segment-scorecard dl { grid-template-columns: 1fr; }
  #four-c dl { grid-template-columns: 1fr; }
  #four-c dt { padding-bottom: 0; border: 0; }
  #four-c dd { padding-top: .5rem; }
  .video-shell { border-radius: 1rem; }
  #perceptual-map { padding: 1.25rem; }
  .map-plot { height: 22rem; padding-inline: 0; }
  .map-field { inset: 2.75rem 0; }
  .axis-left, .axis-right { top: auto; bottom: 1.6rem; transform: none; font-size: .62rem; }
  .axis-left { left: 0; } .axis-right { right: 0; }
  .map-point { padding: .5rem .75rem; font-size: .72rem; }
  .next-chapter { gap: 1rem; margin-top: 3.5rem !important; }
  .next-arrow { width: 2.75rem; height: 2.75rem; }
  .back-to-top { right: 1rem; bottom: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

@media print {
  html, body { background: white; color: #142F49; font-size: 11pt; }
  .site-header, .skip-link, .scroll-cue, .menu-button, .hero-art, .chapter-rail, .back-to-top, .next-chapter, .chapter[data-code]::before { display: none !important; }
  html[data-motion] * { opacity: 1 !important; animation: none !important; transform: none !important; }
  .chapter, .hero { display: block; min-height: 0; padding: 2rem 0; background: white !important; }
  .chapter h1, .chapter h2 { max-width: none; font-size: 32pt; break-after: avoid; }
  .chapter h3 { break-after: avoid; }
  .chapter > * + * { margin-top: 1rem; }
  .process, .comparison, #segment-grid, #metric-grid, #platform-grid, #tbl-grid, .rec-row, #stp-flow .process { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  article, .personal-comment, .video-shell, #international-path > li, #roadmap > li { break-inside: avoid; }
  #metric-grid > article, .personal-comment, .comparison article, details, #positioning-statement { background: white; color: var(--ink); box-shadow: none; }
  #metric-grid h3, .data-card strong { color: var(--navy); }
  #segment-grid > article, #metric-grid > article, #platform-grid > article, #tbl-grid > article, .rec-row > article { border-color: #777; box-shadow: none; }
  .video-shell { aspect-ratio: auto; min-height: 5rem; background: white; color: var(--ink); border: 1px solid #777; }
  .video-shell span { color: var(--ink); }
  .video-shell iframe { height: 12rem; }
  details { padding: 1rem 0; }
  details::details-content { content-visibility: visible; }
  details > * { display: block !important; }
  #references { display: block !important; }
  a { color: inherit; }
}