/* Candidate-only support layer for generated nested service pages.
   Scope is limited to body.service-page; retained page chrome stays unchanged. */
body.service-page { background: #fffdf2; color: #20243a; }
.service-page main { overflow-x: clip; }
.service-page .service-hero { background: #fff4a3; padding: clamp(4rem, 8vw, 7rem) 1.25rem; }

/* ---------------------------------------------------------------------------
   Hero photography: the 23 non-homepage content routes.

   The photo is supplied PER PAGE as an inline --hero-img custom property. A
   relative url() written here would resolve against this stylesheet's own
   location and so cannot be correct at more than one directory depth, which is
   why the value carries a ../ prefix computed from that page's depth.

   There is deliberately NO image fallback in this rule. A page that does not
   set --hero-img renders the solid navy field with readable text, rather than
   an arbitrary photo or a broken request.

   Structure photo on ::before, overlay gradient on ::after, so the existing
   hero content stays above both and no markup inside the hero had to move.
   --------------------------------------------------------------------------- */
/* The photo is an inline background-image on THIS element (a relative url() in a
   custom property would resolve against this stylesheet and drop the mount id),
   so the painting declarations must live here too. They previously sat on the
   ::before rule below, which paints no image, leaving this element on the CSS
   initial values background-size: auto / background-repeat: repeat and tiling the
   photo at native resolution across the hero. Shared-sheet scoped, so all 23 photo
   routes are fixed together and a re-render cannot regress it. */
.service-page .service-hero { position: relative; isolation: isolate; background-color: #11145c; background-size: cover; background-repeat: no-repeat; background-position: 50% 42%; }
/* Full-screen hero (Item 2), applied via the SHARED stylesheet so all 23
   generated routes are corrected together and a re-render cannot regress it.
   The hero fills the viewport: min-height 100vh base with a 100svh
   progressive-enhancement override (vh first so non-svh engines keep the
   fallback; svh second overrides where supported). display: flex +
   align-items: center vertically centers the hero content block while the
   hero fills the viewport; the hero button row centers block-wide. DO NOT
   touch the homepage hero: the homepage does not load this sheet. */
.service-page .service-hero { min-height: 100vh; display: flex; align-items: center; }
.service-page .service-hero { min-height: 100svh; }
.service-page .service-hero .service-actions { justify-content: center; }

.service-page .service-hero::before,
.service-page .service-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.service-page .service-hero::before { /* hero image is inline on the element so it resolves against the page */ background-position: 50% 42%; background-repeat: no-repeat; background-size: cover; z-index: 0; }
/* Overlay is a FLAT BLACK SCRIM AT 25% OPACITY, set by explicit operator
   instruction on 2026-09-23 so the photography reads as photography rather than
   a flat dark field. This deliberately replaces the earlier measured navy
   gradient. It is far lighter, so hero text contrast is measured against the
   real painted pixels per route and reported rather than assumed. Do NOT
   lighten this further, and do not add a hidden second scrim to flatter a
   measurement. */
.service-page .service-hero::after { background: rgb(0 0 0 / .25); z-index: 1; }
.service-page .service-hero > * { position: relative; z-index: 2; }
/* Operator-approved 2026-09-23: a LOCALISED scrim behind the hero text block
   only, sized to the text region (eyebrow, H1, deck and the CTA area over the
   photo). Measured remedy Option B: rgb(0 0 0 / .55) behind the text block
   passes contrast on 23/23 routes while the photograph stays bright at 25% black
   everywhere outside the block. Text shadow and font-weight were proven not to
   move the WCAG ratio, so neither is relied on. The scrim is a ::before on the
   text block itself: position: relative + isolation: isolate creates a
   stacking context, so the pseudo paints behind the text but above the hero
   photo/overlay. A small negative inset pads the scrim beyond the narrowest text
   so the eyebrow and CTA hover are covered too; the rounded corners match the
   button language on the page. */
.service-page .service-hero__inner { position: relative; isolation: isolate; }
.service-page .service-hero__inner::before { content: ""; position: absolute; inset: -0.75rem -1.25rem; z-index: -1; border-radius: 1.5rem; background: rgb(0 0 0 / .55); pointer-events: none; }
/* The cream flip for hero type is declared AFTER the base hero rules below,
   because those set color: #171a42 at equal specificity and source order would
   otherwise win. See the "hero type on the dark field" block. */
.service-page .service-shell { width: min(100%, 88rem); margin-inline: auto; }
/* Hero type is a centered block; the deck keeps a left-aligned reading measure. */
.service-page .service-hero__inner { max-width: 52rem; margin-inline: auto; text-align: center; }
.service-page .service-kicker,
.service-page .service-eyebrow { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; color: #171a42; font-family: 'Public Sans', sans-serif; font-size: .75rem; font-weight: 800; letter-spacing: .12em; line-height: 1.25; text-transform: uppercase; }
.service-page .service-kicker { border-radius: 999px; background: #ffff00; padding: .55rem .85rem; }
.service-page .service-hero h1 { max-width: 18ch; margin: 1rem auto 0; color: #171a42; font-family: Sora, sans-serif; font-size: clamp(2.55rem, 6vw, 5rem); font-weight: 800; letter-spacing: -.045em; line-height: .98; text-wrap: balance; }
.service-page .service-deck { max-width: 52rem; margin: 1.5rem auto 0; border-left: .25rem solid #ff0000; padding-left: 1.25rem; font-family: 'Public Sans', sans-serif; font-size: clamp(1.0625rem, 2vw, 1.25rem); line-height: 1.7; text-align: left; }
.service-page .service-hero .service-deck { margin: 1.5rem auto 0; }
@media (min-width: 64rem) { .service-page .service-hero h1 { font-size: 62px; } }
/* Hero type on the dark field. Must follow the base rules above: they declare
   color: #171a42 with the same specificity, so this is an ordering dependency,
   not a specificity one. Only the colour is overridden -- the 62px desktop H1
   size, the 52rem deck measure and its left alignment all still come from the
   rules above. The eyebrow keeps its opaque #ffff00 pill (15.49:1) and cannot
   be affected by the photo. */
.service-page .service-hero h1 { color: #fffdf2; }
.service-page .service-hero .service-deck { color: #fffdf2; }
.service-page .service-hero .service-trust { color: #fff9cc; }
.service-page .service-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.service-page .service-button { display: inline-flex; min-height: 3rem; align-items: center; justify-content: center; border-radius: 1.25rem; background: #c90000; color: #fffdf2; padding: .8rem 1.35rem; font-family: 'Public Sans', sans-serif; font-weight: 800; text-decoration: none; transition: background-color .2s, transform .2s; }
.service-page .service-button:hover { background: #a80000; transform: translateY(-2px); }
.service-page .service-button--light { background: #fff9cc; color: #171a42; box-shadow: inset 0 0 0 1px #d9d7ba; }
.service-page .service-button--light:hover { background: #ffff00; }
.service-page .service-button:focus-visible,
.service-page details:focus-within { outline: 4px solid rgb(0 0 255 / .3); outline-offset: 4px; }
.service-page .service-section { padding: clamp(4rem, 8vw, 6.5rem) 1.25rem; }
.service-page .service-section--ink { background: #11145c; color: #fffdf2; }
.service-page .service-section--sun { background: #fff4a3; }
/* Required non-hero alignment: centered eyebrow and heading; readable deck remains left aligned. */
.service-page .service-section__head { max-width: 52rem; margin: 0 auto; text-align: center; }
.service-page .service-section__head .service-eyebrow { justify-content: center; }
.service-page .service-section h2 { max-width: 24ch; margin: .75rem auto 0; color: #171a42; font-family: Sora, sans-serif; font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.05; text-wrap: balance; }
.service-page .service-section--ink h2 { color: #fffdf2; }
.service-page .service-section__head .service-deck { color: inherit; }
.service-page .service-section--ink .service-deck { border-color: #ff0000; color: #d8daf5; }
.service-page .service-content { max-width: 72rem; margin: 2.5rem auto 0; }
/* Lists share the established 52rem reading measure and become contained cards, not full-width stripes. */
.service-page .service-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr)); gap: .85rem; width: min(100%, 52rem); margin: 0 auto; padding: 0; list-style: none; }
.service-page .service-list li { min-width: 0; border-left: .25rem solid #ff0000; background: #fffdf2; color: #20243a; padding: 1rem 1.15rem; box-shadow: 0 1px 0 rgb(23 26 66 / .08); }
/* Ink-section eyebrows need a bright accent against the navy panel. */
.service-page .service-section--ink .service-eyebrow { color: #ffff00; }
.service-page .service-card-grid { display: grid; gap: 1rem; }
.service-page .service-card { background: #fffdf2; color: #20243a; padding: 1.35rem; box-shadow: 0 1px 0 rgb(23 26 66 / .1); }
.service-page .service-card h3 { margin: 0; color: #171a42; font-family: Sora, sans-serif; font-size: 1.2rem; line-height: 1.2; }
.service-page .service-card p { margin: .75rem 0 0; line-height: 1.65; }
.service-page .service-steps { display: grid; gap: 1rem; padding: 0; list-style: none; counter-reset: service-step; }
.service-page .service-steps li { display: grid; grid-template-columns: 3rem 1fr; gap: 1rem; align-items: start; padding: 1.2rem 0; border-bottom: 1px solid rgb(32 36 58 / .14); }
.service-page .service-steps li::before { content: counter(service-step, decimal-leading-zero); counter-increment: service-step; display: grid; width: 2.5rem; height: 2.5rem; place-items: center; background: #11145c; color: #ffff00; font-family: Sora, sans-serif; font-weight: 800; }
.service-page .service-steps strong { display: block; color: #171a42; font-family: Sora, sans-serif; }
/* The navy above is meant for the cream field. On the ink field the step heading
   would be navy-on-navy (1.012:1, invisible), so the ink tone overrides it the
   same way it already overrides h2 and .service-deck. Tone-scoped, not route-scoped. */
.service-page .service-section--ink .service-steps strong { color: #fffdf2; }
.service-page .service-steps p { margin: .35rem 0 0; line-height: 1.65; }
.service-page .service-faqs { display: grid; gap: .75rem; }
.service-page .service-faqs details { background: #fffdf2; color: #20243a; padding: 0 1.2rem; box-shadow: 0 1px 0 rgb(23 26 66 / .1); }
.service-page .service-faqs summary { cursor: pointer; padding: 1.2rem 2rem 1.2rem 0; color: #171a42; font-family: Sora, sans-serif; font-weight: 800; }
.service-page .service-faqs p { margin: 0; padding: 0 0 1.2rem; line-height: 1.7; }
.service-page .service-final { background: #c90000; color: #fffdf2; text-align: center; }
.service-page .service-final h2 { color: #fffdf2; }
.service-page .service-final .service-deck { border-left: 0; padding-left: 0; text-align: left; }
.service-page .service-trust { margin: 1.25rem 0 0; color: #fff9cc; font-family: 'Public Sans', sans-serif; font-weight: 800; }
@media (min-width: 42rem) { .service-page .service-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .service-page .service-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------------------------------------------------------------------------
   Shared site chrome: mobile navigation drawer scroll.

   Deliberately NOT scoped to .service-page. The drawer is an absolutely
   positioned panel inside a position: sticky header, so it cannot scroll with
   the document and any entry past the viewport height is untappable. Every
   non-homepage route ships the same header chrome, so the rule is scoped to
   the drawer itself and applies wherever this sheet is linked. The homepage
   carries the identical rule in homepage.css and does not load this sheet.
   Desktop is unaffected: the rule lives inside the mobile media query.
   --------------------------------------------------------------------------- */
@media (max-width: 1023.98px) {
  header nav[aria-label="Mobile navigation"] {
    max-height: calc(100vh - 6rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
}

/* nav-parity-defect-1 */
/* Navigation whole-block highlight (Defect 1).
   When a disclosure opens, the parent summary shares the panel field so the
   highlight covers the whole block consistently. Dropdown rows drop the
   bright single-column yellow and stay on the pale family, so no one cell
   lights up against the rest of the block. The ninth Industries link needs
   the named span utility on non-homepage routes (homepage.css is not loaded
   there). */
header nav[aria-label="Primary navigation"] details[open] > summary {
  background-color: #fff9cc !important;
  color: #c90000 !important;
}
header nav[aria-label="Primary navigation"] details > div > a:hover {
  background-color: #fffdf2 !important;
  color: #c90000 !important;
}
@media (min-width: 640px) {
  header nav[aria-label="Primary navigation"] .nav-panel-span-full {
    grid-column: 1 / -1;
  }
}