/* SPACEREL page-purpose surfaces and responsive spacing.
 * Scoped to #main-content: navigation, corporate footer and the amber
 * enquiry CTA remain owned by their established stylesheets.
 *
 * Warm service/editorial surface: #F6F5F2
 * White technical/reference surface: #FFFFFF
 * Charcoal heroes/footer: unchanged (#111315 / existing footer rule)
 * Amber enquiry CTA: unchanged (#FCA311).
 */
:root {
  --spacerel-surface-warm: #f6f5f2;
  --spacerel-surface-white: #ffffff;
  --spacerel-surface-ink: #16191c;
  --spacerel-surface-muted: #555d62;
  --spacerel-surface-rule: #dbdcd8;
}

/* Colour belongs to content, not site chrome or enquiry conversion areas. */
body.surface-warm #main-content {
  --paper: var(--spacerel-surface-warm);
  --ink: var(--spacerel-surface-ink);
  --paper-line: var(--spacerel-surface-rule);
  background: var(--spacerel-surface-warm);
  color: var(--spacerel-surface-ink);
  color-scheme: light;
}
body.surface-white #main-content {
  --paper: var(--spacerel-surface-white);
  --ink: var(--spacerel-surface-ink);
  --paper-line: #dedede;
  background: var(--spacerel-surface-white);
  color: var(--spacerel-surface-ink);
  color-scheme: light;
}

/* Full-width warm surface: supersede the legacy reading-surfaces rule that
   assigns #fff to #main-content. A narrower content wrapper must never be the
   only element carrying the warm background (white side gutters). */
body.reading-surfaces.surface-warm:not(.homepage) #main-content,
body.preserve-capability-background.surface-warm:not(.homepage) #main-content {
  background-color: var(--spacerel-surface-warm);
  --paper: var(--spacerel-surface-warm);
  --paper-line: var(--spacerel-surface-rule);
}
/* Normal light content follows the full-width parent, even where refinements
   previously assigned pure white to all .section elements. */
body.surface-warm:not(.homepage) #main-content .section.light-section:not(.final-cta),
body.surface-warm:not(.homepage) #main-content .research-body,
body.surface-warm:not(.homepage) #main-content .about-editorial,
body.surface-warm:not(.homepage) #main-content .about-editorial :is(.about-principles,.about-approach) {
  background-color: var(--spacerel-surface-warm);
}
/* Keep the research project's dark chapter blocks and amber enquiry panels. */
body.surface-warm.research-page #main-content .research-initiatives {
  background-color: #15191c;
}
body.surface-warm.research-page #main-content .research-related {
  background-color: #111315;
}

/* Homepage: preserve all dark bands, hero and CTA; lighten only cream/white
   presentation sections without altering their layout, hierarchy or images. */
body.homepage #main-content > .light-section,
body.homepage #main-content > .challenges-section {
  background: var(--spacerel-surface-warm);
  color: var(--spacerel-surface-ink);
  --paper: var(--spacerel-surface-warm);
  --paper-line: var(--spacerel-surface-rule);
}

/* Capabilities, industry sectors, standards overview and related services:
   warm editorial backgrounds. Keep all headers and hero shells charcoal. */
body.surface-warm #main-content > .section.light-section:not(.final-cta),
body.surface-warm #main-content > .section.capability-methods,
body.surface-warm #main-content > .technical-content,
body.surface-warm #main-content > .reliability-content,
body.surface-warm #main-content > .research-body,
body.surface-warm #main-content > .reliability-related,
body.surface-warm #main-content .research-body {
  background: var(--spacerel-surface-warm);
  color: var(--spacerel-surface-ink);
  --paper: var(--spacerel-surface-warm);
  --ink: var(--spacerel-surface-ink);
  --paper-line: var(--spacerel-surface-rule);
}
body.surface-warm.capability-overview #main-content > .technical-content,
body.surface-warm.capability-overview #main-content > .capability-methods,
body.surface-warm.capability-overview #main-content > .reliability-related {
  background: var(--spacerel-surface-warm);
  --paper-line: var(--spacerel-surface-rule);
}
body.surface-warm #main-content .technical-content :is(.technical-section,.technical-split) {
  border-color: var(--spacerel-surface-rule);
}
/* Preserve R&D's deliberately dark selected-development and related-work bands. */
body.surface-warm.research-page #main-content :is(.research-initiatives,.research-related) {
  background: #15191c;
  color: #f4f3ef;
  color-scheme: dark;
}
body.surface-warm.research-page #main-content .research-related {
  background: #111315;
}

/* About: keep the compact editorial three-column structure. Alternate surfaces
   via true white inset content panels, not oversized full-bleed white stripes. */
body.surface-warm #main-content .about-editorial,
body.surface-warm #main-content .about-editorial :is(.about-principles,.about-approach) {
  background: var(--spacerel-surface-warm);
  color: var(--spacerel-surface-ink);
}
body.surface-warm #main-content .about-editorial :is(.technical-callout,.download-box,.branch-panel) {
  background: #fff;
  border-color: var(--spacerel-surface-rule);
  color: var(--spacerel-surface-ink);
}

/* Technical standards, long-form resources, case studies and general methods:
   neutral pure-white reading area. Toolkit/calculators already use pure white;
   retain their independent field/table backgrounds. */
body.surface-white #main-content > .section.light-section:not(.final-cta),
body.surface-white #main-content > .technical-content,
body.surface-white #main-content > .resource-article,
body.surface-white #main-content .resource-article,
body.surface-white #main-content .resource-article > .technical-content,
body.surface-white #main-content > .research-body {
  background: var(--spacerel-surface-white);
  color: var(--spacerel-surface-ink);
  --paper: var(--spacerel-surface-white);
  --paper-line: #dedede;
}
body.surface-white #main-content .technical-content .technical-section {
  border-color: #dedede;
}

/* Section rhythm. Unlike the old broad .section rule, these only adjust
   boundaries and technical block padding, not the hero, footer, or amber CTA.
   Preserve design-specific hero-to-first-section spacing on Reliability. */
body.homepage #main-content > .section:not(.final-cta):not(.principles-section) {
  padding-block: clamp(44px, 4vw, 60px);
}
body:not(.homepage) #main-content > .section:not(.final-cta):not(.research-initiatives) {
  padding-block: clamp(48px, 4vw, 64px);
}
body:not(.homepage) #main-content > .technical-content > .technical-section,
body:not(.homepage) #main-content > .technical-content > .technical-split,
body:not(.homepage) #main-content .research-body .technical-content > .technical-section {
  padding-block: clamp(38px, 3vw, 48px);
}
/* First blocks already have deliberate hero-to-content padding on the container. */
body:not(.homepage) #main-content > .technical-content > .technical-section:first-child,
body:not(.homepage) #main-content .research-body .technical-content > .technical-section:first-child {
  padding-top: 0;
}
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;
}
@media (max-width: 1100px) {
  body.homepage #main-content > .section:not(.final-cta):not(.principles-section) { padding-block: 44px; }
  body:not(.homepage) #main-content > .section:not(.final-cta):not(.research-initiatives) { padding-block: 44px; }
}
@media (max-width: 760px) {
  body.homepage #main-content > .section:not(.final-cta):not(.principles-section) { padding-block: 34px; }
  body:not(.homepage) #main-content > .section:not(.final-cta):not(.research-initiatives) { padding-block: 36px; }
  body:not(.homepage) #main-content > .technical-content > .technical-section,
  body:not(.homepage) #main-content > .technical-content > .technical-split,
  body:not(.homepage) #main-content .research-body .technical-content > .technical-section { padding-block: 32px; }
  body.capability-overview.reliability-page #main-content > .reliability-content { padding-top: 52px; }
}
@media print {
  body.surface-warm #main-content,
  body.surface-warm #main-content > .section.light-section,
  body.surface-warm #main-content > .technical-content,
  body.surface-warm #main-content .research-body,
  body.surface-warm #main-content .about-editorial {
    background: white;
    color: black;
  }
}

/* Text-only index heroes need the same charcoal heading as image heroes.
   Capabilities intentionally bypasses reading-surfaces; set its text colours
   on the shell rather than relying on that body class. */
body.surface-warm #main-content .page-hero-shell,
body.surface-white #main-content .page-hero-shell {
  background: #111315;
  color: #f4f3ef;
  color-scheme: dark;
  --text: #f4f3ef;
  --muted: #b9c0c5;
  --line: #34383d;
}
body.surface-warm #main-content .page-hero-shell :is(.breadcrumb, .page-heading),
body.surface-white #main-content .page-hero-shell :is(.breadcrumb, .page-heading) {
  color: #f4f3ef;
  background: transparent;
}
body.surface-warm #main-content .page-hero-shell :is(.page-intro, .eyebrow),
body.surface-white #main-content .page-hero-shell :is(.page-intro, .eyebrow) {
  color: #b9c0c5;
}

/* Index listing dividers mark subsequent rows, not the very start of the
   Standards and Industries listings. Retain the separator on later cards. */
body.surface-warm:is(.index-standards,.index-industries) #main-content .index-grid > .index-card:nth-child(-n+2) {
  border-top: 0;
}

/* At the beginning of single-column editorial content, the hero/content
   transition itself is sufficient separation. Keep subsequent section rules. */
body:not(.homepage) #main-content > .technical-content > :is(.technical-section,.technical-split):first-child,
body:not(.homepage) #main-content .reading-layout-body > :is(.technical-section,.technical-split):first-child,
body:not(.homepage) #main-content .resource-article > .technical-content > :is(.technical-section,.technical-split):first-child {
  border-top: 0;
}

/* Navigation is an inset part of the reading surface, not a white card.
   Preserve subtle active/hover contrast while blending the surrounding panel. */
body.surface-warm #main-content .section-navigation,
body.surface-warm #main-content .section-navigation-toggle {
  background: var(--spacerel-surface-warm);
}
body.surface-warm #main-content .section-navigation a:hover,
body.surface-warm #main-content .section-navigation a[aria-current="location"] {
  background: #eeede9;
}
@media (max-width: 760px) {
  /* On a single-column index grid, card two starts a new row. */
  body.surface-warm:is(.index-standards,.index-industries) #main-content .index-grid > .index-card:nth-child(2) {
    border-top: 1px solid var(--spacerel-surface-rule);
  }
}


/* Capabilities index: Wagtail-authored guidance is editorial prose, not a
   two-column service detail. The core/supporting cards above remain untouched.
   This page bypasses reading-surfaces, so explicitly set its light text palette. */
body.index-capabilities.surface-warm #main-content > .capabilities-guidance {
  --text: var(--spacerel-surface-ink);
  --muted: var(--spacerel-surface-muted);
  --line: var(--spacerel-surface-rule);
  --paper-line: var(--spacerel-surface-rule);
  background: var(--spacerel-surface-warm);
  color: var(--spacerel-surface-ink);
  color-scheme: light;
  padding-top: 0;
  padding-bottom: clamp(64px, 6vw, 100px);
}
body.index-capabilities #main-content .capabilities-guidance > .technical-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  width: 100%;
  border-top: 1px solid var(--spacerel-surface-rule);
  padding-block: clamp(40px, 4vw, 60px);
}
/* The first separator distinguishes Wagtail guidance from supporting cards;
   later sections repeat the same full-width rule automatically. */
body.index-capabilities #main-content .capabilities-guidance > .technical-section:first-child {
  border-top: 1px solid var(--spacerel-surface-rule);
  padding-top: clamp(40px, 4vw, 60px);
}
body.index-capabilities #main-content .capabilities-guidance .technical-section > div:first-child {
  margin-bottom: clamp(22px, 2.5vw, 36px);
}
body.index-capabilities #main-content .capabilities-guidance .technical-section h2 {
  max-width: none;
  margin-top: 12px;
  color: var(--spacerel-surface-ink);
  font-size: clamp(1.9rem, 3vw, 2.8rem);
  line-height: 1.18;
}
body.index-capabilities #main-content .capabilities-guidance .technical-section .eyebrow {
  color: var(--spacerel-surface-muted);
}
body.index-capabilities #main-content .capabilities-guidance .prose {
  width: 100%;
  max-width: none;
  min-width: 0;
  color: var(--spacerel-surface-muted);
  font-size: clamp(1rem, 1.2vw, 1.125rem);
  line-height: 1.8;
}
body.index-capabilities #main-content .capabilities-guidance .prose :is(p, li) {
  color: var(--spacerel-surface-muted);
  max-width: none;
}
body.index-capabilities #main-content .capabilities-guidance .prose p + p {
  margin-top: 1.1rem;
}
body.index-capabilities #main-content .capabilities-guidance .prose :is(h3, strong) {
  color: var(--spacerel-surface-ink);
}
body.index-capabilities #main-content .capabilities-guidance .prose h3 {
  font-size: clamp(1.2rem, 1.6vw, 1.5rem);
  margin: clamp(28px, 3vw, 40px) 0 12px;
  line-height: 1.35;
}
body.index-capabilities #main-content .capabilities-guidance .prose a {
  color: #273f55;
}
@media (max-width: 760px) {
  body.index-capabilities.surface-warm #main-content > .capabilities-guidance {
    padding-top: 0;
    padding-bottom: 56px;
  }
  body.index-capabilities #main-content .capabilities-guidance > .technical-section {
    padding-block: 32px;
  }
  body.index-capabilities #main-content .capabilities-guidance > .technical-section:first-child {
    padding-top: 32px;
  }
}


/* Hero-scroll anchors are zero-height siblings. Keep first editorial section
   spacing and separators identical to the original anchor-free layout. */
body:not(.homepage) #main-content > .technical-content > .hero-scroll-anchor:first-child + .technical-section,
body:not(.homepage) #main-content .research-body .technical-content > .hero-scroll-anchor:first-child + .technical-section,
body.capability-overview.reliability-page #main-content > .reliability-content > .hero-scroll-anchor:first-child + section {
  padding-top: 0;
}
body:not(.homepage) #main-content > .technical-content > .hero-scroll-anchor:first-child + :is(.technical-section,.technical-split),
body:not(.homepage) #main-content .reading-layout-body > .hero-scroll-anchor:first-child + :is(.technical-section,.technical-split),
body:not(.homepage) #main-content .resource-article > .technical-content > .hero-scroll-anchor:first-child + :is(.technical-section,.technical-split) {
  border-top: 0;
}
body.index-capabilities #main-content .capabilities-guidance > .hero-scroll-anchor:first-child + .technical-section {
  border-top: 1px solid var(--spacerel-surface-rule);
  padding-top: clamp(40px, 4vw, 60px);
}
@media (max-width: 760px) {
  body.index-capabilities #main-content .capabilities-guidance > .hero-scroll-anchor:first-child + .technical-section {
    padding-top: 32px;
  }
}


/* Repeatable standalone editorial image sections. Existing text+image blocks
   retain their original split-column presentation. */
#main-content .technical-image-section {
  display: block;
  min-width: 0;
  padding-block: clamp(34px, 3.2vw, 52px);
  border-top: 1px solid var(--paper-line, #dedede);
}
#main-content .technical-image-section h2 {
  max-width: 940px;
  margin: 0 0 24px;
  color: inherit;
  font-size: clamp(1.65rem, 2.4vw, 2.4rem);
}
#main-content .technical-image-section figure {
  width: 100%;
  min-width: 0;
  margin: 0 auto;
}
#main-content .technical-image-section--contained figure { max-width: 940px; }
#main-content .technical-image-section--wide figure { max-width: none; }
#main-content .technical-image-section img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: contain;
}
#main-content .technical-image-section figcaption {
  margin-top: 14px;
  color: var(--muted, #555);
  font-size: .875rem;
  line-height: 1.65;
}
#main-content .technical-image-section:first-child { border-top: 0; }
#main-content .hero-scroll-anchor:first-child + .technical-image-section { border-top: 0; }
#main-content .homepage-image-sections {
  padding-block: clamp(44px, 4.5vw, 72px);
  background: var(--spacerel-surface-warm, #f6f5f2);
  color: var(--spacerel-surface-ink, #16191c);
  --paper-line: #dbdcd8;
  --muted: #555d62;
}
#main-content .homepage-image-sections > .container > .technical-image-section:first-child {
  border-top: 0;
  padding-top: 0;
}
#main-content .homepage-image-sections > .container > .technical-image-section:last-child { padding-bottom: 0; }
@media (max-width: 760px) {
  #main-content .technical-image-section { padding-block: 30px; }
  #main-content .technical-image-section h2 { margin-bottom: 16px; }
}


/* Process blocks need a section boundary as well as their internal step rules.
   Preserve the intentional border-free start, including generated hero anchors. */
body:not(.homepage) #main-content .technical-content .technical-process {
  border-top: 1px solid var(--paper-line, #dedede);
}
body:not(.homepage) #main-content .technical-content .technical-process:first-child,
body:not(.homepage) #main-content .technical-content .hero-scroll-anchor:first-child + .technical-process {
  border-top: 0;
}