/* ==========================================================================
   Car Doctor On Call — Mobile Phone Hero Section Stylesheet (<= 767px)
   ADAPTED FROM IPAD LOCKED GOLDEN CONFIGURATION SSOT (v143 Calibration)
   STATUS: MOBILE PARITY RELEASE · October 22, 2026
   Features:
   - 896/1200 Aspect Ratio Stage Container with Contain Mode (Zero Cropping)
   - Keyed-Out Futuristic Cockpit Canopy Interior (ipad_cockpit_clean_keyed_out.png)
   - Live Roadside Service Reel Showing Through Canopy Visor
   - Unobstructed Digital Speedometer (Y: 49.5% - 59.0%)
   - Upper Digital Deck (Y: ~59.5%):
     1. Single-Row Layout (.dispatch-controls-col): Location Bar + Dual Action Buttons
     2. Digital Display Console (rgba(8, 22, 38, 0.88), cyan border, amber pin, cyan search)
     3. Subtle Curve Law (§WD-1): Strict 6px border-radius across all inputs and buttons
     4. Square Icon Buttons: Yellow Dispatch Arrow (#FACC15) & Crimson Call Handset (#DC2626)
     5. Futuristic Cyber Driver Glove with Cyan Radar Pulse pointing to Location Field
   - Digital Display Wings (Y: 63.4% - 69.0%): 2-Column Horizontal HUD Layout:
     1. Left Wing (Card 2): [ 20m Cyan (Left Col) ] [ ARRIVAL / AVG ETA (Right Col) ]
     2. Right Wing (Card 1): [ 100% Teal (Left Col) ] [ MOBILE / WORKSHOP (Right Col) ]
   - Center Stem Diagnostics (Y: 71.4% - 85.5%): Vertically Stacked Console:
     1. Upper Stem (Card 3): 15,000+ Amber Phosphor / RESCUES Label
     2. Lower Stem (Card 4): 4.9 ★ Solar Gold Phosphor / RATING Label
   - Smooth Staggered Fade-In Entrance Animation (@keyframes hudCardFadeInMobile)
   - Clean In-Place 3D Somersault Hover Animation (rotateX 360deg, zero sideways drift)

   STRICTLY SCOPED TO MOBILE PHONES (max-width: 767px)
   DESKTOP, LAPTOP, AND IPAD ARE 100% UNTOUCHED AND PROTECTED
   ========================================================================== */

@media (max-width: 767px) {

    /* 1. Master Cockpit Master Stage on Mobile: Natural Height, Scrollable */
    .cockpit-hero-master.frame-sport,
    .cockpit-hero-master.frame-electric,
    .cockpit-hero-master {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
        max-height: none !important;
        overflow: visible !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        background-color: #04060A !important;
        box-sizing: border-box !important;
    }

    .cockpit-hero-master > main {
        position: relative !important;
        flex: none !important;
        min-height: 0 !important;
        width: 100% !important;
        height: auto !important;
        display: block !important;
        overflow: visible !important;
    }

    .hero-section {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        flex: none !important;
        min-height: 0 !important;
        padding: 0 !important;
        display: block !important;
        overflow: visible !important;
    }

    /* Eradicate artificial dark vignette from style.css so scenery is fully bright */
    .hero-section::before {
        display: none !important;
        content: none !important;
        background: none !important;
    }

    /* 2. Cockpit Stage Wrapper: Centers Mobile Vessel */
    .cockpit-hero-master.frame-sport .cockpit-stage-wrapper,
    .cockpit-hero-master.frame-electric .cockpit-stage-wrapper,
    .cockpit-hero-master .cockpit-stage-wrapper {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        max-width: 500px !important;
        margin: 0 auto !important;
        padding: 0 !important;
        display: block !important;
        box-sizing: border-box !important;
        flex: none !important;
        min-height: 0 !important;
    }

    /* 3. Mobile Vessel: Exact 1536 / 3220 Aspect Ratio (Smartphone Portrait) */
    .cockpit-hero-master.frame-sport .cockpit-stage,
    .cockpit-hero-master.frame-electric .cockpit-stage,
    .cockpit-hero-master .cockpit-stage {
        position: relative !important;
        width: 100% !important;
        max-width: 500px !important;
        height: auto !important;
        max-height: none !important;
        aspect-ratio: 1536 / 3220 !important;
        container-type: inline-size !important;
        container-name: mobile-cockpit-stage !important;
        border-radius: 0 !important;
        overflow: hidden !important;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.95), 0 0 25px rgba(255, 107, 0, 0.20) !important;
        background: #04060A !important;
        display: block !important;
        margin: 0 auto !important;
    }

    /* 4. Live Roadside Service Reel: Shows Through Keyed-Out Windshield Display */
    .windshield-reel-container.windshield-reel-desktop {
        display: none !important;
    }

    .windshield-reel-container.windshield-reel-mobile {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 61.5% !important;
        z-index: 1 !important;
        opacity: 1 !important;
        overflow: hidden !important;
        pointer-events: none !important;
        display: block !important;
    }

    .windshield-reel-mobile .windshield-slide {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background-repeat: no-repeat !important;
        background-position: center top !important;
        background-size: cover !important;
        opacity: 0 !important;
        filter: brightness(1.25) contrast(1.08) saturate(1.15) !important;
        transition: opacity 1.8s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    .windshield-reel-mobile .windshield-slide.active {
        opacity: 1 !important;
    }

    /* Boost shaded service van slide so it matches the bright, sunny outdoor exposure */
    .windshield-reel-mobile .windshield-slide[style*="slide-service-mobile-battery"],
    .windshield-reel-mobile .windshield-slide[style*="slide-service-battery"] {
        filter: brightness(1.40) contrast(1.12) saturate(1.22) !important;
    }

    /* 5. Clean Cockpit Mask: Keyed-Out Big Bike Display PNG in CONTAIN mode with focus on top */
    .cockpit-hero-master.frame-sport .cockpit-mask-overlay,
    .cockpit-hero-master.frame-electric .cockpit-mask-overlay,
    .cockpit-hero-master .cockpit-mask-overlay {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background-image: url('../images/big_bike_mobile_phone_keyed_out.png?v=daytime_sunlight_v10') !important;
        background-repeat: no-repeat !important;
        background-position: center top !important;
        background-size: 100% auto !important;
        pointer-events: none !important;
        z-index: 2 !important;
        display: block !important;
        opacity: 1 !important;
    }

    /* Clean ambient lighting: Zero artificial dark mask, letting the titanium superbike shine */
    .cockpit-hero-master.frame-sport .cockpit-mask-overlay::after,
    .cockpit-hero-master.frame-electric .cockpit-mask-overlay::after,
    .cockpit-hero-master .cockpit-mask-overlay::after {
        display: none !important;
    }

    /* 6. Upper Windshield Sky Headline (Compact Floating Pill Badge Only) */
    .cockpit-hero-master.frame-sport .cockpit-lower-deck,
    .cockpit-hero-master.frame-electric .cockpit-lower-deck,
    .cockpit-hero-master .cockpit-lower-deck {
        position: absolute !important;
        top: 6.0% !important;
        bottom: auto !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        width: 80% !important;
        max-width: 320px !important;
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        pointer-events: auto !important;
        z-index: 5 !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .cockpit-hero-master.frame-sport .cockpit-lower-deck .hero-pill-badge,
    .cockpit-hero-master.frame-electric .cockpit-lower-deck .hero-pill-badge,
    .cockpit-hero-master .cockpit-lower-deck .hero-pill-badge {
        display: inline-flex !important;
        align-items: center !important;
        gap: 0.25rem !important;
        padding: 0.16rem 0.65rem !important;
        font-size: clamp(0.50rem, 2.2cqw, 0.64rem) !important;
        font-weight: 800 !important;
        letter-spacing: 0.08em !important;
        color: #FFA34D !important;
        background: rgba(10, 15, 26, 0.90) !important;
        border: 1px solid rgba(255, 107, 0, 0.50) !important;
        border-radius: 20px !important;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.85) !important;
        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;
        margin-bottom: 0.15rem !important;
    }

    .cockpit-hero-master .cockpit-lower-deck .hero-title,
    .cockpit-hero-master .cockpit-lower-deck .hero-subtitle {
        display: none !important;
    }

    /* 7. Central Screen Container: Mapped Directly into the Tank Digital Display Console */
    .cockpit-hero-master.frame-sport .cockpit-dashboard-screen,
    .cockpit-hero-master.frame-electric .cockpit-dashboard-screen,
    .cockpit-hero-master .cockpit-dashboard-screen {
        position: absolute !important;
        top: 53.5% !important;
        bottom: auto !important;
        height: 24.8% !important;
        max-height: 24.8% !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        width: 74% !important;
        max-width: 320px !important;
        margin: 0 !important;
        padding: 2px 4px 4px !important;
        box-sizing: border-box !important;
        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border: none !important;
        border-radius: 8px !important;
        box-shadow: none !important;
        z-index: 10 !important;
        pointer-events: auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 3px !important;
        overflow: hidden !important;
    }

    /* Top Automotive Glass HUD Status Ribbon */
    .cockpit-hero-master.frame-sport .cockpit-dashboard-screen::before,
    .cockpit-hero-master.frame-electric .cockpit-dashboard-screen::before,
    .cockpit-hero-master .cockpit-dashboard-screen::before {
        content: '● GPS RADAR ACTIVE · 14 VANS PATROLLING' !important;
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        font-family: var(--font-hud-numbers, var(--font-heading)) !important;
        font-size: clamp(0.50rem, 2.0cqw, 0.62rem) !important;
        font-weight: 800 !important;
        letter-spacing: 0.10em !important;
        color: #00E5FF !important;
        text-shadow: 0 0 8px rgba(0, 229, 255, 0.6) !important;
        padding: 0 0 4px !important;
        border-bottom: 1px solid rgba(0, 229, 255, 0.20) !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        flex: 0 0 auto !important;
    }

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

    /* Main Digital Display Stack (Vertical Flex Container for Controls + 2x2 Telemetry Grid) */
    .cockpit-hero-master.frame-sport .dashboard-display-grid,
    .cockpit-hero-master.frame-electric .dashboard-display-grid,
    .cockpit-hero-master .dashboard-display-grid {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        flex: 1 1 auto !important;
        height: calc(100% - 22px) !important;
        min-height: 0 !important;
        gap: 5px !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    /* ==========================================================================
       8. DIGITAL DISPLAY UPPER DECK: Single-Row Location Controls (Fade In 700ms Delay)
       ========================================================================== */
    .cockpit-hero-master.frame-sport .dashboard-display-left,
    .cockpit-hero-master.frame-electric .dashboard-display-left,
    .cockpit-hero-master .dashboard-display-left {
        position: relative !important;
        top: auto !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        animation: hudCardFadeInMobile 0.65s ease-out 700ms both !important;
        opacity: 1 !important;
        visibility: visible !important;
        width: 100% !important;
        max-width: none !important;
        flex: 0 0 auto !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        margin: 0 !important;
        padding: 0 !important;
        z-index: 5 !important;
        pointer-events: auto !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    .cockpit-hero-master.frame-sport .dispatch-controls-col,
    .cockpit-hero-master.frame-electric .dispatch-controls-col,
    .cockpit-hero-master .dispatch-controls-col {
        position: relative !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: clamp(4px, 1.0cqw, 7px) !important;
    }

    /* Location Input: Digital Display Console with Soft Zenith Inner Backlit */
    .cockpit-hero-master.frame-sport .dispatch-input-card,
    .cockpit-hero-master.frame-electric .dispatch-input-card,
    .cockpit-hero-master .dispatch-input-card {
        position: relative !important;
        height: clamp(34px, 8.5cqw, 42px) !important;
        min-height: clamp(34px, 8.5cqw, 42px) !important;
        max-height: 44px !important;
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        background: radial-gradient(ellipse at 50% 50%, rgba(0, 229, 255, 0.08) 0%, rgba(8, 26, 44, 0.90) 65%, rgba(4, 12, 22, 0.98) 100%) !important;
        border: 1.5px solid rgba(0, 229, 255, 0.65) !important;
        border-radius: 6px !important;
        padding: 0 0.45rem 0 0.55rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 0.30rem !important;
        box-shadow: inset 0 0 10px rgba(0, 229, 255, 0.22), inset 0 1px 1px rgba(255, 255, 255, 0.35), 0 0 12px rgba(0, 229, 255, 0.20), 0 3px 8px rgba(0, 0, 0, 0.75) !important;
        backdrop-filter: blur(8px) saturate(180%) !important;
        -webkit-backdrop-filter: blur(8px) saturate(180%) !important;
        transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
    }

    .cockpit-hero-master.frame-sport .dispatch-input-card:hover,
    .cockpit-hero-master.frame-electric .dispatch-input-card:hover,
    .cockpit-hero-master .dispatch-input-card:hover,
    .cockpit-hero-master .dispatch-input-card:focus-within {
        border-color: rgba(0, 229, 255, 0.92) !important;
        box-shadow: inset 0 0 14px rgba(0, 229, 255, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.50), 0 0 16px rgba(0, 229, 255, 0.35), 0 4px 12px rgba(0, 0, 0, 0.85) !important;
    }

    /* Hide default left icon in capsule */
    .cockpit-hero-master.frame-sport .dispatch-input-card > svg:not(.cyber-glove-svg),
    .cockpit-hero-master.frame-electric .dispatch-input-card > svg:not(.cyber-glove-svg),
    .cockpit-hero-master .dispatch-input-card > svg:not(.cyber-glove-svg) {
        display: none !important;
    }

    /* Location Input Field: +40% Font Size Increase & Crisp Lighter Font Color */
    .cockpit-hero-master.frame-sport .dispatch-input-card input,
    .cockpit-hero-master.frame-electric .dispatch-input-card input,
    .cockpit-hero-master .dispatch-input-card input {
        font-family: var(--font-hud-capsule, var(--font-heading)) !important;
        font-size: clamp(0.78rem, 2.8cqw, 1.01rem) !important;
        color: #FFFFFF !important;
        font-weight: 700 !important;
        flex: 1 1 auto !important;
        background: transparent !important;
        border: none !important;
        outline: none !important;
        padding: 0 !important;
        min-width: 0 !important;
        letter-spacing: -0.01em !important;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 6px rgba(0, 229, 255, 0.30) !important;
    }

    .cockpit-hero-master.frame-sport .dispatch-input-card input::placeholder,
    .cockpit-hero-master.frame-electric .dispatch-input-card input::placeholder,
    .cockpit-hero-master .dispatch-input-card input::placeholder {
        color: #F1F5F9 !important;
        opacity: 0.95 !important;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85) !important;
    }

    /* Amber Pinpoint & Cyan Search Glass icons on right edge of digital display */
    .cockpit-hero-master.frame-sport .btn-location-capsule-pin,
    .cockpit-hero-master.frame-electric .btn-location-capsule-pin,
    .cockpit-hero-master .btn-location-capsule-pin {
        height: 100% !important;
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 3px !important;
        cursor: pointer !important;
        flex-shrink: 0 !important;
        box-shadow: none !important;
    }

    .cockpit-hero-master.frame-sport .btn-location-capsule-pin .pin-capsule-badge,
    .cockpit-hero-master.frame-electric .btn-location-capsule-pin .pin-capsule-badge,
    .cockpit-hero-master .btn-location-capsule-pin .pin-capsule-badge {
        display: none !important;
    }

    .cockpit-hero-master.frame-sport .btn-location-capsule-pin::before,
    .cockpit-hero-master.frame-electric .btn-location-capsule-pin::before,
    .cockpit-hero-master .btn-location-capsule-pin::before {
        content: '' !important;
        display: inline-block !important;
        width: clamp(10px, 2.5cqw, 14px) !important;
        height: clamp(10px, 2.5cqw, 14px) !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23F59E0B'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z'/%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important;
        background-size: contain !important;
    }

    .cockpit-hero-master.frame-sport .btn-location-capsule-pin::after,
    .cockpit-hero-master.frame-electric .btn-location-capsule-pin::after,
    .cockpit-hero-master .btn-location-capsule-pin::after {
        content: '' !important;
        display: inline-block !important;
        width: clamp(9px, 2.3cqw, 13px) !important;
        height: clamp(9px, 2.3cqw, 13px) !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300E5FF' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important;
        background-size: contain !important;
    }

    /* Onboarding Hand Pointer: Cyber Driver Glove (Mobile Fluid Scale & Position) */
    .cockpit-hero-master.frame-sport .location-onboarding-hand,
    .cockpit-hero-master.frame-electric .location-onboarding-hand,
    .cockpit-hero-master .location-onboarding-hand {
        position: absolute !important;
        top: 4px !important;
        right: clamp(86px, 24cqw, 102px) !important;
        left: auto !important;
        width: clamp(26px, 6.5cqw, 36px) !important;
        height: clamp(32px, 8.0cqw, 44px) !important;
        z-index: 50 !important;
        pointer-events: auto !important;
        filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 10px rgba(0, 229, 255, 0.60)) !important;
    }

    .cockpit-hero-master.frame-sport .location-onboarding-hand svg.cyber-glove-svg,
    .cockpit-hero-master.frame-electric .location-onboarding-hand svg.cyber-glove-svg,
    .cockpit-hero-master .location-onboarding-hand svg.cyber-glove-svg {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        overflow: visible !important;
    }

    /* Dual Action Glass Buttons: Placed at the right side of Location field */
    .cockpit-hero-master.frame-sport .dispatch-btn-row,
    .cockpit-hero-master.frame-electric .dispatch-btn-row,
    .cockpit-hero-master .dispatch-btn-row {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: clamp(4px, 1.0cqw, 6px) !important;
        width: auto !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .cockpit-hero-master.frame-sport .dispatch-btn-row .btn-dispatch-mechanic,
    .cockpit-hero-master.frame-sport .dispatch-btn-row .btn-priority-call,
    .cockpit-hero-master.frame-electric .dispatch-btn-row .btn-dispatch-mechanic,
    .cockpit-hero-master.frame-electric .dispatch-btn-row .btn-priority-call,
    .cockpit-hero-master .btn-dispatch-mechanic,
    .cockpit-hero-master .btn-priority-call {
        width: clamp(34px, 8.5cqw, 42px) !important;
        min-width: clamp(34px, 8.5cqw, 42px) !important;
        height: clamp(34px, 8.5cqw, 42px) !important;
        min-height: clamp(34px, 8.5cqw, 42px) !important;
        max-height: 44px !important;
        aspect-ratio: 1 / 1 !important;
        border-radius: 6px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-decoration: none !important;
        box-sizing: border-box !important;
        padding: 0 !important;
        margin: 0 !important;
        cursor: pointer !important;
        backdrop-filter: blur(8px) saturate(180%) !important;
        -webkit-backdrop-filter: blur(8px) saturate(180%) !important;
        transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease, background 0.2s ease, border-color 0.2s ease !important;
    }

    /* Hide text labels entirely */
    .cockpit-hero-master .btn-dispatch-mechanic span,
    .cockpit-hero-master .btn-priority-call span {
        display: none !important;
    }

    /* Show and center SVG icons */
    .cockpit-hero-master .btn-dispatch-mechanic svg,
    .cockpit-hero-master .btn-priority-call svg {
        display: inline-block !important;
        width: clamp(15px, 3.8cqw, 19px) !important;
        height: clamp(15px, 3.8cqw, 19px) !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
    }

    /* Button 1 (Dispatch Icon): Translucent Solar Glass (#FACC15 Yellow) */
    .cockpit-hero-master.frame-sport .btn-dispatch-mechanic,
    .cockpit-hero-master.frame-sport .dispatch-btn-row .btn-dispatch-mechanic,
    .cockpit-hero-master.frame-electric .btn-dispatch-mechanic,
    .cockpit-hero-master.frame-electric .dispatch-btn-row .btn-dispatch-mechanic,
    .cockpit-hero-master .btn-dispatch-mechanic {
        background: linear-gradient(135deg, rgba(250, 204, 21, 0.85) 0%, rgba(234, 179, 8, 0.70) 50%, rgba(202, 138, 4, 0.78) 100%) !important;
        border: 1px solid rgba(255, 255, 255, 0.55) !important;
        color: #000000 !important;
        box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.75), inset 0 -1px 2px rgba(0, 0, 0, 0.25), 0 0 12px rgba(250, 204, 21, 0.45), 0 3px 8px rgba(0, 0, 0, 0.55) !important;
    }

    .cockpit-hero-master .btn-dispatch-mechanic svg {
        fill: #000000 !important;
        stroke: #000000 !important;
        filter: drop-shadow(0 1px 1px rgba(255, 255, 255, 0.4)) !important;
    }

    .cockpit-hero-master .btn-dispatch-mechanic:hover {
        background: linear-gradient(135deg, rgba(250, 204, 21, 0.96) 0%, rgba(234, 179, 8, 0.82) 50%, rgba(202, 138, 4, 0.88) 100%) !important;
        border-color: rgba(255, 255, 255, 0.85) !important;
        box-shadow: inset 0 1px 1px #ffffff, inset 0 -1px 2px rgba(0, 0, 0, 0.20), 0 0 18px rgba(250, 204, 21, 0.75), 0 4px 12px rgba(0, 0, 0, 0.65) !important;
        transform: translateY(-1px) scale(1.05) !important;
    }

    /* Button 2 (Priority Call Icon): Translucent Crimson Glass (#DC2626 Red) */
    .cockpit-hero-master.frame-sport .btn-priority-call,
    .cockpit-hero-master.frame-sport .dispatch-btn-row .btn-priority-call,
    .cockpit-hero-master.frame-electric .btn-priority-call,
    .cockpit-hero-master.frame-electric .dispatch-btn-row .btn-priority-call,
    .cockpit-hero-master .btn-priority-call {
        background: linear-gradient(135deg, rgba(239, 68, 68, 0.85) 0%, rgba(220, 38, 38, 0.70) 50%, rgba(185, 28, 28, 0.78) 100%) !important;
        border: 1px solid rgba(255, 255, 255, 0.45) !important;
        color: #FFFFFF !important;
        box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.65), inset 0 -1px 2px rgba(0, 0, 0, 0.35), 0 0 12px rgba(220, 38, 38, 0.45), 0 3px 8px rgba(0, 0, 0, 0.55) !important;
    }

    .cockpit-hero-master .btn-priority-call svg {
        fill: #FFFFFF !important;
        stroke: #FFFFFF !important;
        filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6)) !important;
    }

    .cockpit-hero-master .btn-priority-call:hover {
        background: linear-gradient(135deg, rgba(239, 68, 68, 0.96) 0%, rgba(220, 38, 38, 0.82) 50%, rgba(185, 28, 28, 0.88) 100%) !important;
        border-color: rgba(255, 255, 255, 0.75) !important;
        box-shadow: inset 0 1px 1px #ffffff, inset 0 -1px 2px rgba(0, 0, 0, 0.25), 0 0 18px rgba(220, 38, 38, 0.75), 0 4px 12px rgba(0, 0, 0, 0.65) !important;
        transform: translateY(-1px) scale(1.05) !important;
    }

    /* Hide desktop radar pod on Mobile display */
    .cockpit-hero-master.frame-sport .dispatch-radar-pod,
    .cockpit-hero-master.frame-electric .dispatch-radar-pod,
    .cockpit-hero-master .dispatch-radar-pod,
    .dispatch-radar-pod {
        display: none !important;
    }

    /* ==========================================================================
       9. DIGITAL DISPLAY 2x2 TELEMETRY GRID: 2 CLEAN ROWS UNDER CONTROLS
       Row 1:
         - Left (Card 2): 20m ARRIVAL / AVG ETA (Cyan OLED)
         - Right (Card 1): 100% MOBILE WORKSHOP (Teal OLED)
       Row 2:
         - Left (Card 3): 15,000+ RESCUES (Amber OLED)
         - Right (Card 4): 4.9 ★ RATING (Solar Gold OLED)
       ========================================================================== */
    .cockpit-hero-master.frame-sport .dashboard-display-right,
    .cockpit-hero-master.frame-electric .dashboard-display-right,
    .cockpit-hero-master .dashboard-display-right {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        width: 100% !important;
        max-width: none !important;
        height: 100% !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
        transform: none !important;
        animation: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        margin: 0 !important;
        padding: 0 !important;
        z-index: 8 !important;
        pointer-events: auto !important;
    }

    .cockpit-hero-master.frame-sport .cockpit-metrics-grid,
    .cockpit-hero-master.frame-electric .cockpit-metrics-grid,
    .cockpit-hero-master .cockpit-metrics-grid {
        position: relative !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        grid-template-rows: 0.8fr 0.5fr !important;
        grid-template-areas: 
            "card2 card1"
            "card3 card4" !important;
        gap: 4px !important;
        width: 70% !important;
        max-width: 70% !important;
        height: 100% !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
        padding: 0 !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
        perspective: 800px !important;
        transform-style: preserve-3d !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Common Card Relative Foundation (Grid Flow Inside Glass Frame) */
    .cockpit-hero-master.frame-sport .metric-card,
    .cockpit-hero-master.frame-sport .metric-card-1,
    .cockpit-hero-master.frame-sport .metric-card-2,
    .cockpit-hero-master.frame-sport .metric-card-3,
    .cockpit-hero-master.frame-sport .metric-card-4,
    .cockpit-hero-master.frame-electric .metric-card,
    .cockpit-hero-master.frame-electric .metric-card-1,
    .cockpit-hero-master.frame-electric .metric-card-2,
    .cockpit-hero-master.frame-electric .metric-card-3,
    .cockpit-hero-master.frame-electric .metric-card-4,
    .cockpit-hero-master .metric-card,
    .cockpit-hero-master .metric-card-1,
    .cockpit-hero-master .metric-card-2,
    .cockpit-hero-master .metric-card-3,
    .cockpit-hero-master .metric-card-4 {
        position: relative !important;
        top: auto !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        max-width: none !important;
        max-height: none !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        transform-origin: 50% 50% !important;
        transform-style: preserve-3d !important;
        backface-visibility: visible !important;
        will-change: transform, opacity !important;
        clip-path: none !important;
        margin: 0 !important;
        overflow: visible !important;
        pointer-events: auto !important;
    }

    /* Remove desktop trapezoids, hairline dividers and tags */
    .cockpit-hero-master .metric-card::before,
    .cockpit-hero-master.frame-sport .metric-card::before,
    .cockpit-hero-master.frame-sport .metric-card-1::before,
    .cockpit-hero-master.frame-sport .metric-card-2::before,
    .cockpit-hero-master.frame-sport .metric-card-3::before,
    .cockpit-hero-master.frame-sport .metric-card-4::before,
    .cockpit-hero-master.frame-electric .metric-card::before,
    .cockpit-hero-master.frame-electric .metric-card-1::before,
    .cockpit-hero-master.frame-electric .metric-card-2::before,
    .cockpit-hero-master.frame-electric .metric-card-3::before,
    .cockpit-hero-master.frame-electric .metric-card-4::before,
    .cockpit-hero-master .metric-card::after,
    .cockpit-hero-master.frame-sport .metric-card::after,
    .cockpit-hero-master.frame-sport .metric-card-content::after,
    .cockpit-hero-master.frame-electric .metric-card::after,
    .cockpit-hero-master.frame-electric .metric-card-content::after {
        display: none !important;
        content: none !important;
    }

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

    /* Fade-In Keyframe for Location Deck on Mobile */
    @keyframes hudCardFadeInMobile {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    /* --------------------------------------------------------------------------
       ENTRANCE ANIMATION: 3D FLIP VERTICAL (rotateX)
       Bottom Row: 200ms delay  ·  Top Row: 500ms delay
       -------------------------------------------------------------------------- */
    @keyframes flipVerticalMobile {
        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);
        }
    }

    /* --------------------------------------------------------------------------
       1. 1st ROW OF CARDS / LEFT: Card 2 -> 20m AVG. ARRIVAL ETA
       Cyan OLED Instrument Pod (500ms Flip Vertical Delay)
       -------------------------------------------------------------------------- */
    .cockpit-hero-master.frame-sport .metric-card-2,
    .cockpit-hero-master.frame-electric .metric-card-2,
    .cockpit-hero-master .metric-card-2 {
        grid-area: card2 !important;
        position: relative !important;
        top: auto !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        width: 100% !important;
        max-width: none !important;
        height: 100% !important;
        min-height: 0 !important;
        max-height: none !important;
        background: linear-gradient(180deg, rgba(8, 26, 44, 0.85) 0%, rgba(4, 12, 22, 0.96) 100%) !important;
        border: 1px solid rgba(0, 229, 255, 0.55) !important;
        border-radius: 8px !important;
        box-shadow: inset 0 0 12px rgba(0, 229, 255, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 3px 10px rgba(0, 0, 0, 0.75) !important;
        backdrop-filter: blur(6px) !important;
        -webkit-backdrop-filter: blur(6px) !important;
        padding: 3px 4px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        transform-style: preserve-3d !important;
        backface-visibility: visible !important;
        transform-origin: 50% 50% !important;
        animation: flipVerticalMobile 0.85s cubic-bezier(0.25, 1, 0.5, 1) 500ms both !important;
    }

    /* --------------------------------------------------------------------------
       2. 1st ROW OF CARDS / RIGHT: Card 1 -> 100% MOBILE WORKSHOP
       Teal OLED Instrument Pod (500ms Flip Vertical Delay)
       -------------------------------------------------------------------------- */
    .cockpit-hero-master.frame-sport .metric-card-1,
    .cockpit-hero-master.frame-electric .metric-card-1,
    .cockpit-hero-master .metric-card-1 {
        grid-area: card1 !important;
        position: relative !important;
        top: auto !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        width: 100% !important;
        max-width: none !important;
        height: 100% !important;
        min-height: 0 !important;
        max-height: none !important;
        background: linear-gradient(180deg, rgba(8, 34, 34, 0.85) 0%, rgba(4, 16, 16, 0.96) 100%) !important;
        border: 1px solid rgba(45, 212, 191, 0.55) !important;
        border-radius: 8px !important;
        box-shadow: inset 0 0 12px rgba(45, 212, 191, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 3px 10px rgba(0, 0, 0, 0.75) !important;
        backdrop-filter: blur(6px) !important;
        -webkit-backdrop-filter: blur(6px) !important;
        padding: 3px 4px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        transform-style: preserve-3d !important;
        backface-visibility: visible !important;
        transform-origin: 50% 50% !important;
        animation: flipVerticalMobile 0.85s cubic-bezier(0.25, 1, 0.5, 1) 500ms both !important;
    }

    /* --------------------------------------------------------------------------
       3. 2nd ROW OF CARDS / LEFT: Card 3 -> 15,000+ RESCUES
       Amber/Orange OLED Instrument Pod (200ms Flip Vertical Delay)
       -------------------------------------------------------------------------- */
    .cockpit-hero-master.frame-sport .metric-card-3,
    .cockpit-hero-master.frame-electric .metric-card-3,
    .cockpit-hero-master .metric-card-3 {
        grid-area: card3 !important;
        position: relative !important;
        top: auto !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        width: 100% !important;
        max-width: none !important;
        height: 100% !important;
        min-height: 0 !important;
        max-height: none !important;
        background: linear-gradient(180deg, rgba(38, 20, 8, 0.85) 0%, rgba(18, 9, 4, 0.96) 100%) !important;
        border: 1px solid rgba(251, 146, 60, 0.55) !important;
        border-radius: 8px !important;
        box-shadow: inset 0 0 12px rgba(251, 146, 60, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.20), 0 3px 10px rgba(0, 0, 0, 0.75) !important;
        backdrop-filter: blur(6px) !important;
        -webkit-backdrop-filter: blur(6px) !important;
        padding: 2px 4px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        transform-style: preserve-3d !important;
        backface-visibility: visible !important;
        transform-origin: 50% 50% !important;
        animation: flipVerticalMobile 0.85s cubic-bezier(0.25, 1, 0.5, 1) 200ms both !important;
    }

    /* --------------------------------------------------------------------------
       4. 2nd ROW OF CARDS / RIGHT: Card 4 -> 4.9 ★ RATING
       Solar Gold OLED Instrument Pod (200ms Flip Vertical Delay)
       -------------------------------------------------------------------------- */
    .cockpit-hero-master.frame-sport .metric-card-4,
    .cockpit-hero-master.frame-electric .metric-card-4,
    .cockpit-hero-master .metric-card-4 {
        grid-area: card4 !important;
        position: relative !important;
        top: auto !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        width: 100% !important;
        max-width: none !important;
        height: 100% !important;
        min-height: 0 !important;
        max-height: none !important;
        background: linear-gradient(180deg, rgba(38, 30, 8, 0.85) 0%, rgba(18, 14, 4, 0.96) 100%) !important;
        border: 1px solid rgba(250, 204, 21, 0.55) !important;
        border-radius: 8px !important;
        box-shadow: inset 0 0 12px rgba(250, 204, 21, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.20), 0 3px 10px rgba(0, 0, 0, 0.75) !important;
        backdrop-filter: blur(6px) !important;
        -webkit-backdrop-filter: blur(6px) !important;
        padding: 2px 4px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        transform-style: preserve-3d !important;
        backface-visibility: visible !important;
        transform-origin: 50% 50% !important;
        animation: flipVerticalMobile 0.85s cubic-bezier(0.25, 1, 0.5, 1) 200ms both !important;
    }

    /* --------------------------------------------------------------------------
       HOVER ANIMATION REMOVED (Zero Jitter / Zero Flip on Touch or Hover)
       -------------------------------------------------------------------------- */
    .cockpit-hero-master.frame-sport .metric-card:hover,
    .cockpit-hero-master.frame-electric .metric-card:hover,
    .cockpit-hero-master .metric-card:hover {
        left: auto !important;
        right: auto !important;
        animation: none !important;
        transform: none !important;
        filter: none !important;
    }

    .cockpit-hero-master.frame-sport .metric-card-2:hover,
    .cockpit-hero-master.frame-electric .metric-card-2:hover,
    .cockpit-hero-master .metric-card-2:hover {
        left: auto !important;
        right: auto !important;
        box-shadow: inset 0 0 18px rgba(0, 229, 255, 0.35), 0 0 16px rgba(0, 229, 255, 0.45) !important;
        border-color: rgba(0, 229, 255, 0.90) !important;
    }

    .cockpit-hero-master.frame-sport .metric-card-1:hover,
    .cockpit-hero-master.frame-electric .metric-card-1:hover,
    .cockpit-hero-master .metric-card-1:hover {
        left: auto !important;
        right: auto !important;
        box-shadow: inset 0 0 18px rgba(45, 212, 191, 0.35), 0 0 16px rgba(45, 212, 191, 0.45) !important;
        border-color: rgba(45, 212, 191, 0.90) !important;
    }

    .cockpit-hero-master.frame-sport .metric-card-3:hover,
    .cockpit-hero-master.frame-electric .metric-card-3:hover,
    .cockpit-hero-master .metric-card-3:hover {
        left: auto !important;
        right: auto !important;
        box-shadow: inset 0 0 18px rgba(251, 146, 60, 0.35), 0 0 16px rgba(251, 146, 60, 0.45) !important;
        border-color: rgba(251, 146, 60, 0.90) !important;
    }

    .cockpit-hero-master.frame-sport .metric-card-4:hover,
    .cockpit-hero-master.frame-electric .metric-card-4:hover,
    .cockpit-hero-master .metric-card-4:hover {
        left: auto !important;
        right: auto !important;
        box-shadow: inset 0 0 18px rgba(250, 204, 21, 0.35), 0 0 16px rgba(250, 204, 21, 0.45) !important;
        border-color: rgba(250, 204, 21, 0.90) !important;
    }

    /* Common Card Content Container */
    .cockpit-hero-master.frame-sport .metric-card-content,
    .cockpit-hero-master.frame-sport .metric-card-1 .metric-card-content,
    .cockpit-hero-master.frame-sport .metric-card-2 .metric-card-content,
    .cockpit-hero-master.frame-sport .metric-card-3 .metric-card-content,
    .cockpit-hero-master.frame-sport .metric-card-4 .metric-card-content,
    .cockpit-hero-master.frame-electric .metric-card-content,
    .cockpit-hero-master.frame-electric .metric-card-1 .metric-card-content,
    .cockpit-hero-master.frame-electric .metric-card-2 .metric-card-content,
    .cockpit-hero-master.frame-electric .metric-card-3 .metric-card-content,
    .cockpit-hero-master.frame-electric .metric-card-4 .metric-card-content,
    .cockpit-hero-master .metric-card-content {
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: 100% !important;
        padding: 1px !important;
        margin: 0 !important;
        gap: 1px !important;
        text-align: center !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }

    /* ============================================================
       UPPER WINGS (CARD 1 & CARD 2): HORIZONTAL 2-COLUMN LAYOUT
       Numeral LEFT Column · 2-Row Label RIGHT Column
       Card 2 (Left):  [ 20m ]  [ ARRIVAL / AVG ETA ]
       Card 1 (Right): [ 100% ] [ MOBILE / WORKSHOP ]
       ============================================================ */

    /* Clean Vertically Stacked Card Content (Numeral on Top, 2-Row Label on Bottom) */
    .cockpit-hero-master.frame-sport .metric-card-1 .metric-card-content,
    .cockpit-hero-master.frame-sport .metric-card-2 .metric-card-content,
    .cockpit-hero-master.frame-electric .metric-card-1 .metric-card-content,
    .cockpit-hero-master.frame-electric .metric-card-2 .metric-card-content,
    .cockpit-hero-master .metric-card-1 .metric-card-content,
    .cockpit-hero-master .metric-card-2 .metric-card-content {
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: 100% !important;
        padding: 2px 2px !important;
        margin: 0 !important;
        gap: 1px !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }

    /* Numeral Digits (20m Cyan / 100% Teal) - Clean Crisp Solid Typography (Zero Blur) */
    .cockpit-hero-master.frame-sport .metric-card-1 .metric-number,
    .cockpit-hero-master.frame-sport .metric-card-1 .gauge-col-numeral,
    .cockpit-hero-master.frame-sport .metric-card-2 .metric-number,
    .cockpit-hero-master.frame-sport .metric-card-2 .gauge-col-numeral,
    .cockpit-hero-master.frame-electric .metric-card-1 .metric-number,
    .cockpit-hero-master.frame-electric .metric-card-1 .gauge-col-numeral,
    .cockpit-hero-master.frame-electric .metric-card-2 .metric-number,
    .cockpit-hero-master.frame-electric .metric-card-2 .gauge-col-numeral,
    .cockpit-hero-master .metric-card-1 .metric-number,
    .cockpit-hero-master .metric-card-1 .gauge-col-numeral,
    .cockpit-hero-master .metric-card-2 .metric-number,
    .cockpit-hero-master .metric-card-2 .gauge-col-numeral,
    .cockpit-hero-master .metric-card .metric-number,
    .cockpit-hero-master .metric-card .gauge-col-numeral,
    .cockpit-hero-master .metric-card .metric-number *,
    .cockpit-hero-master .metric-card .gauge-col-numeral * {
        text-shadow: none !important;
        filter: none !important;
    }

    .cockpit-hero-master.frame-sport .metric-card-1 .metric-number,
    .cockpit-hero-master.frame-sport .metric-card-1 .gauge-col-numeral,
    .cockpit-hero-master.frame-sport .metric-card-2 .metric-number,
    .cockpit-hero-master.frame-sport .metric-card-2 .gauge-col-numeral,
    .cockpit-hero-master.frame-electric .metric-card-1 .metric-number,
    .cockpit-hero-master.frame-electric .metric-card-1 .gauge-col-numeral,
    .cockpit-hero-master.frame-electric .metric-card-2 .metric-number,
    .cockpit-hero-master.frame-electric .metric-card-2 .gauge-col-numeral,
    .cockpit-hero-master .metric-card-1 .metric-number,
    .cockpit-hero-master .metric-card-1 .gauge-col-numeral,
    .cockpit-hero-master .metric-card-2 .metric-number,
    .cockpit-hero-master .metric-card-2 .gauge-col-numeral {
        order: 1 !important;
        flex: 0 0 auto !important;
        display: inline-flex !important;
        align-items: baseline !important;
        justify-content: center !important;
        font-family: var(--font-hud-numbers, var(--font-heading)) !important;
        font-weight: 900 !important;
        font-style: normal !important;
        line-height: 1 !important;
        font-size: clamp(1.21rem, 4.8cqw, 1.66rem) !important;
        white-space: nowrap !important;
        text-align: center !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Card 2 Numeral (Left Card): 20m Cyan - Zero Blur */
    .cockpit-hero-master.frame-sport .metric-card-2 .metric-number,
    .cockpit-hero-master.frame-sport .metric-card-2 .gauge-col-numeral,
    .cockpit-hero-master.frame-electric .metric-card-2 .metric-number,
    .cockpit-hero-master.frame-electric .metric-card-2 .gauge-col-numeral,
    .cockpit-hero-master .metric-card-2 .metric-number,
    .cockpit-hero-master .metric-card-2 .gauge-col-numeral {
        color: #00E5FF !important;
        text-shadow: none !important;
        filter: none !important;
    }

    .cockpit-hero-master.frame-sport .metric-card-2 .metric-number span,
    .cockpit-hero-master.frame-sport .metric-card-2 .gauge-col-numeral span,
    .cockpit-hero-master.frame-electric .metric-card-2 .metric-number span,
    .cockpit-hero-master.frame-electric .metric-card-2 .gauge-col-numeral span,
    .cockpit-hero-master .metric-card-2 .metric-number span,
    .cockpit-hero-master .metric-card-2 .gauge-col-numeral span {
        font-size: clamp(0.68rem, 2.5cqw, 0.95rem) !important;
        font-weight: 900 !important;
        color: #00E5FF !important;
        margin-left: 1px !important;
        text-shadow: none !important;
        filter: none !important;
    }

    /* Card 1 Numeral (Right Card): 100% Teal - Zero Blur */
    .cockpit-hero-master.frame-sport .metric-card-1 .metric-number,
    .cockpit-hero-master.frame-sport .metric-card-1 .gauge-col-numeral,
    .cockpit-hero-master.frame-electric .metric-card-1 .metric-number,
    .cockpit-hero-master.frame-electric .metric-card-1 .gauge-col-numeral,
    .cockpit-hero-master .metric-card-1 .metric-number,
    .cockpit-hero-master .metric-card-1 .gauge-col-numeral {
        color: #2DD4BF !important;
        text-shadow: none !important;
        filter: none !important;
    }

    .cockpit-hero-master.frame-sport .metric-card-1 .metric-number span,
    .cockpit-hero-master.frame-sport .metric-card-1 .gauge-col-numeral span,
    .cockpit-hero-master.frame-electric .metric-card-1 .metric-number span,
    .cockpit-hero-master.frame-electric .metric-card-1 .gauge-col-numeral span,
    .cockpit-hero-master .metric-card-1 .metric-number span,
    .cockpit-hero-master .metric-card-1 .gauge-col-numeral span {
        font-size: clamp(0.68rem, 2.5cqw, 0.95rem) !important;
        font-weight: 900 !important;
        color: #2DD4BF !important;
        margin-left: 1px !important;
        text-shadow: none !important;
        filter: none !important;
    }

    /* 2-Row Label Container */
    .cockpit-hero-master.frame-sport .metric-card-1 .gauge-col-label,
    .cockpit-hero-master.frame-sport .metric-card-1 .metric-label,
    .cockpit-hero-master.frame-sport .metric-card-2 .gauge-col-label,
    .cockpit-hero-master.frame-sport .metric-card-2 .metric-label,
    .cockpit-hero-master.frame-electric .metric-card-1 .gauge-col-label,
    .cockpit-hero-master.frame-electric .metric-card-1 .metric-label,
    .cockpit-hero-master.frame-electric .metric-card-2 .gauge-col-label,
    .cockpit-hero-master.frame-electric .metric-card-2 .metric-label,
    .cockpit-hero-master .metric-card-1 .gauge-col-label,
    .cockpit-hero-master .metric-card-1 .metric-label,
    .cockpit-hero-master .metric-card-2 .gauge-col-label,
    .cockpit-hero-master .metric-card-2 .metric-label {
        order: 2 !important;
        flex: 0 0 auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        text-align: center !important;
        gap: 1px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        border-left: none !important;
    }

    /* 1st and 2nd Row Styling (Big & Readable by Naked Eye) - Font Size Increased by 20% */
    .cockpit-hero-master.frame-sport .metric-card-1 .gauge-col-label .gauge-row-1,
    .cockpit-hero-master.frame-sport .metric-card-1 .gauge-col-label .gauge-row-2,
    .cockpit-hero-master.frame-sport .metric-card-2 .gauge-col-label .gauge-row-1,
    .cockpit-hero-master.frame-sport .metric-card-2 .gauge-col-label .gauge-row-2,
    .cockpit-hero-master.frame-sport .metric-card-1 .gauge-row-1,
    .cockpit-hero-master.frame-sport .metric-card-1 .gauge-row-2,
    .cockpit-hero-master.frame-sport .metric-card-2 .gauge-row-1,
    .cockpit-hero-master.frame-sport .metric-card-2 .gauge-row-2,
    .cockpit-hero-master.frame-electric .metric-card-1 .gauge-row-1,
    .cockpit-hero-master.frame-electric .metric-card-1 .gauge-row-2,
    .cockpit-hero-master.frame-electric .metric-card-2 .gauge-row-1,
    .cockpit-hero-master.frame-electric .metric-card-2 .gauge-row-2,
    .cockpit-hero-master .metric-card-1 .gauge-row-1,
    .cockpit-hero-master .metric-card-1 .gauge-row-2,
    .cockpit-hero-master .metric-card-2 .gauge-row-1,
    .cockpit-hero-master .metric-card-2 .gauge-row-2 {
        display: block !important;
        white-space: nowrap !important;
        max-width: none !important;
        font-family: var(--font-hud-numbers, var(--font-heading)) !important;
        font-size: clamp(0.74rem, 2.9cqw, 0.95rem) !important;
        font-weight: 900 !important;
        line-height: 1.15 !important;
        letter-spacing: 0.04em !important;
        text-align: center !important;
        text-transform: uppercase !important;
        color: #FFFFFF !important;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 0 8px rgba(0, 0, 0, 0.9) !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* ============================================================
       CENTER STEM CARDS 3 & 4: VERTICAL COLUMN LAYOUT
       Number ON TOP  ·  Single Label BELOW (Centered in Middle of Card)
       ============================================================ */

    /* Content container: perfect vertical & horizontal centering */
    .cockpit-hero-master.frame-sport .metric-card-3 .metric-card-content,
    .cockpit-hero-master.frame-sport .metric-card-4 .metric-card-content,
    .cockpit-hero-master.frame-electric .metric-card-3 .metric-card-content,
    .cockpit-hero-master.frame-electric .metric-card-4 .metric-card-content,
    .cockpit-hero-master .metric-card-3 .metric-card-content,
    .cockpit-hero-master .metric-card-4 .metric-card-content {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        gap: 2px !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        height: 100% !important;
        box-sizing: border-box !important;
    }

    /* NUMERAL — Card 3 (Amber Orange): Clean Crisp Solid Typography (Zero Blur) */
    .cockpit-hero-master.frame-sport .metric-card-3 .metric-number,
    .cockpit-hero-master.frame-sport .metric-card-3 .gauge-col-numeral,
    .cockpit-hero-master.frame-electric .metric-card-3 .metric-number,
    .cockpit-hero-master.frame-electric .metric-card-3 .gauge-col-numeral,
    .cockpit-hero-master .metric-card-3 .metric-number,
    .cockpit-hero-master .metric-card-3 .gauge-col-numeral {
        display: inline-flex !important;
        align-items: baseline !important;
        justify-content: center !important;
        flex: 0 0 auto !important;
        height: auto !important;
        font-family: var(--font-hud-numbers, var(--font-heading)) !important;
        font-weight: 900 !important;
        font-style: normal !important;
        font-size: clamp(1.28rem, 4.9cqw, 1.72rem) !important;
        line-height: 1 !important;
        color: #FB923C !important;
        text-shadow: none !important;
        filter: none !important;
        white-space: nowrap !important;
        text-align: center !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .cockpit-hero-master.frame-sport .metric-card-3 .metric-number span,
    .cockpit-hero-master.frame-sport .metric-card-3 .gauge-col-numeral span,
    .cockpit-hero-master.frame-electric .metric-card-3 .metric-number span,
    .cockpit-hero-master.frame-electric .metric-card-3 .gauge-col-numeral span,
    .cockpit-hero-master .metric-card-3 .metric-number span,
    .cockpit-hero-master .metric-card-3 .gauge-col-numeral span {
        font-size: clamp(0.84rem, 3.1cqw, 1.16rem) !important;
        font-weight: 900 !important;
        color: #FB923C !important;
        margin-left: 1px !important;
        text-shadow: none !important;
        filter: none !important;
    }

    /* NUMERAL — Card 4 (Solar Gold): Clean Crisp Solid Typography (Zero Blur) */
    .cockpit-hero-master.frame-sport .metric-card-4 .metric-number,
    .cockpit-hero-master.frame-sport .metric-card-4 .gauge-col-numeral,
    .cockpit-hero-master.frame-electric .metric-card-4 .metric-number,
    .cockpit-hero-master.frame-electric .metric-card-4 .gauge-col-numeral,
    .cockpit-hero-master .metric-card-4 .metric-number,
    .cockpit-hero-master .metric-card-4 .gauge-col-numeral {
        display: inline-flex !important;
        align-items: baseline !important;
        justify-content: center !important;
        flex: 0 0 auto !important;
        height: auto !important;
        font-family: var(--font-hud-numbers, var(--font-heading)) !important;
        font-weight: 900 !important;
        font-style: normal !important;
        font-size: clamp(1.28rem, 4.9cqw, 1.72rem) !important;
        line-height: 1 !important;
        color: #FACC15 !important;
        text-shadow: none !important;
        filter: none !important;
        white-space: nowrap !important;
        text-align: center !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .cockpit-hero-master.frame-sport .metric-card-4 .metric-number span,
    .cockpit-hero-master.frame-sport .metric-card-4 .gauge-col-numeral span,
    .cockpit-hero-master.frame-electric .metric-card-4 .metric-number span,
    .cockpit-hero-master.frame-electric .metric-card-4 .gauge-col-numeral span,
    .cockpit-hero-master .metric-card-4 .metric-number span,
    .cockpit-hero-master .metric-card-4 .gauge-col-numeral span {
        font-size: clamp(0.84rem, 3.1cqw, 1.16rem) !important;
        font-weight: 900 !important;
        color: #FACC15 !important;
        margin-left: 2px !important;
        text-shadow: none !important;
        filter: none !important;
    }

    /* LABEL (RESCUES / RATING) — Centered in Middle of Card */
    .cockpit-hero-master.frame-sport .metric-card-3 .gauge-col-label,
    .cockpit-hero-master.frame-sport .metric-card-3 .metric-label,
    .cockpit-hero-master.frame-electric .metric-card-3 .gauge-col-label,
    .cockpit-hero-master.frame-electric .metric-card-3 .metric-label,
    .cockpit-hero-master .metric-card-3 .gauge-col-label,
    .cockpit-hero-master .metric-card-3 .metric-label,
    .cockpit-hero-master.frame-sport .metric-card-4 .gauge-col-label,
    .cockpit-hero-master.frame-sport .metric-card-4 .metric-label,
    .cockpit-hero-master.frame-electric .metric-card-4 .gauge-col-label,
    .cockpit-hero-master.frame-electric .metric-card-4 .metric-label,
    .cockpit-hero-master .metric-card-4 .gauge-col-label,
    .cockpit-hero-master .metric-card-4 .metric-label {
        order: 2 !important;
        flex: 0 0 auto !important;
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        text-align: center !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        border-left: none !important;
    }

    /* gauge-row-1: RESCUES / RATING - Font Size Increased by 30% (from 11.2px baseline to 14.56px) */
    .cockpit-hero-master.frame-sport .metric-card-3 .gauge-col-label .gauge-row-1,
    .cockpit-hero-master.frame-sport .metric-card-3 .metric-label .gauge-row-1,
    .cockpit-hero-master.frame-sport .metric-card-3 .gauge-row-1,
    .cockpit-hero-master.frame-sport .metric-card-4 .gauge-col-label .gauge-row-1,
    .cockpit-hero-master.frame-sport .metric-card-4 .metric-label .gauge-row-1,
    .cockpit-hero-master.frame-sport .metric-card-4 .gauge-row-1,
    .cockpit-hero-master.frame-electric .metric-card-3 .gauge-col-label .gauge-row-1,
    .cockpit-hero-master.frame-electric .metric-card-3 .metric-label .gauge-row-1,
    .cockpit-hero-master.frame-electric .metric-card-3 .gauge-row-1,
    .cockpit-hero-master.frame-electric .metric-card-4 .gauge-col-label .gauge-row-1,
    .cockpit-hero-master.frame-electric .metric-card-4 .metric-label .gauge-row-1,
    .cockpit-hero-master.frame-electric .metric-card-4 .gauge-row-1,
    .cockpit-hero-master .metric-card-3 .gauge-col-label .gauge-row-1,
    .cockpit-hero-master .metric-card-3 .metric-label .gauge-row-1,
    .cockpit-hero-master .metric-card-3 .gauge-row-1,
    .cockpit-hero-master .metric-card-4 .gauge-col-label .gauge-row-1,
    .cockpit-hero-master .metric-card-4 .metric-label .gauge-row-1,
    .cockpit-hero-master .metric-card-4 .gauge-row-1 {
        display: block !important;
        white-space: nowrap !important;
        font-family: var(--font-hud-numbers, var(--font-heading)) !important;
        font-size: clamp(0.91rem, 3.8cqw, 0.98rem) !important;
        font-weight: 900 !important;
        line-height: 1 !important;
        letter-spacing: 0.03em !important;
        text-align: center !important;
        text-transform: uppercase !important;
        color: #FFFFFF !important;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 0 8px rgba(0, 0, 0, 0.9) !important;
        padding: 0 !important;
        margin: 0 !important;
    }

}