/* The top of the Research page (6 October 2026). The page's title is "From neuroscience to
   high-performing AI systems.", with the research statement as its subtitle, beside the neuron chain;
   under them the two lines of research sit side by side, then the article tiles. All of it was the
   homepage's "Our research" section until that day. The title is set at the homepage hero's size
   (hero-video.20261005.css), which keeps its two lines clear of the chain, and the subtitle takes the
   shared subtext style (section-type.20261006.css). */
.research-index .blog-hero > .container {
  display: block;
}

.research-index .blog-hero h1 {
  font-size: clamp(40px, 3.7vw, 62px);
  line-height: 1.08;
  letter-spacing: -.06em;
}

.research-index .blog-hero .research-statement {
  max-width: 34em;
  margin: 28px 0 0;
}

/* Two lines of copy need less room under them for the chain than the one-line title did. */
@media (min-width: 1101px) {
  html body[data-field-surface="index"].research-index .hero.blog-hero { padding-bottom: 120px; }
}

/* The two lines of research, on the tiles' grid. */
.article-index .research-approach > .container {
  width: min(1440px, calc(100% - 112px));
  max-width: none;
  margin-inline: auto;
  padding: 0;
}

.research-approach {
  padding: 0 0 96px;
  font-family: var(--design-sans);
}

.research-approach-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--rule);
}

.research-approach-grid > article {
  padding: 32px 40px 0 0;
}

.research-approach-grid > article + article {
  padding: 32px 0 0 40px;
  border-left: 1px solid var(--rule);
}

.research-index .research-approach h2 {
  margin: 0 0 12px;
  color: var(--ink);
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -.7px;
}

.research-approach-grid p {
  max-width: 470px;
  margin: 0;
  color: var(--muted-text);
  font-family: var(--design-sans);
  font-size: 17px;
  line-height: 1.65;
}

@media (max-width: 1100px) {
  .research-index .blog-hero h1 { font-size: clamp(36px, 5.2vw, 56px); }
  .article-index .research-approach > .container { width: calc(100% - 64px); }
  .research-approach { padding: 8px 0 80px; }
}

@media (max-width: 760px) {
  .research-index .blog-hero h1 { font-size: clamp(32px, 8.7vw, 56px); }
  .research-index .blog-hero .research-statement { margin-top: 22px; }
  .article-index .research-approach > .container { width: calc(100% - 40px); }
  .research-approach { padding: 4px 0 64px; }
  .research-approach-grid { grid-template-columns: minmax(0, 1fr); }
  .research-approach-grid > article,
  .research-approach-grid > article + article { padding: 26px 0 0; border-left: 0; }
  .research-approach-grid > article + article { margin-top: 28px; border-top: 1px solid var(--rule); }
  .research-index .research-approach h2 { font-size: 22px; }
}