@font-face {
  font-family: "IBM Plex Sans";
  src: url("/fonts/IBMPlexSans-Regular.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("/fonts/IBMPlexSans-SemiBold.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 600;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/IBMPlexMono-Regular.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/IBMPlexMono-Medium.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 500;
}

:root {
  color-scheme: dark;
  --paper: #f0e7d5;
  --ink: #241f1b;
  --screen: #315b51;
  --phosphor: #a8c97f;
  --oxide: #b85635;
  --signal: #e5b83f;
  --line: #6b675d;
  --paper-muted: #c9c0af;
  --ink-muted: #625c53;
  --danger: #9d3328;
  --sans: "IBM Plex Sans", Arial, sans-serif;
  --mono: "IBM Plex Mono", Consolas, monospace;
  --wide: 1440px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  min-width: 320px;
  margin: 0;
  overflow-x: hidden;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

button, input, textarea { font: inherit; }
button, a, input, textarea { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }
h1, h2, h3, p, figure { margin-top: 0; }
h1, h2, h3 { font-weight: 600; }

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 12px;
  left: 12px;
  padding: 9px 13px;
  transform: translateY(-180%);
  border: 2px solid var(--signal);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 500;
}

.skip-link:focus { transform: translateY(0); }
:focus-visible { outline: 3px solid var(--signal); outline-offset: 3px; }

.site-header {
  position: relative;
  z-index: 10;
  display: flex;
  width: min(var(--wide), calc(100% - 48px));
  min-height: 80px;
  margin-inline: auto;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(240, 231, 213, 0.32);
}

.wordmark {
  display: inline-flex;
  gap: 11px;
  align-items: center;
  font-family: var(--mono);
  font-size: 0.86rem;
  font-weight: 500;
  text-decoration: none;
}

.wordmark-mark {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid var(--paper-muted);
  color: var(--signal);
  font-size: 0.7rem;
}

.header-label,
.eyebrow,
.step-kicker,
.research-meta,
.hero-figure-label,
.problem-number,
.survey-bridge-copy small {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.header-label { color: var(--paper-muted); }

.hero {
  position: relative;
  display: grid;
  width: min(1500px, calc(100% - 48px));
  min-height: 760px;
  margin: 0 auto;
  padding: 88px 0 118px;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: 1fr;
}

.hero-art {
  position: relative;
  grid-column: 4 / 13;
  grid-row: 1;
  height: clamp(470px, 46vw, 650px);
  margin: 0;
  overflow: hidden;
  background: var(--screen);
}

.hero-art::after {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(240, 231, 213, 0.2);
  content: "";
  pointer-events: none;
}

.hero-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.82) contrast(1.05) brightness(0.84);
}

.hero-copy {
  position: relative;
  z-index: 2;
  grid-column: 1 / 8;
  grid-row: 1;
  align-self: end;
  margin-bottom: -56px;
  padding: 46px clamp(28px, 4vw, 62px) 50px 0;
  background: var(--ink);
  border-left: 4px solid var(--oxide);
}

.research-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 0 0 28px;
  color: var(--paper-muted);
}

.research-meta span:first-child { color: var(--phosphor); }

h1 {
  max-width: 9ch;
  margin-bottom: 28px;
  font-size: clamp(3.6rem, 6.8vw, 6.4rem);
  letter-spacing: -0.055em;
  line-height: 0.88;
}

.hero-lede {
  max-width: 680px;
  margin-bottom: 17px;
  color: var(--paper);
  font-size: clamp(1.08rem, 1.65vw, 1.35rem);
  line-height: 1.48;
}

.hero-support {
  max-width: 620px;
  margin-bottom: 32px;
  color: var(--paper-muted);
  font-size: 0.98rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
}

.hero-actions p {
  max-width: 300px;
  margin: 0;
  color: var(--paper-muted);
  font-size: 0.83rem;
  line-height: 1.45;
}

.hero-actions strong { color: var(--paper); }

.hero-figure-label {
  position: absolute;
  right: 0;
  bottom: 75px;
  margin: 0;
  color: var(--line);
  writing-mode: vertical-rl;
}

.button {
  display: inline-flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  border: 1px solid currentColor;
  padding: 12px 19px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color 140ms linear, border-color 140ms linear, color 140ms linear;
}

.button:hover:not(:disabled) { border-color: var(--signal); color: var(--signal); }
.button:disabled { cursor: wait; opacity: 0.55; }
.button-primary { border-color: var(--oxide); background: var(--oxide); color: var(--paper); }
.button-primary:hover:not(:disabled) { border-color: var(--signal); background: var(--signal); color: var(--ink); }

.problem-section {
  padding: 78px 0 132px;
  border-top: 1px solid rgba(240, 231, 213, 0.3);
}

.problem-lead {
  display: grid;
  width: min(1500px, calc(100% - 48px));
  margin-inline: auto;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: end;
}

.problem-lead-art {
  grid-column: 1 / 9;
  grid-row: 1;
  height: clamp(390px, 42vw, 590px);
  margin: 0;
  overflow: hidden;
  background: var(--screen);
}

.problem-lead-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.76) contrast(1.06) brightness(0.78);
}

.section-heading {
  position: relative;
  z-index: 2;
  grid-column: 7 / 13;
  grid-row: 1;
  margin: 0 0 -68px;
  padding: clamp(34px, 5vw, 70px);
  background: var(--paper);
  color: var(--ink);
}

.eyebrow,
.step-kicker {
  margin: 0 0 17px;
  color: var(--oxide);
}

.section-heading h2,
.survey-intro h2,
.privacy-copy h2 {
  margin-bottom: 22px;
  font-size: clamp(2.5rem, 5vw, 4.8rem);
  letter-spacing: -0.045em;
  line-height: 0.98;
}

.section-heading > p:last-child {
  max-width: 48ch;
  margin: 0;
  color: var(--ink-muted);
  font-size: 1rem;
}

.problem-grid {
  display: grid;
  width: min(var(--wide), calc(100% - 48px));
  margin: 166px auto 112px;
  padding: 0;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-flow: dense;
  gap: 10px;
  list-style: none;
}

.problem-tile { min-width: 0; }
.problem-tile-01 { grid-column: 1 / span 5; min-height: 560px; }
.problem-tile-02 { grid-column: 6 / span 3; min-height: 560px; }
.problem-tile-03 { grid-column: 9 / span 4; min-height: 560px; }
.problem-tile-04 { grid-column: 1 / span 3; min-height: 480px; }
.problem-tile-05 { grid-column: 4 / span 4; min-height: 480px; }
.problem-tile-06 { grid-column: 8 / span 5; min-height: 480px; }
.problem-tile-07 { grid-column: 1 / span 7; min-height: 420px; }
.problem-tile-08 { grid-column: 8 / span 5; min-height: 420px; }

.problem-tile article {
  position: relative;
  height: 100%;
  min-height: inherit;
  overflow: hidden;
  background: var(--screen);
  cursor: default;
}

.problem-tile article::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  border: 1px solid rgba(240, 231, 213, 0.16);
  content: "";
  pointer-events: none;
}

.problem-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.8) contrast(1.04) brightness(0.9);
  transition: filter 360ms ease, transform 520ms cubic-bezier(0.2, 0.72, 0.25, 1), object-position 520ms ease;
}

.problem-tile-01 img { object-position: 50% 58%; }
.problem-tile-04 img { object-position: 48% center; }
.problem-tile-06 img { object-position: center 35%; }
.problem-tile-07 img { object-position: center 54%; }
.problem-tile-08 img { object-position: center; }

.problem-reveal {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  left: 0;
  min-height: 100%;
  padding: 34px clamp(24px, 3vw, 42px);
  transform: translateY(calc(100% - 170px));
  border-top: 3px solid var(--signal);
  background: rgba(36, 31, 27, 0.94);
  color: var(--paper);
  transition: transform 380ms cubic-bezier(0.2, 0.72, 0.25, 1);
}

.problem-number {
  display: block;
  margin-bottom: 12px;
  color: var(--signal);
}

.problem-reveal h3 {
  margin-bottom: 25px;
  font-size: clamp(1.35rem, 2.2vw, 2rem);
  letter-spacing: -0.025em;
  line-height: 1.04;
}

.problem-reveal p {
  max-width: 38ch;
  margin: 0;
  transform: translateY(12px);
  color: var(--paper-muted);
  font-size: clamp(0.94rem, 1.3vw, 1.08rem);
  line-height: 1.55;
  opacity: 0;
  transition: opacity 180ms linear 80ms, transform 300ms ease 60ms;
}

.problem-tile article:hover .problem-reveal,
.problem-tile article:focus .problem-reveal,
.problem-tile article:focus-within .problem-reveal { transform: translateY(0); }

.problem-tile article:hover .problem-reveal p,
.problem-tile article:focus .problem-reveal p,
.problem-tile article:focus-within .problem-reveal p {
  transform: translateY(0);
  opacity: 1;
}

.problem-tile article:hover img,
.problem-tile article:focus img,
.problem-tile article:focus-within img {
  transform: scale(1.035);
  filter: saturate(0.62) contrast(1.08) brightness(0.56);
}

.problem-tile article:focus-visible { outline-offset: -6px; }

.survey-bridge {
  position: relative;
  display: grid;
  width: min(var(--wide), calc(100% - 48px));
  min-height: clamp(430px, 52vw, 650px);
  margin-inline: auto;
  overflow: hidden;
  color: var(--ink);
  text-decoration: none;
}

.survey-bridge::after {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(240, 231, 213, 0.2);
  content: "";
  pointer-events: none;
}

.survey-bridge > img {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.78) brightness(0.82);
  transition: transform 600ms cubic-bezier(0.2, 0.72, 0.25, 1), filter 300ms ease;
}

.survey-bridge-copy {
  position: relative;
  z-index: 2;
  grid-area: 1 / 1;
  width: min(540px, 52%);
  align-self: end;
  margin: 0 0 42px 42px;
  padding: clamp(26px, 4vw, 50px);
  background: var(--paper);
  transition: background-color 160ms linear;
}

.survey-bridge-copy small { display: block; margin-bottom: 14px; color: var(--oxide); }
.survey-bridge-copy strong { display: block; margin-bottom: 25px; font-size: clamp(2rem, 4vw, 3.8rem); letter-spacing: -0.045em; line-height: 0.98; }
.survey-bridge-copy > span { color: var(--screen); font-family: var(--mono); font-size: 0.8rem; font-weight: 500; text-decoration: underline; text-underline-offset: 5px; }
.survey-bridge:hover > img, .survey-bridge:focus > img { transform: scale(1.025); filter: saturate(0.9) brightness(0.92); }
.survey-bridge:hover .survey-bridge-copy, .survey-bridge:focus .survey-bridge-copy { background: var(--signal); }

.survey-section {
  padding-bottom: 128px;
  background: var(--paper);
  color: var(--ink);
  scroll-margin-top: 20px;
}

.survey-stage {
  position: relative;
  display: grid;
  width: min(1500px, 100%);
  min-height: clamp(470px, 50vw, 660px);
  margin: 0 auto;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  background: var(--screen);
}

.survey-stage-art {
  grid-column: 1 / 13;
  grid-row: 1;
  height: 100%;
  min-height: inherit;
  margin: 0;
  overflow: hidden;
}

.survey-stage-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.78) contrast(1.05) brightness(0.65);
}

.survey-intro {
  position: relative;
  z-index: 2;
  grid-column: 2 / 8;
  grid-row: 1;
  align-self: end;
  margin-bottom: -72px;
  padding: clamp(36px, 5vw, 72px);
  background: var(--screen);
  color: var(--paper);
}

.survey-intro .eyebrow { color: var(--signal); }
.survey-intro h2 { margin-bottom: 22px; }
.survey-intro > p:last-child { max-width: 38ch; margin: 0; color: var(--paper-muted); }

.survey-shell {
  width: min(900px, calc(100% - 48px));
  margin: 0 max(24px, calc((100% - var(--wide)) / 2)) 0 auto;
  padding: 154px clamp(0px, 3vw, 42px) 0 clamp(24px, 5vw, 82px);
  border-left: 1px solid var(--line);
}

.progress-wrap { margin-bottom: 46px; }

.progress-label {
  display: flex;
  justify-content: space-between;
  margin-bottom: 13px;
  color: var(--ink-muted);
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

#progressText { color: var(--oxide); }
.progress-track { height: 2px; background: rgba(107, 103, 93, 0.35); }
.progress-track span { display: block; height: 100%; background: var(--oxide); }

.form-error-summary {
  margin-bottom: 28px;
  padding: 14px 16px;
  border: 1px solid var(--danger);
  border-left-width: 6px;
  background: rgba(184, 86, 53, 0.08);
  color: var(--danger);
  font-size: 0.9rem;
}

.step-panel h3 {
  max-width: 720px;
  margin-bottom: 15px;
  font-size: clamp(2rem, 4vw, 3.2rem);
  letter-spacing: -0.04em;
  line-height: 1.04;
}

.step-kicker { color: var(--oxide); }
.question-hint, .field-note { color: var(--ink-muted); font-size: 0.9rem; }
.question-hint { margin-bottom: 30px; }
fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.choice-grid { display: grid; gap: 8px; }
.choice-grid-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.branch-choices .choice-card { min-height: 112px; }

.choice-card {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 82px;
  cursor: pointer;
}

.choice-card input,
.pill-grid input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}

.choice-card > span {
  display: grid;
  width: 100%;
  align-content: center;
  padding: 15px 44px 15px 17px;
  border: 1px solid rgba(107, 103, 93, 0.48);
  border-left: 5px solid transparent;
  background: transparent;
  transition: border-color 110ms linear, background-color 110ms linear;
}

.choice-card > span::after {
  position: absolute;
  top: 50%;
  right: 17px;
  display: grid;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--paper);
  content: "";
  font-family: var(--mono);
  font-size: 0.66rem;
}

.choice-card input[type="checkbox"] + span::after { border-radius: 0; }
.choice-card strong, .choice-card small { display: block; }
.choice-card strong { margin-bottom: 3px; font-size: 0.94rem; font-weight: 600; }
.choice-card small { color: var(--ink-muted); font-size: 0.78rem; }
.choice-card:hover > span { border-color: var(--screen); }

.choice-card input:focus-visible + span,
.pill-grid input:focus-visible + span {
  outline: 3px solid var(--signal);
  outline-offset: 3px;
}

.choice-card input:checked + span {
  border-color: var(--screen);
  border-left-color: var(--oxide);
  background: rgba(49, 91, 81, 0.08);
}

.choice-card input:checked + span::after {
  border-color: var(--screen);
  background: var(--screen);
  content: "✓";
}

.compact-choices .choice-card { min-height: 64px; }
.compact-choices .choice-card > span,
#primaryProblemOptions .choice-card > span { font-size: 0.88rem; line-height: 1.4; }
#primaryProblemOptions .choice-card { min-height: 60px; }

.question-group {
  margin-top: 34px;
  padding-top: 28px;
  border-top: 1px solid rgba(107, 103, 93, 0.38);
}

.question-group:first-of-type { margin-top: 30px; }

.question-group legend {
  max-width: 700px;
  margin-bottom: 17px;
  color: var(--ink);
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.45;
}

.pill-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.pill-grid label { position: relative; display: flex; cursor: pointer; }

.pill-grid span {
  display: flex;
  width: 100%;
  min-height: 48px;
  align-items: center;
  padding: 9px 12px;
  border: 1px solid rgba(107, 103, 93, 0.45);
  color: var(--ink-muted);
  font-family: var(--mono);
  font-size: 0.74rem;
  transition: border-color 100ms linear, background-color 100ms linear;
}

.pill-grid label:hover span { border-color: var(--screen); color: var(--ink); }

.pill-grid input:checked + span {
  border-color: var(--screen);
  border-bottom: 5px solid var(--oxide);
  background: rgba(49, 91, 81, 0.08);
  color: var(--ink);
}

.field-error { margin: 10px 0 0; color: var(--danger); font-size: 0.83rem; font-weight: 600; }
[data-invalid="true"] { padding: 12px; border-left: 5px solid var(--danger); background: rgba(184, 86, 53, 0.08); }
.text-field { margin-top: 30px; }
.text-field + .text-field { padding-top: 30px; border-top: 1px solid rgba(107, 103, 93, 0.38); }
.conditional-field {
  margin-top: 24px;
  padding: 24px 0 0 20px;
  border-top: 1px solid rgba(107, 103, 93, 0.38);
  border-left: 5px solid var(--oxide);
}

.text-field > label,
.label-row label {
  display: block;
  color: var(--ink);
  font-weight: 600;
  line-height: 1.45;
}

.label-row {
  display: flex;
  gap: 18px;
  align-items: start;
  justify-content: space-between;
  margin-bottom: 10px;
}

.label-row > span {
  flex: 0 0 auto;
  color: var(--ink-muted);
  font-family: var(--mono);
  font-size: 0.7rem;
}

textarea,
input[type="email"],
input[type="text"] {
  width: 100%;
  border: 1px solid var(--line);
  background: #f8f0df;
  color: var(--ink);
  caret-color: var(--oxide);
}

textarea { min-height: 150px; resize: vertical; padding: 14px 15px; line-height: 1.55; }
input[type="email"], input[type="text"] { min-height: 52px; padding: 11px 14px; }
.conditional-field textarea { min-height: 104px; }
textarea:hover, input[type="email"]:hover, input[type="text"]:hover,
textarea:focus, input[type="email"]:focus, input[type="text"]:focus { border-color: var(--screen); }
.required-field > label::after { margin-left: 5px; color: var(--oxide); content: "*"; }
.field-note { margin: 5px 0 10px; }

.consent-group {
  display: grid;
  gap: 14px;
  margin-top: 32px;
  padding-top: 30px;
  border-top: 1px solid rgba(107, 103, 93, 0.38);
}

.consent-row { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; cursor: pointer; }
.consent-row input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--screen); }
.consent-row span { color: var(--ink-muted); font-size: 0.88rem; line-height: 1.5; }
.consent-row strong { color: var(--oxide); font-family: var(--mono); font-size: 0.7rem; text-transform: uppercase; }
.consent-row small { display: block; margin-top: 3px; color: var(--ink-muted); font-size: 0.78rem; }

.form-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 42px;
  padding-top: 25px;
  border-top: 1px solid rgba(107, 103, 93, 0.38);
}

.form-actions .button { min-width: 118px; }
.survey-shell .button-secondary { color: var(--ink); }

.honeypot {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.confirmation { padding: 22px 0 8px; }

.confirmation-mark {
  display: grid;
  width: 50px;
  height: 50px;
  margin-bottom: 28px;
  place-items: center;
  border: 1px solid var(--screen);
  color: var(--screen);
  font-family: var(--mono);
  font-size: 1.3rem;
  font-weight: 500;
}

.confirmation h3 { font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.05; }
.confirmation > p:not(.eyebrow) { max-width: 650px; color: var(--ink-muted); }
.confirmation .button { margin-top: 18px; }

.privacy-note {
  display: grid;
  width: min(var(--wide), calc(100% - 48px));
  margin: 0 auto;
  padding: 132px 0;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
  align-items: stretch;
}

.privacy-note figure { min-height: 480px; margin: 0; overflow: hidden; background: var(--screen); }
.privacy-note figure img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.7) contrast(1.06) brightness(0.72); }

.privacy-copy {
  display: flex;
  padding: clamp(38px, 5vw, 76px);
  flex-direction: column;
  justify-content: center;
  background: var(--screen);
}

.privacy-copy .eyebrow { color: var(--signal); }
.privacy-copy h2 { font-size: clamp(2.5rem, 4.5vw, 4.2rem); }
.privacy-copy > p:not(.eyebrow) { margin-bottom: 24px; color: var(--paper-muted); }
.privacy-copy > a { width: fit-content; color: var(--phosphor); font-family: var(--mono); font-size: 0.78rem; font-weight: 500; text-underline-offset: 5px; }

footer {
  display: flex;
  width: min(var(--wide), calc(100% - 48px));
  min-height: 116px;
  margin-inline: auto;
  gap: 28px;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(240, 231, 213, 0.3);
  color: var(--paper-muted);
  font-family: var(--mono);
  font-size: 0.7rem;
}

footer p { margin: 0; }
footer nav { display: flex; flex-wrap: wrap; gap: 20px; }
footer a { text-underline-offset: 4px; }

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@media (max-width: 1080px) {
  .hero { min-height: 700px; }
  .hero-copy { grid-column: 1 / 9; }
  .problem-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .problem-tile,
  .problem-tile-01,
  .problem-tile-02,
  .problem-tile-03,
  .problem-tile-04,
  .problem-tile-05,
  .problem-tile-06,
  .problem-tile-07,
  .problem-tile-08 { grid-column: auto; min-height: 490px; }
  .survey-shell { width: min(820px, calc(100% - 48px)); }
}

@media (max-width: 760px) {
  .site-header { width: min(100% - 28px, var(--wide)); min-height: 68px; }
  .header-label { max-width: 18ch; font-size: 0.6rem; text-align: right; }

  .hero {
    width: min(100% - 28px, 1500px);
    min-height: 0;
    padding: 54px 0 86px;
    grid-template-columns: 1fr;
  }

  .hero-art { grid-column: 1; grid-row: 1; height: clamp(310px, 92vw, 440px); }
  .hero-art img { object-position: 63% center; }

  .hero-copy {
    grid-column: 1;
    grid-row: 2;
    margin: -54px 14px 0 0;
    padding: 32px 20px 36px 0;
  }

  h1 { font-size: clamp(3.2rem, 17vw, 4.8rem); }
  .hero-actions { align-items: flex-start; flex-direction: column; }
  .hero-figure-label { display: none; }

  .problem-section { padding-top: 46px; }
  .problem-lead { width: min(100% - 28px, 1500px); grid-template-columns: 1fr; }
  .problem-lead-art { grid-column: 1; grid-row: 1; height: clamp(300px, 80vw, 430px); }

  .section-heading {
    grid-column: 1;
    grid-row: 2;
    margin: -42px 0 0 14px;
    padding: 32px 24px 36px;
  }

  .section-heading h2, .survey-intro h2, .privacy-copy h2 { font-size: clamp(2.35rem, 11vw, 3.5rem); }

  .problem-grid {
    width: min(100% - 28px, var(--wide));
    margin: 76px auto;
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .problem-tile,
  .problem-tile-01,
  .problem-tile-02,
  .problem-tile-03,
  .problem-tile-04,
  .problem-tile-05,
  .problem-tile-06,
  .problem-tile-07,
  .problem-tile-08 { min-height: min(132vw, 560px); }

  .problem-tile-08 { min-height: min(105vw, 470px); }
  .problem-reveal { transform: translateY(calc(100% - 170px)); padding: 28px 24px; }

  .survey-bridge {
    width: 100%;
    min-height: 560px;
  }

  .survey-bridge > img { object-position: 58% center; }

  .survey-bridge-copy {
    width: calc(100% - 28px);
    margin: 0 14px 14px;
    padding: 28px 24px 31px;
  }

  .survey-stage { min-height: 600px; grid-template-columns: 1fr; }
  .survey-stage-art { grid-column: 1; grid-row: 1; }
  .survey-stage-art img { object-position: 42% center; }

  .survey-intro {
    grid-column: 1;
    grid-row: 1;
    align-self: end;
    margin: 0 14px -64px;
    padding: 32px 24px 36px;
  }

  .survey-shell {
    width: min(100% - 28px, 900px);
    margin: 0 auto;
    padding: 132px 0 0;
    border-left: 0;
  }

  .choice-grid-two { grid-template-columns: 1fr; }
  .pill-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .label-row { flex-direction: column; gap: 5px; }
  .form-actions { display: grid; grid-template-columns: 1fr; }
  .form-actions .button { width: 100%; }
  #backButton { grid-row: 2; }

  .privacy-note {
    width: 100%;
    padding: 80px 14px;
    grid-template-columns: 1fr;
  }

  .privacy-note figure { min-height: 350px; }
  .privacy-copy { margin: -32px 14px 0; padding: 34px 24px 39px; }

  footer {
    width: min(100% - 28px, var(--wide));
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    padding: 30px 0;
  }
}

@media (hover: none) {
  .problem-reveal {
    min-height: 48%;
    transform: none;
    background: rgba(36, 31, 27, 0.95);
  }

  .problem-tile img { filter: saturate(0.74) contrast(1.04) brightness(0.78); }
  .problem-reveal p { transform: none; opacity: 1; }
}

/* Touch devices never hover, so the description above is already sitting open over
   the artwork — covering the bottom half of the tile, which is exactly where this
   set is composed. Below 1080px, where the grid is one or two columns, take the
   description out of the overlay and let it sit under the image inside the same
   tile height. Nothing is hidden, the tiles do not grow, and the image finally
   gets a landscape band over a portrait source — so object-position has something
   to crop and can be aimed at each subject instead of the empty headroom above it.

   The explicit height is load-bearing: min-height alone is not a definite height,
   so the flex image would keep its intrinsic size and push the tile taller. Each
   value matches the min-height already in force at that breakpoint. */
@media (hover: none) and (max-width: 1080px) {
  .problem-tile,
  .problem-tile-01,
  .problem-tile-02,
  .problem-tile-03,
  .problem-tile-04,
  .problem-tile-05,
  .problem-tile-06,
  .problem-tile-07,
  .problem-tile-08 { height: 490px; }

  .problem-tile article {
    display: flex;
    height: 100%;
    flex-direction: column;
  }

  .problem-tile img {
    height: auto;
    min-height: 0;
    flex: 1 1 0;
  }

  .problem-reveal {
    position: static;
    min-height: 0;
    flex: 0 0 auto;
  }

  .problem-tile-01 img { object-position: 50% 90%; }
  .problem-tile-02 img { object-position: 50% 68%; }
  .problem-tile-03 img { object-position: 50% 60%; }
  .problem-tile-04 img { object-position: 50% 88%; }
  .problem-tile-05 img { object-position: 50% 85%; }
  .problem-tile-06 img { object-position: 50% 82%; }
  .problem-tile-07 img { object-position: 50% 85%; }
  .problem-tile-08 img { object-position: 50% 50%; }
}

/* Single column: one height for all eight, including 08, whose shorter box would
   otherwise leave too thin a band for its landscape artwork. */
@media (hover: none) and (max-width: 760px) {
  .problem-tile,
  .problem-tile-01,
  .problem-tile-02,
  .problem-tile-03,
  .problem-tile-04,
  .problem-tile-05,
  .problem-tile-06,
  .problem-tile-07,
  .problem-tile-08 { height: min(132vw, 560px); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; }
}

@media print {
  :root { color-scheme: light; }
  body { background: #fff; color: #111; }
  .site-header, .hero-actions, .problem-grid, .survey-bridge, .survey-section, footer { display: none !important; }
  .hero, .problem-lead, .privacy-note { width: 100%; min-height: 0; padding: 24px 0; }
  .hero-art, .problem-lead-art, .privacy-note figure { opacity: 0.28; }
}