:root {
    --ink: #141414;
    --ink-soft: #4D4D4F;
    --blue: #0663AF;
    --blue-dark: #054E8A;
    --blue-deep: #04365F;
    --sky: #64ADD9;
    /* Fallback ground behind the hero photograph, sampled from
       building-web.webp (2048x1366). Its sky is a gradient averaging
       #3B73A2 — not flat — so this only prevents a flash before the image
       paints; the copy legibility comes from .hero-scrim, not from here. */
    --hero-sky: #3B73A2;
    --paper: #F2F2F2;
    --card: #FFFFFF;
    --soft-white: #F5F9FB;
    --surface: rgba(100, 173, 217, .10);
    --rule: rgba(77, 77, 79, .28);
    --dark: #141414;
    --on-dark: #F2F2F2;
    /* Brand colors sampled from the company logos. */
    --cfn: #0C9048;        /* Community Fiber */
    --cfn-dark: #0B7A3D;   /* Community Fiber, darkened — white text on the base green misses AA at small sizes */
    --qc: #D8303C;         /* Quality Cablevision */
    --qc-dark: #801921;    /* Quality Cablevision, darkened — same reduction as the other "-dark" tokens, for gradient ends */
    --simplify: #84C03C;   /* Simplify Tech */
    --simplify-dark: #507524;  /* Simplify, darkened — white text/fill on the base lime misses AA even at large sizes */
    --apg: #59A146;        /* Advanced Products Group, sampled from apg.png */
    --apg-dark: #3B6B2E;   /* APG, darkened — white text/fill on the base green misses AA (3.18:1) */
    /* Lighter gradient companions, formula lifted straight from
       communityfiber.net's own "Is fiber available" card
       (linear-gradient(45deg, --cfn-green, #a8e063)): saturation pulled to
       ~69% of the base and lightness raised to ~63%, hue held constant so
       each brand stays recognizably itself. cfn-light is literally their
       real value; the rest are the same S/L transform applied to our own
       base tokens (a literal hue-rotate copy of their green-to-yellow-green
       shift turns QC's red magenta and collapses Simplify/APG into the
       same tan, so the shift itself doesn't carry over — the S/L move
       does). */
    --cfn-light: #A8E063;
    --qc-light: #CE757C;
    --simplify-light: #A5C380;
    --apg-light: #93BB88;
    /* Same brand colours as translucent washes, for a colour "flare" over a
       real photo — one layer doing both the brand tint and the bottom
       scrim that keeps white text legible. */
    --cfn-flare: rgba(12, 144, 72, .5);
    --qc-flare: rgba(216, 48, 60, .5);
    --simplify-flare: rgba(132, 192, 60, .5);
    --simplify-teal: #16a6c9;
    /* Simplify's wordmark gradient (blue → teal → green). The green end is
       the wordmark's own #86C447, which is only ~2.1:1 on white — keep
       gradient text short and large so the blue/teal carries legibility. */
    --simplify-teal-ink: #0B7F95;
    --simplify-wordmark-green: #86C447;
    --simplify-accent: linear-gradient(90deg, var(--blue) 0%, var(--simplify-teal-ink) 50%, var(--simplify-wordmark-green) 100%);
    --apg-flare: rgba(89, 161, 70, .5);
    --danger: #b3261e;
    --font-heading: 'Montserrat', Arial, sans-serif;
    --font-body: 'Open Sans', Arial, sans-serif;
    --shell: min(1240px, 90%);
    --section-y: clamp(64px, 7vw, 104px);

    /* Compatibility aliases used by older operational pages. */
    --npt-blue: var(--blue);
    --npt-dark-blue: var(--blue-dark);
    --npt-lt-blue: #64ADD9;
    --npt-black: var(--ink);
    --npt-gray: var(--ink-soft);
    --npt-white: var(--paper);
    --npt-pure-white: var(--paper);
    --npt-navy: var(--dark);
    --npt-navy-deep: var(--dark);
    --npt-surface: var(--surface);
    --npt-surface-alt: rgba(100, 173, 217, .16);
    --npt-rule: var(--rule);
    --npt-rule-strong: rgba(77, 77, 79, .42);
    --npt-border: var(--rule);
    --npt-on-navy: var(--on-dark);
    --npt-label-navy: var(--sky);
    --npt-tint: rgba(100, 173, 217, .16);
    --npt-danger: var(--danger);
    --npt-warning: #9a5b00;
    --npt-success: #15783b;
    /* Rounded, softly-shadowed surfaces — shared with communityfiber.net so the
       parent reads as the same family, kept a touch more restrained than the
       retail site (flat fills, no glass, tighter motion). */
    --radius-sm: 8px;
    --radius: 12px;
    --radius-lg: 22px;
    --radius-xl: 32px;
    --radius-pill: 999px;
    --ease: cubic-bezier(.2, .8, .2, 1);
    --shadow-sm: 0 4px 12px -4px rgba(20, 20, 20, .1);
    --shadow-card: 0 12px 28px -10px rgba(20, 20, 20, .14), 0 3px 8px -3px rgba(20, 20, 20, .06);
    --shadow-card-hover: 0 24px 44px -14px rgba(20, 20, 20, .18), 0 8px 16px -6px rgba(20, 20, 20, .08);
    --shadow-pop: 0 30px 62px -22px rgba(20, 20, 20, .34);
    --shadow-action: 0 10px 22px -8px rgba(6, 99, 175, .4);
    --spacing-md: 2rem;
    --spacing-lg: 4rem;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { min-height: 100vh; background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: 16px; line-height: 1.7; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { color: var(--ink); font-family: var(--font-heading); font-weight: 700; line-height: 1.15; letter-spacing: -.02em; overflow-wrap: break-word; text-wrap: balance; }
p { text-wrap: pretty; }
a { color: inherit; }
img { display: block; max-width: 100%; }
.hidden { display: none !important; }
/* Accent text in Simplify's gradient. Solid blue is the fallback where
   background-clip: text isn't supported, and in forced-colors mode. */
.text-gradient-simplify {
    color: var(--blue);
    background: var(--simplify-accent);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
@media (forced-colors: active) {
    .text-gradient-simplify { background: none; -webkit-text-fill-color: currentColor; }
}
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}
.section-shell { width: var(--shell); margin-inline: auto; }
.container { width: var(--shell); max-width: none; margin-inline: auto; padding: 0; }

.skip-link { position: absolute; left: -9999px; top: 0; z-index: 3000; padding: 12px 18px; background: var(--blue); color: var(--paper); font-weight: 700; text-decoration: none; }
.skip-link:focus { left: 0; }

/* Site-wide announcement banner — outage notices, scheduled work, anything
   visitors should see before the nav. Admin-controlled (see admin.html);
   read through a Cloud Function, never Firestore directly, same pattern
   as the public team roster. Not sticky: it scrolls away with the page,
   so it never competes with the real sticky nav below it. */
.site-banner { position: relative; color: var(--paper); }
.site-banner-inner {
    max-width: var(--shell);
    margin: 0 auto;
    padding: 12px 48px 12px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.site-banner-icon { flex: none; width: 1.1rem; height: 1.1rem; }
.site-banner-icon svg { display: block; width: 100%; height: 100%; }
.site-banner-message { font-size: .92rem; font-weight: 600; line-height: 1.4; }
.site-banner-close {
    position: absolute;
    right: 12px;
    top: 50%;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    color: var(--paper);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    transform: translateY(-50%);
    transition: background-color .15s ease;
}
.site-banner-close:hover { background: rgba(255, 255, 255, .3); }
@media (max-width: 700px) {
    .site-banner-inner { padding: 10px 44px 10px 16px; }
    .site-banner-message { font-size: .85rem; }
}

/* Quiet quick-jump strip above the brand nav — one small logo per operating
   company, straight through to that company's site. Borrowed from
   intuit.com's header treatment: understated until you actually want it,
   never competing with the brand nav below it (not sticky, scrolls away). */
.utility-bar { background: var(--surface); border-bottom: 1px solid var(--rule); }
.utility-bar-inner {
    display: flex;
    align-items: center;
    gap: clamp(18px, 2.6vw, 32px);
    padding: 10px 5%;
}
.utility-logo {
    display: flex;
    align-items: center;
    opacity: 1;
    transition: opacity .2s ease, transform .2s var(--ease);
}
/* Hovering one logo grows it and dims its siblings, so it's obvious which
   one you're about to select. Nesting both rules under the same
   ".utility-bar-inner:hover" prefix keeps the "highlight the one you're on"
   rule strictly more specific than the "dim everyone" rule (one extra
   :hover), so it always wins regardless of source order. */
.utility-bar-inner:hover .utility-logo { opacity: .45; }
.utility-bar-inner:hover .utility-logo:hover,
.utility-bar-inner:hover .utility-logo:focus-visible { opacity: 1; transform: scale(1.08) translateY(-1px); }
.utility-logo img { height: 26px; width: auto; max-width: 130px; object-fit: contain; }

.navbar { position: sticky; top: 0; z-index: 1000; display: flex; align-items: center; justify-content: space-between; min-height: 82px; padding: 0 5%; background: var(--paper); border-bottom: 1px solid var(--rule); }
.logo-container { display: flex; align-items: center; text-decoration: none; }
.logo-img { width: auto; height: 45px; }
.nav-links { display: flex; align-items: center; gap: clamp(10px, 1vw, 16px); margin-left: auto; list-style: none; }
.nav-links a { position: relative; display: block; padding: 30px 0 27px; color: var(--ink); font-family: var(--font-heading); font-size: .78rem; font-weight: 700; text-decoration: none; transition: color .2s ease; }
.nav-links a::after { content: ''; position: absolute; right: 0; bottom: 24px; left: 0; height: 2px; background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform .2s ease; }
.nav-links a:hover::after { transform: scaleX(1); }
/* The current page is just blue text, not an underline — keeps the
   underline meaning one thing only (hover), rather than doing double duty
   for "here" and "you're pointing at this". */
.nav-links a[aria-current='page'] { color: var(--blue); }
.nav-dropdown { position: relative; }
.nav-trigger {
    position: relative;
    display: block;
    padding: 30px 0 27px;
    border: 0;
    background: none;
    color: var(--ink);
    font-family: var(--font-heading);
    font-size: .78rem;
    font-weight: 700;
    line-height: inherit;
    cursor: pointer;
}
.nav-trigger::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 24px;
    left: 0;
    height: 2px;
    background: var(--blue);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .2s ease;
}
.nav-trigger:hover::after,
.nav-trigger[aria-current='page']::after,
.nav-dropdown.is-open .nav-trigger::after { transform: scaleX(1); }

.nav-menu {
    position: absolute;
    top: calc(100% - 6px);
    left: 50%;
    z-index: 20;
    width: 292px;
    padding: 8px;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-top: 2px solid var(--blue);
    border-radius: var(--radius);
    box-shadow: 0 14px 38px -10px rgba(20, 20, 20, .28);
    list-style: none;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(-8px);
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.nav-dropdown.is-open .nav-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}
.nav-menu li { --company-menu-color: var(--blue); border-left: 4px solid var(--company-menu-color); }
.nav-menu li + li { margin-top: 2px; }
.company-menu .company-menu-cfn { --company-menu-color: var(--cfn); }
.company-menu .company-menu-qc { --company-menu-color: var(--qc); }
.company-menu .company-menu-simplify { --company-menu-color: var(--simplify); }
.company-menu .company-menu-apg { --company-menu-color: var(--apg); }
.nav-menu a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 11px 14px;
    color: var(--ink);
    font-family: var(--font-heading);
    font-size: .8rem;
    font-weight: 700;
    line-height: 1.3;
    text-decoration: none;
    transition: background-color .15s ease;
}
.nav-menu a::after {
    content: '\2197';
    flex: none;
    position: static;
    width: auto;
    height: auto;
    background: none;
    color: var(--ink-soft);
    font-weight: 700;
    transform: none;
    transition: transform .15s ease;
}
.nav-menu a:not([target])::after { content: '\203A'; font-size: 1.25em; }
.nav-menu a:hover { background: var(--surface); }
.nav-menu a:hover::after { transform: translate(2px, -2px); }
.company-menu .company-menu-label { flex: 1; min-width: 0; }
.service-menu { width: 370px; }
.service-menu .service-menu-cfn { --company-menu-color: var(--cfn); }
.service-menu .service-menu-qc { --company-menu-color: var(--qc); }
.service-menu .service-menu-simplify { --company-menu-color: var(--simplify); }
.service-menu .service-menu-apg { --company-menu-color: var(--apg); }
.service-menu .service-menu-local { --company-menu-color: var(--blue); margin-top: 8px; border-top: 1px solid var(--rule); }
.service-menu a > span { display: grid; gap: 2px; min-width: 0; }
.service-menu strong { font: inherit; }
.service-menu small { color: var(--ink-soft); font-family: var(--font-body); font-size: .72rem; font-weight: 500; }
.mobile-menu-btn { display: none; position: relative; width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer; }
.mobile-menu-btn span { position: absolute; left: 10px; width: 24px; height: 2px; background: var(--ink); transition: transform .2s, top .2s; }
.mobile-menu-btn span:first-child { top: 17px; }
.mobile-menu-btn span:last-child { top: 25px; }
.mobile-menu-btn.active span:first-child { top: 21px; transform: rotate(45deg); }
.mobile-menu-btn.active span:last-child { top: 21px; transform: rotate(-45deg); }

.nav-actions { display: flex; align-items: center; gap: clamp(8px, 1.4vw, 16px); margin-left: clamp(16px, 2.5vw, 34px); }

.page-header { padding: clamp(72px, 8vw, 112px) 5% clamp(64px, 7vw, 96px); background: var(--paper); border-bottom: 1px solid var(--rule); text-align: left; }
.page-header .header-title { max-width: 960px; color: var(--ink); font-size: clamp(3rem, 5.5vw, 5.25rem); font-weight: 700; line-height: 1.06; }
.page-header .header-subtitle { max-width: 680px; margin-top: 26px; color: var(--ink-soft); font-size: clamp(1rem, 1.4vw, 1.18rem); line-height: 1.65; }
.header-eyebrow, .section-label, .page-label, .eyebrow { display: none; }

.text-link { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); font-family: var(--font-heading); font-size: .9rem; font-weight: 700; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 5px; }
.text-link::after { content: '\203A'; font-size: 1.25em; }
.text-link:hover { color: var(--blue); }
.text-link i { display: none; }

.btn-action, .button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 28px; border: 1px solid transparent; border-radius: var(--radius-pill); font-family: var(--font-heading); font-size: .88rem; font-weight: 700; text-decoration: none; transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s var(--ease); }
.btn-action { background: var(--blue); color: var(--paper); box-shadow: var(--shadow-action); }
.btn-action:hover { background: var(--blue-dark); color: var(--paper); transform: translateY(-2px); box-shadow: 0 16px 30px -10px rgba(6, 99, 175, .5); }
.btn-action:active { transform: translateY(0); }
.btn-action i, .button i { display: none; }

footer { padding: 52px 5%; background: var(--dark); color: var(--on-dark); text-align: left; }
.footer-content { width: var(--shell); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.footer-links { display: flex; gap: 28px; flex-wrap: wrap; }
.footer-links a { color: var(--paper); font-size: .86rem; text-decoration: none; }
.footer-links a:hover { text-decoration: underline; }


.consent-banner { position: fixed; right: 20px; bottom: 20px; z-index: 4500; width: min(370px, calc(100% - 40px)); padding: 18px; background: var(--card); color: var(--ink); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow-pop); }
.consent-banner[hidden] { display: none; }
.consent-banner p { margin-bottom: 14px; font-size: .875rem; line-height: 1.5; }
.consent-banner a { color: var(--blue-dark); font-weight: 700; }
.consent-actions { display: flex; justify-content: flex-end; gap: 10px; }
.consent-btn { min-height: 42px; padding: 9px 15px; border: 1px solid var(--blue); border-radius: var(--radius-sm); background: var(--card); color: var(--blue-dark); font: 700 .82rem var(--font-body); cursor: pointer; transition: background-color .2s ease, border-color .2s ease, color .2s ease; }
.consent-btn:hover { background: var(--surface); }
.consent-analytics { background: var(--blue); color: var(--paper); }
.consent-analytics:hover { background: var(--blue-dark); border-color: var(--blue-dark); }
.privacy-choices-button { position: fixed; bottom: 10px; left: 10px; z-index: 1900; min-height: 30px; padding: 5px 11px; border: 1px solid var(--rule); border-radius: var(--radius-pill); background: var(--card); color: var(--ink-soft); box-shadow: var(--shadow-sm); font: 600 .72rem var(--font-body); cursor: pointer; }
.privacy-choices-button:hover { color: var(--blue-dark); border-color: var(--blue); }
.form-privacy-notice { margin-top: 15px; color: var(--ink-soft); font-size: .82rem; }

@media (max-width: 560px) {
    /* Full-size, this eats close to a third of a phone screen — cuts the
       padding and copy down so it reads as a quick banner, not a modal
       blocking the page. */
    .consent-banner { right: 12px; bottom: 48px; left: 12px; width: auto; padding: 16px; }
    .consent-banner p { margin-bottom: 12px; font-size: .84rem; line-height: 1.4; }
    .consent-actions { align-items: stretch; }
    .consent-btn { flex: 1; padding: 9px 10px; font-size: .78rem; }

    /* A logo sliced clean off at the viewport edge reads as broken, not as
       "scroll for more". Fade the last ~30px to transparent instead — the
       same soft cue app-store rows and carousels use. */
    .utility-bar-inner {
        overflow-x: auto;
        scrollbar-width: none;
        gap: 22px;
        padding-right: 30px;
        -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 30px), transparent 100%);
        mask-image: linear-gradient(90deg, #000 calc(100% - 30px), transparent 100%);
    }
    .utility-bar-inner::-webkit-scrollbar { display: none; }
    .utility-logo { flex: 0 0 auto; }
}

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

@media (max-width: 920px) {
    .mobile-menu-btn { display: block; }
    .nav-links { display: none; position: absolute; top: 100%; right: 0; left: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 18px 5% 28px; background: var(--paper); border-bottom: 1px solid var(--rule); }
    .nav-links.active { display: flex; }
    .nav-links a { padding: 13px 0; font-size: 1rem; }
    .nav-links a::after { bottom: 8px; right: auto; width: 36px; }
    .nav-dropdown { position: static; }
    .nav-trigger { padding: 13px 0; font-size: 1rem; }
    .nav-trigger::after { bottom: 8px; right: auto; left: 0; width: 36px; }
    .nav-menu {
        position: static; width: 100%; margin: 2px 0 10px; padding: 6px 0 6px 14px;
        border: 0; border-left: 1px solid var(--rule); border-radius: 0; box-shadow: none;
        transition: none;
    }
    .nav-dropdown .nav-menu,
    .nav-dropdown.is-open .nav-menu {
        opacity: 1; visibility: visible; transform: none; pointer-events: auto;
    }
    .nav-dropdown:not(.is-open) .nav-menu { display: none; }
    .nav-menu a { padding: 11px 14px; font-size: .95rem; }
    .nav-menu a::after { display: none; }
    .service-menu small { font-size: .78rem; }
}

@media (max-width: 700px) {
    body { font-size: 16px; }
    .navbar { min-height: 74px; }
    .logo-img { height: 38px; }
    .page-header { padding-top: 58px; padding-bottom: 58px; }
    .page-header .header-title { font-size: clamp(2.35rem, 10.5vw, 3.35rem); line-height: 1.1; }
    .page-header .header-subtitle { margin-top: 20px; }
    .footer-content { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .001ms !important; }
}

/* ==========================================================================
   Brand rule — the four company groups as one line. Repeated under the
   masthead on every page and above the contact band, so the group's identity
   is stated without a sentence. Decorative only: aria-hidden, and it never
   carries information on its own.
   ========================================================================== */
.brand-rule {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    height: 5px;
    background: var(--paper);
}

.brand-rule span:nth-child(1) { background: var(--cfn); }
.brand-rule span:nth-child(2) { background: var(--qc); }
.brand-rule span:nth-child(3) { background: var(--simplify); }
.brand-rule span:nth-child(4) { background: var(--blue); }

/* Slightly heavier where it closes a section rather than the masthead. */
.brand-rule-thick { height: 7px; }

/* ==========================================================================
   Service router — a dialog that routes a visitor to the operating company
   for what they came for. Built and driven by js/router.js; opened from any
   [data-router-open] element. The blue top edge and per-row subsidiary rules
   match the nav dropdown; the one shadow is modal elevation.
   ========================================================================== */
.router-modal {
    position: fixed;
    inset: 0;
    z-index: 4000;
    display: grid;
    place-items: center;
    padding: clamp(14px, 4vw, 40px);
    background: rgba(20, 20, 20, 0);
    transition: background .22s ease;
}
.router-modal[hidden] { display: none; }
.router-modal.is-open { background: rgba(20, 20, 20, .58); }

.router-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(620px, 100%);
    max-height: min(90vh, 780px);
    background: var(--paper);
    border-top: 3px solid var(--blue);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-pop);
    opacity: 0;
    transform: translateY(14px) scale(.985);
    transition: opacity .24s ease, transform .24s var(--ease);
}
.router-modal.is-open .router-panel { opacity: 1; transform: none; }
.router-panel:focus { outline: none; }

.router-close {
    position: absolute;
    top: 14px;
    right: 14px;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--rule);
    border-radius: var(--radius-pill);
    background: var(--paper);
    color: var(--ink);
    cursor: pointer;
    transition: background .2s ease;
}
.router-close:hover { background: var(--surface); }
.router-close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

.router-head {
    flex: none;
    padding: clamp(30px, 5vw, 44px) clamp(24px, 5vw, 44px) 22px;
    border-bottom: 1px solid var(--rule);
}
.router-mark { width: auto; height: 24px; margin-bottom: 20px; }
.router-head h2 {
    max-width: 22ch;
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 3.4vw, 2rem);
    font-weight: 800;
    line-height: 1.15;
}
.router-sub {
    max-width: 46ch;
    margin-top: 12px;
    color: var(--ink-soft);
    font-size: .98rem;
    line-height: 1.6;
}
.router-tasks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.router-task {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 16px;
    border: 1px solid var(--rule);
    border-radius: var(--radius-pill);
    color: var(--ink);
    font-family: var(--font-heading);
    font-size: .78rem;
    font-weight: 700;
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease;
}
.router-task::after { content: '\203A'; margin-left: 7px; color: var(--ink-soft); }
.router-task:hover { background: var(--surface); border-color: var(--blue); }

.router-list { flex: 1; min-height: 0; overflow-y: auto; list-style: none; }
.router-opt { --router-color: var(--blue); border-left: 4px solid var(--router-color); }
.router-opt + .router-opt { border-top: 1px solid var(--rule); }
.router-opt--cfn { --router-color: var(--cfn); }
.router-opt--qc { --router-color: var(--qc); }
.router-opt--simplify { --router-color: var(--simplify); }
.router-opt--apg { --router-color: var(--apg); }
.router-opt a {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 17px clamp(20px, 5vw, 40px) 17px clamp(16px, 4vw, 28px);
    text-decoration: none;
    transition: background-color .15s ease;
}
.router-opt a:hover, .router-opt a:focus-visible { background: var(--surface); }
.router-opt-text { flex: 1; min-width: 0; }
.router-opt-name {
    display: block;
    color: var(--ink);
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
}
.router-opt a:hover .router-opt-name { color: var(--blue); }
.router-opt-desc {
    display: block;
    margin-top: 3px;
    color: var(--ink-soft);
    font-size: .88rem;
    line-height: 1.45;
}
.router-opt-co {
    flex: none;
    color: var(--ink-soft);
    font-family: var(--font-heading);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    text-align: right;
}
.router-opt a::after {
    content: '\2197';
    flex: none;
    color: var(--ink-soft);
    font-weight: 700;
    transition: transform .15s ease;
}
.router-opt--internal a::after { content: '\203A'; }
.router-opt a:hover::after { transform: translate(2px, -2px); }
.router-opt--internal a:hover::after { transform: translateX(3px); }

.router-foot {
    flex: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 18px;
    padding: 18px clamp(24px, 5vw, 44px);
    border-top: 1px solid var(--rule);
    color: var(--ink-soft);
    font-size: .86rem;
}
.router-foot a { color: var(--blue); font-weight: 700; text-decoration: none; border-bottom: 1px solid currentColor; }
.router-dismiss {
    padding: 0;
    border: 0;
    background: none;
    color: var(--ink-soft);
    font-family: var(--font-body);
    font-size: .86rem;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
.router-dismiss:hover { color: var(--ink); }

body.router-open { overflow: hidden; }

@media (max-width: 480px) {
    .router-opt-co { display: none; }
}

/* Form fallback: shown only when a submission saved but the staff email
   definitely failed (js/lead-email-fallback.js). Red rule for urgency; the
   text stays ink so it reads at full contrast. */
.lead-alert { padding: 20px 22px; border-left: 4px solid var(--danger); border-radius: var(--radius-sm); background: var(--card); color: var(--ink); text-align: left; }
.lead-alert h3 { margin-bottom: 8px; font-size: 1.2rem; }
.lead-alert p { color: var(--ink); line-height: 1.6; }
.lead-alert a { color: var(--ink); font-weight: 700; text-underline-offset: 3px; white-space: nowrap; }