/* ===== Digital Archives Pro - Global Styles ===== */
/* Design: White background, Navy headlines, Saffron accent, lots of white space */

:root {
    --navy: #0B1F3A;
    --navy-deep: #000E28;   /* matches logo background exactly */
    --navy-light: #1A3556;
    --saffron: #C8861B;
    --saffron-light: #E0A22E;
    --saffron-soft: rgba(200, 134, 27, 0.10);
    --gold: #C5A55A;
    --bg: #FFFFFF;
    --bg-soft: #F6F8FB;
    --bg-navy: #0B1F3A;
    --text: #2B3445;
    --text-muted: #5C6779;
    --text-on-dark: #D9E1EC;
    --text-on-dark-muted: #9DAABE;
    --border: #E6EAF1;
    --border-dark: rgba(255, 255, 255, 0.12);
    --radius: 14px;
    --radius-sm: 8px;
    --radius-lg: 22px;
    --shadow: 0 1px 3px rgba(21, 35, 63, 0.05), 0 6px 20px rgba(21, 35, 63, 0.05);
    --shadow-lg: 0 8px 30px rgba(21, 35, 63, 0.10), 0 2px 8px rgba(21, 35, 63, 0.06);
    --transition: 0.2s ease;
    --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

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

html { scroll-behavior: smooth; }

body {
    font-family: var(--sans);
    color: var(--text);
    background: var(--bg);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

.container {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 28px;
}

.container-narrow { max-width: 860px; }

/* ===== Navigation ===== */
.navbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
}

.nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 92px;
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.nav-logo img { display: block; }

.logo-tagline {
    font-family: var(--serif);
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 2.2px;
    font-size: 0.58rem;
    font-weight: 500;
    line-height: 1.5;
    max-width: 150px;
    padding-left: 14px;
    border-left: 1px solid rgba(197, 165, 90, 0.45);
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
}

.nav-links a {
    color: var(--navy);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    transition: var(--transition);
}

.nav-links a:hover, .nav-links a.active {
    color: var(--saffron);
    background: var(--saffron-soft);
}

.nav-cta {
    background: var(--saffron) !important;
    color: #fff !important;
    font-weight: 600 !important;
}

.nav-cta:hover {
    background: var(--saffron-light) !important;
    color: #fff !important;
}

.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
}

.nav-toggle span {
    width: 24px; height: 2px;
    background: var(--navy);
    border-radius: 2px;
    transition: var(--transition);
}

/* ===== Buttons ===== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 30px;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: var(--transition);
    cursor: pointer;
    border: none;
    font-family: inherit;
    line-height: 1.2;
}

.btn-primary { background: var(--saffron); color: #fff; }
.btn-primary:hover { background: var(--saffron-light); }

.btn-navy { background: var(--navy); color: #fff; }
.btn-navy:hover { background: var(--navy-light); }

.btn-outline {
    background: transparent;
    color: var(--navy);
    border: 1px solid var(--border);
}
.btn-outline:hover { border-color: var(--saffron); color: var(--saffron); }

.btn-outline-light {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.35);
}
.btn-outline-light:hover { background: rgba(255, 255, 255, 0.1); }

.btn-lg { padding: 16px 38px; font-size: 1.02rem; }
.btn-full { width: 100%; }

/* ===== Sections ===== */
.section { padding: 88px 0; }
.section-sm { padding: 60px 0; }

.section-soft { background: var(--bg-soft); }

.section-navy {
    background: var(--navy);
    color: var(--text-on-dark);
}

.section-header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 56px;
}

.eyebrow {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--saffron);
    margin-bottom: 16px;
}

.section-header h2 {
    font-family: var(--serif);
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--navy);
    line-height: 1.2;
    margin-bottom: 16px;
}

.section-navy .section-header h2 { color: #fff; }

.section-sub {
    font-size: 1.05rem;
    color: var(--text-muted);
    line-height: 1.7;
}

.section-navy .section-sub { color: var(--text-on-dark-muted); }

.center-text { text-align: center; }
.center-cta { text-align: center; margin-top: 48px; }

/* ===== Hero ===== */
.hero {
    padding: 150px 0 80px;
    background: var(--bg);
}

.hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
}

.hero-eyebrow {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--saffron);
    margin-bottom: 20px;
}

.hero h1 {
    font-family: var(--serif);
    font-size: 3.1rem;
    font-weight: 800;
    color: var(--navy);
    line-height: 1.12;
    letter-spacing: -0.01em;
    margin-bottom: 22px;
}

.hero-sub {
    font-size: 1.08rem;
    color: var(--text-muted);
    line-height: 1.7;
    margin-bottom: 28px;
    max-width: 540px;
}

.hero-rule {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}
.hero-rule::before, .hero-rule::after {
    content: '';
    height: 1px;
    flex: 1;
    max-width: 60px;
    background: linear-gradient(90deg, transparent, var(--gold));
}
.hero-rule::after { background: linear-gradient(90deg, var(--gold), transparent); }
.hero-rule span { color: var(--gold); font-size: 0.9rem; }

.hero-tagline {
    font-family: var(--serif);
    font-style: italic;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.82rem;
    font-weight: 600;
}

/* Hero video box */
.hero-video {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: linear-gradient(150deg, var(--navy) 0%, var(--navy-deep) 100%);
    box-shadow: var(--shadow-lg);
    aspect-ratio: 16 / 11;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.hero-video::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 60% at 50% 45%, rgba(0, 150, 200, 0.18), transparent),
        radial-gradient(circle at 80% 20%, rgba(197, 165, 90, 0.10), transparent 40%);
}

.hero-video img {
    position: relative;
    width: 56%;
    max-width: 240px;
    opacity: 0.95;
}

.video-play {
    position: relative;
    margin-top: 18px;
    width: 64px; height: 64px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
    border: none;
}
.video-play:hover { transform: scale(1.08); background: #fff; }
.video-play::after {
    content: '';
    margin-left: 4px;
    border-style: solid;
    border-width: 11px 0 11px 18px;
    border-color: transparent transparent transparent var(--navy);
}

.video-caption {
    position: absolute;
    bottom: 16px;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-on-dark-muted);
}

/* ===== Page Hero ===== */
.page-hero {
    padding: 140px 0 70px;
    background: var(--navy);
    color: #fff;
    position: relative;
    overflow: hidden;
}
.page-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 50% 60% at 85% 30%, rgba(0, 150, 200, 0.16), transparent),
        radial-gradient(circle at 10% 90%, rgba(197, 165, 90, 0.08), transparent 40%);
}
.page-hero .container { position: relative; }

.breadcrumb {
    font-size: 0.8rem;
    color: var(--text-on-dark-muted);
    margin-bottom: 18px;
}
.breadcrumb a { color: var(--text-on-dark-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--saffron-light); }

.page-hero .hero-eyebrow { color: var(--saffron-light); }

.page-hero h1 {
    font-family: var(--serif);
    font-size: 2.9rem;
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 18px;
    max-width: 760px;
}

.page-hero p {
    font-size: 1.1rem;
    color: var(--text-on-dark-muted);
    max-width: 660px;
    line-height: 1.7;
}

.page-hero-ctas {
    display: flex;
    gap: 14px;
    margin-top: 30px;
    flex-wrap: wrap;
}

.page-hero-points {
    list-style: none;
    margin-top: 26px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 28px;
}
.page-hero-points li {
    font-size: 0.92rem;
    color: var(--text-on-dark);
    padding-left: 26px;
    position: relative;
}
.page-hero-points li::before {
    content: '\2713';
    position: absolute;
    left: 0;
    color: var(--saffron-light);
    font-weight: 700;
}

/* ===== Intro / Mission split ===== */
.intro-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
}
.intro-block h3 {
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--saffron);
    margin-bottom: 18px;
}
.intro-block p {
    color: var(--text-muted);
    margin-bottom: 16px;
    line-height: 1.75;
}
.intro-block .accent-line {
    color: var(--navy);
    font-weight: 600;
    font-size: 1.05rem;
}

/* ===== Funnel (split CTA) ===== */
.funnel-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.funnel-card {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 34px 32px;
    border-radius: var(--radius);
    text-decoration: none;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}
.funnel-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

.funnel-navy { background: var(--navy); color: #fff; }
.funnel-saffron { background: var(--saffron); color: #fff; }

.funnel-icon {
    width: 58px; height: 58px;
    min-width: 58px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
}
.funnel-text { flex: 1; }
.funnel-text h3 { font-size: 1.2rem; font-weight: 700; margin-bottom: 2px; }
.funnel-text .funnel-aud { font-size: 0.8rem; opacity: 0.85; font-weight: 600; margin-bottom: 8px; display: block; }
.funnel-text p { font-size: 0.9rem; opacity: 0.92; line-height: 1.5; }
.funnel-arrow { font-size: 1.6rem; opacity: 0.8; }

/* ===== Audience split (Built for two) ===== */
.audience-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
}
.audience-card {
    border-radius: var(--radius);
    padding: 38px 34px;
    border: 1px solid var(--border);
    background: var(--bg);
}
.audience-card.is-federal {
    background: var(--navy);
    color: #fff;
    border-color: var(--navy);
}
.audience-tag {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--saffron);
    margin-bottom: 8px;
}
.audience-card.is-federal .audience-tag { color: var(--saffron-light); }
.audience-card h3 {
    font-family: var(--serif);
    font-size: 1.5rem;
    color: var(--navy);
    margin-bottom: 22px;
}
.audience-card.is-federal h3 { color: #fff; }
.audience-list { list-style: none; }
.audience-list li {
    padding: 11px 0 11px 32px;
    position: relative;
    font-size: 0.95rem;
    border-top: 1px solid var(--border);
}
.audience-card.is-federal .audience-list li { border-color: rgba(255,255,255,0.1); color: var(--text-on-dark); }
.audience-list li:first-child { border-top: none; }
.audience-list li::before {
    content: '\2713';
    position: absolute;
    left: 0;
    color: var(--saffron);
    font-weight: 700;
}
.audience-card.is-federal .audience-list li::before { color: var(--saffron-light); }

/* ===== Feature / Icon grids ===== */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
}
.feature-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.feature-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }

.feature-card {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 32px 28px;
    transition: var(--transition);
}
.feature-card:hover { box-shadow: var(--shadow-lg); border-color: rgba(200, 134, 27, 0.4); transform: translateY(-3px); }

.section-soft .feature-card { background: var(--bg); }

.feature-icon {
    width: 52px; height: 52px;
    border-radius: 12px;
    background: var(--saffron-soft);
    color: var(--saffron);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 18px;
}
.feature-card h3 {
    font-size: 1.12rem;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 10px;
}
.feature-card p {
    font-size: 0.92rem;
    color: var(--text-muted);
    line-height: 1.65;
}

/* Navy variant feature cards */
.section-navy .feature-card {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.1);
}
.section-navy .feature-card h3 { color: #fff; }
.section-navy .feature-card p { color: var(--text-on-dark-muted); }
.section-navy .feature-icon {
    background: rgba(224, 162, 46, 0.14);
    color: var(--saffron-light);
}

/* ===== Trust badge strip ===== */
.trust-strip {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px;
}
.trust-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 22px 24px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg);
    min-width: 150px;
    flex: 1;
    text-align: center;
}
.trust-badge-icon {
    width: 46px; height: 46px;
    border-radius: 50%;
    background: var(--navy);
    color: var(--saffron-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}
.trust-badge strong { font-size: 0.88rem; color: var(--navy); font-weight: 700; line-height: 1.3; }
.trust-badge span { font-size: 0.75rem; color: var(--text-muted); }

/* Lock assurance bar */
.assurance-bar {
    display: flex;
    align-items: center;
    gap: 22px;
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-left: 4px solid var(--saffron);
    border-radius: var(--radius);
    padding: 26px 30px;
    margin-top: 36px;
}
.assurance-bar .lock-icon {
    font-size: 1.8rem;
    color: var(--saffron);
}
.assurance-bar p {
    font-size: 0.95rem;
    color: var(--text-muted);
    line-height: 1.6;
    font-style: italic;
}

/* ===== Pillar list (VAULTIS 7) ===== */
.pillar-panel {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 30px;
    box-shadow: var(--shadow);
}
.pillar-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid var(--border);
}
.pillar-row:last-child { border-bottom: none; }
.pillar-num {
    width: 32px; height: 32px;
    min-width: 32px;
    border-radius: 50%;
    background: var(--saffron-soft);
    color: var(--saffron);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
}
.pillar-row strong { flex: 1; color: var(--navy); font-weight: 600; font-size: 0.98rem; }
.pillar-row small { color: var(--text-muted); font-size: 0.85rem; }
.pillar-check { color: #2BA86A; font-weight: 700; }

/* ===== Two-column content (text + panel) ===== */
.split-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
}
.split-2col h2 {
    font-family: var(--serif);
    font-size: 2rem;
    color: var(--navy);
    margin-bottom: 16px;
    line-height: 1.2;
}
.split-2col .section-navy & h2 { color: #fff; }
.split-2col p { color: var(--text-muted); margin-bottom: 16px; line-height: 1.7; }

/* ===== Deliver / checklist grid ===== */
.deliver-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}
.deliver-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    padding: 26px 16px;
    border: 1px solid var(--border-dark);
    border-radius: var(--radius);
    background: rgba(255,255,255,0.03);
}
.deliver-item .di-icon {
    width: 46px; height: 46px;
    border-radius: 12px;
    background: rgba(224, 162, 46, 0.14);
    color: var(--saffron-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}
.deliver-item span { font-size: 0.85rem; font-weight: 600; color: #fff; line-height: 1.3; }

/* ===== Pricing ===== */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
    align-items: stretch;
}
.price-card {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 36px 30px;
    display: flex;
    flex-direction: column;
    position: relative;
}
.price-card.is-popular {
    border-color: var(--saffron);
    box-shadow: var(--shadow-lg);
}
.price-flag {
    position: absolute;
    top: 0; left: 50%;
    transform: translate(-50%, -50%);
    background: var(--saffron);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 5px 16px;
    border-radius: 20px;
}
.price-name { font-size: 1.05rem; font-weight: 700; color: var(--navy); }
.price-desc { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 18px; }
.price-amount {
    font-family: var(--serif);
    font-size: 2.6rem;
    font-weight: 800;
    color: var(--navy);
    line-height: 1;
}
.price-amount span { font-size: 0.95rem; font-weight: 500; color: var(--text-muted); font-family: var(--sans); }
.price-storage { font-size: 0.85rem; color: var(--saffron); font-weight: 600; margin: 10px 0 22px; }
.price-features { list-style: none; margin-bottom: 26px; flex: 1; }
.price-features li {
    padding: 8px 0 8px 26px;
    position: relative;
    font-size: 0.9rem;
    color: var(--text-muted);
}
.price-features li::before {
    content: '\2713';
    position: absolute;
    left: 0;
    color: var(--saffron);
    font-weight: 700;
}

/* ===== Past performance logos ===== */
.logo-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.logo-card {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 26px 24px;
}
.logo-card .lc-org { font-weight: 700; color: var(--navy); font-size: 1rem; margin-bottom: 4px; }
.logo-card .lc-role { font-size: 0.78rem; color: var(--saffron); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 10px; }
.logo-card p { font-size: 0.86rem; color: var(--text-muted); line-height: 1.55; }

/* ===== Procurement data block ===== */
.procurement {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.procurement div {
    background: var(--bg);
    padding: 24px 26px;
}
.procurement strong {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin-bottom: 6px;
}
.procurement span { font-size: 1.05rem; font-weight: 700; color: var(--navy); }

/* ===== Tech ecosystem blocks ===== */
.tech-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 26px;
}
.tech-block {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 32px 30px;
}
.tech-block .tb-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}
.tech-block .tb-icon {
    width: 46px; height: 46px;
    border-radius: 50%;
    background: var(--navy);
    color: var(--saffron-light);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem;
}
.tech-block h3 { font-size: 1.1rem; color: var(--navy); font-weight: 700; }
.tech-block ul { list-style: none; }
.tech-block li {
    padding: 8px 0 8px 22px;
    position: relative;
    font-size: 0.92rem;
    color: var(--text-muted);
    border-top: 1px solid var(--border);
}
.tech-block li:first-child { border-top: none; }
.tech-block li::before {
    content: '';
    position: absolute;
    left: 0; top: 16px;
    width: 7px; height: 7px;
    background: var(--saffron);
    border-radius: 50%;
}

.chip-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.chip {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--navy);
    background: var(--bg);
    border: 1px solid var(--border);
    padding: 10px 20px;
    border-radius: 30px;
}

/* ===== Pain points ===== */
.pain-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.pain-card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 30px 28px;
    background: var(--bg);
}
.pain-card .pain-icon { font-size: 1.6rem; margin-bottom: 14px; }
.pain-card h3 { font-size: 1.08rem; color: var(--navy); font-weight: 700; margin-bottom: 8px; }
.pain-card p { font-size: 0.92rem; color: var(--text-muted); line-height: 1.6; }

/* ===== Steps ===== */
.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.step-card {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 32px 28px;
    position: relative;
}
.step-num {
    font-family: var(--serif);
    font-size: 2.4rem;
    font-weight: 800;
    color: var(--saffron);
    opacity: 0.35;
    line-height: 1;
    margin-bottom: 12px;
}
.step-card h3 { font-size: 1.1rem; color: var(--navy); font-weight: 700; margin-bottom: 8px; }
.step-card p { font-size: 0.92rem; color: var(--text-muted); line-height: 1.6; }

/* ===== Capability list with descriptions ===== */
.cert-list { display: grid; gap: 18px; }
.cert-item {
    display: flex;
    gap: 20px;
    padding: 26px 28px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.cert-item .cert-icon {
    width: 48px; height: 48px;
    min-width: 48px;
    border-radius: 12px;
    background: var(--saffron-soft);
    color: var(--saffron);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem;
}
.cert-item h3 { font-size: 1.05rem; color: var(--navy); font-weight: 700; margin-bottom: 6px; }
.cert-item p { font-size: 0.92rem; color: var(--text-muted); line-height: 1.6; }

/* ===== CTA Section ===== */
.section-cta {
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
    color: #fff;
    position: relative;
    overflow: hidden;
}
.section-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 50% 70% at 80% 50%, rgba(197, 165, 90, 0.12), transparent);
}
.section-cta .container { position: relative; }
.section-cta h2 {
    font-family: var(--serif);
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 14px;
}
.section-cta p {
    font-size: 1.05rem;
    color: var(--text-on-dark-muted);
    margin: 0 auto 30px;
    max-width: 600px;
}
.cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ===== Contact ===== */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 56px;
    align-items: start;
}
.contact-form-wrapper h2 {
    font-family: var(--serif);
    font-size: 1.7rem;
    color: var(--navy);
    margin-bottom: 28px;
}
.contact-form { display: flex; flex-direction: column; gap: 20px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group label { font-size: 0.85rem; font-weight: 600; color: var(--navy); }
.form-group input, .form-group select, .form-group textarea {
    padding: 12px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
    font-family: inherit;
    color: var(--text);
    background: #fff;
    transition: var(--transition);
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
    outline: none;
    border-color: var(--saffron);
    box-shadow: 0 0 0 3px var(--saffron-soft);
}
.form-group textarea { resize: vertical; min-height: 130px; }

.contact-info { display: flex; flex-direction: column; gap: 20px; }
.contact-info-card {
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 28px;
}
.contact-info-card h3 { font-size: 1.05rem; color: var(--navy); font-weight: 700; margin-bottom: 16px; }
.contact-item { margin-bottom: 16px; }
.contact-item:last-child { margin-bottom: 0; }
.contact-item strong {
    display: block;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    margin-bottom: 4px;
}
.contact-info-card p { font-size: 0.92rem; color: var(--text-muted); line-height: 1.55; }

/* ===== Footer ===== */
.footer {
    background: var(--navy-deep);
    color: var(--text-on-dark-muted);
    padding: 64px 0 0;
}
.footer-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
    gap: 40px;
    padding-bottom: 44px;
}
.footer-brand .logo-tagline {
    color: var(--gold);
    border-color: rgba(197, 165, 90, 0.4);
}
.footer-brand p { font-size: 0.88rem; line-height: 1.65; margin-top: 16px; max-width: 280px; }
.footer-links h4 {
    font-size: 0.8rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.footer-links a {
    display: block;
    font-size: 0.88rem;
    color: var(--text-on-dark-muted);
    text-decoration: none;
    padding: 5px 0;
    transition: var(--transition);
}
.footer-links a:hover { color: var(--saffron-light); }
.footer-contact-item {
    font-size: 0.88rem;
    color: var(--text-on-dark-muted);
    padding: 5px 0;
    display: flex;
    gap: 8px;
}
.footer-bottom {
    padding: 22px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.82rem;
    text-align: center;
}

/* ===== Responsive ===== */
@media (max-width: 968px) {
    .hero-grid { grid-template-columns: 1fr; gap: 40px; }
    .hero h1 { font-size: 2.5rem; }
    .intro-split { grid-template-columns: 1fr; gap: 36px; }
    .funnel-grid, .audience-grid, .split-2col { grid-template-columns: 1fr; }
    .feature-grid, .feature-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
    .deliver-grid { grid-template-columns: repeat(2, 1fr); }
    .pricing-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
    .logo-row { grid-template-columns: repeat(2, 1fr); }
    .tech-grid { grid-template-columns: 1fr; }
    .pain-grid, .steps-grid { grid-template-columns: 1fr; }
    .procurement { grid-template-columns: 1fr; }
    .contact-grid { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .nav-links {
        display: none;
        position: absolute;
        top: 92px; left: 0; right: 0;
        background: #fff;
        flex-direction: column;
        align-items: stretch;
        padding: 14px 24px 22px;
        gap: 2px;
        border-bottom: 1px solid var(--border);
        box-shadow: var(--shadow-lg);
    }
    .nav-links.open { display: flex; }
    .nav-links a { width: 100%; padding: 12px 14px; }
    .nav-toggle { display: flex; }
}

@media (max-width: 600px) {
    .container { padding: 0 20px; }
    .hero { padding: 130px 0 60px; }
    .hero h1 { font-size: 2.05rem; }
    .page-hero h1 { font-size: 2rem; }
    .section { padding: 60px 0; }
    .section-header h2 { font-size: 1.9rem; }
    .feature-grid, .feature-grid.cols-2, .feature-grid.cols-4, .deliver-grid, .trust-strip { grid-template-columns: 1fr; }
    .trust-strip { flex-direction: column; }
    .form-row { grid-template-columns: 1fr; }
    .logo-row { grid-template-columns: 1fr; }
    .funnel-card { flex-wrap: wrap; }
    .footer-grid { grid-template-columns: 1fr; }
    .nav-logo .logo-tagline { display: none; }
    .assurance-bar { flex-direction: column; text-align: center; }
}

/* ===== Article / Insights Body ===== */
.article-body {
    max-width: 760px;
    margin: 0 auto;
    color: var(--text);
    font-size: 1.06rem;
    line-height: 1.8;
}

.article-body p { margin-bottom: 1.4rem; }

.article-lede {
    font-size: 1.18rem;
    line-height: 1.7;
    color: var(--navy);
    font-weight: 500;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 1.8rem;
}

.article-lede strong { color: var(--saffron); }

.article-body a {
    color: var(--saffron);
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 500;
}

.article-body a:hover { color: var(--navy); }

.article-list {
    list-style: none;
    margin: 0 0 1.6rem;
    padding: 0;
}

.article-list li {
    position: relative;
    padding: 0.45rem 0 0.45rem 1.9rem;
    border-bottom: 1px solid var(--border);
}

.article-list li:last-child { border-bottom: none; }

.article-list li::before {
    content: "\2766";
    position: absolute;
    left: 0;
    top: 0.45rem;
    color: var(--saffron);
    font-weight: 700;
}

/* Article headings, meta, definition lists */
.article-body h2 {
    font-family: var(--serif);
    color: var(--navy);
    font-size: 1.55rem;
    line-height: 1.3;
    margin: 2.6rem 0 1rem;
}

.article-body h3 {
    color: var(--navy);
    font-size: 1.12rem;
    margin: 1.8rem 0 0.7rem;
}

.article-body strong { color: var(--navy); }

.article-body .article-ol {
    margin: 0 0 1.6rem 1.2rem;
    padding-left: 0.6rem;
}

.article-body .article-ol li { margin-bottom: 0.6rem; padding-left: 0.3rem; }

.article-meta {
    max-width: 760px;
    margin: 0 auto 2.2rem;
    padding-bottom: 1.3rem;
    border-bottom: 1px solid var(--border);
}

.article-part,
.insight-part {
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--saffron);
    font-weight: 700;
}

.article-meta h1 {
    font-family: var(--serif);
    color: var(--navy);
    font-size: 2.1rem;
    line-height: 1.25;
    margin: 0.5rem 0 0.8rem;
}

.article-meta .article-byline { color: var(--text-muted); font-size: 0.95rem; }

.article-nextprev {
    max-width: 760px;
    margin: 2.5rem auto 0;
    padding-top: 1.6rem;
    border-top: 1px solid var(--border);
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: space-between;
}

.article-nextprev a { font-weight: 600; }

.author-bio {
    max-width: 760px;
    margin: 2.4rem auto 0;
    padding: 24px 28px;
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.95rem;
    color: var(--text-muted);
    line-height: 1.7;
}

.author-bio strong { color: var(--navy); }

/* Insights index cards */
.insight-list {
    display: grid;
    gap: 24px;
    max-width: 860px;
    margin: 0 auto;
}

.insight-card {
    display: block;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 30px 32px;
    text-decoration: none;
    color: inherit;
    box-shadow: var(--shadow);
    transition: var(--transition);
}

.insight-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
    border-color: var(--saffron);
}

.insight-card h3 {
    font-family: var(--serif);
    color: var(--navy);
    font-size: 1.4rem;
    line-height: 1.3;
    margin: 10px 0;
}

.insight-card p { color: var(--text-muted); font-size: 0.97rem; margin-bottom: 14px; }

.insight-card .insight-byline { font-size: 0.85rem; color: var(--text-muted); }

.insight-card .insight-readmore { color: var(--saffron); font-weight: 600; font-size: 0.9rem; }

/* Flow / process diagrams */
.flow-diagram {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 14px;
    max-width: 760px;
    margin: 2.2rem auto;
    padding: 30px 22px;
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.flow-node {
    background: #fff;
    border: 1px solid var(--border);
    border-left: 3px solid var(--navy);
    border-radius: var(--radius-sm);
    padding: 14px 18px;
    font-weight: 600;
    color: var(--navy);
    font-size: 0.95rem;
    text-align: center;
    box-shadow: var(--shadow);
    max-width: 220px;
}

.flow-node span {
    display: block;
    font-weight: 400;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 4px;
}

.flow-node-accent { border-left-color: var(--saffron); background: var(--saffron-soft); }

.flow-node-warn { border-left-color: #B23A48; }

.flow-arrow { color: var(--saffron); font-size: 1.5rem; font-weight: 700; line-height: 1; }

.flow-branch { display: flex; flex-direction: column; gap: 12px; }

@media (max-width: 600px) {
    .flow-diagram { flex-direction: column; }
    .flow-arrow { transform: rotate(90deg); }
    .article-meta h1 { font-size: 1.7rem; }
}

/* ===== SKI / R&D SITE COMPONENTS ===== */
/* ============================================================
   ACCESSIBLE COLOUR TOKEN  (added 2026-07-27 after a full-site audit)
   ------------------------------------------------------------
   --saffron #C8861B measures 3.05:1 on white, and white-on-saffron is
   also 3.05:1, so EVERY primary button failed WCAG AA (needs 4.5:1).
   The audit found 20 distinct failing colour/selector combinations
   across 21 pages. That is a procurement problem, not a style nit:
   federal buyers test against Section 508 / WCAG 2.1 AA.

   The brand is NOT repainted. --saffron and --wreath stay exactly as
   they are for decorative fills, borders, rules, and anything sitting
   on navy, where they already pass comfortably (--wreath is 9.27:1 on
   the footer). --saffron-text is a deeper tone of the same hue used
   only where saffron carries TEXT or a text background on light:

     --saffron-text #9C6610 = 4.86:1 on white  (AA for body text)

   If any of these look too brown, raise the lightness and re-run the
   audit harness; do not simply revert to #C8861B.
   ============================================================ */
:root{--saffron-text:#9C6610;}

/* ---- skip link ----
   Off-screen until focused, then pinned over the navbar. Without this a
   keyboard user tabs through the whole nav on every single page. */
.skip-link{position:absolute;left:-9999px;top:0;z-index:2000;background:var(--navy-deep);
  color:#fff;padding:12px 20px;border-radius:0 0 6px 0;font-weight:600;text-decoration:none;}
.skip-link:focus{left:0;outline:3px solid var(--wreath);outline-offset:2px;}

/* A visible focus ring everywhere, not just on form fields. */
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--saffron-text);outline-offset:2px;border-radius:2px;}

/* Footer column headings were <h4> directly after page <h2>s, which skips
   a level on all 21 pages. They are <h2 class="footer-h"> now; this rule
   reproduces the previous appearance exactly (Inter 16px/700, inherited
   muted colour) so nothing moves visually. */
.footer-h{font-family:inherit;font-size:1rem;font-weight:700;line-height:1.65;
  color:inherit;margin:0;text-transform:none;letter-spacing:normal;}

/* container variant */
.container-narrow{max-width:820px;}

/* anchor cards behave like cards */
a.feature-card{text-decoration:none;color:inherit;display:flex;flex-direction:column;}
a.feature-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:rgba(200,134,27,.45);}
.card-more{margin-top:auto;padding-top:14px;color:var(--saffron);font-weight:600;font-size:.88rem;letter-spacing:.01em;}

/* centered research hero. The news strips now dock to the BOTTOM of the
   viewport, so the hero is once again the first element under the fixed
   navbar and has to clear it itself: 93px of navbar plus breathing room,
   matching the 140px that .page-hero uses on every other page. */
.hero-research{background:linear-gradient(160deg,var(--navy-deep) 0%,var(--navy) 55%,var(--navy-light) 100%);color:var(--text-on-dark);padding:252px 0 88px;text-align:center;}
.hero-research h1{color:#fff;font-size:clamp(2.1rem,4.4vw,3.5rem);line-height:1.12;margin:.35em 0 .5em;}
.hero-research .hero-sub{color:var(--text-on-dark);font-size:1.09rem;line-height:1.75;max-width:800px;margin:0 auto;}
.hero-research .hero-eyebrow{color:var(--saffron-light);letter-spacing:.16em;text-transform:uppercase;font-size:.76rem;font-weight:700;}
.hero-research .hero-tagline{color:var(--gold);font-family:var(--serif);font-size:1.32rem;margin-top:6px;}
.hero-research .hero-rule{margin:26px auto 6px;max-width:260px;display:flex;align-items:center;justify-content:center;gap:14px;color:var(--gold);}
/* max-width:none is REQUIRED. The base .hero-rule::before/::after rule caps
   these at 60px, which this override did not lift: the two 60px lines plus
   the 13px star and two 14px gaps came to 161px inside the 260px container,
   and with the default justify-content:flex-start the whole ornament sat
   left-aligned, putting the star 50px left of the page centre.
   justify-content:center is belt-and-braces so the star stays centred even
   if the lines are ever capped again. */
.hero-research .hero-rule:before,.hero-research .hero-rule:after{content:"";flex:1;max-width:none;height:1px;background:linear-gradient(90deg,transparent,rgba(197,165,90,.6),transparent);}
.hero-research .page-hero-ctas{margin-top:34px;}

/* progression strip */
.progression{display:flex;align-items:stretch;gap:12px;flex-wrap:wrap;justify-content:center;}
.prog-step{flex:1 1 200px;min-width:190px;background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:24px 20px;box-shadow:var(--shadow);}
.prog-num{display:inline-block;font-family:var(--serif);font-size:1.5rem;color:var(--saffron);line-height:1;margin-bottom:8px;}
.prog-step h3{font-size:1.02rem;margin:0 0 6px;color:var(--navy);}
.prog-step p{font-size:.9rem;color:var(--text-muted);margin:0;line-height:1.6;}
.prog-arrow{display:flex;align-items:center;color:var(--saffron);font-size:1.3rem;opacity:.65;}
@media(max-width:760px){.prog-arrow{display:none;}}

/* featured publication */
.featured-pub{background:linear-gradient(150deg,var(--navy-deep),var(--navy) 70%);border-radius:var(--radius-lg);padding:44px 46px;color:var(--text-on-dark);box-shadow:var(--shadow-lg);position:relative;overflow:hidden;}
.featured-pub:before{content:"";position:absolute;inset:0 0 auto auto;width:280px;height:280px;background:radial-gradient(circle at 70% 30%,rgba(200,134,27,.16),transparent 65%);pointer-events:none;}
.featured-pub .eyebrow{color:var(--saffron-light);}
.featured-pub h2{color:#fff;font-size:clamp(1.5rem,2.7vw,2.15rem);line-height:1.22;margin:.3em 0 .5em;max-width:900px;}
.featured-pub p{color:var(--text-on-dark);line-height:1.78;max-width:900px;}
.featured-pub strong{color:#fff;}
.fp-byline{color:var(--gold)!important;font-family:var(--serif);font-size:1.02rem;margin-bottom:18px!important;}
.fp-meta{color:var(--text-on-dark-muted)!important;font-size:.92rem;margin-top:18px;}
.fp-topics{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 26px;}
.fp-topics .chip{background:rgba(255,255,255,.07);border:1px solid var(--border-dark);color:var(--text-on-dark);}
.featured-pub .btn{margin-top:8px;}
@media(max-width:680px){.featured-pub{padding:32px 24px;}}

/* status note on detail pages */
.status-note{display:flex;align-items:center;gap:10px;background:var(--saffron-soft);border:1px solid rgba(200,134,27,.28);border-left:3px solid var(--saffron);border-radius:var(--radius-sm);padding:13px 18px;margin-bottom:30px;font-size:.92rem;color:var(--text);line-height:1.6;}
.status-dot{width:8px;height:8px;border-radius:50%;background:var(--saffron);flex:none;}
.status-note strong{color:var(--navy);}

/* prose */
.prose-block{margin-bottom:34px;}
.prose-block h2{font-size:1.5rem;color:var(--navy);margin:0 0 14px;}
.prose-block p{color:var(--text);line-height:1.82;margin-bottom:16px;font-size:1.02rem;}

/* timeline */
.timeline{max-width:860px;margin:0 auto;position:relative;padding-left:26px;}
.timeline:before{content:"";position:absolute;left:6px;top:8px;bottom:8px;width:2px;background:linear-gradient(180deg,var(--saffron),rgba(200,134,27,.15));}
.tl-item{position:relative;margin-bottom:34px;}
.tl-item:before{content:"";position:absolute;left:-26px;top:6px;width:14px;height:14px;border-radius:50%;background:#fff;border:3px solid var(--saffron);}
.tl-date{font-size:.82rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);margin-bottom:6px;}
.tl-tag{display:inline-block;background:var(--saffron-soft);color:var(--saffron);border-radius:999px;padding:3px 11px;font-size:.74rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:8px;}
.tl-body h2,.tl-body h3{font-size:1.16rem;color:var(--navy);margin:0 0 8px;line-height:1.35;font-family:var(--serif);}
.tl-body p{color:var(--text-muted);line-height:1.72;margin:0 0 8px;}
.tl-body a{color:var(--saffron);font-weight:600;text-decoration:none;font-size:.92rem;}
.tl-body a:hover{text-decoration:underline;}

/* people */
.people-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr));gap:24px;}
.person-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:28px 26px;box-shadow:var(--shadow);}
.person-avatar{width:52px;height:52px;border-radius:50%;background:linear-gradient(140deg,var(--navy),var(--navy-light));color:var(--gold);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:1.02rem;letter-spacing:.04em;margin-bottom:14px;}
.person-card h3{font-size:1.14rem;color:var(--navy);margin:0 0 4px;}
.person-role{display:block;color:var(--saffron);font-size:.86rem;font-weight:600;letter-spacing:.03em;margin-bottom:12px;}
.person-card p{color:var(--text-muted);font-size:.94rem;line-height:1.72;margin:0;}

/* ---- larger brand lockup (nav + footer) ----
   Logo scaled 75% (78px -> 137px nav, 76px -> 133px footer) per the owner.
   .nav-container has a FIXED height in the base stylesheet, so it has to grow
   with the logo or the mark spills outside the navbar. Everything that clears
   the fixed navbar moves with it: .hub-nav's sticky offset, .hero-research and
   .page-hero top padding, and .hub-section's scroll-margin.
   Uses logo-lockup.jpeg: logo.jpeg (1254x1254) cropped at y=1098, which drops
   the "PRESERVING THE PAST. UNLOCKING THE FUTURE." tagline baked into the
   artwork. At nav scale that baked tagline rendered about 4px tall and was
   unreadable, so it is now REAL TEXT below the mark (.logo-motto in the nav,
   .footer-motto in the footer) in the logo's own saffron/gold.
   Heights are scaled by 1098/1254 from the full-square heights so the crest
   stays exactly the size it was: 161->146 nav, 124->113 scrolled,
   127->115 mobile, 156->142 footer.
   The crop is padded with 40px of the logo's own background (0,14,40) so the
   lock ornament is not flush against the rounded card edge.
   The nav lockup is 146 + 6 gap + 32 motto = 184, so the container is 204.
   navbar = 204px container + 1px bottom border = 205px. */
.nav-container{height:204px;}
.page-hero{padding-top:252px;}
.nav-logo{display:flex;align-items:center;gap:14px;text-decoration:none;}
.logo-lockup{display:flex;flex-direction:column;align-items:center;gap:6px;}
.logo-mark{position:relative;display:inline-flex;align-items:center;}
.logo-mark img{height:146px;width:auto;display:block;border-radius:6px;}
.logo-tm{position:absolute;top:6px;right:-11px;font-size:.62rem;color:var(--gold);font-weight:700;line-height:1;}
/* --wreath is sampled from the laurel in the logo artwork itself (the dominant
   leaf tone is #E8A850), so the tagline matches the mark exactly. Note it is
   a LIGHT gold: 9.27:1 on the navy footer, but only 2.07:1 on the white
   navbar. Chosen deliberately by the owner for brand fidelity. */
:root{--wreath:#E8A850;}
.logo-motto{font-size:.78rem;font-weight:700;line-height:1.3;letter-spacing:.1em;text-transform:uppercase;color:var(--wreath);text-align:center;white-space:nowrap;}
.logo-tagline{font-family:var(--serif);font-size:.78rem;line-height:1.24;color:var(--navy);letter-spacing:.08em;text-transform:uppercase;border-left:1px solid var(--border);padding-left:12px;}
.navbar.scrolled .logo-mark img{height:113px;}
/* 9 nav items: tighten spacing and prevent label wrapping */
.nav-links{gap:17px;}
.nav-links > li > a{white-space:nowrap;font-size:.9rem;}
@media(max-width:1400px){.logo-tagline{display:none;}}
@media(max-width:1240px){.nav-links{gap:13px;}.nav-links > li > a{font-size:.85rem;}}
@media(max-width:1080px){.logo-mark img{height:115px;}.nav-container{height:173px;}}
/* The motto is wider than the mark, so the two are centred on each other
   inside an inline-flex column. Without the wrapper the motto is a plain
   block and renders flush-left against the footer column, not under the
   centre of the logo. */
.footer-lockup{display:inline-flex;flex-direction:column;align-items:center;margin-bottom:14px;}
.footer-logo{position:relative;display:inline-block;margin-bottom:10px;}
.footer-logo img{height:142px;width:auto;border-radius:8px;display:block;}
.footer-logo sup{position:absolute;top:4px;right:-10px;font-size:.6rem;color:var(--gold);font-weight:700;}
.footer-motto{display:block;font-size:.82rem;font-weight:700;line-height:1.5;letter-spacing:.13em;text-transform:uppercase;color:var(--wreath);text-align:center;}

/* ---- nav dropdowns ----
   Two top-level menus (the company, the platform) with submenus. The parent is
   a real link to the hub page; the caret button toggles the submenu, which is
   what makes this work on touch where there is no hover. */
.nav-links .has-sub{position:relative;display:flex;align-items:center;gap:2px;}
.nav-links .has-sub > a{white-space:nowrap;}
.sub-toggle{background:none;border:0;padding:4px 2px;cursor:pointer;display:inline-flex;align-items:center;line-height:1;color:inherit;}
.caret{display:block;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid var(--navy);opacity:.6;transition:transform .2s ease,opacity .2s ease;}
.has-sub:hover .caret,.has-sub.open .caret{opacity:1;}
.has-sub.open .caret{transform:rotate(180deg);}
.sub-menu{position:absolute;top:100%;left:0;min-width:246px;background:#fff;border:1px solid var(--border);border-top:3px solid var(--saffron);border-radius:0 0 var(--radius-sm) var(--radius-sm);box-shadow:var(--shadow-lg);padding:8px 0;margin:0;list-style:none;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s ease,transform .18s ease,visibility .18s;z-index:1001;}
.has-sub:hover .sub-menu,.has-sub:focus-within .sub-menu,.has-sub.open .sub-menu{opacity:1;visibility:visible;transform:translateY(0);}
.sub-menu li{margin:0;}
.sub-menu a{display:block;padding:9px 18px;font-size:.86rem;color:var(--text);text-decoration:none;white-space:nowrap;border-left:3px solid transparent;transition:var(--transition);}
.sub-menu a:hover{background:var(--saffron-soft);color:var(--navy);border-left-color:var(--saffron);}
.nav-links .nav-parent.active{color:var(--saffron);}
/* a small hover bridge so the pointer can cross the gap into the submenu */
.has-sub:before{content:"";position:absolute;top:100%;left:0;right:0;height:10px;}

@media(max-width:1080px){
  /* stacked mobile menu: submenus expand inline instead of floating */
  .nav-links .has-sub{flex-wrap:wrap;width:100%;justify-content:space-between;}
  .sub-toggle{padding:8px 10px;}
  .caret{border-top-color:var(--navy);}
  .sub-menu{position:static;opacity:1;visibility:visible;transform:none;display:none;
            width:100%;min-width:0;box-shadow:none;border:0;border-left:2px solid var(--saffron);
            border-radius:0;margin:2px 0 6px;padding:2px 0 2px 10px;background:transparent;}
  .has-sub.open .sub-menu{display:block;}
  .has-sub:hover .sub-menu{display:none;}
  .has-sub.open:hover .sub-menu{display:block;}
  .sub-menu a{padding:8px 12px;}
}

/* ---- hub pages (About Uniq-AI / Digital Archives Pro) ----
   Anchor chip row that jumps to the sections on the page. */
.hub-nav{position:sticky;top:205px;z-index:800;background:rgba(255,255,255,.96);backdrop-filter:blur(6px);border-bottom:1px solid var(--border);padding:12px 0;}
.hub-nav-inner{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;}
.hub-chip{display:inline-block;padding:7px 15px;border:1px solid var(--border);border-radius:999px;font-size:.82rem;color:var(--text);text-decoration:none;transition:var(--transition);white-space:nowrap;}
.hub-chip:hover{background:var(--navy);color:#fff;border-color:var(--navy);}
/* the fixed navbar + sticky chip row would otherwise cover the anchor target */
.hub-section{scroll-margin-top:273px;}
.hub-section h2{font-size:clamp(1.5rem,2.4vw,2rem);color:var(--navy);margin:0 0 6px;}
.hub-lede{color:var(--text-muted);font-size:1.02rem;line-height:1.8;max-width:900px;}
.hub-bio{background:#fff;border:1px solid var(--border);border-left:3px solid var(--saffron);border-radius:var(--radius);padding:26px 28px;margin-bottom:20px;box-shadow:var(--shadow);}
.hub-bio h3{font-size:1.16rem;color:var(--navy);margin:0 0 3px;}
.hub-bio .hub-role{display:block;color:var(--saffron);font-size:.88rem;font-weight:600;margin-bottom:12px;}
.hub-bio p{color:var(--text-muted);line-height:1.78;margin:0 0 12px;font-size:.96rem;}
.hub-bio p:last-child{margin-bottom:0;}
.hub-sub{font-size:1.06rem;color:var(--navy);font-weight:600;margin:22px 0 8px;}
.disc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:10px;margin-top:16px;}
.disc-item{background:#fff;border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px 15px;font-size:.9rem;color:var(--text);display:flex;align-items:center;gap:9px;}
.disc-item:before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--saffron);}
@media(max-width:1080px){.hub-nav{top:0;position:relative;}.hub-section{scroll-margin-top:110px;}}

/* ---- contact form status + honeypot ----
   .hp-field is the Netlify spam honeypot: hidden from people, visible to bots.
   Kept out of the layout with position:absolute rather than display:none so
   bots that skip hidden fields still fill it in. */
.hp-field{position:absolute;left:-5000px;width:1px;height:1px;overflow:hidden;}
.form-note{margin-top:14px;font-size:.92rem;line-height:1.6;}
.form-note.is-ok{color:#1E7A4C;}
.form-note.is-err{color:#B3261E;}
.form-note a{color:var(--saffron);font-weight:600;}

/* ---- trust badge (contact page) ----
   The title and its description are a <strong> and a <span>, both inline, so
   they rendered butted together as "U.S. PerformanceResearch and engineering".
   Stack them. The icon is plain text "US" rather than the regional-indicator
   flag emoji, which Windows never renders as a flag - it falls back to the
   bare letters, which is what made the badge look broken. */
.trust-badge .tb-text{display:flex;flex-direction:column;gap:4px;}
/* Scope these to .tb-text. As .trust-badge strong/span they also matched the
   icon span, whose display:flex (which centres the mark) was overridden. */
.trust-badge .tb-text strong{display:block;}
.trust-badge .tb-text span{display:block;}
/* A small "US" set inside a 46px navy disc read as a placeholder avatar.
   Replaced with a shield-and-star mark: unambiguous next to the label, gold on
   navy (about 8:1), and an inline SVG so it renders identically everywhere -
   unlike the regional-indicator flag emoji, which Windows never draws. */
.trust-badge .trust-badge-icon{display:flex;align-items:center;justify-content:center;width:54px;height:54px;color:var(--gold);background:var(--navy);
  border:1px solid rgba(197,165,90,.45);box-shadow:0 2px 10px rgba(11,31,58,.18);}
.trust-badge .trust-badge-icon svg{width:26px;height:26px;display:block;}

/* ---- footer contact link ----
   The mailto: link had no colour rule at all, so it fell back to the browser
   default link blue (#0000EE) on the navy footer - 2.04:1, effectively
   unreadable. Gold on navy-deep measures about 8:1. */
.footer-contact-item a{color:var(--gold);text-decoration:none;border-bottom:1px solid rgba(197,165,90,.4);transition:var(--transition);}
.footer-contact-item a:hover{color:var(--saffron-light);border-bottom-color:var(--saffron-light);}

/* ---- footer legal block ----
   Two stacked lines (trademark, then copyright); kill the default paragraph
   margins so they read as one tight block rather than two paragraphs. */
.footer-bottom p{margin:0;line-height:1.75;}
.footer-bottom p + p{margin-top:2px;}

/* ---- floating news dock ----
   Both news strips are fixed to the BOTTOM of the viewport and stay put while
   the page scrolls: our curated ticker on top, the third-party AI Intelligence
   band beneath it.

   --dock-h MUST equal the dock's real rendered height. .newsdock-spacer uses
   it to reserve scroll space after the footer, so the footer can be scrolled
   clear of the bar instead of being permanently buried under it. That
   reserved strip sits exactly behind the opaque dock, so it is never visible.
   Desktop/tablet: ticker 44 + band 39 = 83. Phones (<=620px, where the band
   goes to two lines): 44 + 89 = 133.

   The reservation is a SPACER ELEMENT, not body{padding-bottom}: this
   stylesheet is shared by all 35 pages, and only the homepage has a dock.
   Padding on body left 83px of dead space under the footer of the other 34. */
:root{--dock-h:83px;}
.newsdock-spacer{height:var(--dock-h);}
.newsdock{position:fixed;left:0;right:0;bottom:0;z-index:900;box-shadow:0 -6px 26px rgba(0,0,0,.4);}
/* below the fixed navbar (z-index 1000) so the mobile menu still covers it */

/* ---- live headline ticker ---- */
.ticker{background:var(--navy-deep);border-bottom:1px solid rgba(200,134,27,.28);border-top:1px solid rgba(200,134,27,.18);overflow:hidden;}
.ticker-inner{display:flex;align-items:center;gap:16px;max-width:1200px;margin:0 auto;padding:0 24px;}
.ticker-badge{flex:none;background:var(--saffron);color:#fff;font-size:.66rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;padding:5px 11px;border-radius:3px;}
.ticker-viewport{overflow:hidden;flex:1;position:relative;height:42px;display:flex;align-items:center;}
.ticker-track{display:flex;align-items:center;gap:14px;white-space:nowrap;animation:tkscroll 58s linear infinite;will-change:transform;}
.ticker:hover .ticker-track{animation-play-state:paused;}
@keyframes tkscroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.tk-item{display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:var(--text-on-dark);font-size:.86rem;}
a.tk-item:hover .tk-text{color:var(--saffron-light);}
.tk-tag{color:var(--gold);font-size:.66rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;}
.tk-sep{color:rgba(200,134,27,.5);padding:0 6px;}
@media(prefers-reduced-motion:reduce){.ticker-track{animation:none;}}

/* ---- AI Intelligence band (third-party headlines) ----
   Sits directly BENEATH our own ticker and is deliberately subordinate to it:
   lighter background, outlined rather than filled label, smaller type.
   Third-party headlines must never read as DAP announcements.
   No margin-top here - the .ticker above already clears the fixed navbar. */
.aib{background:var(--navy);border-bottom:1px solid rgba(197,165,90,.22);overflow:hidden;}
.aib-inner{display:flex;align-items:center;gap:16px;max-width:1200px;margin:0 auto;padding:0 24px;}
.aib-badge{flex:none;display:inline-flex;align-items:center;gap:6px;border:1px solid rgba(197,165,90,.55);color:var(--gold);font-size:.6rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;padding:4px 9px;border-radius:3px;white-space:nowrap;}
.aib-dot{width:5px;height:5px;border-radius:50%;background:var(--gold);animation:aibpulse 2.6s ease-in-out infinite;}
@keyframes aibpulse{0%,100%{opacity:.35;}50%{opacity:1;}}
/* fixed height reserves space so nothing shifts when the fetch resolves */
.aib-viewport{flex:1;position:relative;height:38px;overflow:hidden;}
.aib-item{position:absolute;inset:0;display:flex;align-items:center;gap:10px;text-decoration:none;opacity:0;transition:opacity .5s ease;pointer-events:none;}
.aib-item.is-active{opacity:1;pointer-events:auto;}
.aib-src{flex:none;color:var(--gold);font-size:.62rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;}
.aib-title{color:var(--text-on-dark);font-size:.83rem;opacity:.9;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
a.aib-item:hover .aib-title{color:var(--saffron-light);opacity:1;}
.aib-nav{flex:none;display:flex;align-items:center;gap:5px;}
.aib-pip{width:5px;height:5px;padding:0;border:0;border-radius:50%;background:rgba(217,225,236,.3);cursor:pointer;transition:background .3s ease;}
.aib-pip.is-active{background:var(--gold);}
.aib-pip:focus-visible{outline:2px solid var(--saffron);outline-offset:2px;}
/* keyboard focus anywhere in the band pauses rotation - handled in JS too */
.aib-item:focus-visible{outline:2px solid var(--saffron);outline-offset:-2px;}
@media(max-width:860px){
  .aib-inner{gap:10px;padding:0 16px;}
  .aib-nav{display:none;}
  .aib-title{font-size:.78rem;}
}
/* Below ~620px a single row cannot hold label + publisher + headline without
   truncating the headline to uselessness. Stack instead: label on its own
   line, then publisher + headline across the full width, wrapped to 2 lines.
   The label MUST stay visible at every width - without it the band is an
   unlabelled pill and third-party news reads as our own. */
@media(max-width:620px){
  /* the band grows to two lines here, so the dock reservation grows with it */
  :root{--dock-h:133px;}
  .aib-inner{flex-direction:column;align-items:stretch;gap:5px;padding:9px 16px 11px;}
  .aib-badge{align-self:flex-start;font-size:.55rem;letter-spacing:.1em;}
  /* flex:none is REQUIRED. The base rule sets flex:1, which in this column
     container resolves to flex-basis:0 along the VERTICAL axis and collapsed
     the viewport to ~6px, the headline vanished while still being present
     in the DOM, so measurements looked fine and the band rendered empty. */
  .aib-viewport{flex:none;width:100%;height:38px;}
  .aib-item{align-items:flex-start;gap:8px;}
  .aib-src{padding-top:1px;}
  .aib-title{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.26;font-size:.78rem;}
}
@media(prefers-reduced-motion:reduce){
  .aib-dot{animation:none;opacity:.8;}
  .aib-item{transition:none;}
}

/* ---- patent-pending band ---- */
.patent-band{background:linear-gradient(90deg,var(--navy-light),var(--navy));color:var(--text-on-dark);padding:26px 0;border-bottom:2px solid var(--saffron);}
.pb-inner{display:flex;align-items:center;gap:22px;flex-wrap:wrap;}
.pb-mark{font-size:1.9rem;flex:none;filter:saturate(.4) brightness(1.6);}
.pb-text{flex:1 1 420px;}
.pb-eyebrow{display:block;color:var(--gold);font-size:.72rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;margin-bottom:5px;}
.pb-text p{margin:0;color:var(--text-on-dark);line-height:1.65;font-size:1rem;}
.pb-text strong{color:#fff;}

/* ---- engineering achievement stats ---- */
.section-stats{background:var(--bg);}
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(168px,100%),1fr));gap:18px;}
.stat{background:linear-gradient(160deg,var(--navy),var(--navy-light));border-radius:var(--radius);padding:26px 18px;text-align:center;box-shadow:var(--shadow);border:1px solid rgba(200,134,27,.22);}
.stat-num{display:block;font-family:var(--serif);font-size:2.05rem;line-height:1.12;color:var(--gold);margin-bottom:8px;}
/* Word-based stats ("Patent Pending", "Hardware Grounded") instead of a
   numeral. At the full 2.05rem the word "Grounded" renders 152px wide against
   a 136px inner box in the 6-across desktop layout and spilled outside the
   card. Sized off the LONGEST word so every word stat gets the same treatment
   and stays inside the box; page_home.py applies .stat-word automatically to
   any stat value containing letters. */
.stat-num.stat-word{font-size:1.65rem;line-height:1.2;}
.stat-label{display:block;color:var(--text-on-dark);font-size:.83rem;line-height:1.45;letter-spacing:.02em;}

/* ---- core invention cards (larger) ---- */
/* min(...,100%) is required: a bare minmax(310px,1fr) forces a 310px track
   even when the container is narrower, which pushed the page 10px wider than
   the viewport on a 320px phone and produced sideways scrolling. */
.invention-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(310px,100%),1fr));gap:22px;}
.invention-card{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--border);border-top:3px solid var(--saffron);border-radius:var(--radius);padding:32px 28px 26px;text-decoration:none;color:inherit;box-shadow:var(--shadow);transition:var(--transition);}
.invention-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:rgba(200,134,27,.5);border-top-color:var(--saffron-light);}
.inv-icon{font-size:1.6rem;margin-bottom:14px;}
/* no padding-right: the 01..08 number badge was removed so the section states
   no count, and the heading can use the full card width again */
.invention-card h3{font-size:1.2rem;color:var(--navy);margin:0 0 10px;line-height:1.3;}
.invention-card p{color:var(--text-muted);font-size:.95rem;line-height:1.7;margin:0 0 14px;}

/* ---- latest / "alive" cards ---- */
.latest-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr));gap:22px;align-items:stretch;}
.latest-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:28px 26px;box-shadow:var(--shadow);display:flex;flex-direction:column;}
.latest-featured{background:linear-gradient(155deg,var(--navy-deep),var(--navy));border-color:rgba(200,134,27,.3);}
/* The featured card sits on a navy gradient, so its text must be light.
   These use .latest-card.latest-featured (0,2,1) deliberately: the plain
   `.latest-featured h3` form ties with `.latest-card h3` on specificity
   (0,1,1) and LOSES on source order, which rendered the publication title in
   navy on a navy gradient - the "too dark" text. Same trap for the body copy.
   Keep both classes on these selectors. */
.latest-card.latest-featured h3,
.latest-card.latest-featured .latest-label{color:#fff;}
.latest-card.latest-featured p{color:var(--text-on-dark);}
.latest-card.latest-featured .latest-meta{color:var(--gold);}
.latest-card.latest-featured .latest-link{color:var(--saffron-light);}
.latest-card.latest-featured .latest-link:hover{color:#fff;}
.latest-label{display:block;color:var(--saffron);font-size:.7rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;margin-bottom:10px;}
.latest-card h3{font-size:1.18rem;color:var(--navy);margin:0 0 10px;line-height:1.32;}
.latest-card p{color:var(--text-muted);font-size:.95rem;line-height:1.7;margin:0 0 10px;}
.latest-meta{font-size:.85rem!important;color:var(--text-muted);font-style:italic;}
.latest-link{margin-top:auto;padding-top:12px;color:var(--saffron);font-weight:600;font-size:.9rem;text-decoration:none;}
.latest-link:hover{text-decoration:underline;}

/* ---- architecture diagrams ---- */
.diagram-grid{display:grid;gap:34px;}
.diagram{margin:0;display:grid;grid-template-columns:1.15fr .85fr;gap:30px;align-items:center;background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow);}
@media(max-width:900px){.diagram{grid-template-columns:1fr;}}
.diagram-frame{background:#fff;border:1px solid var(--border);border-radius:var(--radius-sm);padding:16px;display:flex;align-items:center;justify-content:center;}
.diagram-frame img{width:100%;height:auto;display:block;}
.diagram figcaption{padding:4px 0;}
.diagram-num{display:inline-block;background:var(--navy);color:var(--gold);font-size:.7rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding:4px 10px;border-radius:3px;margin-bottom:10px;}
.diagram h3{font-size:1.24rem;color:var(--navy);margin:0 0 10px;}
.diagram p{color:var(--text-muted);line-height:1.75;margin:0;font-size:.96rem;}

/* ---- status table ---- */
.status-table{max-width:860px;margin:0 auto;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;}
.st-row{display:grid;grid-template-columns:1fr auto;gap:18px;padding:14px 20px;border-bottom:1px solid var(--border);align-items:center;font-size:.95rem;}
.st-row:last-child{border-bottom:none;}
.st-head{background:var(--navy);color:#fff;font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:.76rem;}
.st-impl,.st-design,.st-mixed{font-size:.82rem;font-weight:700;padding:4px 11px;border-radius:999px;text-align:center;}
.st-impl{background:rgba(43,168,106,.12);color:#1E7A4B;}
.st-design{background:var(--saffron-soft);color:var(--saffron);}
.st-mixed{background:rgba(11,31,58,.07);color:var(--navy);font-weight:600;}
@media(max-width:640px){.st-row{grid-template-columns:1fr;gap:8px;}}

/* ---- patent filing card ---- */
.filing-card{background:linear-gradient(155deg,var(--navy-deep),var(--navy));color:var(--text-on-dark);border-radius:var(--radius-lg);padding:36px 38px;box-shadow:var(--shadow-lg);border:1px solid rgba(200,134,27,.3);}
.filing-head{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:16px;}
.filing-status{background:var(--saffron);color:#fff;font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding:5px 12px;border-radius:3px;}
.filing-type{background:rgba(255,255,255,.08);border:1px solid var(--border-dark);color:var(--text-on-dark);font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:5px 12px;border-radius:3px;}
.filing-card h3{color:#fff;font-size:1.3rem;line-height:1.4;margin:0 0 14px;}
.filing-card p{color:var(--text-on-dark);line-height:1.78;margin:0 0 18px;}
.filing-meta{display:flex;gap:26px;flex-wrap:wrap;padding-top:16px;border-top:1px solid var(--border-dark);margin-bottom:14px;}
.filing-meta span{font-size:.88rem;color:var(--text-on-dark-muted);}
.filing-meta strong{display:block;color:var(--gold);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:3px;}

/* ---- technology families ---- */
.family-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(272px,100%),1fr));gap:20px;}
.family-card{position:relative;background:#fff;border:1px solid var(--border);border-left:3px solid var(--saffron);border-radius:var(--radius-sm);padding:24px 22px;box-shadow:var(--shadow);}
.fam-num{font-family:var(--serif);font-size:1.1rem;color:var(--saffron);display:block;margin-bottom:6px;}
.family-card h3{font-size:1.06rem;color:var(--navy);margin:0 0 8px;line-height:1.35;}
.family-card p{color:var(--text-muted);font-size:.92rem;line-height:1.68;margin:0;}

/* ---- monogram series volumes ---- */
.volume-grid{display:grid;gap:22px;}
.volume-card{background:#fff;border:1px solid var(--border);border-top:3px solid var(--navy);border-radius:var(--radius);padding:30px 30px 26px;box-shadow:var(--shadow);}
.vol-head{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:10px;}
.vol-num{font-family:var(--serif);font-size:1.02rem;color:var(--saffron);letter-spacing:.06em;text-transform:uppercase;font-weight:700;}
.vol-count{font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);background:var(--bg-soft);border:1px solid var(--border);padding:4px 11px;border-radius:999px;}
.volume-card h3{font-size:1.42rem;color:var(--navy);margin:0 0 8px;}
.vol-scope{color:var(--text-muted);line-height:1.7;margin:0 0 16px;font-size:.98rem;}
.vol-empty{color:var(--text-muted);font-style:italic;font-size:.93rem;margin:0;padding:14px 16px;background:var(--bg-soft);border-radius:var(--radius-sm);border:1px dashed var(--border);}

/* ---- publication lists ---- */
.pub-list{list-style:none;margin:0;padding:0;display:grid;gap:12px;}
.pub-item{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:16px 18px;background:var(--bg-soft);border:1px solid var(--border);border-radius:var(--radius-sm);flex-wrap:wrap;}
.pub-body{flex:1 1 320px;}
.pub-item h4{font-size:1.04rem;color:var(--navy);margin:0 0 6px;line-height:1.4;}
.pub-item p{color:var(--text-muted);font-size:.93rem;line-height:1.65;margin:0 0 7px;}
.pub-meta{font-size:.8rem;color:var(--text-muted);letter-spacing:.03em;}
.pub-action{flex:none;background:var(--navy);color:#fff!important;text-decoration:none;font-size:.84rem;font-weight:700;padding:9px 16px;border-radius:var(--radius-sm);transition:var(--transition);}
.pub-action:hover{background:var(--saffron);}
.pub-forthcoming{flex:none;font-size:.76rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--saffron);background:var(--saffron-soft);border:1px solid rgba(200,134,27,.3);padding:6px 13px;border-radius:999px;}

/* ---- publication archive by category ---- */
.archive-jump{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:34px;justify-content:center;}
.chip-link{text-decoration:none;transition:var(--transition);cursor:pointer;}
.chip-link:hover{background:var(--saffron);color:#fff;border-color:var(--saffron);}
.archive-wrap{display:grid;gap:30px;}
.archive-cat{background:#fff;border:1px solid var(--border);border-left:3px solid var(--saffron);border-radius:var(--radius);padding:28px 28px 24px;box-shadow:var(--shadow);scroll-margin-top:120px;}
.cat-head{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:6px;flex-wrap:wrap;}
.cat-head h3{font-size:1.28rem;color:var(--navy);margin:0;}
.cat-count{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);background:var(--bg-soft);border:1px solid var(--border);padding:4px 11px;border-radius:999px;}
.cat-blurb{color:var(--text-muted);font-size:.95rem;line-height:1.68;margin:0 0 16px;}

/* contact */
.contact-split{display:grid;grid-template-columns:1.25fr .85fr;gap:44px;align-items:start;}
@media(max-width:860px){.contact-split{grid-template-columns:1fr;gap:34px;}}
.contact-form-wrap h2,.contact-info h2{font-size:1.42rem;color:var(--navy);margin:0 0 20px;}
.contact-form .form-group{margin-bottom:16px;}
.contact-form label{display:block;font-size:.86rem;font-weight:600;color:var(--navy);margin-bottom:6px;}
.contact-form input,.contact-form select,.contact-form textarea{width:100%;padding:11px 13px;border:1px solid var(--border);border-radius:var(--radius-sm);font-family:var(--sans);font-size:.95rem;color:var(--text);background:#fff;transition:var(--transition);}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{outline:none;border-color:var(--saffron);box-shadow:0 0 0 3px var(--saffron-soft);}
.contact-info .contact-item{border-bottom:1px solid var(--border);padding:14px 0;display:flex;flex-direction:column;gap:3px;}
.contact-info .contact-item strong{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);font-weight:700;}
.contact-info .contact-item a{color:var(--navy);text-decoration:none;font-weight:600;}
.contact-info .contact-item a:hover{color:var(--saffron);}

/* ============================================================
   ACCESSIBLE COLOUR OVERRIDES  (must stay LAST in this file)
   ------------------------------------------------------------
   These are last on purpose. Placed earlier they lose on source
   order to the site's own later declarations for .card-more,
   .tl-tag, .latest-label, .latest-link, .vol-num, .hub-role,
   .ticker-badge, .filing-status and .logo-motto, all of which
   set var(--saffron) again further down the sheet.
   .nav-cta is the one case needing !important: the base rule at
   the top of the stylesheet already declares
   `background: var(--saffron) !important`.
   Re-run the audit harness after touching this block.
   ============================================================ */
/* text and icons in saffron on light backgrounds */
.eyebrow,.card-more,.hub-role,.person-role,.latest-label,.latest-link,
.tl-tag,.tl-body a,.vol-num,.article-part,.prog-num,.prog-arrow,
.nav-links > li > a.active,.nav-links > li > a.nav-parent.active,
.hub-chip.is-active,.archive-cat h3 .cat-count,.form-note a,
.fp-topics .chip.is-key{color:var(--saffron-text);}

/* saffron used as a FILL behind white text */
.btn-primary,.nav-cta,.nav-cta.active,.ticker-badge,.filing-status,
.btn-primary:hover,.nav-cta:hover{background:var(--saffron-text);}
.btn-primary:hover,.nav-cta:hover{filter:brightness(1.08);}

/* The nav motto sits on the WHITE navbar where the wreath gold is only
   2.07:1. The FOOTER motto keeps the exact wreath colour (9.27:1 on
   navy) so the mark and its tagline still match where it matters. */
.logo-motto{color:var(--saffron-text);}


/* --saffron-text is a LIGHT-BACKGROUND tone. Applying it to elements sitting
   on navy makes things worse, not better: .eyebrow inside the dark .page-hero
   went from 5.41:1 (the original --saffron) down to 3.4:1. On dark, the
   correct token is --saffron-light #E0A22E, which is 7.37:1 on navy. */
.page-hero .eyebrow,.hero-research .eyebrow,.section-cta .eyebrow,
.featured-pub .eyebrow,.footer .eyebrow{color:var(--saffron-light);}

/* .hub-bio .hub-role (0,2,0) outranks a bare .hub-role. */
.hub-bio .hub-role,.person-card .person-role{color:var(--saffron-text);}

/* .nav-cta's base declaration is itself !important. */
.nav-cta,.nav-cta.active{background:var(--saffron-text) !important;}
.nav-cta:hover{background:var(--saffron-text) !important;filter:brightness(1.12);}

/* The FOOTER motto keeps the exact wreath gold (9.27:1 on navy). Only the
   nav copy, which sits on white at 2.07:1, moves to the accessible tone. */
.logo-motto{color:var(--saffron-text);}
.footer-motto{color:var(--wreath);}