/* =============================================
   site.css
   Design system tokens + global styles
   ============================================= */

/* ─────────────────────────────────────────────
   1. DESIGN TOKENS
   ───────────────────────────────────────────── */
:root {
    /* Brand */
    --brand-primary: #1F6FB2;
    --brand-primary-strong: #185889;
    --brand-accent: #3FB173;
    --brand-accent-strong: #2E8C58;

    /* Neutrals — DARK THEME. The scale is inverted vs. a light theme: the
       high numbers (ink-900/700/500) are now light *text* tones and the low
       numbers (ink-100/200/300) are dark *surface/border* tones. ink-0 stays
       pure white because it is used for white text on brand/colored fills.
       Because the whole site reads color from these tokens, flipping them
       here turns every page dark in one place. */
    --ink-900: #F3F6FB;   /* primary text */
    --ink-700: #C7CFDA;   /* secondary text */
    --ink-500: #93A0B2;   /* muted text */
    --ink-400: #6E7F99;   /* mid mute (ticks, tertiary UI) */
    --ink-300: #56657F;   /* subtle text / strong border */
    --ink-200: #25334C;   /* borders, dividers */
    --ink-100: #16263F;   /* muted panel surface */
    --ink-0:   #FFFFFF;   /* white text on colored fills */

    /* Functional — used sparingly */
    --warn:    #E2674F;
    --info:    #38A9E6;
    --success: #3FB173;

    /* Surfaces — layered dark (never pure white).
       default  = page canvas
       muted    = alternate content band (slightly lifted)
       elevated = cards / raised panels
       deep     = recessed / footer-adjacent wells
       logo     = glass plate for brand marks (still dark, not white) */
    --surface-default:  #0B1424;
    --surface-muted:    #121E32;
    --surface-elevated: #1A2B45;
    --surface-deep:     #060D18;
    --surface-dark:     #060D1A;
    --surface-logo:     #1C2A40;

    /* Atmospheric section recipes (composed backgrounds) */
    --surface-canvas-bg:
        radial-gradient(ellipse 90% 55% at 8% -5%, rgba(31, 111, 178, 0.14) 0%, transparent 55%),
        radial-gradient(ellipse 70% 45% at 100% 15%, rgba(63, 177, 115, 0.07) 0%, transparent 50%),
        linear-gradient(180deg, #0A1322 0%, #0B1424 40%, #0C1628 100%);

    --surface-alt-bg:
        radial-gradient(ellipse 80% 70% at 100% 30%, rgba(63, 177, 115, 0.10) 0%, transparent 55%),
        radial-gradient(ellipse 50% 40% at 0% 80%, rgba(31, 111, 178, 0.10) 0%, transparent 50%),
        linear-gradient(180deg, #101C30 0%, #121E32 55%, #0E1A2C 100%);

    --surface-cool-bg:
        radial-gradient(ellipse 75% 65% at 0% 40%, rgba(31, 111, 178, 0.18) 0%, transparent 55%),
        linear-gradient(180deg, #0C172C 0%, #0E1A30 50%, #0B1526 100%);

    --surface-warm-bg:
        radial-gradient(ellipse 70% 60% at 95% 50%, rgba(63, 177, 115, 0.14) 0%, transparent 55%),
        linear-gradient(180deg, #0C161F 0%, #0E1A24 50%, #0B141C 100%);

    --surface-deep-bg:
        radial-gradient(ellipse 100% 70% at 50% 0%, rgba(31, 111, 178, 0.10) 0%, transparent 50%),
        linear-gradient(180deg, #050A14 0%, #070E18 60%, #0A1220 100%);

    --surface-sheen-bg:
        linear-gradient(180deg, rgba(255, 255, 255, 0.035) 0%, transparent 32%),
        radial-gradient(ellipse 60% 50% at 50% 100%, rgba(31, 111, 178, 0.08) 0%, transparent 55%),
        linear-gradient(180deg, #141F34 0%, #121C2E 100%);

    /* Legacy aliases — kept dark-independent so they don't track the flipped
       ink text tones. */
    --primary:   var(--brand-primary);
    --secondary: var(--brand-accent);
    --alternate: var(--warn);
    --light:     #16263F;
    --dark:      #0B1220;
    --gradient:  linear-gradient(135deg, var(--brand-primary-strong) 0%, var(--brand-accent-strong) 100%);

    /* Bootstrap 5.3 theme bridge — utilities like .bg-white / .bg-light /
       .text-body read these, not our --surface-* tokens. Without remapping
       them, whole sections stay pure white while text goes light (unreadable). */
    --bs-body-bg:            var(--surface-default);
    --bs-body-bg-rgb:        11, 20, 36;
    --bs-body-color:         var(--ink-900);
    --bs-body-color-rgb:     243, 246, 251;
    --bs-secondary-color:    var(--ink-500);
    --bs-tertiary-bg:        var(--surface-muted);
    --bs-tertiary-bg-rgb:    22, 38, 63;
    --bs-secondary-bg:       var(--surface-muted);
    --bs-secondary-bg-rgb:   22, 38, 63;
    --bs-border-color:       var(--ink-200);
    --bs-border-color-translucent: rgba(255, 255, 255, 0.12);

    /* Keep --bs-white as pure white. Heroes use .text-white; remapping
       white to a dark surface made headline copy black on video/images.
       Background "white" is handled by .bg-white overrides below. */
    --bs-white:              #ffffff;
    --bs-white-rgb:          255, 255, 255;
    --bs-light:              var(--surface-muted);
    --bs-light-rgb:          22, 38, 63;
    --bs-dark:               #0B1220;
    --bs-dark-rgb:           11, 18, 32;

    --bs-primary:            var(--brand-primary);
    --bs-primary-rgb:        31, 111, 178;
    --bs-success:            var(--brand-accent);
    --bs-success-rgb:        63, 177, 115;
    --bs-info:               var(--info);
    --bs-warning:            var(--warn);
    --bs-danger:             var(--warn);

    --bs-link-color:         #6BB0E8;
    --bs-link-hover-color:   #9dcef5;
    --bs-emphasis-color:     var(--ink-900);
    --bs-emphasis-color-rgb: 243, 246, 251;

    /* Type scale (line-height baked into the value) */
    --type-display-xl: 700 4rem/1.1   "Poppins", sans-serif;
    --type-display-lg: 700 3rem/1.15  "Poppins", sans-serif;
    --type-display-md: 700 2.25rem/1.2  "Poppins", sans-serif;
    --type-heading-lg: 700 1.75rem/1.25 "Poppins", sans-serif;
    --type-heading-md: 600 1.375rem/1.3 "Poppins", sans-serif;
    --type-body-lg:    400 1.125rem/1.65 "Inter", sans-serif;
    --type-body:       400 1rem/1.6     "Inter", sans-serif;
    --type-body-sm:    400 0.875rem/1.55 "Inter", sans-serif;
    --type-eyebrow:    500 0.8125rem/1.4 "Inter", sans-serif;

    /* Spacing — 8px scale */
    --space-1: 0.5rem;
    --space-2: 1rem;
    --space-3: 1.5rem;
    --space-4: 2rem;
    --space-5: 3rem;
    --space-6: 4.5rem;
    --space-7: 6rem;
    --space-8: 7.5rem;

    /* Section vertical rhythm */
    --section-tight:   3rem;
    --section-default: 4.5rem;
    --section-tall:    7.5rem;

    /* Radius */
    --radius-sm: 0.375rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-pill: 999px;

    /* Elevation — dark surfaces: black depth + brand edge glow on hover. */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, .35), 0 1px 2px rgba(0, 0, 0, .28);
    --shadow-md:
        0 12px 32px rgba(0, 0, 0, .42),
        0 4px 12px rgba(0, 0, 0, .30),
        0 0 0 1px rgba(255, 255, 255, 0.04);
    --shadow-lg:
        0 24px 52px rgba(0, 0, 0, .52),
        0 8px 18px rgba(0, 0, 0, .35),
        0 0 40px rgba(31, 111, 178, 0.10);
    --shadow-brand:
        0 14px 32px rgba(31, 111, 178, .32),
        0 0 28px rgba(31, 111, 178, .18);
    --shadow-hover:
        0 18px 44px rgba(0, 0, 0, .50),
        0 0 0 1px rgba(31, 111, 178, 0.35),
        0 0 36px rgba(31, 111, 178, 0.16);

    /* Motion */
    --ease-out-quart: cubic-bezier(.22, 1, .36, 1);
    --ease-standard:  cubic-bezier(.4, 0, .2, 1);
    --duration-instant: 200ms;
    --duration-short:   350ms;
    --duration-long:    600ms;

    /* Layout */
    --navbar-height: 86px;

    /* ─────────────────────────────────────────────
       UNIFIED DARK BAND
       Every full-bleed dark section on the site composes its
       background from this token. Centralizing it keeps the dark
       sections visually identical — change once, ripples everywhere.

       Composition:
         • brand-blue radial glow in top-left
         • brand-green radial glow in bottom-right (subtler)
         • 3-stop navy linear gradient base
       ───────────────────────────────────────────── */
    /* Top/edge color of the dark band — exposed so fade-out strips
       (e.g. seam masks between sections) can stay in sync if the band
       palette ever changes. */
    --dark-band-edge: #050c1a;

    --dark-band-bg:
        radial-gradient(120% 70% at 15% 0%, rgba(31, 111, 178, 0.18) 0%, transparent 55%),
        radial-gradient(120% 70% at 85% 100%, rgba(63, 177, 115, 0.12) 0%, transparent 55%),
        linear-gradient(180deg, var(--dark-band-edge) 0%, #0a1424 60%, #0b1830 100%);

    /* Plain dark-navy linear gradient (no glows). For top-bar / footer
       contexts where corner glows would clash with their own glow elements. */
    --dark-band-bg-plain: linear-gradient(180deg, var(--dark-band-edge) 0%, #0a1424 60%, #0b1830 100%);

    /* Text color appropriate on top of the dark band. */
    --dark-band-fg: rgba(255, 255, 255, 0.85);
}

/* ─────────────────────────────────────────────
   2. GLOBAL BASE
   ───────────────────────────────────────────── */
html {
    scrollbar-gutter: stable;
    overflow-y: auto;
    scroll-behavior: smooth;
}

html, body {
    font-family: "Inter", sans-serif;
    /* Fixed atmospheric canvas — subtle brand glows so the base page
       never reads as a flat slab of one navy. */
    background-color: var(--surface-default);
    background-image: var(--surface-canvas-bg);
    background-attachment: fixed;
    color: var(--ink-900);
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    overflow-x: clip;
    font: var(--type-body);
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    line-height: 1.2;
    color: var(--ink-900);
}

/* Reduced motion: honor the user's wish */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ─────────────────────────────────────────────
   3. EYEBROW + SECTION TITLE
   ───────────────────────────────────────────── */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    font: var(--type-eyebrow);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--brand-primary);
    margin-bottom: 1rem;
}

.eyebrow::before {
    content: "";
    width: 32px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
}

/* Accent eyebrows use brand blue (not green) — green is for gradients/CTAs */
.eyebrow.eyebrow-accent { color: var(--brand-primary); }
.eyebrow.eyebrow-muted  { color: var(--ink-500); }

.section-title {
    font: var(--type-display-md);
    color: var(--ink-900);
    margin-bottom: 1rem;
}

/* Brand-gradient text — wrap a span around the emphatic phrase in a
   section title (see Technology partners: "deploy and extend").
   Default works on dark canvas body text. Use --light on very dark
   bands when you need a brighter blue→green read. */
.text-gradient {
    background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-accent) 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
            color: transparent;
}

.text-gradient--light {
    background: linear-gradient(135deg, #6ec1ff 0%, #7ee29e 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
            color: transparent;
}

/* On-dark section titles: gradient spans stay brand-colored (not pure white) */
.section-title.section-title--on-dark .text-gradient,
.section-title.section-title--on-dark .text-gradient--light {
    background: linear-gradient(135deg, #6ec1ff 0%, #7ee29e 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
            color: transparent;
}

/* ProtectedPhrase — real type + flex order (see component scoped CSS).
   Global fallbacks if scope misses a host context. */
.protected-phrase {
    display: inline-flex;
    flex-flow: row nowrap;
    align-items: baseline;
    white-space: nowrap;
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
}

.protected-phrase__g {
    display: inline-block;
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
}

/* ─────────────────────────────────────────────
   4. NAVBAR — light frosted glass (pre dual-glass)
   ───────────────────────────────────────────── */
nav.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    backdrop-filter: blur(32px) saturate(200%);
    -webkit-backdrop-filter: blur(32px) saturate(200%);
    /* Frosted but solid enough for dark links over busy heroes */
    background: rgba(255, 255, 255, 0.45);
    border-bottom: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow: 0 1px 0 rgba(11, 23, 42, 0.04), 0 8px 32px rgba(11, 23, 42, 0.05);
    color: #0B1220;
    transition: background var(--duration-short) var(--ease-standard),
                box-shadow var(--duration-short) var(--ease-standard),
                border-color var(--duration-short) var(--ease-standard);
    padding: 0.75rem 0;
}

nav.navbar.scrolled {
    background: rgba(255, 255, 255, 0.65);
    border-bottom-color: rgba(11, 23, 42, 0.08);
    box-shadow: 0 1px 0 rgba(11, 23, 42, 0.06), 0 12px 40px rgba(11, 23, 42, 0.08);
}

nav.navbar .navbar-brand img {
    max-height: 50px;
    object-fit: contain;
}

nav.navbar .nav-link {
    position: relative;
    font-weight: 600;
    /* Dark ink on light frost — independent of site-wide dark tokens */
    color: #0B1220 !important;
    padding: 0.5rem 1rem;
    transition: color var(--duration-instant) var(--ease-standard);
}

nav.navbar .nav-link::after {
    content: "";
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 2px;
    left: 50%;
    background: var(--brand-accent);
    transition: width var(--duration-short) var(--ease-out-quart),
                left var(--duration-short) var(--ease-out-quart);
    transform: translateX(-50%);
}

nav.navbar .nav-link:hover,
nav.navbar .nav-link.active {
    color: var(--brand-primary) !important;
}

nav.navbar .nav-link:hover::after,
nav.navbar .nav-link.active::after {
    width: calc(100% - 2rem);
    left: 1rem;
    transform: none;
}

/* Pages without a PageHeader: push first content child below the fixed navbar */
main > *:first-child:not(.page-header) {
    padding-top: var(--navbar-height);
}

/* Doc / legal / utility pages (Terms, Privacy, Compliance, Sitemap)
   Need more than bare navbar-height so titles clear the fixed bar with
   room to breathe. Apply via SectionWrapper Class="page-doc …". */
.page-doc,
.section-wrapper.page-doc {
    padding-top: calc(var(--navbar-height) + clamp(2rem, 5vw, 3.75rem)) !important;
    padding-bottom: clamp(3.5rem, 7vw, 6rem) !important;
    background: var(--surface-cool-bg, var(--surface-default));
    color: var(--ink-900);
    min-height: 60vh;
}

.page-doc h1,
.page-doc .display-5 {
    color: var(--ink-900);
}

.page-doc .text-muted,
.page-doc .lead {
    color: var(--ink-500) !important;
}

.page-doc a:not(.btn) {
    color: var(--bs-link-color, #6BB0E8);
}

.page-doc .alert-info {
    background: rgba(31, 111, 178, 0.14);
    border: 1px solid rgba(31, 111, 178, 0.35);
    color: var(--ink-900);
}

/* Doc-page feature icon (SLA, similar callouts) — matches Compliance badge slot */
.page-doc-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 120px;
    border-radius: 24px;
    font-size: 3rem;
    color: var(--brand-primary);
    background:
        linear-gradient(165deg, rgba(255, 255, 255, 0.08) 0%, transparent 50%),
        rgba(31, 111, 178, 0.12);
    border: 1px solid rgba(31, 111, 178, 0.28);
}

/* ─────────────────────────────────────────────
   5. BUTTONS
   ───────────────────────────────────────────── */
.btn {
    border-radius: var(--radius-md);
    padding: 0.625rem 1.25rem;
    font-weight: 600;
    transition: transform var(--duration-instant) var(--ease-out-quart),
                background-color var(--duration-instant) var(--ease-standard),
                box-shadow var(--duration-short) var(--ease-out-quart),
                color var(--duration-instant) var(--ease-standard);
}

.btn-lg {
    padding: 0.875rem 1.75rem;
    font-size: 1rem;
}

.btn-primary,
.btn-secondary {
    box-shadow: var(--shadow-sm);
}

.btn-primary {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: var(--ink-0);
}

.btn-primary:hover,
.btn-primary:focus-visible {
    background: var(--brand-primary-strong);
    border-color: var(--brand-primary-strong);
    color: var(--ink-0);
    transform: translateY(-1px);
    box-shadow: var(--shadow-brand);
}

.btn-primary:active {
    transform: translateY(0) scale(0.98);
}

.btn-secondary {
    background: var(--brand-accent);
    border-color: var(--brand-accent);
    color: var(--ink-0);
}

.btn-secondary:hover,
.btn-secondary:focus-visible {
    background: var(--brand-accent-strong);
    border-color: var(--brand-accent-strong);
    color: var(--ink-0);
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(63, 177, 115, .20);
}

.btn-secondary:active {
    transform: translateY(0) scale(0.98);
}

/* Hero CTAs keep the pill shape for signature emphasis */
.page-header .btn.rounded-pill {
    border-radius: var(--radius-pill);
    padding-left: 2.25rem;
    padding-right: 2.25rem;
}

/* Arrow affordance on primary CTAs — opt-in via .btn-arrow */
.btn-arrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-arrow::after {
    content: "→";
    display: inline-block;
    transition: transform var(--duration-instant) var(--ease-out-quart);
}

.btn-arrow:hover::after,
.btn-arrow:focus-visible::after {
    transform: translateX(4px);
}

/* ─────────────────────────────────────────────
   6. CARDS — glass lift + brand glow (dark theme)
   ───────────────────────────────────────────── */
.card {
    transition: transform var(--duration-short) var(--ease-out-quart),
                box-shadow var(--duration-short) var(--ease-out-quart),
                border-color var(--duration-short) var(--ease-standard),
                background var(--duration-short) var(--ease-standard);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-md);
    overflow: hidden;
    background:
        linear-gradient(165deg, rgba(255, 255, 255, 0.04) 0%, transparent 42%),
        var(--surface-elevated);
}

.card:hover {
    transform: translateY(-4px);
    border-color: rgba(31, 111, 178, 0.45);
    box-shadow: var(--shadow-hover);
    background:
        linear-gradient(165deg, rgba(31, 111, 178, 0.10) 0%, transparent 50%),
        #1E3350;
}

.card .bi {
    transition: color var(--duration-instant) var(--ease-standard),
                transform var(--duration-short) var(--ease-out-quart);
}

.card:hover .bi {
    color: var(--brand-accent) !important;
}

/* ── Global raised-box baseline ──────────────────────────────────────
   Every card-like surface across the site gets a subtle default
   elevation and lifts further on hover with a brand-edge glow. */
.box-raised,
.card,
.card-spotlight,
.services-approach__pillar,
.services-framework__step,
.services-pn__cap,
.services-pn__stats,
.services-pn__callout,
.about-office,
.about-principles,
.about-partners__values,
.about-partners__cta,
.about-careers,
.resource-featured {
    box-shadow: var(--shadow-sm);
}

.box-raised,
.card,
.card-spotlight,
.services-approach__pillar,
.services-framework__step,
.services-pn__cap,
.about-office {
    transition: transform var(--duration-short) var(--ease-out-quart),
                box-shadow var(--duration-short) var(--ease-out-quart),
                border-color var(--duration-short) var(--ease-standard),
                background var(--duration-short) var(--ease-standard);
}

.box-raised:hover,
.services-approach__pillar:hover,
.services-framework__step:hover,
.services-pn__cap:hover,
.about-office:hover {
    transform: translateY(-4px);
    border-color: rgba(31, 111, 178, 0.45);
    box-shadow: var(--shadow-hover);
}

/* tech-cap__card hover is owned by Technology.razor.css (mirrors Services pillars)
   so global rules do not fight the elevated #1E3350 plate + hex spotlight. */

/* .card-spotlight already has its own hover transform via section 14;
   here we just upgrade its default shadow to match the rest. */
.card:hover,
.card-spotlight:hover {
    box-shadow: var(--shadow-hover);
    border-color: rgba(31, 111, 178, 0.45);
}

/* ─────────────────────────────────────────────
   7. SECTIONS
   ───────────────────────────────────────────── */
.section {
    padding-top: var(--section-default);
    padding-bottom: var(--section-default);
}

.section-tight   { padding-top: var(--section-tight);   padding-bottom: var(--section-tight); }
.section-default { padding-top: var(--section-default); padding-bottom: var(--section-default); }
.section-tall    { padding-top: var(--section-tall);    padding-bottom: var(--section-tall); }

/* Bootstrap extensions: py-7 / py-8 utilities */
.py-7 { padding-top: var(--space-7) !important; padding-bottom: var(--space-7) !important; }
.py-8 { padding-top: var(--space-8) !important; padding-bottom: var(--space-8) !important; }

@media (min-width: 992px) {
    .py-lg-7 { padding-top: var(--space-7) !important; padding-bottom: var(--space-7) !important; }
    .py-lg-8 { padding-top: var(--space-8) !important; padding-bottom: var(--space-8) !important; }
}

/* Flat fills (legacy) */
.bg-surface-muted { background: var(--surface-muted); }
.bg-surface-dark  { background: var(--surface-dark);  color: var(--ink-0); }

/* Character surfaces — use these on alternating sections so the dark
   site has rhythm (cool blue, warm green, deep well, sheen band). */
.surface-canvas,
.bg-surface-canvas {
    background: var(--surface-canvas-bg);
    color: var(--ink-900);
}
.surface-alt,
.bg-surface-alt,
.bg-surface-muted.surface-alt {
    background: var(--surface-alt-bg);
    color: var(--ink-900);
}
/* Prefer atmospheric muted over flat when using the utility alone */
section.bg-surface-muted,
.section-wrapper.bg-surface-muted,
.bg-surface-muted {
    background: var(--surface-alt-bg);
    color: var(--ink-900);
}
.surface-cool,
.bg-surface-cool {
    background: var(--surface-cool-bg);
    color: var(--ink-900);
}
.surface-warm,
.bg-surface-warm {
    background: var(--surface-warm-bg);
    color: var(--ink-900);
}
.surface-deep,
.bg-surface-deep {
    background: var(--surface-deep-bg);
    color: var(--ink-900);
}
.surface-sheen,
.bg-surface-sheen {
    background: var(--surface-sheen-bg);
    color: var(--ink-900);
}

/* About partners band — soft blue→green atmospheric gradient
   (class lives on SectionWrapper, so it must be global, not scoped). */
.section-wrapper.about-partners-band,
.about-partners-band {
    position: relative;
    isolation: isolate;
    background:
        radial-gradient(ellipse 85% 55% at 12% 0%, rgba(31, 111, 178, 0.20) 0%, transparent 58%),
        radial-gradient(ellipse 75% 50% at 92% 100%, rgba(63, 177, 115, 0.14) 0%, transparent 55%),
        radial-gradient(ellipse 50% 40% at 50% 55%, rgba(31, 111, 178, 0.06) 0%, transparent 60%),
        linear-gradient(165deg, #0F1B30 0%, #121E34 42%, #0E1A28 100%);
    color: var(--ink-900);
}

/* ── Section handoffs (Phase B) ─────────────────────────────────
   Soft seam fades + green/blue edge language so dark sections read
   as rooms, not one continuous slab. Seams use inset shadows so they
   can stack with glow-* utilities (which use ::before/::after). */
.seam-top,
.seam-bottom {
    position: relative;
    isolation: isolate;
}

/* Fade in from the section above */
.seam-top {
    box-shadow: inset 0 48px 40px -28px rgba(5, 12, 26, 0.55);
}
/* Fade out into the section below */
.seam-bottom {
    box-shadow: inset 0 -48px 40px -28px rgba(5, 12, 26, 0.45);
}
.seam-top.seam-bottom {
    box-shadow:
        inset 0 48px 40px -28px rgba(5, 12, 26, 0.55),
        inset 0 -48px 40px -28px rgba(5, 12, 26, 0.45);
}

/* Brand-green left edge (same language as About team focus card) */
.edge-accent {
    border-left: 4px solid var(--brand-accent) !important;
}

/* Top hairline: primary → accent gradient */
.edge-accent-top {
    position: relative;
}
.edge-accent-top::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--brand-primary), var(--brand-accent));
    pointer-events: none;
    z-index: 2;
}

/* Soft green ambient wash at bottom of a section */
.glow-green-bottom {
    position: relative;
}
.glow-green-bottom::after {
    content: "";
    position: absolute;
    left: 10%;
    right: 10%;
    bottom: -10%;
    height: 55%;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(
        ellipse 70% 60% at 50% 100%,
        rgba(63, 177, 115, 0.14) 0%,
        transparent 70%
    );
}

/* Soft blue wash at top of a section */
.glow-blue-top {
    position: relative;
}
.glow-blue-top::before {
    content: "";
    position: absolute;
    left: 5%;
    right: 5%;
    top: -8%;
    height: 50%;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(
        ellipse 70% 55% at 50% 0%,
        rgba(31, 111, 178, 0.16) 0%,
        transparent 70%
    );
}

/* Ensure section content sits above glow pseudo layers */
.glow-green-bottom > *,
.glow-blue-top > * {
    position: relative;
    z-index: 1;
}

/* Logo tiles — LIGHT plates only on logo grids (not About team photos).
   Scoped to logo-glass / client-proof / tech-partners / #partners so
   team photo wraps never inherit white plate styles. */
.surface-logo-plate,
.logo-glass,
.client-proof__cell,
.tech-partners__cell,
#partners .about-partners__cell {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background:
        linear-gradient(165deg,
            rgba(255, 255, 255, 0.98) 0%,
            rgba(244, 248, 252, 0.96) 45%,
            rgba(230, 238, 248, 0.95) 100%);
    border: 1px solid rgba(255, 255, 255, 0.65);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 1),
        0 10px 28px rgba(0, 0, 0, 0.28),
        0 2px 6px rgba(0, 0, 0, 0.18);
    transition: transform var(--duration-short) var(--ease-out-quart),
                box-shadow var(--duration-short) var(--ease-standard),
                border-color var(--duration-short) var(--ease-standard),
                background var(--duration-short) var(--ease-standard);
}

.surface-logo-plate::before,
.logo-glass::before,
.client-proof__cell::before,
.tech-partners__cell::before,
#partners .about-partners__cell::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 50%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.7) 0%, transparent 100%);
    pointer-events: none;
    z-index: 0;
    border-radius: inherit;
}

.surface-logo-plate::after,
.logo-glass::after,
.client-proof__cell::after,
.tech-partners__cell::after,
#partners .about-partners__cell::after {
    content: none;
    display: none;
}

.surface-logo-plate > *,
.logo-glass > *,
.client-proof__cell > *,
.tech-partners__cell > *,
#partners .about-partners__cell > * {
    position: relative;
    z-index: 1;
}

.surface-logo-plate img,
.logo-glass img,
.client-proof__cell img,
.tech-partners__cell img,
#partners .about-partners__cell img {
    filter: none !important;
    opacity: 1 !important;
    mix-blend-mode: normal;
    transition: transform var(--duration-short) var(--ease-out-quart);
}

.surface-logo-plate:hover,
.logo-glass:hover,
.client-proof__cell:hover,
.tech-partners__cell:hover,
#partners .about-partners__cell:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 255, 255, 0.9);
    background:
        linear-gradient(165deg,
            #ffffff 0%,
            #f7fafc 50%,
            #eef4fa 100%);
    box-shadow:
        inset 0 1px 0 #ffffff,
        0 16px 36px rgba(0, 0, 0, 0.32),
        0 0 0 1px rgba(31, 111, 178, 0.22);
}

.surface-logo-plate:hover img,
.logo-glass:hover img,
.client-proof__cell:hover img,
.tech-partners__cell:hover img,
#partners .about-partners__cell:hover img {
    transform: scale(1.03);
}

#partners .about-partners__placeholder {
    color: #0B1220 !important;
}

/* ─────────────────────────────────────────────
   8. CTA SECTION (footer-of-page strong CTA)
   ───────────────────────────────────────────── */
.cta-section {
    background: var(--gradient);
    color: var(--ink-0);
    text-align: center;
    padding: var(--section-tall) 0;
    position: relative;
    overflow: hidden;
}

/* Global pre-CTA breathing room: every site section that sits directly
   above the gradient CTA gets at least 6rem of padding-bottom. Catches
   custom sections (e.g. .about-careers) that defined their own padding
   too tight. The CTA's own padding-top is unchanged. */
section:has(+ .cta-section),
section:has(+ .section-wrapper.cta-section),
.section-wrapper:has(+ .section-wrapper.cta-section) {
    padding-bottom: 6rem !important;
}

.cta-section h2,
.cta-section p {
    /* True white on the brand gradient — not inverted ink */
    color: #ffffff;
}

/* Solid white pill on the green/blue gradient with dark label.
   Pin real colors: inverted --ink-900 is light text, which made
   "Get in Touch" nearly invisible on the white button. */
.cta-section .btn,
.cta-section .btn.cta {
    background: #ffffff;
    color: #0B1220;
    border: 2px solid #ffffff;
    font-weight: 600;
    transition: transform var(--duration-instant) var(--ease-out-quart),
                background-color var(--duration-short) var(--ease-standard),
                color var(--duration-short) var(--ease-standard),
                border-color var(--duration-short) var(--ease-standard);
}

.cta-section .btn:hover,
.cta-section .btn.cta:hover,
.cta-section .btn:focus-visible {
    transform: scale(1.04);
    background: transparent;
    color: #ffffff;
    border-color: #ffffff;
}

/* ─────────────────────────────────────────────
   9. REVEAL-ON-SCROLL — initial state, active state, staggered delays.
   Used site-wide on any element that should fade/lift in when it
   enters the viewport. Activation is handled by IntersectionObserver
   in site.js (it adds the .active class). The previous duplicates
   of this block in About.razor.css and Services.razor.css are gone —
   this is the single source of truth.
   ───────────────────────────────────────────── */
/* Default: fade up + slight scale (GSAP drives motion; CSS is the
   reduced-motion / final-state fallback). Mid pace between snappy and slow. */
.reveal {
    opacity: 0;
    transform: translateY(26px) scale(0.97);
    transition: opacity 0.55s var(--ease-out-quart),
                transform 0.55s var(--ease-out-quart);
    will-change: opacity, transform;
}

/* Phase C variants — initial poses for CSS fallback; JS reads the same classes. */
.reveal.reveal-left {
    transform: translateX(-32px);
}
.reveal.reveal-scale {
    transform: translateY(14px) scale(0.92);
}

.reveal.active,
.reveal.show {
    opacity: 1;
    transform: translateY(0) translateX(0) scale(1);
    will-change: auto;
}

/* Stagger delays — apply alongside .reveal on sibling elements.
   JS (initScrollReveal) honors these for GSAP; CSS honors them when
   reduced-motion uses transitions only. */
.delay-1 { transition-delay: 0.10s; }
.delay-2 { transition-delay: 0.20s; }
.delay-3 { transition-delay: 0.30s; }
.delay-4 { transition-delay: 0.40s; }

/* For groups that want a more dramatic stagger. */
.stagger-group .reveal { transition-duration: 0.6s; }

/* Full-bleed dark bands keep their bg visible; only glows animate. */
.tech-pn.reveal,
.services-framework.reveal,
.about-stats.reveal {
    opacity: 1 !important;
    transform: none !important;
}

/* Section glow orbs: start off, soft-fade in when the host is revealed
   (green/blue ambient language). Pair with .reveal on the section host. */
.section-feature--dark .section-feature__glow,
.stat-band--dark .stat-band__glow,
.tech-cap--dark .tech-cap__glow,
.tech-pn .tech-pn__glow,
.services-framework .services-framework__glow,
.about-stats .about-stats__glow {
    opacity: 0 !important;
    transition: opacity 1s var(--ease-out-quart) 0.1s;
}

.section-feature--dark.reveal.active .section-feature__glow,
.section-feature--dark.reveal.show .section-feature__glow,
.stat-band--dark.reveal.active .stat-band__glow,
.stat-band--dark.reveal.show .stat-band__glow,
.tech-cap--dark.reveal.active .tech-cap__glow,
.tech-cap--dark.reveal.show .tech-cap__glow {
    opacity: 0.55 !important;
}
.section-feature--dark.reveal.active .section-feature__glow--a,
.stat-band--dark.reveal.active .stat-band__glow--a,
.tech-cap--dark.reveal.active .tech-cap__glow--a {
    opacity: 0.70 !important;
}
.section-feature--dark.reveal.active .section-feature__glow--b,
.stat-band--dark.reveal.active .stat-band__glow--b,
.tech-cap--dark.reveal.active .tech-cap__glow--b {
    opacity: 0.60 !important;
}

.tech-pn.reveal.active .tech-pn__glow,
.tech-pn.reveal.show .tech-pn__glow {
    opacity: 0.65 !important;
}
.services-framework.reveal.active .services-framework__glow,
.services-framework.reveal.show .services-framework__glow {
    opacity: 0.45 !important;
}
.about-stats.reveal.active .about-stats__glow,
.about-stats.reveal.show .about-stats__glow {
    opacity: 0.32 !important;
}

@media (prefers-reduced-motion: reduce) {
    .section-feature--dark .section-feature__glow,
    .stat-band--dark .stat-band__glow,
    .tech-cap--dark .tech-cap__glow,
    .tech-pn .tech-pn__glow,
    .services-framework .services-framework__glow,
    .about-stats .about-stats__glow {
        opacity: 0.5 !important;
        transition: none !important;
    }
}

/* Parallax overscan helper — used by background layers that should
   shift on scroll. The transform: translateZ(0) forces a compositor
   layer so the shift is GPU-accelerated. */
.parallax-bg {
    position: absolute;
    inset: -10%;
    background-size: cover;
    background-position: center;
    transform: translateZ(0);
    will-change: transform;
}

/* Video poster overlay — a centered play glyph over a poster/thumbnail
   div with class .video-wrapper. Used in About, Spotlight, etc. */
.video-wrapper { position: relative; }

.video-wrapper::after {
    content: "▶";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 4rem;
    color: rgba(255, 255, 255, 0.85);
    pointer-events: none;
    z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
    .reveal, .reveal * {
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
    .parallax-bg { transform: none; }
}

/* ─────────────────────────────────────────────
   10. SCROLL PROGRESS BAR (top of page)
   ───────────────────────────────────────────── */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0;
    background: linear-gradient(90deg, var(--brand-primary), var(--brand-accent));
    z-index: 1100;
    transition: width 80ms linear;
    pointer-events: none;
}

/* ─────────────────────────────────────────────
   11. BACK-TO-TOP BUTTON
   ───────────────────────────────────────────── */
.back-to-top {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 1050;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--brand-primary);
    color: var(--ink-0);
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    box-shadow: var(--shadow-md);
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity var(--duration-short) var(--ease-out-quart),
                transform var(--duration-short) var(--ease-out-quart),
                background-color var(--duration-instant) var(--ease-standard);
}

.back-to-top.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.back-to-top:hover {
    background: var(--brand-primary-strong);
}

.back-to-top .bi {
    transition: transform var(--duration-instant) var(--ease-out-quart);
}

.back-to-top:hover .bi {
    transform: translateY(-2px);
}

/* ─────────────────────────────────────────────
   12. STAT BAND (replaces particle Why-Choose)
   ───────────────────────────────────────────── */
.stat-band {
    background: var(--surface-default);
    padding: var(--section-tall) 0;
    position: relative;
}

.stat-band__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

@media (max-width: 768px) {
    .stat-band__grid { grid-template-columns: 1fr; }
}

.stat-band__item {
    text-align: center;
    padding: 1.5rem;
}

.stat-band__value {
    font: var(--type-display-lg);
    color: var(--brand-primary);
    line-height: 1;
    margin-bottom: 0.75rem;
    display: inline-flex;
    align-items: baseline;
    gap: 0.25rem;
}

.stat-band__suffix {
    font: var(--type-display-md);
    color: var(--brand-primary);
}

.stat-band__value--text {
    font: var(--type-display-md);
    white-space: nowrap;
}

/* Ambient blue glow that sweeps one stat number at a time after the
   count-up settles (driven by initStatGlow adding .is-glowing). Keeps
   the band alive without the jarring scale "throb". */
.stat-band__value.is-glowing {
    animation: statGlow 1.7s ease-in-out 1;
}

@keyframes statGlow {
    0%, 100% {
        text-shadow:
            0 0 16px rgba(110, 193, 255, 0.55),
            0 0 32px rgba(110, 193, 255, 0.30);
    }
    50% {
        text-shadow:
            0 0 10px rgba(110, 193, 255, 0.95),
            0 0 24px rgba(110, 193, 255, 0.75),
            0 0 46px rgba(110, 193, 255, 0.45);
    }
}

@media (prefers-reduced-motion: reduce) {
    .stat-band__value.is-glowing { animation: none; }
}

.stat-band__label {
    font: var(--type-heading-md);
    color: var(--ink-900);
    margin-bottom: 0.5rem;
}

.stat-band__desc {
    font: var(--type-body);
    color: var(--ink-500);
    margin: 0;
}

/* ── DARK variant: glowing stats over animated signal-line backdrop ── */
.stat-band--dark {
    background: var(--dark-band-bg);
    color: var(--ink-100);
    overflow: hidden;
    isolation: isolate;
}

/* Keep the wrapper visible on load so the dark bg doesn't flash white */
.stat-band--dark.reveal {
    opacity: 1;
    transform: none;
}

/* Matching top fade that meets the bottom of the Services section
   above. Both bands fade to the same #050c1a — boundary becomes a
   single continuous dark plane instead of two sections with visible
   asymmetric orb tints. */
.stat-band--dark::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 140px;
    background: linear-gradient(180deg, var(--dark-band-edge) 0%, transparent 100%);
    z-index: 1;
    pointer-events: none;
}

.stat-band--dark .stat-band__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none;
    z-index: 0;
    animation: feature-glow-drift 22s ease-in-out infinite alternate;
}

.stat-band--dark .stat-band__glow--a {
    top: -15%;
    left: 8%;
    width: 460px;
    height: 460px;
    background: radial-gradient(circle, rgba(110, 193, 255, 0.55) 0%, rgba(110, 193, 255, 0) 70%);
    opacity: 0.55;
}

.stat-band--dark .stat-band__glow--b {
    bottom: -20%;
    right: 5%;
    width: 540px;
    height: 540px;
    background: radial-gradient(circle, rgba(63, 177, 115, 0.45) 0%, rgba(63, 177, 115, 0) 70%);
    opacity: 0.55;
    animation-duration: 26s;
    animation-delay: -8s;
}

/* Signal-line wrapper: SVG path + four CSS-animated nodes */
.stat-band--dark .stat-band__signal {
    position: absolute;
    inset: auto 0 0 0;
    width: 100%;
    height: 220px;
    z-index: 1;
    opacity: 0.85;
    pointer-events: none;
}

.stat-band--dark .stat-band__signal svg {
    width: 100%;
    height: 100%;
}

.stat-band--dark .stat-band__node {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    box-shadow: 0 0 12px currentColor;
    animation: stat-node-pulse 3.4s ease-in-out infinite;
}

.stat-band--dark .stat-band__node--a {
    left: 18%;  top: 46%;
    background: rgba(126, 226, 158, 0.9);
    color: rgba(126, 226, 158, 0.6);
    animation-duration: 3.2s;
}

.stat-band--dark .stat-band__node--b {
    left: 45%;  top: 59%;
    background: rgba(110, 193, 255, 0.9);
    color: rgba(110, 193, 255, 0.6);
    animation-duration: 3.6s;
    animation-delay: -1.1s;
}

.stat-band--dark .stat-band__node--c {
    left: 71%;  top: 46%;
    background: rgba(126, 226, 158, 0.9);
    color: rgba(126, 226, 158, 0.6);
    animation-duration: 4.0s;
    animation-delay: -2.0s;
}

.stat-band--dark .stat-band__node--d {
    left: 90%;  top: 57%;
    background: rgba(110, 193, 255, 0.9);
    color: rgba(110, 193, 255, 0.6);
    animation-duration: 3.4s;
    animation-delay: -0.6s;
}

@keyframes stat-node-pulse {
    0%, 100% { opacity: 0.2; transform: scale(0.85); }
    50%      { opacity: 1;   transform: scale(1.15); }
}

/* Glass-style stat cards on the dark bg */
.stat-band--dark .stat-band__item {
    position: relative;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: var(--radius-md);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    padding: 2.5rem 1.75rem;
    transition: transform var(--duration-short) var(--ease-out-quart),
                border-color var(--duration-short) var(--ease-standard),
                box-shadow var(--duration-short) var(--ease-standard);
    z-index: 2;
}

.stat-band--dark .stat-band__item:hover {
    transform: translateY(-3px);
    border-color: rgba(126, 226, 158, 0.40);
    box-shadow: 0 24px 50px -20px rgba(0, 0, 0, 0.6),
                0 0 0 1px rgba(126, 226, 158, 0.18),
                0 0 40px -8px rgba(126, 226, 158, 0.28);
}

/* Glowing numbers — soft accent halo */
.stat-band--dark .stat-band__value {
    color: #ffffff;
    text-shadow:
        0 0 16px rgba(110, 193, 255, 0.55),
        0 0 32px rgba(110, 193, 255, 0.30);
}

.stat-band--dark .stat-band__value--text {
    color: #6ec1ff;
    text-shadow:
        0 0 14px rgba(110, 193, 255, 0.50),
        0 0 28px rgba(110, 193, 255, 0.28);
}

.stat-band--dark .stat-band__suffix {
    color: #7ee29e;
    text-shadow:
        0 0 12px rgba(126, 226, 158, 0.55);
}

.stat-band--dark .stat-band__label {
    color: #ffffff;
}

.stat-band--dark .stat-band__desc {
    color: rgba(226, 232, 240, 0.75);
}

/* ─────────────────────────────────────────────
   HOMEPAGE RHYTHM — PHASE 1 (easy undo)
   Toggle: WhyChoose._useSplitLayout / Home._useResourcesFeaturedLayout
   Or delete this whole block + remove --split / --featured classes.
   ───────────────────────────────────────────── */

/* Why: title left · metrics stacked right (instrument panel, not 3-up cards) */
.stat-band--split .stat-band__split {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: center;
}

.stat-band--split .stat-band__intro {
    text-align: left;
    max-width: 22rem;
}

.stat-band--split .stat-band__intro .section-title {
    margin-bottom: 0;
}

.stat-band--split .stat-band__grid--stack {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    grid-template-columns: unset;
}

.stat-band--split .stat-band__grid--stack .stat-band__item {
    text-align: left;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 1.25rem;
    row-gap: 0.2rem;
    padding: 1.1rem 1.25rem;
    align-items: center;
}

.stat-band--split .stat-band__grid--stack .stat-band__value {
    grid-row: 1 / span 2;
    grid-column: 1;
    margin-bottom: 0;
    align-self: center;
}

.stat-band--split .stat-band__grid--stack .stat-band__label {
    grid-column: 2;
    grid-row: 1;
    margin-bottom: 0;
}

.stat-band--split .stat-band__grid--stack .stat-band__desc {
    grid-column: 2;
    grid-row: 2;
}

@media (max-width: 991.98px) {
    .stat-band--split .stat-band__split {
        grid-template-columns: 1fr;
        gap: 1.75rem;
    }

    .stat-band--split .stat-band__intro {
        max-width: none;
        text-align: center;
    }
}

@media (max-width: 575.98px) {
    .stat-band--split .stat-band__grid--stack .stat-band__item {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .stat-band--split .stat-band__grid--stack .stat-band__value {
        grid-row: auto;
        grid-column: auto;
        justify-content: center;
        margin: 0 auto 0.5rem;
    }

    .stat-band--split .stat-band__grid--stack .stat-band__label,
    .stat-band--split .stat-band__grid--stack .stat-band__desc {
        grid-column: auto;
        grid-row: auto;
    }
}

/* Resources: 1 large + 2 stacked (not three equal Service clones) */
.home-resources--featured .home-resources__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}

.home-resources--featured .home-resources__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 1.25rem;
    align-items: stretch;
}

.home-resources--featured .home-resources__feature {
    min-height: 100%;
}

.home-resources--featured .home-resources__feature .resource-card,
.home-resources--featured .home-resources__feature .card {
    height: 100%;
}

.home-resources--featured .home-resources__stack {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-height: 100%;
}

.home-resources--featured .home-resources__stack-item {
    flex: 1 1 0;
    min-height: 0;
}

.home-resources--featured .home-resources__stack-item .resource-card,
.home-resources--featured .home-resources__stack-item .card {
    height: 100%;
}

@media (max-width: 991.98px) {
    .home-resources--featured .home-resources__grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .home-resources--featured .home-resources__header {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ─────────────────────────────────────────────
   13. SPOTLIGHT (campaign band — PBS commercial)
   ───────────────────────────────────────────── */
.spotlight {
    background: var(--surface-muted);
    padding: var(--section-default) 0;
}

.spotlight__eyebrow {
    color: var(--brand-accent);
}

.spotlight__media {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-md);
    overflow: hidden;
    cursor: pointer;
    background: var(--ink-900);
    box-shadow: var(--shadow-md);
    transition: transform var(--duration-short) var(--ease-out-quart),
                box-shadow var(--duration-short) var(--ease-out-quart);
}

.spotlight__media:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.spotlight__media img,
.spotlight__media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.spotlight__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--duration-short) var(--ease-out-quart),
                background var(--duration-instant) var(--ease-standard);
    /* Pin dark icon color — ink-900 is light under the dark theme. */
    color: #0B1220;
}

.spotlight__media:hover .spotlight__play {
    transform: translate(-50%, -50%) scale(1.08);
    background: #ffffff;
}

.spotlight__play .bi {
    font-size: 1.75rem;
    margin-left: 4px;
}

.spotlight__title {
    font: var(--type-display-md);
    margin-bottom: 1rem;
}

.spotlight__desc {
    font: var(--type-body-lg);
    color: var(--ink-700);
    margin-bottom: 1.5rem;
}

.spotlight__ctas {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.spotlight__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font: var(--type-body-lg);
    font-weight: 600;
    color: var(--brand-primary);
    text-decoration: none;
    transition: color var(--duration-instant) var(--ease-standard),
                gap var(--duration-instant) var(--ease-out-quart);
}

.spotlight__cta::after {
    content: "→";
    transition: transform var(--duration-instant) var(--ease-out-quart);
}

.spotlight__cta:hover {
    color: var(--brand-primary-strong);
}

.spotlight__cta:hover::after {
    transform: translateX(4px);
}

/* ─────────────────────────────────────────────
   14. PATTERN SYSTEM
   A site-wide decorative pattern layer. Drop `.pattern` on a child
   element of any relatively-positioned container (or use `.pattern` on
   the container itself with one of the variant modifiers) to apply a
   tiling decorative background.

   Variants (pick one):
     .pattern--grid       Hairline grid (two perpendicular lines)
     .pattern--dots       Small dots on a grid
     .pattern--triangles  Equilateral-triangle tiling
     .pattern--hexagons   Honeycomb tiling

   Modifier:
     .pattern--spotlight  Hides the pattern except in a radial mask that
                          follows the cursor (CSS vars --mx / --my are
                          updated by JS — see initPatternSpotlight in
                          site.js). Without this, the pattern is fully
                          visible at the configured opacity.

   Tuning (set on the element OR on an ancestor):
     --pattern-size       Tile size (default 32px)
     --pattern-color      Line/dot color (default rgba(11,18,32,.10))
     --pattern-opacity    Final layer opacity (default 1)
     --pattern-mask-top   Top of mask gradient — used by ::after to
                          fade the pattern at the bottom of the section
                          so it doesn't crash into the next one (0%–100%)

   Example:
     <section class="about-narrative">
       <div class="pattern pattern--dots" aria-hidden="true"></div>
       ...
     </section>
   ───────────────────────────────────────────── */
.pattern {
    --pattern-size:    32px;
    /* Light hairlines read on dark page surfaces */
    --pattern-color:   rgba(255, 255, 255, 0.07);
    --pattern-opacity: 1;
    --pattern-mask-top: 0%;

    position: absolute;
    inset: 0;
    opacity: var(--pattern-opacity);
    pointer-events: none;
    /* Default soft fade so any pattern naturally dies into the section
       below without a hard edge. Override --pattern-mask-top to 0% for
       a fully-rendered pattern, or to 60% for a stronger top→bottom fade. */
    -webkit-mask-image: linear-gradient(180deg,
        rgba(0, 0, 0, 0.85) var(--pattern-mask-top),
        rgba(0, 0, 0, 0.40) 60%,
        rgba(0, 0, 0, 0)    100%);
            mask-image: linear-gradient(180deg,
        rgba(0, 0, 0, 0.85) var(--pattern-mask-top),
        rgba(0, 0, 0, 0.40) 60%,
        rgba(0, 0, 0, 0)    100%);
}

/* Grid — two perpendicular hairlines spaced by --pattern-size */
.pattern--grid {
    background-image:
        linear-gradient(to right,  var(--pattern-color) 1px, transparent 1px),
        linear-gradient(to bottom, var(--pattern-color) 1px, transparent 1px);
    background-size: var(--pattern-size) var(--pattern-size);
}

/* Dots — radial gradient circles on a grid */
.pattern--dots {
    --pattern-dot-size: 0.7px;
    background-image:
        radial-gradient(circle,
            var(--pattern-color) var(--pattern-dot-size),
            transparent var(--pattern-dot-size));
    background-size: var(--pattern-size) var(--pattern-size);
}

/* Triangles — equilateral tiling. Built from an inline SVG so the
   stroke color is driven by --pattern-color via a CSS-encoded
   rgba() inside the SVG. We use `currentColor` inside the SVG and
   set `color: var(--pattern-color)` on the element so the browser
   resolves the SVG color from the CSS variable. */
.pattern--triangles {
    color: var(--pattern-color);
    --tri-h: calc(var(--pattern-size) * 0.866);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 52' fill='none' stroke='currentColor' stroke-width='1'><path d='M0 52 L30 0 L60 52 Z M30 0 L60 52 H0 Z'/></svg>");
    background-size: var(--pattern-size) var(--tri-h);
}

/* Hexagons — honeycomb tiling. Same inline-SVG technique. */
.pattern--hexagons {
    color: var(--pattern-color);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 100' fill='none' stroke='currentColor' stroke-width='1'><path d='M28 0 L56 16 L56 50 L28 66 L0 50 L0 16 Z M28 66 L56 82 L56 100 M28 66 L0 82 L0 100'/></svg>");
    background-size: calc(var(--pattern-size) * 1.75) calc(var(--pattern-size) * 3.125);
}

/* Spotlight modifier — pattern is masked everywhere EXCEPT a soft
   circle that follows the cursor. The mask uses --mx / --my which
   are updated on mousemove by initPatternSpotlight() in site.js.
   The downward fade mask is overridden because spotlight takes
   precedence — we don't want both fading away from the cursor AND
   fading downward. */
.pattern--spotlight {
    -webkit-mask-image: radial-gradient(
        220px circle at var(--mx, 50%) var(--my, 50%),
        #000 0%,
        rgba(0, 0, 0, 0.6) 35%,
        transparent 70%
    );
            mask-image: radial-gradient(
        220px circle at var(--mx, 50%) var(--my, 50%),
        #000 0%,
        rgba(0, 0, 0, 0.6) 35%,
        transparent 70%
    );
    opacity: 0;
    transition: opacity var(--duration-short) var(--ease-standard);
}

/* When the spotlight container is hovered, fade the pattern in. */
.pattern-host:hover .pattern--spotlight,
:hover > .pattern--spotlight {
    opacity: var(--pattern-opacity);
}

/* Dark-surface tuning — for use on dark sections where the default
   dark-ink color would be invisible. Apply alongside .pattern. */
.pattern--on-dark {
    --pattern-color: rgba(255, 255, 255, 0.10);
}

/* ─────────────────────────────────────────────
   14b. SERVICE CARD — CURSOR-FOLLOWING GRID SPOTLIGHT
   Composes on top of the pattern system above. The card itself is
   the spotlight host; .card-spotlight::before is its pattern layer.
   ───────────────────────────────────────────── */
.card-spotlight {
    position: relative;
    isolation: isolate;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background:
        linear-gradient(165deg, rgba(255, 255, 255, 0.045) 0%, transparent 45%),
        var(--surface-elevated);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: transform var(--duration-short) var(--ease-out-quart),
                box-shadow var(--duration-short) var(--ease-out-quart),
                border-color var(--duration-short) var(--ease-standard),
                background var(--duration-short) var(--ease-standard);
}

.card-spotlight:hover {
    background:
        linear-gradient(165deg, rgba(31, 111, 178, 0.12) 0%, transparent 50%),
        #1E3350;
}

/* Cursor-following pattern layer on card-spotlight.
   Default = hexagons (Services / Home / Resources).
   Modifiers pick a different tile — real variants, not aliases. */
.card-spotlight::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 100' fill='none' stroke='%236BB0E8' stroke-opacity='0.55' stroke-width='1.25'><path d='M28 0 L56 16 L56 50 L28 66 L0 50 L0 16 Z M28 66 L56 82 L56 100 M28 66 L0 82 L0 100'/></svg>");
    background-size: 56px 100px;
    -webkit-mask-image: radial-gradient(
        240px circle at var(--mx, 50%) var(--my, 50%),
        #000 0%,
        rgba(0, 0, 0, 0.75) 40%,
        transparent 72%
    );
            mask-image: radial-gradient(
        240px circle at var(--mx, 50%) var(--my, 50%),
        #000 0%,
        rgba(0, 0, 0, 0.75) 40%,
        transparent 72%
    );
    opacity: 0;
    transition: opacity var(--duration-short) var(--ease-standard);
    pointer-events: none;
    z-index: 0;
}

.card-spotlight--hexagons::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 100' fill='none' stroke='%236BB0E8' stroke-opacity='0.55' stroke-width='1.25'><path d='M28 0 L56 16 L56 50 L28 66 L0 50 L0 16 Z M28 66 L56 82 L56 100 M28 66 L0 82 L0 100'/></svg>");
    background-size: 56px 100px;
}

/* Dot field — data / metrics language */
.card-spotlight--dots::before {
    background-image: radial-gradient(circle, rgba(110, 176, 232, 0.55) 1.1px, transparent 1.2px);
    background-size: 18px 18px;
}

/* Hairline grid — engineering / model language */
.card-spotlight--grid::before {
    background-image:
        linear-gradient(to right,  rgba(110, 176, 232, 0.40) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(110, 176, 232, 0.40) 1px, transparent 1px);
    background-size: 22px 22px;
}

/* Triangle mesh */
.card-spotlight--triangles::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 52' fill='none' stroke='%236BB0E8' stroke-opacity='0.5' stroke-width='1.1'><path d='M0 52 L30 0 L60 52 Z'/></svg>");
    background-size: 32px 28px;
}

/* Light-on-dark: brighter strokes for dark-band cards */
.card-spotlight--on-dark::before,
.card-spotlight--on-dark.card-spotlight--hexagons::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 100' fill='none' stroke='%23ffffff' stroke-opacity='0.45' stroke-width='1.25'><path d='M28 0 L56 16 L56 50 L28 66 L0 50 L0 16 Z M28 66 L56 82 L56 100 M28 66 L0 82 L0 100'/></svg>");
    background-size: 56px 100px;
}
.card-spotlight--on-dark.card-spotlight--dots::before {
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.45) 1.1px, transparent 1.2px);
    background-size: 18px 18px;
}
.card-spotlight--on-dark.card-spotlight--grid::before {
    background-image:
        linear-gradient(to right,  rgba(255, 255, 255, 0.28) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.28) 1px, transparent 1px);
    background-size: 22px 22px;
}
.card-spotlight--on-dark.card-spotlight--triangles::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 52' fill='none' stroke='%23ffffff' stroke-opacity='0.4' stroke-width='1.1'><path d='M0 52 L30 0 L60 52 Z'/></svg>");
    background-size: 32px 28px;
}

/* Soft accent glow at the cursor position */
.card-spotlight::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
        180px circle at var(--mx, 50%) var(--my, 50%),
        rgba(63, 177, 115, 0.12),
        transparent 60%
    );
    opacity: 0;
    transition: opacity var(--duration-short) var(--ease-standard);
    pointer-events: none;
    z-index: 0;
}

.card-spotlight:hover {
    border-color: rgba(31, 111, 178, 0.45);
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover, var(--shadow-lg));
}

.card-spotlight:hover::before,
.card-spotlight:hover::after {
    opacity: 1;
}

/* Resource listing cards — same presence as Home; lifted plate so the
   cursor spotlight pattern is not drowned by a dark band. */
.resource-card.card-spotlight {
    background:
        linear-gradient(165deg, rgba(255, 255, 255, 0.08) 0%, transparent 48%),
        #1e3350;
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: var(--shadow-md);
}

.resource-card.card-spotlight:hover {
    background:
        linear-gradient(165deg, rgba(31, 111, 178, 0.18) 0%, transparent 50%),
        #27456a;
    border-color: rgba(110, 176, 232, 0.45);
    box-shadow: var(--shadow-hover);
}

.resource-card.card-spotlight:hover::before {
    opacity: 1;
}

.resource-card.card-spotlight:hover::after {
    opacity: 1;
    background: radial-gradient(
        200px circle at var(--mx, 50%) var(--my, 50%),
        rgba(63, 177, 115, 0.18),
        transparent 60%
    );
}

.card-spotlight > * {
    position: relative;
    z-index: 1;
}

/* The icon container picks up the accent on hover */
.card-spotlight__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--ink-100);
    color: var(--ink-700);
    margin-bottom: 1.25rem;
    transition: background var(--duration-short) var(--ease-standard),
                color var(--duration-short) var(--ease-standard),
                transform var(--duration-short) var(--ease-out-quart);
}

.card-spotlight:hover .card-spotlight__icon {
    background: rgba(63, 177, 115, 0.12);
    color: var(--brand-accent);
    transform: scale(1.04);
}

.card-spotlight__icon .bi {
    font-size: 1.5rem;
    transition: none; /* let parent handle it */
}

/* ─────────────────────────────────────────────
   14b. FEATURE SECTION — full-bleed, layered ambient lighting
        Inspired by Apple/Robinhood feature bands
   ───────────────────────────────────────────── */
.section-feature {
    position: relative;
    overflow: hidden;
    padding: clamp(5rem, 9vw, 9rem) 0;
    isolation: isolate;
}

.section-feature--dark {
    background: var(--dark-band-bg);
    color: var(--ink-100);
    /* Slide up under the hero's progressive fade so the dark color
       bleeds through everywhere the video is less than fully opaque.
       Padding-top adds the same offset so content lands where it
       should visually. */
    margin-top: -40vh;
    padding-top: calc(clamp(5rem, 9vw, 9rem) + 40vh);
    z-index: 1;
}

/* The wrapper itself should not fade in — its dark bg must show
   immediately on load to avoid a white flash. Inner .reveal items
   (cards) and .section-title still stage in via initScrollReveal. */
.section-feature--dark.reveal {
    opacity: 1;
    transform: none;
}

/* Solid-dark bottom band that masks orb colors at the seam where this
   section meets the next dark section. Keeps the orbs visible through
   the hero's transparent fade above (orbs at top:-10% are untouched),
   but kills the asymmetric color stripe along the bottom boundary. */
.section-feature--dark::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 140px;
    background: linear-gradient(0deg, var(--dark-band-edge) 0%, transparent 100%);
    z-index: 1;
    pointer-events: none;
}

/* Soft animated glow orbs behind content for depth */
.section-feature__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.55;
    pointer-events: none;
    z-index: 0;
    animation: feature-glow-drift 18s ease-in-out infinite alternate;
}

.section-feature__glow--a {
    top: -10%;
    left: -8%;
    width: 520px;
    height: 520px;
    background: radial-gradient(circle, rgba(63, 177, 115, 0.55) 0%, rgba(63, 177, 115, 0) 70%);
    animation-delay: -2s;
}

.section-feature__glow--b {
    bottom: -15%;
    right: -10%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(31, 111, 178, 0.55) 0%, rgba(31, 111, 178, 0) 70%);
    animation-delay: -6s;
    animation-duration: 22s;
}

.section-feature__glow--c {
    top: 35%;
    left: 50%;
    width: 380px;
    height: 380px;
    background: radial-gradient(circle, rgba(124, 92, 255, 0.40) 0%, rgba(124, 92, 255, 0) 70%);
    transform: translateX(-50%);
    animation-delay: -10s;
    animation-duration: 26s;
}

/* New orb positioned to bleed through the hero's transparent fade
   right at the top-left of the Services section, giving that
   "soft green light kissing the bottom of the hero" effect. */
.section-feature__glow--d {
    top: 22vh;
    left: 4%;
    width: 560px;
    height: 560px;
    background: radial-gradient(circle, rgba(63, 177, 115, 0.70) 0%, rgba(63, 177, 115, 0) 70%);
    opacity: 0.75;
    animation-delay: -4s;
    animation-duration: 20s;
}

@keyframes feature-glow-drift {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    50%  { transform: translate3d(30px, -20px, 0) scale(1.08); }
    100% { transform: translate3d(-20px, 25px, 0) scale(0.96); }
}

.section-feature__glow--c {
    /* Override drift origin so it stays roughly center-X */
    animation-name: feature-glow-drift-c;
}

@keyframes feature-glow-drift-c {
    0%   { transform: translate3d(-50%, 0, 0) scale(1); }
    50%  { transform: translate3d(calc(-50% + 40px), 20px, 0) scale(1.08); }
    100% { transform: translate3d(calc(-50% - 30px), -15px, 0) scale(0.95); }
}

/* On-dark typography overrides */
.eyebrow.eyebrow-on-dark {
    color: #6ec1ff;
}

.section-title.section-title--on-dark {
    color: #ffffff;
}

/* Dark variant of the spotlight card — image-led, premium */
.section-feature--dark .card-spotlight {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%);
    border: 1px solid rgba(255, 255, 255, 0.10);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--ink-100);
}

.section-feature--dark .card-spotlight img {
    transition: transform 700ms var(--ease-out-quart);
}

.section-feature--dark .card-spotlight:hover img {
    transform: scale(1.06);
}

.section-feature--dark .card-spotlight h3 {
    color: #ffffff !important;
}

.section-feature--dark .card-spotlight p {
    color: rgba(226, 232, 240, 0.78) !important;
}

.section-feature--dark .card-spotlight span[style*="brand-primary"] {
    color: #6ec1ff !important;
}

.section-feature--dark .card-spotlight:hover {
    border-color: rgba(63, 177, 115, 0.45);
    transform: translateY(-4px);
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.6),
                0 0 0 1px rgba(63, 177, 115, 0.20),
                0 0 40px -10px rgba(63, 177, 115, 0.35);
}

.section-feature--dark .card-spotlight__icon {
    background: rgba(255, 255, 255, 0.08);
    color: #6ec1ff;
}

.section-feature--dark .card-spotlight:hover .card-spotlight__icon {
    background: rgba(63, 177, 115, 0.20);
    color: #7ee29e;
}

/* Tighten image height for the home feature cards */
.section-feature--dark .card-spotlight > img {
    height: 220px;
    width: 100%;
    object-fit: cover;
}

/* Brighter, more visible cursor-following grid on dark cards */
.section-feature--dark .card-spotlight::before {
    background-image:
        linear-gradient(to right, rgba(126, 226, 158, 0.22) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(126, 226, 158, 0.22) 1px, transparent 1px);
    background-size: 28px 28px;
    -webkit-mask-image: radial-gradient(
        260px circle at var(--mx, 50%) var(--my, 50%),
        #000 0%,
        rgba(0, 0, 0, 0.85) 35%,
        transparent 75%
    );
            mask-image: radial-gradient(
        260px circle at var(--mx, 50%) var(--my, 50%),
        #000 0%,
        rgba(0, 0, 0, 0.85) 35%,
        transparent 75%
    );
}

/* And the soft accent glow follows the cursor with a richer green */
.section-feature--dark .card-spotlight::after {
    background: radial-gradient(
        220px circle at var(--mx, 50%) var(--my, 50%),
        rgba(63, 177, 115, 0.28),
        transparent 60%
    );
}

/* ─────────────────────────────────────────────
   15. PAGE TRANSITIONS
   ───────────────────────────────────────────── */
.page-transition-enter main {
    animation: pageFadeIn var(--duration-short) var(--ease-out-quart);
}

@keyframes pageFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ─────────────────────────────────────────────
   16. MOBILE ADJUSTMENTS
   ───────────────────────────────────────────── */
@media (max-width: 992px) {
    .section,
    .section-default { padding-top: var(--space-5); padding-bottom: var(--space-5); }
    .section-tall    { padding-top: var(--space-6); padding-bottom: var(--space-6); }

    nav.navbar .nav-link { padding: 0.75rem 1rem; }
}

/* ─────────────────────────────────────────────
   17. PAGE HEADER (hero) — shared bits only.
   Heights, alignment, and media layers live in
   PageHeader.razor.css so variants stay consistent.
   Do not set min-height here (was 100vh and fought
   interior heroes / Home video rhythm).
   ───────────────────────────────────────────── */
.page-header {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.page-header-video,
.page-header-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.page-header-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(11, 18, 32, 0.55) 0%,
        rgba(11, 18, 32, 0.25) 45%,
        rgba(11, 18, 32, 0.10) 100%
    );
    z-index: 1;
}

.page-header > .container {
    z-index: 2;
}

.page-header-headline {
    font: var(--type-display-xl);
    /* True white on media heroes — not theme-inverted ink */
    color: #ffffff;
    margin-bottom: 1.25rem;
}

.page-header-subheadline {
    font: var(--type-body-lg);
    color: #ffffff;
    opacity: 0.92;
    max-width: 36rem;
}

.page-header.light .page-header-headline,
.page-header.light .page-header-subheadline {
    /* Light-theme hero: real dark ink (not inverted --ink-900) */
    color: #0B1220;
}

@media (max-width: 768px) {
    .page-header-headline { font-size: 2.5rem; line-height: 1.1; }
}

/* ────────────────────────────────────────────────
   TECHNOLOGY HERO — "THE DATA RIDE"
   Styles for the SVG that initProfitNetworkHero injects into
   .page-header-pipeline. Global (not scoped) because the SVG is created
   by JS and never carries Blazor's scoped-CSS attribute.
   ──────────────────────────────────────────────── */
.pn-svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Faint circuit-board grid backdrop */
.pn-grid { opacity: 0.5; }
.pn-grid__line {
    fill: none;
    stroke: rgba(255, 255, 255, 0.05);
    stroke-width: 1;
}

/* The route: a faint base wire plus an animated dashed "flow" overlay */
.pn-track {
    fill: none;
    stroke: rgba(255, 255, 255, 0.10);
    stroke-width: 2;
}
.pn-track-flow {
    fill: none;
    stroke: var(--brand-accent);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 2 16;
    opacity: 0.5;
    animation: pnFlow 1.1s linear infinite;
}
@keyframes pnFlow { to { stroke-dashoffset: -18; } }

/* Stations */
.pn-station__halo {
    fill: url(#pn-halo);
    opacity: 0;            /* driven per-frame by JS */
    pointer-events: none;
}
.pn-station__ring {
    fill: none;
    stroke: var(--brand-accent);
    stroke-width: 1.5;
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
}
.pn-station.is-active .pn-station__ring {
    animation: pnRing 1.05s ease-out infinite;
}
@keyframes pnRing {
    0%   { opacity: 0.55; transform: scale(0.7); }
    100% { opacity: 0;    transform: scale(1.75); }
}

.pn-station__tile {
    fill: rgba(255, 255, 255, 0.04);
    stroke: rgba(255, 255, 255, 0.16);
    stroke-width: 1.4;
    transition: fill 0.2s ease, stroke 0.2s ease;
}
.pn-station.is-active .pn-station__tile {
    fill: rgba(63, 177, 115, 0.16);
    stroke: var(--brand-accent);
}

.pn-station__icon {
    fill: none;
    stroke: rgba(255, 255, 255, 0.82);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke 0.2s ease;
}
.pn-station.is-active .pn-station__icon { stroke: #ffffff; }

.pn-station__label {
    fill: rgba(255, 255, 255, 0.6);
    font: 600 13px "Inter", system-ui, sans-serif;
    text-anchor: middle;
    letter-spacing: 0.02em;
    transition: fill 0.2s ease;
}
.pn-station.is-active .pn-station__label { fill: #ffffff; }

/* Packet + comet trail */
.pn-packet__glow { fill: url(#pn-packet-grad); }
.pn-packet__core { fill: #ffffff; }
.pn-trail__dot { fill: var(--brand-accent); }

@media (prefers-reduced-motion: reduce) {
    .pn-track-flow,
    .pn-station.is-active .pn-station__ring { animation: none; }
}

/* ─────────────────────────────────────────────
   SITE-WIDE DARK THEME OVERRIDES
   The token remap above turns everything that reads --ink-*/--surface-*
   dark. This block catches the things that hardcode light values:
   Bootstrap's light utilities, cards and form controls.

   Navbar intentionally NOT overridden here — it keeps the original light
   frosted-glass treatment from section 4 (pre–dark-theme).
   ───────────────────────────────────────────── */

/* Bootstrap light utilities → dark equivalents.
   Prefer remapping --bs-* vars above; these !important rules are a belt-
   and-suspenders fallback for anything that hardcodes white outside the
   variable system (or loads with equal specificity later). */
.bg-white,
.bg-white.bg-white {
    /* Surfaces only — never hijack --bs-white (text-white / borders need it). */
    background-color: var(--surface-default) !important;
    --bs-bg-opacity: 1;
}
.bg-light,
.bg-light.bg-light {
    background-color: var(--surface-muted) !important;
}
.bg-body,
.bg-body-tertiary,
.bg-body-secondary {
    background-color: var(--surface-default) !important;
}
/* Text colors: true white on media heroes; light ink for "dark" body text. */
.text-white {
    color: #ffffff !important;
}
.text-dark { color: var(--ink-900) !important; }
.text-muted { color: var(--ink-500) !important; }
.text-body { color: var(--ink-900) !important; }
.text-body-secondary,
.text-body-tertiary { color: var(--ink-500) !important; }
.border, .border-top, .border-bottom, .border-start, .border-end {
    border-color: var(--ink-200) !important;
}
hr { border-color: var(--ink-200); opacity: 1; }

/* Sections that used bg-white as "page canvas" — force surface so they
   never flash pure Bootstrap white if a utility loses the cascade fight. */
.section-default.bg-white,
.section-tight.bg-white,
.section-tall.bg-white,
section.bg-white {
    background-color: var(--surface-default) !important;
    color: var(--ink-900);
}

/* Cards / surfaces that rely on Bootstrap defaults.
   (Background gradient is set in section 6; keep color/border here.) */
.card {
    color: var(--ink-900);
}
.card-header,
.card-footer {
    background-color: rgba(0, 0, 0, 0.22);
    border-color: var(--ink-200);
    color: var(--ink-900);
}

/* Outline-dark buttons would be invisible on dark — read them as light. */
.btn-outline-dark {
    color: var(--ink-900);
    border-color: rgba(255, 255, 255, 0.35);
}
.btn-outline-dark:hover,
.btn-outline-dark:focus-visible {
    background-color: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.55);
    color: var(--ink-900);
}

/* Form controls: dark fields with legible text + placeholder. */
.form-control,
.form-select,
.input-group-text {
    background-color: var(--surface-muted);
    color: var(--ink-900);
    border-color: var(--ink-200);
}
.form-control::placeholder { color: var(--ink-500); }
.form-control:focus,
.form-select:focus {
    background-color: var(--surface-muted);
    color: var(--ink-900);
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 0.2rem rgba(31, 111, 178, 0.30);
}
.form-control:-webkit-autofill {
    -webkit-text-fill-color: var(--ink-900);
    -webkit-box-shadow: 0 0 0 1000px var(--surface-muted) inset;
}

/* List groups, accordion, dropdowns, tables — Bootstrap defaults are light. */
.list-group-item {
    background-color: var(--surface-elevated);
    color: var(--ink-900);
    border-color: var(--ink-200);
}
.list-group-item:hover,
.list-group-item:focus {
    background-color: var(--surface-muted);
    color: var(--ink-900);
}
.list-group-item.active {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
    color: #fff;
}

.accordion-item {
    background-color: var(--surface-elevated);
    color: var(--ink-900);
    border-color: var(--ink-200);
}
.accordion-button {
    background-color: var(--surface-elevated);
    color: var(--ink-900);
}
.accordion-button:not(.collapsed) {
    background-color: var(--surface-muted);
    color: var(--brand-primary);
    box-shadow: inset 0 -1px 0 var(--ink-200);
}
.accordion-button::after {
    filter: invert(1) brightness(1.6);
}
.accordion-button:focus {
    box-shadow: 0 0 0 0.2rem rgba(31, 111, 178, 0.30);
}
.accordion-body {
    background-color: var(--surface-elevated);
    color: var(--ink-700);
}

.dropdown-menu {
    background-color: var(--surface-elevated);
    border-color: var(--ink-200);
    color: var(--ink-900);
}
.dropdown-item {
    color: var(--ink-900);
}
.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--surface-muted);
    color: var(--ink-900);
}
.dropdown-divider {
    border-color: var(--ink-200);
}

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--ink-900);
    --bs-table-border-color: var(--ink-200);
    --bs-table-striped-bg: rgba(255, 255, 255, 0.03);
    --bs-table-hover-bg: rgba(255, 255, 255, 0.05);
    color: var(--ink-900);
}

.modal-content {
    background-color: var(--surface-elevated);
    color: var(--ink-900);
    border-color: var(--ink-200);
}
.modal-header,
.modal-footer {
    border-color: var(--ink-200);
}
.btn-close {
    filter: invert(1) grayscale(1);
}

/* Selection + scrollbar polish for dark chrome */
::selection {
    background: rgba(31, 111, 178, 0.45);
    color: #fff;
}
* {
    scrollbar-width: thin;
    scrollbar-color: var(--ink-300) var(--surface-dark);
}
*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
*::-webkit-scrollbar-track {
    background: var(--surface-dark);
}
*::-webkit-scrollbar-thumb {
    background: var(--ink-300);
    border-radius: 999px;
    border: 2px solid var(--surface-dark);
}
*::-webkit-scrollbar-thumb:hover {
    background: var(--ink-500);
}

/* Navbar toggler icon readable on light frosted bar */
.navbar-toggler {
    border-color: rgba(11, 18, 32, 0.20);
}
.navbar-toggler-icon {
    filter: none;
}

/* Code / pre blocks if legal pages use them */
code, kbd, samp {
    color: var(--ink-900);
}
pre {
    background-color: var(--surface-muted);
    color: var(--ink-900);
    border: 1px solid var(--ink-200);
}
code {
    background-color: var(--surface-muted);
}

/* Badge defaults that assume light surfaces */
.badge.bg-light {
    background-color: var(--surface-muted) !important;
    color: var(--ink-900) !important;
}
.badge.bg-white {
    background-color: var(--surface-elevated) !important;
    color: var(--ink-900) !important;
}