/* ==========================================================================
    VFW Theme: INDUSTRIAL VOLT
    --------------------------------------------------------------------------
    A reusable "technical contractor" theme for VFW projects — heavy condensed
    headlines that end in an accent full stop, a navy + electric-blue palette
    with a single hot accent, slanted photo crops, a diagonal accent stripe,
    split-ring icons, and square-cornered buttons. Built for engineering /
    installer / trades companies that sell to other businesses (first consumer:
    projects/businesses/hermes). Three parts, mirroring `classic-poster`:

    1. FONTS — self-hosted Barlow Condensed (700/800, headlines) and Barlow
       (400/600, body). SIL OFL — see ./fonts/OFL.txt. No CDN.

    2. THEME TOKENS — `.vfw-theme-industrial-volt` defines a private `--iv-*`
       vocabulary and maps it onto the semantic `--vfw-color-*` layer, so every
       stock VFW widget re-skins automatically. The palette is PRESET-SWAPPABLE:
       everything decorative reads `--iv-accent` / `--iv-brand`, never a literal
       hue, so a future preset (e.g. green instead of orange) overrides only those
       `--iv-*` values in a separate file under ./presets/.

    2b. CONTRAST RULE — the bright accent (`--iv-accent`) is DECORATION ONLY:
        full stops, rules, stripes, icon rings, arrows. It never sits behind
        text, because white on it is ~3:1 and fails WCAG AA. Anything that
        carries text (buttons, links, eyebrow labels) uses `--iv-accent-action`,
        a darker shade of the same hue that clears 4.5:1 against white. Presets
        must keep that pair honest.

    2c. LIGHT ONLY — the theme is two-surface by design (white / tinted paper,
        with brand-blue and ink bands as section colors). It does not respond to
        vfw-theme-dark; section colors come from the section wrapper classes.

    3. COMPONENT KIT — `vfw-iv-*` classes that reproduce the visual LANGUAGE:
       sections + container, headings with the accent dot and rule, buttons,
       the sticky nav with a mobile panel, the split hero with slanted media,
       stripe and bolt outline, the brand feature band with split-ring icons,
       photo cards, project cards, check lists, the closing CTA band, the
       coverage strip, the contact form (choice tiles + attachment drop zone),
       the photo placeholder, the footer, the inner-page header, direct-contact
       cards, long-form prose (legal pages), plain feature cards, inline media
       blocks, a trust strip, the nav phone link, the skip link, the two-column
       split, and the project kit (tag chips, filter chips, linked project
       cards, article meta row and figure, technology box, photo gallery,
       prev/next navigation, feature pair with a photo pair). Photos accept `--iv-media-focus` (object-position) per
       slot, and the hero title size is the `--iv-hero-title-size` token.

    Class naming: single-dash kebab, `vfw-iv-` prefix, modifiers as full words
    (`vfw-iv-section-brand`, not `--brand`). No `__`, no column alignment.

    Usage: load core/reset.css, then core/tokens.css, then this file, then add
    `vfw-theme-industrial-volt` to <html>. The kit is CSS-only; the one piece of
    behavior it expects from the page is toggling `vfw-iv-nav-open` on the nav
    (and `aria-expanded` on its toggle) for the mobile menu, and optionally
    `vfw-iv-dropzone-active` on a drop zone during drag-over. Nav submenus open
    on hover and keyboard focus with no JS; on mobile they render inline.
   ========================================================================== */

/* ==========================================================================
    1. FONTS (self-hosted — see ./fonts/)
   ========================================================================== */

@font-face {
    font-family: 'IV Display';
    src: url('fonts/barlow-condensed-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'IV Display';
    src: url('fonts/barlow-condensed-800.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'IV Text';
    src: url('fonts/barlow-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'IV Text';
    src: url('fonts/barlow-600.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* ==========================================================================
    2. THEME TOKENS
   ========================================================================== */

.vfw-theme-industrial-volt {
    /* --- Palette (PRESET-SWAPPABLE hues) --- */
    --iv-accent: #ff6a13; /* hot accent — decoration only (see 2b) */
    --iv-accent-action: #c2410c; /* same hue, AA-safe under white text (5.2:1) */
    --iv-accent-action-hover: #9a3412;
    --iv-accent-weak: rgba(255, 106, 19, 0.14);
    --iv-brand: #0b4fb3; /* electric blue — feature band, focus, links */
    --iv-brand-deep: #083c8a;
    --iv-brand-light: #8fb8e8; /* bolt outline, light keylines on brand */
    --iv-brand-weak: rgba(11, 79, 179, 0.08);

    /* --- Palette (fixed ink + neutrals) --- */
    --iv-ink: #0b1a33; /* navy-black — headlines, body text, ink sections */
    --iv-ink-2: #13284a; /* raised surface on ink */
    --iv-paper: #ffffff;
    --iv-paper-2: #f3f5f9; /* tinted section / input fill */
    --iv-keyline: #d9dee8;
    --iv-keyline-strong: #aeb7c6;
    --iv-gray: #4a5568; /* secondary text on paper (7.4:1) */
    --iv-gray-light: #c3cad6; /* secondary text on ink */
    --iv-on-dark-keyline: rgba(255, 255, 255, 0.28);

    /* --- Typography --- */
    --iv-font-display: 'IV Display', 'Barlow Condensed', 'Arial Narrow', Impact, sans-serif;
    --iv-font-text: 'IV Text', 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* --- Geometry: one slant drives every angled edge --- */
    --iv-slant: clamp(2.5rem, 8vw, 7rem); /* vertical drop of a slanted photo edge */
    --iv-stripe-width: clamp(1.25rem, 3.5vw, 3rem);
    --iv-radius: 2px;
    --iv-focus: var(--iv-brand);

    /* --- Decorative masks (zero-dep inline SVG; colored by background-color) --- */
    --iv-bolt-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 140'%3E%3Cpolygon points='62 4 12 80 46 80 34 136 88 56 54 56 62 4' fill='none' stroke='black' stroke-width='5' stroke-linejoin='miter'/%3E%3C/svg%3E");

    /* --- Map onto the semantic --vfw-color-* layer (re-skins all widgets) --- */
    --vfw-color-background: var(--iv-paper);
    --vfw-color-surface: var(--iv-paper-2);
    --vfw-color-border: var(--iv-keyline);
    --vfw-color-text: var(--iv-ink);
    --vfw-color-text-muted: var(--iv-gray);

    --vfw-color-primary: var(--iv-accent-action);
    --vfw-color-primary-hover: var(--iv-accent-action-hover);
    --vfw-color-primary-light: var(--iv-accent-weak);
    --vfw-color-primary-focus: rgba(11, 79, 179, 0.35);
    --vfw-color-text-on-primary: var(--iv-paper);

    /* Status: standard functional hues (each clears 4.5:1 under white text).
       Unlike classic-poster there is no palette-purity rule to honor, so forms
       get the usual red/amber/green affordance. Info rides the brand blue. */
    --vfw-color-info: var(--iv-brand);
    --vfw-color-info-bg: var(--iv-brand-weak);
    --vfw-color-info-border: rgba(11, 79, 179, 0.35);
    --vfw-color-info-text: var(--iv-brand-deep);
    --vfw-color-info-contrast: var(--iv-paper);

    --vfw-color-success: #15803d;
    --vfw-color-success-bg: rgba(21, 128, 61, 0.08);
    --vfw-color-success-border: rgba(21, 128, 61, 0.35);
    --vfw-color-success-text: #166534;
    --vfw-color-success-contrast: var(--iv-paper);

    --vfw-color-warning: #b45309;
    --vfw-color-warning-bg: rgba(180, 83, 9, 0.08);
    --vfw-color-warning-border: rgba(180, 83, 9, 0.35);
    --vfw-color-warning-text: #92400e;
    --vfw-color-warning-contrast: var(--iv-paper);

    --vfw-color-error: #b91c1c;
    --vfw-color-error-bg: rgba(185, 28, 28, 0.07);
    --vfw-color-error-border: rgba(185, 28, 28, 0.4);
    --vfw-color-error-text: #991b1b;
    --vfw-color-error-contrast: var(--iv-paper);

    --vfw-navbar-bg: var(--iv-paper);
    --vfw-shadow-color: rgba(11, 26, 51, 0.14);

    /* --- System tokens: near-square corners + contractor type --- */
    --vfw-border-radius: var(--iv-radius);
    --vfw-font-family: var(--iv-font-text);
    --vfw-font-family-headings: var(--iv-font-display);
}

.vfw-theme-industrial-volt body {
    background-color: var(--iv-paper);
    color: var(--iv-ink);
    font-family: var(--iv-font-text);
    font-size: 1rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* Anchor targets clear the sticky nav (80px) when reached via #fragment. */
.vfw-theme-industrial-volt [id] {
    scroll-margin-top: 6rem;
}

.vfw-theme-industrial-volt :focus-visible {
    outline: 3px solid var(--iv-focus);
    outline-offset: 2px;
}

/* ==========================================================================
    3. COMPONENT KIT — vfw-iv-*
   ========================================================================== */

/* --- 3.0 Skip link ------------------------------------------------------------
    First focusable element on the page; visible only while focused. */

.vfw-iv-skip-link {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    z-index: calc(var(--vfw-z-overlay, 100) + 1);
    padding: 0.6rem 1rem;
    background-color: var(--iv-ink);
    color: var(--iv-paper);
    font-weight: 600;
    transform: translateY(-200%);
}

.vfw-iv-skip-link:focus {
    transform: none;
}

/* --- 3.1 Sections + inner container -----------------------------------------
    Sections are full-bleed color layers; padding lives on the container. Dark
    sections (brand, ink) flip the focus ring to white so it stays visible. */

.vfw-iv-section {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    background-color: var(--iv-paper);
    color: var(--iv-ink);
}

.vfw-iv-section-tinted {
    background-color: var(--iv-paper-2);
}

.vfw-iv-section-brand {
    --iv-focus: var(--iv-paper);
    background-color: var(--iv-brand);
    color: var(--iv-paper);
}

.vfw-iv-section-ink {
    --iv-focus: var(--iv-paper);
    background-color: var(--iv-ink);
    color: var(--iv-paper);
}

.vfw-iv-container {
    position: relative;
    z-index: 1;
    max-width: var(--vfw-container-max, 1200px);
    margin: 0 auto;
    padding: clamp(3rem, 7vw, 5.5rem) var(--vfw-container-padding, 1.5rem);
    box-sizing: border-box;
}

.vfw-iv-container-tight {
    padding-top: clamp(1.75rem, 4vw, 2.5rem);
    padding-bottom: clamp(1.75rem, 4vw, 2.5rem);
}

.vfw-iv-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
    gap: clamp(1rem, 2vw, 1.5rem);
}

/* Two columns from 960px (text beside a list or a photo), one column below. */
.vfw-iv-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem 3rem;
    align-items: start;
}

.vfw-iv-stack {
    display: grid;
    gap: 2rem;
}

/* The four-card row: 1 column, 2x2 from 720px, 4 across from 1100px. Explicit
   counts, because an auto-fit grid of four items passes through a 3 + 1 orphan
   on every tablet width before four fit. */
.vfw-iv-grid-narrow {
    grid-template-columns: 1fr;
}

/* --- 3.2 Headings, accent dot, eyebrow rule, lede ---------------------------
    `vfw-iv-dot` wraps the trailing full stop of a headline. `vfw-iv-eyebrow`
    draws the short accent rule; give it text to get a small label after it. */

.vfw-iv-heading {
    font-family: var(--iv-font-display);
    font-weight: 800;
    font-size: clamp(2.25rem, 5.5vw, 4rem);
    line-height: 0.92;
    letter-spacing: -0.01em;
    color: inherit;
    margin: 0 0 var(--vfw-space-lg, 1.5rem);
    text-wrap: balance;
}

.vfw-iv-subheading {
    font-family: var(--iv-font-display);
    font-weight: 700;
    font-size: clamp(1.4rem, 2.6vw, 1.85rem);
    line-height: 1.05;
    color: inherit;
    margin: 0 0 var(--vfw-space-sm, 0.5rem);
}

.vfw-iv-dot {
    color: var(--iv-accent);
}

.vfw-iv-eyebrow {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0 0 var(--vfw-space-md, 1rem);
    font-family: var(--iv-font-text);
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--iv-accent-action);
}

.vfw-iv-eyebrow::before {
    content: '';
    flex: none;
    width: clamp(3.5rem, 8vw, 6rem);
    height: 3px;
    background-color: var(--iv-accent);
}

.vfw-iv-section-brand .vfw-iv-eyebrow,
.vfw-iv-section-ink .vfw-iv-eyebrow {
    color: var(--iv-paper);
}

.vfw-iv-lede {
    max-width: 34rem;
    margin: 0;
    font-size: clamp(1rem, 1.4vw, 1.125rem);
    line-height: 1.55;
    color: inherit;
}

.vfw-iv-muted {
    color: var(--iv-gray);
}

.vfw-iv-section-brand .vfw-iv-muted,
.vfw-iv-section-ink .vfw-iv-muted {
    color: var(--iv-gray-light);
}

/* Section head: headline left, intro right, bottom-aligned on wide screens. */
.vfw-iv-section-head {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--vfw-space-md, 1rem) var(--vfw-space-xl, 2rem);
    align-items: end;
    margin-bottom: clamp(2rem, 4vw, 3rem);
}

.vfw-iv-section-head .vfw-iv-heading {
    margin-bottom: 0;
}

/* --- 3.3 Buttons (square, text + trailing arrow) --------------------------- */

.vfw-iv-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    padding: 0.85rem 1.5rem;
    border: 2px solid var(--iv-accent-action);
    border-radius: var(--iv-radius);
    background-color: var(--iv-accent-action);
    color: var(--iv-paper);
    font-family: var(--iv-font-text);
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--vfw-transition-fast, 0.15s ease), border-color var(--vfw-transition-fast, 0.15s ease), color var(--vfw-transition-fast, 0.15s ease);
}

.vfw-iv-button svg {
    flex: none;
    width: 1.15em;
    height: 1.15em;
    transition: transform var(--vfw-transition-fast, 0.15s ease);
}

.vfw-iv-button:hover {
    border-color: var(--iv-accent-action-hover);
    background-color: var(--iv-accent-action-hover);
}

.vfw-iv-button:hover svg {
    transform: translateX(3px);
}

.vfw-iv-button-outline {
    border-color: var(--iv-ink);
    background-color: transparent;
    color: var(--iv-ink);
}

.vfw-iv-button-outline:hover {
    border-color: var(--iv-ink);
    background-color: var(--iv-ink);
    color: var(--iv-paper);
}

/* On brand / ink sections: white outline that fills white on hover. */
.vfw-iv-button-on-brand {
    border-color: var(--iv-paper);
    background-color: transparent;
    color: var(--iv-paper);
}

.vfw-iv-button-on-brand:hover {
    border-color: var(--iv-paper);
    background-color: var(--iv-paper);
    color: var(--iv-ink);
}

.vfw-iv-button-block {
    width: 100%;
}

.vfw-iv-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--vfw-space-md, 1rem);
}

/* --- 3.4 Navigation bar -----------------------------------------------------
    Desktop: logo | links | CTA in one row. Below 960px the links + CTA move
    into a drop-down panel shown by `vfw-iv-nav-open` on the nav. The panel
    hides with visibility (not display) so it animates and leaves tab order. */

.vfw-iv-nav {
    position: sticky;
    top: 0;
    z-index: calc(var(--vfw-z-overlay, 100) - 1); /* under overlays, modals, toasts */
    width: 100%;
    background-color: var(--vfw-navbar-bg);
    border-bottom: 1px solid var(--iv-keyline);
}

.vfw-iv-nav-inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--vfw-space-lg, 1.5rem);
    max-width: var(--vfw-container-max, 1200px);
    margin: 0 auto;
    padding: 0.85rem var(--vfw-container-padding, 1.5rem);
    box-sizing: border-box;
}

.vfw-iv-nav-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    flex: none;
    font-family: var(--iv-font-display);
    font-weight: 800;
    font-size: 1.6rem;
    line-height: 1;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--iv-ink);
}

.vfw-iv-nav-logo img,
.vfw-iv-nav-logo svg {
    display: block;
    height: 2.75rem;
    width: auto;
}

.vfw-iv-nav-menu {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 3vw, 2.5rem);
}

.vfw-iv-nav-links {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2.5vw, 2.25rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

.vfw-iv-nav-link {
    position: relative;
    display: inline-block;
    padding: 0.35rem 0;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    color: var(--iv-ink);
}

.vfw-iv-nav-link::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background-color: var(--iv-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--vfw-transition-fast, 0.15s ease);
}

.vfw-iv-nav-link:hover::after,
.vfw-iv-nav-link-active::after {
    transform: scaleX(1);
}

.vfw-iv-nav-phone {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0;
    font-weight: 600;
    font-size: 0.95rem;
    white-space: nowrap;
    text-decoration: none;
    color: var(--iv-ink);
}

.vfw-iv-nav-phone svg {
    flex: none;
    width: 1.1rem;
    height: 1.1rem;
    color: var(--iv-accent-action);
}

.vfw-iv-nav-phone:hover {
    color: var(--iv-accent-action);
}

.vfw-iv-nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 1px solid var(--iv-keyline);
    border-radius: var(--iv-radius);
    background-color: transparent;
    color: var(--iv-ink);
    cursor: pointer;
}

.vfw-iv-nav-toggle svg {
    width: 1.4rem;
    height: 1.4rem;
}

/* Submenu: an <li class="vfw-iv-nav-item-menu"> holding a parent link and a
   <ul class="vfw-iv-nav-submenu">. Opens on hover or focus-within; a bridge
   pseudo-element spans the gap so the pointer can travel into the panel. */
.vfw-iv-nav-item-menu {
    position: relative;
}

.vfw-iv-nav-item-menu > .vfw-iv-nav-link {
    margin-right: 1rem;
}

.vfw-iv-nav-item-menu > .vfw-iv-nav-link::before {
    content: '';
    position: absolute;
    top: 50%;
    right: -1rem;
    width: 0.4rem;
    height: 0.4rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-70%) rotate(45deg);
}

.vfw-iv-nav-submenu {
    position: absolute;
    top: calc(100% + 0.75rem);
    left: -1.25rem;
    z-index: 1;
    min-width: 17rem;
    margin: 0;
    padding: 0.5rem 0;
    list-style: none;
    border: 1px solid var(--iv-keyline);
    border-top: 3px solid var(--iv-accent);
    background-color: var(--iv-paper);
    box-shadow: var(--vfw-shadow-bottom-lg, 0 10px 24px rgba(11, 26, 51, 0.14));
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.35rem);
    pointer-events: none;
    transition: opacity var(--vfw-transition-fast, 0.15s ease), transform var(--vfw-transition-fast, 0.15s ease), visibility 0s linear 0.15s;
}

.vfw-iv-nav-submenu::before {
    content: '';
    position: absolute;
    top: -1rem;
    left: 0;
    right: 0;
    height: 1rem;
}

.vfw-iv-nav-item-menu:hover > .vfw-iv-nav-submenu,
.vfw-iv-nav-item-menu:focus-within > .vfw-iv-nav-submenu {
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
    transition: opacity var(--vfw-transition-fast, 0.15s ease), transform var(--vfw-transition-fast, 0.15s ease), visibility 0s;
}

.vfw-iv-nav-submenu-link {
    display: block;
    padding: 0.6rem 1.25rem;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    color: var(--iv-ink);
}

.vfw-iv-nav-submenu-link:hover,
.vfw-iv-nav-submenu-link-active {
    background-color: var(--iv-paper-2);
    color: var(--iv-accent-action);
}

/* --- 3.5 Hero ---------------------------------------------------------------
    Headline + rule + subtitle on the left, lede + actions on the right, a bolt
    outline bleeding off the top-right corner, then full-bleed media whose top
    edge rises left-to-right with an accent stripe riding that edge. The media
    tucks up under the text block by half a slant on wide screens. */

.vfw-iv-hero {
    position: relative;
    overflow: hidden;
    background-color: var(--iv-paper);
    color: var(--iv-ink);
}

.vfw-iv-hero-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--vfw-space-xl, 2rem);
    align-items: center;
    max-width: var(--vfw-container-max, 1200px);
    margin: 0 auto;
    padding: clamp(2.5rem, 6vw, 4.5rem) var(--vfw-container-padding, 1.5rem) clamp(1.5rem, 3vw, 2.5rem);
    box-sizing: border-box;
}

.vfw-iv-hero-title {
    margin: 0;
    font-family: var(--iv-font-display);
    font-weight: 800;
    font-size: var(--iv-hero-title-size, clamp(3.25rem, 11vw, 7.5rem));
    line-height: 0.86;
    letter-spacing: -0.015em;
    text-transform: uppercase;
    color: var(--iv-ink);
}

.vfw-iv-hero-subtitle {
    margin: 0;
    max-width: 26rem;
    font-size: clamp(1.05rem, 1.6vw, 1.25rem);
    line-height: 1.45;
}

.vfw-iv-hero-subtitle::before {
    content: '';
    display: block;
    width: clamp(4rem, 9vw, 6.5rem);
    height: 3px;
    margin: clamp(1.25rem, 3vw, 2rem) 0 var(--vfw-space-md, 1rem);
    background-color: var(--iv-accent);
}

.vfw-iv-hero-lede {
    margin: 0 0 var(--vfw-space-lg, 1.5rem);
    max-width: 24rem;
    font-size: 1.05rem;
    line-height: 1.55;
}

.vfw-iv-hero-bolt {
    position: absolute;
    top: -2rem;
    right: clamp(-6rem, -4vw, -2rem);
    z-index: 0;
    width: clamp(11rem, 30vw, 24rem);
    aspect-ratio: 100 / 140;
    background-color: var(--iv-brand-light);
    -webkit-mask: var(--iv-bolt-mask) no-repeat center / contain;
    mask: var(--iv-bolt-mask) no-repeat center / contain;
    pointer-events: none;
}

/* The bolt sits behind the text column; keep an outline button readable over it. */
.vfw-iv-hero .vfw-iv-button-outline {
    background-color: var(--iv-paper);
}

.vfw-iv-hero .vfw-iv-button-outline:hover {
    background-color: var(--iv-ink);
}

.vfw-iv-hero-media {
    position: relative;
    z-index: 1;
    width: 100%;
}

.vfw-iv-hero-media > img,
.vfw-iv-hero-media > .vfw-iv-photo-placeholder {
    display: block;
    width: 100%;
    height: clamp(16rem, 42vw, 30rem);
    object-fit: cover;
    object-position: var(--iv-media-focus, 50% 50%);
    clip-path: polygon(0 var(--iv-slant), 100% 0, 100% 100%, 0 100%);
}

.vfw-iv-hero-media > .vfw-iv-photo-placeholder {
    padding-top: var(--iv-slant);
}

/* The stripe is a wedge riding the left half of the slanted edge: its lower
   side lies exactly on the line from (0, slant) to (50%, slant / 2); it is
   --iv-stripe-width thick at the left edge and tapers to a point mid-width.
   The box starts --iv-stripe-width above the media so the wedge can rise
   above the photo. */
.vfw-iv-hero-media::before {
    content: '';
    position: absolute;
    top: calc(var(--iv-stripe-width) * -1);
    left: 0;
    z-index: 2;
    width: 50%;
    height: calc(var(--iv-slant) + var(--iv-stripe-width));
    background-color: var(--iv-accent);
    clip-path: polygon(0 calc(100% - var(--iv-stripe-width)), 100% calc(50% + var(--iv-stripe-width) / 2), 0 100%);
    pointer-events: none;
}

/* --- 3.6 Feature band (brand strip with split-ring icons) ------------------ */

.vfw-iv-band {
    --iv-focus: var(--iv-paper);
    width: 100%;
    background-color: var(--iv-brand);
    color: var(--iv-paper);
}

.vfw-iv-band-list {
    display: grid;
    grid-template-columns: 1fr;
    max-width: var(--vfw-container-max, 1200px);
    margin: 0 auto;
    padding: clamp(1.25rem, 3vw, 2rem) var(--vfw-container-padding, 1.5rem);
    list-style: none;
    box-sizing: border-box;
}

.vfw-iv-band-item {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    padding: 1rem 0;
    border-top: 1px solid var(--iv-on-dark-keyline);
}

.vfw-iv-band-item:first-child {
    border-top: 0;
}

.vfw-iv-band-label {
    margin: 0;
    font-family: var(--iv-font-display);
    font-weight: 800;
    font-size: clamp(1.75rem, 3vw, 2.4rem);
    line-height: 1;
    color: var(--iv-paper);
}

.vfw-iv-band-text {
    margin: 0.25rem 0 0;
    font-size: 1rem;
    color: var(--iv-paper);
}

/* Split ring: a conic accent ring with two gaps, masked to a 3px band. */
.vfw-iv-icon-ring {
    position: relative;
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 4.5rem;
    height: 4.5rem;
    color: inherit;
}

.vfw-iv-icon-ring::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(var(--iv-accent) 0deg 30deg, transparent 30deg 58deg, var(--iv-accent) 58deg 210deg, transparent 210deg 238deg, var(--iv-accent) 238deg 360deg);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
}

.vfw-iv-icon-ring svg {
    width: 2rem;
    height: 2rem;
}

.vfw-iv-icon-ring-small {
    width: 3.25rem;
    height: 3.25rem;
}

.vfw-iv-icon-ring-small svg {
    width: 1.45rem;
    height: 1.45rem;
}

/* --- 3.7 Photo cards (segment / service tiles) ------------------------------
    A full-cover photo with an ink gradient rising from the bottom, the title +
    text pinned bottom-left and an accent arrow bottom-right. Use an <a>. */

.vfw-iv-card-media {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 10 / 11;
    border-radius: var(--iv-radius);
    background-color: var(--iv-ink);
    color: var(--iv-paper);
    text-decoration: none;
    isolation: isolate;
}

.vfw-iv-card-media > img,
.vfw-iv-card-media > .vfw-iv-photo-placeholder {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--iv-media-focus, 50% 50%);
    transition: transform 0.4s ease;
}

.vfw-iv-card-media::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to top, rgba(11, 26, 51, 0.25) 0%, rgba(11, 26, 51, 0) 100%);
}

/* A placeholder's label sits at the top so it never collides with the title. */
.vfw-iv-card-media > .vfw-iv-photo-placeholder {
    align-items: flex-start;
    padding-top: 1.5rem;
}

.vfw-iv-card-media:hover > img,
.vfw-iv-card-media:hover > .vfw-iv-photo-placeholder {
    transform: scale(1.04);
}

.vfw-iv-card-body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 0.25rem 1rem;
    padding: clamp(1.1rem, 2.5vw, 1.5rem);
    /* The scrim rides the text block, so it stays under the title whatever the
       card's height or the title's line count; 6rem of fade above the text. */
    padding-top: 6rem;
    background: linear-gradient(to top, rgba(11, 26, 51, 0.95), rgba(11, 26, 51, 0.85) calc(100% - 6rem), rgba(11, 26, 51, 0) 100%);
}

.vfw-iv-card-title {
    grid-column: 1 / 2;
    margin: 0;
    font-family: var(--iv-font-display);
    font-weight: 800;
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    line-height: 1;
}

.vfw-iv-card-text {
    grid-column: 1 / 2;
    margin: 0;
    max-width: 16rem;
    font-size: 0.95rem;
    line-height: 1.4;
}

.vfw-iv-card-arrow {
    width: 1.9rem; /* fixed: a long title must not squeeze the arrow column */
    grid-column: 2 / 3;
    grid-row: 1 / 3;
    align-self: end;
    color: var(--iv-accent);
    transition: transform var(--vfw-transition-fast, 0.15s ease);
}

.vfw-iv-card-arrow svg {
    display: block;
    width: 1.9rem;
    height: 1.9rem;
}

.vfw-iv-card-media:hover .vfw-iv-card-arrow {
    transform: translateX(4px);
}

/* --- 3.8 Project cards (portfolio / proof) ----------------------------------
    Number label, title, scope line, photo. Built for the "show, don't tell"
    projects page: the scope text states exactly what was done. */

.vfw-iv-card-project {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--iv-keyline);
    border-radius: var(--iv-radius);
    background-color: var(--iv-paper);
    color: var(--iv-ink);
}

.vfw-iv-card-project-media {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background-color: var(--iv-paper-2);
}

.vfw-iv-card-project-media > img,
.vfw-iv-card-project-media > .vfw-iv-photo-placeholder {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--iv-media-focus, 50% 50%);
}

.vfw-iv-card-project-body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.25rem 1.35rem 1.5rem;
    border-top: 3px solid var(--iv-accent);
}

.vfw-iv-card-project-number {
    margin: 0;
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--iv-accent-action);
}

.vfw-iv-card-project-title {
    margin: 0;
    font-family: var(--iv-font-display);
    font-weight: 800;
    font-size: 1.65rem;
    line-height: 1.05;
}

.vfw-iv-card-project-scope {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--iv-gray);
}

/* --- 3.9 Check list (service scopes) ---------------------------------------- */

.vfw-iv-list-check {
    display: grid;
    gap: 0.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.vfw-iv-list-check li {
    position: relative;
    padding-left: 1.6rem;
    line-height: 1.5;
}

.vfw-iv-list-check li::before {
    content: '';
    position: absolute;
    top: 0.5em;
    left: 0.15rem;
    width: 0.6rem;
    height: 0.6rem;
    background-color: var(--iv-accent);
    transform: skewX(-14deg);
}

.vfw-iv-list-check-columns {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    column-gap: var(--vfw-space-xl, 2rem);
}

/* --- 3.10 CTA band (closing question + actions) -----------------------------
    An ink band with an accent stripe slicing its left edge. */

.vfw-iv-cta {
    --iv-focus: var(--iv-paper);
    position: relative;
    overflow: hidden;
    background-color: var(--iv-ink);
    color: var(--iv-paper);
}

.vfw-iv-cta::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: clamp(0.6rem, 1.6vw, 1.1rem);
    background-color: var(--iv-accent);
}

.vfw-iv-cta-inner {
    display: flex;
    flex-direction: column;
    gap: var(--vfw-space-lg, 1.5rem);
    max-width: var(--vfw-container-max, 1200px);
    margin: 0 auto;
    padding: clamp(2.5rem, 6vw, 4rem) var(--vfw-container-padding, 1.5rem);
    box-sizing: border-box;
}

.vfw-iv-cta-title {
    margin: 0;
    max-width: 40rem;
    font-family: var(--iv-font-display);
    font-weight: 800;
    font-size: clamp(1.9rem, 4vw, 3rem);
    line-height: 0.98;
    text-wrap: balance;
}

/* --- 3.11 Coverage strip ----------------------------------------------------- */

.vfw-iv-coverage {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: var(--iv-font-display);
    font-weight: 800;
    font-size: clamp(1.4rem, 3vw, 2rem);
    line-height: 1.1;
    text-transform: uppercase;
}

.vfw-iv-coverage li {
    display: inline-flex;
    align-items: center;
    gap: 1.25rem;
}

.vfw-iv-coverage-note {
    margin: 1rem 0 0;
    max-width: 40rem;
}

.vfw-iv-coverage-note a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.vfw-iv-coverage li + li::before {
    content: '';
    width: 0.5rem;
    height: 0.5rem;
    background-color: var(--iv-accent);
    transform: skewX(-14deg);
}

/* --- 3.12 Contact form ------------------------------------------------------
    Two-column field grid, choice tiles for "what do you need", an attachment
    drop zone (a <label> wrapping a visually hidden file input, so it works
    with no JS), and a consent line. Error state: `vfw-iv-field-invalid`. */

.vfw-iv-form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem 1.5rem;
}

.vfw-iv-field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.vfw-iv-field-full {
    grid-column: 1 / -1;
}

.vfw-iv-label {
    padding: 0;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--iv-ink);
}

.vfw-iv-label-optional {
    font-weight: 400;
    color: var(--iv-gray);
}

.vfw-iv-input {
    width: 100%;
    box-sizing: border-box;
    padding: 0.75rem 0.9rem;
    border: 1.5px solid var(--iv-keyline-strong);
    border-radius: var(--iv-radius);
    background-color: var(--iv-paper);
    color: var(--iv-ink);
    font: inherit;
    font-size: 1rem;
    transition: border-color var(--vfw-transition-fast, 0.15s ease), box-shadow var(--vfw-transition-fast, 0.15s ease);
}

.vfw-iv-input::placeholder {
    color: #6b7487;
}

.vfw-iv-input:focus {
    outline: none;
    border-color: var(--iv-brand);
    box-shadow: 0 0 0 3px var(--vfw-color-primary-focus);
}

select.vfw-iv-input {
    min-height: 3.25rem;
}

textarea.vfw-iv-input {
    min-height: 9rem;
    resize: vertical;
}

.vfw-iv-field-message {
    margin: 0;
    font-size: 0.85rem;
    color: var(--iv-gray);
}

.vfw-iv-field-invalid .vfw-iv-input {
    border-color: var(--vfw-color-error);
}

.vfw-iv-field-invalid .vfw-iv-field-message {
    color: var(--vfw-color-error-text);
}

/* Visually hidden but focusable — for the inputs inside tiles / drop zone. */
.vfw-iv-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.vfw-iv-choice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr));
    gap: 0.75rem;
}

.vfw-iv-choice {
    position: relative;
    display: block;
    cursor: pointer;
}

.vfw-iv-choice-body {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    height: 100%;
    box-sizing: border-box;
    padding: 0.85rem 1rem;
    border: 1.5px solid var(--iv-keyline-strong);
    border-radius: var(--iv-radius);
    background-color: var(--iv-paper);
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.25;
    transition: border-color var(--vfw-transition-fast, 0.15s ease), background-color var(--vfw-transition-fast, 0.15s ease);
}

.vfw-iv-choice-body > span {
    display: inline-flex;
    flex: none;
}

.vfw-iv-choice-body svg {
    flex: none;
    width: 1.35rem;
    height: 1.35rem;
    color: var(--iv-brand);
}

.vfw-iv-choice:hover .vfw-iv-choice-body {
    border-color: var(--iv-ink);
}

.vfw-iv-choice-input:checked + .vfw-iv-choice-body {
    border-color: var(--iv-brand);
    background-color: var(--iv-brand-weak);
    box-shadow: inset 4px 0 0 var(--iv-accent);
}

.vfw-iv-choice-input:focus-visible + .vfw-iv-choice-body {
    outline: 3px solid var(--iv-focus);
    outline-offset: 2px;
}

.vfw-iv-dropzone {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: clamp(1.5rem, 4vw, 2.25rem) 1.25rem;
    border: 2px dashed var(--iv-keyline-strong);
    border-radius: var(--iv-radius);
    background-color: var(--iv-paper-2);
    text-align: center;
    cursor: pointer;
    transition: border-color var(--vfw-transition-fast, 0.15s ease), background-color var(--vfw-transition-fast, 0.15s ease);
}

.vfw-iv-dropzone svg {
    width: 2rem;
    height: 2rem;
    color: var(--iv-brand);
}

.vfw-iv-dropzone:hover,
.vfw-iv-dropzone-active {
    border-color: var(--iv-brand);
    background-color: var(--iv-brand-weak);
}

.vfw-iv-dropzone:focus-within {
    outline: 3px solid var(--iv-focus);
    outline-offset: 2px;
}

.vfw-iv-dropzone-title {
    margin: 0;
    font-weight: 600;
}

.vfw-iv-dropzone-hint {
    margin: 0;
    font-size: 0.85rem;
    color: var(--iv-gray);
}

.vfw-iv-consent {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    font-size: 0.9rem;
    line-height: 1.45;
}

.vfw-iv-consent input {
    flex: none;
    width: 1.15rem;
    height: 1.15rem;
    margin: 0.15rem 0 0;
    accent-color: var(--iv-brand);
}

.vfw-iv-consent a,
.vfw-iv-link {
    color: var(--iv-brand);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* --- 3.13 Photo placeholder -------------------------------------------------
    Stand-in for a real photo while the client's own images are pending. It is
    deliberately obvious (hatched, labeled) so it can never pass as a real
    project photo on a live page. Put the label text inside the element. */

.vfw-iv-photo-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 8rem;
    box-sizing: border-box;
    padding: 1rem;
    background-color: var(--iv-ink-2);
    background-image: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.05) 0, rgba(255, 255, 255, 0.05) 12px, transparent 12px, transparent 24px);
    color: var(--iv-gray-light);
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.16em;
    text-align: center;
    text-transform: uppercase;
}

/* --- 3.14 Footer ------------------------------------------------------------ */

.vfw-iv-footer {
    --iv-focus: var(--iv-paper);
    background-color: var(--iv-ink);
    color: var(--iv-gray-light);
    font-size: 0.95rem;
}

.vfw-iv-footer-inner {
    max-width: var(--vfw-container-max, 1200px);
    margin: 0 auto;
    padding: clamp(3rem, 6vw, 4.5rem) var(--vfw-container-padding, 1.5rem) 1.5rem;
    box-sizing: border-box;
}

.vfw-iv-footer-columns {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    padding-bottom: 2.5rem;
}

.vfw-iv-footer-brand {
    max-width: 22rem;
}

.vfw-iv-footer-brand p {
    margin: 0;
}

.vfw-iv-footer-heading {
    margin: 0 0 0.9rem;
    font-family: var(--iv-font-display);
    font-weight: 700;
    font-size: 1.2rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--iv-paper);
}

.vfw-iv-footer-list {
    display: grid;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Tap targets: every footer link is at least 44px tall (0.8rem + 1.5 line + 0.8rem). */
.vfw-iv-footer a {
    display: inline-block;
    padding: 0.8rem 0;
    color: var(--iv-gray-light);
    text-decoration: none;
}

.vfw-iv-footer a:hover {
    color: var(--iv-paper);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.vfw-iv-footer-legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--iv-on-dark-keyline);
    font-size: 0.85rem;
}

.vfw-iv-footer-legal ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* --- 3.15 Inner-page header -------------------------------------------------
    The hero's little sibling for every page that is not the home page: an ink
    band with eyebrow, H1, lede and optional actions. Its bottom edge rises
    left-to-right on the same --iv-slant as the home hero's photo, and a bolt
    outline sits in the right corner. */

.vfw-iv-page-hero {
    --iv-focus: var(--iv-paper);
    position: relative;
    overflow: hidden;
    background-color: var(--iv-ink);
    color: var(--iv-paper);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--iv-slant) * 0.6), 0 100%);
}

.vfw-iv-page-hero .vfw-iv-hero-bolt {
    top: 1rem;
    right: clamp(-5rem, -3vw, -1rem);
    width: clamp(8rem, 20vw, 15rem);
    background-color: var(--iv-brand);
}

.vfw-iv-page-hero-inner {
    position: relative;
    z-index: 1;
    max-width: var(--vfw-container-max, 1200px);
    margin: 0 auto;
    padding: clamp(2.75rem, 7vw, 5rem) var(--vfw-container-padding, 1.5rem) calc(clamp(2.75rem, 6vw, 4.5rem) + var(--iv-slant) * 0.6);
    box-sizing: border-box;
}

.vfw-iv-page-hero .vfw-iv-eyebrow {
    color: var(--iv-paper);
}

.vfw-iv-page-hero-title {
    max-width: 52rem;
    margin: 0 0 var(--vfw-space-lg, 1.5rem);
    font-family: var(--iv-font-display);
    font-weight: 800;
    font-size: clamp(2.5rem, 7vw, 5rem);
    line-height: 0.9;
    letter-spacing: -0.01em;
    text-wrap: balance;
}

.vfw-iv-page-hero .vfw-iv-lede {
    margin-bottom: var(--vfw-space-lg, 1.5rem);
    color: var(--iv-gray-light);
}

.vfw-iv-page-hero .vfw-iv-button-outline {
    border-color: var(--iv-paper);
    color: var(--iv-paper);
}

.vfw-iv-page-hero .vfw-iv-button-outline:hover {
    background-color: var(--iv-paper);
    color: var(--iv-ink);
}

/* --- 3.16 Direct-contact cards -----------------------------------------------
    Big tappable tiles for tel: / WhatsApp / mailto: links: icon, label, the
    value itself, and an optional hint. `vfw-iv-contact-card-primary` fills
    the tile with the brand blue for the one channel to push. */

.vfw-iv-contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    gap: clamp(1rem, 2vw, 1.5rem);
}

.vfw-iv-contact-card {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 1.5rem 1.5rem 1.6rem;
    border: 1px solid var(--iv-keyline);
    border-top: 3px solid var(--iv-accent);
    border-radius: var(--iv-radius);
    background-color: var(--iv-paper);
    color: var(--iv-ink);
    text-decoration: none;
    transition: border-color var(--vfw-transition-fast, 0.15s ease), transform var(--vfw-transition-fast, 0.15s ease);
}

a.vfw-iv-contact-card:hover {
    border-color: var(--iv-ink);
    border-top-color: var(--iv-accent);
    transform: translateY(-2px);
}

.vfw-iv-contact-card .vfw-iv-icon-ring {
    margin-bottom: 0.6rem;
}

.vfw-iv-contact-card-label {
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--iv-accent-action);
}

.vfw-iv-contact-card-value {
    font-family: var(--iv-font-display);
    font-weight: 700;
    font-size: clamp(1.4rem, 2.6vw, 1.75rem);
    line-height: 1.1;
    overflow-wrap: anywhere;
}

.vfw-iv-contact-card-hint {
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--iv-gray);
}

.vfw-iv-contact-card-primary {
    --iv-focus: var(--iv-paper);
    border-color: var(--iv-brand);
    background-color: var(--iv-brand);
    color: var(--iv-paper);
}

a.vfw-iv-contact-card-primary:hover {
    border-color: var(--iv-brand-deep);
    background-color: var(--iv-brand-deep);
}

.vfw-iv-contact-card-primary .vfw-iv-contact-card-label,
.vfw-iv-contact-card-primary .vfw-iv-contact-card-hint {
    color: var(--iv-paper);
}

/* --- 3.17 Prose (legal / long-form text) --------------------------------------
    A readable measure for running text: headings, paragraphs, lists, a simple
    data table, and links. Wrap the article body in `vfw-iv-prose`. */

.vfw-iv-prose {
    max-width: 46rem;
    font-size: 1.02rem;
    line-height: 1.7;
}

.vfw-iv-prose h2 {
    margin: 2.5rem 0 0.75rem;
    font-family: var(--iv-font-display);
    font-weight: 700;
    font-size: clamp(1.5rem, 2.6vw, 1.85rem);
    line-height: 1.1;
}

.vfw-iv-prose h3 {
    margin: 1.75rem 0 0.5rem;
    font-weight: 600;
    font-size: 1.1rem;
}

.vfw-iv-prose > :first-child {
    margin-top: 0;
}

.vfw-iv-prose p {
    margin: 0 0 1rem;
}

.vfw-iv-prose ul,
.vfw-iv-prose ol {
    margin: 0 0 1rem;
    padding-left: 1.4rem;
}

.vfw-iv-prose li {
    margin-bottom: 0.35rem;
}

.vfw-iv-prose a {
    color: var(--iv-brand);
    text-decoration: underline;
    text-underline-offset: 2px;
    overflow-wrap: anywhere;
}

.vfw-iv-prose table {
    width: 100%;
    margin: 0 0 1.25rem;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.vfw-iv-prose th,
.vfw-iv-prose td {
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--iv-keyline);
    text-align: left;
    vertical-align: top;
}

.vfw-iv-prose th {
    width: 32%;
    background-color: var(--iv-paper-2);
    font-weight: 600;
}

/* --- 3.18 Feature cards -----------------------------------------------------
    A plain, photo-less card: icon ring, title, short text. For lists of
    service types or benefits where there is no image to show. */

.vfw-iv-card-feature {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.5rem;
    border: 1px solid var(--iv-keyline);
    border-top: 3px solid var(--iv-accent);
    border-radius: var(--iv-radius);
    background-color: var(--iv-paper);
    color: var(--iv-ink);
}

.vfw-iv-card-feature .vfw-iv-icon-ring {
    margin-bottom: 0.5rem;
    color: var(--iv-ink);
}

.vfw-iv-card-feature-title {
    margin: 0;
    font-family: var(--iv-font-display);
    font-weight: 800;
    font-size: 1.6rem;
    line-height: 1.05;
}

.vfw-iv-card-feature-text {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--iv-gray);
}

/* --- 3.19 Inline media -------------------------------------------------------
    A photo block for use inside a column (beside text), outside the hero.
    `vfw-iv-media-slant` cuts its top edge on half the theme slant, echoing
    the hero without its stripe. Holds an <img> or a photo placeholder. */

.vfw-iv-media {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    border-radius: var(--iv-radius);
    background-color: var(--iv-ink-2);
}

.vfw-iv-media > img,
.vfw-iv-media > .vfw-iv-photo-placeholder {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--iv-media-focus, 50% 50%);
}

.vfw-iv-media-slant {
    border-radius: 0;
    clip-path: polygon(0 calc(var(--iv-slant) * 0.5), 100% 0, 100% 100%, 0 100%);
}

.vfw-iv-media-slant > .vfw-iv-photo-placeholder {
    padding-top: calc(var(--iv-slant) * 0.5);
}

/* --- 3.20 Trust strip --------------------------------------------------------
    Three short, verifiable facts (licence, insurance, coverage) placed right
    before a call to action. Icon ring + label + value; wraps to one column
    on narrow screens. */

.vfw-iv-trust {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    gap: 1.25rem 2rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.vfw-iv-trust-item {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.vfw-iv-trust-item .vfw-iv-icon-ring {
    color: var(--iv-ink);
}

.vfw-iv-trust-label {
    margin: 0;
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--iv-accent-action);
}

.vfw-iv-trust-text {
    margin: 0.15rem 0 0;
    font-family: var(--iv-font-display);
    font-weight: 700;
    font-size: 1.25rem;
    line-height: 1.15;
}

/* --- 3.21 Tag chips + meta row -------------------------------------------------
    Small outlined labels for a project's categories; on dark bands (page hero,
    ink sections) they flip to light keylines. The meta row is an icon + text
    line under a page title (e.g. location). */

.vfw-iv-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.vfw-iv-tag {
    padding: 0.2rem 0.65rem;
    border: 1px solid var(--iv-keyline-strong);
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--iv-gray);
}

.vfw-iv-page-hero .vfw-iv-tag,
.vfw-iv-section-ink .vfw-iv-tag {
    border-color: var(--iv-on-dark-keyline);
    color: var(--iv-gray-light);
}

.vfw-iv-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 var(--vfw-space-md, 1rem);
    font-weight: 600;
    color: var(--iv-gray-light);
}

.vfw-iv-meta svg {
    flex: none;
    width: 1.2rem;
    height: 1.2rem;
    color: var(--iv-accent);
}

/* --- 3.22 Filter chips -------------------------------------------------------
    Toggle buttons that narrow a list. Ship the group with `hidden`; the page's
    script unhides it, so without JS the full list shows and no dead control
    does. The active chip carries `vfw-iv-filter-button-active` + aria-pressed. */

.vfw-iv-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
}

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

.vfw-iv-filter-button {
    min-height: 2.75rem;
    padding: 0.5rem 1.1rem;
    border: 1.5px solid var(--iv-keyline-strong);
    border-radius: 999px;
    background-color: var(--iv-paper);
    color: var(--iv-ink);
    font: inherit;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: border-color var(--vfw-transition-fast, 0.15s ease), background-color var(--vfw-transition-fast, 0.15s ease), color var(--vfw-transition-fast, 0.15s ease);
}

.vfw-iv-filter-button:hover {
    border-color: var(--iv-ink);
}

.vfw-iv-filter-button-active,
.vfw-iv-filter-button-active:hover {
    border-color: var(--iv-ink);
    background-color: var(--iv-ink);
    color: var(--iv-paper);
}

/* --- 3.23 Linked project cards + project list ---------------------------------
    `a.vfw-iv-card-project-link` turns the project card into one tappable
    block; the "more" line sits at the bottom so a row of cards aligns.
    `vfw-iv-project-list` strips list styling from a <ul> of cards. */

.vfw-iv-project-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.vfw-iv-project-list > li {
    display: flex;
}

.vfw-iv-project-list > li[hidden] {
    display: none;
}

.vfw-iv-card-project-link {
    width: 100%;
    text-decoration: none;
    transition: border-color var(--vfw-transition-fast, 0.15s ease), transform var(--vfw-transition-fast, 0.15s ease);
}

.vfw-iv-card-project-link .vfw-iv-card-project-body {
    flex: 1;
}

.vfw-iv-card-project-link .vfw-iv-card-project-media > img {
    transition: transform 0.4s ease;
}

.vfw-iv-card-project-link:hover {
    border-color: var(--iv-ink);
    transform: translateY(-2px);
}

.vfw-iv-card-project-link:hover .vfw-iv-card-project-media > img {
    transform: scale(1.04);
}

.vfw-iv-card-project-more {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: auto;
    padding-top: 0.5rem;
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--iv-accent-action);
}

.vfw-iv-card-project-more svg {
    width: 1.1em;
    height: 1.1em;
    transition: transform var(--vfw-transition-fast, 0.15s ease);
}

.vfw-iv-card-project-link:hover .vfw-iv-card-project-more svg {
    transform: translateX(3px);
}

/* --- 3.24 Article figure, post layout + technology box -------------------------
    The lead photo of an article, then the body (prose) beside an aside (scope
    list, technology box). The technology box is a tinted panel with an accent
    edge for the equipment and systems a job used. */

.vfw-iv-figure {
    margin: 0 0 clamp(2rem, 4vw, 3rem);
    overflow: hidden;
    border-radius: var(--iv-radius);
    background-color: var(--iv-ink-2);
}

.vfw-iv-figure > img {
    display: block;
    width: 100%;
    height: clamp(16rem, 48vw, 34rem);
    object-fit: cover;
    object-position: var(--iv-media-focus, 50% 50%);
}

.vfw-iv-post .vfw-iv-prose p:first-child {
    font-size: 1.15rem;
    line-height: 1.6;
}

.vfw-iv-tech {
    display: grid;
    gap: 0.6rem;
    padding: 1.4rem 1.5rem;
    border-left: 4px solid var(--iv-accent);
    border-radius: var(--iv-radius);
    background-color: var(--iv-brand-weak);
}

.vfw-iv-tech .vfw-iv-icon-ring {
    color: var(--iv-brand);
}

.vfw-iv-tech .vfw-iv-subheading {
    margin: 0;
}

/* --- 3.25 Photo gallery ----------------------------------------------------------
    A grid of uniform 4:3 thumbnails; each is a link to the full-size photo so
    the gallery works without JS, and a script may open them in a lightbox
    instead. Thumbnails honour --iv-media-focus like every photo slot. */

.vfw-iv-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.vfw-iv-gallery-item {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    border-radius: var(--iv-radius);
    background-color: var(--iv-ink-2);
}

.vfw-iv-gallery-item > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--iv-media-focus, 50% 50%);
    transition: transform 0.4s ease;
}

.vfw-iv-gallery-item:hover > img {
    transform: scale(1.05);
}

.vfw-iv-gallery-item::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 3px solid transparent;
    border-radius: inherit;
    transition: border-color var(--vfw-transition-fast, 0.15s ease);
}

.vfw-iv-gallery-item:hover::after {
    border-color: var(--iv-accent);
}

/* --- 3.26 Prev / next navigation ------------------------------------------------
    Between articles: previous on the left, an "all" link in the middle, next
    on the right. A missing neighbour keeps its column as an empty spacer. */

.vfw-iv-post-nav {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    align-items: stretch;
}

.vfw-iv-post-nav-link {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--iv-keyline);
    border-radius: var(--iv-radius);
    color: var(--iv-ink);
    text-decoration: none;
    transition: border-color var(--vfw-transition-fast, 0.15s ease);
}

a.vfw-iv-post-nav-link:hover {
    border-color: var(--iv-ink);
}

.vfw-iv-post-nav-empty {
    border-color: transparent;
}

.vfw-iv-post-nav-label {
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--iv-accent-action);
}

.vfw-iv-post-nav-title {
    font-family: var(--iv-font-display);
    font-weight: 700;
    font-size: 1.2rem;
    line-height: 1.15;
}

.vfw-iv-post-nav-all {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    padding: 0.75rem 1.25rem;
    font-weight: 600;
    color: var(--iv-brand);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* --- 3.27 Feature pair + photo pair -----------------------------------------------
    Two side-by-side features, each led by a pair of photos, a subheading, a
    short text and a link. Built for dark (ink) sections; on light sections
    the muted text and link colors still read. */

.vfw-iv-feature-pair {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(2.5rem, 5vw, 3.5rem) clamp(2rem, 4vw, 3rem);
}

.vfw-iv-feature {
    display: grid;
    gap: 0.9rem;
    align-content: start;
}

.vfw-iv-feature p {
    margin: 0;
    max-width: 34rem;
    line-height: 1.6;
}

.vfw-iv-section-ink .vfw-iv-feature p {
    color: var(--iv-gray-light);
}

.vfw-iv-media-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.vfw-iv-link-on-dark {
    justify-self: start;
    color: var(--iv-paper);
    font-weight: 600;
}

/* ==========================================================================
    4. RESPONSIVE
   ========================================================================== */

/* Panel nav below 1100px: with a phone link and a long brand, one row needs ~1100px. */
@media (max-width: 1099px) {
    .vfw-iv-nav-toggle {
        display: inline-flex;
    }

    .vfw-iv-nav-menu {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
        padding: 1rem var(--vfw-container-padding, 1.5rem) 1.5rem;
        border-bottom: 1px solid var(--iv-keyline);
        background-color: var(--iv-paper);
        box-shadow: var(--vfw-shadow-bottom-lg, 0 10px 24px rgba(11, 26, 51, 0.14));
        max-height: calc(100dvh - 100%);
        overflow-y: auto;
        overscroll-behavior: contain;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-0.5rem);
        pointer-events: none;
        transition: opacity var(--vfw-transition-fast, 0.15s ease), transform var(--vfw-transition-fast, 0.15s ease), visibility 0s linear 0.15s;
    }

    .vfw-iv-nav-open .vfw-iv-nav-menu {
        opacity: 1;
        visibility: visible;
        transform: none;
        pointer-events: auto;
        transition: opacity var(--vfw-transition-fast, 0.15s ease), transform var(--vfw-transition-fast, 0.15s ease), visibility 0s;
    }

    .vfw-iv-nav-links {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .vfw-iv-nav-phone {
        order: -1;
        padding: 0.8rem 0;
        border-bottom: 1px solid var(--iv-keyline);
        font-size: 1.05rem;
    }

    .vfw-iv-nav-link {
        display: block;
        padding: 0.8rem 0;
        border-bottom: 1px solid var(--iv-keyline);
    }

    .vfw-iv-nav-link::after {
        display: none;
    }

    .vfw-iv-nav-link-active {
        color: var(--iv-accent-action);
    }

    .vfw-iv-nav-item-menu > .vfw-iv-nav-link {
        margin-right: 0;
    }

    .vfw-iv-nav-item-menu > .vfw-iv-nav-link::before {
        display: none;
    }

    /* visibility: inherit — the closed panel's hidden state must win. */
    .vfw-iv-nav-submenu {
        position: static;
        min-width: 0;
        padding: 0;
        border: 0;
        background-color: transparent;
        box-shadow: none;
        opacity: 1;
        visibility: inherit;
        transform: none;
        pointer-events: auto;
        transition: none;
    }

    .vfw-iv-nav-submenu::before {
        display: none;
    }

    .vfw-iv-nav-submenu-link {
        padding: 0.7rem 0 0.7rem 1.1rem;
        border-bottom: 1px solid var(--iv-keyline);
        font-weight: 400;
    }

    .vfw-iv-nav-submenu-link:hover,
    .vfw-iv-nav-submenu-link-active {
        background-color: transparent;
    }
}

@media (max-width: 719px) {
    /* Two thumbnails per row on phones: a 12-photo gallery stays scannable. */
    .vfw-iv-gallery {
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }

    .vfw-iv-hero-grid {
        gap: 1.25rem;
        padding-top: 1.75rem;
    }

    .vfw-iv-hero-lede {
        margin-bottom: 1.25rem;
    }

    .vfw-iv-hero-bolt {
        right: -4.5rem;
        opacity: 0.55;
    }

    .vfw-iv-card-media {
        aspect-ratio: 4 / 3;
    }
}

@media (min-width: 720px) {
    .vfw-iv-grid-narrow {
        grid-template-columns: repeat(2, 1fr);
    }

    .vfw-iv-form {
        grid-template-columns: 1fr 1fr;
    }

    .vfw-iv-footer-columns {
        grid-template-columns: 1fr 1fr;
    }
}

/* Between the 2x2 and the 4-across layouts the tiles are wide; keep them 4:3. */
@media (min-width: 720px) and (max-width: 1099px) {
    .vfw-iv-grid-narrow .vfw-iv-card-media {
        aspect-ratio: 4 / 3;
    }
}

@media (min-width: 1100px) {
    .vfw-iv-grid-narrow {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* The feature band goes three-across only from 960px: below that its single-word
   display labels cannot fit three columns and the band would overflow the page. */
@media (min-width: 960px) {
    .vfw-iv-feature-pair {
        grid-template-columns: 1fr 1fr;
    }

    .vfw-iv-post-nav {
        grid-template-columns: 1fr auto 1fr;
    }

    .vfw-iv-post-nav-link[rel="next"] {
        text-align: right;
    }

    .vfw-iv-band-list {
        grid-template-columns: repeat(3, 1fr);
    }

    .vfw-iv-band-item {
        padding: 0.5rem clamp(1rem, 2.5vw, 2rem);
        border-top: 0;
        border-left: 1px solid var(--iv-on-dark-keyline);
    }

    .vfw-iv-band-item:first-child {
        padding-left: 0;
        border-left: 0;
    }

    .vfw-iv-split {
        grid-template-columns: 1fr 1fr;
    }

    .vfw-iv-section-head {
        grid-template-columns: 1.15fr 0.85fr;
    }

    .vfw-iv-hero-grid {
        grid-template-columns: 1.15fr 0.85fr;
        gap: var(--vfw-space-xl, 2rem) clamp(2rem, 5vw, 4rem);
    }

    .vfw-iv-hero-bolt {
        right: clamp(-9rem, -7vw, -4rem);
    }

    .vfw-iv-hero-media {
        margin-top: calc(var(--iv-slant) * -0.5);
    }

    .vfw-iv-cta-inner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .vfw-iv-footer-columns {
        grid-template-columns: 1.4fr 1fr 1fr 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vfw-theme-industrial-volt *,
    .vfw-theme-industrial-volt *::before,
    .vfw-theme-industrial-volt *::after {
        transition-duration: 0s !important;
    }
}
/* @audited cfw style=2f31680e86fc design=df9eb623cd10 */