/* ===== 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 ===== */
/* 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:140px 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 h3{font-size:1.16rem;color:var(--navy);margin:0 0 8px;line-height:1.35;}
.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) ---- */
.nav-logo{display:flex;align-items:center;gap:14px;text-decoration:none;}
.logo-mark{position:relative;display:inline-flex;align-items:center;}
.logo-mark img{height:78px;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;}
.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:60px;}
/* 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:62px;}}
.footer-logo{position:relative;display:inline-block;margin-bottom:14px;}
.footer-logo img{height:76px;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;}

/* ---- 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 UNIK AI / Digital Archives Pro) ----
   Anchor chip row that jumps to the sections on the page. */
.hub-nav{position:sticky;top:93px;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:160px;}
.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;}
.trust-badge strong{display:block;}
.trust-badge span{display:block;}
.trust-badge-icon{font-size:.82rem!important;font-weight:800;letter-spacing:.08em;color:var(--saffron-light);}

/* ---- 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);}