@import url("design-tokens.css");
@import url("design-primitives.css");
@import url("design-system-interactions.css");

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ds-ink);
  background: var(--ds-paper);
  font: 16px/1.5 var(--ds-font-body);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
::selection { color: var(--ds-ink); background: #b9ded5; }

.skip-link {
  position: fixed;
  z-index: 40;
  top: 10px;
  left: 18px;
  padding: 9px 13px;
  background: var(--ds-paper);
  border-radius: var(--ds-radius-sm);
  transform: translateY(-160%);
}
.skip-link:focus { transform: translateY(0); }

.research-nav-label {
  margin: 0 0 0 14px;
  padding-left: 22px;
  color: var(--ds-muted);
  border-left: 1px solid var(--ds-line);
  font: 600 11px var(--ds-font-body);
  letter-spacing: 0;
}

.research-hero {
  padding: 154px 0 96px;
  background: linear-gradient(135deg, #e4f1ed, var(--ds-peach) 65%, var(--ds-paper));
}

.research-hero-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(340px, .94fr);
  align-items: center;
  gap: clamp(44px, 7vw, 94px);
}

.research-hero-copy h1,
.section-intro h2,
.research-section-heading h2,
.research-participation-card h2,
.research-access-card h2,
.research-boundary-card h2 {
  margin: 0;
  font: 700 clamp(40px, 4.7vw, 68px)/1 var(--ds-font-display);
  letter-spacing: -.07em;
}

.research-hero-copy h1 em,
.section-intro h2 em,
.research-section-heading h2 em,
.research-participation-card h2 em,
.research-access-card h2 em,
.research-boundary-card h2 em {
  color: var(--ds-primary);
  font-style: normal;
}

.research-hero-copy > p:not(.ds-eyebrow) {
  max-width: 580px;
  margin: 24px 0 0;
  color: #5d7274;
  font-size: 17px;
  line-height: 1.65;
}

.research-hero-notes {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 21px;
  color: #567072;
  font-size: 12px;
}

.research-hero-notes span { display: flex; gap: 5px; align-items: baseline; }
.research-hero-notes b {
  color: var(--ds-ink);
  font: 700 21px var(--ds-font-display);
  letter-spacing: -.05em;
}

.research-hero-photo {
  min-height: 370px;
  margin: 0;
  position: relative;
  overflow: hidden;
  border-radius: var(--ds-radius-xl);
  box-shadow: var(--ds-shadow-lg);
}

.research-hero-photo img {
  width: 100%;
  height: 100%;
  min-height: 370px;
  display: block;
  object-fit: cover;
  object-position: 61% center;
}

.research-hero-photo figcaption {
  position: absolute;
  right: var(--ds-space-4);
  bottom: var(--ds-space-4);
  width: min(260px, calc(100% - 32px));
  padding: var(--ds-space-4);
  display: grid;
  gap: 6px;
  background: rgba(255,253,248,.91);
  border: 1px solid rgba(23,52,58,.11);
  border-radius: var(--ds-radius-md);
  box-shadow: var(--ds-shadow-md);
}

.research-hero-photo figcaption strong {
  font: 700 16px var(--ds-font-display);
  letter-spacing: -.04em;
}

.research-hero-photo figcaption small { color: var(--ds-muted); font-size: 10px; }

.ds-section { padding: 112px 0; }
.section-intro {
  display: grid;
  grid-template-columns: 1fr .72fr;
  gap: 70px;
  align-items: end;
  margin-bottom: 45px;
}
.section-intro .ds-eyebrow,
.section-intro h2 { grid-column: 1; }
.section-intro > p:last-child {
  grid-column: 2;
  grid-row: 1 / span 2;
  max-width: 430px;
  margin: 0 0 7px;
  color: var(--ds-muted);
  font-size: 14px;
  line-height: 1.6;
}

.research-principles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ds-space-4);
}
.research-principles .ds-card,
.research-role-grid .ds-card {
  min-height: 216px;
  padding: var(--ds-space-5);
  display: grid;
  align-content: start;
}
.research-principles span,
.research-role-grid span {
  color: var(--ds-primary);
  font: 700 11px var(--ds-font-display);
}
.research-principles h3,
.research-role-grid h3 {
  margin: 28px 0 0;
  font: 700 18px var(--ds-font-display);
  letter-spacing: -.035em;
}
.research-principles p,
.research-role-grid p {
  margin: 9px 0 0;
  color: var(--ds-muted);
  font-size: 12px;
  line-height: 1.55;
}

.research-section-wrap { padding-top: 0; }
.research-scope-card,
.research-participation-card,
.research-access-card,
.research-boundary-card {
  padding: clamp(32px, 6vw, 72px);
}

.research-scope-card {
  color: var(--ds-paper);
  background: var(--ds-ink);
}
.research-scope-card .ds-eyebrow,
.research-boundary-card .ds-eyebrow { color: #9ddbd1; }
.research-section-heading {
  display: grid;
  grid-template-columns: 1fr .72fr;
  gap: 70px;
  align-items: end;
}
.research-section-heading .ds-eyebrow,
.research-section-heading h2 { grid-column: 1; }
.research-section-heading > p:last-child {
  grid-column: 2;
  grid-row: 1 / span 2;
}
.research-section-heading h2,
.research-boundary-card h2 { color: var(--ds-paper); }
.research-section-heading h2 em,
.research-boundary-card h2 em { color: #9ddbd1; }
.research-section-heading > p:last-child {
  max-width: 420px;
  margin: 0 0 7px;
  color: #bcd4d1;
  font-size: 14px;
  line-height: 1.6;
}

.research-scope-list {
  margin-top: 56px;
  padding-top: 36px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgba(255,255,255,.16);
}
.research-scope-list > div {
  min-height: 104px;
  padding: 3px 28px;
  display: grid;
  align-content: center;
  gap: 5px;
  border-left: 1px solid rgba(255,255,255,.16);
}
.research-scope-list > div:first-child { padding-left: 0; border-left: 0; }
.research-scope-list span { color: #9ddbd1; font: 700 10px var(--ds-font-display); letter-spacing: .1em; }
.research-scope-list strong { color: var(--ds-paper); font: 700 22px var(--ds-font-display); letter-spacing: -.04em; }
.research-scope-list small { color: #a4c0bd; font-size: 11px; }

.research-role-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--ds-space-4);
}
.research-role-grid .ds-card { min-height: 180px; }

.research-participation-card { background: var(--ds-peach); }
.research-participation-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
.research-participation-card > div h2 { font-size: clamp(35px, 4vw, 55px); }
.research-participation-card > div > div > p:not(.ds-eyebrow):not(.research-status) {
  max-width: 620px;
  margin: 16px 0 0;
  color: #526c6e;
  font-size: 14px;
  line-height: 1.65;
}
.research-status {
  margin: 16px 0 0;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #607777;
  font-size: 11px;
  font-weight: 700;
}
.research-status > i {
  width: 7px;
  height: 7px;
  background: var(--ds-coral);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(227,138,109,.15);
}
.research-action-row {
  margin-top: 21px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 17px;
}
.ds-button[aria-disabled="true"] {
  color: #758987;
  background: #d2e0dc;
  border-color: #d2e0dc;
  cursor: not-allowed;
  box-shadow: none;
}
.research-privacy-link {
  color: #175d59;
  border-bottom: 1px solid rgba(23,93,89,.3);
  font-size: 12px;
  font-weight: 700;
}

.research-access-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--ds-space-5);
  align-items: end;
  color: var(--ds-paper);
  background: var(--ds-ink);
}
.research-access-card .ds-eyebrow { color: #9ddbd1; }
.research-access-card h2 { color: var(--ds-paper); font-size: clamp(31px, 3.5vw, 48px); }
.research-access-card h2 em { color: #9ddbd1; }
.research-access-card p:not(.ds-eyebrow) {
  max-width: 620px;
  margin: 15px 0 0;
  color: #bcd4d1;
  font-size: 13px;
  line-height: 1.6;
}
.research-access-card .ds-button { white-space: nowrap; }
.research-access-card .ds-button[aria-disabled="true"] { background: #d2e0dc; }

.research-boundary-card {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 105px;
  color: var(--ds-paper);
  background: #10272b;
}
.research-boundary-card ul {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(255,255,255,.16);
}
.research-boundary-card li {
  padding: 17px 0 17px 28px;
  position: relative;
  color: #b8cfcd;
  border-bottom: 1px solid rgba(255,255,255,.16);
  font-size: 14px;
  line-height: 1.55;
}
.research-boundary-card li::before {
  content: "";
  position: absolute;
  top: 27px;
  left: 0;
  width: 8px;
  height: 8px;
  background: var(--ds-coral);
  border-radius: 50%;
}

.research-footer {
  padding: 34px 0;
  color: #b9cfcd;
  background: #10272b;
}
.research-footer > div {
  display: flex;
  align-items: center;
  gap: 13px;
}
.research-footer .ds-brand { color: var(--ds-paper); }
.research-footer .ds-brand .ds-mark { background: var(--ds-primary); }
.research-footer p,
.research-footer > div > span {
  margin: 0;
  color: #90aaa8;
  font-size: 11px;
}
.research-footer > div > a:last-child {
  margin-left: auto;
  color: #9ed7d0;
  font-size: 11px;
  font-weight: 700;
}

.privacy-page { min-height: 100vh; background: var(--ds-sand); }
.privacy-main {
  width: min(calc(100% - var(--ds-gutter)*2), 800px);
  margin: 0 auto;
  padding: 42px 0 82px;
}
.privacy-notice {
  margin-top: 38px;
  padding: clamp(28px,5vw,52px);
  background: var(--ds-paper);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-md);
}
.privacy-notice h1 {
  max-width: 670px;
  margin: 0;
  color: var(--ds-ink);
  font: 700 clamp(31px,5vw,52px)/1.12 var(--ds-font-display);
  letter-spacing: -.055em;
}
.privacy-notice > p:not(.ds-eyebrow) {
  max-width: 650px;
  margin: 20px 0 28px;
  color: var(--ds-muted);
  font-size: 15px;
  line-height: 1.65;
}
.privacy-list { margin: 30px 0; border-top: 1px solid var(--ds-line); }
.privacy-list > div {
  padding: 16px 0;
  display: grid;
  grid-template-columns: minmax(175px,.65fr) 1.35fr;
  gap: 22px;
  border-bottom: 1px solid var(--ds-line);
}
.privacy-list dt { color: var(--ds-ink); font-size: 12px; font-weight: 700; }
.privacy-list dd { margin: 0; color: var(--ds-muted); font-size: 12px; line-height: 1.55; }
.privacy-list a { color: var(--ds-primary); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 850px) {
  .research-hero { padding-top: 126px; }
  .research-hero-layout,
  .section-intro,
  .research-section-heading,
  .research-boundary-card { grid-template-columns: 1fr; }
  .section-intro { gap: 16px; }
  .section-intro > p:last-child,
  .research-section-heading > p:last-child { grid-column: 1; grid-row: auto; }
  .research-scope-list { grid-template-columns: 1fr; }
  .research-scope-list > div,
  .research-scope-list > div:first-child {
    min-height: 0;
    padding: 22px 0;
    border-top: 1px solid rgba(255,255,255,.16);
    border-left: 0;
  }
  .research-scope-list > div:first-child { border-top: 0; }
  .research-boundary-card { gap: 34px; }
  .research-access-card { grid-template-columns: 1fr; align-items: start; }
  .research-access-card .ds-button { justify-self: start; }
}

@media (max-width: 620px) {
  .research-nav-label { display: none; }
  .research-hero { padding: 116px 0 72px; }
  .research-hero-copy h1,
  .section-intro h2 { font-size: 40px; }
  .research-hero-layout { gap: 36px; }
  .research-hero-photo,
  .research-hero-photo img { min-height: 310px; }
  .ds-section { padding: 72px 0; }
  .research-principles,
  .research-role-grid { grid-template-columns: 1fr; }
  .research-principles .ds-card,
  .research-role-grid .ds-card { min-height: 0; }
  .research-section-wrap { padding-top: 0; }
  .research-scope-card,
  .research-participation-card,
  .research-access-card,
  .research-boundary-card { padding: var(--ds-space-5); }
  .research-action-row { align-items: flex-start; flex-direction: column; gap: 13px; }
  .research-access-card { grid-template-columns: 1fr; }
  .research-access-card .ds-button { grid-column: auto; }
  .research-footer > div { align-items: flex-start; flex-wrap: wrap; }
  .research-footer > div > a:last-child { margin-left: 0; }
  .privacy-main { padding-top: 26px; }
  .privacy-list > div { grid-template-columns: 1fr; gap: 5px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}