/* ==========================================================================
   Car Doctor On Call — Enterprise Flagship Stylesheet
   Standard Enterprise Flagship · CF: cardoctoroncall@gmail.com
   Design System: Zenith Aura Dynamic Backlit Architecture (Automotive)
   Features: Dual-Engine Dark & Light Modes + 3 Dynamic Brand Palettes
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600;700&family=Outfit:wght@400;500;600;700;800;900&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

/* ==========================================================================
   1. Brand Palette Tokens (Decoupled Accents)
   ========================================================================== */
:root,
[data-theme="flare"] {
    --theme-name: "High-Octane Flare";
    --primary: #FF6B00;
    --primary-rgb: 255, 107, 0;
    --primary-dark: #D45500;
    --primary-light: #FF8F3D;
    --primary-gradient: linear-gradient(135deg, #FF6B00 0%, #FF3D00 100%);
    
    --secondary: #EF4444;
    --secondary-rgb: 239, 68, 68;
    --secondary-dark: #DC2626;
    --secondary-light: #F87171;
    --secondary-gradient: linear-gradient(135deg, #EF4444 0%, #B91C1C 100%);
    
    --tech-cyan: #06B6D4;
    --tech-cyan-rgb: 6, 182, 212;
    --warning: #F59E0B;
    --success: #10B981;
    --success-rgb: 16, 185, 129;
}

[data-theme="cobalt"] {
    --theme-name: "Diagnostic Cobalt";
    --primary: #2563EB;
    --primary-rgb: 37, 99, 235;
    --primary-dark: #1D4ED8;
    --primary-light: #60A5FA;
    --primary-gradient: linear-gradient(135deg, #2563EB 0%, #06B6D4 100%);
    
    --secondary: #F59E0B;
    --secondary-rgb: 245, 158, 11;
    --secondary-dark: #D97706;
    --secondary-light: #FBBF24;
    --secondary-gradient: linear-gradient(135deg, #F59E0B 0%, #EA580C 100%);
    
    --tech-cyan: #38BDF8;
    --tech-cyan-rgb: 56, 189, 248;
    --warning: #F59E0B;
    --success: #10B981;
    --success-rgb: 16, 185, 129;
}

[data-theme="turbo"] {
    --theme-name: "Turbo Crimson";
    --primary: #DC2626;
    --primary-rgb: 220, 38, 38;
    --primary-dark: #991B1B;
    --primary-light: #F87171;
    --primary-gradient: linear-gradient(135deg, #DC2626 0%, #F59E0B 100%);
    
    --secondary: #475569;
    --secondary-rgb: 71, 85, 105;
    --secondary-dark: #334155;
    --secondary-light: #94A3B8;
    --secondary-gradient: linear-gradient(135deg, #475569 0%, #1E293B 100%);
    
    --tech-cyan: #38BDF8;
    --tech-cyan-rgb: 56, 189, 248;
    --warning: #FACC15;
    --success: #10B981;
    --success-rgb: 16, 185, 129;
}

/* ==========================================================================
   2. Dark & Light Mode Surface Architecture
   ========================================================================== */

/* DARK MODE (Default — Carbon Obsidian) */
:root,
[data-mode="dark"] {
    --mode-name: "Dark";
    --bg-base: #07090E;
    --bg-surface: #0E131F;
    --bg-surface-elevated: #161D2E;
    --bg-glass: rgba(14, 19, 31, 0.88);
    --border-subtle: rgba(255, 255, 255, 0.14);
    --border-card: rgba(var(--primary-rgb), 0.45);
    --border-glow: rgba(var(--primary-rgb), 0.70);
    
    --card-shadow: 0 10px 32px rgba(0, 0, 0, 0.65), 0 0 20px rgba(var(--primary-rgb), 0.22), inset 0 1px 1px rgba(255, 255, 255, 0.14);
    
    --text-primary: #FFFFFF;
    --text-secondary: #94A3B8;
    --text-muted: #64748B;
    --text-inverse: #07090E;
    
    --topbar-bg: linear-gradient(90deg, #111827 0%, #1F2937 50%, #111827 100%);
    --header-bg: rgba(7, 9, 14, 0.88);
    
    --dispatch-card-bg: rgba(14, 19, 31, 0.88);
    --dispatch-input-bg: #161D2E;
    --dispatch-input-border: rgba(var(--primary-rgb), 0.35);
    --dispatch-input-color: #FFFFFF;
    
    --metric-card-bg: linear-gradient(135deg, rgba(20, 28, 48, 0.85) 0%, rgba(11, 18, 32, 0.94) 100%);
    --feature-text-color: #CBD5E1;
    --price-text-color: #FFFFFF;
    
    --glow-primary: 0 0 35px rgba(var(--primary-rgb), 0.40);
    --glow-secondary: 0 0 35px rgba(var(--secondary-rgb), 0.35);
    --glow-card-hover: 0 16px 42px rgba(0, 0, 0, 0.85), 0 0 28px rgba(var(--primary-rgb), 0.40), inset 0 1px 1px rgba(255, 255, 255, 0.25);
    
    --footer-bg: #04060A;
    --footer-border: rgba(var(--primary-rgb), 0.35);
    --hero-glow-opacity: 0.18;
}

/* LIGHT MODE (Daytime High-Precision Slate & Pure White) */
[data-mode="light"] {
    --mode-name: "Light";
    --bg-base: #F8FAFC;
    --bg-surface: #FFFFFF;
    --bg-surface-elevated: #F1F5F9;
    --bg-glass: rgba(255, 255, 255, 0.96);
    --border-subtle: #CBD5E1;
    --border-card: rgba(var(--primary-rgb), 0.75);
    --border-glow: rgba(var(--primary-rgb), 0.90);
    
    --card-shadow: 0 6px 20px rgba(15, 23, 42, 0.08), 0 0 16px rgba(var(--primary-rgb), 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.95);
    
    --text-primary: #0F172A;
    --text-secondary: #475569;
    --text-muted: #64748B;
    --text-inverse: #FFFFFF;
    
    --topbar-bg: linear-gradient(90deg, #0F172A 0%, #1E293B 50%, #0F172A 100%);
    --header-bg: rgba(255, 255, 255, 0.95);
    
    --dispatch-card-bg: rgba(255, 255, 255, 0.98);
    --dispatch-input-bg: #F8FAFC;
    --dispatch-input-border: rgba(var(--primary-rgb), 0.40);
    --dispatch-input-color: #0F172A;
    
    --metric-card-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.95) 100%);
    --feature-text-color: #334155;
    --price-text-color: #0F172A;
    
    --glow-primary: 0 10px 30px rgba(var(--primary-rgb), 0.22);
    --glow-secondary: 0 10px 30px rgba(var(--secondary-rgb), 0.20);
    --glow-card-hover: 0 14px 32px rgba(15, 23, 42, 0.14), 0 0 24px rgba(var(--primary-rgb), 0.30), inset 0 1px 0 #FFFFFF;
    
    --footer-bg: #0B0F19;
    --footer-border: rgba(var(--primary-rgb), 0.35);
    --hero-glow-opacity: 0.08;
}

/* ==========================================================================
   3. Typography & Layout Constants
   ========================================================================== */
:root {
    --font-heading: 'Outfit', sans-serif;
    --font-body: 'Plus Jakarta Sans', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
    
    /* Digital Cockpit Automotive Typography */
    --font-hud-display: 'Orbitron', 'Michroma', sans-serif;
    --font-hud-telemetry: 'Rajdhani', 'JetBrains Mono', sans-serif;
    --font-hud-numbers: 'Orbitron', sans-serif;
    --font-hud-capsule: 'Exo 2', 'Plus Jakarta Sans', sans-serif;
    
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-xl: 26px;
    --radius-full: 9999px;
    
    --transition-fast: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-smooth: 0.32s cubic-bezier(0.16, 1, 0.3, 1);
    --transition-theme: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
    
    --container-max: 1520px;
}

/* ==========================================================================
   4. Global Resets & Base Styles
   ========================================================================== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
    background-color: var(--bg-base);
    color: var(--text-primary);
    transition: var(--transition-theme);
}

body {
    font-family: var(--font-body);
    line-height: 1.6;
    background-color: var(--bg-base);
    color: var(--text-primary);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    transition: var(--transition-theme);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--text-primary);
    line-height: 1.2;
    letter-spacing: -0.02em;
    transition: color 0.3s ease;
}

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

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    outline: none;
    transition: var(--transition-smooth);
}

.container {
    max-width: var(--container-max);
    width: 100%;
    margin: 0 auto;
    padding: 0 2rem;
}

/* Responsive Label Utilities (§ZA-4 Adaptive Engine) */
.mobile-only {
    display: none !important;
}
.desktop-only {
    display: inline !important;
}
div.desktop-only {
    display: block !important;
}

/* ==========================================================================
   5. Zenith Aura Glassmorphism & Cards
   ========================================================================== */
.glass-panel {
    background: var(--bg-glass);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1.5px solid var(--border-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--card-shadow);
    transition: var(--transition-theme), transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.glass-panel:hover {
    border-color: var(--primary);
    box-shadow: var(--glow-card-hover);
    transform: translateY(-4px);
}

.gradient-text {
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

/* ==========================================================================
   6. Top Emergency Status Marquee
   ========================================================================== */
.emergency-topbar {
    background: var(--topbar-bg);
    border-bottom: 1px solid var(--border-subtle);
    font-size: 0.85rem;
    padding: 0.55rem 0;
    position: relative;
    z-index: 100;
    transition: var(--transition-theme);
}

.emergency-topbar-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    gap: 1rem;
    width: 100%;
    min-width: 0;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 0.8rem;
    color: #E2E8F0;
    white-space: nowrap;
    flex-shrink: 0;
    min-width: auto;
}

.status-indicator-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background-color: var(--success);
    box-shadow: 0 0 12px var(--success);
    animation: pulse-dot 2s infinite ease-in-out;
    flex-shrink: 0;
}

@keyframes pulse-dot {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.35); opacity: 0.7; }
}

.topbar-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    margin-left: auto;
    gap: 1rem;
    white-space: nowrap;
    flex-shrink: 0;
    text-align: right;
}

.topbar-cloud-engine {
    color: var(--text-muted);
    font-size: 0.8rem;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    line-height: 1;
}

.topbar-cloud-engine strong {
    color: #E2E8F0;
}

.topbar-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    min-width: 15px;
    min-height: 15px;
    max-width: 15px;
    max-height: 15px;
    line-height: 1;
    flex-shrink: 0;
    vertical-align: middle;
}

.topbar-icon-svg {
    width: 15px;
    height: 15px;
    min-width: 15px;
    min-height: 15px;
    max-width: 15px;
    max-height: 15px;
    display: block;
    stroke: currentColor;
    flex-shrink: 0;
}

.emergency-call-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: var(--primary-gradient);
    color: #FFFFFF;
    font-weight: 800;
    font-size: 0.82rem;
    padding: 0.42rem 0.95rem;
    border-radius: var(--radius-sm); /* Removed pill; modern subtle curve */
    box-shadow: 0 2px 12px rgba(var(--primary-rgb), 0.4);
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    letter-spacing: 0.02em;
    line-height: 1;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.emergency-call-chip:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 18px rgba(var(--primary-rgb), 0.6);
}

/* ==========================================================================
   7. Navigation Header & Single-Row Architecture
   ========================================================================== */
.main-header {
    position: relative;
    top: auto;
    z-index: 99;
    background: var(--header-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border-subtle);
    padding: 0.75rem 0;
    transition: var(--transition-theme);
    width: 100%;
}

/* Ensure smooth section navigation with sticky header offset */
section[id] {
    scroll-margin-top: clamp(70px, 9vh, 90px);
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.85rem;
    width: 100%;
    min-width: 0;
}

/* 1-Row Text Logo */
.brand-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
}

.brand-logo-img {
    width: 44px;
    height: 44px;
    min-width: 44px;
    max-width: 44px;
    object-fit: contain;
    filter: drop-shadow(0 2px 8px rgba(255, 107, 0, 0.40));
    transition: transform 0.25s ease, filter 0.25s ease;
    flex-shrink: 0;
}

.brand-logo:hover .brand-logo-img {
    transform: scale(1.06);
    filter: drop-shadow(0 4px 16px rgba(255, 107, 0, 0.70));
}

.footer-brand-logo-img {
    width: 42px;
    height: 42px;
    min-width: 42px;
    max-width: 42px;
}

.brand-icon-shield {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-md);
    background: var(--primary-gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    box-shadow: 0 0 16px rgba(var(--primary-rgb), 0.45);
    flex-shrink: 0;
}

.brand-title-wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    white-space: nowrap;
    flex-shrink: 0;
}

.brand-name {
    font-size: 1.25rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 1.15;
    transition: color 0.3s ease;
}

.brand-name span {
    color: var(--primary);
    white-space: nowrap;
}

.brand-tagline {
    font-size: 0.64rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    white-space: nowrap;
    line-height: 1.2;
    margin-top: 1px;
}

/* 1-Row Menu Navigation */
.nav-wrapper {
    display: flex;
    align-items: center;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ==========================================================================
   Re-imagined Floating HUD Glass Navigation Island (Center Deck)
   ========================================================================== */
.nav-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    flex: 1;
    max-width: 660px;
    margin: 0 auto;
}

.nav-hud-island {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    list-style: none;
    margin: 0;
    padding: 0.28rem 0.35rem;
    white-space: nowrap;
    border-radius: var(--radius-full);
    background: linear-gradient(180deg, rgba(14, 20, 36, 0.75) 0%, rgba(9, 13, 24, 0.90) 100%);
    border: 1.2px solid rgba(255, 120, 0, 0.35);
    box-shadow: 
        inset 0 1px 1px rgba(255, 255, 255, 0.18),
        inset 0 0 16px rgba(255, 107, 0, 0.08),
        0 6px 20px rgba(0, 0, 0, 0.40);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-sizing: border-box;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

[data-mode="light"] .nav-hud-island {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(241, 245, 249, 0.98) 100%);
    border: 1.2px solid rgba(255, 107, 0, 0.30);
    box-shadow: 
        inset 0 1px 1px rgba(255, 255, 255, 1),
        0 4px 18px rgba(0, 0, 0, 0.08);
}

.nav-hud-island li {
    list-style: none;
    margin: 0;
    padding: 0;
    white-space: nowrap;
    flex-shrink: 0;
}

.nav-hud-island .nav-link {
    font-size: 0.84rem;
    font-weight: 700;
    color: #CBD5E1;
    position: relative;
    padding: 0.44rem 0.95rem;
    border-radius: var(--radius-full);
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    text-decoration: none;
    border: 1px solid transparent;
    line-height: 1.15;
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-mode="light"] .nav-hud-island .nav-link {
    color: #475569;
}

/* Hover State: Glass Phosphor Bloom */
.nav-hud-island .nav-link:hover {
    color: #FFFFFF !important;
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-1px);
}

[data-mode="light"] .nav-hud-island .nav-link:hover {
    color: #0F172A !important;
    background: rgba(255, 107, 0, 0.08);
    border-color: rgba(255, 107, 0, 0.22);
}

/* Active State: Sculpted In-Dash Glowing Amber Pill */
.nav-hud-island .nav-link.active {
    background: linear-gradient(135deg, rgba(255, 107, 0, 0.22) 0%, rgba(255, 140, 0, 0.12) 100%) !important;
    color: #FF7700 !important;
    border: 1px solid rgba(255, 120, 0, 0.50) !important;
    box-shadow: 
        inset 0 1px 1px rgba(255, 255, 255, 0.25),
        0 0 14px rgba(255, 107, 0, 0.32) !important;
    text-shadow: 0 0 8px rgba(255, 119, 0, 0.6);
}

.nav-hud-island .nav-link.active::after {
    display: none !important;
}

/* Live Radar Pulse Dot on Emergency Dispatch */
.nav-radar-beacon {
    position: relative;
    width: 8px;
    height: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.nav-radar-beacon .radar-core {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #00F0FF;
    box-shadow: 0 0 8px #00F0FF;
}

.nav-radar-beacon .radar-ping {
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 1.5px solid #00F0FF;
    animation: radar-ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

/* ==========================================================================
   Header Right Actions Cluster (Clean & Balanced)
   ========================================================================== */
.header-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Fleet Readiness Chip */
.header-fleet-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.42rem 0.85rem;
    border-radius: var(--radius-full);
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.35);
    color: #10B981;
    font-family: var(--font-hud-telemetry);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    cursor: default;
    user-select: none;
}

.header-fleet-chip .fleet-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #10B981;
    box-shadow: 0 0 8px #10B981;
    animation: radar-ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

[data-mode="light"] .header-fleet-chip {
    background: rgba(16, 185, 129, 0.10);
    border-color: rgba(16, 185, 129, 0.40);
    color: #059669;
}

/* Luxury Circular HUD Mode Toggle */
.mode-toggle-btn {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    border-radius: 50%;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: linear-gradient(135deg, rgba(17, 24, 39, 0.85) 0%, rgba(10, 15, 28, 0.95) 100%);
    border: 1.5px solid rgba(255, 120, 0, 0.32);
    color: var(--text-primary);
    cursor: pointer;
    box-shadow: 
        inset 0 1px 1px rgba(255, 255, 255, 0.18),
        0 4px 14px rgba(0, 0, 0, 0.35);
    transition: var(--transition-fast);
}

[data-mode="light"] .mode-toggle-btn {
    background: linear-gradient(135deg, #FFFFFF 0%, #F1F5F9 100%);
    border: 1.5px solid rgba(255, 107, 0, 0.30);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
}

.mode-toggle-btn:hover {
    border-color: var(--primary);
    transform: translateY(-1px) rotate(15deg);
    box-shadow: 0 0 16px rgba(var(--primary-rgb), 0.45);
}

.mode-icon-glyph {
    font-size: 1.05rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#mode-toggle-text {
    display: none !important;
}

/* Mobile Hamburger Menu Toggle Button (Sculpted HUD Bezel) */
.mobile-menu-toggle {
    display: none;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(17, 24, 39, 0.90) 0%, rgba(10, 15, 28, 0.98) 100%);
    border: 1.5px solid rgba(255, 120, 0, 0.38);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4.5px;
    padding: 0;
    cursor: pointer;
    box-sizing: border-box;
    box-shadow: 
        inset 0 1px 1px rgba(255, 255, 255, 0.18),
        0 4px 14px rgba(0, 0, 0, 0.40);
    transition: var(--transition-fast);
}

.mobile-menu-toggle .hamburger-bar {
    display: block;
    width: 20px;
    height: 2.5px;
    background: #FFFFFF;
    border-radius: 3px;
    transition: all 0.25s ease;
    flex-shrink: 0;
}

.mobile-menu-toggle:hover {
    border-color: var(--primary);
    box-shadow: 0 0 16px rgba(var(--primary-rgb), 0.45);
}

.mobile-menu-toggle.active .hamburger-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
    background: var(--primary);
}
.mobile-menu-toggle.active .hamburger-bar:nth-child(2) {
    opacity: 0;
}
.mobile-menu-toggle.active .hamburger-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
    background: var(--primary);
}

[data-mode="light"] .mobile-menu-toggle {
    background: linear-gradient(135deg, #FFFFFF 0%, #F1F5F9 100%);
    border: 1.5px solid rgba(255, 107, 0, 0.35);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
}

[data-mode="light"] .mobile-menu-toggle .hamburger-bar {
    background: #0F172A;
}

[data-mode="light"] .mobile-menu-toggle.active .hamburger-bar {
    background: var(--primary);
}

/* ==========================================================================
   7A. Left Drawer (Color Palette Studio & Dark/Light Engine)
   ========================================================================== */
.drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 100000 !important;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0.35s ease;
}

.drawer-overlay.active {
    opacity: 1;
    visibility: visible;
}

.palette-drawer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 420px;
    max-width: 88vw;
    height: 100vh;
    background: var(--bg-surface);
    border-right: 1px solid var(--border-subtle);
    box-shadow: 15px 0 50px rgba(0, 0, 0, 0.5);
    z-index: 100001 !important;
    transform: translateX(-100%);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.35s ease, border-color 0.35s ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.palette-drawer.active {
    transform: translateX(0);
}

.drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: max(1.25rem, env(safe-area-inset-top, 1.25rem)) 1.5rem 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border-subtle);
    background: var(--bg-surface-elevated);
    flex-shrink: 0;
    position: relative;
    z-index: 10;
}

.drawer-header-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.drawer-brand-icon {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-sm);
    background: rgba(var(--primary-rgb), 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    box-shadow: 0 0 14px rgba(var(--primary-rgb), 0.25);
}

.drawer-title {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.2;
}

.drawer-subtitle {
    font-size: 0.84rem;
    color: var(--text-secondary);
    margin: 0;
}

.btn-drawer-close {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.45rem;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-fast);
}

.btn-drawer-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
    transform: rotate(90deg);
}

.drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}

.drawer-body::-webkit-scrollbar {
    width: 5px;
}

.drawer-body::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 4px;
}

.drawer-section {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.drawer-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.drawer-section-badge {
    font-size: 0.74rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--primary);
    background: rgba(var(--primary-rgb), 0.12);
    padding: 0.25rem 0.65rem;
    border-radius: var(--radius-full);
}

.drawer-section-title {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text-primary);
}

/* Surface Mode Selector Grid */
.mode-selector-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.mode-card {
    background: var(--bg-surface-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 1rem 0.85rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
    cursor: pointer;
    text-align: left;
    position: relative;
    transition: var(--transition-fast);
}

.mode-card:hover {
    border-color: var(--border-glow);
    transform: translateY(-2px);
}

.mode-card.active {
    border-color: var(--primary);
    background: rgba(var(--primary-rgb), 0.08);
    box-shadow: 0 4px 16px rgba(var(--primary-rgb), 0.2);
}

.mode-card-radio {
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid var(--text-muted);
    transition: var(--transition-fast);
}

.mode-card.active .mode-card-radio {
    border-color: var(--primary);
    background: var(--primary);
    box-shadow: inset 0 0 0 2px var(--bg-surface);
}

.mode-card-icon {
    font-size: 1.4rem;
    margin-bottom: 0.2rem;
}

.mode-card-title {
    font-size: 0.96rem;
    font-weight: 800;
    color: var(--text-primary);
    display: block;
}

.mode-card-desc {
    font-size: 0.80rem;
    color: var(--text-secondary);
    line-height: 1.35;
    display: block;
}

/* Dynamic Brand Palette Cards */
.palette-card-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.palette-theme-card {
    background: var(--bg-surface-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    cursor: pointer;
    text-align: left;
    transition: var(--transition-fast);
}

.palette-theme-card:hover {
    border-color: var(--border-glow);
    transform: translateX(3px);
}

.palette-theme-card.active {
    border-color: var(--primary);
    background: rgba(var(--primary-rgb), 0.08);
    box-shadow: 0 4px 18px rgba(var(--primary-rgb), 0.22);
}

.theme-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.theme-swatch-pills {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.swatch-pill {
    width: 22px;
    height: 12px;
    border-radius: var(--radius-full);
    display: inline-block;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}

.theme-active-tag {
    font-size: 0.76rem;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--text-muted);
}

.palette-theme-card.active .theme-active-tag {
    color: var(--primary);
    font-weight: 900;
}

.theme-card-name {
    font-size: 1.02rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 0.2rem;
}

.theme-card-badge {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 0.35rem;
}

.theme-card-desc {
    font-size: 0.84rem;
    color: var(--text-secondary);
    line-height: 1.45;
    margin: 0;
}

/* Active Token Telemetry Grid */
.drawer-token-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
}

.drawer-token-chip {
    background: var(--bg-surface-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: 0.6rem 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.token-chip-indicator {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
}

.token-chip-label {
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-muted);
    display: block;
}

.token-chip-val {
    font-family: var(--font-mono);
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--text-primary);
    display: block;
}

/* Flagship Drawer Card */
.flagship-drawer-card {
    background: rgba(var(--primary-rgb), 0.05);
    border: 1px dashed rgba(var(--primary-rgb), 0.3);
    border-radius: var(--radius-md);
    padding: 0.85rem 1rem;
}

.flagship-drawer-header {
    font-size: 0.78rem;
    text-transform: uppercase;
    font-weight: 800;
    color: var(--primary);
    margin-bottom: 0.25rem;
}

.flagship-drawer-email {
    font-size: 0.88rem;
    color: var(--text-primary);
    font-weight: 700;
    margin-bottom: 0.2rem;
}

.flagship-drawer-desc {
    font-size: 0.78rem;
    color: var(--text-secondary);
}

/* Drawer Footer */
.drawer-footer {
    padding: 1.25rem 1.5rem;
    border-top: 1px solid var(--border-subtle);
    background: var(--bg-surface-elevated);
    display: flex;
    gap: 0.75rem;
    flex-shrink: 0;
}

.btn-drawer-reset {
    flex: 1;
    background: transparent;
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    font-weight: 800;
    font-size: 0.92rem;
    padding: 0.75rem;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--transition-fast);
}

.btn-drawer-reset:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-primary);
    border-color: var(--border-glow);
}

.btn-drawer-done {
    flex: 1.5;
    background: var(--primary-gradient);
    color: #FFFFFF;
    font-weight: 800;
    font-size: 0.92rem;
    padding: 0.75rem;
    border-radius: var(--radius-md);
    box-shadow: 0 4px 15px rgba(var(--primary-rgb), 0.35);
    cursor: pointer;
    transition: var(--transition-fast);
}

.btn-drawer-done:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(var(--primary-rgb), 0.5);
}

/* Palette Drawer High Contrast Rules for Light Mode */
[data-mode="light"] .drawer-subtitle {
    color: #475569 !important;
}

[data-mode="light"] .mode-card-desc {
    color: #475569 !important;
}

[data-mode="light"] .theme-card-desc {
    color: #334155 !important;
}

[data-mode="light"] .token-chip-label {
    color: #475569 !important;
}

[data-mode="light"] .token-chip-val {
    color: #0F172A !important;
}

[data-mode="light"] .flagship-drawer-desc {
    color: #475569 !important;
}

[data-mode="light"] .btn-drawer-reset {
    color: #334155 !important;
    border-color: #CBD5E1 !important;
}

[data-mode="light"] .btn-drawer-reset:hover {
    background: #F1F5F9 !important;
    color: #0F172A !important;
}

/* Floating Quick Tab on Viewport Left Edge */
.floating-drawer-tab {
    position: fixed;
    left: 0;
    top: 45%;
    transform: translateY(-50%);
    background: var(--bg-surface-elevated);
    border: 1px solid var(--border-glow);
    border-left: none;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    padding: 0.65rem 0.6rem 0.65rem 0.45rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    z-index: 90;
    cursor: pointer;
    box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.3);
    transition: var(--transition-smooth);
}

.floating-drawer-tab:hover {
    background: var(--bg-surface);
    transform: translateY(-50%) translateX(4px);
    box-shadow: 6px 6px 22px rgba(var(--primary-rgb), 0.3);
}

.floating-tab-icon {
    font-size: 1.15rem;
    line-height: 1;
}

.floating-tab-text {
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    color: var(--text-secondary);
}

.floating-drawer-tab:hover .floating-tab-text {
    color: var(--primary);
}

/* ==========================================================================
   7B. Animated Back to Top Button
   ========================================================================== */
.back-to-top-btn {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full);
    background: var(--bg-surface-elevated);
    border: 2px solid var(--border-glow);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 990;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35), var(--glow-primary);
    opacity: 0;
    visibility: hidden;
    transform: translateY(24px) scale(0.9);
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

.back-to-top-btn.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    animation: back-to-top-float 3s infinite ease-in-out;
}

.back-to-top-btn:hover {
    background: var(--primary-gradient);
    color: #FFFFFF;
    border-color: transparent;
    transform: translateY(-5px) scale(1.08);
    box-shadow: 0 12px 30px rgba(var(--primary-rgb), 0.65);
    animation: none;
}

.back-to-top-btn svg {
    transition: transform 0.25s ease;
}

.back-to-top-btn:hover svg {
    transform: translateY(-2px);
}

@keyframes back-to-top-float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-4px);
    }
}

/* ==========================================================================
   8. Cockpit Hero Experience: Electric Sports Car Windshield & Digital Dashboard
   ========================================================================== */

/* Master Cockpit Scene Container (Windshield Live Viewport - 100% Fullscreen on all devices) */
.cockpit-hero-master {
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    min-height: 100vh;
    min-height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    background-color: #07090E;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow: hidden;
    box-sizing: border-box;
}

.cockpit-hero-master > main {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.hero-section {
    position: relative;
    z-index: 10;
    padding: 0;
    width: 100%;
    height: 100%;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Cockpit Stage Wrapper: Centers the Content Stage strictly within viewport */
.cockpit-stage-wrapper {
    width: 100%;
    height: 100%;
    max-width: 1520px;
    margin: 0 auto;
    padding: 0.2rem 0.65rem 0.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    flex: 1;
    min-height: 0;
}

/* Master Cockpit Vessel: Automatically scales to fit viewport height and aspect ratio */
.cockpit-stage {
    position: relative;
    width: min(100%, calc((100dvh - 124px) * (1024 / 572)));
    max-height: calc(100dvh - 124px);
    aspect-ratio: 1024 / 572;
    container-type: inline-size;
    container-name: cockpit-stage;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.9), 0 0 30px rgba(255, 107, 0, 0.15);
    background: #04060A;
}

/* 1. Live Roadside Service Reel (Masked through Windshield) */
.windshield-reel-container {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
}

/* Form Factor Separation: Desktop/Laptop Active by default, iPad/Mobile hidden on desktop */
.windshield-reel-container.windshield-reel-desktop {
    display: block;
}

.windshield-reel-container.windshield-reel-mobile {
    display: none !important;
}

.windshield-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    opacity: 0;
    transition: opacity 1.8s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: opacity;
}

.windshield-slide.active {
    opacity: 1;
}

/* 2. Cockpit Interior Mask: Transparent Windshield in Live Mode, Clean Green Screen in Studio Mode */
.cockpit-mask-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-image: url('../images/cockpit_keyed_out.png?v=content_v10');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 100%;
    pointer-events: none;
    z-index: 2;
    transition: background-image 0.35s ease;
}

/* Option 2: High-Performance Sports Car Cockpit Frame (Driver Cockpit) */
.cockpit-hero-master.frame-sport .cockpit-mask-overlay {
    background-image: url('../images/cockpit_sport_keyed_out.png?v=driver_cockpit_funnel_v6');
}

/* Sports Car Dashboard: Image 4 Layout Blueprint (Decoupled OLED Dispatch + Center Console Telemetry) */
.cockpit-hero-master.frame-sport .cockpit-dashboard-screen {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
    transition: none !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 0 !important;
    pointer-events: none !important;
    z-index: 6 !important;
}

.cockpit-hero-master.frame-sport .dashboard-hud-strip {
    display: none !important;
}

.cockpit-hero-master.frame-sport .dashboard-display-grid {
    display: contents !important;
}

/* 1. Upper Windshield Sky Headline: Floating High in Clear Windshield Space */
.cockpit-hero-master.frame-sport .cockpit-lower-deck {
    position: absolute !important;
    top: 6.8% !important;
    bottom: auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: min(860px, 92%) !important;
    text-align: center !important;
    pointer-events: none !important;
    z-index: 7 !important;
}

.cockpit-hero-master.frame-sport .cockpit-lower-deck .hero-pill-badge {
    margin: 0 auto 0.28rem auto !important;
    display: inline-flex !important;
    align-items: center !important;
    background: rgba(10, 15, 26, 0.88) !important;
    border: 1px solid rgba(255, 107, 0, 0.45) !important;
    padding: 0.22rem 0.85rem !important;
    font-size: 0.68rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    color: #FFA34D !important;
    border-radius: 20px !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.75) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

.cockpit-hero-master.frame-sport .cockpit-lower-deck .hero-title {
    font-family: var(--font-heading) !important;
    font-size: clamp(1.15rem, 2.15vw, 1.85rem) !important;
    font-weight: 900 !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    line-height: 1.16 !important;
    margin: 0 0 0.28rem 0 !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.95) !important;
    white-space: nowrap !important;
}

.cockpit-hero-master.frame-sport .cockpit-lower-deck .hero-title .gradient-text,
.cockpit-hero-master.frame-sport .cockpit-lower-deck .hero-title .hero-highlight-text {
    color: var(--primary, #FF6B00) !important;
    -webkit-text-fill-color: var(--primary, #FF6B00) !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    display: inline !important;
    font-weight: 900 !important;
    text-shadow: 0 0 20px rgba(var(--primary-rgb, 255, 107, 0), 0.6), 0 2px 6px rgba(0, 0, 0, 0.95) !important;
}

.cockpit-hero-master.frame-sport .cockpit-lower-deck .hero-subtitle {
    font-family: var(--font-body) !important;
    font-size: clamp(0.72rem, 1.05vw, 0.88rem) !important;
    color: rgba(226, 232, 240, 0.95) !important;
    max-width: 680px !important;
    margin: 0 auto !important;
    line-height: 1.35 !important;
    font-weight: 600 !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9) !important;
}

/* Entrance Animation for Passenger Dispatch Cards: Only Fade In (Delayed 1000ms) */
@keyframes cockpitFadeInOnly {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* 2. Rapid Mission Dispatch Console & Live GPS Radar: Positioned on Passenger OLED Screen (Direction 1 OLED Glass) */
.cockpit-hero-master.frame-sport .dashboard-display-left {
    position: absolute !important;
    top: 57.0% !important; /* Centered cleanly inside horizontal passenger OLED display */
    left: 61.5% !important; /* Calibrated: perfectly balanced margins on left and right inside passenger OLED glass */
    transform: translateX(-50%) perspective(1100px) rotateX(2.2deg) rotateY(-2.8deg) rotateZ(-0.4deg) !important;
    transform-origin: 50% 100% !important;
    transform-style: preserve-3d !important;
    transition: none !important;
    animation: cockpitFadeInOnly 0.45s ease-out 100ms both !important;
    width: min(560px, 44.0cqw) !important; /* Fluid, flexible width utilizing wider displays gracefully */
    max-width: 570px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    gap: clamp(6px, 0.8cqw, 12px) !important;
    pointer-events: auto !important;
    z-index: 6 !important;
    box-sizing: border-box !important;
}

/* Left Column: Dispatch Controls (Location Card + Action Buttons) */
.cockpit-hero-master.frame-sport .dispatch-controls-col {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: clamp(3px, 0.45cqw, 6px) !important;
}

.cockpit-hero-master.frame-sport .dispatch-input-card {
    height: clamp(33px, 4.5cqw, 42px) !important; /* Fluid container-query height */
    min-height: 0 !important;
    padding: 0 clamp(0.60rem, 0.90cqw, 1.00rem) !important;
    width: 100% !important;
    box-sizing: border-box !important;
    background: rgba(10, 15, 26, 0.45) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1.5px solid rgba(0, 240, 255, 0.5) !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: clamp(0.2rem, 0.35cqw, 0.45rem) !important;
    box-shadow: none !important;
    cursor: pointer !important;
}

.cockpit-hero-master.frame-sport .dispatch-input-card > svg:not(.cyber-glove-svg) {
    stroke: #00F0FF !important;
    width: clamp(16px, 2.0cqw, 20px) !important;
    height: clamp(16px, 2.0cqw, 20px) !important;
    flex-shrink: 0 !important;
}

.cockpit-hero-master.frame-sport .dispatch-input-card input {
    font-size: clamp(0.70rem, 1.00cqw, 0.90rem) !important; /* Enhanced readability across viewports */
    font-weight: 700 !important;
    color: #FFFFFF !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    width: 100% !important;
    min-width: 0 !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-shadow: none !important;
    filter: none !important;
    cursor: pointer !important;
}

.cockpit-hero-master.frame-sport .dispatch-input-card input::placeholder {
    color: #E2E8F0 !important;
    opacity: 0.95 !important;
}

.cockpit-hero-master.frame-sport .btn-location-capsule-pin {
    background: rgba(0, 240, 255, 0.15) !important;
    border: 1.5px solid rgba(0, 240, 255, 0.65) !important;
    border-radius: 6px !important;
    padding: 0 clamp(0.40rem, 0.60cqw, 0.70rem) !important;
    height: clamp(24px, 3.2cqw, 30px) !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease !important;
    box-shadow: none !important;
}

.cockpit-hero-master.frame-sport .btn-location-capsule-pin:hover {
    background: rgba(0, 240, 255, 0.30) !important;
    border-color: rgba(0, 240, 255, 1.0) !important;
    transform: scale(1.02) !important;
}

.cockpit-hero-master.frame-sport .btn-location-capsule-pin .pin-capsule-badge {
    color: #00F0FF !important;
    font-size: clamp(0.62rem, 0.88cqw, 0.78rem) !important;
    font-weight: 900 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
}

.cockpit-hero-master.frame-sport .dispatch-btn-row {
    display: flex !important;
    flex-direction: row !important;
    gap: clamp(3px, 0.45cqw, 6px) !important;
    width: 100% !important;
}

.cockpit-hero-master.frame-sport .dispatch-btn-row .btn-dispatch-mechanic {
    flex: 1 1 50% !important;
    min-width: 0 !important;
    height: clamp(32px, 4.3cqw, 40px) !important;
    min-height: 0 !important;
    padding: 0 clamp(0.35rem, 0.55cqw, 0.70rem) !important;
    font-size: clamp(0.68rem, 0.98cqw, 0.92rem) !important;
    font-weight: 900 !important;
    font-style: italic !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    border-radius: 8px !important;
    background: rgba(255, 107, 0, 0.20) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1.5px solid rgba(255, 107, 0, 0.85) !important;
    color: #FFFFFF !important;
    box-shadow: none !important;
    text-shadow: none !important;
    filter: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(2px, 0.3cqw, 5px) !important;
    cursor: pointer !important;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease !important;
}

.cockpit-hero-master.frame-sport .dispatch-btn-row .btn-dispatch-mechanic:hover {
    transform: translateY(-1px) !important;
    background: rgba(255, 107, 0, 0.35) !important;
    border-color: #FF8533 !important;
    box-shadow: none !important;
}

.cockpit-hero-master.frame-sport .dispatch-btn-row .btn-priority-call {
    flex: 1 1 50% !important;
    min-width: 0 !important;
    height: clamp(32px, 4.3cqw, 40px) !important;
    min-height: 0 !important;
    max-height: none !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 clamp(0.35rem, 0.55cqw, 0.70rem) !important;
    font-size: clamp(0.68rem, 0.98cqw, 0.92rem) !important;
    font-weight: 900 !important;
    font-style: italic !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    border-radius: 8px !important;
    background: rgba(225, 29, 72, 0.20) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1.5px solid rgba(244, 63, 94, 0.85) !important;
    color: #FFFFFF !important;
    box-shadow: none !important;
    text-shadow: none !important;
    filter: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(2px, 0.3cqw, 5px) !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease !important;
}

.cockpit-hero-master.frame-sport .dispatch-btn-row .btn-priority-call:hover {
    transform: translateY(-1px) !important;
    background: rgba(225, 29, 72, 0.35) !important;
    border-color: #FB7185 !important;
    box-shadow: none !important;
}

/* Right Column: Live GPS Emergency Radar & Fleet Status Pod */
.cockpit-hero-master.frame-sport .dispatch-radar-pod {
    flex: 0 0 clamp(122px, 12.8cqw, 154px) !important;
    width: clamp(122px, 12.8cqw, 154px) !important;
    height: auto !important;
    box-sizing: border-box !important;
    background: rgba(10, 15, 26, 0.45) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1.5px solid rgba(0, 240, 255, 0.5) !important;
    border-radius: 8px !important;
    padding: clamp(0.32rem, 0.48cqw, 0.54rem) clamp(0.38rem, 0.58cqw, 0.65rem) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    cursor: default !important;
    transition: border-color 0.2s ease, background 0.2s ease !important;
}

.cockpit-hero-master.frame-sport .dispatch-radar-pod:hover {
    border-color: rgba(0, 240, 255, 0.85) !important;
    background: rgba(10, 15, 26, 0.60) !important;
}

.cockpit-hero-master.frame-sport .radar-pod-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.30rem !important;
    line-height: 1 !important;
}

.cockpit-hero-master.frame-sport .radar-ping-indicator {
    position: relative !important;
    width: 8px !important;
    height: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.cockpit-hero-master.frame-sport .radar-ping-dot {
    width: 5px !important;
    height: 5px !important;
    border-radius: 50% !important;
    background: #00F0FF !important;
    z-index: 2 !important;
}

.cockpit-hero-master.frame-sport .radar-ping-wave {
    position: absolute !important;
    inset: -2px !important;
    border-radius: 50% !important;
    border: 1.5px solid #00F0FF !important;
    animation: radarPing 2.2s infinite ease-out !important;
    z-index: 1 !important;
}

.cockpit-hero-master.frame-sport .radar-chip-tag {
    font-size: clamp(0.72rem, 0.95cqw, 0.85rem) !important;
    font-weight: 900 !important;
    letter-spacing: 0.05em !important;
    color: #00F0FF !important;
    text-transform: uppercase !important;
    line-height: 1 !important;
    flex: 1 !important;
    text-shadow: none !important;
    filter: none !important;
}

.cockpit-hero-master.frame-sport .radar-live-badge {
    font-size: clamp(0.60rem, 0.76cqw, 0.70rem) !important;
    font-weight: 800 !important;
    letter-spacing: 0.04em !important;
    color: #FFFFFF !important;
    background: #10B981 !important;
    padding: 2px 4px !important;
    border-radius: 3px !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    text-shadow: none !important;
}

.cockpit-hero-master.frame-sport .radar-pod-stat {
    display: flex !important;
    align-items: baseline !important;
    justify-content: flex-start !important;
    gap: 0.30rem !important;
    line-height: 1 !important;
    margin: 1px 0 !important;
}

.cockpit-hero-master.frame-sport .radar-stat-num {
    font-size: clamp(1.12rem, 1.45cqw, 1.34rem) !important;
    font-weight: 900 !important;
    font-style: italic !important;
    color: #FFFFFF !important;
    letter-spacing: -0.01em !important;
    line-height: 1 !important;
    text-shadow: none !important;
}

.cockpit-hero-master.frame-sport .radar-stat-status {
    font-size: clamp(0.70rem, 0.90cqw, 0.82rem) !important;
    font-weight: 800 !important;
    color: #10B981 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    line-height: 1 !important;
    text-shadow: none !important;
}

.cockpit-hero-master.frame-sport .radar-pod-divider {
    height: 1px !important;
    width: 100% !important;
    background: rgba(0, 240, 255, 0.22) !important;
    margin: 2px 0 !important;
}

.cockpit-hero-master.frame-sport .radar-pod-nearest {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}

.cockpit-hero-master.frame-sport .radar-nearest-badge {
    display: flex !important;
    align-items: center !important;
    gap: 0.28rem !important;
    line-height: 1 !important;
}

.cockpit-hero-master.frame-sport .radar-dot-live {
    width: 4px !important;
    height: 4px !important;
    border-radius: 50% !important;
    background: #10B981 !important;
    flex-shrink: 0 !important;
}

.cockpit-hero-master.frame-sport .radar-nearest-label {
    font-size: clamp(0.66rem, 0.85cqw, 0.78rem) !important;
    font-weight: 700 !important;
    color: #CBD5E1 !important;
    letter-spacing: 0.02em !important;
    line-height: 1 !important;
    text-shadow: none !important;
}

.cockpit-hero-master.frame-sport .radar-nearest-label strong {
    color: #FFFFFF !important;
    font-weight: 900 !important;
    text-shadow: none !important;
}

.cockpit-hero-master.frame-sport .radar-sector-text {
    font-size: clamp(0.56rem, 0.70cqw, 0.66rem) !important;
    font-weight: 700 !important;
    color: #94A3B8 !important;
    letter-spacing: 0.02em !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    text-transform: uppercase !important;
    text-shadow: none !important;
}

.cockpit-hero-master.frame-sport .dispatch-telemetry-status {
    display: none !important;
}

/* 3. Live Fleet Telemetry: Center Console V-Funnel Digital Racing Meter Gauge (Fluid & Fully Responsive to Cockpit Stage) */
.cockpit-hero-master.frame-sport .dashboard-display-right {
    position: absolute !important;
    top: 72.8% !important; /* Calibrated: moved down 3% from 69.8% */
    left: 49.6% !important; /* Calibrated: Dead-center in the Digital Display screen with symmetric margins inside the dark display glass */
    transform: translateX(-50%) perspective(900px) rotateX(4.5deg) !important;
    transform-origin: 50% 0% !important;
    transition: none !important;
    animation: none !important;
    opacity: 1 !important;
    width: clamp(190px, 21.2cqw, 320px) !important; /* Fully fluid & responsive: scales with cockpit stage width across all viewports */
    max-width: none !important;
    height: auto !important; /* Calibrated to fit 100% inside center console digital glass */
    pointer-events: auto !important;
    z-index: 6 !important;
    background: radial-gradient(ellipse at 50% 40%, rgba(0, 240, 255, 0.04) 0%, rgba(5, 12, 24, 0.15) 70%, transparent 100%) !important;
    background-image: none !important;
    border: none !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.cockpit-hero-master.frame-sport .cockpit-metrics-grid {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: clamp(2.5px, 0.30cqw, 3.5px) !important;
    width: 100% !important;
    height: auto !important;
    transition: none !important;
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Eradicate any background pseudo-elements and central crosshair '+' on sports console */
.cockpit-hero-master.frame-sport .cockpit-metrics-grid::before,
.cockpit-hero-master.frame-sport .cockpit-metrics-grid::after {
    display: none !important;
    content: none !important;
    border: none !important;
    background: transparent !important;
}

/* ==========================================================================
   COCKPIT TELEMETRY CARDS: VERTICAL FLIP CASCADE ENTRANCE
   Sequence: Bottom-Up Cascade with gradual delay:
   - Card 4 (Rating Score - Bottom): 0ms delay (flips first)
   - Card 3 (Rescues - 2nd from bottom): 500ms delay
   - Card 2 (ETA - 3rd from bottom): 1000ms delay
   - Card 1 (Mobile Workshop - Top): 1500ms delay
   ========================================================================== */
@keyframes cockpitCardFadeInFlip {
    0% {
        opacity: 0;
        transform: perspective(800px) rotateX(0deg);
        animation-timing-function: ease-out;
    }
    30% {
        opacity: 1;
        transform: perspective(800px) rotateX(0deg);
        animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }
    65% {
        opacity: 1;
        transform: perspective(800px) rotateX(-180deg);
        animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }
    100% {
        opacity: 1;
        transform: perspective(800px) rotateX(-360deg);
    }
}

/* 100% Transparent Slanted Telemetry Cards (Fluid Height & Width Scaling Proportionally with Cockpit Stage) */
.cockpit-hero-master.frame-sport .metric-card {
    position: relative !important;
    display: flex !important;
    align-items: stretch !important;
    justify-content: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 !important;
    height: clamp(25px, 3.28cqw, 47.5px) !important; /* Fully fluid: scales proportionally with cockpit stage height (reduced by 5%) */
    max-width: none !important;
    min-height: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    transition: none !important;
    transform-origin: 50% 50% !important;
    animation: cockpitCardFadeInFlip 0.85s cubic-bezier(0.25, 1, 0.5, 1) both !important;
    backface-visibility: visible !important;
    transform-style: preserve-3d !important;
}

/* Card Entrance Delays (Bottom-Up Choreography) */
.cockpit-hero-master.frame-sport .metric-card-4 {
    animation-delay: 0ms !important;
}
.cockpit-hero-master.frame-sport .metric-card-3 {
    animation-delay: 500ms !important;
}
.cockpit-hero-master.frame-sport .metric-card-2 {
    animation-delay: 1000ms !important;
}
.cockpit-hero-master.frame-sport .metric-card-1 {
    animation-delay: 1500ms !important;
}

.cockpit-hero-master.frame-sport .metric-card:hover {
    transform: none !important;
    filter: none !important;
}

.cockpit-hero-master.frame-sport .metric-card .hud-channel-tag {
    display: none !important;
}

/* Eradicate all lit/bloom glow and text-shadows from all card content & typography */
.cockpit-hero-master.frame-sport .metric-card,
.cockpit-hero-master.frame-sport .metric-card *,
.cockpit-hero-master.frame-sport .metric-card-content,
.cockpit-hero-master.frame-sport .metric-card-content * {
    text-shadow: none !important;
    filter: none !important;
    -webkit-text-stroke: 0px !important;
}

/* Zenith Aura Slanted Cards via SVG Vector Strokes & Crystalline Dark Glass Substrate */
.cockpit-hero-master.frame-sport .metric-card::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    pointer-events: none !important;
    z-index: 1 !important;
    transition: filter 0.25s ease !important;
}

/* 100% Transparent Card Content Shell with Generous Lateral Padding */
.cockpit-hero-master.frame-sport .metric-card-content {
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Middle Tick Lights Removed Completely */
.cockpit-hero-master.frame-sport .metric-card-content::after {
    display: none !important;
}

/* ==========================================================================
   COCKPIT TELEMETRY CARDS (CALIBRATED: 100% INSIDE CENTER DIGITAL DISPLAY)
   CARD 1: 100% MOBILE WORKSHOP (Green Flared Trapezoid)
   CARD 2: 20m AVG. ARRIVAL ETA (Cyan Trapezoid)
   CARD 3: 15,000+ RESCUES (Flame Orange Trapezoid)
   CARD 4: 4.9★ RATING SCORE (Amber Gold Trapezoid)
   ========================================================================== */

/* ==========================================================================
   CARD 1 (TOP CARD): 100% MOBILE WORKSHOP (Flared Green Trapezoid, Fluid & Proportionally Responsive)
   ========================================================================== */
.cockpit-hero-master.frame-sport .metric-card-1 {
    order: 1 !important;
    width: 99% !important;
    max-width: none !important;
    height: clamp(25px, 3.28cqw, 47.5px) !important;
    min-height: 0 !important;
}

.cockpit-hero-master.frame-sport .metric-card-1::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0.5,0.5 99.5,0.5 95.0,99.5 5.0,99.5' fill='%23050c18' fill-opacity='0.45' stroke='rgba(16,185,129,0.85)' stroke-width='1.5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") !important;
    filter: drop-shadow(0 0 5px rgba(16, 185, 129, 0.45)) drop-shadow(0 2px 8px rgba(0, 0, 0, 0.65)) !important;
}
.cockpit-hero-master.frame-sport .metric-card-1:hover::before {
    filter: drop-shadow(0 0 10px rgba(16, 185, 129, 0.70)) !important;
}

.cockpit-hero-master.frame-sport .metric-card-1 .metric-card-content {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: clamp(0.75rem, 1.50cqw, 2.00rem) !important;
    padding-right: clamp(1.10rem, 2.15cqw, 2.80rem) !important;
}

.cockpit-hero-master.frame-sport .metric-card-1 .metric-number {
    order: 1 !important;
    font-family: var(--font-heading) !important;
    font-size: clamp(1.10rem, 2.00cqw, 2.50rem) !important;
    font-weight: 900 !important;
    font-style: italic !important;
    color: #FFFFFF !important;
    white-space: nowrap !important;
    letter-spacing: -0.03em !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: baseline !important;
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    text-shadow: none !important;
    filter: none !important;
}

.cockpit-hero-master.frame-sport .metric-card-1 .metric-number span {
    color: #10B981 !important;
    font-weight: 900 !important;
    font-size: clamp(0.85rem, 1.50cqw, 1.85rem) !important;
    margin-left: 2px !important;
    text-shadow: none !important;
    filter: none !important;
}

.cockpit-hero-master.frame-sport .metric-card-1 .metric-label {
    order: 2 !important;
    text-align: right !important;
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    text-shadow: none !important;
    filter: none !important;
}

.cockpit-hero-master.frame-sport .metric-card-1 .gauge-col-label {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    white-space: nowrap !important;
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.cockpit-hero-master.frame-sport .metric-card-1 .gauge-col-label .gauge-row-1 {
    display: inline-block !important;
    white-space: nowrap !important;
    line-height: 1 !important;
    font-size: clamp(0.68rem, 1.12cqw, 1.40rem) !important;
    font-weight: 900 !important;
    color: #FFFFFF !important;
    letter-spacing: -0.015em !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    text-shadow: none !important;
    filter: none !important;
}

/* ==========================================================================
   CARD 2 (2ND CARD): 20m AVG. ARRIVAL ETA (Cyan Trapezoid, Fluid & Proportionally Responsive)
   ========================================================================== */
.cockpit-hero-master.frame-sport .metric-card-2 {
    order: 2 !important;
    width: 89.5% !important; /* Calibrated: top border matches Card 1 bottom border exactly */
    max-width: none !important;
    height: clamp(25px, 3.28cqw, 47.5px) !important;
    min-height: 0 !important;
}

.cockpit-hero-master.frame-sport .metric-card-2::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0.5,0.5 99.5,0.5 90.0,99.5 10.0,99.5' fill='%23050c18' fill-opacity='0.45' stroke='rgba(0,240,255,0.85)' stroke-width='1.5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") !important;
    filter: drop-shadow(0 0 5px rgba(0, 240, 255, 0.45)) drop-shadow(0 2px 8px rgba(0, 0, 0, 0.65)) !important;
}
.cockpit-hero-master.frame-sport .metric-card-2:hover::before {
    filter: drop-shadow(0 0 10px rgba(0, 240, 255, 0.70)) !important;
}

.cockpit-hero-master.frame-sport .metric-card-2 .metric-card-content {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: clamp(0.70rem, 1.42cqw, 1.90rem) !important;
    padding-right: clamp(1.00rem, 2.00cqw, 2.65rem) !important;
}

.cockpit-hero-master.frame-sport .metric-card-2 .metric-number {
    order: 1 !important;
    font-family: var(--font-heading) !important;
    font-size: clamp(1.10rem, 2.00cqw, 2.50rem) !important;
    font-weight: 900 !important;
    font-style: italic !important;
    color: #FFFFFF !important;
    white-space: nowrap !important;
    letter-spacing: -0.03em !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: baseline !important;
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    text-shadow: none !important;
    filter: none !important;
}

.cockpit-hero-master.frame-sport .metric-card-2 .metric-number span {
    color: #00F0FF !important;
    font-weight: 900 !important;
    font-size: clamp(0.85rem, 1.50cqw, 1.85rem) !important;
    margin-left: 2px !important;
    text-shadow: none !important;
    filter: none !important;
}

.cockpit-hero-master.frame-sport .metric-card-2 .metric-label {
    order: 2 !important;
    text-align: right !important;
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    text-shadow: none !important;
    filter: none !important;
}

.cockpit-hero-master.frame-sport .metric-card-2 .gauge-col-label {
    display: flex !important;
    flex-direction: row !important;
    align-items: baseline !important;
    justify-content: flex-end !important;
    gap: clamp(3px, 0.35vw, 6px) !important;
    white-space: nowrap !important;
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.cockpit-hero-master.frame-sport .metric-card-2 .gauge-col-label .gauge-row-1 {
    display: inline-block !important;
    white-space: nowrap !important;
    line-height: 1 !important;
    font-size: clamp(0.64rem, 1.05cqw, 1.30rem) !important;
    font-weight: 900 !important;
    color: #FFFFFF !important;
    letter-spacing: 0.01em !important;
    padding: 0 !important;
    margin: 0 !important;
    text-shadow: none !important;
    filter: none !important;
}

.cockpit-hero-master.frame-sport .metric-card-2 .gauge-col-label .gauge-row-2 {
    display: inline-block !important;
    white-space: nowrap !important;
    line-height: 1 !important;
    font-size: clamp(0.64rem, 1.05cqw, 1.30rem) !important;
    font-weight: 900 !important;
    color: #00F0FF !important;
    letter-spacing: 0.01em !important;
    padding: 0 !important;
    margin: 0 !important;
    text-shadow: none !important;
    filter: none !important;
}

/* ==========================================================================
   CARD 3 (3RD CARD): 15,000+ RESCUES (Flame Orange Trapezoid, Fluid & Proportionally Responsive)
   ========================================================================== */
.cockpit-hero-master.frame-sport .metric-card-3 {
    order: 3 !important;
    width: 75.0% !important; /* Calibrated: reduced by 5% from 80.0% */
    max-width: none !important;
    height: clamp(25px, 3.28cqw, 47.5px) !important;
    min-height: 0 !important;
}

.cockpit-hero-master.frame-sport .metric-card-3::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='2.5,0.5 97.5,0.5 93.5,99.5 6.5,99.5' fill='%23050c18' fill-opacity='0.45' stroke='rgba(255,107,0,0.85)' stroke-width='1.5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") !important;
    filter: drop-shadow(0 0 5px rgba(255, 107, 0, 0.45)) drop-shadow(0 2px 8px rgba(0, 0, 0, 0.65)) !important;
}
.cockpit-hero-master.frame-sport .metric-card-3:hover::before {
    filter: drop-shadow(0 0 10px rgba(255, 107, 0, 0.70)) !important;
}

.cockpit-hero-master.frame-sport .metric-card-3 .metric-card-content {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: clamp(0.65rem, 1.35cqw, 1.80rem) !important;
    padding-right: clamp(0.95rem, 1.90cqw, 2.50rem) !important;
}

.cockpit-hero-master.frame-sport .metric-card-3 .metric-number {
    order: 1 !important;
    font-family: var(--font-heading) !important;
    font-size: clamp(1.10rem, 2.00cqw, 2.50rem) !important;
    font-weight: 900 !important;
    font-style: italic !important;
    color: #FFFFFF !important;
    white-space: nowrap !important;
    letter-spacing: -0.03em !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: baseline !important;
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    text-shadow: none !important;
    filter: none !important;
}

.cockpit-hero-master.frame-sport .metric-card-3 .metric-number span {
    color: #FF6B00 !important;
    font-weight: 900 !important;
    font-size: clamp(0.85rem, 1.50cqw, 1.85rem) !important;
    margin-left: 2px !important;
    text-shadow: none !important;
    filter: none !important;
}

.cockpit-hero-master.frame-sport .metric-card-3 .metric-label {
    order: 2 !important;
    text-align: right !important;
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    text-shadow: none !important;
    filter: none !important;
}

.cockpit-hero-master.frame-sport .metric-card-3 .gauge-col-label {
    display: flex !important;
    flex-direction: row !important;
    align-items: baseline !important;
    justify-content: flex-end !important;
    white-space: nowrap !important;
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.cockpit-hero-master.frame-sport .metric-card-3 .gauge-col-label .gauge-row-1 {
    display: inline-block !important;
    white-space: nowrap !important;
    line-height: 1 !important;
    font-size: clamp(0.70rem, 1.18cqw, 1.45rem) !important;
    font-weight: 900 !important;
    color: #FFFFFF !important;
    letter-spacing: 0.02em !important;
    padding: 0 !important;
    margin: 0 !important;
    text-shadow: none !important;
    filter: none !important;
}

.cockpit-hero-master.frame-sport .metric-card-3 .gauge-row-2 {
    display: none !important;
}

/* ==========================================================================
   CARD 4 (4TH CARD): 4.9★ RATING SCORE (Amber Gold Trapezoid, Fluid & Proportionally Responsive)
   ========================================================================== */
.cockpit-hero-master.frame-sport .metric-card-4 {
    order: 4 !important;
    width: 66.5% !important; /* Calibrated: top border matches Card 3 bottom border exactly */
    max-width: none !important;
    height: clamp(25px, 3.28cqw, 47.5px) !important;
    min-height: 0 !important;
}

.cockpit-hero-master.frame-sport .metric-card-4::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0.5,0.5 99.5,0.5 94.0,99.5 6.0,99.5' fill='%23050c18' fill-opacity='0.45' stroke='rgba(245,158,11,0.85)' stroke-width='1.5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") !important;
    filter: drop-shadow(0 0 5px rgba(245, 158, 11, 0.45)) drop-shadow(0 2px 8px rgba(0, 0, 0, 0.65)) !important;
}
.cockpit-hero-master.frame-sport .metric-card-4:hover::before {
    filter: drop-shadow(0 0 10px rgba(245, 158, 11, 0.70)) !important;
}

.cockpit-hero-master.frame-sport .metric-card-4 .metric-card-content {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: clamp(0.50rem, 1.15cqw, 1.45rem) !important;
    padding-right: clamp(0.70rem, 1.50cqw, 1.95rem) !important;
}

.cockpit-hero-master.frame-sport .metric-card-4 .metric-number {
    order: 1 !important;
    font-family: var(--font-heading) !important;
    font-size: clamp(1.10rem, 2.00cqw, 2.50rem) !important;
    font-weight: 900 !important;
    font-style: italic !important;
    color: #FFFFFF !important;
    white-space: nowrap !important;
    letter-spacing: -0.03em !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: baseline !important;
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    text-shadow: none !important;
    filter: none !important;
}

.cockpit-hero-master.frame-sport .metric-card-4 .metric-number span {
    color: #F59E0B !important;
    font-weight: 900 !important;
    font-size: clamp(0.85rem, 1.50cqw, 1.85rem) !important;
    margin-left: 2px !important;
    text-shadow: none !important;
    filter: none !important;
}

.cockpit-hero-master.frame-sport .metric-card-4 .metric-label {
    order: 2 !important;
    text-align: right !important;
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    text-shadow: none !important;
    filter: none !important;
}

.cockpit-hero-master.frame-sport .metric-card-4 .gauge-col-label {
    display: flex !important;
    flex-direction: row !important;
    align-items: baseline !important;
    justify-content: flex-end !important;
    white-space: nowrap !important;
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.cockpit-hero-master.frame-sport .metric-card-4 .gauge-col-label .gauge-row-1 {
    display: inline-block !important;
    white-space: nowrap !important;
    line-height: 1 !important;
    font-size: clamp(0.70rem, 1.18cqw, 1.45rem) !important;
    font-weight: 900 !important;
    color: #FFFFFF !important;
    letter-spacing: 0.02em !important;
    padding: 0 !important;
    margin: 0 !important;
    text-shadow: none !important;
    filter: none !important;
}

.cockpit-hero-master.frame-sport .metric-card-4 .gauge-row-2 {
    display: none !important;
}

/* Subtle Vignette & Atmospheric Contrast Mesh */
.cockpit-hero-master::before {
    display: none;
}

/* Smooth Ambient Blending Transition at Bottom */
.cockpit-hero-master::after {
    display: none;
}

/* Windshield Front Visor (Topbar & Header) */
.emergency-topbar.cockpit-visor-topbar {
    position: relative;
    z-index: 20;
    background: #0B0F19;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(255, 107, 0, 0.28);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.emergency-topbar.cockpit-visor-topbar .status-badge {
    color: #FFFFFF !important;
}

.emergency-topbar.cockpit-visor-topbar .topbar-cloud-engine,
.emergency-topbar.cockpit-visor-topbar .topbar-cloud-engine strong,
.emergency-topbar.cockpit-visor-topbar .topbar-cloud-engine a {
    color: #E2E8F0 !important;
}

.main-header.cockpit-visor-header {
    position: relative;
    top: auto;
    z-index: 99;
    background: var(--header-bg);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-bottom: 1.5px solid rgba(255, 107, 0, 0.38);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), 0 0 20px rgba(255, 107, 0, 0.15);
    transition: var(--transition-theme);
}

/* Sticky Navigation: Activates dynamically when scrolled to Section 2 (#how-it-works) and beyond */
.main-header.cockpit-visor-header.is-sticky {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 9999 !important;
    animation: stickyHeaderSlideDown 0.32s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

[data-mode="dark"] .main-header.cockpit-visor-header.is-sticky {
    background: rgba(10, 15, 26, 0.92) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border-bottom: 1.5px solid rgba(255, 107, 0, 0.45) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 20px rgba(255, 107, 0, 0.20) !important;
}

[data-mode="light"] .main-header.cockpit-visor-header.is-sticky {
    background: rgba(255, 255, 255, 0.94) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border-bottom: 1.5px solid rgba(255, 107, 0, 0.35) !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12), 0 0 15px rgba(255, 107, 0, 0.15) !important;
}

@keyframes stickyHeaderSlideDown {
    0% {
        transform: translateY(-100%);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

[data-mode="dark"] .main-header.cockpit-visor-header {
    background: rgba(10, 15, 26, 0.95);
}

[data-mode="dark"] .main-header.cockpit-visor-header .brand-name {
    color: #FFFFFF !important;
}

[data-mode="dark"] .main-header.cockpit-visor-header .brand-tagline {
    color: #94A3B8 !important;
}

[data-mode="dark"] .main-header.cockpit-visor-header .nav-link {
    color: #CBD5E1;
}

[data-mode="dark"] .main-header.cockpit-visor-header .nav-link:hover,
[data-mode="dark"] .main-header.cockpit-visor-header .nav-link.active {
    color: #FFFFFF;
}

[data-mode="light"] .main-header.cockpit-visor-header {
    background: rgba(255, 255, 255, 0.97) !important;
    border-bottom: 1.5px solid rgba(255, 107, 0, 0.35) !important;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.08), 0 0 15px rgba(255, 107, 0, 0.12) !important;
}

[data-mode="light"] .main-header.cockpit-visor-header .brand-name {
    color: #0F172A !important;
}

[data-mode="light"] .main-header.cockpit-visor-header .brand-tagline {
    color: #475569 !important;
}

[data-mode="light"] .main-header.cockpit-visor-header .nav-link {
    color: #334155;
    font-weight: 700;
}

[data-mode="light"] .main-header.cockpit-visor-header .nav-link:hover,
[data-mode="light"] .main-header.cockpit-visor-header .nav-link.active {
    color: #0F172A;
}

/* Lower Console Deck: Brand Headline & Value Prop Beneath Digital Display */
.cockpit-lower-deck {
    position: absolute;
    top: auto;
    bottom: clamp(12px, 3%, 22px);
    left: 50%;
    transform: translateX(-50%);
    width: min(980px, 94%);
    text-align: center;
    z-index: 7;
    padding: 0.15rem 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    pointer-events: auto;
    background: transparent;
}

.cockpit-lower-deck .hero-pill-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: rgba(14, 19, 31, 0.88);
    border: 1.2px solid rgba(255, 107, 0, 0.65);
    padding: 0.2rem 0.8rem;
    border-radius: var(--radius-full);
    font-size: clamp(0.64rem, 0.8vw, 0.78rem);
    font-weight: 800;
    letter-spacing: 0.08em;
    color: #FFA34D;
    text-transform: uppercase;
    margin-bottom: 0.35rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

.cockpit-lower-deck .hero-title {
    font-family: var(--font-heading);
    font-size: clamp(1.1rem, 1.75vw, 1.68rem);
    font-weight: 900;
    line-height: 1.25;
    letter-spacing: -0.02em;
    margin-bottom: 0.35rem;
    color: #FFFFFF;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.95);
    white-space: nowrap;
}

.cockpit-lower-deck .hero-title .gradient-text,
.cockpit-lower-deck .hero-title .hero-highlight-text {
    color: var(--primary, #FF6B00) !important;
    -webkit-text-fill-color: var(--primary, #FF6B00) !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    display: inline !important;
    font-weight: 900 !important;
    text-shadow: 0 0 20px rgba(var(--primary-rgb, 255, 107, 0), 0.6), 0 2px 6px rgba(0, 0, 0, 0.95) !important;
}

.cockpit-lower-deck .hero-subtitle {
    font-family: var(--font-body);
    font-size: clamp(0.72rem, 0.95vw, 0.9rem);
    line-height: 1.38;
    color: rgba(226, 232, 240, 0.92);
    max-width: 760px;
    margin: 0 auto;
    font-weight: 600;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
}

/* Base Button Definitions */
.btn-primary {
    background: var(--primary-gradient);
    color: #FFFFFF;
    font-weight: 800;
    font-size: 1rem;
    padding: 0.95rem 2rem;
    border-radius: var(--radius-md);
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    box-shadow: 0 6px 20px rgba(var(--primary-rgb), 0.4);
    transition: var(--transition-smooth);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(var(--primary-rgb), 0.6);
}

/* ==========================================================================
   9. Cockpit Digital Dashboard Screen: 3rd Image Elements inside Digital Car Display
   ========================================================================== */

.cockpit-dashboard-screen {
    position: absolute;
    top: 51.5%;
    left: 50%;
    transform: translateX(-50%) perspective(1200px) rotateX(2.2deg);
    transform-origin: 50% 100%;
    width: 80.0%;
    max-width: 840px;
    height: 20.8%;
    z-index: 6;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: clamp(4px, 0.6vh, 8px) 0.85rem clamp(8px, 1.2vh, 14px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
    transition: none !important;
    pointer-events: auto;
}

.cockpit-dashboard-screen::before,
.cockpit-dashboard-screen::after {
    display: none;
}

/* Top Curved HUD Telemetry Ribbon (Photoshop Text Along a Path) */
.dashboard-hud-strip.hud-curved-strip {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0;
    margin: 0 0 clamp(2px, 0.35vh, 6px) 0;
    border: none;
    flex-shrink: 0;
    transition: none !important;
    animation: cockpitFadeInOnly 0.85s ease-out 300ms both !important;
}

.hud-curved-ribbon-svg {
    width: 100%;
    height: clamp(26px, 3.2vh, 38px);
    display: block;
    overflow: visible;
}

.hud-curved-ribbon-svg text {
    font-size: clamp(10px, 0.74vw, 12px);
    letter-spacing: 0.05em;
    user-select: none;
}

.hud-curved-ribbon-svg .svg-radar-dot {
    filter: drop-shadow(0 0 6px #00F0FF);
    animation: radar-ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.hud-curved-ribbon-svg .svg-chip-label {
    font-family: var(--font-hud-display);
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.hud-curved-ribbon-svg .svg-chip-value,
.hud-curved-ribbon-svg .svg-telemetry-tag {
    font-family: var(--font-hud-telemetry);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.hud-curved-ribbon-svg .svg-battery-pct {
    font-family: var(--font-hud-display);
    font-weight: 800;
    letter-spacing: 0.05em;
    filter: drop-shadow(0 0 4px rgba(16, 185, 129, 0.6));
}

/* Main Split Display Grid: Left Column 50% / Right Column 50% of Digital Display */
.dashboard-display-grid {
    display: grid;
    grid-template-columns: calc(50% - 0.5rem) calc(50% - 0.5rem);
    gap: 1rem;
    align-items: center;
    width: 100%;
    flex: 1;
    min-height: 0;
}

.dot-cyan {
    background-color: #00F0FF !important;
    box-shadow: 0 0 12px #00F0FF !important;
}

/* Left Column of Dashboard - Strictly 50% of Digital Display */
.dashboard-display-left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.35rem;
    min-height: 0;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    transition: none !important;
    animation: cockpitFadeInOnly 0.45s ease-out 100ms both !important;
}

/* Row 1: Translucent Location Capsule Input Bar */
.dashboard-display-left .dispatch-input-card {
    width: 100%;
    max-width: 100%;
    background: rgba(10, 16, 28, 0.60) !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.10) 0%, rgba(10, 16, 28, 0.55) 100%) !important;
    border: 1.5px solid rgba(255, 133, 51, 0.75) !important;
    border-radius: var(--radius-full);
    height: clamp(28px, 3.2vh, 34px);
    min-height: 28px;
    padding: 0 0.45rem 0 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        inset 0 0 14px rgba(255, 107, 0, 0.10),
        0 4px 14px rgba(0, 0, 0, 0.40) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    box-sizing: border-box;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.dashboard-display-left .dispatch-input-card:hover,
.dashboard-display-left .dispatch-input-card:focus-within {
    border-color: #FF6B00 !important;
    box-shadow: 
        inset 0 0 16px rgba(255, 107, 0, 0.22),
        0 6px 18px rgba(255, 85, 0, 0.35) !important;
}

.dashboard-display-left .dispatch-input-card > svg:not(.cyber-glove-svg) {
    color: #FF5500;
    flex-shrink: 0;
}

.dashboard-display-left .dispatch-input-card input {
    background: transparent;
    border: none;
    outline: none;
    font-family: var(--font-hud-capsule);
    font-size: clamp(0.64rem, 0.78vw, 0.80rem);
    font-weight: 600;
    color: #FFFFFF !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.dashboard-display-left .dispatch-input-card input::placeholder {
    color: #CBD5E1 !important;
    font-weight: 500;
}

.btn-location-capsule-pin {
    background: rgba(255, 107, 0, 0.25);
    border: 1px solid rgba(255, 107, 0, 0.6);
    color: #FFA34D;
    font-family: var(--font-hud-telemetry);
    font-size: clamp(0.52rem, 0.62vw, 0.62rem);
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 0.12rem 0.45rem;
    border-radius: 9999px;
    cursor: pointer;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    transition: var(--transition-fast);
}

.btn-location-capsule-pin:hover {
    background: #FF6B00;
    color: #FFFFFF;
    box-shadow: 0 0 10px rgba(255, 107, 0, 0.6);
}

/* ==========================================================================
   ONBOARDING HAND POINTER: Futuristic Cyber Driver Glove with Cyan Radar Tap Ripple
   Points directly at Location Field ("Enter breakdown location...")
   Auto-fades on user interaction / modal open or after 8 seconds
   ========================================================================== */
.location-onboarding-hand {
    position: absolute;
    top: clamp(6px, 1.0cqw, 10px);
    left: clamp(48px, 18%, 88px);
    width: clamp(38px, 4.6cqw, 46px);
    height: clamp(44px, 5.4cqw, 54px);
    pointer-events: auto;
    cursor: pointer;
    z-index: 35;
    opacity: 0;
    transform: translate(16px, 20px) scale(0.85);
    animation: 
        cyberHandFloatIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) 1.5s forwards,
        cyberHandTapLoop 1.8s ease-in-out 2.2s infinite;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 10px rgba(0, 229, 255, 0.45));
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
    -webkit-user-select: none;
}

.location-onboarding-hand.dismissed {
    opacity: 0 !important;
    transform: translate(12px, 16px) scale(0.75) !important;
    pointer-events: none !important;
}

/* Concentric Cyan Radar Tap Ripples centered at fingertip */
.location-onboarding-hand .cyber-tap-ripple {
    position: absolute;
    top: 10%;
    left: 41.5%;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid #00E5FF;
    transform: translate(-50%, -50%) scale(0.2);
    opacity: 0;
    pointer-events: none;
    box-shadow: 0 0 10px #00E5FF, inset 0 0 6px #00E5FF;
}

.location-onboarding-hand .cyber-tap-ripple.ripple-primary {
    animation: cyberRadarPulse 1.8s cubic-bezier(0.2, 0.8, 0.4, 1) 2.4s infinite;
}

.location-onboarding-hand .cyber-tap-ripple.ripple-secondary {
    animation: cyberRadarPulse 1.8s cubic-bezier(0.2, 0.8, 0.4, 1) 3.0s infinite;
}

.location-onboarding-hand .cyber-glove-svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* Float-in from bottom-right */
@keyframes cyberHandFloatIn {
    0% {
        opacity: 0;
        transform: translate(18px, 22px) scale(0.85);
    }
    100% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }
}

/* Tapping pressing motion */
@keyframes cyberHandTapLoop {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    18% {
        transform: translate(-3px, -4px) scale(0.92);
    }
    32% {
        transform: translate(0, 0) scale(1);
    }
    48% {
        transform: translate(-3px, -4px) scale(0.92);
    }
    62% {
        transform: translate(0, 0) scale(1);
    }
    82% {
        transform: translate(1px, 2px) scale(0.98);
    }
}

/* Radar Pulse Waves */
@keyframes cyberRadarPulse {
    0% {
        transform: translate(-50%, -50%) scale(0.2);
        opacity: 0.95;
        border-color: rgba(0, 229, 255, 0.95);
        box-shadow: 0 0 10px rgba(0, 229, 255, 0.9), inset 0 0 6px rgba(0, 229, 255, 0.7);
    }
    60% {
        opacity: 0.55;
        border-color: rgba(0, 229, 255, 0.6);
    }
    100% {
        transform: translate(-50%, -50%) scale(2.8);
        opacity: 0;
        border-color: rgba(0, 229, 255, 0);
        box-shadow: 0 0 18px rgba(0, 229, 255, 0);
    }
}

/* Row 2: Dual Action Buttons Row (50% / 50% Grid inside 40% Left Column) */
.dispatch-btn-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.38rem;
    width: 100%;
}

.dispatch-btn-row .btn-dispatch-mechanic {
    background: linear-gradient(135deg, #FF5500 0%, #FF7700 100%);
    color: #FFFFFF;
    font-family: var(--font-hud-capsule);
    font-weight: 800;
    font-size: clamp(0.76rem, 0.92vw, 0.96rem);
    letter-spacing: -0.01em;
    height: clamp(30px, 3.4vh, 36px);
    min-height: 30px;
    padding: 0 0.5rem;
    border: none;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(255, 85, 0, 0.45);
    white-space: nowrap;
    transition: var(--transition-smooth);
}

.dispatch-btn-row .btn-dispatch-mechanic svg {
    width: clamp(14px, 0.9vw, 16px);
    height: clamp(14px, 0.9vw, 16px);
    flex-shrink: 0;
}

.dispatch-btn-row .btn-dispatch-mechanic:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(255, 85, 0, 0.65);
}

.dispatch-btn-row .btn-priority-call {
    background: linear-gradient(135deg, #E11D48 0%, #DC2626 100%);
    color: #FFFFFF;
    font-family: var(--font-hud-capsule);
    font-weight: 800;
    font-size: clamp(0.76rem, 0.92vw, 0.96rem);
    letter-spacing: -0.01em;
    height: clamp(30px, 3.4vh, 36px);
    min-height: 30px;
    padding: 0 0.5rem;
    border: none;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(225, 29, 72, 0.45);
    white-space: nowrap;
    transition: var(--transition-smooth);
}

.dispatch-btn-row .btn-priority-call svg {
    width: clamp(14px, 0.9vw, 16px);
    height: clamp(14px, 0.9vw, 16px);
    flex-shrink: 0;
}

.dispatch-btn-row .btn-priority-call:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(225, 29, 72, 0.65);
}

/* Row 3: Live Sub-Telemetry Status Strip */
.dispatch-telemetry-status,
#dispatch-telemetry-status,
.dispatch-telemetry-status span,
#dispatch-status-text {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-family: var(--font-hud-telemetry);
    font-size: clamp(0.56rem, 0.7vw, 0.7rem);
    font-weight: 600;
    color: #CBD5E1 !important;
    padding: 0 0.15rem;
    letter-spacing: 0.03em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.95), 0 0 8px rgba(0, 0, 0, 0.8) !important;
}

.dispatch-telemetry-status strong,
#dispatch-telemetry-status strong,
#dispatch-status-text strong {
    color: #FFFFFF !important;
    font-weight: 700 !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.95), 0 0 8px rgba(0, 0, 0, 0.8) !important;
}

/* Right Half of Dashboard - Strictly 50% of Digital Display */
.dashboard-display-right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 0;
    width: 100%;
    transition: none !important;
    animation: cockpitFadeInOnly 0.45s ease-out 100ms both !important;
}

/* ==========================================================================
   Re-imagined OLED Digital Cockpit Telemetry Matrix
   Unified In-Dash HUD Instrument Cluster - Seamlessly Fused to Digital Display
   ========================================================================== */
.cockpit-hero-master:not(.frame-sport) .cockpit-metrics-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 0; /* Unified HUD Matrix - no disjointed floating cards */
    width: 100%;
    margin: 0;
    position: relative;
    background: linear-gradient(135deg, rgba(8, 14, 26, 0.78) 0%, rgba(14, 20, 34, 0.90) 100%);
    background-image: repeating-linear-gradient(
        0deg,
        rgba(255, 107, 0, 0.035) 0px,
        rgba(255, 107, 0, 0.035) 1px,
        transparent 1px,
        transparent 4px
    );
    border: 1.5px solid rgba(255, 120, 0, 0.45);
    border-radius: 8px 24px 14px 8px; /* Sweeping curvature mirroring the digital windshield HUD */
    box-shadow: 
        inset 0 1px 1px rgba(255, 255, 255, 0.20),
        inset 0 0 22px rgba(255, 107, 0, 0.10),
        0 4px 18px rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    overflow: hidden;
    margin-bottom: clamp(6px, 1vh, 12px); /* Generous clearance above display lower border */
}

/* Central Digital Crosshair Laser Coordinate */
.cockpit-hero-master:not(.frame-sport) .cockpit-metrics-grid::after {
    content: '+';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 900;
    color: rgba(255, 107, 0, 0.65);
    pointer-events: none;
    z-index: 4;
    line-height: 1;
    text-shadow: 0 0 6px rgba(255, 107, 0, 0.85);
}

/* Individual HUD Telemetry Cells */
.cockpit-hero-master:not(.frame-sport) .cockpit-metrics-grid .metric-card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: clamp(4px, 0.5vh, 6px) clamp(6px, 0.7vw, 10px) !important;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: clamp(33px, 3.7vh, 41px); /* Strictly fits screen height with safe clearance */
    cursor: pointer;
    box-sizing: border-box;
    transition: background-color 0.25s ease, box-shadow 0.25s ease;
}

/* Digital Laser Partition Lines */
.cockpit-hero-master:not(.frame-sport) .cockpit-metrics-grid .metric-card-1 {
    border-right: 1px solid rgba(255, 120, 0, 0.25) !important;
    border-bottom: 1px solid rgba(255, 120, 0, 0.25) !important;
}
.cockpit-hero-master:not(.frame-sport) .cockpit-metrics-grid .metric-card-2 {
    border-bottom: 1px solid rgba(255, 120, 0, 0.25) !important;
}
.cockpit-hero-master:not(.frame-sport) .cockpit-metrics-grid .metric-card-3 {
    border-right: 1px solid rgba(255, 120, 0, 0.25) !important;
}
.cockpit-hero-master:not(.frame-sport) .cockpit-metrics-grid .metric-card-4 {
    border: none !important; /* Seamless bottom-right */
}

/* Hover phosphor illuminate effect */
.cockpit-hero-master:not(.frame-sport) .cockpit-metrics-grid .metric-card:hover {
    background: rgba(255, 107, 0, 0.12) !important;
    box-shadow: inset 0 0 16px rgba(255, 107, 0, 0.22) !important;
    transform: none !important;
}

/* Corner HUD Channel Markers */
.hud-channel-tag {
    position: absolute;
    top: 2px;
    left: 8px;
    font-family: var(--font-mono);
    font-size: clamp(0.44rem, 0.52vw, 0.56rem);
    font-weight: 800;
    color: rgba(255, 120, 0, 0.65);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    pointer-events: none;
    line-height: 1;
    z-index: 3;
}

.metric-card-content {
    position: relative;
    z-index: 2;
    text-align: left;
    pointer-events: none;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: clamp(0.35rem, 0.6vw, 0.65rem);
    padding: 0 0.25rem;
    box-sizing: border-box;
    margin-top: 2px;
}

.cockpit-hero-master:not(.frame-sport) .cockpit-metrics-grid .metric-number {
    font-family: var(--font-hud-numbers);
    font-size: clamp(1.2rem, 1.5vw, 1.7rem);
    font-weight: 800;
    color: #FFFFFF !important;
    text-shadow: 
        0 0 10px rgba(255, 255, 255, 0.45),
        0 0 20px rgba(255, 107, 0, 0.30),
        0 1px 3px rgba(0, 0, 0, 0.9);
    line-height: 1;
    margin: 0;
    letter-spacing: -0.02em;
    position: relative;
    z-index: 2;
    white-space: nowrap;
    flex-shrink: 0;
}

.cockpit-hero-master:not(.frame-sport) .cockpit-metrics-grid .metric-number span {
    color: #FF7700 !important;
    font-family: var(--font-hud-numbers);
    font-size: clamp(0.95rem, 1.2vw, 1.35rem);
    font-weight: 800;
    text-shadow: 0 0 10px rgba(255, 119, 0, 0.75);
}

.cockpit-hero-master:not(.frame-sport) .cockpit-metrics-grid .metric-label {
    font-family: var(--font-hud-telemetry);
    font-size: clamp(0.75rem, 0.96vw, 1.02rem) !important;
    font-weight: 800;
    color: #CBD5E1 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 0 8px rgba(0, 0, 0, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.18;
    white-space: normal;
    text-align: left;
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Status indicator dots for HUD Sub-telemetry */
.dot-cyan {
    background-color: #00F0FF !important;
    box-shadow: 0 0 10px #00F0FF !important;
}

.dot-emerald {
    background-color: #10B981 !important;
    box-shadow: 0 0 10px #10B981 !important;
}

/* ==========================================================================
   Floating Emergency Dispatch HUD Toast (Decoupled from Cockpit Screen)
   ========================================================================== */
.dispatch-hud-toast {
    position: fixed;
    top: 86px;
    left: 50%;
    transform: translateX(-50%) translateY(-28px);
    z-index: 99999;
    opacity: 0;
    pointer-events: none;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    max-width: 90vw;
    width: 640px;
}

.dispatch-hud-toast.active {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.dispatch-hud-toast .toast-inner {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.96) 0%, rgba(9, 14, 26, 0.98) 100%);
    border: 1.5px solid #10B981;
    border-radius: 14px;
    padding: 0.95rem 1.25rem;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.75), 0 0 25px rgba(16, 185, 129, 0.32);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    display: flex;
    align-items: center;
    gap: 1rem;
    color: #FFFFFF;
}

.dispatch-hud-toast .toast-icon-wrap {
    position: relative;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(16, 185, 129, 0.15);
    border: 1.5px solid rgba(16, 185, 129, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.dispatch-hud-toast .toast-ping-ring {
    position: absolute;
    inset: -3px;
    border: 1.5px solid #10B981;
    border-radius: 14px;
    animation: radar-ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
    pointer-events: none;
}

.dispatch-hud-toast .toast-body {
    flex: 1;
    min-width: 0;
}

.dispatch-hud-toast .toast-title {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 0.96rem;
    color: #10B981;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.2rem;
    letter-spacing: -0.01em;
}

.dispatch-hud-toast .toast-desc {
    font-family: var(--font-body);
    font-size: 0.82rem;
    color: #E2E8F0;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}

.dispatch-hud-toast .toast-desc strong {
    color: #FFFFFF;
}

.dispatch-hud-toast .toast-actions {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-shrink: 0;
}

.dispatch-hud-toast .toast-btn-call {
    background: #10B981;
    color: #FFFFFF;
    font-family: var(--font-body);
    font-weight: 800;
    font-size: 0.82rem;
    padding: 0.55rem 1rem;
    border-radius: 8px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.45);
    transition: var(--transition-fast);
    white-space: nowrap;
}

.dispatch-hud-toast .toast-btn-call:hover {
    background: #059669;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(16, 185, 129, 0.6);
}

.dispatch-hud-toast .toast-btn-close {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #94A3B8;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.82rem;
    transition: var(--transition-fast);
}

.dispatch-hud-toast .toast-btn-close:hover {
    background: #EF4444;
    border-color: #EF4444;
    color: #FFFFFF;
}

@media (max-width: 640px) {
    .dispatch-hud-toast {
        top: 72px;
        width: calc(100% - 24px);
    }
    .dispatch-hud-toast .toast-inner {
        flex-direction: column;
        align-items: flex-start;
        padding: 0.85rem 1rem;
        gap: 0.75rem;
    }
    .dispatch-hud-toast .toast-actions {
        width: 100%;
        justify-content: space-between;
    }
}

/* ==========================================================================
   10. Driver Breakdown Location Modal (Zenith Aura Cockpit Modal)
   ========================================================================== */
.location-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(4, 7, 15, 0.84);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.location-modal-backdrop.active {
    opacity: 1;
    pointer-events: auto;
}

.location-modal-container {
    background: linear-gradient(180deg, rgba(17, 24, 39, 0.98) 0%, rgba(9, 14, 26, 0.99) 100%);
    border: 1.5px solid rgba(255, 107, 0, 0.48);
    border-radius: 14px; /* Subtle Curve Doctrine §ZA-3 & §ZA-9 */
    width: 100%;
    max-width: 660px; /* Fluid Responsive Bounds §ZA-21.1 */
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.85), 0 0 35px rgba(255, 107, 0, 0.22), inset 0 1px 1px rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    position: relative;
    padding: 1.15rem 1.85rem 1.65rem;
    box-sizing: border-box;
    transform: scale(0.94) translateY(12px);
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
    max-height: 90vh;
    overflow-y: auto;
    overflow-x: hidden !important;
}

.location-modal-backdrop.active .location-modal-container {
    transform: scale(1) translateY(0);
}

.location-modal-header {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.25rem;
    position: relative;
    width: 100%;
}

.location-modal-header-icon {
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(255, 107, 0, 0.15);
    border: 1.5px solid rgba(255, 107, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.location-ping-ring {
    position: absolute;
    inset: -3px;
    border: 1.5px solid #FF5500;
    border-radius: 14px;
    animation: radar-ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
    pointer-events: none;
}

.location-modal-header-text {
    flex: 1;
    min-width: 0;
}

.location-modal-header-text h3 {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    font-weight: 800;
    color: #FFFFFF;
    margin-bottom: 0.30rem;
    letter-spacing: -0.01em;
}

.location-modal-header-text p {
    font-family: var(--font-body);
    font-size: 0.90rem;
    color: #CBD5E1;
    line-height: 1.45;
    margin: 0;
}

.btn-location-modal-close {
    position: relative !important;
    right: auto !important;
    top: auto !important;
}

.location-gps-detect-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, rgba(0, 240, 255, 0.08) 0%, rgba(10, 20, 36, 0.85) 100%);
    border: 1.2px solid rgba(0, 240, 255, 0.32);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25), 0 0 12px rgba(0, 240, 255, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    padding: 0.60rem 0.95rem;
    margin-bottom: 1.10rem;
}

.btn-auto-gps {
    background: transparent;
    border: none;
    outline: none;
    color: #00F0FF;
    font-family: var(--font-hud-telemetry);
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: var(--transition-fast);
}

.btn-auto-gps:hover {
    color: #38BDF8;
    filter: drop-shadow(0 0 10px #00F0FF);
    transform: translateY(-1px);
}

.gps-status-indicator {
    font-family: var(--font-hud-telemetry);
    font-size: 0.80rem;
    font-weight: 700;
    color: #10B981;
}

.location-hotspot-group {
    margin-bottom: 1.25rem;
}

.location-field-label {
    display: block;
    font-family: var(--font-hud-telemetry);
    font-size: 0.80rem;
    font-weight: 800;
    color: #FFA34D;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.50rem;
}

.location-hotspot-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.hotspot-chip {
    background: linear-gradient(135deg, rgba(20, 28, 48, 0.80) 0%, rgba(11, 18, 32, 0.90) 100%);
    border: 1.2px solid rgba(148, 163, 184, 0.28);
    color: #E2E8F0;
    font-family: var(--font-hud-capsule);
    font-size: 0.82rem;
    font-weight: 700;
    padding: 0.35rem 0.72rem;
    border-radius: 6px;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.10);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.hotspot-chip:hover,
.hotspot-chip.active {
    background: linear-gradient(135deg, rgba(255, 107, 0, 0.25) 0%, rgba(20, 28, 48, 0.90) 100%);
    border-color: #FF6B00;
    color: #FFA34D;
    box-shadow: 0 0 14px rgba(255, 107, 0, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.22);
    transform: translateY(-1px);
}

.location-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1.15rem 1.25rem;
    margin-bottom: 1.5rem;
}

.field-span-2 {
    grid-column: span 2;
}

.location-form-field {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
}

.location-form-field label {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    min-height: 1.5rem;
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 700;
    color: #E2E8F0;
    margin-bottom: 0.45rem;
    line-height: 1.25;
}

.required-star {
    color: #FF5500;
}

/* Zenith Aura Inner Backlit Input Wrap (§ZA-7 & §ZA-14.2) */
.modal-input-wrap {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    background: linear-gradient(145deg, rgba(15, 23, 42, 0.85) 0%, rgba(10, 15, 28, 0.94) 100%);
    border: 1.5px solid rgba(255, 107, 0, 0.45); /* Crisp, clearly visible borders */
    border-radius: 8px; /* Subtle Standard §ZA-3 */
    padding: 0 0.95rem;
    height: 46px;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    margin-top: auto; /* Mathematically locks every input to the exact same row baseline */
    box-shadow: 
        inset 0 2px 4px rgba(0, 0, 0, 0.60),
        inset 0 0 10px rgba(255, 107, 0, 0.12),
        0 0 10px rgba(255, 107, 0, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.10);
    transition: border-color 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1), background 0.25s ease;
}

.modal-input-wrap:hover {
    border-color: rgba(255, 107, 0, 0.72);
    box-shadow: 
        inset 0 2px 4px rgba(0, 0, 0, 0.65),
        inset 0 0 14px rgba(255, 107, 0, 0.18),
        0 0 16px rgba(255, 107, 0, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.modal-input-wrap:focus-within {
    border-color: #FF6B00;
    background: linear-gradient(145deg, rgba(20, 28, 48, 0.94) 0%, rgba(11, 18, 32, 0.98) 100%);
    box-shadow: 
        inset 0 2px 4px rgba(0, 0, 0, 0.70),
        inset 0 0 16px rgba(255, 107, 0, 0.24),
        0 0 22px rgba(255, 107, 0, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.modal-input-wrap input,
.modal-input-wrap select {
    background: transparent;
    border: none;
    outline: none;
    width: 100%;
    min-width: 0;
    color: #FFFFFF;
    font-family: var(--font-body);
    font-size: 0.92rem;
    font-weight: 500;
}

.modal-input-wrap select {
    cursor: pointer;
}

.modal-input-wrap select option {
    background: #0F172A;
    color: #FFFFFF;
}

.modal-input-wrap input::placeholder {
    color: #94A3B8;
}

.location-modal-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.85rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 1.25rem;
}

/* Zenith Aura Specular Cancel Button (§ZA-4.1) */
.btn-modal-cancel {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.85) 0%, rgba(15, 23, 42, 0.95) 100%);
    border: 1.5px solid rgba(148, 163, 184, 0.35);
    color: #E2E8F0;
    font-family: var(--font-body);
    font-size: 0.94rem;
    font-weight: 700;
    padding: 0.70rem 1.45rem;
    border-radius: 8px; /* Subtle Standard §ZA-3 */
    cursor: pointer;
    box-shadow: 
        0 2px 10px rgba(0, 0, 0, 0.30),
        0 0 10px rgba(148, 163, 184, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        inset 0 -1px 0 rgba(0, 0, 0, 0.30);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease, color 0.2s ease;
}

.btn-modal-cancel:hover {
    transform: translateY(-1.5px);
    border-color: rgba(203, 213, 225, 0.70);
    color: #FFFFFF;
    box-shadow: 
        0 4px 16px rgba(0, 0, 0, 0.45),
        0 0 14px rgba(148, 163, 184, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.30);
}

.btn-modal-cancel:active {
    transform: translateY(0) scale(0.985);
}

/* Zenith Aura Specular 3D Action Pill / Confirm Button (§ZA-4.3 & §ZA-8) */
.btn-modal-confirm {
    background: linear-gradient(135deg, #FF6B00 0%, #FF5500 50%, #E04800 100%);
    border: 1.5px solid rgba(255, 190, 140, 0.55);
    color: #FFFFFF;
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    padding: 0.70rem 1.75rem;
    border-radius: 8px; /* Subtle Standard §ZA-3 */
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    box-shadow: 
        0 4px 18px rgba(255, 85, 0, 0.45),
        0 0 16px rgba(255, 107, 0, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.65),
        inset 0 -1px 0 rgba(0, 0, 0, 0.35);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease;
}

.btn-modal-confirm:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 220, 180, 0.90);
    box-shadow: 
        0 8px 28px rgba(255, 85, 0, 0.65),
        0 0 26px rgba(255, 107, 0, 0.50),
        inset 0 1px 0 #FFFFFF,
        inset 0 -1px 0 rgba(0, 0, 0, 0.40);
}

.btn-modal-confirm:active {
    transform: translateY(0) scale(0.985);
}

/* Light Mode Support for LocationModal */
[data-mode="light"] .location-modal-container {
    background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%) !important;
    border-color: rgba(255, 85, 0, 0.45) !important;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.16), 0 0 35px rgba(255, 85, 0, 0.15), inset 0 1px 0 #FFFFFF !important;
}

[data-mode="light"] .location-modal-header-text h3 {
    color: #0F172A !important;
}

[data-mode="light"] .location-modal-header-text p {
    color: #475569 !important;
}

[data-mode="light"] .location-gps-detect-bar {
    background: rgba(0, 240, 255, 0.08) !important;
    border-color: rgba(0, 240, 255, 0.30) !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05), inset 0 1px 0 #FFFFFF !important;
}

[data-mode="light"] .btn-auto-gps {
    color: #0284C7 !important;
}

[data-mode="light"] .location-field-label {
    color: #EA580C !important;
}

[data-mode="light"] .hotspot-chip {
    background: #F1F5F9 !important;
    border-color: #CBD5E1 !important;
    color: #1E293B !important;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.06), inset 0 1px 0 #FFFFFF !important;
}

[data-mode="light"] .hotspot-chip:hover,
[data-mode="light"] .hotspot-chip.active {
    background: rgba(255, 107, 0, 0.15) !important;
    border-color: #FF6B00 !important;
    color: #EA580C !important;
    box-shadow: 0 0 12px rgba(255, 107, 0, 0.25), inset 0 1px 0 #FFFFFF !important;
}

[data-mode="light"] .location-form-field label {
    color: #1E293B !important;
}

[data-mode="light"] .modal-input-wrap {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.94) 100%) !important;
    border-color: rgba(255, 85, 0, 0.38) !important;
    box-shadow: 
        inset 0 1.5px 3px rgba(15, 23, 42, 0.06),
        inset 0 0 8px rgba(255, 85, 0, 0.08),
        0 0 10px rgba(255, 85, 0, 0.10),
        inset 0 1px 0 #FFFFFF !important;
}

[data-mode="light"] .modal-input-wrap:hover {
    border-color: rgba(255, 85, 0, 0.70) !important;
    box-shadow: 
        inset 0 1.5px 3px rgba(15, 23, 42, 0.08),
        inset 0 0 12px rgba(255, 85, 0, 0.16),
        0 0 16px rgba(255, 85, 0, 0.22),
        inset 0 1px 0 #FFFFFF !important;
}

[data-mode="light"] .modal-input-wrap:focus-within {
    border-color: #FF5500 !important;
    box-shadow: 
        inset 0 1.5px 3px rgba(15, 23, 42, 0.12),
        inset 0 0 16px rgba(255, 85, 0, 0.26),
        0 0 22px rgba(255, 85, 0, 0.35),
        inset 0 1px 0 #FFFFFF !important;
}

[data-mode="light"] .modal-input-wrap input {
    color: #0F172A !important;
}

[data-mode="light"] .modal-input-wrap input::placeholder {
    color: #64748B !important;
}

[data-mode="light"] .btn-modal-cancel {
    background: linear-gradient(135deg, #F8FAFC 0%, #E2E8F0 100%) !important;
    border-color: rgba(148, 163, 184, 0.45) !important;
    color: #334155 !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08), inset 0 1px 0 #FFFFFF !important;
}

[data-mode="light"] .btn-modal-cancel:hover {
    background: #E2E8F0 !important;
    border-color: rgba(100, 116, 139, 0.65) !important;
    color: #0F172A !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12), inset 0 1px 0 #FFFFFF !important;
}

[data-mode="light"] .location-modal-actions {
    border-top-color: rgba(15, 23, 42, 0.10) !important;
}

/* ==========================================================================
   11. Dispatch Confirmation SystemModal (Zenith SystemModal with DotLottie)
   ========================================================================== */
.system-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 30000;
    background: rgba(11, 18, 32, 0.78);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.system-modal-backdrop.active {
    opacity: 1;
    pointer-events: auto;
}

.system-modal-card {
    position: relative;
    transform: translateZ(0) scale(0.94);
    -webkit-transform: translateZ(0) scale(0.94);
    width: 100%;
    max-width: 470px;
    max-height: 90vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    box-sizing: border-box;
    border-radius: 20px;
    background: linear-gradient(180deg, #1E293B 0%, #0F172A 100%);
    border: 1.5px solid rgba(16, 185, 129, 0.55);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.85), 0 0 35px rgba(16, 185, 129, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.20);
    isolation: isolate;
    contain: layout paint;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    padding: 1.75rem 1.85rem 1.65rem;
    text-align: center;
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}

.system-modal-card::-webkit-scrollbar {
    display: none;
}

.system-modal-backdrop.active .system-modal-card {
    transform: translateZ(0) scale(1);
    -webkit-transform: translateZ(0) scale(1);
}

/* Light Mode Overrides for SystemModal */
[data-mode="light"] .system-modal-card {
    background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
    border: 1.5px solid rgba(16, 185, 129, 0.5);
    box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25), 0 0 25px rgba(16, 185, 129, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.90);
}

/* Modal Close Button (LottieCloseButton Support) */
.btn-system-modal-close {
    position: relative !important;
    right: auto !important;
    top: auto !important;
    z-index: 10;
}

/* Circular DotLottie Icon Pod (Dual-Theme Contrast Specular Container) */
.system-modal-lottie-pod {
    position: relative;
    width: 112px;
    height: 112px;
    margin: 0 auto 1.15rem auto;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0.09) 55%, rgba(255, 255, 255, 0.02) 100%);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 0 32px 4px rgba(16, 185, 129, 0.25), inset 0 1px 3px rgba(255, 255, 255, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

[data-mode="light"] .system-modal-lottie-pod {
    background: linear-gradient(145deg, #1E1B4B 0%, #0F172A 100%);
    border: 2px solid rgba(16, 185, 129, 0.45);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.22), 0 0 24px rgba(16, 185, 129, 0.35), inset 0 1px 2px rgba(255, 255, 255, 0.20);
}

.lottie-pod-glow {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%, rgba(16, 185, 129, 0.25) 0%, transparent 70%);
    pointer-events: none;
    animation: radar-ping 3s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.lottie-animation-container {
    width: 95px;
    height: 95px;
    max-width: 95px;
    max-height: 95px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
    overflow: hidden;
}

.lottie-animation-container svg,
.lottie-animation-container dotlottie-player,
#lottie-svg-car-player,
#lottie-svg-car-player svg {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    display: block;
    margin: auto;
}

/* Status Pill */
.dispatch-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.4);
    color: #10B981;
    font-family: var(--font-hud-telemetry);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    padding: 0.28rem 0.85rem;
    border-radius: 9999px;
    margin-bottom: 0.65rem;
    text-transform: uppercase;
}

.system-modal-title {
    font-family: var(--font-heading);
    font-size: 1.40rem;
    font-weight: 800;
    color: #FFFFFF;
    letter-spacing: -0.01em;
    margin-bottom: 0.45rem;
    line-height: 1.25;
}

[data-mode="light"] .system-modal-title {
    color: #0F172A;
}

.system-modal-subtitle {
    font-family: var(--font-body);
    font-size: 0.92rem;
    color: #CBD5E1;
    line-height: 1.55;
    margin-bottom: 1.35rem;
}

[data-mode="light"] .system-modal-subtitle {
    color: #334155 !important;
}

/* Inset Triage Detail Card */
.system-modal-triage-card {
    background: rgba(15, 23, 42, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 1rem 1.15rem;
    margin-bottom: 1.5rem;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

[data-mode="light"] .system-modal-triage-card {
    background: rgba(241, 245, 249, 0.85);
    border-color: rgba(15, 23, 42, 0.08);
}

.triage-card-row {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.triage-row-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

[data-mode="light"] .triage-row-icon {
    background: #FFFFFF;
    border-color: rgba(15, 23, 42, 0.08);
}

.triage-row-body {
    flex: 1;
    min-width: 0;
}

.triage-label {
    display: block;
    font-family: var(--font-hud-telemetry);
    font-size: 0.76rem;
    font-weight: 800;
    color: #94A3B8;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.20rem;
}

[data-mode="light"] .triage-label {
    color: #64748B !important;
}

.triage-val {
    display: block;
    font-family: var(--font-body);
    font-size: 1.02rem;
    font-weight: 800;
    color: #FFFFFF;
    line-height: 1.35;
    word-break: break-word;
}

[data-mode="light"] .triage-val {
    color: #0F172A !important;
}

.triage-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 0.75rem;
    margin-top: 0.25rem;
}

[data-mode="light"] .triage-card-footer {
    border-top-color: rgba(15, 23, 42, 0.06);
}

.triage-eta-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-hud-telemetry);
    font-size: 0.82rem;
    font-weight: 700;
    color: #10B981;
}

.triage-eta-chip strong {
    color: #FFFFFF;
}

[data-mode="light"] .triage-eta-chip strong {
    color: #0F172A;
}

.eta-pulse-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10B981;
    box-shadow: 0 0 10px #10B981;
    animation: radar-ping 1.8s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.triage-van-id {
    font-family: var(--font-hud-telemetry);
    font-size: 0.74rem;
    font-weight: 800;
    color: #FFA34D;
    letter-spacing: 0.06em;
}

/* Modal Actions Stack */
.system-modal-actions {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    width: 100%;
}

.btn-system-modal-primary {
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
    color: #FFFFFF;
    font-family: var(--font-body);
    font-weight: 800;
    font-size: 0.96rem;
    padding: 0.85rem 1.5rem;
    border-radius: 12px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    box-shadow: 0 4px 18px rgba(16, 185, 129, 0.45);
    transition: var(--transition-smooth);
    cursor: pointer;
    border: none;
}

.btn-system-modal-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(16, 185, 129, 0.65);
}

.btn-system-modal-secondary {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #CBD5E1;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.85rem;
    padding: 0.72rem 1.25rem;
    border-radius: 12px;
    cursor: pointer;
    transition: var(--transition-fast);
}

.btn-system-modal-secondary:hover {
    background: rgba(255, 255, 255, 0.14);
    color: #FFFFFF;
}

[data-mode="light"] .btn-system-modal-secondary {
    background: rgba(15, 23, 42, 0.05);
    border-color: rgba(15, 23, 42, 0.12);
    color: #475569;
}

[data-mode="light"] .btn-system-modal-secondary:hover {
    background: rgba(15, 23, 42, 0.1);
    color: #0F172A;
}

/* ==========================================================================
   MODAL TWO-TIER HEADER SYSTEM (Row 1: Close Button Top Right / Row 2: Content Down)
   ========================================================================== */
.modal-top-bar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    margin-bottom: 0.5rem;
    position: relative;
    z-index: 30;
}

.modal-top-bar .lottie-close-btn {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    margin-left: auto;
    flex-shrink: 0;
}

.modal-top-bar-system {
    margin-bottom: 0.25rem;
}

/* ==========================================================================
   LOTTIE CLOSE BUTTON SYSTEM (§SM-6 & hamburger-close.lottie Integration)
   ========================================================================== */
.lottie-close-btn {
    position: absolute;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #F8FAFC;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: visible;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    padding: 0;
    z-index: 25;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

.lottie-close-btn:hover {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 113, 0, 0.7);
    box-shadow: 0 0 16px rgba(255, 113, 0, 0.45), 0 4px 16px rgba(0, 0, 0, 0.4);
    transform: scale(1.08);
}

.lottie-close-btn:active {
    transform: scale(0.95);
}

.lottie-close-icon-wrap {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    transform: scale(1.3);
    filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.85)) brightness(1.2);
    transition: filter 0.2s ease, transform 0.2s ease;
}

.lottie-close-btn:hover .lottie-close-icon-wrap {
    filter: drop-shadow(0 0 10px rgba(255, 113, 0, 1)) brightness(1.35);
    transform: scale(1.4);
}

.lottie-close-icon-wrap svg {
    width: 100% !important;
    height: 100% !important;
    display: block;
}

/* Fallback if Lottie is rendering or offline */
.lottie-close-icon-wrap:empty::after {
    content: "✕";
    font-size: 0.92rem;
    font-weight: 700;
    color: #FFA34D;
    line-height: 1;
}

/* Drawer Close Override (relative inside flex header) */
.btn-drawer-close.lottie-close-btn {
    position: relative;
    right: auto;
    top: auto;
    flex-shrink: 0;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
    z-index: 30 !important;
}

/* Light mode overrides for Lottie close buttons */
[data-mode="light"] .lottie-close-btn {
    background: rgba(15, 23, 42, 0.08);
    border-color: rgba(15, 23, 42, 0.16);
    color: #0F172A;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
}

[data-mode="light"] .lottie-close-btn:hover {
    background: rgba(15, 23, 42, 0.14);
    border-color: rgba(255, 85, 0, 0.7);
    box-shadow: 0 0 14px rgba(255, 85, 0, 0.35), 0 4px 12px rgba(15, 23, 42, 0.15);
}

/* ==========================================================================
   CUSTOM MODAL SELECT TRIGGERS (Replaces native OS dropdowns)
   ========================================================================== */
.custom-modal-select-trigger {
    cursor: pointer;
    user-select: none;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, transform 0.15s ease;
}

.custom-modal-select-trigger:hover {
    border-color: #FF6B00;
    box-shadow: 0 0 14px rgba(255, 107, 0, 0.32);
    background: rgba(15, 23, 42, 0.95);
    transform: translateY(-1px);
}

.custom-modal-select-trigger:active {
    transform: scale(0.99);
}

.custom-modal-select-trigger:focus-visible {
    outline: none;
    border-color: #00F0FF;
    box-shadow: 0 0 16px rgba(0, 240, 255, 0.4);
}

.custom-select-display-val {
    flex: 1;
    color: #FFFFFF;
    font-weight: 700;
    font-size: 0.90rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 0.4rem;
    letter-spacing: -0.01em;
}

.custom-select-tag {
    font-family: var(--font-hud-telemetry);
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(255, 85, 0, 0.16);
    color: #FFA34D;
    border: 1px solid rgba(255, 85, 0, 0.3);
    margin-right: 0.35rem;
    flex-shrink: 0;
}

.custom-select-tag.tag-cyan {
    background: rgba(0, 240, 255, 0.15);
    color: #00F0FF;
    border-color: rgba(0, 240, 255, 0.3);
}

.custom-select-chevron {
    flex-shrink: 0;
    transition: transform 0.2s ease, stroke 0.2s ease;
}

.custom-modal-select-trigger:hover .custom-select-chevron {
    transform: translateY(2px);
    stroke: #FF5500;
}

[data-mode="light"] .custom-modal-select-trigger {
    background: #FFFFFF;
    border-color: rgba(15, 23, 42, 0.15);
}

[data-mode="light"] .custom-select-display-val {
    color: #0F172A;
}

[data-mode="light"] .custom-modal-select-trigger:hover {
    border-color: #FF5500;
    box-shadow: 0 0 14px rgba(255, 85, 0, 0.25);
    background: #F8FAFC;
}

/* ==========================================================================
   PICKER SUB-MODALS (City & Service Selection Modals)
   ========================================================================== */
.picker-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 30050;
    background: rgba(4, 7, 15, 0.84);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.25s ease;
    isolation: isolate;
}

.picker-modal-backdrop.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.picker-modal-card {
    position: relative;
    width: 100%;
    max-width: 640px;
    max-height: 86vh;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.98) 0%, rgba(10, 15, 28, 0.99) 100%);
    border: 1.5px solid rgba(255, 85, 0, 0.4);
    border-radius: 22px;
    box-shadow: 0 25px 60px -12px rgba(0, 0, 0, 0.85), 0 0 35px rgba(255, 85, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    overflow: hidden;
    transform: scale(0.92) translateY(16px);
    transition: transform 0.26s cubic-bezier(0.16, 1, 0.3, 1);
    contain: layout paint;
}

.picker-modal-backdrop.active .picker-modal-card {
    transform: scale(1) translateY(0);
}

.service-picker-card-wrap {
    max-width: 700px;
    border-color: rgba(0, 240, 255, 0.4);
    box-shadow: 0 25px 60px -12px rgba(0, 0, 0, 0.85), 0 0 35px rgba(0, 240, 255, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* Sub-Modal Header (Two-Row Layout: Row 1 Close Button, Row 2 Header Content) */
.picker-modal-header {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0.95rem 1.45rem 1.15rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    position: relative;
    background: rgba(255, 255, 255, 0.02);
}

.picker-modal-header .modal-top-bar {
    margin-bottom: 0.35rem;
}

.picker-header-content {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    width: 100%;
}

.picker-header-pod {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.picker-header-pod.pod-orange {
    background: rgba(255, 85, 0, 0.14);
    border: 1px solid rgba(255, 85, 0, 0.35);
    box-shadow: 0 0 16px rgba(255, 85, 0, 0.25);
}

.picker-header-pod.pod-cyan {
    background: rgba(0, 240, 255, 0.14);
    border: 1px solid rgba(0, 240, 255, 0.35);
    box-shadow: 0 0 16px rgba(0, 240, 255, 0.25);
}

.picker-header-text {
    flex: 1;
    min-width: 0;
    padding-right: 0;
}

.picker-header-text h3 {
    font-size: 1.30rem;
    font-weight: 800;
    color: #FFFFFF;
    margin: 0 0 0.25rem;
    font-family: var(--font-heading);
    letter-spacing: -0.01em;
}

.picker-header-text p {
    font-size: 0.88rem;
    color: #CBD5E1;
    margin: 0;
    font-family: var(--font-body);
    line-height: 1.45;
}

.btn-picker-modal-close {
    position: relative !important;
    right: auto !important;
    top: auto !important;
}

/* Real-Time Filter & Search Bar */
.picker-search-bar {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin: 0.85rem 1.45rem 0.65rem;
    background: rgba(0, 0, 0, 0.5);
    border: 1.5px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    padding: 0.60rem 0.95rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.picker-search-bar:focus-within {
    border-color: #FF5500;
    box-shadow: 0 0 14px rgba(255, 85, 0, 0.3);
}

.picker-search-bar input {
    background: transparent;
    border: none;
    outline: none;
    width: 100%;
    color: #FFFFFF;
    font-size: 0.94rem;
    font-weight: 500;
    font-family: var(--font-body);
}

.picker-search-bar input::placeholder {
    color: #94A3B8;
}

.picker-search-clear {
    background: none;
    border: none;
    color: #94A3B8;
    cursor: pointer;
    font-size: 0.85rem;
    padding: 2px 6px;
    transition: color 0.2s ease;
}

.picker-search-clear:hover {
    color: #FFFFFF;
}

/* Region Filter Chips */
.picker-filter-chips {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0 1.45rem 0.75rem;
    overflow-x: auto;
    scrollbar-width: none;
}

.picker-filter-chips::-webkit-scrollbar {
    display: none;
}

.region-filter-chip {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #CBD5E1;
    font-size: 0.84rem;
    font-weight: 700;
    padding: 0.38rem 0.85rem;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.region-filter-chip:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #FFFFFF;
    border-color: rgba(255, 255, 255, 0.28);
}

.region-filter-chip.active {
    background: rgba(255, 85, 0, 0.25);
    border-color: #FF5500;
    color: #FFA34D;
    box-shadow: 0 0 12px rgba(255, 85, 0, 0.35);
}

/* Scrollable Container */
.picker-options-scrollable {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem 1.45rem 1rem;
    max-height: 48vh;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 85, 0, 0.3) transparent;
}

.picker-options-scrollable::-webkit-scrollbar {
    width: 6px;
}

.picker-options-scrollable::-webkit-scrollbar-track {
    background: transparent;
}

.picker-options-scrollable::-webkit-scrollbar-thumb {
    background: rgba(255, 85, 0, 0.35);
    border-radius: 4px;
}

/* City Grid & Cards */
.city-options-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0.85rem;
}

.city-option-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    padding: 0.85rem 1.05rem;
    position: relative;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    user-select: none;
}

.city-option-card:hover {
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(255, 113, 0, 0.55);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4), 0 0 16px rgba(255, 113, 0, 0.22);
}

.city-option-card.selected {
    background: rgba(255, 85, 0, 0.14);
    border-color: #FF5500;
    box-shadow: 0 0 20px rgba(255, 85, 0, 0.35), inset 0 0 12px rgba(255, 85, 0, 0.12);
}

.city-card-header {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.40rem;
    padding-right: 1.8rem;
}

.city-card-pin {
    font-size: 1.00rem;
}

.city-card-name {
    font-size: 1.02rem;
    font-weight: 800;
    color: #FFFFFF;
    font-family: var(--font-heading);
}

.city-card-desc {
    font-size: 0.84rem;
    color: #CBD5E1;
    margin: 0;
    line-height: 1.45;
    padding-right: 1.5rem;
}

.city-check-indicator {
    position: absolute;
    right: 0.85rem;
    top: 0.85rem;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #FF5500;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.city-option-card.selected .city-check-indicator {
    opacity: 1;
    transform: scale(1);
}

/* Badges for City Cards */
.city-card-badge {
    font-family: var(--font-hud-telemetry);
    font-size: 0.74rem;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 4px;
    white-space: nowrap;
    margin-left: auto;
}

.badge-emerald {
    background: rgba(16, 185, 129, 0.15);
    color: #10B981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.badge-cyan {
    background: rgba(0, 240, 255, 0.15);
    color: #00F0FF;
    border: 1px solid rgba(0, 240, 255, 0.3);
}

.badge-amber {
    background: rgba(251, 191, 36, 0.15);
    color: #FBBF24;
    border: 1px solid rgba(251, 191, 36, 0.3);
}

.badge-purple {
    background: rgba(168, 85, 247, 0.15);
    color: #C084FC;
    border: 1px solid rgba(168, 85, 247, 0.3);
}

/* Service Options Grid & Cards */
.service-options-grid {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.service-option-card {
    display: flex;
    align-items: flex-start;
    gap: 0.95rem;
    background: rgba(255, 255, 255, 0.035);
    border: 1.5px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    padding: 0.95rem 1.15rem;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    user-select: none;
}

.service-option-card:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(0, 240, 255, 0.55);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 18px rgba(0, 240, 255, 0.22);
}

.service-option-card.selected {
    background: rgba(0, 240, 255, 0.1);
    border-color: #00F0FF;
    box-shadow: 0 0 24px rgba(0, 240, 255, 0.25), inset 0 0 12px rgba(0, 240, 255, 0.08);
}

.service-card-icon-pod {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.service-card-icon-pod.pod-emerald {
    background: rgba(16, 185, 129, 0.15);
    border-color: rgba(16, 185, 129, 0.35);
}

.service-card-icon-pod.pod-amber {
    background: rgba(251, 191, 36, 0.15);
    border-color: rgba(251, 191, 36, 0.35);
}

.service-card-icon-pod.pod-cyan {
    background: rgba(0, 240, 255, 0.15);
    border-color: rgba(0, 240, 255, 0.35);
}

.service-card-icon-pod.pod-red {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.35);
}

.service-card-icon-pod.pod-purple {
    background: rgba(168, 85, 247, 0.15);
    border-color: rgba(168, 85, 247, 0.35);
}

.service-card-content {
    flex: 1;
    min-width: 0;
    padding-right: 2.2rem;
}

.service-card-title-row {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 0.3rem;
    flex-wrap: wrap;
}

.service-card-title {
    font-size: 1.08rem;
    font-weight: 800;
    color: #FFFFFF;
    margin: 0;
    font-family: var(--font-heading);
    letter-spacing: -0.01em;
}

.service-card-desc {
    font-size: 0.88rem;
    color: #CBD5E1;
    margin: 0 0 0.65rem;
    line-height: 1.55;
}

.service-card-features {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.service-card-features span {
    font-size: 0.80rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: #E2E8F0;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.service-card-tag {
    font-family: var(--font-hud-telemetry);
    font-size: 0.74rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 3px 9px;
    border-radius: 999px;
}

.tag-emerald {
    background: rgba(16, 185, 129, 0.18);
    color: #10B981;
    border: 1px solid rgba(16, 185, 129, 0.35);
}

.tag-amber {
    background: rgba(251, 191, 36, 0.18);
    color: #FBBF24;
    border: 1px solid rgba(251, 191, 36, 0.35);
}

.tag-cyan {
    background: rgba(0, 240, 255, 0.18);
    color: #00F0FF;
    border: 1px solid rgba(0, 240, 255, 0.35);
}

.tag-purple {
    background: rgba(168, 85, 247, 0.18);
    color: #C084FC;
    border: 1px solid rgba(168, 85, 247, 0.35);
}

.tag-red {
    background: rgba(239, 68, 68, 0.18);
    color: #EF4444;
    border: 1px solid rgba(239, 68, 68, 0.35);
}

.service-check-indicator {
    position: absolute;
    right: 1.15rem;
    top: 1.15rem;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #00F0FF;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.service-option-card.selected .service-check-indicator {
    opacity: 1;
    transform: scale(1);
}

/* Sub-Modal Footer */
.picker-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.45rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.25);
}

.picker-footer-badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.84rem;
    font-weight: 600;
    color: #CBD5E1;
    font-family: var(--font-body);
}

.btn-picker-done {
    background: linear-gradient(135deg, #FF6B00 0%, #FF3D00 100%);
    color: #FFFFFF;
    font-weight: 800;
    font-size: 0.95rem;
    padding: 0.70rem 1.45rem;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 0 16px rgba(255, 107, 0, 0.4);
    font-family: var(--font-body);
}

.btn-picker-done:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 22px rgba(255, 107, 0, 0.6);
}

.btn-picker-done-cyan {
    background: linear-gradient(135deg, #00F0FF 0%, #0284C7 100%);
    color: #040814;
    font-weight: 800;
    box-shadow: 0 0 16px rgba(0, 240, 255, 0.4);
}

.btn-picker-done-cyan:hover {
    box-shadow: 0 0 24px rgba(0, 240, 255, 0.65);
}

/* Light mode overrides for sub-modals */
[data-mode="light"] .picker-modal-card {
    background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
    border-color: rgba(255, 85, 0, 0.45);
    box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25), 0 0 25px rgba(255, 85, 0, 0.15);
}

[data-mode="light"] .picker-modal-header {
    border-bottom-color: rgba(15, 23, 42, 0.08);
}

[data-mode="light"] .picker-header-text h3 {
    color: #0F172A;
}

[data-mode="light"] .picker-header-text p {
    color: #475569 !important;
}

[data-mode="light"] .picker-search-bar {
    background: #F1F5F9;
    border-color: rgba(15, 23, 42, 0.12);
}

[data-mode="light"] .picker-search-bar input {
    color: #0F172A;
}

[data-mode="light"] .picker-search-bar input::placeholder {
    color: #64748B;
}

[data-mode="light"] .region-filter-chip {
    background: #F1F5F9;
    border-color: rgba(15, 23, 42, 0.12);
    color: #475569;
}

[data-mode="light"] .region-filter-chip.active {
    background: rgba(255, 85, 0, 0.15);
    border-color: #FF5500;
    color: #C2410C;
}

[data-mode="light"] .city-option-card {
    background: #FFFFFF;
    border-color: rgba(15, 23, 42, 0.1);
}

[data-mode="light"] .city-option-card:hover {
    background: #F8FAFC;
    border-color: #FF5500;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.1);
}

[data-mode="light"] .city-option-card.selected {
    background: #FFF7ED;
    border-color: #FF5500;
}

[data-mode="light"] .city-card-name {
    color: #0F172A;
}

[data-mode="light"] .city-card-desc {
    color: #334155 !important;
    font-weight: 500;
}

[data-mode="light"] .service-option-card {
    background: #FFFFFF;
    border-color: rgba(15, 23, 42, 0.1);
}

[data-mode="light"] .service-option-card:hover {
    background: #F8FAFC;
    border-color: #0284C7;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.1);
}

[data-mode="light"] .service-option-card.selected {
    background: #F0F9FF;
    border-color: #0284C7;
}

[data-mode="light"] .service-card-title {
    color: #0F172A;
}

[data-mode="light"] .service-card-desc {
    color: #334155 !important;
    font-weight: 500;
}

[data-mode="light"] .service-card-features span {
    color: #1E293B !important;
    background: rgba(15, 23, 42, 0.06) !important;
    border-color: rgba(15, 23, 42, 0.12) !important;
}

[data-mode="light"] .picker-modal-footer {
    background: #F8FAFC;
    border-top-color: rgba(15, 23, 42, 0.08);
}

[data-mode="light"] .picker-footer-badge {
    color: #334155 !important;
}

/* Mobile responsive for picker modals */
@media (max-width: 640px) {
    .picker-modal-backdrop {
        padding: 0.65rem;
    }
    .picker-modal-card {
        max-height: 92vh;
        border-radius: 18px;
    }
    .city-options-grid {
        grid-template-columns: 1fr;
    }
    .picker-modal-header {
        padding: 1rem 1.15rem 0.85rem;
    }
    .picker-search-bar {
        margin: 0.65rem 1.15rem 0.5rem;
    }
    .picker-filter-chips {
        padding: 0 1.15rem 0.65rem;
    }
    .picker-options-scrollable {
        padding: 0.4rem 1.15rem 0.85rem;
        max-height: 52vh;
    }
    .picker-modal-footer {
        flex-direction: column;
        align-items: stretch;
        padding: 0.75rem 1.15rem;
    }
    .btn-picker-done {
        width: 100%;
        text-align: center;
    }
}

/* Light Mode Overrides for Cockpit Dashboard (Mobile Card Shell) */
@media (max-width: 768px) {
    [data-mode="light"] .cockpit-dashboard-screen {
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(241, 245, 249, 0.98) 100%) !important;
        border: 1.5px solid rgba(255, 107, 0, 0.35) !important;
        box-shadow: 0 12px 35px rgba(15, 23, 42, 0.14), 0 0 25px rgba(255, 107, 0, 0.15) !important;
    }
}

.dispatch-telemetry-status,
#dispatch-telemetry-status,
.dispatch-telemetry-status span,
#dispatch-status-text,
.cockpit-dashboard-screen .dispatch-telemetry-status,
[data-mode="light"] .dispatch-telemetry-status,
[data-mode="light"] #dispatch-telemetry-status,
[data-mode="light"] #dispatch-status-text,
[data-mode="light"] .dispatch-telemetry-status span,
[data-mode="light"] .cockpit-dashboard-screen .dispatch-telemetry-status,
[data-mode="dark"] .dispatch-telemetry-status,
[data-mode="dark"] #dispatch-telemetry-status,
[data-mode="dark"] #dispatch-status-text,
[data-mode="dark"] .dispatch-telemetry-status span,
[data-mode="dark"] .cockpit-dashboard-screen .dispatch-telemetry-status {
    color: #CBD5E1 !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.95), 0 0 8px rgba(0, 0, 0, 0.8) !important;
}

.dispatch-telemetry-status strong,
#dispatch-telemetry-status strong,
#dispatch-status-text strong,
.cockpit-dashboard-screen .dispatch-telemetry-status strong,
[data-mode="light"] .dispatch-telemetry-status strong,
[data-mode="light"] #dispatch-telemetry-status strong,
[data-mode="light"] #dispatch-status-text strong,
[data-mode="light"] .cockpit-dashboard-screen .dispatch-telemetry-status strong,
[data-mode="dark"] .dispatch-telemetry-status strong,
[data-mode="dark"] #dispatch-telemetry-status strong,
[data-mode="dark"] #dispatch-status-text strong,
[data-mode="dark"] .cockpit-dashboard-screen .dispatch-telemetry-status strong {
    color: #FFFFFF !important;
    font-weight: 700 !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.95), 0 0 8px rgba(0, 0, 0, 0.8) !important;
}

[data-mode="light"] .display-panel-status {
    color: #475569;
}

[data-mode="light"] .display-panel-header {
    border-bottom-color: rgba(0, 0, 0, 0.08);
}

/* ==========================================================================
   10. Services Grid (Mobile Workshop Capabilities)
   ========================================================================== */
.section-padding {
    padding: 6rem 0;
}

.section-head {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 3.5rem;
}

.section-tag {
    font-size: 0.88rem;
    font-weight: 800;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    display: block;
    margin-bottom: 0.75rem;
}

.section-title {
    font-size: clamp(2rem, 3.8vw, 2.85rem);
    font-weight: 900;
    margin-bottom: 1rem;
    color: var(--text-primary);
    line-height: 1.22;
}

.section-description {
    color: var(--text-secondary);
    font-size: 1.10rem;
    line-height: 1.6;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem;
    width: 100%;
}

/* ==========================================================================
   Why Choose Us (The Car Doctor Standard) - 4-Column Desktop / 2-Column iPad & Mobile
   ========================================================================== */
.why-us-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
    width: 100%;
    margin-top: 1.5rem;
}

.why-us-card {
    padding: 1.5rem 1.4rem !important;
    border-radius: var(--radius-md) !important; /* 12px Subtle Curve Doctrine §ZA-3 */
    background: var(--bg-surface);
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s ease, border-color 0.28s ease;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: 100%;
    box-sizing: border-box;
}

.why-us-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--glow-card-hover);
}

.why-us-card-header {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 0.85rem;
    width: 100%;
}

.why-us-svg-pod {
    width: 88px;
    height: 88px;
    min-width: 88px;
    max-width: 88px;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-subtle);
    padding: 8px;
    box-sizing: border-box;
    flex-shrink: 0;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-mode="light"] .why-us-svg-pod {
    background: rgba(15, 23, 42, 0.04);
    border-color: rgba(15, 23, 42, 0.08);
}

.why-us-card:hover .why-us-svg-pod {
    transform: scale(1.08) rotate(-4deg);
}

.why-us-svg-pod img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.25));
}

.why-us-card-title {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.25;
    margin: 0;
    flex: 1;
}

[data-mode="light"] .why-us-card-title {
    color: #0F172A;
}

.why-us-card-desc {
    width: 100% !important;
    font-size: 0.88rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
    flex-grow: 1;
}

[data-mode="light"] .why-us-card-desc {
    color: #334155;
}

/* ==========================================================================
   Horizontal Vehicle/Service Inventory Card (2-Column Grid Layout)
   Inspired by Automotive Showcase & Philippine On-Site Rescue Mechanics
   ========================================================================== */
.service-card {
    display: grid;
    grid-template-columns: 240px 1fr;
    padding: 0;
    overflow: hidden;
    position: relative;
    border-radius: var(--radius-md); /* 12px Subtle Curve Doctrine §ZA-3 */
    background: var(--bg-surface);
    border: 1.5px solid var(--border-card);
    box-shadow: var(--card-shadow);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    background-clip: padding-box;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.28s ease, box-shadow 0.28s ease;
}

.service-card:hover {
    transform: translateY(-4px);
    border-color: var(--border-glow);
    box-shadow: var(--glow-card-hover);
}

/* Media Showcase Container (Left Column) */
.service-card-media {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 250px;
    overflow: hidden;
    background: #090d16;
}

.service-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.service-card:hover .service-card-media img {
    transform: scale(1.06);
}

/* Translucent Photo Counter Badge (📷 4 🎥 1) */
.service-media-badge {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    background: rgba(11, 15, 25, 0.82);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 4px;
    padding: 0.25rem 0.55rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.76rem;
    font-weight: 700;
    color: #ffffff;
    font-family: var(--font-mono);
    letter-spacing: 0.04em;
    z-index: 2;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* Diagonal Ribbon in Bottom-Right Corner - Retired/Hidden per User Direction */
.service-media-ribbon {
    display: none !important;
}

/* Card Body (Right Column) */
.service-card-body {
    padding: 1.4rem 1.5rem 1.25rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.75rem;
    position: relative;
    background: var(--bg-surface);
}

/* Header with Title and Angled Price Tag */
.service-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
}

.service-card-header .service-title {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.3;
    margin: 0;
    flex: 1;
}

/* Angled Price Badge */
.service-price-tag {
    background: linear-gradient(135deg, var(--primary) 0%, rgba(var(--primary-rgb), 0.88) 100%);
    color: #ffffff;
    padding: 0.35rem 0.75rem;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.1;
    box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.35);
    flex-shrink: 0;
}

.service-price-tag .price-original {
    font-size: 0.76rem;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: line-through;
    font-family: var(--font-mono);
    font-weight: 700;
}

.service-price-tag .price-current {
    font-size: 1.22rem;
    font-weight: 900;
    color: #ffffff;
    font-family: var(--font-mono);
    letter-spacing: -0.02em;
}

.service-price-tag .price-unit {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.95);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 800;
}

.service-card .service-desc {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
    flex-grow: 1;
}

.service-card .service-features-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.service-card .service-features-list li {
    font-size: 0.90rem;
    color: var(--feature-text-color);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    line-height: 1.4;
}

.service-card .service-features-list li::before {
    content: '✓';
    color: var(--primary);
    font-weight: 900;
    font-size: 0.95rem;
}

/* Action Button Row — Tactile Paper Glass Call to Action Architecture */
.service-card-actions {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding-top: 0.95rem;
    border-top: 1px solid var(--border-subtle);
    margin-top: auto;
}

.service-action-btn {
    flex: 1;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.70rem 0.90rem;
    min-height: 42px;
    font-size: 0.82rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
    white-space: nowrap;
    position: relative;
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
}

.service-action-btn svg {
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.service-action-btn:hover svg {
    transform: scale(1.15);
}

.service-action-btn:active {
    transform: scale(0.98) translateY(1px);
}

/* 1. Book Unit (Dark Mode Primary Action — Luminous Emergency Amber Glass) */
.service-action-primary {
    background: linear-gradient(135deg, #FF6B00 0%, #EA580C 100%);
    color: #FFFFFF !important;
    border: 1px solid rgba(255, 255, 255, 0.40);
    box-shadow: inset 0 1px 1.5px 0 rgba(255, 255, 255, 0.55), 0 4px 16px rgba(255, 107, 0, 0.45);
}

.service-action-primary:hover {
    background: linear-gradient(135deg, #FF7B1C 0%, #EA580C 100%);
    border-color: rgba(255, 255, 255, 0.65);
    box-shadow: inset 0 1px 2px 0 rgba(255, 255, 255, 0.8), 0 6px 22px rgba(255, 107, 0, 0.65);
    transform: translateY(-1.5px);
}

/* 2. Dispatch (Dark Mode Secondary Action — Soft Luminous Amber Paper Glass) */
.service-action-secondary {
    background: linear-gradient(135deg, rgba(255, 120, 30, 0.28) 0%, rgba(255, 80, 0, 0.18) 100%);
    color: #FFAE70 !important;
    border: 1px solid rgba(255, 150, 60, 0.55);
    box-shadow: inset 0 1px 1.5px rgba(255, 255, 255, 0.28), 0 3px 12px rgba(255, 107, 0, 0.22);
}

.service-action-secondary svg {
    color: #FFAE70;
}

.service-action-secondary:hover {
    background: linear-gradient(135deg, rgba(255, 120, 30, 0.38) 0%, rgba(255, 80, 0, 0.26) 100%);
    color: #FFC08A !important;
    border-color: rgba(255, 150, 60, 0.8);
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.4), 0 5px 18px rgba(255, 107, 0, 0.32);
    transform: translateY(-1.5px);
}

/* 3. Call (Dark Mode Tertiary Action — Frosted Platinum-Ice Glass) */
.service-action-call {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0.10) 100%);
    color: #FFFFFF !important;
    border: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow: inset 0 1px 1.5px rgba(255, 255, 255, 0.40), 0 3px 12px rgba(0, 0, 0, 0.35);
}

.service-action-call svg {
    color: #F1F5F9;
}

.service-action-call:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.30) 0%, rgba(255, 255, 255, 0.18) 100%);
    color: #FFFFFF !important;
    border-color: rgba(255, 255, 255, 0.55);
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.55), 0 5px 18px rgba(0, 0, 0, 0.40);
    transform: translateY(-1.5px);
}

@media (max-width: 1024px) {
    .service-card {
        grid-template-columns: 1fr !important;
    }
    .service-card-media {
        width: 100% !important;
        min-height: 220px;
        height: 220px;
    }
    .service-card-body {
        padding: 1.35rem 1.25rem 1.20rem;
    }
    .service-card-header {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        gap: 0.75rem;
    }
    .service-card-header .service-title {
        flex: 1 1 auto;
        font-size: 1.20rem;
        line-height: 1.3;
        margin: 0;
    }
    .service-price-tag {
        align-self: flex-start;
        align-items: flex-end;
        flex-shrink: 0;
    }
    .service-card-actions {
        flex-wrap: wrap;
        gap: 0.55rem;
        padding-top: 0.90rem;
    }
    .service-action-btn {
        flex: 1 1 calc(50% - 0.30rem);
        min-height: 42px;
    }
    .service-action-call {
        flex: 1 1 100%;
    }
}

@media (max-width: 768px) {
    .services-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem;
    }
    .service-card {
        grid-template-columns: 1fr !important;
    }
    .service-card-media {
        width: 100% !important;
        min-height: 210px;
        height: 210px;
    }
    .service-card-body {
        padding: 1.25rem 1.15rem;
    }
}

/* ==========================================================================
/* ==========================================================================
   10. How It Works (Emergency Roadside Process)
   ========================================================================== */
.steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.75rem;
    margin-top: 2rem;
    width: 100%;
}

.step-card {
    padding: 2.25rem 1.85rem;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.step-card:hover {
    transform: translateY(-5px);
    border-color: var(--border-glow);
    box-shadow: var(--glow-card-hover);
}

.step-badge {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--primary);
    background: rgba(var(--primary-rgb), 0.12);
    padding: 0.25rem 0.65rem;
    border-radius: var(--radius-full);
    letter-spacing: 0.05em;
    z-index: 2;
}

/* Header Layout: Icon Column (108px) + Card Title Column */
.step-header-grid {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    width: 100%;
}

.step-icon-col {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 108px;
}

.step-icon-wrap {
    width: 108px;
    min-width: 108px;
    max-width: 108px;
    height: 108px;
    min-height: 108px;
    border-radius: 14px;
    background: rgba(var(--primary-rgb), 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 0 24px rgba(var(--primary-rgb), 0.32);
    border: 1.5px solid rgba(var(--primary-rgb), 0.40);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}

.step-card:hover .step-icon-wrap {
    transform: scale(1.08);
    box-shadow: 0 0 30px rgba(var(--primary-rgb), 0.55);
    border-color: rgba(var(--primary-rgb), 0.65);
}

.step-lottie-container {
    width: 100%;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    box-sizing: border-box;
}

.step-lottie-container dotlottie-player,
.step-lottie-container svg {
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    display: block;
    max-width: 100%;
    max-height: 100%;
    transform: scale(1.18);
    transform-origin: center center;
}

.step-title-col {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
    min-width: 0;
    padding-right: 2.75rem; /* Safe clearance for the top-right Step badge */
}

.step-title {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.3;
    margin: 0;
}

.step-desc {
    font-size: 0.96rem;
    color: var(--text-secondary);
    line-height: 1.6;
    flex-grow: 1;
}

.step-highlight {
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding-top: 0.75rem;
    border-top: 1px dashed var(--border-subtle);
}

/* ==========================================================================
   11. Real Driver Reviews & Testimonials Carousel
   ========================================================================== */
.testimonials-carousel {
    position: relative;
    width: 100%;
    margin-top: 2.5rem;
}

.carousel-viewport {
    overflow: hidden;
    width: 100%;
    position: relative;
    padding: 0.5rem 0.25rem 1.25rem;
    touch-action: pan-y;
}

.carousel-track {
    display: flex;
    gap: 1.5rem;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
    user-select: none;
    -webkit-user-select: none;
}

.carousel-slide {
    flex: 0 0 calc((100% - (2 * 1.5rem)) / 3);
    min-width: 0;
    box-sizing: border-box;
    display: flex;
}

.carousel-slide .review-card {
    width: 100%;
    height: 100%;
    margin: 0;
}

.reviews-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-top: 2rem;
    width: 100%;
}

.review-card {
    padding: 2.25rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1.25rem;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.review-card:hover {
    transform: translateY(-4px);
    border-color: var(--border-glow);
    box-shadow: var(--glow-card-hover);
}

.review-stars {
    color: #F59E0B;
    font-size: 1.25rem;
    letter-spacing: 0.2em;
}

.review-text {
    font-size: 1.02rem;
    color: var(--text-secondary);
    line-height: 1.65;
    font-style: normal;
}

.review-author {
    display: flex;
    align-items: center;
    gap: 1.10rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border-subtle);
}

.review-avatar {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: var(--primary-gradient);
    color: #FFFFFF;
    font-weight: 800;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45), 0 0 0 2px rgba(255, 107, 0, 0.45);
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
}

.review-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    border-radius: 50%;
    display: block;
}

.review-name {
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--text-primary);
}

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

/* Carousel Controls & Indicators */
.carousel-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.carousel-btn {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full);
    background: var(--bg-surface-elevated);
    border: 1.5px solid var(--border-card);
    color: var(--text-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--card-shadow);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    flex-shrink: 0;
}

.carousel-btn:hover {
    background: var(--primary-gradient);
    color: #FFFFFF;
    border-color: transparent;
    transform: scale(1.08);
    box-shadow: 0 6px 20px rgba(var(--primary-rgb), 0.45);
}

.carousel-btn:active {
    transform: scale(0.95);
}

.carousel-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
    transform: none;
    box-shadow: none;
}

.carousel-dots {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.carousel-dot {
    width: 10px;
    height: 10px;
    border-radius: var(--radius-full);
    background: var(--border-subtle);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.carousel-dot:hover {
    background: var(--primary);
    transform: scale(1.2);
}

.carousel-dot.active {
    width: 28px;
    background: var(--primary-gradient);
    box-shadow: 0 0 12px rgba(var(--primary-rgb), 0.5);
}

.production-trust-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(var(--primary-rgb), 0.08);
    border: 1px solid rgba(var(--primary-rgb), 0.25);
    padding: 0.5rem 1rem;
    border-radius: var(--radius-full);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-primary);
    box-shadow: 0 0 15px rgba(var(--primary-rgb), 0.15);
}

/* ==========================================================================
   12. Footer
   ========================================================================== */
.main-footer {
    border-top: 1px solid var(--footer-border);
    background: var(--footer-bg);
    color: #FFFFFF;
    padding: 4.5rem 0 2rem;
    margin-top: 0;
    transition: var(--transition-theme);
}

.main-footer .brand-name {
    font-size: 1.25rem;
    font-weight: 800;
    color: #FFFFFF !important;
}

.main-footer .brand-tagline {
    font-size: 0.90rem;
    color: #CBD5E1 !important;
}

.main-footer p {
    font-size: 0.95rem;
    color: #CBD5E1 !important;
    line-height: 1.6;
}

.main-footer .production-trust-badge {
    color: #E2E8F0 !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

#reviews {
    padding-bottom: 4.5rem;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: 3rem;
    margin-bottom: 4rem;
}

.footer-col-title {
    font-size: 1.15rem;
    font-weight: 800;
    margin-bottom: 1.25rem;
    color: #FFFFFF;
}

.footer-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.footer-links a {
    color: #CBD5E1;
    font-size: 0.95rem;
}

.footer-links a:hover {
    color: var(--primary);
    transform: translateX(4px);
}

/* Emergency Hotline Call Button & 2-Row Layout with Customer Support Lottie Pod */
.footer-call-btn {
    width: 100%;
    max-width: 320px;
    margin-bottom: 0.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.85rem;
    padding: 0.75rem 1.15rem;
    border-radius: var(--radius-md); /* 12px Subtle Curve Doctrine §ZA-3 */
    background: var(--primary-gradient);
    color: #FFFFFF !important;
    text-decoration: none;
    box-shadow: 0 4px 16px rgba(var(--primary-rgb), 0.45);
    box-sizing: border-box;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
}

.footer-call-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 26px rgba(var(--primary-rgb), 0.65);
}

.footer-call-icon-pod {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 50%;
    background: #FFFFFF;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.28);
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.footer-call-btn:hover .footer-call-icon-pod {
    transform: scale(1.08);
}

.footer-call-icon-pod dotlottie-player,
.footer-call-icon-pod svg {
    width: 38px;
    height: 38px;
    display: block;
}

.footer-call-label-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    line-height: 1.15;
    gap: 0.15rem;
}

.footer-call-primary {
    color: #FFFFFF;
    font-size: 1.05rem;
    font-weight: 900;
    letter-spacing: 0.03em;
    font-family: var(--font-mono, inherit);
    white-space: nowrap;
}

.footer-call-secondary {
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

/* Light Mode Overrides for High Contrast */
[data-mode="light"] .footer-call-icon-pod {
    background: #FFFFFF;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.22);
}

/* Dark Mode Overrides for High Contrast */
[data-mode="dark"] .footer-call-icon-pod {
    background: #FFFFFF;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

.footer-bottom {
    border-top: 1px solid var(--footer-border);
    padding-top: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 0.88rem;
    color: #94A3B8;
}

.flagship-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 0.4rem 0.9rem;
    border-radius: var(--radius-full);
    font-size: 0.82rem;
    font-weight: 600;
    color: #CBD5E1;
}

/* ==========================================================================
   Dual-Theme High-Contrast Readability Enhancements
   WCAG AA Compliant Typography for Page Sections & Cards
   ========================================================================== */

/* Dark Mode Typography Luminance */
[data-mode="dark"] .section-description,
:root:not([data-mode="light"]) .section-description {
    color: #CBD5E1 !important;
}

[data-mode="dark"] .why-us-card-desc,
:root:not([data-mode="light"]) .why-us-card-desc {
    color: #CBD5E1 !important;
}

[data-mode="dark"] .service-card .service-desc,
:root:not([data-mode="light"]) .service-card .service-desc {
    color: #CBD5E1 !important;
}

[data-mode="dark"] .service-card .service-features-list li,
:root:not([data-mode="light"]) .service-card .service-features-list li {
    color: #E2E8F0 !important;
}

[data-mode="dark"] .step-desc,
:root:not([data-mode="light"]) .step-desc {
    color: #CBD5E1 !important;
}

[data-mode="dark"] .review-text,
:root:not([data-mode="light"]) .review-text {
    color: #E2E8F0 !important;
}

[data-mode="dark"] .review-meta,
:root:not([data-mode="light"]) .review-meta {
    color: #94A3B8 !important;
}

/* Light Mode Typography Luminance & High-Contrast Cards */
[data-mode="light"] .section-description {
    color: #334155 !important;
}

[data-mode="light"] .why-us-card {
    background: #FFFFFF !important;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.08) !important;
}

[data-mode="light"] .why-us-card-title {
    color: #0F172A !important;
}

[data-mode="light"] .why-us-card-desc {
    color: #334155 !important;
}

/* Zenith Aura Card Doctrine (§ZA-9) — High-Contrast Visible Aura Borders in Light Theme */
[data-mode="light"] .service-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.96) 0%, rgba(248, 250, 252, 0.98) 100%) !important;
    border: 1.5px solid var(--border-card) !important;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.08), 0 0 16px rgba(var(--primary-rgb), 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(16px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
    border-radius: var(--radius-md) !important;
}

[data-mode="light"] .service-card:hover {
    transform: translateY(-4px) !important;
    border-color: var(--border-glow) !important;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12), 0 0 24px rgba(var(--primary-rgb), 0.35), inset 0 1px 0 #FFFFFF !important;
}

[data-mode="light"] .service-card-body {
    background: transparent !important;
}

[data-mode="light"] .service-card-header .service-title {
    color: #0F172A !important;
}

[data-mode="light"] .service-card .service-desc {
    color: #334155 !important;
}

[data-mode="light"] .service-card .service-features-list li {
    color: #1E293B !important;
}

/* Light Mode — Tactile Paper Glass Action Buttons (Soft High-Contrast Visible Backdrops) */
[data-mode="light"] .service-action-primary {
    background: linear-gradient(135deg, #FF6B00 0%, #EA580C 100%) !important;
    color: #FFFFFF !important;
    border: 1px solid rgba(255, 255, 255, 0.50) !important;
    box-shadow: inset 0 1px 1.5px 0 rgba(255, 255, 255, 0.65), 0 4px 14px rgba(255, 107, 0, 0.35) !important;
}

[data-mode="light"] .service-action-primary:hover {
    background: linear-gradient(135deg, #FF7B1C 0%, #EA580C 100%) !important;
    border-color: rgba(255, 255, 255, 0.75) !important;
    box-shadow: inset 0 1px 2px 0 rgba(255, 255, 255, 0.85), 0 6px 18px rgba(255, 107, 0, 0.50) !important;
    transform: translateY(-1.5px);
}

[data-mode="light"] .service-action-secondary {
    background: linear-gradient(135deg, #FFF0E6 0%, #FFE5D4 100%) !important;
    color: #C2410C !important;
    border: 1px solid rgba(255, 107, 0, 0.38) !important;
    box-shadow: inset 0 1px 1.5px 0 #FFFFFF, 0 3px 10px rgba(255, 107, 0, 0.12) !important;
}

[data-mode="light"] .service-action-secondary svg {
    color: #C2410C !important;
}

[data-mode="light"] .service-action-secondary:hover {
    background: linear-gradient(135deg, #FFE8D6 0%, #FFDBC2 100%) !important;
    color: #9A3412 !important;
    border-color: rgba(255, 107, 0, 0.55) !important;
    box-shadow: inset 0 1px 2px 0 #FFFFFF, 0 5px 14px rgba(255, 107, 0, 0.22) !important;
    transform: translateY(-1.5px);
}

[data-mode="light"] .service-action-call {
    background: linear-gradient(135deg, #EEF2F6 0%, #E2E8F0 100%) !important;
    color: #0F172A !important;
    border: 1px solid rgba(148, 163, 184, 0.65) !important;
    box-shadow: inset 0 1px 1.5px 0 #FFFFFF, 0 3px 8px rgba(15, 23, 42, 0.08) !important;
}

[data-mode="light"] .service-action-call svg {
    color: #1E293B !important;
}

[data-mode="light"] .service-action-call:hover {
    background: linear-gradient(135deg, #E2E8F0 0%, #CBD5E1 100%) !important;
    color: #020617 !important;
    border-color: rgba(100, 116, 139, 0.85) !important;
    box-shadow: inset 0 1px 2px 0 #FFFFFF, 0 5px 14px rgba(15, 23, 42, 0.14) !important;
    transform: translateY(-1.5px);
}

[data-mode="light"] .step-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.96) 0%, rgba(248, 250, 252, 0.98) 100%) !important;
    border: 1.5px solid var(--border-card) !important;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.08), 0 0 16px rgba(var(--primary-rgb), 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(16px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
    border-radius: var(--radius-md) !important;
}

[data-mode="light"] .step-title {
    color: #0F172A !important;
}

[data-mode="light"] .step-desc {
    color: #334155 !important;
}

[data-mode="light"] .review-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.96) 0%, rgba(248, 250, 252, 0.98) 100%) !important;
    border: 1.5px solid var(--border-card) !important;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.08), 0 0 16px rgba(var(--primary-rgb), 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(16px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
    border-radius: var(--radius-md) !important;
}

[data-mode="light"] .review-name {
    color: #0F172A !important;
}

[data-mode="light"] .review-text {
    color: #1E293B !important;
}

[data-mode="light"] .review-meta {
    color: #475569 !important;
}

[data-mode="light"] .carousel-btn {
    background: #FFFFFF !important;
    color: #0F172A !important;
    border: 1.5px solid #CBD5E1 !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08) !important;
}

[data-mode="light"] .carousel-btn:hover {
    background: var(--primary-gradient) !important;
    color: #FFFFFF !important;
    border-color: transparent !important;
}

/* ==========================================================================
   13. Responsive Media Queries
   ========================================================================== */
@media (max-width: 1366px) {
    .container {
        padding: 0 1.25rem;
    }
    .topbar-workshop-chip {
        display: none !important;
    }
    .nav-menu {
        gap: 0.95rem;
    }
    .nav-link {
        font-size: 0.85rem;
    }
    .header-actions {
        gap: 0.5rem;
    }
    .header-actions .mode-toggle-btn {
        width: 38px;
        height: 38px;
        min-width: 38px;
        padding: 0;
    }
    .header-actions .btn-call-emergency {
        height: 38px;
        min-height: 38px;
        max-height: 38px;
        padding: 0 1rem;
        font-size: 0.82rem;
    }
}

/* Laptop Viewports Only (1025px to 1366px): 2-Row Action Strip with side-by-side card layout */
@media (min-width: 1025px) and (max-width: 1366px) {
    .service-card {
        grid-template-columns: 210px 1fr;
    }
    .service-card-body {
        padding: 1.25rem 1.15rem 1.10rem;
    }
    .service-card-actions {
        flex-wrap: wrap;
        gap: 0.45rem;
        padding-top: 0.85rem;
    }
    .service-action-btn {
        flex: 1 1 calc(50% - 0.25rem);
        min-height: 38px;
        padding: 0.60rem 0.65rem;
        font-size: 0.80rem;
    }
    .service-action-call {
        flex: 1 1 100%;
    }
}

@media (max-width: 1280px) {
    .metrics-strip {
        grid-template-columns: repeat(4, 1fr);
        gap: 1rem;
    }
    .why-us-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 1rem;
    }
    .reviews-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 1rem;
    }
}

@media (max-width: 1100px) {
    .metrics-strip {
        grid-template-columns: repeat(2, 1fr);
    }
    .why-us-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .reviews-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .carousel-slide {
        flex: 0 0 calc((100% - 1.25rem) / 2);
    }
    .carousel-track {
        gap: 1.25rem;
    }
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .nav-menu {
        gap: 0.9rem;
    }
    .nav-link {
        font-size: 0.84rem;
    }
}

/* Tablet Responsive Architecture (769px to 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    .cockpit-dashboard-screen {
        padding: clamp(5px, 0.7vh, 10px) 0.55rem 0.35rem;
        border-radius: 10px;
    }
    .cockpit-hero-master.frame-sport .cockpit-dashboard-screen {
        position: absolute !important;
        inset: 0 !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        max-width: none !important;
        height: 100% !important;
        max-height: none !important;
        transform: none !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    .cockpit-hero-master.frame-sport .cockpit-lower-deck {
        top: 6.8% !important;
        bottom: auto !important;
        width: 92% !important;
    }
    .cockpit-hero-master.frame-sport .dashboard-display-left {
        top: 57.0% !important;
        left: 61.5% !important;
        transform: translateX(-50%) perspective(1100px) rotateX(2.2deg) rotateY(-2.8deg) rotateZ(-0.4deg) !important;
        transform-origin: 50% 100% !important;
        transform-style: preserve-3d !important;
        width: min(560px, 44.0cqw) !important;
        max-width: 570px !important;
    }
    .cockpit-hero-master.frame-sport .dashboard-display-right {
        top: 72.8% !important;
        left: 49.6% !important;
        transform: translateX(-50%) perspective(900px) rotateX(4.5deg) !important;
        transform-origin: 50% 0% !important;
        width: clamp(180px, 21.2cqw, 320px) !important;
        max-width: none !important;
        height: auto !important;
    }
    .dashboard-hud-strip {
        padding-bottom: 0.15rem;
    }
    .dashboard-display-grid {
        gap: 0.65rem;
    }
    .dashboard-display-left {
        gap: 0.25rem;
    }
    .dashboard-display-left .dispatch-input-card {
        height: 26px;
        min-height: 26px;
        padding: 0 0.6rem;
    }
    .dashboard-display-left .dispatch-input-card input {
        font-size: 0.68rem;
    }
    .dispatch-btn-row {
        gap: 0.35rem;
    }
    .dispatch-btn-row .btn-dispatch-mechanic,
    .dispatch-btn-row .btn-priority-call {
        height: 28px;
        min-height: 28px;
        font-size: 0.74rem;
        padding: 0 0.45rem;
        border-radius: 6px;
    }
    .dispatch-btn-row .btn-dispatch-mechanic svg,
    .dispatch-btn-row .btn-priority-call svg {
        width: 13px;
        height: 13px;
    }
    .dispatch-telemetry-status {
        font-size: 0.56rem;
    }
    .cockpit-hero-master:not(.frame-sport) .cockpit-metrics-grid {
        gap: 0.28rem;
    }
    .cockpit-hero-master:not(.frame-sport) .cockpit-metrics-grid .metric-card {
        padding: 0.15rem 0.4rem;
        border-radius: 6px;
    }
    .cockpit-hero-master:not(.frame-sport) .cockpit-metrics-grid .metric-number {
        font-size: 1.35rem;
    }
    .cockpit-hero-master:not(.frame-sport) .cockpit-metrics-grid .metric-number span {
        font-size: 1.05rem;
    }
    .cockpit-hero-master:not(.frame-sport) .cockpit-metrics-grid .metric-label {
        font-size: 0.50rem;
        line-height: 1.15;
    }
}

/* ==========================================================================
   iPad & Tablet: How Roadside Rescue Works (2-Column Cards Layout)
   Left Column: Lottie Animation Pod
   Right Column: Title, Captions (step-desc), and Response status time (step-highlight)
   Scoped Strictly to iPad and Tablet (768px to 1024px)
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1024px) {
    .steps-grid {
        grid-template-columns: 1fr !important;
        gap: 1.65rem !important;
    }

    .step-card {
        display: grid !important;
        grid-template-columns: 180px 1fr !important;
        grid-template-rows: auto 1fr auto !important;
        column-gap: 2rem !important;
        row-gap: 0.75rem !important;
        align-items: center !important;
        padding: 1.85rem 2.25rem !important;
        position: relative !important;
    }

    .step-header-grid {
        display: contents !important;
    }

    .step-icon-col {
        grid-column: 1 !important;
        grid-row: 1 / span 3 !important;
        width: 100% !important;
        height: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .step-icon-wrap {
        width: 160px !important;
        min-width: 160px !important;
        max-width: 160px !important;
        height: 160px !important;
        min-height: 160px !important;
        border-radius: var(--radius-lg) !important;
        box-shadow: 0 0 28px rgba(var(--primary-rgb), 0.35) !important;
        border: 2px solid rgba(var(--primary-rgb), 0.45) !important;
    }

    .step-lottie-container dotlottie-player {
        transform: scale(1.18) !important;
        transform-origin: center center !important;
    }

    .step-title-col {
        grid-column: 2 !important;
        grid-row: 1 !important;
        padding-right: 5rem !important; /* Clearance for Step 01 badge */
        display: flex !important;
        align-items: center !important;
    }

    .step-title {
        font-size: 1.35rem !important;
        margin: 0 !important;
        line-height: 1.3 !important;
    }

    .step-desc {
        grid-column: 2 !important;
        grid-row: 2 !important;
        font-size: 0.98rem !important;
        line-height: 1.65 !important;
        margin: 0 !important;
    }

    .step-highlight {
        grid-column: 2 !important;
        grid-row: 3 !important;
        font-size: 0.84rem !important;
        padding-top: 0.65rem !important;
        margin: 0 !important;
    }

    .step-badge {
        position: absolute !important;
        top: 1.35rem !important;
        right: 1.5rem !important;
    }

    /* Complete Mobile Workshop: Price Tag at Right Side of Title (2-Row Equivalent Spacing) */
    .service-card-header {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: flex-start !important;
        gap: 0.75rem !important;
    }

    .service-card-header .service-title {
        flex: 1 1 auto !important;
        font-size: 1.20rem !important;
        line-height: 1.3 !important;
        margin: 0 !important;
    }

    .service-price-tag {
        align-self: flex-start !important;
        align-items: flex-end !important;
        flex-shrink: 0 !important;
    }
}

@media (max-width: 960px) {
    .mobile-menu-toggle {
        display: flex !important;
    }
    .nav-wrapper {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        width: 100%;
        max-width: 100%;
        padding: 0.85rem 1.25rem 1.25rem;
        background: rgba(8, 12, 22, 0.98);
        backdrop-filter: blur(24px);
        -webkit-backdrop-filter: blur(24px);
        border-bottom: 1.5px solid rgba(255, 120, 0, 0.35);
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.85);
        display: none;
        z-index: 1000;
        box-sizing: border-box;
    }
    [data-mode="light"] .nav-wrapper {
        background: rgba(255, 255, 255, 0.98);
        border-bottom-color: rgba(255, 107, 0, 0.35);
        box-shadow: 0 16px 36px rgba(0, 0, 0, 0.12);
    }
    .nav-wrapper.mobile-active {
        display: block;
        animation: hudSlideDown 0.28s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }
    .nav-hud-island {
        display: flex;
        flex-direction: column;
        width: 100%;
        border-radius: 16px;
        padding: 0.6rem;
        gap: 0.45rem;
        background: rgba(14, 20, 36, 0.85);
    }
    [data-mode="light"] .nav-hud-island {
        background: rgba(241, 245, 249, 0.95);
    }
    .nav-hud-island li {
        width: 100%;
    }
    .nav-hud-island .nav-link {
        width: 100%;
        box-sizing: border-box;
        padding: 0.75rem 1.15rem;
        font-size: 0.94rem;
        border-radius: 10px;
        justify-content: flex-start;
    }
    .steps-grid {
        grid-template-columns: 1fr;
    }
}

@keyframes hudSlideDown {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 992px) {
    .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
    /* Responsive Text Toggle */
    .mobile-only {
        display: inline !important;
    }
    .desktop-only {
        display: none !important;
    }
    div.mobile-only {
        display: block !important;
    }
    div.desktop-only {
        display: none !important;
    }

    /* 1. Emergency Topbar — Compact Priority Single-Row Layout */
    .emergency-topbar {
        padding: 0.35rem 0;
    }
    .emergency-topbar-inner {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 0.5rem;
        padding: 0 0.75rem;
    }
    .status-badge {
        font-size: 0.74rem;
        font-weight: 700;
        white-space: nowrap;
        gap: 0.4rem;
    }
    .topbar-actions {
        margin-left: auto;
        width: auto;
        justify-content: flex-end;
    }
    .topbar-cloud-engine {
        display: none !important;
    }
    .emergency-call-chip {
        font-size: 0.74rem;
        padding: 0.28rem 0.65rem;
        width: auto;
        max-width: none;
        height: 28px;
        box-sizing: border-box;
        border-radius: var(--radius-sm);
        display: inline-flex;
        align-items: center;
    }

    /* 2. Main Header — Re-imagined Single Row Zero-Overflow */
    .main-header {
        padding: 0.5rem 0;
    }
    .nav-container {
        padding: 0 0.65rem;
        justify-content: space-between;
        align-items: center;
        flex-wrap: nowrap;
        gap: 0.35rem;
    }
    .brand-logo {
        gap: 0.4rem;
    }
    .brand-logo-img {
        width: 32px;
        height: 32px;
        min-width: 32px;
        max-width: 32px;
    }
    .brand-icon-shield {
        width: 30px;
        height: 30px;
        border-radius: var(--radius-sm);
    }
    .brand-icon-shield svg {
        width: 17px;
        height: 17px;
    }
    .brand-name {
        font-size: 0.94rem;
        letter-spacing: -0.01em;
    }
    .brand-tagline {
        display: none !important;
    }
    .header-actions {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        flex-shrink: 0;
    }
    .mode-toggle-btn {
        width: 34px;
        height: 34px;
        min-width: 34px;
        min-height: 34px;
        max-height: 34px;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--radius-md);
        font-size: 0.95rem;
        box-sizing: border-box;
    }
    #mode-toggle-text {
        display: none !important;
    }

    /* Testimonials Carousel on Mobile (1 card per view) */
    .carousel-slide {
        flex: 0 0 100%;
    }
    .carousel-track {
        gap: 1rem;
    }
    .carousel-viewport {
        padding: 0.25rem 0.1rem 1rem;
    }
    .carousel-controls {
        gap: 1.25rem;
        margin-top: 1rem;
    }
    .carousel-btn {
        width: 40px;
        height: 40px;
    }
    .review-card {
        padding: 1.65rem 1.35rem;
    }

    /* ==========================================================================
       3. Cockpit Hero Responsive Architecture (Mobile Phones & Small Tablets <= 768px)
       Clean, Touch-Optimized, High-Contrast Mobile Hero Experience
       ========================================================================== */
    .cockpit-hero-master {
        position: relative !important;
        height: auto !important;
        min-height: 100dvh !important;
        max-height: none !important;
        overflow-y: visible !important;
        overflow-x: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        background: #07090E !important;
    }

    .cockpit-hero-master > main {
        position: relative !important;
        flex: 1 1 auto !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        width: 100% !important;
    }

    .hero-section {
        position: relative !important;
        flex: 1 !important;
        height: auto !important;
        min-height: calc(100dvh - 96px) !important;
        padding: 1.25rem 0 2.25rem !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        overflow: visible !important;
        width: 100% !important;
    }

    /* Ambient Service Reel Background: Fills entire hero background on mobile */
    .cockpit-hero-master:not(.frame-sport) .cockpit-stage {
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: none !important;
        aspect-ratio: auto !important;
        border-radius: 0 !important;
        border: none !important;
        box-shadow: none !important;
        background: transparent !important;
        overflow: visible !important;
    }

    .windshield-reel-container {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
        z-index: 1 !important;
        opacity: 1 !important;
        pointer-events: none !important;
    }

    /* Cinematic Dark Glass Vignette (Disabled on Mobile for Sunlight Parity) */
    .hero-section::before {
        display: none !important;
    }

    /* Hide 16:9 Landscape Car Interior Mask Thumbnail on Mobile (Except Frame Sport) */
    .cockpit-hero-master:not(.frame-sport) .cockpit-mask-overlay {
        display: none !important;
    }

    /* Stage Wrapper: Vertical Mobile Flow Container */
    .cockpit-stage-wrapper {
        position: relative !important;
        width: 100% !important;
        max-width: 460px !important;
        margin: 0 auto !important;
        padding: 0 0.85rem !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 1.15rem !important;
        height: auto !important;
        min-height: 0 !important;
        z-index: 4 !important;
        box-sizing: border-box !important;
    }

    /* 1. UPPER DECK: Headline & Trust Pill Badge (Order 1 on Mobile) */
    .cockpit-hero-master .cockpit-lower-deck {
        position: relative !important;
        top: auto !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0.25rem 0.25rem 0 !important;
        text-align: center !important;
        z-index: 5 !important;
        order: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    .cockpit-hero-master .cockpit-lower-deck .hero-pill-badge {
        display: inline-flex !important;
        align-items: center !important;
        gap: 0.45rem !important;
        padding: 0.35rem 0.95rem !important;
        font-size: 0.74rem !important;
        font-weight: 800 !important;
        letter-spacing: 0.08em !important;
        color: #FFA34D !important;
        background: rgba(10, 15, 26, 0.92) !important;
        border: 1.2px solid rgba(255, 107, 0, 0.45) !important;
        border-radius: 20px !important;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.75) !important;
        margin: 0 auto 0.65rem auto !important;
    }

    .cockpit-hero-master .cockpit-lower-deck .hero-title {
        font-family: var(--font-heading) !important;
        font-size: clamp(1.42rem, 5.8vw, 1.82rem) !important;
        font-weight: 900 !important;
        color: #FFFFFF !important;
        -webkit-text-fill-color: #FFFFFF !important;
        line-height: 1.22 !important;
        margin: 0 0 0.55rem 0 !important;
        white-space: normal !important;
        text-shadow: 0 2px 12px rgba(0, 0, 0, 0.95) !important;
        letter-spacing: -0.01em !important;
    }

    .cockpit-hero-master .cockpit-lower-deck .hero-subtitle {
        font-family: var(--font-body) !important;
        font-size: clamp(0.82rem, 3.4vw, 0.92rem) !important;
        line-height: 1.45 !important;
        color: #CBD5E1 !important;
        margin: 0 auto !important;
        max-width: 420px !important;
        text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9) !important;
    }

    /* 2. CENTER & LOWER DECKS: Mobile Dashboard Screen (Order 2 on Mobile) */
    .cockpit-hero-master:not(.frame-sport) .cockpit-dashboard-screen {
        position: relative !important;
        top: auto !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        inset: auto !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border: none !important;
        box-shadow: none !important;
        z-index: 5 !important;
        order: 2 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0.95rem !important;
    }

    /* Hide noisy curved SVG ribbon on small mobile screens */
    .dashboard-hud-strip {
        display: none !important;
    }

    .dashboard-display-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.95rem !important;
        width: 100% !important;
    }

    /* Mission Dispatch Deck (Location Input + CTAs) */
    .cockpit-hero-master:not(.frame-sport) .dashboard-display-left {
        position: relative !important;
        top: auto !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0.75rem !important;
        margin: 0 auto !important;
        z-index: 6 !important;
        animation: none !important;
        opacity: 1 !important;
    }

    .cockpit-hero-master .dispatch-controls-col {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0.65rem !important;
    }

    /* Tactile Location Input Capsule */
    .cockpit-hero-master .dispatch-input-card {
        height: 52px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        background: rgba(14, 19, 31, 0.88) !important;
        border: 1.5px solid rgba(255, 107, 0, 0.55) !important;
        border-radius: 14px !important;
        padding: 0 0.6rem 0 0.95rem !important;
        display: flex !important;
        align-items: center !important;
        gap: 0.55rem !important;
        backdrop-filter: blur(16px) !important;
        -webkit-backdrop-filter: blur(16px) !important;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6), inset 0 1px 1px rgba(255, 255, 255, 0.15) !important;
    }

    .cockpit-hero-master .dispatch-input-card input {
        font-size: 0.88rem !important;
        color: #F8FAFC !important;
        font-weight: 600 !important;
        flex: 1 1 auto !important;
        background: transparent !important;
        border: none !important;
        outline: none !important;
        width: 100% !important;
    }

    .cockpit-hero-master .btn-location-capsule-pin {
        height: 34px !important;
        padding: 0 0.85rem !important;
        background: linear-gradient(135deg, #FF6B00 0%, #FF8800 100%) !important;
        border: none !important;
        border-radius: 10px !important;
        color: #FFFFFF !important;
        font-size: 0.78rem !important;
        font-weight: 800 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 2px 10px rgba(255, 107, 0, 0.45) !important;
        cursor: pointer !important;
        flex-shrink: 0 !important;
    }

    /* Dual Action Buttons: Side-by-Side 50/50 */
    .cockpit-hero-master .dispatch-btn-row {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 0.65rem !important;
        width: 100% !important;
    }

    .cockpit-hero-master .btn-dispatch-mechanic,
    .cockpit-hero-master .btn-priority-call {
        height: 48px !important;
        border-radius: 12px !important;
        font-size: 0.82rem !important;
        font-weight: 900 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.02em !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.45rem !important;
        text-decoration: none !important;
        box-sizing: border-box !important;
        white-space: nowrap !important;
    }

    .cockpit-hero-master .btn-dispatch-mechanic {
        background: linear-gradient(135deg, #FF6B00 0%, #FF8800 100%) !important;
        border: 1.5px solid rgba(255, 140, 0, 0.9) !important;
        color: #FFFFFF !important;
        box-shadow: 0 4px 16px rgba(255, 107, 0, 0.45) !important;
    }

    .cockpit-hero-master .btn-priority-call {
        background: linear-gradient(135deg, #E11D48 0%, #BE123C 100%) !important;
        border: 1.5px solid rgba(244, 63, 94, 0.9) !important;
        color: #FFFFFF !important;
        box-shadow: 0 4px 16px rgba(225, 29, 72, 0.45) !important;
    }

    /* Sub-telemetry Status Indicator */
    .cockpit-hero-master .dispatch-telemetry-status {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.45rem !important;
        font-size: 0.74rem !important;
        color: #94A3B8 !important;
        text-align: center !important;
        margin-top: 0.15rem !important;
    }

    /* Live GPS Radar Pod on Mobile */
    .cockpit-hero-master.frame-sport .dispatch-radar-pod {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        height: auto !important;
        padding: 0.45rem 0.85rem !important;
        border-radius: 12px !important;
        background: rgba(10, 15, 26, 0.80) !important;
        border: 1.2px solid rgba(0, 240, 255, 0.35) !important;
        backdrop-filter: blur(12px) !important;
        box-sizing: border-box !important;
    }
    .cockpit-hero-master.frame-sport .radar-pod-header {
        display: flex !important;
        align-items: center !important;
        gap: 0.4rem !important;
    }
    .cockpit-hero-master.frame-sport .radar-pod-stat {
        display: flex !important;
        align-items: baseline !important;
        gap: 0.3rem !important;
    }
    .cockpit-hero-master.frame-sport .radar-pod-divider {
        display: none !important;
    }
    .cockpit-hero-master.frame-sport .radar-pod-nearest {
        display: flex !important;
        align-items: center !important;
        gap: 0.4rem !important;
    }

    /* 3. Live Fleet Telemetry: 2x2 Clean Mobile Glass Grid */
    .cockpit-hero-master:not(.frame-sport) .dashboard-display-right {
        position: relative !important;
        top: auto !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 0 auto !important;
        z-index: 6 !important;
        animation: none !important;
        opacity: 1 !important;
    }

    .cockpit-hero-master:not(.frame-sport) .cockpit-metrics-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.65rem !important;
        width: 100% !important;
        height: auto !important;
        padding: 0 !important;
    }

    .cockpit-hero-master:not(.frame-sport) .metric-card {
        position: relative !important;
        width: 100% !important;
        height: 56px !important;
        min-height: 56px !important;
        border-radius: 12px !important;
        background: rgba(14, 19, 31, 0.85) !important;
        border: 1.2px solid rgba(255, 255, 255, 0.12) !important;
        backdrop-filter: blur(14px) !important;
        -webkit-backdrop-filter: blur(14px) !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5) !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        transform: none !important;
        animation: none !important;
        opacity: 1 !important;
    }

    .cockpit-hero-master .metric-card::before {
        display: none !important;
    }

    .cockpit-hero-master .metric-card-content {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: 100% !important;
        height: 100% !important;
        padding: 0 0.65rem !important;
        box-sizing: border-box !important;
        gap: 0.45rem !important;
    }

    .cockpit-hero-master .metric-number,
    .cockpit-hero-master .gauge-col-numeral {
        font-family: var(--font-hud-numbers, var(--font-heading)) !important;
        font-size: 1.22rem !important;
        font-weight: 900 !important;
        font-style: normal !important;
        color: #FFFFFF !important;
        line-height: 1 !important;
        display: inline-flex !important;
        align-items: baseline !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
    }

    .cockpit-hero-master .metric-number span,
    .cockpit-hero-master .gauge-col-numeral span {
        font-size: 0.88rem !important;
        font-weight: 800 !important;
        margin-left: 2px !important;
    }

    .cockpit-hero-master .metric-card-1 {
        border-color: rgba(0, 240, 255, 0.35) !important;
    }
    .cockpit-hero-master .metric-card-1 .metric-number span,
    .cockpit-hero-master .metric-card-1 .gauge-col-numeral span {
        color: #00F0FF !important;
    }

    .cockpit-hero-master .metric-card-2 {
        border-color: rgba(16, 185, 129, 0.35) !important;
    }
    .cockpit-hero-master .metric-card-2 .metric-number span,
    .cockpit-hero-master .metric-card-2 .gauge-col-numeral span {
        color: #10B981 !important;
    }

    .cockpit-hero-master .metric-card-3 {
        border-color: rgba(255, 107, 0, 0.35) !important;
    }
    .cockpit-hero-master .metric-card-3 .metric-number span,
    .cockpit-hero-master .metric-card-3 .gauge-col-numeral span {
        color: #FF6B00 !important;
    }

    .cockpit-hero-master .metric-card-4 {
        border-color: rgba(245, 158, 11, 0.35) !important;
    }
    .cockpit-hero-master .metric-card-4 .metric-number span,
    .cockpit-hero-master .metric-card-4 .gauge-col-numeral span {
        color: #F59E0B !important;
    }

    .cockpit-hero-master .metric-label,
    .cockpit-hero-master .gauge-col-label {
        flex: 1 1 auto !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: flex-start !important;
        padding-left: 0.45rem !important;
        border-left: 1.5px solid rgba(255, 120, 0, 0.35) !important;
        line-height: 1.15 !important;
        box-sizing: border-box !important;
        min-width: 0 !important;
    }

    .cockpit-hero-master .metric-label .gauge-row-1,
    .cockpit-hero-master .gauge-col-label .gauge-row-1 {
        font-size: 0.65rem !important;
        font-weight: 800 !important;
        color: #FFFFFF !important;
        white-space: nowrap !important;
        text-transform: uppercase !important;
    }

    .cockpit-hero-master .metric-label .gauge-row-2,
    .cockpit-hero-master .gauge-col-label .gauge-row-2 {
        font-size: 0.62rem !important;
        font-weight: 800 !important;
        color: #94A3B8 !important;
        white-space: nowrap !important;
        text-transform: uppercase !important;
    }

    .cockpit-hero-master .metric-card-1 .gauge-row-2 {
        color: #00F0FF !important;
    }

    /* Light Mode Overrides for Mobile Hero */
    [data-mode="light"] .cockpit-hero-master {
        background: #F8FAFC !important;
    }
    [data-mode="light"] .hero-section::before {
        background: radial-gradient(circle at 50% 25%, rgba(248, 250, 252, 0.75) 0%, rgba(241, 245, 249, 0.95) 85%) !important;
    }
    [data-mode="light"] .cockpit-hero-master .cockpit-lower-deck .hero-title {
        color: #0F172A !important;
        -webkit-text-fill-color: #0F172A !important;
        text-shadow: none !important;
    }
    [data-mode="light"] .cockpit-hero-master .cockpit-lower-deck .hero-subtitle {
        color: #475569 !important;
        text-shadow: none !important;
    }
    [data-mode="light"] .cockpit-hero-master .dispatch-input-card {
        background: rgba(255, 255, 255, 0.94) !important;
        border-color: rgba(255, 107, 0, 0.45) !important;
        box-shadow: 0 4px 18px rgba(15, 23, 42, 0.12) !important;
    }
    [data-mode="light"] .cockpit-hero-master .dispatch-input-card input {
        color: #0F172A !important;
    }
    [data-mode="light"] .cockpit-hero-master .metric-card {
        background: rgba(255, 255, 255, 0.92) !important;
        border-color: rgba(15, 23, 42, 0.12) !important;
        box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08) !important;
    }
    [data-mode="light"] .cockpit-hero-master .metric-number,
    [data-mode="light"] .cockpit-hero-master .gauge-col-numeral,
    [data-mode="light"] .cockpit-hero-master .metric-label .gauge-row-1,
    [data-mode="light"] .cockpit-hero-master .gauge-col-label .gauge-row-1 {
        color: #0F172A !important;
    }
}

/* ==========================================================================
   Mobile Phone: How Roadside Rescue Works (50% Bigger Lottie + Description Wraps on Right)
   Lottie Pod: 108px x 108px (+50% enlargement from 72px)
   Description Text: Starts at right side of Lottie icon, then flows below
   Scoped Strictly to Mobile Viewports (< 768px)
   ========================================================================== */
@media (max-width: 767px) {
    .steps-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }
    .step-card {
        display: block !important;
        position: relative !important;
        padding: 1.35rem 1.15rem 1.15rem !important;
    }
    .step-badge {
        position: absolute !important;
        top: 1.15rem !important;
        right: 1.15rem !important;
    }
    .step-header-grid {
        display: block !important;
    }
    .step-icon-col {
        float: left !important;
        width: 108px !important;
        height: 108px !important;
        margin-right: 14px !important;
        margin-bottom: 8px !important;
        display: block !important;
    }
    .step-icon-wrap {
        width: 108px !important;
        min-width: 108px !important;
        max-width: 108px !important;
        height: 108px !important;
        min-height: 108px !important;
        border-radius: 14px !important;
        box-shadow: 0 0 24px rgba(var(--primary-rgb), 0.35) !important;
        border: 1.5px solid rgba(var(--primary-rgb), 0.45) !important;
    }
    .step-icon-wrap dotlottie-player {
        transform: scale(1.18) !important;
        transform-origin: center center !important;
    }
    .step-title-col {
        display: block !important;
        padding-right: 4.75rem !important; /* Clearance for Step badge */
        margin-bottom: 6px !important;
    }
    .step-title {
        font-size: 1.22rem !important;
        line-height: 1.25 !important;
        margin: 0 !important;
        padding-top: 2px !important;
    }
    .step-desc {
        font-size: 0.90rem !important;
        line-height: 1.55 !important;
        color: var(--text-secondary) !important;
        margin: 0 0 0.85rem 0 !important;
    }
    .step-highlight {
        clear: both !important;
        display: block !important;
        font-size: 0.82rem !important;
        padding-top: 0.65rem !important;
        border-top: 1px dashed rgba(255, 255, 255, 0.12) !important;
    }
    [data-mode="light"] .step-highlight {
        border-top: 1px dashed rgba(15, 23, 42, 0.12) !important;
    }
}

@media (max-width: 640px) {
    .why-us-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.85rem !important;
    }
    .why-us-grid .glass-panel,
    .why-us-card {
        padding: 1.15rem 0.95rem !important;
    }
    .why-us-svg-pod {
        width: 72px !important;
        height: 72px !important;
        min-width: 72px !important;
        max-width: 72px !important;
        padding: 6px !important;
    }
    .why-us-card-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.65rem !important;
    }
    .why-us-card-title {
        font-size: 0.98rem !important;
    }
    .why-us-card-desc {
        font-size: 0.80rem !important;
        line-height: 1.45 !important;
    }
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    /* 3. Hero Section & Action Dispatch Card on Mobile */
    /* 3. Cockpit Hero Section on Mobile */
    .hero-section {
        padding: 1.5rem 0 2.5rem;
    }
    .dispatch-btn-row {
        grid-template-columns: 1fr;
        gap: 0.55rem;
    }
    .dispatch-btn-row .btn-dispatch-mechanic,
    .dispatch-btn-row .btn-priority-call {
        width: 100%;
        height: 48px;
        font-size: 0.92rem;
    }
    .dashboard-display-left .dispatch-input-card {
        height: 48px;
        padding: 0 1rem;
    }
    .back-to-top-btn {
        bottom: 1.25rem;
        right: 1.25rem;
        width: 44px;
        height: 44px;
    }
    .floating-drawer-tab {
        top: auto !important;
        bottom: 1.25rem !important;
        left: 1.25rem !important;
        transform: none !important;
        border-radius: 50% !important;
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border: 1px solid var(--border-glow) !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
    }
    .floating-drawer-tab:hover {
        transform: translateY(-2px) !important;
    }
    .floating-drawer-tab .floating-tab-text {
        display: none !important;
    }
    .floating-drawer-tab .floating-tab-icon {
        font-size: 1.25rem !important;
    }

    /* ==========================================================================
       Location Modal Mobile Phone Optimization (§ZA-19, §ZA-20 & §ZA-21)
       ========================================================================== */
    .location-modal-container {
        width: calc(100% - 1.25rem) !important;
        max-width: 100% !important;
        padding: 1.15rem 1rem 1.35rem !important;
        border-radius: 14px !important;
        margin: auto !important;
        max-height: 94vh !important;
    }
    .location-modal-header {
        gap: 0.75rem !important;
        margin-bottom: 0.95rem !important;
    }
    .location-modal-header-icon {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
    }
    .location-modal-header-icon svg {
        width: 18px !important;
        height: 18px !important;
    }
    .location-modal-header-text h3 {
        font-size: 1.15rem !important;
    }
    .location-modal-header-text p {
        font-size: 0.80rem !important;
        line-height: 1.35 !important;
    }
    .location-gps-detect-bar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.45rem !important;
        padding: 0.65rem 0.85rem !important;
        margin-bottom: 0.95rem !important;
    }
    .gps-status-indicator {
        text-align: center !important;
        font-size: 0.75rem !important;
    }
    .location-hotspot-group {
        margin-bottom: 1rem !important;
    }
    .location-hotspot-chips {
        gap: 0.35rem !important;
        max-height: 84px !important;
        overflow-y: auto !important;
    }
    .hotspot-chip {
        padding: 0.30rem 0.60rem !important;
        font-size: 0.74rem !important;
    }
    .location-form-grid {
        grid-template-columns: 1fr !important;
        gap: 0.85rem !important;
        margin-bottom: 1.15rem !important;
    }
    .field-span-2 {
        grid-column: span 1 !important;
    }
    .location-form-field label {
        min-height: auto !important;
        margin-bottom: 0.35rem !important;
        font-size: 0.82rem !important;
    }
    .modal-input-wrap {
        height: 48px !important;
        padding: 0 0.85rem !important;
    }
    .location-modal-actions {
        flex-direction: column-reverse !important;
        gap: 0.55rem !important;
        width: 100% !important;
        padding-top: 0.95rem !important;
    }
    .btn-modal-confirm,
    .btn-modal-cancel {
        width: 100% !important;
        height: 48px !important;
        justify-content: center !important;
        font-size: 0.94rem !important;
        padding: 0.70rem 1rem !important;
    }
}