/* ==========================================================================
   GENERATED FILE — DO NOT EDIT
   Built from src/styles/ by build.mjs. Edit the module, then run:
       node build.mjs
   ========================================================================== */

@layer tokens, base, layout, components, utilities;

/* ── tokens.css ──────────────────────────────────────────────── */
@layer tokens {
/* ==========================================================================
   FUSED PROTECTIVE SERVICES — DESIGN TOKENS & SYSTEM VARIABLES
   Exact Color Match to 3D Brushed Gold Shield Logo
   ========================================================================== */
:root {
    /* Backgrounds & Surface Textures */
    --color-void: #050504;
    --color-surface-base: #090a09;
    --color-surface-elevated: #111211;
    --color-surface-card: rgba(18, 19, 18, 0.86);
    --color-surface-card-hover: rgba(26, 28, 26, 0.98);
    --color-surface-glass: rgba(255, 255, 255, 0.03);

    /* Exact Logo Gold Spectrum */
    --logo-gold-shadow: #72542b;
    --logo-gold-warm: #87693b;
    --logo-gold-core: #a1814c;
    --logo-gold-bevel: #ba9857;
    --logo-gold-glint: #c6a25c;
    --logo-gold-highlight: #dfc07b;
    --logo-gold-specular: #f7e5b2;

    /* Metallic Gold Gradients */
    --gradient-gold-brushed: linear-gradient(135deg, #f7e5b2 0%, #ba9857 25%, #a1814c 50%, #87693b 75%, #72542b 100%);
    --gradient-gold-metallic: linear-gradient(180deg, #ffffff 0%, #f7e5b2 20%, #c6a25c 45%, #ba9857 70%, #72542b 100%);

    /* Ambient Glows */
    --gold-glow-intense: rgba(186, 152, 87, 0.45);
    --gold-glow-soft: rgba(161, 129, 76, 0.16);

    /* Borders */
    --border-subtle: rgba(255, 255, 255, 0.08);
    --border-muted: rgba(255, 255, 255, 0.14);
    --border-gold-subtle: rgba(186, 152, 87, 0.35);
    --border-gold-bright: #c6a25c;

    /* Typography Colors */
    --text-pure: #ffffff;
    --text-primary: #f5f5f4;
    --text-secondary: #a8a29e;
    --text-tertiary: #78716c;
    --text-gold-light: #f7e5b2;
    --text-gold-core: #c6a25c;

    /* Status Accents */
    --color-emerald: #10b981;
    --color-emerald-glow: rgba(16, 185, 129, 0.4);
    --color-crimson: #ef4444;

    /* Fluid Spacing Scale */
    --space-1: clamp(3px, 0.5vw, 4px);
    --space-2: clamp(6px, 1vw, 8px);
    --space-3: clamp(10px, 1.5vw, 12px);
    --space-4: clamp(12px, 2vw, 16px);
    --space-5: clamp(16px, 2.5vw, 20px);
    --space-6: clamp(20px, 3vw, 24px);
    --space-8: clamp(24px, 4vw, 32px);
    --space-10: clamp(32px, 5vw, 40px);
    --space-12: clamp(40px, 6vw, 48px);
    --space-16: clamp(52px, 8vw, 64px);
    --space-20: clamp(64px, 10vw, 80px);
    --space-24: clamp(76px, 12vw, 96px);

    /* Section Surfaces — the recessed bands between full-bleed sections */
    --surface-section-sunken: rgba(9, 10, 9, 0.75);
    --surface-section-deep: rgba(9, 10, 9, 0.80);
    --surface-section-framed: rgba(12, 13, 12, 0.85);

    /* Radii */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;
    --radius-2xl: 28px;
    --radius-full: 9999px;

    /* Easing & Physics.
       --ease-studio is the ramp for large sliding surfaces: a firm
       acceleration into the move and a long, settling landing. --ease-out-quint
       is for elements arriving into view — all deceleration, no wind-up. */
    --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-studio: cubic-bezier(0.65, 0, 0.15, 1);
    --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
    --duration-fast: 0.15s;
    --duration-normal: 0.25s;
    --duration-slow: 0.45s;
    --duration-slide: 0.72s;
}
}

/* ── base.css ────────────────────────────────────────────────── */
/* ==========================================================================
   SELF-HOSTED TYPEFACES
   ==========================================================================
   Deliberately outside @layer: @font-face carries no selector and takes no
   part in the cascade, so putting it in a layer would only obscure that.

   These used to arrive from fonts.googleapis.com behind two preconnects.
   They are ours now (SPEC-006) because `font-src 'self'` — and, more to the
   point, `script-src 'self'` and `default-src 'self'` — are not statements we
   can make while a third party is serving bytes into the page that collects a
   client's name, phone number and the schedule of a protective detail.
   assets/fonts/SOURCES.txt records every file's origin URL, byte count and
   sha256, and tests/csp.test.mjs re-checks them.

   One rule per family per subset, not one per weight: all three families are
   variable fonts, and one file carries the whole wght axis. The ranges below
   are exactly the weights the old Google Fonts request declared —
   Cinzel 600-900, Outfit 300-900, JetBrains Mono 400-800 — so nothing renders
   at a weight the site did not already use.

   `font-display: swap` throughout: text in a fallback face beats no text at
   all on a page whose whole job is to get a dispatch number in front of
   someone. The unicode-range on each rule is Google's own, and it is what
   keeps the non-Latin subsets free — a browser fetches one only when it is
   about to paint a character from it.

   Paths are relative to css/site.css and css/invoice.css, which is where this
   file ends up after build.mjs concatenates it.
   ========================================================================== */

/* ── Cinzel — display serif, headings and the wordmark ───────────────────── */
@font-face {
    font-family: 'Cinzel';
    font-style: normal;
    font-weight: 600 900;
    font-display: swap;
    src: url(../assets/fonts/cinzel-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Cinzel';
    font-style: normal;
    font-weight: 600 900;
    font-display: swap;
    src: url(../assets/fonts/cinzel-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── Outfit — body and UI ────────────────────────────────────────────────── */
@font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 300 900;
    font-display: swap;
    src: url(../assets/fonts/outfit-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 300 900;
    font-display: swap;
    src: url(../assets/fonts/outfit-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── JetBrains Mono — reference codes, readouts, tabular figures ─────────── */
@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url(../assets/fonts/jetbrains-mono-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url(../assets/fonts/jetbrains-mono-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url(../assets/fonts/jetbrains-mono-greek.woff2) format('woff2');
    unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url(../assets/fonts/jetbrains-mono-cyrillic.woff2) format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url(../assets/fonts/jetbrains-mono-cyrillic-ext.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url(../assets/fonts/jetbrains-mono-vietnamese.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@layer base {
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--color-void);
    color: var(--text-primary);
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: clamp(15px, 1.1vw, 16px);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    position: relative;
}

/* Background Particle Mesh Canvas */
#tactical-bg-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    pointer-events: none;
}

/* Cursor Interactive Spotlight Glow */
.cursor-spotlight {
    position: fixed;
    width: clamp(400px, 45vw, 700px);
    height: clamp(400px, 45vw, 700px);
    border-radius: var(--radius-full);
    background: radial-gradient(circle, var(--gold-glow-soft) 0%, transparent 65%);
    pointer-events: none;
    transform: translate(-50%, -50%);
    z-index: 0;
    transition: opacity var(--duration-normal) ease;
}

/* Global Container */
.container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 clamp(16px, 4vw, 32px);
    position: relative;
    z-index: 1;
}

/* Keyboard users land here first; it stays off-screen until focused. */
.skip-link {
    position: absolute;
    top: -100%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3000;
    padding: 12px 22px;
    background: var(--gradient-gold-brushed);
    color: #050504;
    font-weight: 800;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    text-decoration: none;
}

.skip-link:focus-visible {
    top: 0;
}

/* One visible focus treatment for every interactive surface on the page. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--logo-gold-specular);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    /* Delay must be zeroed alongside duration: a zeroed duration still
       honors its delay, so a staggered reveal (the bookshelf payload
       cascade) would otherwise replay as a sequence of timed pops. */
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0s !important;
    }
}
}

/* ── layout.css ──────────────────────────────────────────────── */
@layer layout {
/* Section Commons */
.section-padding {
    padding: var(--space-16) 0;
    position: relative;
}

.section-tag {
    display: inline-block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    font-weight: 700;
    color: var(--logo-gold-bevel);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: var(--space-2);
}

.section-title {
    font-family: 'Cinzel', serif;
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 800;
    margin-bottom: var(--space-3);
    letter-spacing: -0.5px;
}

.section-desc {
    font-size: clamp(14px, 1.5vw, 17px);
    color: var(--text-secondary);
    max-width: 720px;
    margin: 0 auto;
}

.section-head {
    text-align: center;
}

/* Recessed bands. These were four near-identical inline background values;
   two of them differed by one step per channel for no reason anyone recorded. */
.section-padding--sunken {
    background: var(--surface-section-sunken);
}

.section-padding--deep {
    background: var(--surface-section-deep);
}

.section-padding--framed {
    background: var(--surface-section-framed);
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
}
}

/* ── components/icons.css ────────────────────────────────────── */
@layer components {
/* Interface marks. Previouslyevery one of these carried the same six
   declarations as an inline style attribute at each use site. */
.ui-icon {
    width: 14px;
    height: 14px;
    display: inline-block;
    flex-shrink: 0;
    vertical-align: middle;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ui-icon--lg {
    width: 16px;
    height: 16px;
}

.ui-icon--filled {
    fill: currentColor;
    stroke-width: 1;
}

.tactical-svg--quiz {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

.tactical-svg--result {
    width: 48px;
    height: 48px;
    margin: 0 auto 12px;
}

.svg-defs {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}
}

/* ── components/buttons.css ──────────────────────────────────── */
@layer components {
/* Common Gold Buttons */
.btn-gold {
    background: var(--gradient-gold-brushed);
    color: #050504;
    font-weight: 900;
    font-size: clamp(14px, 1.2vw, 16px);
    padding: clamp(14px, 2vw, 18px) clamp(28px, 3.5vw, 42px);
    border-radius: var(--radius-md);
    text-decoration: none;
    box-shadow: 0 10px 30px rgba(186, 152, 87, 0.4);
    transition: all var(--duration-normal) var(--ease-spring);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    text-align: center;
}

.btn-gold::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
    transition: left 0.6s ease;
}

.btn-gold:hover::before {
    left: 100%;
}

.btn-gold:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 15px 45px rgba(186, 152, 87, 0.6);
}

.btn-secondary-glass {
    background: var(--color-surface-glass);
    border: 1px solid var(--border-subtle);
    color: var(--text-primary);
    font-weight: 700;
    font-size: clamp(14px, 1.2vw, 16px);
    padding: clamp(14px, 2vw, 18px) clamp(24px, 3vw, 38px);
    border-radius: var(--radius-md);
    text-decoration: none;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    transition: all var(--duration-normal) var(--ease-spring);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    text-align: center;
}

.btn-secondary-glass:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--border-gold-subtle);
    color: var(--logo-gold-highlight);
    transform: translateY(-3px);
}

.btn-dispatch {
    background: var(--gradient-gold-brushed);
    color: #050504;
    padding: 8px 18px;
    border-radius: var(--radius-full);
    font-size: 12.5px;
    font-weight: 800;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 0 15px rgba(186, 152, 87, 0.3);
    transition: all var(--duration-normal) var(--ease-spring);
    white-space: nowrap;
}

.btn-dispatch:hover {
    transform: translateY(-1px) scale(1.03);
    box-shadow: 0 0 25px rgba(186, 152, 87, 0.6);
}

/* Outlined gold companion to .btn-gold. Used where two actions sit side by
   side and only one may carry the solid brushed plate: the outline keeps the
   same footprint and weight, so the pair reads as one system rather than a
   button next to a text link (which is exactly how an unstyled <a> rendered:
   default blue, underlined, sized by the paragraph around it). */
.btn-outline {
    background: rgba(186, 152, 87, 0.06);
    color: var(--logo-gold-highlight);
    border: 1.5px solid var(--logo-gold-bevel);
    font-weight: 800;
    font-size: clamp(14px, 1.2vw, 16px);
    letter-spacing: 0.02em;
    padding: clamp(14px, 2vw, 18px) clamp(28px, 3.5vw, 42px);
    border-radius: var(--radius-md);
    text-decoration: none;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04), 0 8px 24px rgba(0, 0, 0, 0.45);
    transition: all var(--duration-normal) var(--ease-spring);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    position: relative;
    /* The hover fill is a ::before layer sent to z-index -1. Isolating the
       button keeps that -1 inside its own stacking context, so the fill sits
       behind the label text (a bare text node) and above the page. */
    isolation: isolate;
    overflow: hidden;
    text-align: center;
}

.btn-outline::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--gradient-gold-brushed);
    opacity: 0;
    transition: opacity var(--duration-normal) ease;
}

.btn-outline:hover {
    color: #050504;
    border-color: var(--logo-gold-specular);
    transform: translateY(-3px);
    box-shadow: 0 12px 34px rgba(186, 152, 87, 0.45);
}

.btn-outline:hover::before {
    opacity: 1;
}

/* Size modifiers shared by every button family. */
.btn-sm {
    font-size: 13px;
    padding: 11px 22px;
}

.btn-block {
    width: 100%;
    justify-content: center;
}

@media (max-width: 850px) {
    .btn-dispatch { display: none; }
    .btn-gold, .btn-secondary-glass, .btn-outline { width: 100%; }
}

.btn-gold--block {
    width: 100%;
    justify-content: center;
}

.btn-gold--lg {
    font-size: 17px;
}
}

/* ── components/nav.css ──────────────────────────────────────── */
@layer components {
.nav-island-wrapper {
    position: sticky;
    top: 14px;
    z-index: 2000;
    width: 100%;
    padding: 0 clamp(12px, 3vw, 24px);
    pointer-events: none;
    transition: all var(--duration-normal) var(--ease-spring);
}

.hud-nav-island {
    pointer-events: auto;
    max-width: 1240px;
    margin: 0 auto;
    background: rgba(9, 10, 9, 0.9);
    border: 1px solid rgba(186, 152, 87, 0.38);
    border-radius: var(--radius-full);
    -webkit-backdrop-filter: blur(30px);
    backdrop-filter: blur(30px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.85), 0 0 35px rgba(186, 152, 87, 0.16);
    padding: 7px 14px 7px 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    transition: all var(--duration-normal) var(--ease-spring);
}

.hud-nav-island:hover {
    border-color: rgba(186, 152, 87, 0.65);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.95), 0 0 45px rgba(186, 152, 87, 0.28);
}

.brand-link {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    padding-right: 6px;
}

.brand-img {
    height: 40px;
    width: auto;
    border-radius: var(--radius-sm);
    box-shadow: 0 0 15px rgba(186, 152, 87, 0.35);
    border: 1px solid rgba(186, 152, 87, 0.4);
    transition: transform var(--duration-normal) var(--ease-spring);
}

.brand-link:hover .brand-img {
    transform: scale(1.08) rotate(-2deg);
}

.brand-title {
    font-family: 'Cinzel', serif;
    font-size: 17px;
    font-weight: 900;
    letter-spacing: 2px;
    color: var(--text-pure);
    line-height: 1;
}

.brand-subtitle {
    font-size: 8px;
    font-weight: 800;
    color: var(--logo-gold-bevel);
    letter-spacing: 2.5px;
    text-transform: uppercase;
}

.segmented-nav-track {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-full);
    padding: 3px;
    gap: 2px;
}

.nav-pill-item {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: var(--radius-full);
    transition: all var(--duration-fast) ease;
    white-space: nowrap;
}

.nav-pill-item:hover {
    color: #ffffff;
    background: rgba(186, 152, 87, 0.15);
    box-shadow: 0 0 12px rgba(186, 152, 87, 0.2);
}

.nav-actions-cluster {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mobile-toggle-btn {
    display: none;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-subtle);
    color: var(--logo-gold-specular);
    padding: 6px 10px;
    border-radius: var(--radius-full);
    font-size: 18px;
    cursor: pointer;
    /* The sole path into navigation on touch — meet the 44px target. */
    min-width: 44px;
    min-height: 44px;
}

/* 1080, not 850: the seven nowrap pills plus brand plus the dispatch pill
   have a min-content width around 1000px, and flex items cannot shrink
   below nowrap text — between 851px and ~1000px the island overflowed its
   own rounded border. The hamburger takes over while everything still fits. */
@media (max-width: 1080px) {
    .segmented-nav-track { display: none; }
    .mobile-toggle-btn { display: block; }
}
}

/* ── components/drawer.css ───────────────────────────────────── */
@layer components {
.mobile-drawer {
    display: none;
    position: fixed;
    top: 0;
    right: -100%;
    width: 80%;
    max-width: 320px;
    /* dvh where supported: on iOS 100vh extends under the browser bar and
       hides the drawer's call button. overflow-y is the landscape-phone
       case — a fixed panel does not scroll with the page, so without its
       own scrolling the lower links are simply unreachable. */
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    background: rgba(5, 5, 4, 0.98);
    border-left: 1px solid var(--border-gold-subtle);
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
    z-index: 2500;
    padding: var(--space-8) var(--space-6);
    flex-direction: column;
    gap: var(--space-5);
    box-shadow: -15px 0 40px rgba(0, 0, 0, 0.9);
    transition: right var(--duration-normal) var(--ease-spring);
}

.mobile-drawer.open { right: 0; }

.drawer-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.8);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    z-index: 2400;
}

.drawer-overlay.open { display: block; }

.drawer-nav-item {
    color: var(--text-primary);
    text-decoration: none;
    font-size: 16px;
    font-weight: 700;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.drawer-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.drawer-title {
    font-family: 'Cinzel', serif;
    font-size: 18px;
    font-weight: 800;
    color: var(--text-pure);
}

.drawer-close {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 8px;
    /* The sole way out by touch — meet the 44px target. */
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.drawer-close:hover {
    color: var(--logo-gold-specular);
}

.drawer-foot {
    margin-top: auto;
    padding-top: 20px;
}

/* The drawer is display:none until opened; [hidden] keeps it out of the
   accessibility tree too, which the class alone did not do. */
.mobile-drawer:not([hidden]) {
    display: flex;
}
}

/* ── components/forge.css ────────────────────────────────────── */
@layer components {
/* ==========================================================================
   FUSED PROTECTIVE SERVICES — SCROLL-FORGED EMBLEM INTRO ("THE ASSEMBLY")
   Companion to js/logo-forge.js. The WebGL stage mounts as a fixed canvas
   at z-index 0; everything here rides above it on the --assembly clock the
   module publishes on <html> (0 = scattered, 1 = fused).
   ========================================================================== */

/* The nav island precedes the track in flow; collapse its wrapper's
   height so the 100vh stage starts at true viewport top — otherwise the
   first-paint HUD sits one nav-height below the fold. The island itself
   still renders (overflow) and still sticks. */
.nav-island-wrapper {
    height: 0;
    overflow: visible;
}

/* The scroll track. Its height IS the length of the assembly — the module
   measures this element, so the collapses below shorten the experience
   without touching any JS. */
.forge-track {
    position: relative;
    z-index: 1;
    height: 350vh;
    pointer-events: none;
}

@media (max-width: 850px) {
    .forge-track {
        height: 300vh;
    }
}

/* No WebGL (or the context was lost): a still emblem needs no runway. */
html[data-forge-fallback] .forge-track {
    height: 120vh;
}

/* Reduced motion: the module holds the assembled emblem; leave one calm
   viewport of it rather than three of dead scroll. This sits after the
   mobile track rule on purpose — the collapse must always win. */
@media (prefers-reduced-motion: reduce) {
    .forge-track {
        height: 120vh;
    }
}

.forge-stage {
    position: sticky;
    top: 0;
    /* svh where supported: at scrollY 0 iOS Safari's toolbar is expanded,
       so a 100vh stage puts its bottom-anchored HUD and scroll cue below
       the visual viewport — exactly when they are the only instruction
       on screen. */
    height: 100vh;
    height: 100svh;
    overflow: hidden;
}

/* ── Copy beats, keyed to the camera's own clock ──────────────────────────
   Each beat owns a window of --assembly and fades on pure CSS math, so the
   words and the fragments can never drift out of sync — and with no JS at
   all (or before it runs) the first beat simply stands. */

.forge-beat {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, calc(-50% + var(--beat-dy, 0px)));
    width: min(92vw, 940px);
    text-align: center;
}

.forge-line {
    font-family: 'Cinzel', serif;
    font-size: clamp(30px, 5.2vw, 58px);
    font-weight: 900;
    line-height: 1.12;
    letter-spacing: -0.5px;
    color: var(--text-pure);
    text-shadow: 0 2px 24px rgba(5, 5, 4, 0.85), 0 0 60px rgba(5, 5, 4, 0.6);
}

/* Gradient-clipped words ignore text-shadow; a dark drop-shadow keeps
   the key word separated from the gold vortex converging behind it. */
.forge-line .gold-gradient-text {
    filter: drop-shadow(0 2px 6px rgba(5, 5, 4, 0.95)) drop-shadow(0 0 26px rgba(5, 5, 4, 0.8));
}

.forge-beat-1 {
    --beat-dy: calc(var(--assembly, 0) * -80px);
    opacity: clamp(0, (0.30 - var(--assembly, 0)) * 6, 1);
}

.forge-beat-2 {
    --beat-dy: calc((0.55 - var(--assembly, 0)) * 60px);
    opacity: clamp(0, min((var(--assembly, 0) - 0.36) * 7, (0.74 - var(--assembly, 0)) * 7), 1);
}

/* The settled shield is the finale statement; the motto is its caption,
   parked low so it never covers the emblem. */
.forge-beat-3 {
    top: auto;
    bottom: clamp(72px, 12vh, 130px);
    transform: translate(-50%, calc(var(--beat-dy, 0px)));
    --beat-dy: calc((1 - var(--assembly, 0)) * 30px);
    opacity: clamp(0, (var(--assembly, 0) - 0.86) * 8, 1);
}

.forge-motto {
    font-family: 'JetBrains Mono', monospace;
    font-size: clamp(11px, 1.3vw, 14px);
    font-weight: 700;
    color: var(--logo-gold-bevel);
    letter-spacing: 4px;
    text-shadow: 0 2px 16px rgba(5, 5, 4, 0.9);
}

.forge-continue {
    display: block;
    margin-top: var(--space-4);
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 2px;
    color: var(--text-secondary);
}

.forge-continue-arrow {
    display: inline-block;
    animation: forgeNudge 2s infinite ease-in-out;
}

@keyframes forgeNudge {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(5px); }
}

@media (prefers-reduced-motion: reduce) {
    .forge-continue-arrow {
        animation: none;
    }
}

/* ── HUD corners ──────────────────────────────────────────────────────────
   The readout mirrors the terminal-log motif used across the site; its
   underline is the assembly bar, driven by the same clock. The dispatch
   bar owns the bottom-right corner, so the cue sits bottom-center. */

.forge-hud-left {
    position: absolute;
    left: clamp(16px, 4vw, 40px);
    bottom: clamp(18px, 3vh, 30px);
    font-size: clamp(10px, 1.1vw, 12px);
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--logo-gold-highlight);
    padding: 9px 14px 11px;
    border-radius: var(--radius-md);
    background: rgba(5, 5, 4, 0.6);
    border: 1px solid var(--border-subtle);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.forge-hud-left::after {
    content: '';
    display: block;
    height: 2px;
    width: clamp(120px, 16vw, 220px);
    margin-top: 7px;
    background: var(--gradient-gold-brushed);
    transform-origin: left;
    /* The bar sits under a figure that makes a claim, so it tracks the
       camera's real progress rather than the scroll position. */
    transform: scaleX(var(--assembly-settled, var(--assembly, 0)));
}

.forge-hud-left.is-set {
    color: var(--color-emerald);
}

.forge-hud-left.is-set::after {
    background: var(--color-emerald);
    box-shadow: 0 0 12px var(--color-emerald-glow);
}

.forge-cue {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: clamp(18px, 3vh, 30px);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
    color: var(--text-primary);
    white-space: nowrap;
    padding: 9px 16px;
    border-radius: var(--radius-full);
    background: rgba(5, 5, 4, 0.6);
    border: 1px solid var(--border-subtle);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    opacity: clamp(0, (0.05 - var(--assembly, 0)) * 25, 1);
}

.forge-cue-arrow {
    display: inline-block;
    animation: forgeNudge 2s infinite ease-in-out;
}

/* A progress readout over a static fallback image would be a lie. */
html[data-forge-fallback] .forge-hud-left,
html[data-forge-fallback] .forge-cue {
    display: none;
}

/* Phones: the bottom strip cannot hold three things. The HUD chips yield
   (their integrity figure is flavor, restated by the finale copy), and the
   cue rises clear of the floating dispatch bar, which owns the corner at
   every width — "bottom-center is free" only ever held on desktop. */
@media (max-width: 640px) {
    .forge-hud-left { display: none; }
    .forge-cue { bottom: 84px; }
}
}

/* ── components/hero.css ─────────────────────────────────────── */
@layer components {
.hero {
    padding: var(--space-16) 0 var(--space-12);
    text-align: center;
    position: relative;
}

.emblem-wrapper {
    position: relative;
    display: inline-block;
    perspective: 1000px;
    margin-bottom: var(--space-5);
}

.emblem-card {
    width: clamp(140px, 22vw, 185px);
    height: auto;
    border-radius: var(--radius-xl);
    box-shadow: 
        0 25px 50px rgba(0, 0, 0, 0.95),
        0 0 60px rgba(186, 152, 87, 0.4);
    border: 2px solid rgba(186, 152, 87, 0.6);
    transition: transform 0.1s ease-out, box-shadow var(--duration-normal) ease;
    cursor: pointer;
    display: block;
}

.emblem-wrapper:hover .emblem-card {
    box-shadow: 
        0 35px 70px rgba(0, 0, 0, 0.98),
        0 0 85px rgba(186, 152, 87, 0.7);
}

.hero-heading {
    font-family: 'Cinzel', serif;
    font-size: clamp(34px, 5.5vw, 64px);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -0.5px;
    margin-bottom: var(--space-5);
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

.hero-lead {
    font-size: clamp(15px, 1.8vw, 20px);
    color: var(--text-secondary);
    max-width: 840px;
    margin: 0 auto var(--space-8);
    line-height: 1.65;
    font-weight: 400;
}

.hero-actions {
    display: flex;
    justify-content: center;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-bottom: var(--space-12);
}

@media (max-width: 850px) {
    .hero-actions { flex-direction: column; align-items: stretch; }
}
}

/* ── components/metrics.css ──────────────────────────────────── */
@layer components {
.metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-4);
    background: var(--color-surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    padding: var(--space-6) var(--space-8);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.85);
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
}

.metric-item {
    text-align: center;
    padding: var(--space-2);
}

.metric-val {
    font-family: 'JetBrains Mono', monospace;
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 800;
    color: var(--logo-gold-specular);
    margin-bottom: 4px;
}

.metric-label {
    font-size: clamp(11px, 1.1vw, 13px);
    color: var(--text-secondary);
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.5px;
}

}

/* ── components/bookshelf.css ────────────────────────────────── */
@layer components {
.bookshelf-container {
    display: flex;
    width: 100%;
    height: 520px;
    gap: 12px;
    margin-top: var(--space-10);
    position: relative;
}

.bookshelf-spine {
    position: relative;
    flex: 1;
    height: 100%;
    background: linear-gradient(180deg, #131413 0%, #0a0b0a 100%);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    overflow: hidden;
    cursor: pointer;
    /* `flex: 1` and `flex: 4.5` share a 0% basis, so flex-grow is the only
       property actually moving — naming it keeps the ramp on exactly that. */
    transition: flex-grow var(--duration-slide) var(--ease-studio),
                border-color var(--duration-slow) ease,
                box-shadow var(--duration-slide) var(--ease-studio),
                background var(--duration-slow) ease;
    display: flex;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.7);
}

.bookshelf-spine:hover, .bookshelf-spine.active {
    flex: 4.5;
    border-color: var(--border-gold-bright);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.9), 0 0 35px var(--gold-glow-intense);
    background: linear-gradient(180deg, #1a1c1a 0%, #0d0f0d 100%);
}

.spine-rail {
    width: 80px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 24px 0;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
    background: rgba(0, 0, 0, 0.3);
    position: relative;
    z-index: 2;
}

.spine-code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 800;
    color: var(--logo-gold-bevel);
    letter-spacing: 1px;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

.spine-icon-housing {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    background: rgba(186, 152, 87, 0.12);
    border: 1px solid rgba(186, 152, 87, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(0,0,0,0.5);
    flex-shrink: 0;
}

.spine-vertical-title {
    font-family: 'Cinzel', serif;
    font-size: 15px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: 2px;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    white-space: nowrap;
    margin-top: auto;
    margin-bottom: auto;
}

.spine-expanded-payload {
    flex-grow: 1;
    pointer-events: none;
    padding: 40px 36px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow-y: auto;
    min-width: 320px;
    /* A closed payload must be gone from the tab order and the
       accessibility tree, not merely transparent — otherwise every closed
       spine leaves an invisible, still-live Deploy button on the Tab path.
       Visibility (unlike display) waits out its delay, so the flip to
       hidden lands after the children finish fading; the open state below
       zeroes the delay so content is available the instant a spine opens. */
    visibility: hidden;
    transition: visibility 0s linear 0.24s;
}

.bookshelf-spine:hover .spine-expanded-payload,
.bookshelf-spine.active .spine-expanded-payload {
    pointer-events: auto;
    visibility: visible;
    transition-delay: 0s;
}

/* The payload cascade. The panel itself no longer fades — each element
   inside rides its own small rise into focus, timed so the sequence starts
   once the shelf slide is under way and the deploy button lands just after
   the panel does. Closing is the reverse priority: everything drops away at
   once, fast and undelayed, so the departing spine never trails stale copy. */
.payload-badge,
.payload-heading,
.payload-desc,
.payload-checklist li,
.btn-select-division {
    opacity: 0;
    transform: translateY(14px);
    filter: blur(4px);
    transition: opacity 0.18s ease, transform 0.18s ease, filter 0.18s ease;
}

.bookshelf-spine:is(:hover, .active) :is(
    .payload-badge, .payload-heading, .payload-desc,
    .payload-checklist li, .btn-select-division) {
    opacity: 1;
    transform: none;
    filter: none;
    transition: opacity 0.5s var(--ease-out-quint),
                transform 0.5s var(--ease-out-quint),
                filter 0.5s var(--ease-out-quint);
}

.bookshelf-spine:is(:hover, .active) .payload-badge { transition-delay: 0.16s; }
.bookshelf-spine:is(:hover, .active) .payload-heading { transition-delay: 0.22s; }
.bookshelf-spine:is(:hover, .active) .payload-desc { transition-delay: 0.28s; }
.bookshelf-spine:is(:hover, .active) .payload-checklist li:nth-child(1) { transition-delay: 0.34s; }
.bookshelf-spine:is(:hover, .active) .payload-checklist li:nth-child(2) { transition-delay: 0.40s; }
.bookshelf-spine:is(:hover, .active) .payload-checklist li:nth-child(3) { transition-delay: 0.46s; }
.bookshelf-spine:is(:hover, .active) .payload-checklist li:nth-child(4) { transition-delay: 0.52s; }
.bookshelf-spine:is(:hover, .active) .payload-checklist li:nth-child(n + 5) { transition-delay: 0.58s; }
.bookshelf-spine:is(:hover, .active) .btn-select-division { transition-delay: 0.62s; }

.payload-badge {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 800;
    color: var(--logo-gold-specular);
    background: rgba(186, 152, 87, 0.2);
    padding: 4px 12px;
    border-radius: var(--radius-full);
    display: inline-block;
    margin-bottom: 12px;
    letter-spacing: 1px;
}

.payload-heading {
    font-family: 'Cinzel', serif;
    font-size: 26px;
    font-weight: 900;
    color: #ffffff;
    margin-bottom: 12px;
    line-height: 1.15;
    max-width: 18ch;
}

.payload-desc {
    font-size: 14.5px;
    color: var(--text-secondary);
    line-height: 1.65;
    margin-bottom: 20px;
    /* A capped measure is better typography, and it also means the text
       stops re-wrapping partway through the slide instead of at its end. */
    max-width: 56ch;
}

.payload-checklist {
    list-style: none;
    margin-bottom: 24px;
}

.payload-checklist li {
    font-size: 13px;
    color: #cbd5e1;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.payload-checklist li::before {
    content: '✦';
    color: var(--logo-gold-bevel);
    font-size: 11px;
}

.btn-select-division {
    background: var(--gradient-gold-brushed);
    color: #050504;
    font-weight: 800;
    font-size: 13px;
    padding: 10px 20px;
    border-radius: var(--radius-md);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 0 15px rgba(186, 152, 87, 0.3);
    border: none;
    cursor: pointer;
    width: fit-content;
}

.tactical-svg {
    width: 26px;
    height: 26px;
    stroke: var(--logo-gold-highlight);
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 6px rgba(186, 152, 87, 0.5));
}

/* The rail is a <button> so the accordion is operable by keyboard. These
   undo the user-agent button styling without disturbing the rail's own
   border-right, which the base rule above owns. This sits ahead of the
   breakpoint below on purpose — at ≤992px the rail swaps its right border
   for a bottom one, and a reset placed after would zero that out. */
.spine-rail {
    -webkit-appearance: none;
    appearance: none;
    border-top: 0;
    border-left: 0;
    border-bottom: 0;
    font: inherit;
    color: inherit;
    text-align: inherit;
    cursor: pointer;
}

@media (max-width: 992px) {
.bookshelf-container {
        flex-direction: column;
        height: auto;
    }
    .bookshelf-spine {
        flex: none;
        width: 100%;
        min-height: 80px;
        flex-direction: column;
    }
    .bookshelf-spine.active, .bookshelf-spine:hover {
        flex: none;
    }
    .spine-rail {
        width: 100%;
        height: 80px;
        flex-direction: row;
        padding: 0 20px;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }
    .spine-code, .spine-vertical-title {
        writing-mode: horizontal-tb;
        transform: none;
    }
    .spine-vertical-title {
        margin: 0 auto 0 16px;
        font-size: 16px;
    }
    /* On the stacked layout the payload opens by height, not display — a
       display:none toggle snaps and also suppresses the cascade above,
       because children unhidden alongside a display change transition
       nothing. 560px comfortably clears the tallest payload; content past
       it still scrolls via the overflow-y the base rule sets. Visibility
       rides along exactly as in the base rule — hidden only after the
       collapse lands, visible immediately on open via the .active rule's
       zeroed delay — so closed payloads stay out of the tab order here too. */
    .spine-expanded-payload {
        max-height: 0;
        min-width: 0;
        padding: 0 20px;
        transition: max-height var(--duration-slide) var(--ease-studio),
                    padding var(--duration-slide) var(--ease-studio),
                    visibility 0s linear var(--duration-slide);
    }
    .bookshelf-spine.active .spine-expanded-payload {
        max-height: 560px;
        padding: 24px 20px;
    }
}

.payload-badge--urgent {
    color: var(--color-crimson);
    background: rgba(239, 68, 68, 0.2);
}
}

/* ── components/protocol.css ─────────────────────────────────── */
@layer components {
.protocol-hub {
    background: linear-gradient(180deg, rgba(18, 19, 18, 0.95) 0%, rgba(9, 10, 9, 0.98) 100%);
    border: 1px solid var(--border-gold-subtle);
    border-radius: var(--radius-2xl);
    padding: clamp(24px, 4vw, 48px);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.85);
    margin-top: var(--space-10);
    position: relative;
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
}

.protocol-stepper-nav {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-3);
    margin-bottom: var(--space-10);
    position: relative;
}

.protocol-stepper-btn {
    background: var(--color-surface-glass);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: clamp(12px, 2vw, 18px) clamp(10px, 1.5vw, 16px);
    cursor: pointer;
    text-align: left;
    transition: all var(--duration-normal) var(--ease-spring);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.protocol-stepper-btn::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 10%;
    width: 80%;
    height: 2px;
    background: var(--logo-gold-bevel);
    opacity: 0;
    transition: opacity var(--duration-normal) ease;
}

.protocol-stepper-btn:hover {
    border-color: var(--border-gold-subtle);
    background: rgba(255, 255, 255, 0.05);
}

.protocol-stepper-btn.active {
    background: rgba(186, 152, 87, 0.16);
    border-color: var(--border-gold-bright);
    box-shadow: 0 0 20px rgba(186, 152, 87, 0.25);
    transform: translateY(-2px);
}

.protocol-stepper-btn.active::after { opacity: 1; }

.step-num {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 800;
    color: var(--logo-gold-bevel);
    letter-spacing: 1px;
}

.step-name {
    font-family: 'Cinzel', serif;
    font-size: clamp(13px, 1.2vw, 15px);
    font-weight: 800;
    color: #ffffff;
}

.protocol-stage-content {
    display: none;
    grid-template-columns: 1.1fr 1fr;
    gap: clamp(24px, 4vw, 48px);
    align-items: center;
}

.protocol-stage-content.active {
    display: grid;
    animation: fadeInStage 0.4s var(--ease-spring);
}

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

.stage-hero-heading {
    font-family: 'Cinzel', serif;
    font-size: clamp(24px, 3vw, 34px);
    font-weight: 900;
    color: #ffffff;
    line-height: 1.15;
    margin-bottom: var(--space-4);
}

.stage-paragraph {
    font-size: clamp(14px, 1.2vw, 15.5px);
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: var(--space-6);
}

.stage-expectations {
    background: var(--color-surface-base);
    border: 1px solid var(--border-gold-subtle);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
}

.stage-expectations h4 {
    color: var(--logo-gold-specular);
    font-size: 18px;
    margin-bottom: var(--space-5);
}

.stage-expectations ul {
    display: grid;
    gap: var(--space-4);
    padding-left: var(--space-5);
    color: var(--text-primary);
    line-height: 1.65;
}

.stage-expectations li::marker {
    color: var(--logo-gold-bevel);
}

@media (max-width: 992px) {
    .protocol-stepper-nav { grid-template-columns: 1fr 1fr; }
    .protocol-stage-content { grid-template-columns: 1fr; }
}

}

/* ── components/assessment.css ───────────────────────────────── */
@layer components {
.assessment-wrapper {
    background: linear-gradient(180deg, rgba(18, 19, 18, 0.95) 0%, rgba(9, 10, 9, 0.98) 100%);
    border: 1px solid var(--border-gold-subtle);
    border-radius: var(--radius-2xl);
    padding: clamp(20px, 4vw, 40px);
    box-shadow: 0 25px 60px rgba(0,0,0,0.85);
    max-width: 960px;
    margin: var(--space-8) auto 0;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
}

.threat-quiz-step { display: none; }
.threat-quiz-step.active { display: block; }

.quiz-q-title {
    font-family: 'Cinzel', serif;
    font-size: clamp(18px, 2.5vw, 24px);
    color: #fff;
    margin-bottom: var(--space-4);
}

.quiz-options-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}

.quiz-option-btn {
    background: var(--color-surface-glass);
    border: 1px solid var(--border-subtle);
    color: var(--text-primary);
    padding: clamp(12px, 2vw, 16px) clamp(14px, 2.5vw, 20px);
    border-radius: var(--radius-md);
    font-size: clamp(13px, 1.1vw, 14px);
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    transition: all var(--duration-fast) ease;
    display: flex;
    align-items: center;
    gap: 12px;
}

.quiz-option-btn:hover, .quiz-option-btn.selected {
    background: rgba(186, 152, 87, 0.18);
    border-color: var(--logo-gold-bevel);
    color: var(--logo-gold-specular);
    box-shadow: 0 0 15px rgba(186, 152, 87, 0.25);
}


.quiz-result {
    text-align: center;
}

.quiz-result-heading {
    font-family: 'Cinzel', serif;
    font-size: clamp(20px, 3vw, 26px);
    color: var(--text-pure);
    margin-bottom: 8px;
}

.quiz-result-rec {
    font-size: clamp(14px, 1.5vw, 17px);
    color: var(--logo-gold-specular);
    font-weight: 700;
    margin-bottom: 16px;
}

.quiz-result-body {
    font-size: clamp(13px, 1.1vw, 14.5px);
    color: var(--text-secondary);
    max-width: 600px;
    margin: 0 auto 24px;
    line-height: 1.6;
}

/* Steps are swapped with [hidden] rather than a class, so a step that is
   not on screen is also not reachable by tab. */
.threat-quiz-step[hidden] {
    display: none;
}
}

/* ── components/estimator.css ────────────────────────────────── */
@layer components {
.estimator-card {
    background: linear-gradient(180deg, rgba(18, 19, 18, 0.95) 0%, rgba(9, 10, 9, 0.98) 100%);
    border: 1px solid var(--border-gold-subtle);
    border-radius: var(--radius-2xl);
    padding: clamp(20px, 4vw, 44px);
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.85), 0 0 50px var(--gold-glow-soft);
    max-width: 980px;
    margin: var(--space-8) auto 0;
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
}

.estimator-grid {
    display: grid;
    /* min(290px, 100%): a bare 290px floor overflows the card interior on
       narrow phones (~40px of the price box clipped at 320px viewports). */
    grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
    gap: var(--space-8);
    align-items: center;
}

.estimator-control-group { margin-bottom: var(--space-5); }

.control-header {
    display: flex;
    justify-content: space-between;
    font-size: clamp(11px, 1vw, 13px);
    font-weight: 700;
    color: var(--logo-gold-specular);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: var(--space-2);
}

.tier-toggles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2);
    margin-bottom: var(--space-5);
}

.tier-button {
    background: var(--color-surface-glass);
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    padding: clamp(10px, 1.5vw, 14px) 6px;
    border-radius: var(--radius-md);
    font-size: clamp(10.5px, 1vw, 12px);
    font-weight: 700;
    cursor: pointer;
    text-align: center;
    transition: all var(--duration-normal) var(--ease-spring);
}

.tier-button.active {
    background: rgba(186, 152, 87, 0.2);
    border-color: var(--logo-gold-bevel);
    color: var(--logo-gold-specular);
    box-shadow: 0 0 20px rgba(186, 152, 87, 0.3);
    transform: translateY(-2px);
}

.range-slider {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    height: 10px;
    border-radius: var(--radius-sm);
    background: #1e293b;
    outline: none;
}

/* outline:none above sits in the components layer, so it beats the base
   layer's :focus-visible treatment for every keyboard user — the slider
   needs its own, or Tab lands on it invisibly. */
.range-slider:focus-visible {
    outline: 2px solid var(--logo-gold-glint);
    outline-offset: 3px;
}

.range-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 26px;
    height: 26px;
    border-radius: var(--radius-full);
    background: var(--logo-gold-bevel);
    cursor: pointer;
    box-shadow: 0 0 14px var(--logo-gold-bevel);
    transition: transform var(--duration-fast) ease;
}

.range-slider::-webkit-slider-thumb:hover { transform: scale(1.2); }

/* Firefox styles its thumb through its own pseudo-element and ignores the
   -webkit one entirely — without this pair the gold UI ships a stock gray
   slider there. */
.range-slider::-moz-range-thumb {
    width: 26px;
    height: 26px;
    border: none;
    border-radius: var(--radius-full);
    background: var(--logo-gold-bevel);
    cursor: pointer;
    box-shadow: 0 0 14px var(--logo-gold-bevel);
}

.range-slider::-moz-range-track {
    height: 10px;
    border-radius: var(--radius-sm);
    background: #1e293b;
}

.estimate-summary-box {
    background: #04060a;
    border: 1px solid var(--border-gold-subtle);
    border-radius: var(--radius-lg);
    padding: clamp(24px, 3vw, 36px) clamp(16px, 2vw, 24px);
    text-align: center;
    box-shadow: inset 0 0 35px rgba(0, 0, 0, 0.9);
}

.price-output {
    font-family: 'JetBrains Mono', monospace;
    font-size: clamp(36px, 5vw, 54px);
    font-weight: 900;
    color: var(--text-pure);
    margin: 10px 0 4px;
}

.price-breakdown {
    font-size: clamp(12px, 1.1vw, 13px);
    color: var(--text-secondary);
    margin-bottom: var(--space-5);
}

.tier-button {
    font-family: inherit;
    appearance: none;
    -webkit-appearance: none;
}

.tier-sublabel {
    font-size: 10px;
    font-weight: 400;
}

.control-value {
    color: var(--text-pure);
}

.control-header--centred {
    justify-content: center;
}

.estimator-disclaimer {
    font-size: 11px;
    color: #64748b;
    margin-top: 12px;
}
}

/* ── components/standards.css ────────────────────────────────── */
@layer components {
/* The Fused Standard. The markup previously carried `.lifecycle-grid` and
   `.lifecycle-card` — names left behind by an earlier iteration that no
   stylesheet ever defined, so the three principles rendered as an unstyled
   full-width stack. They are cards now, matching the house treatment used by
   the estimator and protocol surfaces. Four cards: 4-up on wide screens,
   2-up on laptops and tablets, stacked on phones. */
.standards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-5);
    margin-top: var(--space-10);
}

@media (max-width: 1200px) {
    .standards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.standard-card {
    background: var(--color-surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    padding: clamp(20px, 3vw, 32px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.7);
    transition: border-color var(--duration-normal) ease, box-shadow var(--duration-normal) ease, transform var(--duration-normal) var(--ease-spring);
}

.standard-card:hover {
    border-color: var(--border-gold-subtle);
    box-shadow: 0 25px 55px rgba(0, 0, 0, 0.85), 0 0 30px var(--gold-glow-soft);
    transform: translateY(-3px);
}

@media (max-width: 640px) {
    .standards-grid {
        grid-template-columns: 1fr;
    }
}

.standard-index {
    font-family: 'Cinzel', serif;
    font-size: 34px;
    font-weight: 900;
    color: rgba(186, 152, 87, 0.35);
    margin-bottom: 12px;
}

.standard-title {
    font-family: 'Cinzel', serif;
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 10px;
    color: var(--text-pure);
}

.standard-body {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
}
}

/* ── components/form.css ─────────────────────────────────────── */
@layer components {
.form-shell {
    background: var(--color-surface-card);
    border: 1px solid var(--border-gold-subtle);
    border-radius: var(--radius-2xl);
    padding: clamp(20px, 4vw, 44px);
    max-width: 940px;
    margin: 0 auto;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.85);
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
}

.form-row-2col {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.form-field { display: flex; flex-direction: column; gap: var(--space-1); }
.form-field.full-span { grid-column: 1 / -1; }

.form-field label {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--logo-gold-specular);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.form-field input, .form-field select, .form-field textarea {
    background: #060706;
    border: 1px solid var(--border-subtle);
    color: var(--text-primary);
    padding: clamp(12px, 1.8vw, 16px) clamp(14px, 2vw, 18px);
    border-radius: var(--radius-md);
    font-size: clamp(14px, 1.1vw, 15px);
    outline: none;
    transition: all var(--duration-normal) ease;
}

.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
    border-color: var(--logo-gold-bevel);
    box-shadow: 0 0 0 3px rgba(186, 152, 87, 0.25);
    background: #0b0c0b;
}

.form-field--notes {
    margin-bottom: 24px;
}

.form-assurance {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 14px;
}

/* Honeypot container: removed from the visual flow and the tab order, kept
   in the DOM so an automated filler sees a real input. Not display:none on
   purpose — some bots skip hidden inputs. */
.hp-field {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.form-status {
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    color: var(--color-emerald);
    margin-top: 14px;
    min-height: 1.4em;
}

.form-status:empty {
    margin-top: 0;
    min-height: 0;
}
}

/* ── components/faq.css ──────────────────────────────────────── */
@layer components {
.faq-stack {
    max-width: 940px;
    margin: var(--space-8) auto 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.faq-box {
    background: var(--color-surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: clamp(16px, 2.5vw, 24px) clamp(18px, 3vw, 28px);
    cursor: pointer;
    transition: all var(--duration-normal) ease;
}

.faq-box:hover { border-color: var(--border-gold-subtle); }

.faq-question {
    font-size: clamp(14px, 1.3vw, 17px);
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.faq-answer {
    font-size: clamp(13px, 1.1vw, 15px);
    color: var(--text-secondary);
    line-height: 1.65;
    margin-top: var(--space-3);
    display: none;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: var(--space-3);
}

/* <details> supplies the open/closed behaviour; these remove the platform
   marker and restore the original look. */
.faq-box > summary {
    list-style: none;
    cursor: pointer;
}

.faq-box > summary::-webkit-details-marker {
    display: none;
}

.faq-toggle-icon::before {
    content: '+';
}

.faq-box[open] .faq-toggle-icon::before {
    content: '−';
}

.faq-box[open] .faq-answer {
    display: block;
}
}

/* ── components/careers.css ──────────────────────────────────── */
@layer components {
/* ==========================================================================
   CAREERS & OFFICER RECRUITMENT COMPONENTS
   ========================================================================== */

/* ── Hero ─────────────────────────────────────────────────────────── */
.careers-hero-section {
    padding: clamp(100px, 14vw, 150px) 0 clamp(40px, 6vw, 60px);
    background: radial-gradient(circle at 50% 20%, rgba(186, 152, 87, 0.08) 0%, transparent 70%);
}

.careers-hero-content {
    max-width: 860px;
    margin: 0 auto clamp(36px, 6vw, 56px);
    text-align: center;
}

.careers-hero-title {
    font-family: 'Cinzel', serif;
    font-size: clamp(32px, 5.5vw, 56px);
    font-weight: 900;
    line-height: 1.1;
    margin: var(--space-4) 0;
    letter-spacing: -0.01em;
}

/* The highlighted half of the headline is a single phrase. Left to wrap it
   breaks as "COUNTS" / "HERE" at desktop widths, stranding one word on its
   own line; the browser now breaks before the span instead. */
.careers-hero-title .gold-gradient-text {
    white-space: nowrap;
}

.careers-hero-lead {
    font-size: clamp(16px, 1.25vw, 19px);
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: var(--space-8);
}

.careers-hero-actions {
    display: flex;
    justify-content: center;
    gap: var(--space-4);
    flex-wrap: wrap;
}

/* Entrance. The hero is above the fold, so it cannot wait on a scroll
   observer: each line rises on load, eyebrow first, metrics last. Pure CSS,
   so it runs with or without JavaScript; base.css clamps it to nothing under
   prefers-reduced-motion. */
@keyframes careersHeroRise {
    from {
        opacity: 0;
        transform: translateY(22px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.careers-hero-content > *,
.careers-metric-card {
    animation: careersHeroRise 0.9s var(--ease-out-quint) both;
}

.careers-hero-content > :nth-child(1) { animation-delay: 0.05s; }
.careers-hero-content > :nth-child(2) { animation-delay: 0.15s; }
.careers-hero-content > :nth-child(3) { animation-delay: 0.28s; }
.careers-hero-content > :nth-child(4) { animation-delay: 0.4s; }
.careers-metric-card:nth-child(1) { animation-delay: 0.5s; }
.careers-metric-card:nth-child(2) { animation-delay: 0.58s; }
.careers-metric-card:nth-child(3) { animation-delay: 0.66s; }
.careers-metric-card:nth-child(4) { animation-delay: 0.74s; }

.careers-metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-4);
}

.careers-metric-card {
    background: var(--color-surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-6);
    text-align: center;
    backdrop-filter: blur(10px);
}

.careers-metric-card .metric-val {
    font-family: 'Cinzel', serif;
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 800;
    margin-bottom: var(--space-2);
}

.careers-metric-card .metric-lbl {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* ── Pre-Qualification ─────────────────────────────────────────────── */
.careers-prequal-section {
    padding: clamp(50px, 8vw, 80px) 0;
    background: var(--surface-section-sunken);
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
}

.prequal-box {
    max-width: 820px;
    margin: 0 auto;
    background: var(--color-surface-card);
    border: 1px solid var(--border-gold-subtle);
    border-radius: var(--radius-lg);
    padding: clamp(20px, 4vw, 36px);
}

.prequal-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.prequal-item {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    flex-wrap: wrap;
}

.prequal-num {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 800;
    color: var(--logo-gold-core);
    font-size: 18px;
}

.prequal-body {
    flex: 1;
    min-width: 240px;
}

.prequal-label {
    display: block;
    font-weight: 700;
    color: var(--text-primary);
    font-size: 15px;
}

.prequal-helper {
    display: block;
    font-size: 12px;
    color: var(--text-tertiary);
}

.prequal-switch-group {
    display: flex;
    gap: var(--space-2);
}

.prequal-choice {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    padding: 6px 14px;
    background: var(--color-surface-elevated);
    border: 1px solid var(--border-muted);
    border-radius: var(--radius-sm);
}

.prequal-choice input:checked + span {
    color: var(--logo-gold-highlight);
}

.prequal-actions {
    text-align: center;
}

.prequal-feedback {
    margin-top: var(--space-6);
    padding: var(--space-6);
    border-radius: var(--radius-md);
    background: rgba(16, 185, 129, 0.06);
    border: 1px solid var(--color-emerald-glow);
    text-align: center;
}

.prequal-feedback.rejected {
    background: rgba(239, 68, 68, 0.06);
    border-color: rgba(239, 68, 68, 0.4);
}

.feedback-status-badge {
    display: inline-block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    background: var(--color-emerald);
    color: #000;
    margin-bottom: var(--space-2);
}

.prequal-feedback.rejected .feedback-status-badge {
    background: var(--color-crimson);
    color: #fff;
}

.feedback-title {
    font-size: 18px;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: var(--space-2);
}

.feedback-text {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: var(--space-4);
}

/* ── Benefits Grid ─────────────────────────────────────────────────── */
.careers-benefits-section {
    padding: clamp(60px, 9vw, 100px) 0;
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--space-6);
}

.benefit-card {
    background: var(--color-surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-8) var(--space-6);
    transition: transform var(--duration-normal) var(--ease-studio), border-color var(--duration-normal);
}

.benefit-card:hover {
    transform: translateY(-4px);
    border-color: var(--border-gold-subtle);
}

.benefit-icon-box {
    width: 48px;
    height: 48px;
    margin-bottom: var(--space-4);
    display: flex;
    align-items: center;
}

.benefit-title {
    font-family: 'Cinzel', serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--space-3);
}

.benefit-desc {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* ── Positions Board ───────────────────────────────────────────────── */
.careers-positions-section {
    padding: clamp(60px, 9vw, 100px) 0;
    background: var(--surface-section-deep);
}

.filter-tabs-track {
    display: flex;
    justify-content: center;
    gap: var(--space-2);
    margin-bottom: var(--space-8);
    flex-wrap: wrap;
}

.filter-tab-btn {
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 700;
    padding: 10px 18px;
    background: var(--color-surface-elevated);
    border: 1px solid var(--border-muted);
    border-radius: var(--radius-full);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--duration-fast);
}

.filter-tab-btn:hover, .filter-tab-btn.active {
    background: var(--gradient-gold-brushed);
    color: #050504;
    border-color: transparent;
}

/* Pay scale strip. Reuses the hero metric card so the four license bands
   read like the recruiting figures above them. */
.pay-scale-block {
    max-width: 960px;
    margin: 0 auto var(--space-8);
}

.pay-scale-heading {
    font-family: 'Cinzel', serif;
    font-size: clamp(16px, 2vw, 20px);
    font-weight: 700;
    color: var(--text-primary);
    text-align: center;
    margin-bottom: var(--space-4);
}

.pay-scale-unit {
    font-family: 'Outfit', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-tertiary);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.pay-scale-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-4);
}

.pay-scale-card {
    padding: var(--space-5);
}

.pay-scale-note {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: var(--space-2);
    line-height: 1.5;
}

.pay-scale-gear {
    font-size: 13px;
    color: var(--text-secondary);
    text-align: center;
    line-height: 1.6;
    margin-top: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border-gold-subtle);
    border-radius: var(--radius-sm);
    background: rgba(186, 152, 87, 0.06);
}

.pay-scale-gear strong {
    color: var(--logo-gold-specular);
}

.positions-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    max-width: 960px;
    margin: 0 auto;
}

.position-card {
    background: var(--color-surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: clamp(20px, 3.5vw, 32px);
    transition: border-color var(--duration-normal);
}

.position-card:hover {
    border-color: var(--border-gold-subtle);
}

.position-card[hidden] {
    display: none !important;
}

.position-meta-top {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
    flex-wrap: wrap;
}

.position-code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    font-weight: 700;
    color: var(--logo-gold-core);
    letter-spacing: 0.08em;
}

.position-badge {
    font-size: 10px;
    font-weight: 800;
    padding: 2px 8px;
    background: rgba(186, 152, 87, 0.15);
    border: 1px solid var(--border-gold-subtle);
    border-radius: var(--radius-sm);
    color: var(--logo-gold-highlight);
    text-transform: uppercase;
}

.position-license {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-tertiary);
}

.position-title {
    font-family: 'Cinzel', serif;
    font-size: clamp(20px, 2.5vw, 24px);
    font-weight: 700;
    margin-bottom: var(--space-4);
    color: var(--text-primary);
}

.position-stats-strip {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-bottom: var(--space-4);
}

.stat-pill {
    font-size: 13px;
    padding: 6px 12px;
    background: var(--color-surface-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
}

.stat-pill--gold {
    border-color: var(--border-gold-subtle);
    color: var(--logo-gold-specular);
    font-weight: 700;
}

.position-summary {
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: var(--space-6);
}

.position-details {
    padding-top: var(--space-6);
    margin-top: var(--space-6);
    border-top: 1px solid var(--border-subtle);
}

.details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-6);
}

.details-heading {
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--logo-gold-core);
    letter-spacing: 0.08em;
    margin-bottom: var(--space-3);
}

.details-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.details-list li {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
    position: relative;
    padding-left: 16px;
}

.details-list li::before {
    content: '•';
    color: var(--logo-gold-bevel);
    position: absolute;
    left: 0;
}

.position-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--space-6);
    padding-top: var(--space-4);
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    flex-wrap: wrap;
    gap: var(--space-4);
}

.position-toggle-btn {
    background: none;
    border: none;
    color: var(--logo-gold-core);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ── Vetting Protocol ──────────────────────────────────────────────── */
.careers-vetting-section {
    padding: clamp(60px, 9vw, 100px) 0;
}

.vetting-stepper-track {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    max-width: 820px;
    margin: 0 auto;
}

.vetting-stage-card {
    display: flex;
    gap: var(--space-6);
    background: var(--color-surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
}

.stage-step-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    background: var(--color-surface-elevated);
    border: 1px solid var(--border-gold-subtle);
    color: var(--logo-gold-highlight);
    font-family: 'JetBrains Mono', monospace;
    font-weight: 800;
    font-size: 18px;
}

.stage-badge {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 800;
    color: var(--logo-gold-core);
    letter-spacing: 0.1em;
    margin-bottom: var(--space-2);
}

.stage-heading {
    font-family: 'Cinzel', serif;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: var(--space-2);
}

.stage-text {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: var(--space-3);
}

.stage-checkpoint {
    font-size: 12px;
    font-weight: 700;
    color: var(--logo-gold-highlight);
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ── Candidate Intake Form ─────────────────────────────────────────── */
.careers-apply-section {
    padding: clamp(60px, 9vw, 100px) 0;
    background: var(--surface-section-framed);
    border-top: 1px solid var(--border-subtle);
}

.apply-form-wrapper {
    max-width: 780px;
    margin: 0 auto;
    background: var(--color-surface-card);
    border: 1px solid var(--border-gold-subtle);
    border-radius: var(--radius-xl);
    padding: clamp(24px, 5vw, 44px);
}

.form-row-duo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--space-4);
}

.form-field-group {
    margin-bottom: var(--space-4);
}

.form-field-label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 6px;
    letter-spacing: 0.02em;
}

.form-input, .form-select, .form-textarea {
    width: 100%;
    background: var(--color-surface-elevated);
    border: 1px solid var(--border-muted);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    padding: 12px 14px;
    font-size: 14px;
    font-family: 'Outfit', sans-serif;
    transition: border-color var(--duration-fast);
}

.form-input:focus-visible, .form-select:focus-visible, .form-textarea:focus-visible {
    border-color: var(--logo-gold-glint);
}

.form-disclaimer {
    display: block;
    font-size: 12px;
    color: var(--text-tertiary);
    line-height: 1.5;
    margin-top: var(--space-3);
    text-align: center;
}

.candidate-status-box {
    margin-top: var(--space-6);
    padding: var(--space-6);
    border-radius: var(--radius-md);
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid var(--color-emerald-glow);
    color: #fff;
    font-size: 15px;
    text-align: center;
    line-height: 1.6;
}
}

/* ── components/legal.css ────────────────────────────────────── */
@layer components {
/* ==========================================================================
   LEGAL PAGES
   ========================================================================== */
.legal-main {
    padding: calc(var(--space-24) + 40px) 0 var(--space-20);
}

.legal-doc {
    max-width: 820px;
}

.legal-head {
    margin-bottom: var(--space-10);
}

.legal-meta {
    color: var(--text-tertiary);
    font-size: 13px;
    margin-top: var(--space-2);
}

.legal-draft {
    margin-top: var(--space-4);
    padding: 12px 16px;
    border: 1px dashed var(--color-crimson);
    border-radius: var(--radius-md);
    background: rgba(239, 68, 68, 0.08);
    color: var(--text-primary);
    font-size: 14px;
}

.legal-section {
    margin-bottom: var(--space-8);
}

.legal-section h2 {
    font-size: clamp(17px, 1.6vw, 20px);
    color: var(--logo-gold-specular);
    margin-bottom: var(--space-3);
}

.legal-section p {
    color: var(--text-secondary);
    line-height: 1.75;
    margin-bottom: var(--space-3);
}

/* SMS consent checkbox on the intake forms. */
.form-consent {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    align-items: start;
    margin: 0 0 var(--space-5);
    font-size: 12.5px;
    color: var(--text-secondary);
    line-height: 1.55;
}

.form-consent input {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--logo-gold-glint);
}

.form-consent label {
    text-transform: none;
    letter-spacing: 0;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-secondary);
}

.form-consent a {
    color: var(--logo-gold-highlight);
}

/* Legacy invoice tool: the export page that replaced the browser builder. */
.inv-moved {
    max-width: 720px;
    margin: 0 auto;
    padding: clamp(24px, 6vw, 64px) clamp(16px, 4vw, 32px);
    display: grid;
    gap: var(--space-5);
}

.inv-moved pre {
    background: #060706;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 14px;
    font-size: 12px;
    overflow: auto;
    max-height: 260px;
    color: var(--text-secondary);
}
}

/* ── components/reveal.css ───────────────────────────────────── */
@layer components {
/* ==========================================================================
   SCROLL REVEAL
   Sections and cards rise into place as they enter the viewport. The hidden
   starting state is applied only when the browser reports scripting enabled
   (`@media (scripting: enabled)`), so a visitor without JavaScript, or on a
   browser that predates the media feature, sees the page fully rendered and
   simply forgoes the motion. No inline script is needed to gate it.

   js/modules/reveal.mjs adds `.is-revealed` on intersection. Stagger comes
   from sibling position, not from per-element inline styles: the first card
   in a row leads, each following card trails by 80ms, capped at 400ms.
   ========================================================================== */

@media (scripting: enabled) {
    [data-reveal] {
        opacity: 0;
        transform: translateY(26px);
        transition:
            opacity 0.7s var(--ease-out-quint),
            transform 0.8s var(--ease-out-quint);
        transition-delay: var(--reveal-delay, 0s);
        will-change: opacity, transform;
    }

    [data-reveal].is-revealed {
        opacity: 1;
        transform: none;
        /* Once landed, release the compositor layer so the element paints
           like any other and hover transitions inside it stay crisp. */
        will-change: auto;
    }

    [data-reveal]:nth-child(2) { --reveal-delay: 0.08s; }
    [data-reveal]:nth-child(3) { --reveal-delay: 0.16s; }
    [data-reveal]:nth-child(4) { --reveal-delay: 0.24s; }
    [data-reveal]:nth-child(5) { --reveal-delay: 0.32s; }
    [data-reveal]:nth-child(n + 6) { --reveal-delay: 0.4s; }
}

/* Reduced motion: nothing is ever hidden, nothing ever slides. base.css
   already clamps durations, but an element waiting on an intersection would
   still be invisible until scrolled to, so the starting state is lifted too. */
@media (prefers-reduced-motion: reduce) {
    [data-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}
}

/* ── components/placeholder.css ──────────────────────────────── */
@layer components {
/* ==========================================================================
   PLACEHOLDER FLAGS
   A business fact that Cameron has not supplied yet (the dispatch line, the
   DPS licence number) renders with a `.placeholder-flag` beside it. The flag
   is fail-closed: it shows on every host, production included, and needs no
   JavaScript to appear. Nothing hides it but supplying the fact — set the
   fact's `placeholder` to false in src/data/site.mjs and the markup stops
   being generated at all, so there is no flag and no reserved space.

   It used to be gated on `html[data-env="preview"]`, set at runtime by
   js/modules/env.mjs from the hostname. That made the guardrail loudest where
   it mattered least and silent on the live site — the one place
   37 Tex. Admin. Code §35.9 actually cares about. The gate is gone, and so is
   env.mjs (SPEC-001).
   ========================================================================== */

.placeholder-flag {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 7px;
    border: 1px dashed var(--color-crimson);
    border-radius: var(--radius-sm);
    color: var(--color-crimson);
    background: rgba(239, 68, 68, 0.12);
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    vertical-align: middle;
    white-space: nowrap;
}

[data-placeholder] {
    outline: 2px dashed var(--color-crimson);
    outline-offset: 2px;
}
}

/* ── components/dispatch-bar.css ─────────────────────────────── */
@layer components {
.floating-dispatch-bar {
    position: fixed;
    bottom: clamp(12px, 2vw, 24px);
    right: clamp(12px, 2vw, 24px);
    z-index: 1500;
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(7, 8, 7, 0.95);
    border: 1px solid var(--border-gold-bright);
    border-radius: var(--radius-full);
    padding: 6px 14px 6px 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.9), 0 0 25px var(--gold-glow-soft);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    animation: pulseGlow 3s infinite alternate;
}

@keyframes pulseGlow {
    0% { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.9), 0 0 15px rgba(186, 152, 87, 0.2); }
    100% { box-shadow: 0 10px 35px rgba(0, 0, 0, 0.95), 0 0 30px rgba(186, 152, 87, 0.5); }
}

.pulse-dot {
    width: 8px;
    height: 8px;
    background: var(--color-emerald);
    border-radius: var(--radius-full);
    box-shadow: 0 0 10px var(--color-emerald);
    animation: pulseWave 1.8s infinite ease-in-out;
    flex-shrink: 0;
}

@keyframes pulseWave {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.4); opacity: 0.4; }
}

.btn-quick-call {
    background: var(--gradient-gold-brushed);
    color: #050504;
    font-weight: 800;
    font-size: clamp(11px, 1.1vw, 13px);
    padding: 6px 14px;
    min-height: 44px;
    border-radius: var(--radius-full);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

@media (max-width: 850px) {
    .floating-dispatch-bar span { display: none; }
}

.dispatch-label {
    font-size: 12px;
    font-weight: 800;
    color: var(--text-pure);
    font-family: 'JetBrains Mono', monospace;
}
}

/* ── components/footer.css ───────────────────────────────────── */
@layer components {
.footer-block {
    background: #020302;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: var(--space-16) 0 var(--space-8);
    text-align: center;
}

.footer-badge-img {
    width: clamp(80px, 10vw, 110px);
    height: auto;
    border-radius: var(--radius-md);
    margin-bottom: var(--space-5);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.9), 0 0 30px var(--gold-glow-soft);
}

.footer-menu {
    display: flex;
    justify-content: center;
    gap: clamp(16px, 3vw, 32px);
    margin: var(--space-5) 0;
    flex-wrap: wrap;
}

.footer-menu a {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: clamp(12px, 1.1vw, 14px);
    font-weight: 600;
    transition: color var(--duration-fast) ease;
}

.footer-menu a:hover { color: var(--logo-gold-specular); }

.footer-menu--legal {
    margin-top: calc(-1 * var(--space-3));
}

.footer-menu--legal a {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--text-tertiary);
}

/* Derived from site.areaServed, so the visible list and the schema.org
   areaServed record can never disagree about where Fused operates. */
.footer-areas {
    font-size: clamp(11px, 1.05vw, 13px);
    color: var(--text-secondary);
    letter-spacing: 0.04em;
    margin: 0 auto var(--space-5);
    max-width: 800px;
    line-height: 1.8;
}

.footer-areas-label {
    display: block;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--logo-gold-bevel);
    margin-bottom: 4px;
}

/* The DPS licence number, required in advertising by Tex. Occ. Code §1702.
   Rendered from site.licenseNumber alongside the schema.org identifier. */
.footer-license {
    font-family: 'JetBrains Mono', monospace;
    font-size: clamp(11px, 1.05vw, 13px);
    color: var(--text-secondary);
    letter-spacing: 0.06em;
    margin: 0 auto var(--space-4);
}

.footer-license-label {
    display: block;
    font-family: 'Outfit', sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--logo-gold-bevel);
    margin-bottom: 4px;
}

.footer-license-value {
    color: var(--text-primary);
    font-weight: 700;
}

.footer-disclaimer {
    font-size: clamp(10.5px, 1vw, 12px);
    color: var(--text-tertiary);
    max-width: 800px;
    margin: 0 auto var(--space-4);
    line-height: 1.7;
}

.footer-wordmark {
    font-family: 'Cinzel', serif;
    font-size: clamp(18px, 2.5vw, 24px);
    font-weight: 900;
    color: var(--text-pure);
    letter-spacing: 1.5px;
    margin-bottom: 6px;
}

.footer-motto {
    color: var(--logo-gold-bevel);
    font-size: clamp(11px, 1.2vw, 13px);
    font-weight: 700;
    letter-spacing: 3px;
    margin-bottom: 28px;
}

.footer-credit {
    font-size: 11px;
    color: var(--text-tertiary);
}
}

/* ── utilities.css ───────────────────────────────────────────── */
@layer utilities {
/* Typography Classes */
.font-cinzel {
    font-family: 'Cinzel', serif;
    letter-spacing: 0.5px;
}

.font-mono {
    font-family: 'JetBrains Mono', monospace;
}

.gold-gradient-text {
    background: var(--gradient-gold-metallic);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 10px rgba(186, 152, 87, 0.4));
}

/* Available to assistive tech, removed from the visual flow. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}
}