/* Reference measurements: BIG VIEW / Darkroom, September 2026.
   Keep the adapted hero; constrain the content below it. */
:root {
  --content-width: 927px;
  --editorial-width: 968px;
  --visual-width: 1220px;
}

/* A sibling of the header can blend with the page itself. */
.site-brand {
  position: fixed;
  top: 17px;
  left: 20px;
  z-index: 51;
  filter: invert(1);
  mix-blend-mode: difference;
  transition: transform .25s var(--ease);
}
.site-header > .split-cta { margin-left: auto; }

.cap-intro p, .pillar p, .services-intro > p,
.service-row p, .service-project, .tools-note p,
.faq-category, .faq-items, .contact-form, .footer-intro {
  font-family: var(--display);
  font-weight: 400;
}
.cap-intro p, .pillar p { line-height: 1.5; letter-spacing: .02em; }
.services-intro > p, .service-row p, .tools-note p,
.faq-answer p { line-height: 1.45; letter-spacing: .02em; }

.experiments-card > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.experiments-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(#0005, transparent 45%);
  pointer-events: none;
}

@media (min-width: 761px) {
  .cap-intro {
    width: min(488px, calc(100% - 80px));
    max-width: none;
    padding: 150px 0 122px;
  }
  .cap-intro h2 { font-size: 28px; }
  .cap-intro p { margin-top: 16px; font-size: 16px; }
  .cap-columns {
    width: min(var(--content-width), calc(100% - 80px));
    max-width: none;
    padding: 0 0 200px;
    grid-template-columns: 43.15% 35.6%;
    gap: 0;
  }
  .pillar-list { padding-top: 50px; }
  .pillar { min-height: 0; margin: 0; padding-bottom: 90px; }
  .pillar:last-child { padding-bottom: 0; }
  .pillar h3 { margin-bottom: 12px; }
  .pillar p { font-size: 16px; }
  .orbit-sticky { height: auto; aspect-ratio: 1; top: calc(50vh - 165px); }

  .services-section {
    width: min(var(--content-width), calc(100% - 80px));
    max-width: none;
    padding: 200px 0 250px;
  }
  .services-layout { grid-template-columns: 45.09% 42.07%; gap: 0; }
  .services-intro > p { max-width: 402px; }
  .services-intro > p, .service-row p, .service-project, .tools-note p { font-size: 14px; }
  .service-row { padding-bottom: 0; margin-bottom: 90px; }
  .service-row:last-child { margin-bottom: 0; }
  .tools-note { padding-top: 250px; }
  .tools-note > div { gap: 90px; }

  .ecosystem {
    width: min(var(--visual-width), calc(100% - 40px));
    max-width: none;
    padding: 0 0 200px;
  }
  .section-heading { grid-template-columns: 22px minmax(0, 1fr); gap: 122px; margin-bottom: 42px; }
  .world-card { height: 707px; aspect-ratio: auto; }
  .world-card-inner {
    width: 335px;
    max-width: calc(100% - 50px);
    min-height: 415px;
    padding: 24px;
  }
  .world-card-inner h2 { font-size: 28px; margin-top: 15px; }
  .ecosystem-small { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .small-card { height: 372px; aspect-ratio: auto; }
  .service-stack { font-size: clamp(36px, 4.2vw, 64px); }

  .film-section {
    width: min(var(--visual-width), calc(100% - 40px));
    margin-inline: auto;
    padding: 0;
  }
  .manifesto {
    width: min(var(--editorial-width), calc(100% - 80px));
    margin: 100px auto 0;
    padding: 0 0 200px;
  }
  .manifesto-copy {
    width: min(719px, 100%);
    margin-left: auto;
    font-size: 16px;
    line-height: 1.5;
  }
  .manifesto > .text-link { display: block; width: min(719px, 100%); margin-left: auto; }
  .faq-section {
    width: min(var(--editorial-width), calc(100% - 80px));
    margin-inline: auto;
    padding: 10px 0 0;
  }
  .faq-section > h2 { margin-bottom: 64px; }
  .faq-layout { grid-template-columns: 170px minmax(0, 481px); gap: 104px; padding-left: 123px; }
  .faq-category { font-size: 16px; }
  .faq-items details { margin-bottom: 72px; }
  .faq-answer { margin-top: 24px; padding-left: 61px; gap: 10px; }
  .faq-answer > span { margin-left: 0; flex: 0 0 16px; }
  .faq-secondary { margin-top: 116px; }
  .contact-section { padding-top: 140px; }
  .contact-section > h2, .contact-form { width: min(712px, 100%); }
  .footer-intro { width: min(var(--content-width), 100%); margin-inline: auto; padding: 0 0 145px; }
  .footer-intro h2 { margin-bottom: 24px; }
  .footer-card { height: 206px; }
}

@media (min-width: 761px) and (max-width: 1439px) {
  .ecosystem { max-width: 1140px; }
}
@media (min-width: 761px) and (max-width: 1000px) {
  .faq-layout { grid-template-columns: 150px minmax(0, 1fr); gap: 50px; padding-left: 40px; }
  .section-heading { gap: 70px; }
  .world-card { height: 580px; }
  .world-card-inner { padding: 20px; }
  .small-card { height: 290px; padding: 12px; }
  .small-card i { width: 28px; height: 28px; }
  .small-card > span { font-size: 12px; }
}
@media (max-width: 760px) {
  .site-header .header-middle { margin-left: auto; }
  .site-header.mobile-hidden + .site-brand { transform: translateY(-85px); }
  .ecosystem { padding-bottom: 100px; }
  .ecosystem-small { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .small-card:last-child { grid-column: auto; aspect-ratio: .9; }
  .service-stack { font-size: clamp(24px, 8vw, 32px); margin-top: 8px; }
  .film-section { padding-top: 0; }
  .manifesto-copy { font-size: 16px; line-height: 1.5; }
}

/* Review 2026-10-11: section headings are Bureau (style.css); the ecosystem heading reads above its cards' text.
   The services intro is the heading and the call to action (no paragraph, no mini rail). */
.ecosystem .section-heading h2 { font-size: 40px; line-height: 1.15; }
.services-intro > h2 + .split-cta { margin-top: 28px; }
@media (max-width: 760px) {
  .ecosystem .section-heading h2 { font-size: 32px; }
}
/* The Labs footer card lists its three systems only where the four cards are wide enough to keep it clear of the title. */
@media (max-width: 1299px) {
  .footer-card-list { display: none; }
}