html, body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}
/* On <html> only (not body) so it propagates as the canvas background instead
   of painting as body's own in-flow box -- the latter sits in a paint layer
   above the hero's z-index:-2 slide images (since .hero has no z-index of its
   own to contain them), silently covering the whole hero carousel. */
html {
    background-color: var(--c-bg-ffffff);
}


/* css/style.css */

/* --- 1. GLOBAL SETTINGS & BRAND COLORS --- */
:root {
    /* We store the logo colors as variables so they are easy to reuse */
    --airx-navy: #1f2151; /* The deep blue from the "AIR" text */
    --airx-red: #da2128;  /* The vibrant red from the "X" */
    --light-bg: #f3f6fc;
    --dark-text: #12153d;
    --heading-color: #12153d; /* a shade deeper than the logo navy, for text contrast */

    /* Type: Sora for headings, Plus Jakarta Sans for everything else
       (both loaded from Google Fonts in each page's <head>). */
    --font-display: 'Sora', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-body: 'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;

    /* Fixed brand surfaces: the same in light and dark mode */
    --ax-ink: #080b24;                /* the deep midnight used for every dark panel */
    --ax-ice: #39b8ff;                /* "cool air" accent: glows, focus rings, icons on dark */
    --ax-grad-red: linear-gradient(135deg, #ff4b3e 0%, #da2128 55%, #b8161d 100%);
    --ax-grad-ice: linear-gradient(100deg, #ffffff 0%, #c4ecff 42%, #62c8ff 100%);
    --ax-ease: cubic-bezier(0.2, 0.7, 0.2, 1);

    /* Semantic surfaces: these flip under [data-theme="dark"] */
    --ax-page: #ffffff;
    --ax-tint: #f3f6fc;
    --ax-card: #ffffff;
    --ax-strong: #0d1030;
    --ax-text: #555a7a;
    --ax-line: rgba(13, 16, 48, 0.09);
    --ax-shadow-sm: 0 1px 2px rgba(10, 13, 40, 0.04), 0 8px 22px rgba(10, 13, 40, 0.05);
    --ax-shadow: 0 2px 4px rgba(10, 13, 40, 0.04), 0 20px 48px rgba(10, 13, 40, 0.1);
    --ax-shadow-lg: 0 34px 80px rgba(10, 13, 40, 0.18);

    /* --- Dark mode tokens (auto-generated) --- */
    --c-bg-e6e9f0: #e6e9f0;
    --c-bg-e6edf5: #e6edf5;
    --c-bg-e8ebf3: #e8ebf3;
    --c-bg-eaeaea: #eaeaea;
    --c-bg-eaf7ee: #eaf7ee;
    --c-bg-edfaf1: #edfaf1;
    --c-bg-eef2ff: #eef2ff;
    --c-bg-f0f1f5: #f0f1f5;
    --c-bg-f3f6fa: #f3f6fa;
    --c-bg-f4f5f7: #f4f5f7;
    --c-bg-f4f5f8: #f4f5f8;
    --c-bg-f7f8fc: #f7f8fc;
    --c-bg-f8f9fa: #f8f9fa;
    --c-bg-f8f9fc: #f8f9fc;
    --c-bg-f9fafc: #f9fafc;
    --c-bg-fafbfc: #fafbfc;
    --c-bg-fdecee: #fdecee;
    --c-bg-fef2f2: #fef2f2;
    --c-bg-ffffff: #ffffff;
    --c-border-bfe6c9: #bfe6c9;
    --c-border-d6d9e2: #d6d9e2;
    --c-border-dce0ec: #dce0ec;
    --c-border-dddddd: #dddddd;
    --c-border-dde0e8: #dde0e8;
    --c-border-e2e5ec: #e2e5ec;
    --c-border-e2e6ef: #e2e6ef;
    --c-border-e6e8ef: #e6e8ef;
    --c-border-edf0f5: #edf0f5;
    --c-border-eeeeee: #eeeeee;
    --c-border-eef0f4: #eef0f4;
    --c-border-eef0f6: #eef0f6;
    --c-border-f0f1f5: #f0f1f5;
    --c-border-f0f2f7: #f0f2f7;
    --c-border-f2f2f2: #f2f2f2;
    --c-border-f4f5f7: #f4f5f7;
    --c-border-ffffff: #ffffff;
    --c-text-2b2d42: #2b2d42;
    --c-text-333333: #333333;
    --c-text-3a3d55: #3a3d55;
    --c-text-434966: #434966;
    --c-text-444444: #444444;
    --c-text-4a4e69: #4a4e69;
    --c-text-555555: #555555;
    --c-text-5a5f77: #5a5f77;
    --c-text-636a8c: #636a8c;
    --c-text-666666: #666666;
    --c-text-6b6f85: #6b6f85;
    --c-text-717897: #717897;
    --c-text-777777: #777777;
    --c-text-7a7e94: #7a7e94;
    --c-text-7f86a6: #7f86a6;
    --c-text-838aa8: #838aa8;
    --c-text-888888: #888888;
    --c-text-8b8fa3: #8b8fa3;
    --c-text-8c93b3: #8c93b3;
    --c-text-8f92b3: #8f92b3;
    --c-text-9599b0: #9599b0;
    --c-text-999999: #999999;
    --c-text-9aa1bc: #9aa1bc;
    --c-text-a0a4b8: #a0a4b8;
    --c-text-a2a8c3: #a2a8c3;
}

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

/* Fonts are inherited from <body> (not forced onto every element), so a
   heading's display face carries through to the links and spans inside it. */
body {
    font-family: var(--font-body);
    word-spacing: 0.06em; /* Plus Jakarta Sans sets a narrow space; open it up for body copy */
    color: var(--ax-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
button, input, select, textarea { font-family: inherit; }
h1, h2, h3, h4, h5 { font-family: var(--font-display); letter-spacing: -0.025em; }
::selection { background: var(--airx-red); color: #fff; }

/* Visually hidden but still available to screen readers */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Make the native [hidden] attribute win over any display:flex/grid rule
   elsewhere in this file — otherwise toggling it via JS/PHP silently no-ops. */
[hidden] {
    display: none !important;
}

/* ============================================================
   HEADER — floating glass bar, shared by every public page.
   It hovers 14px off the top edge over whatever is behind it
   (dark hero photos or light page backgrounds), so it carries
   its own frosted surface instead of relying on the page.
   ============================================================ */
body > header {
    position: fixed;
    top: 14px;
    left: 16px;
    right: 16px;
    z-index: 1000;
    max-width: 1320px;
    height: 66px;
    margin: 0 auto;
    padding: 0 12px 0 26px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.84);
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 12px 40px rgba(8, 11, 36, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.7);
    -webkit-backdrop-filter: blur(18px) saturate(170%);
    backdrop-filter: blur(18px) saturate(170%);
    transition: top 0.35s var(--ax-ease), height 0.35s var(--ax-ease), background-color 0.35s ease, box-shadow 0.35s ease;
}
/* Added by JS once the page scrolls: tucks closer to the edge, more opaque */
body > header.is-stuck {
    top: 8px;
    height: 60px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 10px 34px rgba(8, 11, 36, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

/* ---- Logo (brand-colour mark on light, white-lettered mark on dark) ---- */
.logo { display: inline-flex; align-items: center; flex-shrink: 0; text-decoration: none; }
.logo img { display: block; height: 30px; width: auto; }
.logo .logo-on-dark { display: none; }
[data-theme="dark"] .logo .logo-on-light { display: none; }
[data-theme="dark"] .logo .logo-on-dark { display: block; }

/* ---- Desktop nav ---- */
body > header nav > ul {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 2px;
    margin: 0;
    padding: 0;
}
body > header nav > ul > li > a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 0 15px;
    border-radius: 999px;
    color: var(--heading-color);
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    white-space: nowrap;
    transition: background-color 0.25s ease, color 0.25s ease;
}
body > header nav > ul > li > a:hover,
body > header nav > ul > li.dropdown:hover > a { background: rgba(31, 33, 81, 0.07); }

/* Current page: a solid navy pill in the desktop bar, red text in the mobile panel */
body > header nav > ul > li > a.active-link,
body > header nav > ul > li.dropdown:hover > a.active-link {
    background: var(--airx-navy);
    color: #fff;
}
.active-link { color: var(--airx-red); }

.drop-arrow { flex-shrink: 0; opacity: 0.7; transition: transform 0.3s var(--ax-ease); }
.dropdown:hover .drop-arrow,
.dropdown:focus-within .drop-arrow { transform: rotate(180deg); }

/* ---- Header actions: theme toggle + cart + CTA ---- */
.header-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

.cart-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid rgba(31, 33, 81, 0.12);
    background: rgba(31, 33, 81, 0.04);
    color: var(--heading-color);
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s var(--ax-ease);
}
.cart-link svg { width: 19px; height: 19px; }
.cart-link:hover {
    background: var(--airx-navy);
    border-color: var(--airx-navy);
    color: #fff;
    transform: translateY(-1px);
}
.cart-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--airx-red);
    color: #fff;
    font-size: 0.66rem;
    font-weight: 800;
    line-height: 1;
    border-radius: 999px;
    border: 2px solid #fff;
}

.btn-header {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 20px 0 22px;
    border-radius: 999px;
    background: var(--ax-grad-red);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 8px 22px rgba(218, 33, 40, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.28);
    transition: transform 0.25s var(--ax-ease), box-shadow 0.25s ease, filter 0.25s ease;
}
.btn-header svg { transition: transform 0.25s var(--ax-ease); }
.btn-header:hover {
    transform: translateY(-2px);
    filter: brightness(1.06);
    box-shadow: 0 14px 30px rgba(218, 33, 40, 0.44), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.btn-header:hover svg { transform: translateX(3px); }

body > header a:focus-visible,
body > header button:focus-visible { outline: 3px solid var(--ax-ice); outline-offset: 2px; }

/* ---- Mega menu (Products dropdown) ---- */
.dropdown { position: relative; }

.mega-menu {
    position: absolute;
    top: calc(100% + 26px);
    left: 50%;
    display: flex;
    gap: 14px;
    width: max-content;
    padding: 14px;
    border-radius: 28px;
    background: var(--c-bg-ffffff);
    border: 1px solid var(--ax-line);
    box-shadow: var(--ax-shadow-lg);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, 10px) scale(0.98);
    transform-origin: top center;
    transition: opacity 0.25s ease, transform 0.35s var(--ax-ease), visibility 0.25s;
}
.dropdown:hover .mega-menu,
.dropdown:focus-within .mega-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0) scale(1);
}
/* Invisible bridge over the gap so the pointer can travel down into the panel */
.mega-menu::before {
    content: "";
    position: absolute;
    top: -30px;
    left: 0;
    width: 100%;
    height: 30px;
}

.mega-column { display: flex; flex-direction: column; padding: 14px 16px 12px; min-width: 210px; }
.mega-column + .mega-column {
    padding: 18px;
    border-radius: 18px;
    background: var(--light-bg);
}
.mega-column h4 {
    margin-bottom: 10px;
    padding: 0 10px;
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--c-text-8f92b3);
}
.mega-column + .mega-column h4 { padding: 0 10px; }

.mega-menu ul.mega-links { list-style: none; display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; }
.mega-menu ul.mega-links-grid { display: grid; grid-template-columns: repeat(2, minmax(170px, 1fr)); gap: 2px 6px; }
.mega-menu ul.mega-links li a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 12px;
    color: var(--heading-color);
    font-size: 0.92rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease, padding-left 0.25s var(--ax-ease);
}
.mega-menu ul.mega-links li a::before {
    content: "";
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--c-border-dce0ec);
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.mega-menu ul.mega-links li a:hover { background: rgba(218, 33, 40, 0.07); color: var(--airx-red); padding-left: 14px; }
.mega-menu ul.mega-links li a:hover::before { background: var(--airx-red); box-shadow: 0 0 0 4px rgba(218, 33, 40, 0.16); }
.mega-column + .mega-column ul.mega-links li a:hover { background: var(--c-bg-ffffff); }

.mega-cta {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 14px;
    background: linear-gradient(135deg, #23266a, var(--ax-ink));
    color: #fff;
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.25s var(--ax-ease), box-shadow 0.25s ease;
}
.mega-cta svg { transition: transform 0.25s var(--ax-ease); }
.mega-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(8, 11, 36, 0.3); }
.mega-cta:hover svg { transform: translateX(4px); }
.mega-column ul.mega-links + .mega-cta { margin-top: 18px; }


/* ============================================================
   RESPONSIVE HEADER — hamburger + off-canvas mobile menu.
   Desktop nav / hamburger swap at 1024px so the header never
   runs out of room on laptops, tablets, or phones.
   ============================================================ */

/* Hamburger button: hidden on desktop, shown below 1024px */
.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0;
    flex-shrink: 0;
    border: none;
    border-radius: 50%;
    background: var(--airx-navy);
    cursor: pointer;
}
.nav-toggle-bar {
    width: 18px;
    height: 2px;
    background-color: #fff;
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease;
}
.nav-toggle.is-active .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-active .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle.is-active .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Off-canvas panel + scrim — hidden entirely on desktop */
.mobile-nav-scrim, .mobile-nav { display: none; }

body.mobile-nav-locked { overflow: hidden; }

@media (max-width: 1180px) {
    body > header nav > ul > li > a { padding: 0 11px; font-size: 0.88rem; }
    body > header { padding-left: 22px; gap: 12px; }
}

@media (max-width: 1024px) {
    body > header { top: 10px; left: 10px; right: 10px; height: 60px; padding: 0 8px 0 20px; }
    body > header.is-stuck { top: 8px; height: 58px; }
    .logo img { height: 26px; }

    /* Swap desktop nav + CTA + cart + theme toggle for the hamburger
       (cart and theme toggle live inside the mobile menu panel instead) */
    body > header nav,
    body > header .header-actions { display: none; }
    .nav-toggle { display: flex; }

    /* Scrim behind the panel */
    .mobile-nav-scrim {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(6, 8, 28, 0.6);
        -webkit-backdrop-filter: blur(4px);
        backdrop-filter: blur(4px);
        z-index: 3000;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
    }
    .mobile-nav-scrim.is-open { opacity: 1; pointer-events: auto; }

    /* The sliding panel itself */
    .mobile-nav {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 10px;
        right: 10px;
        bottom: 10px;
        width: min(360px, calc(100vw - 20px));
        background: var(--c-bg-ffffff);
        border: 1px solid var(--ax-line);
        border-radius: 28px;
        z-index: 3001;
        box-shadow: var(--ax-shadow-lg);
        transform: translateX(calc(100% + 20px));
        transition: transform 0.45s var(--ax-ease);
        overflow-y: auto;
    }
    .mobile-nav.is-open { transform: translateX(0); }

    .mobile-nav-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 18px 16px 14px 24px;
        flex-shrink: 0;
    }
    .mobile-nav-logo img { height: 26px; }
    .mobile-nav-close {
        width: 42px; height: 42px;
        display: flex; align-items: center; justify-content: center;
        border: none; border-radius: 50%;
        background: var(--light-bg);
        color: var(--heading-color);
        font-size: 1.6rem; line-height: 1;
        cursor: pointer;
        transition: background-color 0.2s ease, color 0.2s ease;
    }
    .mobile-nav-close:hover { background: var(--airx-red); color: #fff; }

    .mobile-nav-list { list-style: none; padding: 6px 12px; flex-grow: 1; }
    .mobile-nav-list > li + li { margin-top: 2px; }
    .mobile-nav-list > li > a {
        display: block;
        padding: 14px 14px;
        border-radius: 14px;
        color: var(--heading-color);
        text-decoration: none;
        font-family: var(--font-display);
        font-weight: 600;
        font-size: 1.12rem;
        letter-spacing: -0.02em;
        transition: background-color 0.2s ease;
    }
    .mobile-nav-list > li > a:hover { background: var(--light-bg); }
    .mobile-nav-list > li > a.active-link,
    .mobile-nav-expand-btn span.active-link { color: var(--airx-red); }

    /* Products accordion */
    .mobile-nav-expand-btn {
        display: flex; align-items: center; justify-content: space-between;
        width: 100%; padding: 14px 14px; background: none; border: none; border-radius: 14px;
        font-family: var(--font-display); font-weight: 600; font-size: 1.12rem; letter-spacing: -0.02em;
        color: var(--heading-color);
        cursor: pointer;
    }
    .mobile-nav-chevron { font-size: 0.75rem; transition: transform 0.25s ease; color: var(--c-text-999999); }
    .mobile-nav-expandable.is-open .mobile-nav-chevron { transform: rotate(180deg); }

    .mobile-nav-submenu {
        display: flex; flex-direction: column;
        max-height: 0; overflow: hidden;
        transition: max-height 0.35s ease, padding 0.35s ease;
        background: var(--light-bg);
        border-radius: 16px;
        padding: 0 16px;
    }
    .mobile-nav-expandable.is-open .mobile-nav-submenu { max-height: 560px; padding: 8px 16px 14px; }
    .mobile-nav-subheading {
        font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.14em;
        color: var(--c-text-999999); font-weight: 800; margin: 12px 0 4px;
    }
    .mobile-nav-subheading:first-child { margin-top: 6px; }
    .mobile-nav-submenu a {
        color: var(--c-text-444444); text-decoration: none; font-size: 0.95rem; font-weight: 500;
        padding: 9px 0; border-bottom: 1px solid var(--c-border-eeeeee);
    }
    .mobile-nav-submenu a:last-child { border-bottom: none; }
    .mobile-nav-view-all { color: var(--airx-red) !important; font-weight: 700 !important; }

    .mobile-nav-footer {
        margin: 8px 12px 12px;
        padding: 18px;
        border-radius: 20px;
        background: var(--light-bg);
        display: flex; flex-direction: column; gap: 14px;
        flex-shrink: 0;
    }
    .mobile-nav-cart-link {
        display: flex; align-items: center; gap: 10px;
        color: var(--heading-color); text-decoration: none; font-weight: 600; font-size: 0.95rem;
    }
    .mobile-nav-cta { justify-content: center; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
    body > header, .mega-menu, .mobile-nav, .mobile-nav-scrim, .nav-toggle-bar, .mobile-nav-chevron, .mobile-nav-submenu {
        transition: none !important;
    }
}



/* --- HERO SECTION (The Background & Layout) --- */


/* --- HERO SECTION (Carousel Update) --- */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 180px 5% 50px 5%;
    overflow: hidden; /* Keeps the slides perfectly contained */
}

/* Container for the background images */
.hero-slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2; /* Pushes the images behind everything */
    background-color: var(--airx-navy);
}

.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0; /* Hidden by default */
    transition: opacity 1.2s ease-in-out; /* Smooth cinematic fade effect */
}

.slide.active {
    opacity: 1; /* Reveals only the active image */
}

/* The gradient overlay */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Your exact existing gradient */
    background: linear-gradient(to right, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.6) 50%, rgba(255,255,255,0) 100%);
    z-index: -1;
}

/* Ensure text sits safely above the images */
.hero-content {
    position: relative;
    z-index: 10;
    max-width: 600px; 
    margin-top: 60px; 
}

.hero-content h2 { font-size: 3.2rem; color: var(--heading-color); line-height: 1.1; margin-bottom: 20px; font-weight: 800; }
.hero-content p { font-size: 1.1rem; color: var(--c-text-444444); margin-bottom: 35px; line-height: 1.6; }

/* Navigation Arrow Styling */
.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(31, 33, 81, 0.2); /* Semi-transparent Navy */
    color: white;
    border: none;
    padding: 20px 15px;
    font-size: 24px;
    cursor: pointer;
    z-index: 20;
    transition: all 0.3s ease;
    border-radius: 5px;
}

.slider-btn:hover {
    background: var(--airx-red);
}

/* Pushes the buttons to the far edges */
.slider-btn.prev { left: 20px; }
.slider-btn.next { right: 20px; }

/* Hero Buttons Layout */
.hero-buttons {
    display: flex;
    align-items: center;
    gap: 25px;
}

/* Secondary Text Link Styling */
.btn-outline {
    color: var(--heading-color);
    font-size: 1.05rem;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-outline:hover {
    color: var(--airx-red);
    transform: translateX(4px); /* Adds a slight sliding animation on hover */
}


/* .hero {
    background-image: 
        linear-gradient(to right, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.6) 50%, rgba(255,255,255,0) 100%),
        url('../images/hero-bg.jpg'); 
    background-size: cover;
    background-position: center;
    
    /* Changed from 90vh to 100vh so the image reaches the exact bottom of the screen */
    /* min-height: 100vh;  */
/*     
    display: flex;
    flex-direction: column;
    justify-content: space-between;  */
    
    /* Increased top padding to 180px to push the text down below the floating header */
    /* padding: 180px 5% 50px 5%; */

/* 
.hero-content {
    max-width: 600px; 
    margin-top: 90px; /* This pushes the text block lower */

/* 
.hero-content h2 {
    font-size: 3.2rem; 
    color: var(--heading-color);
    line-height: 1.1;
    margin-bottom: 20px;
    font-weight: 800;
}

.hero-content p {
    font-size: 1.1rem;
    color: var(--c-text-444444);
    margin-bottom: 35px;
    line-height: 1.6;
} */ 



/* --- BUTTON GROUP --- */
.button-group {
    display: flex;
    flex-direction: row;
    align-items: center; 
    gap: 25px; 
    margin-top: 25px;
}

/* Master Button Rule */
.btn {
    display: inline-flex;
    align-items: center;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
    border: none !important;
    white-space: nowrap; 
}

/* 1. The Solid Pill Button */
.btn-solid {
    background-color: var(--airx-red) !important;
    color: white !important;
    padding: 14px 32px !important;
    border-radius: 50px !important; 
    box-shadow: 0 4px 15px rgba(218, 33, 40, 0.3);
}

.btn-solid:hover {
    background-color: #b51a20 !important; 
    transform: translateY(-2px); 
}

/* 2. The Transparent Text Button */
.btn-transparent {
    background-color: transparent !important;
    color: var(--heading-color) !important; 
    padding: 10px 0 !important; 
    box-shadow: none !important;
}

.btn-transparent span {
    margin-left: 8px;
    transition: transform 0.3s ease;
}

.btn-transparent:hover {
    color: var(--airx-red) !important; 
}

.btn-transparent:hover span {
    transform: translateX(6px); 
}

/* --- THE GLASSMORPHISM PANEL --- */
.glass-panel {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    background: rgba(255, 255, 255, 0.6); /* Semi-transparent white */
    backdrop-filter: blur(15px); /* The frosted glass blur effect */
    -webkit-backdrop-filter: blur(15px); /* Safari support */
    border: 1px solid rgba(255, 255, 255, 0.8); /* Crisp white edge */
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.glass-feature {
    width: 30%;
    padding: 10px;
    border-right: 1px solid rgba(0,0,0,0.1); /* Dividers between features */
}

/* Removes the divider from the very last item */
.glass-feature:last-child {
    border-right: none;
}

.glass-feature h4 {
    color: var(--heading-color);
    font-size: 1rem;
    margin-bottom: 8px;
}

.glass-feature p {
    color: var(--c-text-444444);
    font-size: 0.85rem;
    line-height: 1.5;
}



/* --- 5. FEATURES SECTION --- */
.features {
    display: flex; 
    justify-content: center; 
    gap: 30px;
    padding: 80px 5%;
    background-color: var(--light-bg);
}

.feature-box {
    width: 30%; 
    text-align: center;
    padding: 40px 30px;
    background-color: var(--c-bg-ffffff);
    border-top: 4px solid var(--airx-navy); /* Navy accent on top of each card */
    border-radius: 5px; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.03); /* Soft, floating effect */
    transition: transform 0.3s;
}

.feature-box:hover {
    transform: translateY(-10px); /* Cards float up slightly when hovered */
}

.feature-box h3 {
    margin-bottom: 15px;
    color: var(--heading-color);
    font-size: 1.4rem;
}

.feature-box p {
    color: var(--c-text-666666);
    line-height: 1.6;
}

/* --- 6. FOOTER ---
   The real footer styling lives in "GLOBAL PREMIUM FOOTER" further down,
   scoped to .site-footer. (This old bare `footer{}` rule used to be the
   whole footer; it's gone now — it was leaking `text-align: center` onto
   every column of the new footer via inheritance.) */






/* --- 5. OUR PRODUCTS SECTION --- */
.products {
    padding: 100px 5%;
    background-color: var(--light-bg);
}

.section-header {
    text-align: center;
    margin-bottom: 60px;
}

.section-header h3 {
    font-size: 2.5rem;
    color: var(--heading-color);
    margin-bottom: 15px;
    font-weight: 800;
}

.section-header p {
    color: var(--c-text-666666);
    font-size: 1.1rem;
}

/* The Grid Layout */
.product-grid {
    display: flex;
    justify-content: space-between;
    gap: 30px;
}

/* Individual Product Cards */
.product-card {
    background-color: var(--c-bg-ffffff);
    width: 32%;
    border-radius: 15px;
    overflow: hidden; /* Keeps the image inside the rounded corners */
    box-shadow: 0 10px 30px rgba(0,0,0,0.04);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.product-card:hover {
    transform: translateY(-10px); /* Lifts the card on hover */
    box-shadow: 0 15px 40px rgba(0,0,0,0.08);
}

/* Image Container & Hover Zoom Effect */
.product-image {
    width: 100%;
    height: 250px;
    background-color: var(--c-bg-eaeaea); /* Gray placeholder color until you add real images */
    overflow: hidden;
}

.product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image fills the box perfectly without stretching */
    transition: transform 0.5s ease;
}

/* Zooms the image slightly when the user hovers over the card */
.product-card:hover .product-image img {
    transform: scale(1.08);
}

/* Card Text Area */
.product-content {
    padding: 30px;
}

.product-content h4 {
    color: var(--heading-color);
    font-size: 1.3rem;
    margin-bottom: 10px;
}

.product-content p {
    color: var(--c-text-555555);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 20px;
}

/* Overriding the transparent button padding specifically for these cards */
.product-card .btn-transparent {
    font-size: 0.9rem;
    padding: 0 !important; /* Removes padding so it aligns perfectly with the text */
}







/* --- 6. CONTACT US SECTION --- */
.contact {
    padding: 100px 5%;
    background-color: var(--c-bg-ffffff);
}

.contact-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 50px;
    background-color: var(--light-bg);
    padding: 60px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
}

/* Left Side Info */
.contact-info {
    width: 40%;
}

.contact-info h3 {
    font-size: 2.5rem;
    color: var(--heading-color);
    margin-bottom: 20px;
    font-weight: 800;
}

.contact-info p {
    color: var(--c-text-555555);
    line-height: 1.6;
    margin-bottom: 30px;
    font-size: 1.05rem;
}

.contact-info ul {
    list-style: none;
    padding: 0;
}

.contact-info ul li {
    margin-bottom: 15px;
    color: var(--dark-text);
    font-size: 1.05rem;
}

/* Highlights the labels in Red */
.contact-info ul li strong {
    color: var(--airx-red);
    display: inline-block;
    width: 90px; 
}

/* Right Side Form */
.contact-form {
    width: 55%;
}

.contact-form form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.input-group {
    display: flex;
    gap: 20px;
}

.input-group input {
    width: 50%;
}

/* General Input Styling */
.contact-form input,
.contact-form select,
.contact-form textarea {
    width: 100%;
    padding: 15px 20px;
    border: 1px solid var(--c-border-dddddd);
    border-radius: 8px; /* Slightly rounded corners */
    font-size: 1rem;
    font-family: inherit;
    background-color: var(--c-bg-ffffff);
    transition: all 0.3s ease;
}

/* Focus State (When the user clicks inside the box) */
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: var(--airx-red);
    box-shadow: 0 0 8px rgba(218, 33, 40, 0.15);
}

/* Override the default button behavior to fit the form */
.contact-form button {
    align-self: flex-start; /* Keeps the button from stretching across the whole form */
    margin-top: 10px;
}


/* --- ABOUT US - HERO BANNER (Parallax / Locked Image) --- */
.about-hero {
    /* 1. The Navy Overlay (85% opaque at top, 70% at bottom) */
    /* 2. The Background Image */
    background-image: 
        linear-gradient(rgba(31, 33, 81, 0.85), rgba(31, 33, 81, 0.7)),
        url('../images/about-hero-bg.jpg'); 
    background-size: cover;
    background-position: center;
    
    /* THIS IS THE MAGIC LINE: It locks the image firmly to the screen */
    background-attachment: fixed; 
    
    color: white;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
    /* Increased the padding to make the banner taller and more cinematic */
    padding: 220px 20px 140px 20px; 
    border-bottom: 5px solid var(--airx-red);
}

.about-hero h2 {
    font-size: 3.5rem; /* Made the text larger for higher impact */
    margin-bottom: 15px;
    font-weight: 800;
    letter-spacing: -1px;
    text-shadow: 0 5px 15px rgba(0,0,0,0.3); /* Adds a premium drop-shadow to the text */
}

.about-hero p {
    font-size: 1.2rem;
    color: #e0e2f5;
    max-width: 600px;
    line-height: 1.6;
}


/* --- 7. ABOUT US - COMPANY STORY --- */
.company-story {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 100px 5%;
    background-color: var(--c-bg-ffffff);
    gap: 60px;
}

.story-content {
    width: 50%;
}

.story-content h3 {
    font-size: 2.6rem;
    color: var(--heading-color);
    margin-bottom: 25px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -0.5px;
}

.story-content p {
    color: var(--c-text-555555);
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 20px;
}

/* Feature Image Styling */
.story-visual {
    width: 50%;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
    position: relative;
}

/* Adds a sleek red brand line to the left edge of the image */
.story-visual::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 100%;
    background-color: var(--airx-red);
}

.story-visual img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.6s ease;
}

/* Subtle cinematic zoom when hovered */
.story-visual:hover img {
    transform: scale(1.04);
}

/* --- 9. LEADERSHIP MESSAGES --- */
.leadership-messages {
    padding: 100px 5%;
    background-color: var(--light-bg); /* Changed to light gray so the white cards pop */
}

.section-header {
    text-align: center;
    margin-bottom: 60px;
}

.section-header h3 {
    font-size: 2.4rem;
    color: var(--heading-color);
    margin-bottom: 15px;
}

.accent-line {
    width: 40px;
    height: 3px;
    background-color: var(--airx-red);
    margin: 0 auto;
}

.leadership-grid {
    display: flex;
    justify-content: center;
    gap: 40px;
}

/* The New Rectangular Card */
.leader-card-modern {
    width: 45%;
    max-width: 500px;
    background-color: var(--c-bg-ffffff);
    border-radius: 8px;
    overflow: hidden; /* This makes the image clip perfectly to the top rounded corners */
    box-shadow: 0 15px 35px rgba(0,0,0,0.06);
    display: flex;
    flex-direction: column;
}

/* Full-Width Top Image */
.leader-image-full {
    width: 100%;
    height: 320px; /* Adjust this to make the images taller or shorter */
}

.leader-image-full img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Text Container (Base State) */
.leader-content {
    padding: 40px 30px;
    text-align: center;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    background-color: var(--c-bg-ffffff); 
    transition: background-color 0.4s ease; /* Controls the smooth background fade */
}

.leader-content h4 {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--dark-text);
    margin-bottom: 25px;
    text-transform: none;
    transition: color 0.4s ease; /* Controls the smooth text color fade */
}

.leader-content p {
    color: var(--c-text-777777);
    font-size: 0.9rem;
    line-height: 1.8;
    margin-bottom: 30px;
    transition: color 0.4s ease;
}

/* --- THE HOVER INVERSION EFFECT --- */
/* 1. Turns the background red when the card is hovered */
.leader-card-modern:hover .leader-content {
    background-color: var(--airx-red);
}

/* 2. Turns the text white when the card is hovered */
.leader-card-modern:hover .leader-content h4,
.leader-card-modern:hover .leader-content p {
    color: white;
}

/* --- SOCIAL MEDIA LINKS --- */
.leader-socials {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: auto; 
}

/* Base state for the icons */
.leader-socials a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%; /* Prepares the circular shape for the hover effect */
    background-color: transparent;
    color: var(--c-text-999999);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: bold;
    transition: all 0.4s ease;
}

/* 3. Turns social icons into white circles with red text when the card is hovered */
.leader-card-modern:hover .leader-socials a {
    background-color: var(--c-bg-ffffff);
    color: var(--airx-red);
}

/* 4. Adds a tiny lift effect if they directly hover over the social button itself */
.leader-card-modern:hover .leader-socials a:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}







/* --- 10. PROJECTS PAGE: HERO & GRID --- */
.projects-hero {
    /* 1. Parallax Background Setup (Unchanged) */
    background: linear-gradient(rgba(15, 16, 40, 0.85), rgba(15, 16, 40, 0.85)), url('../images/projects-bg.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    
    /* 2. Full Width Breakout (Unchanged) */
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    
    /* 3. NEW: Flexbox Centering Magic */
    display: flex;
    flex-direction: column;      /* Stacks the H1 and P tag on top of each other */
    justify-content: center;     /* Centers the content vertically */
    align-items: center;         /* Centers the content horizontally */
    min-height: 40vh;            /* Makes the banner take up 40% of the screen height */
    
    color: white;
    text-align: center;
    padding-top: 100px;  /* Pushes the content down below the navbar */
    padding-bottom: 40px; /* Gives a little breathing room at the bottom */
    padding-left: 20px;
    padding-right: 20px;        /* We only need side padding now, flexbox handles the top/bottom! */
}

.projects-hero h2 { font-size: 2.8rem; margin-bottom: 15px; }
.projects-hero p { color: #d1d2e3; font-size: 1.1rem; }

.projects-container {
    padding: 80px 5%;
    background-color: var(--light-bg);
}

.category-title {
    text-align: center;
    font-size: 2.2rem;
    color: var(--heading-color);
    margin-bottom: 50px;
}

/* CSS Grid automatically calculates how many cards fit on the screen */
.project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 30px;
}

.project-card {
    background-color: var(--c-bg-ffffff);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-bottom: 3px solid transparent;
}

.project-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    border-bottom: 3px solid var(--airx-red); /* Red accent on hover */
}

.card-image {
    height: 200px;
    background-color: var(--c-bg-f8f9fa);
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid var(--c-border-eeeeee);
}

/* 1. Default: Used for logos so they don't stretch */
.card-image img.contain-image {
    max-width: 80%;
    max-height: 80%;
    object-fit: contain; 
}

/* 2. Toggle Active: Used for photos to fill the whole box */
.card-image img.fill-image {
    width: 100%;
    height: 100%;
    object-fit: cover; 
}
/* --- CARD DETAILS (Name & Capacity - UPDATED) --- */
.card-details {
    padding: 25px 20px;
    text-align: center;
}

.card-details h4 {
    color: var(--heading-color);
    font-size: 1.25rem;
    margin-bottom: 8px;
    font-weight: 800;
}

.card-details p {
    color: var(--c-text-555555);
    font-size: 1.05rem;
    margin: 0;
}

/* Highlights the actual number in red */
.card-details p span {
    color: var(--airx-red);
    font-weight: 700;
}

/* --- 11. PROJECT MODALS (POPUPS) --- */
.project-modal {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(15, 16, 40, 0.85); /* Dark cinematic overlay */
    backdrop-filter: blur(5px);
    align-items: center;
    justify-content: center;
}

.project-modal.active {
    display: flex; /* Shown when clicked */
}

.modal-content {
    background-color: var(--c-bg-ffffff);
    width: 80%;
    max-width: 900px;
    max-height: 85vh;
    border-radius: 12px;
    padding: 40px;
    position: relative;
    overflow-y: auto; /* Allows scrolling if content is long */
    box-shadow: 0 25px 50px rgba(0,0,0,0.3);
}

.close-btn {
    position: absolute;
    top: 20px;
    right: 30px;
    color: var(--c-text-999999);
    font-size: 2.5rem;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.2s ease;
}

.close-btn:hover { color: var(--airx-red); }

.modal-header { margin-bottom: 30px; border-bottom: 1px solid var(--c-border-eeeeee); padding-bottom: 20px; }
.modal-header h3 { font-size: 2rem; color: var(--heading-color); margin-bottom: 10px; }
.modal-product { color: var(--airx-red); font-weight: 600; font-size: 1.1rem; }

.modal-body { display: flex; gap: 40px; }

.modal-branches { width: 35%; }
.modal-branches h4 { margin-bottom: 15px; color: var(--heading-color); }
.modal-branches ul { list-style: square; padding-left: 20px; color: var(--c-text-555555); line-height: 1.8; }

.modal-gallery {
    width: 65%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.modal-gallery img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--c-border-eeeeee);
}


/* ============================================================
   HOME PAGE
   Scoped under body.hx. Colours come from the --hx-* tokens below,
   which follow the site-wide --ax-* surface tokens and so flip for
   dark mode on their own. The dark panels (hero, ticker, category
   cards, the features band, contact info) are dark in both themes
   on purpose.
   ============================================================ */

.hx {
    --hx-bg: var(--ax-page);
    --hx-tint: var(--ax-tint);
    --hx-card: var(--ax-card);
    --hx-ink: var(--ax-strong);
    --hx-text: var(--ax-text);
    --hx-line: var(--ax-line);
    --hx-shadow: var(--ax-shadow);
    --hx-red: var(--airx-red);
    --hx-navy: var(--airx-navy);
    color: var(--hx-text);
}
html:has(body.hx) { scroll-behavior: smooth; }
.hx section[id] { scroll-margin-top: 96px; }
.hx main a:focus-visible,
.hx main button:focus-visible { outline: 3px solid var(--ax-ice); outline-offset: 3px; }

/* ---- Buttons ---- */
.hx-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 54px;
    padding: 0 28px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-family: inherit;
    font-size: 0.97rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.3s var(--ax-ease), background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, filter 0.3s ease;
}
.hx-btn svg { flex-shrink: 0; transition: transform 0.3s var(--ax-ease); }
.hx-btn:hover svg { transform: translateX(4px); }
.hx-btn-primary {
    background: var(--ax-grad-red);
    color: #fff;
    box-shadow: 0 12px 30px rgba(218, 33, 40, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.hx-btn-primary:hover {
    transform: translateY(-3px);
    filter: brightness(1.07);
    box-shadow: 0 18px 38px rgba(218, 33, 40, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.hx-btn-primary:disabled { opacity: 0.7; cursor: default; transform: none; filter: none; }
.hx-btn-glass {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.26);
    color: #fff;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}
.hx-btn-glass:hover { background: #fff; border-color: #fff; color: var(--ax-ink); transform: translateY(-3px); }
.hx-btn-block { width: 100%; }


/* ==================== HERO ==================== */
.hx-hero { background: var(--ax-ink); }
.hx-hero-card {
    position: relative;
    isolation: isolate;
    min-height: max(640px, 100vh);
    min-height: max(640px, 100svh);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: linear-gradient(135deg, #14184a, var(--ax-ink));
    color: #fff;
}
.hx-slides { position: absolute; inset: 0; z-index: -3; overflow: hidden; }
.hx-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1.2s ease-in-out;
}
.hx-slide.active { opacity: 1; animation: hxZoom 9s ease-out forwards; }
@keyframes hxZoom {
    from { transform: scale(1.07); }
    to   { transform: scale(1); }
}
/* Left-to-right shade keeps the copy readable over any uploaded slide, plus
   soft fades behind the floating header (top) and the trust bar (bottom). */
.hx-hero-shade {
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        linear-gradient(90deg, rgba(6, 8, 28, 0.95) 0%, rgba(6, 8, 28, 0.8) 30%, rgba(6, 8, 28, 0.34) 56%, rgba(6, 8, 28, 0.04) 82%, rgba(6, 8, 28, 0) 100%),
        linear-gradient(0deg, rgba(6, 8, 28, 0.88) 0%, rgba(6, 8, 28, 0) 36%),
        linear-gradient(180deg, rgba(6, 8, 28, 0.5) 0%, rgba(6, 8, 28, 0) 20%);
}
/* Cool-air glow on the copy side, a warm brand ember in the bottom corner */
.hx-hero-glow {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(38% 48% at 14% 34%, rgba(57, 184, 255, 0.24), transparent 70%),
        radial-gradient(30% 40% at 0% 100%, rgba(218, 33, 40, 0.26), transparent 70%);
    mix-blend-mode: screen;
    animation: hxGlow 12s ease-in-out infinite alternate;
}
@keyframes hxGlow {
    from { opacity: 0.75; transform: translate3d(0, 0, 0); }
    to   { opacity: 1; transform: translate3d(2%, -2%, 0); }
}

.hx-hero-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 128px clamp(22px, 4vw, 44px) 28px;
}
.hx-hero-tag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
    padding: 8px 16px 8px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.08);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.92);
}
.hx-hero-tag i {
    position: relative;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #7fdcff;
    box-shadow: 0 0 12px #7fdcff;
}
.hx-hero-tag i::after {
    content: "";
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    border: 1px solid rgba(127, 220, 255, 0.7);
    animation: hxPing 2.2s ease-out infinite;
}
@keyframes hxPing {
    from { transform: scale(0.6); opacity: 1; }
    to   { transform: scale(1.9); opacity: 0; }
}
.hx-hero-content h1 {
    max-width: 840px;
    margin-bottom: 22px;
    font-size: clamp(2.35rem, min(5vw, 9.4vh), 4.6rem);
    line-height: 1.03;
    letter-spacing: -0.045em;
    font-weight: 700;
    color: #fff;
    text-wrap: balance;
}
.hx-hero-content h1 span {
    display: block;
    padding-bottom: 0.08em; /* keeps descenders inside the clipped gradient */
    background: var(--ax-grad-ice);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.hx-hero-content p {
    max-width: 520px;
    margin-bottom: 34px;
    font-size: clamp(1rem, 1.25vw, 1.14rem);
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.76);
}
.hx-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.hx-hero-foot {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 clamp(22px, 4vw, 44px) clamp(18px, 3vh, 30px);
}
.hx-hero-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 18px;
}
.hx-hero-progress { display: flex; align-items: center; gap: 18px; }
.hx-count {
    font-family: var(--font-display);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.5);
    font-variant-numeric: tabular-nums;
}
.hx-count b { font-size: 1.15rem; font-weight: 700; color: #fff; }
.hx-dots { display: flex; gap: 8px; }
.hx-dots button {
    position: relative;
    width: 34px;
    height: 3px;
    padding: 0;
    border: 0;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.26);
    cursor: pointer;
    overflow: hidden;
    transition: width 0.4s var(--ax-ease);
}
/* The active dot fills over the same 5s the autoplay timer waits */
.hx-dots button::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: #fff;
    transform: scaleX(0);
    transform-origin: left center;
}
.hx-dots button.active { width: 64px; }
.hx-dots button.active::before { animation: hxDot 5s linear forwards; }
@keyframes hxDot { to { transform: scaleX(1); } }
.hx-arrows { display: flex; gap: 8px; }
.hx-arrows button {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.24);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s var(--ax-ease);
}
.hx-arrows button:hover { background: #fff; border-color: #fff; color: var(--ax-ink); transform: scale(1.06); }

.hx-trust {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.07);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.hx-trust > div {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 22px;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    transition: background 0.3s ease;
}
.hx-trust > div:first-child { border-left: 0; }
.hx-trust > div:hover { background: rgba(255, 255, 255, 0.06); }
.hx-trust svg {
    flex-shrink: 0;
    box-sizing: content-box;
    padding: 11px;
    border-radius: 14px;
    color: #9fe3ff;
    background: rgba(127, 220, 255, 0.12);
    border: 1px solid rgba(127, 220, 255, 0.2);
}
.hx-trust p { margin: 0; min-width: 0; }
.hx-trust strong {
    display: block;
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #fff;
}
.hx-trust span {
    display: block;
    margin-top: 2px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
}


/* ==================== CATEGORY TICKER ==================== */
.hx-marquee {
    position: relative;
    overflow: hidden;
    padding: 20px 0;
    background: var(--ax-ink);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
/* Items fade out into the band at both ends */
.hx-marquee::before,
.hx-marquee::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 1;
    width: 12%;
    pointer-events: none;
}
.hx-marquee::before { left: 0; background: linear-gradient(90deg, var(--ax-ink), transparent); }
.hx-marquee::after { right: 0; background: linear-gradient(270deg, var(--ax-ink), transparent); }
.hx-marquee-track {
    display: flex;
    width: max-content;
    animation: hxMarquee 44s linear infinite;
}
.hx-marquee:hover .hx-marquee-track { animation-play-state: paused; }
.hx-marquee-track span {
    display: inline-flex;
    align-items: center;
    gap: 30px;
    padding-right: 30px;
    font-family: var(--font-display);
    font-size: 0.86rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    white-space: nowrap;
    color: rgba(255, 255, 255, 0.62);
}
.hx-marquee-track span::after {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 2px;
    background: var(--airx-red);
    transform: rotate(45deg);
    box-shadow: 0 0 12px rgba(218, 33, 40, 0.8);
}
@keyframes hxMarquee { to { transform: translateX(-50%); } }


/* ==================== SECTION FURNITURE ==================== */
.hx-section {
    padding: clamp(60px, 8vw, 116px) clamp(18px, 3vw, 32px);
    background: var(--hx-bg);
}
.hx-tint { background: var(--hx-tint); }
.hx-wrap { max-width: 1260px; margin: 0 auto; }
.hx-head {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 20px 80px;
    align-items: end;
    margin-bottom: clamp(34px, 4.6vw, 60px);
}
.hx-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 18px;
    padding: 7px 14px 7px 11px;
    border-radius: 999px;
    border: 1px solid var(--hx-line);
    background: var(--hx-card);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--hx-ink);
}
.hx-eyebrow::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--hx-red);
    box-shadow: 0 0 0 4px rgba(218, 33, 40, 0.16);
}
.hx-head h2 {
    font-size: clamp(1.85rem, 3.5vw, 3rem);
    line-height: 1.08;
    letter-spacing: -0.04em;
    font-weight: 700;
    color: var(--hx-ink);
    text-wrap: balance;
}
.hx-head p { font-size: 1.04rem; line-height: 1.7; color: var(--hx-text); }
.hx-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--hx-ink);
    text-decoration: none;
}
.hx-link svg {
    box-sizing: content-box;
    padding: 9px;
    border-radius: 50%;
    background: var(--hx-ink);
    color: var(--hx-bg);
    transition: transform 0.3s var(--ax-ease), background 0.3s ease, color 0.3s ease;
}
.hx-link:hover svg { background: var(--hx-red); color: #fff; transform: translateX(5px); }

/* ---- Dark band (features): same furniture, inverted ---- */
.hx-dark {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--ax-ink);
}
.hx-dark::before,
.hx-dark::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hx-dark::before {
    background:
        radial-gradient(42% 46% at 88% 0%, rgba(57, 184, 255, 0.2), transparent 70%),
        radial-gradient(40% 44% at 4% 100%, rgba(218, 33, 40, 0.2), transparent 70%),
        radial-gradient(50% 50% at 50% 50%, rgba(44, 52, 150, 0.22), transparent 75%);
}
.hx-dark::after {
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(80% 70% at 50% 30%, #000, transparent 90%);
    mask-image: radial-gradient(80% 70% at 50% 30%, #000, transparent 90%);
}
.hx-dark .hx-head h2 { color: #fff; }
.hx-dark .hx-head p { color: rgba(255, 255, 255, 0.68); }
.hx-dark .hx-eyebrow {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.16);
    color: #fff;
}
.hx-dark .hx-eyebrow::before { background: #7fdcff; box-shadow: 0 0 0 4px rgba(127, 220, 255, 0.18), 0 0 12px #7fdcff; }


/* ==================== PRODUCT LINEUP ==================== */
.hx-cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.hx-cat {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 500px;
    padding: 22px;
    border-radius: 32px;
    overflow: hidden;
    background: var(--ax-ink);
    color: #fff;
    text-decoration: none;
    box-shadow: var(--hx-shadow);
    transition: transform 0.5s var(--ax-ease), box-shadow 0.5s ease;
}
.hx-cat:hover { transform: translateY(-8px); box-shadow: 0 34px 70px rgba(8, 11, 36, 0.3); }
.hx-cat img {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.9s var(--ax-ease);
}
.hx-cat::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(6, 8, 28, 0.28) 0%, rgba(6, 8, 28, 0) 26%, rgba(6, 8, 28, 0.1) 46%, rgba(6, 8, 28, 0.94) 100%);
    transition: opacity 0.4s ease;
}
.hx-cat:hover img { transform: scale(1.07); }
.hx-cat-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.hx-chip {
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.26);
    background: rgba(8, 11, 36, 0.4);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.hx-cat-num {
    margin-left: auto;
    font-family: var(--font-display);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.78);
    text-shadow: 0 1px 8px rgba(6, 8, 28, 0.6);
}
.hx-cat-body { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; padding: 4px; }
.hx-cat-body h3 {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: #fff;
    margin-bottom: 8px;
}
.hx-cat-body p {
    max-width: 30ch;
    font-size: 0.94rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.76);
}
.hx-cat-go {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: var(--ax-ink);
    transition: background 0.35s ease, color 0.35s ease, transform 0.45s var(--ax-ease);
}
.hx-cat-go svg { width: 20px; height: 20px; transform: rotate(-45deg); transition: transform 0.45s var(--ax-ease); }
.hx-cat:hover .hx-cat-go { background: var(--airx-red); color: #fff; transform: scale(1.08); }
.hx-cat:hover .hx-cat-go svg { transform: rotate(0deg); }


/* ==================== FEATURES (slider, on the dark band) ====================
   One feature per slide: picture on the left, copy on the right, line
   indicators underneath. The track is a native scroll-snap row, so it also
   swipes on touch screens; phones narrow the slides into peeking cards
   (see the 760px block below). */
.hx-bento {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.hx-bento::-webkit-scrollbar { display: none; }
.hx-feat {
    position: relative;
    flex: 0 0 100%;
    scroll-snap-align: start;
    display: flex;
    align-items: stretch;
    padding: 12px;
    border-radius: 34px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.03));
    border: 1px solid rgba(255, 255, 255, 0.1);
    overflow: hidden;
    transition: border-color 0.45s ease;
}
.hx-feat:hover { border-color: rgba(127, 220, 255, 0.42); }
.hx-feat-visual {
    position: relative;
    isolation: isolate;
    flex: 0 0 52%;
    height: clamp(340px, 34vw, 470px);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 24px;
    overflow: hidden;
    background: linear-gradient(135deg, #1d2266, #0c0f30);
}
.hx-feat-visual::before,
.hx-feat-visual::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hx-feat-visual::after {
    background-image: radial-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px);
    background-size: 20px 20px;
}
.hx-tone-1::before { background: radial-gradient(60% 90% at 85% 0%, rgba(218, 33, 40, 0.5), transparent 62%); }
.hx-tone-2::before { background: radial-gradient(60% 90% at 12% 100%, rgba(93, 108, 255, 0.55), transparent 62%); }
.hx-tone-3::before { background: radial-gradient(60% 90% at 50% 0%, rgba(57, 184, 255, 0.42), transparent 62%); }
.hx-feat-png {
    max-width: 78%;
    max-height: 84%;
    object-fit: contain;
    filter: drop-shadow(0 16px 30px rgba(0, 0, 0, 0.4));
    transition: transform 0.6s var(--ax-ease);
}
.hx-feat:hover .hx-feat-png { transform: scale(1.06); }
.hx-feat-photo {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s var(--ax-ease);
}
.hx-feat:hover .hx-feat-photo { transform: scale(1.05); }
.hx-feat-icon {
    width: 92px;
    height: 92px;
    border-radius: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: 0 0 60px rgba(127, 220, 255, 0.35);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.hx-feat-copy {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(24px, 4.4vw, 68px);
}
.hx-feat-num {
    margin-bottom: 18px;
    font-family: var(--font-display);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.5);
    font-variant-numeric: tabular-nums;
}
.hx-feat-num b { font-size: 1.15rem; font-weight: 700; color: #9fe3ff; }
.hx-feat-copy h3 {
    font-size: clamp(1.5rem, 2.5vw, 2.3rem);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.035em;
    color: #fff;
    margin-bottom: 16px;
    text-wrap: balance;
}
.hx-feat-copy p { max-width: 46ch; font-size: 1.05rem; line-height: 1.7; color: rgba(255, 255, 255, 0.7); }

/* Slider controls: line indicators in the middle, arrows on the right */
.hx-feat-nav {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 20px;
    margin-top: 28px;
}
.hx-feat-dots { grid-column: 2; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.hx-feat-dots button {
    position: relative;
    width: 56px;
    height: 3px;
    padding: 0;
    border: 0;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.22);
    cursor: pointer;
    transition: background 0.3s ease;
}
.hx-feat-dots button::after { content: ""; position: absolute; inset: -12px 0; } /* taller hit area */
.hx-feat-dots button:hover { background: rgba(255, 255, 255, 0.45); }
.hx-feat-dots button.active { background: #7fdcff; box-shadow: 0 0 12px rgba(127, 220, 255, 0.7); }
.hx-feat-arrows { grid-column: 3; justify-self: end; }


/* ==================== WHY AIRX ==================== */
.hx-why { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
/* The cards are permanently the navy brand panel (white text, white icon
   tile); hovering only lifts the card and tilts the icon. */
.hx-why-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 22px;
    padding: 22px 24px;
    background:
        radial-gradient(90% 70% at 100% 0%, rgba(218, 33, 40, 0.5), transparent 60%),
        linear-gradient(160deg, #23266a, var(--ax-ink));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 18px 40px rgba(8, 11, 36, 0.18);
    transition: transform 0.45s var(--ax-ease), box-shadow 0.45s ease;
}
.hx-why-card:hover { transform: translateY(-8px); box-shadow: 0 30px 60px rgba(8, 11, 36, 0.3); }
.hx-why-top { display: flex; align-items: flex-start; justify-content: space-between; }
.hx-why-num {
    font-family: var(--font-display);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: #fff;
    opacity: 0.7;
}
.hx-icon {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--hx-red);
    background: #fff;
    transition: transform 0.5s var(--ax-ease);
}
.hx-why-card h3 {
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.2;
    color: #fff;
}
.hx-why-card:hover .hx-icon { transform: rotate(-6deg) scale(1.05); }


/* ---- Certifications panel (sits under the Why AirX cards) ---- */
.hx-certs {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
    align-items: center;
    gap: clamp(24px, 4vw, 56px);
    margin-top: 18px;
    padding: clamp(24px, 3.4vw, 44px);
    border-radius: 32px;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(60% 90% at 0% 0%, rgba(218, 33, 40, 0.42), transparent 62%),
        radial-gradient(55% 90% at 100% 100%, rgba(57, 184, 255, 0.28), transparent 65%),
        linear-gradient(160deg, #20246a, var(--ax-ink));
    box-shadow: var(--ax-shadow);
}
.hx-certs::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: linear-gradient(90deg, #000, transparent 70%);
    mask-image: linear-gradient(90deg, #000, transparent 70%);
}
.hx-certs .hx-eyebrow { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.2); color: #fff; }
.hx-certs .hx-eyebrow::before { background: #7fdcff; box-shadow: 0 0 0 4px rgba(127, 220, 255, 0.18), 0 0 12px #7fdcff; }
.hx-certs-intro h3 {
    font-size: clamp(1.5rem, 2.5vw, 2.2rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.04em;
    color: #fff;
    text-wrap: balance;
}
.hx-certs-list { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.hx-certs-list li {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 14px 18px;
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.06);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    text-align: center;
    transition: transform 0.4s var(--ax-ease), background 0.4s ease, border-color 0.4s ease;
}
.hx-certs-list li:hover { transform: translateY(-6px); background: rgba(255, 255, 255, 0.11); border-color: rgba(127, 220, 255, 0.4); }
/* White tile: two of the marks are drawn for a light background */
.hx-cert-logo {
    width: 92px;
    height: 92px;
    margin-bottom: 16px;
    padding: 10px;
    border-radius: 20px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.3);
}
.hx-cert-logo img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; border-radius: 6px; }
.hx-certs-list strong {
    font-family: var(--font-display);
    font-size: 0.98rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #fff;
}
.hx-certs-list li > span:last-child { margin-top: 4px; font-size: 0.76rem; line-height: 1.45; color: rgba(255, 255, 255, 0.64); }


/* ==================== FEATURED PROJECTS ==================== */
.hx .fp-carousel-wrap { position: relative; display: flex; align-items: center; gap: 14px; }
.hx .fp-track {
    display: flex;
    gap: 22px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 6px 2px 18px;
    flex: 1;
    justify-content: safe center;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.hx .fp-track::-webkit-scrollbar { display: none; }
.hx .fp-card {
    flex: 0 0 330px;
    scroll-snap-align: start;
    padding: 10px;
    background: var(--hx-card);
    border: 1px solid var(--hx-line);
    border-radius: 28px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: var(--ax-shadow-sm);
    transition: transform 0.45s var(--ax-ease), box-shadow 0.45s ease;
}
.hx .fp-card:hover { transform: translateY(-8px); box-shadow: var(--ax-shadow-lg); }
.hx .fp-card-image {
    position: relative;
    height: 220px;
    border-radius: 20px;
    background: var(--hx-tint);
    overflow: hidden;
}
.hx .fp-card-image img {
    width: 100%;
    height: 100%;
    display: block;
    transition: transform 0.7s var(--ax-ease);
}
.hx .fp-card-image img.contain-image { object-fit: contain; padding: 16px; }
.hx .fp-card-image img.fill-image { object-fit: cover; }
.hx .fp-card:hover .fp-card-image img { transform: scale(1.06); }
.hx .fp-card:hover .card-overlay { opacity: 1; }
.hx .fp-card-details { padding: 18px 14px 16px; }
.hx .fp-card-details h4 {
    font-size: 1.12rem;
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1.3;
    color: var(--hx-ink);
    margin-bottom: 12px;
}
.hx .fp-nav-btn {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--hx-card);
    border: 1px solid var(--hx-line);
    color: var(--hx-ink);
    cursor: pointer;
    box-shadow: var(--ax-shadow-sm);
    transition: background 0.25s ease, color 0.25s ease, opacity 0.25s ease, transform 0.25s var(--ax-ease);
}
.hx .fp-nav-btn:hover:not(:disabled) { background: var(--hx-ink); border-color: var(--hx-ink); color: var(--hx-bg); transform: scale(1.06); }
.hx .fp-nav-btn:disabled { opacity: 0.35; cursor: default; }

/* Featured project modal — mirrors the .projects modal design */
.hx .fp-modal {
    display: none;
    position: fixed;
    z-index: 2000;
    inset: 0;
    background: rgba(6, 8, 28, 0.78);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.hx .fp-modal.active { display: flex; }

.hx .fp-modal-content {
    background: var(--c-bg-ffffff);
    width: 100%;
    max-width: 940px;
    max-height: 88vh;
    border-radius: 28px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.45);
    animation: axModalIn 0.45s var(--ax-ease);
}

.hx .fp-modal-header {
    padding: 32px 40px 24px;
    border-bottom: 1px solid var(--c-border-eef0f4);
    flex-shrink: 0;
}
.hx .fp-modal-header h3 {
    font-size: 1.8rem;
    color: var(--heading-color);
    font-weight: 700;
    letter-spacing: -0.03em;
    margin-bottom: 14px;
    line-height: 1.15;
}

.hx .fp-close-btn {
    position: absolute;
    top: 18px;
    right: 20px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--c-bg-f4f5f8);
    border: none;
    color: var(--heading-color);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, transform 0.3s var(--ax-ease);
    z-index: 10;
}
.hx .fp-close-btn:hover { background: var(--airx-red); color: #fff; transform: rotate(90deg); }

.hx .fp-modal-body {
    display: flex;
    overflow-y: auto;
    flex: 1;
}

.hx .fp-modal-branches {
    width: 34%;
    flex-shrink: 0;
    padding: 30px 32px;
    border-right: 1px solid var(--c-border-eef0f4);
    background: var(--c-bg-fafbfc);
}
.hx .fp-modal-branches h4 {
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--c-text-8f92b3);
    margin-bottom: 10px;
    margin-top: 22px;
}
.hx .fp-modal-branches h4:first-child { margin-top: 0; }
.hx .fp-modal-branches p {
    color: var(--c-text-555555);
    font-size: 0.95rem;
    line-height: 1.75;
}

.hx .fp-modal-gallery {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 20px;
    align-content: start;
}
.hx .fp-modal-gallery img {
    width: 100%;
    height: 170px;
    object-fit: cover;
    border-radius: 16px;
    border: 1px solid var(--c-border-eef0f4);
    transition: transform 0.4s var(--ax-ease);
    cursor: zoom-in;
}
.hx .fp-modal-gallery img:hover { transform: scale(1.03); }

@media (max-width: 860px) {
    .hx .fp-modal-body { flex-direction: column; }
    .hx .fp-modal-branches { width: 100%; border-right: none; border-bottom: 1px solid var(--c-border-eef0f4); padding: 24px 28px; }
    .hx .fp-modal-gallery { grid-template-columns: 1fr 1fr; padding: 18px; }
    .hx .fp-modal-content { max-height: 90vh; border-radius: 22px; }
    .hx .fp-modal-header { padding: 24px 28px 18px; }
}
@media (max-width: 600px) {
    .hx .fp-modal-gallery { grid-template-columns: 1fr; }
}


/* ==================== CONTACT ==================== */
.hx-contact {
    display: grid;
    grid-template-columns: 5fr 7fr;
    padding: 12px;
    background: var(--hx-card);
    border: 1px solid var(--hx-line);
    border-radius: 36px;
    box-shadow: var(--hx-shadow);
}
.hx-contact-info {
    position: relative;
    isolation: isolate;
    padding: clamp(28px, 4vw, 50px);
    border-radius: 26px;
    color: #fff;
    background:
        radial-gradient(70% 50% at 0% 0%, rgba(218, 33, 40, 0.5), transparent 62%),
        radial-gradient(70% 55% at 100% 100%, rgba(57, 184, 255, 0.3), transparent 65%),
        linear-gradient(160deg, #20246a, var(--ax-ink));
    overflow: hidden;
}
.hx-contact-info::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: linear-gradient(180deg, #000, transparent 85%);
    mask-image: linear-gradient(180deg, #000, transparent 85%);
    pointer-events: none;
}
.hx-contact-info .hx-eyebrow {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: #fff;
}
.hx-contact-info .hx-eyebrow::before { background: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.2); }
.hx-contact-info h2 {
    font-size: clamp(1.9rem, 3.2vw, 2.8rem);
    line-height: 1.05;
    letter-spacing: -0.04em;
    font-weight: 700;
    color: #fff;
    margin-bottom: 14px;
}
.hx-contact-info > p {
    font-size: 1rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.76);
    margin-bottom: 32px;
}
.hx-contact-info ul { list-style: none; display: grid; gap: 10px; }
.hx-contact-info li {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.06);
    transition: background 0.3s ease, transform 0.3s var(--ax-ease);
}
.hx-contact-info li:hover { background: rgba(255, 255, 255, 0.12); transform: translateX(4px); }
.hx-ci {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
}
.hx-contact-info small {
    display: block;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.58);
}
.hx-contact-info li a,
.hx-contact-info li div > span { font-size: 0.98rem; font-weight: 600; color: #fff; text-decoration: none; overflow-wrap: anywhere; }
.hx-contact-info li a:hover { text-decoration: underline; }
.hx-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.hx-badges span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.08);
    font-size: 0.76rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
}
.hx-badges span::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #7fdcff;
}

.hx-contact-form { display: flex; flex-direction: column; padding: clamp(22px, 3.6vw, 44px); }
/* The message box stretches so the form always ends level with the info panel */
.hx-contact-form form { flex: 1; display: flex; flex-direction: column; gap: 18px; }
.hx-contact-form form > .hx-field:last-of-type,
.hx-contact-form form > .hx-field:last-of-type textarea { flex: 1; }
.hx-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.hx-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.hx-field label { font-size: 0.8rem; font-weight: 700; color: var(--hx-ink); }
.hx-field input,
.hx-field select,
.hx-field textarea {
    width: 100%;
    padding: 15px 17px;
    border-radius: 16px;
    border: 1.5px solid transparent;
    background: var(--hx-tint);
    color: var(--hx-ink);
    font-family: inherit;
    font-size: 0.96rem;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.hx-field select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 44px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238f92b3' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    cursor: pointer;
}
.hx-field textarea { resize: vertical; min-height: 120px; }
.hx-field ::placeholder { color: var(--hx-text); opacity: 0.55; }
.hx-field input:hover,
.hx-field select:hover,
.hx-field textarea:hover { border-color: var(--hx-line); }
.hx-field input:focus,
.hx-field select:focus,
.hx-field textarea:focus {
    outline: none;
    background-color: var(--hx-card);
    border-color: var(--airx-navy);
    box-shadow: 0 0 0 4px rgba(31, 33, 81, 0.1);
}
[data-theme="dark"] .hx-field input:focus,
[data-theme="dark"] .hx-field select:focus,
[data-theme="dark"] .hx-field textarea:focus { border-color: var(--ax-ice); box-shadow: 0 0 0 4px rgba(57, 184, 255, 0.16); }
.hx .home-contact-alert {
    padding: 14px 18px;
    border-radius: 16px;
    margin-bottom: 18px;
    font-size: 0.9rem;
    font-weight: 600;
}
.hx .home-contact-alert--success { background: var(--c-bg-edfaf1); color: #1a7a45; border: 1px solid #b6e8ca; }
.hx .home-contact-alert--error   { background: var(--c-bg-fef2f2); color: #991b1b; border: 1px solid #fca5a5; }


/* ==================== RESPONSIVE ==================== */
@media (max-width: 1080px) {
    .hx-cat { min-height: 440px; }
    .hx-why { grid-template-columns: repeat(2, 1fr); }
    .hx-trust > div { padding: 16px; gap: 12px; }
    .hx-trust svg { padding: 9px; }
}
@media (max-width: 900px) {
    .hx-certs { grid-template-columns: 1fr; }
    .hx-head { grid-template-columns: 1fr; gap: 14px; }
    .hx-cats { grid-template-columns: 1fr; }
    .hx-cat { min-height: 380px; }
    .hx-contact { grid-template-columns: 1fr; }
    .hx-trust { grid-template-columns: repeat(2, 1fr); }
    .hx-trust > div:nth-child(3) { border-left: 0; }
    .hx-trust > div:nth-child(n + 3) { border-top: 1px solid rgba(255, 255, 255, 0.1); }
}
@media (max-width: 760px) {
    /* Phone hero: the photo gets its own band at the top (fully visible and
       swipeable), fading into solid navy where the copy sits — no text over
       the picture, so it stays readable and the image isn't hidden. */
    .hx-hero-card { min-height: 0; touch-action: pan-y; }
    .hx-slides, .hx-hero-shade { bottom: auto; height: 400px; }
    .hx-slide { background-position: 72% center; }
    .hx-hero-shade {
        background: linear-gradient(180deg, rgba(8, 11, 36, 0.5) 0%, rgba(8, 11, 36, 0) 30%, rgba(8, 11, 36, 0.55) 74%, var(--ax-ink) 100%);
    }
    .hx-hero-glow { display: none; }
    .hx-hero-content { padding: 418px 20px 26px; }
    .hx-contact-info { padding: 26px 20px; }
    .hx-contact-info li a,
    .hx-contact-info li div > span { font-size: 0.9rem; }
    .hx-hero-tag { margin-bottom: 18px; }
    .hx-hero-content h1 { font-size: clamp(2.1rem, 9.6vw, 2.8rem); margin-bottom: 16px; }
    .hx-hero-content p { font-size: 0.98rem; line-height: 1.6; margin-bottom: 26px; }
    .hx-actions { width: 100%; flex-wrap: nowrap; gap: 10px; }
    .hx-actions .hx-btn { flex: 1 1 0; min-width: 0; height: 52px; padding: 0 12px; font-size: 0.9rem; white-space: nowrap; }
    .hx-actions .hx-btn svg { display: none; }
    .hx-hero-controls { position: absolute; top: 336px; left: 20px; right: 20px; padding: 0; z-index: 2; }
    .hx-arrows button { width: 40px; height: 40px; }
    .hx-hero-foot { padding: 0 20px 26px; }
    .hx-trust { border-radius: 20px; }
    .hx-trust > div { padding: 14px; gap: 10px; }
    .hx-trust svg { width: 16px; height: 16px; padding: 8px; border-radius: 11px; }
    .hx-trust strong { font-size: 0.92rem; }
    .hx-trust span { font-size: 0.6rem; letter-spacing: 0.06em; }
    .hx-marquee { padding: 16px 0; }
    /* Phone features: the same swipeable track, but each slide becomes a
       narrower stacked card (picture on top) with a peek of the next one so
       it reads as swipeable. The desktop indicators and arrows are hidden. */
    .hx-bento {
        gap: 14px;
        margin: 0 -18px;
        padding: 0 18px 6px;
        scroll-padding-left: 18px;
    }
    .hx-feat {
        flex: 0 0 84%;
        flex-direction: column;
        padding: 10px;
        border-radius: 24px;
    }
    .hx-feat-visual { flex: none; height: 180px; border-radius: 16px; }
    .hx-feat-icon { width: 68px; height: 68px; border-radius: 22px; }
    .hx-feat-png { max-width: 62%; max-height: 68%; }
    .hx-feat-copy { display: block; padding: 16px 10px 12px; }
    .hx-feat-num { display: none; }
    .hx-feat-copy h3 { font-size: 1.04rem; font-weight: 600; margin-bottom: 6px; }
    .hx-feat-copy p { font-size: 0.88rem; line-height: 1.55; }
    .hx-feat-nav { display: none; }
    .hx-cat { border-radius: 26px; padding: 18px; }
    .hx-cat-body h3 { font-size: 1.4rem; }
    .hx-contact { padding: 8px; border-radius: 30px; }
    .hx-contact-info { border-radius: 22px; }
    .hx-row { grid-template-columns: 1fr; }
    .hx .fp-nav-btn { display: none; }
    .hx .fp-card { flex-basis: 78vw; }
}
@media (max-width: 560px) {
    .hx-certs { margin-top: 12px; padding: 22px 16px; border-radius: 26px; }
    .hx-certs-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .hx-certs-list li { padding: 16px 10px; border-radius: 18px; }
    .hx-cert-logo { width: 72px; height: 72px; border-radius: 16px; margin-bottom: 12px; }
    .hx-why { gap: 12px; }
    .hx-why-card { padding: 16px 18px; gap: 16px; border-radius: 22px; }
    .hx-why-card h3 { font-size: 1.05rem; }
    .hx-icon { width: 48px; height: 48px; border-radius: 16px; }
    .hx-icon svg { width: 20px; height: 20px; }
}
@media (prefers-reduced-motion: reduce) {
    .hx-slide.active, .hx-hero-glow, .hx-hero-tag i::after, .hx-marquee-track { animation: none; }
    .hx-dots button.active::before { animation: none; transform: scaleX(1); }
    .hx-bento { scroll-behavior: auto; }
    .hx-cat:hover, .hx-cat:hover img, .hx-feat:hover, .hx-feat:hover .hx-feat-png, .hx-feat:hover .hx-feat-photo,
    .hx-why-card:hover, .hx .fp-card:hover, .hx .fp-card:hover .fp-card-image img, .hx .fp-modal-gallery img:hover { transform: none; }
    .hx .fp-modal-content { animation: none; }
}



/* ============================================================
   ABOUT PAGE UPLIFT
   All rules scoped under body.about — zero impact on other pages.
   ============================================================ */

/* ---- Scroll reveal ---- */
.about [data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.about [data-reveal].is-visible { opacity: 1; transform: none; }
.about [data-reveal][data-reveal-delay="1"] { transition-delay: 0.10s; }
.about [data-reveal][data-reveal-delay="2"] { transition-delay: 0.20s; }
.about [data-reveal][data-reveal-delay="3"] { transition-delay: 0.30s; }

/* ---- Eyebrow labels ---- */
.about-section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--airx-red);
    margin-bottom: 14px;
}
.about-section-eyebrow::before {
    content: "";
    display: inline-block;
    width: 26px;
    height: 2px;
    background: var(--airx-red);
    flex-shrink: 0;
}


/* ==================== COMPANY STORY ==================== */
.about .company-story {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 100px 7%;
    background-color: var(--c-bg-ffffff);
    gap: 70px;
}

.about .story-content { width: 50%; }

.about .story-content h2 {
    font-size: clamp(2rem, 3.5vw, 2.7rem);
    color: var(--heading-color);
    margin-bottom: 24px;
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -0.5px;
}

.about .story-content p {
    color: var(--c-text-555555);
    font-size: 1.05rem;
    line-height: 1.8;
    margin-bottom: 20px;
}

/* Mini stats row inside story */
.story-highlights {
    display: flex;
    gap: 32px;
    margin-top: 36px;
    padding-top: 32px;
    border-top: 1px solid var(--c-border-eef0f4);
}
.story-highlight {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.story-highlight strong {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--heading-color);
    line-height: 1;
}
.story-highlight span {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--c-text-8f92b3);
    font-weight: 600;
}

/* Story image with badge */
.about .story-visual {
    width: 48%;
    border-radius: 16px;
    overflow: visible;
    box-shadow: 0 24px 60px rgba(0,0,0,0.10);
    position: relative;
    flex-shrink: 0;
}
.about .story-visual img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 16px;
    transition: transform 0.6s ease;
}
.about .story-visual:hover img { transform: scale(1.03); }
.about .story-visual::after {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 5px;
    height: 100%;
    background: var(--airx-red);
    border-radius: 5px 0 0 16px;
}

.story-badge {
    position: absolute;
    top: -18px;
    right: -18px;
    z-index: 2;
    background: var(--airx-navy);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 10px 20px;
    border-radius: 50px;
    box-shadow: 0 8px 24px rgba(17,18,43,0.25);
    border: 2px solid rgba(255,255,255,0.15);
}


/* ==================== RESPONSIVE (company story) ==================== */
@media (max-width: 960px) {
    .about .company-story {
        flex-direction: column;
        gap: 44px;
        padding: 70px 6%;
    }
    .about .story-content,
    .about .story-visual { width: 100%; }
    .about .story-visual { overflow: hidden; }
    .story-badge { top: 14px; right: 14px; }
}

@media (max-width: 600px) {
    .story-highlights { flex-direction: column; gap: 18px; }
}

@media (prefers-reduced-motion: reduce) {
    .about [data-reveal] { opacity: 1; transform: none; transition: none; }
    .about .story-visual:hover img { transform: none; }
}


/* ============================================================
   ABOUT PAGE — HERO / LEADERSHIP / GROWTH TRAJECTORY
   Layered on top of the ABOUT PAGE UPLIFT rules above.
   ============================================================ */

/* ---- Hero (left-aligned) ---- */
.abx-hero {
    background-image:
        linear-gradient(115deg, rgba(15, 16, 40, 0.92) 0%, rgba(17, 18, 43, 0.68) 55%, rgba(17, 18, 43, 0.4) 100%),
        url('../images/about-hero-bg.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    display: flex;
    align-items: center;
    min-height: 620px;
    padding: 170px 7% 70px;
    border-bottom: 4px solid var(--airx-red);
}
.abx-hero-inner { max-width: 660px; }
.abx-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 18px;
}
.abx-eyebrow::before { content: ""; display: inline-block; width: 26px; height: 2px; background: var(--airx-red); flex-shrink: 0; }
.abx-hero h1 {
    font-size: clamp(2.3rem, 4.6vw, 3.7rem);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.5px;
    color: #fff;
    margin-bottom: 20px;
    text-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
.abx-hero p {
    font-size: 1.12rem;
    color: #d1d3e8;
    max-width: 560px;
    line-height: 1.7;
    margin-bottom: 32px;
}
.abx-hero-pills { display: flex; flex-wrap: wrap; gap: 12px; }
.abx-pill {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 10px 18px;
    border-radius: 50px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.abx-pill svg { color: var(--airx-red); flex-shrink: 0; }

/* ---- Leadership spotlight (prominent, high on the page) ---- */
.abx-leaders { padding: 110px 7% 100px; background: var(--c-bg-ffffff); }
.abx-leaders-header { max-width: 680px; margin: 0 auto 70px; text-align: center; }
.abx-leaders-header h2 { font-size: clamp(2rem, 3.2vw, 2.6rem); font-weight: 800; letter-spacing: -0.5px; margin-bottom: 16px; line-height: 1.15; color: var(--heading-color); }
.abx-leaders-header p { color: var(--c-text-6b6f85); font-size: 1.06rem; line-height: 1.7; }

.abx-leader-row {
    display: flex;
    align-items: center;
    gap: 70px;
    max-width: 1080px;
    margin: 0 auto;
}
.abx-leader-row + .abx-leader-row { margin-top: 90px; }
.abx-leader-row-rev { flex-direction: row-reverse; }

.abx-leader-photo {
    position: relative;
    flex: 0 0 40%;
    max-width: 400px;
    aspect-ratio: 4 / 5;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 30px 70px rgba(17, 18, 43, 0.16);
}
.abx-leader-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.abx-leader-badge {
    position: absolute;
    left: 20px;
    bottom: 20px;
    background: var(--airx-red);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 9px 18px;
    border-radius: 50px;
    box-shadow: 0 8px 22px rgba(218, 33, 40, 0.35);
}

.abx-leader-text { flex: 1; position: relative; }
.abx-quote-mark {
    position: absolute;
    top: -54px;
    left: -6px;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 7rem;
    font-weight: 800;
    line-height: 1;
    color: var(--airx-red);
    opacity: 0.14;
    pointer-events: none;
    user-select: none;
}
.abx-leader-row-rev .abx-quote-mark { left: auto; right: -6px; }
.abx-leader-name { display: block; font-size: 1.5rem; font-weight: 800; color: var(--heading-color); letter-spacing: -0.3px; }
.abx-leader-role { display: block; font-size: 0.8rem; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--airx-red); margin: 8px 0 20px; }
.abx-leader-text p { color: var(--c-text-555555); font-size: 1.03rem; line-height: 1.85; margin-bottom: 18px; position: relative; }
.abx-leader-text p:last-child { margin-bottom: 0; }

/* ---- Our Growth Trajectory (map + numbers, combined, dark) ---- */
.abx-growth {
    background: linear-gradient(135deg, #1b1d47 0%, #11122b 60%);
    padding: 100px 7%;
    position: relative;
    overflow: hidden;
}
.abx-growth::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px);
    background-size: 24px 24px;
    pointer-events: none;
}
.abx-growth-header { position: relative; z-index: 1; max-width: 680px; margin: 0 auto 60px; text-align: center; }
.abx-growth-header h2 { font-size: clamp(2rem, 3.2vw, 2.6rem); font-weight: 800; letter-spacing: -0.5px; margin-bottom: 16px; line-height: 1.15; color: #fff; }
.abx-growth-header p { color: rgba(255, 255, 255, 0.65); font-size: 1.05rem; line-height: 1.7; }

.abx-growth-body {
    position: relative;
    z-index: 1;
    max-width: 1140px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 60px;
}
.abx-growth-map {
    flex: 0 0 56%;
    background: var(--c-bg-ffffff);
    border-radius: 22px;
    overflow: hidden;
    padding: 20px;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.3);
    transition: transform 0.5s ease, box-shadow 0.5s ease;
}
.abx-growth-map:hover { transform: translateY(-6px); }
.abx-growth-map img { width: 100%; height: auto; display: block; border-radius: 12px; }

.abx-growth-stats { flex: 1; display: flex; flex-direction: column; }
.abx-stat-row {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 22px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.abx-stat-row:last-child { border-bottom: none; }
.abx-stat-icon {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--airx-red);
}
.abx-stat-row strong { display: block; font-size: 1.7rem; font-weight: 800; color: #fff; line-height: 1.2; }
.abx-stat-row span { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 1.2px; color: rgba(255, 255, 255, 0.55); font-weight: 600; }

@media (max-width: 960px) {
    .abx-leader-row, .abx-leader-row-rev { flex-direction: column; gap: 40px; text-align: center; }
    .abx-leader-photo { max-width: 320px; }
    .abx-quote-mark, .abx-leader-row-rev .abx-quote-mark { left: 50%; transform: translateX(-50%); right: auto; top: -46px; }
    .abx-leader-row + .abx-leader-row { margin-top: 70px; }

    .abx-growth-body { flex-direction: column; }
    .abx-growth-map { flex-basis: auto; width: 100%; max-width: 560px; }
    .abx-growth-stats { width: 100%; max-width: 560px; }
}

@media (max-width: 600px) {
    .abx-hero { min-height: 0; padding: 150px 6% 60px; background-attachment: scroll; }
    .abx-hero p { max-width: none; }
    .abx-leaders { padding: 70px 6% 60px; }
    .abx-leaders-header { margin-bottom: 46px; }
    .abx-growth { padding: 70px 6%; }
}


/* ============================================================
   PROJECTS PAGE UPLIFT
   All rules scoped under body.projects — zero impact on other pages.
   ============================================================ */

/* ---- Scroll reveal ---- */
.projects [data-reveal] {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.65s ease, transform 0.65s ease;
}
.projects [data-reveal].is-visible { opacity: 1; transform: none; }
.projects [data-reveal][data-reveal-delay="1"] { transition-delay: 0.08s; }
.projects [data-reveal][data-reveal-delay="2"] { transition-delay: 0.16s; }
.projects [data-reveal][data-reveal-delay="3"] { transition-delay: 0.24s; }


/* ==================== HERO ==================== */
.projects .projects-hero {
    background:
        linear-gradient(rgba(13, 14, 35, 0.88), rgba(13, 14, 35, 0.75)),
        url('../images/projects-bg.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    width: 100%;
    margin-left: 0;
    min-height: 52vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 160px 20px 70px;
    border-bottom: 4px solid var(--airx-red);
    color: white;
}

/* Eyebrow */
.proj-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.7);
    margin-bottom: 16px;
}
.proj-eyebrow::before {
    content: "";
    display: inline-block;
    width: 26px;
    height: 2px;
    background: var(--airx-red);
    flex-shrink: 0;
}

.projects .projects-hero h1 {
    font-size: clamp(2.2rem, 5vw, 3.6rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.5px;
    margin-bottom: 16px;
    text-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

.projects .projects-hero > p {
    font-size: 1.1rem;
    color: #c8cae0;
    max-width: 560px;
    line-height: 1.65;
    margin-bottom: 44px;
}

/* Hero trust strip */
.proj-hero-stats {
    display: flex;
    gap: 1px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 12px;
    overflow: hidden;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 16px 40px rgba(0,0,0,0.25);
}
.proj-hero-stat {
    background: rgba(255,255,255,0.07);
    padding: 20px 36px;
    text-align: center;
    transition: background 0.2s;
}
.proj-hero-stat:hover { background: rgba(255,255,255,0.13); }
.proj-hero-stat strong {
    display: block;
    font-size: 1.7rem;
    font-weight: 800;
    color: #fff;
    line-height: 1;
    margin-bottom: 5px;
}
.proj-hero-stat span {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    color: rgba(255,255,255,0.55);
    font-weight: 600;
}


/* ==================== SECTION HEADER ==================== */
.projects .projects-container {
    padding: 90px 6%;
    background-color: var(--light-bg);
}

.proj-section-header {
    text-align: center;
    margin-bottom: 56px;
}
.proj-section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--airx-red);
    margin-bottom: 12px;
}
.proj-section-eyebrow::before {
    content: "";
    display: inline-block;
    width: 26px;
    height: 2px;
    background: var(--airx-red);
    flex-shrink: 0;
}
.proj-section-header h2 {
    font-size: clamp(1.9rem, 3.5vw, 2.6rem);
    color: var(--heading-color);
    font-weight: 800;
    letter-spacing: -0.4px;
    margin-bottom: 12px;
    line-height: 1.1;
}
.proj-section-header p {
    color: var(--c-text-6b6f85);
    font-size: 1.02rem;
    max-width: 480px;
    margin: 0 auto;
    line-height: 1.6;
}


/* ==================== PROJECT CARDS ==================== */
.projects .project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 28px;
}

.projects .project-card {
    background: var(--c-bg-ffffff);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(17,18,43,0.06);
    cursor: pointer;
    border: 1px solid var(--c-border-eef0f4);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.projects .project-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 45px rgba(17,18,43,0.12);
    border-color: transparent;
}
.projects .project-card:focus-visible {
    outline: 3px solid var(--airx-red);
    outline-offset: 2px;
}

/* Card image with hover overlay */
.projects .card-image {
    height: 210px;
    background: var(--c-bg-f4f5f7);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    border-bottom: none;
}

.projects .card-image img {
    transition: transform 0.5s ease;
}
.projects .project-card:hover .card-image img {
    transform: scale(1.07);
}

/* Hover reveal overlay */
.card-overlay {
    position: absolute;
    inset: 0;
    background: rgba(17, 18, 43, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.projects .project-card:hover .card-overlay { opacity: 1; }
.card-overlay-text {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--c-bg-ffffff);
    color: var(--heading-color);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 10px 20px;
    border-radius: 50px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.2);
}

/* Card details */
.projects .card-details {
    padding: 22px 22px 24px;
    text-align: left;
    border-top: 1px solid var(--c-border-f0f1f5);
}
.projects .card-details h4 {
    color: var(--heading-color);
    font-size: 1.12rem;
    font-weight: 800;
    margin-bottom: 10px;
    line-height: 1.3;
}

/* Capacity row with icon */
.card-capacity {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--c-bg-f4f5f8);
    border-radius: 50px;
    padding: 5px 12px;
    font-size: 0.85rem;
    color: var(--c-text-555555);
    margin: 0;
}
.card-capacity svg { color: var(--airx-red); flex-shrink: 0; }
.card-capacity span { color: var(--airx-red); font-weight: 700; }


/* ==================== EMPTY STATE ==================== */
.proj-empty {
    text-align: center;
    padding: 80px 20px;
    color: var(--c-text-9599b0);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}
.proj-empty p { font-size: 1.05rem; }


/* ==================== MODAL ==================== */
.projects .project-modal {
    display: none;
    position: fixed;
    z-index: 2000;
    inset: 0;
    background: rgba(13, 14, 35, 0.88);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.projects .project-modal.active { display: flex; }

.projects .modal-content {
    background: var(--c-bg-ffffff);
    width: 100%;
    max-width: 920px;
    max-height: 88vh;
    border-radius: 18px;
    padding: 0;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 30px 70px rgba(0,0,0,0.35);
}

/* Sticky header inside modal */
.projects .modal-header {
    padding: 30px 40px 24px;
    border-bottom: 1px solid var(--c-border-eef0f4);
    flex-shrink: 0;
}

.modal-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--airx-red);
    margin-bottom: 8px;
}
.modal-eyebrow::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 2px;
    background: var(--airx-red);
}

.projects .modal-header h3 {
    font-size: 1.8rem;
    color: var(--heading-color);
    font-weight: 800;
    margin-bottom: 14px;
    line-height: 1.15;
}

.modal-meta { display: flex; gap: 10px; flex-wrap: wrap; }

.modal-capacity-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--c-bg-f4f5f8);
    border-radius: 50px;
    padding: 6px 14px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--airx-red);
}

/* SVG close button */
.projects .close-btn {
    position: absolute;
    top: 18px;
    right: 20px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--c-bg-f4f5f8);
    border: none;
    color: var(--heading-color);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: inherit;
    transition: background 0.2s, color 0.2s;
    z-index: 10;
}
.projects .close-btn:hover { background: var(--airx-red); color: #fff; }
.projects .close-btn:focus-visible { outline: 3px solid var(--airx-red); outline-offset: 2px; }

/* Scrollable body */
.projects .modal-body {
    display: flex;
    gap: 0;
    overflow-y: auto;
    flex: 1;
}

/* Left text panel */
.projects .modal-branches {
    width: 34%;
    flex-shrink: 0;
    padding: 30px 32px;
    border-right: 1px solid var(--c-border-eef0f4);
    background: var(--c-bg-fafbfc);
}
.projects .modal-branches h4 {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--heading-color);
    margin-bottom: 10px;
    margin-top: 20px;
}
.projects .modal-branches h4:first-child { margin-top: 0; }
.projects .modal-branches p {
    color: var(--c-text-555555);
    font-size: 0.95rem;
    line-height: 1.75;
    margin-bottom: 0;
}

/* Right gallery panel */
.projects .modal-gallery {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 20px;
    align-content: start;
}

.modal-video-wrap {
    grid-column: span 2;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
}
.modal-video-wrap iframe {
    aspect-ratio: 16/9;
    border: none;
    display: block;
    width: 100%;
}

.modal-video-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--airx-red);
    color: #fff;
    padding: 12px 22px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    transition: background 0.2s;
    margin: 10px 0;
}
.modal-video-link:hover { background: #b51a20; }

.projects .modal-gallery img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid var(--c-border-eef0f4);
    transition: transform 0.3s ease;
    cursor: zoom-in;
}
.projects .modal-gallery img:hover { transform: scale(1.03); }

.modal-no-media {
    grid-column: span 2;
    color: var(--c-text-9599b0);
    font-size: 0.95rem;
    text-align: center;
    padding: 40px 20px;
}


/* ==================== RESPONSIVE ==================== */
@media (max-width: 860px) {
    .projects .modal-body { flex-direction: column; }
    .projects .modal-branches { width: 100%; border-right: none; border-bottom: 1px solid var(--c-border-eef0f4); padding: 24px 28px; }
    .projects .modal-gallery { grid-template-columns: 1fr 1fr; padding: 18px; }
    .projects .modal-content { max-height: 90vh; border-radius: 14px; }
    .projects .modal-header { padding: 24px 28px 18px; }
}

@media (max-width: 600px) {
    .projects .projects-hero { padding: 140px 20px 50px; }
    .projects .projects-hero h1 { font-size: 2rem; }
    .proj-hero-stats { flex-direction: column; border-radius: 10px; max-width: 220px; }
    .proj-hero-stat { padding: 16px 24px; }
    .projects .project-grid { grid-template-columns: 1fr; }
    .projects .projects-container { padding: 60px 5%; }
    .projects .modal-gallery { grid-template-columns: 1fr; }
    .modal-video-wrap { grid-column: span 1; }
}

@media (prefers-reduced-motion: reduce) {
    .projects [data-reveal] { opacity: 1; transform: none; transition: none; }
    .projects .project-card:hover .card-image img { transform: none; }
    .projects .modal-gallery img:hover { transform: none; }
}


/* ============================================================
   CONTACT PAGE
   All rules scoped under body.contact-page
   ============================================================ */

/* So #map (linked from the footer) doesn't land under the fixed header */
.contact-page section[id] { scroll-margin-top: 100px; }

/* ---- Scroll reveal ---- */
.contact-page [data-reveal] {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.contact-page [data-reveal].is-visible { opacity: 1; transform: none; }
.contact-page [data-reveal][data-reveal-delay="1"] { transition-delay: 0.15s; }

/* ---- Eyebrow label ---- */
.ct-eyebrow,
.ct-section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--airx-red);
    margin-bottom: 14px;
}
.ct-eyebrow::before,
.ct-section-eyebrow::before {
    content: "";
    display: inline-block;
    width: 26px;
    height: 2px;
    background: var(--airx-red);
    flex-shrink: 0;
}
.ct-hero .ct-eyebrow { color: rgba(255,255,255,0.75); }
.ct-hero .ct-eyebrow::before { background: rgba(255,255,255,0.5); }


/* ==================== HERO ==================== */
.contact-page .ct-hero {
    background:
        linear-gradient(rgba(15, 16, 40, 0.86), rgba(15, 16, 40, 0.72)),
        url('../images/technician-working.jpg') center / cover no-repeat fixed;
    padding: 190px 7% 90px;
    border-bottom: 4px solid var(--airx-red);
    color: #fff;
}
.ct-hero-inner { max-width: 680px; }

.ct-hero h1 {
    font-size: clamp(2.2rem, 4.5vw, 3.4rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.5px;
    margin-bottom: 18px;
    text-shadow: 0 4px 20px rgba(0,0,0,0.25);
}
.ct-hero > .ct-hero-inner > p {
    font-size: 1.1rem;
    color: #cdd0e8;
    line-height: 1.7;
    max-width: 540px;
}


/* ==================== QUICK CONTACT CARDS ==================== */
.ct-quick-cards {
    background: var(--airx-navy);
    padding: 0 7%;
}
.ct-quick-cards-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: rgba(255,255,255,0.08);
}

.ct-qcard {
    background: rgba(255,255,255,0.04);
    padding: 30px 28px;
    display: flex;
    align-items: center;
    gap: 16px;
    text-decoration: none;
    color: inherit;
    transition: background 0.25s;
    cursor: pointer;
}
.ct-qcard:hover { background: rgba(255,255,255,0.09); }

.ct-qcard-icon {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: rgba(218,33,40,0.15);
    color: var(--airx-red);
    display: flex;
    align-items: center;
    justify-content: center;
}
.ct-qcard--green .ct-qcard-icon {
    background: rgba(37, 211, 102, 0.12);
    color: #25d366;
}

.ct-qcard-text strong {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    color: rgba(255,255,255,0.55);
    letter-spacing: 0.8px;
    text-transform: uppercase;
    margin-bottom: 3px;
}
.ct-qcard-text span {
    display: block;
    font-size: 0.98rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 3px;
}
.ct-qcard-text em {
    font-style: normal;
    font-size: 0.75rem;
    color: rgba(255,255,255,0.45);
}


/* ==================== MAIN FORM + INFO ==================== */
.ct-main {
    background: var(--light-bg);
    padding: 90px 7% 30px;
}
.ct-main-inner {
    max-width: 1160px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 64px;
    align-items: start;
}


/* ---- Form column ---- */
.ct-form-col h2 {
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    font-weight: 800;
    color: var(--heading-color);
    line-height: 1.15;
    margin-bottom: 12px;
    letter-spacing: -0.4px;
}
.ct-form-intro {
    color: var(--c-text-666666);
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 32px;
}

/* Alerts */
.ct-alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 20px;
    border-radius: 10px;
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 28px;
}
.ct-alert svg { flex-shrink: 0; margin-top: 1px; }
.ct-alert--success { background: var(--c-bg-edfaf1); color: #1a7a45; border: 1px solid #b6e8ca; }
.ct-alert--success svg { color: #1a7a45; }
.ct-alert--error   { background: var(--c-bg-fef2f2); color: #991b1b; border: 1px solid #fca5a5; }
.ct-alert--error svg { color: #dc2626; }

/* Form layout */
.ct-form { display: flex; flex-direction: column; gap: 20px; }

.ct-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.ct-field { display: flex; flex-direction: column; gap: 7px; }

.ct-field label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--heading-color);
    letter-spacing: 0.2px;
}
.ct-required { color: var(--airx-red); }

.ct-field input,
.ct-field select,
.ct-field textarea {
    width: 100%;
    padding: 13px 16px;
    border: 1.5px solid var(--c-border-dde0e8);
    border-radius: 10px;
    background: var(--c-bg-ffffff);
    font-family: inherit;
    font-size: 0.97rem;
    color: var(--c-text-333333);
    transition: border-color 0.2s, box-shadow 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    appearance: none;
    -webkit-appearance: none;
}
.ct-field select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238f92b3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 42px;
    cursor: pointer;
}
.ct-field textarea { resize: vertical; min-height: 140px; }

.ct-field input::placeholder,
.ct-field textarea::placeholder { color: #b0b4c8; }

.ct-field input:focus,
.ct-field select:focus,
.ct-field textarea:focus {
    outline: none;
    border-color: var(--airx-navy);
    box-shadow: 0 0 0 3px rgba(31,33,81,0.08);
}

/* Submit button */
.ct-submit {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 32px;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 50px;
    cursor: pointer;
    border: none;
    align-self: flex-start;
    margin-top: 4px;
    background: var(--airx-red);
    color: #fff;
    transition: background 0.25s, transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 6px 20px rgba(218,33,40,0.25);
}
.ct-submit:hover {
    background: #b51a20;
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(218,33,40,0.30);
}
.ct-submit svg { transition: transform 0.2s; }
.ct-submit:hover svg { transform: translateX(3px); }


/* ---- Info column ---- */
.ct-info-col { display: flex; flex-direction: column; gap: 20px; }

.ct-info-card {
    background: var(--c-bg-ffffff);
    border-radius: 14px;
    padding: 26px 26px;
    display: flex;
    gap: 18px;
    align-items: flex-start;
    border: 1px solid var(--c-border-eef0f4);
    box-shadow: 0 4px 14px rgba(17,18,43,0.05);
}

.ct-info-icon {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: var(--c-bg-f4f5f8);
    color: var(--airx-red);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
}

.ct-info-card h4 {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--heading-color);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 12px;
}

.ct-info-card p {
    color: var(--c-text-555555);
    font-size: 0.95rem;
    line-height: 1.65;
    margin-bottom: 6px;
}

/* Office hours table */
.ct-hours-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
    margin-bottom: 10px;
}
.ct-hours-table td {
    padding: 6px 0;
    color: var(--c-text-555555);
    vertical-align: top;
}
.ct-hours-table td:first-child { width: 52%; color: var(--c-text-666666); }
.ct-hours-table td:last-child { font-weight: 600; color: var(--heading-color); }
.ct-closed { color: var(--c-text-a0a4b8); font-weight: 400 !important; }
.ct-hours-note {
    font-size: 0.8rem !important;
    color: var(--c-text-9599b0) !important;
    margin-top: 6px;
    line-height: 1.5 !important;
}

.ct-coverage { font-size: 0.88rem !important; color: var(--c-text-777777) !important; margin-top: 4px; }

/* Direct contact list */
.ct-contact-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ct-contact-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 0.88rem;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--c-border-f0f1f5);
}
.ct-contact-list li:last-child { border-bottom: none; padding-bottom: 0; }
.ct-contact-list li span { color: var(--c-text-888888); white-space: nowrap; }
.ct-contact-list li a {
    font-weight: 700;
    color: var(--heading-color);
    text-decoration: none;
    transition: color 0.2s;
}
.ct-contact-list li a:hover { color: var(--airx-red); }

/* Trust badges row */
.ct-trust-badges {
    background: var(--airx-navy);
    border-radius: 14px;
    padding: 20px 22px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 16px;
}
.ct-trust-badges span {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(255,255,255,0.8);
    letter-spacing: 0.3px;
}
.ct-trust-badges svg { color: var(--airx-red); flex-shrink: 0; }


/* ==================== MAP ==================== */
.ct-map-section { background: var(--c-bg-ffffff); }

.ct-map-header {
    text-align: center;
    padding: 70px 7% 40px;
}
.ct-map-header h2 {
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    font-weight: 800;
    color: var(--heading-color);
    margin-bottom: 10px;
    letter-spacing: -0.4px;
}
.ct-map-header p {
    color: var(--c-text-666666);
    font-size: 1rem;
    line-height: 1.65;
    max-width: 460px;
    margin: 0 auto;
}

.ct-map-embed {
    width: 100%;
    overflow: hidden;
    box-shadow: 0 -8px 30px rgba(17,18,43,0.06);
}
.ct-map-embed iframe { display: block; }


/* ==================== CTA STRIP ==================== */
.ct-cta-strip {
    background: linear-gradient(135deg, #1b1d47 0%, #11122b 60%);
    padding: 64px 7%;
    position: relative;
    overflow: hidden;
}
.ct-cta-strip::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px);
    background-size: 24px 24px;
    pointer-events: none;
}
/* "What We Do" -- moved here from the About page, redesigned as a dark
   feature banner (reuses .ct-cta-strip's gradient background above) instead
   of the plain photo + paragraph layout it used to have. */
.ct-do-inner {
    position: relative;
    z-index: 1;
    max-width: 1160px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 0.85fr 1fr;
    gap: 56px;
    align-items: center;
}
.ct-do-visual {
    position: relative;
    isolation: isolate;
}
.ct-do-visual::before {
    content: "";
    position: absolute;
    inset: -10%;
    z-index: -1;
    background: radial-gradient(closest-side, rgba(218, 33, 40, 0.4), transparent 70%);
    filter: blur(10px);
}
.ct-do-visual img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3.1;
    object-fit: cover;
    border-radius: 20px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4);
}
.ct-do-badge {
    position: absolute;
    left: -18px;
    bottom: -18px;
    background: #ffffff;
    color: var(--airx-navy);
    padding: 14px 22px;
    border-radius: 14px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
}
.ct-do-badge strong {
    display: block;
    font-size: 1.4rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--airx-red);
}
.ct-do-badge span {
    display: block;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #4a4e69;
    margin-top: 3px;
}
.ct-do-content h2 {
    font-size: clamp(1.7rem, 2.8vw, 2.3rem);
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
    margin-bottom: 14px;
}
.ct-do-content > p {
    color: rgba(255, 255, 255, 0.68);
    font-size: 1.02rem;
    line-height: 1.7;
    max-width: 520px;
    margin-bottom: 26px;
}
.ct-do-points {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 30px;
}
.ct-do-point {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff;
    font-size: 0.95rem;
    font-weight: 600;
}
.ct-do-point-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ff6b72;
    background: linear-gradient(135deg, rgba(218, 33, 40, 0.3), rgba(218, 33, 40, 0.08));
}
.ct-do-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    align-items: center;
}
.ct-do-call-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 13px 24px;
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.1);
    border: 1.5px solid rgba(255, 255, 255, 0.28);
    color: #fff;
    font-size: 0.95rem;
    font-weight: 700;
    text-decoration: none;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transition: background 0.2s ease, transform 0.2s ease;
}
.ct-do-call-btn:hover { background: rgba(255, 255, 255, 0.2); transform: translateY(-2px); }

/* WhatsApp button */
.ct-wa-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 24px;
    border-radius: 50px;
    background: #25d366;
    color: #fff;
    font-size: 0.95rem;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.2s, transform 0.2s;
    box-shadow: 0 6px 18px rgba(37,211,102,0.25);
}
.ct-wa-btn:hover { background: #1ebe5d; transform: translateY(-2px); }


/* ==================== RESPONSIVE ==================== */
@media (max-width: 1100px) {
    .ct-quick-cards-inner { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
    .ct-main-inner { grid-template-columns: 1fr; gap: 44px; }
    .ct-do-inner { grid-template-columns: 1fr; gap: 60px 0; text-align: center; }
    .ct-do-visual { max-width: 420px; margin: 0 auto; }
    .ct-do-content > p { max-width: 100%; margin-left: auto; margin-right: auto; }
    .ct-do-points { align-items: center; }
    .ct-do-actions { justify-content: center; }
}

@media (max-width: 640px) {
    .contact-page .ct-hero { padding: 150px 6% 60px; }
    .ct-quick-cards-inner { grid-template-columns: 1fr; }
    .ct-row { grid-template-columns: 1fr; }
    .ct-main { padding: 60px 6% 20px; }
    .ct-trust-badges { grid-template-columns: 1fr; }
    .ct-map-header { padding: 50px 6% 30px; }
    .ct-cta-strip { padding: 50px 6%; }
    .ct-do-badge { position: static; margin-top: -40px; display: inline-block; }
    .ct-do-actions { flex-direction: column; width: 100%; }
    .ct-do-call-btn, .ct-wa-btn, .ct-submit { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
    .contact-page [data-reveal] { opacity: 1; transform: none; transition: none; }
}


/* ============================================================
   PRODUCTS CATALOG PAGE
   All rules scoped under body.products-page
   ============================================================ */

/* ---- Scroll Reveal ---- */
.products-page [data-reveal] {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.65s ease, transform 0.65s ease;
}
.products-page [data-reveal].is-visible { opacity: 1; transform: none; }
.products-page [data-reveal][data-reveal-delay="1"] { transition-delay: 0.08s; }
.products-page [data-reveal][data-reveal-delay="2"] { transition-delay: 0.16s; }
.products-page [data-reveal][data-reveal-delay="3"] { transition-delay: 0.24s; }

/* ---- Eyebrows ---- */
.prod-eyebrow,
.prod-section-eyebrow,
.prod-cta-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--airx-red);
    margin-bottom: 14px;
}
.prod-eyebrow::before,
.prod-section-eyebrow::before,
.prod-cta-eyebrow::before {
    content: "";
    display: inline-block;
    width: 26px;
    height: 2px;
    background: var(--airx-red);
    flex-shrink: 0;
}
.prod-hero .prod-eyebrow { color: rgba(255,255,255,0.75); }
.prod-hero .prod-eyebrow::before { background: rgba(255,255,255,0.5); }
.prod-cta-eyebrow { color: #ff6b72; }
.prod-cta-eyebrow::before { background: #ff6b72; }


/* ==================== HERO ==================== */
.products-page .prod-hero {
    background:
        linear-gradient(rgba(15, 16, 40, 0.88), rgba(15, 16, 40, 0.75)),
        url('../images/hero-wall-mounted.jpg') center / cover no-repeat fixed;
    padding: 180px 7% 80px;
    border-bottom: 4px solid var(--airx-red);
    color: #fff;
    text-align: center;
    display: flex;
    justify-content: center;
}
.prod-hero-inner { max-width: 980px; margin: 0 auto; }

.prod-hero h1 {
    font-size: clamp(2.3rem, 4.8vw, 3.6rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.5px;
    margin-bottom: 18px;
    text-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
.prod-hero p {
    font-size: 1.12rem;
    color: #cdd0e8;
    line-height: 1.7;
    max-width: 720px;
    margin: 0 auto 46px;
}

/* Hero Stats Strip */
.prod-hero-stats {
    display: flex;
    justify-content: center;
    gap: 1px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 14px;
    overflow: hidden;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 16px 40px rgba(0,0,0,0.25);
    max-width: 900px;
    margin: 0 auto;
}
.prod-hero-stat {
    flex: 1;
    background: rgba(255, 255, 255, 0.06);
    padding: 20px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    text-align: left;
    transition: background 0.25s;
}
.prod-hero-stat:hover { background: rgba(255, 255, 255, 0.12); }

.prod-stat-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: rgba(218, 33, 40, 0.18);
    color: #ff5259;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.prod-hero-stat strong {
    display: block;
    font-size: 1.1rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
    margin-bottom: 2px;
}
.prod-hero-stat span {
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.65);
    font-weight: 600;
}


/* ==================== CATALOG SECTION ==================== */
.prod-catalog-section {
    background: var(--light-bg);
    padding: 70px 6% 100px;
}
.prod-container {
    max-width: 1240px;
    margin: 0 auto;
}

/* Control Bar */
.prod-control-bar {
    background: var(--c-bg-ffffff);
    border-radius: 16px;
    padding: 20px 24px;
    box-shadow: 0 4px 20px rgba(17, 18, 43, 0.05);
    border: 1px solid var(--c-border-eef0f4);
    margin-bottom: 24px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* Category & Tech Filter Groups */
.prod-filter-group {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.prod-filter-label {
    font-size: 0.76rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--c-text-8f92b3);
    min-width: 90px;
    flex-shrink: 0;
}

/* Category Filter Tabs */
.prod-filter-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.prod-tab {
    background: var(--c-bg-f4f5f8);
    color: var(--c-text-4a4e69);
    border: 1px solid transparent;
    padding: 8px 18px;
    border-radius: 50px;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: inherit;
}
.prod-tab:hover {
    background: var(--c-bg-e8ebf3);
    color: var(--heading-color);
}
.prod-tab.is-active {
    background: var(--airx-navy);
    color: #fff;
    border-color: var(--airx-navy);
    box-shadow: 0 4px 14px rgba(31, 33, 81, 0.25);
}
.prod-count-pill {
    background: rgba(0,0,0,0.08);
    color: inherit;
    font-size: 0.75rem;
    padding: 2px 7px;
    border-radius: 20px;
    font-weight: 700;
}
.prod-tab.is-active .prod-count-pill {
    background: var(--airx-red);
    color: #fff;
}

/* Technology Type Pills */
.prod-tech-group {
    padding-top: 10px;
    border-top: 1px dashed var(--c-border-edf0f5);
}
.prod-tech-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}
.prod-tech-btn {
    background: var(--c-bg-ffffff);
    color: var(--c-text-4a4e69);
    border: 1.5px solid var(--c-border-dce0ec);
    padding: 6px 16px;
    border-radius: 8px;
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}
.prod-tech-btn:hover {
    border-color: var(--airx-navy);
    color: var(--heading-color);
    background: var(--c-bg-f9fafc);
}
.prod-tech-btn.is-active {
    background: var(--c-bg-eef2ff);
    color: var(--heading-color);
    border-color: var(--airx-navy);
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(31, 33, 81, 0.1);
}

/* Utility Row: Search & Sort */
.prod-utility-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding-top: 14px;
    border-top: 1px solid var(--c-border-f0f2f7);
}

/* Search Box */
.prod-search-box {
    position: relative;
    flex: 1;
    max-width: 440px;
}
.prod-search-box svg {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--c-text-8f92b3);
    pointer-events: none;
}
.prod-search-box input {
    width: 100%;
    padding: 11px 40px 11px 40px;
    border: 1.5px solid var(--c-border-dde0e8);
    border-radius: 10px;
    background: var(--c-bg-fafbfc);
    font-family: inherit;
    font-size: 0.92rem;
    color: var(--c-text-333333);
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.prod-search-box input:focus {
    outline: none;
    border-color: var(--airx-navy);
    background: var(--c-bg-ffffff);
    box-shadow: 0 0 0 3px rgba(31, 33, 81, 0.08);
}
.prod-search-clear {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 1.25rem;
    color: var(--c-text-999999);
    cursor: pointer;
    display: none;
    padding: 0 4px;
    line-height: 1;
}
.prod-search-clear:hover { color: var(--airx-red); }

/* Sort Selector */
.prod-sort-box {
    display: flex;
    align-items: center;
    gap: 10px;
}
.prod-sort-box label {
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--c-text-666666);
    white-space: nowrap;
}
.prod-sort-box select {
    padding: 10px 34px 10px 14px;
    border: 1.5px solid var(--c-border-dde0e8);
    border-radius: 10px;
    background: var(--c-bg-fafbfc) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238f92b3' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--heading-color);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition: border-color 0.2s;
}
.prod-sort-box select:focus {
    outline: none;
    border-color: var(--airx-navy);
}

/* Results Count Meta */
.prod-results-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    font-size: 0.92rem;
    color: var(--c-text-6b6f85);
}
.prod-results-meta strong { color: var(--heading-color); }
.prod-reset-btn {
    background: none;
    border: none;
    color: var(--airx-red);
    font-weight: 700;
    font-size: 0.88rem;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
}
.prod-reset-btn:hover { color: #b51a20; }


/* ==================== PRODUCT CARDS GRID ==================== */
.prod-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 30px;
}

.prod-card {
    background: var(--c-bg-ffffff);
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--c-border-eef0f4);
    box-shadow: 0 6px 20px rgba(17, 18, 43, 0.05);
    display: flex;
    flex-direction: column;
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
.prod-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 45px rgba(17, 18, 43, 0.11);
    border-color: var(--c-border-dce0ec);
}

/* Media Stage */
.prod-card-media {
    position: relative;
    height: 240px;
    background: radial-gradient(120% 90% at 50% 30%, var(--c-bg-ffffff) 0%, var(--c-bg-f3f6fa) 65%, var(--c-bg-e6edf5) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    border-bottom: 1px solid var(--c-border-edf0f5);
    overflow: hidden;
}

.prod-card-img-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}
.prod-card-media img {
    max-width: 85%;
    max-height: 85%;
    object-fit: contain;
    mix-blend-mode: multiply;
    transition: transform 0.5s ease;
}
.prod-card-media img.is-fallback {
    max-height: 55%;
    opacity: 0.75;
}
.prod-card:hover .prod-card-media img {
    transform: scale(1.08);
}

/* Media Badges */
.prod-card-badges {
    position: absolute;
    top: 14px;
    left: 14px;
    right: 14px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    pointer-events: none;
    z-index: 2;
}
.prod-badge-stack {
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: flex-start;
}
.prod-badge {
    padding: 5px 12px;
    border-radius: 50px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}
.prod-badge-category {
    background: var(--airx-navy);
    color: #fff;
    box-shadow: 0 2px 8px rgba(31, 33, 81, 0.2);
}
.prod-badge-tech {
    background: rgba(31, 33, 81, 0.78);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: #fff;
    font-size: 0.66rem;
    padding: 3px 10px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.prod-badge-discount {
    background: var(--airx-red);
    color: #fff;
    box-shadow: 0 2px 8px rgba(218, 33, 40, 0.3);
    margin-left: auto;
}

.prod-card-model {
    position: absolute;
    bottom: 10px;
    right: 14px;
    font-size: 0.75rem;
    color: var(--c-text-7a7e94);
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(4px);
    padding: 3px 8px;
    border-radius: 6px;
    border: 1px solid var(--c-border-e2e6ef);
    font-family: monospace;
}
.prod-card-model span { font-weight: 600; color: var(--c-text-444444); }

/* Card Body */
.prod-card-body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.prod-card-header {
    margin-bottom: 12px;
}
.prod-card-title {
    font-size: 1.22rem;
    font-weight: 800;
    line-height: 1.3;
    margin: 0;
}
.prod-card-title a {
    color: var(--heading-color);
    text-decoration: none;
    transition: color 0.2s;
}
.prod-card-title a:hover { color: var(--airx-red); }

/* Specs Strip */
.prod-specs-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}
.prod-spec-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--c-bg-f4f5f8);
    color: var(--c-text-4a4e69);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
}
.prod-spec-pill svg { color: var(--airx-red); }

/* Feature Bullets */
.prod-feature-bullets {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.prod-feature-bullets li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.86rem;
    color: var(--c-text-555555);
    line-height: 1.4;
}
.prod-feature-bullets li svg {
    color: #1a7a45;
    flex-shrink: 0;
    margin-top: 3px;
}

/* Pricing Stack */
.prod-card-pricing {
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--c-border-f0f2f7);
    margin-bottom: 18px;
}
.prod-price-stack {
    display: flex;
    align-items: baseline;
    gap: 10px;
}
.prod-price-current {
    color: var(--heading-color);
    display: flex;
    align-items: baseline;
    gap: 3px;
}
.prod-currency {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--heading-color);
}
.prod-amount {
    font-size: 1.55rem;
    font-weight: 800;
    letter-spacing: -0.5px;
    line-height: 1;
}
.prod-price-old {
    font-size: 0.88rem;
    color: var(--c-text-999999);
    text-decoration: line-through;
}
.prod-price-custom {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--c-text-7a7e94);
}

/* Action Buttons */
.prod-card-actions {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 10px;
}
.prod-btn-view {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: var(--airx-navy);
    color: #fff;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 700;
    padding: 11px 16px;
    border-radius: 8px;
    transition: background 0.2s, transform 0.2s;
}
.prod-btn-view:hover {
    background: var(--airx-red);
    transform: translateY(-2px);
}
.prod-btn-view svg { transition: transform 0.2s; }
.prod-btn-view:hover svg { transform: translateX(3px); }

.prod-btn-quote {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--heading-color);
    border: 1.5px solid var(--c-border-dce0ec);
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 700;
    padding: 11px 14px;
    border-radius: 8px;
    transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.prod-btn-quote:hover {
    border-color: var(--airx-navy);
    background: var(--c-bg-f4f5f8);
}


/* ==================== EMPTY STATES ==================== */
.prod-empty-state {
    text-align: center;
    padding: 80px 20px;
    background: var(--c-bg-ffffff);
    border-radius: 16px;
    border: 1px solid var(--c-border-eef0f4);
    box-shadow: 0 4px 16px rgba(0,0,0,0.04);
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 600px;
    margin: 40px auto;
}
.prod-empty-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--c-bg-f4f5f8);
    color: var(--c-text-8f92b3);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}
.prod-empty-state h3 {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--heading-color);
    margin-bottom: 10px;
}
.prod-empty-state p {
    color: var(--c-text-666666);
    font-size: 0.98rem;
    line-height: 1.65;
    margin-bottom: 24px;
    max-width: 440px;
}


/* ==================== PRODUCT SELECTION GUIDE ==================== */
.prod-guide-section {
    background: var(--c-bg-ffffff);
    padding: 100px 6%;
    border-top: 1px solid var(--c-border-edf0f5);
}
.prod-guide-header {
    text-align: center;
    margin-bottom: 56px;
}
.prod-guide-header h2 {
    font-size: clamp(1.9rem, 3.5vw, 2.6rem);
    font-weight: 800;
    color: var(--heading-color);
    margin-bottom: 14px;
    letter-spacing: -0.4px;
}
.prod-guide-header p {
    color: var(--c-text-666666);
    font-size: 1.05rem;
    max-width: 580px;
    margin: 0 auto;
    line-height: 1.65;
}

.prod-guide-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 30px;
}
.prod-guide-card {
    background: var(--c-bg-f9fafc);
    border-radius: 16px;
    padding: 36px 30px;
    border: 1px solid var(--c-border-edf0f5);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.prod-guide-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(17,18,43,0.08);
}
.prod-guide-card--highlight {
    background: var(--c-bg-ffffff);
    border: 2px solid var(--airx-navy);
    box-shadow: 0 10px 30px rgba(31, 33, 81, 0.08);
}

.prod-guide-badge {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--airx-red);
    margin-bottom: 12px;
}
.prod-guide-card h3 {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--heading-color);
    margin-bottom: 14px;
}
.prod-guide-card p {
    color: var(--c-text-555555);
    font-size: 0.94rem;
    line-height: 1.7;
    margin-bottom: 22px;
}
.prod-guide-list {
    list-style: square;
    padding-left: 20px;
    margin: 0 0 26px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 0.88rem;
    color: var(--c-text-666666);
    line-height: 1.5;
}
.prod-guide-link {
    margin-top: auto;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--heading-color);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s, transform 0.2s;
}
.prod-guide-link:hover {
    color: var(--airx-red);
    transform: translateX(4px);
}


/* ==================== CONSULTATION CTA ==================== */
.prod-cta-banner {
    background: linear-gradient(135deg, #1b1d47 0%, #11122b 60%);
    padding: 70px 7%;
    position: relative;
    overflow: hidden;
}
.prod-cta-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px);
    background-size: 24px 24px;
    pointer-events: none;
}
.prod-cta-inner {
    position: relative;
    z-index: 1;
    max-width: 1140px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}
.prod-cta-text { max-width: 660px; }
.prod-cta-text h2 {
    font-size: clamp(1.7rem, 3vw, 2.3rem);
    font-weight: 800;
    color: #fff;
    margin-bottom: 12px;
    line-height: 1.15;
}
.prod-cta-text p {
    color: rgba(255,255,255,0.68);
    font-size: 1.02rem;
    line-height: 1.65;
    margin: 0;
}
.prod-cta-actions {
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex-shrink: 0;
    min-width: 250px;
}
.prod-cta-actions .btn {
    text-align: center;
    justify-content: center;
}
.prod-wa-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 22px;
    border-radius: 50px;
    background: #25d366;
    color: #fff;
    font-size: 0.95rem;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.2s, transform 0.2s;
    box-shadow: 0 6px 18px rgba(37,211,102,0.25);
}
.prod-wa-btn:hover { background: #1ebe5d; transform: translateY(-2px); }


/* ==================== RESPONSIVE ==================== */
@media (max-width: 1080px) {
    .prod-guide-grid { grid-template-columns: 1fr; }
    .prod-hero-stats { flex-wrap: wrap; }
    .prod-hero-stat { flex: 1 1 45%; }
}

@media (max-width: 860px) {
    .prod-control-bar { padding: 18px; }
    .prod-utility-row { flex-direction: column; align-items: stretch; }
    .prod-search-box { max-width: 100%; }
    .prod-cta-inner { flex-direction: column; text-align: center; }
    .prod-cta-actions { width: 100%; max-width: 320px; }
}

@media (max-width: 600px) {
    .products-page .prod-hero { padding: 150px 6% 60px; }
    .prod-hero-stats { flex-direction: column; width: 100%; }
    .prod-hero-stat { justify-content: flex-start; padding: 16px 20px; }
    .prod-grid { grid-template-columns: 1fr; }
    .prod-card-actions { grid-template-columns: 1fr; }
    .prod-catalog-section { padding: 50px 5% 70px; }
    .prod-guide-section { padding: 60px 5%; }
    .prod-cta-banner { padding: 50px 6%; }
}

@media (prefers-reduced-motion: reduce) {
    .products-page [data-reveal] { opacity: 1; transform: none; transition: none; }
    .prod-card:hover .prod-card-media img { transform: none; }
}


/* ============================================================
   ARTICLES & CLIMATE GUIDES (articles.php & article.php)
   All rules scoped under body.articles-page and body.article-reader-page
   ============================================================ */

/* ---- Scroll Reveal ---- */
.articles-page [data-reveal],
.article-reader-page [data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.65s ease, transform 0.65s ease;
}
.articles-page [data-reveal].is-visible,
.article-reader-page [data-reveal].is-visible { opacity: 1; transform: none; }
.articles-page [data-reveal][data-reveal-delay="1"] { transition-delay: 0.08s; }
.articles-page [data-reveal][data-reveal-delay="2"] { transition-delay: 0.16s; }
.articles-page [data-reveal][data-reveal-delay="3"] { transition-delay: 0.24s; }

/* ---- Common Eyebrow ---- */
.art-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--airx-red);
    margin-bottom: 12px;
}
.art-eyebrow::before {
    content: "";
    display: inline-block;
    width: 24px;
    height: 2px;
    background: var(--airx-red);
    flex-shrink: 0;
}
.art-hero .art-eyebrow { color: rgba(255,255,255,0.75); }
.art-hero .art-eyebrow::before { background: rgba(255,255,255,0.5); }

/* Badges */
.art-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 50px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    background: var(--airx-navy);
    color: #fff;
    text-decoration: none;
}
.art-badge:hover { background: var(--airx-red); }


/* ==================== ARTICLES DIRECTORY HERO ==================== */
.articles-page .art-hero {
    background:
        linear-gradient(rgba(15, 16, 40, 0.88), rgba(15, 16, 40, 0.76)),
        url('../images/about-hero-bg.jpg') center / cover no-repeat fixed;
    padding: 180px 7% 80px;
    border-bottom: 4px solid var(--airx-red);
    color: #fff;
    text-align: center;
    display: flex;
    justify-content: center;
}
.art-hero-inner { max-width: 920px; margin: 0 auto; }
.art-hero h1 {
    font-size: clamp(2.2rem, 4.5vw, 3.4rem);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.5px;
    margin-bottom: 16px;
    text-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
.art-hero p {
    font-size: 1.1rem;
    color: #cdd0e8;
    line-height: 1.7;
    max-width: 720px;
    margin: 0 auto;
}


/* ==================== DIRECTORY CONTROLS & GRID ==================== */
.art-main-section {
    background: var(--light-bg);
    padding: 60px 6% 90px;
}
.art-container {
    max-width: 1220px;
    margin: 0 auto;
}

/* Control Bar */
.art-control-bar {
    background: var(--c-bg-ffffff);
    border-radius: 16px;
    padding: 18px 24px;
    box-shadow: 0 4px 20px rgba(17, 18, 43, 0.05);
    border: 1px solid var(--c-border-eef0f4);
    margin-bottom: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.art-filter-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.art-tab {
    background: var(--c-bg-f4f5f8);
    color: var(--c-text-4a4e69);
    border: 1px solid transparent;
    padding: 8px 18px;
    border-radius: 50px;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: inherit;
}
.art-tab:hover {
    background: var(--c-bg-e8ebf3);
    color: var(--heading-color);
}
.art-tab.is-active {
    background: var(--airx-navy);
    color: #fff;
    border-color: var(--airx-navy);
    box-shadow: 0 4px 14px rgba(31, 33, 81, 0.25);
}
.art-count-pill {
    background: rgba(0,0,0,0.08);
    color: inherit;
    font-size: 0.75rem;
    padding: 2px 7px;
    border-radius: 20px;
    font-weight: 700;
}
.art-tab.is-active .art-count-pill {
    background: var(--airx-red);
    color: #fff;
}

/* Search Box */
.art-search-box {
    position: relative;
    width: 320px;
    max-width: 100%;
}
.art-search-box svg {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--c-text-8f92b3);
    pointer-events: none;
}
.art-search-box input {
    width: 100%;
    padding: 10px 38px 10px 38px;
    border: 1.5px solid var(--c-border-dde0e8);
    border-radius: 10px;
    background: var(--c-bg-fafbfc);
    font-family: inherit;
    font-size: 0.9rem;
    color: var(--c-text-333333);
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.art-search-box input:focus {
    outline: none;
    border-color: var(--airx-navy);
    background: var(--c-bg-ffffff);
    box-shadow: 0 0 0 3px rgba(31, 33, 81, 0.08);
}
.art-search-clear {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 1.25rem;
    color: var(--c-text-999999);
    cursor: pointer;
    display: none;
    padding: 0 4px;
    line-height: 1;
}
.art-search-clear:hover { color: var(--airx-red); }

/* Results Meta */
.art-results-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    font-size: 0.92rem;
    color: var(--c-text-6b6f85);
}
.art-results-meta strong { color: var(--heading-color); }
.art-reset-btn {
    background: none;
    border: none;
    color: var(--airx-red);
    font-weight: 700;
    font-size: 0.88rem;
    cursor: pointer;
    text-decoration: underline;
}


/* ==================== LEAD ARTICLE SPOTLIGHT ==================== */
.art-spotlight {
    background: var(--c-bg-ffffff);
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid var(--c-border-eef0f4);
    box-shadow: 0 8px 30px rgba(17, 18, 43, 0.06);
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    margin-bottom: 40px;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.art-spotlight:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 45px rgba(17, 18, 43, 0.12);
}
.art-spotlight-image {
    position: relative;
    min-height: 340px;
    overflow: hidden;
    background: #0f1028;
}
.art-spotlight-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.art-spotlight:hover .art-spotlight-image img { transform: scale(1.05); }

.art-spotlight-content {
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.art-card-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}
.art-time {
    font-size: 0.82rem;
    color: var(--c-text-7a7e94);
    font-weight: 600;
}
.art-spotlight-content h2 {
    font-size: clamp(1.5rem, 2.5vw, 1.95rem);
    font-weight: 800;
    line-height: 1.25;
    margin-bottom: 14px;
}
.art-spotlight-content h2 a {
    color: var(--heading-color);
    text-decoration: none;
    transition: color 0.2s;
}
.art-spotlight-content h2 a:hover { color: var(--airx-red); }
.art-spotlight-content p {
    color: var(--c-text-555555);
    font-size: 0.98rem;
    line-height: 1.65;
    margin-bottom: 24px;
}
.art-spotlight-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid var(--c-border-f0f2f7);
}
.art-author-info strong {
    display: block;
    color: var(--heading-color);
    font-size: 0.92rem;
    line-height: 1.3;
}
.art-author-info span {
    font-size: 0.8rem;
    color: var(--c-text-888888);
}
.art-read-btn {
    padding: 11px 22px;
    font-size: 0.9rem;
    white-space: nowrap;
}


/* ==================== ARTICLES GRID ==================== */
.art-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 30px;
}
.art-card {
    background: var(--c-bg-ffffff);
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--c-border-eef0f4);
    box-shadow: 0 6px 20px rgba(17, 18, 43, 0.05);
    display: flex;
    flex-direction: column;
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
.art-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 18px 45px rgba(17, 18, 43, 0.11);
    border-color: var(--c-border-dce0ec);
}
.art-card-media {
    position: relative;
    height: 210px;
    overflow: hidden;
    background: #0f1028;
}
.art-card-img-link { display: block; width: 100%; height: 100%; }
.art-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.art-card:hover .art-card-media img { transform: scale(1.08); }
.art-card-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.art-card-body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
.art-card-top-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
    color: var(--c-text-8f92b3);
    margin-bottom: 12px;
}
.art-date {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.art-reading-time { font-weight: 600; color: var(--c-text-7a7e94); }

.art-card-title {
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.35;
    margin-bottom: 12px;
}
.art-card-title a {
    color: var(--heading-color);
    text-decoration: none;
    transition: color 0.2s;
}
.art-card-title a:hover { color: var(--airx-red); }

.art-card-summary {
    font-size: 0.92rem;
    color: var(--c-text-555555);
    line-height: 1.6;
    margin-bottom: 20px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.art-card-footer {
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--c-border-f0f2f7);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.art-card-author {
    font-size: 0.82rem;
    color: var(--c-text-7a7e94);
    font-weight: 600;
}
.art-read-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--heading-color);
    text-decoration: none;
    transition: color 0.2s, transform 0.2s;
}
.art-read-link:hover {
    color: var(--airx-red);
    transform: translateX(3px);
}


/* ==================== EMPTY STATE ==================== */
.art-empty-state {
    text-align: center;
    padding: 70px 20px;
    background: var(--c-bg-ffffff);
    border-radius: 16px;
    border: 1px solid var(--c-border-eef0f4);
    box-shadow: 0 4px 16px rgba(0,0,0,0.04);
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 580px;
    margin: 40px auto;
}
.art-empty-icon {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: var(--c-bg-f4f5f8);
    color: var(--c-text-8f92b3);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
}
.art-empty-state h3 {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--heading-color);
    margin-bottom: 10px;
}
.art-empty-state p {
    color: var(--c-text-666666);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 22px;
}


/* ==================== SINGLE ARTICLE READER (article.php) ==================== */
.art-reader-main {
    background: var(--c-bg-ffffff);
    padding-top: 100px;
}
.art-reader-container {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Breadcrumbs */
.art-breadcrumbs-bar {
    background: var(--c-bg-f8f9fc);
    border-bottom: 1px solid var(--c-border-edf0f5);
    padding: 14px 0;
}
.art-breadcrumbs {
    font-size: 0.85rem;
    color: var(--c-text-7a7e94);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.art-breadcrumbs a {
    color: var(--heading-color);
    text-decoration: none;
    font-weight: 600;
}
.art-breadcrumbs a:hover { color: var(--airx-red); }
.art-bc-sep { color: #ccc; }
.art-bc-current {
    color: var(--c-text-999999);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 320px;
}

/* Article Header */
.art-header-section {
    padding: 50px 0 30px;
}
.art-header-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}
.art-time-pill {
    font-size: 0.84rem;
    color: var(--c-text-7a7e94);
    font-weight: 600;
}

.art-headline {
    font-size: clamp(2.1rem, 4.2vw, 3.2rem);
    font-weight: 800;
    color: var(--heading-color);
    line-height: 1.16;
    letter-spacing: -0.4px;
    margin-bottom: 20px;
}
.art-lead-summary {
    font-size: 1.2rem;
    color: var(--c-text-555555);
    line-height: 1.7;
    margin-bottom: 30px;
    font-weight: 500;
}

.art-author-strip {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 0;
    border-top: 1px solid var(--c-border-edf0f5);
    border-bottom: 1px solid var(--c-border-edf0f5);
}
.art-author-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--c-bg-eef2ff);
    color: var(--heading-color);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.art-author-details { flex: 1; }
.art-author-details strong {
    display: block;
    font-size: 0.98rem;
    color: var(--heading-color);
    line-height: 1.25;
}
.art-author-details span {
    font-size: 0.82rem;
    color: var(--c-text-888888);
}
.art-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--c-bg-f4f5f8);
    color: var(--heading-color);
    border: 1px solid var(--c-border-dce0ec);
    padding: 8px 16px;
    border-radius: 50px;
    font-size: 0.84rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}
.art-copy-btn:hover {
    background: var(--airx-navy);
    color: #fff;
    border-color: var(--airx-navy);
}

/* Cover Image */
.art-cover-wrapper {
    margin: 36px 0 20px;
}
.art-cover-box {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    max-height: 480px;
}
.art-cover-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Article Body Typography */
.art-body-section {
    padding: 40px 0 70px;
}
.art-rich-content {
    color: var(--c-text-2b2d42);
    font-size: 1.12rem;
    line-height: 1.8;
    margin-bottom: 60px;
}
.art-rich-content p {
    margin-bottom: 24px;
}
.art-rich-content h1,
.art-rich-content h2,
.art-rich-content h3,
.art-rich-content h4 {
    color: var(--heading-color);
    font-weight: 800;
    line-height: 1.25;
    margin-top: 40px;
    margin-bottom: 16px;
}
.art-rich-content h2 { font-size: 1.8rem; border-bottom: 2px solid var(--c-border-f0f2f7); padding-bottom: 8px; }
.art-rich-content h3 { font-size: 1.45rem; }
.art-rich-content h4 { font-size: 1.2rem; }

.art-rich-content ul,
.art-rich-content ol {
    margin: 0 0 26px 28px;
    padding: 0;
}
.art-rich-content li {
    margin-bottom: 10px;
    line-height: 1.7;
}

/* Rich Content Images */
.art-rich-content img {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 12px;
    margin: 26px 0;
    box-shadow: 0 6px 24px rgba(17, 18, 43, 0.08);
    display: inline-block;
}
.art-rich-content img[style*="float: left"] {
    margin-right: 28px;
    margin-bottom: 20px;
}
.art-rich-content img[style*="float: right"] {
    margin-left: 28px;
    margin-bottom: 20px;
}

.art-rich-content blockquote {
    background: var(--c-bg-f8f9fc);
    border-left: 4px solid var(--airx-red);
    padding: 22px 28px;
    margin: 32px 0;
    border-radius: 0 12px 12px 0;
    font-style: italic;
    color: var(--c-text-333333);
}
.art-rich-content blockquote p { margin-bottom: 0; }

.art-rich-content a {
    color: var(--airx-red);
    text-decoration: underline;
    font-weight: 600;
}
.art-rich-content a:hover { color: #b51a20; }

.art-rich-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 30px 0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.04);
}
.art-rich-content table th {
    background: var(--airx-navy);
    color: #fff;
    padding: 12px 16px;
    text-align: left;
    font-size: 0.92rem;
}
.art-rich-content table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--c-border-edf0f5);
    font-size: 0.95rem;
}
.art-rich-content table tr:nth-child(even) td { background: var(--c-bg-f9fafc); }

/* Author Bio Card */
.art-bio-card {
    background: var(--c-bg-f7f8fc);
    border-radius: 16px;
    padding: 30px;
    border: 1px solid var(--c-border-eef0f6);
    display: flex;
    gap: 20px;
    align-items: flex-start;
    margin-bottom: 40px;
}
.art-bio-icon {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--airx-navy);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.art-bio-card h4 {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--heading-color);
    margin-bottom: 8px;
}
.art-bio-card p {
    font-size: 0.92rem;
    color: var(--c-text-666666);
    line-height: 1.6;
    margin-bottom: 12px;
}
.art-bio-contact {
    display: inline-block;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--airx-red);
    text-decoration: none;
}
.art-bio-contact:hover { text-decoration: underline; }

/* Bottom Nav */
.art-bottom-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 24px;
    border-top: 1px solid var(--c-border-edf0f5);
}
.art-back-btn,
.art-cat-link {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--heading-color);
    text-decoration: none;
    transition: color 0.2s, transform 0.2s;
}
.art-back-btn:hover { color: var(--airx-red); transform: translateX(-4px); }
.art-cat-link:hover { color: var(--airx-red); transform: translateX(4px); }


/* ==================== RELATED ARTICLES ==================== */
.art-related-section {
    background: var(--light-bg);
    padding: 70px 0;
    border-top: 1px solid var(--c-border-edf0f5);
}
.art-related-header {
    text-align: center;
    margin-bottom: 40px;
}
.art-related-header h2 {
    font-size: 2rem;
    font-weight: 800;
    color: var(--heading-color);
    margin-top: 6px;
}
.art-related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.art-related-card {
    background: var(--c-bg-ffffff);
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--c-border-eef0f4);
    box-shadow: 0 4px 16px rgba(0,0,0,0.04);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.art-related-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.08);
}
.art-related-img-link {
    height: 160px;
    display: block;
    overflow: hidden;
}
.art-related-img-link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.art-related-card:hover .art-related-img-link img { transform: scale(1.06); }
.art-related-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
.art-related-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.art-related-content h3 {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.35;
    margin-bottom: 12px;
}
.art-related-content h3 a {
    color: var(--heading-color);
    text-decoration: none;
}
.art-related-content h3 a:hover { color: var(--airx-red); }
.art-related-date {
    margin-top: auto;
    font-size: 0.78rem;
    color: var(--c-text-888888);
}


/* ==================== CTA STRIP ==================== */
.art-cta-strip {
    background: linear-gradient(135deg, #1b1d47 0%, #11122b 60%);
    padding: 60px 7%;
    position: relative;
    overflow: hidden;
}
.art-cta-strip::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px);
    background-size: 24px 24px;
    pointer-events: none;
}
.art-cta-inner {
    position: relative;
    z-index: 1;
    max-width: 1140px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}
.art-cta-inner h2 {
    font-size: clamp(1.6rem, 2.8vw, 2.2rem);
    font-weight: 800;
    color: #fff;
    margin-bottom: 10px;
}
.art-cta-inner p {
    color: rgba(255,255,255,0.7);
    font-size: 1rem;
    line-height: 1.6;
    margin: 0;
}
.art-cta-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex-shrink: 0;
    min-width: 250px;
}
.art-cta-actions .btn { justify-content: center; text-align: center; }
.art-wa-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: 50px;
    background: #25d366;
    color: #fff;
    font-size: 0.94rem;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.2s, transform 0.2s;
    box-shadow: 0 6px 18px rgba(37,211,102,0.25);
}
.art-wa-btn:hover { background: #1ebe5d; transform: translateY(-2px); }


/* ==================== RESPONSIVE ==================== */
@media (max-width: 960px) {
    .art-spotlight { grid-template-columns: 1fr; }
    .art-spotlight-image { min-height: 240px; }
    .art-related-grid { grid-template-columns: 1fr; }
    .art-cta-inner { flex-direction: column; text-align: center; }
    .art-cta-actions { width: 100%; max-width: 320px; }
}

@media (max-width: 768px) {
    .art-control-bar { flex-direction: column; align-items: stretch; }
    .art-search-box { width: 100%; }
    .art-spotlight-footer { flex-direction: column; align-items: flex-start; }
    .art-grid { grid-template-columns: 1fr; }
    .art-bio-card { flex-direction: column; }
    .art-author-strip { flex-wrap: wrap; }
    .art-share-actions { width: 100%; }
    .art-copy-btn { width: 100%; justify-content: center; }
}

@media (max-width: 600px) {
    .articles-page .art-hero { padding: 140px 6% 60px; }
    .art-spotlight-content { padding: 24px; }
    .art-headline { font-size: 1.9rem; }
    .art-bottom-nav { flex-direction: column; gap: 14px; align-items: flex-start; }
    .art-cta-strip { padding: 50px 6%; }
}

@media (prefers-reduced-motion: reduce) {
    .articles-page [data-reveal],
    .article-reader-page [data-reveal] { opacity: 1; transform: none; transition: none; }
    .art-card:hover .art-card-media img { transform: none; }
}


/* ==================== GLOBAL FOOTER ==================== */
.site-footer {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin-top: auto;
    background: var(--ax-ink);
    color: #c3c8e0;
    font-size: 0.92rem;
    line-height: 1.6;
    text-align: left; /* explicit reset so no ancestor rule can ever center it again */
}
/* Glow in the top corners + an oversized, barely-there logo bleeding off the bottom edge */
.site-footer::before,
.site-footer::after { content: ""; position: absolute; z-index: -1; pointer-events: none; }
.site-footer::before {
    inset: 0;
    background:
        radial-gradient(40% 60% at 0% 0%, rgba(218, 33, 40, 0.18), transparent 70%),
        radial-gradient(40% 60% at 100% 0%, rgba(57, 184, 255, 0.14), transparent 70%);
}
.site-footer::after {
    right: -4%;
    bottom: -70px;
    width: min(980px, 88vw);
    aspect-ratio: 800 / 179;
    background: url('../images/airx-logo-light.png') center / contain no-repeat;
    opacity: 0.05;
}

/* Hairline accent across the top */
.ft-accent-bar {
    height: 1px;
    width: 100%;
    background: linear-gradient(90deg, transparent, rgba(218, 33, 40, 0.9) 20%, rgba(127, 220, 255, 0.8) 60%, transparent);
}

/* Main 4-Column Grid */
.ft-main { padding: clamp(48px, 6vw, 80px) 0 clamp(36px, 4vw, 56px); }
.ft-container {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 44px);
}
.ft-grid {
    display: grid;
    grid-template-columns: 1.6fr 1.1fr 1.1fr 1.7fr;
    gap: 40px;
}

/* Brand Column */
.ft-logo-link {
    display: inline-block;
    text-decoration: none;
    margin-bottom: 22px;
}
.ft-logo-link img { display: block; height: 40px; width: auto; }
.ft-brand-desc {
    color: #a3a9c6;
    font-size: 0.92rem;
    line-height: 1.7;
    margin-bottom: 24px;
    max-width: 330px;
}
.ft-socials { display: flex; gap: 10px; align-items: center; }
.ft-social-link {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s var(--ax-ease), box-shadow 0.3s ease;
}
.ft-social-link:hover {
    background: var(--airx-red);
    border-color: var(--airx-red);
    transform: translateY(-4px);
    box-shadow: 0 10px 22px rgba(218, 33, 40, 0.4);
}

/* Certification marks: small logos, each on its own white tile because
   two of them are drawn for a light background */
.ft-certs {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 22px 0 0;
    padding: 0;
}
.ft-certs li {
    width: 46px;
    height: 46px;
    padding: 5px;
    border-radius: 10px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ft-certs img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; border-radius: 3px; }

/* Column Headings */
.ft-col-title {
    margin-bottom: 20px;
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #7f86a8;
}

/* Navigation Lists */
.ft-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 11px;
}
.ft-nav-list li a {
    position: relative;
    display: inline-block;
    color: #d5d9ec;
    text-decoration: none;
    font-size: 0.94rem;
    font-weight: 500;
    transition: color 0.25s ease, padding-left 0.3s var(--ax-ease);
}
.ft-nav-list li a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 0;
    height: 1.5px;
    background: var(--airx-red);
    transition: width 0.3s var(--ax-ease);
}
.ft-nav-list li a:hover { color: #ffffff; padding-left: 20px; }
.ft-nav-list li a:hover::before { width: 12px; }

/* Contact Column */
.ft-contact-entries {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
}
.ft-contact-entry {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    min-width: 0;
    padding: 14px 16px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
    transition: background 0.3s ease, border-color 0.3s ease;
}
.ft-contact-entry:hover { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.16); }
.ft-contact-entry > div { min-width: 0; }
.ft-entry-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(218, 33, 40, 0.3), rgba(218, 33, 40, 0.08));
    color: #ff7b81;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ft-contact-entry strong {
    display: block;
    color: #ffffff;
    font-size: 0.88rem;
    margin-bottom: 3px;
}
.ft-contact-entry p {
    color: #a3a9c6;
    font-size: 0.84rem;
    margin: 0;
    line-height: 1.5;
    overflow-wrap: anywhere;
}
.ft-contact-entry p a { color: #d5d9ec; text-decoration: none; transition: color 0.2s ease; }
.ft-contact-entry p a:hover { color: #ffffff; text-decoration: underline; }

/* Bottom Legal Bar */
.ft-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 20px 0;
    font-size: 0.84rem;
    color: #8b91b0;
}
.ft-bottom-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}
.ft-bottom-copy { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ft-bottom-copy p { margin: 0; }
.ft-bottom-copy strong { color: #e4e7f4; font-weight: 600; }
.ft-bottom-sep { color: #454b6e; }
.ft-bottom-tagline { color: #7f86a8; }
.ft-bottom-links { display: flex; align-items: center; gap: 20px; }
.ft-bottom-links a {
    color: #a3a9c6;
    text-decoration: none;
    font-size: 0.84rem;
    transition: color 0.2s ease;
}
.ft-bottom-links a:hover { color: #ffffff; }
.ft-back-to-top {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #e4e7f4;
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.3s var(--ax-ease);
}
.ft-back-to-top:hover {
    background: #ffffff;
    border-color: #ffffff;
    color: var(--ax-ink);
    transform: translateY(-3px);
}

/* Responsive Footer Layouts */
@media (max-width: 1160px) {
    .ft-grid { grid-template-columns: 1fr 1fr 1fr; gap: 36px; }
    .ft-col-brand { grid-column: span 3; }
    .ft-brand-desc { max-width: 520px; }
}

@media (max-width: 768px) {
    .ft-grid { grid-template-columns: 1fr 1fr; gap: 34px 20px; }
    .ft-col-brand, .ft-col-contact { grid-column: span 2; }
    .ft-bottom-inner { flex-direction: column; align-items: flex-start; gap: 16px; }
    .ft-bottom-copy { flex-direction: column; align-items: flex-start; gap: 6px; }
    .ft-bottom-sep { display: none; }
    .ft-bottom-links { width: 100%; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
    .site-footer::after { bottom: -20px; }
}


/* ============================================================
   CART / CHECKOUT / SUCCESS — E-COMMERCE FLOW
   Scoped under body.cart-page / body.checkout-page / body.success-page
   ============================================================ */

/* ---- Shared "inner page" banner ---- */
.cart-hero, .checkout-hero {
    background: var(--airx-navy);
    background: linear-gradient(135deg, #23255c 0%, #11122b 100%);
    padding: 160px 7% 50px;
    color: #fff;
}
.cart-eyebrow, .checkout-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.65);
    margin-bottom: 12px;
}
.cart-eyebrow::before, .checkout-eyebrow::before {
    content: "";
    width: 26px;
    height: 2px;
    background: var(--airx-red);
}
.cart-hero h1, .checkout-hero h1 {
    font-size: clamp(1.9rem, 3.6vw, 2.6rem);
    font-weight: 800;
    letter-spacing: -0.5px;
}

/* ---- Flash / alert messages ---- */
.cart-flash {
    max-width: 1200px;
    margin: 28px auto 0;
    padding: 14px 20px;
    background: var(--c-bg-eaf7ee);
    border: 1px solid var(--c-border-bfe6c9);
    color: #1e6b34;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.95rem;
}
.checkout-alert {
    max-width: 1100px;
    margin: 0 auto 28px;
    padding: 16px 22px;
    border-radius: 10px;
    font-size: 0.95rem;
}
.checkout-alert--error {
    background: var(--c-bg-fdecee);
    border: 1px solid #f3bcc2;
    color: #a11d2b;
}
.checkout-alert--error ul { margin: 0; padding-left: 20px; }
.checkout-alert--error li { margin-bottom: 4px; }
.checkout-alert--error li:last-child { margin-bottom: 0; }


/* ==================== CART PAGE ==================== */
.cart-section { padding: 50px 5% 100px; background: var(--light-bg); }
.cart-container { max-width: 1200px; margin: 0 auto; }

.cart-empty {
    text-align: center;
    max-width: 420px;
    margin: 40px auto;
    padding: 60px 30px;
    background: var(--c-bg-ffffff);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.04);
}
.cart-empty-icon {
    width: 84px; height: 84px;
    margin: 0 auto 22px;
    border-radius: 50%;
    background: var(--light-bg);
    color: var(--heading-color);
    display: flex; align-items: center; justify-content: center;
}
.cart-empty h2 { color: var(--heading-color); font-size: 1.5rem; margin-bottom: 10px; }
.cart-empty p { color: var(--c-text-6b6f85); margin-bottom: 26px; }

.cart-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 32px;
    align-items: start;
}

.cart-table-wrap {
    background: var(--c-bg-ffffff);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.04);
    overflow: hidden;
}
.cart-table { width: 100%; border-collapse: collapse; }
.cart-table thead th {
    background: var(--airx-navy);
    color: #fff;
    text-align: left;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 16px 20px;
}
.cart-table thead th.cart-col-price,
.cart-table thead th.cart-col-total { text-align: right; }
.cart-table thead th.cart-col-qty { text-align: center; }
.cart-table tbody td {
    padding: 18px 20px;
    border-bottom: 1px solid var(--c-border-eef0f4);
    vertical-align: middle;
    color: var(--c-text-333333);
}
.cart-table tbody tr:last-child td { border-bottom: none; }
.cart-col-price, .cart-col-total { text-align: right; white-space: nowrap; font-weight: 600; color: var(--heading-color); }
.cart-col-qty { text-align: center; }

.cart-product { display: flex; align-items: center; gap: 14px; }
.cart-product img {
    width: 56px; height: 56px; object-fit: contain;
    background: var(--light-bg);
    border-radius: 10px;
    padding: 6px;
    flex-shrink: 0;
}
.cart-product span { font-weight: 600; color: var(--heading-color); }

.cart-qty-form { display: inline-flex; align-items: center; gap: 8px; }
.cart-qty-form input {
    width: 56px; padding: 8px 6px; text-align: center;
    border: 1px solid var(--c-border-dddddd); border-radius: 6px; font-size: 0.95rem;
}
.cart-qty-form button {
    background: var(--light-bg);
    border: 1px solid var(--c-border-e2e5ec);
    color: var(--heading-color);
    font-size: 0.8rem;
    font-weight: 700;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s;
}
.cart-qty-form button:hover { background: var(--c-bg-e6e9f0); }

.cart-remove-btn {
    width: 30px; height: 30px;
    border-radius: 50%;
    border: none;
    background: var(--c-bg-fdecee);
    color: var(--airx-red);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}
.cart-remove-btn:hover { background: var(--airx-red); color: #fff; }

.cart-table-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 20px;
    background: var(--light-bg);
}
.cart-continue-link { color: var(--heading-color); text-decoration: none; font-weight: 600; font-size: 0.92rem; }
.cart-continue-link:hover { color: var(--airx-red); }
.cart-clear-btn {
    background: none; border: none;
    color: #a11d2b;
    font-size: 0.88rem; font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
}

.cart-summary, .checkout-summary {
    background: var(--c-bg-ffffff);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.04);
    padding: 28px 26px;
    position: sticky;
    top: 110px;
}
.cart-summary h3, .checkout-summary h3 {
    color: var(--heading-color);
    font-size: 1.2rem;
    margin-bottom: 18px;
}
.cart-summary-row, .checkout-summary-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    font-size: 0.95rem;
    color: var(--c-text-555555);
    border-bottom: 1px solid var(--c-border-eef0f4);
}
.cart-summary-discount, .checkout-summary-discount { color: #1e8a45; font-weight: 600; }
.cart-summary-total, .checkout-summary-total {
    border-bottom: none;
    padding-top: 16px;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--heading-color);
}
.cart-checkout-btn { display: block; width: 100%; text-align: center; margin-top: 20px; }


/* ==================== CHECKOUT PAGE ==================== */
.checkout-section { padding: 50px 5% 100px; background: var(--light-bg); }
.checkout-container { max-width: 1200px; margin: 0 auto; }

.checkout-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 32px;
    align-items: start;
}

.checkout-form-col {
    background: var(--c-bg-ffffff);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.04);
    padding: 34px 32px;
}
.checkout-form-col h2 { color: var(--heading-color); font-size: 1.3rem; margin-bottom: 22px; }

.checkout-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.checkout-field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; }
.checkout-field label { font-size: 0.82rem; font-weight: 700; color: var(--heading-color); }
.checkout-required { color: var(--airx-red); }
.checkout-hint { font-size: 0.78rem; color: var(--c-text-8b8fa3); }
.checkout-field input,
.checkout-field select {
    padding: 13px 15px;
    border: 1px solid var(--c-border-dddddd);
    border-radius: 8px;
    font-size: 0.98rem;
    font-family: inherit;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.checkout-field input:focus {
    outline: none;
    border-color: var(--airx-red);
    box-shadow: 0 0 0 3px rgba(218,33,40,0.12);
}

.checkout-coupon {
    background: var(--light-bg);
    border: 1px dashed var(--c-border-d6d9e2);
    border-radius: 10px;
    padding: 18px 20px;
    margin: 4px 0 26px;
}
.checkout-coupon label { display: block; font-size: 0.82rem; font-weight: 700; color: var(--heading-color); margin-bottom: 10px; }
.checkout-coupon-row { display: flex; gap: 10px; }
.checkout-coupon-row input {
    flex: 1;
    padding: 12px 14px;
    border: 1px solid var(--c-border-dddddd);
    border-radius: 8px;
    font-size: 0.95rem;
}
.checkout-coupon-row input:disabled { background: var(--c-bg-f0f1f5); color: var(--c-text-8b8fa3); }
.checkout-coupon-btn {
    background: var(--airx-navy);
    color: #fff;
    border: none;
    padding: 0 22px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.2s;
    white-space: nowrap;
}
.checkout-coupon-btn:hover { background: var(--airx-red); }
.checkout-coupon-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.checkout-coupon-btn--remove { background: transparent; color: #a11d2b; border: 1px solid #f3bcc2; }
.checkout-coupon-btn--remove:hover { background: var(--c-bg-fdecee); }
.checkout-coupon-msg { margin-top: 10px; font-size: 0.85rem; font-weight: 600; }
.checkout-coupon-msg.is-success { color: #1e8a45; }
.checkout-coupon-msg.is-error { color: #c0293a; }

.checkout-submit { display: block; width: 100%; text-align: center; margin-top: 6px; }

.checkout-summary-items {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 18px;
    max-height: 300px;
    overflow-y: auto;
}
.checkout-summary-items li { display: flex; align-items: center; gap: 12px; }
.checkout-summary-items img {
    width: 46px; height: 46px; object-fit: contain;
    background: var(--light-bg); border-radius: 8px; padding: 5px; flex-shrink: 0;
}
.checkout-summary-item-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.checkout-summary-item-name { font-size: 0.88rem; font-weight: 600; color: var(--heading-color); }
.checkout-summary-item-qty { font-size: 0.78rem; color: var(--c-text-8b8fa3); }
.checkout-summary-item-price { font-size: 0.85rem; font-weight: 700; color: var(--heading-color); white-space: nowrap; }

.checkout-back-link {
    display: block;
    text-align: center;
    margin-top: 18px;
    color: var(--heading-color);
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 600;
}
.checkout-back-link:hover { color: var(--airx-red); }


/* ==================== SUCCESS PAGE ==================== */
.success-section { padding: 150px 5% 100px; background: var(--light-bg); min-height: 70vh; }
.success-container { max-width: 720px; margin: 0 auto; }

.success-card {
    background: var(--c-bg-ffffff);
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.06);
    padding: 50px 44px;
    text-align: center;
}
.success-icon {
    width: 72px; height: 72px;
    margin: 0 auto 22px;
    border-radius: 50%;
    background: var(--c-bg-eaf7ee);
    color: #1e8a45;
    display: flex; align-items: center; justify-content: center;
}
.success-icon--error { background: var(--c-bg-fdecee); color: var(--airx-red); }
.success-card h1 { color: var(--heading-color); font-size: 1.9rem; margin-bottom: 12px; }
.success-sub { color: var(--c-text-6b6f85); max-width: 480px; margin: 0 auto 28px; line-height: 1.6; }

.success-ref {
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
    background: var(--light-bg);
    border-radius: 12px;
    padding: 14px 28px;
    margin-bottom: 30px;
}
.success-ref span { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; color: var(--c-text-8b8fa3); font-weight: 700; }
.success-ref strong { font-family: 'Courier New', monospace; font-size: 1.1rem; color: var(--heading-color); letter-spacing: 1px; word-break: break-all; }

.success-details-grid {
    display: flex;
    justify-content: center;
    gap: 36px;
    flex-wrap: wrap;
    padding-bottom: 30px;
    margin-bottom: 30px;
    border-bottom: 1px solid var(--c-border-eef0f4);
    text-align: left;
}
.success-details-grid > div { display: flex; flex-direction: column; gap: 4px; }
.success-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; color: var(--c-text-8b8fa3); font-weight: 700; }
.success-status { color: #b8860b; font-weight: 700; text-transform: capitalize; }

.success-items-table { width: 100%; border-collapse: collapse; margin-bottom: 24px; text-align: left; }
.success-items-table th {
    font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.5px;
    color: var(--c-text-8b8fa3); padding: 8px 4px; border-bottom: 2px solid var(--c-border-eef0f4);
}
.success-items-table td { padding: 12px 4px; border-bottom: 1px solid var(--c-border-f4f5f7); font-size: 0.92rem; color: var(--c-text-333333); }
.success-items-table th:last-child, .success-items-table td:last-child { text-align: right; }
.success-items-table th:nth-child(2), .success-items-table td:nth-child(2) { text-align: center; }

.success-totals { max-width: 360px; margin: 0 auto 30px; text-align: left; }
.success-totals-row { display: flex; justify-content: space-between; padding: 8px 0; color: var(--c-text-555555); font-size: 0.95rem; }
.success-totals-discount { color: #1e8a45; font-weight: 600; }
.success-totals-final { font-size: 1.2rem; font-weight: 800; color: var(--heading-color); border-top: 1px solid var(--c-border-eef0f4); margin-top: 6px; padding-top: 14px; }

.success-actions { display: flex; align-items: center; justify-content: center; gap: 22px; flex-wrap: wrap; }
.success-continue-link { color: var(--heading-color); text-decoration: none; font-weight: 700; font-size: 0.95rem; }
.success-continue-link:hover { color: var(--airx-red); }


/* ==================== RESPONSIVE ==================== */
@media (max-width: 980px) {
    .cart-layout, .checkout-layout { grid-template-columns: 1fr; }
    .cart-summary, .checkout-summary { position: static; }
}
@media (max-width: 700px) {
    .cart-hero, .checkout-hero { padding: 130px 6% 40px; }
    .success-section { padding: 120px 5% 70px; }
    .success-card { padding: 36px 24px; }
    .checkout-row { grid-template-columns: 1fr; }
    .checkout-form-col { padding: 26px 22px; }

    /* Stack the cart table into cards */
    .cart-table thead { display: none; }
    .cart-table, .cart-table tbody, .cart-table tr, .cart-table td { display: block; width: 100%; }
    .cart-table tr {
        border-bottom: 8px solid var(--light-bg);
        padding: 14px 0;
    }
    .cart-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 20px;
        border-bottom: none;
        text-align: right;
    }
    .cart-table td.cart-col-product { padding-top: 14px; }
    .cart-table td[data-label]::before {
        content: attr(data-label);
        font-size: 0.72rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: var(--c-text-8b8fa3);
        font-weight: 700;
    }
    .cart-table td.cart-col-product::before { display: none; }
    .cart-table .cart-product { flex: 1; }
    .cart-table-actions { flex-direction: column; gap: 14px; align-items: stretch; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
    .cart-page *, .checkout-page *, .success-page * { transition: none !important; }
}
/* ==================== DARK MODE OVERRIDES ==================== */

[data-theme="dark"] {
    color-scheme: dark;
    --heading-color: #f1f3fc;
    --light-bg: #11153a;
    --dark-text: #f1f3fc;

    /* Semantic surfaces (see :root) */
    --ax-page: #0a0d26;
    --ax-tint: #0f1333;
    --ax-card: #151a45;
    --ax-strong: #f1f3fc;
    --ax-text: #a9afce;
    --ax-line: rgba(255, 255, 255, 0.1);
    --ax-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 22px rgba(0, 0, 0, 0.28);
    --ax-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), 0 20px 48px rgba(0, 0, 0, 0.4);
    --ax-shadow-lg: 0 34px 80px rgba(0, 0, 0, 0.55);

    --c-bg-e6e9f0: #11153a;
    --c-bg-e6edf5: #11153a;
    --c-bg-e8ebf3: #11153a;
    --c-bg-eaeaea: #11153a;
    --c-bg-eaf7ee: #11153a;
    --c-bg-edfaf1: #11153a;
    --c-bg-eef2ff: #11153a;
    --c-bg-f0f1f5: #11153a;
    --c-bg-f3f6fa: #11153a;
    --c-bg-f4f5f7: #11153a;
    --c-bg-f4f5f8: #11153a;
    --c-bg-f7f8fc: #11153a;
    --c-bg-f8f9fa: #11153a;
    --c-bg-f8f9fc: #11153a;
    --c-bg-f9fafc: #11153a;
    --c-bg-fafbfc: #0a0d26;
    --c-bg-fdecee: #11153a;
    --c-bg-fef2f2: #11153a;
    --c-bg-ffffff: #0a0d26;
    --c-border-bfe6c9: #232856;
    --c-border-d6d9e2: #232856;
    --c-border-dce0ec: #232856;
    --c-border-dddddd: #232856;
    --c-border-dde0e8: #232856;
    --c-border-e2e5ec: #232856;
    --c-border-e2e6ef: #232856;
    --c-border-e6e8ef: #232856;
    --c-border-edf0f5: #232856;
    --c-border-eeeeee: #232856;
    --c-border-eef0f4: #232856;
    --c-border-eef0f6: #232856;
    --c-border-f0f1f5: #232856;
    --c-border-f0f2f7: #232856;
    --c-border-f2f2f2: #232856;
    --c-border-f4f5f7: #232856;
    --c-border-ffffff: #232856;
    --c-text-2b2d42: #f1f3fc;
    --c-text-333333: #f1f3fc;
    --c-text-3a3d55: #f1f3fc;
    --c-text-434966: #c3c8e0;
    --c-text-444444: #f1f3fc;
    --c-text-4a4e69: #c3c8e0;
    --c-text-555555: #c3c8e0;
    --c-text-5a5f77: #c3c8e0;
    --c-text-636a8c: #c3c8e0;
    --c-text-666666: #c3c8e0;
    --c-text-6b6f85: #c3c8e0;
    --c-text-717897: #c3c8e0;
    --c-text-777777: #c3c8e0;
    --c-text-7a7e94: #c3c8e0;
    --c-text-7f86a6: #969cbd;
    --c-text-838aa8: #969cbd;
    --c-text-888888: #969cbd;
    --c-text-8b8fa3: #969cbd;
    --c-text-8c93b3: #969cbd;
    --c-text-8f92b3: #969cbd;
    --c-text-9599b0: #969cbd;
    --c-text-999999: #969cbd;
    --c-text-9aa1bc: #969cbd;
    --c-text-a0a4b8: #969cbd;
    --c-text-a2a8c3: #969cbd;
}

/* Translucent surfaces built from rgba() (the floating header, mega menu,
   mobile panel) can't be reached by the hex sweep above -- their dark-mode
   overrides live with the rest of the shared layer at the end of this file. */

/* --- Floating WhatsApp button (shared header, all pages) --- */
.wa-float {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 1500;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #25d366;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 26px rgba(37, 211, 102, 0.45), 0 2px 10px rgba(0, 0, 0, 0.18);
    transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.wa-float::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: #25d366;
    z-index: -1;
    animation: wa-pulse 2.4s ease-out infinite;
}
.wa-float:hover {
    background: #1ebe5d;
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 14px 32px rgba(37, 211, 102, 0.55), 0 4px 12px rgba(0, 0, 0, 0.22);
}
@keyframes wa-pulse {
    0%   { opacity: 0.55; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.6); }
}
@media (max-width: 480px) {
    .wa-float { width: 52px; height: 52px; right: 16px; bottom: 16px; }
    .wa-float svg { width: 26px; height: 26px; }
}
@media (prefers-reduced-motion: reduce) {
    .wa-float::before { animation: none; }
}


/* --- Dark / light mode toggle switch (shared header, all pages) --- */
.theme-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 50px;
    height: 27px;
    border-radius: 999px;
    background-color: rgba(31, 33, 81, 0.1);
    border: 1.5px solid rgba(31, 33, 81, 0.15);
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}
.theme-toggle:hover { border-color: var(--airx-red); }
.theme-toggle input {
    position: absolute;
    inset: 0;
    opacity: 0;
    margin: 0;
    cursor: pointer;
}
.theme-toggle-track {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 6px;
    pointer-events: none;
}
.theme-toggle-track svg {
    width: 13px;
    height: 13px;
    color: var(--heading-color);
    opacity: 0.5;
    transition: opacity 0.3s ease;
}
.theme-toggle-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 21px;
    height: 21px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    transition: transform 0.3s ease, background-color 0.3s ease;
    pointer-events: none;
}
.theme-toggle input:checked ~ .theme-toggle-thumb {
    transform: translateX(23px);
    background-color: var(--airx-navy);
}
.theme-toggle input:checked ~ .theme-toggle-track .theme-toggle-icon-moon { opacity: 1; }
.theme-toggle input:not(:checked) ~ .theme-toggle-track .theme-toggle-icon-sun { opacity: 1; }
.theme-toggle input:focus-visible ~ .theme-toggle-thumb { outline: 2px solid var(--airx-red); outline-offset: 2px; }

[data-theme="dark"] .theme-toggle {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.18);
}
[data-theme="dark"] .theme-toggle input:checked ~ .theme-toggle-thumb {
    background-color: #eef0f8;
}

.mobile-nav-theme-row {
    display: flex; align-items: center; justify-content: space-between;
    color: var(--heading-color); font-weight: 600; font-size: 0.95rem;
}

/* Admin-authored article bodies are pasted from external rich-text editors and
   often carry their own inline color, which normally overrides the theme —
   force it back to the readable dark-mode tone here. */
[data-theme="dark"] .art-rich-content,
[data-theme="dark"] .art-rich-content * {
    color: var(--c-text-2b2d42) !important;
}
[data-theme="dark"] .art-rich-content h1,
[data-theme="dark"] .art-rich-content h2,
[data-theme="dark"] .art-rich-content h3,
[data-theme="dark"] .art-rich-content h4 {
    color: var(--heading-color) !important;
}

/* Product photos use mix-blend-mode: multiply so their white cutout
   background disappears -- that only works against a light backdrop, so the
   card's photo stage stays light on purpose even in dark mode (same reasoning
   as the single product page's .pd-stage). */
[data-theme="dark"] .prod-card-media {
    background: radial-gradient(120% 90% at 50% 30%, #ffffff 0%, #f3f6fa 65%, #e6edf5 100%);
}


/* ============================================================
   SHARED DESIGN LAYER
   The page sections above each grew their own hero, eyebrow,
   card, button and CTA styles under their own class prefix
   (abx- / proj- / ct- / prod- / art- / cart-). This layer gives
   them one visual language by styling those siblings together,
   so a change to "what a card looks like" happens in one place.
   It sits last so it wins over the per-page rules it unifies.
   ============================================================ */

/* ---- Home scroll reveal (other pages carry their own scoped copy) ---- */
.hx [data-reveal] {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.8s ease, transform 0.8s var(--ax-ease);
}
.hx [data-reveal].is-visible { opacity: 1; transform: none; }
.hx [data-reveal][data-reveal-delay="1"] { transition-delay: 0.07s; }
.hx [data-reveal][data-reveal-delay="2"] { transition-delay: 0.15s; }
.hx [data-reveal][data-reveal-delay="3"] { transition-delay: 0.23s; }
@media (prefers-reduced-motion: reduce) {
    .hx [data-reveal] { opacity: 1; transform: none; transition: none; }
}

@keyframes axModalIn {
    from { opacity: 0; transform: translateY(24px) scale(0.97); }
    to   { opacity: 1; transform: none; }
}


/* ==================== PAGE HEROES ==================== */
.abx-hero,
.projects .projects-hero,
.contact-page .ct-hero,
.products-page .prod-hero,
.articles-page .art-hero,
.cart-hero,
.checkout-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-bottom: 0;
    background-color: var(--ax-ink);
    background-attachment: scroll;
}
/* Cool/warm glow + a fade to solid ink at the bottom, over the page's own photo */
.abx-hero::before,
.projects .projects-hero::before,
.contact-page .ct-hero::before,
.products-page .prod-hero::before,
.articles-page .art-hero::before,
.cart-hero::before,
.checkout-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(44% 60% at 6% 8%, rgba(57, 184, 255, 0.24), transparent 70%),
        radial-gradient(40% 58% at 100% 100%, rgba(218, 33, 40, 0.26), transparent 70%),
        linear-gradient(180deg, rgba(8, 11, 36, 0.5) 0%, rgba(8, 11, 36, 0.1) 38%, rgba(8, 11, 36, 0.82) 100%);
}
/* Faint engineering grid, fading out towards the edges */
.abx-hero::after,
.projects .projects-hero::after,
.contact-page .ct-hero::after,
.products-page .prod-hero::after,
.articles-page .art-hero::after,
.cart-hero::after,
.checkout-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 60px 60px;
    -webkit-mask-image: radial-gradient(75% 85% at 50% 35%, #000, transparent 88%);
    mask-image: radial-gradient(75% 85% at 50% 35%, #000, transparent 88%);
}

.abx-hero h1,
.projects .projects-hero h1,
.ct-hero h1,
.prod-hero h1,
.art-hero h1,
.cart-hero h1,
.checkout-hero h1 {
    font-weight: 700;
    line-height: 1.06;
    letter-spacing: -0.04em;
    text-shadow: none;
    text-wrap: balance;
    /* White easing into an icy tint towards the baseline */
    background: linear-gradient(180deg, #ffffff 35%, #bfeaff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    padding-bottom: 0.06em;
}
.abx-hero h1,
.projects .projects-hero h1,
.ct-hero h1,
.prod-hero h1,
.art-hero h1 { font-size: clamp(2.2rem, 4.7vw, 3.9rem); }
.cart-hero h1, .checkout-hero h1 { font-size: clamp(2rem, 4vw, 3.1rem); letter-spacing: -0.04em; }

.abx-hero p,
.projects .projects-hero > p,
.ct-hero > .ct-hero-inner > p,
.prod-hero p,
.art-hero p { color: rgba(255, 255, 255, 0.76); font-size: clamp(1rem, 1.2vw, 1.13rem); }

.abx-hero { min-height: 680px; padding-top: 180px; }
.abx-hero-inner { max-width: 760px; }
.cart-hero, .checkout-hero { padding-top: 170px; padding-bottom: 60px; }

/* Frosted stat strips inside the heroes */
.proj-hero-stats,
.prod-hero-stats {
    border-radius: 24px;
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.14);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.35);
}
.proj-hero-stat,
.prod-hero-stat { background: rgba(10, 13, 40, 0.62); }
.proj-hero-stat:hover,
.prod-hero-stat:hover { background: rgba(10, 13, 40, 0.44); }
.proj-hero-stat strong,
.prod-hero-stat strong,
.story-highlight strong,
.abx-stat-row strong,
.ct-do-badge strong { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.03em; }
.proj-hero-stat strong { font-size: 1.9rem; }
.prod-stat-icon {
    border-radius: 14px;
    color: #9fe3ff;
    background: rgba(127, 220, 255, 0.12);
    border: 1px solid rgba(127, 220, 255, 0.2);
}
.abx-pill {
    padding: 11px 18px;
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.08);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}
.abx-pill svg { color: #9fe3ff; }


/* ==================== EYEBROW CHIPS ==================== */
.about-section-eyebrow,
.proj-section-eyebrow,
.ct-eyebrow,
.ct-section-eyebrow,
.prod-eyebrow,
.prod-section-eyebrow,
.prod-cta-eyebrow,
.art-eyebrow,
.abx-eyebrow,
.proj-eyebrow,
.cart-eyebrow,
.checkout-eyebrow,
.modal-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 18px;
    padding: 7px 14px 7px 11px;
    border-radius: 999px;
    border: 1px solid var(--ax-line);
    background: var(--ax-card);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ax-strong);
}
.about-section-eyebrow::before,
.proj-section-eyebrow::before,
.ct-eyebrow::before,
.ct-section-eyebrow::before,
.prod-eyebrow::before,
.prod-section-eyebrow::before,
.prod-cta-eyebrow::before,
.art-eyebrow::before,
.abx-eyebrow::before,
.proj-eyebrow::before,
.cart-eyebrow::before,
.checkout-eyebrow::before,
.modal-eyebrow::before {
    content: "";
    display: block;
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--airx-red);
    box-shadow: 0 0 0 4px rgba(218, 33, 40, 0.16);
}
/* On dark surfaces the chip turns to frosted glass with an ice-blue dot */
.abx-eyebrow,
.proj-eyebrow,
.cart-eyebrow,
.checkout-eyebrow,
.ct-hero .ct-eyebrow,
.prod-hero .prod-eyebrow,
.art-hero .art-eyebrow,
.prod-cta-eyebrow,
.abx-growth .about-section-eyebrow,
.ct-do-content .ct-section-eyebrow {
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.08);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    color: #fff;
}
.abx-eyebrow::before,
.proj-eyebrow::before,
.cart-eyebrow::before,
.checkout-eyebrow::before,
.ct-hero .ct-eyebrow::before,
.prod-hero .prod-eyebrow::before,
.art-hero .art-eyebrow::before,
.prod-cta-eyebrow::before,
.abx-growth .about-section-eyebrow::before,
.ct-do-content .ct-section-eyebrow::before {
    background: #7fdcff;
    box-shadow: 0 0 0 4px rgba(127, 220, 255, 0.18), 0 0 12px #7fdcff;
}
.modal-eyebrow { margin-bottom: 12px; }


/* ==================== SECTION HEADINGS ==================== */
.about .story-content h2,
.abx-leaders-header h2,
.abx-growth-header h2,
.proj-section-header h2,
.ct-form-col h2,
.ct-map-header h2,
.ct-do-content h2,
.prod-guide-header h2,
.prod-cta-text h2,
.art-related-header h2,
.art-cta-inner h2 {
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.04em;
    text-wrap: balance;
}
.about .story-content h2,
.abx-leaders-header h2,
.abx-growth-header h2,
.proj-section-header h2,
.prod-guide-header h2,
.ct-map-header h2 { font-size: clamp(1.9rem, 3.4vw, 2.9rem); }


/* ==================== BUTTONS ==================== */
.btn { justify-content: center; gap: 8px; font-family: inherit; }
.btn-solid {
    background-image: var(--ax-grad-red) !important;
    padding: 15px 28px !important;
    box-shadow: 0 10px 26px rgba(218, 33, 40, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.28);
    transition: transform 0.3s var(--ax-ease), box-shadow 0.3s ease, filter 0.3s ease;
}
.btn-solid:hover {
    transform: translateY(-3px);
    filter: brightness(1.07);
    box-shadow: 0 16px 34px rgba(218, 33, 40, 0.46), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.prod-btn-view,
.prod-btn-quote {
    min-height: 46px;
    border-radius: 999px;
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s var(--ax-ease);
}
.prod-btn-view { background: var(--airx-navy); }
.prod-btn-quote { border-color: var(--ax-line); }
.prod-btn-quote:hover { border-color: var(--ax-strong); background: transparent; transform: translateY(-2px); }
.prod-wa-btn,
.art-wa-btn,
.ct-wa-btn,
.ct-do-call-btn { min-height: 52px; transition: background 0.3s ease, transform 0.3s var(--ax-ease), box-shadow 0.3s ease; }
.prod-wa-btn:hover,
.art-wa-btn:hover,
.ct-wa-btn:hover,
.ct-do-call-btn:hover { transform: translateY(-3px); }
.art-copy-btn { min-height: 40px; }
.checkout-coupon-btn { border-radius: 14px; }
.modal-video-link { border-radius: 999px; }


/* ==================== CARDS ==================== */
.prod-card,
.art-card,
.art-spotlight,
.art-related-card,
.projects .project-card,
.prod-guide-card,
.ct-info-card {
    position: relative;
    border-radius: 28px;
    border: 1px solid var(--ax-line);
    box-shadow: var(--ax-shadow-sm);
    transition: transform 0.45s var(--ax-ease), box-shadow 0.45s ease, border-color 0.45s ease;
}
.prod-card:hover,
.art-card:hover,
.art-spotlight:hover,
.art-related-card:hover,
.projects .project-card:hover,
.prod-guide-card:hover {
    transform: translateY(-8px);
    border-color: var(--ax-line);
    box-shadow: var(--ax-shadow-lg);
}
.projects .project-card { border-bottom: 1px solid var(--ax-line); }

/* Pointer-follow glow (--mx / --my are set by the script in includes/footer.php) */
.hx-feat::before,
.prod-card::before,
.art-card::before,
.projects .project-card::before,
.prod-guide-card::before,
.ct-info-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(440px circle at var(--mx, 50%) var(--my, 0%), rgba(57, 184, 255, 0.13), transparent 62%);
    opacity: 0;
    transition: opacity 0.45s ease;
}
.hx-feat::before { background: radial-gradient(460px circle at var(--mx, 50%) var(--my, 0%), rgba(127, 220, 255, 0.2), transparent 62%); }
.hx-feat:hover::before,
.prod-card:hover::before,
.art-card:hover::before,
.projects .project-card:hover::before,
.prod-guide-card:hover::before,
.ct-info-card:hover::before { opacity: 1; }

/* Media sits in its own inset rounded panel, like the home-page cards */
.prod-card-media,
.art-card-media,
.projects .card-image {
    margin: 10px 10px 0;
    border-radius: 20px;
    border-bottom: 0;
    overflow: hidden;
}
.prod-card-body, .art-card-body { padding: 22px 22px 22px; }
.projects .card-details { border-top: 0; padding: 20px 22px 24px; }

.prod-card-title,
.art-card-title,
.projects .card-details h4,
.art-related-content h3,
.prod-guide-card h3,
.prod-empty-state h3,
.art-empty-state h3 { font-weight: 600; letter-spacing: -0.03em; }
.prod-card-title { font-size: 1.16rem; }
.art-card-title { font-size: 1.2rem; }
.art-spotlight-content h2 { font-weight: 700; letter-spacing: -0.035em; line-height: 1.15; }

.prod-badge { letter-spacing: 0.08em; font-size: 0.66rem; padding: 6px 12px; }
.prod-badge-category {
    background: rgba(255, 255, 255, 0.92);
    color: #12153d;
    border: 1px solid rgba(13, 16, 48, 0.08);
    box-shadow: 0 4px 12px rgba(13, 16, 48, 0.08);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.prod-badge-discount { background: var(--ax-grad-red); box-shadow: 0 6px 16px rgba(218, 33, 40, 0.36); }
.prod-spec-pill { border-radius: 999px; padding: 5px 12px; }
.prod-amount { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.04em; }
.art-badge { letter-spacing: 0.1em; font-size: 0.66rem; padding: 6px 12px; }
.card-capacity, .modal-capacity-badge { padding: 6px 14px; }
.card-overlay { background: rgba(8, 11, 36, 0.5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }

/* Featured guide card: inverted to the dark brand panel */
.prod-guide-card { padding: 34px 30px; background: var(--ax-tint); }
.prod-guide-card--highlight {
    border-color: transparent;
    background:
        radial-gradient(80% 60% at 100% 0%, rgba(218, 33, 40, 0.42), transparent 62%),
        linear-gradient(160deg, #23266a, var(--ax-ink));
    box-shadow: 0 24px 56px rgba(8, 11, 36, 0.28);
}
.prod-guide-card--highlight h3,
.prod-guide-card--highlight .prod-guide-link { color: #fff; }
.prod-guide-card--highlight p,
.prod-guide-card--highlight .prod-guide-list { color: rgba(255, 255, 255, 0.74); }
.prod-guide-card--highlight .prod-guide-badge { color: #9fe3ff; }
.prod-guide-card--highlight .prod-guide-link:hover { color: #9fe3ff; }
.prod-guide-badge { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.16em; }
.prod-guide-list { list-style: none; padding-left: 0; }
.prod-guide-list li { position: relative; padding-left: 20px; }
.prod-guide-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 7px;
    height: 7px;
    border-radius: 2px;
    background: var(--airx-red);
    transform: rotate(45deg);
}

.prod-empty-state,
.art-empty-state,
.cart-empty { border-radius: 28px; border: 1px solid var(--ax-line); box-shadow: var(--ax-shadow-sm); }


/* ==================== FILTER BARS & FORM CONTROLS ==================== */
/* The filter bar floats up over the bottom edge of the hero */
.products-page .prod-hero,
.articles-page .art-hero { padding-bottom: 124px; }
.prod-catalog-section,
.art-main-section { padding-top: 0; }
.prod-control-bar,
.art-control-bar {
    position: relative;
    z-index: 2;
    margin-top: -48px;
    padding: 22px 26px;
    border-radius: 28px;
    border: 1px solid var(--ax-line);
    box-shadow: var(--ax-shadow);
}
.prod-filter-label { letter-spacing: 0.14em; font-size: 0.68rem; }
.prod-tab,
.art-tab { min-height: 40px; padding: 0 18px; background: var(--ax-tint); font-weight: 600; }
.prod-tech-btn { min-height: 36px; border-radius: 999px; }
.prod-search-box input,
.art-search-box input,
.prod-sort-box select {
    min-height: 46px;
    border-radius: 14px;
    border-color: var(--ax-line);
    background-color: var(--ax-tint);
}
.prod-results-meta, .art-results-meta { padding: 0 6px; }

.ct-field input,
.ct-field select,
.ct-field textarea,
.checkout-field input,
.checkout-field select,
.checkout-coupon-row input,
.cart-qty-form input {
    border-radius: 14px;
    border: 1.5px solid var(--ax-line);
    background-color: var(--ax-tint);
    box-shadow: none;
    color: var(--ax-strong);
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}
.ct-field input, .ct-field select, .ct-field textarea { padding: 15px 17px; border-radius: 16px; }
.ct-field input:focus,
.ct-field select:focus,
.ct-field textarea:focus,
.checkout-field input:focus,
.checkout-field select:focus,
.checkout-coupon-row input:focus,
.prod-search-box input:focus,
.art-search-box input:focus,
.prod-sort-box select:focus {
    outline: none;
    border-color: var(--airx-navy);
    background-color: var(--ax-card);
    box-shadow: 0 0 0 4px rgba(31, 33, 81, 0.1);
}
.ct-field label, .checkout-field label { font-size: 0.8rem; font-weight: 700; }


/* ==================== DARK CTA BANDS ==================== */
.prod-cta-banner,
.art-cta-strip,
.ct-cta-strip,
.abx-growth {
    isolation: isolate;
    background: var(--ax-ink);
}
.prod-cta-banner::before,
.art-cta-strip::before,
.ct-cta-strip::before,
.abx-growth::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(42% 60% at 92% 0%, rgba(57, 184, 255, 0.2), transparent 70%),
        radial-gradient(40% 60% at 0% 100%, rgba(218, 33, 40, 0.22), transparent 70%),
        radial-gradient(50% 60% at 50% 50%, rgba(44, 52, 150, 0.22), transparent 75%);
}
.prod-cta-banner::after,
.art-cta-strip::after,
.ct-cta-strip::after,
.abx-growth::after {
    z-index: -1;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(80% 80% at 50% 40%, #000, transparent 90%);
    mask-image: radial-gradient(80% 80% at 50% 40%, #000, transparent 90%);
}
.prod-cta-banner, .art-cta-strip { padding-top: clamp(60px, 7vw, 96px); padding-bottom: clamp(60px, 7vw, 96px); }
.prod-cta-text h2, .art-cta-inner h2 { font-size: clamp(1.8rem, 3.2vw, 2.7rem); }


/* ==================== ABOUT PAGE ==================== */
.about .company-story { padding-top: clamp(70px, 8vw, 120px); padding-bottom: clamp(70px, 8vw, 120px); }
.about .story-visual { border-radius: 32px; box-shadow: var(--ax-shadow-lg); }
.about .story-visual img { border-radius: 32px; }
.about .story-visual::after {
    /* replaces the old red edge bar with an offset outline frame */
    top: 18px;
    left: 18px;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: none;
    border: 1.5px solid var(--ax-line);
    border-radius: 32px;
}
.about .story-visual { isolation: isolate; }
.story-badge {
    top: 20px;
    right: 20px;
    padding: 9px 18px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(8, 11, 36, 0.55);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    box-shadow: none;
}
.story-highlights { gap: 14px; border-top: 0; padding-top: 0; }
.story-highlight {
    flex: 1;
    padding: 20px 22px;
    border-radius: 20px;
    border: 1px solid var(--ax-line);
    background: var(--ax-tint);
}
.story-highlight strong { font-size: 1.45rem; }

.abx-leaders { background: var(--ax-tint); }
.abx-leader-row {
    padding: clamp(18px, 2.4vw, 28px);
    gap: clamp(28px, 5vw, 64px);
    border-radius: 36px;
    border: 1px solid var(--ax-line);
    background: var(--ax-card);
    box-shadow: var(--ax-shadow);
}
.abx-leader-row + .abx-leader-row { margin-top: 32px; }
.abx-leader-photo { border-radius: 26px; box-shadow: none; }
.abx-leader-photo img { transition: transform 0.9s var(--ax-ease); }
.abx-leader-row:hover .abx-leader-photo img { transform: scale(1.04); }
.abx-leader-badge { background: var(--ax-grad-red); letter-spacing: 0.12em; font-size: 0.66rem; }
.abx-leader-text { padding-right: clamp(0px, 2vw, 28px); }
.abx-leader-row-rev .abx-leader-text { padding-right: 0; padding-left: clamp(0px, 2vw, 28px); }
.abx-quote-mark,
.abx-leader-row-rev .abx-quote-mark { top: -26px; left: auto; right: 10px; opacity: 0.16; }
.abx-leader-name { font-family: var(--font-display); font-size: 1.7rem; font-weight: 700; letter-spacing: -0.035em; }
.abx-leader-role { letter-spacing: 0.16em; font-size: 0.7rem; font-weight: 800; }

.abx-growth-map { border-radius: 30px; padding: 14px; }
.abx-growth-map img { border-radius: 20px; }
.abx-growth-stats { gap: 12px; }
.abx-stat-row,
.abx-stat-row:last-child {
    padding: 18px 20px;
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s var(--ax-ease);
}
.abx-stat-row:hover { background: rgba(255, 255, 255, 0.09); border-color: rgba(127, 220, 255, 0.35); transform: translateX(6px); }
.abx-stat-icon { border-radius: 16px; color: #9fe3ff; background: rgba(127, 220, 255, 0.12); border-color: rgba(127, 220, 255, 0.2); }
.abx-stat-row strong { font-size: 1.9rem; }
.abx-stat-row span { letter-spacing: 0.12em; font-size: 0.72rem; }


/* ==================== PROJECTS PAGE ==================== */
.projects .projects-container { padding-top: clamp(70px, 8vw, 110px); padding-bottom: clamp(70px, 8vw, 110px); }
.projects .project-grid { max-width: 1260px; margin: 0 auto; gap: 24px; }
.projects .card-image { height: 220px; }
.projects .project-modal { background: rgba(6, 8, 28, 0.78); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.projects .modal-content { border-radius: 28px; box-shadow: 0 40px 100px rgba(0, 0, 0, 0.45); animation: axModalIn 0.45s var(--ax-ease); }
.projects .modal-header h3 { font-weight: 700; letter-spacing: -0.03em; }
.projects .close-btn { width: 40px; height: 40px; transition: background 0.2s, color 0.2s, transform 0.3s var(--ax-ease); }
.projects .close-btn:hover { transform: rotate(90deg); }
.projects .modal-gallery img { border-radius: 16px; height: 170px; }
.projects .modal-branches h4 { font-family: var(--font-body); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.14em; color: var(--c-text-8f92b3); }
.modal-video-wrap { border-radius: 16px; }


/* ==================== CONTACT PAGE ==================== */
/* Form + info cards ride up over the bottom edge of the hero */
.contact-page .ct-hero { padding-bottom: 150px; }
.ct-main { padding-top: 0; padding-bottom: clamp(60px, 7vw, 96px); }
.ct-main-inner { position: relative; z-index: 2; margin-top: -76px; gap: 28px; max-width: 1240px; }
.ct-form-col {
    padding: clamp(24px, 3.6vw, 46px);
    border-radius: 34px;
    border: 1px solid var(--ax-line);
    background: var(--ax-card);
    box-shadow: var(--ax-shadow);
}
.ct-hero-inner { max-width: 860px; }
.ct-info-col { gap: 14px; position: sticky; top: 96px; }
.ct-info-card { padding: 24px; }
.ct-info-card > div:last-child { flex: 1; min-width: 0; }
.ct-hours-table td { white-space: nowrap; }
.ct-main-inner > * { min-width: 0; } /* let the grid columns shrink on phones */
.ct-info-icon { width: 46px; height: 46px; border-radius: 15px; background: linear-gradient(135deg, rgba(218, 33, 40, 0.16), rgba(218, 33, 40, 0.05)); }
.ct-info-card h4 { font-family: var(--font-body); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.16em; color: var(--c-text-8f92b3); }
.ct-trust-badges {
    padding: 24px;
    border-radius: 28px;
    background:
        radial-gradient(80% 70% at 100% 0%, rgba(218, 33, 40, 0.4), transparent 62%),
        linear-gradient(160deg, #23266a, var(--ax-ink));
}
.ct-trust-badges svg { color: #9fe3ff; }
.ct-alert { border-radius: 16px; }

.ct-cta-strip { padding-top: clamp(64px, 8vw, 110px); padding-bottom: clamp(64px, 8vw, 110px); }
.ct-do-visual img { border-radius: 30px; }
.ct-do-badge { border-radius: 20px; padding: 16px 24px; }
.ct-do-badge strong { font-size: 1.6rem; }
.ct-do-point {
    padding: 12px 16px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
}
.ct-do-points { gap: 10px; }
.ct-do-point-icon { border-radius: 11px; color: #9fe3ff; background: rgba(127, 220, 255, 0.14); }

.ct-map-section { padding-bottom: clamp(60px, 7vw, 100px); }
.ct-map-header { padding-top: clamp(64px, 8vw, 110px); }
.ct-map-embed {
    width: auto;
    max-width: 1240px;
    margin: 0 auto;
    border-radius: 34px;
    border: 1px solid var(--ax-line);
    box-shadow: var(--ax-shadow);
}
@media (max-width: 1288px) { .ct-map-embed { margin: 0 24px; } }


/* ==================== PRODUCTS PAGE ==================== */
.prod-grid { gap: 24px; }
.prod-card-media { height: 250px; }
.prod-card-model { border-radius: 999px; padding: 4px 10px; }
.prod-feature-bullets li svg { color: var(--airx-red); }
.prod-guide-section { padding-top: clamp(70px, 8vw, 116px); padding-bottom: clamp(70px, 8vw, 116px); border-top: 0; }
.prod-guide-grid { gap: 20px; }


/* ==================== ARTICLES ==================== */
.art-spotlight { padding: 10px; }
.art-spotlight-image { border-radius: 20px; }
.art-grid { gap: 24px; }
.art-related-img-link { margin: 10px 10px 0; border-radius: 18px; }
.art-headline { font-weight: 700; letter-spacing: -0.04em; line-height: 1.08; text-wrap: balance; }
.art-reader-main { padding-top: 104px; }
.art-cover-box { border-radius: 30px; box-shadow: var(--ax-shadow-lg); }
.art-rich-content h1,
.art-rich-content h2,
.art-rich-content h3,
.art-rich-content h4 { font-weight: 700; letter-spacing: -0.03em; }
.art-rich-content img { border-radius: 20px; }
.art-rich-content blockquote { border-left: 0; border-radius: 22px; background: var(--ax-tint); position: relative; padding-left: 34px; }
.art-rich-content blockquote::before {
    content: "";
    position: absolute;
    left: 14px;
    top: 22px;
    bottom: 22px;
    width: 4px;
    border-radius: 4px;
    background: var(--ax-grad-red);
}
.art-rich-content table { border-radius: 18px; }
.art-bio-card { border-radius: 26px; border-color: var(--ax-line); background: var(--ax-tint); }
.art-author-avatar, .art-bio-icon { border-radius: 16px; }


/* ==================== CART / CHECKOUT / SUCCESS ==================== */
.cart-table-wrap,
.cart-summary,
.checkout-summary,
.checkout-form-col {
    border-radius: 28px;
    border: 1px solid var(--ax-line);
    box-shadow: var(--ax-shadow-sm);
}
.cart-table thead th { background: var(--ax-ink); letter-spacing: 0.12em; font-size: 0.68rem; padding: 18px 20px; }
.cart-product img, .checkout-summary-items img { border-radius: 14px; }
.cart-qty-form button { border-radius: 12px; }
.cart-summary h3, .checkout-summary h3, .checkout-form-col h2 { font-weight: 700; letter-spacing: -0.03em; }
.cart-summary-total, .checkout-summary-total, .success-totals-final { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.03em; }
.checkout-coupon { border-radius: 18px; }
.cart-flash, .checkout-alert { border-radius: 16px; }
.success-card { border-radius: 36px; border: 1px solid var(--ax-line); box-shadow: var(--ax-shadow); }
.success-card h1 { font-weight: 700; letter-spacing: -0.04em; }
.success-icon { border-radius: 24px; }
.success-ref { border-radius: 18px; }


/* ==================== RESPONSIVE ==================== */
@media (max-width: 960px) {
    .ct-info-col { position: static; }
    .abx-quote-mark, .abx-leader-row-rev .abx-quote-mark { display: none; }
    .abx-leader-row, .abx-leader-row-rev { padding: 20px 20px 30px; }
    .abx-leader-text, .abx-leader-row-rev .abx-leader-text { padding: 0 6px; }
    .about .story-visual::after { display: none; }
}
@media (max-width: 860px) {
    .prod-control-bar, .art-control-bar { padding: 18px; border-radius: 24px; }
}
@media (max-width: 640px) {
    .abx-hero { min-height: 0; padding-top: 150px; }
    .contact-page .ct-hero { padding-bottom: 120px; }
    .ct-main-inner { margin-top: -64px; }
    .ct-hours-table td { white-space: normal; }
    .ct-info-card { padding: 20px 18px; gap: 14px; }
    .ct-contact-list li { flex-wrap: wrap; gap: 2px 12px; }
    .ct-form-col { border-radius: 26px; }
    .products-page .prod-hero, .articles-page .art-hero { padding-bottom: 96px; }
    .prod-card, .art-card, .projects .project-card, .prod-guide-card, .ct-info-card { border-radius: 24px; }
    .ct-map-embed { margin: 0 16px; border-radius: 24px; }
    .cart-hero, .checkout-hero { padding-top: 140px; }
    .story-highlights { flex-direction: row; }
}
@media (prefers-reduced-motion: reduce) {
    .prod-card:hover, .art-card:hover, .art-spotlight:hover, .art-related-card:hover,
    .projects .project-card:hover, .prod-guide-card:hover, .btn-solid:hover, .abx-stat-row:hover { transform: none; }
    .projects .modal-content { animation: none; }
}


/* ==================== DARK THEME (shared layer) ==================== */
[data-theme="dark"] body > header {
    background: rgba(14, 17, 48, 0.76);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] body > header.is-stuck { background: rgba(12, 15, 42, 0.92); }
[data-theme="dark"] body > header nav > ul > li > a:hover,
[data-theme="dark"] body > header nav > ul > li.dropdown:hover > a { background: rgba(255, 255, 255, 0.09); }
[data-theme="dark"] body > header nav > ul > li > a.active-link,
[data-theme="dark"] body > header nav > ul > li.dropdown:hover > a.active-link { background: #fff; color: var(--ax-ink); }
[data-theme="dark"] .cart-link { border-color: rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.06); }
[data-theme="dark"] .cart-link:hover { background: #fff; border-color: #fff; color: var(--ax-ink); }
[data-theme="dark"] .cart-badge { border-color: #12163c; }
[data-theme="dark"] .nav-toggle { background: rgba(255, 255, 255, 0.12); }
[data-theme="dark"] .mega-menu,
[data-theme="dark"] .mobile-nav { background: #10143a; }
[data-theme="dark"] .prod-btn-view { background: #fff; color: var(--ax-ink); }
[data-theme="dark"] .prod-btn-view:hover { background: var(--airx-red); color: #fff; }
[data-theme="dark"] .prod-tab.is-active,
[data-theme="dark"] .art-tab.is-active { background: #fff; border-color: #fff; color: var(--ax-ink); }
[data-theme="dark"] .ct-field input:focus,
[data-theme="dark"] .ct-field select:focus,
[data-theme="dark"] .ct-field textarea:focus,
[data-theme="dark"] .checkout-field input:focus,
[data-theme="dark"] .checkout-field select:focus,
[data-theme="dark"] .checkout-coupon-row input:focus,
[data-theme="dark"] .prod-search-box input:focus,
[data-theme="dark"] .art-search-box input:focus,
[data-theme="dark"] .prod-sort-box select:focus { border-color: var(--ax-ice); box-shadow: 0 0 0 4px rgba(57, 184, 255, 0.16); }