/* ==========================================================================
   FFW Theme – main.css
   Mobile-first. CSS custom properties from functions.php ffw_color_vars().
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Variables & Reset
   -------------------------------------------------------------------------- */
:root {
    --color-dark:    #0a1628;
    --color-red:     #cc0000;
    --color-white:   #ffffff;
    --color-light:   #f4f5f7;
    --color-gray:    #6b7280;
    --color-border:  #e2e6ea;
    --color-card-bg: #111f33;

    --font-sans:      system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-condensed: 'Arial Narrow', 'Liberation Sans Narrow', 'Roboto Condensed', system-ui, sans-serif;

    --max-width:      1200px;
    --header-height:  80px;
    --radius:         2px;
    --transition:     0.2s ease;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.6;
    color: #1a1a2e;
    background: var(--color-white);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden; /* prevent horizontal scroll from skewed nav items */
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

/* --------------------------------------------------------------------------
   2. Utilities
   -------------------------------------------------------------------------- */
.container {
    width: 100%;
    max-width: var(--max-width);
    margin-inline: auto;
    padding-inline: 1.25rem;
}

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

/* --------------------------------------------------------------------------
   3. Buttons
   -------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .75rem 1.75rem;
    font-family: var(--font-condensed);
    font-size: .875rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    border: 2px solid transparent;
    cursor: pointer;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.btn::after {
    content: '›';
    font-size: 1.1em;
    line-height: 1;
}

.btn-primary {
    background: var(--color-red);
    color: var(--color-white);
    border-color: var(--color-red);
}
.btn-primary:hover { background: #a80000; border-color: #a80000; }

.btn-outline {
    background: transparent;
    color: var(--color-white);
    border-color: var(--color-white);
}
.btn-outline:hover {
    background: var(--color-white);
    color: var(--color-dark);
}

.btn-outline-dark {
    background: transparent;
    color: var(--color-dark);
    border-color: var(--color-dark);
}
.btn-outline-dark:hover {
    background: var(--color-dark);
    color: var(--color-white);
}

/* --------------------------------------------------------------------------
   4. Header & Navigation
   -------------------------------------------------------------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--color-dark);
    height: var(--header-height);
    display: flex;
    align-items: stretch;
    border-bottom: 3px solid var(--color-red);
}

.site-header .container {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 0;
}

/* Logo */
.site-logo {
    display: flex;
    align-items: center;
    gap: .875rem;
    text-decoration: none;
    flex-shrink: 0;
    padding-inline: 0 1.5rem;
}

.site-logo img {
    height: 52px;
    width: auto;
}

.site-logo__text {
    font-family: var(--font-condensed);
    font-size: .8rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--color-white);
    text-transform: uppercase;
    letter-spacing: .06em;
    white-space: pre-line;
}

.site-logo__text span {
    color: var(--color-red);
}

/* Primary nav – hidden on mobile, items stretch full header height on desktop */
.nav-primary {
    display: none;
}

.nav-primary ul {
    display: flex;
    align-items: stretch;
    height: 100%;
    gap: 0;
    margin: 0;
    padding: 0 0 0 .5rem;
}

/* Parallelogram shape: skew the <li>, counter-skew the <a> so text stays upright */
.nav-primary li {
    display: flex;
    align-items: stretch;
    transform: skewX(-14deg);
    margin-inline: -2px;
    position: relative;
}

.nav-primary li::after {
    content: '';
    position: absolute;
    inset: 0;
    background: transparent;
    transition: background var(--transition);
    pointer-events: none;
}

.nav-primary a {
    display: flex;
    align-items: center;
    padding: 0 1.25rem;
    font-family: var(--font-condensed);
    font-size: .875rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: rgba(255,255,255,.75);
    white-space: nowrap;
    transform: skewX(14deg);  /* counter-skew to keep text upright */
    transition: color var(--transition), background var(--transition);
    position: relative;
    z-index: 1;
}

.nav-primary li:hover {
    background: rgba(255,255,255,.10);
}

.nav-primary a:hover {
    color: var(--color-white);
}

.nav-primary .current-menu-item,
.nav-primary .current_page_item,
.nav-primary .current-menu-ancestor {
    background: var(--color-red);
}

.nav-primary .current-menu-item > a,
.nav-primary .current_page_item > a,
.nav-primary .current-menu-ancestor > a {
    color: var(--color-white);
}

/* Hamburger */
.nav-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-self: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 8px;
    background: none;
    border: 1.5px solid rgba(255,255,255,.3);
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color var(--transition);
    touch-action: manipulation; /* removes 300ms tap delay on mobile */
}

.nav-toggle:hover {
    border-color: rgba(255,255,255,.7);
}

.nav-toggle span {
    display: block;
    height: 2px;
    background: var(--color-white);
    border-radius: 2px;
    transition: transform var(--transition), opacity var(--transition);
}

.nav-toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-active span:nth-child(2) { opacity: 0; }
.nav-toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile nav drawer */
.nav-mobile {
    display: none;
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-dark);
    z-index: 99;
    overflow-y: auto;
    overscroll-behavior: contain; /* prevent underlying page from scrolling */
    padding: 1.5rem 1.25rem;
}

.nav-mobile.is-open { display: block; }

.nav-mobile ul {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.nav-mobile a {
    display: block;
    padding: .875rem 1rem;
    font-family: var(--font-condensed);
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: rgba(255,255,255,.85);
    border-left: 3px solid transparent;
    transition: all var(--transition);
}

.nav-mobile a:hover,
.nav-mobile .current-menu-item > a {
    color: var(--color-white);
    border-left-color: var(--color-red);
    background: rgba(255,255,255,.05);
}

/* --------------------------------------------------------------------------
   5. Hero Section
   -------------------------------------------------------------------------- */
.hero {
    position: relative;
    background: var(--color-dark);
    min-height: calc(100vh - var(--header-height));
    min-height: calc(100dvh - var(--header-height)); /* iOS Safari: accounts for browser chrome */
    display: flex;
    align-items: center;
    overflow: hidden;
}

/* Fallback pattern when no image is set */
.hero--no-image {
    background-image:
        repeating-linear-gradient(
            45deg,
            rgba(255,255,255,.015) 0px,
            rgba(255,255,255,.015) 1px,
            transparent 1px,
            transparent 40px
        );
}

/* Background image container */
.hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 65% center;
}

/* Gradient overlay: solid dark on left, fades to transparent on right */
.hero__bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(10, 22, 40, .97) 0%,
        rgba(10, 22, 40, .92) 30%,
        rgba(10, 22, 40, .55) 58%,
        rgba(10, 22, 40, .12) 80%,
        transparent 100%
    );
}

/* Content layer */
.hero__inner {
    position: relative;
    z-index: 2;
    padding-top: 2.5rem;   /* scales up via breakpoints */
    padding-bottom: 3rem;
    width: 100%;
}

.hero__content {
    max-width: 560px;
}

/* Heading: each line forced onto its own row */
.hero__heading {
    font-family: var(--font-condensed);
    font-size: clamp(2.75rem, 7vw, 5.5rem);
    font-weight: 700;
    line-height: 1.0;
    text-transform: uppercase;
    color: var(--color-white);
    margin-bottom: 1.5rem;
}

.hero__heading-line1 {
    display: block;
    color: var(--color-red);
}

.hero__heading-line2 {
    display: block;
    color: var(--color-white);
}

.hero__subtext {
    color: rgba(255,255,255,.82);
    font-size: 1rem;
    line-height: 1.75;
    margin-bottom: 2.5rem;
    max-width: 420px;
}

.hero__buttons {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.hero::before {
    content: '';
    position: absolute;
    left: -4vw;
    right: 10vw;
    bottom: -1px;
    z-index: 1;
    height: clamp(44px, 7vw, 92px);
    background: var(--color-white);
    clip-path: polygon(0 45%, 48% 100%, 100% 35%, 100% 100%, 0 100%);
}

/* Red diagonal corner – z-index 1 so social panel (z-index 3) renders above it */
.hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 1;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 140px 140px; /* scales up via breakpoints */
    border-color: transparent transparent var(--color-red) transparent;
}

/* Social links panel – always in the DOM, positioned bottom-right above the triangle */
.hero__social {
    position: absolute;
    bottom: 2.5rem;
    right: 2.25rem;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .625rem;
    /* on small screens hidden via media query below */
}

.hero__social-label {
    font-family: var(--font-condensed);
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255,255,255,.65);
}

.hero__social-icons {
    display: flex;
    gap: .625rem;
}

.hero__social-icons a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 2px solid rgba(255,255,255,.45);
    border-radius: 50%;
    color: var(--color-white);
    transition: border-color var(--transition), background var(--transition);
}

.hero__social-icons a:hover {
    border-color: var(--color-white);
    background: rgba(255,255,255,.15);
}

.hero__social-icons svg { width: 16px; height: 16px; }

.hero__social-url {
    font-size: .6875rem;
    color: rgba(255,255,255,.55);
    letter-spacing: .03em;
}

/* Admin hint shown when no social links are configured yet */
.hero__social-setup {
    font-size: .6875rem;
    color: rgba(255,255,255,.45);
    border: 1px dashed rgba(255,255,255,.3);
    padding: .25rem .625rem;
    letter-spacing: .06em;
    transition: color var(--transition), border-color var(--transition);
}

.hero__social-setup:hover {
    color: var(--color-white);
    border-color: rgba(255,255,255,.7);
}

/* Mobile: strengthen the overlay so text stays readable over any image,
   and hide the social panel (footer carries that role on small screens). */
@media (max-width: 639px) {
    /* Hero */
    .hero__bg::after {
        background: rgba(10, 22, 40, .82);
    }
    .hero__social { display: none; }

    /* Buttons: stack vertically and stretch to a comfortable width */
    .hero__buttons {
        flex-direction: column;
        align-items: flex-start;
    }
    .hero__buttons .btn {
        width: 100%;
        max-width: 300px;
        justify-content: center;
    }

    /* Section header: stack title + "alle ansehen" link vertically */
    .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: .375rem;
        margin-bottom: 1.25rem;
    }

    /* Hide slider prev/next buttons – mobile users swipe naturally */
    .slider-btn { display: none !important; }

    /* Reduce section vertical padding */
    .features-bar    { padding: 2rem 0; }
    .vehicles        { padding: 2.5rem 0 3rem; }
    .incidents-section { padding: 2.5rem 0; }
    .content-area    { padding: 2rem 0; }
    .page-hero       { padding: 2rem 0; }

    /* Features: smaller icons, tighter padding per cell */
    .features-bar__item { padding: .75rem .375rem; }
    .features-bar__icon { width: 36px; height: 36px; margin-bottom: .625rem; }
    .features-bar__title { font-size: .75rem; }
    .features-bar__text  { font-size: .8125rem; }

    /* Recruiting panel: tighter padding on mobile */
    .recruiting { padding: 2rem 1.25rem; }
}

/* Very small screens (<480px): stack incident badge below the title */
@media (max-width: 479px) {
    .incident-item {
        grid-template-columns: 3.5rem 1fr;
        grid-template-areas:
            "time info"
            ".    badge";
        align-items: start;
        gap: .625rem;
    }
    .incident-item__time { grid-area: time; padding-top: .1rem; }
    .incident-item__info { grid-area: info; }
    .incident-badge      { grid-area: badge; margin-top: .125rem; }
}

/* --------------------------------------------------------------------------
   6. Features Bar
   -------------------------------------------------------------------------- */
.features-bar {
    background: var(--color-white);
    padding: 3.5rem 0;
    border-bottom: 1px solid var(--color-border);
}

.features-bar__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.features-bar__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1rem;
}

.features-bar__icon {
    width: 48px;
    height: 48px;
    margin-bottom: .875rem;
    color: var(--color-dark);
}

.features-bar__icon svg {
    width: 100%;
    height: 100%;
    stroke: currentColor;
}

.features-bar__title {
    font-family: var(--font-condensed);
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--color-dark);
    margin-bottom: .5rem;
}

.features-bar__text {
    font-size: .875rem;
    color: var(--color-gray);
    line-height: 1.55;
}

/* --------------------------------------------------------------------------
   7. Section Titles
   -------------------------------------------------------------------------- */
.section-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 2rem;
}

.section-title {
    font-family: var(--font-condensed);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    position: relative;
    padding-bottom: .5rem;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 2.5rem;
    height: 3px;
    background: var(--color-red);
}

.section-title--light { color: var(--color-white); }

.section-link {
    font-family: var(--font-condensed);
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--color-gray);
    display: flex;
    align-items: center;
    gap: .35rem;
    white-space: nowrap;
    transition: color var(--transition);
}

.section-link:hover { color: var(--color-red); }
.section-link::after { content: '›'; font-size: 1.1em; }

.section-link--light { color: rgba(255,255,255,.6); }
.section-link--light:hover { color: var(--color-white); }

/* --------------------------------------------------------------------------
   8. Vehicles Section
   -------------------------------------------------------------------------- */
.vehicles {
    background: var(--color-dark);
    padding: 4rem 0 5rem;
}

.vehicles__slider-wrap {
    position: relative;
}

.vehicles__slider {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: .5rem;
}

.vehicles__slider::-webkit-scrollbar { display: none; }

/* Slider nav buttons */
.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 44px;
    height: 44px;
    background: var(--color-red);
    border: none;
    color: var(--color-white);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    transition: background var(--transition);
    flex-shrink: 0;
}

.slider-btn:hover { background: #a80000; }
.slider-btn--prev { left: -1.25rem; }
.slider-btn--next { right: -1.25rem; }
.slider-btn svg { width: 20px; height: 20px; }

/* Vehicle Card */
.vehicle-card {
    scroll-snap-align: start;
    flex: 0 0 calc(100% - .5rem);
    background: var(--color-light);
    border: 1px solid rgba(255,255,255,.14);
    overflow: hidden;
    position: relative; /* anchor for stretched link */
}

.vehicle-card__image {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
}

.vehicle-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}

.vehicle-card:hover .vehicle-card__image img { transform: scale(1.04); }

/* Stretched link: makes the entire card clickable */
.vehicle-card__link::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* Placeholder when no vehicle image is set */
.vehicle-card__placeholder {
    width: 100%;
    height: 100%;
    background: var(--color-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.vehicle-card__placeholder svg {
    width: 64px;
    height: 64px;
    color: rgba(255,255,255,.12);
    stroke-width: 1;
}

/* Badge in image corner */
.vehicle-card__badge {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 52px;
    height: 52px;
    background: var(--color-red);
    clip-path: polygon(18px 0%, 100% 0%, 100% 100%, 0% 100%, 0% 18px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 6px 6px 14px;
}

.vehicle-card__badge svg {
    width: 22px;
    height: 22px;
    color: var(--color-white);
    flex-shrink: 0;
}

.vehicle-card__body { padding: 1.25rem 1.375rem 1.5rem; }

.vehicle-card__title {
    font-family: var(--font-condensed);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-red);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: .25rem;
}

.vehicle-card__subtitle {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--color-dark);
    margin-bottom: 1rem;
}

.vehicle-card__specs {
    display: flex;
    flex-direction: column;
    gap: .45rem;
}

.vehicle-card__spec {
    display: flex;
    align-items: center;
    gap: .625rem;
    font-size: .8125rem;
    color: #2d3748;
}

.vehicle-card__spec svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: var(--color-dark);
}

/* --------------------------------------------------------------------------
   9. Incidents + Recruiting Section
   -------------------------------------------------------------------------- */
.incidents-section {
    padding: 4rem 0;
    background: var(--color-white);
}

.incidents-section__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
}

/* Incident list */
.incidents__title {
    font-family: var(--font-condensed);
    font-size: 1.375rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--color-red);
    margin-bottom: 1.5rem;
}

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

.incident-item {
    display: grid;
    grid-template-columns: 4rem 1fr auto;
    align-items: center;
    gap: .875rem;
    padding: .875rem 0;
    border-bottom: 1px solid var(--color-border);
}

.incident-item__time { text-align: right; }

.incident-item__time-value {
    font-family: var(--font-condensed);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-dark);
    line-height: 1.1;
}

.incident-item__time-date {
    font-size: .75rem;
    color: var(--color-gray);
    white-space: nowrap;
}

.incident-item__title {
    font-size: .9375rem;
    font-weight: 700;
    color: var(--color-dark);
    line-height: 1.3;
    margin-bottom: .2rem;
}

.incident-item__location {
    font-size: .8125rem;
    color: var(--color-gray);
}

.incident-badge {
    display: inline-block;
    padding: .2rem .6rem;
    font-family: var(--font-condensed);
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    border: 1.5px solid currentColor;
    white-space: nowrap;
    color: var(--color-dark);
}

.incident-badge--brand    { color: var(--color-red); }
.incident-badge--hilfe    { color: #1a4480; }
.incident-badge--technik  { color: #2d6a4f; }

.incidents__more {
    margin-top: 1.5rem;
}

/* Recruiting panel */
.recruiting {
    position: relative;
    background: var(--color-light);
    overflow: hidden;
    padding: 2.5rem;
    min-height: 360px;
}

.recruiting__bg {
    position: absolute;
    inset: 0;
    left: 42%;
    z-index: 0;
    clip-path: polygon(24% 0, 100% 0, 100% 100%, 0 100%);
}

.recruiting__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 1;
}

.recruiting::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, var(--color-light) 0%, var(--color-light) 46%, rgba(244,245,247,.92) 52%, rgba(244,245,247,0) 66%);
    pointer-events: none;
}

.recruiting__content {
    position: relative;
    z-index: 2;
    max-width: 430px;
}

.recruiting__heading {
    font-family: var(--font-condensed);
    font-size: 1.625rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-red);
    letter-spacing: .04em;
    margin-bottom: .875rem;
}

.recruiting__text {
    font-size: .9375rem;
    color: #2d3748;
    margin-bottom: 1.25rem;
    line-height: 1.65;
}

.recruiting__list {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin-bottom: 1.75rem;
}

.recruiting__list li {
    display: flex;
    align-items: center;
    gap: .625rem;
    font-size: .9375rem;
    color: #2d3748;
}

.recruiting__list li::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23cc0000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='2 8 6 12 14 4'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

@media (max-width: 767px) {
    .recruiting {
        padding: 2rem 1.25rem;
        min-height: auto;
    }

    .recruiting__bg {
        left: 0;
        clip-path: none;
    }

    .recruiting__bg img {
        opacity: .18;
    }

    .recruiting::before {
        background: rgba(244,245,247,.94);
    }

    .recruiting__content {
        max-width: none;
    }
}

/* --------------------------------------------------------------------------
   10. Footer
   -------------------------------------------------------------------------- */
.site-footer {
    background: var(--color-dark);
    padding: 3.5rem 0 0;
    color: rgba(255,255,255,.75);
}

.site-footer__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    padding-bottom: 2.5rem;
}

.footer-brand {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: .875rem;
}

.footer-logo img { height: 54px; width: auto; }

.footer-logo__text {
    font-family: var(--font-condensed);
    font-size: .75rem;
    font-weight: 700;
    line-height: 1.25;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--color-white);
    white-space: pre-line;
}

.footer-logo__text span { color: var(--color-red); }

.footer-contact { font-size: .875rem; line-height: 1.9; }

.footer-nav__title {
    font-family: var(--font-condensed);
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--color-white);
    margin-bottom: 1rem;
}

.footer-nav__cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .375rem 1.5rem;
}

.footer-nav__cols a {
    font-size: .875rem;
    color: rgba(255,255,255,.65);
    transition: color var(--transition);
}

.footer-nav__cols a:hover { color: var(--color-white); }

.footer-social__icons {
    display: flex;
    gap: .75rem;
    margin-top: .75rem;
}

.footer-social__icons a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1.5px solid rgba(255,255,255,.25);
    border-radius: 50%;
    color: rgba(255,255,255,.65);
    transition: all var(--transition);
}

.footer-social__icons a:hover {
    border-color: var(--color-white);
    color: var(--color-white);
    background: rgba(255,255,255,.08);
}

.footer-social__icons svg { width: 16px; height: 16px; }

.site-footer__bottom {
    border-top: 1px solid rgba(255,255,255,.1);
    width: 100%;
}

.site-footer__bottom .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding-top: 1.125rem;
    padding-bottom: 1.125rem;
    font-size: .8125rem;
    color: rgba(255,255,255,.4);
}

.site-footer__bottom a {
    color: rgba(255,255,255,.4);
    transition: color var(--transition);
}

.site-footer__bottom a:hover {
    color: var(--color-white);
}

/* --------------------------------------------------------------------------
   11. Inner Pages (page, single, archive)
   -------------------------------------------------------------------------- */
.page-hero {
    background: var(--color-dark);
    padding: 3.5rem 0;
    border-bottom: 3px solid var(--color-red);
}

.page-hero__title {
    font-family: var(--font-condensed);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--color-white);
}

.page-hero__breadcrumb {
    margin-top: .5rem;
    font-size: .875rem;
    color: rgba(255,255,255,.5);
}

.page-hero__breadcrumb a { color: rgba(255,255,255,.5); }
.page-hero__breadcrumb a:hover { color: var(--color-white); }
.page-hero__breadcrumb span + span::before { content: ' / '; }

.content-area {
    padding: 4rem 0;
}

.entry-content {
    max-width: 760px;
    font-size: 1rem;
    line-height: 1.75;
    color: #2d3748;
}

.entry-content h1, .entry-content h2, .entry-content h3,
.entry-content h4, .entry-content h5, .entry-content h6 {
    font-family: var(--font-condensed);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--color-dark);
    margin-top: 2rem;
    margin-bottom: .75rem;
}

.entry-content p { margin-bottom: 1.25rem; }
.entry-content ul, .entry-content ol { padding-left: 1.5rem; margin-bottom: 1.25rem; }
.entry-content ul li { list-style: disc; margin-bottom: .375rem; }
.entry-content ol li { list-style: decimal; margin-bottom: .375rem; }
.entry-content a { color: var(--color-red); text-decoration: underline; }
.entry-content img { max-width: 100%; height: auto; margin-block: 1.5rem; }
.entry-content figure { margin-block: 1.5rem; }
.entry-content figcaption { font-size: .875rem; color: var(--color-gray); text-align: center; margin-top: .5rem; }

/* Post cards (archive) */
.post-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

.post-card {
    border: 1px solid var(--color-border);
    overflow: hidden;
    transition: box-shadow var(--transition);
}

.post-card:hover { box-shadow: 0 4px 24px rgba(0,0,0,.1); }

.post-card__image {
    aspect-ratio: 16/9;
    overflow: hidden;
}

.post-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}

.post-card:hover .post-card__image img { transform: scale(1.04); }

.post-card__body { padding: 1.25rem 1.375rem; }

.post-card__meta {
    font-size: .8125rem;
    color: var(--color-gray);
    margin-bottom: .5rem;
}

.post-card__title {
    font-family: var(--font-condensed);
    font-size: 1.25rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-dark);
    margin-bottom: .625rem;
    line-height: 1.2;
}

.post-card__excerpt {
    font-size: .875rem;
    color: var(--color-gray);
    line-height: 1.6;
}

/* Vehicle single */
.vehicle-hero {
    background: var(--color-dark);
    padding: 4rem 0;
}

.vehicle-hero__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
}

.vehicle-hero__image {
    aspect-ratio: 16/10;
    overflow: hidden;
}

.vehicle-hero__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vehicle-hero__title {
    font-family: var(--font-condensed);
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-white);
    line-height: 1.0;
    margin-bottom: .25rem;
}

.vehicle-hero__subtitle {
    font-family: var(--font-condensed);
    font-size: .875rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--color-gray);
    margin-bottom: 1.5rem;
}

.vehicle-specs-list { display: flex; flex-direction: column; gap: .625rem; }

.vehicle-specs-list li {
    display: flex;
    align-items: center;
    gap: .75rem;
    font-size: .9375rem;
    color: rgba(255,255,255,.75);
}

.vehicle-specs-list li::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 2px;
    background: var(--color-red);
    flex-shrink: 0;
}

/* Pagination */
.pagination {
    display: flex;
    gap: .375rem;
    justify-content: center;
    padding-top: 3rem;
}

.pagination a,
.pagination span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    font-size: .875rem;
    font-weight: 700;
    border: 1.5px solid var(--color-border);
    color: var(--color-dark);
    transition: all var(--transition);
}

.pagination a:hover,
.pagination .current {
    background: var(--color-red);
    border-color: var(--color-red);
    color: var(--color-white);
}

/* 404 */
.error-404 { padding: 6rem 0; text-align: center; }

.error-404__code {
    font-family: var(--font-condensed);
    font-size: 8rem;
    font-weight: 700;
    color: var(--color-red);
    line-height: 1;
}

.error-404__title {
    font-family: var(--font-condensed);
    font-size: 2rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-dark);
    margin-bottom: 1rem;
}

.error-404__text { color: var(--color-gray); margin-bottom: 2rem; }

/* --------------------------------------------------------------------------
   12. Responsive – Tablet small (≥ 640px)
   -------------------------------------------------------------------------- */
@media (min-width: 640px) {
    .features-bar__grid { grid-template-columns: repeat(4, 1fr); }
    .features-bar__item:not(:last-child) { border-right: 1px solid var(--color-border); }

    .vehicle-card { flex: 0 0 calc(50% - .75rem); }

    .post-grid { grid-template-columns: repeat(2, 1fr); }
}

/* --------------------------------------------------------------------------
   12b. Responsive – Tablet (≥ 768px)
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
    /* Hero: restore generous padding on wider screens */
    .hero__inner {
        padding-top: 4rem;
        padding-bottom: 6rem;
    }
    .hero::after {
        border-width: 0 0 220px 220px;
    }

    /* Incidents + recruiting side by side earlier than 1024px */
    .incidents-section__grid {
        grid-template-columns: 1fr 1fr;
        gap: 3rem;
    }

    /* Footer: 2-column layout on tablet */
    .site-footer__grid {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }

    /* Buttons back to inline row */
    .hero__buttons {
        flex-direction: row;
    }
    .hero__buttons .btn {
        width: auto;
    }

    /* Section header back to inline row */
    .section-header {
        flex-direction: row;
        align-items: baseline;
        gap: 1rem;
        margin-bottom: 2rem;
    }
}

/* --------------------------------------------------------------------------
   13. Responsive – Desktop (≥ 1024px)
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
    .nav-primary { display: block; }
    .nav-toggle   { display: none; }

    .hero__inner {
        padding-top: 5rem;
        padding-bottom: 8rem;
    }
    .hero::after {
        border-width: 0 0 300px 300px;
    }

    .vehicle-card { flex: 0 0 calc(33.333% - 1rem); }

    .incidents-section__grid { grid-template-columns: 1fr 1fr; gap: 4rem; }

    .site-footer__grid { grid-template-columns: 1fr 1.25fr 1fr; }

    .vehicle-hero__grid { grid-template-columns: 1fr 1fr; align-items: center; }

    .post-grid { grid-template-columns: repeat(3, 1fr); }
}