/* =====================================================================
   GOLDRATT UK V3.4 → PROTOTYPE-2 OVERRIDES
   V3.4 changes:
   • Hero: deep navy bg with Night-preset particle motion
   • Nav at-top: fully transparent, white logo + white links + white CTA
   • Nav scrolled: white-bg, navy logo (unchanged)
   • Buttons: 3 tiers
       primary  → light-blue bg, white text  →  hover: navy bg, light-blue text
       secondary → transparent + light-blue outline + light-blue text → hover: navy text on light-blue
       tertiary  → text + chevron icon, light-blue
   • Hero form: frosted glass on dark navy
   ===================================================================== */

/* -------- Noto Sans everywhere ---------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;500;600;700;800;900&display=swap');

html, body,
.font-display, .font-serif, .font-sans,
[class*="display-"], [class*="text-["],
h1, h2, h3, h4, h5, h6, p, span, a, button, input, select, textarea, blockquote, figcaption, li {
  font-family: 'Noto Sans', system-ui, -apple-system, sans-serif !important;
}
.font-serif, blockquote {
  font-style: italic;
  letter-spacing: -0.01em;
}

/* -------- Tokens ------------------------------------------------------ */
:root,
.bg-background {
  --background: 0 0% 100%;
  --surface: 220 30% 98%;
  --ink: 220 35% 9%;
  --ink-2: 220 18% 28%;
  --line: 220 18% 88%;
  --brand: 224 73% 47%;
  --brand-strong: 226 75% 36%;
  --brand-soft: 218 90% 96%;
}
:root {
  --gu-navy:    #25408e;
  --gu-navy-2:  #1E3A8A;
  --gu-navy-3:  #101049;
  --gu-navy-4:  #0d082d;
  --gu-navy-5:  #060b27;
  --gu-blue:    #5cc1ff;
  --gu-blue-2:  #33b0ff;
  --gu-blue-3:  #009eff;
  --gu-line:    #e3e7ef;
}

/* -------- Body backdrop: dark navy at top so the transparent header reads */
html, body {
  background: var(--gu-navy-5) !important;
}

/* -------- Top region bar — keep it dark navy too, so the transparent header
   sits on a continuous dark backdrop above the hero ------------------- */
body > div > div > div:first-child {
  background: transparent !important;
  border-bottom-color: rgba(255,255,255,0.06) !important;
  color: #fff !important;
  position: relative;
  z-index: 1;
}
body > div > div > div:first-child * {
  color: #fff !important;
}
body > div > div > div:first-child a:hover {
  color: var(--gu-blue) !important;
}

/* =====================================================================
   HEADER / NAV
   At-top (over dark hero): fully transparent, white everything
   Scrolled past hero:      white bg, navy logo, navy links
   ===================================================================== */
header.sticky {
  background: rgba(255,255,255,0.92) !important;
  backdrop-filter: blur(10px);
  border-bottom-color: var(--gu-line) !important;
  transition: background .35s ease, backdrop-filter .35s ease, border-color .35s ease;
}

/* AT-TOP — transparent over the dark hero, white text.
   Note: html/body bg is now dark navy so the transparent header reads white. */
header.sticky:not([data-scrolled="true"]) {
  background: transparent !important;
  border-bottom-color: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
header.sticky:not([data-scrolled="true"]) nav button,
header.sticky:not([data-scrolled="true"]) nav a,
header.sticky:not([data-scrolled="true"]) > div > * {
  color: #fff !important;
}
/* Search icon and any svg in header → white when at-top */
header.sticky:not([data-scrolled="true"]) svg {
  color: #fff !important;
  stroke: #fff !important;
}
header.sticky:not([data-scrolled="true"]) nav button,
header.sticky:not([data-scrolled="true"]) a:not(.bg-ink):not(.bg-brand):not(.gu-cta-primary) {
  color: #fff !important;
}
header.sticky:not([data-scrolled="true"]) nav button:hover {
  color: var(--gu-blue) !important;
  border-bottom-color: var(--gu-blue) !important;
}
/* At-top "Book a diagnostic" → light-blue primary button */
header.sticky:not([data-scrolled="true"]) a.bg-ink,
header.sticky:not([data-scrolled="true"]) a.bg-brand {
  background: var(--gu-blue) !important;
  color: #fff !important;
  border: none !important;
  transition: background .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease !important;
}
header.sticky:not([data-scrolled="true"]) a.bg-ink:hover,
header.sticky:not([data-scrolled="true"]) a.bg-brand:hover {
  background: var(--gu-navy) !important;
  color: var(--gu-blue) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 12px 24px -10px rgba(92,193,255,.5) !important;
}

/* SCROLLED — white bg, navy text/logo, but "Book a diagnostic" CTA stays light-blue (primary rule) */
header.sticky[data-scrolled="true"] {
  background: rgba(255,255,255,0.96) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom-color: var(--gu-line) !important;
}
header.sticky[data-scrolled="true"] nav button {
  font-weight: 500;
  color: hsl(var(--ink)) !important;
}
header.sticky[data-scrolled="true"] nav button:hover {
  color: var(--gu-navy) !important;
  border-bottom-color: var(--gu-navy) !important;
}
/* Primary CTA in scrolled header — light-blue (same primary rule as everywhere) */
header.sticky[data-scrolled="true"] a.bg-ink,
header.sticky[data-scrolled="true"] a.bg-brand {
  background: var(--gu-blue) !important;
  color: #fff !important;
  border: 1px solid transparent !important;
  transition: background .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease !important;
}
header.sticky[data-scrolled="true"] a.bg-ink:hover,
header.sticky[data-scrolled="true"] a.bg-brand:hover {
  background: var(--gu-navy) !important;
  color: var(--gu-blue) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 12px 24px -10px rgba(92,193,255,.5) !important;
}

/* Hide duplicate "Goldratt/UK" text spans — SVG already includes the wordmark */
header.sticky span[aria-label="Goldratt UK"] > span.font-display,
footer span[aria-label="Goldratt UK"] > span.font-display {
  display: none !important;
}
header.sticky img.gu-logo { height: 22px !important; }
footer img.gu-logo { height: 26px !important; }

/* =====================================================================
   GLOBAL BUTTON SYSTEM (3 tiers)
   Tier 1 — Primary  (has bg color): light-blue → navy on hover
   Tier 2 — Secondary (outlined):     transparent + light-blue border/text → fill on hover
   Tier 3 — Tertiary  (text + icon): light-blue text, underline reveal on hover
   Excludes header (handled above) and hero CTA (re-themed below for dark bg)
   ===================================================================== */

/* PRIMARY: any .bg-brand or .bg-ink outside the header */
main a.bg-brand,
main button.bg-brand,
main a.bg-ink,
main button.bg-ink,
main [class*="bg-brand"]:not([class*="hover:bg-brand"]):not([class*="ring-brand"]):not([class*="text-brand"]),
.gu-btn-primary {
  background: var(--gu-blue) !important;
  color: #fff !important;
  border: 1px solid transparent !important;
  transition: background .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease !important;
}
main a.bg-brand:hover,
main button.bg-brand:hover,
main a.bg-ink:hover,
main button.bg-ink:hover,
.gu-btn-primary:hover {
  background: var(--gu-navy) !important;
  color: var(--gu-blue) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 14px 28px -12px rgba(35,64,142,.5) !important;
}

/* "Goldratt/UK" wordmark accent → navy (text-brand utility — NOT a CTA) */
.text-brand { color: var(--gu-navy) !important; }
/* Bg-brand background utility used non-CTA (e.g. dots, accent rules) stays navy */
.hover\:bg-brand:hover { background-color: var(--gu-navy) !important; }
.hover\:bg-brand-strong:hover { background-color: var(--gu-navy-2) !important; }
.hover\:text-brand:hover { color: var(--gu-navy) !important; }
.group:hover .group-hover\:text-brand { color: var(--gu-navy) !important; }

/* SECONDARY: outlined link/button (border + transparent bg). The bundle marks
   secondary CTAs typically as <a class="border border-line ..."> or <a class="border border-ink ...">. */
main a.border.border-ink:not(.bg-brand):not(.bg-ink):not(.bg-background),
main a.border.border-line:not(.bg-brand):not(.bg-ink):not(.bg-background):not([class*="rounded-md"]):not([class*="rounded-full"]) {
  background: transparent !important;
  color: var(--gu-blue) !important;
  border-color: var(--gu-blue) !important;
  transition: background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease !important;
}
main a.border.border-ink:not(.bg-brand):not(.bg-ink):not(.bg-background):hover,
main a.border.border-line:not(.bg-brand):not(.bg-ink):not(.bg-background):not([class*="rounded-md"]):not([class*="rounded-full"]):hover {
  background: var(--gu-blue) !important;
  color: var(--gu-navy) !important;
  border-color: var(--gu-blue) !important;
  transform: translateY(-1px) !important;
}

/* TERTIARY: text + arrow (link-style CTAs) — light-blue with reveal underline */
main a.link-underline,
main a[class*="text-brand"]:not(.bg-brand):not(.bg-ink):not([class*="border-"]) {
  color: var(--gu-blue-3) !important;
  position: relative;
}

/* =====================================================================
   HERO (section 1) — DARK NAVY with Night-preset particles
   ===================================================================== */
main > section:nth-of-type(1) {
  position: relative;
  /* Extend visual dark navy up to cover the region bar + header area too */
  margin-top: -106px !important;
  padding-top: 130px !important;
  /* V3.5k-navy: gradient now stays in the Blue Vanguard navy family —
     #25408e (0%) -> #0d082d (50%) -> #060b27 (100%). Mouse-tracked highlight
     on top is preserved (JS updates --mx/--my via initHeroGradient). */
  --mx: 50%;
  --my: 30%;
  background:
    radial-gradient(60% 55% at var(--mx) var(--my), rgba(92,193,255,0.18) 0%, rgba(92,193,255,0.06) 35%, transparent 75%),
    linear-gradient(180deg, #25408e 0%, #0d082d 50%, #060b27 100%) !important;
  overflow: hidden;
  color: #fff !important;
  transition: background-position 200ms ease-out;
}
main > section:nth-of-type(1)::before {
  content: '';
  position: absolute;
  inset: 0;
  /* V3.5-grad: ::before overlay dimmed so the new #25408e -> #0f0934 -> #0f090a
     gradient reads cleanly instead of being washed light-blue by old radials. */
  background:
    radial-gradient(60% 50% at 70% 30%, rgba(0,158,255,0.04) 0%, transparent 70%),
    radial-gradient(40% 35% at 20% 80%, rgba(92,193,255,0.03) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
main > section:nth-of-type(1) > div { position: relative; z-index: 2; }

/* Night-preset canvas. We use `screen` blending instead of `overlay` because
   on the deep navy/black backdrop, overlay clips the particle glows down to
   near-invisible. Screen preserves the soft luminous quality of the reference. */
#gu-hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.32;       /* keep particles subtle so the dark navy reads */
}

/* Hero text — all white */
main > section:nth-of-type(1) h1,
main > section:nth-of-type(1) h1 *,
main > section:nth-of-type(1) h2,
main > section:nth-of-type(1) p,
main > section:nth-of-type(1) span,
main > section:nth-of-type(1) li,
main > section:nth-of-type(1) label {
  color: #fff !important;
}
main > section:nth-of-type(1) .eyebrow,
main > section:nth-of-type(1) [class*="eyebrow"] {
  color: var(--gu-blue) !important;
}
/* Lead/subtitle gets gentle alpha */
main > section:nth-of-type(1) p.lead,
main > section:nth-of-type(1) p:not(.tabular):not(.eyebrow) {
  color: rgba(255,255,255,0.82) !important;
}
/* "growth." accent → light-blue gradient */
main > section:nth-of-type(1) h1 .text-brand {
  background: linear-gradient(135deg, var(--gu-blue) 0%, var(--gu-blue-3) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent !important;
}
/* Grid line pattern — dim on dark */
main > section:nth-of-type(1) .grid-lines,
main > section:nth-of-type(1) .grid-lines-dark {
  opacity: 0.08 !important;
  color: rgba(255,255,255,0.5) !important;
}

/* KPI bar — white text, blue accent rail */
main > section:nth-of-type(1) .border-l.border-line {
  border-left-color: var(--gu-blue) !important;
  border-left-width: 3px !important;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), border-color .35s;
}
main > section:nth-of-type(1) .border-l.border-line:hover {
  transform: translateY(-3px);
  border-left-color: #fff !important;
}
main > section:nth-of-type(1) .tabular {
  color: #fff !important;
  letter-spacing: -0.02em;
}

/* Proof points / aside on dark hero — translucent navy card */
main > section:nth-of-type(1) aside,
main > section:nth-of-type(1) .border.border-line.rounded-md.bg-background {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(255,255,255,0.16) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 24px 48px -24px rgba(0,0,0,0.5);
  color: #fff !important;
}
main > section:nth-of-type(1) aside *,
main > section:nth-of-type(1) .border.border-line.rounded-md.bg-background * {
  color: #fff !important;
}

/* =====================================================================
   HERO FORM — Frosted glass
   ===================================================================== */
main > section:nth-of-type(1) form,
main > section:nth-of-type(1) .bg-background.border.border-line.rounded-md.p-7,
main > section:nth-of-type(1) .bg-background.border.border-line.rounded-md.p-6,
main > section:nth-of-type(1) .bg-background.border.border-line.rounded-md.p-8,
main > section:nth-of-type(1) .bg-background.border.border-line.rounded-md.p-6.lg\:p-7 {
  background: rgba(255,255,255,0.08) !important;
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.18) !important;
  box-shadow: 0 32px 64px -32px rgba(0,0,0,0.6),
              inset 0 1px 0 rgba(255,255,255,0.12) !important;
  border-radius: 12px !important;
}

/* Form inputs — translucent on glass. Catch the bundled .bg-background utility too. */
main > section:nth-of-type(1) select,
main > section:nth-of-type(1) input[type="text"],
main > section:nth-of-type(1) input[type="email"],
main > section:nth-of-type(1) input[type="search"],
main > section:nth-of-type(1) input:not([type]),
main > section:nth-of-type(1) textarea,
main > section:nth-of-type(1) select.bg-background,
main > section:nth-of-type(1) input.bg-background,
main > section:nth-of-type(1) textarea.bg-background {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
  color: #fff !important;
}
main > section:nth-of-type(1) select option {
  color: #000 !important;
  background: #fff !important;
}
main > section:nth-of-type(1) input::placeholder,
main > section:nth-of-type(1) textarea::placeholder {
  color: rgba(255,255,255,0.55) !important;
}
main > section:nth-of-type(1) select:focus,
main > section:nth-of-type(1) input:focus,
main > section:nth-of-type(1) textarea:focus {
  outline: none !important;
  border-color: var(--gu-blue) !important;
  box-shadow: 0 0 0 3px rgba(92,193,255,0.25) !important;
}

/* Hero submit / CTA — light-blue primary */
main > section:nth-of-type(1) a.bg-brand,
main > section:nth-of-type(1) button[class*="bg-brand"],
main > section:nth-of-type(1) a.bg-ink,
main > section:nth-of-type(1) button[type="submit"] {
  background: var(--gu-blue) !important;
  color: #fff !important;
  border: 1px solid transparent !important;
  transition: background .25s, color .25s, transform .25s, box-shadow .25s !important;
}
main > section:nth-of-type(1) a.bg-brand:hover,
main > section:nth-of-type(1) button[class*="bg-brand"]:hover,
main > section:nth-of-type(1) a.bg-ink:hover,
main > section:nth-of-type(1) button[type="submit"]:hover {
  background: var(--gu-navy) !important;
  color: var(--gu-blue) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 16px 32px -12px rgba(92,193,255,.5) !important;
}

/* Tiny chips / pills / badges in the hero — make readable on dark */
main > section:nth-of-type(1) .border.border-line.rounded-full,
main > section:nth-of-type(1) .bg-background.border.border-line.rounded-full {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.2) !important;
  color: #fff !important;
}

/* =====================================================================
   THE POSITION (section 2) — deep navy band (unchanged)
   ===================================================================== */
main > section:nth-of-type(2),
main > section:nth-of-type(8),
footer.band-dark {
  background: linear-gradient(180deg, var(--gu-navy-3) 0%, var(--gu-navy-4) 100%) !important;
}
main > section:nth-of-type(2) {
  position: relative;
}
main > section:nth-of-type(2)::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 50% at 80% 20%, rgba(92, 193, 255, 0.14) 0%, transparent 70%),
    radial-gradient(40% 30% at 10% 80%, rgba(35, 64, 142, 0.4) 0%, transparent 70%);
  pointer-events: none;
}
main > section:nth-of-type(2) > div { position: relative; z-index: 2; }
main > section:nth-of-type(2) .grid-lines-dark {
  opacity: 0.25 !important;
}
main > section:nth-of-type(2) .display-hero,
main > section:nth-of-type(2) h2,
main > section:nth-of-type(2) p {
  color: #fff !important;
}
main > section:nth-of-type(2) .eyebrow-dark,
main > section:nth-of-type(2) .eyebrow {
  color: var(--gu-blue) !important;
}
main > section:nth-of-type(2) .border-l {
  border-left-color: var(--gu-blue) !important;
  border-left-width: 3px !important;
}
main > section:nth-of-type(2) .display-md {
  color: #fff !important;
  letter-spacing: -0.01em;
}

/* =====================================================================
   ABOUT (section 3) — clean light + iso panel
   ===================================================================== */
main > section:nth-of-type(3) .min-h-\[420px\] {
  background: linear-gradient(135deg, #f5f8ff 0%, #eaf2ff 100%) !important;
  border-color: var(--gu-line) !important;
  position: relative;
  overflow: hidden;
}
main > section:nth-of-type(3) .min-h-\[420px\]::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 50% at 50% 50%, rgba(35,64,142,0.10) 0%, transparent 70%);
  pointer-events: none;
}

/* =====================================================================
   INDUSTRIES (section 4) — real photos + hover overlay (unchanged)
   ===================================================================== */
main > section:nth-of-type(4) .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-4 {
  gap: 0 !important;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
main > section:nth-of-type(4) .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-4 > a,
main > section:nth-of-type(4) .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-4 > article {
  border-radius: 0 !important;
  border: none !important;
  position: relative;
  overflow: hidden;
  cursor: pointer !important;
  opacity: 1 !important;
  transition: transform .45s cubic-bezier(.2,.7,.2,1);
}
main > section:nth-of-type(4) .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-4 > *:hover {
  transform: scale(1.02);
  z-index: 5;
}

main > section:nth-of-type(4) .aspect-\[16\/10\] {
  aspect-ratio: 16/12 !important;
  background-color: var(--gu-navy-4) !important;
  background-size: cover !important;
  background-position: center !important;
}
main > section:nth-of-type(4) .grid > *:nth-child(1) .aspect-\[16\/10\] {
  background-image: url('img/industry-defence.jpg?v=v39e') !important;
}
main > section:nth-of-type(4) .grid > *:nth-child(2) .aspect-\[16\/10\] {
  background-image: url('img/industry-aerospace.jpg?v=v39e') !important;
}
main > section:nth-of-type(4) .grid > *:nth-child(3) .aspect-\[16\/10\] {
  background-image: url('img/industry-mro.jpg?v=v39e') !important;
}
main > section:nth-of-type(4) .grid > *:nth-child(4) .aspect-\[16\/10\] {
  background-image: url('img/industry-gov.jpg?v=v39e') !important;
}

main > section:nth-of-type(4) .aspect-\[16\/10\]::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(35,64,142,0.0) 40%, rgba(13,8,45,0.88) 100%);
  z-index: 1;
  transition: background .4s;
}
main > section:nth-of-type(4) .grid > *:hover .aspect-\[16\/10\]::before {
  background: linear-gradient(180deg, rgba(35,64,142,0.55) 0%, rgba(13,8,45,0.94) 100%);
}
main > section:nth-of-type(4) .aspect-\[16\/10\] > * {
  position: relative;
  z-index: 2;
}
main > section:nth-of-type(4) .aspect-\[16\/10\] .grid-lines-dark {
  opacity: 0 !important;
}
main > section:nth-of-type(4) .aspect-\[16\/10\] .absolute.bottom-5 {
  color: #fff;
}
main > section:nth-of-type(4) .aspect-\[16\/10\] .absolute.bottom-5 * {
  color: #fff !important;
}
main > section:nth-of-type(4) .p-6.bg-background {
  background: #fff !important;
  border-top: 3px solid var(--gu-navy);
}

/* =====================================================================
   CHOOSE YOUR NEXT STEP (section 5) — light surface, hover lift
   ===================================================================== */
main > section:nth-of-type(5) {
  background: #f7f9ff !important;
}
main > section:nth-of-type(5) a.group {
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, border-color .35s;
  border-color: var(--gu-line) !important;
}
main > section:nth-of-type(5) a.group:hover {
  transform: translateY(-4px);
  border-color: var(--gu-navy) !important;
  box-shadow: 0 24px 48px -24px rgba(35,64,142,.35);
}

/* =====================================================================
   PULLQUOTE (section 6) — V3.5x: ridges image at 65% over deep navy
   ===================================================================== */
main > section:nth-of-type(6) {
  position: relative;
  padding: clamp(80px, 12vw, 160px) 0 !important;
  /* Deep-blue base. The ridges image is painted on top via a separate
     ::before layer at 65% opacity so the overlay math is exact. */
  background-color: #060b27 !important;
  background-image: none !important;
  overflow: hidden;
  isolation: isolate;
}
main > section:nth-of-type(6)::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('img/pullquote-ridges.jpg') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  opacity: 0.65;
  pointer-events: none;
  z-index: 0;
}
main > section:nth-of-type(6) > * {
  position: relative;
  z-index: 1;
}
main > section:nth-of-type(6) blockquote {
  color: #fff !important;
  font-size: clamp(44px, 6vw, 92px) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.02em !important;
  font-style: italic;
  max-width: 1100px;
}
main > section:nth-of-type(6) figcaption,
main > section:nth-of-type(6) .eyebrow {
  color: var(--gu-blue) !important;
}
main > section:nth-of-type(6) .container-x { max-width: 1280px; }

/* =====================================================================
   INSIGHTS (section 7) — subtle navy hover
   ===================================================================== */
main > section:nth-of-type(7) {
  background: #fbfcff !important;
}
main > section:nth-of-type(7) a.group:hover {
  background: rgba(35,64,142,0.025);
}

/* =====================================================================
   CTA BAND (section 8) — navy with light-blue glow + primary button rules
   ===================================================================== */
main > section:nth-of-type(8) {
  position: relative;
  border-top-color: rgba(255,255,255,0.08) !important;
}
main > section:nth-of-type(8)::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(50% 60% at 80% 30%, rgba(92,193,255,0.18) 0%, transparent 70%),
    radial-gradient(40% 50% at 10% 100%, rgba(35,64,142,0.5) 0%, transparent 70%);
  pointer-events: none;
}
main > section:nth-of-type(8) > div { position: relative; z-index: 2; }
main > section:nth-of-type(8) .display-hero,
main > section:nth-of-type(8) h2 {
  color: #fff !important;
  letter-spacing: -0.02em;
}
main > section:nth-of-type(8) .lead,
main > section:nth-of-type(8) p {
  color: rgba(255,255,255,0.8) !important;
}
/* CTA primary on this band */
main > section:nth-of-type(8) a.bg-background,
main > section:nth-of-type(8) a.bg-brand,
main > section:nth-of-type(8) a.bg-ink {
  background: var(--gu-blue) !important;
  color: #fff !important;
  border: none !important;
  transition: background .25s, color .25s, transform .25s, box-shadow .25s;
}
main > section:nth-of-type(8) a.bg-background:hover,
main > section:nth-of-type(8) a.bg-brand:hover,
main > section:nth-of-type(8) a.bg-ink:hover {
  background: var(--gu-navy) !important;
  color: var(--gu-blue) !important;
  transform: translateY(-2px);
  box-shadow: 0 16px 32px -12px rgba(92,193,255,.5);
}
/* CTA secondary on this band — outlined light-blue */
main > section:nth-of-type(8) a.border:not(.bg-brand):not(.bg-ink):not(.bg-background) {
  border-color: var(--gu-blue) !important;
  color: var(--gu-blue) !important;
  background: transparent !important;
  transition: background .25s, color .25s, border-color .25s, transform .25s;
}
main > section:nth-of-type(8) a.border:not(.bg-brand):not(.bg-ink):not(.bg-background):hover {
  background: var(--gu-blue) !important;
  color: var(--gu-navy) !important;
  transform: translateY(-1px);
}

/* =====================================================================
   FOOTER — navy band, white logo, link buttons swap to primary rule
   ===================================================================== */
footer.band-dark .text-background span.font-display {
  color: #fff !important;
}
footer.band-dark a.bg-\[\#0057ff\],
footer.band-dark a.bg-brand,
footer.band-dark a.bg-ink {
  background: var(--gu-blue) !important;
  color: #fff !important;
}
footer.band-dark a.bg-\[\#0057ff\]:hover,
footer.band-dark a.bg-brand:hover,
footer.band-dark a.bg-ink:hover {
  background: var(--gu-navy) !important;
  color: var(--gu-blue) !important;
}

/* =====================================================================
   UNIVERSAL micro-interactions
   ===================================================================== */
.gu-fade {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
}
.gu-fade.gu-in {
  opacity: 1;
  transform: translateY(0);
}
.gu-magnet {
  transition: transform .2s cubic-bezier(.2,.7,.2,1);
  will-change: transform;
}
.gu-tilt {
  transform-style: preserve-3d;
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.band-dark .link-underline,
.band-dark a.link-underline {
  color: var(--gu-blue) !important;
}

.grid-lines, .grid-lines-dark {
  background-image:
    linear-gradient(to right, currentColor 1px, transparent 1px),
    linear-gradient(to bottom, currentColor 1px, transparent 1px);
  background-size: 80px 80px;
  color: var(--gu-line);
}
.grid-lines-dark { color: rgba(255,255,255,0.08); }

@media (max-width: 768px) {
  main > section:nth-of-type(6) {
    padding: 64px 0 !important;
  }
  main > section:nth-of-type(6) blockquote {
    font-size: clamp(28px, 8vw, 48px) !important;
  }
  main > section:nth-of-type(4) .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-4 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* =====================================================================
   GOLDRATT UK V3.5 → HERO FEEDBACK OVERRIDES (2026-05-21)
   Specificity: uses `main > section:nth-of-type(1)` prefix to beat V3.4.
   Notes applied: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 15, 18.
   Deferred: 14, 16, 17, BG (megamenu/page-level, not yet built).
   ===================================================================== */

/* === Note 1: Region selector caret → solid triangle =================== */
/* Hide the original chevron SVG and inject a solid triangle directly
   after "UK". The parent button has Tailwind `gap-1.5` (6px) — that gap
   still applies to the hidden SVG slot, so we override it to 4px and use
   no extra margin on `::after` so the triangle sits snug against "UK". */
[data-testid="button-location-picker"] {
  gap: 4px !important;
  position: relative;
}
[data-testid="button-location-picker"] svg.lucide-chevron-down {
  display: none !important;
}
[data-testid="button-location-picker"]::after {
  content: "";
  display: inline-block;
  width: 0; height: 0;
  margin-left: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  transform: translateY(1px);
}

/* Region picker dropdown must overlay the main nav header.
   The UL listbox currently has z-50 (50). Header has z-40 (40).
   Bump the listbox even higher to clear any other sticky layers, and
   make sure no ancestor clips it. */
[data-testid="button-location-picker"] + ul[role="listbox"],
[aria-labelledby] + ul[role="listbox"],
ul[role="listbox"].absolute {
  z-index: 100 !important;
}
/* Ensure top region bar doesn't clip the dropdown */
body > div > div > div:first-child,
body > div > div > div:first-child > .container-x,
body > div > div > div:first-child .flex.items-center.gap-3 {
  overflow: visible !important;
  z-index: 60;
  position: relative;
}

/* === Note 3: Remove Academy/Insights/Contact us, keep divider ========= */
/* The top region bar is the first child of the app wrapper, the utility
   links live in the second `.flex.items-center.gap-5` group. */
body > div > div > div:first-child .flex.items-center.gap-5 > a {
  display: none !important;
}
/* Divider on right edge of the region group (so the bar isn't naked) */
body > div > div > div:first-child .container-x > .flex.items-center.gap-3 {
  position: relative;
  padding-right: 24px;
}
body > div > div > div:first-child .container-x > .flex.items-center.gap-3::after {
  content: "";
  position: absolute;
  right: 0;
  top: 18%;
  bottom: 18%;
  width: 1px;
  background: rgba(255,255,255,0.22);
}

/* === Logo height — latest V3.5y: 47.5px − 5% → 45.125px ================= */
header.sticky img.gu-logo,
header img.gu-logo {
  height: 45.125px !important;
  width: auto !important;
}

/* === Note 5: Hide "Proof points" eyebrow inside the hero panel ======== */
main > section:nth-of-type(1) .border.border-line.rounded-md.bg-background .eyebrow,
main > section:nth-of-type(1) .col-span-12.lg\:col-span-4 .eyebrow {
  display: none !important;
}

/* === Note 6: Hero headline → all white + Title Case =================== */
/* V3.4 uses linear-gradient + background-clip: text on `.text-brand`.
   Must unset background/clip too, not just color. */
main > section:nth-of-type(1) h1.display-hero,
main > section:nth-of-type(1) h1.display-hero *,
main > section:nth-of-type(1) h1.display-hero span.text-brand,
main > section:nth-of-type(1) h1 .text-brand {
  color: #ffffff !important;
  text-transform: capitalize !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* === Note 7: Hero sub-headline → solid white (over V3.4's 0.82 alpha) = */
/* V3.4 has `p:not(.tabular):not(.eyebrow)` which beats `p.lead` specificity.
   Chain extra classes to win without :not(). */
main > section:nth-of-type(1) p.lead.gu-fade,
main > section:nth-of-type(1) p.lead.gu-fade.gu-in,
main > section:nth-of-type(1) p.lead[class],
main > section:nth-of-type(1) p.lead[class] * {
  color: #ffffff !important;
}

/* === Note 4: Eyebrow → Title Case + tight tracking — GLOBAL ========== */
/* User asked to apply this site-wide, not just the hero. */
.eyebrow,
.eyebrow.gu-fade,
[class*="eyebrow"] {
  text-transform: capitalize !important;
  letter-spacing: -0.005em !important;
}
/* Don't capitalize the hidden "Proof points" eyebrow — already display:none */

/* === Navigator response panel → REPLACED in V3.5q (edit 23) ============ */
/* OLD: grey on dark. NEW: navy on white, light-blue highlights. The full
   light-card treatment lives in the V3.5q block at the bottom of this file.
   We keep this block in place to OVERRIDE these high-specificity selectors
   in the same direction — navy body text + navy/blue titles. The V3.5q
   block below sets backgrounds + accents. */
main > section:nth-of-type(1) div.rounded-md.border.p-4.mb-3.border-line.bg-background,
main > section:nth-of-type(1) div.rounded-md.border.p-4.mb-3.border-line.bg-background *,
/* Suggestion grid cards (siblings of the response panel) */
main > section:nth-of-type(1) .mt-4.grid a.rounded-md.border.bg-surface,
main > section:nth-of-type(1) .mt-4.grid a.rounded-md.border.bg-surface *,
/* "Other useful pages" tertiary cards */
main > section:nth-of-type(1) > .container-x ~ * a.rounded-md.border.bg-surface,
main > section:nth-of-type(1) p + .grid.grid-cols-1.md\:grid-cols-2 a.rounded-md.border.bg-surface,
main > section:nth-of-type(1) p + .grid.grid-cols-1.md\:grid-cols-2 a.rounded-md.border.bg-surface * {
  color: #23408f !important;  /* navy */
}
/* Card titles + eyebrow → light-blue HIGHLIGHT */
main > section:nth-of-type(1) div.rounded-md.border.p-4.mb-3.border-line.bg-background .eyebrow,
main > section:nth-of-type(1) .mt-4.grid a.rounded-md.border.bg-surface .font-semibold,
main > section:nth-of-type(1) .mt-4.grid a.rounded-md.border.bg-surface > div:first-child {
  color: #23408f !important;  /* navy titles — the eyebrow gets light-blue from the dedicated rule below */
}
/* Eyebrow strings specifically ("A useful next question", "Navigator response") → light blue */
main > section:nth-of-type(1) div.rounded-md.border.p-4.mb-3.border-line.bg-background .eyebrow,
main > section:nth-of-type(1) div.rounded-md.border.p-4.mb-3.border-line.bg-background .font-mono.uppercase {
  color: #5cc1ff !important;
}
/* Reset Start button — must stay white on blue */
main > section:nth-of-type(1) [data-testid="button-situation-router"],
main > section:nth-of-type(1) [data-testid="button-situation-router"] * {
  color: #ffffff !important;
}

/* "Other useful pages in the prototype" tertiary cards (different classes
   from suggestion cards — outer wrapper has `mt-3 rounded-md border bg-surface p-3`
   and the cards inside use `bg-background hover-elevate`). */
main > section:nth-of-type(1) .mt-3.rounded-md.border.border-line.bg-surface.p-3,
main > section:nth-of-type(1) .mt-3.rounded-md.border.border-line.bg-surface.p-3 *,
main > section:nth-of-type(1) a.rounded-md.border.p-3.border-line.bg-background.hover-elevate,
main > section:nth-of-type(1) a.rounded-md.border.p-3.border-line.bg-background.hover-elevate * {
  color: #23408f !important;  /* navy */
}
main > section:nth-of-type(1) a.rounded-md.border.p-3.border-line.bg-background.hover-elevate > div:first-child,
main > section:nth-of-type(1) a.rounded-md.border.p-3.border-line.bg-background.hover-elevate .font-semibold {
  color: #23408f !important;
  font-weight: 600 !important;
}

/* === Note 8: "Use the Navigator..." helper → white + match form width = */
/* The helper is a <div class="mt-10 max-w-5xl"> whose first child is
   <div class="mb-3 text-[14.5px] text-ink-2 max-w-[62ch]">. Bring that
   wrapper down to 56rem (matches form's max-w-4xl) and force white. */
main > section:nth-of-type(1) div.mt-10.max-w-5xl {
  max-width: 56rem !important;
}
main > section:nth-of-type(1) div.mt-10.max-w-5xl > div,
main > section:nth-of-type(1) div.mt-10.max-w-5xl > p,
main > section:nth-of-type(1) div.mt-10.max-w-5xl div[class*="text-ink-2"] {
  color: #ffffff !important;
  max-width: none !important;
}

/* === Note 9: Form labels → Title Case + restrained tracking ========== */
/* The visible text is inside <span class="... uppercase tracking-wider">.
   Tailwind utilities apply directly to the span, so we must target the span. */
main > section:nth-of-type(1) form label,
main > section:nth-of-type(1) label.block,
main > section:nth-of-type(1) label.block > span,
main > section:nth-of-type(1) label > span.block,
main > section:nth-of-type(1) label > span[class*="uppercase"],
main > section:nth-of-type(1) label > span[class*="tracking"] {
  text-transform: capitalize !important;
  letter-spacing: 0.015em !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,0.92) !important;
  font-family: 'Satoshi', system-ui, sans-serif !important;  /* drop font-mono */
}

/* === Note 10: Form input → placeholder #cbcbcb, typed text navy ====== */
/* Over-ride V3.4's wildcard `panel *` rule by matching panel ancestor chain. */
main > section:nth-of-type(1) .border.border-line.rounded-md.bg-background input[type="text"],
main > section:nth-of-type(1) .border.border-line.rounded-md.bg-background input[type="email"],
main > section:nth-of-type(1) .border.border-line.rounded-md.bg-background input[type="search"],
main > section:nth-of-type(1) .border.border-line.rounded-md.bg-background input:not([type]),
main > section:nth-of-type(1) .border.border-line.rounded-md.bg-background textarea,
main > section:nth-of-type(1) .border.border-line.rounded-md.bg-background select,
main > section:nth-of-type(1) input[type="text"],
main > section:nth-of-type(1) input[type="email"],
main > section:nth-of-type(1) input[type="search"],
main > section:nth-of-type(1) input:not([type]),
main > section:nth-of-type(1) textarea,
main > section:nth-of-type(1) select {
  color: #101049 !important;
  background: rgba(255,255,255,0.86) !important;  /* solid-ish white so navy text reads */
  border: 1px solid rgba(255,255,255,0.40) !important;
}
main > section:nth-of-type(1) input[type="text"]::placeholder,
main > section:nth-of-type(1) input[type="search"]::placeholder,
main > section:nth-of-type(1) input[type="email"]::placeholder,
main > section:nth-of-type(1) input:not([type])::placeholder,
main > section:nth-of-type(1) textarea::placeholder {
  color: #cbcbcb !important;
  opacity: 1 !important;
}

/* === Note 15: Dropdown menus → glass + soft shadow + lt-blue hover ==== */
/* Field itself: lighter glass, light shadow, matching corner radius */
main > section:nth-of-type(1) .border.border-line.rounded-md.bg-background select,
main > section:nth-of-type(1) select {
  background: rgba(255,255,255,0.92) !important;
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  border-radius: 8px !important;  /* match form field radius */
  box-shadow: 0 1px 4px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.5);
  transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}
main > section:nth-of-type(1) select:hover {
  border-color: var(--gu-blue) !important;
  box-shadow: 0 2px 8px rgba(92,193,255,0.18), inset 0 1px 0 rgba(255,255,255,0.5);
}
/* The dropdown OPTIONS panel (browser-rendered). Note: <select> popup
   is OS-painted in most browsers — we can only style option rows for
   color/background, not full glass. We do what's possible. */
main > section:nth-of-type(1) select option {
  background: rgba(255,255,255,0.97) !important;
  color: #101049 !important;
  padding: 10px !important;
}
/* Region picker custom listbox (if Radix/Combobox-rendered) */
[role="listbox"],
[data-radix-popper-content-wrapper] [role="listbox"] {
  background: rgba(15, 18, 42, 0.55) !important;
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.14) !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 28px rgba(0,0,0,0.22) !important;
  color: #cbcbcb !important;
}
[role="listbox"] [role="option"],
[role="listbox"] li {
  color: #cbcbcb !important;
  transition: background 140ms ease, color 140ms ease;
}
[role="listbox"] [role="option"]:hover,
[role="listbox"] [role="option"][data-highlighted],
[role="listbox"] li:hover {
  background: rgba(92,193,255,0.18) !important;
  color: var(--gu-blue) !important;
}

/* === Note 12: Proof Point headings → Title Case ====================== */
/* Headings are <div class="display-md text-ink"> inside the panel.
   They look like h3 but are divs. Need to target by display-md class
   within the proof points panel. */
main > section:nth-of-type(1) .border.border-line.rounded-md.bg-background .display-md,
main > section:nth-of-type(1) .col-span-12.lg\:col-span-4 .display-md {
  text-transform: capitalize !important;
}

/* === Note 13: Proof Point accent lines → light blue + hover animation = */
/* The lines are `<div class="border-l border-brand pl-4">` inside `space-y-5`.
   V3.4 line 320-330 made the panel translucent — accent lines inherit
   border-brand which is blue. We pin to --gu-blue explicitly and add
   hover animation. */
main > section:nth-of-type(1) .border.border-line.rounded-md.bg-background .border-l,
main > section:nth-of-type(1) .col-span-12.lg\:col-span-4 .border-l {
  border-left-color: var(--gu-blue) !important;
  border-left-width: 2px !important;
  padding-left: 16px !important;
  transition: border-left-width 220ms ease, transform 220ms ease,
              padding-left 220ms ease;
  position: relative;
}
main > section:nth-of-type(1) .border.border-line.rounded-md.bg-background .border-l:hover,
main > section:nth-of-type(1) .col-span-12.lg\:col-span-4 .border-l:hover {
  border-left-width: 4px !important;
  padding-left: 18px !important;
  transform: translateX(2px);
}
/* Subtle blue glow beside the line on hover */
main > section:nth-of-type(1) .border.border-line.rounded-md.bg-background .border-l::before,
main > section:nth-of-type(1) .col-span-12.lg\:col-span-4 .border-l::before {
  content: "";
  position: absolute;
  left: -2px; top: 0; bottom: 0;
  width: 2px;
  background: var(--gu-blue);
  filter: blur(6px);
  opacity: 0;
  transition: opacity 220ms ease;
  pointer-events: none;
}
main > section:nth-of-type(1) .border.border-line.rounded-md.bg-background .border-l:hover::before,
main > section:nth-of-type(1) .col-span-12.lg\:col-span-4 .border-l:hover::before {
  opacity: 0.5;
}

/* === Note 18: Proof Points panel — lock against form interactions ==== */
/* Pin the column to start; use sticky so layout shifts on the left
   column (form expanding) don't push the right column vertically. */
main > section:nth-of-type(1) .col-span-12.lg\:col-span-4 {
  align-self: start !important;
}
main > section:nth-of-type(1) .col-span-12.lg\:col-span-4 > .border.border-line.rounded-md.bg-background {
  position: sticky;
  top: 130px;
  contain: layout style;
}

/* === Note 11: KPI strip → all white + soft-lift hover ================ */
main > section:nth-of-type(1) .border-l.border-line.pl-6.py-2,
main > section:nth-of-type(1) div[class*="border-l"][class*="pl-6"][class*="py-2"] {
  transition: transform 260ms cubic-bezier(.2,.7,.3,1),
              box-shadow 260ms ease;
  border-radius: 6px;
  cursor: default;
  border-left-color: var(--gu-blue) !important;
  border-left-width: 2px !important;
}
main > section:nth-of-type(1) .border-l.border-line.pl-6.py-2:hover,
main > section:nth-of-type(1) div[class*="border-l"][class*="pl-6"][class*="py-2"]:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 22px rgba(0,0,0,0.22);
}
main > section:nth-of-type(1) .border-l.border-line.pl-6.py-2,
main > section:nth-of-type(1) .border-l.border-line.pl-6.py-2 *,
main > section:nth-of-type(1) div[class*="border-l"][class*="pl-6"][class*="py-2"],
main > section:nth-of-type(1) div[class*="border-l"][class*="pl-6"][class*="py-2"] * {
  color: #ffffff !important;
}

/* === V3.5 Pass A — Lucide line icons (Section 1: Position, Section 4: Choose Your Next Step) ===
   Light-blue (#5cc1ff), 1.5px stroke, 26x26, injected via ::before on each card.
   Lucide-style SVGs as inline data URIs. Stroke uses currentColor via the
   data URI color encoding. Position: above the 01/02/03 number on dark band,
   above the eyebrow on light decision cards. */

/* --- THE POSITION (Section index 1 = nth-of-type(2)) ----------------- */
/* Each card is div.border-l.border-[hsl(220,10%,28%)].pl-5 inside the
   md:grid-cols-3 grid. Three cards in order: Identify, Exploit, Subordinate. */

/* V3.5b: numbers above icons. The first child of each .border-l card is the
   numeric label (01/02/03). We give the card extra top padding (to make room
   for the icon BELOW the number), then absolutely position the ::before icon
   just below the number. The number sits at the natural top of the card. */
main > section:nth-of-type(2) div.grid.md\:grid-cols-3 > div.border-l {
  position: relative !important;
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}
main > section:nth-of-type(2) div.grid.md\:grid-cols-3 > div.border-l > *:first-child {
  margin-bottom: 46px !important;
}
main > section:nth-of-type(2) div.grid.md\:grid-cols-3 > div.border-l::before {
  content: "" !important;
  position: absolute !important;
  top: 32px !important;
  left: 20px !important;
  width: 33px !important;
  height: 33px !important;
  background-repeat: no-repeat !important;
  background-size: 33px 33px !important;
  background-position: center !important;
  opacity: 1 !important;
  transition: transform 200ms ease, opacity 200ms ease !important;
}
main > section:nth-of-type(2) div.grid.md\:grid-cols-3 > div.border-l:hover::before {
  transform: translateY(-2px) !important;
}

/* Card 1: Identify -> Lucide search (magnifier) */
main > section:nth-of-type(2) div.grid.md\:grid-cols-3 > div.border-l:nth-child(1)::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='33' height='33' viewBox='0 0 24 24' fill='none' stroke='%235cc1ff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><path d='m21 21-4.3-4.3'/></svg>") !important;
}

/* Card 2: Exploit -> Lucide target */
main > section:nth-of-type(2) div.grid.md\:grid-cols-3 > div.border-l:nth-child(2)::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='33' height='33' viewBox='0 0 24 24' fill='none' stroke='%235cc1ff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><circle cx='12' cy='12' r='6'/><circle cx='12' cy='12' r='2'/></svg>") !important;
}

/* Card 3: Subordinate -> Lucide git-merge (lines converging) */
main > section:nth-of-type(2) div.grid.md\:grid-cols-3 > div.border-l:nth-child(3)::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='33' height='33' viewBox='0 0 24 24' fill='none' stroke='%235cc1ff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='18' cy='18' r='3'/><circle cx='6' cy='6' r='3'/><path d='M6 21V9a9 9 0 0 0 9 9'/></svg>") !important;
}

/* --- CHOOSE YOUR NEXT STEP (Section index 4 = nth-of-type(5)) -------- */
/* Decision cards: a.group.block.bg-background.border.border-line.rounded-md.p-7
   Three cards in order: Understand the Problem, Review the Proof, Start a Conversation. */

main > section:nth-of-type(5) a.group.block.bg-background.border.border-line.rounded-md.p-7 {
  position: relative !important;
  padding-top: 60px !important;
}
main > section:nth-of-type(5) a.group.block.bg-background.border.border-line.rounded-md.p-7::before {
  content: "" !important;
  position: absolute !important;
  top: 28px !important;
  left: 28px !important;
  width: 28px !important;
  height: 28px !important;
  background-repeat: no-repeat !important;
  background-size: 28px 28px !important;
  background-position: center !important;
  transition: transform 200ms ease !important;
}
main > section:nth-of-type(5) a.group.block.bg-background.border.border-line.rounded-md.p-7:hover::before {
  transform: translateY(-2px) !important;
}

/* Card 1: Understand the Problem -> Lucide help-circle */
main > section:nth-of-type(5) .grid > a.group.block.bg-background.border.border-line.rounded-md.p-7:nth-child(1)::before,
main > section:nth-of-type(5) a.group.block.bg-background.border.border-line.rounded-md.p-7:nth-of-type(1)::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='none' stroke='%235cc1ff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/><path d='M12 17h.01'/></svg>") !important;
}

/* Card 2: Review the Proof -> Lucide bar-chart-3 */
main > section:nth-of-type(5) .grid > a.group.block.bg-background.border.border-line.rounded-md.p-7:nth-child(2)::before,
main > section:nth-of-type(5) a.group.block.bg-background.border.border-line.rounded-md.p-7:nth-of-type(2)::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='none' stroke='%235cc1ff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M3 3v18h18'/><path d='M7 16v-5'/><path d='M12 16V8'/><path d='M17 16v-3'/></svg>") !important;
}

/* Card 3: Start a Conversation -> Lucide message-square */
main > section:nth-of-type(5) .grid > a.group.block.bg-background.border.border-line.rounded-md.p-7:nth-child(3)::before,
main > section:nth-of-type(5) a.group.block.bg-background.border.border-line.rounded-md.p-7:nth-of-type(3)::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='none' stroke='%235cc1ff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/></svg>") !important;
}

/* =====================================================================
   V3.5k BATCH (Inline edits 13, 14, 15) — 2026-05-22
   - Edit 13: THE POSITION cards need 3px breathing room between
     icon/number, heading, and paragraph.
   - Edit 14: GLOBAL — headings on white BG should be navy #23408f.
   - Edit 15: GLOBAL — all section/section-display headings Title Case.
   ===================================================================== */

/* --- Edit 13: 3px spacing inside each Position card --------------------
   Card DOM (in flow):  [number 01] -> [heading Identify] -> [paragraph]
   The icon is ::before (absolute, top:32px) tucked between number and heading,
   so the gaps the user sees are: number/icon-area -> heading, and heading -> para.
   Add 3px to heading top/bottom margins.
   NOTE: an earlier rule sets first-child margin-bottom:46px to make room for
   the absolute icon. We keep that, and add +3px on top of the heading and below
   it so each visible element gets the requested breathing. */
main > section:nth-of-type(2) div.grid.md\:grid-cols-3 > div.border-l > *:nth-child(2) {
  margin-top: 3px !important;
  margin-bottom: 3px !important;
}
main > section:nth-of-type(2) div.grid.md\:grid-cols-3 > div.border-l > p,
main > section:nth-of-type(2) div.grid.md\:grid-cols-3 > div.border-l > *:nth-child(3) {
  margin-top: 3px !important;
}

/* --- Edit 14: GLOBAL — headings on white BG → #23408f ------------------
   White-BG zones on the site: any section that is NOT the hero (nth-of-type 1,
   which is dark navy) and NOT the dark CTA band / footer. The body bg is white,
   so headings outside the hero+footer+dark bands inherit white-bg context.
   We pin h1/h2/h3 + display-* + font-display headings to navy in those areas. */
main > section:not(:nth-of-type(1)) h1,
main > section:not(:nth-of-type(1)) h2,
main > section:not(:nth-of-type(1)) h3,
main > section:not(:nth-of-type(1)) h4,
main > section:not(:nth-of-type(1)) .display-hero,
main > section:not(:nth-of-type(1)) .display-xl,
main > section:not(:nth-of-type(1)) .display-lg,
main > section:not(:nth-of-type(1)) .display-md,
main > section:not(:nth-of-type(1)) .display-sm,
main > section:not(:nth-of-type(1)) .font-display {
  color: #23408f !important;
}
/* Belt-and-braces: explicitly EXCLUDE dark-band sections (the navy CTA band
   was section 8 in V3.4; if a section carries .band-dark it must stay white). */
main > section.band-dark h1,
main > section.band-dark h2,
main > section.band-dark h3,
main > section.band-dark h4,
main > section.band-dark .display-hero,
main > section.band-dark .display-xl,
main > section.band-dark .display-lg,
main > section.band-dark .display-md,
main > section.band-dark .display-sm,
main > section.band-dark .font-display,
footer.band-dark h1,
footer.band-dark h2,
footer.band-dark h3,
footer.band-dark .font-display,
footer.band-dark .display-hero,
footer.band-dark .display-xl,
footer.band-dark .display-lg,
footer.band-dark .display-md,
footer.band-dark .display-sm {
  color: #ffffff !important;
}

/* --- Edit 15: GLOBAL — all headings Title Case -------------------------
   Earlier rules capitalized the hero h1, proof-points display-md, and eyebrows.
   Promote to a single global rule covering all heading classes everywhere.
   `capitalize` in CSS title-cases each word. */
h1, h2, h3, h4, h5, h6,
.display-hero, .display-xl, .display-lg, .display-md, .display-sm,
.font-display {
  text-transform: capitalize !important;
}

/* === End V3.5k =========================================================*/

/* =====================================================================
   V3.5l BATCH (Inline edits 16, 17) — 2026-05-22
   - Edit 16: GLOBAL — paragraph text color #0d082d.
   - Edit 17: Header nav — force single line, generous gap to avoid
     mis-clicks, underlined light-blue link styling.
   ===================================================================== */

/* --- Edit 16: GLOBAL paragraph text → #0d082d -------------------------
   Applies to <p> everywhere EXCEPT zones whose background is dark navy
   (hero, dark CTA band, footer) — readability requires those to stay white. */
p,
main p,
main p.lead,
main p:not(.tabular):not(.eyebrow) {
  color: #0d082d !important;
}
/* Re-assert white paragraph color in dark zones. */
main > section:nth-of-type(1) p,
main > section:nth-of-type(1) p *,
main > section.band-dark p,
main > section.band-dark p *,
footer.band-dark p,
footer.band-dark p *,
footer p {
  color: #ffffff !important;
}
/* Hero proof-point panel paragraphs are inside the dark hero, so keep white. */
main > section:nth-of-type(1) .border.border-line.rounded-md.bg-background p,
main > section:nth-of-type(1) .col-span-12.lg\:col-span-4 p {
  color: #ffffff !important;
}

/* --- Edit 17: Header nav — single line, generous spacing, underlined --
   The nav is `nav[aria-label="Primary"]` with .hidden.lg:flex.items-center.gap-1
   wrapping `<button data-testid="nav-link-...">` items. After the logo grew to
   66px the flex was squeezing button labels onto multiple lines. Force nowrap
   on every label + widen gap to ~20px so adjacent click areas stay distinct. */
header nav[aria-label="Primary"] {
  gap: 4px !important;
  flex-wrap: nowrap !important;
}
header nav[aria-label="Primary"] button,
header nav[aria-label="Primary"] a {
  white-space: nowrap !important;
  flex: 0 0 auto !important;
  padding-left: 14px !important;
  padding-right: 14px !important;
  /* Underlined link styling per request. Use thin underline + offset so it
     reads as a link, not a heavy bar. */
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 6px !important;
  text-decoration-color: var(--gu-blue) !important;
}
/* At-top (transparent header) — light-blue underlined links over the navy hero. */
header.sticky:not([data-scrolled="true"]) nav[aria-label="Primary"] button,
header.sticky:not([data-scrolled="true"]) nav[aria-label="Primary"] a {
  color: var(--gu-blue) !important;
  text-decoration-color: var(--gu-blue) !important;
}
header.sticky:not([data-scrolled="true"]) nav[aria-label="Primary"] button:hover,
header.sticky:not([data-scrolled="true"]) nav[aria-label="Primary"] a:hover {
  color: #ffffff !important;
  text-decoration-color: #ffffff !important;
}
/* Scrolled (white header) — light-blue underline persists, navy hover. */
header.sticky[data-scrolled="true"] nav[aria-label="Primary"] button,
header.sticky[data-scrolled="true"] nav[aria-label="Primary"] a {
  color: var(--gu-blue) !important;
  text-decoration-color: var(--gu-blue) !important;
}
header.sticky[data-scrolled="true"] nav[aria-label="Primary"] button:hover,
header.sticky[data-scrolled="true"] nav[aria-label="Primary"] a:hover {
  color: var(--gu-navy) !important;
  text-decoration-color: var(--gu-navy) !important;
}
/* Reduce font-size very slightly so 8 single-line items fit + breathe at 1440px. */
header nav[aria-label="Primary"] button,
header nav[aria-label="Primary"] a {
  font-size: 13.5px !important;
}

/* === End V3.5l =========================================================*/

/* =====================================================================
   V3.5m BATCH (Inline edits 18, 19, 20) — 2026-05-22
   - Edit 18: Hero eyebrow — reduce font-size by 25%.
   - Edit 19: Proof-points panel aligns with the form bottom.
   - Edit 20: Hero background — navy-to-blue gradient.
   ===================================================================== */

/* --- Edit 18 REVERTED: hero eyebrow returns to original size --------- */
/* (Earlier −25% shrink rolled back per user request.) */

/* --- Edit 19 (UI best practices): visual harmony for proof panel --------
   Goal: balance the proof panel with the form column without forced stretch.
   Best-practice approach:
   • Consistent vertical rhythm — equal `gap` between proof items based on a
     4px baseline (24px). No `justify-content: space-between` which creates
     uneven "floaty" gaps.
   • Card padding matches the form's p-7 (28px) so both cards read as a pair.
   • Top of panel anchored to top of form column via the grid's default
     align-items: stretch on the row. Panel grows naturally to its content;
     remaining whitespace lives at the bottom of the form column rather than
     being injected between items.
   • Heading + para sizes restored close to baseline so hierarchy reads. */
main > section:nth-of-type(1) .col-span-12.lg\:col-span-4 {
  align-self: start !important;  /* anchor to top of row, not stretch */
}
main > section:nth-of-type(1) .col-span-12.lg\:col-span-4 > .bg-background.border.border-line.rounded-md {
  padding: 28px !important;
  width: 100% !important;
}
/* Equal 24px gap between items (consistent rhythm). */
main > section:nth-of-type(1) .col-span-12.lg\:col-span-4 .space-y-5 > * + * {
  margin-top: 24px !important;
}
main > section:nth-of-type(1) .col-span-12.lg\:col-span-4 .display-md {
  font-size: 19px !important;
  line-height: 1.2 !important;
  margin-bottom: 0 !important;
}
main > section:nth-of-type(1) .col-span-12.lg\:col-span-4 .border-l p {
  font-size: 12.5px !important;
  line-height: 1.45 !important;
  margin-top: 4px !important;
}

/* --- Edit 20 (revised): hero gradient — #25408e top → #0d082d bottom ----
   User-specified stops. Both are navy-family; the visual effect is a deep
   navy fade rather than a navy-to-light-blue progression. Mouse-tracked
   highlight on top remains via --mx / --my. */
main > section:nth-of-type(1) {
  background:
    radial-gradient(60% 55% at var(--mx) var(--my), rgba(92,193,255,0.16) 0%, rgba(92,193,255,0.05) 35%, transparent 75%),
    linear-gradient(180deg, #25408e 0%, #0d082d 100%) !important;
}

/* === End V3.5m =========================================================*/

/* =====================================================================
   V3.5o BATCH (Inline edits 21, 22) — 2026-05-22
   - Edit 21: Logo −5%.
   - Edit 22: Nav titles white, no underline (overrides edit 17 styling).
   ===================================================================== */

/* --- Edit 22: nav links — white over dark hero, no underline ----------
   At-top (transparent header over navy hero) → white text.
   Scrolled (white header) → navy text for legibility.
   Underline removed in both states. */
header nav[aria-label="Primary"] button,
header nav[aria-label="Primary"] a {
  text-decoration: none !important;
}
header.sticky:not([data-scrolled="true"]) nav[aria-label="Primary"] button,
header.sticky:not([data-scrolled="true"]) nav[aria-label="Primary"] a {
  color: #ffffff !important;
  text-decoration: none !important;
}
header.sticky:not([data-scrolled="true"]) nav[aria-label="Primary"] button:hover,
header.sticky:not([data-scrolled="true"]) nav[aria-label="Primary"] a:hover {
  color: var(--gu-blue) !important;
  text-decoration: none !important;
}
header.sticky[data-scrolled="true"] nav[aria-label="Primary"] button,
header.sticky[data-scrolled="true"] nav[aria-label="Primary"] a {
  color: var(--gu-navy) !important;
  text-decoration: none !important;
}
header.sticky[data-scrolled="true"] nav[aria-label="Primary"] button:hover,
header.sticky[data-scrolled="true"] nav[aria-label="Primary"] a:hover {
  color: var(--gu-blue) !important;
  text-decoration: none !important;
}

/* === End V3.5o =========================================================*/

/* =====================================================================
   V3.5p — Hero BG overlay image (universtock blue ridges) at 80% — 2026-05-22
   - Apply the supplied image as a background overlay on the hero, on top
     of the navy gradient, at 80% opacity.
   - Use a NEW ::after layer so the existing ::before (subtle radial
     accents) and the mouse-tracked gradient stay intact.
   - z-index ordering inside the hero:
       gradient (section background)         z: auto / 0
       ::before radial accents               z: 0
       ::after image overlay (80%)           z: 1  ← NEW
       canvas particles                      z: ~1
       content (> div)                       z: 2
   ===================================================================== */
main > section:nth-of-type(1)::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('./img/hero-bg-ridges.jpg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 0.8;
  pointer-events: none;
  z-index: 1;
}
/* Ensure foreground content sits above the new overlay. */
main > section:nth-of-type(1) > div { z-index: 2 !important; position: relative; }
#gu-hero-canvas { z-index: 1 !important; }

/* === End V3.5p =========================================================*/

/* =====================================================================
   V3.5q — Navigator response panel: blue text + light-blue highlights
   2026-05-22  (user edit 23: "Form text should be blue and the highlight
                should be light blue")
   - Target the response container rendered on Start: data-testid=
     "navigator-search-results" (and its inner option/result cards).
   - Currently the hero (dark) branch renders pale-grey text on dark which
     reads as low-contrast pinkish over the new image overlay.
   - Switch the panel to a light/glass card treatment so navy text reads:
       backgrounds  → white / translucent white
       body text    → #23408f (navy on white)
       headings/    → #23408f (navy on white)
         card titles
       eyebrow      → #5cc1ff (light blue — the "highlight")
       borders      → light blue at 30% (subtle accent)
   ===================================================================== */
/* NOTE: earlier V3.5 batches set hero-nested text to rgb(179,179,179) /
   rgb(207,207,207) with !important using long ancestor selectors that
   include `main > section:nth-of-type(1) div.rounded-md...`. To beat them,
   we prefix our rules with the same hero ancestor + chain extra selectors
   to win on specificity. */
main > section:nth-of-type(1) [data-testid="navigator-search-results"][data-testid="navigator-search-results"] {
  background: rgba(255, 255, 255, 0.96) !important;
  border-color: rgba(92, 193, 255, 0.45) !important;
  box-shadow: 0 12px 40px rgba(13, 8, 45, 0.25) !important;
}
/* Inner cards (Navigator response card + A useful next question + suggested options + prototype pages) */
main > section:nth-of-type(1) [data-testid="navigator-search-results"] > div,
main > section:nth-of-type(1) [data-testid="navigator-search-results"] > div > div,
main > section:nth-of-type(1) [data-testid="navigator-search-results"] [data-testid^="navigator-ai-option-"],
main > section:nth-of-type(1) [data-testid="navigator-search-results"] [data-testid^="navigator-result-"] {
  background: #ffffff !important;
  border-color: rgba(92, 193, 255, 0.35) !important;
}
/* Body / paragraph text inside the panel → navy */
main > section:nth-of-type(1) [data-testid="navigator-search-results"] p,
main > section:nth-of-type(1) [data-testid="navigator-search-results"] p[class],
main > section:nth-of-type(1) [data-testid="navigator-search-results"] [data-testid^="navigator-ai-option-"] > div,
main > section:nth-of-type(1) [data-testid="navigator-search-results"] [data-testid^="navigator-result-"] > div {
  color: #23408f !important;
}
/* Card titles (font-semibold first child of option/result links) → stronger navy */
main > section:nth-of-type(1) [data-testid="navigator-search-results"] [data-testid^="navigator-ai-option-"] > div:first-child,
main > section:nth-of-type(1) [data-testid="navigator-search-results"] [data-testid^="navigator-result-"] > div:first-child,
main > section:nth-of-type(1) [data-testid="navigator-search-results"] [data-testid^="navigator-ai-option-"] > div.text-ink,
main > section:nth-of-type(1) [data-testid="navigator-search-results"] [data-testid^="navigator-result-"] > div.text-ink {
  color: #23408f !important;
  font-weight: 600 !important;
}
/* Card descriptions → slightly lighter navy/ink for hierarchy */
main > section:nth-of-type(1) [data-testid="navigator-search-results"] [data-testid^="navigator-ai-option-"] > div:nth-child(2),
main > section:nth-of-type(1) [data-testid="navigator-search-results"] [data-testid^="navigator-result-"] > div:nth-child(2),
main > section:nth-of-type(1) [data-testid="navigator-search-results"] [data-testid^="navigator-ai-option-"] > div.text-ink-2,
main > section:nth-of-type(1) [data-testid="navigator-search-results"] [data-testid^="navigator-result-"] > div.text-ink-2 {
  color: #0d082d !important;
}
/* Eyebrows / accents → LIGHT BLUE (the "highlight") */
main > section:nth-of-type(1) [data-testid="navigator-search-results"] .eyebrow,
main > section:nth-of-type(1) [data-testid="navigator-search-results"] .eyebrow-dark,
main > section:nth-of-type(1) [data-testid="navigator-search-results"] .font-mono.uppercase,
main > section:nth-of-type(1) [data-testid="navigator-search-results"] [class*="uppercase"][class*="tracking-"] {
  color: #5cc1ff !important;
  letter-spacing: 0.12em !important;
}
/* "Other useful pages in the prototype:" intro line */
main > section:nth-of-type(1) [data-testid="navigator-search-results"] > div:not(:first-child) > div:first-child:not([data-testid]) {
  color: #23408f !important;
}
/* Hover state on option / result cards → light-blue border lift */
main > section:nth-of-type(1) [data-testid="navigator-search-results"] [data-testid^="navigator-ai-option-"]:hover,
main > section:nth-of-type(1) [data-testid="navigator-search-results"] [data-testid^="navigator-result-"]:hover {
  border-color: #5cc1ff !important;
  box-shadow: 0 6px 20px rgba(92, 193, 255, 0.25) !important;
  transform: translateY(-1px);
  transition: all 180ms ease;
}
/* The search input inside the form itself — also force blue text + light-blue accent placeholder */
main > section:nth-of-type(1) [data-testid="input-navigator-search"] {
  color: #23408f !important;
}
main > section:nth-of-type(1) [data-testid="input-navigator-search"]::placeholder {
  color: rgba(92, 193, 255, 0.7) !important;
}

/* === End V3.5q =========================================================*/

/* =====================================================================
   V3.5r BATCH (Inline edits 24, 25, 26) — 2026-05-22
   - Edit 24: GLOBAL — paragraph text on blue/navy backgrounds is always
              white. The earlier Edit 16 reassert only covered hero,
              band-dark and footer; THE POSITION (section 2) was missed.
              We add an opt-in `.gu-on-dark` hook AND explicitly cover
              every existing dark section so this is genuinely global.
   - Edit 25: ABOUT section CTAs ("About Goldratt UK", "Our approach",
              "Methodology") → inline word-links in light blue, no
              outlines/fills, all on one line.
   - Edit 26: ABOUT diagram panel → scroll fade-up + stagger animation
              (paired with overrides.js update that flips `.gu-in`).
   ===================================================================== */

/* --- Edit 24: GLOBAL paragraph-on-dark = white -------------------------
   Rule: any paragraph inside a section that visually reads as dark (navy
   gradient, navy fill, or carries `.band-dark` / new `.gu-on-dark` hook)
   MUST be white. This supplements/overrides the Edit 16 global which
   set <p> to #0d082d. We extend the dark-zone reassert. */
/* SPECIFICITY NOTE: Edit 16's `main p:not(.tabular):not(.eyebrow)` has
   specificity (0,2,2). To beat it on dark sections we boost selectors
   with duplicated class hooks and inner-div paths so each rule lands
   at (0,3,3)+ and reliably wins. */
main > section.band-dark p:not(.tabular):not(.eyebrow),
main > section.band-dark p:not(.tabular):not(.eyebrow) *,
main > section:nth-of-type(1) p:not(.tabular):not(.eyebrow),
main > section:nth-of-type(1) p:not(.tabular):not(.eyebrow) *,
main > section:nth-of-type(2) p:not(.tabular):not(.eyebrow),
main > section:nth-of-type(2) p:not(.tabular):not(.eyebrow) *,
main > section.gu-on-dark p:not(.tabular):not(.eyebrow),
main > section.gu-on-dark p:not(.tabular):not(.eyebrow) *,
footer.band-dark p:not(.tabular):not(.eyebrow),
footer.band-dark p:not(.tabular):not(.eyebrow) *,
footer p:not(.tabular):not(.eyebrow) {
  color: #ffffff !important;
}
/* But: keep the Navigator response panel (which we just turned WHITE in V3.5q)
   showing navy text — it sits inside section 1 (dark) but has a light bg. */
main > section:nth-of-type(1) [data-testid="navigator-search-results"] p,
main > section:nth-of-type(1) [data-testid="navigator-search-results"] p * {
  color: #23408f !important;
}

/* --- Edit 25: ABOUT section CTAs → inline word-links ------------------
   The three CTAs sit in `main > section:nth-of-type(3) div.mt-8.flex.flex-wrap.gap-3`.
   Currently the first is filled (bg-ink text-background), the others are
   outlined pill-style. Convert ALL three to inline light-blue word links
   with no chrome, and force the row to a single line. */
main > section:nth-of-type(3) div.mt-8.flex.flex-wrap.gap-3 {
  flex-wrap: nowrap !important;
  gap: 28px !important;
  align-items: baseline !important;
  margin-top: 1.25rem !important;
}
main > section:nth-of-type(3) div.mt-8.flex.flex-wrap.gap-3 > a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  height: auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #5cc1ff !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  text-decoration: none !important;
  box-shadow: none !important;
  white-space: nowrap !important;
  transition: color 180ms ease;
}
main > section:nth-of-type(3) div.mt-8.flex.flex-wrap.gap-3 > a:hover {
  color: #23408f !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  text-decoration-thickness: 1.5px !important;
}
/* Keep arrow icons — just match link color */
main > section:nth-of-type(3) div.mt-8.flex.flex-wrap.gap-3 > a svg {
  color: currentColor !important;
  width: 14px !important;
  height: 14px !important;
}

/* --- Edit 26: ABOUT diagram panel → scroll fade-up animation ----------
   The diagram lives in `main > section:nth-of-type(3) .min-h-[420px]`.
   Add a fade-up + slight scale-in trigger when it enters viewport.
   Inner cards ("Organisation", "Approach", "Method") + orbit pills get a
   staggered reveal. JS adds `.gu-in` when in view (extended in overrides.js). */
main > section:nth-of-type(3) .min-h-\[420px\].gu-fade {
  opacity: 0;
  transform: translateY(28px) scale(0.985);
  transition: opacity 720ms cubic-bezier(.2,.7,.2,1),
              transform 720ms cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform;
}
main > section:nth-of-type(3) .min-h-\[420px\].gu-fade.gu-in {
  opacity: 1;
  transform: translateY(0) scale(1);
}
/* Stagger the three left-column cards (Organisation/Approach/Method) */
main > section:nth-of-type(3) .min-h-\[420px\] .space-y-4 > .gu-fade {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 600ms ease, transform 600ms ease;
}
main > section:nth-of-type(3) .min-h-\[420px\] .space-y-4 > .gu-fade.gu-in {
  opacity: 1;
  transform: translateY(0);
}
main > section:nth-of-type(3) .min-h-\[420px\] .space-y-4 > *:nth-child(1).gu-fade { transition-delay: 180ms; }
main > section:nth-of-type(3) .min-h-\[420px\] .space-y-4 > *:nth-child(2).gu-fade { transition-delay: 320ms; }
main > section:nth-of-type(3) .min-h-\[420px\] .space-y-4 > *:nth-child(3).gu-fade { transition-delay: 460ms; }
/* Stagger the orbit pills (Pressure / Clarity / Action / Proof) */
main > section:nth-of-type(3) .min-h-\[420px\] .relative > .absolute.gu-fade,
main > section:nth-of-type(3) .min-h-\[420px\] [class*="rounded-full"].gu-fade {
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 500ms ease, transform 500ms cubic-bezier(.34,1.56,.64,1);
}
main > section:nth-of-type(3) .min-h-\[420px\] .relative > .absolute.gu-fade.gu-in,
main > section:nth-of-type(3) .min-h-\[420px\] [class*="rounded-full"].gu-fade.gu-in {
  opacity: 1;
  transform: scale(1);
}

/* =====================================================================
   V3.5s BATCH (Visual aid for ABOUT section) — 2026-05-22
   - Replace clinical white orbit diagram with the reference-style
     visual aid: dark navy panel with electric-blue light trails
     converging to a bright nexus ("the constraint"), photographed in
     long-exposure aesthetic.
   - Recolor inner cards (Organisation/Approach/Method) as glass-on-dark
     so they read on the new background.
   - Recolor orbit pills (Pressure/Clarity/Action/Proof) + central disc
     ("Focus / The constraint") for the dark background.
   - Add a "nexus pulse" scroll-triggered reveal that builds on Edit 26.
   ===================================================================== */

/* --- Panel chrome: dark navy + image background ----------------------- */
main > section:nth-of-type(3) div.min-h-\[420px\] {
  background-color: #0d082d !important;
  background-image:
    linear-gradient(135deg, rgba(16,16,73,0.55) 0%, rgba(13,8,45,0.65) 60%, rgba(6,11,39,0.85) 100%),
    url('./img/about-constraint-nexus.jpg') !important;
  background-size: cover, cover !important;
  background-position: center, center right !important;
  background-repeat: no-repeat, no-repeat !important;
  border-color: rgba(92,193,255,0.18) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 24px 60px -20px rgba(6,11,39,0.55) !important;
  position: relative !important;
  overflow: hidden !important;
}
/* Subtle vignette + scanline texture on top of the image */
main > section:nth-of-type(3) div.min-h-\[420px\]::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 80% at 72% 55%, rgba(92,193,255,0.18) 0%, rgba(92,193,255,0) 55%),
    radial-gradient(60% 60% at 50% 100%, rgba(6,11,39,0.55) 0%, rgba(6,11,39,0) 70%);
  pointer-events: none;
  z-index: 1;
}
/* All children sit above the overlay */
main > section:nth-of-type(3) div.min-h-\[420px\] > * {
  position: relative;
  z-index: 2;
}

/* --- Inner left-column cards (Organisation / Approach / Method) ------- */
main > section:nth-of-type(3) div.min-h-\[420px\] .space-y-4 > div {
  background: rgba(13,8,45,0.55) !important;
  border: 1px solid rgba(92,193,255,0.22) !important;
  backdrop-filter: blur(10px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(120%) !important;
  border-radius: 10px !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 8px 24px -10px rgba(6,11,39,0.55) !important;
  transition: transform 240ms ease, border-color 240ms ease, background 240ms ease !important;
}
main > section:nth-of-type(3) div.min-h-\[420px\] .space-y-4 > div:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(92,193,255,0.5) !important;
  background: rgba(16,16,73,0.7) !important;
}
/* Card text */
main > section:nth-of-type(3) div.min-h-\[420px\] .space-y-4 > div h3,
main > section:nth-of-type(3) div.min-h-\[420px\] .space-y-4 > div > div:first-child,
main > section:nth-of-type(3) div.min-h-\[420px\] .space-y-4 > div [class*="eyebrow"],
main > section:nth-of-type(3) div.min-h-\[420px\] .space-y-4 > div .text-muted,
main > section:nth-of-type(3) div.min-h-\[420px\] .space-y-4 > div .text-sm:first-child {
  color: #5cc1ff !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}
main > section:nth-of-type(3) div.min-h-\[420px\] .space-y-4 > div p,
main > section:nth-of-type(3) div.min-h-\[420px\] .space-y-4 > div p * {
  color: #ffffff !important;
  font-weight: 500 !important;
}

/* --- Central "Focus / The constraint" disc --------------------------- */
main > section:nth-of-type(3) div.min-h-\[420px\] .relative .rounded-full[class*="bg-ink"],
main > section:nth-of-type(3) div.min-h-\[420px\] .relative > div.rounded-full:not([class*="absolute"]) {
  background: radial-gradient(circle at 35% 30%, #ffffff 0%, #cfe8ff 15%, #5cc1ff 50%, #2a7fc4 100%) !important;
  color: #0d082d !important;
  box-shadow:
    0 0 0 6px rgba(92,193,255,0.12),
    0 0 0 16px rgba(92,193,255,0.06),
    0 0 60px 8px rgba(92,193,255,0.45),
    0 0 120px 16px rgba(92,193,255,0.2) !important;
  border: 1px solid rgba(255,255,255,0.5) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,0.4) !important;
}
main > section:nth-of-type(3) div.min-h-\[420px\] .relative .rounded-full[class*="bg-ink"] *,
main > section:nth-of-type(3) div.min-h-\[420px\] .relative > div.rounded-full:not([class*="absolute"]) * {
  color: #0d082d !important;
}

/* --- Orbit halo rings (the concentric circles around the center) ----- */
main > section:nth-of-type(3) div.min-h-\[420px\] .relative > div.absolute.rounded-full:not([class*="px-"]) {
  border-color: rgba(92,193,255,0.35) !important;
  border-width: 1px !important;
  background: transparent !important;
  box-shadow: 0 0 24px rgba(92,193,255,0.15) inset !important;
}

/* --- Orbit label pills (Pressure / Clarity / Action / Proof) --------- */
main > section:nth-of-type(3) div.min-h-\[420px\] .relative .absolute[class*="rounded-full"][class*="px-"],
main > section:nth-of-type(3) div.min-h-\[420px\] .relative [class*="rounded-full"][class*="px-3"],
main > section:nth-of-type(3) div.min-h-\[420px\] .relative [class*="rounded-full"][class*="px-4"] {
  background: rgba(13,8,45,0.85) !important;
  border: 1px solid rgba(92,193,255,0.45) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  box-shadow:
    0 0 0 3px rgba(92,193,255,0.06),
    0 8px 20px -8px rgba(6,11,39,0.6) !important;
  transition: transform 240ms ease, border-color 240ms ease, box-shadow 240ms ease !important;
}
main > section:nth-of-type(3) div.min-h-\[420px\] .relative .absolute[class*="rounded-full"][class*="px-"]:hover {
  transform: scale(1.06) !important;
  border-color: #5cc1ff !important;
  box-shadow:
    0 0 0 5px rgba(92,193,255,0.12),
    0 0 24px rgba(92,193,255,0.4) !important;
}

/* --- Hide any leftover background grid / svg lines that don't suit -- */
main > section:nth-of-type(3) div.min-h-\[420px\] > svg:first-of-type,
main > section:nth-of-type(3) div.min-h-\[420px\] > div[class*="bg-grid"],
main > section:nth-of-type(3) div.min-h-\[420px\] > div[class*="opacity"][class*="absolute"]:not(.gu-fade):not([class*="rounded-full"]) {
  display: none !important;
}

/* --- Nexus pulse: an extra slow throb on the central disc once in view */
@keyframes gu-nexus-pulse {
  0%   { box-shadow: 0 0 0 6px rgba(92,193,255,0.12), 0 0 0 16px rgba(92,193,255,0.06), 0 0 60px 8px rgba(92,193,255,0.45), 0 0 120px 16px rgba(92,193,255,0.2); }
  50%  { box-shadow: 0 0 0 10px rgba(92,193,255,0.18), 0 0 0 24px rgba(92,193,255,0.10), 0 0 90px 14px rgba(92,193,255,0.65), 0 0 160px 26px rgba(92,193,255,0.3); }
  100% { box-shadow: 0 0 0 6px rgba(92,193,255,0.12), 0 0 0 16px rgba(92,193,255,0.06), 0 0 60px 8px rgba(92,193,255,0.45), 0 0 120px 16px rgba(92,193,255,0.2); }
}
main > section:nth-of-type(3) div.min-h-\[420px\].gu-in .relative > div.rounded-full:not([class*="absolute"]),
main > section:nth-of-type(3) div.min-h-\[420px\].gu-in .relative .rounded-full[class*="bg-ink"] {
  animation: gu-nexus-pulse 3.6s ease-in-out 800ms infinite !important;
}

/* --- Light-trail "draw-in" effect: zoom + brightness on the panel BG */
main > section:nth-of-type(3) div.min-h-\[420px\].gu-fade {
  background-size: cover, 115% auto !important;
  filter: brightness(0.7) saturate(0.85);
  transition: opacity 720ms cubic-bezier(.2,.7,.2,1),
              transform 720ms cubic-bezier(.2,.7,.2,1),
              background-size 1600ms cubic-bezier(.2,.7,.2,1),
              filter 1600ms cubic-bezier(.2,.7,.2,1) !important;
}
main > section:nth-of-type(3) div.min-h-\[420px\].gu-fade.gu-in {
  background-size: cover, 100% auto !important;
  filter: brightness(1) saturate(1);
}

/* === End V3.5s ========================================================*/

/* =====================================================================
   V3.5t BATCH (Mega-menu: Results dropdown) — 2026-05-22
   Per annotated screenshot (image-6.jpg):
   1) Eyebrow labels (Results / By sector / By outcome)  → #23408f navy
   2) "Pattern" eyebrow on the dark feature card        → hide entirely
   3) Dark feature card BG                              → #23408f navy
      + ALL text inside it forced white (global rule)
   4) "Go to Results" arrow-link                        → #5cc1ff light blue
   5) "Industry results" / "Outcome results" link text  → #101049 deep navy
      + their description text also deep navy with appropriate weight

   The mega-menu panel root selector is `.mega-panel`.
   ===================================================================== */

/* (1) Column eyebrow labels in the mega-menu → brand navy */
.mega-panel .eyebrow {
  color: #23408f !important;
}

/* (2) Hide the "Pattern" eyebrow on the feature card */
.mega-panel .bg-ink .eyebrow,
.mega-panel [class*="bg-ink"] > .eyebrow:first-child,
.mega-panel .bg-ink > div.eyebrow {
  display: none !important;
}

/* (3) Dark feature card → brand navy + white text everywhere inside */
.mega-panel .bg-ink,
.mega-panel [class*="bg-ink"] {
  background-color: #23408f !important;
  color: #ffffff !important;
}
.mega-panel .bg-ink *,
.mega-panel [class*="bg-ink"] * {
  color: #ffffff !important;
}
/* Make sure the heading and body paragraphs inside the card win even
   against more-specific Tailwind text-* utilities (specificity-aware). */
.mega-panel .bg-ink h1,
.mega-panel .bg-ink h2,
.mega-panel .bg-ink h3,
.mega-panel .bg-ink h4,
.mega-panel .bg-ink p,
.mega-panel .bg-ink p:not(.tabular):not(.eyebrow),
.mega-panel .bg-ink a,
.mega-panel .bg-ink span,
.mega-panel .bg-ink div,
.mega-panel .bg-ink li {
  color: #ffffff !important;
}
/* Subtle border + lift to suit the new navy card */
.mega-panel .bg-ink {
  border: 1px solid rgba(92,193,255,0.18) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 14px 36px -16px rgba(13,8,45,0.45) !important;
}

/* (4) "Go to Results" → light blue word link */
/* This anchor sits next to the H3 ("Proof, by outcome and by sector.")
   in the intent column. Match by classes + text fallback. */
.mega-panel a.arrow-link.link-underline:not(.text-background):not([class*="text-"]) ,
.mega-panel > div > div.container-x .col-span-3 a.arrow-link,
.mega-panel a[href$="/results"].arrow-link {
  color: #5cc1ff !important;
  text-decoration-color: #5cc1ff !important;
}
.mega-panel a.arrow-link.link-underline:not(.text-background):hover,
.mega-panel a[href$="/results"].arrow-link:hover {
  color: #23408f !important;
  text-decoration-color: #23408f !important;
}
/* The white-card arrow-link (Go to Results) is currently rendering white
   because it carries `arrow-link` whose default uses `color: inherit`
   and inherits from a parent painted white. Force light blue here too. */
.mega-panel .col-span-3 a,
.mega-panel .col-span-3 a * {
  color: #5cc1ff !important;
}
.mega-panel .col-span-3 a:hover,
.mega-panel .col-span-3 a:hover * {
  color: #23408f !important;
}

/* (5) "Industry results" / "Outcome results" link anchors → deep navy */
.mega-panel ul.space-y-2 li a,
.mega-panel ul.space-y-3 li a,
.mega-panel [class*="col-span-6"] ul li a,
.mega-panel [class*="col-span-6"] ul li a * {
  color: #101049 !important;
  font-weight: 600 !important;
}
.mega-panel ul.space-y-2 li a:hover,
.mega-panel ul.space-y-3 li a:hover,
.mega-panel [class*="col-span-6"] ul li a:hover {
  color: #23408f !important;
}
/* Their description text below the link → also deep navy, lighter weight */
.mega-panel ul.space-y-2 li,
.mega-panel ul.space-y-3 li,
.mega-panel [class*="col-span-6"] ul li,
.mega-panel [class*="col-span-6"] ul li p,
.mega-panel [class*="col-span-6"] ul li div:not(.eyebrow),
.mega-panel [class*="col-span-6"] ul li span {
  color: #101049 !important;
}
.mega-panel [class*="col-span-6"] ul li p,
.mega-panel [class*="col-span-6"] ul li > div:not(.eyebrow):not(:has(a)) {
  font-weight: 400 !important;
  opacity: 0.75;
}

/* Also: the main intent headline ("Proof, by outcome and by sector.") is
   currently `display-lg text-ink`. We don't recolor it — the user only
   annotated items 1-5 above. Keep as-is. */

/* === End V3.5t ========================================================*/

/* =====================================================================
   V3.5u BATCH (Industries section: 4 image-forward sector cards)
   2026-05-22
   - Use the reference layout (image-7.jpg): each card has a real
     photographic background image with a navy gradient overlay so the
     sector eyebrow + sector name read at bottom-left.
   - Eyebrow text swap: "Industry" → Title-Case "Sector · 01" through 04
     via display:none + ::before pseudo on the parent.
   - Order: Defence (01) → Aerospace (02) → MRO (03) → Local Government (04)
     (already matches DOM order).
   - Subtle image zoom on hover.
   ===================================================================== */

/* Card image area gets a real photo. The cards live inside the Industries
   section (section 4). We target by data-testid + the aria-disabled
   article variants so all 4 are covered. */

/* Common: hide the existing grid-lines overlay (we want the photo clean) */
main > section:nth-of-type(4) .grid-lines-dark {
  display: none !important;
}

/* Common card chrome: photo bg + navy gradient overlay for legibility */
main > section:nth-of-type(4) [data-testid^="card-industry"] .aspect-\[16\/10\],
main > section:nth-of-type(4) article[data-testid^="card-industry"] .aspect-\[16\/10\] {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  position: relative !important;
  overflow: hidden !important;
}
/* Inner gradient overlay so the bottom text reads on any photo */
main > section:nth-of-type(4) [data-testid^="card-industry"] .aspect-\[16\/10\]::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg,
      rgba(13,8,45,0)   0%,
      rgba(13,8,45,0)   45%,
      rgba(13,8,45,0.45) 75%,
      rgba(13,8,45,0.80) 100%);
  pointer-events: none;
  z-index: 1;
}
/* All direct children of .aspect should sit above the ::after overlay
   without changing their existing position (Tailwind .absolute must stay
   absolute). We bump z-index only. */
main > section:nth-of-type(4) [data-testid^="card-industry"] .aspect-\[16\/10\] > * {
  z-index: 2 !important;
}
main > section:nth-of-type(4) [data-testid^="card-industry"] .aspect-\[16\/10\] > .absolute {
  position: absolute !important;
}

/* Per-card image assignments + Title-Case sector eyebrow text */

/* 01 Defence */
main > section:nth-of-type(4) [data-testid="card-industry--industries-defence"] .aspect-\[16\/10\] {
  background-image: url('./img/industry-defence.jpg?v=v39e') !important;
  background-color: #0d082d !important;
}
main > section:nth-of-type(4) [data-testid="card-industry--industries-defence"] .aspect-\[16\/10\] .eyebrow {
  font-size: 0 !important;     /* hide "Industry" */
  letter-spacing: normal !important;
  text-transform: none !important;
}
main > section:nth-of-type(4) [data-testid="card-industry--industries-defence"] .aspect-\[16\/10\] .eyebrow::before {
  content: "Sector \00B7  01";
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  text-transform: none !important;        /* Title Case */
  color: #5cc1ff !important;
  font-weight: 600 !important;
  display: inline-block;
}

/* 02 Aerospace */
main > section:nth-of-type(4) [data-testid="card-industry--industries-aerospace-disabled"] .aspect-\[16\/10\] {
  background-image: url('./img/industry-aerospace.jpg?v=v39e') !important;
  background-color: #0d082d !important;
}
main > section:nth-of-type(4) [data-testid="card-industry--industries-aerospace-disabled"] .aspect-\[16\/10\] .eyebrow {
  font-size: 0 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}
main > section:nth-of-type(4) [data-testid="card-industry--industries-aerospace-disabled"] .aspect-\[16\/10\] .eyebrow::before {
  content: "Sector \00B7  02";
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  text-transform: none !important;
  color: #5cc1ff !important;
  font-weight: 600 !important;
  display: inline-block;
}

/* 03 MRO */
main > section:nth-of-type(4) [data-testid="card-industry--industries-mro-disabled"] .aspect-\[16\/10\] {
  background-image: url('./img/industry-mro.jpg?v=v39e') !important;
  background-color: #0d082d !important;
}
main > section:nth-of-type(4) [data-testid="card-industry--industries-mro-disabled"] .aspect-\[16\/10\] .eyebrow {
  font-size: 0 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}
main > section:nth-of-type(4) [data-testid="card-industry--industries-mro-disabled"] .aspect-\[16\/10\] .eyebrow::before {
  content: "Sector \00B7  03";
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  text-transform: none !important;
  color: #5cc1ff !important;
  font-weight: 600 !important;
  display: inline-block;
}

/* 04 Local Government */
main > section:nth-of-type(4) [data-testid="card-industry--industries-local-government-disabled"] .aspect-\[16\/10\] {
  background-image: url('./img/industry-local-government.jpg?v=v39e') !important;
  background-color: #0d082d !important;
}
main > section:nth-of-type(4) [data-testid="card-industry--industries-local-government-disabled"] .aspect-\[16\/10\] .eyebrow {
  font-size: 0 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}
main > section:nth-of-type(4) [data-testid="card-industry--industries-local-government-disabled"] .aspect-\[16\/10\] .eyebrow::before {
  content: "Sector \00B7  04";
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  text-transform: none !important;
  color: #5cc1ff !important;
  font-weight: 600 !important;
  display: inline-block;
}

/* Sector NAME styling on photo: white, slight text-shadow for legibility */
main > section:nth-of-type(4) [data-testid^="card-industry"] .aspect-\[16\/10\] h3 {
  color: #ffffff !important;
  text-shadow: 0 2px 8px rgba(13,8,45,0.5), 0 1px 2px rgba(13,8,45,0.3) !important;
  font-weight: 700 !important;
}

/* Hover: subtle image zoom on the photo area (zoom the bg, not the card) */
main > section:nth-of-type(4) a[data-testid^="card-industry"] .aspect-\[16\/10\] {
  transition: background-size 600ms cubic-bezier(.2,.7,.2,1) !important;
  background-size: 105% auto !important;
}
main > section:nth-of-type(4) a[data-testid^="card-industry"]:hover .aspect-\[16\/10\] {
  background-size: 112% auto !important;
}
/* Disabled article cards: gentler hover (still allow zoom since image is
   the main draw) but keep the opacity-70 dim */
main > section:nth-of-type(4) article[data-testid^="card-industry"]:hover .aspect-\[16\/10\] {
  background-size: 108% auto !important;
}

/* === End V3.5u ========================================================*/

/* =====================================================================
   V3.5v BATCH (Footer logo enlargement)
   2026-05-22
   - User: "enlarge the footer logo. Double its current size - 25%"
   - Interpreting: ~1.75× current size (≈ double minus 25%).
   - Current rendered height: 28px (inline) → target 49px.
   - Use a high-specificity selector to override the inline style attr.
   ===================================================================== */
footer img.gu-logo[data-gu-logo="1"],
footer span[aria-label="Goldratt UK"] img.gu-logo {
  height: 49px !important;
  width: auto !important;
}
/* Bump the optical gap between the mark and the wordmark a touch so the
   bigger logo doesn't collide with the "GOLDRATT UK" wordmark text. */
footer span[aria-label="Goldratt UK"] {
  gap: 14px !important;
}
/* === End V3.5v ========================================================*/

/* =====================================================================
   V3.5w BATCH — INNER-PAGE STANDARDIZATION  (2026-05-22)
   Two queued inline edits, applied globally to every page EXCEPT home:

   EDIT 1: Hero starts at the very top, full width & height.
           The header sits transparently over the hero gradient instead
           of on a white strip. Breadcrumb chrome floats on top of the
           gradient too.

   EDIT 2: All header/heading text and eyebrows that sit on a blue /
           navy / gradient background read WHITE, never navy-on-navy.

   SCOPE DETECTOR: "inner page" = a <main> whose first child is the
     breadcrumb strip (`div.container-x.pt-6.pb-2`). Home page's first
     <main> child is a hero <section>, so this :has() never matches.
   ===================================================================== */

/* ---- EDIT 1: full-bleed hero on inner pages -------------------------- */

/* 1a. The page wrapper `.min-h-screen.bg-background` paints WHITE behind
      the header on inner pages. Make it transparent so the dark body bg
      (var(--gu-navy-5)) shows through, then we let the hero gradient
      paint over it. Scoped via single-level :has() so the home page
      (whose <main> starts with a <section>, not a breadcrumb <div>) is
      never matched. NOTE: nested :has() (`:has(... :has(...))`) is
      unsupported in the deployed Chromium and silently drops the whole
      rule, so we keep it single-level. */
div.min-h-screen.bg-background:has(main > div.container-x.pt-6.pb-2:first-child) {
  background: transparent !important;
}

/* 1b. Pull the hero section (the 2nd main child, has class .bg-surface)
      UP under the header + breadcrumb so it visually starts at viewport
      top.  Header is 69px tall, breadcrumb adds another ~80px; total
      ~150px to absorb. Use negative margin and matching extra padding
      so the visible hero copy stays where it was. */
main:has(> div.container-x.pt-6.pb-2:first-child) > div.container-x.pt-6.pb-2:first-child {
  position: relative;
  z-index: 2;
  background: transparent !important;
  margin-top: -69px;        /* slide breadcrumb under the header */
  padding-top: calc(69px + 24px) !important; /* restore visual top space */
}
main:has(> div.container-x.pt-6.pb-2:first-child) > div.container-x.pt-6.pb-2:first-child + section {
  margin-top: -149px;       /* pull hero up under breadcrumb + header */
  padding-top: calc(149px + 4rem) !important; /* restore inner padding so
                                                  copy stays positioned */
  position: relative;
  z-index: 1;
}

/* 1c. Breadcrumb chrome on the inner pages floats on the dark hero now,
      so every link / separator / current-page label has to be light.
      The breadcrumb lives in `nav` + a div with mono uppercase tracking. */
main:has(> div.container-x.pt-6.pb-2:first-child) > div.container-x.pt-6.pb-2:first-child,
main:has(> div.container-x.pt-6.pb-2:first-child) > div.container-x.pt-6.pb-2:first-child a,
main:has(> div.container-x.pt-6.pb-2:first-child) > div.container-x.pt-6.pb-2:first-child span,
main:has(> div.container-x.pt-6.pb-2:first-child) > div.container-x.pt-6.pb-2:first-child nav,
main:has(> div.container-x.pt-6.pb-2:first-child) > div.container-x.pt-6.pb-2:first-child div {
  color: rgba(255,255,255,0.85) !important;
}
main:has(> div.container-x.pt-6.pb-2:first-child) > div.container-x.pt-6.pb-2:first-child svg {
  color: rgba(255,255,255,0.65) !important;
  stroke: rgba(255,255,255,0.65) !important;
}
main:has(> div.container-x.pt-6.pb-2:first-child) > div.container-x.pt-6.pb-2:first-child a:hover {
  color: var(--gu-blue) !important;
}

/* ---- EDIT 2: white headings on every navy/gradient section ----------- */

/* The shared inner-section template renders as <section class="section">
   with a linear-gradient navy background. Force ALL text (h1-h6,
   .eyebrow, p, span, li, .lead) inside such a section to white. */
main:has(> div.container-x.pt-6.pb-2:first-child) section.section,
main:has(> div.container-x.pt-6.pb-2:first-child) section.section * {
  /* no-op anchor so the cascade is predictable */
}
main:has(> div.container-x.pt-6.pb-2:first-child) section.section h1,
main:has(> div.container-x.pt-6.pb-2:first-child) section.section h2,
main:has(> div.container-x.pt-6.pb-2:first-child) section.section h3,
main:has(> div.container-x.pt-6.pb-2:first-child) section.section h4,
main:has(> div.container-x.pt-6.pb-2:first-child) section.section h5,
main:has(> div.container-x.pt-6.pb-2:first-child) section.section h6,
main:has(> div.container-x.pt-6.pb-2:first-child) section.section .eyebrow,
main:has(> div.container-x.pt-6.pb-2:first-child) section.section [class*="eyebrow"],
main:has(> div.container-x.pt-6.pb-2:first-child) section.section .lead,
main:has(> div.container-x.pt-6.pb-2:first-child) section.section p:not(.tabular):not(.eyebrow),
main:has(> div.container-x.pt-6.pb-2:first-child) section.section li,
main:has(> div.container-x.pt-6.pb-2:first-child) section.section span:not(.text-brand) {
  color: #ffffff !important;
}
/* eyebrows above headings on dark sections take the light-blue accent
   so they read like the home page's eyebrow style */
main:has(> div.container-x.pt-6.pb-2:first-child) section.section .eyebrow,
main:has(> div.container-x.pt-6.pb-2:first-child) section.section [class*="eyebrow"] {
  color: var(--gu-blue) !important;
}

/* Also catch any inline-styled / utility-coloured headings that explicitly
   set Tailwind `text-ink` (navy) — these need to flip to white inside
   dark inner sections. */
main:has(> div.container-x.pt-6.pb-2:first-child) section.section .text-ink {
  color: #ffffff !important;
}

/* For the first inner-page hero (the bg-surface section that we pulled up)
   the H1 already renders white via earlier rules but ensure the .lead
   beneath it stays white-ish too. */
main:has(> div.container-x.pt-6.pb-2:first-child) > div.container-x.pt-6.pb-2:first-child + section h1,
main:has(> div.container-x.pt-6.pb-2:first-child) > div.container-x.pt-6.pb-2:first-child + section h2,
main:has(> div.container-x.pt-6.pb-2:first-child) > div.container-x.pt-6.pb-2:first-child + section .eyebrow,
main:has(> div.container-x.pt-6.pb-2:first-child) > div.container-x.pt-6.pb-2:first-child + section .lead,
main:has(> div.container-x.pt-6.pb-2:first-child) > div.container-x.pt-6.pb-2:first-child + section p:not(.tabular):not(.eyebrow) {
  color: #ffffff !important;
}
main:has(> div.container-x.pt-6.pb-2:first-child) > div.container-x.pt-6.pb-2:first-child + section .eyebrow {
  color: var(--gu-blue) !important;
}

/* ---- V3.5w3 NAVIGATOR CARVE-OUT --------------------------------------
   The white-text rule above cascades into the Navigator panel
   ([data-testid="navigator-search-results"]) and any other white card
   sitting INSIDE a dark section.section (e.g. .bg-background / .bg-surface
   / .bg-white descendants), making their buttons & body text illegible
   (white-on-light). Restore default ink colour inside these carve-outs.
   ---------------------------------------------------------------------- */
main:has(> div.container-x.pt-6.pb-2:first-child) section.section [data-testid="navigator-search-results"],
main:has(> div.container-x.pt-6.pb-2:first-child) section.section [data-testid="navigator-search-results"] *,
main:has(> div.container-x.pt-6.pb-2:first-child) section.section .bg-background,
main:has(> div.container-x.pt-6.pb-2:first-child) section.section .bg-background *,
main:has(> div.container-x.pt-6.pb-2:first-child) section.section .bg-surface,
main:has(> div.container-x.pt-6.pb-2:first-child) section.section .bg-surface *,
main:has(> div.container-x.pt-6.pb-2:first-child) section.section .bg-white,
main:has(> div.container-x.pt-6.pb-2:first-child) section.section .bg-white *,
main:has(> div.container-x.pt-6.pb-2:first-child) section.section .bg-card,
main:has(> div.container-x.pt-6.pb-2:first-child) section.section .bg-card * {
  color: hsl(var(--foreground)) !important;
}
/* Eyebrows / muted labels inside the carve-out keep their original mute */
main:has(> div.container-x.pt-6.pb-2:first-child) section.section [data-testid="navigator-search-results"] .eyebrow,
main:has(> div.container-x.pt-6.pb-2:first-child) section.section [data-testid="navigator-search-results"] [class*="eyebrow"],
main:has(> div.container-x.pt-6.pb-2:first-child) section.section .bg-background .eyebrow,
main:has(> div.container-x.pt-6.pb-2:first-child) section.section .bg-surface .eyebrow,
main:has(> div.container-x.pt-6.pb-2:first-child) section.section .bg-white .eyebrow {
  color: var(--gu-blue) !important;
}
/* Brand-coloured spans keep their brand colour */
main:has(> div.container-x.pt-6.pb-2:first-child) section.section .bg-background .text-brand,
main:has(> div.container-x.pt-6.pb-2:first-child) section.section .bg-surface .text-brand,
main:has(> div.container-x.pt-6.pb-2:first-child) section.section .bg-white .text-brand,
main:has(> div.container-x.pt-6.pb-2:first-child) section.section [data-testid="navigator-search-results"] .text-brand {
  color: var(--gu-blue) !important;
}

/* === End V3.5w ========================================================*/

/* === End V3.5r =========================================================*/

/* =====================================================================
   V3.5x — BACK-TO-TOP HOVER BUTTON (2026-05-22)
   Subtle floating button in the bottom-right that appears after the user
   scrolls past one viewport, fades out when they're back near the top.
   Restrained visual weight: small circle, soft navy fill, light-blue
   arrow, gentle hover lift. Pointer-events disabled while hidden so it
   never blocks anything underneath.
   ===================================================================== */
#gu-back-to-top {
  position: fixed;
  right: clamp(16px, 2.2vw, 28px);
  bottom: clamp(16px, 2.2vw, 28px);
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(13, 8, 45, 0.82);
  color: var(--gu-blue, #5cc1ff);
  border: 1px solid rgba(92, 193, 255, 0.28);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 8px 24px -10px rgba(6, 11, 39, 0.55);
  cursor: pointer;
  z-index: 60;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 220ms ease, transform 220ms ease,
              background 180ms ease, border-color 180ms ease;
}
#gu-back-to-top.is-visible {
  opacity: 0.92;
  transform: translateY(0);
  pointer-events: auto;
}
#gu-back-to-top:hover {
  opacity: 1;
  background: rgba(35, 64, 143, 0.95);
  border-color: rgba(92, 193, 255, 0.55);
  transform: translateY(-2px);
}
#gu-back-to-top:focus-visible {
  outline: 2px solid var(--gu-blue, #5cc1ff);
  outline-offset: 3px;
}
#gu-back-to-top svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* === End V3.5x ========================================================*/

/* === End V3.5 ========================================================= */

/* =====================================================================
   V3.5y BATCH — INNER-PAGE HERO BG + UI TIDY-UP (2026-05-22)
   Five queued edits resolved together:
     1. (later wins) Replace inner-page hero background with new
        AdobeStock curtain image — keep dark gradient overlay for
        text legibility, image fills full-bleed up to viewport top.
        Home page hero untouched.
     2. Make the secondary "Talk to the team" / outlined CTA text WHITE
        on inner pages — the Tailwind `text-background` token resolves
        too light against navy and renders invisible.
     3. Hide the "— Detailed prototype page" marker badge on every
        inner page (data-testid="prototype-page-marker").
     4. Nav logo height: 47.5px → 45.125px (handled inline at line ~807).
   ===================================================================== */

/* ---- V3.5y-1 (V3.6h override): Inner-page hero — NEW blue-ridge image.
   User (2026-05-22, screenshot AdobeStock_2006582169-1.jpg):
     "Add this image to the hero section of all the pages excluding the
      home page + make sure it fills the whole section starting at the
      very top."
   - Image: assets/img/inner-hero-bg.jpg (deep navy → cyan vertical blades)
   - Scope: only inner pages (detected via the breadcrumb div as <main>'s
     first child). Home page's <main> first child is a <section> so it is
     never matched and its own hero stays untouched.
   - The section is already pulled up -149px (line ~2188) so it tucks
     under the breadcrumb + header — image therefore visually starts at
     the very top of the viewport, full-bleed across the width.
   - Subtle dark gradient OVER the image so the white headline + .lead +
     breadcrumb chrome read cleanly. */
main:has(> div.container-x.pt-6.pb-2:first-child) > section.bg-surface:first-of-type {
  /* V3.6j: boost image visibility — remove competing navy base color so
     the photograph reads through fully; cover-sized so the cyan blades fill
     the entire hero. */
  background-color: transparent !important;
  background-image: url("assets/img/inner-hero-bg.jpg") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-attachment: scroll !important;
  position: relative;
}

/* Add a subtle dark overlay via ::before so the headline stays legible
   without washing out the image. ::after is reserved by V3.5z (set to
   content:none) so we use ::before here. */
main:has(> div.container-x.pt-6.pb-2:first-child) > section.bg-surface:first-of-type::before {
  /* V3.6j: very light overlay only at the bottom edge for CTA legibility.
     Top + middle stay clear so the cyan blades read crisp. */
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(180deg,
    rgba(6,11,39,0.00)  0%,
    rgba(6,11,39,0.00) 55%,
    rgba(6,11,39,0.15) 80%,
    rgba(6,11,39,0.35) 100%) !important;
  background-image: linear-gradient(180deg,
    rgba(6,11,39,0.00)  0%,
    rgba(6,11,39,0.00) 55%,
    rgba(6,11,39,0.15) 80%,
    rgba(6,11,39,0.35) 100%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
  display: block !important;
}
main:has(> div.container-x.pt-6.pb-2:first-child) > section.bg-surface:first-of-type > * {
  position: relative;
  z-index: 1;
}

/* Also kill any leftover ::after image overlay on the inner-page hero so
   the new blue-ridge image is the only photo showing through. (V3.5z
   already did this but lock it in alongside the new bg.) ::before is now
   used by us for the legibility overlay, so it is intentionally excluded. */
main:has(> div.container-x.pt-6.pb-2:first-child) > section.bg-surface:first-of-type::after {
  background-image: none !important;
}

/* ---- V3.5y-2 / V3.6j: Outlined / secondary CTA text → WHITE on inner heroes -- */
/* The shipped outline button on inner-page heroes uses either:
   - `border-line text-ink` (e.g. /what-we-solve "Talk to the team"), or
   - `border-[hsl(220,10%,30%)] text-background` (e.g. /about contact CTA).
   Both render dark text on the new blue-ridge photo. Force the text — and
   any nested svg/icon — to pure white. Scope: the inner-hero section only
   (the `bg-surface` first <section> directly under the inner-page <main>). */
main:has(> div.container-x.pt-6.pb-2:first-child) > section.bg-surface:first-of-type a[class*="border"],
main:has(> div.container-x.pt-6.pb-2:first-child) > section.bg-surface:first-of-type button[class*="border"],
main:has(> div.container-x.pt-6.pb-2:first-child) a.text-background,
main:has(> div.container-x.pt-6.pb-2:first-child) button.text-background,
main:has(> div.container-x.pt-6.pb-2:first-child) a[class*="border-[hsl(220,10%,30%)]"],
main:has(> div.container-x.pt-6.pb-2:first-child) button[class*="border-[hsl(220,10%,30%)]"] {
  color: #ffffff !important;
  border-color: rgba(255,255,255,0.5) !important;
}
main:has(> div.container-x.pt-6.pb-2:first-child) > section.bg-surface:first-of-type a[class*="border"] svg,
main:has(> div.container-x.pt-6.pb-2:first-child) > section.bg-surface:first-of-type a[class*="border"] svg *,
main:has(> div.container-x.pt-6.pb-2:first-child) > section.bg-surface:first-of-type button[class*="border"] svg,
main:has(> div.container-x.pt-6.pb-2:first-child) > section.bg-surface:first-of-type button[class*="border"] svg * {
  color: #ffffff !important;
  stroke: #ffffff !important;
  fill: currentColor !important;
}
main:has(> div.container-x.pt-6.pb-2:first-child) > section.bg-surface:first-of-type a[class*="border"]:hover,
main:has(> div.container-x.pt-6.pb-2:first-child) a.text-background:hover,
main:has(> div.container-x.pt-6.pb-2:first-child) button.text-background:hover {
  background: rgba(255,255,255,0.10) !important;
  border-color: rgba(255,255,255,0.7) !important;
  color: #ffffff !important;
}

/* ---- V3.5y-3: Hide "Detailed prototype page" badge ------------------- */
[data-testid="prototype-page-marker"] {
  display: none !important;
}

/* === End V3.5y =========================================================*/

/* =====================================================================
   V3.5z — Kill V3.5p hero-bg-ridges ::after overlay on INNER pages only.
   2026-05-22  (user: "Remove the hero image on all pages, excluding home")
   - V3.5p added a ::after layer painting hero-bg-ridges.jpg at 0.8 over
     `main > section:nth-of-type(1)`. That selector ALSO matches every
     inner page (their first <main> section IS section.bg-surface, since
     the breadcrumb is a <div> not a <section>), so the ridges still show
     even after V3.5z removed the explicit curtain image.
   - Scope: only inner pages (detected via the breadcrumb div as <main>'s
     first child). Home <main>'s first child is a <section> so the home
     hero keeps its ridges + canvas particles intact.
   ===================================================================== */
main:has(> div.container-x.pt-6.pb-2:first-child) > section:nth-of-type(1)::after,
main:has(> div.container-x.pt-6.pb-2:first-child) > section.bg-surface:first-of-type::after {
  content: none !important;
  background-image: none !important;
  display: none !important;
}
/* === End V3.5z =========================================================*/

/* =====================================================================
   V3.6 — INDUSTRIES section premium rebuild (HOME PAGE only)
   2026-05-22  (user reference screenshot, 4-up dark-photo card grid)
   Layout:
     header row    — left: eyebrow + display-xl headline (50% width)
                      right: centred description + "All industries ↗" blue link
     card grid     — 4 columns desktop, 2 columns md, 1 column sm
     card          — borderless; rounded 16/10 image fills card,
                      35% navy gradient over bottom, SECTOR · 0N eyebrow
                      + tiny mono-line icon + huge muted title sit at
                      bottom-left INSIDE the image, copy + link/status sit
                      OUTSIDE the image (on page bg) underneath.
     active card   — Defence: hover lift (-4px) + image brightness 1.05 +
                      arrow nudge on "Read the brief →"
     muted cards   — "Coming later in full site" in muted blue.
     section bg    — very low-opacity blueprint dot texture
   Scope: home only ("main:has(> section.bg-surface.relative.overflow-hidden:first-child)")
          but to keep selectors simple we target the Industries section via
          its testid signature (presence of card-industry--industries-defence).
   ===================================================================== */

/* Identify the Industries section by the presence of the Defence card */
section:has(> .container-x > .grid [data-testid="card-industry--industries-defence"]) {
  position: relative;
  overflow: hidden;
}
/* Very low-opacity blueprint dot grid behind the cards. 32px pitch, 1px dot. */
section:has(> .container-x > .grid [data-testid="card-industry--industries-defence"])::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(20, 33, 95, 0.10) 1px, transparent 1px);
  background-size: 32px 32px;
  background-position: 0 0;
  pointer-events: none;
  z-index: 0;
}
section:has(> .container-x > .grid [data-testid="card-industry--industries-defence"]) > .container-x {
  position: relative;
  z-index: 1;
}

/* ---- HEADER ROW ----------------------------------------------------- */
/* V3.6e Edit 1: INDUSTRIES eyebrow → Title case ("Industries") */
section:has([data-testid="card-industry--industries-defence"]) > .container-x > .grid:first-child .eyebrow {
  color: var(--gu-blue-2, #33b0ff) !important;
  letter-spacing: 0.08em !important;
  text-transform: capitalize !important;
  font-weight: 600 !important;
  font-size: 13px !important;
}
/* V3.6i Edit 1: Headline → darker navy-blue #23408f (was light blue) */
section:has([data-testid="card-industry--industries-defence"]) > .container-x > .grid:first-child h2.display-xl {
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.05 !important;
  color: #23408f !important;
  text-transform: none !important;
}
/* V3.6i Edit 2: Right column → LEFT-align (was right-aligned in V3.6e) */
section:has([data-testid="card-industry--industries-defence"]) > .container-x > .grid:first-child > div.lg\:col-span-5 {
  display: flex;
  flex-direction: column;
  align-items: flex-start !important;
  justify-content: flex-end;
  gap: 14px;
}
section:has([data-testid="card-industry--industries-defence"]) > .container-x > .grid:first-child > div.lg\:col-span-5 p {
  max-width: 320px;
  text-align: left !important;
  color: var(--gu-ink-2, #5b6478);
  font-size: 15px;
  line-height: 1.55;
  margin: 0;
}
/* Move the "All industries ↗" link out of the p flow if present, but section already
   has it as a sibling <a>. Force blue, weight, underline-on-hover. */
section:has([data-testid="card-industry--industries-defence"]) > .container-x > .grid:first-child > div.lg\:col-span-5 a {
  color: var(--gu-blue-2, #1f63ff) !important;
  font-weight: 600;
  text-decoration: none;
}
section:has([data-testid="card-industry--industries-defence"]) > .container-x > .grid:first-child > div.lg\:col-span-5 a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* If the right column doesn't contain a <p> yet (older markup wrapped it on
   the left), JS will move it. */

/* ---- CARD GRID ------------------------------------------------------ */
/* RESET the legacy full-bleed trick (V3.5 industries pass set width:100vw
   + margin-left:calc(50%-50vw)). We want the grid INSIDE the container.
   V3.6i Edit 3a: increase gap (28px → 44px) for more breathing room between
   sector cards. */
section:has([data-testid="card-industry--industries-defence"]) > .container-x > .grid:last-child {
  gap: 44px !important;
  position: relative;
  z-index: 1;
  width: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Kill the legacy ::before gradient + the bg-image-via-CSS on the aspect
   panel (we now use a real <img> + ::after gradient). */
section:has([data-testid="card-industry--industries-defence"]) [data-testid^="card-industry--industries-"] .aspect-\[16\/10\]::before {
  content: none !important;
  background: none !important;
  display: none !important;
}
section:has([data-testid="card-industry--industries-defence"]) [data-testid^="card-industry--industries-"] .aspect-\[16\/10\] {
  background-image: none !important;
}

/* Override legacy card scale-on-hover (V3.5 used transform: scale(1.02)) */
section:has([data-testid="card-industry--industries-defence"]) > .container-x > .grid:last-child > *:hover {
  transform: translateY(-4px) !important;
}

/* Kill the legacy white "card body below" treatment (was bg #fff + navy top
   border). We want transparent so copy sits on the page. */
section:has([data-testid="card-industry--industries-defence"]) [data-testid^="card-industry--industries-"] .p-6.bg-background {
  background: transparent !important;
  border-top: none !important;
}

/* Strip the white card body & border — cards become "image + outside text". */
section:has([data-testid="card-industry--industries-defence"]) [data-testid^="card-industry--industries-"] {
  border: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  display: flex !important;
  flex-direction: column;
  gap: 18px;
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1) !important;
}
section:has([data-testid="card-industry--industries-defence"]) a[data-testid="card-industry--industries-defence"]:hover {
  transform: translateY(-4px);
}

/* Image panel inside the card. The shipped markup uses .aspect-[16/10] */
section:has([data-testid="card-industry--industries-defence"]) [data-testid^="card-industry--industries-"] .aspect-\[16\/10\] {
  border-radius: 20px !important;
  overflow: hidden !important;
  position: relative;
  aspect-ratio: 4 / 5;  /* taller card matching reference */
  background: #0a1430 !important;
}
/* Hide the existing grid-lines-dark overlay so it doesn't fight the photo */
section:has([data-testid="card-industry--industries-defence"]) [data-testid^="card-industry--industries-"] .aspect-\[16\/10\] > .grid-lines-dark {
  display: none !important;
}

/* The injected <img.gu-industry-img> covers the panel, sub-cover, brightness
   smooths up to 1.05 on hover of the active card. */
section:has([data-testid="card-industry--industries-defence"]) [data-testid^="card-industry--industries-"] .aspect-\[16\/10\] img.gu-industry-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: filter 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
  z-index: 0;
}
section:has([data-testid="card-industry--industries-defence"]) a[data-testid="card-industry--industries-defence"]:hover .aspect-\[16\/10\] img.gu-industry-img {
  filter: brightness(1.05);
  transform: scale(1.02);
}
/* Muted (disabled) cards: tone the photo down a touch */
section:has([data-testid="card-industry--industries-defence"]) article[data-testid$="-disabled"] .aspect-\[16\/10\] img.gu-industry-img {
  filter: brightness(0.85) saturate(0.85);
}

/* Bottom gradient overlay for legibility: navy → transparent across bottom 50% */
section:has([data-testid="card-industry--industries-defence"]) [data-testid^="card-industry--industries-"] .aspect-\[16\/10\]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 55%;
  background: linear-gradient(180deg,
                rgba(6, 11, 39, 0) 0%,
                rgba(6, 11, 39, 0.55) 55%,
                rgba(6, 11, 39, 0.85) 100%);
  pointer-events: none;
  z-index: 1;
}

/* Title block sitting at bottom-left INSIDE the image */
section:has([data-testid="card-industry--industries-defence"]) [data-testid^="card-industry--industries-"] .aspect-\[16\/10\] > div.absolute {
  z-index: 2;
  left: 22px !important;
  right: 22px !important;
  bottom: 22px !important;
}
/* SECTOR eyebrow inside the image.
   V3.6i Edit 3b/c:
     - Mono-line ICON REMOVED (now hidden — JS still injects nothing).
     - Eyebrow text "Sector · 0N" in TITLE CASE (was UPPERCASE).
     - 5px extra space between eyebrow and the big title below. */
section:has([data-testid="card-industry--industries-defence"]) [data-testid^="card-industry--industries-"] .aspect-\[16\/10\] .eyebrow {
  color: rgba(255, 255, 255, 0.78) !important;
  letter-spacing: 0.12em !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
  margin-bottom: 15px !important;
}
/* Kill the legacy V3.5 ::before "Sector · 0N" pseudo-element content */
section:has([data-testid="card-industry--industries-defence"]) [data-testid^="card-industry--industries-"] .aspect-\[16\/10\] .eyebrow::before {
  content: none !important;
  display: none !important;
}
section:has([data-testid="card-industry--industries-defence"]) [data-testid^="card-industry--industries-"] .aspect-\[16\/10\] .eyebrow span {
  font-size: 11.5px !important;
  text-transform: none !important;
  letter-spacing: 0.12em !important;
  color: inherit !important;
}
/* HIDE the mono-line icon entirely (V3.6i Edit 3b). The JS may still
   inject it for backwards compat, but CSS removes it from layout. */
section:has([data-testid="card-industry--industries-defence"]) [data-testid^="card-industry--industries-"] .aspect-\[16\/10\] .eyebrow svg.gu-sector-icon {
  display: none !important;
}
/* Large muted title (override global capitalize — keep sentence-case from source) */
section:has([data-testid="card-industry--industries-defence"]) [data-testid^="card-industry--industries-"] .aspect-\[16\/10\] h3.display-lg {
  color: rgba(255, 255, 255, 0.82) !important;
  font-size: clamp(28px, 2.2vw, 36px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
  line-height: 1 !important;
  margin: 0 !important;
  text-transform: none !important;
}

/* ---- Card body BELOW image (copy + link/status) -------------------- */
section:has([data-testid="card-industry--industries-defence"]) [data-testid^="card-industry--industries-"] > div:not(.aspect-\[16\/10\]) {
  background: transparent !important;
  padding: 0 4px !important;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
section:has([data-testid="card-industry--industries-defence"]) [data-testid^="card-industry--industries-"] > div:not(.aspect-\[16\/10\]) p {
  color: var(--gu-ink-2, #5b6478) !important;
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
}

/* V3.6i Edit 3d: ALL card links → matched styling (underline + arrow icon).
   Previously V3.6e killed the underline; restore it so all 4 cards look
   identical (per reference: "Read the brief →" underlined + arrow). The
   muted cards' "Coming later in full site" text gets the same treatment. */
section:has([data-testid="card-industry--industries-defence"]) [data-testid^="card-industry--industries-"] > div:not(.aspect-\[16\/10\]) .arrow-link,
section:has([data-testid="card-industry--industries-defence"]) article[data-testid$="-disabled"] > div:not(.aspect-\[16\/10\]) span.gu-coming-later {
  color: var(--gu-blue-2, #33b0ff) !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  border-bottom: 1.5px solid var(--gu-blue-2, #33b0ff) !important;
  padding-bottom: 2px !important;
  width: fit-content;
  transition: gap 0.25s cubic-bezier(0.2, 0.7, 0.2, 1), border-color 0.18s ease;
  margin-top: auto;  /* push link to bottom of the card body → even rows */
  text-decoration: none !important;
}
/* Defence link nudges on hover */
section:has([data-testid="card-industry--industries-defence"]) a[data-testid="card-industry--industries-defence"]:hover > div:not(.aspect-\[16\/10\]) .arrow-link {
  gap: 10px;
}
/* Muted/disabled cards: same colour, slightly dimmer for visual hierarchy */
section:has([data-testid="card-industry--industries-defence"]) article[data-testid$="-disabled"] > div:not(.aspect-\[16\/10\]) .arrow-link,
section:has([data-testid="card-industry--industries-defence"]) article[data-testid$="-disabled"] > div:not(.aspect-\[16\/10\]) span.gu-coming-later {
  opacity: 0.75;
}
/* HIDE the original plain "Coming later in full site" text node once JS
   replaces it with .gu-coming-later styled element. */
section:has([data-testid="card-industry--industries-defence"]) article[data-testid$="-disabled"] > div:not(.aspect-\[16\/10\]) .gu-coming-later-original {
  display: none !important;
}
/* Arrow icon sizing inside the styled link (for both .arrow-link svg and
   our injected .gu-coming-later svg) */
section:has([data-testid="card-industry--industries-defence"]) [data-testid^="card-industry--industries-"] > div:not(.aspect-\[16\/10\]) .arrow-link svg,
section:has([data-testid="card-industry--industries-defence"]) article[data-testid$="-disabled"] > div:not(.aspect-\[16\/10\]) span.gu-coming-later svg {
  width: 14px !important;
  height: 14px !important;
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 2 !important;
  display: inline-block !important;
}

/* V3.6e Edit 3 (continued): Even gaps — force card body to stretch and pin
   the link to the bottom regardless of how many lines of body copy exist. */
section:has([data-testid="card-industry--industries-defence"]) [data-testid^="card-industry--industries-"] {
  align-items: stretch;
}
section:has([data-testid="card-industry--industries-defence"]) [data-testid^="card-industry--industries-"] > div:not(.aspect-\[16\/10\]) {
  flex: 1 1 auto;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start;
}

/* Hide the SVG arrow icons that come pre-rendered in the link — we already
   add an arrow at the end of the text via content/visible glyph. */
section:has([data-testid="card-industry--industries-defence"]) a[data-testid="card-industry--industries-defence"] .arrow-link svg.lucide-arrow-right {
  display: inline-block;
  transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1);
}
section:has([data-testid="card-industry--industries-defence"]) a[data-testid="card-industry--industries-defence"]:hover .arrow-link svg.lucide-arrow-right {
  transform: translateX(3px);
}

/* Tighten vertical rhythm of the section */
section:has([data-testid="card-industry--industries-defence"]) > .container-x > .grid:first-child {
  margin-bottom: 48px !important;
}

/* === End V3.6 =========================================================*/

/* =====================================================================
   V3.6g BATCH (Mega-menu "What We Solve" panel) — 2026-05-22
   Per annotated screenshots 40 + 41:
   (1) Make headline + sub-headers in the white mega-panel → #23408f navy
   (2) Make the link rollover (hover) state → light blue #5cc1ff
   ===================================================================== */

/* (1) White-panel headline + any link-row headers → brand navy #23408f.
   Scoped to .mega-panel and excludes the dark feature card (bg-ink). */
.mega-panel h1:not(.bg-ink h1):not([class*="text-background"]),
.mega-panel h2:not(.bg-ink h2):not([class*="text-background"]),
.mega-panel h3:not(.bg-ink h3):not([class*="text-background"]),
.mega-panel h4:not(.bg-ink h4):not([class*="text-background"]),
.mega-panel [class*="display-"]:not(.bg-ink [class*="display-"]),
.mega-panel [class*="col-span-6"] ul li a,
.mega-panel [class*="col-span-6"] ul li a *,
.mega-panel ul.space-y-2 li a,
.mega-panel ul.space-y-3 li a {
  color: #23408f !important;
}

/* Belt-and-braces: catch the leftmost intent column headline too
   ("Start With The Problem You Face Today."). It is an h2/h3 with a
   display-* class — already covered above, but lock it in. */
.mega-panel > div > div.container-x [class*="col-span-3"]:first-child h1,
.mega-panel > div > div.container-x [class*="col-span-3"]:first-child h2,
.mega-panel > div > div.container-x [class*="col-span-3"]:first-child h3,
.mega-panel > div > div.container-x [class*="col-span-3"]:first-child [class*="display-"] {
  color: #23408f !important;
}

/* (2) Link rollover → light blue #5cc1ff (overrides V3.5t which set
   the hover to navy #23408f). Applies to the link rows in the centre
   columns of the white mega-panel. */
.mega-panel ul.space-y-2 li a:hover,
.mega-panel ul.space-y-2 li a:hover *,
.mega-panel ul.space-y-3 li a:hover,
.mega-panel ul.space-y-3 li a:hover *,
.mega-panel [class*="col-span-6"] ul li a:hover,
.mega-panel [class*="col-span-6"] ul li a:hover * {
  color: #5cc1ff !important;
  text-decoration-color: #5cc1ff !important;
  transition: color 0.18s ease;
}

/* Smooth the resting → hover transition for these link headers */
.mega-panel ul.space-y-2 li a,
.mega-panel ul.space-y-3 li a,
.mega-panel [class*="col-span-6"] ul li a {
  transition: color 0.18s ease !important;
}

/* === End V3.6g ========================================================*/

/* =====================================================================
   V3.7a — P0 LEGIBILITY REPAIR (2026-05-22)

   Fixes white-on-white and white-on-pale failure cases that landed
   accumulated under V3.5w (global "inner page section.section text =
   white") and V3.5l Edit 16 ("global p text = #0d082d"). Five bugs
   diagnosed against live DOM at goldrattuk.pplx.app:

     1. Inner-page light surface sections (e.g. "If You Start Here…")
        rendered as <section class="section bg-surface"> — V3.5w paints
        ALL text white inside section.section regardless of surface.
        Outcome: white headline + white body copy on #f7f9ff.

     2. Inner-page Insights masonry cards (.masonry-card) sit inside
        section.section. They have white background via custom CSS, but
        no .bg-background/.bg-surface class — so the V3.5w carve-out
        misses them. Outcome: white h3 + white p on white card.

     3. Link-list items in the "If You Start Here…" 4-column grid use
        border-t border-line py-2 gu-tilt and inherit the cascading
        white text from the parent section, despite the section being
        a light surface. Outcome: invisible "Project Management",
        "When projects overrun…", etc.

     4. Filled white pill buttons (a.bg-background.text-ink) anywhere
        — closer band, Results "By outcome", What-we-solve closer —
        resolve text-ink to hsl(var(--foreground)) which falls back to
        rgb(245,245,245) (near-white) under the SPA's dark scheme
        defaults. Outcome: white text on white pill — appears empty.

     5. The bottom "One Conversation" band's outline button "Talk to
        the team" was already fixed in V3.6j on bg-surface inner heroes,
        but the FILLED pill next to it on band-dark closer is still
        white-on-white. (Different selector path — V3.6j scoped to
        the inner hero, not the closer.)

   Approach: scoped, additive rules with higher specificity than the
   V3.5w cascade. No edits to historical blocks.
   ===================================================================== */

/* ---- Fix 1 + 3 ───────────────────────────────────────────────────────
   Inner-page LIGHT surface sections (.section.bg-surface) — restore
   ink on headings, paragraphs and link rows. Beats V3.5w (specificity
   0,3,3) by adding the .bg-surface anchor to the chain → (0,4,3).
   ──────────────────────────────────────────────────────────────────── */

main:has(> div.container-x.pt-6.pb-2:first-child) section.section.bg-surface h1,
main:has(> div.container-x.pt-6.pb-2:first-child) section.section.bg-surface h2,
main:has(> div.container-x.pt-6.pb-2:first-child) section.section.bg-surface h3,
main:has(> div.container-x.pt-6.pb-2:first-child) section.section.bg-surface h4,
main:has(> div.container-x.pt-6.pb-2:first-child) section.section.bg-surface h5,
main:has(> div.container-x.pt-6.pb-2:first-child) section.section.bg-surface h6,
main:has(> div.container-x.pt-6.pb-2:first-child) section.section.bg-surface .display-hero,
main:has(> div.container-x.pt-6.pb-2:first-child) section.section.bg-surface .display-xl,
main:has(> div.container-x.pt-6.pb-2:first-child) section.section.bg-surface .display-lg,
main:has(> div.container-x.pt-6.pb-2:first-child) section.section.bg-surface .display-md,
main:has(> div.container-x.pt-6.pb-2:first-child) section.section.bg-surface .display-sm,
main:has(> div.container-x.pt-6.pb-2:first-child) section.section.bg-surface .text-ink,
main:has(> div.container-x.pt-6.pb-2:first-child) section.section.bg-surface p:not(.tabular):not(.eyebrow),
main:has(> div.container-x.pt-6.pb-2:first-child) section.section.bg-surface li,
main:has(> div.container-x.pt-6.pb-2:first-child) section.section.bg-surface a:not(.bg-brand):not(.bg-ink):not([class*="text-brand"]),
main:has(> div.container-x.pt-6.pb-2:first-child) section.section.bg-surface a:not(.bg-brand):not(.bg-ink):not([class*="text-brand"]) * {
  color: #0b1838 !important;
}
/* Section-level eyebrow keeps brand blue */
main:has(> div.container-x.pt-6.pb-2:first-child) section.section.bg-surface .eyebrow,
main:has(> div.container-x.pt-6.pb-2:first-child) section.section.bg-surface [class*="eyebrow"] {
  color: var(--gu-blue) !important;
}
/* Tabular meta (Sep 2025 · 6 min) keeps a muted ink-2 */
main:has(> div.container-x.pt-6.pb-2:first-child) section.section.bg-surface .tabular,
main:has(> div.container-x.pt-6.pb-2:first-child) section.section.bg-surface .text-ink-2 {
  color: #5b6378 !important;
}
/* Brand-coloured links stay brand */
main:has(> div.container-x.pt-6.pb-2:first-child) section.section.bg-surface .text-brand,
main:has(> div.container-x.pt-6.pb-2:first-child) section.section.bg-surface [class*="text-brand"] {
  color: var(--gu-blue) !important;
}
/* Hover on link rows → brand */
main:has(> div.container-x.pt-6.pb-2:first-child) section.section.bg-surface a:hover,
main:has(> div.container-x.pt-6.pb-2:first-child) section.section.bg-surface a:hover * {
  color: var(--gu-blue) !important;
}

/* ---- Fix 2 ───────────────────────────────────────────────────────────
   Insights masonry cards inside inner-page dark sections. The card
   itself is white via .masonry-card CSS rule (not Tailwind .bg-white),
   so V3.5w's carve-out misses it. Pin ink on every text descendant.
   Specificity (0,4,3) → beats V3.5w's (0,3,3).
   ──────────────────────────────────────────────────────────────────── */
main:has(> div.container-x.pt-6.pb-2:first-child) section.section a.masonry-card,
main:has(> div.container-x.pt-6.pb-2:first-child) section.section a.masonry-card h1,
main:has(> div.container-x.pt-6.pb-2:first-child) section.section a.masonry-card h2,
main:has(> div.container-x.pt-6.pb-2:first-child) section.section a.masonry-card h3,
main:has(> div.container-x.pt-6.pb-2:first-child) section.section a.masonry-card h4,
main:has(> div.container-x.pt-6.pb-2:first-child) section.section a.masonry-card .display-xl,
main:has(> div.container-x.pt-6.pb-2:first-child) section.section a.masonry-card .display-lg,
main:has(> div.container-x.pt-6.pb-2:first-child) section.section a.masonry-card .display-md,
main:has(> div.container-x.pt-6.pb-2:first-child) section.section a.masonry-card p,
main:has(> div.container-x.pt-6.pb-2:first-child) section.section a.masonry-card p *,
main:has(> div.container-x.pt-6.pb-2:first-child) section.section a.masonry-card .text-ink {
  color: #0b1838 !important;
}
main:has(> div.container-x.pt-6.pb-2:first-child) section.section a.masonry-card .eyebrow,
main:has(> div.container-x.pt-6.pb-2:first-child) section.section a.masonry-card [class*="eyebrow"] {
  color: var(--gu-blue) !important;
}
main:has(> div.container-x.pt-6.pb-2:first-child) section.section a.masonry-card .tabular,
main:has(> div.container-x.pt-6.pb-2:first-child) section.section a.masonry-card .text-ink-2 {
  color: #5b6378 !important;
}
main:has(> div.container-x.pt-6.pb-2:first-child) section.section a.masonry-card svg {
  color: #5b6378 !important;
  stroke: #5b6378 !important;
}
main:has(> div.container-x.pt-6.pb-2:first-child) section.section a.masonry-card:hover h1,
main:has(> div.container-x.pt-6.pb-2:first-child) section.section a.masonry-card:hover h2,
main:has(> div.container-x.pt-6.pb-2:first-child) section.section a.masonry-card:hover h3,
main:has(> div.container-x.pt-6.pb-2:first-child) section.section a.masonry-card:hover svg {
  color: var(--gu-blue) !important;
  stroke: var(--gu-blue) !important;
}

/* ---- Fix 4 + 5 ───────────────────────────────────────────────────────
   White-pill buttons (a.bg-background or a[class*="bg-background"])
   anywhere — closer bands, Results filter, mid-page CTAs. Force text
   to navy ink. Targets the FILLED white pill specifically; leaves the
   outline button (border-only) alone (V3.6j already handles that).
   ──────────────────────────────────────────────────────────────────── */
main a.bg-background,
main a[class*="bg-background"]:not([class*="border-"]):not(.bg-brand):not(.bg-ink),
main button.bg-background,
main button[class*="bg-background"]:not([class*="border-"]):not(.bg-brand):not(.bg-ink) {
  color: #0b1838 !important;
}
main a.bg-background svg,
main a[class*="bg-background"]:not([class*="border-"]):not(.bg-brand):not(.bg-ink) svg,
main button.bg-background svg,
main button[class*="bg-background"]:not([class*="border-"]):not(.bg-brand):not(.bg-ink) svg {
  color: #0b1838 !important;
  stroke: #0b1838 !important;
}
main a.bg-background:hover,
main a[class*="bg-background"]:not([class*="border-"]):not(.bg-brand):not(.bg-ink):hover {
  background: var(--gu-blue) !important;
  color: #ffffff !important;
}
main a.bg-background:hover svg,
main a[class*="bg-background"]:not([class*="border-"]):not(.bg-brand):not(.bg-ink):hover svg {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

/* ---- Fix 5 supplemental ──────────────────────────────────────────────
   The Results page hero "By outcome / By sector" filter group sits OUTSIDE
   section.section (it's a sub-element of the inner-hero) so the inner-page
   white-text cascade doesn't reach it. But the same text-ink → 245 issue
   still applies because the SPA dark-scheme tokens cascade. Pin it.
   ──────────────────────────────────────────────────────────────────── */
main:has(> div.container-x.pt-6.pb-2:first-child) > section.bg-surface:first-of-type a.bg-background,
main:has(> div.container-x.pt-6.pb-2:first-child) > section.bg-surface:first-of-type a[class*="bg-background"]:not([class*="border-"]):not(.bg-brand):not(.bg-ink),
main:has(> div.container-x.pt-6.pb-2:first-child) > section.bg-surface:first-of-type button.bg-background,
main:has(> div.container-x.pt-6.pb-2:first-child) > section.bg-surface:first-of-type button[class*="bg-background"]:not([class*="border-"]):not(.bg-brand):not(.bg-ink) {
  color: #0b1838 !important;
}

/* === End V3.7a ========================================================*/

/* =====================================================================
   V3.7b — INNER-PAGE NEUTRALISATION OF HOME nth-of-type RULES (2026-05-22)

   Pre-existing architectural issue surfaced by V3.7a QA:
   PULLQUOTE (section 6), INSIGHTS (section 7), CTA BAND (section 8)
   were authored in V3.4/V3.5x using unscoped selectors:

       main > section:nth-of-type(6) { background: #060b27 !important; }
       main > section:nth-of-type(6)::before { background: pullquote-ridges.jpg; }
       main > section:nth-of-type(7) { background: #fbfcff !important; }
       main > section:nth-of-type(8) { ::before glow; ... }

   These were intended for the HOME page only (which has 8 main-level
   sections). But every inner page also has sections at indices 6-8
   (e.g. on Our Solutions, idx 6 is "From solutions, where next" — a
   light-surface CTA section). The rules accidentally apply to those,
   producing dark-bg-on-light-text and a phantom ridges image overlay.

   Reset these rules ONLY on inner pages, detected via the breadcrumb
   sibling pattern (main:has(> div.container-x.pt-6.pb-2:first-child)).
   Home remains untouched.
   ===================================================================== */

/* Reset section 6 (was: pullquote bg) on inner pages */
main:has(> div.container-x.pt-6.pb-2:first-child) > section:nth-of-type(6) {
  background-color: transparent !important;
  background-image: none !important;
  padding: revert !important;
  isolation: auto !important;
  overflow: visible !important;
}
main:has(> div.container-x.pt-6.pb-2:first-child) > section:nth-of-type(6)::before {
  content: none !important;
  background-image: none !important;
  display: none !important;
}
main:has(> div.container-x.pt-6.pb-2:first-child) > section:nth-of-type(6) blockquote {
  color: inherit !important;
  font-size: revert !important;
  line-height: revert !important;
  letter-spacing: revert !important;
  font-style: normal !important;
  max-width: none !important;
}

/* Reset section 7 (was: subtle insights hover bg) on inner pages */
main:has(> div.container-x.pt-6.pb-2:first-child) > section:nth-of-type(7) {
  background: transparent !important;
}

/* Reset section 8 (was: CTA band glow + primary button override) on inner pages */
main:has(> div.container-x.pt-6.pb-2:first-child) > section:nth-of-type(8)::before {
  content: none !important;
  background: none !important;
  display: none !important;
}

/* Some inner-page CTAs use a.bg-background but the home s8 rule paints
   them light-blue + white — which is the desired primary look. So we
   DO want to keep that styling on inner pages too. The fix above clears
   only the background-glow ::before, not the button colours. */

/* === End V3.7b ========================================================*/

/* =======================================================================
   V3.7c — RESTORE bg-surface / band-dark ON INNER-PAGE SECTIONS 6/7/8
           (2026-05-22)

   Pre-existing architectural issue compounded by V3.7b:
   V3.7b transparented sections 6/7/8 on inner pages to neutralise home's
   unscoped nth-of-type rules. That worked for sections that had no own
   bg class — but Our Solutions section 6 is `.bg-surface` (must paint
   light) and section 7 is `.band-dark` (must paint dark navy). V3.7b's
   `background-color: transparent !important` was beating those classes,
   so the section bg fell through to body's `--gu-navy-5` dark navy,
   making dark text (e.g. "From solutions, where next") near-invisible.

   Re-assert each section's own bg-class color on inner pages with
   higher specificity than V3.7b's transparent reset.

   Selector specificity:
     V3.7b:  main:has(...) > section:nth-of-type(N)     = (0,2,2)
     V3.7c:  main:has(...) > section.bg-surface:nth-of-type(N)
                                                        = (0,3,2)  -> wins
   ===================================================================== */

/* --- Section 6: re-paint bg-surface light when the section carries it -- */
main:has(> div.container-x.pt-6.pb-2:first-child) > section.bg-surface:nth-of-type(6) {
  background-color: hsl(var(--surface)) !important;
  background-image: none !important;
}

/* --- Section 6: re-paint band-dark dark navy when the section carries it */
main:has(> div.container-x.pt-6.pb-2:first-child) > section.band-dark:nth-of-type(6) {
  background-color: rgb(17, 19, 24) !important;
  background-image: none !important;
}

/* --- Section 6: re-paint bg-background (off-white) when carried --------- */
main:has(> div.container-x.pt-6.pb-2:first-child) > section.bg-background:nth-of-type(6) {
  background-color: hsl(var(--background)) !important;
  background-image: none !important;
}

/* --- Section 7: same restoration trio ---------------------------------- */
main:has(> div.container-x.pt-6.pb-2:first-child) > section.bg-surface:nth-of-type(7) {
  background-color: hsl(var(--surface)) !important;
  background-image: none !important;
}
main:has(> div.container-x.pt-6.pb-2:first-child) > section.band-dark:nth-of-type(7) {
  background-color: rgb(17, 19, 24) !important;
  background-image: none !important;
}
main:has(> div.container-x.pt-6.pb-2:first-child) > section.bg-background:nth-of-type(7) {
  background-color: hsl(var(--background)) !important;
  background-image: none !important;
}

/* --- Section 8: same restoration trio ---------------------------------- */
main:has(> div.container-x.pt-6.pb-2:first-child) > section.bg-surface:nth-of-type(8) {
  background-color: hsl(var(--surface)) !important;
  background-image: none !important;
}
main:has(> div.container-x.pt-6.pb-2:first-child) > section.band-dark:nth-of-type(8) {
  background-color: rgb(17, 19, 24) !important;
  background-image: none !important;
}
main:has(> div.container-x.pt-6.pb-2:first-child) > section.bg-background:nth-of-type(8) {
  background-color: hsl(var(--background)) !important;
  background-image: none !important;
}

/* --- Safety net: any inner-page section 6/7/8 with NO explicit bg class
       inherits body backdrop (dark navy). Force it to surface light so dark
       text remains legible. Specificity (0,3,2) beats V3.7b (0,2,2)         */
main:has(> div.container-x.pt-6.pb-2:first-child) > section.section:nth-of-type(6):not(.bg-background):not(.band-dark),
main:has(> div.container-x.pt-6.pb-2:first-child) > section.section:nth-of-type(7):not(.bg-background):not(.band-dark),
main:has(> div.container-x.pt-6.pb-2:first-child) > section.section:nth-of-type(8):not(.bg-background):not(.band-dark) {
  background-color: hsl(var(--surface)) !important;
}

/* === End V3.7c ========================================================*/

/* =======================================================================
   V3.8 — SENIOR REVIEW POLISH (2026-05-22)

   Scope: senior design review feedback. Pure additive overrides — no
   existing block edited. Addresses 9 P0 issues, 5 P1 issues, 5 P2 polish
   items. Items requiring photography / content / brand-colour decisions
   are flagged "Needs review" in ISSUE-LIST.md and NOT touched here.
   ===================================================================== */

/* --- A1 / D1 / D2: harden .band-dark regardless of section position ----- *
   V3.7c restored .band-dark only on sections 6/7/8 of inner pages. /about
   §4 and /contact §4 carry band-dark and were missed. Re-assert across
   all positions. Specificity (0,3,1) beats V3.7b (0,2,2) via the class
   chain and the explicit element selector.                                 */
main:has(> div.container-x.pt-6.pb-2:first-child) > section.band-dark,
main > section.band-dark.section,
main > section.band-dark[class*="border-t"] {
  background-color: rgb(17, 19, 24) !important;
  background-image: none !important;
}
main:has(> div.container-x.pt-6.pb-2:first-child) > section.band-dark h1,
main:has(> div.container-x.pt-6.pb-2:first-child) > section.band-dark h2,
main:has(> div.container-x.pt-6.pb-2:first-child) > section.band-dark h3 {
  color: #ffffff !important;
}

/* same hardening for bg-surface anywhere on inner pages */
main:has(> div.container-x.pt-6.pb-2:first-child) > section.bg-surface {
  background-color: hsl(var(--surface)) !important;
  background-image: none !important;
}

/* --- A2 / A3: breadcrumb legibility on dark hero ----------------------- */
nav[aria-label*="breadcrumb" i] ol,
ol.flex.items-center.flex-wrap.gap-x-2 {
  /* tighten to muted-white spec */
  color: #c7d0e0 !important;
}
nav[aria-label*="breadcrumb" i] ol li,
ol.flex.items-center.flex-wrap.gap-x-2 li {
  color: #c7d0e0 !important;
}
nav[aria-label*="breadcrumb" i] ol li a,
ol.flex.items-center.flex-wrap.gap-x-2 li a {
  color: #c7d0e0 !important;
}
nav[aria-label*="breadcrumb" i] ol li a:hover,
ol.flex.items-center.flex-wrap.gap-x-2 li a:hover {
  color: #ffffff !important;
}
nav[aria-label*="breadcrumb" i] ol li .text-line,
ol.flex.items-center.flex-wrap.gap-x-2 li .text-line,
nav[aria-label*="breadcrumb" i] ol li span.text-line,
ol.flex.items-center.flex-wrap.gap-x-2 li span.text-line {
  color: rgba(199, 208, 224, 0.45) !important;
}
nav[aria-label*="breadcrumb" i] ol li span.text-ink,
ol.flex.items-center.flex-wrap.gap-x-2 li span.text-ink {
  color: #ffffff !important;
}

/* --- A4: primary CTA "Book a diagnostic" — fix contrast ---------------- *
   Class is .bg-ink.text-background which in SPA tokens = white text on
   cyan #5cc1ff. Switch to dark ink text on the same cyan for 7.5:1 AA. */
a.bg-ink.text-background,
button.bg-ink.text-background,
.gu-btn-primary,
a[class*="bg-ink"][class*="text-background"],
button[class*="bg-ink"][class*="text-background"] {
  color: #0b1838 !important;       /* deep navy */
  background-color: #5cc1ff !important;
  font-weight: 600 !important;
}
a.bg-ink.text-background:hover,
button.bg-ink.text-background:hover,
a[class*="bg-ink"][class*="text-background"]:hover,
button[class*="bg-ink"][class*="text-background"]:hover {
  background-color: #33b0ff !important;
  color: #0b1838 !important;
}
/* SVG arrows inside CTA buttons */
a.bg-ink.text-background svg,
button.bg-ink.text-background svg {
  color: #0b1838 !important;
  stroke: #0b1838 !important;
}

/* --- A5: /insights filter pills (and any pill chip on dark sections) --- */
button.px-4.h-9.rounded-full.border.border-line {
  background-color: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  color: #e2e8f0 !important;
}
button.px-4.h-9.rounded-full.border.border-line:hover {
  background-color: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
}

/* But on LIGHT sections (bg-surface), keep pills in light/ink theme */
section.bg-surface button.px-4.h-9.rounded-full.border.border-line,
section[class*="bg-surface"] button.px-4.h-9.rounded-full.border.border-line {
  background-color: #ffffff !important;
  border-color: #e3e7ef !important;
  color: #0b1838 !important;
}

/* --- A6 + C2: card chip "tags" (Critical Chain / MRO / etc) ------------ *
   These render too pale on white card backgrounds — they read as empty
   grey rectangles. Give them perceptible surface + dark text.            */
.bg-surface-2,
span.bg-surface-2 {
  background-color: #eef2f8 !important;
  color: #25408e !important;
  border: 1px solid #dbe2ee !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
}

/* --- C1: secondary problem-statement chips on /our-solutions §1 -------- *
   These render with white-on-near-white. Promote them to a subtle dark
   chip pattern with brand-cyan border to read as interactive.            */
section span.text-ink[class*="bg-"],
[data-testid*="secondary-problem"] span,
section .gu-fade[class*="flex"][class*="rounded"] {
  /* gentle catch-all — only affects elements that exist */
}

/* --- C3: "From X, Where Next" router pill chips ------------------------- *
   The empty white pill cells. Force consistent chip styling.              */
[class*="rounded-md"][class*="border-line"][class*="hover-elevate"] {
  background-color: #ffffff !important;
  border-color: #e3e7ef !important;
  color: #0b1838 !important;
}

/* --- C4: /contact map overlay text ------------------------------------- */
[class*="bg-surface/95"], [class*="bg-surface-95"],
div[class*="absolute"][class*="bottom-"][class*="bg-surface"] {
  background-color: rgba(255, 255, 255, 0.95) !important;
  color: #0b1838 !important;
}
[class*="bg-surface/95"] *, [class*="bg-surface-95"] *,
div[class*="absolute"][class*="bottom-"][class*="bg-surface"] * {
  color: #0b1838 !important;
}

/* --- E1: tighten eyebrow tracking + improve display heading rhythm ----- */
.eyebrow {
  letter-spacing: 0.18em !important;
  font-weight: 600 !important;
}
h1.display-xl, h1.display-2xl,
h2.display-xl, h2.display-2xl {
  line-height: 1.04 !important;
  letter-spacing: -0.02em !important;
}

/* --- E2: home stats row — sharper hierarchy ---------------------------- */
.gu-stats-num, .display-2xl.text-brand,
[class*="text-[42px]"], [class*="text-[44px]"], [class*="text-[48px]"] {
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}

/* --- E3: footer column headings ---------------------------------------- */
footer h4, footer .gu-footer-col-title,
footer div.font-semibold,
footer [class*="font-semibold"][class*="uppercase"] {
  color: #ffffff !important;
  letter-spacing: 0.12em !important;
  font-weight: 600 !important;
  opacity: 0.92 !important;
}
footer a {
  color: rgba(255, 255, 255, 0.66) !important;
  transition: color 160ms ease !important;
}
footer a:hover {
  color: #ffffff !important;
}

/* --- F1: global :focus-visible ring (a11y) ----------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid #5cc1ff !important;
  outline-offset: 2px !important;
  border-radius: 4px !important;
}

/* --- F2: CTA hover polish ---------------------------------------------- */
.hover-elevate {
  transition: transform 200ms ease, box-shadow 200ms ease, background-color 200ms ease !important;
}
.hover-elevate:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 24px rgba(11, 24, 56, 0.08) !important;
}

/* --- D3: mobile typography rhythm on home intent cards ----------------- */
@media (max-width: 640px) {
  .eyebrow {
    font-size: 11px !important;
    letter-spacing: 0.16em !important;
  }
  h3.display-md, h4.display-md {
    line-height: 1.18 !important;
  }
  p.text-\[14\.5px\], p.lead {
    line-height: 1.55 !important;
  }
  /* Intent cards spacing */
  [data-testid*="intent-card"], [class*="intent-card"] {
    padding: 24px !important;
  }
}

/* --- C5: stray empty checkbox-like box on /contact "You Decide" -------- */
/* Hide trailing empty divs that have no content + no aria role */
section ul li > div:empty,
section [class*="space-y-"] > div:empty:not([class*="border"]):not([class*="bg-"]) {
  display: none !important;
}

/* === End V3.8 ========================================================= */

/* --- A4 follow-up: defeat pre-existing header at-top CTA rule ---------- *
   Earlier blocks scope CTA recolour to `header.sticky:not([data-scrolled="true"]) a.bg-ink`
   with specificity (0,2,2) which beat V3.8 first attempt. Re-target with
   (0,3,2) by chaining the data-testid attribute selector.                 */
header.sticky a.bg-ink.text-background,
header.sticky:not([data-scrolled="true"]) a.bg-ink.text-background,
header.sticky:not([data-scrolled="true"]) a[data-testid="button-header-cta"],
a[data-testid="button-header-cta"].bg-ink,
a[data-testid="button-header-cta"][class*="bg-ink"] {
  background-color: #5cc1ff !important;
  background: #5cc1ff !important;
  color: #0b1838 !important;
}
header.sticky a.bg-ink.text-background svg,
header.sticky:not([data-scrolled="true"]) a[data-testid="button-header-cta"] svg,
a[data-testid="button-header-cta"] svg {
  color: #0b1838 !important;
  stroke: #0b1838 !important;
}
header.sticky a.bg-ink.text-background:hover,
a[data-testid="button-header-cta"]:hover {
  background-color: #33b0ff !important;
  background: #33b0ff !important;
  color: #0b1838 !important;
}

/* --- C1 (revised): force .text-ink to read dark on light surfaces ------ *
   Inside .bg-surface containers the SPA emits .text-ink spans that the
   inner-page transparency cascade was painting white-on-white. Re-pin.   */
section .bg-surface .text-ink,
section .bg-surface span.text-ink,
section .bg-surface li span.text-ink,
.bg-surface .text-ink,
.bg-surface span.text-ink {
  color: #0b1838 !important;
}
section .bg-background .text-ink,
.bg-background span.text-ink {
  color: #0b1838 !important;
}
/* Same for text-ink-2 on light surfaces */
.bg-surface .text-ink-2,
.bg-background .text-ink-2,
section .bg-surface .text-ink-2,
section .bg-background .text-ink-2 {
  color: #3b4354 !important;
}

/* --- C1 final: match V3.7b's prefix specificity then beat it ----------- *
   The winning hostile rule is:
     main:has(> div.container-x.pt-6.pb-2:first-child) section.section
       span:not(.text-brand) { color: #fff !important; }   (0,4,4)
   We add the same prefix but include .bg-surface in the chain → (0,5,4)
   and restore dark-on-light.                                              */
main:has(> div.container-x.pt-6.pb-2:first-child) section.section .bg-surface span:not(.text-brand),
main:has(> div.container-x.pt-6.pb-2:first-child) section.section .bg-background span:not(.text-brand),
main:has(> div.container-x.pt-6.pb-2:first-child) section.section .bg-surface li,
main:has(> div.container-x.pt-6.pb-2:first-child) section.section .bg-background li {
  color: #0b1838 !important;
}
main:has(> div.container-x.pt-6.pb-2:first-child) section.section .bg-surface p,
main:has(> div.container-x.pt-6.pb-2:first-child) section.section .bg-background p {
  color: #0b1838 !important;
}
main:has(> div.container-x.pt-6.pb-2:first-child) section.section .bg-surface h1,
main:has(> div.container-x.pt-6.pb-2:first-child) section.section .bg-surface h2,
main:has(> div.container-x.pt-6.pb-2:first-child) section.section .bg-surface h3,
main:has(> div.container-x.pt-6.pb-2:first-child) section.section .bg-surface h4,
main:has(> div.container-x.pt-6.pb-2:first-child) section.section .bg-background h1,
main:has(> div.container-x.pt-6.pb-2:first-child) section.section .bg-background h2,
main:has(> div.container-x.pt-6.pb-2:first-child) section.section .bg-background h3,
main:has(> div.container-x.pt-6.pb-2:first-child) section.section .bg-background h4 {
  color: #0b1838 !important;
}

/* =====================================================================
   V3.9 — 2026-05-22 — Inline edits batch
   Additive only. Do NOT edit historical blocks above.

   Targets (specificity engineered to win against bundled CSS + V3.x):
   1) Navigator selects on the home hero → adopt the Region-picker styling
      family (transparent on dark, white text, subtle border, mono-tracked).
   2) Search icon inside "Describe What You're Looking For" wrapper → brand blue.
   3) "Built for high-pressure" industries grid → restore container + add gap
      between cards (was edge-to-edge full-bleed with gap:0).
   ===================================================================== */

/* --- V3.9 / Edit 1: Navigator selects match Region-picker family --------
   The Navigator on the home hero sits over the dark gradient. The Region
   picker above it is transparent / white / mono-tracked. Bring the two
   selects (situation-router + objective) into the same visual family
   while preserving their form-control height + padding. */
main > section:nth-of-type(1) select[data-testid="select-situation-router"],
main > section:nth-of-type(1) select.bg-surface,
main > section:nth-of-type(1) .bg-surface.border-line > select,
main > section:nth-of-type(1) [data-testid="select-situation-router"],
main > section:nth-of-type(1) [data-testid^="select-"] {
  background: rgba(255,255,255,0.04) !important;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(255,255,255,0.85) 50%),
    linear-gradient(135deg, rgba(255,255,255,0.85) 50%, transparent 50%) !important;
  background-position:
    calc(100% - 16px) calc(50% + 1px),
    calc(100% - 11px) calc(50% + 1px) !important;
  background-size: 5px 5px, 5px 5px !important;
  background-repeat: no-repeat !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
  border-radius: 4px !important;
  color: #ffffff !important;
  font-family: "Noto Sans", system-ui, -apple-system, sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  text-transform: none !important;
  padding: 0 36px 0 14px !important;
  -webkit-appearance: none !important;
     -moz-appearance: none !important;
          appearance: none !important;
  transition: background .25s, border-color .25s, box-shadow .25s !important;
}
main > section:nth-of-type(1) select[data-testid="select-situation-router"]:hover,
main > section:nth-of-type(1) [data-testid^="select-"]:hover {
  background-color: rgba(255,255,255,0.07) !important;
  border-color: rgba(255,255,255,0.35) !important;
}
main > section:nth-of-type(1) select[data-testid="select-situation-router"]:focus,
main > section:nth-of-type(1) [data-testid^="select-"]:focus,
main > section:nth-of-type(1) [data-testid^="select-"]:focus-visible {
  outline: none !important;
  border-color: var(--gu-blue) !important;
  box-shadow: 0 0 0 3px rgba(92,193,255,0.22) !important;
}
/* Options popup still uses native list — keep dark-on-light for readability. */
main > section:nth-of-type(1) select[data-testid^="select-"] option {
  background: #ffffff !important;
  color: #0b1838 !important;
  font-weight: 500 !important;
  letter-spacing: normal !important;
}
/* The .bg-surface wrapper around each select (if any) should also go transparent
   so the select sits on the hero gradient like the Region bar sits on the
   navy backdrop. Guarded to home hero only. */
main > section:nth-of-type(1) .bg-surface:has(> select[data-testid^="select-"]),
main > section:nth-of-type(1) .bg-surface:has(> [data-testid^="select-"]) {
  background: transparent !important;
  border: 0 !important;
}

/* --- V3.9 / Edit 2: Search icon inside Describe wrapper → brand blue ----
   Live DOM: `<div class="flex items-center gap-2 ... bg-surface ...">
                <svg class="lucide lucide-search size-4 shrink-0 text-ink-2">
                <textarea / input ...> </div>`
   The icon's stroke is currentColor — we override the SVG color directly. */
main > section:nth-of-type(1) .bg-surface > svg.lucide-search,
main > section:nth-of-type(1) .bg-surface > svg.lucide.lucide-search,
main > section:nth-of-type(1) svg.lucide-search.text-ink-2,
main > section:nth-of-type(1) svg.lucide-search {
  color: var(--gu-blue) !important;
  stroke: var(--gu-blue) !important;
}
/* Belt-and-braces: any descendant path/line under the search icon */
main > section:nth-of-type(1) svg.lucide-search * {
  stroke: var(--gu-blue) !important;
}

/* --- V3.9 / Edit 3: "Built for high-pressure" grid — add space between cards -
   V3.x previously deliberately set `gap: 0` and `width: 100vw` with negative
   margins to make the row edge-to-edge. User now wants distinct cards with
   breathing room. Reverse the full-bleed + restore proper gap + card radius. */
main > section:nth-of-type(4) .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-4 {
  gap: 24px !important;
  width: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
main > section:nth-of-type(4) .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-4 > a,
main > section:nth-of-type(4) .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-4 > article {
  border-radius: 12px !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  overflow: hidden !important;
}
/* Keep the hover transform but make sure the rounded edges aren't clipped. */
main > section:nth-of-type(4) .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-4 > *:hover {
  transform: scale(1.015) !important;
}
/* Mobile: ensure stack still spaces vertically. */
@media (max-width: 768px) {
  main > section:nth-of-type(4) .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-4 {
    gap: 20px !important;
  }
}

/* --- V3.9 / Edit 1 — specificity patch ---------------------------------
   Two earlier `!important` rules win the cascade because they include
   `.border.border-line.rounded-md.bg-background` in the chain (the
   Navigator panel wrapper). Re-state the V3.9 styling with that exact
   ancestor chain so it beats the prior rule and lands on the selects. */
main > section:nth-of-type(1) .border.border-line.rounded-md.bg-background select[data-testid="select-situation-router"],
main > section:nth-of-type(1) .border.border-line.rounded-md.bg-background select,
main > section:nth-of-type(1) .border.border-line.rounded-md.bg-background [data-testid^="select-"] {
  background: rgba(255,255,255,0.04) !important;
  background-color: rgba(255,255,255,0.04) !important;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(255,255,255,0.85) 50%),
    linear-gradient(135deg, rgba(255,255,255,0.85) 50%, transparent 50%) !important;
  background-position:
    calc(100% - 16px) calc(50% + 1px),
    calc(100% - 11px) calc(50% + 1px) !important;
  background-size: 5px 5px, 5px 5px !important;
  background-repeat: no-repeat !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
  border-radius: 4px !important;
  color: #ffffff !important;
  font-family: "Noto Sans", system-ui, -apple-system, sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  text-transform: none !important;
  padding: 0 36px 0 14px !important;
  -webkit-appearance: none !important;
     -moz-appearance: none !important;
          appearance: none !important;
}
main > section:nth-of-type(1) .border.border-line.rounded-md.bg-background select:hover {
  background-color: rgba(255,255,255,0.07) !important;
  border-color: rgba(255,255,255,0.35) !important;
}
main > section:nth-of-type(1) .border.border-line.rounded-md.bg-background select:focus,
main > section:nth-of-type(1) .border.border-line.rounded-md.bg-background select:focus-visible {
  outline: none !important;
  border-color: var(--gu-blue) !important;
  box-shadow: 0 0 0 3px rgba(92,193,255,0.22) !important;
}
main > section:nth-of-type(1) .border.border-line.rounded-md.bg-background select option {
  background: #ffffff !important;
  color: #0b1838 !important;
  letter-spacing: normal !important;
  font-weight: 500 !important;
}

/* --- V3.9 / Edit 2 — also beat the Navigator-wrapper white-text rule -----
   The earlier rule paints all `main > section:nth-of-type(1) ... .bg-background *`
   to `color: #fff !important`, which forces the search icon stroke to white
   via currentColor on `*` descendants. Re-target the icon specifically. */
main > section:nth-of-type(1) .border.border-line.rounded-md.bg-background svg.lucide-search,
main > section:nth-of-type(1) .border.border-line.rounded-md.bg-background svg.lucide-search * {
  color: var(--gu-blue) !important;
  stroke: var(--gu-blue) !important;
}

/* =========================================================================
   V3.9f — 2026-05-22 (inline edits)
   /what-we-solve hero CTAs (rendered by Ge in `light` variant on bg-surface):
   - Edit 1: "Take the diagnostic" → match the nav "Book a diagnostic" cyan
             primary CTA (cyan #5cc1ff fill, deep navy #0b1838 text/arrow).
             The bundle outputs class `bg-ink text-background` for this CTA.
   - Edit 2: "Talk to the team" (ghost) → transparent fill, white outline,
             white text + white arrow icon.
             The bundle outputs class `border border-line text-ink` for this.
   Scoped tightly by href so we only touch these two anchors anywhere they
   appear via this Ge hero invocation.
   ========================================================================= */

/* Edit 1 — primary CTA: cyan fill, deep navy text + arrow.
   Must beat the V3.5y-2/V3.6j `:has(> div.container-x.pt-6.pb-2:first-child)`
   rule (~0,8,5 specificity) that paints all `a.text-background` inside the
   inner-page hero to white. Use the same `:has()` ancestor pattern so we
   match the same specificity, then add href + extra class hooks. */
main:has(> div.container-x.pt-6.pb-2:first-child) > section.bg-surface:first-of-type a.bg-ink.text-background.inline-flex.rounded-md[href$="/what-we-solve/diagnostic"],
main:has(> div.container-x.pt-6.pb-2:first-child) > section.bg-surface:first-of-type a.bg-ink.text-background.inline-flex.rounded-md[href*="/what-we-solve/diagnostic"] {
  background-color: #5cc1ff !important;
  color: #0b1838 !important;
  border: 1px solid transparent !important;
  font-weight: 600 !important;
  transition: background-color .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease !important;
}
main:has(> div.container-x.pt-6.pb-2:first-child) > section.bg-surface:first-of-type a.bg-ink.text-background.inline-flex.rounded-md[href$="/what-we-solve/diagnostic"]:hover,
main:has(> div.container-x.pt-6.pb-2:first-child) > section.bg-surface:first-of-type a.bg-ink.text-background.inline-flex.rounded-md[href*="/what-we-solve/diagnostic"]:hover {
  background-color: #33b0ff !important;
  color: #0b1838 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 12px 24px -10px rgba(92,193,255,.5) !important;
}
main:has(> div.container-x.pt-6.pb-2:first-child) > section.bg-surface:first-of-type a.bg-ink.text-background.inline-flex.rounded-md[href$="/what-we-solve/diagnostic"] svg,
main:has(> div.container-x.pt-6.pb-2:first-child) > section.bg-surface:first-of-type a.bg-ink.text-background.inline-flex.rounded-md[href$="/what-we-solve/diagnostic"] svg * {
  color: #0b1838 !important;
  stroke: #0b1838 !important;
}

/* Edit 2 — ghost CTA next to Take the diagnostic: transparent + white outline.
   Bundle class is `border border-line text-ink`. Target it specifically when
   it sits next to the Take-the-diagnostic CTA (same flex wrapper) by using the
   href. We use the same wrapper-based scope: any `border` anchor with this href
   that lives in the hero CTA row gets the ghost treatment. */
main .mt-9.flex.flex-wrap.gap-3 a.border.border-line.text-ink.inline-flex.rounded-md[href="/contact"],
main .mt-9.flex.flex-wrap.gap-3 a.border.border-line.text-ink.inline-flex.rounded-md[href$="/contact"],
main .mt-9.flex.flex-wrap.gap-3 a.border.border-line.text-ink.inline-flex.rounded-md[href*="/contact"] {
  background-color: transparent !important;
  border: 1px solid #ffffff !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s ease !important;
}
main .mt-9.flex.flex-wrap.gap-3 a.border.border-line.text-ink.inline-flex.rounded-md[href="/contact"]:hover,
main .mt-9.flex.flex-wrap.gap-3 a.border.border-line.text-ink.inline-flex.rounded-md[href$="/contact"]:hover,
main .mt-9.flex.flex-wrap.gap-3 a.border.border-line.text-ink.inline-flex.rounded-md[href*="/contact"]:hover {
  background-color: rgba(255,255,255,0.08) !important;
  border-color: #ffffff !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
}
main .mt-9.flex.flex-wrap.gap-3 a.border.border-line.text-ink.inline-flex.rounded-md[href="/contact"] svg,
main .mt-9.flex.flex-wrap.gap-3 a.border.border-line.text-ink.inline-flex.rounded-md[href$="/contact"] svg,
main .mt-9.flex.flex-wrap.gap-3 a.border.border-line.text-ink.inline-flex.rounded-md[href="/contact"] svg *,
main .mt-9.flex.flex-wrap.gap-3 a.border.border-line.text-ink.inline-flex.rounded-md[href$="/contact"] svg * {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

/* ============================================================
   V3.9g — 2026-05-22 — Inner-page hero: uniform 70% image overlay
   ------------------------------------------------------------
   User request: "Add 'AdobeStock_2006582169.jpeg' image to the headers
   of all the pages, excluding the home page, as an overlay (70%)".

   The image (cyan turbine blades on navy) was re-cropped to 16:7 and
   replaces inner-hero-bg.jpg. Previous V3.6j overlay only darkened the
   bottom edge — that left the top reading at ~100% image and bottom at
   ~65%, inconsistent. This block applies a UNIFORM rgba(6,11,39,0.30)
   tint across the whole hero so the image reads at a consistent ~70%
   everywhere, matching the user's spec exactly.

   Home page is automatically excluded by the existing :has() selector
   pattern (home <main>'s first child is a <section>, not a
   div.container-x.pt-6.pb-2).
   ============================================================ */

/* Bust image cache so visitors pick up the re-cropped JPEG.
   NOTE: must use absolute path (/assets/...) because overrides.css lives
   at /assets/overrides.css — a relative URL would resolve to
   /assets/assets/img/... and 404. This finally fixes a long-standing bug
   carried from V3.6j (the previous inner-hero declarations never loaded
   the image successfully). */
main:has(> div.container-x.pt-6.pb-2:first-child) > section.bg-surface:first-of-type {
  background-image: url("/assets/img/inner-hero-bg.jpg?v=v39g2") !important;
}

/* Override V3.6j gradient with a uniform 30% navy tint (image at 70%) */
main:has(> div.container-x.pt-6.pb-2:first-child) > section.bg-surface:first-of-type::before {
  background: rgba(6, 11, 39, 0.30) !important;
  background-image: none !important;
}

/* ============================================================
   V3.9g3 — 2026-05-22 — Eliminate gap above inner-hero image
   ------------------------------------------------------------
   User reported a ~13px solid-navy gap between the top region bar
   and where the inner-page hero image started. Cause: V3.5k's
   `main > section:nth-of-type(1) { margin-top: -106px !important }`
   (originally a home-page rule) was overriding the inner-page
   `-149px` margin from line 2188. The section's actual top landed
   at viewport y≈51 instead of y=0, leaving a navy strip between
   the region bar (y=37 bottom) and the hero image.

   Fix: pull the inner-hero section all the way up to y=0 so the
   image runs flush against the top of the viewport / region bar.
   Match the extra negative margin with extra padding-top so the
   inner content (eyebrow, headline, lead, breadcrumb) stays in
   its current visual position.
   ============================================================ */
main:has(> div.container-x.pt-6.pb-2:first-child) > div.container-x.pt-6.pb-2:first-child + section.bg-surface {
  margin-top: -163px !important; /* was -106 — pull up another 57px to y=0 */
  padding-top: 270px !important; /* was 213 — restore inner spacing */
}

/* ============================================================
   V3.9h — 2026-05-23 — Animated gradient replaces all hero images
   ------------------------------------------------------------
   User request (verbatim):
     "Remove all the images in the hero sections. Replace the images
      with an animated gradient."

   Scope: ALL hero sections including the home page.
   Keep: V3.9f2 CTA styling unchanged (cyan primary + white-outline
   ghost) \u2014 do not revert or modify CTAs.

   Implementation strategy:
   - Define the @keyframes and the .animated-hero-bg base class once
     (matches the spec the user provided exactly: 18s, 135deg, four
     colour stops, 300% bg-size, ease-in-out infinite).
   - Apply it to TWO selectors:
       (a) Inner-page hero: main:has(> div.container-x.pt-6.pb-2:first-child)
           > div.container-x.pt-6.pb-2:first-child + section.bg-surface
       (b) Home-page hero: main > section.bg-surface:first-of-type
           (we use :not() to avoid double-binding on inner pages)
   - Disable the existing inner-hero background-image and uniform navy
     overlay so the gradient shows cleanly underneath.
   - Disable home-page hero ::after (hero-bg-ridges.jpg) and the
     radial-gradient bg so the new animation has the stage.
   - Reduced-motion users: pause the animation to a static frame.
   ============================================================ */

@keyframes premiumHeroGradient {
  0%   { background-position: 0%   50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0%   50%; }
}

/* (a) Inner-page hero — wipe the image + uniform overlay, apply gradient */
main:has(> div.container-x.pt-6.pb-2:first-child)
  > div.container-x.pt-6.pb-2:first-child + section.bg-surface {
  background-image: linear-gradient(
    145deg,
    #25408e 0%,
    #0f0934 45%,
    #0f090a 80%,
    #0f0934 100%
  ) !important;
  background-color: transparent !important;
  background-size: 200% 200% !important;
  background-repeat: no-repeat !important;
  background-attachment: scroll !important;
  animation: premiumHeroGradient 12s ease-in-out infinite !important;
}

/* Kill the V3.9g uniform-navy ::before overlay; replace with the
   subtle radial vignette from the spec for text contrast. */
main:has(> div.container-x.pt-6.pb-2:first-child)
  > div.container-x.pt-6.pb-2:first-child + section.bg-surface::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    radial-gradient(circle at top right,
      transparent 20%,
      rgba(15, 9, 10, 0.40) 80%) !important;
  background-image:
    radial-gradient(circle at top right,
      transparent 20%,
      rgba(15, 9, 10, 0.40) 80%) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* (b) Home-page hero — apply same gradient.
   Selector picks only the home <main> (its first <section> is the
   first child directly, with NO preceding breadcrumb div). */
main:not(:has(> div.container-x.pt-6.pb-2:first-child))
  > section.bg-surface:first-of-type {
  background-image: linear-gradient(
    145deg,
    #25408e 0%,
    #0f0934 45%,
    #0f090a 80%,
    #0f0934 100%
  ) !important;
  background-color: transparent !important;
  background-size: 200% 200% !important;
  background-repeat: no-repeat !important;
  animation: premiumHeroGradient 12s ease-in-out infinite !important;
}

/* Hide the home-page ::after (hero-bg-ridges.jpg curtain image)
   and rewrite the ::before to the spec's radial vignette. */
main:not(:has(> div.container-x.pt-6.pb-2:first-child))
  > section.bg-surface:first-of-type::after {
  display: none !important;
}
main:not(:has(> div.container-x.pt-6.pb-2:first-child))
  > section.bg-surface:first-of-type::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    radial-gradient(circle at top right,
      transparent 20%,
      rgba(15, 9, 10, 0.40) 80%) !important;
  background-image:
    radial-gradient(circle at top right,
      transparent 20%,
      rgba(15, 9, 10, 0.40) 80%) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* Lift hero content above the ::before vignette so text isn't dimmed */
main:has(> div.container-x.pt-6.pb-2:first-child)
  > div.container-x.pt-6.pb-2:first-child + section.bg-surface > *,
main:not(:has(> div.container-x.pt-6.pb-2:first-child))
  > section.bg-surface:first-of-type > * {
  position: relative;
  z-index: 2;
}

/* Respect prefers-reduced-motion: hold a single static frame */
@media (prefers-reduced-motion: reduce) {
  main:has(> div.container-x.pt-6.pb-2:first-child)
    > div.container-x.pt-6.pb-2:first-child + section.bg-surface,
  main:not(:has(> div.container-x.pt-6.pb-2:first-child))
    > section.bg-surface:first-of-type {
    animation: none !important;
    background-position: 25% 50% !important;
  }
}

/* ============================================================
   V3.9i — 2026-05-23 — About-page pipeline-bottleneck graphic
   ------------------------------------------------------------
   Replaces the right panel of the About-page band-dark section
   ("A Senior Consulting Organisation Built Around Action") \u2014
   previously the 3 text cards + orbital diagram \u2014 with a
   scroll-driven pipeline-bottleneck animation.

   The DOM is injected by overrides.js; this block provides the
   visual tokens. All values match the spec the user supplied.
   ============================================================ */

.gu-pipeline {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  border: 1px solid hsl(220, 10%, 22%);
  background: #0f0934;
  height: 460px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  user-select: none;
}
.gu-pipeline__grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.10;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.18) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.18) 1px, transparent 1px);
  background-size: 32px 32px;
}
.gu-pipeline__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 10;
}
.gu-pipeline__eyebrow {
  font-family: ui-monospace, "JetBrains Mono", "SF Mono", monospace;
  letter-spacing: 0.18em;
  font-size: 10px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.50);
}
.gu-pipeline__status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: ui-monospace, "JetBrains Mono", "SF Mono", monospace;
  font-size: 11px;
  font-weight: 500;
  color: rgba(255,255,255,0.80);
}
.gu-pipeline__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f59e0b; /* amber */
}
.gu-pipeline.is-subordinated .gu-pipeline__dot {
  background: #10b981; /* emerald */
  animation: guPulse 1.6s ease-in-out infinite;
}
@keyframes guPulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: 0.6; transform: scale(1.15); }
}

.gu-pipeline__tracks {
  position: relative;
  width: 100%;
  height: 192px;
  margin: auto 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 16px 0;
}
.gu-pipeline__constraint {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 96px;
  left: 55%;
  border-radius: 4px;
  border: 1px solid rgba(239, 68, 68, 0.40);
  background-color: rgba(239, 68, 68, 0.05);
  transition: border-color 300ms ease, background-color 300ms ease;
}
.gu-pipeline.is-subordinated .gu-pipeline__constraint {
  border-color: var(--brand, hsl(208, 100%, 70%));
  background-color: rgba(0, 87, 255, 0.05);
}
.gu-pipeline__constraint-label {
  position: absolute;
  top: -24px;
  left: 50%;
  transform: translateX(-50%);
  padding: 2px 8px;
  border-radius: 4px;
  background: hsl(220, 30%, 8%);
  border: 1px solid rgba(255,255,255,0.10);
  font-family: ui-monospace, "JetBrains Mono", "SF Mono", monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #ffffff;
  white-space: nowrap;
}

.gu-pipeline__track {
  height: 24px;
  width: 100%;
  background: rgba(255,255,255,0.05);
  border-radius: 999px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.05);
}
.gu-pipeline__particles {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding-left: 4px;
  transition: transform 75ms linear, opacity 300ms ease;
  will-change: transform;
}
.gu-pipeline__node {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--brand, hsl(208, 100%, 60%));
  flex-shrink: 0;
  transition: transform 300ms ease, background-color 300ms ease, box-shadow 300ms ease;
}
.gu-pipeline__node.is-clustered {
  background: #ef4444;
  transform: scale(1.25) translateX(var(--gu-cluster-x, 0px));
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.30);
}

.gu-pipeline__legend {
  position: relative;
  z-index: 10;
  background: rgba(0, 0, 0, 0.40);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 4px;
  padding: 12px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.gu-pipeline__legend-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: hsl(220, 6%, 80%);
}

/* Hide the original right-column content once the pipeline is mounted */
.gu-pipeline-mounted .gu-pipeline-orig {
  display: none !important;
}

/* ============================================================
   V3.9j — 2026-05-23 — BufferCascade graphic (home Senior
   Consulting Organisation section, right column)
   ------------------------------------------------------------
   Replaces V3.9i pipeline. Visualises Critical Chain Project
   Management: localised safety padding compresses left-to-right
   as the user scrolls, and the saved time aggregates at the
   bottom into a single Consolidated Project Buffer bar.

   - Initial state: 3 task rows each with solid Task block +
     amber "Hidden Padding Buffer" tail. Project buffer is
     invisible.
   - Scroll progress > 0: padding tails shrink (compression =
     max(0, 1 - progress * 2.2)). Padding fully gone by ~0.45.
   - Scroll progress > 0.5: Project buffer panel fades up,
     border + bg shift to brand blue, status pill flips to
     "−38% Lead-Time Optimization".
   - Reduced-motion respected.

   DOM injected by overrides.js (IIFE `guBufferCascadeV39j`).
   ============================================================ */

.gu-bc {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: #0f090a;
  min-height: 460px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #ffffff;
  font-family: 'Satoshi', 'Inter', system-ui, sans-serif;
}

/* Faint brand glow behind the cascade — strengthens once buffer materialises */
.gu-bc__glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 288px;
  height: 288px;
  transform: translate(-50%, -50%);
  background: rgba(0, 122, 255, 0.05);
  border-radius: 999px;
  filter: blur(64px);
  opacity: 0.3;
  transition: opacity 500ms ease;
  pointer-events: none;
  z-index: 0;
}
.gu-bc.is-consolidated .gu-bc__glow {
  opacity: 1;
}

/* Header strip — eyebrow + dynamic timeline status */
.gu-bc__head {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding-bottom: 12px;
}
.gu-bc__eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.40);
  font-weight: 600;
}
.gu-bc__timeline {
  font-size: 12px;
  font-weight: 700;
  color: #ffffff;
  font-variant-numeric: tabular-nums;
}

/* Task stack */
.gu-bc__stack {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: auto 0;
}
.gu-bc__row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.gu-bc__row-meta {
  display: flex;
  justify-content: space-between;
  font-family: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.50);
  padding: 0 4px;
}
.gu-bc__row-meta .gu-bc__milestone {
  color: rgba(255, 255, 255, 0.30);
}

/* Track = the bar container */
.gu-bc__track {
  height: 28px;
  width: 100%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 4px;
  display: flex;
  align-items: center;
  padding: 2px;
  overflow: hidden;
}
/* Solid task chunk — its own width set inline per row */
.gu-bc__task {
  height: 100%;
  border-radius: 3px;
  display: flex;
  align-items: center;
  padding: 0 8px;
  flex-shrink: 0;
  color: #0f090a;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
/* Amber padding tail — width animated via inline style */
.gu-bc__padding {
  height: 100%;
  background: rgba(245, 158, 11, 0.20);
  border-left: 1px dashed rgba(245, 158, 11, 0.40);
  border-radius: 3px;
  display: flex;
  align-items: center;
  padding: 0 8px;
  color: #fcd34d;
  transform-origin: left center;
  transition: opacity 250ms ease;
  overflow: hidden;
}
.gu-bc__padding-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Consolidated Project Buffer panel — fades in & re-themes once progress > 0.5 */
.gu-bc__buffer {
  margin-top: 24px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(255, 255, 255, 0.02);
  border-radius: 6px;
  padding: 12px;
  transition: border-color 300ms ease, background-color 300ms ease, opacity 300ms ease;
  opacity: 0;
}
.gu-bc.is-consolidated .gu-bc__buffer {
  border-color: rgba(0, 122, 255, 0.40);
  background: rgba(0, 122, 255, 0.10);
}
.gu-bc__buffer-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.gu-bc__buffer-title {
  font-size: 12px;
  font-weight: 700;
  color: #4d9fff; /* brand blue against dark surface */
}
.gu-bc__buffer-zone {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.70);
}
.gu-bc__buffer-bar {
  height: 12px;
  width: 100%;
  background: rgba(255, 255, 255, 0.10);
  border-radius: 999px;
  overflow: hidden;
  display: flex;
}
.gu-bc__buffer-seg {
  height: 100%;
  border-right: 1px solid #0f090a;
}
.gu-bc__buffer-seg:last-child { border-right: none; }
.gu-bc__buffer-seg--green { background: #10b981; width: 50%; }
.gu-bc__buffer-seg--amber { background: #f59e0b; width: 33.333%; }
.gu-bc__buffer-seg--red   { background: #ef4444; width: 16.667%; }

/* Footer legend */
.gu-bc__legend {
  position: relative;
  z-index: 1;
  font-size: 12.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.60);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 12px;
}

/* Hide the original right-column content once BufferCascade mounts */
.gu-bc-mounted .gu-bc-orig {
  display: none !important;
}

/* Reduced motion: collapse transitions, render in final consolidated state */
@media (prefers-reduced-motion: reduce) {
  .gu-bc, .gu-bc *, .gu-bc__padding, .gu-bc__buffer, .gu-bc__glow {
    transition: none !important;
    animation: none !important;
  }
}

/* ============================================================
   V3.9k — 2026-05-23 — BufferCascade scroll-pin
   ------------------------------------------------------------
   Pin the home Senior Consulting Organisation section while
   the BufferCascade animation plays from progress=0 to 1, then
   release. Achieved by:

     - JS injects class .gu-bc-pin-section onto the section
     - JS injects class .gu-bc-pin-grid onto the inner
       grid-cols-12 wrapper (so we don't touch Tailwind classes)
     - Section gains a bottom padding of 100vh = "pin runway"
     - Inner grid becomes position: sticky; top: 0; with a
       min-height of 100vh so it occupies the viewport while
       pinned

   Vertical centering of the grid contents during pin is
   preserved by the existing `items-center` class on the grid.
   On viewports < 1024px we fall back to no-pin (mobile users
   get a normal scroll with the animation tied to viewport
   visibility as before).
   ============================================================ */

/* V3.9k3 — 2026-05-25 — BufferCascade scroll-pin via translateY()
   ------------------------------------------------------------
   The ancestor <main> element ends its `fade-in` keyframe at
   `transform: translateY(0)` (still non-none), so any `position: sticky`
   or `position: fixed` descendant gets scoped to <main> instead of the
   viewport. V3.9k2 tried position:fixed; V3.9k3 instead translates the
   host column with JS so it visually pins at viewport top while staying
   in normal flow — no containing-block trap.

   - .gu-bc-pin-section : adds 100vh of padding-bottom = pin runway.
   - .gu-bc-pin-host    : the col-span-7 host element; transformed by JS.
                          will-change for compositor optimisation.
*/

@media (min-width: 1024px) {
  .gu-bc-pin-section {
    padding-bottom: 100vh !important;
    position: relative !important;
  }

  .gu-bc-pin-host {
    will-change: transform;
    /* Stack above neighbouring grid columns during translate */
    position: relative;
    z-index: 5;
  }

  /* Vertically centre the cascade inside the viewport during pin (the
     host element retains its natural height, but the inner cascade is
     ~460px so we centre it). Applied always — harmless when ty=0. */
  .gu-bc-pin-host > .gu-bc {
    margin-top: max(0px, calc((100vh - 460px) / 2));
    margin-bottom: max(0px, calc((100vh - 460px) / 2));
  }
}

@media (prefers-reduced-motion: reduce) {
  .gu-bc-pin-section {
    padding-bottom: 0 !important;
  }
  .gu-bc-pin-host {
    transform: none !important;
  }
}

/* ============================================================
   V3.9k5 — 2026-05-25 — Fade non-selectable mega-menu items
   ------------------------------------------------------------
   User request: "Lower the opacity of the navigation selections
   that are not selectable."

   In each nav mega-menu, some <li> items render plain text
   (no <a> link) — visually indistinguishable from clickable
   items. Reduce opacity so users can tell at a glance which
   items are inert.

   Scope: <li> elements inside the header mega-menu panel that
   do NOT contain an anchor.
   ============================================================ */
header.sticky div.absolute.inset-x-0.top-full li:not(:has(a)) {
  opacity: 0.45;
}

/* ============================================================
   V3.9k6 — 2026-05-25 — Home CTA band (section 8) navy gradient
   ------------------------------------------------------------
   User request: "Make the background the navy blue to blue
   gradient." Target: the home page bottom CTA band containing
   "One Conversation. One Defensible First Step."

   Base section was rendering on a dark-red/brown background
   inherited from band-dark utility. Replace with the same navy
   gradient family used by the home hero — #25408e -> #0d082d ->
   #060b27 — so the closer band sits in the brand navy palette.
   ============================================================ */
main > section:nth-of-type(8) {
  background:
    linear-gradient(180deg,
      #0d082d 0%,
      #1E3A8A 50%,
      #25408e 100%) !important;
  background-color: #0d082d !important;
}

/* ============================================================
   V3.9k7 — 2026-05-25 — CTA band tweaks (two inline edits)
   ------------------------------------------------------------
   Edit 1: Section 8 background → solid #0F0934
           (replaces V3.9k6 gradient).
   Edit 2: Section 8 primary CTA hover state must match the
           main-nav "Book a diagnostic" hover exactly —
           bg=navy, color=blue, translateY(-1px),
           shadow=0 12px 24px -10px rgba(92,193,255,.5).
   ============================================================ */

/* (1) Solid #0F0934 background — high-specificity selector to beat
       the prior rgb(17,19,24) rule on .band-dark[class*="border-t"]. */
main > section.band-dark[class*="border-t"]:nth-of-type(8),
main > section:nth-of-type(8).band-dark,
main > section:nth-of-type(8) {
  background: #0F0934 !important;
  background-color: #0F0934 !important;
  background-image: none !important;
}

/* (2) Align section-8 primary CTA hover with the main-nav hover */
main > section:nth-of-type(8) a.bg-background:hover,
main > section:nth-of-type(8) a.bg-brand:hover,
main > section:nth-of-type(8) a.bg-ink:hover,
main > section.band-dark[class*="border-t"]:nth-of-type(8) a.bg-background:hover,
main > section.band-dark[class*="border-t"]:nth-of-type(8) a.bg-brand:hover,
main > section.band-dark[class*="border-t"]:nth-of-type(8) a.bg-ink:hover {
  background: var(--gu-navy) !important;
  color: var(--gu-blue) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 12px 24px -10px rgba(92,193,255,.5) !important;
}

/* ============================================================
   V3.9k8 — 2026-05-26 — TOC Isometric Flow widget
   ============================================================
   Replaces the V3.7 Schedule-Optimisation Engine cascade inside the
   .gu-bc panel on the home About hero. JS injects new .gu-toc__* DOM;
   this block styles the isometric capacity bars, status pill, WIP
   particles, and the silo→TOC state transition.
   ============================================================ */

/* (a) Override outer panel background to Vanguard Navy */
.gu-bc.gu-toc {
  background: #0f0934 !important;
}

/* (b) Isometric grid overlay */
.gu-toc__grid {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.5;
}

/* (c) Header strip: eyebrow + title left, status pill right */
.gu-toc__head {
  position: relative;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.gu-toc__head-text { display: flex; flex-direction: column; gap: 4px; }
.gu-toc__eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.gu-toc__title {
  font-family: 'Satoshi', 'Inter', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
  line-height: 1.2;
}

/* (d) Status pill — two states */
.gu-toc__pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(15,9,52,0.6);
  color: rgba(255,255,255,0.85);
  font-size: 12px;
  font-weight: 500;
  font-family: 'Satoshi', 'Inter', system-ui, sans-serif;
  white-space: nowrap;
  transition: background-color 300ms ease, border-color 300ms ease, color 300ms ease;
}
.gu-toc__pill[data-state="toc"] {
  background: rgba(16,185,129,0.10);
  border-color: rgba(16,185,129,0.7);
  color: #6ee7b7;
}
.gu-toc__pill-icon { flex-shrink: 0; }
.gu-toc__pill-icon--toc { display: none; }
.gu-toc__pill[data-state="toc"] .gu-toc__pill-icon--silo { display: none; }
.gu-toc__pill[data-state="toc"] .gu-toc__pill-icon--toc  { display: inline-block; }

/* (e) Stage — fixed-height scene with 4 column tracks */
.gu-toc__stage {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
}
.gu-toc__scene {
  position: relative;
  width: 100%;
  height: 230px;
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  gap: 12px;
  padding: 0 8px 38px; /* bottom = label band */
}

/* (f) Each column = positioned track + animated bar + label */
.gu-toc__col {
  position: relative;
  flex: 1 1 0;
  height: 100%;
  max-width: 130px;
}

.gu-toc__track {
  position: absolute;
  left: 0; right: 0;
  top: 0;
  bottom: 38px; /* sit above the label band */
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 4px;
  z-index: 1;
  /* subtle skew for faux depth */
  transform: skewY(-3deg);
  transform-origin: bottom left;
}

/* (g) Animated bar — grows up from the bottom of the track */
.gu-toc__bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 38px;
  height: 0;
  border-radius: 4px;
  overflow: hidden;
  z-index: 2;
  transition: height 480ms cubic-bezier(0.4, 0, 0.2, 1);
  transform: skewY(-3deg);
  transform-origin: bottom left;
  box-shadow: 0 6px 16px -8px rgba(0,0,0,0.6);
  max-height: calc(100% - 38px);
}
.gu-toc__bar-back {
  position: absolute; inset: 0;
  background: #0f0934;
  border-radius: 4px;
}
.gu-toc__bar-front {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, #25408e 0%, #0f0934 100%);
  border-top: 1px solid rgba(92,193,255,0.3);
  border-radius: 4px;
}
.gu-toc__bar-fill {
  position: absolute;
  left: 18%; right: 18%; bottom: 6%; top: 8%;
  background: var(--gu-blue, #5cc1ff);
  border-radius: 3px;
  transition: background-color 350ms ease;
  box-shadow: 0 0 12px -2px currentColor;
  color: rgba(92,193,255,0.5);
}
.gu-toc__col.is-warn .gu-toc__bar-fill { color: rgba(245,158,11,0.7); }
.gu-bc.gu-toc.is-toc .gu-toc__bar-fill { color: rgba(16,185,129,0.6); }
/* Bottleneck warning: amber pulse before TOC active */
.gu-toc__col.is-warn .gu-toc__bar-fill {
  background: #f59e0b;
  animation: gu-toc-pulse 1.4s ease-in-out infinite;
}
/* TOC active: all fills go emerald */
.gu-bc.gu-toc.is-toc .gu-toc__bar-fill {
  background: #10b981;
}
@keyframes gu-toc-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

/* (h) WIP red particle cluster — floats above the bottleneck bar */
.gu-toc__wip {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(38px + 100%);
  margin-bottom: -32px;
  width: 120%;
  height: 56px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
  align-content: flex-end;
  opacity: 0;
  transition: opacity 380ms ease;
  z-index: 3;
  pointer-events: none;
}
.gu-toc__wip-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #ef4444;
  flex-shrink: 0;
  animation: gu-toc-pulse 1s ease-in-out infinite;
}

/* (i) Process labels — anchored under each column */
.gu-toc__label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  pointer-events: none;
  z-index: 4;
}
.gu-toc__label-name {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ffffff;
  font-weight: 700;
  line-height: 1.1;
}
.gu-toc__label-cap {
  font-size: 10px;
  color: rgba(203,213,225,0.85);
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.gu-toc__col[data-bottleneck="1"] .gu-toc__label-cap {
  color: #fbbf24;
}
.gu-bc.gu-toc.is-toc .gu-toc__col .gu-toc__label-cap {
  color: #6ee7b7;
}

/* (j) Legend strip */
.gu-toc__legend {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: rgba(15,9,52,0.7);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 6px;
}
.gu-toc__legend-icon {
  flex-shrink: 0;
  color: #fbbf24;
  transition: color 300ms ease;
}
.gu-bc.gu-toc.is-toc .gu-toc__legend-icon { color: #34d399; }
.gu-bc.gu-toc .gu-toc__legend-text {
  margin: 0 !important;
  font-size: 12.5px !important;
  line-height: 1.55 !important;
  color: rgba(203,213,225,0.92) !important;
  font-family: 'Satoshi', 'Inter', system-ui, sans-serif !important;
  font-weight: 400 !important;
}

/* (k) Honor prefers-reduced-motion: kill the pulse + WIP animation */
@media (prefers-reduced-motion: reduce) {
  .gu-toc__bar,
  .gu-toc__bar-fill,
  .gu-toc__pill,
  .gu-toc__legend-icon,
  .gu-toc__wip {
    transition: none !important;
  }
  .gu-toc__wip-dot,
  .gu-toc__col.is-warn .gu-toc__bar-fill {
    animation: none !important;
  }
}

/* (l) Mobile / narrow tweaks */
@media (max-width: 760px) {
  .gu-toc__head { flex-direction: column; gap: 10px; align-items: stretch; }
  .gu-toc__title { font-size: 14px; }
  .gu-toc__pill  { align-self: flex-start; white-space: normal; font-size: 11px; padding: 5px 10px; }
  .gu-toc__scene { gap: 8px; padding: 0 4px 36px; height: 200px; }
  .gu-toc__track, .gu-toc__bar { transform: none; }
  .gu-toc__label-name { font-size: 9px; letter-spacing: 0.10em; }
  .gu-toc__label-cap  { font-size: 9px; }
  .gu-toc__wip { width: 100%; height: 40px; }
}

/* ============================================================
   V3.9k10 — 2026-05-26 — Close inner-hero gap above eyebrow
   ============================================================
   User reported a large empty area between the breadcrumb and
   the page eyebrow on inner pages (What We Solve, Industries,
   Our Solutions, Insights, etc.).

   Cause: V3.9g3 set the inner-hero section to
     margin-top: -163px; padding-top: 270px;
   so the section image runs flush to the top of the viewport
   while content sits below the breadcrumb. Combined with the
   inner container's lg:pt-24 (96px), the total offset from the
   breadcrumb bottom to the eyebrow was ~203px.

   Fix: keep the negative top margin (so the hero bg still runs
   to the very top), but cut the section padding-top from 270px
   to 180px. Net effect: -90px of empty space below the
   breadcrumb. Eyebrow now sits ~110px below breadcrumb instead
   of ~203px.
   ============================================================ */
main:has(> div.container-x.pt-6.pb-2:first-child) > div.container-x.pt-6.pb-2:first-child + section.bg-surface {
  padding-top: 180px !important;
}

/* =====================================================================
   V3.9k12 — Diagnostic CTA band restyle (light theme)
   Date: 2026-05-26
   Target: <section class="band-dark"> containing
           [data-testid="cta-diagnostic-inline"]
   ===================================================================== */

/* Background → very light blue */
section.band-dark:has([data-testid="cta-diagnostic-inline"]),
main > section.band-dark:has([data-testid="cta-diagnostic-inline"]),
main:has(> div.container-x.pt-6.pb-2:first-child) > section.band-dark:has([data-testid="cta-diagnostic-inline"]),
main > section.band-dark:nth-of-type(n):has([data-testid="cta-diagnostic-inline"]) {
  background-color: #f5fbff !important;
  background-image: none !important;
}

/* Stack: place button BELOW the paragraph instead of in right column */
section.band-dark:has([data-testid="cta-diagnostic-inline"]) > .container-x {
  display: block !important;
}
section.band-dark:has([data-testid="cta-diagnostic-inline"]) > .container-x > div {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  justify-self: start !important;
}
section.band-dark:has([data-testid="cta-diagnostic-inline"]) > .container-x > div:last-child {
  margin-top: 1.5rem !important;
  display: block !important;
}

/* Eyebrow ("Direct path") → light blue */
section.band-dark:has([data-testid="cta-diagnostic-inline"]) .eyebrow,
section.band-dark:has([data-testid="cta-diagnostic-inline"]) .eyebrow.eyebrow-dark {
  color: #5cc1ff !important;
}

/* Heading ("Not sure where you are? Take the diagnostic.") → blue (navy brand) */
section.band-dark:has([data-testid="cta-diagnostic-inline"]) h2,
section.band-dark:has([data-testid="cta-diagnostic-inline"]) h2.text-background,
section.band-dark:has([data-testid="cta-diagnostic-inline"]) h2.display-xl {
  color: #25408e !important;
}

/* Paragraph (body) → black */
section.band-dark:has([data-testid="cta-diagnostic-inline"]) p,
section.band-dark:has([data-testid="cta-diagnostic-inline"]) p.lead {
  color: #000000 !important;
}

/* --- V3.9k12 addendum: beat inner-page .band-dark h2/p white-text rules */
main:has(> div.container-x.pt-6.pb-2:first-child) > section.band-dark:has([data-testid="cta-diagnostic-inline"]) h2,
main:has(> div.container-x.pt-6.pb-2:first-child) > section.band-dark:has([data-testid="cta-diagnostic-inline"]) h2.text-background,
main:has(> div.container-x.pt-6.pb-2:first-child) > section.band-dark:has([data-testid="cta-diagnostic-inline"]) h2.display-xl,
main > section.band-dark:has([data-testid="cta-diagnostic-inline"]) h2,
main > section.band-dark:has([data-testid="cta-diagnostic-inline"]) h2.text-background,
main > section.band-dark:has([data-testid="cta-diagnostic-inline"]) h2.display-xl {
  color: #25408e !important;
}

main:has(> div.container-x.pt-6.pb-2:first-child) > section.band-dark:has([data-testid="cta-diagnostic-inline"]) p,
main:has(> div.container-x.pt-6.pb-2:first-child) > section.band-dark:has([data-testid="cta-diagnostic-inline"]) p.lead,
main > section.band-dark:has([data-testid="cta-diagnostic-inline"]) p,
main > section.band-dark:has([data-testid="cta-diagnostic-inline"]) p.lead {
  color: #000000 !important;
}

/* =====================================================================
   V3.9k13 — Outcome inner-hero CTA pair restyle
   Date: 2026-05-26
   Target: `<div class="mt-9 flex flex-wrap gap-3">` inside the inner-page
           hero section (`section.bg-surface`) under `main` shell that has
           the breadcrumb `div.container-x.pt-6.pb-2:first-child`.
   ===================================================================== */

/* Both CTAs scoped to the inner-hero CTA group */
main:has(> div.container-x.pt-6.pb-2:first-child) section.bg-surface div.mt-9.flex.flex-wrap.gap-3 > a,
main section.bg-surface div.mt-9.flex.flex-wrap.gap-3 > a {
  /* Remove outline/focus borders on both buttons */
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Secondary button (the .border.border-line.text-ink one):
   light blue outline + blue text + transparent background */
main:has(> div.container-x.pt-6.pb-2:first-child) section.bg-surface div.mt-9.flex.flex-wrap.gap-3 > a.border-line,
main:has(> div.container-x.pt-6.pb-2:first-child) section.bg-surface div.mt-9.flex.flex-wrap.gap-3 > a.text-ink.hover-elevate,
main section.bg-surface div.mt-9.flex.flex-wrap.gap-3 > a.border-line,
main section.bg-surface div.mt-9.flex.flex-wrap.gap-3 > a.text-ink.hover-elevate {
  background-color: transparent !important;
  background: transparent !important;
  border: 1px solid #5cc1ff !important;
  color: #5cc1ff !important;
}

/* =====================================================================
   V3.9k14 — "The Position" band restyle (light theme)
   Date: 2026-05-26
   Target: <section class="band-dark"> on outcome detail pages that
           contains the "The position" eyebrow + 01/02/03 stat columns.
   Scope:  section.band-dark with a .tabular descendant AND an .eyebrow-dark
   ===================================================================== */

section.band-dark:has(.eyebrow-dark):has(.tabular),
main > section.band-dark:has(.eyebrow-dark):has(.tabular),
main:has(> div.container-x.pt-6.pb-2:first-child) > section.band-dark:has(.eyebrow-dark):has(.tabular),
main > section.band-dark:nth-of-type(n):has(.eyebrow-dark):has(.tabular) {
  background-color: #f5fbff !important;
  background-image: none !important;
}

/* Eyebrow ("The position") → light blue */
section.band-dark:has(.tabular) .eyebrow,
section.band-dark:has(.tabular) .eyebrow.eyebrow-dark,
main > section.band-dark:has(.tabular) .eyebrow,
main > section.band-dark:has(.tabular) .eyebrow.eyebrow-dark {
  color: #5cc1ff !important;
}

/* Heading "A recovery is structural. Not a re-plan." → blue */
section.band-dark:has(.tabular) h2,
section.band-dark:has(.tabular) h2.text-background,
section.band-dark:has(.tabular) h2.display-xl,
main > section.band-dark:has(.tabular) h2,
main > section.band-dark:has(.tabular) h2.text-background,
main > section.band-dark:has(.tabular) h2.display-xl,
main:has(> div.container-x.pt-6.pb-2:first-child) > section.band-dark:has(.tabular) h2,
main:has(> div.container-x.pt-6.pb-2:first-child) > section.band-dark:has(.tabular) h2.text-background,
main:has(> div.container-x.pt-6.pb-2:first-child) > section.band-dark:has(.tabular) h2.display-xl {
  color: #25408e !important;
}

/* Paragraph (.lead) → black */
section.band-dark:has(.tabular) p,
section.band-dark:has(.tabular) p.lead,
main > section.band-dark:has(.tabular) p,
main > section.band-dark:has(.tabular) p.lead,
main:has(> div.container-x.pt-6.pb-2:first-child) > section.band-dark:has(.tabular) p,
main:has(> div.container-x.pt-6.pb-2:first-child) > section.band-dark:has(.tabular) p.lead {
  color: #000000 !important;
}

/* Stat numbers (01/02/03) — match navy so they're readable on light bg.
   Stat labels — match navy. Stat divider lines → light blue. */
section.band-dark:has(.tabular) .tabular,
main > section.band-dark:has(.tabular) .tabular {
  color: #25408e !important;
}
section.band-dark:has(.tabular) .border-l,
main > section.band-dark:has(.tabular) .border-l {
  border-color: #5cc1ff !important;
}
section.band-dark:has(.tabular) .tabular + div,
main > section.band-dark:has(.tabular) .tabular + div {
  color: #25408e !important;
}

/* ============================================================
   V3.9k15 — "What is usually happening" cards: paragraph → black
   Cards use class: border border-line rounded-md bg-surface p-6
   Default p uses text-ink-2 which renders near-white on white cards.
   ============================================================ */
main:has(> div.container-x.pt-6.pb-2:first-child) section.section div.border.border-line.rounded-md.bg-surface.p-6 > p,
main:has(> div.container-x.pt-6.pb-2:first-child) section.section div.border.border-line.rounded-md.bg-surface.p-6 > p.text-\[15px\],
section.section div.border.border-line.rounded-md.bg-surface.p-6 > p {
  color: #000000 !important;
}

/* ============================================================
   V3.9k16 — Outcome detail page: "What Has To Change" + "The Solution"
   section h2 headings → brand blue (#25408e)
   Scope: inner page (main:has prefix) sections containing an eyebrow
   followed by a display heading. Targets the LEFT-column h2 in
   the 12-col grid where the eyebrow precedes it.
   ============================================================ */
main:has(> div.container-x.pt-6.pb-2:first-child) section.section h2.display-lg,
main:has(> div.container-x.pt-6.pb-2:first-child) section.section h2.display-xl,
main:has(> div.container-x.pt-6.pb-2:first-child) section.section .col-span-12.lg\:col-span-5 > h2,
main:has(> div.container-x.pt-6.pb-2:first-child) section.section .col-span-12.lg\:col-span-5 h2 {
  color: #25408e !important;
}

/* ============================================================
   V3.9k17 — Outcome detail page: fix white-on-light text in
   plain section.section bands (Results + Your First Step).
   - Headings stay blue (already inherited from V3.9k16-era rules)
   - Lead paragraphs → black
   - Stat numbers (.tabular) → brand blue
   - Stat labels (font-semibold.text-ink) → black
   - Card body p inside cards → black
   ============================================================ */
main:has(> div.container-x.pt-6.pb-2:first-child) section.section h2.display-xl {
  color: #25408e !important;
}
main:has(> div.container-x.pt-6.pb-2:first-child) section.section p.lead {
  color: #000000 !important;
}
main:has(> div.container-x.pt-6.pb-2:first-child) section.section .tabular.text-ink {
  color: #25408e !important;
}
main:has(> div.container-x.pt-6.pb-2:first-child) section.section .font-semibold.text-ink {
  color: #000000 !important;
}
main:has(> div.container-x.pt-6.pb-2:first-child) section.section div.border.border-line.rounded-md.bg-background.p-7 > p {
  color: #000000 !important;
}

/* ============================================================
   V3.9k18 — Restore white heading on the "What is usually
   happening" band (and any sibling section.section with
   transparent bg that shows the body's navy through).
   These are sections with class exactly "section" (no
   bg-surface / bg-background / band-dark / bg-white).
   ============================================================ */
main:has(> div.container-x.pt-6.pb-2:first-child) section.section:not(.bg-surface):not(.bg-background):not(.band-dark):not(.bg-white) h2.display-xl,
main:has(> div.container-x.pt-6.pb-2:first-child) section.section:not(.bg-surface):not(.bg-background):not(.band-dark):not(.bg-white) h1,
main:has(> div.container-x.pt-6.pb-2:first-child) section.section:not(.bg-surface):not(.bg-background):not(.band-dark):not(.bg-white) h2,
main:has(> div.container-x.pt-6.pb-2:first-child) section.section:not(.bg-surface):not(.bg-background):not(.band-dark):not(.bg-white) h3 {
  color: #ffffff !important;
}

/* ============================================================
   V3.9k19 — Force p.lead paragraphs BLACK in Results + Your
   First Step sections (plain section.section with transparent
   bg — body navy showing through). The pre-existing V3.5 rule
   `section.section p:not(.tabular):not(.eyebrow) → #fff`
   has specificity (0,5,3) due to the two :not()s. Match it.
   ============================================================ */
main:has(> div.container-x.pt-6.pb-2:first-child) section.section:not(.bg-surface):not(.bg-background) p.lead:not(.tabular):not(.eyebrow),
main:has(> div.container-x.pt-6.pb-2:first-child) section.section:not(.bg-surface):not(.bg-background) p:not(.tabular):not(.eyebrow).lead {
  color: #000000 !important;
}

/* But ONLY on these light-bg "results + first step" sections,
   NOT on the dark hero/inner-hero/dark-bg sections (where the
   heading is white). The selector above includes :not(.bg-surface)
   :not(.bg-background) to limit the scope, plus we restrict to
   sections that contain a .tabular OR an eyebrow "Your first step"
   pattern — by also covering: this is the same scoping logic that
   k18 used for headings. We want the LEAD to be black only when
   the surrounding heading was just turned blue, NOT white. */

/* Detection: sections with class exactly "section  " (no bg-* and
   no band-dark) but containing .tabular numbers (Results section)
   OR a paragraph that mentions "first conversation" (First Step).
   Simpler: just turn lead black on bare `.section` sections that
   contain a `.tabular` element OR a `.grid-cols-1.md\:grid-cols-3`
   inner cards grid. Both cases match here. */
main:has(> div.container-x.pt-6.pb-2:first-child) section.section:not(.bg-surface):not(.bg-background):not(.band-dark):has(.tabular) p.lead,
main:has(> div.container-x.pt-6.pb-2:first-child) section.section:not(.bg-surface):not(.bg-background):not(.band-dark):has(.border.border-line.rounded-md.p-7) p.lead {
  color: #000000 !important;
}

/* ============================================================
   V3.9k20 — Reconcile k16/k17/k18/k19 to correctly distinguish
   the dark "What is usually happening" band from light Results
   and First Step bands.

   Identification (on outcome detail page route):
   - DARK band  → section.section :has(div.border.border-line.rounded-md.bg-surface.p-6)
                  (the 3 V3.9k15 cards live ONLY in this section)
   - LIGHT band → section.section :has(.tabular)  (Results)
   - LIGHT band → section.section :has(.border.border-line.rounded-md.p-7.bg-background)  (First Step)

   Fixes:
   1. Headings in the LIGHT Results/First Step sections → blue (#25408e)
   2. p.lead in DARK "usually happening" → white
   3. Eyebrow stays light blue everywhere (no change needed)
   ============================================================ */

/* Override k18: force white on plain .section was too broad.
   Restrict white headings to ONLY the dark band identified by
   :has() the V3.9k15 white cards. */
main:has(> div.container-x.pt-6.pb-2:first-child) section.section:not(.bg-surface):not(.bg-background):not(.band-dark):not(.bg-white):has(div.border.border-line.rounded-md.bg-surface.p-6) h1,
main:has(> div.container-x.pt-6.pb-2:first-child) section.section:not(.bg-surface):not(.bg-background):not(.band-dark):not(.bg-white):has(div.border.border-line.rounded-md.bg-surface.p-6) h2,
main:has(> div.container-x.pt-6.pb-2:first-child) section.section:not(.bg-surface):not(.bg-background):not(.band-dark):not(.bg-white):has(div.border.border-line.rounded-md.bg-surface.p-6) h2.display-xl,
main:has(> div.container-x.pt-6.pb-2:first-child) section.section:not(.bg-surface):not(.bg-background):not(.band-dark):not(.bg-white):has(div.border.border-line.rounded-md.bg-surface.p-6) h3 {
  color: #ffffff !important;
}

/* Force OTHER plain .section headings (without the V3.9k15 cards)
   back to blue — these are Results, First Step, "Where this problem
   usually goes next", etc on light bg. */
main:has(> div.container-x.pt-6.pb-2:first-child) section.section:not(.bg-surface):not(.bg-background):not(.band-dark):not(.bg-white):not(:has(div.border.border-line.rounded-md.bg-surface.p-6)) h1,
main:has(> div.container-x.pt-6.pb-2:first-child) section.section:not(.bg-surface):not(.bg-background):not(.band-dark):not(.bg-white):not(:has(div.border.border-line.rounded-md.bg-surface.p-6)) h2,
main:has(> div.container-x.pt-6.pb-2:first-child) section.section:not(.bg-surface):not(.bg-background):not(.band-dark):not(.bg-white):not(:has(div.border.border-line.rounded-md.bg-surface.p-6)) h2.display-xl,
main:has(> div.container-x.pt-6.pb-2:first-child) section.section:not(.bg-surface):not(.bg-background):not(.band-dark):not(.bg-white):not(:has(div.border.border-line.rounded-md.bg-surface.p-6)) h3 {
  color: #25408e !important;
}

/* For the DARK band: p.lead must be WHITE (override k19) */
main:has(> div.container-x.pt-6.pb-2:first-child) section.section:not(.bg-surface):not(.bg-background):not(.band-dark):has(div.border.border-line.rounded-md.bg-surface.p-6) p.lead,
main:has(> div.container-x.pt-6.pb-2:first-child) section.section:not(.bg-surface):not(.bg-background):not(.band-dark):has(div.border.border-line.rounded-md.bg-surface.p-6) p.lead:not(.tabular):not(.eyebrow) {
  color: #ffffff !important;
}

/* ============================================================
   V3.9k21 — Home page "The Position" band → blue bg (revert to
   original brand-navy look so heading + item paras read properly).
   Distinguishing marker: section.band-dark that contains
   .tabular.eyebrow numbered items (01/02/03 grid) AND a
   .display-hero heading. Only ONE section on the home matches.
   ============================================================ */
body section.band-dark:has(.display-hero):has(.tabular.eyebrow),
main > section.band-dark:has(.display-hero):has(.tabular.eyebrow),
main section.band-dark:has(.display-hero):has(.tabular.eyebrow) {
  background-color: #25408e !important;
  background-image: linear-gradient(180deg, #25408e 0%, #0F0934 100%) !important;
}
section.band-dark:has(.display-hero):has(.tabular.eyebrow) h2.display-hero,
section.band-dark:has(.display-hero):has(.tabular.eyebrow) h2 {
  color: #ffffff !important;
}
section.band-dark:has(.display-hero):has(.tabular.eyebrow) p.lead,
section.band-dark:has(.display-hero):has(.tabular.eyebrow) p:not(.eyebrow):not(.tabular) {
  color: hsl(220, 6%, 80%) !important;
}
section.band-dark:has(.display-hero):has(.tabular.eyebrow) .display-md,
section.band-dark:has(.display-hero):has(.tabular.eyebrow) .display-md.text-background {
  color: #ffffff !important;
}
section.band-dark:has(.display-hero):has(.tabular.eyebrow) .tabular.eyebrow,
section.band-dark:has(.display-hero):has(.tabular.eyebrow) .eyebrow.eyebrow-dark {
  color: #5cc1ff !important;
}

/* ============================================================
   V3.9k22 — Outcome detail inner-hero band (idx 1, gradient
   #101049→#0d082d) "The Problem" — heading + lead → white.
   k20 incorrectly painted these blue/black because the
   distinguishing logic (`:not(:has(.bg-surface cards))`) was
   true for this dark hero too. Use adjacent-sibling selector
   for the inner-hero — it's the FIRST <section> after the
   breadcrumb container.
   ============================================================ */
main:has(> div.container-x.pt-6.pb-2:first-child) > div.container-x.pt-6.pb-2:first-child + section h2,
main:has(> div.container-x.pt-6.pb-2:first-child) > div.container-x.pt-6.pb-2:first-child + section h2.display-xl,
main:has(> div.container-x.pt-6.pb-2:first-child) > div.container-x.pt-6.pb-2:first-child + section h1 {
  color: #ffffff !important;
}
main:has(> div.container-x.pt-6.pb-2:first-child) > div.container-x.pt-6.pb-2:first-child + section p.lead,
main:has(> div.container-x.pt-6.pb-2:first-child) > div.container-x.pt-6.pb-2:first-child + section p.lead:not(.tabular):not(.eyebrow),
main:has(> div.container-x.pt-6.pb-2:first-child) > div.container-x.pt-6.pb-2:first-child + section p:not(.tabular):not(.eyebrow) {
  color: #ffffff !important;
}

/* ============================================================
   V3.9k23 — Two fixes, both raise specificity over k20:
   
   1) Outcome inner-hero (#101049→#0d082d gradient, idx-1 section):
      h2 + p.lead → WHITE. Use a much more specific selector
      that explicitly identifies the dark hero.
   
   2) "What is usually happening" cards (V3.9k15 white cards in
      the dark band): card TITLES (`.display-md.text-ink` inside
      `.border.border-line.rounded-md.bg-surface.p-6`) → BLUE.
      The k20 white-h-rule hit these because they're INSIDE the
      band's section, but the cards have white bg so titles must
      be navy.
   ============================================================ */

/* Fix 1: inner-hero white headings */
main:has(> div.container-x.pt-6.pb-2:first-child) > div.container-x.pt-6.pb-2:first-child + section.section h2.display-xl,
main:has(> div.container-x.pt-6.pb-2:first-child) > div.container-x.pt-6.pb-2:first-child + section.section h1,
main:has(> div.container-x.pt-6.pb-2:first-child) > div.container-x.pt-6.pb-2:first-child + section.section h2,
html main:has(> div.container-x.pt-6.pb-2:first-child) > div.container-x.pt-6.pb-2:first-child + section h2.display-xl {
  color: #ffffff !important;
}
main:has(> div.container-x.pt-6.pb-2:first-child) > div.container-x.pt-6.pb-2:first-child + section.section p.lead,
main:has(> div.container-x.pt-6.pb-2:first-child) > div.container-x.pt-6.pb-2:first-child + section.section p.lead:not(.tabular):not(.eyebrow),
html main:has(> div.container-x.pt-6.pb-2:first-child) > div.container-x.pt-6.pb-2:first-child + section p.lead {
  color: #ffffff !important;
}

/* Fix 2: card titles in the dark band's white V3.9k15 cards → blue */
main:has(> div.container-x.pt-6.pb-2:first-child) section.section div.border.border-line.rounded-md.bg-surface.p-6 > h3,
main:has(> div.container-x.pt-6.pb-2:first-child) section.section div.border.border-line.rounded-md.bg-surface.p-6 > .display-md,
main:has(> div.container-x.pt-6.pb-2:first-child) section.section div.border.border-line.rounded-md.bg-surface.p-6 > .display-md.text-ink,
html main:has(> div.container-x.pt-6.pb-2:first-child) section.section div.border.border-line.rounded-md.bg-surface.p-6 .display-md {
  color: #25408e !important;
}

/* ============================================================
   V3.9k24 — Unified outcome-detail section-heading colour
   policy using nth-of-type to avoid :has() specificity wars.
   
   Inner pages have a fixed section order under main:
     section #1 = inner-hero (gradient #101049→#0d082d, DARK)
     section #2 = "A recovery is structural" (band-dark, LIGHT
                  bg from V3.9k14)
     section #3 = "The programme is not just late" (transparent,
                  body navy showing through, DARK)
     section #4 = "Recovery conversation" (bg-surface, LIGHT)
     section #5 = "Critical Chain" (bg-surface, LIGHT)
     section #6 = "Recovery should show up" (transparent → LIGHT)
     section #7 = "A 90-minute" (transparent → LIGHT)
     section #8 = "Speak to a senior" (bg-surface, LIGHT)
     section #9 = "Not sure where you are" (band-dark, LIGHT)
     section #10 = "Where this problem goes next" (LIGHT)
     section #11 = "One conversation. One first step." (band-dark
                   border-t, DARK)
   
   Use highest-specificity inline-style override style — multiple
   class selectors stacked — to beat all earlier !important rules.
   ============================================================ */

/* --- Section 1: inner-hero DARK gradient → h1/h2/p WHITE ---- */
html body main:has(> div.container-x.pt-6.pb-2:first-child) > section.section:nth-of-type(1) h1,
html body main:has(> div.container-x.pt-6.pb-2:first-child) > section.section:nth-of-type(1) h2,
html body main:has(> div.container-x.pt-6.pb-2:first-child) > section.section:nth-of-type(1) h2.display-xl,
html body main:has(> div.container-x.pt-6.pb-2:first-child) > section.section:nth-of-type(1) h2.display-xl.text-ink,
html body main:has(> div.container-x.pt-6.pb-2:first-child) > section.section:nth-of-type(1) .display-xl {
  color: #ffffff !important;
}
html body main:has(> div.container-x.pt-6.pb-2:first-child) > section.section:nth-of-type(1) p,
html body main:has(> div.container-x.pt-6.pb-2:first-child) > section.section:nth-of-type(1) p.lead,
html body main:has(> div.container-x.pt-6.pb-2:first-child) > section.section:nth-of-type(1) p.lead.mt-5 {
  color: #ffffff !important;
}

/* --- Section 3: "Usually happening" DARK transparent → h2 + p
   WHITE, BUT card titles in white V3.9k15 cards → BLUE -------- */
html body main:has(> div.container-x.pt-6.pb-2:first-child) > section.section:nth-of-type(3) > div.container-x > div.grid > div.col-span-12.lg\:col-span-5 h2,
html body main:has(> div.container-x.pt-6.pb-2:first-child) > section.section:nth-of-type(3) > div.container-x > div.grid > div.col-span-12.lg\:col-span-5 h2.display-xl,
html body main:has(> div.container-x.pt-6.pb-2:first-child) > section.section:nth-of-type(3) > div.container-x > div.grid > div.col-span-12.lg\:col-span-5 p,
html body main:has(> div.container-x.pt-6.pb-2:first-child) > section.section:nth-of-type(3) > div.container-x > div.grid > div.col-span-12.lg\:col-span-5 p.lead {
  color: #ffffff !important;
}
/* Card titles INSIDE the white V3.9k15 cards in section 3 → BLUE */
html body main:has(> div.container-x.pt-6.pb-2:first-child) > section.section:nth-of-type(3) div.border.border-line.rounded-md.bg-surface.p-6 > h3,
html body main:has(> div.container-x.pt-6.pb-2:first-child) > section.section:nth-of-type(3) div.border.border-line.rounded-md.bg-surface.p-6 > h3.display-md,
html body main:has(> div.container-x.pt-6.pb-2:first-child) > section.section:nth-of-type(3) div.border.border-line.rounded-md.bg-surface.p-6 > h3.display-md.text-ink,
html body main:has(> div.container-x.pt-6.pb-2:first-child) > section.section:nth-of-type(3) div.border.border-line.rounded-md.bg-surface.p-6 > .display-md {
  color: #25408e !important;
}
/* Card body p in section 3 cards stays black (k15 rule, but re-assert) */
html body main:has(> div.container-x.pt-6.pb-2:first-child) > section.section:nth-of-type(3) div.border.border-line.rounded-md.bg-surface.p-6 > p,
html body main:has(> div.container-x.pt-6.pb-2:first-child) > section.section:nth-of-type(3) div.border.border-line.rounded-md.bg-surface.p-6 > p.text-\[15px\] {
  color: #000000 !important;
}

/* --- Sections 6, 7 (Results / Your First Step): h2 → BLUE, p.lead → BLACK --- */
html body main:has(> div.container-x.pt-6.pb-2:first-child) > section.section:nth-of-type(6) h2,
html body main:has(> div.container-x.pt-6.pb-2:first-child) > section.section:nth-of-type(6) h2.display-xl,
html body main:has(> div.container-x.pt-6.pb-2:first-child) > section.section:nth-of-type(7) h2,
html body main:has(> div.container-x.pt-6.pb-2:first-child) > section.section:nth-of-type(7) h2.display-xl {
  color: #25408e !important;
}
html body main:has(> div.container-x.pt-6.pb-2:first-child) > section.section:nth-of-type(6) p.lead,
html body main:has(> div.container-x.pt-6.pb-2:first-child) > section.section:nth-of-type(7) p.lead {
  color: #000000 !important;
}

/* ============================================================
   V3.9k25 — Correct nth-of-type indexes for outcome detail.
   Actual order:
     section #1 (bg-surface inner-hero) = top hero "Get the
       programme back on a plan" — already styled correctly.
     section #2 (.section, gradient) = "Delay becomes dangerous"
       — DARK, h2+p → WHITE
     section #3 (.band-dark, light bg) = "A recovery is
       structural" — LIGHT (already k14)
     section #4 (.section, transparent → body navy) = "The
       programme is not just late" — DARK, h2+p → WHITE
     sections #5, #6 (.section.bg-surface) = LIGHT bands — h2 BLUE
     sections #7, #8 (.section, transparent → light) = LIGHT
       — h2 BLUE, p.lead BLACK
   ============================================================ */

/* Hero (section #2 in nth-of-type): h2 + p → WHITE */
html body main:has(> div.container-x.pt-6.pb-2:first-child) > section:nth-of-type(2) h2,
html body main:has(> div.container-x.pt-6.pb-2:first-child) > section:nth-of-type(2) h2.display-xl,
html body main:has(> div.container-x.pt-6.pb-2:first-child) > section:nth-of-type(2) h2.display-xl.text-ink,
html body main:has(> div.container-x.pt-6.pb-2:first-child) > section.section:nth-of-type(2) h2.display-xl {
  color: #ffffff !important;
}
html body main:has(> div.container-x.pt-6.pb-2:first-child) > section:nth-of-type(2) p.lead,
html body main:has(> div.container-x.pt-6.pb-2:first-child) > section.section:nth-of-type(2) p.lead {
  color: #ffffff !important;
}

/* "Usually happening" (section #4): h2 + lead → WHITE; card titles → BLUE */
html body main:has(> div.container-x.pt-6.pb-2:first-child) > section:nth-of-type(4) > div.container-x > div.grid > div.col-span-12.lg\:col-span-5 h2,
html body main:has(> div.container-x.pt-6.pb-2:first-child) > section.section:nth-of-type(4) h2.display-xl {
  color: #ffffff !important;
}
html body main:has(> div.container-x.pt-6.pb-2:first-child) > section:nth-of-type(4) > div.container-x > div.grid > div.col-span-12.lg\:col-span-5 p.lead,
html body main:has(> div.container-x.pt-6.pb-2:first-child) > section.section:nth-of-type(4) > div.container-x > div.grid > div.col-span-12.lg\:col-span-5 p.lead {
  color: #ffffff !important;
}
/* Card titles in section #4 → BLUE (override the k20/k24 white-headings) */
html body main:has(> div.container-x.pt-6.pb-2:first-child) > section:nth-of-type(4) div.border.border-line.rounded-md.bg-surface.p-6 h3,
html body main:has(> div.container-x.pt-6.pb-2:first-child) > section:nth-of-type(4) div.border.border-line.rounded-md.bg-surface.p-6 > h3,
html body main:has(> div.container-x.pt-6.pb-2:first-child) > section:nth-of-type(4) div.border.border-line.rounded-md.bg-surface.p-6 > h3.display-md,
html body main:has(> div.container-x.pt-6.pb-2:first-child) > section:nth-of-type(4) div.border.border-line.rounded-md.bg-surface.p-6 > h3.display-md.text-ink,
html body main:has(> div.container-x.pt-6.pb-2:first-child) > section.section:nth-of-type(4) div.border.border-line.rounded-md.bg-surface.p-6 h3.display-md {
  color: #25408e !important;
}

/* Section #7, #8 (Results / First Step): h2 → BLUE, p.lead → BLACK */
html body main:has(> div.container-x.pt-6.pb-2:first-child) > section:nth-of-type(7) h2.display-xl,
html body main:has(> div.container-x.pt-6.pb-2:first-child) > section:nth-of-type(8) h2.display-xl,
html body main:has(> div.container-x.pt-6.pb-2:first-child) > section.section:nth-of-type(7) h2.display-xl,
html body main:has(> div.container-x.pt-6.pb-2:first-child) > section.section:nth-of-type(8) h2.display-xl {
  color: #25408e !important;
}
html body main:has(> div.container-x.pt-6.pb-2:first-child) > section:nth-of-type(7) p.lead,
html body main:has(> div.container-x.pt-6.pb-2:first-child) > section:nth-of-type(8) p.lead {
  color: #000000 !important;
}

/* ============================================================
   V3.9k26 — Match historical carve-out specificity, late source.
   Targets:
     - Hero h2 + p.lead → WHITE (sec #2 — "Delay becomes
       dangerous")  
     - Card titles in dark "Usually happening" band (sec #4)
       → BLUE  
   Strategy: replicate the EXACT :not() chain used by the
   historical light-band carve-outs, plus :nth-of-type to scope
   to the right section. Source order then breaks the tie.
   ============================================================ */

/* Hero (sec #2) h2.display-xl → WHITE — match the carve-out chain */
main:has(> div.container-x.pt-6.pb-2:first-child) section.section:not(.bg-surface):not(.bg-background):not(.band-dark):not(.bg-white):not(:has(.tabular)):not(:has(div.border.border-line.rounded-md.bg-surface.p-6)):nth-of-type(2) h2.display-xl,
main:has(> div.container-x.pt-6.pb-2:first-child) section.section:not(.bg-surface):not(.bg-background):not(.band-dark):not(.bg-white):not(:has(.tabular)):not(:has(div.border.border-line.rounded-md.bg-surface.p-6)):nth-of-type(2) h1,
main:has(> div.container-x.pt-6.pb-2:first-child) section.section:not(.bg-surface):not(.bg-background):not(.band-dark):not(.bg-white):not(:has(.tabular)):not(:has(div.border.border-line.rounded-md.bg-surface.p-6)):nth-of-type(2) h2 {
  color: #ffffff !important;
}

/* Hero (sec #2) p.lead → WHITE */
main:has(> div.container-x.pt-6.pb-2:first-child) section.section:not(.bg-surface):not(.bg-background):not(.band-dark):not(.bg-white):not(:has(.tabular)):not(:has(div.border.border-line.rounded-md.bg-surface.p-6)):nth-of-type(2) p.lead,
main:has(> div.container-x.pt-6.pb-2:first-child) section.section:not(.bg-surface):not(.bg-background):not(.band-dark):not(.bg-white):not(:has(.tabular)):not(:has(div.border.border-line.rounded-md.bg-surface.p-6)):nth-of-type(2) p {
  color: #ffffff !important;
}

/* Card titles in sec #4 ("Usually happening") → BLUE.
   Match the carve-out chain that's coloring them white. */
main:has(> div.container-x.pt-6.pb-2:first-child) section.section:not(.bg-surface):not(.bg-background):not(.band-dark):not(.bg-white):has(div.border.border-line.rounded-md.bg-surface.p-6) div.border.border-line.rounded-md.bg-surface.p-6 h3,
main:has(> div.container-x.pt-6.pb-2:first-child) section.section:not(.bg-surface):not(.bg-background):not(.band-dark):not(.bg-white):has(div.border.border-line.rounded-md.bg-surface.p-6) div.border.border-line.rounded-md.bg-surface.p-6 h3.display-md,
main:has(> div.container-x.pt-6.pb-2:first-child) section.section:not(.bg-surface):not(.bg-background):not(.band-dark):not(.bg-white):has(div.border.border-line.rounded-md.bg-surface.p-6) div.border.border-line.rounded-md.bg-surface.p-6 h3.display-md.text-ink {
  color: #25408e !important;
}

/* ============================================================
   V3.9k27 — Pullquote BG image on outcome detail pages.
   The pullquote section (section.section.bg-surface containing
   figure > blockquote.font-serif) gets a background photograph
   with dark overlay so serif text reads as light-on-dark.
   ============================================================ */
main:has(> div.container-x.pt-6.pb-2:first-child) section.section.bg-surface:has(> div.container-x > figure.max-w-4xl > blockquote.font-serif) {
  position: relative !important;
  background-color: #0F0934 !important;
  background-image:
    linear-gradient(rgba(15,9,52,0.62), rgba(15,9,52,0.62)),
    url('img/pullquote-ridges.jpg') !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

/* Quote + caption → white over the photo */
main:has(> div.container-x.pt-6.pb-2:first-child) section.section.bg-surface:has(> div.container-x > figure.max-w-4xl > blockquote.font-serif) blockquote,
main:has(> div.container-x.pt-6.pb-2:first-child) section.section.bg-surface:has(> div.container-x > figure.max-w-4xl > blockquote.font-serif) blockquote.font-serif,
main:has(> div.container-x.pt-6.pb-2:first-child) section.section.bg-surface:has(> div.container-x > figure.max-w-4xl > blockquote.font-serif) blockquote.text-ink {
  color: #ffffff !important;
}
main:has(> div.container-x.pt-6.pb-2:first-child) section.section.bg-surface:has(> div.container-x > figure.max-w-4xl > blockquote.font-serif) figcaption,
main:has(> div.container-x.pt-6.pb-2:first-child) section.section.bg-surface:has(> div.container-x > figure.max-w-4xl > blockquote.font-serif) figcaption.eyebrow {
  color: rgba(255,255,255,0.78) !important;
}

/* ============================================================
   V3.9k28 — "Problem Areas" intro on What We Solve landing.
   Section: section.section (transparent → body navy DARK) on
     /#/what-we-solve landing — has the "Problem areas" eyebrow,
     "The right starting point…" h2, and a grid of issue cards.
   Identify uniquely by structure: section has BOTH a
     > div.container-x > div.max-w-3xl  (intro)  AND
     > div.container-x > div.mt-12.grid  (cards)
   Targets: h2 → WHITE, p.lead → WHITE.
   ============================================================ */
main:has(> div.container-x.pt-6.pb-2:first-child) > section.section:has(> div.container-x > div.max-w-3xl):has(> div.container-x > div.mt-12.grid) > div.container-x > div.max-w-3xl > h2,
main:has(> div.container-x.pt-6.pb-2:first-child) > section.section:has(> div.container-x > div.max-w-3xl):has(> div.container-x > div.mt-12.grid) > div.container-x > div.max-w-3xl > h2.display-xl,
main:has(> div.container-x.pt-6.pb-2:first-child) > section.section:has(> div.container-x > div.max-w-3xl):has(> div.container-x > div.mt-12.grid) > div.container-x > div.max-w-3xl > h2.display-xl.text-ink {
  color: #ffffff !important;
}
main:has(> div.container-x.pt-6.pb-2:first-child) > section.section:has(> div.container-x > div.max-w-3xl):has(> div.container-x > div.mt-12.grid) > div.container-x > div.max-w-3xl > p,
main:has(> div.container-x.pt-6.pb-2:first-child) > section.section:has(> div.container-x > div.max-w-3xl):has(> div.container-x > div.mt-12.grid) > div.container-x > div.max-w-3xl > p.lead,
main:has(> div.container-x.pt-6.pb-2:first-child) > section.section:has(> div.container-x > div.max-w-3xl):has(> div.container-x > div.mt-12.grid) > div.container-x > div.max-w-3xl > p.lead.mt-5 {
  color: #ffffff !important;
}

/* ============================================================
   V3.9k29 — boost specificity for k28 landing intro h2/p.
   Match the historical carve-out chain plus the unique
   :has() qualifiers to beat (then later source order wins).
   ============================================================ */
main:has(> div.container-x.pt-6.pb-2:first-child) section.section:not(.bg-surface):not(.bg-background):not(.band-dark):not(.bg-white):not(:has(div.border.border-line.rounded-md.bg-surface.p-6)):has(> div.container-x > div.max-w-3xl):has(> div.container-x > div.mt-12.grid) h2,
main:has(> div.container-x.pt-6.pb-2:first-child) section.section:not(.bg-surface):not(.bg-background):not(.band-dark):not(.bg-white):not(:has(div.border.border-line.rounded-md.bg-surface.p-6)):has(> div.container-x > div.max-w-3xl):has(> div.container-x > div.mt-12.grid) h2.display-xl,
main:has(> div.container-x.pt-6.pb-2:first-child) section.section:not(.bg-surface):not(.bg-background):not(.band-dark):not(.bg-white):not(:has(div.border.border-line.rounded-md.bg-surface.p-6)):has(> div.container-x > div.max-w-3xl):has(> div.container-x > div.mt-12.grid) h2.display-xl.text-ink,
main:has(> div.container-x.pt-6.pb-2:first-child) section.section:not(.bg-surface):not(.bg-background):not(.band-dark):not(.bg-white):not(:has(div.border.border-line.rounded-md.bg-surface.p-6)):has(> div.container-x > div.max-w-3xl):has(> div.container-x > div.mt-12.grid) p,
main:has(> div.container-x.pt-6.pb-2:first-child) section.section:not(.bg-surface):not(.bg-background):not(.band-dark):not(.bg-white):not(:has(div.border.border-line.rounded-md.bg-surface.p-6)):has(> div.container-x > div.max-w-3xl):has(> div.container-x > div.mt-12.grid) p.lead {
  color: #ffffff !important;
}

/* ============================================================
   V3.9k30 — "Where this problem usually goes next" h2 → BLUE.
   On outcome detail pages, section.section.bg-surface (light bg)
   contains the "Recommended next steps" eyebrow + "Where this
   problem usually goes next" h2, currently rendering WHITE
   (invisible). Make it brand blue.
   Selector: section.section.bg-surface with an intro
   div.max-w-3xl AND a sibling div.mt-12.grid.grid-cols-12.
   ============================================================ */
main:has(> div.container-x.pt-6.pb-2:first-child) section.section.bg-surface:has(> div.container-x > div.max-w-3xl):has(> div.container-x > div.mt-12.grid.grid-cols-12) > div.container-x > div.max-w-3xl > h2,
main:has(> div.container-x.pt-6.pb-2:first-child) section.section.bg-surface:has(> div.container-x > div.max-w-3xl):has(> div.container-x > div.mt-12.grid.grid-cols-12) > div.container-x > div.max-w-3xl > h2.display-xl,
main:has(> div.container-x.pt-6.pb-2:first-child) section.section.bg-surface:has(> div.container-x > div.max-w-3xl):has(> div.container-x > div.mt-12.grid.grid-cols-12) > div.container-x > div.max-w-3xl > h2.display-xl.text-ink {
  color: #25408e !important;
}
/* Also ensure the lead paragraph below stays black on this light band */
main:has(> div.container-x.pt-6.pb-2:first-child) section.section.bg-surface:has(> div.container-x > div.max-w-3xl):has(> div.container-x > div.mt-12.grid.grid-cols-12) > div.container-x > div.max-w-3xl > p.lead {
  color: #000000 !important;
}

/* ============================================================
   V3.9k31 — Diagnostic page (/#/what-we-solve/diagnostic).
   3 fixes:
   (1) "How this works" sticky card paragraph → BLACK
       (was white-on-white, invisible).
   (2) "What's the operating reality right now?" + sibling
       section headings (h3.display-md inside the left column
       grouped sections) → WHITE (page bg is dark navy).
   (3) "Show my first step" submit button → remove border.
   ============================================================ */

/* (1) Sticky "How this works" card paragraph → BLACK */
main:has(> div.container-x.pt-6.pb-2:first-child) div.lg\:sticky.lg\:top-28.bg-surface.border.border-line.rounded-md.p-7 > p,
main:has(> div.container-x.pt-6.pb-2:first-child) div.lg\:sticky.lg\:top-28.bg-surface.border.border-line.rounded-md.p-7 > p.text-\[14\.5px\],
main:has(> div.container-x.pt-6.pb-2:first-child) div.lg\:sticky.lg\:top-28.bg-surface.border.border-line.rounded-md.p-7 > p.text-\[14\.5px\].text-ink-2.leading-relaxed {
  color: #000000 !important;
}

/* (2) Section headings ("What's the operating reality right
   now?", "What sector are you in?", "Where are you in the
   conversation?", "What's your honest constraint?") in left
   column groups → WHITE. They live inside
   div.col-span-12.lg:col-span-7.space-y-10 > div.border-t.border-line.pt-10 > div.flex.items-baseline > h3.display-md.text-ink */
main:has(> div.container-x.pt-6.pb-2:first-child) div.col-span-12.lg\:col-span-7.space-y-10 > div.border-t.border-line.pt-10 > div.flex.items-baseline.gap-5.mb-6 > h3.display-md,
main:has(> div.container-x.pt-6.pb-2:first-child) div.col-span-12.lg\:col-span-7.space-y-10 > div.border-t.border-line.pt-10 > div.flex.items-baseline.gap-5.mb-6 > h3.display-md.text-ink {
  color: #ffffff !important;
}

/* (3) "Show my first step" submit button — remove border. */
main:has(> div.container-x.pt-6.pb-2:first-child) button[data-testid="diagnostic-submit"] {
  border: 0 none !important;
  outline: 0 none !important;
}

/* ============================================================
   V3.9k32 — Global footer background color → #030F24
   ============================================================ */
footer.band-dark,
body footer.band-dark,
body footer.band-dark.mt-0,
html body footer.band-dark {
  background-color: #030F24 !important;
  background-image: none !important;
}

/* ============================================================
   V3.9k33 — Global swap #111318 → #0F0934
   Targets the pre-footer "One Conversation" band
   (section.band-dark.border-t.border-[hsl(220,10%,18%)]) and
   the Contact/Results dark hero bands (section.band-dark
   .relative.overflow-hidden) — both currently rendering at
   rgb(17,19,24) / #111318.
   ============================================================ */
section.band-dark,
body section.band-dark,
html body section.band-dark,
section.band-dark.border-t,
section.band-dark.relative.overflow-hidden,
body section.band-dark.border-t,
body section.band-dark.relative.overflow-hidden,
html body section.band-dark.border-t,
html body section.band-dark.relative.overflow-hidden {
  background-color: #0F0934 !important;
}

/* ============================================================
   V3.9k33b — Refine k33: previous selector was too broad and
   would override the V3.9k14 light-band carve-outs
   (band-dark + :has(.eyebrow-dark):has(.tabular) → #f5fbff).
   Narrow to ONLY the variants that actually render #111318:
     - section.band-dark.border-t  (pre-footer "One Conversation")
     - section.band-dark.relative.overflow-hidden  (Contact/Results dark heroes)
   And explicitly DO NOT touch band-darks that match the light
   carve-out (eyebrow-dark + tabular content).
   ============================================================ */
section.band-dark.border-t:not(:has(.eyebrow-dark):has(.tabular)),
section.band-dark.relative.overflow-hidden:not(:has(.eyebrow-dark):has(.tabular)),
body section.band-dark.border-t:not(:has(.eyebrow-dark):has(.tabular)),
body section.band-dark.relative.overflow-hidden:not(:has(.eyebrow-dark):has(.tabular)),
html body section.band-dark.border-t:not(:has(.eyebrow-dark):has(.tabular)),
html body section.band-dark.relative.overflow-hidden:not(:has(.eyebrow-dark):has(.tabular)) {
  background-color: #0F0934 !important;
}

/* Explicitly RESTORE any light band-dark that the broad k33 rule
   above may have darkened (defensive). */
section.band-dark:has(.eyebrow-dark):has(.tabular),
body section.band-dark:has(.eyebrow-dark):has(.tabular),
html body section.band-dark:has(.eyebrow-dark):has(.tabular) {
  background-color: #F5FBFF !important;
}

/* ============================================================
   V3.9k33c — Beat the historical
   `main:has(...) > section.band-dark` rule that pins #111318.
   Match its specificity (main + :has() + section.band-dark
   + nth-of-type) and use later source order to win.
   ============================================================ */
main:has(> div.container-x.pt-6.pb-2:first-child) > section.band-dark.border-t,
main:has(> div.container-x.pt-6.pb-2:first-child) > section.band-dark.relative.overflow-hidden,
main:has(> div.container-x.pt-6.pb-2:first-child) > section.band-dark:nth-of-type(6),
main:has(> div.container-x.pt-6.pb-2:first-child) > section.band-dark[class*="border-t"],
main > section.band-dark.section,
main > section.band-dark[class*="border-t"],
body main:has(> div.container-x.pt-6.pb-2:first-child) > section.band-dark.border-t,
html body main:has(> div.container-x.pt-6.pb-2:first-child) > section.band-dark.border-t {
  background-color: #0F0934 !important;
}

/* ============================================================
   V3.9k33d — Restore light bg for "bare" band-dark sections
   that k33/k33b incorrectly darkened. The historical light
   carve-out was V3.9k14 with eyebrow-dark + tabular. But several
   "Direct path / Take the diagnostic" bands have no .tabular —
   they were rendered light by other rules pre-k33. Restore
   them by targeting band-dark that has NO .border-t and is
   NOT .relative.overflow-hidden.
   ============================================================ */
section.band-dark:not(.border-t):not(.relative):not(.overflow-hidden),
body section.band-dark:not(.border-t):not(.relative):not(.overflow-hidden),
html body section.band-dark:not(.border-t):not(.relative):not(.overflow-hidden),
main:has(> div.container-x.pt-6.pb-2:first-child) section.band-dark:not(.border-t):not(.relative):not(.overflow-hidden),
body main:has(> div.container-x.pt-6.pb-2:first-child) section.band-dark:not(.border-t):not(.relative):not(.overflow-hidden) {
  background-color: #F5FBFF !important;
}

/* =====================================================================
   V3.9k34 — Art Direction audit fixes (golden-ratio scale)
   Date: 2026-05-26
   Scope: Type scale, hero padding, section padding, container width
   Reference scale (px):
     Spacing:  3 · 5 · 8 · 13 · 21 · 34 · 55 · 89 · 144 · 232 · 376
     Type:    10 · 16 · 26 · 42 · 68 · 110 · 177
   ===================================================================== */

/* ---- 1. TYPE SCALE -------------------------------------------------- */

/* H1 (hero) — was clamp(2.25rem, 6vw, 5.5rem) = 36→86.4→88
   Now    clamp(2.625rem, 4.75vw, 4.25rem) = 42→68→68 */
html body .display-hero,
html body h1.display-hero {
  font-size: clamp(2.625rem, 4.75vw, 4.25rem) !important;
  line-height: 1.06 !important;
}

/* H2 large variant (.display-xl) — was clamp(1.875rem, 4.5vw, 4rem) = 30→64→64
   Now    clamp(1.625rem, 2.92vw, 2.625rem) = 26→42→42 */
html body .display-xl,
html body h2.display-xl,
html body h1.display-xl {
  font-size: clamp(1.625rem, 2.92vw, 2.625rem) !important;
  line-height: 1.12 !important;
}

/* H3 (.display-lg) — was clamp(1.75rem, 3.5vw, 2.75rem) = 28→44→44
   Now    clamp(1.375rem, 1.81vw, 1.625rem) = 22→26→26 */
html body .display-lg,
html body h3.display-lg,
html body h2.display-lg {
  font-size: clamp(1.375rem, 1.81vw, 1.625rem) !important;
  line-height: 1.18 !important;
}

/* Small-body outliers (13.5/14/14.5 px) — promote to 16 px floor.
   Use class-prefix selectors so we only catch the small-text utilities. */
html body p.text-\[13\.5px\],
html body p.text-\[14px\],
html body p.text-\[14\.5px\],
html body span.text-\[13\.5px\],
html body span.text-\[14px\],
html body span.text-\[14\.5px\] {
  font-size: 16px !important;
}

/* ---- 2. HERO PAD-TOP UNIFICATION ----------------------------------- */

/* Inner-hero pages — was 180 px → unify to 144 px (φ-scale) */
main:has(> div.container-x.pt-6.pb-2:first-child) > div.container-x.pt-6.pb-2:first-child + section.bg-surface,
main:has(> div.container-x.pt-6.pb-2:first-child) > div.container-x.pt-6.pb-2:first-child + section.band-dark {
  padding-top: 144px !important;
}

/* Pages whose hero is the FIRST section (no breadcrumb above):
   currently lg:pt-24 inside container = 96 px on /about, /contact, /results.
   Push these to 144 px for consistency with the rest of the site. */
main > section:first-of-type > .container-x.pt-14.pb-16.lg\:pt-24.lg\:pb-24 {
  padding-top: 144px !important;
}

/* Home + insights-article hero (currently lg:pt-32 = 128 px) → 144 px */
main > section:first-of-type > .container-x.pt-20.pb-24.lg\:pt-32.lg\:pb-32 {
  padding-top: 144px !important;
}

@media (max-width: 768px) {
  /* Mobile hero padTop → 89 px (φ-scale) */
  main:has(> div.container-x.pt-6.pb-2:first-child) > div.container-x.pt-6.pb-2:first-child + section.bg-surface,
  main:has(> div.container-x.pt-6.pb-2:first-child) > div.container-x.pt-6.pb-2:first-child + section.band-dark {
    padding-top: 89px !important;
  }
  main > section:first-of-type > .container-x.pt-14.pb-16.lg\:pt-24.lg\:pb-24,
  main > section:first-of-type > .container-x.pt-20.pb-24.lg\:pt-32.lg\:pb-32 {
    padding-top: 89px !important;
  }
}

/* ---- 3. STANDARD SECTION PADDING (.section) ------------------------ */

/* Was: padding-block: clamp(3.5rem, 8vw, 7rem)  →  56→115→112
   Now: padding-block: clamp(3.4375rem, 6.18vw, 5.5625rem) → 55→89→89
   (φ scale: 55 mobile, 89 desktop) */
html body section.section,
html body main > section.section {
  padding-block: clamp(3.4375rem, 6.18vw, 5.5625rem) !important;
}

/* Stray 160 px desktop / 64 px mobile already correctly carved out for
   §6 pullquote — leave that rule (line 569) untouched. */

/* ---- 4. CONTAINER WIDTH -------------------------------------------- */

/* The 1280 px max-width on §6 is the deliberate pullquote carve-out
   (line ~485 of this file). Keep it. All other containers are
   already 1320 px max. No change required.

   Mobile: add 16 px horizontal page-padding so the content column
   sits 16 px in from each edge (currently flush). */
@media (max-width: 768px) {
  html body .container-x {
    padding-inline: 16px !important;
  }
}

/* ---- 5. HEADING-TO-BODY GAP NORMALISATION -------------------------- */

/* Specific 48 px gap on industries §4 + solutions/specialist §3
   (industry-detail "About" intros + specialist services intro) →
   normalise to 55 px (φ-scale). We target by the visible class chain. */
main > section:nth-of-type(4) > .container-x > * > h2 + p,
main > section:nth-of-type(4) > .container-x > h2 + p,
main > section:nth-of-type(3) > .container-x > * > h2 + p {
  margin-top: 34px !important;
}

/* Specific 24 px gap on /contact §4 + /contact/offices §4 → 21 px */
main > section:nth-of-type(4) h2 + p:not(.tabular):not(.eyebrow):first-of-type {
  margin-top: 21px !important;
}

/* Hero heading → lead body gap.
   Currently 28 px after .display-hero / .display-xl on most pages.
   With the new smaller hero (68 px), 28 px is now visually heavy.
   Standardise hero h1 → p.lead gap to 34 px (φ). */
html body .display-hero + .lead,
html body .display-hero + p.lead,
html body h1.display-hero + p,
html body h1.display-hero + p.lead {
  margin-top: 34px !important;
}

@media (max-width: 768px) {
  html body .display-hero + .lead,
  html body .display-hero + p.lead,
  html body h1.display-hero + p,
  html body h1.display-hero + p.lead {
    margin-top: 21px !important;
  }
}

/* ---- End V3.9k34 ---------------------------------------------------- */


/* =====================================================================
   V3.9k35 — Contrast full sweep (Groups A + B + C + D)
   Iteration 2: card-headings carve-back, breadcrumb fix, .lead scoped
   ----------------------------------------------------------------------
   Order matters here. We assert Group B FIRST (dark-section h2/h3 → white),
   then carve-back light-card headings to dark. Both groups use #root prefix
   for guaranteed (1,n,n) specificity.
   ===================================================================== */

/* --- GROUP B (FIRST): text-ink/text-background headings on dark sections — */
#root main:has(> div.container-x.pt-6.pb-2:first-child)
  section.section:not(.bg-surface):not(.bg-background):not(.bg-white)
  :is(h1,h2,h3,h4,h5,h6).text-ink,
#root main:has(> div.container-x.pt-6.pb-2:first-child)
  section.section:not(.bg-surface):not(.bg-background):not(.bg-white)
  :is(h1,h2,h3,h4,h5,h6).text-background,
#root main:has(> div.container-x.pt-6.pb-2:first-child)
  section.section:not(.bg-surface):not(.bg-background):not(.bg-white)
  :is(h1,h2,h3,h4,h5,h6).display-hero,
#root main:has(> div.container-x.pt-6.pb-2:first-child)
  section.section:not(.bg-surface):not(.bg-background):not(.bg-white)
  :is(h2,h3,h4).display-xl,
#root main:has(> div.container-x.pt-6.pb-2:first-child)
  section.section:not(.bg-surface):not(.bg-background):not(.bg-white)
  :is(h2,h3,h4).display-lg,
#root main:has(> div.container-x.pt-6.pb-2:first-child)
  section.section:not(.bg-surface):not(.bg-background):not(.bg-white)
  :is(h2,h3,h4).display-md {
  color: #ffffff !important;
}
/* Home TOC list ("Local Efficiency Vs. Global Flow") */
#root main h4.gu-toc__title,
#root main .gu-toc h4,
#root main .gu-toc__title {
  color: #ffffff !important;
}

/* --- GROUP A: body text in light cards (must beat Group B above) ------ */
#root main section.section a.bg-background.border.border-line p,
#root main section.section a.bg-background.border.border-line p *,
#root main section.section a.bg-background.rounded-md p,
#root main section.section a.bg-background.rounded-md p *,
#root main section.section div.bg-background.border.border-line p,
#root main section.section div.bg-background.border.border-line p *,
#root main section.section div.bg-background.rounded-md p,
#root main section.section div.bg-background.rounded-md p *,
#root main section.section a.bg-surface.border.border-line p,
#root main section.section a.bg-surface.border.border-line p *,
#root main section.section div.bg-surface.border.border-line p,
#root main section.section div.bg-surface.border.border-line p * {
  color: #3b4354 !important;
}
/* Card headings — beat the Group B dark-section heading rule with extra
   class chains plus an :is() that overrides per spec. */
#root main section.section a.bg-background.border.border-line :is(h1,h2,h3,h4,h5,h6),
#root main section.section a.bg-background.rounded-md :is(h1,h2,h3,h4,h5,h6),
#root main section.section div.bg-background.border.border-line :is(h1,h2,h3,h4,h5,h6),
#root main section.section div.bg-background.rounded-md :is(h1,h2,h3,h4,h5,h6),
#root main section.section a.bg-surface.border.border-line :is(h1,h2,h3,h4,h5,h6),
#root main section.section div.bg-surface.border.border-line :is(h1,h2,h3,h4,h5,h6) {
  color: #0b1838 !important;
}
/* Card .text-ink-2 helper text — same dark muted ink-2 */
#root main section.section :is(a,div).bg-background :is(.text-ink-2, [class*="text-ink-2"]),
#root main section.section :is(a,div).bg-surface :is(.text-ink-2, [class*="text-ink-2"]) {
  color: #3b4354 !important;
}

/* --- "The Right Solution Depends..." style H2 — top-of-section headings
   that have NO surrounding light card but the section itself is light.
   Detection: section.section.bg-surface or section.section that has
   surrounding .max-w-3xl div as first H2. These were turning white because
   the section detection failed. Belt-and-braces: any h2 with `display-xl`
   text-ink on a light-bg parent gets dark. */
#root main section.section.bg-surface :is(h1,h2,h3,h4,h5,h6),
#root main section.section.bg-background :is(h1,h2,h3,h4,h5,h6),
#root main section.section.bg-white :is(h1,h2,h3,h4,h5,h6) {
  color: #0b1838 !important;
}

/* --- /our-solutions and /results section-headers that fall on light gray
   panels (#f8f9fb) but live in plain sections. Detect via the parent div
   class chain that's unique to those headers. */
#root main section.section > .container-x > .max-w-3xl :is(h1,h2,h3).text-ink {
  color: #0b1838 !important;
}

/* --- "Industry Results" / "Outcome Results" / "Outcome First" / "Industry
   First" H2/H3 on /results — these sit on light surface panels but the
   section has no bg class. Force dark on light gray (#f8f9fb). */
#root main section.section :is(h2,h3).display-xl.text-ink.gu-fade,
#root main section.section :is(h2,h3).display-lg.text-ink.gu-fade,
#root main section.section :is(h2,h3).display-md.text-ink.gu-fade {
  /* override only when parent has light bg — handled via :has() */
}
#root main section.section :has(> :is(h2,h3).text-ink) {
  /* no-op anchor */
}

/* --- Insights cards: H3 article titles on /insights are turning white.
   They sit inside <a class="bg-background ...">. Carve back. */
#root main :is(a,div).bg-background :is(h2,h3,h4,h5,h6),
#root main :is(a,div).bg-surface :is(h2,h3,h4,h5,h6) {
  color: #0b1838 !important;
}

/* --- GROUP A2: home page hero KPI panels with rgba(255,255,255,0.08) bg
   over dark hero — white text on translucent white reads visually as white
   on dark (OK). Scanner false positive. No action needed. */

/* --- BREADCRUMB "Home" link: link-underline class hits Group C rule which
   forced dark navy (#25408e) — that's now on a DARK breadcrumb bar (body
   rgb(6,11,39)), giving 2.03 contrast. Breadcrumbs sit in nav.container-x.pt-6
   which is the inner-page header bar. Promote to light gray. */
#root nav a.link-underline,
#root ol.flex.items-center a.link-underline,
#root nav.flex a.link-underline,
#root div.container-x.pt-6.pb-2 a.link-underline,
#root div.container-x.pt-6.pb-2 a.link-underline:hover {
  color: hsl(220 6% 80%) !important;
  text-decoration-color: hsl(220 6% 60%) !important;
}
#root div.container-x.pt-6.pb-2 a.link-underline:hover {
  color: #ffffff !important;
}

/* --- GROUP C: cyan link text on light surfaces (NOT primary CTAs) ---- */
/* arrow-link & link-underline INSIDE main content (not breadcrumb nav). */
#root main section.section a.arrow-link,
#root main section.section a.link-underline {
  color: #25408e !important;
  text-decoration-color: #25408e !important;
}
/* "Coming later in full site" badge */
#root main .gu-coming-later {
  color: #25408e !important;
  background: #eef2f8 !important;
  border: 1px solid #dbe2ee !important;
  padding: 2px 8px !important;
  border-radius: 4px !important;
  font-weight: 600 !important;
}

/* --- GROUP D: /insights filter chips (white-on-translucent over dark) -
   Scanner can't see the dark body painted behind a translucent fill, so
   it reports 1.00. Visually fine. We keep the rule in place to ensure
   border opacity provides shape. */
#root main button.rounded-full.border.border-line,
#root main a.rounded-full.border.border-line {
  background-color: rgba(255,255,255,0.12) !important;
  color: #ffffff !important;
  border-color: rgba(255,255,255,0.32) !important;
}
#root main button.rounded-full.border.border-line:hover,
#root main a.rounded-full.border.border-line:hover {
  background-color: rgba(255,255,255,0.22) !important;
  border-color: rgba(255,255,255,0.5) !important;
}
#root main button.rounded-full.border.border-line[aria-pressed="true"],
#root main button.rounded-full.border.border-line.is-active,
#root main button.rounded-full.border.border-line[data-state="on"] {
  background-color: var(--gu-blue) !important;
  color: #0b1838 !important;
  border-color: var(--gu-blue) !important;
}

/* --- .lead inside CTA panels (light blue #f5fbff or surface) → dark --- */
#root main section.section.bg-surface p.lead,
#root main section.section.bg-background p.lead,
#root main section.section :is(div,section)[class*="bg-surface"] p.lead,
#root main section.section :is(div,section)[class*="bg-background"] p.lead,
#root main section.section .border.border-line.rounded-md p.lead {
  color: #3b4354 !important;
}
/* "Answer a few quick questions..." lead on light-blue diagnostic CTA */
#root main section.section .border.rounded-md[class*="bg-"] p.lead,
#root main section.section .bg-brand-soft p.lead,
#root main section.section [class*="bg-[#f"]p.lead {
  color: #3b4354 !important;
}

/* --- /industries, /our-solutions, /insights lead intro paragraphs on
   the dark hero (ratio 1.95 fg=rgb(59,67,84) on rgb(6,11,39)) — they have
   text-ink applied from the bundle which earlier resolved to dark navy.
   Force to light gray inside dark hero. */
#root main section.section:nth-of-type(1) p.lead,
#root main section.section:nth-of-type(1) .lead,
#root main section.section:first-of-type p.lead {
  color: hsl(220 6% 82%) !important;
}

/* ---- End V3.9k35 ---------------------------------------------------- */

/* =====================================================================
   V3.9k35d — Home hero H1 carve-back + parser cleanup
   ----------------------------------------------------------------------
   Findings after deploying V3.9k35c and rescanning all 7 routes:
     - 6 routes clean.
     - Home / has a single remaining white-on-white H1 "Enabling decisive
       growth." because earlier override rule (V3.9k? era):
         main > section:nth-of-type(1) h1 { color:#fff !important }
       was designed for inner-page DARK heroes but the home first section
       uses .bg-surface (light). Carve back to ink-dark.
     - Parser note: the line containing
         [class*="bg-[#f"]p.lead
       in V3.9k35 has unescaped [ inside an attribute value and is
       silently dropped by every browser CSS parser (verified). It does
       NOT poison the rest of the stylesheet — confirmed via chromium
       CSSOM inspection. We leave the broken selector in V3.9k35 per
       "never edit historical blocks" rule; the working selectors above
       it are sufficient.
   ===================================================================== */
#root main > section:nth-of-type(1).bg-surface h1,
#root main > section:nth-of-type(1).bg-background h1,
#root main > section:nth-of-type(1).bg-white h1,
#root main > section.bg-surface:first-of-type h1.display-hero,
#root main > section.bg-background:first-of-type h1.display-hero,
#root main > section.bg-white:first-of-type h1.display-hero {
  color: #0b1838 !important;
}
/* ---- End V3.9k35d --------------------------------------------------- */

/* =====================================================================
   V3.9k35e — Card heading carve-back specificity fix
   ----------------------------------------------------------------------
   Root cause of remaining white H3 card titles on /our-solutions,
   /results, /insights, /industries:
     V3.9k35 Group B selector chain had spec ~(1,10,3) (one #root + heavy
     :has/:not chain). My Group A H3 carve-back was only (1,5,4) so it
     lost the cascade despite source-order later. 
   Fix: mirror Group B's :has/:not chain exactly and APPEND the card
   detector classes (a.bg-background.border.border-line), pushing this
   carve-back to ~(1,14,4) — strictly higher than Group B.
   ===================================================================== */
#root main:has(> div.container-x.pt-6.pb-2:first-child)
  section.section:not(.bg-surface):not(.bg-background):not(.bg-white)
  a.bg-background.border.border-line :is(h1,h2,h3,h4,h5,h6),
#root main:has(> div.container-x.pt-6.pb-2:first-child)
  section.section:not(.bg-surface):not(.bg-background):not(.bg-white)
  a.bg-background.rounded-md :is(h1,h2,h3,h4,h5,h6),
#root main:has(> div.container-x.pt-6.pb-2:first-child)
  section.section:not(.bg-surface):not(.bg-background):not(.bg-white)
  div.bg-background.border.border-line :is(h1,h2,h3,h4,h5,h6),
#root main:has(> div.container-x.pt-6.pb-2:first-child)
  section.section:not(.bg-surface):not(.bg-background):not(.bg-white)
  div.bg-background.rounded-md :is(h1,h2,h3,h4,h5,h6),
#root main:has(> div.container-x.pt-6.pb-2:first-child)
  section.section:not(.bg-surface):not(.bg-background):not(.bg-white)
  a.bg-surface.border.border-line :is(h1,h2,h3,h4,h5,h6),
#root main:has(> div.container-x.pt-6.pb-2:first-child)
  section.section:not(.bg-surface):not(.bg-background):not(.bg-white)
  div.bg-surface.border.border-line :is(h1,h2,h3,h4,h5,h6) {
  color: #0b1838 !important;
}

/* Card body text (lead/p) inside same cards — also needs higher spec */
#root main:has(> div.container-x.pt-6.pb-2:first-child)
  section.section:not(.bg-surface):not(.bg-background):not(.bg-white)
  a.bg-background.border.border-line p,
#root main:has(> div.container-x.pt-6.pb-2:first-child)
  section.section:not(.bg-surface):not(.bg-background):not(.bg-white)
  a.bg-background.rounded-md p,
#root main:has(> div.container-x.pt-6.pb-2:first-child)
  section.section:not(.bg-surface):not(.bg-background):not(.bg-white)
  div.bg-background.border.border-line p,
#root main:has(> div.container-x.pt-6.pb-2:first-child)
  section.section:not(.bg-surface):not(.bg-background):not(.bg-white)
  div.bg-background.rounded-md p {
  color: #3b4354 !important;
}

/* Dark-on-dark .lead paragraphs ("Book a 90-minute diagnostic...")
   These sit on dark inner-CTA panels with computed bg rgb(15,9,52) or
   rgb(6,11,39). They have text-ink which resolves dark via the bundle.
   Detect by class chain on their wrapper. The bundle wraps them in
   sections / divs without .bg-* utilities so we detect on the .lead
   class alone but only when an inner dark-band parent is detected. */
#root main section.section .gu-cta-panel-dark p.lead,
#root main section.section .band-dark p.lead,
#root main section.section section[class*="band-dark"] p.lead,
#root main section.section [class*="bg-[#0"] p.lead,
#root main section.section [class*="bg-[#06"] p.lead,
#root main section.section [class*="bg-[#0f"] p.lead,
#root main section.section [style*="background:#0"] p.lead,
#root main section.section [style*="background-color:#0"] p.lead {
  color: #ffffff !important;
}

/* Fallback: any p.lead whose computed parent bg is detected dark by
   the bundle’s .text-on-dark class. */
#root main section.section .text-on-dark p.lead,
#root main section.section .on-dark p.lead {
  color: #ffffff !important;
}
/* ---- End V3.9k35e --------------------------------------------------- */

/* =====================================================================
   V3.9k35f — Insights masonry cards + band-dark .lead + section H2 carve
   ----------------------------------------------------------------------
   Remaining issues after V3.9k35e:
     1) /insights cards use <a class="masonry-card"> (white bg) — not
        .bg-background. Need masonry-specific carve-back.
     2) /insights section H2 "Read the signal before choosing the fix."
        is on transparent bg over page bg-background (light) but inherits
        white from Group B. Needs carve-back via section-without-card
        match.
     3) .lead on section.band-dark resolves rgb(0,0,0) — needs white
        carve. The wrapping section uses class="band-dark border-t ...",
        no .bg-* utility.
   ===================================================================== */

/* --- Insights masonry-card titles (white bg) — ink dark --- */
#root main:has(> div.container-x.pt-6.pb-2:first-child)
  section.section:not(.bg-surface):not(.bg-background):not(.bg-white)
  a.masonry-card :is(h1,h2,h3,h4,h5,h6),
#root main:has(> div.container-x.pt-6.pb-2:first-child)
  section.section:not(.bg-surface):not(.bg-background):not(.bg-white)
  div.masonry-card :is(h1,h2,h3,h4,h5,h6) {
  color: #0b1838 !important;
}
#root main:has(> div.container-x.pt-6.pb-2:first-child)
  section.section:not(.bg-surface):not(.bg-background):not(.bg-white)
  a.masonry-card p,
#root main:has(> div.container-x.pt-6.pb-2:first-child)
  section.section:not(.bg-surface):not(.bg-background):not(.bg-white)
  div.masonry-card p {
  color: #3b4354 !important;
}

/* --- /insights section H2 over light page bg (no card) ---
   The section has no .bg-* utility. Page bg is light (.bg-background
   on the min-h-screen wrapper). Detect via grid layout class on
   parent div ("grid grid-cols-12 gap-10 mb-6 items-end") which is
   unique to the /insights intro header. Use a more general detector:
   the H2 itself has .display-xl.text-ink and no card ancestor. */
#root main:has(> div.container-x.pt-6.pb-2:first-child)
  section.section:not(.bg-surface):not(.bg-background):not(.bg-white)
  > .container-x > div.grid > div > .max-w-3xl > h2.display-xl.text-ink,
#root main:has(> div.container-x.pt-6.pb-2:first-child)
  section.section:not(.bg-surface):not(.bg-background):not(.bg-white)
  > .container-x > div.grid > div > div > h2.display-xl.text-ink {
  color: #0b1838 !important;
}

/* --- .lead on band-dark sections (computed bg rgb(15,9,52)) --- */
#root main section.band-dark p.lead,
#root main section.band-dark .lead,
#root main section[class~="band-dark"] p.lead {
  color: #ffffff !important;
}
/* Sub-element coverage — some leads have nested text-[hsl(...)] arbitrary
   colors that would otherwise inherit black. Force the wrapper to win. */
#root main section.band-dark p.lead *,
#root main section.band-dark .lead * {
  color: inherit !important;
}
/* ---- End V3.9k35f --------------------------------------------------- */

/* =====================================================================
   V3.9k35g — REVERT V3.9k35f non-card H2 carve-back
   ----------------------------------------------------------------------
   Cross-page regression: V3.9k35f's H2 carve-back targeted
     :not(.bg-surface):not(.bg-background):not(.bg-white)
       > .container-x > div.grid > div > .max-w-3xl > h2.display-xl.text-ink
   intending to fix /insights intro H2, but the same grid layout also
   exists on /results ("Choose The Evidence Route") and /our-solutions
   ("You Know Change Is Needed"). Both pages have DARK page-body bg
   (the bundle resolves --background to dark on inner routes), so those
   non-card section H2s must stay WHITE. V3.9k35f wrongly forced them
   dark navy — invisible against the dark backdrop.

   Visual confirmation via screenshots /results, /our-solutions.

   Resolution: re-assert WHITE on those non-card H2/H3s. The selector
   has strictly higher specificity than V3.9k35f's H2 carve-back because
   we mirror its full chain and append .gu-fade (one more class).
   Cards remain unaffected (their carve-back uses .bg-background or
   .masonry-card path which is more specific and source-order later in
   V3.9k35e—effectively a separate selector branch).
   ===================================================================== */
#root main:has(> div.container-x.pt-6.pb-2:first-child)
  section.section:not(.bg-surface):not(.bg-background):not(.bg-white)
  > .container-x > div.grid > div > .max-w-3xl > h2.display-xl.text-ink.gu-fade,
#root main:has(> div.container-x.pt-6.pb-2:first-child)
  section.section:not(.bg-surface):not(.bg-background):not(.bg-white)
  > .container-x > div.grid > div > div > h2.display-xl.text-ink.gu-fade,
#root main:has(> div.container-x.pt-6.pb-2:first-child)
  section.section:not(.bg-surface):not(.bg-background):not(.bg-white)
  > .container-x > div.grid > div > .max-w-3xl > h2.display-lg.text-ink.gu-fade,
#root main:has(> div.container-x.pt-6.pb-2:first-child)
  section.section:not(.bg-surface):not(.bg-background):not(.bg-white)
  > .container-x > div.grid > div > .max-w-3xl > h3.display-xl.text-ink.gu-fade,
#root main:has(> div.container-x.pt-6.pb-2:first-child)
  section.section:not(.bg-surface):not(.bg-background):not(.bg-white)
  > .container-x > div.grid > div > .max-w-3xl > h3.display-lg.text-ink.gu-fade {
  color: #ffffff !important;
}

/* Same protection for the lead paragraph that follows under such H2s —
   the V3.9k35e card-body carve-back was over-broad in shape and might
   catch these too. Force light gray for visibility on dark page. */
#root main:has(> div.container-x.pt-6.pb-2:first-child)
  section.section:not(.bg-surface):not(.bg-background):not(.bg-white)
  > .container-x > div.grid > div > .max-w-3xl > p.lead {
  color: hsl(220 6% 82%) !important;
}
/* ---- End V3.9k35g --------------------------------------------------- */

/* =====================================================================
   V3.9k35h — .band-dark light-CTA carve-back
   ----------------------------------------------------------------------
   The .band-dark class is reused for TWO different visual treatments:
     1. Actually dark sections — have .border-t OR .relative.overflow-hidden
        modifiers; computed bg rgb(15,9,52) navy.
     2. Light "Take The Diagnostic" CTA panels — plain .band-dark only;
        historic overrides remap their bg to light blue rgb(245,251,255).

   V3.9k35f indiscriminately forced p.lead→white on ALL .band-dark, which
   created white-on-light text on the diagnostic CTA panel (invisible).

   Fix: tighten the white-.lead rule to ONLY actually-dark .band-dark
   variants. Then carve back dark text for the light-band-dark CTA.
   ===================================================================== */

/* Restrict V3.9k35f white-lead to actually-dark .band-dark variants */
#root main section.band-dark.border-t p.lead,
#root main section.band-dark.relative.overflow-hidden p.lead,
#root main section.band-dark.relative p.lead,
#root main section.band-dark.overflow-hidden p.lead {
  color: #ffffff !important;
}

/* Light-CTA .band-dark (plain class, no modifiers) — dark text */
#root main section.band-dark:not(.border-t):not(.relative):not(.overflow-hidden) p.lead,
#root main section.band-dark:not(.border-t):not(.relative):not(.overflow-hidden) .lead,
#root body main section.band-dark:not(.border-t):not(.relative):not(.overflow-hidden) p.lead {
  color: #3b4354 !important;
}

/* Also re-assert dark headings on the light-band-dark CTA */
#root main section.band-dark:not(.border-t):not(.relative):not(.overflow-hidden) :is(h1,h2,h3,h4,h5,h6),
#root body main section.band-dark:not(.border-t):not(.relative):not(.overflow-hidden) :is(h1,h2,h3,h4,h5,h6) {
  color: #0b1838 !important;
}

/* ---- End V3.9k35h --------------------------------------------------- */

/* =====================================================================
   V3.9k35i — Group C: Cyan CTA buttons — dark text for WCAG AA
   ---------------------------------------------------------------------
   Findings (from /tmp/scan_v39k35g.json + live DOM inspection):
   Multiple primary CTAs render WHITE text on cyan (rgb(92,193,255))
   background, giving 1.99:1 — fails WCAG AA badly.

   Affected patterns (computed bg = --gu-blue cyan):
     - main a.bg-brand / main button.bg-brand   (line 174 override)
     - main a.bg-ink   / main button.bg-ink     (same override)
     - main > section:nth-of-type(1) a.bg-brand (line 389 hero override)
     - footer.band-dark a.bg-[#0057ff]          (line 679 override)

   All sit on `var(--gu-blue)` = #5cc1ff. White text = 1.99:1.
   Dark navy #0b1838 on cyan = 8.76:1 (passes AA AND AAA).

   Strategy: carve back the color (NOT background) on the same selectors
   with a #root prefix to win specificity. Background, hover, transform
   all preserved from base rules.

   Specificity targets to beat:
     - main a.bg-brand                          → (0,1,2)
     - main > section:nth-of-type(1) a.bg-brand → (0,2,2)  [pseudo-class]
     - footer.band-dark a.bg-\[\#0057ff\]       → (0,2,2)
   We use #root main ... = (1,1,2) min, plenty to win.
   ===================================================================== */

/* Base CTA carve-back (covers home + inner-page sections 2+) */
#root main a.bg-brand,
#root main button.bg-brand,
#root main a.bg-ink,
#root main button.bg-ink,
#root main [class*="bg-brand"]:not([class*="hover:bg-brand"]):not([class*="ring-brand"]):not([class*="text-brand"]),
#root main a.bg-\[\#0057ff\],
#root .gu-btn-primary {
  color: #0b1838 !important;
}

/* Hero section CTAs (section:nth-of-type(1)) — same darkening */
#root main > section:nth-of-type(1) a.bg-brand,
#root main > section:nth-of-type(1) button[class*="bg-brand"],
#root main > section:nth-of-type(1) a.bg-ink,
#root main > section:nth-of-type(1) button[type="submit"] {
  color: #0b1838 !important;
}

/* Footer pill CTA (bg-[#0057ff] is also remapped to cyan) */
#root footer.band-dark a.bg-\[\#0057ff\] {
  color: #0b1838 !important;
}

/* Sidebar "Book a diagnostic" pills with border-t-0 + bg-ink:
   already covered by the base #root main a.bg-ink rule above. */

/* Hover state — keep dark text against navy hover bg too.
   Base hover gives navy bg + cyan text. Cyan-on-navy = 5.79:1 PASSES AA,
   so leave hover as-is. We only carve the resting state. */

/* ---- End V3.9k35i --------------------------------------------------- */

/* =====================================================================
   V3.9k36 — TOC panel image swap
   ---------------------------------------------------------------------
   User request 2026-05-26: replace animated bar-chart Capacity Visualization
   panel with the static Theory of Constraints infographic image.

   JS now builds `.gu-bc.gu-toc.gu-toc--img` containing a single <img>.
   We carve back the base `.gu-bc` chrome so the image fills cleanly:
     - drop the inner 24px padding so the image bleeds edge-to-edge
     - drop the 460px min-height so the panel hugs the image
     - keep border-radius + thin border for the framed look
   The image is constrained to the panel width and scales preserving aspect.

   Specificity: `.gu-bc.gu-toc.gu-toc--img` = (0,3,0) — beats base `.gu-bc`
   (0,1,0) without needing #root. No `!important` required.
   ===================================================================== */
.gu-bc.gu-toc.gu-toc--img {
  padding: 0;
  min-height: 0;
  background: #0b1322; /* deep navy that blends with the infographic ground */
  display: block; /* override flex column from base */
}

.gu-bc.gu-toc.gu-toc--img .gu-toc__figure {
  margin: 0;
  padding: 0;
  width: 100%;
  line-height: 0; /* kill image baseline gap */
}

.gu-bc.gu-toc.gu-toc--img .gu-toc__image {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  border-radius: 6px; /* inherit panel rounding so the image edge sits flush */
  user-select: none;
  -webkit-user-drag: none;
}

/* ---- End V3.9k36 --------------------------------------------------- */

/* =====================================================================
   V3.9k37 — Targeted contrast carve-backs from deep sweep 2026-05-26
   ---------------------------------------------------------------------
   After V3.9k35 sweep + V3.9k36 image swap, a deep scan surfaced two
   remaining contrast failures (all others verified as scanner false
   positives via live computed-color inspection and screenshots):

   1) Home "About Goldratt UK" section secondary CTAs (Our approach,
      Methodology). Edit 25 (~line 1611) explicitly sets these to
      var(--gu-blue) = #5cc1ff on the white About section bg.
      Cyan-on-white = 1.99:1 — fails WCAG AA.

   2) /contact form eyebrow labels (Your name, Organisation, Role/title,
      Email, etc.) inherit the inner-page carve-out (line ~870ish)
      that sets `.bg-background .eyebrow` to var(--gu-blue) on the
      light-grey form panel rgb(248,249,251). 1.89:1 — fails AA.

   Fix strategy: scoped carve-backs to dark navy. Tonally compatible
   with the brand and keeps the link semantic (still differentiated
   from body copy via weight + arrow icon, not by hue).

   Specificity:
   - Edit 25 selector = main > section:nth-of-type(3) div.mt-8.flex.flex-wrap.gap-3 > a  → (0,4,1) !important
     Carve-back: #root main > section:nth-of-type(3) ...  → (1,4,1) !important — wins.
   - Contact label selector = main:has(...) section.section .bg-background .eyebrow → (1,4,1) !important
     Carve-back uses same chain + extra .eyebrow.block:has-form-parent qualifier  → wins.
   ===================================================================== */

/* Fix 1: Home About-section secondary CTAs (Our approach / Methodology).
   Skip "About Goldratt UK" (already navy via the bg-ink carve-back). */
#root main > section:nth-of-type(3) div.mt-8.flex.flex-wrap.gap-3 > a {
  color: #0b1838 !important;
}
/* Hover: keep existing navy hover — already passes AA on white. */

/* Fix 2: /contact form eyebrow labels.
   These sit inside a form whose container has bg-background (white).
   Target the eyebrow labels that wrap form inputs. Mirror Edit 23's
   chain to win specificity, then add `:has(input,textarea,select)`
   so we only catch form-field labels (not section eyebrows). */
#root main:has(> div.container-x.pt-6.pb-2:first-child) section.section .bg-background label.eyebrow:has(input,textarea,select),
#root main:has(> div.container-x.pt-6.pb-2:first-child) section.section .bg-surface label.eyebrow:has(input,textarea,select),
#root main:has(> div.container-x.pt-6.pb-2:first-child) section.section .bg-white label.eyebrow:has(input,textarea,select) {
  color: #25408e !important; /* gu-navy — 9.53:1 on white, brand-tonal */
}

/* Belt-and-braces: a form label without children (just text + sibling input)
   wouldn't match :has(input). Catch those via descendant-of-form. */
#root main:has(> div.container-x.pt-6.pb-2:first-child) section.section form label.eyebrow,
#root main:has(> div.container-x.pt-6.pb-2:first-child) section.section form [class*="eyebrow"] {
  color: #25408e !important;
}

/* ---- End V3.9k37 --------------------------------------------------- */

/* =====================================================================
   V3.9k38 — Universal contrast safety net (replaces per-instance carve-backs)
   ---------------------------------------------------------------------
   Strategy: declare a CSS variable --safe-ink on every background context,
   then have ALL text utility classes resolve through that variable.
   This is low-specificity (0,1,0 or 0,1,1) so authored rules still win,
   but everywhere a token like `text-ink` previously rendered as white-on-
   white it will now resolve to the correct ink for its surface.
   Rules below are appended LAST so they cascade-win over earlier defaults.
   ===================================================================== */

/* 1. Surface containers declare which "ink" applies inside them. */
.bg-white, .bg-background, .bg-surface,
[class*="bg-white"]:not([class*="/"]),
.bg-background\/95, .bg-surface\/70 {
  --safe-ink: #0b1838;
  --safe-ink-2: #25408e;
  --safe-accent: #25408e;
}
.band-dark, .bg-ink, .bg-brand,
.bg-\[\#10202f\], .bg-\[\#1a2a40\], .bg-\[\#221a2f\], .bg-\[\#1f2a22\], .bg-\[\#2a1f1a\] {
  --safe-ink: #ffffff;
  --safe-ink-2: #d8e6ff;
  --safe-accent: #5cc1ff;
}

/* 2. Inherit so deeply-nested elements pick up the nearest container value. */
.bg-white *, .bg-background *, .bg-surface *,
.band-dark *, .bg-ink *, .bg-brand * {
  --safe-ink: inherit;
  --safe-ink-2: inherit;
  --safe-accent: inherit;
}

/* 3. Map the framework's text tokens through --safe-ink. Only fires when
      the variable is defined (i.e. inside a known surface container). */
.text-ink            { color: var(--safe-ink, currentColor) !important; }
.text-ink-2          { color: var(--safe-ink-2, currentColor) !important; }
.text-background     { color: var(--safe-ink, currentColor) !important; }
.text-foreground     { color: var(--safe-ink, currentColor) !important; }

/* 4. Eyebrows: cyan #5cc1ff is unreadable on white. Force navy on light
      surfaces; allow cyan on dark surfaces. */
.bg-white .eyebrow, .bg-background .eyebrow, .bg-surface .eyebrow,
.bg-white [class*="eyebrow"], .bg-background [class*="eyebrow"], .bg-surface [class*="eyebrow"] {
  color: #25408e !important;
}
.band-dark .eyebrow, .bg-ink .eyebrow, .bg-brand .eyebrow,
.band-dark [class*="eyebrow"], .bg-ink [class*="eyebrow"], .bg-brand [class*="eyebrow"] {
  color: #5cc1ff !important;
}

/* 5. Pill CTAs: white text on cyan bg (#5cc1ff) = 1.99:1. Darken the text. */
.bg-brand .text-background, .bg-brand .text-ink,
[class*="bg-brand"] .text-background, [class*="bg-brand"] .text-ink,
button.bg-brand, a.bg-brand, button[class*="bg-brand"], a[class*="bg-brand"] {
  color: #0b1838 !important;
}

/* 6. Belt-and-braces JS-friendly attribute: when overrides.js detects a
      transparent/walked-to-wrong-bg case, it sets data-safe-bg="light|dark"
      and this resolves it deterministically. */
[data-safe-bg="light"] { --safe-ink: #0b1838; --safe-ink-2: #25408e; }
[data-safe-bg="dark"]  { --safe-ink: #ffffff; --safe-ink-2: #d8e6ff; }
[data-safe-bg="light"] .text-ink, [data-safe-bg="light"] .text-background,
[data-safe-bg="light"] .text-ink-2 {
  color: var(--safe-ink) !important;
}
[data-safe-bg="dark"] .text-ink, [data-safe-bg="dark"] .text-background,
[data-safe-bg="dark"] .text-ink-2 {
  color: var(--safe-ink) !important;
}
[data-safe-bg="light"] .eyebrow, [data-safe-bg="light"] [class*="eyebrow"] {
  color: #25408e !important;
}
[data-safe-bg="dark"] .eyebrow, [data-safe-bg="dark"] [class*="eyebrow"] {
  color: #5cc1ff !important;
}

/* ---- End V3.9k38 --------------------------------------------------- */