/*
Theme Name: Kargoza Logistics
Theme URI: https://kargoza.com
Author: Kargoza
Author URI: https://kargoza.com
Description: Custom theme for Kargoza Logistics
Version: 7.0
License: GNU General Public License v2 or later
Text Domain: kargoza
*/

/* CSS Variables */
:root {
    --color-red: #d31b2c;
    --color-red-dark: #b31525;
    --color-red-light: #e83545;
    --color-black: #000000;
    --color-charcoal: #1a1a1a;
    --color-gray-900: #111111;
    --color-gray-800: #1f1f1f;
    --color-gray-700: #2d2d2d;
    --color-gray-600: #404040;
    --color-gray-500: #6b6b6b;
    --color-gray-400: #9ca3af;
    --color-gray-300: #d1d5db;
    --color-gray-200: #e5e7eb;
    --color-gray-100: #f3f4f6;
    --color-gray-50: #f9fafb;
    --color-white: #ffffff;
    
    --font-sans: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-display: 'Outfit', sans-serif;
    
    --header-height: 80px;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-24: 6rem;
    
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.1);
    --shadow-lg: 0 10px 15px rgba(0,0,0,0.1);
    --shadow-xl: 0 20px 25px rgba(0,0,0,0.15);
    
    --transition-base: all 0.3s ease;
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-gray-800);
    background-color: var(--color-white);
    overflow-x: hidden;
}

a {
    color: var(--color-red);
    text-decoration: none;
    transition: var(--transition-base);
}

a:hover {
    color: var(--color-red-dark);
}

img {
    max-width: 100%;
    height: auto;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-black);
    letter-spacing: -0.02em;
}

h1 { font-size: clamp(2.5rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.75rem); }

p {
    margin-bottom: 1rem;
}

/* Container */
.container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 var(--space-4);
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    border-radius: 6px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: var(--transition-base);
}

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

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

.btn-secondary {
    background-color: transparent;
    color: var(--color-white);
    border-color: var(--color-white);
}

.btn-secondary:hover {
    background-color: var(--color-white);
    color: var(--color-black);
}

/* Header */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--header-height);
    background-color: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    z-index: 1000;
    border-bottom: 1px solid var(--color-gray-200);
    transition: all var(--transition-base);
}

.site-header.scrolled {
    background-color: var(--color-white);
    box-shadow: var(--shadow-lg);
}

.header-inner {
    display: block;
    align-items: center;
    justify-content: space-between;
    height: 100%;
}

.site-logo a {
    display: block;
}

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

/* Navigation */
.main-navigation {
    display: block;
    align-items: center;
}

.nav-menu {
    display: block;
    list-style: none;
    gap: 2rem;
}

.nav-menu a {
    color: var(--color-gray-800);
    font-weight: 500;
    font-size: 0.95rem;
}

.nav-menu a:hover {
    color: var(--color-red);
}

.header-cta {
    margin-left: 1.5rem;
}

/* Mobile Menu Toggle */
.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-around;
    width: 30px;
    height: 24px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1001;
}

.mobile-menu-toggle span {
    width: 100%;
    height: 2px;
    background-color: var(--color-gray-800);
    transition: var(--transition-base);
}

@media (max-width: 768px) {
    .nav-menu,
    .header-cta {
        display: none;
    }

    .site-header {
        background-color: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border-bottom: none !important;
        box-shadow: none !important;
    }
    .site-header .header-logo {
        filter: brightness(0) invert(1);
    }

    .mobile-menu-toggle {
        display: block;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }
    .mobile-menu-toggle span {
        background-color: #ffffff !important;
    }

    /* Scrolled: header blanco, botón negro */
    .site-header.scrolled {
        background-color: #ffffff !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border-bottom: 1px solid var(--color-gray-200) !important;
        box-shadow: var(--shadow-lg) !important;
    }
    .site-header.scrolled .header-logo {
        filter: none !important;
    }
    .site-header.scrolled .mobile-menu-toggle span {
        background-color: #000000 !important;
    }

    .hero,
    .hero-dark {
        background-color: #000000 !important;
        min-height: 100dvh !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        background-image: none !important;
    }
    /* Truck image visible behind content with smart gradient overlay.
       Top stays dark for header/text contrast; bottom keeps the truck readable. */
    .hero-bg {
        display: block !important;
        background-image: url('https://kargoza.com/wp-content/uploads/2026/10/vecteezy_a-semi-truck-driving-down-a-highway-at-sunset_69700413-scaled.jpg') !important;
        background-size: cover !important;
        background-position: center 35% !important;
        background-repeat: no-repeat !important;
        opacity: 0.30 !important;
        filter: brightness(0.45) contrast(1.05) saturate(0.85) !important;
    }
    .hero-overlay {
        display: block !important;
        background:
            linear-gradient(180deg,
                rgba(0,0,0,0.92) 0%,
                rgba(0,0,0,0.82) 35%,
                rgba(0,0,0,0.72) 65%,
                rgba(0,0,0,0.85) 100%) !important;
        z-index: 1 !important;
    }

    /* Stack order in mobile:
       1 eyebrow · 2 title · 3 description · 4 buttons · 5 indicators */
    .hero-content {
        text-align: center !important;
        margin: 0 auto !important;
        padding: 96px 20px 32px 20px !important;
        max-width: 480px !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 0 !important;
        position: relative;
        z-index: 2;
    }

    /* Reorder children so the layout reads:
       eyebrow → h1 → description → buttons → indicators */
    .hero-eyebrow     { order: 1 !important; margin: 0 0 14px 0 !important; }
    .hero-title       { order: 2 !important; margin: 0 0 24px 0 !important; }
    .hero-description { order: 3 !important; margin: 0 0 26px 0 !important; }
    .hero-buttons     { order: 4 !important; margin: 0 0 32px 0 !important; }
    .hero-benefits    { order: 5 !important; display: none !important; }
    .hero-trust       { order: 6 !important; display: none !important; }
    .hero-indicators  { order: 7 !important; }

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

    /* H1: fluid 32-46px, tight line-height, strong weight */
    .hero-title {
        font-family: 'Outfit', sans-serif !important;
        font-size: clamp(32px, 11vw, 46px) !important;
        font-weight: 800 !important;
        line-height: 1.02 !important;
        color: #ffffff !important;
        letter-spacing: -0.5px !important;
        max-width: 100% !important;
    }

    /* Description */
    .hero-description {
        font-family: 'Outfit', sans-serif !important;
        font-size: clamp(15px, 4.2vw, 17px) !important;
        line-height: 1.55 !important;
        font-weight: 300 !important;
        color: rgba(255,255,255,0.78) !important;
        max-width: 360px !important;
    }

    /* CTA buttons: 2-column grid, equal height/width, collapses at <360px */
    .hero-buttons {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
        width: 100% !important;
        max-width: 380px !important;
        align-items: stretch !important;
    }
    .hero-btn-primary,
    .hero-btn-secondary {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 56px !important;
        padding: 0 12px !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        letter-spacing: 1px !important;
        text-transform: uppercase !important;
        border-radius: 9px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        text-align: center !important;
        white-space: nowrap !important;
    }
    /* GET A QUOTE — red bg, white text */
    .hero-btn-primary {
        background: #d31b2c !important;
        color: #ffffff !important;
        border: 2px solid #d31b2c !important;
    }
    /* EXPLORE SERVICES — white bg, black text */
    .hero-btn-secondary {
        background: #ffffff !important;
        color: #000000 !important;
        border: 2px solid #ffffff !important;
    }
    /* On very narrow phones, allow buttons to stack */
    @media (max-width: 359px) {
        .hero-buttons {
            grid-template-columns: 1fr !important;
            max-width: 280px !important;
        }
    }

    /* Unified 3x2 trust indicators grid */
    .hero-indicators {
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 14px 10px !important;
        justify-items: center !important;
    }
    .hero-indicator {
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 4px !important;
        min-width: 0 !important;
    }
    .hero-indicator-icon {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 32px !important;
        height: 32px !important;
        border-radius: 8px !important;
        color: #d31b2c !important;
        background: rgba(211, 27, 44, 0.12) !important;
        border: 1px solid rgba(211, 27, 44, 0.35) !important;
        flex-shrink: 0 !important;
    }
    .hero-indicator-text {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        line-height: 1.15 !important;
        max-width: 100% !important;
    }
    .hero-indicator-text strong {
        font-family: 'Outfit', sans-serif !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        color: #ffffff !important;
        letter-spacing: 0.2px !important;
    }
    .hero-indicator-text small {
        font-family: 'Outfit', sans-serif !important;
        font-size: 10px !important;
        font-weight: 400 !important;
        color: rgba(255,255,255,0.62) !important;
        margin-top: 1px !important;
    }

    /* Tighter indicator typography for very narrow screens */
    @media (max-width: 359px) {
        .hero-indicator-text strong { font-size: 11px !important; }
        .hero-indicator-text small { font-size: 9px !important; }
        .hero-indicator-icon { width: 28px !important; height: 28px !important; }
    }

    /* ============================================
       OUR SERVICES — mobile horizontal card layout
       Replaces the desktop 3-col grid with a stack
       of compact horizontal cards (icon | text | image)
       with a diagonal cut between content and image.
       ============================================ */
    .kargoza-services {
        padding: 56px 0 !important;
    }
    .kargoza-services-container {
        padding: 0 16px !important;
    }
    .kargoza-services-header {
        margin-bottom: 28px !important;
    }
    .kargoza-services-eyebrow {
        font-size: 11px !important;
        letter-spacing: 2px !important;
        gap: 10px !important;
        margin-bottom: 14px !important;
    }
    .kargoza-services-eyebrow-line {
        width: 24px !important;
    }
    .kargoza-services-title {
        font-size: clamp(24px, 7vw, 32px) !important;
        line-height: 1.12 !important;
        margin: 0 0 12px 0 !important;
    }
    .kargoza-services-lead {
        font-size: 14px !important;
        line-height: 1.55 !important;
        max-width: 340px !important;
    }

    .kargoza-services-list {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: none !important;
        gap: 14px !important;
    }
    .kargoza-service-card {
        opacity: 0;
        transform: translateY(12px);
        transition: opacity 0.5s ease, transform 0.5s ease;
    }
    .kargoza-service-card.is-visible {
        opacity: 1;
        transform: translateY(0);
    }
    .kargoza-service-link {
        display: grid !important;
        grid-template-columns: 1fr 38% !important;
        align-items: stretch !important;
        border-radius: 14px !important;
        min-height: 110px !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
    }
    .kargoza-service-content {
        position: relative;
        z-index: 2;
        padding: 12px 12px 12px 14px !important;
        gap: 5px !important;
        justify-content: space-between;
        /* Diagonal clip on right side so image shows through cleanly */
        clip-path: polygon(0 0, 100% 0, calc(100% - 20px) 100%, 0 100%);
    }
    .kargoza-service-icon {
        width: 30px !important;
        height: 30px !important;
        border-radius: 8px !important;
    }
    .kargoza-service-icon svg {
        width: 15px !important;
        height: 15px !important;
    }
    .kargoza-service-category {
        font-size: 9px !important;
        letter-spacing: 0.8px !important;
        margin-bottom: 0 !important;
    }
    .kargoza-service-title {
        font-size: 15px !important;
        line-height: 1.15 !important;
        margin: 0 0 2px 0 !important;
    }
    .kargoza-service-desc {
        font-size: 11.5px !important;
        line-height: 1.4 !important;
        /* No line-clamp: let the description use the available column
           without artificial "..." truncation. The card height is
           governed by the taller of content / media (min-height:110px),
           so descriptions up to ~4 lines at 11.5px fit without growing
           the card drastically. */
        display: block !important;
        -webkit-line-clamp: unset !important;
        -webkit-box-orient: horizontal !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }
    .kargoza-service-cta {
        width: 26px !important;
        height: 26px !important;
        margin-top: 0 !important;
    }
    .kargoza-service-cta svg {
        width: 11px !important;
        height: 11px !important;
    }
    .kargoza-service-media {
        position: relative;
        z-index: 1;
        aspect-ratio: auto !important;
        height: 100% !important;
        min-height: 110px !important;
        /* Diagonal accent stripe between content and image */
        clip-path: polygon(20px 0, 100% 0, 100% 100%, 0 100%);
        background: #FFF3F4;
        /* Overflow + position context so the absolutely-positioned img
           below gets clipped to this panel. */
        overflow: hidden !important;
    }
    .kargoza-service-media img {
        /* The mobile illustration block further down positions this
           img absolutely and sizes it via --svc-scale. Here we just
           make sure no clip-path leaks from desktop — absolute child
           is clipped by the parent's overflow:hidden. */
        clip-path: none !important;
    }
    /* Red diagonal accent line */
    .kargoza-service-media::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 3px;
        height: 100%;
        background: #d31b2c;
        z-index: 3;
        transform: translateX(18px) skewX(-18deg);
        transform-origin: top left;
    }
    .kargoza-service-media::after {
        /* Override desktop diagonal: hide it on mobile, we use ::before now */
        display: none !important;
    }

    /* Extra-tight layout for very narrow phones */
    @media (max-width: 359px) {
        .kargoza-service-link {
            grid-template-columns: 1fr 40% !important;
            min-height: 104px !important;
        }
        .kargoza-service-content {
            padding: 10px 10px 10px 12px !important;
            clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 100%, 0 100%) !important;
        }
        .kargoza-service-title { font-size: 14px !important; }
        .kargoza-service-desc { font-size: 11px !important; }
        .kargoza-service-media { min-height: 104px !important; }
        .kargoza-service-media { clip-path: polygon(16px 0, 100% 0, 100% 100%, 0 100%) !important; }
    }

    /* ============================================
       MOBILE-ONLY: Kargoza illustrations inside cards
       Replace photo backgrounds with #FFF3F4 and
       render new illustrations contain-fit, no crop.
       ============================================ */
    .kargoza-service-media {
        background: #FFF3F4 !important;
        display: block !important;            /* position:absolute img is positioned relative to this */
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;               /* kill padding — the ink is now centered, no need for inner gutter */
        overflow: hidden !important;
        position: relative !important;
        z-index: 1 !important;
    }
    .kargoza-service-media img {
        /* The 900x600 PNGs have massive internal transparent padding:
           ink bbox is only ~22-32% of the PNG width (verified via PHP
           alpha+white threshold scan). To make the visible illustration
           fill ~75% of the pink panel we render the <img> far larger
           than the panel — the panel's overflow:hidden + clip-path
           crops the surrounding transparent area, the illustration itself
           is never cut. Each card overrides --svc-scale inline (see
           front-page.php) so LTL (smaller ink bbox) scales more than
           the trucks — same VISUAL weight, not the same % number. */
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        width: var(--svc-scale, 280%) !important;
        height: auto !important;
        max-width: none !important;
        max-height: none !important;
        transform: translate(-50%, -50%) !important;
        object-fit: contain !important;
        object-position: center !important;
        aspect-ratio: auto !important;
        transition: none !important;
    }
    .kargoza-service-link:hover .kargoza-service-media img {
        transform: none !important;
    }

    @media (prefers-reduced-motion: reduce) {
        .kargoza-service-card,
        .kargoza-service-link,
        .kargoza-service-media img,
        .kargoza-service-cta {
            transition: none !important;
            animation: none !important;
        }
        .kargoza-service-card {
            opacity: 1 !important;
            transform: none !important;
        }
    }

    /* ============================================
       CTA SECTION "Ready to Ship?" — mobile redesign
       Replaces the blue/dark gradient with a Kargoza-red
       premium CTA. Compact, left-aligned, two-button grid.
       Desktop is untouched (inline styles still apply).
       ============================================ */
    .kargoza-cta {
        /* Override the inline blue/80px desktop styles on mobile */
        background:
            radial-gradient(ellipse at 90% 50%, rgba(255,255,255,0.06) 0%, transparent 55%),
            linear-gradient(120deg, #8a0d18 0%, #b31520 45%, #d31b2c 75%, #e32437 100%) !important;
        padding: 60px 0 !important;
        position: relative;
        overflow: hidden;
        isolation: isolate;
    }
    /* Subtle diagonal lines + truck silhouette texture in the background.
       Two stacked SVGs inlined as data URI so no extra HTTP request. */
    .kargoza-cta-bg {
        position: absolute;
        inset: 0;
        z-index: -1;
        background-image:
            /* Soft white diagonal stripes for movement feel */
            repeating-linear-gradient(
                135deg,
                rgba(255,255,255,0.035) 0px,
                rgba(255,255,255,0.035) 1px,
                transparent 1px,
                transparent 14px
            ),
            /* Faded truck silhouette (data URI SVG, monochrome red-tinted) */
            url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 280' fill='%23ffffff' fill-opacity='0.05'><path d='M30 200h90v40h-90zm100-30h230v70h-230zm240 0h40v70h-40zm50 0h60l30 25v45h-90zm-310 5a18 18 0 1 1 0 36 18 18 0 0 1 0-36zm180 0a18 18 0 1 1 0 36 18 18 0 0 1 0-36zm150 0a18 18 0 1 1 0 36 18 18 0 0 1 0-36z'/><path d='M120 180h200v20h-200z' fill='%23ffffff' fill-opacity='0.04'/></svg>");
        background-repeat: repeat, no-repeat;
        background-size: auto, 90% auto;
        background-position: 0 0, right 20% center;
        opacity: 0.85;
        pointer-events: none;
    }
    .kargoza-cta-container {
        text-align: left !important;
        padding: 0 20px !important;
        max-width: 480px;
        margin: 0 auto;
    }
    .kargoza-cta-rule {
        display: block;
        width: 48px;
        height: 3px;
        background: #ffffff;
        border-radius: 2px;
        margin: 0 0 18px 0;
    }
    .kargoza-cta-title {
        font-family: 'Outfit', sans-serif !important;
        font-size: clamp(32px, 8.5vw, 42px) !important;
        font-weight: 800 !important;
        line-height: 1.05 !important;
        color: #ffffff !important;
        margin: 0 0 12px 0 !important;
        letter-spacing: -0.5px;
        text-align: left;
    }
    .kargoza-cta-subtitle {
        font-family: 'Outfit', sans-serif !important;
        font-size: clamp(15px, 4vw, 18px) !important;
        font-weight: 400 !important;
        line-height: 1.5 !important;
        color: rgba(255,255,255,0.85) !important;
        margin: 0 0 26px 0 !important;
        text-align: left;
    }
    .kargoza-cta-buttons {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
        justify-content: stretch !important;
        flex-wrap: nowrap !important;
        margin: 0 !important;
    }
    .kargoza-cta-btn {
        /* Reset desktop inline styles (red bg, big padding, inline-block) */
        background: #ffffff !important;
        color: #000000 !important;
        border: 2px solid #ffffff !important;
        padding: 0 14px !important;
        margin: 0 !important;
        border-radius: 9px !important;
        text-decoration: none !important;
        font-family: 'Outfit', sans-serif !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        letter-spacing: 0.8px !important;
        text-transform: uppercase !important;
        height: 58px !important;
        min-width: 0 !important;
        max-width: none !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        text-align: center !important;
        white-space: nowrap !important;
        transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
        cursor: pointer;
        box-shadow: 0 6px 18px rgba(0,0,0,0.15);
    }
    /* Primary: white bg, black text, red arrow */
    .kargoza-cta-btn-primary {
        background: #ffffff !important;
        color: #000000 !important;
        border: 2px solid #ffffff !important;
    }
    .kargoza-cta-arrow {
        display: inline-flex;
        align-items: center;
        color: #d31b2c;
        transition: transform 0.2s ease;
    }
    .kargoza-cta-btn-primary:hover,
    .kargoza-cta-btn-primary:active {
        background: #f5f5f5 !important;
        transform: translateY(-1px);
    }
    .kargoza-cta-btn-primary:hover .kargoza-cta-arrow,
    .kargoza-cta-btn-primary:active .kargoza-cta-arrow {
        transform: translateX(3px);
    }
    /* Secondary: transparent bg, white border + text, white phone */
    .kargoza-cta-btn-secondary {
        background: transparent !important;
        color: #ffffff !important;
        border: 2px solid #ffffff !important;
    }
    .kargoza-cta-phone {
        display: inline-flex;
        align-items: center;
        color: #ffffff;
    }
    .kargoza-cta-btn-secondary:hover,
    .kargoza-cta-btn-secondary:active {
        background: rgba(255,255,255,0.12) !important;
    }

    /* Extremely narrow phones: stack the buttons */
    @media (max-width: 339px) {
        .kargoza-cta-buttons {
            grid-template-columns: 1fr !important;
        }
    }

    /* Compact even more on very small screens */
    @media (max-width: 359px) {
        .kargoza-cta { padding: 50px 0 !important; }
        .kargoza-cta-title { font-size: clamp(28px, 9vw, 36px) !important; }
        .kargoza-cta-subtitle { font-size: 14px !important; margin-bottom: 22px !important; }
        .kargoza-cta-btn { height: 52px !important; font-size: 12px !important; padding: 0 10px !important; }
    }

    @media (prefers-reduced-motion: reduce) {
        .kargoza-cta-btn,
        .kargoza-cta-arrow {
            transition: none !important;
        }
        .kargoza-cta-btn:hover,
        .kargoza-cta-btn:active {
            transform: none !important;
        }
        .kargoza-cta-btn:hover .kargoza-cta-arrow,
        .kargoza-cta-btn:active .kargoza-cta-arrow {
            transform: none !important;
        }
    }

    /* ============================================
       WHY KARGOZA — mobile vertical timeline layout
       Replaces the desktop 4-col grid with a stacked
       list of horizontal cards, each anchored to a
       vertical red rail with a numbered marker on the
       left.  Cards: [ICON | TEXT] [IMAGE w/ arrow].
       Layout: 62-68% content, 32-38% image.
       ============================================ */
    .kargoza-why {
        background: #f5f7fa !important;
        padding: 48px 0 56px !important;
        position: relative;
        overflow: hidden;
    }
    /* Subtle dot-pattern world map texture behind the header */
    .kargoza-why::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 200px;
        background-image:
            radial-gradient(circle, rgba(211,27,44,0.10) 1px, transparent 1.4px);
        background-size: 14px 14px;
        background-position: 0 0;
        opacity: 0.55;
        pointer-events: none;
        mask-image: linear-gradient(180deg, #000 0%, #000 50%, transparent 100%);
        -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 50%, transparent 100%);
    }
    .kargoza-why-container {
        max-width: 520px;
        margin: 0 auto;
        padding: 0 16px 0 20px !important;
        position: relative;
        z-index: 1;
    }
    .kargoza-why-header {
        margin-bottom: 24px !important;
    }
    .kargoza-why-eyebrow {
        display: inline-flex !important;
        align-items: center !important;
        gap: 10px !important;
        font-family: 'Outfit', sans-serif !important;
        font-size: 11px !important;
        letter-spacing: 2.2px !important;
        color: #d31b2c !important;
        margin: 0 0 12px 0 !important;
        font-weight: 700;
        text-transform: uppercase;
    }
    .kargoza-why-eyebrow-line {
        display: inline-block !important;
        width: 28px !important;
        height: 2px !important;
        background: #d31b2c;
        flex-shrink: 0;
    }
    .kargoza-why-title {
        font-family: 'Outfit', sans-serif !important;
        font-size: clamp(28px, 7.8vw, 38px) !important;
        font-weight: 800 !important;
        line-height: 1.05 !important;
        color: #000000 !important;
        margin: 0 0 10px 0 !important;
        letter-spacing: -0.5px;
    }
    .kargoza-why-title-accent { color: #d31b2c !important; }
    .kargoza-why-lead {
        display: block !important;
        font-family: 'Outfit', sans-serif !important;
        font-size: 14px !important;
        line-height: 1.55 !important;
        color: #4a5562 !important;
        max-width: 340px !important;
        margin: 0 !important;
    }

    /* The timeline: vertical rail + stacked items */
    .kargoza-why-timeline {
        display: block !important;
        list-style: none !important;
        margin: 0 !important;
        padding: 0 0 0 56px !important;   /* left room for marker (40px) + 16px gap */
        position: relative;
    }
    /* The vertical red rail */
    .kargoza-why-timeline::before {
        content: "";
        position: absolute;
        left: 28px;                       /* center of the 40px marker */
        top: 48px;                        /* start exactly at the bottom of the first marker */
        bottom: 48px;                     /* end exactly at the top of the last marker */
        width: 2px;
        background: #d31b2c;
        border-radius: 1px;
        z-index: 1;
    }
    /* Each item is a row: [marker absolutely positioned on rail] [card] */
    .kargoza-why-item {
        position: relative;
        list-style: none !important;
        margin: 0 !important;
        padding: 0 0 14px 0 !important;
        opacity: 0;
        transform: translateY(10px);
        transition: opacity 0.5s ease, transform 0.5s ease;
    }
    .kargoza-why-item:last-child { padding-bottom: 0 !important; }
    .kargoza-why-item.is-visible { opacity: 1; transform: translateY(0); }
    /* Marker: red circle with white number, centered on the rail */
    .kargoza-why-marker {
        position: absolute;
        left: -48px !important;             /* center on the rail (see comment above) */
        top: 18px;                          /* vertically aligned with the icon row */
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: #d31b2c;
        color: #ffffff;
        font-family: 'Outfit', sans-serif;
        font-size: 12px;
        font-weight: 800;
        letter-spacing: 0.5px;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 10px rgba(211,27,44,0.30), 0 0 0 4px #f5f7fa;
        z-index: 2;
    }
    .kargoza-why-number {
        display: inline-block;
        line-height: 1;
    }

    /* Card: horizontal grid [content 65% | image 35%] with diagonal cut */
    .kargoza-why-card {
        display: grid !important;
        grid-template-columns: 1fr 35% !important;
        align-items: stretch !important;
        text-decoration: none !important;
        color: inherit !important;
        background: #ffffff !important;
        border: 1px solid #ececec !important;
        border-radius: 14px !important;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
        min-height: 140px !important;          /* was 160; pairs with media min-height 140 */
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    .kargoza-why-card:hover,
    .kargoza-why-card:active {
        transform: translateY(-1px);
        box-shadow: 0 6px 16px rgba(0,0,0,0.10) !important;
    }
    .kargoza-why-content {
        position: relative;
        z-index: 2;
        padding: 14px 14px 14px 16px !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: flex-start !important;   /* icon+title at top, not vertically centered */
        gap: 10px !important;
        text-align: left !important;
        clip-path: polygon(0 0, 100% 0, calc(100% - 22px) 100%, 0 100%);
    }
    .kargoza-why-icon {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        border-radius: 12px !important;
        background: rgba(211,27,44,0.10) !important;
        color: #d31b2c !important;
        flex-shrink: 0 !important;
        align-self: flex-start !important;   /* icon sticks to top so it aligns with title */
    }
    .kargoza-why-icon svg {
        width: 20px !important;
        height: 20px !important;
    }
    .kargoza-why-text {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        text-align: left !important;
        align-self: flex-start !important;
    }
    .kargoza-why-item-desc {
        flex: 1 1 100% !important;       /* full row below the icon+title row */
        min-width: 0 !important;
    }
    .kargoza-why-item-title {
        font-family: 'Outfit', sans-serif !important;
        font-size: 18px !important;
        font-weight: 700 !important;
        color: #000000 !important;
        line-height: 1.2 !important;
        margin: 0 0 4px 0 !important;
    }
    .kargoza-why-item-desc {
        font-family: 'Outfit', sans-serif !important;
        font-size: 14px !important;
        line-height: 1.4 !important;
        color: #5b6470 !important;
        margin: 0 !important;
        /* No truncation: let it wrap to as many lines as needed */
        overflow: visible !important;
        display: block !important;
        -webkit-line-clamp: unset !important;
    }
    .kargoza-why-media {
        position: relative;
        z-index: 1;
        height: 100% !important;
        min-height: 140px !important;          /* let card hug content; was 160px (left 20px empty under content) */
        clip-path: polygon(22px 0, 100% 0, 100% 100%, 0 100%);
        background: #FFF3F4;                  /* pink, matching services panel */
        overflow: hidden !important;          /* clip the over-scaled illustration to the panel */
    }
    .kargoza-why-media img {
        display: block;
        /* The mobile illustration block further below (around line 1190+)
           absolutely-positions this img and reads --why-scale inline. We
           just clear the desktop clip-path so overflow:hidden on the parent
           does the clipping. */
        clip-path: none !important;
    }
    .kargoza-why-arrow {
        position: absolute;
        right: 8px;
        bottom: 8px;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: #d31b2c;
        color: #ffffff;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 12px rgba(0,0,0,0.25);
        z-index: 3;
        transition: transform 0.2s ease;
    }
    .kargoza-why-arrow svg { width: 14px !important; height: 14px !important; }
    .kargoza-why-card:hover .kargoza-why-arrow,
    .kargoza-why-card:active .kargoza-why-arrow {
        transform: translateX(3px);
    }
    /* Red diagonal accent line between content and image */
    .kargoza-why-media::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 3px;
        height: 100%;
        background: #d31b2c;
        z-index: 3;
        transform: translateX(20px) skewX(-18deg);
        transform-origin: top left;
    }
    .kargoza-why-tail {
        display: block;
        width: 2px;
        height: 18px;
        background: #d31b2c;
        margin: 0 0 0 8px;     /* align with rail at left:28 → from timeline-padding-left:56 → margin-left = (28-56) + 20 (half marker) = -8? But 2px line, want it at 28px from timeline start = 28-56 = -28px from item? — easier: place at 28-1=27px from timeline start. With padding-left 56, item.margin-left 0 → -28. So set margin-left: -28px; */
        border-radius: 0 0 1px 1px;
    }
    /* Fix: align tail to rail at left:28px from timeline start.  Timeline padding-left:56. So tail needs to be at -28 from container-start, or first item's left. Use a negative margin to pull it left. */
    .kargoza-why-tail { margin-left: -28px !important; }

    /* Recompute marker position so its CENTER is exactly on the rail at 28px.
       timeline padding-left = 56, rail at left:28.
       Item lives at 56..∞ from timeline start.
       Marker.left = -28 from item  →  -28 + 56 = 28 from timeline start.
       Marker is 40px wide, so spans 28..68 from timeline start, center at 48. ❌
       Want marker center at 28 (on the rail).
       So marker.left = -28 - 20 = -48 from item. */
    .kargoza-why-marker { left: -48px !important; }

    /* Tablet portrait (769-1024px) — keep desktop OFF, show nothing from mobile
       timeline either. Easiest: just hide the section's items since this viewport
       wasn't really part of the brief. */
    @media screen and (min-width: 769px) and (max-width: 1024px) {
        .kargoza-why-timeline { padding-left: 56px !important; }
    }

    /* Ultra-narrow phones: tighten everything */
    @media (max-width: 359px) {
        .kargoza-why-timeline { padding-left: 50px !important; }
        .kargoza-why-timeline::before { left: 24px !important; }
        .kargoza-why-marker { width: 36px !important; height: 36px !important; font-size: 11px !important; left: -44px !important; }
        .kargoza-why-tail { margin-left: -24px !important; }
        .kargoza-why-card {
            grid-template-columns: 1fr 38% !important;
            min-height: 150px !important;
        }
        .kargoza-why-content { padding: 14px 10px 14px 14px !important; }
        .kargoza-why-icon { width: 44px !important; height: 44px !important; min-width: 44px !important; }
        .kargoza-why-icon svg { width: 20px !important; height: 20px !important; }
        .kargoza-why-item-title { font-size: 16px !important; }
        .kargoza-why-item-desc { font-size: 13px !important; }
        .kargoza-why-media { min-height: 150px !important; }
    }

    /* ============================================
       MOBILE-ONLY: Kargoza illustrations inside
       Why-Kargoza cards. Same pattern as services:
       render <img> much larger than panel via
       --why-scale (set inline per-card) so the
       visible ink fills ~78% of panel width despite
       the massive transparent padding inside the
       900x600 PNG. Parent overflow:hidden clips the
       transparent overflow. The red circular CTA
       button (kargoza-why-arrow) sits at bottom-right
       with z-index:3, illustration is centered above it.
       ============================================ */
    .kargoza-why-media {
        display: block !important;             /* position:absolute img below needs a positioned parent — already has position:relative */
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;                /* ink is centered via absolute positioning, no inner gutter needed */
    }
    .kargoza-why-media img {
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        width: var(--why-scale, 280%) !important;
        height: auto !important;
        max-width: none !important;
        max-height: none !important;
        transform: translate(-50%, -50%) !important;
        object-fit: contain !important;
        object-position: center !important;
        aspect-ratio: auto !important;
        transition: none !important;
    }

    @media (prefers-reduced-motion: reduce) {
        .kargoza-why-item,
        .kargoza-why-card,
        .kargoza-why-arrow {
            transition: none !important;
            animation: none !important;
        }
        .kargoza-why-item { opacity: 1 !important; transform: none !important; }
    }
}

/* Hide mobile-only indicator list on desktop and tablet (1024px and up) */
@media screen and (min-width: 769px) {
    .hero-indicators { display: none !important; }
}

/* ============================================
   CTA SECTION "Ready to Ship?" — desktop defaults
   The inline styles in the markup handle the
   desktop look. These rules only hide the new
   decorative elements (rule line, bg texture) that
   were added for the mobile redesign, so they don't
   bleed into the desktop view.
   ============================================ */
.kargoza-cta-bg { display: none; }
.kargoza-cta-rule { display: none; }
.kargoza-cta-arrow,
.kargoza-cta-phone {
    display: none;
}

/* ============================================
   WHY KARGOZA — desktop ONLY defaults
   Everything below this point is wrapped in a
   min-width: 1025px media query so it CANNOT
   bleed into mobile/tablet.
   The mobile layout (timeline with horizontal
   cards + diagonal image) lives in a separate
   @media (max-width: 768px) block further below.
   ============================================ */
@media screen and (min-width: 1025px) {
    .kargoza-why-container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 24px;
    }
    .kargoza-why-header {
        text-align: center;
        margin-bottom: 50px;
    }
    .kargoza-why-eyebrow {
        color: #d31b2c;
        font-weight: 700;
        font-size: 14px;
        text-transform: uppercase;
        letter-spacing: 1px;
        display: inline-block;
    }
    .kargoza-why-title {
        font-size: 36px;
        font-weight: 700;
        color: #000000;
        line-height: 1.15;
        margin: 15px 0 20px 0;
    }
    .kargoza-why-title-accent {
        color: #d31b2c;
    }
    .kargoza-why-lead {
        display: none; /* original desktop had no lead */
    }
    .kargoza-why-timeline {
        list-style: none;
        margin: 0;
        padding: 0;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 30px;
    }
    .kargoza-why-item {
        list-style: none;
        margin: 0;
        padding: 0;
        text-align: center;
    }
    .kargoza-why-marker,
    .kargoza-why-tail {
        display: none;
    }
    .kargoza-why-card {
        display: block;
        text-decoration: none;
        color: inherit;
        padding: 30px 20px;
        text-align: center;
        height: 100%;
    }
    .kargoza-why-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 14px;
    }
    .kargoza-why-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background: #d31b2c;
        color: #ffffff;
    }
    .kargoza-why-text { text-align: center; }
    .kargoza-why-item-title {
        font-size: 18px;
        font-weight: 600;
        color: #000000;
        margin: 0 0 10px 0;
    }
    .kargoza-why-item-desc {
        color: #5b6470;
        font-size: 14px;
        line-height: 1.55;
        margin: 0;
    }
    .kargoza-why-media,
    .kargoza-why-arrow {
        display: none;
    }
}

/* Hero Section */
.hero {
    min-height: 100vh;
    display: block;
    align-items: center;
    padding-top: 120px; padding-bottom: 80px;
    background-image: linear-gradient(to bottom, rgba(0,0,0,0.6), rgba(0,0,0,0.7)), 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: 50% -400px;
    position: relative;
    overflow: hidden;
}

.hero-dark {
    background-image: linear-gradient(to bottom, rgba(0,0,0,0.6), rgba(0,0,0,0.7)), 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: 50% -400px;
}

.hero-content {
    max-width: 100%;
    color: var(--color-white); text-align: left;
}

.hero-eyebrow {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    color: var(--color-red);
    margin-bottom: 1rem;
    text-transform: uppercase;
}

.hero-title {
    font-size: clamp(4rem, 10vw, 7rem);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    color: var(--color-white);
}

.hero-title-accent {
    color: var(--color-red);
}

.hero-description {
    font-size: 2rem;
    color: var(--color-gray-400);
    margin-bottom: 2rem;
    max-width: 540px;
}

.hero-buttons {
    display: block;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}

.hero-features {
    display: block;
    gap: 1.5rem; margin: 0 auto;
    flex-wrap: wrap;
    font-size: 0.9rem;
    color: var(--color-gray-400);
}

.hero-features-divider {
    color: var(--color-red);
}

/* Services Section */
.services {
    padding: 6rem 0;
    background-color: var(--color-gray-50);
}

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

.service-card {
    background: var(--color-white);
    padding: 2rem;
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    transition: var(--transition-base);
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-xl);
}

.service-icon {
    width: 60px;
    height: 60px;
    background-color: var(--color-red);
    border-radius: 12px;
    display: block;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    color: var(--color-white);
    font-size: 2rem;
}

.service-title {
    font-size: 2rem;
    margin-bottom: 0.75rem;
}

.service-description {
    color: var(--color-gray-600);
    font-size: 0.95rem;
}

/* Footer */
.site-footer {
    background-color: var(--color-black);
    color: var(--color-gray-400);
    padding: 4rem 0 2rem;
}

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

.footer-title {
    color: var(--color-white);
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
}

.footer-links {
    list-style: none;
}

/* Footer ul/li bullets fix */
.site-footer ul {
    list-style: none !important;
    padding-left: 0;
    margin: 0;
}

.site-footer ul li {
    list-style: none !important;
    margin-bottom: 0.75rem;
}

.footer-links li {
    margin-bottom: 0.75rem;
}

.footer-links a {
    color: var(--color-gray-400);
}

.footer-links a:hover {
    color: var(--color-red);
}

.footer-bottom {
    border-top: 1px solid var(--color-gray-800);
    padding-top: 2rem;
    text-align: left;
    font-size: 0.9rem;
}

/* Main content */
.site-main {
    min-height: 100vh;
}

.page-header {
    padding: calc(var(--header-height) + 4rem) 0 4rem;
    background-color: var(--color-gray-100);
    text-align: left;
}

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

/* Utilities */
.text-center { text-align: left; }
.text-red { color: var(--color-red); }
.mt-4 { margin-top: 1rem; }
.mb-4 { margin-bottom: 1rem; }

/* ============================================
   ANIMATIONS & HOVER EFFECTS
   ============================================ */

/* Button hover effects */
.btn {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s;
}

.btn:hover::before {
    left: 100%;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

.btn:active {
    transform: translateY(0);
}

/* Service cards hover */
.service-card, a[href*="/services/"] div, a[href*="/industries/"] div, a[href*="/solutions/"] div {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.service-card:hover, a[href*="/services/"]:hover div, a[href*="/industries/"]:hover div, a[href*="/solutions/"]:hover div {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
    border-color: #d31b2c !important;
}

/* Link hover effects */
a {
    transition: all 0.3s ease;
}

a:hover {
    color: #d31b2c;
}

/* Fade in animation for sections */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

@keyframes shimmer {
    0% { background-position: -1000px 0; }
    100% { background-position: 1000px 0; }
}

/* Apply animations to elements on scroll (via JS will add 'animated' class) */
.animated {
    animation-fill-mode: both;
    animation-duration: 0.8s;
}

.animated.fadeInUp { animation-name: fadeInUp; }
.animated.fadeIn { animation-name: fadeIn; }
.animated.slideInLeft { animation-name: slideInLeft; }
.animated.slideInRight { animation-name: slideInRight; }

/* Staggered animation delays */
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }
.delay-4 { animation-delay: 0.4s; }
.delay-5 { animation-delay: 0.5s; }

/* Hero button pulse */
.hero-buttons .btn-primary {
    animation: none;
}

.hero-buttons .btn-primary:hover {
    animation: none;
}

/* Trust indicators hover */
.trust-item, [class*="trust"] > div {
    transition: all 0.3s ease;
}

.trust-item:hover, [class*="trust"]:hover > div {
    transform: scale(1.05);
}

/* Icon hover rotation */
.service-card:hover .fa, 
.service-card:hover i,
a:hover .fa,
a:hover i {
    transform: scale(1.1);
}

.service-card i, .service-card .fa,
a div i, a div .fa {
    transition: transform 0.3s ease;
}

/* Mobile touch feedback */
@media (max-width: 768px) {
    .btn:active {
        transform: scale(0.98);
    }
    
    .service-card:active, 
    a[href*="/services/"]:active div,
    a[href*="/industries/"]:active div,
    a[href*="/solutions/"]:active div {
        transform: scale(0.98);
    }
}

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

/* Image hover zoom */
.service-card img:hover,
.service-card:hover img {
    transform: scale(1.05);
}

/* Focus states for accessibility */
.btn:focus,
a:focus {
    outline: 2px solid #d31b2c;
    outline-offset: 2px;
}

/* Loading shimmer effect for buttons */
.btn-loading {
    position: relative;
    overflow: hidden;
}

.btn-loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    background-size: 1000px 100%;
    animation: shimmer 2s infinite;
}

/* Hero buttons - equal size on mobile (handled in main @media (max-width: 768px) block above) */

/* ============================================
   OUR SERVICES SECTION — desktop grid layout
   (Mobile horizontal-card layout is below, inside
    the (max-width: 768px) media query block above)
   ============================================ */
.kargoza-services-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}
.kargoza-services-header {
    text-align: center;
    margin-bottom: 50px;
}
.kargoza-services-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #d31b2c;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    margin-bottom: 18px;
}
.kargoza-services-eyebrow-line {
    display: inline-block;
    width: 32px;
    height: 2px;
    background: #d31b2c;
    flex-shrink: 0;
}
.kargoza-services-title {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 800;
    line-height: 1.1;
    color: #000000;
    margin: 0 0 18px 0;
    letter-spacing: -0.5px;
}
.kargoza-services-title-accent {
    color: #d31b2c;
}
.kargoza-services-lead {
    font-family: 'Outfit', sans-serif;
    font-size: 17px;
    line-height: 1.6;
    color: #4a5562;
    max-width: 640px;
    margin: 0 auto;
}
.kargoza-services-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}
.kargoza-service-card {
    list-style: none;
    margin: 0;
    padding: 0;
}
.kargoza-service-link {
    display: block;
    text-decoration: none;
    color: inherit;
    background: #ffffff;
    border: 1px solid #ececec;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    height: 100%;
}
.kargoza-service-link:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(0,0,0,0.08);
}
.kargoza-service-content {
    padding: 26px 24px 22px 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.kargoza-service-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(211, 27, 44, 0.08);
    color: #d31b2c;
    flex-shrink: 0;
}
.kargoza-service-category {
    display: block;
    font-family: 'Outfit', sans-serif;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: #8a8f98;
    margin-bottom: 4px;
}
.kargoza-service-title {
    display: block;
    font-family: 'Outfit', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #000000;
    line-height: 1.25;
    margin: 0 0 6px 0;
}
.kargoza-service-desc {
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    line-height: 1.55;
    color: #5b6470;
    margin: 0;
}
.kargoza-service-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #d31b2c;
    color: #ffffff;
    align-self: flex-start;
    margin-top: 4px;
    transition: transform 0.2s ease;
}
.kargoza-service-link:hover .kargoza-service-cta {
    transform: translateX(3px);
}
.kargoza-service-media {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #f4f5f7;
}
.kargoza-service-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.kargoza-service-link:hover .kargoza-service-media img {
    transform: scale(1.05);
}
/* Diagonal accent line — desktop (subtle) */
.kargoza-service-media::after {
    content: "";
    position: absolute;
    top: 0;
    left: -2px;
    width: 4px;
    height: 100%;
    background: #d31b2c;
    transform: skewX(-12deg);
    transform-origin: top left;
}

/* Mid-desktop: 2 columns */
@media screen and (max-width: 1024px) {
    .kargoza-services-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================================
   Kargoza Mobile Menu — Premium Full-Screen (mobile only)
   Activated by JS adding `.active` class to #mobile-menu / .km-menu.
   Closed state: pointer-events:none, opacity 0, transform off-screen.
   - Dark charcoal background (#080A0C)
   - White logo (CSS filter invert)
   - Numbered nav (01-06) with rotating accordion arrows
   - Red GET A QUOTE pill, white phone pill, Nationwide block, 3-up benefits
   - 100dvh with iOS safe-area-inset support
   - Body scroll lock when .active
   - prefers-reduced-motion: no transitions
   ============================================================ */
@media (max-width: 768px) {
    .km-menu {
        position: fixed;
        inset: 0;
        z-index: 999999;
        background:
            radial-gradient(ellipse at 80% -10%, rgba(211,27,44,0.06) 0%, transparent 50%),
            radial-gradient(ellipse at 0% 110%, rgba(255,255,255,0.025) 0%, transparent 55%),
            linear-gradient(180deg, #080A0C 0%, #0B0D10 100%);
        color: #ffffff;
        display: flex;
        flex-direction: column;
        min-height: 100dvh;
        max-height: 100dvh;
        opacity: 0;
        visibility: hidden;
        transform: translateX(20px);
        transition: opacity 280ms ease, transform 320ms cubic-bezier(0.32,0.72,0,1), visibility 0s linear 320ms;
        overflow: hidden;
        padding-top: env(safe-area-inset-top, 0px);
        padding-bottom: env(safe-area-inset-bottom, 0px);
        font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    .km-menu.active {
        opacity: 1;
        visibility: visible;
        transform: translateX(0);
        transition: opacity 280ms ease, transform 320ms cubic-bezier(0.32,0.72,0,1), visibility 0s linear 0s;
    }

    /* TOP BAR: white logo + close X */
    .km-menu-top {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 18px 22px 14px;
        background: transparent;
    }
    .km-menu-logo {
        display: inline-flex;
        align-items: center;
        line-height: 0;
        -webkit-tap-highlight-color: transparent;
    }
    .km-menu-logo-img {
        height: 38px !important;
        width: auto !important;
        /* Turn the colored logo into white-on-dark via CSS filter
           since we have no separate white PNG variant. */
        filter: brightness(0) invert(1) !important;
    }
    .km-menu-close {
        appearance: none;
        background: transparent;
        border: 0;
        color: #ffffff;
        cursor: pointer;
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        transition: background 180ms ease;
        -webkit-tap-highlight-color: transparent;
    }
    .km-menu-close:hover,
    .km-menu-close:focus-visible {
        background: rgba(255,255,255,0.06);
        outline: none;
    }
    .km-menu-close svg { display: block; }

    /* NAV LIST */
    .km-menu-nav {
        flex: 1 1 auto;
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior: contain;
        padding: 6px 0 8px;
        -webkit-overflow-scrolling: touch;
    }
    .km-menu-list {
        list-style: none;
        margin: 0;
        padding: 0 22px;
        counter-reset: km;
    }
    .km-menu-item {
        border-bottom: 1px solid rgba(255,255,255,0.10);
    }
    .km-menu-item:first-child { border-top: 1px solid rgba(255,255,255,0.10); }

    .km-menu-link {
        appearance: none;
        background: transparent;
        border: 0;
        color: #ffffff;
        width: 100%;
        min-height: 56px;
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 12px 0;
        cursor: pointer;
        text-align: left;
        font-family: inherit;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
        font-weight: 600;
        transition: color 160ms ease;
    }
    .km-menu-link-sng {
        padding-right: 4px;
    }
    .km-menu-link:focus-visible {
        outline: 2px solid rgba(211,27,44,0.6);
        outline-offset: -2px;
        border-radius: 4px;
    }
    .km-menu-num {
        color: #E31E2D;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.12em;
        width: 28px;
        flex: 0 0 auto;
        font-variant-numeric: tabular-nums;
        font-feature-settings: "tnum";
    }
    .km-menu-name {
        font-size: 21px;
        font-weight: 600;
        letter-spacing: -0.01em;
        flex: 1 1 auto;
        line-height: 1.1;
    }
    .km-menu-arrow {
        color: rgba(255,255,255,0.65);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        transition: transform 220ms ease, color 160ms ease;
    }
    .km-menu-arrow svg { display: block; }
    .km-menu-link[aria-expanded="true"] .km-menu-arrow {
        transform: rotate(90deg);
        color: #E31E2D;
    }

    /* SUBMENU (accordion) */
    .km-menu-sub {
        list-style: none;
        margin: 0;
        padding: 0 0 8px 44px;
        max-height: 0;
        overflow: hidden;
        transition: max-height 260ms ease, padding-bottom 260ms ease;
    }
    .km-menu-item.open > .km-menu-sub {
        max-height: 600px;
        padding-bottom: 14px;
    }
    .km-menu-sub li {
        position: relative;
        margin: 0;
    }
    .km-menu-sub li::before {
        content: "";
        position: absolute;
        left: -16px;
        top: 50%;
        transform: translateY(-50%);
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: #E31E2D;
        opacity: 0.75;
    }
    .km-menu-sub a {
        display: block;
        color: rgba(255,255,255,0.78);
        text-decoration: none;
        padding: 9px 0;
        font-size: 15.5px;
        font-weight: 500;
        letter-spacing: -0.005em;
        line-height: 1.25;
        min-height: 40px;
        -webkit-tap-highlight-color: transparent;
        transition: color 160ms ease;
    }
    .km-menu-sub a:hover,
    .km-menu-sub a:focus-visible {
        color: #ffffff;
        outline: none;
    }

    /* CTA pill */
    .km-menu-cta {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        margin: 16px 22px 10px;
        padding: 0 22px;
        background: linear-gradient(135deg, #d31b2c 0%, #E31E2D 100%);
        color: #ffffff;
        text-decoration: none;
        font-weight: 700;
        font-size: 15px;
        letter-spacing: 0.08em;
        height: 58px;
        border-radius: 999px;
        box-shadow: 0 6px 18px rgba(211,27,44,0.32), 0 1px 0 rgba(255,255,255,0.18) inset;
        transition: transform 160ms ease, box-shadow 160ms ease;
        -webkit-tap-highlight-color: transparent;
    }
    .km-menu-cta:hover,
    .km-menu-cta:active {
        transform: translateY(-1px);
        box-shadow: 0 10px 24px rgba(211,27,44,0.42), 0 1px 0 rgba(255,255,255,0.18) inset;
    }
    .km-menu-cta span { letter-spacing: inherit; }
    .km-menu-cta svg { display: block; }

    /* PHONE pill */
    .km-menu-phone {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 0 22px 18px;
        padding: 0 18px;
        background: transparent;
        border: 1px solid rgba(255,255,255,0.20);
        color: #ffffff;
        text-decoration: none;
        font-weight: 600;
        font-size: 15px;
        height: 52px;
        border-radius: 999px;
        transition: background 160ms ease, border-color 160ms ease;
        -webkit-tap-highlight-color: transparent;
    }
    .km-menu-phone:hover,
    .km-menu-phone:active {
        background: rgba(255,255,255,0.05);
        border-color: rgba(255,255,255,0.30);
    }
    .km-menu-phone-num { flex: 1 1 auto; letter-spacing: 0.01em; }
    .km-menu-phone-arrow { opacity: 0.7; }
    .km-menu-phone svg { display: block; }

    /* NATIONWIDE block */
    .km-menu-nationwide {
        flex: 0 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 16px 22px 12px;
        gap: 4px;
    }
    .km-menu-nationwide-eyebrow {
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.20em;
        color: rgba(255,255,255,0.55);
        margin-bottom: 2px;
    }
    .km-menu-nationwide-title {
        font-size: 19px;
        font-weight: 700;
        color: #ffffff;
        letter-spacing: -0.01em;
    }
    .km-menu-nationwide-sub {
        font-size: 13px;
        color: rgba(255,255,255,0.65);
        font-weight: 500;
    }

    /* BENEFITS row */
    .km-menu-benefits {
        flex: 0 0 auto;
        display: grid;
        grid-template-columns: 1fr 1px 1fr 1px 1fr;
        align-items: center;
        padding: 14px 22px 18px;
        margin-top: 4px;
        border-top: 1px solid rgba(255,255,255,0.08);
    }
    .km-menu-benefit {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        padding: 4px 4px;
        color: #ffffff;
        text-align: center;
        line-height: 1.15;
    }
    .km-menu-benefit svg { color: rgba(255,255,255,0.85); }
    .km-menu-benefit span {
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.03em;
        color: rgba(255,255,255,0.85);
    }
    .km-menu-benefit:nth-child(1) { grid-column: 1; }
    .km-menu-benefit:nth-child(2) { grid-column: 3; }
    .km-menu-benefit:nth-child(3) { grid-column: 5; }
    .km-menu-benefits::before,
    .km-menu-benefits::after {
        content: "";
        grid-row: 2;
        width: 1px;
        height: 32px;
        background: rgba(255,255,255,0.10);
        align-self: center;
        margin: 0 6px;
    }
    .km-menu-benefits::before { grid-column: 2; }
    .km-menu-benefits::after  { grid-column: 4; }

    /* OVERLAY */
    .km-menu-overlay {
        position: fixed;
        inset: 0;
        z-index: 999998;
        background: rgba(0,0,0,0.55);
        opacity: 0;
        visibility: hidden;
        transition: opacity 240ms ease, visibility 0s linear 240ms;
        pointer-events: none;
    }
    .km-menu-overlay.active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition: opacity 240ms ease, visibility 0s linear 0s;
    }

    /* BODY scroll lock */
    body.km-menu-open {
        overflow: hidden !important;
        touch-action: none;
        position: fixed;
        inset: 0;
        width: 100%;
    }

    /* Reduced motion */
    @media (prefers-reduced-motion: reduce) {
        .km-menu,
        .km-menu-overlay,
        .km-menu-link,
        .km-menu-arrow,
        .km-menu-sub,
        .km-menu-cta,
        .km-menu-phone,
        .km-menu-close {
            transition: none !important;
        }
    }
}