/* WV Communications Custom Styles - Dark Theme with Purple Accents */

/* ============================================
   COLOR SCHEME & DARK THEME
   ============================================ */

:root {
    /* WV Purple Brand Colors */
    --wv-purple-dark: #770099;
    --wv-purple: #9900BB;
    --wv-purple-light: #BB00DD;
    --wv-purple-glow: rgba(204, 0, 136, 0.3);

    /* Dark Theme Colors */
    --background-dark: #0f0f0f;
    --background-medium: #1a1a1a;
    --background-card: #222222;
    --background-elevated: #2a2a2a;

    --text-primary: #e8e8e8;
    --text-secondary: #b0b0b0;
    --text-muted: #808080;

    --border-color: #333333;
    --border-color-light: #404040;

    /* Override Pico.css variables for dark theme */
    --primary: var(--wv-purple);
    --primary-hover: var(--wv-purple-light);
    --primary-focus: var(--wv-purple-glow);

    --background-color: var(--background-dark);
    --card-background-color: var(--background-card);
    --card-sectioning-background-color: var(--background-medium);

    --color: var(--text-primary);
    --h1-color: var(--text-primary);
    --h2-color: var(--text-primary);
    --h3-color: var(--text-primary);
    --h4-color: var(--text-primary);
    --h5-color: var(--text-primary);
    --h6-color: var(--text-primary);

    --muted-color: var(--text-muted);
    --muted-border-color: var(--border-color);

    /* Spacing */
    --spacing: 1rem;
    --typography-spacing-vertical: 1.5rem;
}

/* Pico v2 table overrides — Pico defines table-related variables INSIDE
   the [data-theme=dark] scope (which baseof.html hardcodes), so we need to
   override at the same specificity. Pulls slate tint out, uses site grays.
   Cell backgrounds use --pico-background-color directly (no table var),
   so we override td/th explicitly. */
[data-theme="dark"] {
    --pico-table-border-color: var(--border-color);
    --pico-table-row-stripped-background-color: var(--background-elevated);
}

[data-theme="dark"] td,
[data-theme="dark"] th {
    background-color: var(--background-card);
}

/* Force dark color scheme */
[data-theme="light"],
:root:not([data-theme="dark"]) {
    --background-color: var(--background-dark);
    --color: var(--text-primary);
}

/* ============================================
   TYPOGRAPHY IMPROVEMENTS
   ============================================ */

/* overflow-x clamp lives on html, not body — body would create a scroll context that breaks position: sticky */
html {
    overflow-x: hidden;
}

body {
    font-size: 16px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: var(--background-dark);
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.3;
}

h1 {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
}

h2 {
    font-size: 2rem;
    margin-bottom: 1.25rem;
    margin-top: 2.5rem;
}

h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    margin-top: 2rem;
}

/* Mobile typography */
@media (max-width: 768px) {
    body {
        font-size: 15px;
    }

    h1 {
        font-size: 2rem;
    }

    h2 {
        font-size: 1.75rem;
    }

    h3 {
        font-size: 1.35rem;
    }
}

/* ============================================
   HEADER & NAVIGATION
   ============================================ */

body > header {
    background: linear-gradient(135deg, var(--background-medium) 0%, var(--background-dark) 100%);
    border-bottom: 2px solid var(--wv-purple);
    padding: 0.25rem 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    position: sticky;
    top: 0;
    z-index: 100;
}

header nav {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

header nav ul {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.nav-menu {
    display: flex;
    gap: 0.25rem;
}

.nav-menu li a,
.nav-menu li details.dropdown summary {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    white-space: nowrap;
}

/* Logo and site title */
.logo-link {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-right: 2rem;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.logo-link:hover {
    opacity: 0.85;
}

.site-logo {
    height: 34px;
    width: auto;
    display: block;
}

.site-title {
    font-size: 1.5rem;
    letter-spacing: -0.02em;
    font-weight: 700;
    white-space: nowrap;
    background: linear-gradient(135deg, var(--wv-purple-light), var(--wv-purple));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: inherit;
}

/* Fallback for older browsers that don't support background-clip */
@supports not (background-clip: text) {
    .site-title {
        color: var(--wv-purple-light);
    }
}

/* Mobile logo sizing */
@media (max-width: 768px) {
    .site-logo {
        height: 28px;
    }

    .site-title {
        font-size: 1.25rem;
    }
}

/* Main navigation links */
header nav ul li a,
header nav ul li details.dropdown summary {
    color: var(--text-secondary);
    transition: color 0.2s ease, border-color 0.2s ease;
    border-bottom: 2px solid transparent;
    padding-bottom: 0.25rem;
    text-decoration: none;
}

header nav ul li a:hover,
header nav ul li a[aria-current="page"],
header nav ul li details.dropdown summary:hover {
    color: var(--wv-purple-light);
    border-bottom-color: var(--wv-purple-light);
}

/* Hamburger Menu for Mobile */
.mobile-menu-toggle {
    display: none;
}

.mobile-menu-icon {
    display: none !important;
}

.mobile-menu-icon span {
    display: block;
    width: 24px;
    height: 2px;
    background-color: var(--text-primary);
    margin: 5px 0;
    transition: 0.3s;
}

/* Mobile navigation */
@media (max-width: 1024px) {
    .mobile-menu-icon {
        display: block !important;
        cursor: pointer;
        padding: 0.5rem;
    }

    header nav {
        position: relative;
    }

    header nav ul:first-child {
        flex: 1;
    }

    .site-title {
        font-size: 1.25rem;
    }

    .nav-menu {
        display: none;
        position: absolute;
        top: calc(100% + 1rem);
        left: 0;
        right: 0;
        background: var(--background-elevated);
        border: 1px solid var(--wv-purple);
        border-radius: 8px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
        flex-direction: column;
        /* Pico v2 sets align-items:center on nav ul, which centers items
           horizontally when flex-direction is column. Override with stretch
           so menu buttons fill the panel width and text is left-aligned. */
        align-items: stretch;
        padding: 0.5rem 0;
        z-index: 1000;
    }

    .nav-menu li {
        width: 100%;
    }

    /* Gap between buttons + breathing room from the panel edges.
       width:auto overrides the earlier 100% so the side margin is visible.
       Strip Pico's nav-li padding (which is wider for <li> wrapping a
       <details.dropdown>, making those buttons appear narrower). */
    .nav-menu > li {
        margin: 0.3rem 0.75rem;
        width: auto;
        padding: 0 !important;
    }

    /* Make the dropdown wrapper fill its <li> with no Pico-added margins. */
    .nav-menu > li > details.dropdown {
        display: block;
        width: 100%;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Each top-level menu item renders as its own dark button card against
       the lighter panel background. display:flex + align-items:center
       vertically centers content (text + dropdown chevron) consistently
       across <a> and <summary>. Excludes nested dropdown sub-items
       (Products → Flight Termination Systems) which keep flat styling. */
    .nav-menu > li > a:not(.nav-cta),
    .nav-menu > li > details.dropdown > summary {
        display: flex !important;
        align-items: center;
        justify-content: flex-start;
        text-align: left;
        padding: 0.9rem 1.25rem !important;
        margin: 0 !important;
        font-size: 1.1rem;
        min-height: 3rem;
        box-sizing: border-box;
        background-color: var(--background-medium) !important;
        border-radius: 10px !important;
        border: none !important;
        border-bottom: none !important;
        transition: background-color 0.15s ease, color 0.15s ease;
    }

    /* Brighter hover/focus state for tap-target feedback. */
    .nav-menu > li > a:not(.nav-cta):hover,
    .nav-menu > li > a:not(.nav-cta):focus,
    .nav-menu > li > details.dropdown > summary:hover,
    .nav-menu > li > details.dropdown > summary:focus {
        background-color: var(--background-card) !important;
        color: var(--wv-purple-light) !important;
    }

    .mobile-menu-toggle:checked ~ .nav-menu {
        display: flex;
    }
}

/* Header "Request a Quote" CTA button (top right) — purple outline style */
.nav-menu li a.nav-cta {
    background: transparent;
    color: var(--wv-purple-light);
    padding: 0.35rem 1.1rem;
    margin-left: 0.5rem;
    border-radius: 6px;
    border: 2px solid var(--wv-purple) !important;
    font-weight: 600;
    white-space: nowrap;
    transition: background 0.2s ease, color 0.2s ease;
}

.nav-menu li a.nav-cta:hover {
    background: var(--wv-purple);
    color: #fff !important;
    border-color: var(--wv-purple) !important;
}

/* In the mobile dropdown, render it as a full-width centered button
   matching the height/shape of the other menu items above. */
@media (max-width: 1024px) {
    .nav-menu li a.nav-cta {
        display: flex !important;
        align-items: center;
        justify-content: center;
        margin: 0.3rem 0.75rem !important;
        padding: 0.9rem 1.25rem !important;
        min-height: 3rem;
        font-size: 1.1rem;
        text-align: center;
        border-radius: 10px !important;
        white-space: nowrap;
        box-sizing: border-box;
    }

    /* Bump the dropdown chevron size on mobile — currently small relative
       to the larger button text. */
    .nav-menu > li > details.dropdown > summary::after {
        width: 1rem !important;
        height: 1rem !important;
        margin-inline-start: 0.5rem !important;
    }
}

/* ============================================
   DROPDOWN MENU (Products)
   ============================================ */

details.dropdown {
    position: relative;
}

details.dropdown summary {
    list-style: none;
    cursor: pointer;
    /* Aggressively override ALL Pico.css <summary> styling */
    background: none !important;
    background-color: transparent !important;
    color: var(--text-secondary) !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-weight: normal !important;
    outline: none !important;
}

details.dropdown summary:hover {
    color: var(--wv-purple-light) !important;
}

/* Desktop-only: remove padding; inline-flex keeps the label and the
   Pico chevron on one centered line instead of letting the chevron wrap. */
@media (min-width: 1025px) {
    details.dropdown summary {
        padding: 0 !important;
        width: auto !important;
        display: inline-flex !important;
        align-items: center !important;
        white-space: nowrap !important;
    }
}

/* Override Pico.css hover/focus/active states for summary */
details.dropdown summary:hover,
details.dropdown summary:focus,
details.dropdown summary:active {
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

details.dropdown summary::-webkit-details-marker,
details.dropdown summary::marker {
    display: none !important;
}

/* Pico's dropdown chevron is display:block + float:right, so it drops to its
   own line when the nav tightens. Force it inline, locked beside the label. */
details.dropdown summary::after {
    float: none !important;
    display: inline-block !important;
    vertical-align: middle !important;
    width: 0.65rem !important;
    height: 0.65rem !important;
    margin-inline-start: 0.3rem !important;
    background-position: center !important;
    background-size: contain !important;
}

details.dropdown ul {
    position: absolute;
    background: linear-gradient(135deg, var(--background-card) 0%, var(--background-elevated) 100%);
    border: 1px solid var(--wv-purple);
    border-radius: 8px;
    padding: 0.5rem 0;
    margin-top: 0.5rem;
    min-width: 280px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    z-index: 1000;
    left: 0;
}

details.dropdown li {
    padding: 0;
    list-style: none;
}

details.dropdown li a {
    display: block;
    padding: 0.75rem 1.25rem;
    text-decoration: none !important;
    color: var(--text-secondary);
    transition: background-color 0.15s ease, color 0.15s ease;
    border-bottom: none !important;
}

details.dropdown li a:hover,
details.dropdown li a:focus,
details.dropdown > summary + ul li a:hover,
details.dropdown > summary + ul li a:focus {
    background-color: var(--background-medium) !important;
    color: var(--wv-purple-light) !important;
}

/* ATTEMPT: Mobile inline submenu — expand sub-items inline within the
   hamburger panel instead of as a floating overlay. The previous tries
   failed because Pico's display:flex/opacity:0 defaults fought native
   <details> visibility. Fix: force position:static, use [open] attribute
   alone to control visibility via display:none/flex, keep Pico's
   flex-direction:column so items stack as a vertical list. */
@media (max-width: 1024px) {
    /* Override the floating overlay treatment — strip absolute positioning,
       card chrome, and Pico's opacity-fade. Use position:relative + z-index
       so the dropdown UL is its own stacking context above the surrounding
       static menu items (which is what was blocking mouse events). */
    details.dropdown > summary + ul,
    details.dropdown ul {
        position: relative !important;
        z-index: 10 !important;
        width: auto !important;
        min-width: 0 !important;
        margin: 0.5rem 0 0.5rem 1rem !important;
        padding: 0 !important;
        border: none !important;
        border-left: 2px solid var(--wv-purple) !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
        background-color: transparent !important;
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        flex-direction: column !important;
        /* Override Pico's nav ul { align-items: center } that centers
           flex items horizontally when flex-direction is column. */
        align-items: stretch !important;
        pointer-events: auto !important;
    }

    /* Visibility purely by [open] attribute. */
    details.dropdown:not([open]) > summary + ul,
    details.dropdown:not([open]) > ul {
        display: none !important;
    }

    details.dropdown[open] > summary + ul,
    details.dropdown[open] > ul {
        display: flex !important;
    }

    /* Sub-items — force pointer-events and full link width, override
       any Pico flex sizing that might collapse them. */
    details.dropdown li {
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        pointer-events: auto !important;
    }

    details.dropdown li a {
        display: block !important;
        margin: 0 !important;
        padding: 0.6rem 1.25rem !important;
        border-left: none !important;
        pointer-events: auto !important;
    }
}

/* Force the dropdown overlay to be fully opaque — Pico's slate
   --pico-dropdown-background-color was bleeding through with reduced
   opacity transition. Use solid --background-card with no fade.
   Also add a thicker left border for a single continuous purple accent
   line down the full length of the dropdown. */
details.dropdown > summary + ul,
details.dropdown ul {
    background: var(--background-card) !important;
    background-color: var(--background-card) !important;
    opacity: 1 !important;
    transition: none !important;
    border-left-width: 3px !important;
    border-left-color: var(--wv-purple) !important;
    border-left-style: solid !important;
}

/* ============================================
   MAIN CONTENT AREA
   ============================================ */

main {
    min-height: 70vh;
}

main.container {
    max-width: 1700px;
    /* Darker "page" color — contrasts against body's lighter edges */
    background-color: var(--background-dark);
    /* Scale horizontal padding with viewport so product cards always have breathing room */
    padding-left: clamp(1rem, 4vw, 4rem);
    padding-right: clamp(1rem, 4vw, 4rem);
    /* Flush with the header (no Pico top padding) — hero image sits directly under the purple border */
    padding-top: 0;
}

/* Drop padding-bottom on main when it ends with a full-bleed band (e.g. the
   CTA section). Otherwise the band's bottom edge has a ~2rem dark gap before
   the footer because Pico applies block padding to main. Other pages where
   main ends with normal content keep the bottom padding for breathing room. */
main.container:has(> section.home-band:last-child) {
    padding-bottom: 0;
}

/* Single-content pages (product detail, news post, About, etc.): drop Pico's
   slate article card so they sit on the regular dark page background */
main.container > article {
    background: transparent;
    box-shadow: none;
    margin-top: 0;
    padding-top: 0.75rem;
}

/* ============================================
   HOMEPAGE LAYOUT
   ============================================ */

.home-grid {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 2.5rem;
    margin-top: 2rem;
}

@media (max-width: 992px) {
    .home-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .home-grid .news-sidebar {
        order: -1;
    }
}

/* Main content on homepage */
.main-content h2 {
    color: var(--wv-purple-light);
    margin-top: 0;
}

.main-content h3 {
    color: var(--wv-purple-light);
}

.hero-image {
    width: 100%;
    height: auto;
    border-radius: 12px;
    border: 1px solid var(--border-color-light);
    margin-bottom: 2rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

/* Home page hero — image with overlaid text card on the left */
.home-hero {
    position: relative;
    width: 100vw;
    max-width: 100vw;
    left: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    margin-top: 0;
    margin-bottom: 0;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: minmax(420px, 640px);
    overflow: hidden;
}

.home-hero > .home-hero__image,
.home-hero > .home-hero__overlay {
    grid-column: 1;
    grid-row: 1;
}

.home-hero__image {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 420px;
    max-height: 640px;
    object-fit: cover;
}

.home-hero__image--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem;
    background:
        repeating-linear-gradient(
            45deg,
            var(--background-medium) 0 20px,
            var(--background-card) 20px 40px
        );
    color: var(--text-secondary);
    font-style: italic;
}

.home-hero__overlay {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 2rem clamp(1.5rem, 8vw, 9rem);
    z-index: 1;
}

.home-hero__content {
    max-width: 700px;
    padding: 1.75rem 2.25rem 2.5rem;
    background: rgba(15, 15, 15, 0.78);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 4px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
    color: #fff;
}

.home-hero__eyebrow {
    margin: 0 0 1rem;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
}

.home-hero__title {
    margin: 0 0 1.25rem;
    font-size: clamp(1.7rem, 3vw, 3rem);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.015em;
    color: #fff;
}

.home-hero__title-accent {
    background-image: linear-gradient(transparent 90%, var(--wv-purple-light) 90%, var(--wv-purple-light) 96%, transparent 96%);
    background-repeat: no-repeat;
    padding-bottom: 0.05em;
}

.home-hero__subhead {
    margin: 0;
    font-size: clamp(0.9rem, 1.15vw, 1.05rem);
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.82);
}

/* Small "US-built · Est. 1997" badge — mono / uppercase, like a stamp.
   Muted so it whispers below the subhead instead of competing with the eyebrow. */
.home-hero__tagline {
    margin: 0.75rem 0 0 0;
    font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--wv-purple);
}

@media (max-width: 768px) {
    .home-hero {
        grid-template-rows: auto auto;
    }

    .home-hero > .home-hero__image {
        grid-row: 1;
    }

    .home-hero > .home-hero__overlay {
        grid-row: 2;
        padding: 1.75rem 2rem 2rem;
    }

    .home-hero__image {
        min-height: 220px;
        max-height: 320px;
    }

    .home-hero__content {
        max-width: 100%;
        padding: 0;
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border-left: none;
        border-radius: 0;
        box-shadow: none;
    }
}

/* Full-bleed modifier — image breaks out of the 1200px container to span the full viewport width */
.hero-image--full-bleed {
    width: 100vw;
    max-width: 100vw;
    position: relative;
    left: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    border-radius: 0;
    border: none;
}

.hero-image.placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 280px;
    padding: 2rem;
    background:
        repeating-linear-gradient(
            45deg,
            var(--background-medium) 0 20px,
            var(--background-card) 20px 40px
        );
    border: 2px dashed var(--wv-purple);
    color: var(--text-secondary);
    font-style: italic;
}

.hero-image.placeholder span {
    max-width: 520px;
    line-height: 1.5;
}

.hero-image.placeholder small {
    display: block;
    margin-top: 0.5rem;
    color: var(--text-muted);
    font-size: 0.85rem;
    font-style: normal;
}

.hero-image.placeholder code {
    color: var(--wv-purple-light);
    background: rgba(119, 0, 153, 0.15);
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    font-size: 0.85em;
}

/* ============================================
   CONTACT FORM
   ============================================ */

.email-direct {
    margin: 1.5rem 0 2rem 0;
    color: var(--text-secondary);
}

.email-direct .obfuscated-email {
    color: var(--wv-purple-light);
    font-weight: 600;
    text-decoration: none;
}

.email-direct .obfuscated-email:hover {
    color: var(--wv-purple);
    text-decoration: underline;
}

.contact-form .hp-field {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

.contact-form .cf-turnstile {
    margin: 1rem 0;
}

.form-status {
    margin-top: 1rem;
    min-height: 1.5em;
    font-weight: 600;
}

.form-status.sending {
    color: var(--text-secondary);
}

.form-status.success {
    color: #4ade80;
}

.form-status.error {
    color: #f87171;
}

/* ============================================
   WHAT'S NEW (Homepage) — dark band, momentum/recency framing
   Ported from design mockup; square-cornered, mono accents.
   ============================================ */

.whats-new {
    background: var(--background-medium);
    border-bottom: 1px solid var(--border-color);
    font-family: "Inter Tight", system-ui, -apple-system, Helvetica, Arial, sans-serif;
}

.wn-wrap {
    max-width: 1360px;
    margin: 0 auto;
    padding: 100px 64px;
}

.whats-new .sec-head {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 72px;
    align-items: end;
    margin-bottom: 48px;
}

.whats-new .sec-head h2 {
    font-size: clamp(1.7rem, 3vw, 3rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-weight: 600;
    margin: 14px 0 0;
    text-wrap: balance;
    color: #fff;
}

.whats-new .om-eyebrow { color: var(--text-muted); }
.whats-new .om-lede { color: var(--text-secondary); }

.featured-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.feat-card {
    background: var(--background-card);
    color: var(--text-primary);
    text-decoration: none;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-color);
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.feat-card:hover {
    border-color: var(--border-color-light);
    transform: translateY(-3px);
}

.feat-card .img {
    aspect-ratio: 16/10;
    background: var(--background-medium);
    background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 12px);
    display: grid;
    place-items: center;
    overflow: hidden;
}

.feat-card .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.feat-card .img .label {
    font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
    font-size: 11px;
    color: var(--text-muted);
    background: var(--background-card);
    padding: 6px 10px;
    border: 1px solid var(--border-color);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.feat-card .body {
    padding: 24px 26px 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.feat-card .tag {
    font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
    font-size: 11px;
    color: var(--wv-purple-light);
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.feat-card h3 {
    font-size: 20px;
    line-height: 1.25;
    margin: 0;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #fff;
}

.feat-card p {
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.55;
    margin: 0;
}

.feat-card .footer-row {
    margin-top: auto;
    padding-top: 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
    font-size: 11px;
    color: var(--text-muted);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-top: 1px solid var(--border-color);
}

.feat-card .footer-row a,
.feat-card .footer-row .data-sheet {
    color: var(--wv-purple-light);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s ease;
}

.feat-card:hover .footer-row .data-sheet,
.feat-card .footer-row a:hover {
    color: var(--wv-purple);
}

@media (max-width: 900px) {
    .wn-wrap { padding: 64px 32px; }
    .whats-new .sec-head {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-bottom: 36px;
    }
    .whats-new .sec-head h2 { font-size: 28px; }
}

/* ============================================
   WHO WE ARE (Homepage Brief)
   ============================================ */

/* ============================================
   OUR MISSION (Homepage) — light band, mission-app rows
   Same typography family as the capabilities band.
   ============================================ */

.our-mission {
    background: #F5F6F7;
    color: #0B1220;
    border-bottom: 1px solid #E8ECF1;
    font-family: "Inter Tight", system-ui, -apple-system, Helvetica, Arial, sans-serif;
}

.om-wrap {
    max-width: 1360px;
    margin: 0 auto;
    padding: 100px 64px;
}

.om-head {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 72px;
    align-items: end;
    margin-bottom: 56px;
}

.om-eyebrow {
    font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #5E6A7D;
    margin: 0 0 14px 0;
}

/* Why WV eyebrow — slightly bigger than the other section eyebrows for emphasis. */
.our-mission .om-eyebrow {
    font-size: 13px;
}

.om-head h2 {
    font-size: clamp(1.7rem, 3vw, 3rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-weight: 600;
    margin: 0;
    text-wrap: balance;
    color: #0B1220;
}

.om-lede {
    color: #445065;
    font-size: 17px;
    line-height: 1.55;
    margin: 0;
}

.om-lede a {
    color: var(--wv-purple);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.om-lede a:hover {
    color: var(--wv-purple-dark);
    text-decoration: underline;
}

/* Why WV: float "More about us →" to the right edge of the lede column.
   Stays on the same row as the text; text wraps to its left.
   margin-right pulls it inward to align visually with the lede text's
   natural right wrap point instead of sitting flush against the container. */
.our-mission .om-lede a {
    float: right;
    margin-left: 1rem;
    margin-right: 2rem;
}

/* Mission-app rows */
.our-mission .mission-apps {
    border-top: 1px solid #E8ECF1;
}

.our-mission .mission-app {
    display: grid;
    grid-template-columns: 32px 200px 1fr;
    gap: 24px;
    padding: 22px 16px;
    margin: 0 -16px;
    border-bottom: 1px solid #E8ECF1;
    align-items: center;
    border-radius: 8px;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.our-mission .mission-app:hover {
    background: #FFFFFF;
    transform: translateY(-3px);
    box-shadow: 0 12px 24px rgba(11, 18, 32, 0.06);
    border-bottom-color: transparent;
    position: relative;
    z-index: 1;
}

.our-mission .mission-app .why-icon {
    width: 28px;
    height: 28px;
    color: var(--wv-purple);
}

.our-mission .mission-app .why-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.our-mission .mission-app .mono {
    font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
    font-size: 11px;
    letter-spacing: 0.16em;
    color: #5E6A7D;
    text-transform: uppercase;
}

.our-mission .mission-app .desc {
    color: #445065;
    font-size: 16px;
    line-height: 1.55;
}

.our-mission .mission-app .desc b {
    color: #0B1220;
    font-weight: 600;
}

@media (max-width: 900px) {
    .om-wrap { padding: 64px 32px; }
    .om-head {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-bottom: 36px;
    }
    .om-head h2 { font-size: 28px; }
    .our-mission .mission-app {
        grid-template-columns: 32px 1fr;
        grid-template-rows: auto auto;
        column-gap: 16px;
        row-gap: 4px;
        align-items: start;
    }
    .our-mission .mission-app .why-icon {
        grid-row: 1 / span 2;
        align-self: start;
    }
    .our-mission .mission-app .mono {
        grid-column: 2;
        grid-row: 1;
    }
    .our-mission .mission-app .desc {
        grid-column: 2;
        grid-row: 2;
    }
}

/* ============================================
   FULL-BLEED HOMEPAGE BANDS (alternating bg)
   ============================================ */

/* Break out of the centered .container to span the full viewport,
   so section backgrounds read as edge-to-edge bands. */
.home-band {
    position: relative;
    width: 100vw;
    max-width: 100vw;
    left: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    margin-top: 0;
    margin-bottom: 0;
}

/* Re-pad the inner content back to the page's content column. */
.home-band__inner {
    max-width: 1700px;
    margin: 0 auto;
    padding: 4.5rem clamp(1rem, 4vw, 4rem);
}

/* Light "paper" band — dark ink on near-white, per the design mockup. */
.home-band--light {
    background: #f5f6f7;
    color: #1a2230;
}

@media (max-width: 768px) {
    .home-band__inner {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
}

/* ============================================
   TRUST BAND (below hero) — ported verbatim from the design mockup.
   Selectors scoped under .trust-band to avoid collisions.
   ============================================ */

.trust-band {
    background: var(--background-dark);
    border-bottom: 1px solid var(--border-color);
    font-family: "Inter Tight", system-ui, -apple-system, Helvetica, Arial, sans-serif;
    padding: 0;
    margin-top: 0;
    margin-bottom: 0;
}

/* Row 1 — headline stats. Edge-to-edge: dividers extend to viewport edges via
   1fr spacer columns flanking the 4 fixed-width data cells. */
.trust-band .trust-stats {
    max-width: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr repeat(4, minmax(0, calc((1360px - 128px) / 4))) 1fr;
    border-bottom: 1px solid var(--border-color);
}
.trust-band .trust-stats > .cell {
    grid-column: auto;
}
.trust-band .trust-stats > .cell:nth-of-type(1) { grid-column: 2; }
.trust-band .trust-stats > .cell:nth-of-type(2) { grid-column: 3; }
.trust-band .trust-stats > .cell:nth-of-type(3) { grid-column: 4; }
.trust-band .trust-stats > .cell:nth-of-type(4) { grid-column: 5; }

.trust-band .trust-stats .cell {
    padding: 28px;
    display: flex;
    align-items: center;
    gap: 18px;
    border-right: 1px solid var(--border-color);
}

.trust-band .trust-stats .cell:last-child { border-right: 0; }
.trust-band .trust-stats .cell:first-child { padding-left: 0; }

/* Mockup accent is magenta; using the WV brand purple for site consistency */
.trust-band .trust-stats .ic {
    width: 38px;
    height: 38px;
    color: var(--wv-purple);
    flex-shrink: 0;
}

.trust-band .trust-stats .ic svg { width: 100%; height: 100%; }

.trust-band .trust-stats .num {
    font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
    font-size: 26px;
    font-weight: 600;
    color: #fff;
    letter-spacing: -0.02em;
    line-height: 1;
}

.trust-band .trust-stats .lbl {
    font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin-top: 6px;
    line-height: 1.3;
}

/* Row 2 — compliance */
.trust-band .trust-comp {
    max-width: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr repeat(3, 320px) 1fr;
}
.trust-band .trust-comp > .cell:nth-of-type(1) { grid-column: 2; }
.trust-band .trust-comp > .cell:nth-of-type(2) { grid-column: 3; }
.trust-band .trust-comp > .cell:nth-of-type(3) { grid-column: 4; }

.trust-band .trust-comp .cell {
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
    text-align: center;
    border-right: 1px solid var(--border-color);
}

.trust-band .trust-comp .cell:last-child { border-right: 0; padding-right: 0; }
.trust-band .trust-comp .cell:first-child { padding-left: 0; }

.trust-band .trust-comp .v {
    font-size: 14px;
    color: #fff;
    font-weight: 500;
    margin-top: 2px;
}

.trust-band .trust-comp .v.small {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 400;
}

.trust-band .trust-comp .cell-link,
.trust-band .trust-comp a.cell-link[href$=".pdf"] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    color: inherit;
    text-decoration: none;
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
}

.trust-band .trust-comp .cell-link .v:not(.small) {
    text-decoration: none;
}

.trust-band .trust-comp .cell-link:hover,
.trust-band .trust-comp a.cell-link[href$=".pdf"]:hover {
    color: var(--wv-purple-light) !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.trust-band .trust-comp .cell-link:hover .v,
.trust-band .trust-comp a.cell-link[href$=".pdf"]:hover .v {
    color: var(--wv-purple-light);
}

.trust-band .trust-comp .cell-link::before,
.trust-band .trust-comp a.cell-link[href$=".pdf"]::before {
    content: none !important;
}

/* Intermediate widths (901–1259px): edge-to-edge math doesn't fit the fixed
   cell widths. Fall back to a stretched layout with simple padding. */
@media (max-width: 1259px) and (min-width: 901px) {
    .trust-band .trust-stats {
        padding: 0 32px;
        grid-template-columns: repeat(4, 1fr);
    }
    .trust-band .trust-comp {
        padding: 0 32px;
        grid-template-columns: repeat(3, 1fr);
    }
    .trust-band .trust-stats > .cell:nth-of-type(n),
    .trust-band .trust-comp > .cell:nth-of-type(n) {
        grid-column: auto;
    }
}

/* The mockup is desktop-only — collapse the strips on smaller screens */
@media (max-width: 900px) {
    .trust-band .trust-stats,
    .trust-band .trust-comp {
        padding: 0 24px;
        grid-template-columns: 1fr 1fr;
    }
    .trust-band .trust-stats > .cell:nth-of-type(n),
    .trust-band .trust-comp > .cell:nth-of-type(n) {
        grid-column: auto;
    }
    .trust-band .trust-stats .cell,
    .trust-band .trust-comp .cell {
        padding: 20px 0;
        border-right: 0;
    }
    /* Left-align trust-comp cells at mobile so they line up under the
       trust-stats columns above. Desktop centers each compliance cell, but
       at 2-up mobile the centering pulls each item toward the middle of its
       column and breaks the implicit column-edge alignment with the row of
       numbers above. The padding-left matches the trust-stats icon (38px) +
       its gap (18px) so the compliance text aligns under the stats text
       rather than under the stats icon. */
    .trust-band .trust-comp .cell,
    .trust-band .trust-comp .cell:first-child {
        align-items: flex-start;
        text-align: left;
        padding-left: 56px;
    }
}

/* Procurement-ready strip — small line at the bottom of the trust band
   pointing federal/government buyers to the vendor info page without
   making the home page feel like a contractor brochure. */
.procurement-strip {
    max-width: none;
    margin: 0;
    padding: 18px max(180px, calc((100vw - 1360px) / 2 + 180px)) 18px max(64px, calc((100vw - 1360px) / 2 + 64px));
    border-top: 1px solid var(--border-color);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    font-family: "Inter Tight", system-ui, -apple-system, Helvetica, Arial, sans-serif;
    font-size: 13px;
}

.procurement-text {
    color: var(--text-secondary);
    line-height: 1.5;
}

.procurement-text strong {
    color: #fff;
    font-weight: 600;
    margin-right: 0.35rem;
}

.procurement-link {
    color: var(--wv-purple-light);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 1px solid transparent;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.procurement-link:hover {
    color: #fff;
    border-bottom-color: var(--wv-purple-light);
}

@media (max-width: 900px) {
    .procurement-strip { padding: 16px 24px; }
}


/* ============================================
   CAPABILITIES (Homepage Pillars)
   Ported verbatim from the design mockup. Selectors are scoped
   under .cap so the mockup's generic class names don't collide
   with the rest of the site.
   ============================================ */

.cap {
    background: #F5F6F7;
    color: #0B1220;
    border-bottom: 1px solid #E8ECF1;
    font-family: "Inter Tight", system-ui, -apple-system, Helvetica, Arial, sans-serif;
}

.cap-wrap {
    max-width: 1360px;
    margin: 0 auto;
    padding: 120px 64px 40px;
}

.cap .sec-head {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 72px;
    align-items: end;
    margin-bottom: 64px;
}

.cap .eyebrow {
    font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #5E6A7D;
}

.cap .sec-head h2 {
    font-size: clamp(1.7rem, 3vw, 3rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    font-weight: 600;
    margin: 14px 0 0;
    text-wrap: balance;
    color: #0B1220;
}

.cap .sec-head p {
    color: #445065;
    font-size: 17px;
    line-height: 1.55;
    margin: 0;
}

/* Capability pillars — paper-on-paper cells separated by 1px hairlines */
.cap .pillars {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: #E8ECF1;
    border: 1px solid #E8ECF1;
}

.cap .pillar {
    background: #F5F6F7;
    padding: 36px 32px 32px;
    display: flex;
    flex-direction: column;
    min-height: 340px;
    color: inherit;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    position: relative;
    position: relative;
}

.cap .pillar .num {
    font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
    font-size: 11px;
    color: #5E6A7D;
    letter-spacing: 0.12em;
}

.cap .pillar h3 {
    font-size: 22px;
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin: 14px 0 10px;
    font-weight: 600;
    color: #0B1220;
}

.cap .pillar p {
    color: #445065;
    font-size: 14px;
    line-height: 1.55;
    margin: 0 0 20px;
}

.cap .pillar .spec {
    font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
    font-size: 11px;
    color: #5E6A7D;
    border-top: 1px solid #E8ECF1;
    padding-top: 16px;
    margin-top: auto;
    line-height: 1.7;
}

.cap .pillar .spec b {
    color: #0B1220;
    font-weight: 500;
}

.cap .pillar .more {
    margin-top: 16px;
    color: #0B1220;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: #0B1220;
    text-underline-offset: 6px;
    font-weight: 600;
    font-size: 13px;
    display: inline-block;
    line-height: 1.2;
    align-self: flex-start;
    transition: text-decoration-color 0.2s ease, color 0.2s ease;
}

.cap .pillar:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(11, 18, 32, 0.08);
    z-index: 1;
}

.cap .pillar:hover .more {
    color: var(--wv-purple);
    text-decoration-color: var(--wv-purple);
}

/* Section footer link — "View full capabilities", bottom-right */
.cap .cap-footer {
    margin-top: 28px;
    text-align: right;
}

.cap .cap-footer a {
    color: #0B1220;
    text-decoration: none;
    font-weight: 600;
    font-size: 13px;
    border-bottom: 1px solid #0B1220;
    padding-bottom: 2px;
}

.cap .cap-footer a:hover {
    color: var(--wv-purple);
    border-bottom-color: var(--wv-purple);
}

/* ============================================
   WHO WE SERVE — dark editorial 2-column section above the
   light Capabilities section. Lead text on the left, 6-item list
   on the right (5 program types + custom-build CTA card).
   ============================================ */

/* ============================================
   WHO WE SERVE — interactive mission profile diagram + 2-col market grid.
   ============================================ */
.serves {
    background: var(--background-medium);
    color: var(--text-primary);
    padding: 96px 0 64px;
    border-bottom: 1px solid var(--border-color);
    font-family: "Inter Tight", system-ui, -apple-system, Helvetica, Arial, sans-serif;
    --serves-line: var(--border-color);
    /* Glyph + dashed-link base colors. Bumped from rgba(.18) / rgba(.25) so
       the scene clears the visibility floor on dim/cheap monitors without
       overpowering body text. Hex form so the values are stable across
       backgrounds and the slight blue tint matches the design recommendation.
       --serves-line-strong is scoped to SVG strokes only (not card hairlines),
       so brightening it doesn't affect the grid borders. */
    --serves-line-strong: #4a4a52;
    --serves-scene-dim: #585862;
}

.serves-wrap {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px;
}

.serves .eyebrow {
    font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 20px;
}

.serves-title-row {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 0;
}

.serves h2 {
    font-size: clamp(1.7rem, 3vw, 3rem);
    font-weight: 650;
    letter-spacing: -0.015em;
    line-height: 1.15;
    margin: 0;
    text-wrap: balance;
}

.serves-sub {
    font-size: 17px;
    line-height: 1.55;
    color: var(--text-secondary);
    max-width: 62ch;
    margin: 0;
}

/* ---------- Mission profile scene ---------- */
.serves-scene-caption {
    display: flex;
    justify-content: space-between;
    font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.serves-active-label {
    color: var(--wv-purple-light);
    letter-spacing: 0.1em;
    transition: opacity 150ms ease;
    opacity: 0;
}

.serves-active-label.visible { opacity: 1; }

.serves-scene-scroll {
    overflow-x: auto;
}

/* Per-card mini vignettes — hidden on desktop, shown beside card text on mobile.
   Each market cell gets its own self-contained glyph. The minis sit outside
   the desktop scene's has-active scope, so other cards' vignettes stay put —
   each card is its own little world that lights with its own card tap. */
.serves-cell-viz { display: none; }
/* Reuse the .serves-scene class for the .mp/.scenery/lit cascade. Override
   desktop's min-width: 720px so the minis can shrink to their 170px container. */
.serves-cell-viz .serves-scene {
    min-width: 0;
}

@media (max-width: 768px) {
    .serves-scene-scroll { display: none; }
    .serves-cell[data-market] {
        display: flex;
        align-items: center;
        gap: 18px;
    }
    .serves-cell[data-market] .serves-cell-body {
        flex: 1 1 auto;
        min-width: 0;
    }
    .serves-cell-viz {
        display: block;
        flex: 0 0 34%;
        max-width: 170px;
    }
    .serves-cell-viz svg {
        display: block;
        width: 100%;
        height: auto;
    }
}

/* Pull the diagram up under the title block — its upper-left ~300px is empty,
   so the title's whitespace and the scene's whitespace interlock without overlap.
   Disabled below 900px where the heading wraps and the layout no longer interlocks. */
@media (min-width: 900px) {
    .serves-scene-scroll {
        margin-top: -36px;
    }
}

.serves-scene {
    display: block;
    min-width: 720px;
    width: 100%;
    height: auto;
}

.serves-scene .scenery {
    stroke: var(--serves-line-strong);
    fill: none;
    stroke-width: 1.25;
}
.serves-scene .scenery .trajectory {
    stroke-dasharray: 2 6;
    opacity: 0.7;
}

.serves-scene .vehicle-glyph { transition: opacity 150ms ease; }
.serves-scene .vehicle-glyph path,
.serves-scene .vehicle-glyph line {
    stroke: var(--serves-scene-dim);
    fill: none;
    stroke-width: 1.25;
    transition: stroke 150ms ease, opacity 150ms ease;
}
.serves-scene-scroll .serves-scene .vehicle-glyph line { opacity: 0; }
.serves-scene-scroll .serves-scene .vehicle-glyph.lit line { opacity: 1; }
.serves-scene .vehicle-glyph.lit path,
.serves-scene .vehicle-glyph.lit line { stroke: var(--wv-purple-light); }
.serves-scene.has-active .vehicle-glyph:not(.lit) { opacity: 0.5; }

.serves-scene .mp { cursor: pointer; transition: opacity 150ms ease; }
/* Expand the hit area for desktop scene groups so hover registers anywhere
   in the group's bounding rectangle, not just on the thin stroke lines.
   Scoped to the desktop scroll container — the card minis use cell-level
   click bubbling, so they don't need this. */
.serves-scene-scroll .serves-scene .mp { pointer-events: bounding-box; }
.serves-scene .mp path,
.serves-scene .mp line,
.serves-scene .mp rect {
    stroke: var(--serves-scene-dim);
    fill: none;
    stroke-width: 1.25;
    transition: stroke 150ms ease;
}
.serves-scene .mp .rf-link {
    stroke-dasharray: 4 4;
    stroke: var(--serves-line-strong);
}
.serves-scene .mp text {
    font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
    font-size: 10.5px;
    letter-spacing: 0.08em;
    fill: var(--text-muted);
    paint-order: stroke;
    stroke: var(--background-medium);
    stroke-width: 4px;
    transition: fill 150ms ease;
}

.serves-scene .mp.lit path,
.serves-scene .mp.lit line,
.serves-scene .mp.lit rect,
.serves-scene .mp.lit .rf-link { stroke: var(--wv-purple-light); }
.serves-scene .mp.lit text { fill: var(--wv-purple-light); }

.serves-scene.has-active .mp:not(.lit) { opacity: 0.35; }
.serves-scene.has-active .scenery { opacity: 0.5; }

/* ---------- Market grid ---------- */
.serves-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.serves-cell {
    padding: 32px 28px 30px 24px;
    border-bottom: 1px solid var(--serves-line);
    border-left: 1px solid transparent;
    transition: background 150ms ease, border-left-color 150ms ease;
}

.serves-cell:nth-child(odd) {
    border-right: 1px solid var(--serves-line);
    padding-right: 40px;
}
.serves-cell:nth-child(even) {
    padding-left: 40px;
}

.serves-cell[data-market] { cursor: pointer; }

.serves-cell:hover,
.serves-cell.active {
    background: var(--background-dark);
    border-left-color: var(--wv-purple-light);
}

.serves-band-tag {
    font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
    font-size: 11px;
    letter-spacing: 0.12em;
    color: var(--text-muted);
    margin-bottom: 14px;
    transition: color 150ms ease;
}
.serves-cell:hover .serves-band-tag,
.serves-cell.active .serves-band-tag { color: var(--wv-purple-light); }

.serves-cell h3 {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0 0 10px;
    color: var(--text-primary);
}

.serves-cell p {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-secondary);
    margin: 0 0 16px;
}

.serves-cell-spec {
    font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.serves-cell-cta {
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Anchor for the stretched link below — makes the whole card a hitbox
       while keeping the <a> as the semantic target. */
    position: relative;
    cursor: pointer;
}
.serves-cell-cta .serves-cell-dashes {
    font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
    color: var(--text-muted);
    font-size: 13px;
    margin-bottom: 14px;
    letter-spacing: 0.2em;
}
.serves-cell-cta h3 { margin-bottom: 8px; }
.serves-cell-cta a {
    font-size: 14px;
    color: var(--wv-purple-light);
    text-decoration: none;
    margin-top: 14px;
    display: inline-block;
    align-self: flex-start;
}
.serves-cell-cta a:hover { text-decoration: underline; }
/* Stretched-link pattern: the anchor's ::after pseudo-element covers the
   whole card, so a click anywhere on the cell routes through the link. */
.serves-cell-cta a::after {
    content: "";
    position: absolute;
    inset: 0;
}

@media (max-width: 768px) {
    /* Match the other home sections' mobile side padding so the Who-we-serve
       grid doesn't sit tighter to the screen edge than its neighbors. */
    .serves-wrap { padding: 0 32px; }
    .serves-grid {
        grid-template-columns: 1fr;
        /* Restore the top divider on mobile — desktop uses the SVG's ground
           line for this separation, but mobile drops the scene entirely so the
           grid needs its own line between the title block and the first card. */
        border-top: 1px solid var(--border-color);
    }
    .serves-title-row { margin-bottom: 28px; }
    .serves-cell:nth-child(odd) {
        border-right: none;
        padding-right: 24px;
    }
    .serves-cell:nth-child(even) { padding-left: 24px; }
}

@media (prefers-reduced-motion: reduce) {
    .serves-scene .mp,
    .serves-scene .mp path,
    .serves-scene .mp line,
    .serves-scene .mp rect,
    .serves-scene .mp text,
    .serves-cell,
    .serves-band-tag,
    .serves-active-label { transition: none; }
}

/* Mockup accent is magenta; using the WV brand purple for site consistency */
.cap .pillar .accent {
    position: absolute;
    top: 0;
    left: 0;
    width: 36px;
    height: 2px;
    background: var(--wv-purple);
}

/* The mockup is desktop-only — collapse the 4-up grid on smaller screens */
@media (max-width: 900px) {
    .cap-wrap { padding: 72px 32px 32px; }
    .cap .sec-head {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-bottom: 40px;
    }
    .cap .sec-head h2 { font-size: 32px; }
    .cap .pillars { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
    .cap .pillars { grid-template-columns: 1fr; }
}

/* ============================================
   NEWS & PRESS (Homepage) — dark band, row-list pattern
   Ported from design mockup; square borders, mono date/category.
   ============================================ */

.news-press {
    background: var(--background-dark);
    font-family: "Inter Tight", system-ui, -apple-system, Helvetica, Arial, sans-serif;
}

.np-wrap {
    max-width: 1360px;
    margin: 0 auto;
    padding: 100px 64px;
}

/* 3-up banner that sits between the section's lede and the news list. Three
   editor-controlled images render side by side; each tile fills 1/3 of the
   row and uses object-fit: cover so individual images don't distort. */
.np-collage {
    margin: 36px 0 48px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-radius: 4px;
    overflow: hidden;
}
.np-collage-tile {
    aspect-ratio: 5 / 3;
    background: var(--background-dark);
    overflow: hidden;
}
.np-collage-tile img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Thin true-black separator between tiles 2 and 3 — matches the visual
   separation the pre-baked banner had between the iff-dual macro and the
   shelter shot. Tile 1 has no leading gap. */
.np-collage-tile--gap {
    box-shadow: -1px 0 0 #000;
}
.np-collage-tile:nth-child(2) {
    box-shadow: none;
}

.news-press h2 {
    font-size: clamp(1.7rem, 3vw, 3rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-weight: 600;
    margin: 14px 0 20px;
    text-wrap: balance;
    color: #fff;
}
.news-press .om-lede {
    margin-bottom: 0;
}

/* Legacy .sec-head wrapper is no longer used here, but keep the rule
   inert so old caches don't blow up if it's still referenced anywhere. */
.news-press .sec-head {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 72px;
    align-items: end;
    margin-bottom: 48px;
}

.news-press .sec-head h2 {
    font-size: 38px;
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-weight: 600;
    margin: 14px 0 0;
    text-wrap: balance;
    color: #fff;
}

.news-press .om-eyebrow { color: var(--text-muted); }

.news-press .om-lede {
    color: var(--text-secondary);
}

.news-press .om-lede a {
    color: #fff;
    border-bottom: 1px solid var(--wv-purple);
    text-decoration: none;
    padding-bottom: 2px;
    margin-left: 0.5rem;
    font-weight: 600;
}

.news-press .om-lede a:hover {
    border-bottom-color: var(--wv-purple-light);
    color: var(--wv-purple-light);
}

/* Float "All news →" to the right edge of the lede column, matching the
   "More about us →" treatment in the Why WV section. */
.news-press .om-lede a {
    float: right;
    margin-left: 1rem;
    margin-right: 2rem;
}

.np-list {
    display: flex;
    flex-direction: column;
}

.news-row {
    display: grid;
    grid-template-columns: 130px 1fr 130px 32px;
    gap: 24px;
    align-items: center;
    padding: 22px 0;
    border-bottom: 1px solid var(--border-color);
    text-decoration: none;
    color: inherit;
    transition: background 0.15s ease;
}

.news-row:hover {
    background: rgba(255, 255, 255, 0.025);
}

.news-row:first-child {
    border-top: 1px solid var(--border-color);
}

.news-row .date {
    font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
    font-size: 12px;
    color: var(--text-muted);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.news-row .title {
    font-size: 17px;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: #fff;
}

.news-row .cat {
    font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
    font-size: 11px;
    color: var(--text-muted);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-align: right;
}

.news-row .arrow {
    text-align: right;
    color: var(--text-muted);
    font-size: 18px;
    transition: transform 0.2s ease, color 0.2s ease;
}

.news-row:hover .arrow {
    color: var(--wv-purple-light);
    transform: translateX(3px);
}

@media (max-width: 900px) {
    .np-wrap { padding: 64px 32px; }
    .news-press h2 { font-size: 28px; }
    .np-collage { margin: 28px 0 36px; }
    .news-press .sec-head {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-bottom: 36px;
    }
    .news-press .sec-head h2 { font-size: 28px; }

    /* Collapse rows: date+cat row above title, arrow inline */
    .news-row {
        grid-template-columns: 1fr 24px;
        grid-template-rows: auto auto;
        gap: 4px 12px;
        padding: 18px 0;
    }
    .news-row .date {
        grid-column: 1;
        grid-row: 1;
    }
    .news-row .title {
        grid-column: 1;
        grid-row: 2;
    }
    .news-row .cat {
        grid-column: 1;
        grid-row: 1;
        text-align: right;
        padding-right: 32px;
    }
    .news-row .arrow {
        grid-column: 2;
        grid-row: 1 / span 2;
        align-self: center;
    }
}

/* ============================================
   SECONDARY CTA BAND (Homepage) — light "Start a conversation"
   Ported from design mockup; sits between News & Press and the footer.
   ============================================ */

.cta-band {
    background: #F5F6F7;
    color: #0B1220;
    font-family: "Inter Tight", system-ui, -apple-system, Helvetica, Arial, sans-serif;
}

.cta-wrap {
    max-width: 1360px;
    margin: 0 auto;
    padding: 100px 64px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 56px;
    align-items: center;
}

.cta-copy { max-width: 720px; }

.cta-band .om-eyebrow {
    color: #5E6A7D;
    margin: 0 0 14px;
}

.cta-band h2 {
    font-size: clamp(1.7rem, 3vw, 3rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
    font-weight: 600;
    margin: 0 0 16px;
    text-wrap: balance;
    color: #0B1220;
}

.cta-sub {
    color: #445065;
    font-size: 17px;
    line-height: 1.6;
    margin: 0;
}

.cta-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
}

.cta-primary {
    background: var(--wv-purple);
    color: #fff !important;
    padding: 0.85rem 1.5rem;
    text-decoration: none;
    font-weight: 600;
    border-radius: 6px;
    white-space: nowrap;
    text-align: center;
    transition: background 0.2s ease;
    border: 2px solid var(--wv-purple);
}

.cta-primary:hover {
    background: var(--wv-purple-light);
    border-color: var(--wv-purple-light);
}

.cta-primary .arrow {
    margin-left: 0.4rem;
}

/* ============================================
   PRODUCT FILTERS (/products/ page)
   Compact filter bar — search input + 3 dropdowns on one row.
   ============================================ */

.product-filters {
    margin: 0 0 2.5rem;
    padding: 1.25rem 1.5rem;
    background: var(--background-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    font-family: "Inter Tight", system-ui, -apple-system, Helvetica, Arial, sans-serif;
}

.filter-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
}

/* Reset Pico's default margin on form controls inside the filter bar. */
.filter-controls input,
.filter-controls select,
.filter-controls button {
    margin: 0;
}

.filter-search {
    flex: 1 1 280px;
    min-width: 240px;
    display: block;
    margin: 0;
}

.filter-search input[type="search"] {
    width: 100%;
    padding: 0.55rem 0.9rem;
    background: var(--background-dark);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 0.9rem;
    font-family: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.filter-search input[type="search"]:focus {
    outline: none;
    border-color: var(--wv-purple);
    box-shadow: 0 0 0 2px rgba(153, 0, 187, 0.2);
}

.filter-search input[type="search"]::placeholder {
    color: var(--text-muted);
}

.filter-select {
    position: relative;
    display: flex;
    align-items: center;
    margin: 0;
    flex: 0 0 auto;
}

/* Custom combobox replaces native <select> for full styling control over
   the dropdown menu (rounded corners, WV purple highlight, dark theme). */
.filter-select {
    position: relative;
}

.filter-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.55rem 0.9rem;
    background-color: var(--background-dark);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 0.9rem;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    min-width: 160px;
    text-align: left;
}

.filter-select-trigger:hover {
    border-color: var(--wv-purple);
}

.filter-select-trigger:focus-visible {
    outline: none;
    border-color: var(--wv-purple);
    box-shadow: 0 0 0 2px rgba(153, 0, 187, 0.2);
}

.filter-select.has-value .filter-select-trigger {
    border-color: var(--wv-purple);
}

.filter-select-chevron {
    width: 0.85rem;
    height: 0.85rem;
    color: var(--text-secondary);
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.filter-select.is-open .filter-select-chevron {
    transform: rotate(180deg);
}

/* Custom dropdown menu — fully styleable */
.filter-select-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 50;
    margin: 0;
    padding: 0.35rem;
    list-style: none;
    background-color: var(--background-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.filter-select-menu li {
    list-style: none;
    padding: 0.5rem 0.75rem;
    margin: 0;
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.9rem;
    cursor: pointer;
    transition: background-color 0.1s ease, color 0.1s ease;
}

.filter-select-menu li::marker,
.filter-select-menu li::before {
    content: none;
    display: none;
}

.filter-select-menu li:hover,
.filter-select-menu li.is-active {
    background-color: var(--wv-purple);
    color: #fff;
}

.filter-select-menu li.is-selected {
    background-color: rgba(153, 0, 187, 0.18);
    color: #fff;
}

.filter-select-menu li.is-selected:hover,
.filter-select-menu li.is-selected.is-active {
    background-color: var(--wv-purple);
}

.filter-search input[type="search"]:hover {
    border-color: var(--wv-purple);
}

.filter-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 0.85rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--border-color);
}

.filter-status[hidden] {
    display: none;
}

.filter-count {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.filter-clear {
    padding: 0.3rem 0.85rem;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-family: inherit;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.filter-clear:hover,
.filter-clear:focus {
    background-color: var(--wv-purple);
    border-color: var(--wv-purple);
    color: #fff;
}

/* Empty state shown when filters return zero matches */
.products-empty {
    padding: 3rem 1rem;
    text-align: center;
    color: var(--text-secondary);
}

.products-empty p {
    margin: 0 0 1rem;
    color: var(--text-secondary);
}

.products-empty .filter-clear {
    display: inline-block;
}

.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 768px) {
    .product-filters { padding: 0.85rem; }
    .filter-controls { flex-direction: column; gap: 0.55rem; }
    .filter-search,
    .filter-select { flex: 1 1 auto; width: 100%; }
    .filter-select select { width: 100%; }
}

/* Higher specificity (a.cta-secondary) to defeat the global a[href$=".pdf"]
   styling that adds a dark card bg + 📄 emoji icon to PDF links. */
a.cta-secondary,
a.cta-secondary[href$=".pdf"] {
    color: #0B1220 !important;
    background: transparent !important;
    padding: 0.85rem 1.5rem;
    text-decoration: none;
    font-weight: 600;
    border: 2px solid #0B1220 !important;
    border-radius: 6px;
    white-space: nowrap;
    text-align: center;
    justify-content: center;
    transition: background 0.2s ease, color 0.2s ease;
    box-shadow: none !important;
    margin: 0;
}

a.cta-secondary:hover,
a.cta-secondary[href$=".pdf"]:hover {
    background: #0B1220 !important;
    color: #fff !important;
    border-color: #0B1220 !important;
    box-shadow: none !important;
}

a.cta-secondary::before,
a.cta-secondary[href$=".pdf"]::before {
    content: none !important;
}

@media (max-width: 900px) {
    .cta-wrap {
        padding: 64px 32px;
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .cta-band h2 { font-size: 26px; }
    .cta-buttons {
        flex-direction: row;
        flex-wrap: wrap;
    }
}

/* ============================================
   NEWS SIDEBAR
   ============================================ */

.news-sidebar {
    background: linear-gradient(135deg, var(--background-card) 0%, var(--background-elevated) 100%);
    padding: 1.75rem;
    border-radius: 12px;
    border: 1px solid var(--border-color-light);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.news-sidebar h3 {
    margin-top: 0;
    margin-bottom: 1.5rem;
    font-size: 1.25rem;
    color: var(--wv-purple-light);
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--wv-purple);
}

.news-item {
    margin-bottom: 1.75rem;
    padding-bottom: 1.75rem;
    border-bottom: 1px solid var(--border-color);
}

.news-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.news-item time {
    display: block;
    font-size: 0.8rem;
    color: var(--wv-purple);
    margin-bottom: 0.5rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.news-item h4 {
    margin: 0 0 0.5rem 0;
    font-size: 1rem;
    line-height: 1.4;
}

.news-item h4 a {
    color: var(--text-primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.news-item h4 a:hover {
    color: var(--wv-purple-light);
}

.news-item p {
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--text-secondary);
    margin: 0;
}

.news-sidebar > p:last-child a {
    color: var(--wv-purple-light);
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

.news-sidebar > p:last-child a:hover {
    color: var(--wv-purple);
    text-decoration: underline;
}


/* ============================================
   PRODUCT CARDS & GRIDS
   ============================================ */

.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.75rem;
    margin-top: 2rem;
}

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

.product-card {
    padding: 1.75rem;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: linear-gradient(135deg, var(--background-card) 0%, var(--background-elevated) 100%);
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.product-card:hover {
    border-color: var(--wv-purple);
    box-shadow: 0 8px 24px rgba(119, 0, 153, 0.3);
    transform: translateY(-4px);
}

.product-card .category {
    font-size: 0.8rem;
    color: var(--wv-purple);
    margin-bottom: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.product-card .product-card-title {
    font-size: 1.1rem;
    margin-bottom: 0.85rem;
}

.product-card .product-card-title a {
    color: var(--wv-purple-light);
    text-decoration: none;
    line-height: 1.4;
}

.product-card .product-card-title a:hover {
    color: var(--wv-purple);
}

.product-card .product-summary {
    margin-top: 0.25rem;
}

.product-card h3 {
    margin-top: 0;
    margin-bottom: 0.75rem;
    font-size: 1.25rem;
    line-height: 1.3;
}

.product-card h3 a {
    color: var(--text-primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.product-card h3 a:hover {
    color: var(--wv-purple-light);
}

.product-card p {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.6;
}

.product-card > a:last-child {
    color: var(--wv-purple-light);
    font-weight: 600;
    font-size: 0.875rem;
    text-decoration: none;
    transition: all 0.2s ease;
}

.product-card > a:last-child:hover {
    color: var(--wv-purple);
    text-decoration: underline;
}

/* Product image placeholder (for future images) */
.product-card .product-image-link {
    display: block;
}

.product-card .product-image {
    width: 100%;
    height: 200px;
    background: linear-gradient(135deg, var(--background-medium) 0%, var(--background-dark) 100%);
    border-radius: 8px;
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
}

.product-card .product-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.product-card .product-image.placeholder {
    color: var(--text-muted);
    font-size: 0.875rem;
}

/* Request-a-Quote CTA card (shown at the end of the synthesizers grid) */
.product-card--cta {
    background: linear-gradient(135deg, rgba(153, 0, 187, 0.2) 0%, var(--background-elevated) 100%);
    border-color: var(--wv-purple);
}

.product-card--cta:hover {
    border-color: var(--wv-purple-light);
}

.product-card--cta .product-cta-graphic {
    background: linear-gradient(135deg, var(--wv-purple-dark) 0%, var(--background-dark) 100%);
    border-color: var(--wv-purple);
}

.product-card--cta .product-cta-graphic svg {
    width: 56px;
    height: 56px;
    color: #fff;
}

/* ============================================
   CATEGORY CARDS
   ============================================ */

/* All Products page: match the category pages' title/subheading colors */
.products-category-title {
    color: #fff;
    margin-top: 3rem;
    scroll-margin-top: 7rem;
}

.products-category-title a {
    color: #fff;
    text-decoration: none;
}

.products-category-title a:hover {
    color: var(--wv-purple-light);
    text-decoration: underline;
}

.category-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

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

.category-card {
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: linear-gradient(135deg, var(--background-card) 0%, var(--background-elevated) 100%);
    text-align: center;
    transition: all 0.3s ease;
    text-decoration: none;
    display: block;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.category-card:hover {
    border-color: var(--wv-purple);
    box-shadow: 0 8px 24px rgba(119, 0, 153, 0.3);
    transform: translateY(-4px);
}

.category-card h3 {
    margin: 0 0 0.35rem 0;
    color: var(--wv-purple-light);
    font-size: 1.35rem;
}

.category-card .count {
    font-size: 0.9rem;
    color: var(--text-muted);
}

/* ============================================
   PRODUCT DETAIL PAGE
   ============================================ */

.product-specs {
    background: var(--background-card);
    padding: 2rem;
    border-radius: 12px;
    border: 1px solid var(--border-color-light);
    margin: 2.5rem 0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.product-header {
    position: relative;
    margin: 0 0 2rem;
    padding: 1rem 2rem;
    background: var(--background-card);
    border: 1px solid var(--border-color-light);
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.product-header::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1rem;
    bottom: 1rem;
    width: 4px;
    background: var(--wv-purple);
    border-radius: 0 4px 4px 0;
}

.breadcrumbs {
    margin: 0 0 1rem;
    font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.breadcrumbs ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.breadcrumbs li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.breadcrumbs li + li::before {
    content: "/";
    color: var(--text-muted);
    opacity: 0.6;
}

.breadcrumbs a {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.15s ease;
}

.breadcrumbs a:hover {
    color: var(--wv-purple-light);
}

.breadcrumbs li[aria-current="page"] {
    color: var(--text-primary);
}

/* Two-column content row (columns / column shortcodes) */
.content-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem 2.5rem;
    clear: left;
}

.content-columns > .content-column > :first-child {
    margin-top: 0;
}

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

/* Single product photo (productphoto shortcode) */
.product-photo {
    margin: 1.5rem 0;
    max-width: 620px;
}

.product-photo img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
    border: 1px solid var(--border-color-light);
}

.product-photo figcaption {
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* UI screenshot gallery (screens shortcode) */
.screen-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin: 1.5rem 0;
}

.screen-gallery__item {
    margin: 0;
}

.screen-gallery__item img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 6px;
    border: 1px solid var(--border-color-light);
}

.screen-gallery__item figcaption {
    margin-top: 0.5rem;
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

@media (max-width: 600px) {
    .screen-gallery {
        display: flex;
        overflow-x: auto;
        gap: 0.75rem;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0.5rem;
    }

    .screen-gallery__item {
        flex: 0 0 80%;
        scroll-snap-align: center;
    }
}


/* Product header top row: back arrow left, category pills right */
.product-heading-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.product-heading-row h1 {
    margin: 0;
    font-size: 2rem;
}



.product-header-categories {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0.75rem;
    margin: 0;
}

.product-category-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
    background: rgba(204, 0, 136, 0.14);
    border: 1px solid var(--wv-purple);
    color: var(--wv-purple-light);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
}

.product-category-pill:hover {
    background: rgba(204, 0, 136, 0.22);
    color: var(--wv-purple-light);
}

.product-title-label {
    margin: 0;
    color: var(--text-secondary);
    font-size: 1rem;
}

/* On desktop the back arrow is absolutely positioned outside the card,
   so the meta-row and model line sit flush with the H1 (no indent).
   On narrow viewports the arrow falls back into the flex row, and the
   indents below kick in again so they align with the H1 text past the arrow. */
.product-model {
    margin: 0.4rem 0 0;
    color: var(--text-secondary);
}

.product-meta-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 0.5rem 0 0;
}


/* News detail variant — push the category chip to the far right of the
   meta row instead of left-aligning beside the date. Product detail pages
   keep their original left-aligned arrangement. */
.product-header--news .product-meta-row {
    justify-content: space-between;
}

/* Small page-context label that sits ABOVE a detail header card, on the
   plain page background (not inside the card). Used on news detail pages
   to orient the reader since the back arrow + chip alone aren't enough. */
.detail-page-label {
    font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0.5rem 0 0.75rem;
    padding-left: 2rem;
}

/* News detail pagination — prev / all / next at the bottom of each article.
   Hugo's .Prev returns a NEWER page (in date-desc sort), so "Next →" uses .PrevInSection
   and "← Previous" uses .NextInSection. */
.detail-pagination {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 2rem;
    align-items: start;
    margin-top: 4rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border-color);
}

.detail-pagination .pagination-prev { text-align: left; }
.detail-pagination .pagination-all { text-align: center; align-self: center; }
.detail-pagination .pagination-next { text-align: right; }

.detail-pagination a {
    display: block;
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.15s ease;
}

.detail-pagination a:hover { color: var(--wv-purple-light); }

.detail-pagination .pagination-label {
    display: block;
    font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.35rem;
}

.detail-pagination .pagination-title {
    display: block;
    font-size: 0.95rem;
    line-height: 1.4;
    color: var(--text-secondary);
}

.detail-pagination a:hover .pagination-title { color: #fff; }

.detail-pagination .pagination-all a {
    font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--wv-purple-light);
}

.detail-pagination .pagination-all a:hover {
    color: var(--wv-purple);
}

@media (max-width: 768px) {
    .detail-pagination {
        grid-template-columns: 1fr;
        gap: 1.25rem;
        text-align: center;
    }
    .detail-pagination .pagination-prev,
    .detail-pagination .pagination-next { text-align: center; }
}

.product-specs h3 {
    margin-top: 0;
    color: var(--wv-purple-light);
    border-bottom: 2px solid var(--wv-purple);
    padding-bottom: 0.75rem;
    margin-bottom: 1.5rem;
}

.product-specs dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.75rem 1.5rem;
}

@media (max-width: 768px) {
    .product-specs dl {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
}

.product-specs dt {
    font-weight: 600;
    color: var(--text-primary);
}

.product-specs dd {
    margin: 0;
    color: var(--text-secondary);
}

.product-resources {
    margin: 2.5rem 0;
}

.product-resources h3 {
    margin-bottom: 1rem;
}

.product-resource-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.product-resource-list a {
    margin: 0;
}

/* Product detail image placeholder */
/* Product detail: image floats left, body text wraps to its right
   then reflows to full width once it clears the bottom of the image */
.product-layout {
    display: flow-root;
    margin-top: 2rem;
}

.product-layout .product-detail-image,
.product-layout .product-detail-figure {
    float: left;
    margin: 0 2.5rem 1.5rem 0;
}
.product-layout .product-detail-figure {
    /* When a caption renders, the figure wraps the rounded image container
       AND the figcaption that sits below it. The inner image keeps its
       own auto margins/box but loses them inside the figure to keep the
       caption aligned with the image's left edge. */
    max-width: 340px;
}
.product-layout .product-detail-figure .product-detail-image {
    float: none;
    margin: 0;
}
.product-layout .product-detail-figure figcaption {
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
    text-align: center;
}

/* Keep section headings with their content: a heading never wraps beside the
   image — it (and everything after) drops below the image as a unit */
.product-layout .content h2,
.product-layout .content h3,
.product-layout .content h4 {
    clear: left;
}

/* Let the first section (e.g. Features) tuck in beside the image instead of
   clearing below — unless it leads with a table, which can't wrap and would
   strand its heading above the image's bottom edge */
.product-layout .content h2:first-of-type:not(:has(+ table)) {
    clear: none;
}

/* Smaller section headings + tighter body text within product page content */
.product-layout .content {
    line-height: 1.55;
}

.product-layout .content h2 {
    font-size: 1.5rem;
}

.product-layout .content h3 {
    font-size: 1.2rem;
}

@media (max-width: 900px) {
    .product-layout .product-detail-image {
        float: none;
        margin: 0 auto 1.5rem;
    }
}

.product-detail-image {
    width: 100%;
    max-width: 340px;
    margin: 2rem auto;
}

.product-detail-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
}

/* ============================================
   NEWS LIST PAGE
   ============================================ */

/* News index page — row pattern matching the home News & Press section,
   with summaries shown below each title for richer list scanning. */
.news-list {
    display: flex;
    flex-direction: column;
    font-family: "Inter Tight", system-ui, -apple-system, Helvetica, Arial, sans-serif;
}

.news-list .news-row {
    align-items: start;
    padding: 24px 0;
}

.news-list .news-row .date {
    padding-top: 2px;
}

.news-list .news-row .cat,
.news-list .news-row .arrow {
    padding-top: 2px;
}

.news-list .title-cell {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.news-list .title-cell .title {
    color: #fff;
    font-size: 17px;
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.3;
}

.news-list .title-cell .summary {
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.5;
}

/* ============================================
   BUTTONS & LINKS
   ============================================ */

button,
[role="button"],
input[type="submit"],
input[type="button"] {
    background-color: var(--wv-purple);
    border-color: var(--wv-purple);
    transition: all 0.3s ease;
}

button:hover,
[role="button"]:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
    background-color: var(--wv-purple-light);
    border-color: var(--wv-purple-light);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--wv-purple-glow);
}

a {
    color: var(--wv-purple-light);
    transition: color 0.2s ease;
}

a:hover {
    color: var(--wv-purple);
}

/* PDF download links */
a[href$=".pdf"],
a[href*=".pdf?"] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background-color: var(--background-card);
    border: 1px solid var(--border-color-light);
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.2s ease;
    margin: 0.5rem 0;
}

a[href$=".pdf"]:hover,
a[href*=".pdf?"]:hover {
    color: #fff;
    border-color: var(--wv-purple);
    box-shadow: 0 4px 12px rgba(119, 0, 153, 0.2);
}

a[href$=".pdf"]::before,
a[href*=".pdf?"]::before {
    content: "📄";
    font-size: 1.2em;
}

/* ============================================
   FOOTER
   ============================================ */

footer {
    padding: 3.5rem 0 2.5rem;
    border-top: 2px solid var(--wv-purple);
    background: linear-gradient(135deg, var(--background-medium) 0%, var(--background-dark) 100%);
}

footer hr {
    display: none;
}

footer .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

footer .footer-top {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 3rem;
    margin-bottom: 1.5rem;
}

footer .footer-logo img {
    height: 64px;
    width: auto;
    display: block;
}

footer nav {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: auto;
    margin: 0 auto;
    padding: 0;
}

footer nav ul {
    display: block !important;
    columns: 3;
    column-gap: 2.5rem;
    max-width: 540px;
    padding: 0 !important;
    margin: 0 auto !important;
    list-style: none !important;
}

footer nav li {
    list-style: none !important;
    margin: 0 0 0.6rem 0;
    padding: 0;
    break-inside: avoid;
}

footer nav li a {
    color: var(--text-secondary);
    font-size: 0.9rem;
    text-decoration: none;
    transition: color 0.2s ease;
    white-space: nowrap;
}

footer nav li a:hover {
    color: var(--wv-purple-light);
}

footer p {
    text-align: center !important;
    color: var(--text-muted);
    font-size: 0.9rem;
    margin: 1rem auto 0;
    width: 100%;
}

footer p strong {
    color: var(--text-secondary);
}

footer p a {
    color: inherit;
    text-decoration-color: currentColor;
}

footer p a:hover {
    color: var(--wv-purple-light);
    text-decoration-color: currentColor;
}

@media (max-width: 768px) {
    footer nav ul {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        column-gap: 1.5rem;
        row-gap: 0.6rem;
        columns: auto;
        max-width: 100%;
        width: 100%;
        text-align: left;
    }

    footer nav li {
        margin: 0;
        text-align: left;
    }
}

/* ============================================
   FORMS & INPUTS
   ============================================ */

input,
textarea,
select {
    background-color: var(--background-card);
    border-color: var(--border-color-light);
    color: var(--text-primary);
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--wv-purple);
    box-shadow: 0 0 0 3px var(--wv-purple-glow);
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

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

.text-muted {
    color: var(--text-muted);
}

.mt-2 {
    margin-top: 2rem;
}

.mb-2 {
    margin-bottom: 2rem;
}

/* Touch target improvements for mobile */
@media (max-width: 768px) {
    a,
    button,
    [role="button"] {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* ============================================
   LOADING & ACCESSIBILITY
   ============================================ */

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Focus visible for keyboard navigation */
:focus-visible {
    outline: 2px solid var(--wv-purple-light);
    outline-offset: 2px;
}

/* Reduced motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================
   CAPABILITIES PAGE - HERO BANNER
   ============================================ */

/* Shared page header — tight inline header matching the home sec-head
   pattern. Used on /capabilities/, /products/, and any other interior page
   that needs a clean h1 + lede block. No image container. */
.page-header {
    margin: 0 0 2rem 0;
    padding: 2.5rem 0 1.25rem;
    font-family: "Inter Tight", system-ui, -apple-system, Helvetica, Arial, sans-serif;
}

.page-header-inner {
    max-width: 760px;
}

.page-header-eyebrow {
    font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0 0 1rem 0;
}

.page-header h1 {
    color: #fff;
    font-size: 2.5rem;
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-weight: 600;
    margin: 0 0 1rem 0;
}

.page-header-lede {
    color: var(--text-secondary);
    font-size: 1.05rem;
    line-height: 1.6;
    margin: 0;
}

.page-header-actions {
    margin: 1.25rem 0 0;
}

.page-header-actions a[href$=".pdf"],
.page-header-actions a[href*=".pdf?"] {
    margin: 0;
}

.page-header-actions a[href$=".pdf"]::before,
.page-header-actions a[href*=".pdf?"]::before {
    content: none !important;
}

@media (max-width: 768px) {
    .page-header { padding: 1.75rem 0 1.5rem; margin-bottom: 2rem; }
    .page-header h1 { font-size: 1.875rem; }
    .page-header-lede { font-size: 1rem; }
}

/* Single-page body content — used by About, Legal, Privacy, Sitemap,
   Employment, etc. Matches the Inter Tight typography on the rest of the
   site so section headings inside the markdown body feel native. */
.single-page {
    max-width: 820px;
    font-family: "Inter Tight", system-ui, -apple-system, Helvetica, Arial, sans-serif;
}

.single-page .hero-image {
    margin: 0 0 2.5rem 0;
    max-height: 360px;
    object-fit: cover;
}

.single-page .content h2 {
    color: #fff;
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.2;
    margin: 2.5rem 0 0.75rem;
}

.single-page .content h2:first-child {
    margin-top: 0;
}

.single-page .content h3 {
    color: #fff;
    font-size: 1.15rem;
    font-weight: 600;
    margin: 1.75rem 0 0.5rem;
}

.single-page .content p {
    color: var(--text-secondary);
    font-size: 1.05rem;
    line-height: 1.7;
    margin: 0 0 1.1rem;
}

.single-page .content strong {
    color: var(--text-primary);
    font-weight: 600;
}

.single-page .content a {
    color: var(--wv-purple-light);
    text-decoration: none;
    border-bottom: 1px solid rgba(204, 0, 136, 0.4);
}

.single-page .content a:hover {
    color: #fff;
    border-bottom-color: var(--wv-purple-light);
}

.single-page .content a[href$=".pdf"],
.single-page .content a[href*=".pdf?"] {
    border-bottom: 1px solid var(--border-color-light);
}

.single-page .content a[href$=".pdf"]:hover,
.single-page .content a[href*=".pdf?"]:hover {
    border-bottom-color: var(--wv-purple);
}

.single-page .content ul,
.single-page .content ol {
    color: var(--text-secondary);
    font-size: 1.05rem;
    line-height: 1.7;
    padding-left: 1.25rem;
    margin: 0 0 1.1rem;
}

.single-page .content li {
    margin-bottom: 0.4rem;
}

/* ============================================
   VENDOR INFO — formal capability-statement treatment.
   Scoped via .vendor-info on <article>.
   ============================================ */

/* Wider max-width than the default prose pages — vendor info is reference
   content (definition lists, code identifiers, etc.) and benefits from
   more horizontal space than narrow paragraph reading. */
.single-page.vendor-info {
    max-width: 1200px;
}

/* Widen the page header to match — uses :has() to scope only to this page,
   leaving other pages (About, Legal, Capabilities, etc.) at the default
   narrow page-header width. */
main:has(.single-page.vendor-info) .page-header-inner {
    max-width: 1200px;
}

/* Treat bullet lists where every item starts with **Label:** as a
   definition list: hide bullets, give label a mono uppercase look. */
.single-page.vendor-info .content ul {
    list-style: none;
    padding-left: 0;
    margin: 0 0 1.5rem 2rem;
    border-top: 1px solid var(--border-color);
}

.single-page.vendor-info .content li {
    list-style: none;
    padding: 0.65rem 0;
    margin: 0;
    border-bottom: 1px solid var(--border-color);
    line-height: 1.55;
}

/* Kill Pico's native list marker explicitly — list-style:none on the UL
   isn't enough because Pico styles ::marker on each LI directly. */
.single-page.vendor-info .content li::marker {
    content: none;
    display: none;
}

/* Label-style rows render as a 2-column grid so wrapped text in the value
   column aligns with the value start (not the LI's left edge). */
.single-page.vendor-info .content li:has(> strong:first-child) {
    display: grid;
    grid-template-columns: 12rem 1fr;
    column-gap: 1rem;
    align-items: baseline;
}

.single-page.vendor-info .content li strong:first-child {
    font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* Bullets in lists that DON'T start with a label-style strong stay normal */
.single-page.vendor-info .content li:not(:has(> strong:first-child)) {
    padding-left: 2.25rem;
    position: relative;
}

.single-page.vendor-info .content li:not(:has(> strong:first-child))::before {
    content: "\2022";  /* • U+2022 — standard bullet, larger than middle dot */
    position: absolute;
    left: 1.25rem;
    color: var(--text-muted);
    font-size: 1em;
}

/* Section headings — slightly tighter for the document feel.
   No bottom border since the <ul> directly below carries its own top border;
   two adjacent borders create a visual double-line. */
.single-page.vendor-info .content h2 {
    margin-top: 2rem;
    padding-bottom: 0.25rem;
    font-size: 1.25rem;
}

.single-page.vendor-info .content h2:first-child {
    margin-top: 0;
}

@media (max-width: 640px) {
    .single-page.vendor-info .content li strong:first-child {
        display: block;
        min-width: 0;
        margin-bottom: 0.2rem;
    }
}

/* ============================================
   CAPABILITIES PAGE - SECTIONS
   ============================================ */

.competencies-section,
.product-categories-section,
.markets-section {
    margin: 4rem 0;
}

.section-title {
    text-align: center;
    color: var(--wv-purple-light);
    font-size: 2.5rem;
    margin-bottom: 1rem;
    position: relative;
    padding-bottom: 1rem;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--wv-purple), transparent);
}

.section-intro {
    text-align: center;
    font-size: 1.1rem;
    color: var(--text-secondary);
    max-width: 800px;
    margin: 0 auto 3rem;
    line-height: 1.7;
}

/* ============================================
   CAPABILITIES PAGE - COMPETENCY CARDS
   ============================================ */

.competency-grid {
    display: grid;
    gap: 2.5rem;
}

/* Tighten the gap between the page-header and the first content section on
   /capabilities/. The grouped .competencies-section/.product-categories-section/
   .markets-section rule sets 4rem top margin — fine for section-to-section
   spacing, but excessive immediately under the page-header. */
.page-header + .competencies-section,
.page-header + .product-categories-section,
.page-header + .markets-section {
    margin-top: 1.5rem;
}

.competency-card {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 2rem;
    background: linear-gradient(135deg, var(--background-card) 0%, var(--background-elevated) 100%);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

.competency-card:hover {
    border-color: var(--wv-purple);
    box-shadow: 0 8px 32px rgba(204, 0, 136, 0.3);
    transform: translateY(-4px);
}

.competency-image {
    width: 100%;
    height: 250px;
    border-radius: 8px;
    overflow: hidden;
    background: linear-gradient(135deg, var(--background-medium) 0%, var(--background-dark) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color-light);
}

.competency-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Pan the quality/test-bench image up so more of the test equipment shows
   and less of the foam pad / desk at the bottom is in frame. */
.competency-image img[src*="quality"] {
    object-position: left 35%;
    filter: brightness(0.85);
}

/* Shelter system on Manufacturing card — zoom in a touch so the shelter
   and antennas fill the frame, less parking-lot/edge content visible. */
.competency-image img[src*="shelter"] {
    object-position: center 50%;
    transform: scale(1.15);
}


/* Fallback for missing images */
.competency-image img:not([src]),
.competency-image img[src=""],
.competency-image img[src*="/images/capabilities/"] {
    content: '';
    background: linear-gradient(135deg, var(--background-medium) 0%, var(--wv-purple-dark) 100%);
}

.competency-content h3 {
    margin-top: 0;
    color: var(--wv-purple-light);
    font-size: 1.5rem;
}

.competency-content ul {
    margin: 1rem 0;
    padding-left: 1.5rem;
}

.competency-content li {
    margin: 0.5rem 0;
    color: var(--text-secondary);
}

@media (max-width: 992px) {
    .competency-card {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .competency-image {
        height: 200px;
    }
}

/* ============================================
   CAPABILITIES PAGE - CATEGORY SHOWCASE
   ============================================ */

.category-showcase-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
    gap: 2.5rem;
    margin-top: 3rem;
}

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

.category-showcase-card {
    background: linear-gradient(135deg, var(--background-card) 0%, var(--background-elevated) 100%);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

.category-showcase-card:hover {
    border-color: var(--wv-purple);
    box-shadow: 0 8px 32px rgba(204, 0, 136, 0.3);
    transform: translateY(-4px);
}

.category-showcase-image {
    display: block;
    width: 100%;
    height: 200px;
    overflow: hidden;
    background: linear-gradient(135deg, var(--background-medium) 0%, var(--background-dark) 100%);
    align-items: center;
    justify-content: center;
    border-bottom: 2px solid var(--wv-purple);
}

.category-showcase-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Fallback for missing images */
.category-showcase-image img:not([src]),
.category-showcase-image img[src=""],
.category-showcase-image img[src*="/images/capabilities/"] {
    content: '';
    background: linear-gradient(135deg, var(--background-medium) 0%, var(--wv-purple-dark) 100%);
}

.category-showcase-content {
    padding: 2rem;
}

.category-showcase-content h3 {
    margin-top: 0;
    margin-bottom: 1rem;
    color: var(--wv-purple-light);
    font-size: 1.35rem;
}

.category-showcase-content h3 a {
    color: inherit;
    text-decoration: none;
    border-bottom: none;
    transition: color 0.2s ease;
}

.category-showcase-content h3 a:hover {
    color: var(--wv-purple);
}

.category-showcase-image img {
    transition: transform 0.4s ease;
}

a.category-showcase-image:hover img {
    transform: scale(1.04);
}

.category-showcase-content ul {
    margin: 1rem 0;
    padding-left: 1.5rem;
}

.category-showcase-content li {
    margin: 0.5rem 0;
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.category-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    padding: 0.75rem 1.5rem;
    background-color: var(--wv-purple);
    color: white !important;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.category-link:hover {
    background-color: var(--wv-purple-light);
    transform: translateX(4px);
    box-shadow: 0 4px 12px var(--wv-purple-glow);
}

/* ============================================
   CAPABILITIES PAGE - MARKETS SECTION
   ============================================ */

.markets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.market-card {
    background: linear-gradient(135deg, var(--background-card) 0%, var(--background-elevated) 100%);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    transition: all 0.3s ease;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.market-card:hover {
    border-color: var(--wv-purple);
    box-shadow: 0 8px 32px rgba(204, 0, 136, 0.3);
    transform: translateY(-4px);
}

.market-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    filter: grayscale(20%);
}

.market-card h3 {
    margin: 0 0 0.75rem 0;
    color: var(--wv-purple-light);
    font-size: 1.15rem;
}

.market-card p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.5;
}

/* ============================================
   CATEGORY/TAXONOMY PAGES - HERO BANNER
   ============================================ */

.category-hero {
    margin: 0 0 3rem 0;
    position: relative;
}

.category-hero-container {
    position: relative;
    width: 100%;
    height: 360px;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.category-hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 65%;
    display: block;
}

/* Per-category pan overrides */
.category-hero-image--flight-termination-systems {
    object-position: center 55%;
}

.category-hero-image--amplifiers {
    object-position: center 17%;
}

.category-hero-image--updown-converters {
    object-position: center 50%;
}

.category-hero-image--synthesizers {
    object-position: center 50%;
}

/* Fallback gradient when image doesn't exist */
.category-hero-image:not([src]),
.category-hero-image[src=""],
.category-hero-image[src*="/images/categories/"] {
    background: linear-gradient(135deg, var(--background-medium) 0%, var(--wv-purple-dark) 50%, var(--background-dark) 100%);
    content: '';
}

.category-hero-content {
    padding: 1.75rem 0 0 0;
}

.category-hero-content h1 {
    margin: 0 0 0.75rem 0;
    color: #fff;
    font-size: 2.5rem;
}

.category-description {
    margin: 0;
    font-size: 1.1rem;
    color: var(--text-secondary);
    max-width: 800px;
}

.category-stat-band {
    margin: 3rem 0 0;
    padding: 1.75rem 0 1.5rem;
    border-top: 1px solid var(--border-color);
    text-align: center;
}

.category-stat {
    display: inline-block;
    margin: 0;
    padding: 0.45rem 1rem;
    font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--wv-purple-light);
    background: rgba(153, 0, 187, 0.08);
    border: 1px solid rgba(153, 0, 187, 0.35);
    border-radius: 999px;
}

.category-meta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(204, 0, 136, 0.2);
    border: 1px solid var(--wv-purple);
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--wv-purple-light);
}

@media (max-width: 768px) {
    .category-hero-container {
        height: 220px;
    }

    .category-hero-content {
        padding: 1.25rem 0 0 0;
    }

    .category-hero-content h1 {
        font-size: 1.75rem;
    }

    .category-description {
        font-size: 1rem;
    }
}

/* Back link styling for category pages */
.category-subnav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
}

.category-back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-secondary);
    text-decoration: none;
    transition: all 0.2s ease;
    font-weight: 500;
}

.category-back-link:hover {
    color: var(--wv-purple-light);
    transform: translateX(-4px);
}

/* Capabilities Quality card: the ISO PDF link sits as the last bullet in the
   list but styled as inline purple text — no chip background, no border, no icon. */
.capability-cta-item a.procurement-link[href$=".pdf"],
.capability-cta-item a.procurement-link[href*=".pdf?"] {
    display: inline !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: var(--text-secondary) !important;
    font-weight: 600;
    text-decoration: underline !important;
    text-decoration-color: var(--wv-purple-light) !important;
    text-underline-offset: 3px;
}
.capability-cta-item a.procurement-link[href$=".pdf"] .arrow {
    color: var(--wv-purple-light) !important;
    margin-left: 0.25rem;
    text-decoration: none !important;
    display: inline-block;
}
.capability-cta-item a.procurement-link[href$=".pdf"]:hover,
.capability-cta-item a.procurement-link[href*=".pdf?"]:hover {
    color: var(--text-secondary) !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    text-decoration-color: var(--wv-purple-light) !important;
}
.capability-cta-item a.procurement-link[href$=".pdf"]::before,
.capability-cta-item a.procurement-link[href*=".pdf?"]::before {
    content: none !important;
    display: none !important;
}

/* ============================================
   RESOURCES PAGE
   ============================================ */

.resources-page .resource-category {
    margin-top: 3.5rem;
}

.resources-page .resource-category:first-of-type {
    margin-top: 2rem;
}

.resources-page .resource-category-head {
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.85rem;
    margin-bottom: 1.5rem;
}

.resources-page .resource-category-head h2 {
    font-size: 1.5rem;
    margin: 0 0 0.35rem;
    color: var(--text-primary);
}

.resources-page .resource-category-lede {
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin: 0;
}

.resources-page .resource-grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

.resources-page .resource-card {
    position: relative;
    background: var(--background-medium);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 1.25rem 1.25rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    transition: transform 0.18s ease, border-color 0.18s ease;
}

.resources-page .resource-card:hover {
    transform: translateY(-2px);
    border-color: var(--wv-purple-light);
}

.resources-page .resource-badge {
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.2rem 0.5rem;
    border-radius: 3px;
    background: rgba(153, 0, 187, 0.12);
    color: var(--wv-purple-light);
    border: 1px solid rgba(153, 0, 187, 0.35);
}

.resources-page .resource-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    padding-right: 4rem; /* room for the badge */
    line-height: 1.3;
}

.resources-page .resource-desc {
    color: var(--text-secondary);
    font-size: 0.85rem;
    line-height: 1.5;
    margin: 0;
    flex-grow: 1;
}

.resources-page .resource-meta {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.15rem 0.85rem;
    margin: 0.5rem 0 0;
    font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
    font-size: 0.7rem;
    letter-spacing: 0.04em;
}

.resources-page .resource-meta dt {
    color: var(--text-muted);
    text-transform: uppercase;
    font-weight: 500;
}

.resources-page .resource-meta dd {
    margin: 0;
    color: var(--text-secondary);
}

.resources-page .resource-download {
    display: inline-block;
    margin-top: 0.6rem;
    color: var(--wv-purple-light);
    font-weight: 500;
    font-size: 0.85rem;
    text-decoration: none;
    align-self: flex-start;
    transition: color 0.15s ease, transform 0.15s ease;
}

.resources-page .resource-card:hover .resource-download {
    color: #fff;
    transform: translateX(2px);
}

.resources-page .resource-empty {
    color: var(--text-muted);
    font-style: italic;
    margin: 0;
}

.resources-page > .content {
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 0.95rem;
}