/* ==========================================================================
   Car Doctor On Call — iPad & Tablet Hero Section Stylesheet (768px - 1024px)
   LOCKED GOLDEN CONFIGURATION SSOT — FINAL PHOTOSHOP BIG BIKE VESSEL (896 x 1730)
   STATUS: FINAL USER REFINED RELEASE · October 22, 2026
   Author: Nicole, Lead Secretary & Principal AI Agent (WeTribe OS)

   Hero Architecture & Layout Specifications:
   - 896/1730 Aspect Ratio Stage Container with Contain Mode (Zero Cropping)
   - High-Precision Keyed-Out Final Big Bike (final_ipad_big_bike_keyed.png)
   - Refined Open Windshield Canopy with Seamless Roadside Emergency Van Reel (Height: 60.5%)
   - Preserved Speedometer HUD with Battery Gauge & Tachometer
   - Fuel Tank OLED Digital Display (Y: 53.0% - 78.0%, 74% width, max 440px):
     1. Top HUD Ribbon: "● GPS RADAR ACTIVE · 14 VANS PATROLLING"
     2. Single-Row Controls: Location Bar with Soft Zenith Aura Inner Backlit + Dual Action Buttons
     3. 2x2 Telemetry Grid:
        - 1st Row of Cards (Cards 2 & 1): 20% Height Reduction (0.8fr), 500ms Fade-in Delay
          * Card 2: 20m Cyan (Left) | ARRIVAL / AVG ETA
          * Card 1: 100% Teal (Right) | MOBILE / WORKSHOP
        - 2nd Row of Cards (Cards 3 & 4): 50% Height Reduction (0.5fr), +10% Font Size, Centered
          * Card 3: 15,000+ Amber Phosphor (Left) | RESCUES
          * Card 4: 4.9 ★ Solar Gold Phosphor (Right) | RATING
     4. Hover Interaction: Smooth 2px Micro-Elevation (translateY(-2px) scale(1.02)) + Vivid Cyber Neon Glow (Zero 3D Flips / Zero Disappearance)
     5. Telemetry Cards: 100% Constant Visibility & Opacity (No Glitch / No Blank Out)
   - 3D Car Doctor On Call Metallic Crest Mounted Directly Beneath Screen (Y: 78.6%+)

   STRICTLY SCOPED TO IPAD & TABLETS (min-width: 768px and max-width: 1024px)
   DESKTOP, LAPTOP, AND MOBILE PHONES ARE 100% UNTOUCHED AND PROTECTED
   ========================================================================== */

@media (min-width: 768px) and (max-width: 1024px) {

    /* 1. Master Cockpit Master Stage on iPad: Natural Scroll Height Focused Top-Center */
    .cockpit-hero-master.frame-sport,
    .cockpit-hero-master.frame-electric,
    .cockpit-hero-master {
        position: relative !important;
        width: 100% !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
        height: auto !important;
        max-height: none !important;
        overflow-x: hidden !important;
        overflow-y: 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: Full-Width Edge-to-Edge Container (Zero Side Margins) */
    .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: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        box-sizing: border-box !important;
        flex: none !important;
        min-height: 0 !important;
    }

    /* 3. Golden Big Bike iPad Vessel: 100% Edge-to-Edge Width (1792/2895 Aspect Ratio) */
    .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: 100% !important;
        height: auto !important;
        max-height: none !important;
        aspect-ratio: 1792 / 2895 !important;
        container-type: inline-size !important;
        container-name: ipad-cockpit-stage !important;
        border-radius: 0 !important;
        overflow: hidden !important;
        box-shadow: none !important;
        background: #04060A !important;
        display: block !important;
        margin: 0 !important;
    }

    /* 4. Live Roadside Service Reel: Shows Through Keyed-Out Windshield Canopy & Flanks (100% Full-Bleed Behind Bike) */
    .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: 100% !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: 100% 100% !important;
        opacity: 0 !important;
        filter: brightness(1.06) contrast(1.04) saturate(1.08) !important;
        transition: opacity 1.8s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

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

    /* 5. Clean Golden Big Bike Cockpit Mask (big_bike_for_ipad_keyed.png) Focused Top-Center */
    .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_for_ipad_keyed.png?v=golden_ipad_bike_v2') !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;
    }

    .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) */
    .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: 3.5% !important;
        bottom: auto !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        width: 80% !important;
        max-width: 360px !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.30rem !important;
        padding: 0.20rem 0.75rem !important;
        font-size: clamp(0.54rem, 1.8cqw, 0.68rem) !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: 57.0% !important;
        bottom: auto !important;
        height: 29.0% !important;
        max-height: 29.0% !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        width: 52% !important;
        max-width: 480px !important;
        margin: 0 !important;
        padding: 4px 6px 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: center !important;
        gap: clamp(4px, 1.0cqw, 6px) !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: 90% !important;
        text-align: center !important;
        font-family: var(--font-hud-numbers, var(--font-heading)) !important;
        font-size: clamp(0.57rem, 1.76cqw, 0.75rem) !important;
        font-weight: 800 !important;
        letter-spacing: 0.10em !important;
        color: #FACC15 !important;
        background: linear-gradient(90deg, #FACC15 0%, #FACC15 45%, #38BDF8 55%, #00E5FF 100%) !important;
        -webkit-background-clip: text !important;
        background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        text-shadow: none !important;
        filter: none !important;
        padding: 0 0 3px !important;
        border-bottom: 1px solid rgba(0, 229, 255, 0.25) !important;
        margin: 0 auto !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: 0 0 auto !important;
        height: auto !important;
        min-height: 0 !important;
        gap: clamp(6px, 1.4cqw, 10px) !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        justify-content: center !important;
    }

    /* Fade-In Keyframe for Smooth Entrance Animation on iPad */
    @keyframes hudCardFadeInIpad {
        0% {
            opacity: 0;
            transform: translateY(4px);
        }

        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* ==========================================================================
       8. DIGITAL DISPLAY UPPER DECK: Single-Row Location Controls
       Entrance Animation: Fade-in with 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: hudCardFadeInIpad 0.65s ease-out 700ms both !important;
        opacity: 1 !important;
        visibility: visible !important;
        width: 90% !important;
        max-width: 90% !important;
        flex: 0 0 auto !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        margin: 0 auto !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(5px, 1.2cqw, 8px) !important;
    }

    /* Location Input: Digital Display Console with Soft Zenith Aura 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, 6.0cqw, 42px) !important;
        min-height: clamp(34px, 6.0cqw, 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.10) 0%, rgba(8, 26, 44, 0.90) 70%, rgba(4, 12, 22, 0.98) 100%) !important;
        border: 1px solid rgba(0, 229, 255, 0.48) !important;
        border-radius: 6px !important;
        padding: 0 0.50rem 0 0.65rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 0.35rem !important;
        box-shadow: inset 0 0 14px rgba(0, 229, 255, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 0 8px rgba(0, 229, 255, 0.16), 0 3px 8px rgba(0, 0, 0, 0.75) !important;
        backdrop-filter: blur(6px) !important;
        -webkit-backdrop-filter: blur(6px) !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 {
        border-color: rgba(0, 229, 255, 0.80) !important;
        box-shadow: inset 0 0 18px rgba(0, 229, 255, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.30), 0 0 12px rgba(0, 229, 255, 0.28), 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;
    }

    .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.56rem, 1.8cqw, 0.72rem) !important;
        color: #E2E8F0 !important;
        font-weight: 600 !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 2px rgba(0, 0, 0, 0.8) !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: #94A3B8 !important;
        opacity: 1 !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: 4px !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(12px, 1.8cqw, 15px) !important;
        height: clamp(12px, 1.8cqw, 15px) !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(11px, 1.7cqw, 14px) !important;
        height: clamp(11px, 1.7cqw, 14px) !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 (iPad 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: 5px !important;
        right: clamp(96px, 20cqw, 120px) !important;
        left: auto !important;
        width: clamp(32px, 5.0cqw, 42px) !important;
        height: clamp(38px, 6.0cqw, 50px) !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 Icon Buttons */
    .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(5px, 1.0cqw, 7px) !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, 6.0cqw, 42px) !important;
        min-width: clamp(34px, 6.0cqw, 42px) !important;
        height: clamp(34px, 6.0cqw, 42px) !important;
        min-height: clamp(34px, 6.0cqw, 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;
        transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease !important;
    }

    .cockpit-hero-master .btn-dispatch-mechanic span,
    .cockpit-hero-master .btn-priority-call span {
        display: none !important;
    }

    .cockpit-hero-master .btn-dispatch-mechanic svg,
    .cockpit-hero-master .btn-priority-call svg {
        display: inline-block !important;
        width: clamp(16px, 2.6cqw, 20px) !important;
        height: clamp(16px, 2.6cqw, 20px) !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
    }

    /* Button 1 (Dispatch Icon): Vibrant 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: #FACC15 !important;
        border: 1px solid #EAB308 !important;
        color: #000000 !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5), 0 0 8px rgba(250, 204, 21, 0.35) !important;
    }

    .cockpit-hero-master .btn-dispatch-mechanic svg {
        fill: #000000 !important;
        stroke: #000000 !important;
    }

    .cockpit-hero-master .btn-dispatch-mechanic:hover {
        transform: translateY(-1px) scale(1.05) !important;
        box-shadow: 0 4px 12px rgba(250, 204, 21, 0.60) !important;
    }

    /* Button 2 (Priority Call Icon): Crimson 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: #DC2626 !important;
        border: 1px solid #B91C1C !important;
        color: #FFFFFF !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5), 0 0 8px rgba(220, 38, 38, 0.35) !important;
    }

    .cockpit-hero-master .btn-priority-call svg {
        fill: #FFFFFF !important;
        stroke: #FFFFFF !important;
    }

    .cockpit-hero-master .btn-priority-call:hover {
        transform: translateY(-1px) scale(1.05) !important;
        box-shadow: 0 4px 12px rgba(220, 38, 38, 0.60) !important;
    }

    .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 (2nd row from top overall): Reduced 20% (0.8fr)
         - Left (Card 2): 20m ARRIVAL / AVG ETA (Cyan OLED)
         - Right (Card 1): 100% MOBILE WORKSHOP (Teal OLED)
       Row 2 (last row overall): Reduced 50% (0.5fr), Content centered, +10% Font Size
         - 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: auto !important;
        flex: 0 0 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: 1fr 1fr !important;
        grid-template-areas: 
            "card2 card1"
            "card3 card4" !important;
        gap: clamp(5px, 1.2cqw, 8px) !important;
        width: 63.8% !important;
        max-width: 63.8% !important;
        height: clamp(210px, 27.0cqw, 240px) !important;
        max-height: clamp(210px, 27.0cqw, 240px) !important;
        flex: 0 0 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 */
    .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;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .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;
    }

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

    /* Card 2 -> 20m AVG. ARRIVAL ETA (Cyan - 500ms Flip 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 14px 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: clamp(4px, 1.0cqw, 7px) 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: flipVerticalIpad 0.85s cubic-bezier(0.25, 1, 0.5, 1) 500ms both !important;
    }

    /* Card 1 -> 100% MOBILE WORKSHOP (Teal - 500ms Flip 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 14px 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: clamp(4px, 1.0cqw, 7px) 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: flipVerticalIpad 0.85s cubic-bezier(0.25, 1, 0.5, 1) 500ms both !important;
    }

    /* Card 3 -> 15,000+ RESCUES (Amber - 200ms Flip 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 14px 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: clamp(4px, 1.0cqw, 7px) 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: flipVerticalIpad 0.85s cubic-bezier(0.25, 1, 0.5, 1) 200ms both !important;
    }

    /* Card 4 -> 4.9 ★ RATING (Solar Gold - 200ms Flip 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 14px 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: clamp(4px, 1.0cqw, 7px) 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: flipVerticalIpad 0.85s cubic-bezier(0.25, 1, 0.5, 1) 200ms both !important;
    }

    /* Clean, Stable Hover Effect: High-Definition Cyber Glow (Zero Disappearing / Zero 3D Flipping) */
    .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;
        z-index: 10 !important;
        opacity: 1 !important;
        visibility: visible !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 18px rgba(0, 229, 255, 0.55) !important;
        border-color: rgba(0, 229, 255, 0.95) !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 18px rgba(45, 212, 191, 0.55) !important;
        border-color: rgba(45, 212, 191, 0.95) !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 18px rgba(251, 146, 60, 0.55) !important;
        border-color: rgba(251, 146, 60, 0.95) !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 18px rgba(250, 204, 21, 0.55) !important;
        border-color: rgba(250, 204, 21, 0.95) !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: 2px 3px !important;
        margin: 0 !important;
        gap: clamp(2px, 0.5cqw, 4px) !important;
        text-align: center !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }

    /* Cards 1 & 2: Numeral on Top, 2-Row Label Below */
    .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 3px !important;
        margin: 0 !important;
        gap: clamp(1px, 0.4cqw, 3px) !important;
        box-sizing: border-box !important;
        overflow: visible !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.52rem, 4.2cqw, 1.98rem) !important;
        white-space: nowrap !important;
        text-align: center !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .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.90rem, 2.5cqw, 1.16rem) !important;
        font-weight: 900 !important;
        color: #00E5FF !important;
        margin-left: 2px !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-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.90rem, 2.5cqw, 1.16rem) !important;
        font-weight: 900 !important;
        color: #2DD4BF !important;
        margin-left: 2px !important;
    }

    .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;
    }

    .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.68rem, 1.86cqw, 0.90rem) !important;
        font-weight: 800 !important;
        line-height: 1.20 !important;
        letter-spacing: 0.05em !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;
    }

    /* Cards 3 & 4: Centered Vertical Stacking, High-Legibility Telemetry */
    .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: clamp(3px, 0.8cqw, 6px) !important;
        padding: 2px 3px !important;
        margin: auto !important;
        width: 100% !important;
        height: 100% !important;
        box-sizing: border-box !important;
    }

    .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 {
        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;
        font-size: clamp(1.43rem, 4.0cqw, 1.82rem) !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;
    }

    .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.92rem, 2.6cqw, 1.19rem) !important;
        font-weight: 900 !important;
        color: #FB923C !important;
        margin-left: 1px !important;
    }

    .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 {
        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;
        font-size: clamp(1.52rem, 4.2cqw, 1.98rem) !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;
    }

    .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.90rem, 2.5cqw, 1.16rem) !important;
        font-weight: 900 !important;
        color: #FACC15 !important;
        margin-left: 2px !important;
    }

    .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;
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        border-left: none !important;
    }

    /* Full specificity selectors ensuring victory over cockpit-mobile.css for RESCUES & RATING */
    .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.95rem, 2.6cqw, 1.05rem) !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;
    }

}