/* Header Fix - Version 2.1 */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: transparent;
    transition: all 0.3s ease;
    padding: 10px 0;
    border-bottom: none !important;
}

@media screen and (min-width: 1025px) {
    .site-header {
        background: rgba(0, 0, 0, 0.2) !important;
        padding: 8px 0 !important;
        transition: background-color 250ms ease, box-shadow 250ms ease, padding 250ms ease;
    }

    /* Vertically center all header items on the same baseline */
    .header-container {
        align-items: center !important;
        min-height: 60px !important;
    }

    /* Logo: block-level so it centers on its own height, no baseline offset */
    .site-branding {
        display: flex !important;
        align-items: center !important;
        height: 100% !important;
    }
    .site-branding > a {
        display: flex !important;
        align-items: center !important;
        line-height: 1 !important;
    }
    .header-logo {
        display: block !important;
        height: 50px !important;
        width: auto !important;
    }

    /* Nav container vertically centered */
    .main-navigation {
        display: flex !important;
        align-items: center !important;
        gap: 28px !important;
        height: 100% !important;
    }

    /* Nav links: tight line-height so they sit dead-center, not low */
    #primary-menu {
        display: flex !important;
        align-items: center !important;
        height: 100% !important;
    }
    #primary-menu > li {
        display: flex !important;
        align-items: center !important;
        height: 100% !important;
    }
    #primary-menu > li > a {
        line-height: 1.2 !important;
        padding: 8px 14px !important;
        display: flex !important;
        align-items: center !important;
    }

    /* CTA: same vertical alignment as everything else */
    .header-cta-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 1.2 !important;
        height: 40px !important;
        padding: 0 22px !important;
    }
}

.site-header.scrolled {
    background: #ffffff;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
    padding: 8px 0;
    border-bottom: none !important;
    transition: background-color 250ms ease, box-shadow 250ms ease;
}

@media screen and (min-width: 1025px) {
    .site-header.scrolled {
        background: #ffffff !important;
        box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08) !important;
        padding: 8px 0 !important;
    }

    /* Logo: show original colors (black + red) — filter:none is already set,
       but ensure smooth transition */
    .header-logo {
        transition: filter 250ms ease, opacity 250ms ease;
    }

    /* CTA stays Kargoza red with white text in both states */
    .header-cta-btn {
        transition: background-color 250ms ease, transform 250ms ease, box-shadow 250ms ease;
    }

    /* Hover in TOP/dark state: white nav → subtle white tint */
    #primary-menu > li > a:hover {
        color: #d31b2c !important;
    }

    /* Hover in SCROLLED/white state: same red */
    .site-header.scrolled #primary-menu > li > a:hover {
        color: #d31b2c !important;
    }

    /* Submenu readable on white */
    .site-header.scrolled #primary-menu .sub-menu {
        background: #ffffff !important;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15) !important;
    }
    .site-header.scrolled #primary-menu .sub-menu a {
        color: #000000 !important;
    }
    .site-header.scrolled #primary-menu .sub-menu a:hover {
        color: #ffffff !important;
        background: #d31b2c !important;
    }
}

.site-header.scrolled .site-title a,
.site-header.scrolled .site-description {
    color: #000000 !important;
}

.site-header.scrolled #primary-menu > li > a {
    color: #000000 !important;
}

.site-header.scrolled .header-cta-btn {
    color: #ffffff !important;
    background: #d31b2c;
}

.header-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.site-branding {
    flex-shrink: 0;
}

.site-title {
    margin: 0;
    font-size: 1.8rem;
    font-weight: 700;
}

.site-title a {
    color: #000000 !important;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.site-description {
    display: none;
}

/* Logo Styles */
.site-branding {
    flex-shrink: 0;
}

.header-logo {
    height: 60px;
    width: auto;
    transition: all 0.3s ease;
}

/* White logo over hero (no scroll) - desktop and mobile */
.site-header .header-logo {
    filter: brightness(0) invert(1);
}

/* Dark logo when scrolled */
.site-header.scrolled .header-logo {
    filter: none;
}

/* Desktop Navigation */
.main-navigation {
    display: flex;
    align-items: center;
    gap: 30px;
}

#primary-menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 5px;
}

#primary-menu > li {
    position: relative;
}

#primary-menu > li > a {
    color: #000000 !important;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 10px 15px;
    display: block;
    transition: all 0.3s ease;
    position: relative;
}

#primary-menu > li > a::before {
    content: '';
    position: absolute;
    bottom: 5px;
    left: 15px;
    right: 15px;
    height: 2px;
    background: #d31b2c;
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

#primary-menu > li > a:hover::before,
#primary-menu > li.current-menu-item > a::before {
    transform: scaleX(1);
}

#primary-menu > li > a:hover {
    color: #d31b2c !important;
    transform: translateY(-2px);
}

/* Submenu Dropdown */
#primary-menu .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    padding: 10px 0;
    list-style: none;
    margin: 0;
}

#primary-menu li:hover > .sub-menu {
    display: block;
    animation: fadeInDown 0.3s ease;
}

#primary-menu .sub-menu li {
    position: relative;
}

#primary-menu .sub-menu a {
    color: #000000 !important;
    text-decoration: none;
    padding: 12px 20px;
    display: block;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

#primary-menu .sub-menu a:hover {
    color: #000000 !important;
    background: #d31b2c;
    padding-left: 25px;
}

/* Submenu arrow indicator - disabled (Font Awesome not used here) */
/* #primary-menu > li.menu-item-has-children > a::before {
    content: '\f107';
    font-family: none;
    font-weight: 900;
    margin-left: 5px;
    font-size: 0.8rem;
} */

/* CTA Button */
.header-cta-btn {
    background: #d31b2c;
    color: #000000 !important;
    padding: 12px 25px;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 300;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.header-cta-btn:hover {
    background: #b31520;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(211, 27, 44, 0.4);
}

/* Mobile Menu Toggle */
.mobile-menu-toggle {
    display: none;
    background: rgba(0, 0, 0, 0.35) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    cursor: pointer;
    padding: 10px;
    z-index: 10000;
    width: 44px;
    height: 44px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    border-radius: 6px;
}

.hamburger-line {
    display: block;
    width: 26px;
    height: 3px;
    background: #ffffff !important;
    border-radius: 2px;
    transition: all 0.3s ease;
}

.site-header.scrolled .hamburger-line {
    background: #000000 !important;
}

.mobile-menu-toggle.active .hamburger-line:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
}

.mobile-menu-toggle.active .hamburger-line:nth-child(2) {
    opacity: 0;
}

.mobile-menu-toggle.active .hamburger-line:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
}

/* Mobile Menu */
.mobile-menu {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #ffffff;
    z-index: 99998;
    overflow-y: auto;
    padding: 20px;
}

.mobile-menu.active {
    display: block;
    animation: slideDown 0.3s ease;
}

.mobile-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    margin-bottom: 30px;
}

.mobile-menu-logo {
    color: #000000 !important;
    font-size: 1.5rem;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    display: none; /* Hide duplicate logo text */
}

.mobile-menu-close {
    background: transparent;
    border: none;
    color: #000000 !important;
    font-size: 2rem;
    cursor: pointer;
    padding: 10px;
}

.mobile-menu-content {
    padding-top: 20px;
}

#mobile-primary-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

#mobile-primary-menu li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

#mobile-primary-menu a {
    color: #000000 !important;
    text-decoration: none;
    font-size: 1.1rem;
    padding: 15px 0;
    display: block;
    transition: color 0.3s ease;
}

#mobile-primary-menu a:hover {
    color: #d31b2c;
}

.mobile-cta-btn {
    display: block;
    background: #d31b2c;
    color: #000000 !important;
    text-align: center;
    padding: 15px;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 300;
    text-transform: uppercase;
    margin-top: 20px;
}

.mobile-menu-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 99997;
}

.mobile-menu-overlay.active {
    display: block;
}

/* Animations */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideDown {
    from {
        transform: translateY(-100%);
    }
    to {
        transform: translateY(0);
    }
}

/* Responsive */
@media (max-width: 1024px) {
    /* Show mobile menu and hide desktop nav */
    .main-navigation {
        display: none !important;
    }
    
    .mobile-menu-toggle {
        display: flex !important;
    }
    
    .header-container {
        padding: 0 20px;
    }
    
    .header-logo {
        height: 54px;
    }
    
    .site-header.scrolled .header-logo {
        filter: none;
    }
    
    /* Mobile: white logo when not scrolled */
    .site-header .header-logo {
        filter: brightness(0) invert(1);
    }
}

/* Submenu fix when header is scrolled - white background needs dark text */
.site-header.scrolled #primary-menu .sub-menu {
    background: white;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

.site-header.scrolled #primary-menu .sub-menu a {
    color: #000000 !important;
}

.site-header.scrolled #primary-menu .sub-menu a:hover {
    color: #000000 !important;
    background: #d31b2c;
}

/* Hero Container - Same alignment as header */
.hero-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
    width: 100%;
    box-sizing: border-box;
}

/* ========================================
   HERO TYPOGRAPHY & FORM REFINEMENT - DESKTOP ONLY
   ======================================== */

/* Old desktop hero typography rules — removed; the new DESKTOP HERO block
   below defines all desktop hero styling. */

/* ============================================
   DESKTOP HERO — premium two-column redesign
   Applies ONLY at min-width: 1025px.
   Mobile rules below remain untouched.
   ============================================ */

/* Hero base — these rules must apply at FIRST PAINT (no media query)
   so that bullets, margins, and list markers never show before the
   desktop styles below take over. */
.hero ul,
.hero ol,
.hero-benefits,
.hero-trust {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.hero ul li,
.hero ol li,
.hero-benefits li,
.hero-trust li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Base hero-grid: do nothing on mobile (mobile rules take over) */
.hero-grid {
    width: 100%;
}

/* Hero container alignment with header (no change) */

/* ---------- DESKTOP ONLY: LAYOUT ---------- */
@media screen and (min-width: 1025px) {

    /* Hero section — full screen with vertical centering.
       Use dvh (dynamic viewport height) so the form fits even when the
       browser chrome is taller than expected. Reduce top/bottom padding
       so the available content area is larger. */
    .hero {
        min-height: 100vh;
        min-height: 100dvh;
        display: flex;
        align-items: center;
        padding-top: 88px;
        padding-bottom: 48px;
    }

    /* Two-column grid: content (flex) + form (fixed-width) */
    .hero-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 460px;
        gap: 60px;
        align-items: center;
        width: 100%;
    }

    /* Mid-desktop: tighten the form a touch */
    @media screen and (max-width: 1365px) {
        .hero-grid {
            grid-template-columns: minmax(0, 1fr) 420px;
            gap: 50px;
        }
    }

    /* Large desktop: roomier */
    @media screen and (min-width: 1600px) {
        .hero-grid {
            grid-template-columns: minmax(0, 1fr) 480px;
            gap: 80px;
        }
    }

    /* Left column — content */
    .hero-content {
        min-width: 0;
        max-width: 100%;
        text-align: left;
        color: #ffffff;
    }

    .hero-content .hero-eyebrow,
    .hero-content .hero-title,
    .hero-content .hero-description,
    .hero-content .hero-benefits,
    .hero-content .hero-buttons {
        margin-left: 0;
        margin-right: 0;
    }

    /* Eyebrow with red accent line */
    .hero-eyebrow {
        display: inline-flex !important;
        align-items: center;
        gap: 14px;
        font-family: 'Outfit', sans-serif;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 3px;
        text-transform: uppercase;
        color: #d31b2c;
        margin-bottom: 24px;
    }
    .hero-eyebrow-line {
        display: inline-block;
        width: 36px;
        height: 2px;
        background: #d31b2c;
        flex-shrink: 0;
    }

    /* Headline — clamp() for fluid desktop sizing, never overflows form */
    .hero-title {
        font-family: 'Outfit', sans-serif !important;
        font-size: clamp(40px, 4.6vw, 68px) !important;
        font-weight: 800 !important;
        line-height: 1.05 !important;
        color: #ffffff !important;
        margin: 0 0 22px 0 !important;
        max-width: 100%;
    }
    .hero-title-accent {
        color: #d31b2c;
    }

    /* Description */
    .hero-description {
        font-family: 'Outfit', sans-serif;
        font-size: 17px;
        line-height: 1.6;
        font-weight: 300;
        color: rgba(255, 255, 255, 0.78);
        max-width: 540px;
        margin: 0 0 32px 0;
    }

    /* Benefit indicators */
    .hero-benefits {
        list-style: none;
        margin: 0 0 36px 0;
        padding: 0;
        display: flex;
        gap: 24px;
        align-items: stretch;
    }
    .hero-benefit {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 0 24px 0 0;
        border-right: 1px solid rgba(255, 255, 255, 0.18);
    }
    .hero-benefit:last-child {
        border-right: none;
        padding-right: 0;
    }
    .hero-benefit-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 8px;
        color: #d31b2c;
        background: rgba(211, 27, 44, 0.1);
        border: 1px solid rgba(211, 27, 44, 0.3);
        flex-shrink: 0;
    }
    .hero-benefit-text {
        display: flex;
        flex-direction: column;
        line-height: 1.1;
    }
    .hero-benefit-text strong {
        font-family: 'Outfit', sans-serif;
        font-size: 15px;
        font-weight: 700;
        color: #ffffff;
        letter-spacing: 0.3px;
    }
    .hero-benefit-text small {
        font-family: 'Outfit', sans-serif;
        font-size: 12px;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.65);
        margin-top: 2px;
    }

    /* Hero buttons row */
    .hero-buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 14px;
        align-items: center;
        justify-content: flex-start;
        width: auto;
        margin: 0;
        padding: 0;
    }
    .hero-btn-primary,
    .hero-btn-secondary {
        font-family: 'Outfit', sans-serif;
        font-size: 14px;
        font-weight: 700;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        height: 54px;
        padding: 0 28px;
        border-radius: 4px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        text-decoration: none;
        transition: all 0.2s ease;
        cursor: pointer;
    }
    .hero-btn-primary {
        background: #d31b2c;
        color: #ffffff;
        border: 2px solid #d31b2c;
    }
    .hero-btn-primary:hover {
        background: #b31520;
        border-color: #b31520;
        transform: translateY(-1px);
        box-shadow: 0 8px 20px rgba(211, 27, 44, 0.35);
    }
    .hero-btn-secondary {
        background: transparent;
        color: #ffffff;
        border: 2px solid rgba(255, 255, 255, 0.4);
    }
    .hero-btn-secondary:hover {
        background: rgba(255, 255, 255, 0.08);
        border-color: rgba(255, 255, 255, 0.8);
    }
    .hero-btn-arrow {
        display: inline-block;
        transition: transform 0.2s ease;
        font-size: 16px;
        line-height: 1;
    }
    .hero-btn-primary:hover .hero-btn-arrow,
    .quote-form-submit:hover .hero-btn-arrow {
        transform: translateX(4px);
    }

    /* Right column — quote form */
    .hero-form-wrapper {
        min-width: 0;
        max-width: 100%;
        width: 100%;
        flex: none;
    }
    .quote-form-card {
        background: #ffffff;
        border-radius: 8px;
        padding: 24px 24px 20px 24px;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
        border: 1px solid rgba(255, 255, 255, 0.08);
    }
    .quote-form-header {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        padding-bottom: 16px;
        margin-bottom: 16px;
        border-bottom: 1px solid #eef0f2;
    }
    .quote-form-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        border-radius: 8px;
        background: #fef2f3;
        color: #d31b2c;
        flex-shrink: 0;
    }
    .quote-form-header h3 {
        font-family: 'Outfit', sans-serif !important;
        font-size: 20px !important;
        font-weight: 700;
        color: #1a1a1a;
        margin: 0 0 2px 0;
        line-height: 1.2;
        text-align: left;
    }
    .quote-form-header p {
        font-family: 'Outfit', sans-serif;
        font-size: 12px;
        font-weight: 400;
        color: #6b7280;
        margin: 0;
        line-height: 1.4;
    }

    .quote-form-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-bottom: 10px;
    }
    .quote-form-field {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }
    .quote-form-field-full {
        margin-bottom: 10px;
    }
    .quote-form-field label {
        font-family: 'Outfit', sans-serif;
        font-size: 11px;
        font-weight: 600;
        color: #374151;
        margin-bottom: 4px;
        text-transform: uppercase;
        letter-spacing: 0.4px;
    }
    .quote-form input,
    .quote-form select,
    .quote-form textarea {
        font-family: 'Outfit', sans-serif !important;
        font-size: 13px !important;
        height: 40px !important;
        padding: 0 12px !important;
        border: 1px solid #e5e7eb !important;
        border-radius: 6px !important;
        background: #fafafa !important;
        color: #1a1a1a !important;
        transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        margin: 0 !important;
    }
    .quote-form input::placeholder,
    .quote-form textarea::placeholder {
        color: #9ca3af !important;
        font-weight: 400 !important;
    }
    .quote-form input:focus,
    .quote-form select:focus,
    .quote-form textarea:focus {
        outline: none !important;
        border-color: #d31b2c !important;
        box-shadow: 0 0 0 3px rgba(211, 27, 44, 0.12) !important;
        background: #ffffff !important;
    }
    .quote-form select {
        appearance: none !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23d31b2c' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important;
        background-position: right 12px center !important;
        padding-right: 32px !important;
        cursor: pointer !important;
    }
    .quote-form textarea {
        height: 68px !important;
        padding: 10px 12px !important;
        resize: none !important;
        font-family: 'Outfit', sans-serif !important;
    }

    .quote-form-submit {
        font-family: 'Outfit', sans-serif !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 1.5px !important;
        height: 44px !important;
        width: 100% !important;
        background: #d31b2c !important;
        color: #ffffff !important;
        border: none !important;
        border-radius: 6px !important;
        cursor: pointer !important;
        transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease !important;
        margin-top: 4px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px;
    }
    .quote-form-submit:hover {
        background: #b31520 !important;
        transform: translateY(-1px) !important;
        box-shadow: 0 8px 18px rgba(211, 27, 44, 0.4) !important;
    }

    /* Trust indicators inside form */
    .quote-form-trust {
        list-style: none;
        margin: 14px 0 0 0;
        padding: 14px 0 0 0;
        border-top: 1px solid #eef0f2;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
    }
    .quote-form-trust li {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 4px;
    }
    .quote-form-trust-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 26px;
        height: 26px;
        border-radius: 50%;
        background: #fef2f3;
        color: #d31b2c;
    }
    .quote-form-trust li > span:last-child {
        display: flex;
        flex-direction: column;
        line-height: 1.1;
    }
    .quote-form-trust strong {
        font-family: 'Outfit', sans-serif;
        font-size: 10px;
        font-weight: 700;
        color: #1a1a1a;
        text-transform: uppercase;
        letter-spacing: 0.3px;
    }
    .quote-form-trust small {
        font-family: 'Outfit', sans-serif;
        font-size: 9px;
        font-weight: 400;
        color: #6b7280;
        margin-top: 1px;
    }

    /* ============================================
       DESKTOP HEIGHT-BASED COMPACTION
       The base form above is already compact. These
       rules compact it further when the viewport is
       short, so the entire form fits without page
       scroll. The trust indicators and the icon
       header can be hidden on very short screens.
       ============================================ */

    /* Mid-height: slightly tighter hero + smaller headline */
    @media screen and (max-height: 900px) {
        .hero {
            padding-top: 76px;
            padding-bottom: 36px;
        }
        .hero-title {
            font-size: clamp(36px, 4.2vw, 56px) !important;
            margin-bottom: 16px !important;
        }
        .hero-description {
            font-size: 15px !important;
            margin-bottom: 22px !important;
        }
        .hero-benefits {
            margin-bottom: 24px !important;
        }
    }

    /* Short laptops (768px and below): aggressive compaction */
    @media screen and (max-height: 820px) {
        .hero {
            padding-top: 72px;
            padding-bottom: 28px;
        }
        .hero-title {
            font-size: clamp(32px, 3.8vw, 48px) !important;
            margin-bottom: 14px !important;
        }
        .hero-eyebrow {
            margin-bottom: 14px !important;
        }
        .hero-description {
            font-size: 14px !important;
            line-height: 1.5 !important;
            margin-bottom: 18px !important;
        }
        .hero-benefits {
            margin-bottom: 18px !important;
            gap: 18px !important;
        }
        .hero-benefit-icon {
            width: 34px;
            height: 34px;
        }
        .hero-benefit-text strong {
            font-size: 13px;
        }
        .hero-benefit-text small {
            font-size: 11px;
        }
        .hero-btn-primary,
        .hero-btn-secondary {
            height: 46px;
            font-size: 13px;
        }
        /* Form compaction */
        .quote-form-card {
            padding: 20px 20px 16px 20px;
        }
        .quote-form-header {
            padding-bottom: 12px;
            margin-bottom: 12px;
        }
        .quote-form-icon {
            width: 32px;
            height: 32px;
        }
        .quote-form-header h3 {
            font-size: 18px !important;
        }
        .quote-form-header p {
            font-size: 11px;
        }
        .quote-form-row {
            gap: 8px;
            margin-bottom: 8px;
        }
        .quote-form-field label {
            font-size: 10px;
            margin-bottom: 3px;
        }
        .quote-form input,
        .quote-form select,
        .quote-form textarea {
            height: 36px !important;
            font-size: 12px !important;
            padding: 0 10px !important;
        }
        .quote-form textarea {
            height: 56px !important;
            padding: 8px 10px !important;
        }
        .quote-form-submit {
            height: 40px !important;
            font-size: 12px !important;
        }
        .quote-form-trust {
            margin-top: 10px;
            padding-top: 10px;
        }
    }

    /* Very short screens (720px and below): hide the trust indicators
       and the form description to guarantee the form fits */
    @media screen and (max-height: 720px) {
        .hero {
            padding-top: 68px;
            padding-bottom: 20px;
        }
        .quote-form-header p {
            display: none;
        }
        .quote-form-trust {
            display: none;
        }
    }

    /* Ultra-short (laptops with browser chrome, etc): compact even more */
    @media screen and (max-height: 660px) {
        .hero {
            padding-top: 64px;
            padding-bottom: 12px;
        }
        .quote-form-card {
            padding: 16px 18px 12px 18px;
        }
        .quote-form-row {
            margin-bottom: 6px;
            gap: 6px;
        }
        .quote-form-field-full {
            margin-bottom: 6px;
        }
        .quote-form input,
        .quote-form select,
        .quote-form textarea {
            height: 32px !important;
        }
        .quote-form textarea {
            height: 44px !important;
        }
        .quote-form-submit {
            height: 36px !important;
        }
    }
}

/* Quote form styles: see "DESKTOP HERO" block above for desktop styling.
   Form is rendered only on desktop (hidden on mobile by the @media (max-width: 1024px) rules).
   No global rules needed here. */



/* Old horizontal form layout rules — removed; desktop form now uses
   the .quote-form-row 2-col grid defined in the DESKTOP HERO block above. */



/* Prevent auto-scroll on page load */
html, body {
    scroll-behavior: auto !important;
    overflow-x: hidden !important;
    max-width: 100vw !important;
}

/* Primary Menu Styling */
#primary-menu > li > a {
    color: #000000 !important;
    text-decoration: none;
    font-size: 15px;
    font-weight: 100;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 10px 7px;
    display: block;
    transition: all 0.3s ease;
    position: relative;
}

/* Menu text black when scrolled */
.site-header.scrolled #primary-menu > li > a {
    color: #000000 !important;
}

/* Quote button text white when scrolled */
.site-header.scrolled .header-cta-btn {
    color: #ffffff !important;
}

/* Hide menu icons on desktop */
@media screen and (min-width: 1025px) {
    #primary-menu > li > a::before,
    #primary-menu > li > a::before,
    #primary-menu > li.menu-item-has-children > a::before {
        display: none !important;
        content: none !important;
    }
}

/* Center menu vertically on desktop */
@media screen and (min-width: 1025px) {
    .site-header {
        height: 88px !important;
    }
    
    .header-container {
        height: 80px;
        align-items: center !important;
    }
    
    #site-navigation {
        display: flex !important;
        align-items: center !important;
    }
    
    #primary-menu {
        display: flex !important;
        align-items: center !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    #primary-menu > li {
        display: flex !important;
        align-items: center !important;
    }
    
    #primary-menu > li > a {
        padding: 10px 7px !important;
        display: flex !important;
        align-items: center !important;
    }
    
    /* Scrolled state */
    .site-header.scrolled {
        height: 77px !important;
        padding: 0 !important;
    }
    
    .site-header.scrolled .header-container {
        height: 77px !important;
    }
}

/* Ensure CTA button text is white always */
.site-header .header-cta-btn,
.site-header.scrolled .header-cta-btn,
header .header-cta-btn,
.header-cta-btn {
}


/* External link icon for CTA button */
.header-cta-btn::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 6px;
    vertical-align: baseline;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}





/* CTA button text always white */
.header-cta-btn, .header-cta-btn span, .header-cta-btn i {
    color: #000000 !important;
}

/* CTA button - separate from menu items */
.main-navigation .header-cta-btn,
.site-header .header-cta-btn,
.header-cta-btn {
    color: #000000 !important;
}

/* Hide hero form on mobile */
@media screen and (max-width: 1024px) {
    .hero-form-wrapper {
        display: none !important;
    }
}

/* Menu and CTA text white when NOT scrolled (on hero) */
.site-header:not(.scrolled) #primary-menu > li > a,
.site-header:not(.scrolled) .header-cta-btn {
    color: #ffffff !important;
}

/* Hero form button - white text, smaller */
.quote-form-card button[type="submit"] {
    color: #ffffff !important;
    font-size: 14px !important; font-weight: 300 !important;
}

/* Mobile hero - no repeat, cover horizontally */
@media screen and (max-width: 1024px) {
    .hero {
        background-repeat: no-repeat !important;
        background-size: 100% auto !important;
        background-position: center center !important;
    }
    
    /* Hero content alignment on mobile */
    .hero-container {
        padding-top: 120px !important;
        padding-bottom: 60px !important;
    }
    
    /* Hero buttons on mobile - side by side */
    .hero-buttons {
        display: flex !important;
        flex-direction: row !important;
        gap: 12px !important;
        justify-content: center !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        width: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;
        text-align: center !important;
    }
    
    .hero-buttons .btn {
        flex: 1 1 auto !important;
        max-width: 180px !important;
        text-align: center !important;
        padding: 0.65rem 1rem !important;
        font-size: 0.85rem !important;
        max-height: 42px !important;
    }
    
    /* EXPLORE SERVICES - white background, black text */
    .hero-buttons .btn-primary {
        background: #ffffff !important;
        color: #000000 !important;
    }
    
    /* Get a Quote - red background, white text */
    .hero-buttons .btn-primary {
        background: #d31b2c !important;
        color: #ffffff !important;
    }
    
    /* Hide mobile CTA in header when on homepage */
    .site-header .header-cta-btn {
        display: none !important;
    }
}

/* Hero buttons - Get a Quote left, EXPLORE SERVICES right, uppercase */
.hero-buttons {
    display: flex !important;
    gap: 20px !important;
    justify-content: flex-start !important;
}

.hero-buttons .btn {
    text-transform: uppercase !important; font-weight: 300 !important;
    letter-spacing: 1px !important;
    font-weight: 300 !important;
}

.hero-buttons .btn-primary {
    order: 2;
}

.hero-buttons .btn-primary {
    order: 1;
}

/* Button order - Get a Quote first (left), Explore Services second (right) */
.hero-buttons .mobile-cta-visible {
    order: 1 !important;
}

.hero-buttons .btn-secondary {
    order: 2 !important;
}

/* Old desktop form overrides — removed; the new DESKTOP HERO block above
   defines all the form styling. */



/* Mobile hero - title larger than description, centered */
@media screen and (max-width: 1024px) {
    .hero-container {
        text-align: center !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    
    .hero-content {
        text-align: center !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .hero-title {
        font-size: clamp(32px, 9.5vw, 46px) !important;
        line-height: 1.15 !important;
        word-wrap: break-word;
        hyphens: none;
    }
    
    .hero-description {
        font-size: 16px !important;
        line-height: 1.4 !important;
        font-weight: 100 !important;
    }
    
    .hero-eyebrow {
        font-size: 12px !important;
    }
}

/* Raise form to align with title and description */
@media screen and (min-width: 1025px) {
    .hero-form-wrapper {
        align-self: start !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
}

.mobile-nav-logo-img {
    height: auto !important;
    width: 120% !important;
    max-width: 120% !important;
}

/* Explore Services button - white with black text */
.hero-buttons .btn-secondary,
.btn-secondary {
    background: #ffffff !important;
    color: #000000 !important;
}

/* Hero background - no repeat, cover */
.hero {
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: center center !important;
}

/* Hero background image lives in its own layer so we can control overlay per-device */
.hero-bg {
    position: absolute;
    inset: 0;
    background-image: url('https://kargoza.com/wp-content/uploads/2026/10/vecteezy_a-semi-truck-driving-down-a-highway-at-sunset_69700413-scaled.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    z-index: 0;
}

/* Desktop overlay (the previous inline style on .hero-overlay) */
@media screen and (min-width: 1025px) {
    .hero-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.72) 100%);
        z-index: 1;
    }
}

/* ============================================
   MOBILE MENU PANEL (mobile-menu div in header.php)
   ============================================ */
@media (max-width: 1024px) {
    #mobile-menu {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        background-color: #000000 !important;
        z-index: 9999999 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow-y: auto !important;
        transform: translateY(-100%);
        opacity: 0;
        visibility: hidden;
        transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
    }

    #mobile-menu.active {
        transform: translateY(0) !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    #mobile-menu.closing {
        transform: translateY(-100%) !important;
        opacity: 0 !important;
    }

    .mobile-menu-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 15px 20px !important;
        flex-shrink: 0 !important;
    }

    .mobile-nav-logo-img {
        height: 55px !important;
        width: auto !important;
        filter: brightness(0) invert(1) !important;
    }

    .mobile-menu-close-btn {
        background: #ffffff !important;
        color: #000000 !important;
        border: none !important;
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        border-radius: 50% !important;
        cursor: pointer !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        flex-shrink: 0 !important;
        margin-left: auto !important;
        transition: transform 0.2s ease, background-color 0.2s ease !important;
    }

    .mobile-menu-close-btn:hover {
        background: #f0f0f0 !important;
        transform: scale(1.05) !important;
    }

    .mobile-menu-close-btn svg {
        display: block !important;
    }

    .mobile-menu-content {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        padding: 20px 0 !important;
        gap: 0 !important;
    }

    .mobile-menu-content #mobile-primary-menu {
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }

    .mobile-menu-content #mobile-primary-menu > li {
        border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
    }

    .mobile-menu-content #mobile-primary-menu > li > a {
        display: block !important;
        color: #fff !important;
        padding: 16px 0 !important;
        font-size: 18px !important;
        font-weight: 100 !important;
        text-decoration: none !important;
        text-transform: uppercase !important;
    }

    .mobile-menu-content #mobile-primary-menu > li > a:hover {
        color: #d31b2c !important;
    }

    /* Hide submenus inside mobile panel (they break the layout) */
    #mobile-menu .sub-menu {
        display: none !important;
    }

    /* Reset WP menu defaults inside panel */
    #mobile-menu ul,
    #mobile-menu li {
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #mobile-menu a {
        box-sizing: border-box !important;
    }

    .mobile-cta-btn {
        display: block !important;
        width: 100% !important;
        margin: 24px 0 0 0 !important;
        padding: 16px 24px !important;
        background-color: #d31b2c !important;
        color: #fff !important;
        text-align: center !important;
        text-decoration: none !important;
        font-weight: 100 !important;
        font-size: 16px !important;
        text-transform: uppercase !important;
        border-radius: 4px !important;
        letter-spacing: 1px !important;
    }

    #mobile-menu-overlay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: rgba(0, 0, 0, 0.6) !important;
        z-index: 9999998 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transition: opacity 0.3s ease, visibility 0.3s ease !important;
    }

    #mobile-menu-overlay.active {
        opacity: 1 !important;
        visibility: visible !important;
    }
}

/* ============================================
   QUOTE POPUP — clipping-boundary structure
   - .quote-popup        = outer modal (full viewport, overflow hidden)
   - .quote-popup-dialog = white container = CLIPPING BOUNDARY (overflow hidden)
   - .quote-popup-body   = INNER scrollable area (overflow-y: auto)
   - All content stays INSIDE the white container; nothing bleeds out.
   ============================================ */

/* ---------- OUTER MODAL ---------- */
.quote-popup {
    position: fixed !important;
    inset: 0 !important;
    z-index: 10000000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    visibility: hidden !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease, visibility 0.3s ease !important;
}

.quote-popup.active {
    visibility: visible !important;
    opacity: 1 !important;
}

.quote-popup-overlay {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(0, 0, 0, 0.75) !important;
    pointer-events: none !important;
}

/* ---------- WHITE CLIPPING BOUNDARY ---------- */
.quote-popup-dialog {
    position: relative !important;
    background: #ffffff !important;
    color: #1a1a1a !important;
    width: 100% !important;
    max-width: 720px !important;
    max-height: calc(100vh - 40px) !important;
    max-height: calc(100dvh - 40px) !important;
    border-radius: 8px !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5) !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;       /* CRITICAL: clips everything inside */
    display: flex !important;
    flex-direction: column !important;  /* stacks header + body */
    transform: translateY(20px) scale(0.98) !important;
    transition: transform 0.3s ease !important;
    /* Defensive: no children can escape */
    contain: layout paint !important;
}

.quote-popup.active .quote-popup-dialog {
    transform: translateY(0) scale(1) !important;
}

/* ---------- CLOSE BUTTON (inside the dialog, not viewport) ---------- */
.quote-popup-close {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    width: 36px !important;
    height: 36px !important;
    background: #ffffff !important;
    border: 2px solid #1a1a1a !important;
    border-radius: 50% !important;
    font-size: 22px !important;
    line-height: 1 !important;
    color: #1a1a1a !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease !important;
    z-index: 10 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

.quote-popup-close:hover {
    background: #1a1a1a !important;
    color: #ffffff !important;
    transform: rotate(90deg) !important;
}

/* ---------- HEADER (sticky inside dialog, NEVER outside) ---------- */
.quote-popup-header {
    text-align: center !important;
    margin: 0 !important;
    padding: 56px 30px 24px 30px !important;  /* top space for the close button */
    background: #ffffff !important;
    flex-shrink: 0 !important;                  /* never collapses */
    border-bottom: 1px solid #e5e7eb !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
    position: relative !important;              /* normal flow, NOT sticky (sticky can break clipping) */
    z-index: 5 !important;
}

.quote-popup-eyebrow {
    display: inline-block !important;
    color: #d31b2c !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    margin-bottom: 8px !important;
}

.quote-popup-title {
    font-family: 'Outfit', sans-serif !important;
    font-size: 28px !important;
    font-weight: 800 !important;
    color: #1a1a1a !important;
    margin: 0 0 8px 0 !important;
    line-height: 1.2 !important;
}

.quote-popup-subtitle {
    font-size: 15px !important;
    color: #6b7280 !important;
    margin: 0 !important;
    line-height: 1.5 !important;
}

/* ---------- INNER SCROLLABLE BODY (THIS is the scroll container) ---------- */
.quote-popup-body {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 20px 30px 30px 30px !important;
    box-sizing: border-box !important;
    min-height: 0 !important;                   /* required for flex children to scroll */
    position: relative !important;
}

.quote-popup-form {
    padding: 0 !important;
    margin: 0 !important;
    position: relative !important;
}

.quote-popup-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
    margin-bottom: 20px !important;
}

.quote-popup-field {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;                   /* prevent grid blowout */
}

.quote-popup-field-full {
    grid-column: 1 / -1 !important;
}

.quote-popup-field label {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #374151 !important;
    margin-bottom: 6px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.quote-popup-field input,
.quote-popup-field select,
.quote-popup-field textarea {
    width: 100% !important;
    max-width: 100% !important;                 /* never overflow grid cell */
    padding: 10px 12px !important;
    border: 1px solid #d1d5db !important;
    border-radius: 4px !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 14px !important;
    color: #1a1a1a !important;
    background: #ffffff !important;
    box-sizing: border-box !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.quote-popup-field input:focus,
.quote-popup-field select:focus,
.quote-popup-field textarea:focus {
    outline: none !important;
    border-color: #d31b2c !important;
    box-shadow: 0 0 0 3px rgba(211, 27, 44, 0.12) !important;
}

.quote-popup-field textarea {
    resize: vertical !important;
    min-height: 70px !important;
    max-height: 200px !important;
}

.quote-popup-submit {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 14px 24px !important;
    background: #d31b2c !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 4px !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    transition: background 0.2s ease, transform 0.1s ease !important;
    margin-top: 8px !important;
    box-sizing: border-box !important;
}

.quote-popup-submit:hover {
    background: #b31520 !important;
}

.quote-popup-submit:active {
    transform: scale(0.99) !important;
}

.quote-popup-disclaimer {
    text-align: center !important;
    font-size: 12px !important;
    color: #9ca3af !important;
    margin: 12px 0 0 0 !important;
    line-height: 1.4 !important;
}

.quote-popup-success {
    text-align: center !important;
    padding: 20px 10px !important;
}

.quote-popup-success-icon {
    margin-bottom: 20px !important;
    display: flex !important;
    justify-content: center !important;
}

.quote-popup-success h3 {
    font-family: 'Outfit', sans-serif !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    margin: 0 0 12px 0 !important;
    line-height: 1.3 !important;
}

.quote-popup-success p {
    font-size: 15px !important;
    color: #4b5563 !important;
    line-height: 1.6 !important;
    margin: 0 0 24px 0 !important;
    max-width: 460px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.quote-popup-success-close {
    background: #1a1a1a !important;
    color: #ffffff !important;
    border: none !important;
    padding: 12px 36px !important;
    border-radius: 4px !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    transition: background 0.2s ease !important;
}

.quote-popup-success-close:hover {
    background: #000000 !important;
}

body.modal-open {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
    top: 0 !important;
    left: 0 !important;
}

/* ---------- MOBILE: dialog = full viewport, body = only scrollable part ---------- */
@media (max-width: 768px) {
    .quote-popup {
        padding: 0 !important;
        align-items: stretch !important;
        justify-content: stretch !important;
    }

    .quote-popup-dialog {
        max-width: 100% !important;
        width: 100% !important;
        max-height: 100vh !important;
        max-height: 100dvh !important;
        height: 100vh !important;
        height: 100dvh !important;
        border-radius: 0 !important;        /* full-screen on mobile */
        transform: none !important;          /* no entry animation conflict */
    }

    .quote-popup.active .quote-popup-dialog {
        transform: none !important;
    }

    .quote-popup-header {
        padding: 50px 20px 18px 20px !important;
    }

    .quote-popup-title {
        font-size: 22px !important;
    }

    .quote-popup-subtitle {
        font-size: 14px !important;
    }

    .quote-popup-body {
        padding: 18px 20px 24px 20px !important;
    }

    .quote-popup-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }
}

/* ============================================
   DESKTOP FOOTER + PRE-FOOTER CTA
   Applies ONLY at min-width: 1025px.
   Mobile footer (default rules) remains untouched.
   ============================================ */

/* Pre-footer CTA:
   - Mobile: visible with INVERTED colors (white bg, dark text)
   - Desktop: covered by the @media (min-width: 1025px) block below */
.pre-footer-cta {
    position: relative;
    overflow: hidden;
    background: #ffffff;
    color: #1a1a1a;
}

.pre-footer-cta-bg {
    position: absolute;
    inset: 0;
    background-image: none;
    z-index: 0;
}

.pre-footer-cta-overlay {
    position: absolute;
    inset: 0;
    background: transparent;
    z-index: 1;
}

.pre-footer-cta-inner {
    position: relative;
    z-index: 2;
    max-width: 1400px;
    margin: 0 auto;
    padding: 44px 20px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.pre-footer-cta-text {
    max-width: 100%;
    text-align: center;
}

.pre-footer-cta-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: 'Outfit', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #d31b2c;
    margin-bottom: 14px;
}

.pre-footer-cta-line {
    display: inline-block;
    width: 28px;
    height: 2px;
    background: #d31b2c;
    flex-shrink: 0;
}

.pre-footer-cta-title {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(24px, 7vw, 32px);
    font-weight: 800;
    line-height: 1.15;
    color: #1a1a1a;
    margin: 0 0 14px 0;
}

.pre-footer-cta-accent {
    color: #d31b2c;
}

.pre-footer-cta-desc {
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    line-height: 1.55;
    color: #4b5563;
    margin: 0 auto;
    max-width: 420px;
}

.pre-footer-cta-action {
    display: flex;
    justify-content: center;
}

.pre-footer-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    max-width: 320px;
    height: 52px;
    padding: 0 24px;
    background: #d31b2c;
    color: #ffffff;
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.pre-footer-cta-btn:hover {
    background: #b31520;
}

.pre-footer-cta-arrow {
    display: inline-block;
    font-size: 16px;
    line-height: 1;
    transition: transform 0.2s ease;
}

.pre-footer-cta-btn:hover .pre-footer-cta-arrow {
    transform: translateX(4px);
}

@media screen and (min-width: 1025px) {

    /* ---------- PRE-FOOTER CTA (inverted: white background) ---------- */
    .pre-footer-cta {
        display: block;
        position: relative;
        overflow: hidden;
        background: #ffffff;
    }
    .pre-footer-cta-bg {
        position: absolute;
        inset: 0;
        background-image: none;
        z-index: 0;
    }
    .pre-footer-cta-overlay {
        position: absolute;
        inset: 0;
        background: transparent;
        z-index: 1;
    }
    .pre-footer-cta-inner {
        position: relative;
        z-index: 2;
        max-width: 1400px;
        margin: 0 auto;
        padding: 70px 40px;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 60px;
        align-items: center;
    }
    .pre-footer-cta-text {
        max-width: 720px;
    }
    .pre-footer-cta-eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 14px;
        font-family: 'Outfit', sans-serif;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 3px;
        text-transform: uppercase;
        color: #d31b2c;
        margin-bottom: 18px;
    }
    .pre-footer-cta-line {
        display: inline-block;
        width: 36px;
        height: 2px;
        background: #d31b2c;
        flex-shrink: 0;
    }
    .pre-footer-cta-title {
        font-family: 'Outfit', sans-serif;
        font-size: clamp(28px, 3.2vw, 44px);
        font-weight: 800;
        line-height: 1.15;
        color: #1a1a1a;
        margin: 0 0 18px 0;
    }
    .pre-footer-cta-accent {
        color: #d31b2c;
    }
    .pre-footer-cta-desc {
        font-family: 'Outfit', sans-serif;
        font-size: 16px;
        line-height: 1.6;
        color: #4b5563;
        margin: 0;
        max-width: 560px;
    }
    .pre-footer-cta-action {
        flex-shrink: 0;
    }
    .pre-footer-cta-btn {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        padding: 0 38px;
        height: 60px;
        background: #d31b2c;
        color: #ffffff;
        font-family: 'Outfit', sans-serif;
        font-size: 15px;
        font-weight: 700;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        text-decoration: none;
        border-radius: 4px;
        white-space: nowrap;
        transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    }
    .pre-footer-cta-btn:hover {
        background: #b31520;
        transform: translateY(-2px);
        box-shadow: 0 10px 24px rgba(211, 27, 44, 0.4);
    }
    .pre-footer-cta-arrow {
        display: inline-block;
        font-size: 18px;
        line-height: 1;
        transition: transform 0.2s ease;
    }
    .pre-footer-cta-btn:hover .pre-footer-cta-arrow {
        transform: translateX(4px);
    }

    /* ---------- MAIN FOOTER ---------- */
    .site-footer {
        background: #0a0a0a !important;
        color: rgba(255, 255, 255, 0.65);
        padding: 0 !important;
        margin-top: 0;
    }

    .footer-main {
        background: #0a0a0a;
    }

    .footer-inner {
        max-width: 1400px;
        margin: 0 auto;
        padding: 0 40px;
    }

    .footer-main .footer-inner {
        padding-top: 70px;
        padding-bottom: 50px;
    }

    .footer-grid {
        display: grid !important;
        grid-template-columns: 1.6fr 1fr 1fr 1fr !important;
        gap: 0 !important;
    }

    /* Subtle vertical separators between columns 2/3/4 */
    .footer-col {
        position: relative;
        padding: 0 30px;
    }
    .footer-col:not(:last-child)::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 1px;
        background: rgba(255, 255, 255, 0.08);
    }
    .footer-col:first-child {
        padding-left: 0;
    }
    .footer-col:last-child {
        padding-right: 0;
    }

    /* Column 1: Brand */
    .footer-logo-link {
        display: inline-block;
        margin-bottom: 18px;
        line-height: 0;
    }
    .footer-logo {
        height: 42px;
        width: auto;
        display: block;
        filter: brightness(0) invert(1);
    }
    .footer-about-text {
        font-family: 'Outfit', sans-serif;
        font-size: 14px;
        line-height: 1.65;
        color: rgba(255, 255, 255, 0.6);
        margin: 0 0 22px 0;
        max-width: 360px;
    }
    .footer-contact-list {
        list-style: none;
        margin: 0 0 22px 0;
        padding: 0;
    }
    .footer-contact-list li {
        margin-bottom: 10px;
        font-family: 'Outfit', sans-serif;
        font-size: 14px;
        color: rgba(255, 255, 255, 0.75);
    }
    .footer-contact-list a,
    .footer-contact-item {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        color: rgba(255, 255, 255, 0.75);
        text-decoration: none;
        transition: color 0.2s ease;
    }
    .footer-contact-list a:hover {
        color: #d31b2c;
    }
    .footer-contact-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        border-radius: 6px;
        background: rgba(211, 27, 44, 0.08);
        border: 1px solid rgba(211, 27, 44, 0.3);
        color: #d31b2c;
        flex-shrink: 0;
    }

    /* Social icons: dark square buttons with light icon */
    .footer-social {
        display: flex;
        gap: 10px;
    }
    .footer-social-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        background: #1a1a1a;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 6px;
        color: rgba(255, 255, 255, 0.7);
        text-decoration: none;
        font-size: 14px;
        transition: all 0.2s ease;
    }
    .footer-social-link:hover {
        background: #d31b2c;
        border-color: #d31b2c;
        color: #ffffff;
        transform: translateY(-2px);
    }

    /* Column headings */
    .footer-heading {
        font-family: 'Outfit', sans-serif;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: #ffffff;
        margin: 0 0 22px 0;
    }

    /* Link lists with arrow */
    .footer-links {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .footer-links li {
        margin: 0;
        padding: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }
    .footer-links li:last-child {
        border-bottom: none;
    }
    .footer-links a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 10px 0;
        font-family: 'Outfit', sans-serif;
        font-size: 14px;
        color: rgba(255, 255, 255, 0.7);
        text-decoration: none;
        transition: color 0.2s ease;
    }
    .footer-links a:hover {
        color: #d31b2c;
    }
    .footer-link-arrow {
        color: rgba(255, 255, 255, 0.3);
        font-size: 14px;
        line-height: 1;
        transition: transform 0.2s ease, color 0.2s ease;
        flex-shrink: 0;
    }
    .footer-links a:hover .footer-link-arrow {
        color: #d31b2c;
        transform: translateX(3px);
    }

    /* ---------- BOTTOM BAR ---------- */
    .footer-bottom {
        background: #0a0a0a;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        padding: 18px 0;
    }
    .footer-bottom-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 12px;
    }
    .footer-copyright {
        font-family: 'Outfit', sans-serif;
        font-size: 13px;
        color: rgba(255, 255, 255, 0.4);
        margin: 0;
    }
    .footer-bottom-links {
        display: flex;
        align-items: center;
        gap: 12px;
    }
    .footer-bottom-links a {
        font-family: 'Outfit', sans-serif;
        font-size: 13px;
        color: rgba(255, 255, 255, 0.55);
        text-decoration: none;
        transition: color 0.2s ease;
    }
    .footer-bottom-links a:hover {
        color: #d31b2c;
    }
    .footer-bottom-sep {
        color: rgba(255, 255, 255, 0.2);
        font-size: 12px;
    }

    /* Responsive tweaks at narrower desktop widths */
    @media screen and (max-width: 1365px) {
        .footer-grid {
            grid-template-columns: 1.4fr 1fr 1fr 1fr !important;
        }
        .footer-col {
            padding: 0 22px;
        }
    }
}

/* ============================================
   MOBILE FOOTER (max-width: 1024px)
   - Stacks columns vertically
   - Accordion behavior for Services / Industries / Company
   - Compact, touch-friendly spacing
   ============================================ */
@media screen and (max-width: 1024px) {

    /* ---- Main footer container ---- */
    .site-footer {
        background: #0a0a0a !important;
        color: rgba(255, 255, 255, 0.7);
        padding: 0 !important;
    }
    .footer-main {
        background: #0a0a0a;
    }
    .footer-inner {
        max-width: 100%;
        margin: 0 auto;
        padding: 0 20px;
    }
    .footer-main .footer-inner {
        padding-top: 40px;
        padding-bottom: 28px;
    }

    /* Footer grid: stack columns vertically */
    .footer-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
    }

    /* Remove desktop vertical separators */
    .footer-col:not(:last-child)::after {
        display: none !important;
    }

    /* ---- Brand column ---- */
    .footer-col {
        padding: 0 !important;
    }
    .footer-col-brand {
        text-align: center;
        padding-bottom: 28px !important;
        margin-bottom: 8px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }
    .footer-logo-link {
        display: inline-block;
        margin-bottom: 14px;
    }
    .footer-logo {
        height: 38px;
        width: auto;
        display: block;
        filter: brightness(0) invert(1);
    }
    .footer-about-text {
        font-family: 'Outfit', sans-serif;
        font-size: 13px;
        line-height: 1.6;
        color: rgba(255, 255, 255, 0.6);
        margin: 0 auto 18px auto;
        max-width: 360px;
    }
    .footer-contact-list {
        list-style: none;
        margin: 0 auto 0 auto;
        padding: 0;
        max-width: 320px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
    .footer-contact-list li {
        margin: 0;
        font-family: 'Outfit', sans-serif;
        font-size: 14px;
        width: 100%;
        max-width: 280px;
    }
    .footer-contact-list a,
    .footer-contact-item {
        display: grid;
        grid-template-columns: 50px 1fr;
        column-gap: 12px;
        align-items: center;
        color: rgba(255, 255, 255, 0.8);
        text-decoration: none;
        padding: 0;
        min-width: 0;
    }
    .footer-contact-list a > span:last-child,
    .footer-contact-item > span:last-child {
        min-width: 0;
        overflow-wrap: anywhere;
        line-height: 1.35;
    }
    .footer-contact-list a:hover {
        color: #d31b2c;
    }
    .footer-contact-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 50px;
        height: 50px;
        border-radius: 10px;
        background: rgba(131, 16, 26, 0.22);
        border: 1px solid rgba(211, 27, 44, 0.28);
        color: #d31b2c;
        flex-shrink: 0;
    }
    .footer-contact-icon svg {
        display: block;
        width: 18px;
        height: 18px;
    }
    .footer-social {
        display: flex !important;
        justify-content: center;
        align-items: center;
        gap: 8px;
        margin-top: 14px;
        padding-top: 16px;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        max-width: 280px;
        margin-left: auto;
        margin-right: auto;
    }
    .footer-social-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 46px;
        height: 46px;
        background: #141414;
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 10px;
        color: rgba(255, 255, 255, 0.78);
        text-decoration: none;
        font-size: 15px;
        flex-shrink: 0;
        transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
    }
    .footer-social-link:hover,
    .footer-social-link:focus-visible {
        background: #d31b2c;
        border-color: #d31b2c;
        color: #ffffff;
        transform: translateY(-1px);
        outline: none;
    }
    .footer-social-link:active {
        background: #b31520;
        border-color: #b31520;
        color: #ffffff;
        transform: translateY(0);
    }

    /* ---- Accordion nav columns ---- */
    .footer-col[aria-label="Services"],
    .footer-col[aria-label="Industries"],
    .footer-col[aria-label="Company"] {
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }
    .footer-accordion-trigger {
        margin: 0 !important;
    }
    .footer-accordion-btn {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 16px 0;
        background: transparent;
        border: none;
        font-family: 'Outfit', sans-serif;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: #ffffff;
        cursor: pointer;
        text-align: left;
    }
    .footer-accordion-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        color: rgba(255, 255, 255, 0.6);
        transition: transform 0.25s ease, color 0.25s ease;
    }
    .footer-col.is-open .footer-accordion-icon {
        transform: rotate(180deg);
        color: #d31b2c;
    }
    .footer-accordion-panel {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
    }
    .footer-col.is-open .footer-accordion-panel {
        max-height: 500px;
    }
    .footer-accordion-panel li {
        border: none !important;
    }
    .footer-accordion-panel a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 11px 0;
        font-size: 14px;
        color: rgba(255, 255, 255, 0.7);
        text-decoration: none;
    }
    .footer-accordion-panel a:hover {
        color: #d31b2c;
    }
    .footer-accordion-panel .footer-link-arrow {
        color: rgba(255, 255, 255, 0.35);
        font-size: 14px;
        transition: transform 0.2s ease, color 0.2s ease;
    }
    .footer-accordion-panel a:hover .footer-link-arrow {
        color: #d31b2c;
        transform: translateX(3px);
    }

    /* ---- Bottom bar ---- */
    .footer-bottom {
        background: #0a0a0a;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        padding: 18px 0;
    }
    .footer-bottom-inner {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        text-align: center;
    }
    .footer-copyright {
        font-family: 'Outfit', sans-serif;
        font-size: 12px;
        color: rgba(255, 255, 255, 0.4);
        margin: 0;
        line-height: 1.5;
    }
    .footer-bottom-links {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
    }
    .footer-bottom-links a {
        font-family: 'Outfit', sans-serif;
        font-size: 12px;
        color: rgba(255, 255, 255, 0.6);
        text-decoration: none;
    }
    .footer-bottom-links a:hover {
        color: #d31b2c;
    }
    .footer-bottom-sep {
        color: rgba(255, 255, 255, 0.25);
        font-size: 11px;
    }

    /* ---- Small viewports (320-360): keep contact+social inside the viewport ---- */
    @media screen and (max-width: 380px) {
        .footer-main .footer-inner {
            padding-top: 32px;
            padding-bottom: 22px;
        }
        .footer-inner {
            padding: 0 18px;
        }
        .footer-col-brand {
            padding-bottom: 22px !important;
            margin-bottom: 6px !important;
        }
        .footer-contact-list {
            max-width: 100%;
            gap: 8px;
        }
        .footer-contact-list li {
            max-width: 100%;
            font-size: 13px;
        }
        .footer-contact-list a,
        .footer-contact-item {
            grid-template-columns: 46px 1fr;
            column-gap: 10px;
        }
        .footer-contact-icon {
            width: 46px;
            height: 46px;
            border-radius: 9px;
        }
        .footer-contact-icon svg {
            width: 16px;
            height: 16px;
        }
        .footer-social {
            gap: 6px;
            max-width: 100%;
            margin-top: 12px;
            padding-top: 14px;
        }
        .footer-social-link {
            width: 44px;
            height: 44px;
            border-radius: 9px;
            font-size: 14px;
        }
    }
}

/* ============================================
   MOBILE HERO (max-width: 1024px)
   - Compact, image-forward, mobile-first
   - Desktop rules above (within @media min-width: 1025px) are NOT touched
   ============================================ */
@media screen and (max-width: 1024px) {

    /* ---- Section container ---- */
    .hero {
        position: relative;
        background-color: #000000;
        background-image: none !important; /* The image is set on the .hero-bg layer instead */
        padding: 0 !important;
        min-height: 0 !important;
        text-align: center;
        overflow: hidden;
    }

    /* Dedicated background layer so we can control overlay independently */
    .hero-bg {
        position: absolute;
        inset: 0;
        background-image: url('https://kargoza.com/wp-content/uploads/2026/10/vecteezy_a-semi-truck-driving-down-a-highway-at-sunset_69700413-scaled.jpg');
        background-size: cover;
        background-position: center 25%;
        background-repeat: no-repeat;
        z-index: 0;
    }
    .hero-overlay {
        /* Gradient: keep upper area visible, fade to black near the bottom
           where the text sits. This lets the truck/highway show through. */
        background: linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.35) 0%,
            rgba(0, 0, 0, 0.45) 35%,
            rgba(0, 0, 0, 0.75) 65%,
            rgba(0, 0, 0, 0.92) 100%
        ) !important;
        z-index: 1;
    }

    .hero-container {
        padding: 0 20px !important;
    }
    .hero-grid {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 0 !important;
        width: 100% !important;
    }

    /* Hide the desktop form on mobile */
    .hero-form-wrapper {
        display: none !important;
    }

    .hero-content {
        position: relative;
        z-index: 2;
        text-align: center;
        width: 100% !important;
        max-width: 480px !important;
        margin: 0 auto !important;
        padding: 90px 0 36px 0 !important;
        color: #ffffff;
    }

    /* Reset benefit list (no bullets) */
    .hero-benefits,
    .hero-trust {
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .hero-benefits li,
    .hero-trust li {
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* ---- Eyebrow ---- */
    .hero-eyebrow {
        display: inline-flex !important;
        align-items: center;
        gap: 10px;
        font-family: 'Outfit', sans-serif;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 2.5px;
        text-transform: uppercase;
        color: #d31b2c;
        margin-bottom: 14px !important;
    }
    .hero-eyebrow-line {
        display: inline-block;
        width: 22px;
        height: 2px;
        background: #d31b2c;
        flex-shrink: 0;
    }

    /* ---- Headline ---- */
    .hero-title {
        font-family: 'Outfit', sans-serif !important;
        font-size: clamp(34px, 9vw, 46px) !important;
        font-weight: 800 !important;
        line-height: 1.05 !important;
        color: #ffffff !important;
        margin: 0 0 16px 0 !important;
    }
    .hero-title br {
        display: block !important;
    }
    .hero-title-accent {
        color: #d31b2c;
    }

    /* ---- Description ---- */
    .hero-description {
        font-family: 'Outfit', sans-serif !important;
        font-size: 14px !important;
        line-height: 1.55 !important;
        font-weight: 400 !important;
        color: rgba(255, 255, 255, 0.82) !important;
        margin: 0 auto 22px auto !important;
        max-width: 380px !important;
    }

    /* ---- Benefits: 3-column horizontal ---- */
    .hero-benefits {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
        align-items: start !important;
        margin: 0 0 24px 0 !important;
    }
    .hero-benefit {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 6px !important;
        padding: 0 !important;
        border: none !important;
        text-align: center;
    }
    .hero-benefit-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        border-radius: 8px;
        color: #d31b2c;
        background: rgba(211, 27, 44, 0.12);
        border: 1px solid rgba(211, 27, 44, 0.3);
        flex-shrink: 0;
    }
    .hero-benefit-icon svg {
        display: block;
    }
    .hero-benefit-text {
        display: flex;
        flex-direction: column;
        line-height: 1.15;
        align-items: center;
    }
    .hero-benefit-text strong {
        font-family: 'Outfit', sans-serif;
        font-size: 11px;
        font-weight: 700;
        color: #ffffff;
        letter-spacing: 0.2px;
        text-transform: uppercase;
    }
    .hero-benefit-text small {
        font-family: 'Outfit', sans-serif;
        font-size: 10px;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.65);
        margin-top: 1px;
    }

    /* ---- Buttons: stacked, full-width ---- */
    .hero-buttons {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        width: 100% !important;
        max-width: 360px !important;
        margin: 0 auto !important;
    }
    .hero-btn-primary,
    .hero-btn-secondary {
        width: 100% !important;
        height: 50px !important;
        padding: 0 18px !important;
        font-size: 13px !important;
        letter-spacing: 1.2px !important;
    }
    .hero-btn-primary {
        order: 1;
    }
    .hero-btn-secondary {
        order: 2;
    }
    .hero-btn-arrow {
        font-size: 15px;
    }

    /* ---- Trust row: 3-column compact ---- */
    .hero-trust {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
        margin: 22px auto 0 auto !important;
        max-width: 360px !important;
    }
    .hero-trust-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 4px !important;
        padding: 0 !important;
        text-align: center;
    }
    .hero-trust-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 26px;
        height: 26px;
        border-radius: 50%;
        background: rgba(211, 27, 44, 0.12);
        border: 1px solid rgba(211, 27, 44, 0.3);
        color: #d31b2c;
    }
    .hero-trust-icon svg {
        display: block;
    }
    .hero-trust-text {
        display: flex;
        flex-direction: column;
        line-height: 1.15;
        align-items: center;
    }
    .hero-trust-text strong {
        font-family: 'Outfit', sans-serif;
        font-size: 10px;
        font-weight: 700;
        color: #ffffff;
        text-transform: uppercase;
        letter-spacing: 0.3px;
    }
    .hero-trust-text small {
        font-family: 'Outfit', sans-serif;
        font-size: 9px;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.6);
        margin-top: 1px;
    }

    /* ---- Compact at very small viewports (360-375) ---- */
    @media screen and (max-width: 380px) {
        .hero-content {
            padding: 76px 0 32px 0 !important;
        }
        .hero-title {
            font-size: clamp(30px, 8.5vw, 38px) !important;
        }
        .hero-description {
            font-size: 13px !important;
        }
        .hero-benefit-icon {
            width: 30px;
            height: 30px;
        }
        .hero-benefit-text strong {
            font-size: 10px;
        }
        .hero-benefit-text small {
            font-size: 9px;
        }
        .hero-trust-icon {
            width: 22px;
            height: 22px;
        }
        .hero-trust-text strong {
            font-size: 9px;
        }
        .hero-trust-text small {
            font-size: 8px;
        }
        .hero-btn-primary,
        .hero-btn-secondary {
            height: 46px !important;
            font-size: 12px !important;
        }
    }
}

/* ---- 2026-10-24: desktop fixes (>=1025px) ----
   Footer column headings are <button> (mobile accordion). On desktop they
   rendered with browser-default button chrome; style them as plain headings. */
@media screen and (min-width: 1025px) {
    .footer-accordion-btn {
        display: flex;
        align-items: center;
        width: 100%;
        padding: 0;
        margin: 0;
        background: transparent;
        border: 0;
        border-radius: 0;
        font: inherit;
        font-size: inherit;
        font-weight: inherit;
        letter-spacing: inherit;
        text-transform: inherit;
        color: inherit;
        text-align: left;
        cursor: default;
        pointer-events: none;
    }
    .footer-accordion-btn .footer-accordion-icon { display: none; }
    .pre-footer-cta-text { text-align: left; }
}