:root {
  --sand: #f0dfbf;
  --sand-light: #fff8e8;
  --sea: #bfe1df;
  --sea-deep: #82c4c3;
  --ink: #182e32;
  --ink-soft: #536a69;
  --purple: #6656e8;
  --yellow: #f4c84b;
  --coral: #e86a54;
  --line: rgba(24, 46, 50, 0.18);
  --paper: #f8edd7;
  --focus: #0b666b;
  --display: "Avenir Next Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --body: "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--sand);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.55;
  overflow-x: hidden;
}

::selection { background: var(--purple); color: white; }
a { color: inherit; text-decoration-thickness: 1.5px; text-underline-offset: 0.24em; }
a:hover { text-decoration-color: var(--coral); }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
button:focus-visible, a:focus-visible, summary:focus-visible, .table-wrap:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 4px;
}

.skip-link {
  position: fixed;
  z-index: 30;
  top: 10px;
  left: 10px;
  transform: translateY(-160%);
  padding: 10px 14px;
  background: var(--ink);
  color: var(--sand-light);
}
.skip-link:focus { transform: none; }

.reading-progress {
  position: fixed;
  z-index: 20;
  inset: 0 0 auto;
  height: 5px;
  background: transparent;
  pointer-events: none;
}
.reading-progress span {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--coral);
  transform: scaleX(0);
  transform-origin: left;
}
@supports (animation-timeline: scroll()) {
  .reading-progress span {
    animation: reading-progress linear both;
    animation-timeline: scroll(root);
  }
  @keyframes reading-progress {
    to { transform: scaleX(1); }
  }
}

.site-header {
  position: absolute;
  z-index: 10;
  inset: 0 0 auto;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(20px, 4vw, 64px);
  color: var(--ink);
}
.wordmark {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.025em;
  text-decoration: none;
}
.site-header nav { display: flex; gap: 22px; font-size: 0.86rem; font-weight: 700; }
.site-header nav a { text-decoration: none; border-bottom: 1px solid transparent; }
.site-header nav a:hover { border-color: currentColor; }

.hero {
  min-height: 100dvh;
  position: relative;
  display: grid;
  grid-template-columns: minmax(320px, 0.82fr) minmax(480px, 1.18fr);
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  padding: 88px clamp(24px, 5vw, 76px) 54px;
}
.hero::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  background:
    radial-gradient(circle at 16% 22%, rgba(255,255,255,.26), transparent 20%),
    var(--sand);
}
.hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: .15;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='110' viewBox='0 0 110 110'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.2'/%3E%3C/svg%3E");
}
.hero-copy { position: relative; z-index: 2; max-width: 610px; align-self: center; }
.chapter-label {
  margin: 0 0 20px;
  color: var(--ink-soft);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.hero h1 {
  margin: 0;
  max-width: 670px;
  font-family: var(--display);
  font-size: clamp(5.2rem, 10vw, 9.6rem);
  line-height: 0.76;
  letter-spacing: -0.07em;
  text-transform: uppercase;
}
.hero h1 span { color: var(--coral); }
.hero-question {
  max-width: 520px;
  margin: 36px 0 12px;
  font-family: var(--display);
  font-size: clamp(1.45rem, 2.2vw, 2.1rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.025em;
}
.hero-support { max-width: 580px; margin: 0; color: var(--ink-soft); font-size: 1rem; }
.scene-note { max-width: 520px; margin: 20px 0 0; font-size: 0.76rem; color: var(--ink-soft); }
.hero-scene { position: absolute; width: min(64vw, 950px); right: -8vw; top: 1vh; bottom: 0; }
.beach-svg { width: 100%; height: 100%; overflow: visible; }
.water { fill: var(--sea); }
.shore { stroke: var(--sand-light); stroke-width: 18; opacity: .9; }
.shadow { fill: var(--ink); opacity: .12; filter: url(#soft-shadow); }
.hero-wave {
  position: absolute;
  right: -5vw;
  top: 0;
  width: 18vw;
  height: 100%;
  background: var(--sea);
  z-index: -1;
}

.story-intro {
  min-height: 78dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(90px, 14vw, 190px) clamp(24px, 10vw, 160px);
  background: var(--ink);
  color: var(--sand-light);
}
.story-intro p { margin: 0 0 24px; color: var(--sea); font-weight: 700; }
.story-intro h2 {
  margin: 0;
  max-width: 1050px;
  font-family: var(--display);
  font-size: clamp(3.3rem, 7vw, 7rem);
  line-height: .91;
  letter-spacing: -0.055em;
  text-transform: uppercase;
}

.scrolly {
  position: relative;
  display: grid;
  grid-template-columns: minmax(330px, 0.78fr) minmax(600px, 1.22fr);
  gap: clamp(24px, 5vw, 80px);
  padding: 0 clamp(24px, 4vw, 68px);
  background: var(--paper);
}
.steps { position: relative; z-index: 2; }
.step {
  min-height: 108dvh;
  display: flex;
  align-items: center;
  padding: 16vh 0;
  opacity: .42;
  transition: opacity 480ms cubic-bezier(.16,1,.3,1);
}
.step.is-active { opacity: 1; }
.step-copy { max-width: 560px; }
.step h2, .closing h2, .data-access h2, .methods h2 {
  margin: 0 0 24px;
  font-family: var(--display);
  font-size: clamp(2.7rem, 4.8vw, 5.2rem);
  line-height: .93;
  letter-spacing: -0.048em;
  text-transform: uppercase;
}
.step-copy > p:not(.chapter-label):not(.lead-stat):not(.bridge):not(.annotation):not(.denominator-note) {
  max-width: 48ch;
  font-size: 1.08rem;
}
.lead-stat {
  margin: 12px 0 16px;
  color: var(--purple);
  font-family: var(--display);
  font-size: clamp(5rem, 9vw, 9rem);
  font-weight: 900;
  letter-spacing: -0.065em;
  line-height: .8;
}
.lead-stat.coral { color: var(--coral); }
.annotation, .denominator-note {
  max-width: 52ch;
  color: var(--ink-soft);
  font-size: .82rem;
  line-height: 1.5;
}
.denominator-note { border-top: 1px solid var(--line); padding-top: 16px; }
.bridge {
  margin-top: 34px;
  max-width: 42ch;
  font-family: var(--display);
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1.18;
}
.inline-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 34px 0 22px; }
.inline-stats p { margin: 0; border-top: 4px solid var(--purple); padding-top: 10px; }
.inline-stats p:last-child { border-color: var(--coral); }
.inline-stats span { display: block; color: var(--ink-soft); font-size: .78rem; font-weight: 700; }
.inline-stats strong { display: block; margin-top: 3px; font-family: var(--display); font-size: 2.6rem; line-height: 1; }

.stage-column { position: relative; }
.sticky-stage {
  position: sticky;
  top: 0;
  height: 100dvh;
  display: grid;
  place-items: center;
}
.visual-panel {
  position: absolute;
  width: min(100%, 880px);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid rgba(24,46,50,.16);
  background: var(--sand);
  opacity: 0;
  transform: translateY(24px) scale(.985);
  visibility: hidden;
  transition: opacity 380ms ease-out, transform 520ms cubic-bezier(.16,1,.3,1), visibility 0s linear 520ms;
}
.visual-panel.is-active {
  opacity: 1;
  transform: none;
  visibility: visible;
  transition-delay: 0s;
}
.stage-sand { position: absolute; inset: 0; background: var(--sand); }
.stage-sand::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
}
.stage-water { position: absolute; inset: auto 0 0; height: 22%; background: var(--sea); }
.stage-water::before { content:""; position:absolute; inset:-12px 0 auto; height:18px; background:var(--sand-light); clip-path: polygon(0 46%,8% 70%,17% 30%,28% 62%,40% 35%,54% 66%,67% 34%,82% 60%,100% 38%,100% 100%,0 100%); }
.stage-water.narrow { right: auto; width: 17%; height: 100%; }

.visual-heading { position: relative; z-index: 2; display:flex; justify-content:space-between; align-items:flex-end; gap:20px; padding: 34px 38px 20px; }
.visual-heading p { margin: 0; max-width: 33ch; font-weight: 800; line-height: 1.16; }
.visual-heading strong { color: var(--purple); font-family: var(--display); font-size: clamp(3.6rem, 7vw, 6.3rem); line-height: .8; letter-spacing: -.06em; }
.people-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(20, 1fr);
  gap: clamp(4px, .42vw, 7px);
  width: min(88%, 720px);
  margin: 6px auto 16px;
}
.mini-person { position: relative; aspect-ratio: .78; min-width: 0; border-bottom: 3px solid rgba(24,46,50,.2); }
.mini-person::before { content:""; position:absolute; width:32%; aspect-ratio:1; border-radius:50%; left:34%; top:3%; background:rgba(24,46,50,.3); }
.mini-person::after { content:""; position:absolute; width:62%; height:55%; left:19%; bottom:12%; border-radius: 46% 46% 22% 22%; background:rgba(24,46,50,.28); }
.mini-person.active { border-color: var(--marker, var(--purple)); }
.mini-person.active::before, .mini-person.active::after { background: var(--ink); }
.legend { position:relative; z-index:2; display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:8px 13px; padding:0 24px; font-size:.72rem; }
.legend-mark { width:18px; height:4px; background:var(--line); }
.legend-mark.yellow { background:var(--yellow); }
.legend-mark.purple { background:var(--purple); }
.legend-mark.muted { background:rgba(24,46,50,.2); }
.visual-note { position:absolute; z-index:3; left:30px; right:30px; bottom:18px; margin:0; color:var(--ink-soft); font-size:.68rem; }

.population-label { position:relative; z-index:2; margin:0; padding:32px 34px 0; max-width:42ch; font-size:.78rem; font-weight:800; }
.segmented-control { position:relative; z-index:3; display:inline-flex; margin:18px 34px 10px; padding:4px; border:1px solid var(--ink); background:rgba(255,248,232,.55); }
.segmented-control button { border:0; padding:9px 14px; background:transparent; color:var(--ink); cursor:pointer; font-size:.76rem; font-weight:800; }
.segmented-control button.active { background:var(--ink); color:var(--sand-light); }
.use-stat { position:absolute; z-index:2; right:35px; top:30px; text-align:right; }
.use-stat span { display:block; font-size:.75rem; font-weight:800; }
.use-stat strong { display:block; color:var(--purple); font-family:var(--display); font-size:4.5rem; line-height:.85; letter-spacing:-.06em; }
.use-panel[data-mode="skin"] .use-stat strong { color:var(--coral); }
.use-panel .people-grid { margin-top: 14px; width:min(72%, 560px); }

.object-scene { position:absolute; inset:30px 38% 90px 12px; z-index:2; display:grid; place-items:center; }
.object-scene svg { width:100%; height:100%; overflow:visible; }
.ratio-figure { position:absolute; z-index:2; right:7%; top:22%; width:38%; }
.ratio-figure strong { display:block; color:var(--coral); font-family:var(--display); font-size:clamp(5rem, 9vw, 8rem); line-height:.8; letter-spacing:-.065em; }
.ratio-line { height:7px; margin:28px 0 14px; background:rgba(24,46,50,.16); }
.ratio-line span { display:block; height:100%; background:var(--coral); }
.ratio-figure p { max-width:25ch; margin:0; font-weight:800; line-height:1.2; }

.product-figure { position:absolute; z-index:2; left:5%; top:8%; width:34%; height:78%; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.product-figure svg { width:100%; max-height:78%; overflow:visible; }
.product-figure p { min-height:2.8em; max-width:28ch; margin:8px 0 0; text-align:center; color:var(--ink-soft); font-size:.78rem; }
.priority-shape { transition: opacity 220ms ease-out, transform 260ms cubic-bezier(.16,1,.3,1); transform-origin:center; opacity:.28; }
.priorities-panel[data-priority="ingredients"] .priority-ingredients,
.priorities-panel[data-priority="affordability"] .priority-affordability,
.priorities-panel[data-priority="feel"] .priority-feel,
.priorities-panel[data-priority="spray"] .priority-spray { opacity:1; transform:scale(1.06); }
.priority-bars { position:absolute; z-index:3; right:5%; top:14%; width:54%; }
.priority-row { width:100%; display:grid; grid-template-columns:128px minmax(90px,1fr) 58px; gap:12px; align-items:center; padding:14px 4px; border:0; border-bottom:1px solid var(--line); background:transparent; color:var(--ink); text-align:left; cursor:pointer; }
.priority-row:first-child { border-top:1px solid var(--line); }
.priority-row > span:first-child { font-size:.76rem; font-weight:800; }
.priority-row .bar { height:7px; background:rgba(24,46,50,.12); }
.priority-row .bar i { display:block; height:100%; background:var(--ink-soft); transform-origin:left; transition:background 180ms ease-out, transform 180ms ease-out; }
.priority-row strong { font-size:.8rem; font-variant-numeric:tabular-nums; text-align:right; }
.priority-row:hover .bar i, .priority-row.active .bar i { background:var(--purple); transform:scaleY(1.65); }
.priority-row.active { color:var(--purple); }

.association-panel .population-label { font-size:.92rem; }
.comparison-chart { position:absolute; z-index:2; left:7%; right:7%; top:23%; }
.comparison-row { display:grid; grid-template-columns:185px 1fr 70px; gap:16px; align-items:center; margin:0 0 32px; }
.comparison-row p { margin:0; font-size:.78rem; font-weight:800; }
.comparison-bar { height:22px; border-left:2px solid var(--ink); background:rgba(24,46,50,.11); }
.comparison-bar span { display:block; height:100%; background:var(--coral); }
.comparison-row.emphasized .comparison-bar span { background:var(--purple); }
.comparison-row strong { font-size:1.15rem; font-variant-numeric:tabular-nums; }
.axis { display:flex; justify-content:space-between; margin-left:201px; margin-right:86px; color:var(--ink-soft); font-size:.65rem; }
.association-note { position:absolute; z-index:2; left:7%; right:7%; bottom:16%; display:flex; align-items:center; gap:20px; border-top:1px solid var(--line); padding-top:20px; }
.association-note strong { color:var(--coral); font-family:var(--display); font-size:3.6rem; line-height:.8; letter-spacing:-.05em; }
.association-note p { max-width:42ch; margin:0; font-size:.78rem; }

.mobile-visual { display:none; }

.closing {
  min-height: 100dvh;
  display:grid;
  grid-template-columns:minmax(420px, .94fr) minmax(480px, 1.06fr);
  align-items:center;
  gap:clamp(32px, 6vw, 100px);
  padding:clamp(86px, 10vw, 150px) clamp(24px, 6vw, 90px);
  background:var(--sand);
}
.closing-scene svg { width:100%; height:auto; overflow:visible; }
.closing-copy { max-width:720px; }
.closing h2 { font-size:clamp(3rem,5.3vw,5.7rem); }
.research-block, .research-question { border-top:1px solid var(--line); padding:17px 0 2px; }
.research-block h3, .research-question h3, .methods h3 { margin:0 0 7px; color:var(--ink-soft); font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; }
.research-block p { margin:0 0 18px; font-weight:700; }
.research-question { margin:15px 0; border-color:var(--purple); }
.research-question p { margin:0 0 18px; color:var(--purple); font-family:var(--display); font-size:clamp(1.55rem,2.4vw,2.4rem); font-weight:850; line-height:1.12; letter-spacing:-.025em; }
.closing-links { display:flex; flex-wrap:wrap; gap:14px; margin-top:30px; }
.closing-links a, .source-link {
  display:inline-flex;
  min-height:46px;
  align-items:center;
  padding:10px 16px;
  border:1px solid var(--ink);
  background:var(--ink);
  color:var(--sand-light);
  font-size:.82rem;
  font-weight:800;
  text-decoration:none;
  transition:transform 160ms ease-out, background 160ms ease-out;
}
.closing-links a:last-child { background:transparent; color:var(--ink); }
.closing-links a:hover, .source-link:hover { transform:translateY(-2px); }
.closing-links a:active, .source-link:active { transform:translateY(1px); }

.data-access {
  padding:clamp(90px,10vw,150px) clamp(24px,9vw,140px);
  background:var(--yellow);
}
.data-access > p { max-width:70ch; }
.data-access h2 { max-width:900px; }
details { margin-top:34px; border-top:2px solid var(--ink); border-bottom:2px solid var(--ink); }
summary { padding:20px 0; cursor:pointer; font-weight:850; }
.table-wrap { overflow-x:auto; padding:0 0 30px; }
table { width:100%; min-width:820px; border-collapse:collapse; font-size:.82rem; font-variant-numeric:tabular-nums; }
caption { text-align:left; padding:10px 0 18px; font-weight:800; }
th, td { padding:14px 12px; border-bottom:1px solid rgba(24,46,50,.28); text-align:left; vertical-align:top; }
thead th { background:rgba(255,248,232,.45); }
tbody th { width:31%; }

.methods {
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:clamp(40px,8vw,120px);
  padding:clamp(90px,10vw,150px) clamp(24px,9vw,140px);
  background:var(--ink);
  color:var(--sand-light);
}
.methods h2 { color:var(--yellow); }
.methods h3 { color:var(--sea); }
.methods p { max-width:66ch; color:rgba(255,248,232,.78); }
.source-link { margin-top:20px; background:var(--sand-light); color:var(--ink); border-color:var(--sand-light); }
footer { display:flex; justify-content:space-between; gap:20px; padding:28px clamp(24px,5vw,70px); background:#102326; color:rgba(255,248,232,.66); font-size:.72rem; }
footer p { margin:0; }

body.capture-mode > *:not(.capture-shell) { display:none !important; }
.capture-shell {
  width:100vw;
  min-height:100dvh;
  display:grid;
  grid-template-columns:minmax(330px,.78fr) minmax(600px,1.22fr);
  align-items:center;
  gap:clamp(30px,5vw,80px);
  padding:clamp(44px,6vw,84px);
  background:var(--paper);
}
.capture-shell .visual-panel { position:relative; width:100%; opacity:1; visibility:visible; transform:none; }
.capture-shell > .closing, .capture-shell > .methods { grid-column:1 / -1; width:calc(100% + 2 * clamp(44px,6vw,84px)); margin:calc(-1 * clamp(44px,6vw,84px)); }
.capture-shell > .closing { min-height:100dvh; padding:40px 60px; gap:52px; }
.capture-shell > .closing h2 { font-size:clamp(2.8rem,4.3vw,4.7rem); margin-bottom:16px; }
.capture-shell > .closing .research-block,
.capture-shell > .closing .research-question { padding-top:11px; }
.capture-shell > .closing .research-block p { margin-bottom:11px; }
.capture-shell > .closing .research-question { margin:10px 0; }
.capture-shell > .closing .research-question p { margin-bottom:11px; font-size:clamp(1.4rem,2vw,2rem); }
.capture-shell > .closing .closing-links { margin-top:18px; }

@media (max-width: 1040px) {
  .hero { grid-template-columns: .9fr 1.1fr; }
  .hero-scene { right:-18vw; width:78vw; opacity:.94; }
  .scrolly { grid-template-columns:minmax(300px,.84fr) minmax(480px,1.16fr); padding-inline:28px; gap:28px; }
  .visual-panel { width:100%; }
  .priority-row { grid-template-columns:105px 1fr 54px; }
  .comparison-row { grid-template-columns:150px 1fr 64px; }
  .axis { margin-left:166px; margin-right:80px; }
}

@media (max-width: 820px) {
  body { font-size:16px; }
  .site-header { position:absolute; height:60px; padding-inline:18px; }
  .site-header { gap:18px; }
  .site-header nav { gap:14px; margin-left:auto; flex:0 0 auto; }
  .wordmark { flex:0 1 auto; min-width:0; white-space:nowrap; }
  .hero { min-height:100dvh; display:block; padding:90px 20px 36px; }
  .hero-copy { width:100%; max-width:100%; min-width:0; }
  .hero h1 { width:100%; font-size:clamp(3.8rem,17.5vw,4.45rem); line-height:.8; max-width:100%; letter-spacing:-.075em; }
  .hero-question { margin-top:26px; max-width:78%; font-size:1.38rem; }
  .hero-support { max-width:88%; font-size:.91rem; }
  .scene-note { max-width:75%; }
  .hero-scene { width:110vw; height:55vh; right:-42vw; top:42vh; opacity:.76; }
  .hero-wave { width:20vw; right:-8vw; }
  .story-intro { min-height:62dvh; padding:92px 22px; }
  .story-intro h2 { font-size:clamp(3.2rem,15vw,5.4rem); }
  .scrolly { display:block; padding:0 20px; }
  .stage-column { display:none; }
  .step { display:block; min-height:auto; padding:100px 0 40px; opacity:1; }
  .step-copy { max-width:none; }
  .step h2 { font-size:clamp(2.7rem,12vw,4.3rem); }
  .lead-stat { font-size:clamp(5rem,24vw,8rem); }
  .mobile-visual { display:block; margin-top:38px; }
  .mobile-visual .visual-panel { position:relative; width:100%; aspect-ratio:auto; min-height:610px; opacity:1; visibility:visible; transform:none; }
  .mobile-visual .visual-panel.priorities-panel { min-height:730px; }
  .mobile-visual .visual-panel.association-panel { min-height:580px; }
  .visual-heading { align-items:flex-start; padding:28px 22px 14px; }
  .visual-heading strong { font-size:4rem; }
  .people-grid { grid-template-columns:repeat(10, 1fr); width:86%; gap:5px; }
  .visual-note { left:20px; right:20px; }
  .population-label { padding:26px 22px 0; max-width:29ch; }
  .segmented-control { margin-left:22px; }
  .use-stat { top:92px; right:22px; }
  .use-stat strong { font-size:3.5rem; }
  .use-panel .people-grid { width:84%; margin-top:30px; }
  .object-scene { inset:54px 16px 250px; }
  .ratio-figure { left:24px; right:24px; top:auto; bottom:70px; width:auto; }
  .ratio-figure strong { font-size:6.3rem; }
  .product-figure { left:10%; top:22px; width:80%; height:300px; }
  .product-figure svg { max-height:240px; }
  .priority-bars { left:22px; right:22px; top:365px; width:auto; }
  .priority-row { grid-template-columns:108px minmax(70px,1fr) 54px; gap:9px; }
  .association-panel .population-label { font-size:.85rem; }
  .comparison-chart { left:22px; right:22px; top:112px; }
  .comparison-row { grid-template-columns:1fr; gap:7px; margin-bottom:25px; }
  .comparison-bar { height:18px; }
  .axis { margin:0; }
  .association-note { left:22px; right:22px; bottom:78px; align-items:flex-start; }
  .association-note strong { font-size:3.1rem; }
  .closing { grid-template-columns:1fr; padding:90px 20px; }
  .closing-scene { order:2; margin-top:20px; }
  .closing h2 { font-size:clamp(3rem,12vw,4.8rem); }
  .data-access, .methods { padding:90px 20px; }
  .methods { grid-template-columns:1fr; }
  footer { display:block; }
  footer p + p { margin-top:6px; }
  .capture-shell { display:block; padding:64px 20px 34px; }
  .capture-shell .step-copy { margin-bottom:34px; }
  .capture-shell .visual-panel { min-height:620px; aspect-ratio:auto; }
  .capture-shell .priorities-panel { min-height:730px; }
  .capture-shell > .closing, .capture-shell > .methods { width:calc(100% + 40px); margin:-64px -20px -34px; }
}

@media (max-width: 440px) {
  .wordmark { font-size:.82rem; }
  .site-header nav { font-size:.76rem; }
  .hero h1 { font-size:clamp(3.65rem,17vw,4.15rem); }
  .hero-question { max-width:92%; }
  .hero-support { max-width:95%; }
  .scene-note { max-width:92%; }
  .hero-scene { right:-58vw; top:45vh; width:130vw; }
  .inline-stats { grid-template-columns:1fr; }
  .mobile-visual .visual-panel { min-height:560px; }
  .mobile-visual .visual-panel.priorities-panel { min-height:720px; }
  .visual-heading { display:block; }
  .visual-heading strong { display:block; margin-top:12px; }
  .people-grid { width:90%; }
  .use-stat { position:relative; top:auto; right:auto; margin:10px 22px; text-align:left; }
  .use-panel .people-grid { margin-top:8px; }
  .segmented-control { max-width:calc(100% - 44px); }
  .segmented-control button { padding:8px 10px; font-size:.7rem; }
  .priority-row { grid-template-columns:94px 1fr 50px; }
  .closing-links { display:grid; }
  .closing-links a { justify-content:center; }
}

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

/* Revised illustration and assignment documentation */
.hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3vw; }
.hero-scene { position:relative; inset:auto; width:100%; height:auto; max-width:650px; justify-self:center; opacity:1; }
.beach-illustration { display:block; width:100%; height:auto; object-fit:contain; }
.hero-scene .beach-illustration { max-height:820px; }
.closing-scene .beach-illustration { max-height:730px; }
.methods .source-link { display:block; margin-top:14px; }
.design-process { padding:90px clamp(24px,6vw,96px); background:var(--sand-light); }
.design-process h2 { font:800 clamp(2rem,4vw,4rem)/1.05 var(--display); max-width:840px; margin:0 0 28px; letter-spacing:-.04em; }
.process-intro { max-width:850px; }
.process-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:40px; margin:44px 0; }
.process-grid article { border-top:1px solid var(--line); padding-top:20px; }
.process-grid span { color:var(--ink-soft); font-size:.7rem; letter-spacing:.1em; font-weight:800; }
.process-grid h3 { font-size:1.35rem; margin:12px 0; }
.process-grid p { font-size:.95rem; }
.process-credit { font-size:.75rem; color:var(--ink-soft); }
.document-link { display:inline-flex; gap:24px; background:var(--ink); color:var(--sand-light); padding:14px 22px; margin-top:16px; text-decoration:none; }
@media(max-width:1040px) and (min-width:821px) { .hero h1 { font-size:8.6vw; } }
@media(max-width:820px) {
  .hero { display:flex; flex-direction:column; min-height:auto; gap:20px; }
  .hero-scene { position:relative; inset:auto; width:100%; height:auto; max-width:460px; opacity:1; }
  .hero-scene .beach-illustration { max-height:560px; }
  .hero-question,.hero-support,.scene-note { max-width:100%; }
  .process-grid { grid-template-columns:1fr; gap:24px; }
  .site-header nav { gap:12px; }
}