/* 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 {
    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 {
    color: #fff;   /* match the page-title / hero white; the dim secondary gray
                      read as timid for primary nav. */
    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"] {
    color: var(--wv-purple-light);
    border-bottom-color: var(--wv-purple-light);
}

/* Hamburger Menu for Mobile */
.mobile-menu-icon {
    display: none !important;
    width: auto;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.mobile-menu-icon:is(:hover, :active, :focus) {
    background: transparent;
    box-shadow: none;
}

.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 so the buttons align to the panel edges. */
    .nav-menu > li {
        margin: 0.3rem 0.75rem;
        width: auto;
        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 + chevron). Excludes nested dropdown sub-items
       (Products → Flight Termination Systems) which keep flat styling. */
    .nav-menu > li > a:not(.nav-cta) {
        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 {
        background-color: var(--background-card) !important;
        color: var(--wv-purple-light) !important;
    }

    .mobile-menu-icon[aria-expanded="true"] ~ .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;
    }
}

/* ============================================
   NAV DROPDOWN (About, Products) — CSS hover menu.
   Structure: <li class="nav-dd"><a class="nav-dd-label"> + <ul class="nav-dd-menu">.
   Deliberately NOT <details>: in Chrome, an OPEN <details> whose content is
   absolutely positioned makes its <summary> capture pointer events across the
   ENTIRE viewport (elementFromPoint deep in the page returns the summary), which
   broke close-on-mouse-off and made every click navigate. A plain :hover menu has
   no summary and no such hijack (verified with elementFromPoint). The top-level
   label is a real link (native navigation); the submenu reveals purely on
   :hover / :focus-within, so it auto-closes on mouse-off with no JS.
   ============================================ */

.nav-dd {
    position: relative;
}

/* Down chevron beside the label (replaces Pico's old <summary> chevron). */
.nav-dd > .nav-dd-label::after {
    content: "";
    display: inline-block;
    width: 0.4rem;
    height: 0.4rem;
    margin-inline-start: 0.4rem;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-0.12em) rotate(45deg);
    opacity: 0.8;
}

/* The menu — hidden by default everywhere; revealed on desktop hover (below) or
   shown inline on mobile (below). Hidden default also keeps it closed on the rare
   >=1025px touch device, where tapping the label just navigates to the landing. */
.nav-dd > .nav-dd-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 0.5rem;
    min-width: 280px;
    list-style: none;
    padding: 0.5rem 0;
    background: var(--background-card);
    /* Just the purple accent line on the left (like the original) — no border on
       the other three sides; the card reads via its background + shadow. */
    border-left: 3px solid var(--wv-purple);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    z-index: 1000;
}

.nav-dd > .nav-dd-menu > li {
    display: block;   /* Pico sets nav li to inline-block, which wrapped the items
                         into two columns — block stacks them in one column. NB: do
                         NOT set width:100% here; a percentage width zeroes the li's
                         contribution to the card's max-content, re-breaking sizing. */
    margin: 0;
    padding: 0;
    list-style: none;
}

.nav-dd > .nav-dd-menu a {
    display: block;
    margin: 0;   /* Pico gives nav links a -0.5rem margin; left on, it makes each
                    item 1rem wider than the card so the hover fill spills over. */
    padding: 0.75rem 1.25rem;
    color: #fff;   /* match the top-level nav / page-title white */
    text-decoration: none !important;
    border-bottom: none !important;
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.nav-dd > .nav-dd-menu a:hover,
.nav-dd > .nav-dd-menu a:focus {
    background-color: var(--background-medium) !important;
    color: var(--wv-purple-light) !important;
}

/* Desktop pointer devices: reveal on hover / keyboard focus. Pure CSS — moving
   off ends :hover and the menu hides automatically. No JS, no <summary> hijack. */
@media (min-width: 1025px) and (hover: hover) {
    .nav-dd:hover > .nav-dd-menu,
    .nav-dd:focus-within > .nav-dd-menu {
        display: block;
    }
    /* Invisible bridge over the label->card gap so moving down doesn't flicker-close. */
    .nav-dd > .nav-dd-menu::before {
        content: "";
        position: absolute;
        top: -0.75rem;
        left: 0;
        right: 0;
        height: 0.75rem;
    }
}

/* Mobile hamburger panel: submenu as an inline, indented, always-expanded list.
   The top-level label link navigates on tap; no toggle needed. */
@media (max-width: 1024px) {
    /* Submenus start collapsed; the label toggles .is-open (see site.js accordion)
       so the hamburger panel isn't super-long with every section expanded. */
    .nav-dd > .nav-dd-menu {
        display: none;
        position: static;
        min-width: 0;
        margin: 0.35rem 0 0.5rem 1rem;
        padding: 0;
        background: transparent;
        border: none;
        border-left: 2px solid var(--wv-purple);
        border-radius: 0;
        box-shadow: none;
    }
    .nav-dd.is-open > .nav-dd-menu {
        display: block;
    }
    .nav-dd > .nav-dd-menu a {
        padding: 0.6rem 1.25rem;
        white-space: normal;
    }
    /* Chevron doubles as the accordion indicator: pushed to the right of the
       button, pointing down when collapsed and up when expanded. */
    .nav-dd > .nav-dd-label::after {
        margin-inline-start: auto;
        transition: transform 0.15s ease;
    }
    .nav-dd.is-open > .nav-dd-label::after {
        transform: translateY(0.1em) rotate(225deg);
    }
}

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

/* Frame the rack faces on desktop, cropping the wall and floor in the hero. */
@media (min-width: 769px) {
    .home-hero > img.home-hero__image {
        object-position: left center;
        transform: scale(1.35);
        transform-origin: left 15%;
    }
}
.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 1.9rem;
    background: rgba(15, 15, 15, 0.89);
    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;
}

/* Generic version of the hero's accent underline for section headings
   (percentage-based, so it scales with any font size). Used via a
   heading_accent field alongside the section's heading. */
.heading-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(1.0625rem, 1.4vw, 1.375rem);
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.82);
    /* Prevents single-word orphans on the last line at awkward viewport
       widths (e.g. "synthesizers," stranded alone below a full line). */
    text-wrap: pretty;
}

/* Hero CTA — floats below the text card, centered under it, over the
   photo. Same vocabulary as the header's Contact Us (.nav-cta): purple
   border, purple-light text, fills purple on hover. Over a photo the
   transparent bg doesn't work, so it gets the card's frosted-dark
   backing — card and button read as two layers of the same material. */
.home-hero__cta {
    position: relative;
    z-index: 0;
    display: inline-block;
    margin-top: 1.35rem;
    padding: 0.325rem 0.875rem;
    font-size: clamp(0.95rem, 1.1vw, 1.05rem);
    font-weight: 600;
    /* Subhead's tone rather than pure white — keeps the H1 the only
       pure-white element in the hero; hover steps up to #fff. */
    color: rgba(255, 255, 255, 0.82);
    /* Same material as the header (body > header) — medium-to-dark
       diagonal gradient, not flat black. */
    background: linear-gradient(135deg, var(--background-medium) 0%, var(--background-dark) 100%);
    border: 2px solid var(--wv-purple);
    border-radius: 6px;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s ease;
}

/* Hover fill lives on a pseudo-element so it can crossfade over the
   gradient. Gradients (background-image) and solid colors
   (background-color) can't interpolate — transitioning `background`
   directly drops the gradient instantly and animates the color up from
   transparent, flashing see-through mid-hover. Fading this layer's
   opacity avoids that entirely. z-index -1 slots it above the element's
   own background but below the label text. */
.home-hero__cta::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--wv-purple);
    border-radius: 4px; /* outer 6px minus the 2px border */
    opacity: 0;
    transition: opacity 0.2s ease;
}

.home-hero__cta:hover {
    color: #fff;
}

.home-hero__cta:hover::before {
    opacity: 1;
}

.home-hero__cta .arrow {
    display: inline-block;
    font-size: 1.35em;
    line-height: 1;
    vertical-align: -0.1em;
    margin-left: 0.45rem;
    transition: transform 0.2s ease;
}

/* Same nudge-right the news rows use on hover */
.home-hero__cta:hover .arrow {
    transform: translateX(3px);
}

/* 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;
        justify-content: flex-start;
        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);
    font-size: 1.1rem;
}

.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
   Reuses the catalog product cards in a wider, centered pair.
   ============================================ */

.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 56px;
}

.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(2, minmax(0, 1fr));
    gap: 1.75rem;
    max-width: 1040px;
    margin: 0 auto;
}

.featured-grid .product-card {
    margin: 0;
    min-width: 0;
}

.featured-grid .product-card .product-image {
    height: 280px;
}

.featured-grid .product-card-footer > a {
    font-weight: 500;
    font-size: clamp(14px, 0.8rem, 16px);
}

.wn-footer {
    margin-top: 60px;
    text-align: right;
}

.wn-footer a {
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: var(--wv-purple-light);
    text-underline-offset: 4px;
}

.wn-footer a:hover,
.wn-footer a:focus-visible {
    color: var(--wv-purple-light);
}

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

@media (max-width: 768px) {
    .featured-grid {
        grid-template-columns: minmax(0, 1fr);
        max-width: 480px;
    }

    .featured-grid .product-card .product-image {
        height: 240px;
    }
}

/* ============================================
   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: clamp(1.0625rem, 1.4vw, 1.375rem);
    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;
    padding-top: 0.35rem;
    /* 1pt under the lede's computed (clamp-responsive) size at any width */
    font-size: calc(1em - 1pt);
}

/* 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: 12px;
    letter-spacing: 0.16em;
    color: #5E6A7D;
    text-transform: uppercase;
}

.our-mission .mission-app .desc {
    color: #445065;
    font-size: 17px;
    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: 11px;
    color: var(--text-secondary);
    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: 15px;
}

.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: clamp(1.0625rem, 1.4vw, 1.375rem);
    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: #CDD3DC;
    border: 1px solid #CDD3DC;
}

.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: 12px;
    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: 15px;
    line-height: 1.55;
    margin: 0 0 20px;
}

.cap .pillar .spec {
    font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
    font-size: 12px;
    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: 14px;
    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: 14px;
    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. Brightened so the resting (pre-hover)
       scene reads clearly on both desktop and the mobile card minis. The lit
       state is --wv-purple-light (a hue change), so the resting grey can go
       brighter without competing with it; both stay under --text-muted
       (#808080) so they don't overpower body text. Blue tint kept, and the
       glyphs stay a step above the baseline/links. Hex form so the values are
       stable across backgrounds; scoped to SVG strokes only (not card
       hairlines), so this doesn't affect the grid borders. */
    --serves-line-strong: #62626c;
    --serves-scene-dim: #74747f;
}

.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;
}

/* Fading purple rule under the section eyebrows, mirroring
   .section-title::after on /capabilities/. 2px rather than 3px to suit 13px
   text.

   Applied to the three bands that have no other accent in that region, NOT to
   Capabilities and Why WV. Those two each carry four purple elements directly
   below the eyebrow — the pillar top-bars and the why-row icons — so a rule
   there competes with accents already doing the job rather than adding
   definition. That reads as redundant in any colour; an ink version was tried
   and had the same problem.

   The CTA band is also excluded: the capabilities page carries the same band
   and the two should stay matched. */
.whats-new .om-eyebrow,
.news-press .om-eyebrow,
.serves .eyebrow {
    display: inline-block;
    position: relative;
    padding-bottom: 7px;
}

.whats-new .om-eyebrow::after,
.news-press .om-eyebrow::after,
.serves .eyebrow::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, var(--wv-purple), transparent);
}

.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: clamp(1.0625rem, 1.4vw, 1.375rem);
    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; }

/* .active is applied by JS on hover as well as on tap, so the :hover rule is
   only a no-JS fallback — scoped to hover-capable pointers so a tap on mobile
   doesn't leave a cell stuck in the hover state. */
.serves-cell.active {
    background: var(--background-dark);
    border-left-color: var(--wv-purple-light);
}

@media (hover: hover) {
    .serves-cell:hover {
        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.active .serves-band-tag { color: var(--wv-purple-light); }

@media (hover: hover) {
    .serves-cell:hover .serves-band-tag { color: var(--wv-purple-light); }
}

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

.serves-cell p {
    font-size: 15px;
    line-height: 1.55;
    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-medium);
    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;
}

/* On narrow phones the 5:3 tiles × 3 columns squash the whole strip to ~5:1
   — a thin sliver. Square the tiles below 500px so the three images form a
   true 3:1 band. */
@media (max-width: 500px) {
    .np-collage-tile {
        aspect-ratio: 1 / 1;
    }
}

.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;
}

/* Contain the floated link inside the lede paragraph. At widths where the
   link can't fit beside the lede text (~767-777px) it drops to its own line;
   this clearfix makes the paragraph grow to hold it, so the photo banner
   below starts on a clean line via its own top margin — no phantom column,
   no underline clipped behind the images. */
.news-press .om-lede::after {
    content: "";
    display: block;
    clear: both;
}

.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: var(--background-dark);
}

.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;
}

/* Keep the homepage date off the edge revealed by the row hover fill without
   disturbing the established title-column alignment. */
.news-press .news-row .date {
    padding-left: 12px;
}

.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;
}

/* Match the date inset on the opposite edge of the homepage hover field. */
.news-press .news-row .arrow {
    padding-right: 12px;
}

.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: none; }

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

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

.cta-sub {
    color: #445065;
    font-size: clamp(1.0625rem, 1.4vw, 1.375rem);
    line-height: 1.6;
    margin: 0;
}

/* The forced break only reads cleanly when the first sentence fits on one
   line — otherwise it strands "…timeline." plus a lonely third line. Whether
   it fits swings non-monotonically as the window narrows: the button reflows
   from beside the copy to below it at 900px (widening the copy), and the
   clamp() font-size shrinks with the viewport. So the break is only reliably
   clean on wide desktop; below 1200px we let the copy flow as one paragraph
   (two clean lines, no orphan). The &nbsp; before each <br> becomes the
   joining space when the break is hidden. */
@media (max-width: 1199px) {
    .cta-sub br {
        display: none;
    }
}

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

.cta-primary {
    /* inline-block so the button keeps its own width when it sits on its own
       (product pages). Inside .cta-buttons it is a flex item, which blockifies
       this anyway, so the CTA bands are unaffected. */
    display: inline-block;
    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 1.75rem 1rem;
    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);
    /* Flex column so the action footer pins to the bottom of every card
       (margin-top: auto on the footer), regardless of how much text is above.
       Same fix as the category cards on /capabilities/. */
    display: flex;
    flex-direction: column;
}

.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: 20px;
    line-height: 1.25;
    margin-bottom: 0.4rem;
    /* The title shares the .category class; undo its all-caps label styling
       so unit case survives (kW, GHz, Ka/Ku) and titles match the detail H1. */
    text-transform: none;
    letter-spacing: -0.01em;
}

.product-card .product-card-title a {
    /* White as the heading voice (like the capabilities section titles); purple
       is left to the one affordance per card, "View details ->". Purple on
       hover keeps the title readable as a link. */
    color: #fff;
    text-decoration: none;
    line-height: inherit;
    transition: color 0.2s ease;
}

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

.product-card .product-summary {
    margin: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}

.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 .product-model {
    font-size: 0.85rem;
    line-height: 1.45;
    margin: 0 0 0.4rem;
}

.product-grid .product-model strong {
    font-weight: 500;
}

.product-grid .product-summary {
    font-size: 16px;
}

.product-card-footer {
    display: flex;
    flex-direction: column;
    margin-top: auto;
    padding-top: 0.75rem;
}

/* Keep the rule at the text inset and leave only the link itself clickable. */
.product-card-footer::before {
    content: '';
    border-top: 2px solid var(--border-color-light);
    margin-bottom: 0.75rem;
}

.product-grid .product-card-footer::before {
    border-top-width: 1px;
}

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

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

/* Product image placeholder (for future images) */
.product-card .product-image-link {
    display: block;
    /* Give photos a slimmer inset than the card copy. */
    margin: -1rem -1rem 0;
}

.product-card .product-image {
    width: 100%;
    overflow: hidden;
    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 {
    /* cover, not contain. The photos are all landscape and wider than the box,
       so contain fills the width and letterboxes top/bottom — the padding.
       With mixed aspect ratios a fixed box always letterboxes under contain, so
       cover is the only way to remove it: the image fills the whole box and the
       overflow is cropped. Trades a little edge crop for zero padding. */
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.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);
}

/* CMS-safe paired media. Decap continues to own the product Markdown and its
   [photo-N] markers; Hugo's separate product layout map creates these rows. */
.product-media-row {
    display: grid;
    grid-template-columns: minmax(280px, 520px) minmax(0, 1fr);
    gap: 3rem;
    align-items: start;
    clear: both;
    margin: 3.5rem 0;
}

/* Short copy beside a taller product photo reads as one composed unit when
   centered. Its tighter trailing margin keeps the next full-width section
   connected without implying that it belongs only to this product variant. */
.product-media-row--center {
    align-items: center;
}

.product-media-row--tight-after {
    margin-bottom: 1.75rem;
}

/* Rack-width product photos pair naturally with a compact model lead. Their
   longer feature and option subsections then use both halves of the full text
   measure instead of leaving a tall empty rail beside the photo. */
.product-media-row--split-lead {
    align-items: center;
    margin-bottom: 1.75rem;
}

.product-detail-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3rem;
    margin-bottom: 3.5rem;
}

.product-detail-column-section {
    margin: 0 0 1.5rem;
}

.product-detail-column-section > :first-child {
    margin-top: 0;
}

.product-detail-column-section > :last-child {
    margin-bottom: 0;
}

.product-media-row__media {
    display: grid;
    gap: 1rem;
}

.product-media-row__media--gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
}

.product-media-row__media .product-photo {
    width: 100%;
    max-width: none;
    margin: 0;
}

.product-media-row__media .product-photo img {
    width: 100%;
    max-height: 520px;
    object-fit: contain;
}

.product-media-row__content > :first-child {
    margin-top: 0;
}

.product-media-row__content > :last-child {
    margin-bottom: 0;
}

/* Optional CMS-controlled treatment for long, scan-oriented detail lists.
   Only top-level lists after an H2 are split: introductory prose, media rows,
   and nested bullet groups retain their normal structure. */
@media (min-width: 901px) {
    .product-layout--two-column-lists .content > h2 ~ ul:has(> li:nth-child(8)) {
        columns: 2;
        column-gap: 3rem;
    }

    .product-layout--two-column-lists .content > h2 ~ ul:has(> li:nth-child(8)) > li {
        break-inside: avoid-column;
    }

    .product-layout--compact-column-lists.product-layout--two-column-lists .content > h2 ~ ul:has(> li:nth-child(8)) {
        width: 100%;
        max-width: 30rem;
    }
}

@media (max-width: 900px) {
    .product-media-row {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        margin: 2.5rem 0;
    }

    .product-media-row__media {
        width: 100%;
    }

    .product-media-row__media--gallery {
        display: grid;
        grid-template-columns: 1fr;
    }

    .product-detail-columns {
        grid-template-columns: 1fr;
        gap: 0;
        margin-bottom: 2.5rem;
    }
}

/* 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-key-specs {
    margin: 0.5rem 0 0;
    color: var(--text-primary);
    font-size: 1rem;
    line-height: 1.45;
}



.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(--text-primary);
    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);
}

/* Custom Configurations — the RFQ hand-off. Shares the .product-specs card
   shell so it keeps the page rhythm; the button is what marks it as an action
   rather than another block of body copy. */
.product-custom-config {
    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);
    /* Copy left, button right, like the CTA bands. Keeps the card from
       reading as 40% text and 60% dead space on a wide viewport. */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem 2.5rem;
}

.product-custom-config h3 {
    /* Full-width so the purple rule under it spans the whole card. */
    flex: 1 0 100%;
    margin: 0;
    color: var(--text-primary);
    border-bottom: 2px solid var(--wv-purple);
    padding-bottom: 0.75rem;
}

.product-custom-config p {
    flex: 1 1 34ch;
    color: var(--text-secondary);
    max-width: 68ch;
    margin: 0;
}

.product-custom-config .cta-primary {
    flex: 0 0 auto;
}

.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;
    display: flow-root;
}

.product-layout--clear-first-heading .content h2:first-of-type:not(:has(+ table)) {
    clear: left;
}

@media (min-width: 901px) {
    /* Keep short descriptions in one column beside the lead image. */
    .product-layout--contain-body > .content {
        display: flow-root;
    }

    /* Portrait lead photos need less width than the standard product image;
       the overview and first section then form the balancing content rail. */
    .product-layout--compact-image .product-detail-figure {
        max-width: 280px;
    }

    /* A short list that barely outgrows its lead image should remain one
       coherent right-hand rail instead of leaving its last item orphaned
       below the float. Longer lists retain the normal full-width reflow. */
    .product-layout--contain-first-list .content > h2:first-of-type + ul {
        display: flow-root;
    }
}

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

/* Inline product-copy links follow the site's standard text-link treatment:
   magenta with no resting rule, then white with a magenta rule on interaction.
   PDF links retain their download-card styling below. */
.product-layout .content a:not([href$=".pdf"]):not([href*=".pdf?"]) {
    color: var(--wv-purple-light);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.product-layout .content a:not([href$=".pdf"]):not([href*=".pdf?"]):hover,
.product-layout .content a:not([href$=".pdf"]):not([href*=".pdf?"]):focus-visible {
    color: #fff;
    border-bottom-color: var(--wv-purple-light);
}

.product-layout .content h2 {
    font-size: 1.5rem;
    padding-bottom: 0.55rem;
    border-bottom: 1px solid var(--border-color);
}

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

@media (max-width: 900px) {
    .product-layout .product-detail-image,
    .product-layout .product-detail-figure {
        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 16px;
    margin: 0 -16px;
}

/* The shared .news-row:hover fades to --background-dark, which is invisible
   here because the list page sits on --background-dark (the home news band
   sits on --background-medium, so it reads there). Flip the direction and
   lift to --background-medium instead, the same fix used for the markets and
   qualification tables on /capabilities/. Horizontal padding + negative
   margin lets the highlight extend past the text without shifting it. */
.news-list .news-row:hover {
    background: var(--background-medium);
}

.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;
}

/* Compact pills for news datasheets and the vendor capability statement. */
a.news-datasheet,
a.page-header-download {
    font-size: 16px;
    line-height: 1.4;
    padding: 6px 12px;
    gap: 6px;
}

a.news-datasheet::before,
a.page-header-download::before {
    font-size: 1em;
}

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

/* Standard footer layout: brand block (logo over company info) pinned left,
   link columns to the right. Was previously everything centre-stacked. */
footer .container {
    display: block;
    text-align: left;
}

footer .footer-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 3rem;
}

footer .footer-brand {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 1.25rem;
}

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

footer .footer-contact {
    margin: 0;
    text-align: left;
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.6;
}

footer nav {
    display: block;
    padding: 0;
}

/* Explicit grid, not CSS multi-column. Multicol balanced unpredictably and,
   combined with white-space: nowrap on the links, let a label wider than its
   ~153px column overflow into the next one — two separate links rendering as
   one run ("ResourcesNews"). A grid gives every item its own cell with
   guaranteed gaps, so items cannot collide however many there are. */
footer nav ul {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 2rem;
    row-gap: 0.6rem;
    max-width: 620px;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

/* Four columns need brand (~340px) + gap + 620px of grid on one line. Below
   ~1200px viewport the container is too narrow, and .footer-top's flex-wrap
   drops the whole nav under the brand — a worse result than three columns.
   So step down to three until there is genuinely room. */
@media (min-width: 769px) and (max-width: 1199px) {
    footer nav ul {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        column-gap: 2rem;
        max-width: 480px;
    }
}

footer nav li {
    list-style: none !important;
    margin: 0;
    padding: 0;
    min-width: 0;
}

footer nav li a {
    color: var(--text-secondary);
    font-size: 0.9rem;
    text-decoration: none;
    transition: color 0.2s ease;
    /* No nowrap: editors can add footer links with arbitrary labels via
       show_in_footer, and a nowrapped label wider than its cell overflows into
       the neighbour. Long labels now wrap inside their own cell instead. */
}

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

footer p {
    text-align: left;
    color: var(--text-muted);
    font-size: 0.9rem;
    margin: 0;
}

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;
}

/* Once the brand and nav no longer fit side by side (~1000px), flex-wrap
   drops the nav *below* the brand — and since the brand is first in the DOM
   for the desktop brand-left layout, the business info lands on top. Stack
   explicitly with column-reverse from 1024px down so the links stay above the
   company info (both left-aligned) through the whole stacked range, not just
   on phones. */
@media (max-width: 1024px) {
    footer .footer-top {
        flex-direction: column-reverse;
        gap: 2rem;
    }

    footer nav {
        width: 100%;
    }
}

@media (max-width: 768px) {
    footer nav ul {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        column-gap: 1.5rem;
        row-gap: 0.6rem;
        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-inner--download {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "eyebrow eyebrow" "title download" "intro intro";
    gap: 16px 24px;
    align-items: center;
}

.page-header-inner--download .page-header-eyebrow {
    grid-area: eyebrow;
    margin: 0;
}

.page-header .page-header-inner--download h1 {
    grid-area: title;
    margin: 0;
}

.page-header-inner--download .page-header-lede {
    grid-area: intro;
}

.page-header-inner--download .page-header-download {
    grid-area: download;
    justify-self: start;
    margin: 0;
}

@media (min-width: 769px) {
    .page-header-inner--download .page-header-download {
        font-size: 17px;
        padding: 7px 14px;
    }
}

.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; }
    .page-header-inner--download {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "eyebrow" "title" "intro" "download";
    }
}

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

/* Product-family overview follows the catalog with a readable text measure. */
.catalog-overview {
    margin: 3rem 0 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border-color);
}

/* A shared border keeps the photo and caption gray identical despite the image filter. */
.single-page.employment .product-photo {
    border: 1px solid var(--border-color-light);
    border-radius: 8px;
    overflow: hidden;
}

/* Brighten the four employment photos without altering the image assets. */
.single-page.employment .product-photo img {
    filter: brightness(1.25);
    border: 0;
    border-radius: 0;
}

.single-page.employment .product-photo figcaption {
    margin-top: 0;
    padding: 0.375rem 1rem;
    text-align: center;
}

.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;
}

/* Align the desktop PDF link with the body content inside Pico's article padding. */
@media (min-width: 769px) {
    main:has(.single-page.vendor-info) .page-header-inner {
        padding-right: var(--pico-block-spacing-horizontal);
    }
}

/* Keep the vendor header close to its identifiers. */
main:has(.single-page.vendor-info) .page-header {
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
}

/* 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:has(> strong:first-child) > a {
    justify-self: start;
}

.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);
}

/* Vendor-page prose links use the site's interactive link treatment rather
   than carrying a magenta rule at rest. PDF cards keep their own styling. */
.single-page.vendor-info .content a:not([href$=".pdf"]):not([href*=".pdf?"]) {
    border-bottom: 1px solid transparent;
    text-decoration: none;
}

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

/* Compact third-party verification action. The shortcode wrapper keeps the
   status and link together as one grid item and opts out of prose underlines. */
.single-page.vendor-info .content .vendor-verify {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.single-page.vendor-info .content .vendor-verify a {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--wv-purple-light);
    border-bottom: 0;
    text-decoration: none;
}

.single-page.vendor-info .content .vendor-verify a:hover {
    color: #fff;
    border-bottom: 0;
}

.single-page.vendor-info .content .vendor-verify__label {
    border-bottom: 1px solid transparent;
}

.single-page.vendor-info .content .vendor-verify a:hover .vendor-verify__label {
    border-bottom-color: var(--wv-purple-light);
}

.single-page.vendor-info .content .vendor-verify__arrow {
    color: inherit;
}

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

/* A PDF link renders as a tall "card". The bullet above is absolutely
   positioned with no vertical anchor, so on a card it pins to the top edge and
   looks off-centre. Drop the bullet for card list items and pull them flush
   left under the heading. Plain-text bullets in the same list are unaffected. */
.single-page.vendor-info .content li:has(> a[href$=".pdf"]),
.single-page.vendor-info .content li:has(> a[href*=".pdf?"]) {
    padding-left: 0;
}
.single-page.vendor-info .content li:has(> a[href$=".pdf"])::before,
.single-page.vendor-info .content li:has(> a[href*=".pdf?"])::before {
    content: none;
}

/* 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 ul {
        margin-left: 0;
    }

    .single-page.vendor-info .content li:has(> strong:first-child) {
        grid-template-columns: minmax(0, 1fr);
    }

    .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 {
    color: #fff;
    /* Smaller than .page-header h1 (2.5rem) so it reads as a level below it */
    font-size: 1.75rem;
    margin-bottom: 1rem;
    position: relative;
    padding-bottom: 1rem;
    /* inline-block so the underline below can be width:100% of the TEXT
       rather than a fixed 100px that ran out mid-first-word */
    display: inline-block;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    /* Fades right only, now that it starts at the left edge */
    background: linear-gradient(90deg, 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 - SPEC BAND
   ============================================
   Hard numbers directly under the page header. Intentionally the densest
   thing on the page — monospace numerals, uppercase micro-labels, hairline
   dividers — so it reads as specifications rather than marketing, and
   breaks up the run of identical cards below.

   Shares the visual language of the homepage .trust-band on purpose, but
   carries ENGINEERING specs (coverage, power, certification) rather than
   company stats (combined years, modules shipped). The homepage owns those;
   repeating them here would restate the homepage instead of adding to it. */

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

.cap-specs-grid {
    display: grid;
    grid-template-columns: 1fr repeat(4, minmax(0, calc((1360px - 128px) / 4))) 1fr;
}

.cap-specs-grid > .cell:nth-of-type(1) { grid-column: 2; }
.cap-specs-grid > .cell:nth-of-type(2) { grid-column: 3; }
.cap-specs-grid > .cell:nth-of-type(3) { grid-column: 4; }
.cap-specs-grid > .cell:nth-of-type(4) { grid-column: 5; }

.cap-specs-grid .cell {
    padding: 26px 28px;
    border-right: 1px solid var(--border-color);
}

.cap-specs-grid .cell:last-child { border-right: 0; }
.cap-specs-grid .cell:first-child { padding-left: 0; }

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

.cap-specs-grid .lbl {
    font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
    font-size: 11px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin-top: 8px;
    line-height: 1.3;
}

.cap-specs-grid .cell-link {
    text-decoration: none;
    border-bottom: none;
    display: block;
}

/* The ISO cell links to a .pdf, which otherwise picks up the site-wide
   PDF-chip styling (card background, border, radius, padding, and a 📄
   ::before). Inside the spec band the cell IS the affordance, so strip all
   of it. Same problem the competency card's ISO link already had -- see
   .capability-cta-item a.procurement-link[href$=".pdf"] above.
   Specificity (0,3,0) beats a[href$=".pdf"] (0,1,1) without !important. */
.cap-specs-grid .cell-link[href$=".pdf"],
.cap-specs-grid .cell-link[href*=".pdf?"] {
    display: block;
    padding: 0;
    margin: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.cap-specs-grid .cell-link[href$=".pdf"]:hover,
.cap-specs-grid .cell-link[href*=".pdf?"]:hover {
    border: 0;
    box-shadow: none;
}

.cap-specs-grid .cell-link[href$=".pdf"]::before,
.cap-specs-grid .cell-link[href*=".pdf?"]::before {
    content: none;
}

.cap-specs-grid .cell-link:hover .num { color: var(--wv-purple-light); }
.cap-specs-grid .cell-link:hover .lbl { color: var(--text-primary); }

/* Procurement strip on the band's bottom edge carries the Capability
   Statement. Same .pdf chip problem as the ISO cell above — strip it so the
   link reads as text, matching the homepage trust band's strip. */
.cap-specs .procurement-strip a[href$=".pdf"],
.cap-specs .procurement-strip a[href*=".pdf?"] {
    display: inline;
    padding: 0;
    margin: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.cap-specs .procurement-strip a[href$=".pdf"]::before,
.cap-specs .procurement-strip a[href*=".pdf?"]::before {
    content: none;
}

/* Intermediate widths (1101-1259px): same fix as the homepage trust band.
   The edge-to-edge math uses 1fr spacer columns either side of 1232px of
   fixed cells, so as the viewport approaches 1232px the spacers collapse
   toward zero and the first cell's text ends up against the window edge
   (.cell:first-child has padding-left: 0 by design). Below 1260px, drop the
   fixed widths and stretch the cells with plain padding instead.

   Handoff to 2-up is at 1100px here, not 900px as on the homepage: these
   cells have no icon but carry longer values, and "ISO 9001:2015" at 26px
   monospace needs roughly a 259px cell, so four of them stop fitting below
   about 1100px. */
@media (max-width: 1339px) and (min-width: 1101px) {
    .cap-specs-grid {
        /* Matches main.container's own padding, so the first cell's value
           lines up with the H1 above it and the handoff from the fixed
           layout is seamless: at 1340px the 1fr gutter is (1340-1232)/2 =
           54px and 4vw is 53.6px. The homepage uses a flat 32px and cuts
           over at 1259px, which for this band would leave 1260-1339px with
           gutters of 14-54px -- still visibly tight at the low end. */
        padding: 0 clamp(1rem, 4vw, 4rem);
        grid-template-columns: repeat(4, 1fr);
    }
    .cap-specs-grid > .cell:nth-of-type(n) {
        grid-column: auto;
    }
    /* first-child keeps padding-left: 0 from the base rule, as on the
       homepage, so its text aligns to the grid's own 32px padding. */
}

/* Below the fixed 4-up width the edge-to-edge divider trick stops earning
   its keep; fall back to a plain 2-up, then 1-up. */
@media (max-width: 1100px) {
    .cap-specs-grid {
        grid-template-columns: repeat(2, 1fr);
        padding: 0 1.5rem;
    }
    .cap-specs-grid > .cell:nth-of-type(n) { grid-column: auto; }
    .cap-specs-grid .cell:first-child { padding-left: 28px; }
    .cap-specs-grid .cell:nth-of-type(2) { border-right: 0; }
    .cap-specs-grid .cell:nth-of-type(1),
    .cap-specs-grid .cell:nth-of-type(2) { border-bottom: 1px solid var(--border-color); }
}

@media (max-width: 560px) {
    .cap-specs-grid { grid-template-columns: 1fr; }
    .cap-specs-grid .cell {
        border-right: 0;
        border-bottom: 1px solid var(--border-color);
        padding-left: 28px;
    }
    .cap-specs-grid .cell:last-child { border-bottom: 0; }
}

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

/* Per-image framing (pan / zoom / dim) is no longer keyed off the filename.
   It now comes from focal / zoom / dim on each competency card in front
   matter and is emitted as an inline style by capabilities.html, so the
   framing follows the card when an editor swaps the photo in the CMS.
   The old rules matched img[src*="quality"] and img[src*="shelter"] and
   silently stopped applying the moment a filename changed. */


.competency-content h2 {
    margin-top: 0;
    /* White, matching every other card title on the site. The purple here was
       decorative — these cards carry no purple affordance — and was the last
       card title still coloured. */
    color: #fff;
    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);
}

/* Image sits on the left for every card. Alternating the side was tried and
   reverted: inside a bordered card each flip reads as a layout change rather
   than a rhythm, because the border makes the card a discrete object the eye
   re-parses. Alternation suits content that flows freely against the page. */

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

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

/* ============================================
   CAPABILITIES PAGE - QUALIFICATION & TEST
   ============================================
   A table, not cards. Real qualification data is label/value pairs
   (MIL-STD method numbers, temperature ranges, vibration profiles), and
   rows scale to any count where a card grid forces a redesign. It also
   breaks the run between the two card grids either side of it. */

.qualification-section {
    margin: 4rem 0;
}

.qual-table {
    width: 100%;
    margin-top: 1.25rem;
    border-collapse: collapse;
    background: transparent;
}

.qual-table th,
.qual-table td {
    text-align: left;
    padding: 0.9rem 1rem;
    border-bottom: 1px solid var(--border-color);
    vertical-align: baseline;
    background: transparent;
}

/* Column headers */
.qual-table thead th {
    font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-secondary);
    border-bottom-color: var(--border-color-light);
}

/* Row header = the test name */
.qual-table tbody th {
    font-weight: 500;
    font-size: 0.95rem;
    color: var(--text-primary);
}

/* Measured values in monospace so data reads as data, matching the spec band */
.qual-standard,
.qual-range {
    font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* Not-yet-established values are an em dash, deliberately quiet — a blank
   spec should look unfilled, not be dressed up as a claim. */
.qual-tbd {
    color: var(--text-muted);
}

/* Footnote qualifying the whole table */
.qual-note {
    margin: 1rem 0 0;
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* Reading aid only — nothing here is clickable. Same treatment as
   .market-row so the page's two data sections behave alike. */
.qual-table tbody tr {
    transition: background 0.15s ease;
}

.qual-table tbody tr:hover {
    background: var(--background-medium);
}

/* Keep the first column off the edge revealed by the row hover fill, matching
   the inset used for homepage news dates. */
.qual-table th:first-child,
.qual-table td:first-child { padding-left: 12px; }
.qual-table th:last-child,
.qual-table td:last-child { padding-right: 0; }

@media (max-width: 640px) {
    .qual-table,
    .qual-table tbody,
    .qual-table tr { display: block; }
    .qual-table thead { display: none; }
    .qual-table tbody tr {
        padding: 0.9rem 0;
        border-bottom: 1px solid var(--border-color);
    }
    .qual-table tbody th,
    .qual-table tbody td {
        display: block;
        border-bottom: 0;
        padding: 0.15rem 0;
    }
}

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

/* Four-up on wide screens. Was minmax(500px, 1fr), which forced two-up with
   a lot of internal air and made these read as four more full-size cards
   rather than as one set of product lines. Each card links straight to its
   category page, so it does not need to carry the weight of a section. */
.category-showcase-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 1.5rem;
    margin-top: 1.25rem;
}

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

/* Cards are flex columns so the "View ... Products" buttons pin to a common
   baseline. Bullet counts differ by design — they track the actual depth of
   each product line (FTS 12 products / 7 bullets, Synthesizers 3 / 3) — and
   grid stretches every card in a row to the tallest. Without this the four
   buttons land at four different heights and the row looks unfinished. */
.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;
    display: flex;
    flex-direction: column;
}

.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: 170px;
    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;
}

.category-showcase-content {
    padding: 1.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.category-showcase-content h3 {
    margin-top: 0;
    /* Zero, not a value — .category-showcase-content is a flex column (so the
       buttons can pin to a common baseline), and flex containers do not
       collapse adjacent margins. This margin would ADD to the list's
       margin-top rather than overlapping it. The gap is set on the list. */
    margin-bottom: 0;
    /* White heading voice; the purple "View Products" button is the card's one
       affordance. Matches the product-card titles. */
    color: #fff;
    font-size: 1.15rem;
}

.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-light);
}

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

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

/* margin-bottom: auto absorbs the slack in shorter cards, pushing the button
   to the bottom. Preferred over margin-top: auto on the button itself, which
   would collapse the gap to zero on the tallest card — this keeps the
   button's own 1rem top margin as a guaranteed minimum. */
.category-showcase-content ul {
    /* Sole control of the gap under the heading, since margins don't collapse
       here. margin-bottom: auto absorbs the slack that pins the button. */
    margin: 0.75rem 0 auto;
    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;
    /* Keeps the button at its natural width. Without this it stretches to
       the full card width now that the content column is a flex container. */
    align-self: flex-start;
    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 → product-line routing table (partials/markets-map.html).
   Replaced .markets-grid / .market-card / .market-icon, a five-card emoji
   grid whose copy restated its own headings. Rows rather than cards: this is
   a lookup table, not a set of claims, and the page already has two card
   grids above it. */
/* 1.25rem, not 3rem: .section-title is inline-block (so its underline can be
   width:100% of the text), and inline-block margins do not collapse with the
   following sibling. This adds to the title's 1rem margin-bottom and 1rem
   padding-bottom rather than overlapping them. Kept equal to the category
   grid and qualification table so all three sections sit the same. */
.markets-map {
    margin-top: 1.25rem;
    border-top: 1px solid var(--border-color);
}

.market-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1.5rem 2rem;
    align-items: center;
    /* Horizontal padding + matching negative margin so the hover highlight
       extends past the text without shifting the text itself out of
       alignment with the section title above. */
    padding: 1.25rem 1rem;
    margin: 0 -1rem;
    border-bottom: 1px solid var(--border-color);
    transition: background 0.15s ease;
}

/* Reading aid, not an affordance: the row is not a link (a market can serve
   more than one product line, so there is no single destination). The chips
   are the controls and look like controls. Mirrors .news-row on the home
   page, which hovers to --background-dark because it sits on
   --background-medium; this sits on --background-dark, so it lifts instead. */
.market-row:hover {
    background: var(--background-medium);
}

.market-row-id {
    display: grid;
    grid-template-columns: 2.5rem 1fr;
    align-items: baseline;
    column-gap: 0.75rem;
}

.market-num {
    font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
    font-size: 0.85rem;
    color: var(--wv-purple);
    grid-row: span 2;
}

.market-row-id h3 {
    margin: 0;
    font-size: 1.15rem;
    color: var(--text-primary);
}

.market-tag {
    font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
    font-size: 0.7rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-top: 0.35rem;
}

.market-lines {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-end;
}

.market-line {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.85rem;
    border: 1px solid var(--border-color-light);
    border-radius: 6px;
    font-size: 0.85rem;
    color: var(--text-secondary);
    text-decoration: none;
    white-space: nowrap;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.market-line:hover {
    border-color: var(--wv-purple);
    color: #fff;
}

/* Arrow motion matches .news-row:hover .arrow on the home page */
.market-line .arrow {
    color: var(--wv-purple-light);
    transition: transform 0.2s ease;
}

.market-line:hover .arrow {
    transform: translateX(3px);
}

@media (max-width: 768px) {
    .market-row {
        grid-template-columns: 1fr;
        gap: 0.85rem;
    }
    .market-lines { justify-content: flex-start; }
}

/* .market-card / .market-icon removed with the emoji grid they styled. */

/* ============================================
   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);
    /* Placeholder behind the hero image: covers the load gap and stands in
       if the image 404s. Belongs on the container, not the <img> itself. */
    background: linear-gradient(135deg, var(--background-medium) 0%, var(--wv-purple-dark) 50%, var(--background-dark) 100%);
}

.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%;
}

.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-flex;
    align-items: center;
    align-self: flex-start;
    margin: 0.6rem 0 0;
    padding: 0.5rem 1rem;
    background-color: var(--background-card);
    border: 1px solid var(--border-color-light);
    border-radius: 6px;
    color: var(--wv-purple-light);
    font-weight: 500;
    font-size: 0.85rem;
    text-decoration: none;
    transition: all 0.15s ease;
}

/* Every download is a uniform button; suppress the 📄 that the global
   a[href$=".pdf"] rule would otherwise prepend to the PDF "Open" links. */
.resources-page .resource-download::before {
    content: none !important;
}

.resources-page .resource-download:hover,
.resources-page .resource-card:hover .resource-download {
    color: #fff;
    border-color: var(--wv-purple);
    box-shadow: 0 4px 12px rgba(119, 0, 153, 0.2);
}

.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;
}

/* Explicit full-resolution access without downloading the original on every visit. */
a.image-original-link {
    display: block;
    width: fit-content;
    max-width: 100%;
    margin: 0.5rem 0 0;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.5;
    text-decoration: underline;
    text-underline-offset: 3px;
}
a.image-original-link:hover,
a.image-original-link:focus-visible {
    color: var(--text-primary);
}