/* =========================================
   Maui Vehicle Storage - Global Styles
   Modern 2026 UI - Luxury, Minimal, Glass
   ========================================= */

/* --- 1. Design System Tokens (Variables) --- */
:root {
    /* Colors - Primitives */
    --color-primary: #0F4C81;
    --color-primary-light: #1c6ba5;
    --color-primary-dark: #0a3356;
    --color-accent: #2AA7FF;
    --color-accent-light: #6bc2ff;
    --color-gold: #D4AF37;
    
    /* Colors - Semantics */
    --color-success: #36C690;
    --color-error: #E74C3C;
    --color-warning: #F1C40F;
    
    /* Colors - Surface & Text */
    --color-bg: #FAFBFC;
    --color-surface: #FFFFFF;
    --color-light-gray: #EEF3F7;
    --color-border: #E2E8F0;
    --color-dark: #16212D;
    --color-text: #1A1A1A;
    --color-text-muted: #556B82;

    /* Typography Scale */
    --font-heading: 'Plus Jakarta Sans', sans-serif;
    --font-body: 'Manrope', sans-serif;
    
    --text-xs: 0.75rem;     /* 12px */
    --text-sm: 0.875rem;    /* 14px */
    --text-base: 1rem;      /* 16px */
    --text-lg: 1.125rem;    /* 18px */
    --text-xl: 1.25rem;     /* 20px */
    --text-2xl: 1.5rem;     /* 24px */
    --text-3xl: 1.875rem;   /* 30px */
    --text-4xl: 2.25rem;    /* 36px */
    --text-5xl: 3rem;       /* 48px */
    --text-6xl: 3.75rem;    /* 60px */
    --text-fluid-h1: clamp(2.5rem, 5vw, 4rem);
    --text-fluid-h2: clamp(2rem, 4vw, 3rem);

    /* Spacing System (4px base) */
    --space-1: 0.25rem;   /* 4px */
    --space-2: 0.5rem;    /* 8px */
    --space-3: 0.75rem;   /* 12px */
    --space-4: 1rem;      /* 16px */
    --space-6: 1.5rem;    /* 24px */
    --space-8: 2rem;      /* 32px */
    --space-12: 3rem;     /* 48px */
    --space-16: 4rem;     /* 64px */
    --space-24: 6rem;     /* 96px */
    --space-32: 8rem;     /* 128px */

    /* Glass Effects & Materials */
    --glass-bg: rgba(255, 255, 255, 0.7);
    --glass-bg-heavy: rgba(255, 255, 255, 0.9);
    --glass-border: rgba(255, 255, 255, 0.5);
    
    /* Shadow System */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    
    /* Brand Shadows */
    --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.07);
    --hover-shadow: 0 16px 48px 0 rgba(15, 76, 129, 0.12);
    --glow-primary: 0 0 20px rgba(15, 76, 129, 0.4);

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, var(--color-primary), var(--color-accent));
    --gradient-gold: linear-gradient(135deg, var(--color-gold), #FFF2CD);

    /* Radii */
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-xl: 32px;
    --radius-full: 9999px;

    /* Floating Navbar Metrics */
    --nav-h: 66px;                              /* pill height */
    --nav-radius: 22px;                         /* pill corner radius */
    --nav-gap-top: clamp(12px, 2vw, 20px);      /* gap from top of screen */
    --nav-gap-top-scrolled: clamp(9px, 1.4vw, 14px);
    --nav-logo-scale: 1.4;                      /* logo = 140% of nav height → overflows 20% top & 20% bottom */

    /* Transitions & Animations */
    --transition-fast: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-smooth: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    --transition-slow: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);

    /* Z-Index Scale */
    --z-below: -1;
    --z-base: 1;
    --z-content: 10;
    --z-overlay: 40;
    --z-nav: 50;
    --z-modal: 60;
    --z-toast: 100;
}

/* --- 2. Base Reset & Accessibility --- */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--color-text);
    background-color: var(--color-bg);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Selection Color */
::selection {
    background-color: var(--color-primary);
    color: var(--color-surface);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    background: var(--color-bg);
}
::-webkit-scrollbar-thumb {
    background: var(--color-text-muted);
    border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary);
}

/* Focus Styles (Accessibility) */
:focus {
    outline: none;
}
:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 4px;
    border-radius: 2px;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-dark);
}

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

img, video, canvas {
    max-width: 100%;
    height: auto;
    display: block;
}

.container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

/* --- 3. Typography & Utility --- */
.text-gradient {
    background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.text-center {
    text-align: center;
}

.section-header {
    margin-bottom: 64px;
}

.section-title {
    font-size: clamp(2rem, 4vw, 3rem);
    margin-bottom: 16px;
    letter-spacing: -1px;
}

.section-subtitle {
    font-size: 1.125rem;
    color: var(--color-text-muted);
    max-width: 600px;
    margin: 0 auto;
}

/* --- 4. Buttons & Links --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: var(--radius-md);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: var(--transition-smooth);
    border: none;
    outline: none;
}

.btn-lg {
    padding: 16px 32px;
    font-size: 1.125rem;
    border-radius: var(--radius-lg);
}

.btn-primary {
    background: var(--gradient-primary);
    color: #fff;
    box-shadow: 0 4px 15px rgba(42, 167, 255, 0.3);
}

.btn-primary:hover {
    box-shadow: 0 8px 25px rgba(42, 167, 255, 0.5);
    transform: translateY(-2px);
}

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

.btn-outline:hover {
    background: var(--color-primary);
    color: #fff;
}

.btn-glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--color-surface);
}

.btn-glass:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-2px);
}

.btn-animated span {
    position: relative;
    z-index: 1;
}

.btn-animated svg {
    transition: transform 0.3s ease;
}

.btn-animated:hover svg {
    transform: translateX(4px);
}

.btn-full {
    width: 100%;
}

.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--color-accent);
    font-weight: 600;
    margin-top: 16px;
}
.link-arrow svg {
    transition: transform 0.3s ease;
}
.link-arrow:hover svg {
    transform: translateX(4px);
}

/* --- 5. Glassmorphism UI --- */
.glass-card {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--glass-shadow);
}

.hover-lift {
    transition: var(--transition-smooth);
}

.hover-lift:hover {
    transform: translateY(-8px);
    box-shadow: var(--hover-shadow);
}

/* ---- Logo Image (overflows the glass pill 20% top & 20% bottom) ---- */
.nav-logo-img {
    height: calc(var(--nav-h) * var(--nav-logo-scale));
    width: auto;
    display: block;
    object-fit: contain;
    /* Layered drop-shadow keeps the mark crisp over both the dark hero and the light glass pill */
    filter: drop-shadow(0 6px 14px rgba(0,0,0,0.28)) drop-shadow(0 1px 2px rgba(0,0,0,0.35));
    transition: transform 0.4s cubic-bezier(0.16,1,0.3,1), filter 0.3s ease, height 0.45s cubic-bezier(0.16,1,0.3,1);
}
.animated-logo:hover .nav-logo-img {
    transform: scale(1.05) rotate(-1deg);
    filter: drop-shadow(0 10px 22px rgba(0,0,0,0.32)) drop-shadow(0 1px 2px rgba(0,0,0,0.4));
}

/* ---- Floating Glassmorphism Navbar ----
   Wrapper is transparent and only creates the gaps (top + left + right)
   so the actual bar floats, detached from every screen edge. */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    padding: var(--nav-gap-top) clamp(14px, 3.2vw, 44px) 0;
    background: transparent;
    border: none;
    box-shadow: none;
    transition: padding 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

/* The visible pill — glass, rounded, floating */
.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    position: relative;
    width: 100%;
    max-width: 1240px;
    height: var(--nav-h);
    margin: 0 auto;
    padding: 0 clamp(16px, 2.4vw, 26px);
    border-radius: var(--nav-radius);
    background: rgba(255, 255, 255, 0.10);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    backdrop-filter: blur(18px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: 0 14px 40px rgba(8, 20, 38, 0.24),
                inset 0 1px 0 rgba(255, 255, 255, 0.30);
    overflow: visible;                 /* let the logo spill past top & bottom edges */
    transition: background 0.45s ease, border-color 0.45s ease,
                box-shadow 0.45s ease, height 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Scrolled — pill becomes a bright solid-glass bar, text darkens */
.site-header.scrolled {
    padding-top: var(--nav-gap-top-scrolled);
}
.site-header.scrolled .header-inner {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(255, 255, 255, 0.70);
    box-shadow: 0 16px 44px rgba(8, 20, 38, 0.16),
                inset 0 1px 0 rgba(255, 255, 255, 0.60);
}
.site-header.scrolled .nav-link { color: var(--color-dark); }
.site-header.scrolled .action-icon-btn { color: var(--color-dark); }
.site-header.scrolled .hamburger .line { background: var(--color-dark); }

/* Top of page (over the dark hero) — links & icons stay white */
.site-header.transparent-top:not(.scrolled) .nav-link,
.site-header.transparent-top:not(.scrolled) .header-actions button,
.site-header.transparent-top:not(.scrolled) .header-actions a.phone-btn {
    color: #fff;
}
.site-header.transparent-top:not(.scrolled) .nav-link:hover,
.site-header.transparent-top:not(.scrolled) .header-actions button:hover {
    color: var(--color-accent-light);
}
.site-header.transparent-top:not(.scrolled) .hamburger .line {
    background: #fff;
}

.logo {
    display: flex;
    align-items: center;
    position: relative;
    z-index: 3;                        /* sit above the pill so the overflow reads cleanly */
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 32px;
}

.nav-link {
    font-weight: 500;
    color: var(--color-text-muted);
    position: relative;
}

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

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--color-accent);
    transition: width 0.3s ease;
}

.nav-link:hover::after {
    width: 100%;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Old conflicting mobile-menu-btn block removed — see line ~1450 for the correct definition */


/* --- 7. Hero Section --- */

.hero-section {
    position: relative;
    padding: 160px 0 100px;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
}

.hero-blob {
    position: absolute;
    width: 800px;
    height: 800px;
    filter: blur(80px);
    animation: blobMorph 20s infinite alternate;
}

.blob-1 {
    top: -20%;
    right: -10%;
}
.blob-2 {
    bottom: -20%;
    left: -10%;
    animation-delay: -5s;
}

@keyframes blobMorph {
    0% { transform: scale(1) translate(0, 0); }
    50% { transform: scale(1.1) translate(50px, 50px); }
    100% { transform: scale(0.9) translate(-50px, -20px); }
}

.hero-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    background: rgba(15, 76, 129, 0.1);
    color: var(--color-primary);
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.875rem;
    margin-bottom: 24px;
}
.badge-dot {
    width: 8px;
    height: 8px;
    background: var(--color-accent);
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(42, 167, 255, 0.2);
}

.hero-title {
    font-size: clamp(3rem, 5vw, 4.5rem);
    letter-spacing: -2px;
    margin-bottom: 24px;
}

.hero-subtitle {
    font-size: 1.25rem;
    color: var(--color-text-muted);
    margin-bottom: 40px;
    max-width: 500px;
}

.hero-actions {
    display: flex;
    gap: 16px;
    margin-bottom: 48px;
}

.hero-stats {
    display: flex;
    align-items: center;
    gap: 32px;
}

.stat-item {
    display: flex;
    flex-direction: column;
}

.stat-value {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--color-dark);
}

.stat-label {
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.stat-divider {
    width: 1px;
    height: 40px;
    background: var(--color-light-gray);
}

.hero-visual {
    position: relative;
}

.hero-image-wrapper {
    position: relative;
    border-radius: var(--radius-xl);
    padding: 12px;
    background: rgba(255, 255, 255, 0.4);
}

.hero-image {
    border-radius: var(--radius-lg);
    width: 100%;
    object-fit: cover;
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
}

.glass-float-card {
    position: absolute;
    bottom: 40px;
    left: -40px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.6);
    padding: 16px 24px;
    border-radius: var(--radius-md);
    box-shadow: 0 12px 24px rgba(0,0,0,0.06);
    display: flex;
    align-items: center;
    gap: 16px;
    animation: float 6s ease-in-out infinite;
}

.icon-box {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(54, 198, 144, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
}

.float-text {
    display: flex;
    flex-direction: column;
}

.float-title {
    font-weight: 700;
    color: var(--color-dark);
    font-family: var(--font-heading);
}

.float-sub {
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-15px); }
    100% { transform: translateY(0px); }
}

/* --- 8. Services Bento Grid --- */
.services-section {
    padding: 120px 0;
    background: var(--color-light-gray);
    position: relative;
}

.services-bento-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto auto auto;
    gap: 24px;
}

.bento-card {
    padding: 32px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    position: relative;
}

.bento-card h3 {
    font-size: 1.5rem;
    margin: 16px 0 12px;
}

.bento-card p {
    color: var(--color-text-muted);
    font-size: 1rem;
}

.icon-circle {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(15, 76, 129, 0.1);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-accent {
    background: rgba(42, 167, 255, 0.1);
    color: var(--color-accent);
}

.icon-success {
    background: rgba(54, 198, 144, 0.1);
    color: var(--color-success);
}

/* Bento Layout Specifics */
.bento-large {
    grid-column: span 2;
    grid-row: span 2;
    flex-direction: row;
    align-items: center;
    gap: 32px;
    padding: 0;
}

.bento-large .bento-content {
    padding: 40px;
    flex: 1;
}

.bento-large .bento-visual {
    flex: 1;
    height: 100%;
}

.bento-large img {
    height: 100%;
    object-fit: cover;
}

.bento-vertical {
    grid-column: span 1;
    grid-row: span 2;
}

.bento-row {
    grid-column: span 3;
    display: flex;
    flex-direction: row;
    padding: 0;
}

.bento-row .bento-visual {
    width: 40%;
}
.bento-row img {
    height: 100%;
    object-fit: cover;
}
.bento-row .bento-content {
    padding: 40px;
    width: 60%;
}

/* --- 9. Contact Section --- */
.contact-section {
    padding: 120px 0;
    position: relative;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
}

.info-blocks {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.info-block {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.info-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--color-light-gray);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.info-text h4 {
    margin-bottom: 4px;
    font-size: 1.125rem;
}

.info-text p {
    color: var(--color-text-muted);
}

.contact-form-container {
    padding: 48px;
}

.form-title {
    margin-bottom: 32px;
    font-size: 1.5rem;
}

.form-group {
    margin-bottom: 24px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--color-dark);
}

input, select, textarea {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: var(--radius-sm);
    background: rgba(255,255,255,0.8);
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--color-text);
    transition: var(--transition-smooth);
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px rgba(15, 76, 129, 0.1);
    background: #fff;
}

/* --- 10. Premium Footer --- */
/* =========================================
   Footer — premium redesign (navy glass)
   ========================================= */
.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;
}

.site-footer {
    position: relative;
    overflow: hidden;
    color: rgba(255, 255, 255, 0.72);
    background:
        radial-gradient(115% 80% at 12% 0%, rgba(42, 167, 255, 0.10) 0%, transparent 42%),
        radial-gradient(115% 85% at 88% 8%, rgba(212, 175, 55, 0.10) 0%, transparent 46%),
        linear-gradient(180deg, #0c2542 0%, #081726 100%);
    padding: clamp(64px, 8vw, 96px) 0 30px;
}
/* premium hairline top border */
.site-footer::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.55), rgba(42, 167, 255, 0.4), transparent);
}

.footer-inner {
    position: relative;
    z-index: 1;
}

/* ── Top: brand + link columns ─────────── */
.footer-top {
    display: grid;
    grid-template-columns: 1.7fr 1fr 1fr 1.25fr;
    gap: clamp(32px, 4vw, 64px);
    padding-bottom: clamp(36px, 5vw, 56px);
}

/* Brand column */
.footer-brand { max-width: 360px; }
.footer-logo {
    display: inline-block;
    margin-bottom: 18px;
    line-height: 0;
}
.footer-logo-img {
    height: 78px;
    width: auto;
    display: block;
    filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.35));
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.footer-logo:hover .footer-logo-img { transform: scale(1.04); }
.footer-description {
    font-family: var(--font-body);
    font-size: 0.95rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.62);
    margin-bottom: 26px;
}

/* Newsletter */
.footer-newsletter-label {
    display: block;
    font-family: var(--font-heading);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 12px;
}
.newsletter-input-group {
    display: flex;
    align-items: center;
    gap: 6px;
    max-width: 340px;
    padding: 6px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--radius-full);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    transition: border-color 0.3s ease, background 0.3s ease;
}
.newsletter-input-group:focus-within {
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(212, 175, 55, 0.5);
}
.newsletter-input-group input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    outline: none;
    padding: 10px 16px;
    color: #fff;
    font-family: var(--font-body);
    font-size: 0.92rem;
}
.newsletter-input-group input::placeholder { color: rgba(255, 255, 255, 0.45); }
.btn-newsletter {
    flex-shrink: 0;
    width: 42px; height: 42px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #23180a;
    background: linear-gradient(120deg, var(--color-gold), #e9cf7e);
    box-shadow: 0 6px 16px rgba(212, 175, 55, 0.30);
    transition: transform 0.25s ease, box-shadow 0.3s ease;
}
.btn-newsletter:hover {
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 10px 22px rgba(212, 175, 55, 0.42);
}
.btn-newsletter svg { width: 20px; height: 20px; }

/* Link columns */
.footer-heading {
    font-family: var(--font-heading);
    color: #fff;
    font-size: 1.02rem;
    font-weight: 700;
    margin-bottom: 22px;
    padding-bottom: 12px;
    position: relative;
}
.footer-heading::after {
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    width: 30px; height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--color-gold), transparent);
}
.footer-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 13px;
    margin: 0; padding: 0;
}
.footer-links a {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    width: fit-content;
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.94rem;
    transition: color 0.25s ease, gap 0.25s ease;
}
.footer-links a::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--color-gold);
    opacity: 0;
    transform: scale(0.4);
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.footer-links a:hover { color: #fff; gap: 12px; }
.footer-links a:hover::before { opacity: 1; transform: scale(1); }

/* Contact column */
.footer-contact {
    list-style: none;
    margin: 0; padding: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.footer-contact li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 0.94rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.5;
}
.footer-contact .fc-icon {
    flex-shrink: 0;
    width: 36px; height: 36px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--color-gold);
}
.footer-contact .fc-icon svg { width: 17px; height: 17px; }
.footer-contact a { color: rgba(255, 255, 255, 0.7); transition: color 0.25s ease; }
.footer-contact a:hover { color: #fff; }

/* ── Bottom bar ─────────────────────────── */
.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    padding-top: 28px;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
}
.footer-copy {
    margin: 0;
    font-size: 0.86rem;
    color: rgba(255, 255, 255, 0.5);
}
.footer-copy a { color: var(--color-gold); }
.footer-copy a:hover { color: #f6e7b0; }

.legal-links { display: flex; gap: 22px; }
.legal-links a {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.86rem;
    transition: color 0.25s ease;
}
.legal-links a:hover { color: #fff; }

/* Socials */
.footer-socials { display: flex; gap: 12px; }
.footer-socials a {
    width: 40px; height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    transition: transform 0.25s ease, background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.footer-socials a:hover {
    transform: translateY(-3px);
    color: #23180a;
    background: linear-gradient(120deg, var(--color-gold), #e9cf7e);
    border-color: transparent;
}
.footer-socials svg { width: 18px; height: 18px; }

/* ── Responsive ─────────────────────────── */
@media (max-width: 992px) {
    .footer-top {
        grid-template-columns: 1fr 1fr;
        row-gap: 44px;
    }
    .footer-brand {
        grid-column: 1 / -1;
        max-width: 460px;
    }
}
@media (max-width: 600px) {
    .footer-top { grid-template-columns: 1fr; }
    .footer-brand { grid-column: auto; max-width: 100%; }
    .newsletter-input-group { max-width: 100%; }
    .footer-bottom {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 18px;
    }
}

/* Back to Top Button */
.back-to-top {
    position: fixed;
    bottom: 32px;
    right: 32px;
    width: 48px;
    height: 48px;
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: var(--transition-smooth);
    box-shadow: 0 4px 16px rgba(15, 76, 129, 0.3);
    z-index: 90;
}
.back-to-top.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.back-to-top:hover {
    background: var(--color-dark);
    transform: translateY(-4px);
}
.back-to-top svg {
    width: 24px;
    height: 24px;
}

/* --- 11. Animations & Reveal --- */
[data-scroll-reveal] {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-scroll-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
}

[data-scroll-reveal="delay"] {
    transition-delay: 0.2s;
}

[data-scroll-reveal="delay-2"] {
    transition-delay: 0.4s;
}

/* --- 12. Media Queries (Responsive) --- */
@media (max-width: 1024px) {
    .services-bento-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .bento-large {
        grid-column: span 2;
        flex-direction: column;
    }
    .bento-row {
        grid-column: span 2;
        flex-direction: column;
    }
    .bento-row .bento-visual, .bento-row .bento-content {
        width: 100%;
    }
    .hero-title {
        font-size: 3.5rem;
    }
    .hero-inner {
        gap: 40px;
    }
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }
}

@media (max-width: 768px) {
    .desktop-nav, .header-actions .btn {
        display: none;
    }
    .mobile-menu-btn {
        display: block;
    }
    .hero-inner {
        grid-template-columns: 1fr;
    }
    .hero-section {
        padding-top: 120px;
    }
    .hero-visual {
        margin-top: 40px;
    }
    .glass-float-card {
        left: -10px;
        bottom: 20px;
        padding: 12px 16px;
    }
    .services-bento-grid {
        grid-template-columns: 1fr;
    }
    .bento-large, .bento-row, .bento-vertical {
        grid-column: span 1;
    }
    .form-row {
        grid-template-columns: 1fr;
    }
}

/* =========================================
   Ultra-Premium Navigation Additions
   ========================================= */

/* Scroll Progress Bar */
.scroll-progress-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: transparent;
    z-index: 1000;
}
.scroll-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
    transition: width 0.1s ease;
}


/* Animated Logo */
.animated-logo {
    display: flex;
    align-items: center;
    gap: 12px;
}
.animated-logo .logo-mark-wrap {
    perspective: 1000px;
}
.animated-logo .logo-mark {
    width: 40px;
    height: 40px;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.animated-logo:hover .logo-mark {
    transform: rotateY(180deg);
}

/* Smooth Underline */
.smooth-underline {
    position: relative;
    display: inline-block;
}
.smooth-underline::after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 2px;
    bottom: -4px;
    left: 0;
    background-color: var(--color-accent);
    transform-origin: bottom right;
    transition: transform 0.4s cubic-bezier(0.86, 0, 0.07, 1);
}
.smooth-underline:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

/* Header Actions */
.action-icon-btn {
    background: none;
    border: none;
    color: var(--color-text);
    cursor: pointer;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}
.action-icon-btn:hover {
    background: rgba(15, 76, 129, 0.1);
    color: var(--color-primary);
}

/* Mega Menu */
.desktop-nav .nav-links {
    display: flex;
    align-items: center;
    gap: 32px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.desktop-nav .nav-link {
    font-weight: 500;
    font-size: 1rem;
    color: var(--color-dark);
    display: flex;
    align-items: center;
    gap: 4px;
}
.has-mega-menu {
    position: relative;
}
.dropdown-icon {
    transition: transform 0.3s ease;
}
.has-mega-menu:hover .dropdown-icon {
    transform: rotate(180deg);
}
.mega-menu-dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    width: 800px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.5);
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    padding: 32px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
    z-index: 100;
}
.has-mega-menu:hover .mega-menu-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(10px);
    pointer-events: auto;
}
.mega-menu-inner {
    display: grid;
    grid-template-columns: 1fr 1fr 1.5fr;
    gap: 32px;
}
.mega-menu-col h4 {
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-text-muted);
    margin-bottom: 16px;
}
.mega-menu-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.mega-menu-col ul li a {
    display: block;
    padding: 8px 0;
    transition: var(--transition-smooth);
}
.mega-link-title {
    display: block;
    font-weight: 600;
    color: var(--color-dark);
    margin-bottom: 2px;
}
.mega-link-desc {
    display: block;
    font-size: 0.8rem;
    color: var(--color-text-muted);
}
.mega-menu-col ul li a:hover .mega-link-title {
    color: var(--color-primary);
}
.featured-card {
    background: var(--color-light-gray);
    border-radius: var(--radius-md);
    overflow: hidden;
    height: 100%;
}
.featured-card img {
    width: 100%;
    height: 120px;
    object-fit: cover;
}
.featured-card-content {
    padding: 20px;
}
.featured-card-content h5 {
    font-size: 1.1rem;
    margin-bottom: 8px;
}
.featured-card-content p {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    margin-bottom: 12px;
}

/* Animated Hamburger */
.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 2000;
    width: 44px;
    height: 44px;
    position: relative;
    flex-shrink: 0;
}
.hamburger {
    width: 24px;
    height: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.hamburger .line {
    display: block;
    width: 100%;
    height: 2.5px;
    background: #fff;
    position: absolute;
    transition: all 0.3s ease;
    border-radius: 2px;
}
.hamburger .line1 { top: 0; }
.hamburger .line2 { top: 9px; }
.hamburger .line3 { top: 18px; }
.mobile-menu-btn.active .line1 {
    transform: translateY(9px) rotate(45deg);
}
.mobile-menu-btn.active .line2 {
    opacity: 0;
}
.mobile-menu-btn.active .line3 {
    transform: translateY(-9px) rotate(-45deg);
}

/* Navbar scales down on smaller screens — logo keeps its 1.4x overflow ratio */
@media (max-width: 1024px) {
    :root { --nav-h: 60px; --nav-radius: 20px; }
}
@media (max-width: 576px) {
    :root { --nav-h: 52px; --nav-radius: 16px; }
}

/* Mobile Slide Menu Overlay */
.mobile-slide-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    max-width: 400px;
    height: 100vh;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    box-shadow: -10px 0 30px rgba(0,0,0,0.1);
    z-index: 1000;
    transition: right 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    padding: 100px 32px 40px;
    overflow-y: auto;
}
.mobile-slide-menu.active {
    right: 0;
}
.mobile-nav-links {
    list-style: none;
    margin: 0;
    padding: 0;
}
.mobile-nav-links > li {
    margin-bottom: 24px;
}
.mobile-nav-links .nav-link {
    font-size: 1.5rem;
    font-weight: 700;
    font-family: var(--font-heading);
}
.mobile-sub-menu {
    list-style: none;
    padding-left: 16px;
    margin-top: 12px;
    border-left: 2px solid var(--color-light-gray);
}
.mobile-sub-menu li {
    margin-bottom: 12px;
}
.mobile-sub-menu a {
    font-size: 1.1rem;
    color: var(--color-text-muted);
}
.mobile-sub-menu a:hover {
    color: var(--color-primary);
}
.mobile-menu-footer {
    margin-top: 48px;
}
.mobile-contact-info p {
    margin-bottom: 8px;
    font-weight: 500;
}

@media (max-width: 1024px) {
    .desktop-nav-wrapper {
        display: none;
    }
    .header-cta, .search-btn {
        display: none;
    }
    .mobile-menu-btn {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* =========================================
   Luxury & Classic Car Storage Hero
   (Full redesign — old sports-car hero removed)
   ========================================= */

.lux-hero {
    position: relative;
    width: 100%;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: clamp(120px, 17vh, 190px) 0 clamp(64px, 10vh, 104px);
    color: #fff;
    isolation: isolate;
    background:
        radial-gradient(120% 90% at 80% 0%, #123a63 0%, transparent 55%),
        linear-gradient(150deg, #0a1a2e 0%, #0c2542 48%, #0f335c 100%);
}

/* ── Ambient background ─────────────────── */
.lux-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}
.lux-hero__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.55;
    will-change: transform;
}
.lux-hero__glow--gold {
    width: 46vw; height: 46vw;
    max-width: 640px; max-height: 640px;
    top: -12%; right: -6%;
    background: radial-gradient(circle, rgba(212,175,55,0.55), transparent 68%);
    animation: luxFloatGlow 16s ease-in-out infinite alternate;
}
.lux-hero__glow--blue {
    width: 42vw; height: 42vw;
    max-width: 560px; max-height: 560px;
    bottom: -18%; left: -10%;
    background: radial-gradient(circle, rgba(42,167,255,0.45), transparent 70%);
    animation: luxFloatGlow 20s ease-in-out infinite alternate-reverse;
}
.lux-hero__grid {
    position: absolute;
    inset: 0;
    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: 64px 64px;
    -webkit-mask-image: radial-gradient(120% 90% at 50% 18%, #000 0%, transparent 72%);
    mask-image: radial-gradient(120% 90% at 50% 18%, #000 0%, transparent 72%);
    opacity: 0.6;
}
@keyframes luxFloatGlow {
    0%   { transform: translate3d(0,0,0) scale(1); }
    100% { transform: translate3d(-30px, 30px, 0) scale(1.12); }
}

/* ── Layout ─────────────────────────────── */
.lux-hero__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    display: grid;
    grid-template-columns: 1.02fr 1.1fr;
    align-items: center;
    gap: clamp(28px, 4.5vw, 72px);
}

/* ── LEFT: copy ─────────────────────────── */
.lux-hero__content {
    max-width: 620px;
}
.lux-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 16px 8px 12px;
    margin-bottom: clamp(20px, 3vw, 28px);
    border-radius: var(--radius-full);
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.16);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    font-family: var(--font-heading);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.9);
}
.lux-hero__eyebrow-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--color-gold);
    animation: luxPulse 2.4s ease-in-out infinite;
}
@keyframes luxPulse {
    0%,100% { box-shadow: 0 0 0 3px rgba(212,175,55,0.28); }
    50%     { box-shadow: 0 0 0 7px rgba(212,175,55,0); }
}
.lux-hero__title {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: clamp(2.6rem, 6vw, 4.6rem);
    line-height: 1.03;
    letter-spacing: -1.5px;
    color: #fff;
    margin: 0 0 clamp(18px, 2.6vw, 26px);
}
.lux-hero__title-accent {
    display: inline-block;
    background: linear-gradient(120deg, var(--color-gold) 0%, #f6e7b0 45%, var(--color-gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.lux-hero__subtitle {
    font-family: var(--font-body);
    font-size: clamp(1rem, 1.4vw, 1.2rem);
    line-height: 1.7;
    color: rgba(255,255,255,0.72);
    max-width: 540px;
    margin: 0 0 clamp(28px, 3.5vw, 40px);
}

/* ── Buttons ────────────────────────────── */
.lux-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: clamp(30px, 4vw, 44px);
}
.lux-hero__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 15px 30px;
    border-radius: var(--radius-full);
    border: 1.5px solid transparent;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: transform 0.25s cubic-bezier(0.16,1,0.3,1), box-shadow 0.3s ease,
                background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.lux-hero__btn svg { transition: transform 0.25s ease; }
.lux-hero__btn--primary {
    background: linear-gradient(120deg, var(--color-gold), #e9cf7e);
    color: #23180a;
    box-shadow: 0 12px 30px rgba(212,175,55,0.32);
}
.lux-hero__btn--primary:hover,
.lux-hero__btn--primary:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 18px 40px rgba(212,175,55,0.45);
}
.lux-hero__btn--primary:hover svg { transform: translateX(4px); }
.lux-hero__btn--ghost {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.28);
    color: #fff;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.lux-hero__btn--ghost:hover,
.lux-hero__btn--ghost:focus-visible {
    background: rgba(255,255,255,0.14);
    border-color: rgba(255,255,255,0.5);
    transform: translateY(-3px);
}

/* ── Trust row ──────────────────────────── */
.lux-hero__trust {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 24px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.lux-hero__trust li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 500;
    color: rgba(255,255,255,0.78);
}
.lux-hero__trust svg {
    width: 20px; height: 20px;
    color: var(--color-gold);
    flex-shrink: 0;
}

/* ── RIGHT: car visual ──────────────────── */
.lux-hero__visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
}
.lux-hero__car-glow {
    position: absolute;
    z-index: 0;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 112%; height: 112%;
    background: radial-gradient(ellipse at center, rgba(42,167,255,0.45) 0%, rgba(212,175,55,0.20) 45%, transparent 68%);
    filter: blur(48px);
}
/* Light, 3D glass frame ("stage") that holds the transparent car image */
.lux-hero__stage {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 560px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(16px, 2vw, 30px);
    border-radius: clamp(20px, 2.4vw, 30px);
    background: linear-gradient(157deg,
                rgba(255,255,255,0.18) 0%,
                rgba(255,255,255,0.07) 52%,
                rgba(255,255,255,0.03) 100%);
    -webkit-backdrop-filter: blur(12px) saturate(130%);
    backdrop-filter: blur(12px) saturate(130%);
    border: 1px solid rgba(255,255,255,0.40);
    /* light 3D border + soft light shade: bright top-left highlight, gentle depth shadow */
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.65),
        inset 0 -1px 0 rgba(0,0,0,0.12),
        0 30px 64px rgba(4,12,26,0.50),
        0 4px 14px rgba(255,255,255,0.05);
    animation: luxCarFloat 6.5s ease-in-out infinite;
}
/* Transparent car sits on the glass, grounded by a soft drop-shadow */
.lux-hero__car {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 520px;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 24px 26px rgba(0,0,0,0.48));
}
@keyframes luxCarFloat {
    0%,100% { transform: translateY(0); }
    50%     { transform: translateY(-12px); }
}

/* Floating dark-glass stat card — anchored to the frame's corner */
.lux-hero__stat {
    position: absolute;
    z-index: 3;
    left: -14px;
    bottom: -14px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 15px 22px;
    border-radius: var(--radius-md);
    background: rgba(9, 20, 37, 0.80);
    border: 1px solid rgba(255,255,255,0.14);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    box-shadow: 0 20px 46px rgba(0,0,0,0.42);
}
.lux-hero__stat-num {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 2rem;
    line-height: 1;
    color: #fff;
}
.lux-hero__stat-num span { color: var(--color-gold); }
.lux-hero__stat-label {
    font-family: var(--font-body);
    font-size: 0.78rem;
    line-height: 1.35;
    color: rgba(255,255,255,0.72);
}

/* ── Responsive ─────────────────────────── */
/* Tablet & mobile: stack in the order heading → image → subheading → buttons.
   display:contents lets the copy's children interleave with the image so the
   image can sit between the heading and the subheading. */
@media (max-width: 992px) {
    .lux-hero__inner {
        grid-template-columns: 1fr;
        gap: clamp(14px, 3vw, 26px);
        text-align: center;
        justify-items: center;
    }
    .lux-hero__content { display: contents; }
    .lux-hero__eyebrow  { order: 1; margin-bottom: 2px; }
    .lux-hero__title    { order: 2; width: 100%; margin-bottom: 2px; }
    .lux-hero__visual   {
        order: 3;
        width: 100%;
        max-width: clamp(300px, 64vw, 440px);
        margin: 6px auto;
    }
    .lux-hero__subtitle { order: 4; width: 100%; max-width: 560px; margin: 0 auto; }
    .lux-hero__actions  { order: 5; justify-content: center; margin-bottom: 2px; }
    .lux-hero__trust    { order: 6; justify-content: center; }
}

@media (max-width: 560px) {
    .lux-hero {
        padding: clamp(104px, 20vh, 140px) 0 60px;
        text-align: center;
    }
    .lux-hero__title { letter-spacing: -1px; }
    .lux-hero__visual { max-width: clamp(258px, 76vw, 360px); }
    .lux-hero__actions { flex-direction: column; width: 100%; }
    .lux-hero__btn { width: 100%; }
    .lux-hero__stat { display: none; }
    .lux-hero__trust { gap: 8px 16px; }
    .lux-hero__trust li { font-size: 0.82rem; }
}

/* Motion-safety */
@media (prefers-reduced-motion: reduce) {
    .lux-hero__glow,
    .lux-hero__stage,
    .lux-hero__eyebrow-dot { animation: none !important; }
}


/* =========================================
   Why Choose Us Section Additions
   ========================================= */
.why-choose-us-section {
    position: relative;
    padding: 120px 0;
    background-color: var(--color-bg);
    overflow: hidden;
}

/* Abstract Background Shapes */
.wcu-bg-shapes {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}
.wcu-shape {
    position: absolute;
    width: 600px;
    height: 600px;
    filter: blur(60px);
    animation: wcuFloat 15s ease-in-out infinite alternate;
}
.wcu-shape-1 {
    top: -100px;
    right: -200px;
}
.wcu-shape-2 {
    bottom: -100px;
    left: -200px;
    animation-delay: -5s;
}
@keyframes wcuFloat {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(50px, -50px) scale(1.1); }
}

/* Alternating Grid */
.wcu-alternating-grid {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 80px;
    margin-bottom: 120px;
}
.wcu-row {
    display: flex;
    align-items: center;
    gap: 60px;
}
.wcu-row.reverse {
    flex-direction: row-reverse;
}
.wcu-content {
    flex: 1;
}
.wcu-title {
    font-size: 2.25rem;
    margin-bottom: 24px;
    color: var(--color-dark);
}
.wcu-desc {
    font-size: 1.125rem;
    color: var(--color-text-muted);
    margin-bottom: 32px;
}
.wcu-list {
    list-style: none;
    padding: 0;
}
.wcu-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.125rem;
    margin-bottom: 16px;
    font-weight: 500;
    color: var(--color-dark);
}
.wcu-list svg {
    width: 24px;
    height: 24px;
}

/* Interactive Cards */
.wcu-card-wrapper {
    flex: 1;
    display: flex;
    justify-content: center;
}
.wcu-card {
    position: relative;
    width: 100%;
    max-width: 400px;
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-xl);
    padding: 40px;
    text-align: center;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.9);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
}
.wcu-card:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 30px 60px rgba(15, 76, 129, 0.1);
    border-color: var(--color-primary);
}
.wcu-card-icon {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    background: var(--color-light-gray);
    position: relative;
    z-index: 2;
    transition: transform 0.4s ease;
}
.wcu-card:hover .wcu-card-icon {
    transform: scale(1.1);
}
.wcu-card-icon svg {
    width: 60px;
    height: 60px;
}
.icon-primary { color: var(--color-primary); }
.icon-accent { color: var(--color-accent); }
.icon-success { color: var(--color-success); }
.icon-dark { color: var(--color-dark); }

.wcu-card h4 {
    font-size: 1.5rem;
    position: relative;
    z-index: 2;
    color: #fff;
}

/* Make icons white inside gradient cards */
.wcu-card .wcu-card-icon {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);
}
.wcu-card .icon-primary,
.wcu-card .icon-accent,
.wcu-card .icon-success,
.wcu-card .icon-dark {
    color: #ffffff;
}

/* Attractive Vibrant Background Gradients */
.wcu-row:nth-child(1) .wcu-card { background: linear-gradient(135deg, #FF6A88 0%, #FF99AC 100%); border: none; }
.wcu-row:nth-child(2) .wcu-card { background: linear-gradient(to right, #4facfe 0%, #00f2fe 100%); border: none; }
.wcu-row:nth-child(3) .wcu-card { background: radial-gradient(circle at top right, #43e97b 0%, #38f9d7 100%); border: none; }
.wcu-row:nth-child(4) .wcu-card { background: linear-gradient(60deg, #667eea 0%, #764ba2 100%); border: none; }

.wcu-card-glow {
    position: absolute;
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, rgba(42, 167, 255, 0.2) 0%, rgba(255,255,255,0) 70%);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    opacity: 0;
    transition: opacity 0.4s ease;
}
.wcu-card:hover .wcu-card-glow {
    opacity: 1;
}

/* Animated Counters */
.wcu-stats-container {
    position: relative;
    z-index: 10;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
}
.wcu-stat-box {
    padding: 40px 24px;
    text-align: center;
    border-radius: var(--radius-lg);
    background: rgba(255,255,255,0.8);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: default;
    border: 1px solid transparent;
}
.wcu-stat-box:nth-child(1) {
    background: linear-gradient(135deg, #e0f2fe 0%, #ffffff 100%) !important;
}
.wcu-stat-box:nth-child(2) {
    background: linear-gradient(135deg, #ffedd5 0%, #ffffff 100%) !important;
}
.wcu-stat-box:nth-child(3) {
    background: linear-gradient(135deg, #dcfce7 0%, #ffffff 100%) !important;
}
.wcu-stat-box:nth-child(4) {
    background: linear-gradient(135deg, #f3e8ff 0%, #ffffff 100%) !important;
}

.wcu-stat-box:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(15, 76, 129, 0.08);
    border-color: rgba(15, 76, 129, 0.1);
}
.stat-number {
    font-size: 3.5rem;
    font-family: var(--font-heading);
    font-weight: 800;
    color: var(--color-primary);
    line-height: 1;
    margin-bottom: 8px;
}
.stat-number::after {
    content: '+';
    color: var(--color-accent);
}
.wcu-stat-box:nth-child(4) .stat-number::after {
    content: '%';
}
.stat-label {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

@media (max-width: 1024px) {
    .wcu-row, .wcu-row.reverse {
        flex-direction: column;
        gap: 40px;
        text-align: center;
    }
    .wcu-list li {
        justify-content: center;
    }
    .wcu-stats-container {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 768px) {
    .wcu-stats-container {
        grid-template-columns: 1fr;
    }
}

/* =========================================
   Pricing Section Additions
   ========================================= */
.pricing-section {
    position: relative;
    padding: 120px 0;
    background-color: var(--color-dark);
    color: #fff;
    overflow: hidden;
}

/* Background Glows */
.pricing-bg-glow {
    position: absolute;
    width: 60vw;
    height: 60vw;
    border-radius: 50%;
    filter: blur(150px);
    z-index: 0;
    opacity: 0.15;
    pointer-events: none;
}
.glow-1 {
    top: -20%;
    right: -10%;
    background: var(--color-primary);
}
.glow-2 {
    bottom: -20%;
    left: -10%;
    background: var(--color-accent);
}

/* Pricing Cards Layout */
.pricing-cards-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-bottom: 80px;
    position: relative;
    z-index: 10;
}

.glass-pricing {
    position: relative;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-xl);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}
.glass-pricing:hover {
    transform: translateY(-10px);
    box-shadow: 0 40px 80px rgba(0,0,0,0.5);
    border-color: rgba(255, 255, 255, 0.3);
}

.pricing-card-inner {
    padding: 48px 32px;
    position: relative;
    z-index: 2;
    background: inherit;
    border-radius: inherit;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Availability Badge */
.availability-badge {
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 6px 12px;
    border-radius: 20px;
}
.badge-available {
    background: rgba(54, 198, 144, 0.2);
    color: var(--color-success);
    border: 1px solid rgba(54, 198, 144, 0.3);
}
.badge-limited {
    background: rgba(234, 179, 8, 0.2);
    color: var(--color-accent);
    border: 1px solid rgba(234, 179, 8, 0.3);
}

/* Pricing Header */
.pricing-header {
    text-align: center;
    margin-bottom: 32px;
}
.plan-icon {
    width: 64px;
    height: 64px;
    margin: 16px auto 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(212, 175, 55, 0.15); /* Subtle gold background */
    border-radius: 50%;
    color: var(--color-gold); /* Gold icon */
    border: 1px solid rgba(212, 175, 55, 0.3);
}
.plan-icon svg {
    width: 32px;
    height: 32px;
}
.pricing-header h3 {
    font-size: 1.75rem;
    margin-bottom: 12px;
    background: linear-gradient(135deg, var(--color-gold), #fff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.plan-desc {
    font-size: 0.95rem;
    color: rgba(255,255,255,0.7);
    margin-bottom: 24px;
    min-height: 44px;
}

/* Pricing Value */
.plan-price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
}
.price-val {
    font-size: 3rem;
    font-family: var(--font-heading);
    font-weight: 800;
    line-height: 1;
}
.price-period {
    font-size: 1rem;
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Features List */
.pricing-features {
    list-style: none;
    padding: 0;
    margin: 0 0 40px 0;
    flex-grow: 1;
}
.pricing-features li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
    font-size: 1rem;
    color: rgba(255,255,255,0.9);
}
.pricing-features svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 2px;
}
.feature-disabled {
    color: rgba(255,255,255,0.4) !important;
}

/* Animated Border Glow for Featured Plan */
.featured-plan {
    transform: scale(1.05);
    border-color: transparent;
}
.featured-plan:hover {
    transform: scale(1.05) translateY(-10px);
}
.animated-border-glow {
    position: absolute;
    inset: -2px;
    border-radius: var(--radius-xl);
    background: conic-gradient(from 0deg, transparent 0 340deg, #FFD700 360deg);
    animation: rotate-glow 4s linear infinite;
    z-index: 1;
}
.animated-border-glow::after {
    content: '';
    position: absolute;
    inset: 2px;
    background: var(--color-dark);
    border-radius: calc(var(--radius-xl) - 2px);
}
@keyframes rotate-glow {
    to { transform: rotate(360deg); }
}

/* Button overrides for dark mode */
.btn-outline-light {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.3);
    color: #fff;
}
.btn-outline-light:hover {
    background: #fff;
    color: var(--color-dark);
}

/* Comparison Table */
.comparison-section {
    position: relative;
    z-index: 10;
}
.table-responsive {
    overflow-x: auto;
}
.glass-table {
    width: 100%;
    border-collapse: collapse;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.glass-table th, .glass-table td {
    padding: 20px 24px;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.glass-table th:first-child, .glass-table td:first-child {
    text-align: left;
    font-weight: 600;
}
.glass-table th {
    background: rgba(255, 255, 255, 0.1);
    font-family: var(--font-heading);
    font-size: 1.125rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.glass-table td {
    color: rgba(255,255,255,0.8);
}
.icon-yes {
    width: 24px; height: 24px;
    stroke: var(--color-success); stroke-width: 2; fill: none;
    display: inline-block; vertical-align: middle;
}
.icon-no {
    width: 24px; height: 24px;
    stroke: rgba(255,255,255,0.3); stroke-width: 2; fill: none;
    display: inline-block; vertical-align: middle;
}

@media (max-width: 1024px) {
    .pricing-cards-wrapper {
        grid-template-columns: repeat(2, 1fr);
    }
    .featured-plan {
        transform: none;
    }
    .featured-plan:hover {
        transform: translateY(-10px);
    }
}
    }
}
@media (max-width: 768px) {
    .pricing-cards-wrapper {
        grid-template-columns: 1fr;
    }
}

/* =========================================
   Services Section Additions (Bento Grid)
   ========================================= */
.services-section {
    position: relative;
    padding: 120px 0;
    overflow: hidden;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-top: 40px;
}

/* Service Card (Bento Style) */
.service-card {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: #fff;
    min-height: 350px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.service-card.large-card {
    grid-column: span 2;
}

.service-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(15, 76, 129, 0.15);
}

/* Image Background & Zoom */
.service-img-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: hidden;
}
.service-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.service-card:hover .service-img {
    transform: scale(1.08);
}

/* Gradient Overlay */
.service-gradient-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(15, 76, 129, 0.95) 0%, rgba(22, 33, 45, 0.6) 50%, transparent 100%);
    transition: background 0.4s ease;
}
.service-card:hover .service-gradient-overlay {
    background: linear-gradient(to top, rgba(15, 76, 129, 1) 0%, rgba(22, 33, 45, 0.8) 60%, rgba(0,0,0,0.2) 100%);
}

/* Content Area */
.service-content {
    position: relative;
    z-index: 2;
    padding: 40px;
    color: #fff;
    transform: translateY(20px);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.service-card:hover .service-content {
    transform: translateY(0);
}

/* Icon Animation */
.service-icon {
    width: 48px;
    height: 48px;
    background: rgba(255,255,255,0.2);
    backdrop-filter: blur(10px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s ease;
}
.service-card:hover .service-icon {
    transform: scale(1.1) rotate(5deg);
    background: var(--color-accent);
}
.service-icon svg {
    width: 24px;
    height: 24px;
    color: #fff;
}

.service-content h3 {
    font-size: 1.5rem;
    margin-bottom: 12px;
    color: #fff;
}
.service-content p {
    font-size: 0.95rem;
    color: rgba(255,255,255,0.8);
    opacity: 0;
    max-height: 0;
    transition: opacity 0.4s ease, max-height 0.4s ease;
}
.service-card:hover .service-content p {
    opacity: 1;
    max-height: 100px;
}

@media (max-width: 1024px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .service-card.large-card {
        grid-column: span 2;
    }
}
@media (max-width: 768px) {
    .services-grid {
        grid-template-columns: 1fr;
    }
    .service-card.large-card {
        grid-column: span 1;
    }
    .service-content {
        transform: translateY(0);
    }
    .service-content p {
        opacity: 1;
        max-height: 200px;
    }
}

/* =========================================
   DMV Rental Landing Page Additions
   ========================================= */

/* Hero Section */
.dmv-hero {
    position: relative;
    padding: 200px 0 120px;
    overflow: hidden;
}
.dmv-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
}
.dmv-hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.dmv-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(15, 76, 129, 0.95), rgba(22, 33, 45, 0.85));
    z-index: -1;
}
.dmv-hero-content {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}
.badge-premium {
    display: inline-block;
    background: rgba(255,215,0,0.2);
    color: #FFD700;
    border: 1px solid rgba(255,215,0,0.4);
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 24px;
}

/* Layout Grid */
.dmv-layout-section {
    padding: 80px 0;
    background: var(--color-bg);
}
.dmv-layout-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 60px;
    align-items: start;
}

/* Content Blocks */
.content-block {
    margin-bottom: 64px;
}
.content-block h2 {
    font-size: 2rem;
    margin-bottom: 24px;
    color: var(--color-dark);
}
.block-intro {
    font-size: 1.125rem;
    color: var(--color-text-muted);
    margin-bottom: 32px;
}
.rounded-box {
    padding: 40px;
    border-radius: var(--radius-lg);
}

/* Timeline */
.timeline-container {
    position: relative;
    padding-left: 40px;
}
.timeline-container::before {
    content: '';
    position: absolute;
    left: 15px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: rgba(15, 76, 129, 0.2);
}
.timeline-item {
    position: relative;
    margin-bottom: 40px;
}
.timeline-item:last-child {
    margin-bottom: 0;
}
.timeline-node {
    position: absolute;
    left: -40px;
    top: 0;
    width: 32px;
    height: 32px;
    background: var(--color-primary);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-family: var(--font-heading);
    box-shadow: 0 0 0 4px var(--color-bg);
    z-index: 2;
}
.timeline-content h4 {
    font-size: 1.25rem;
    margin-bottom: 8px;
    color: var(--color-dark);
}
.timeline-content p {
    color: var(--color-text-muted);
}

/* Styled List */
.styled-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.styled-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
    font-size: 1.1rem;
    color: var(--color-dark);
}
.styled-list svg {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    margin-top: 2px;
}

/* Compliance Grid */
.compliance-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 24px;
}
.compliance-item {
    background: #fff;
    padding: 24px;
    border-radius: var(--radius-md);
    text-align: center;
    border: 1px solid var(--color-light-gray);
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}
.compliance-item .icon {
    font-size: 2rem;
    margin-bottom: 12px;
}
.compliance-item span {
    display: block;
    font-weight: 600;
    color: var(--color-dark);
}

/* Testimonials */
.testimonial-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}
.testimonial-card {
    background: #fff;
    padding: 32px;
    border-radius: var(--radius-md);
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}
.testimonial-card .stars {
    color: #FFC107;
    font-size: 1.25rem;
    margin-bottom: 16px;
}
.testimonial-card p {
    font-style: italic;
    color: var(--color-text-muted);
    margin-bottom: 16px;
}
.testimonial-card strong {
    color: var(--color-dark);
}

/* FAQ Accordion */
.faq-accordion {
    border: 1px solid var(--color-light-gray);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.faq-item {
    border-bottom: 1px solid var(--color-light-gray);
}
.faq-item:last-child {
    border-bottom: none;
}
.faq-question {
    width: 100%;
    text-align: left;
    padding: 24px;
    background: #fff;
    border: none;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-dark);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.3s ease;
}
.faq-question:hover {
    background: var(--color-light-gray);
}
.faq-question .icon {
    font-size: 1.5rem;
    font-weight: 300;
    transition: transform 0.3s ease;
}
.faq-answer {
    max-height: 0;
    overflow: hidden;
    background: #fff;
    transition: max-height 0.3s ease, padding 0.3s ease;
}
.faq-item.active .faq-answer {
    max-height: 200px; /* arbitrary max height for animation */
    padding: 0 24px 24px;
}
.faq-item.active .faq-question .icon {
    transform: rotate(45deg);
}

/* Sticky Sidebar */
.sticky-wrapper {
    position: sticky;
    top: 120px; /* Account for solid header */
}
.booking-card {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(0,0,0,0.1);
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
    padding: 32px;
    border-radius: var(--radius-lg);
}
.booking-card h3 {
    margin-bottom: 8px;
}
.price-tag {
    font-size: 1.125rem;
    color: var(--color-text-muted);
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--color-light-gray);
}
.price-tag strong {
    font-size: 2rem;
    color: var(--color-primary);
}
.sidebar-form .input-group {
    margin-bottom: 16px;
}
.sidebar-form label {
    display: block;
    margin-bottom: 8px;
    font-size: 0.875rem;
    font-weight: 600;
}
.sidebar-form input {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--color-light-gray);
    border-radius: var(--radius-sm);
    font-family: inherit;
}

/* Call CTA */
.call-cta-card {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #fff;
    padding: 24px;
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}
.call-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}
.call-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.call-info h4 {
    font-size: 1.1rem;
    margin-bottom: 4px;
}
.call-info p {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    margin-bottom: 8px;
}

/* Floating Action Button */
.fab-booking {
    display: none;
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: var(--color-primary);
    color: #fff;
    padding: 16px 24px;
    border-radius: 30px;
    font-weight: 600;
    box-shadow: 0 10px 30px rgba(15, 76, 129, 0.4);
    z-index: 1000;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}
.fab-booking svg {
    width: 20px;
    height: 20px;
}

@media (max-width: 1024px) {
    .dmv-layout-grid {
        grid-template-columns: 1fr;
    }
    .sticky-wrapper {
        position: relative;
        top: 0;
    }
    .fab-booking {
        display: flex; /* Show on mobile/tablet */
    }
}

/* =========================================
   Premium Timeline Section
   ========================================= */
.premium-timeline-section {
    padding: 120px 0;
    background: var(--color-light-gray);
    overflow: hidden;
}

.premium-timeline {
    position: relative;
    max-width: 1000px;
    margin: 60px auto 0;
    padding: 40px 0;
}

/* Center Track */
.timeline-track {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 4px;
    margin-left: -2px;
    background: rgba(15, 76, 129, 0.1);
    border-radius: 4px;
    z-index: 1;
}

.timeline-progress {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0%; /* updated by JS */
    background: var(--color-primary);
    border-radius: 4px;
    box-shadow: 0 0 10px rgba(15, 76, 129, 0.5);
    transition: height 0.1s ease-out;
}

/* Timeline Rows */
.timeline-row {
    position: relative;
    width: 50%;
    margin-bottom: 80px;
    z-index: 2;
}
.timeline-row:last-child {
    margin-bottom: 0;
}

.timeline-row.left {
    left: 0;
    padding-right: 60px;
}
.timeline-row.right {
    left: 50%;
    padding-left: 60px;
}

/* Timeline Marker */
.timeline-marker {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    background: #fff;
    border: 4px solid var(--color-light-gray);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    transition: all 0.4s ease;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.timeline-row.left .timeline-marker {
    right: -24px;
}
.timeline-row.right .timeline-marker {
    left: -24px;
}
.timeline-marker svg {
    width: 20px;
    height: 20px;
    color: var(--color-primary);
}

/* Marker Active State (controlled by scroll reveal) */
.timeline-row.is-visible .timeline-marker {
    border-color: var(--color-primary);
    background: var(--color-primary);
}
.timeline-row.is-visible .timeline-marker svg {
    color: #fff;
}

/* Timeline Card */
.timeline-card {
    background: #fff;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.timeline-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

.card-illustration {
    height: 200px;
    overflow: hidden;
    position: relative;
}
.card-illustration img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s ease;
}
.timeline-card:hover .card-illustration img {
    transform: scale(1.05);
}

.card-content {
    padding: 32px;
}
.card-content h3 {
    font-size: 1.5rem;
    margin-bottom: 12px;
    color: var(--color-dark);
}
.card-content p {
    color: var(--color-text-muted);
    font-size: 1rem;
    line-height: 1.6;
    margin: 0;
}

/* Responsive */
@media (max-width: 768px) {
    .timeline-track {
        left: 24px;
    }
    .timeline-row {
        width: 100%;
        padding-left: 80px !important;
        padding-right: 0 !important;
    }
    .timeline-row.left,
    .timeline-row.right {
        left: 0;
    }
    .timeline-marker {
        left: 0 !important;
        right: auto !important;
    }
}

/* =========================================
   Luxury Gallery Section
   ========================================= */
.gallery-section {
    padding: 120px 0;
    background: #fff;
}

/* Filters */
.gallery-filters {
    margin-bottom: 48px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
}
.filter-btn {
    background: transparent;
    border: 1px solid var(--color-light-gray);
    padding: 8px 24px;
    border-radius: 30px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: all 0.3s ease;
}
.filter-btn:hover, .filter-btn.active {
    background: var(--color-dark);
    color: #fff;
    border-color: var(--color-dark);
}

/* Masonry Grid via CSS Columns */
.gallery-masonry {
    column-count: 3;
    column-gap: 24px;
}
.gallery-item {
    break-inside: avoid;
    margin-bottom: 24px;
    border-radius: var(--radius-md);
    overflow: hidden;
    position: relative;
    cursor: pointer;
    transform: scale(1);
    transition: transform 0.4s ease, opacity 0.4s ease;
}
.gallery-item.hide {
    display: none;
}

.gallery-img-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}
.gallery-img-wrapper img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.gallery-item:hover .gallery-img-wrapper img {
    transform: scale(1.05);
}

/* Gallery Overlay */
.gallery-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(15, 76, 129, 0.9) 0%, rgba(22, 33, 45, 0.2) 60%, transparent 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 32px;
}
.gallery-item:hover .gallery-overlay {
    opacity: 1;
}

.gallery-caption {
    transform: translateY(20px);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.gallery-item:hover .gallery-caption {
    transform: translateY(0);
}
.gallery-caption h4 {
    color: #fff;
    font-size: 1.25rem;
    margin-bottom: 4px;
}
.gallery-caption p {
    color: rgba(255,255,255,0.7);
    font-size: 0.875rem;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.zoom-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 0;
    width: 64px;
    height: 64px;
    background: rgba(255,255,255,0.2);
    backdrop-filter: blur(10px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
}
.gallery-item:hover .zoom-icon {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}
.zoom-icon svg {
    width: 32px;
    height: 32px;
}

/* Lightbox Modal */
.lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 76, 129, 0.95);
    backdrop-filter: blur(15px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}
.lightbox-overlay.active {
    opacity: 1;
    visibility: visible;
}
.lightbox-content {
    max-width: 90%;
    max-height: 90vh;
    transform: scale(0.9);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.lightbox-overlay.active .lightbox-content {
    transform: scale(1);
}
.lightbox-content img {
    max-width: 100%;
    max-height: 90vh;
    object-fit: contain;
    border-radius: var(--radius-md);
    box-shadow: 0 30px 60px rgba(0,0,0,0.3);
}
.lightbox-close {
    position: absolute;
    top: 40px;
    right: 40px;
    background: transparent;
    border: none;
    color: #fff;
    cursor: pointer;
    transition: transform 0.3s ease;
}
.lightbox-close:hover {
    transform: rotate(90deg);
}
.lightbox-close svg {
    width: 40px;
    height: 40px;
}

@media (max-width: 1024px) {
    .gallery-masonry {
        column-count: 2;
    }
}
@media (max-width: 768px) {
    .gallery-masonry {
        column-count: 1;
    }
    .gallery-item:hover .gallery-img-wrapper img {
        transform: none; /* disable zoom on mobile to prevent weird touch bugs */
    }
}

/* --- 11. Testimonials Section --- */
.testimonials-section {
    padding: 120px 0;
    position: relative;
    background: var(--color-bg);
    overflow: hidden;
}

.testimonials-bg-glow {
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    filter: blur(100px);
    z-index: 0;
    opacity: 0.4;
    pointer-events: none;
}
.testimonials-bg-glow.glow-1 {
    top: -10%;
    left: -20%;
    background: rgba(42, 167, 255, 0.15);
}
.testimonials-bg-glow.glow-2 {
    bottom: -10%;
    right: -20%;
    background: rgba(15, 76, 129, 0.15);
}

.testimonials-section .container {
    position: relative;
    z-index: 1;
}

.testimonial-slider-wrapper {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    overflow: hidden;
    padding: 40px 0;
    position: relative;
}

/* Gradient fades on the edges of the slider */
.testimonial-slider-wrapper::before,
.testimonial-slider-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    width: 15%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}
.testimonial-slider-wrapper::before {
    left: 0;
    background: linear-gradient(to right, var(--color-bg) 0%, transparent 100%);
}
.testimonial-slider-wrapper::after {
    right: 0;
    background: linear-gradient(to left, var(--color-bg) 0%, transparent 100%);
}

.testimonial-slider-track {
    display: flex;
    gap: 32px;
    width: max-content;
    animation: scrollSlider 40s linear infinite;
    padding: 0 32px;
}

/* Pause on hover */
.testimonial-slider-track:hover {
    animation-play-state: paused;
}

@keyframes scrollSlider {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(-50% - 16px));
    }
}

.testimonial-card {
    width: 420px;
    padding: 32px;
    flex-shrink: 0;
    position: relative;
    transition: var(--transition-smooth);
    background: rgba(255, 255, 255, 0.6);
}

.testimonial-card:hover {
    background: rgba(255, 255, 255, 0.95);
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 40px rgba(15, 76, 129, 0.1);
}

.quote-icon {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 48px;
    height: 48px;
    color: rgba(15, 76, 129, 0.05);
    transition: var(--transition-smooth);
    z-index: 0;
}

.testimonial-card:hover .quote-icon {
    color: rgba(42, 167, 255, 0.15);
    transform: scale(1.1) rotate(5deg);
}

.testimonial-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
    position: relative;
    z-index: 1;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 16px;
}

.user-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.user-meta h4 {
    margin: 0 0 4px 0;
    font-size: 1.125rem;
    color: var(--color-dark);
}

.review-date {
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.google-icon svg {
    width: 24px;
    height: 24px;
}

.review-stars {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
}

.review-stars svg {
    width: 18px;
    height: 18px;
}

.testimonial-text {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color-text);
    position: relative;
    z-index: 1;
}

@media (max-width: 768px) {
    .testimonial-card {
        width: 320px;
        padding: 24px;
    }
    
    .testimonial-slider-track {
        animation-duration: 30s;
    }
}

/* --- 12. FAQ Section --- */
.faq-section {
    padding: 100px 0;
    position: relative;
    background: var(--color-light-gray);
}

.faq-search-wrapper {
    max-width: 600px;
    margin: 0 auto 48px;
    position: relative;
}

.faq-search-box {
    display: flex;
    align-items: center;
    padding: 12px 24px;
    border-radius: 50px;
    background: #fff;
    border: 1px solid rgba(15, 76, 129, 0.1);
    box-shadow: 0 8px 24px rgba(15, 76, 129, 0.05);
    transition: var(--transition-smooth);
}
.faq-search-box:focus-within {
    box-shadow: 0 12px 32px rgba(15, 76, 129, 0.1);
    border-color: var(--color-primary);
}

.faq-search-box .search-icon {
    width: 24px;
    height: 24px;
    color: var(--color-text-muted);
    flex-shrink: 0;
}

.faq-search-box input {
    border: none;
    background: transparent;
    padding: 8px 16px;
    box-shadow: none;
    font-size: 1.05rem;
    width: 100%;
}
.faq-search-box input:focus {
    box-shadow: none;
}

.clear-search {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}
.clear-search:hover {
    color: var(--color-primary);
}

.faq-no-results {
    text-align: center;
    padding: 20px;
    color: var(--color-text-muted);
    font-size: 1.1rem;
}

.faq-container {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.faq-item {
    border-radius: var(--radius-md);
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.05);
    transition: var(--transition-smooth);
}
.faq-item:hover {
    box-shadow: 0 12px 24px rgba(0,0,0,0.04);
}
.faq-item.active {
    border-color: rgba(15, 76, 129, 0.2);
    box-shadow: 0 12px 32px rgba(15, 76, 129, 0.08);
}

.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 32px;
    cursor: pointer;
    user-select: none;
    background: transparent;
}

.faq-q-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.faq-icon {
    width: 32px;
    height: 32px;
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.faq-question h3 {
    font-size: 1.15rem;
    margin: 0;
    font-weight: 600;
    transition: var(--transition-smooth);
}
.faq-item.active .faq-question h3 {
    color: var(--color-primary);
}

.faq-toggle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(15, 76, 129, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    transition: var(--transition-smooth);
    flex-shrink: 0;
}
.faq-toggle svg {
    width: 20px;
    height: 20px;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.faq-item:hover .faq-toggle {
    background: var(--color-primary);
    color: #fff;
}
.faq-item.active .faq-toggle {
    background: var(--color-primary);
    color: #fff;
}
.faq-item.active .faq-toggle svg {
    transform: rotate(180deg);
}

/* Modern CSS Grid transition for accordion height */
.faq-answer {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.faq-item.active .faq-answer {
    grid-template-rows: 1fr;
}

.faq-answer-inner {
    overflow: hidden;
    padding: 0 32px;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.4s ease, transform 0.4s ease, padding 0.4s ease;
}
.faq-item.active .faq-answer-inner {
    padding: 0 32px 32px 32px;
    opacity: 1;
    transform: translateY(0);
}
.faq-answer-inner p {
    margin: 0;
    color: var(--color-text-muted);
    line-height: 1.7;
}

@media (max-width: 768px) {
    .faq-question {
        padding: 20px;
    }
    .faq-answer-inner {
        padding: 0 20px;
    }
    .faq-item.active .faq-answer-inner {
        padding: 0 20px 24px 20px;
    }
    .faq-q-left {
        gap: 12px;
    }
    .faq-question h3 {
        font-size: 1.05rem;
    }
}

/* --- 13. Advanced Contact Page --- */
.contact-page-section {
    position: relative;
    background: var(--color-bg);
    min-height: 100vh;
}

.contact-map-wrapper {
    position: relative;
    width: 100%;
    height: 50vh;
    min-height: 400px;
    background: #e0e0e0;
    z-index: 1;
}

.contact-main-container {
    position: relative;
    z-index: 2;
    margin-top: -120px;
}

.quick-contact-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 60px;
}

.quick-card {
    padding: 32px;
    background: rgba(255, 255, 255, 0.95);
    text-align: center;
    border-radius: var(--radius-md);
    transition: var(--transition-smooth);
}

.card-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 16px;
    color: var(--color-primary);
    display: flex;
    justify-content: center;
    align-items: center;
}

.card-icon svg {
    width: 32px;
    height: 32px;
}

.quick-card h3 {
    font-size: 1.25rem;
    margin-bottom: 12px;
}

.quick-card p {
    color: var(--color-text-muted);
    margin-bottom: 8px;
    line-height: 1.5;
}

.quick-card a {
    color: var(--color-accent);
    font-weight: 600;
}

.emergency-card {
    background: rgba(15, 76, 129, 0.02);
    border: 1px solid rgba(15, 76, 129, 0.1);
}

.emergency-number {
    font-size: 1.25rem;
    color: var(--color-primary) !important;
}

.contact-form-wrapper {
    max-width: 900px;
    margin: 0 auto 100px;
    padding: 60px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: var(--radius-lg);
}

.form-header {
    margin-bottom: 40px;
}

/* Floating Labels */
.floating-group {
    position: relative;
    margin-bottom: 32px;
    width: 100%;
}

.form-row {
    display: flex;
    gap: 24px;
}
.form-row .floating-group {
    flex: 1;
}

.floating-input,
.floating-select {
    width: 100%;
    padding: 24px 16px 8px;
    font-size: 1rem;
    font-family: var(--font-body);
    border: 1px solid rgba(15,76,129,0.15);
    border-radius: var(--radius-sm);
    background: #fff;
    outline: none;
    color: var(--color-text);
    transition: var(--transition-smooth);
}
.floating-select {
    appearance: none;
    -webkit-appearance: none;
}

.floating-input:focus,
.floating-select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px rgba(15,76,129,0.1);
}

.floating-label {
    position: absolute;
    top: 16px;
    left: 16px;
    font-size: 1rem;
    color: var(--color-text-muted);
    pointer-events: none;
    transition: 0.2s ease all;
}

.floating-input:focus ~ .floating-label,
.floating-input:not(:placeholder-shown) ~ .floating-label,
.floating-select:focus ~ .floating-label,
.floating-select:valid ~ .floating-label {
    top: 6px;
    font-size: 0.75rem;
    color: var(--color-primary);
}

.floating-textarea {
    resize: vertical;
}

.error-msg {
    position: absolute;
    bottom: -20px;
    left: 0;
    color: #e74c3c;
    font-size: 0.75rem;
    display: none;
}

.floating-group.error .floating-input,
.floating-group.error .floating-select {
    border-color: #e74c3c;
    box-shadow: 0 0 0 4px rgba(231, 76, 60, 0.1);
}
.floating-group.error .error-msg {
    display: block;
}

.form-submit-container {
    margin-top: 40px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.btn-submit-form {
    width: 100%;
    max-width: 300px;
    position: relative;
    overflow: hidden;
    height: 56px;
}

.btn-loader {
    width: 24px;
    height: 24px;
    animation: rotate 2s linear infinite;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.btn-loader .path {
    stroke: #fff;
    stroke-linecap: round;
    animation: dash 1.5s ease-in-out infinite;
}

@keyframes rotate {
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes dash {
    0% { stroke-dasharray: 1, 150; stroke-dashoffset: 0; }
    50% { stroke-dasharray: 90, 150; stroke-dashoffset: -35; }
    100% { stroke-dasharray: 90, 150; stroke-dashoffset: -124; }
}

.btn-submit-form.loading .btn-text {
    opacity: 0;
}
.btn-submit-form.loading .btn-loader {
    display: block !important;
}

.submit-success-msg {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
    padding: 16px 32px;
    background: rgba(54, 198, 144, 0.1);
    color: var(--color-success);
    border-radius: var(--radius-sm);
    animation: slideUpFade 0.5s ease forwards;
}

.success-icon svg {
    width: 24px;
    height: 24px;
}

@keyframes slideUpFade {
    0% { opacity: 0; transform: translateY(10px); }
    100% { opacity: 1; transform: translateY(0); }
}

@media (max-width: 992px) {
    .quick-contact-cards {
        grid-template-columns: 1fr;
    }
    .form-row {
        flex-direction: column;
        gap: 0;
    }
    .contact-form-wrapper {
        padding: 40px 24px;
    }
}
/* --- 14. Premium Interactions --- */
html {
    scroll-behavior: smooth;
}

/* Preloader */
.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: var(--color-dark);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 0.8s ease, visibility 0.8s ease;
}
.preloader.loaded {
    opacity: 0;
    visibility: hidden;
}
.loader-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}
.loader-logo {
    width: 104px;
    height: auto;
    display: block;
    filter: drop-shadow(0 8px 22px rgba(0, 0, 0, 0.45));
    animation: pulseLogo 2s infinite ease-in-out;
}
.loader-line {
    width: 100px;
    height: 2px;
    background: rgba(255,255,255,0.1);
    position: relative;
    overflow: hidden;
    border-radius: 2px;
}
.loader-line::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 30%;
    background: var(--color-primary);
    animation: slideLine 1.5s infinite ease-in-out;
}

@keyframes pulseLogo {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.1); opacity: 0.7; }
}
@keyframes slideLine {
    0% { left: -30%; }
    100% { left: 100%; }
}

/* Custom Cursor */
body {
    cursor: none;
}
a, button, input, select, textarea, .faq-question, .toggle, .slider {
    cursor: none;
}
.cursor-dot,
.cursor-ring {
    position: fixed;
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 10000;
}
.cursor-dot {
    width: 8px;
    height: 8px;
    background-color: var(--color-primary);
    transition: width 0.2s, height 0.2s, background-color 0.2s;
}
.cursor-ring {
    width: 40px;
    height: 40px;
    border: 1px solid rgba(15, 76, 129, 0.4);
    transition: width 0.2s, height 0.2s, background-color 0.2s, border-color 0.2s;
}
/* Hover state for cursor */
.cursor-ring.hovered {
    width: 60px;
    height: 60px;
    background-color: rgba(15, 76, 129, 0.1);
    border-color: transparent;
}
.cursor-dot.hovered {
    background-color: var(--color-accent);
}

/* Typing Effect */
.type-text-wrapper {
    display: inline-flex;
    text-align: left;
    min-width: 13em;
    vertical-align: middle;
}
.type-cursor {
    display: inline-block;
    width: 4px;
    height: 1em;
    background-color: var(--color-gold);
    margin-left: 4px;
    vertical-align: middle;
    animation: blinkCursor 0.75s step-end infinite;
}
@keyframes blinkCursor {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* Image Reveal */
.img-reveal {
    clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
    transition: clip-path 1.2s cubic-bezier(0.77, 0, 0.175, 1);
}
.img-reveal.is-revealed {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

/* Lazy Load Fade */
.lazy-img {
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
}
.lazy-img.loaded {
    opacity: 1;
}

/* Disable custom cursor on touch devices */
@media (max-width: 992px) {
    body, a, button, input, select, textarea, .faq-question {
        cursor: auto;
    }
    .cursor-dot, .cursor-ring {
        display: none !important;
    }
}

/* Text Color Utilities */
.text-light {
    color: #ffffff !important;
}
.text-light-muted {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* =========================================
   Pre-Footer CTA Section
   ========================================= */
.pre-footer-cta {
    position: relative;
    padding: 100px 0;
    background-color: var(--color-dark);
    overflow: hidden;
}
.cta-bg-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.3;
    z-index: 1;
}
.cta-blob-1 {
    width: 600px;
    height: 600px;
    background: var(--color-primary);
    top: -200px;
    left: -200px;
}
.cta-blob-2 {
    width: 500px;
    height: 500px;
    background: var(--color-accent);
    bottom: -150px;
    right: -150px;
}
.cta-section-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}
.cta-section-content {
    color: #fff;
}
.cta-eyebrow {
    display: inline-block;
    padding: 6px 14px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 30px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 24px;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.cta-section-title {
    font-size: clamp(2.2rem, 4vw, 3.5rem);
    margin-bottom: 20px;
    line-height: 1.1;
    color: #fff;
}
.cta-section-sub {
    font-size: 1.1rem;
    color: rgba(255,255,255,0.8);
    margin-bottom: 32px;
    line-height: 1.6;
    max-width: 90%;
}
.cta-review-badge {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: rgba(255,255,255,0.05);
    padding: 12px 20px;
    border-radius: 50px;
    border: 1px solid rgba(255,255,255,0.1);
    margin-bottom: 40px;
}
.cta-stars {
    display: flex;
    gap: 4px;
}
.cta-review-badge span {
    font-weight: 600;
    font-size: 0.9rem;
}
.cta-trust-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.cta-trust-list li {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
    font-size: 1.05rem;
}
.cta-trust-list svg {
    color: var(--color-gold, #FFD700);
}

/* Form Card */
.cta-form-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-lg);
    padding: 40px;
    box-shadow: 0 30px 60px rgba(0,0,0,0.3);
}
.cta-form-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 32px;
}
.cta-form-icon {
    width: 60px;
    height: 60px;
    background: rgba(255,255,255,0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}
.cta-form-header h3 {
    color: #fff;
    font-size: 1.6rem;
    margin-bottom: 4px;
}
.cta-form-header p {
    color: rgba(255,255,255,0.6);
    font-size: 0.95rem;
    margin: 0;
}
.cta-booking-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.cta-input-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.cta-input-group label {
    font-size: 0.9rem;
    color: rgba(255,255,255,0.9);
    font-weight: 500;
}
.cta-select-wrap {
    position: relative;
}
.cta-select-arrow {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: rgba(255,255,255,0.5);
}
.cta-booking-form select,
.cta-booking-form input[type="date"] {
    width: 100%;
    padding: 14px 16px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: var(--radius-md);
    color: #fff;
    font-family: inherit;
    font-size: 1rem;
    appearance: none;
    transition: var(--transition-smooth);
}
.cta-booking-form select:focus,
.cta-booking-form input[type="date"]:focus {
    outline: none;
    border-color: var(--color-primary);
    background: rgba(255,255,255,0.1);
}
.cta-booking-form select option {
    background: var(--color-dark);
    color: #fff;
}
.cta-date-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.cta-checkbox-label {
    display: flex;
    align-items: center;
    gap: 12px;
    color: rgba(255,255,255,0.8);
    font-size: 0.95rem;
    cursor: pointer;
    margin: 8px 0;
}
.cta-checkbox-label input {
    display: none;
}
.cta-checkmark {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: 4px;
    position: relative;
    transition: var(--transition-smooth);
}
.cta-checkbox-label input:checked ~ .cta-checkmark {
    background: var(--color-primary);
    border-color: var(--color-primary);
}
.cta-checkbox-label input:checked ~ .cta-checkmark::after {
    content: '';
    position: absolute;
    top: 2px; left: 6px;
    width: 5px; height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.cta-submit-btn {
    margin-top: 10px;
    padding: 16px;
    font-size: 1.1rem;
    display: flex;
    justify-content: center;
    gap: 12px;
}

@media (max-width: 992px) {
    .cta-section-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }
    .cta-section-content {
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .cta-section-sub {
        max-width: 100%;
    }
}
@media (max-width: 576px) {
    .cta-date-row {
        grid-template-columns: 1fr;
    }
    .cta-form-card {
        padding: 24px;
    }
}

/* Seamless transition from the dark CTA into the dark footer */
.pre-footer-cta + .site-footer {
    margin-top: 0;
}

/* =========================================
   Realistic Car Image & Spinning Wheels
   ========================================= */
.realistic-car-container {
    position: relative;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}
.realistic-car-body {
    width: 100%;
    height: auto;
    display: block;
    mix-blend-mode: multiply;
}
.realistic-wheel {
    position: absolute;
    /* The wheel image itself is a square with solid bg, so we make it round */
    border-radius: 50%;
    overflow: hidden;
    /* Perfect size to fill the arches without bleeding out */
    width: 14.5%;
    aspect-ratio: 1 / 1; /* Keep it perfectly square */
    animation: realWheelSpin 1.5s linear infinite; /* Spin a bit faster */
    /* Lifted up into the center of the arch */
    bottom: 39%; 
    /* Add a subtle inner shadow to blend the edge into the wheel well */
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.9), 0 3px 10px rgba(0, 0, 0, 0.5);
    z-index: 2;
}
.realistic-wheel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Hide the square corners of the wheel image */
    border-radius: 50%;
}
.realistic-wheel-front {
    /* Exact horizontal alignment for front wheel */
    left: 15.5%;
}
.realistic-wheel-rear {
    /* Exact horizontal alignment for rear wheel */
    right: 19.5%;
}

@keyframes realWheelSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(-360deg); } /* Assuming car is facing left, wheels spin counter-clockwise */
}


/* =========================================================
   INNER PAGES — About / Services / Contact (2026 redesign)
   Shared navy "page hero", light content, gold-glass accents
   ========================================================= */

/* ── Shared page hero ─────────────────────────────────── */
.page-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding: clamp(132px, 18vh, 200px) 0 clamp(56px, 9vh, 96px);
    color: #fff;
    background:
        radial-gradient(120% 90% at 82% 0%, #123a63 0%, transparent 55%),
        linear-gradient(150deg, #0a1a2e 0%, #0c2542 48%, #0f335c 100%);
}
.page-hero__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.page-hero__bg::before,
.page-hero__bg::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.5;
}
.page-hero__bg::before {
    width: 40vw; height: 40vw; max-width: 560px; max-height: 560px;
    top: -14%; right: -6%;
    background: radial-gradient(circle, rgba(212,175,55,0.5), transparent 68%);
}
.page-hero__bg::after {
    width: 38vw; height: 38vw; max-width: 520px; max-height: 520px;
    bottom: -20%; left: -8%;
    background: radial-gradient(circle, rgba(42,167,255,0.42), transparent 70%);
}
.page-hero__grid {
    position: absolute; inset: 0; z-index: 0;
    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: 62px 62px;
    -webkit-mask-image: radial-gradient(120% 80% at 50% 10%, #000, transparent 72%);
    mask-image: radial-gradient(120% 80% at 50% 10%, #000, transparent 72%);
    opacity: 0.55;
}
.page-hero__inner {
    position: relative;
    z-index: 2;
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
}
.page-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 16px 8px 13px;
    margin-bottom: 20px;
    border-radius: var(--radius-full);
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.16);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    font-family: var(--font-heading);
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.9);
}
.page-hero__eyebrow::before {
    content: '';
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--color-gold);
    box-shadow: 0 0 0 4px rgba(212,175,55,0.22);
}
.page-hero__title {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: clamp(2.3rem, 5.2vw, 4rem);
    line-height: 1.05;
    letter-spacing: -1.5px;
    margin: 0 0 18px;
    color: #fff;
}
.page-hero__title .accent {
    background: linear-gradient(120deg, var(--color-gold), #f6e7b0 45%, var(--color-gold));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
.page-hero__subtitle {
    font-size: clamp(1rem, 1.4vw, 1.18rem);
    line-height: 1.7;
    color: rgba(255,255,255,0.72);
    max-width: 620px;
    margin: 0 auto 22px;
}
.page-hero__crumbs {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.55);
}
.page-hero__crumbs a { color: rgba(255,255,255,0.72); transition: color 0.25s ease; }
.page-hero__crumbs a:hover { color: var(--color-gold); }
.page-hero__crumbs span { color: rgba(255,255,255,0.35); }

/* ── Shared content section scaffolding ───────────────── */
.page-section { padding: clamp(64px, 9vw, 110px) 0; position: relative; }
.page-section--light { background: var(--color-bg); }
.page-section--tint  { background: linear-gradient(180deg, #f4f8fc, #eef4fa); }
.section-eyebrow {
    display: inline-block;
    font-family: var(--font-heading);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--color-primary);
    margin-bottom: 14px;
}
.section-eyebrow--center { display: block; text-align: center; }
.page-heading {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: clamp(1.9rem, 3.6vw, 2.9rem);
    line-height: 1.12;
    letter-spacing: -1px;
    color: var(--color-dark);
    margin: 0 0 16px;
}
.page-heading .accent { color: var(--color-primary); }
.page-lead {
    font-size: 1.05rem;
    line-height: 1.75;
    color: var(--color-text-muted);
}
.section-head-center { max-width: 680px; margin: 0 auto clamp(40px, 5vw, 64px); text-align: center; }

/* ── About: story ─────────────────────────────────────── */
.about-story__grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: clamp(32px, 5vw, 72px);
    align-items: center;
}
.about-story__media { position: relative; }
.about-story__img {
    width: 100%;
    height: 100%;
    max-height: 520px;
    object-fit: cover;
    border-radius: var(--radius-lg);
    box-shadow: 0 30px 60px rgba(4,12,26,0.18);
}
.about-story__badge {
    position: absolute;
    left: -18px; bottom: -18px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 22px;
    border-radius: var(--radius-md);
    background: linear-gradient(120deg, var(--color-primary), var(--color-primary-light));
    color: #fff;
    box-shadow: 0 20px 44px rgba(15,76,129,0.32);
}
.about-story__badge .num { font-family: var(--font-heading); font-weight: 800; font-size: 2rem; line-height: 1; }
.about-story__badge .lbl { font-size: 0.82rem; line-height: 1.3; color: rgba(255,255,255,0.85); }
.about-story__list { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 14px; }
.about-story__list li { display: flex; align-items: flex-start; gap: 12px; color: var(--color-text); font-size: 0.98rem; }
.about-story__list svg { flex-shrink: 0; width: 22px; height: 22px; color: var(--color-primary); margin-top: 1px; }

/* ── About/stats band (navy) ──────────────────────────── */
.stats-band {
    position: relative;
    overflow: hidden;
    padding: clamp(48px, 6vw, 80px) 0;
    color: #fff;
    background:
        radial-gradient(100% 120% at 100% 0%, rgba(212,175,55,0.14), transparent 45%),
        linear-gradient(150deg, #0b2340 0%, #081726 100%);
}
.stats-band__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(16px, 2.5vw, 28px);
}
.stat-tile {
    text-align: center;
    padding: 28px 18px;
    border-radius: var(--radius-md);
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.12);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.stat-tile__num {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: clamp(2rem, 3.4vw, 2.8rem);
    line-height: 1;
    background: linear-gradient(120deg, var(--color-gold), #f6e7b0);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
.stat-tile__label { margin-top: 8px; font-size: 0.9rem; color: rgba(255,255,255,0.72); }

/* ── Feature cards (values / why) ─────────────────────── */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: clamp(18px, 2.4vw, 28px);
}
.feature-card {
    padding: 32px 28px;
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    box-shadow: 0 10px 30px rgba(4,12,26,0.05);
    transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), box-shadow 0.3s ease, border-color 0.3s ease;
}
.feature-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 50px rgba(15,76,129,0.12);
    border-color: rgba(15,76,129,0.2);
}
.feature-card__icon {
    width: 54px; height: 54px;
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 18px;
    color: var(--color-primary);
    background: rgba(15,76,129,0.08);
}
.feature-card__icon svg { width: 26px; height: 26px; }
.feature-card h3 { font-family: var(--font-heading); font-size: 1.2rem; color: var(--color-dark); margin: 0 0 10px; }
.feature-card p { font-size: 0.95rem; line-height: 1.65; color: var(--color-text-muted); margin: 0; }

/* ── Services grid ────────────────────────────────────── */
.svc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: clamp(20px, 2.6vw, 30px);
}
.svc-card {
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(4,12,26,0.05);
    transition: transform 0.35s cubic-bezier(0.16,1,0.3,1), box-shadow 0.35s ease, border-color 0.3s ease;
}
.svc-card:hover { transform: translateY(-8px); box-shadow: 0 28px 56px rgba(15,76,129,0.14); border-color: rgba(15,76,129,0.18); }
.svc-card--wide { grid-column: span 2; }
.svc-card__media { position: relative; overflow: hidden; aspect-ratio: 16 / 10; }
.svc-card--wide .svc-card__media { aspect-ratio: 21 / 10; }
.svc-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.16,1,0.3,1); }
.svc-card:hover .svc-card__media img { transform: scale(1.06); }
.svc-card__media::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(8,20,38,0.55));
}
.svc-card__icon {
    position: absolute; z-index: 2; left: 18px; bottom: 18px;
    width: 46px; height: 46px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    color: #23180a;
    background: linear-gradient(120deg, var(--color-gold), #e9cf7e);
    box-shadow: 0 8px 20px rgba(212,175,55,0.35);
}
.svc-card__icon svg { width: 24px; height: 24px; }
.svc-card__body { padding: 24px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.svc-card__body h3 { font-family: var(--font-heading); font-size: 1.25rem; color: var(--color-dark); margin: 0 0 10px; }
.svc-card__body p { font-size: 0.95rem; line-height: 1.65; color: var(--color-text-muted); margin: 0 0 18px; }
.svc-card__link {
    margin-top: auto;
    display: inline-flex; align-items: center; gap: 7px;
    font-family: var(--font-heading); font-weight: 700; font-size: 0.9rem;
    color: var(--color-primary);
    transition: gap 0.25s ease, color 0.25s ease;
}
.svc-card__link svg { width: 17px; height: 17px; }
.svc-card__link:hover { gap: 11px; color: var(--color-accent); }

/* ── Process steps ────────────────────────────────────── */
.process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(18px, 2.4vw, 30px);
    counter-reset: step;
}
.process-step { position: relative; padding: 30px 24px; border-radius: var(--radius-lg); background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); }
.process-step__num {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.05rem;
    width: 46px; height: 46px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    color: #23180a;
    background: linear-gradient(120deg, var(--color-gold), #e9cf7e);
    margin-bottom: 18px;
}
.process-step h3 { font-family: var(--font-heading); font-size: 1.15rem; color: #fff; margin: 0 0 8px; }
.process-step p { font-size: 0.92rem; line-height: 1.6; color: rgba(255,255,255,0.68); margin: 0; }

/* ── Shared CTA band ──────────────────────────────────── */
.page-cta { padding: clamp(56px, 7vw, 100px) 0; background: var(--color-bg); }
.page-cta__card {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    text-align: center;
    padding: clamp(40px, 6vw, 76px) clamp(24px, 5vw, 64px);
    border-radius: var(--radius-xl);
    color: #fff;
    background:
        radial-gradient(90% 140% at 85% 0%, rgba(212,175,55,0.22), transparent 50%),
        linear-gradient(140deg, #0b2340 0%, #0f335c 100%);
    box-shadow: 0 30px 70px rgba(11,35,64,0.35);
}
.page-cta__card::before {
    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: 54px 54px;
    -webkit-mask-image: radial-gradient(100% 100% at 50% 0%, #000, transparent 70%);
    mask-image: radial-gradient(100% 100% at 50% 0%, #000, transparent 70%);
}
.page-cta__title { font-family: var(--font-heading); font-weight: 800; font-size: clamp(1.8rem, 3.6vw, 2.8rem); letter-spacing: -1px; margin: 0 0 14px; color: #fff; }
.page-cta__title .accent {
    background: linear-gradient(120deg, var(--color-gold), #f6e7b0);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.page-cta__sub { font-size: 1.05rem; line-height: 1.7; color: rgba(255,255,255,0.75); max-width: 560px; margin: 0 auto 30px; }
.page-cta__actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* Buttons (gold + ghost) reused on inner pages */
.btn-gold {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    padding: 15px 32px;
    border-radius: var(--radius-full);
    border: 1.5px solid transparent;
    font-family: var(--font-heading); font-weight: 700; font-size: 1rem;
    cursor: pointer; text-decoration: none;
    color: #23180a;
    background: linear-gradient(120deg, var(--color-gold), #e9cf7e);
    box-shadow: 0 12px 30px rgba(212,175,55,0.30);
    transition: transform 0.25s cubic-bezier(0.16,1,0.3,1), box-shadow 0.3s ease;
}
.btn-gold svg { width: 19px; height: 19px; transition: transform 0.25s ease; }
.btn-gold:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(212,175,55,0.42); color: #23180a; }
.btn-gold:hover svg { transform: translateX(4px); }
.btn-ghost-light {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    padding: 15px 30px;
    border-radius: var(--radius-full);
    border: 1.5px solid rgba(255,255,255,0.3);
    background: rgba(255,255,255,0.06);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    color: #fff;
    font-family: var(--font-heading); font-weight: 700; font-size: 1rem;
    text-decoration: none;
    transition: background 0.3s ease, border-color 0.3s ease, transform 0.25s ease;
}
.btn-ghost-light:hover { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.5); transform: translateY(-3px); color: #fff; }

/* ── Contact page ─────────────────────────────────────── */
.ct-layout {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: clamp(28px, 4vw, 56px);
    align-items: start;
}
.ct-info { display: flex; flex-direction: column; gap: 16px; }
.ct-info__card {
    display: flex;
    gap: 16px;
    padding: 22px;
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    box-shadow: 0 8px 24px rgba(4,12,26,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.ct-info__card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(15,76,129,0.10); }
.ct-info__icon {
    flex-shrink: 0;
    width: 48px; height: 48px;
    border-radius: 13px;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
}
.ct-info__icon svg { width: 22px; height: 22px; }
.ct-info__card h3 { font-family: var(--font-heading); font-size: 1.05rem; color: var(--color-dark); margin: 0 0 6px; }
.ct-info__card p, .ct-info__card a { font-size: 0.94rem; line-height: 1.55; color: var(--color-text-muted); margin: 0; }
.ct-info__card a { display: inline-block; transition: color 0.25s ease; }
.ct-info__card a:hover { color: var(--color-primary); }
.ct-info__card.is-accent { background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)); border-color: transparent; }
.ct-info__card.is-accent h3, .ct-info__card.is-accent p { color: #fff; }
.ct-info__card.is-accent .ct-info__icon { background: rgba(255,255,255,0.16); }
.ct-info__card.is-accent a { color: var(--color-gold); font-family: var(--font-heading); font-weight: 700; font-size: 1.15rem; }

.ct-form {
    padding: clamp(26px, 3vw, 40px);
    border-radius: var(--radius-xl);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    box-shadow: 0 20px 50px rgba(4,12,26,0.08);
}
.ct-form__head { margin-bottom: 26px; }
.ct-form__head h2 { font-family: var(--font-heading); font-weight: 800; font-size: clamp(1.5rem, 2.6vw, 2rem); color: var(--color-dark); margin: 0 0 8px; letter-spacing: -0.5px; }
.ct-form__head p { color: var(--color-text-muted); margin: 0; }

.ct-map { line-height: 0; }
.ct-map iframe { width: 100%; height: clamp(320px, 42vw, 460px); border: 0; display: block; filter: grayscale(0.2) contrast(1.05); }

/* ── Responsive ───────────────────────────────────────── */
@media (max-width: 992px) {
    .about-story__grid { grid-template-columns: 1fr; }
    .about-story__media { order: -1; }
    .stats-band__grid { grid-template-columns: repeat(2, 1fr); }
    .process-grid { grid-template-columns: repeat(2, 1fr); }
    .svc-card--wide { grid-column: span 1; }
    .svc-card--wide .svc-card__media { aspect-ratio: 16 / 10; }
    .ct-layout { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .stats-band__grid { grid-template-columns: 1fr 1fr; gap: 12px; }
    .process-grid { grid-template-columns: 1fr; }
    .about-story__badge { left: 0; right: 0; margin: 0 auto; width: max-content; }
    .page-cta__actions .btn-gold,
    .page-cta__actions .btn-ghost-light { width: 100%; }
}