:root {
  --research-ink: #111316;
  --research-blue: #006ff7;
  --research-blue-dark: #005dce;
  --research-blue-pale: #eaf3ff;
  --research-paper: #f8f8f8;
  --research-muted: #5f666b;
  --research-yellow: #ffd800;
}

.page--research {
  display: block;
  padding-top: var(--nav-height);
  overflow: hidden;
  background: var(--research-paper);
  color: var(--research-ink);
}

.research-main { overflow: hidden; }

.research-hero {
  position: relative;
  min-height: 610px;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, .55fr);
  align-items: end;
  gap: 7vw;
  padding: clamp(90px, 11vw, 160px) clamp(28px, 7vw, 128px) clamp(80px, 9vw, 130px);
  background: #111316;
  color: #fff;
  isolation: isolate;
}

.research-hero__header-content {
  position: absolute;
  z-index: 4;
  top: clamp(28px, 5vw, 72px);
  left: 0;
  right: 0;
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 clamp(24px, 5vw, 72px);
}

.research-hero__page-title {
  color: #fff;
}

.research-hero__nav-spacer {
  flex: 1;
  min-width: 0;
  height: 24px;
}

.research-hero::after {
  content: "WHY";
  position: absolute;
  z-index: 0;
  top: calc(-6vw + 260px);
  right: -3vw;
  color: rgba(184, 228, 255, .08);
  font-size: clamp(220px, 35vw, 620px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.1em;
  transform: translate3d(0, var(--research-shift, 0), 0);
  will-change: transform;
  pointer-events: none;
}

.research-hero__whys {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.research-why {
  position: absolute;
  color: #b8e4ff;
  font-family: "Google Sans Code", ui-monospace, monospace;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.06em;
  opacity: .16;
  transform: translate3d(0, var(--research-shift, 0), 0);
  will-change: transform;
}

.research-why--one { top: 13%; left: 5%; font-size: clamp(18px, 2vw, 34px); opacity: .23; }
.research-why--two { top: 7%; left: 46%; font-size: clamp(42px, 7vw, 110px); opacity: .07; }
.research-why--three { right: 8%; bottom: 9%; font-size: clamp(30px, 5vw, 82px); opacity: .12; }
.research-why--four { right: 34%; bottom: 16%; font-size: clamp(15px, 1.6vw, 27px); opacity: .26; }
.research-why--five { top: 36%; right: 3%; font-size: clamp(20px, 3vw, 48px); opacity: .1; transform: translate3d(0, var(--research-shift, 0), 0) rotate(90deg); }
.research-why--six { top: 24%; left: 24%; font-size: clamp(14px, 1.5vw, 25px); opacity: .2; }
.research-why--seven { top: 52%; left: 8%; font-size: clamp(34px, 5.5vw, 88px); opacity: .075; }
.research-why--eight { top: 68%; right: 26%; font-size: clamp(18px, 2.4vw, 38px); opacity: .17; }
.research-why--nine { top: 82%; left: 42%; font-size: clamp(13px, 1.3vw, 22px); opacity: .25; }
.research-why--ten { top: 18%; right: 18%; font-size: clamp(24px, 4vw, 64px); opacity: .09; }
.research-hero > div:not(.research-hero__whys):not(.research-hero__header-content),
.research-hero > p { position: relative; z-index: 2; }

.research-kicker {
  margin: 0 0 22px;
  color: #b8e4ff;
  font-family: "Google Sans Code", ui-monospace, monospace;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.research-hero h2 {
  max-width: 940px;
  margin: 0;
  font-size: clamp(58px, 7.5vw, 122px);
  font-weight: 800;
  line-height: .9;
  letter-spacing: -.06em;
}

.research-hero h2 em {
  color: #b8e4ff;
  font-style: normal;
}

.research-hero__intro {
  max-width: 470px;
  margin: 0 0 8px;
  color: #d4d9dd;
  font-size: clamp(17px, 1.4vw, 21px);
  line-height: 1.6;
}

.research-position {
  display: grid;
  grid-template-columns: minmax(120px, .45fr) minmax(0, 1.65fr);
  gap: 5vw;
  padding: clamp(85px, 10vw, 150px) clamp(28px, 7vw, 128px);
  background: #fff;
}

.research-label {
  margin: 8px 0 0;
  color: #70747a;
  font-family: "Google Sans Code", ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.research-position__copy { max-width: 980px; }

.research-position h2,
.research-stage h2,
.research-close h2 {
  margin: 0;
  font-size: clamp(45px, 5.9vw, 92px);
  font-weight: 800;
  line-height: .97;
  letter-spacing: -.045em;
}

.research-position h2 em,
.research-close h2 em {
  color: var(--research-blue-dark);
  font-style: normal;
}

.research-position__lead {
  max-width: 780px;
  margin: 34px 0 0;
  color: #35393d;
  font-size: clamp(18px, 1.55vw, 23px);
  line-height: 1.6;
}

.research-questions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  max-width: 900px;
  margin-top: 36px;
}

.research-question {
  padding: 24px;
  border-radius: 12px;
  background: var(--research-blue-pale);
}

.research-question strong {
  display: block;
  margin-bottom: 8px;
  color: var(--research-blue-dark);
  font-size: 15px;
}

.research-question p {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
}

.research-stages { background: var(--research-paper); }

.research-stage {
  position: relative;
  display: grid;
  grid-template-columns: 90px minmax(260px, .72fr) minmax(0, 1.28fr);
  gap: clamp(24px, 4vw, 70px);
  padding: clamp(70px, 8vw, 115px) clamp(28px, 7vw, 128px);
  border-top: 1px solid #dfe1e3;
  overflow: hidden;
  isolation: isolate;
}

.research-stage:nth-child(even) { background: #fff; }

.research-stage__number-bg {
  position: absolute;
  z-index: 0;
  color: var(--research-blue);
  font-size: clamp(380px, 56vw, 960px);
  font-weight: 800;
  line-height: .72;
  letter-spacing: -.1em;
  opacity: .045;
  transform: translate3d(0, var(--research-shift, 0), 0);
  will-change: transform;
  pointer-events: none;
  user-select: none;
}

.research-stage__number-bg--one { right: 8%; bottom: -18%; opacity: .065; }
.research-stage__number-bg--two { left: 20%; top: 34%; }
.research-stage__number-bg--three { right: 26%; bottom: -12%; opacity: .065; }
.research-stage__number-bg--four { left: 32%; top: 38%; }

.research-stage:nth-child(1) .research-stage__number,
.research-stage:nth-child(1) .research-stage__number-bg { color: #ff385c; }
.research-stage:nth-child(2) .research-stage__number,
.research-stage:nth-child(2) .research-stage__number-bg { color: #005890; }
.research-stage:nth-child(3) .research-stage__number,
.research-stage:nth-child(3) .research-stage__number-bg { color: #d4a800; }
.research-stage:nth-child(4) .research-stage__number,
.research-stage:nth-child(4) .research-stage__number-bg { color: #301070; }

.research-stage > :not(.research-stage__number-bg) {
  position: relative;
  z-index: 1;
}

.research-stage__number {
  margin: 8px 0 0;
  color: var(--research-blue);
  font-family: "Google Sans Code", ui-monospace, monospace;
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
}

.research-stage h2 {
  font-size: clamp(38px, 4.5vw, 70px);
}

.research-stage__content {
  max-width: 750px;
  color: #35393d;
}

.research-stage__content > p {
  margin: 0 0 24px;
  font-size: clamp(16px, 1.25vw, 19px);
  line-height: 1.65;
}

.research-stage__content h3 {
  margin: 32px 0 12px;
  color: var(--research-blue-dark);
  font-size: 18px;
}

.research-stage__content ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.research-stage__content li {
  position: relative;
  padding-left: 22px;
  line-height: 1.55;
}

.research-stage__content li::before {
  content: "";
  position: absolute;
  top: .62em;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--research-yellow);
}

.research-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 26px;
}

.research-tools span {
  padding: 12px 17px;
  border: 1px solid #ccd0d4;
  border-radius: 999px;
  background: #fff;
  color: #35393d;
  font-family: "Google Sans Code", ui-monospace, monospace;
  font-size: 13.2px;
  font-weight: 500;
  line-height: 1.25;
}

.research-tools span:nth-child(8n + 1) { color: #ff385c; }
.research-tools span:nth-child(8n + 2) { color: #005890; }
.research-tools span:nth-child(8n + 3) { color: #b38e00; }
.research-tools span:nth-child(8n + 4) { color: #301070; }
.research-tools span:nth-child(8n + 5) { color: #d85d20; }
.research-tools span:nth-child(8n + 6) { color: #a44264; }
.research-tools span:nth-child(8n + 7) { color: #006ff7; }
.research-tools span:nth-child(8n + 8) { color: #345d9d; }

.research-close {
  display: grid;
  grid-template-columns: minmax(120px, .45fr) minmax(0, 1.65fr);
  gap: 5vw;
  padding: clamp(85px, 10vw, 150px) clamp(28px, 7vw, 128px);
  background: #dce8ff;
}

.research-close > div { max-width: 980px; }

.research-close p {
  max-width: 720px;
  margin: 32px 0 0;
  font-size: 18px;
  line-height: 1.65;
}

.research-button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 42px;
  min-height: 58px;
  margin-top: 34px;
  padding: 0 22px;
  border-radius: 4px;
  background: #3d69cc;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
}

.research-footer {
  display: flex;
  align-items: center;
  gap: 25px;
  min-height: 110px;
  padding: 25px clamp(28px, 7vw, 128px);
  background: #111316;
  color: #fff;
  font-size: 12px;
}

.research-footer img { filter: invert(1); }
.research-footer a { margin-left: auto; color: inherit; text-decoration: none; }

@media (max-width: 900px) {
  .research-hero { grid-template-columns: 1fr; align-items: end; }
  .research-hero__intro { max-width: 650px; }
  .research-stage { grid-template-columns: 60px 1fr; }
  .research-stage__content { grid-column: 2; }
}

@media (max-width: 700px) {
  .research-hero__header-content { top: 24px; padding: 0 18px; }
  .research-hero { min-height: 650px; padding: 80px 24px; }
  .research-position, .research-close { grid-template-columns: 1fr; gap: 32px; padding: 80px 24px; }
  .research-questions { grid-template-columns: 1fr; }
  .research-stage { grid-template-columns: 38px 1fr; gap: 14px; padding: 64px 24px; }
  .research-stage__content { grid-column: 1 / -1; padding-left: 52px; }
  .research-footer { align-items: flex-start; flex-wrap: wrap; }
  .research-footer a { width: 100%; margin-left: 0; }
  .research-tools span { padding: 10px 13px; font-size: 12px; }
}

@media (max-width: 430px) {
  .research-hero { isolation: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .research-why { transform: none !important; }
}

/* Give hero copy breathing room below the shared title and navigation rows. */
.research-hero {
  padding-top: max(170px, clamp(90px, 11vw, 160px));
}
@media (max-width: 430px) {
  /* Navigation is fixed at the viewport bottom at this width. */
  .research-hero { padding-top: 105px; }
}

@media (min-width: 431px) {
  .page--research .research-project-nav [data-project-prev] {
    color: #fff;
  }
  .page--research .research-project-nav [data-project-prev] img {
    filter: brightness(0) invert(1);
  }
}

.research-hero .research-kicker {
  color: var(--site-yellow);
}

.research-hero h2 em.research-title__accent--pink { color: #ff385c; }
.research-hero h2 em.research-title__accent--lavender { color: #a875ff; }