/* Core capability overview pages share the Research & Development visual system.
   This layer is loaded last so that page-specific legacy styles cannot reintroduce
   inconsistent charcoal/white backgrounds or collapse hero-to-content spacing.
   Child technical pages and other site sections keep their own established layouts. */
body.capability-overview #main-content {
  --paper: #f1f0eb;
  --ink: #16191c;
  --text: #16191c;
  --muted: #555d62;
  --line: #d1d3d0;
  --paper-line: #d1d3d0;
  color: #16191c;
  color-scheme: light;
  background: #f1f0eb;
}

/* Dark cinematic hero, with the same scale as the R&D hero. */
body.capability-overview:not(.research-page) #main-content .page-hero-shell {
  background: #111315;
  color: #f4f3ef;
  color-scheme: dark;
  --text: #f4f3ef;
  --muted: #b9c0c5;
  --line: #34383d;
}
body.capability-overview:not(.research-page) #main-content .page-hero-shell > .page-heading {
  min-height: clamp(460px, 38vw, 570px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding-block: clamp(58px, 5vw, 80px);
}
body.capability-overview:not(.research-page) #main-content .page-hero-shell .breadcrumb {
  color: #abb3b9;
}
body.capability-overview:not(.research-page) #main-content .page-heading .eyebrow {
  color: #abb3b9;
  margin-bottom: 30px;
}
body.capability-overview:not(.research-page) #main-content .page-heading h1 {
  margin-top: 0;
  color: #f4f3ef;
  max-width: min(850px, 100%);
  font-size: clamp(2.55rem, 4.7vw, 5.1rem);
  line-height: 1.12;
  text-wrap: balance;
}
body.capability-overview:not(.research-page) #main-content .page-heading .page-intro {
  margin-top: 31px;
  color: #b9c0c6;
  max-width: 72ch;
  font-size: calc(clamp(1.05rem, 1.4vw, 1.2rem) + 2px);
  line-height: 1.85;
}
body.capability-overview:not(.research-page) #main-content .interior-hero--with-media {
  min-height: clamp(500px, 42vw, 610px);
}
body.capability-overview:not(.research-page) #main-content .interior-hero .page-heading {
  justify-content: center;
  padding-block: clamp(56px, 5vw, 80px);
}
body.capability-overview:not(.research-page) #main-content .interior-hero .page-heading .page-intro {
  max-width: min(720px, 46vw);
}

/* Consistent warm editorial surface and legible content regardless of which
   capability-specific template Wagtail chooses. */
body.capability-overview:not(.research-page) #main-content > .technical-content,
body.capability-overview:not(.research-page) #main-content > .capability-methods,
body.capability-overview:not(.research-page) #main-content > .reliability-related,
body.capability-overview:not(.research-page) #main-content > .light-section {
  background: #f1f0eb;
  color: #16191c;
  color-scheme: light;
  --text: #16191c;
  --muted: #555d62;
  --line: #d1d3d0;
  --paper-line: #d1d3d0;
}
body.capability-overview:not(.research-page) #main-content > .technical-content {
  padding-top: clamp(40px, 4vw, 64px);
  padding-bottom: clamp(48px, 4vw, 68px);
}
body.capability-overview:not(.research-page) #main-content > .technical-content > .technical-section:first-child {
  padding-top: 0;
  border-top: 0;
}
body.capability-overview:not(.research-page) #main-content > .capability-methods {
  padding-block: clamp(52px, 4.5vw, 72px);
}
body.capability-overview:not(.research-page) #main-content .technical-content .technical-section {
  border-color: #d1d3d0;
}
body.capability-overview:not(.research-page) #main-content .technical-content :is(h2, h3, strong) {
  color: #16191c;
}
body.capability-overview:not(.research-page) #main-content .technical-content :is(.eyebrow, .prose, .prose p, .prose li) {
  color: #555d62;
}
body.capability-overview:not(.research-page) #main-content .technical-content .prose a {
  color: #273f55;
}
body.capability-overview:not(.research-page) #main-content .technical-content :is(.technical-callout, .branch-panel, .success-panel) {
  background: #e7e7e2;
  color: #16191c;
  border-color: #b7b9b5;
}
body.capability-overview:not(.research-page) #main-content .related-grid a {
  border-color: #d1d3d0;
}

/* Reliability overview previously had no top gap at all: its opening eyebrow
   touched the hero. Give it a deliberate transition, not another hard edge. */
body.capability-overview.reliability-page #main-content > .reliability-content {
  padding-top: clamp(60px, 4.5vw, 76px);
}
body.capability-overview.reliability-page #main-content > .reliability-content > section:first-child {
  padding-top: 0;
}
body.capability-overview.reliability-page #main-content .reliability-related {
  border-top: 1px solid #d1d3d0;
}
body.capability-overview.reliability-page #main-content .reliability-hero-links .text-link {
  color: #f4f3ef;
}

/* R&D remains the design reference; its chart, dark selected-development
   section and editorial typography are intentionally not restyled. */
@media (max-width: 1100px) {
  body.capability-overview:not(.research-page) #main-content .interior-hero .page-heading .page-intro {
    max-width: min(780px, 100%);
  }
  body.capability-overview:not(.research-page) #main-content .page-hero-shell > .page-heading {
    min-height: 430px;
    padding-block: 56px;
  }
}
@media (max-width: 760px) {
  body.capability-overview:not(.research-page) #main-content .page-hero-shell > .page-heading {
    min-height: 0;
    padding-block: 58px 62px;
  }
  body.capability-overview:not(.research-page) #main-content .interior-hero .page-heading {
    padding-block: 45px 54px;
  }
  body.capability-overview:not(.research-page) #main-content .page-heading h1 {
    font-size: clamp(2.3rem, 9vw, 3.5rem);
  }
  body.capability-overview:not(.research-page) #main-content .page-heading .page-intro {
    font-size: calc(1rem + 2px);
    margin-top: 25px;
  }
  body.capability-overview:not(.research-page) #main-content > .technical-content {
    padding-top: 40px;
    padding-bottom: 48px;
  }
  body.capability-overview.reliability-page #main-content > .reliability-content {
    padding-top: 52px;
  }
}
@media print {
  body.capability-overview:not(.research-page) #main-content .page-hero-shell,
  body.capability-overview:not(.research-page) #main-content .page-heading h1 {
    background: #fff;
    color: #111;
  }
  body.capability-overview:not(.research-page) #main-content .page-hero-shell > .page-heading {
    min-height: 0;
    padding-block: 24px;
  }
}