:root {
    /* Brand Colors - Luxury Edition */
    --primary: #001A3D; /* Luxury Navy */
    --primary-light: #002B5B;
    --secondary: #E31E24; /* Brand Red */
    --accent: #F8F9FA; /* Silver/White */
    --white: #FFFFFF;
    --black: #0A0A0A;
    --gray-light: #F8F9FA;
    --gray-mid: #DEE2E6;
    --gray-dark: #4A4F55;
    
    /* Luxury Gradients */
    --grad-navy: linear-gradient(135deg, #001A3D 0%, #002B5B 100%);
    --grad-overlay: linear-gradient(to bottom, rgba(0,26,61,0.8) 0%, rgba(0,26,61,0.4) 100%);
    
    /* Typography */
    --font-heading: 'Outfit', sans-serif;
    --font-body: 'Outfit', sans-serif;
    
    /* Spacing & Shadows */
    --section-padding: 140px 0; /* More luxury breathing room */
    --container-max-width: 1440px;
    --shadow-soft: 0 20px 80px rgba(0,0,0,0.03);
    --shadow-premium: 0 40px 120px rgba(0,26,61,0.08);
    --shadow-inner: inset 0 2px 15px rgba(0,0,0,0.05);
    
    /* Transitions */
    --transition-smooth: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

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

body {
    font-family: var(--font-body);
    color: var(--black);
    background: var(--white);
    line-height: 1.8;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

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

h1 { font-weight: 800; }
p { font-weight: 400; color: var(--gray-dark); }

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition-smooth);
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    display: block;
}

.container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 40px;
}

section {
    padding: var(--section-padding);
}

/* Typography Utilities */
.text-primary { color: var(--primary) !important; }
.text-secondary { color: var(--secondary) !important; }
.text-white { color: var(--white) !important; }
.text-light { color: rgba(255,255,255,0.85) !important; }
.text-gray { color: var(--gray-dark) !important; }
.bg-primary { background-color: var(--primary); }
.bg-secondary { background-color: var(--secondary); }
.bg-gray-light { background-color: var(--gray-light); }

/* Layout Utilities */
.flex { display: flex; }
.flex-column { flex-direction: column; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.grid { display: grid; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.gap-20 { gap: 20px; }
.gap-40 { gap: 40px; }
.gap-60 { gap: 60px; }
.gap-80 { gap: 80px; }

/* Spacing Utilities */
.py-100 { padding-top: 100px; padding-bottom: 100px; }
.py-150 { padding-top: 150px; padding-bottom: 150px; }
.mb-20 { margin-bottom: 20px; }
.mb-40 { margin-bottom: 40px; }
.mb-60 { margin-bottom: 60px; }
.mt-40 { margin-top: 40px; }

/* Buttons */
.btn {
    display: inline-block;
    padding: 15px 35px;
    border-radius: 4px;
    font-family: var(--font-heading);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: var(--transition-smooth);
    border: none;
}

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

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

.btn-outline {
    border: 2px solid var(--white);
    color: var(--white);
    background: transparent;
}

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

.btn-primary:hover {
    background: #001F41;
}

.btn-secondary:hover {
    background: #C3181D;
}

/* Glassmorphism */
.glass {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.glass-dark {
    background: rgba(0, 26, 61, 0.4);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Animations (Placeholders for GSAP) */
.reveal {
    opacity: 0;
    transform: translateY(40px);
}

.image-reveal {
    overflow: hidden;
    position: relative;
}

.image-reveal img {
    transform: scale(1.2);
    transition: transform 1.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.image-reveal.active img {
    transform: scale(1);
}

/* Section Separators */
.sep-angle {
    clip-path: polygon(0 0, 100% 5%, 100% 100%, 0 95%);
}

/* ===========================
   GLOBAL RESPONSIVE OVERRIDES
   =========================== */

/* --- Large Tablets & Small Laptops (max-width: 1200px) --- */
@media (max-width: 1200px) {
    :root {
        --section-padding: 100px 0;
    }
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .gap-80 { gap: 50px; }
}

/* --- Tablets (max-width: 991px) --- */
@media (max-width: 991px) {
    :root {
        --section-padding: 80px 0;
    }
    .container {
        padding: 0 25px;
    }
    .grid-2 { grid-template-columns: 1fr; }
    .grid-3 { grid-template-columns: 1fr; }
    .grid-4 { grid-template-columns: 1fr; }
    .gap-80 { gap: 40px; }
    .gap-60 { gap: 30px; }
    .py-150 { padding-top: 80px; padding-bottom: 80px; }
    .py-100 { padding-top: 60px; padding-bottom: 60px; }

    h1 { font-size: clamp(32px, 7vw, 56px) !important; }
    h2 { font-size: clamp(28px, 5vw, 42px) !important; }

    .flex-center { flex-wrap: wrap; }
    .flex-between { flex-wrap: wrap; gap: 15px; }

    /* Buttons scale down */
    .btn {
        padding: 13px 28px;
        font-size: 13px;
    }
}

/* --- Mobile Phones (max-width: 768px) --- */
@media (max-width: 768px) {
    :root {
        --section-padding: 60px 0;
    }
    .container {
        padding: 0 18px;
    }

    h1 { font-size: clamp(28px, 8vw, 40px) !important; }
    h2 { font-size: clamp(24px, 6vw, 34px) !important; }
    h3 { font-size: clamp(18px, 4vw, 24px) !important; }

    .py-150 { padding-top: 60px; padding-bottom: 60px; }
    .py-100 { padding-top: 50px; padding-bottom: 50px; }
    .mb-60 { margin-bottom: 35px; }
    .mb-40 { margin-bottom: 25px; }
    .gap-40 { gap: 20px; }

    /* Force single column on mobile for all grids */
    .grid-2, .grid-3, .grid-4 {
        grid-template-columns: 1fr !important;
    }

    .btn {
        padding: 12px 24px;
        font-size: 12px;
        width: 100%;
        text-align: center;
    }

    /* Images fill screen */
    .image-reveal {
        border-radius: 12px !important;
    }
}

/* --- Small Phones (max-width: 480px) --- */
@media (max-width: 480px) {
    .container {
        padding: 0 15px;
    }
    :root {
        --section-padding: 50px 0;
    }
    h1 { font-size: clamp(24px, 9vw, 36px) !important; }
    h2 { font-size: clamp(22px, 7vw, 30px) !important; }

    .btn {
        padding: 12px 20px;
        font-size: 11px;
    }
}

/* --- Utility: relative positioning for z-index --- */
.relative { position: relative; }
.z-10 { z-index: 10; }
.text-center { text-align: center; }
.align-items-center { align-items: center; }

/* ===================================
   GLOBAL INLINE-STYLE RESPONSIVE FIXES
   Targets common inline patterns used
   across all pages on the site.
   =================================== */

/* --- Tablets (991px) --- */
@media (max-width: 991px) {
    /* Override inline padding on sections */
    section[style*="padding: 140px"],
    section[style*="padding: 150px"],
    section[style*="padding: 120px"] {
        padding: 80px 0 !important;
    }

    /* Override inline gap: 80px and 60px on grids */
    .grid[style*="gap: 80px"],
    .container.grid[style*="gap: 80px"] {
        gap: 40px !important;
    }
    .grid[style*="gap: 60px"],
    .container.grid[style*="gap: 60px"] {
        gap: 30px !important;
    }

    /* Override all inline 2-column grids */
    .grid[style*="grid-template-columns: 1fr 1fr"],
    .container.grid[style*="grid-template-columns: 1fr 1fr"],
    .grid[style*="grid-template-columns: 1.1fr"],
    .grid[style*="grid-template-columns: repeat(3"],
    .grid[style*="grid-template-columns: repeat(4"] {
        grid-template-columns: 1fr !important;
    }

    /* Reduce margin-bottom: 80px on section headers */
    div[style*="margin-bottom: 80px"] {
        margin-bottom: 50px !important;
    }

    /* Section header large fonts */
    section p[style*="font-size: 20px"],
    section p[style*="font-size: 22px"],
    section p[style*="font-size: 24px"],
    div p[style*="font-size: 20px"],
    div p[style*="font-size: 22px"],
    div p[style*="font-size: 24px"] {
        font-size: 17px !important;
    }

    /* Inline tall containers */
    .relative[style*="height: 600px"],
    .relative[style*="height: 620px"],
    div[style*="height: 600px"],
    div[style*="height: 620px"] {
        height: 400px !important;
    }

    /* Buttons with large inline padding */
    .btn[style*="padding: 25px"],
    .btn[style*="padding: 22px"] {
        padding: 16px 35px !important;
        font-size: 14px !important;
    }
    .btn[style*="font-size: 18px"],
    .btn[style*="font-size: 16px"] {
        font-size: 14px !important;
    }
}

/* --- Mobile (768px) --- */
@media (max-width: 768px) {
    /* Further reduce section padding */
    section[style*="padding: 140px"],
    section[style*="padding: 150px"],
    section[style*="padding: 120px"],
    section[style*="padding: 100px"] {
        padding: 60px 0 !important;
    }

    /* Further reduce gaps */
    .grid[style*="gap: 80px"],
    .container.grid[style*="gap: 80px"] {
        gap: 30px !important;
    }
    .grid[style*="gap: 60px"],
    .container.grid[style*="gap: 60px"],
    .grid[style*="gap: 50px"] {
        gap: 25px !important;
    }

    /* Override all inline multi-column grids */
    .grid[style*="grid-template-columns: repeat(5"],
    .grid[style*="grid-template-columns: repeat(4"],
    .grid[style*="grid-template-columns: repeat(3"],
    .grid[style*="grid-template-columns: repeat(2"],
    .grid[style*="grid-template-columns: 1fr 1fr"],
    .grid[style*="grid-template-columns: 1.1fr"],
    .grid[style*="grid-template-columns: 1fr auto"] {
        grid-template-columns: 1fr !important;
    }

    /* Reduce inline tall containers further */
    .relative[style*="height: 600px"],
    .relative[style*="height: 620px"],
    div[style*="height: 600px"],
    div[style*="height: 620px"] {
        height: 300px !important;
    }

    /* Section headers margin */
    div[style*="margin-bottom: 80px"] {
        margin-bottom: 40px !important;
    }

    /* Override h4 and p inline fonts */
    h4[style*="font-size: 36px"] {
        font-size: 28px !important;
    }

    /* Large paragraph text */
    section p[style*="font-size: 20px"],
    section p[style*="font-size: 22px"],
    section p[style*="font-size: 24px"],
    div p[style*="font-size: 20px"],
    div p[style*="font-size: 22px"],
    div p[style*="font-size: 24px"] {
        font-size: 16px !important;
    }
    section p[style*="font-size: 18px"],
    section p[style*="font-size: 19px"],
    div p[style*="font-size: 18px"],
    div p[style*="font-size: 19px"] {
        font-size: 15px !important;
    }

    /* Buttons full width on mobile */
    .btn[style*="padding: 25px"],
    .btn[style*="padding: 22px"],
    .btn[style*="padding: 18px"] {
        padding: 14px 30px !important;
        font-size: 13px !important;
    }

    /* Fix inline padding-left on content */
    div[style*="padding-left: 20px"] {
        padding-left: 0 !important;
    }

    /* Swiper container padding */
    .container[style*="padding: 0 50px"] {
        padding: 0 15px !important;
    }

    /* h3 inline large sizes */
    h3[style*="font-size: 56px"],
    h3[style*="font-size: 52px"],
    h3[style*="font-size: 48px"] {
        font-size: clamp(28px, 8vw, 38px) !important;
    }
}

/* --- Small phones (480px) --- */
@media (max-width: 480px) {
    section[style*="padding: 140px"],
    section[style*="padding: 150px"],
    section[style*="padding: 120px"],
    section[style*="padding: 100px"] {
        padding: 45px 0 !important;
    }

    .grid[style*="gap: 80px"],
    .grid[style*="gap: 60px"],
    .grid[style*="gap: 50px"],
    .grid[style*="gap: 40px"] {
        gap: 20px !important;
    }

    .relative[style*="height: 600px"],
    .relative[style*="height: 620px"],
    div[style*="height: 600px"],
    div[style*="height: 620px"] {
        height: 250px !important;
    }

    div[style*="margin-bottom: 80px"] {
        margin-bottom: 30px !important;
    }

    h3[style*="font-size: 56px"],
    h3[style*="font-size: 52px"],
    h3[style*="font-size: 48px"],
    h3[style*="font-size: 38px"] {
        font-size: 24px !important;
    }

    h4[style*="font-size: 36px"] {
        font-size: 24px !important;
    }

    section p[style*="font-size: 20px"],
    section p[style*="font-size: 22px"],
    section p[style*="font-size: 24px"],
    div p[style*="font-size: 20px"],
    div p[style*="font-size: 22px"],
    div p[style*="font-size: 24px"] {
        font-size: 15px !important;
    }

    .btn[style*="padding: 25px"],
    .btn[style*="padding: 22px"],
    .btn[style*="padding: 18px"] {
        padding: 12px 24px !important;
        font-size: 12px !important;
    }
}

/* Homepage responsive overrides moved from index.html */
@media (max-width: 991px) {
    .hero { height: 80vh !important; }
    .hero h1 { font-size: clamp(32px, 7vw, 52px) !important; }
    .hero p { font-size: 17px !important; max-width: 90% !important; }
    .floating-stats-container { flex-wrap: wrap !important; gap: 15px !important; justify-content: center !important; }
    .float-stat { padding: 8px 18px !important; font-size: 13px !important; }
    .hero-btns { flex-wrap: wrap !important; }
    .hero-btns .btn { padding: 16px 35px !important; font-size: 14px !important; }

    .hero ~ section .grid[style*="repeat(5"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .hero ~ section .grid[style*="repeat(4"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .expertise-grid { gap: 40px !important; }

    .tech-section .grid.grid-2 { gap: 40px !important; }
    .tech-image-right { height: 400px !important; margin-top: 30px; }

    .leader-card { flex-direction: column !important; }
    .leader-card > div:first-child { width: 100% !important; height: 220px !important; }
    .leader-card > div:last-child { padding: 20px !important; }
    .hero ~ section .grid[style*="repeat(2, 1fr)"][style*="max-width: 1000px"] {
        grid-template-columns: 1fr !important;
    }

    .cta-section h2 { font-size: clamp(28px, 5vw, 40px) !important; }
    .cta-section p { font-size: 18px !important; }
    .cta-section .btn { padding: 18px 40px !important; font-size: 15px !important; }

    .safety-premium-section .grid[style*="1fr auto"] {
        grid-template-columns: 1fr !important;
    }

    .hero ~ section .grid[style*="1fr 1fr"][style*="gap: 60px"] {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 768px) {
    .hero { height: 90vh !important; min-height: 550px !important; }
    .hero h1 { font-size: clamp(28px, 8vw, 42px) !important; letter-spacing: -1px !important; }
    .hero p { font-size: 15px !important; margin-bottom: 30px !important; }
    .floating-stats-container { gap: 10px !important; margin-bottom: 25px !important; }
    .float-stat { padding: 6px 14px !important; border-radius: 30px !important; }
    .float-stat span:first-child { font-size: 14px !important; }
    .float-stat span:last-child { font-size: 9px !important; letter-spacing: 1px !important; }
    .hero-btns .btn { padding: 14px 30px !important; border-radius: 30px !important; width: 100% !important; }
    .video-background { display: none !important; }

    .hero ~ section .grid[style*="repeat(5"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
    }
    .hero ~ section .grid[style*="repeat(5"] .glass {
        padding: 25px 15px !important;
    }
    .hero ~ section .grid[style*="repeat(5"] h4 {
        font-size: 28px !important;
    }
    .hero ~ section .grid[style*="repeat(5"] p {
        font-size: 12px !important;
    }

    .hero ~ section .grid[style*="repeat(4, 1fr)"][style*="max-width: 1440px"] {
        grid-template-columns: 1fr !important;
    }
    .service-showcase-card {
        padding: 35px 25px !important;
    }

    .industry-item-wrapper .industry-item {
        gap: 15px !important;
    }

    section h2[style*="font-size: 48px"],
    section h2[style*="font-size: 52px"],
    section h2[style*="font-size: 56px"],
    section h2[style*="font-size: 54px"],
    section h2[style*="font-size: 42px"],
    section h2[style*="font-size: 46px"] {
        font-size: clamp(24px, 6vw, 34px) !important;
    }

    section h3[style*="font-size: 32px"],
    section h3[style*="font-size: 56px"] {
        font-size: clamp(28px, 7vw, 40px) !important;
    }

    .tech-trigger:hover, .tech-trigger.active {
        transform: scale(1) !important;
    }

    .hero ~ section .relative[style*="height: 600px"] {
        height: 350px !important;
    }

    .footer > div[style*="height: 450px"] {
        height: 250px !important;
    }
}

@media (max-width: 480px) {
    .hero { min-height: 500px !important; }
    .hero h1 { font-size: 28px !important; }
    .hero p { font-size: 14px !important; }
    .floating-stats-container { display: none !important; }
    .hero-btns { gap: 12px !important; }

    .hero ~ section .grid[style*="repeat(5"] {
        grid-template-columns: 1fr !important;
    }

    .footer > div[style*="height: 450px"] {
        height: 200px !important;
    }
}