/* ==========================================================================
   Car Doctor On Call — Cockpit Model 2: Cockpit Sports Car
   Hero Section Master Stylesheet (Navigation wheel, gears & digital displays)
   Features:
   - High-Performance Driver Cockpit Frame (cockpit_sport_keyed_out.png)
   - Passenger OLED Screen (Rapid Mission Dispatch Console)
   - Center Console Vertical Glass Telemetry HUD Matrix (Funnel Shape Tapering)
   - Floating Windshield Sky Headline Deck (Elevated High Above Traffic)
   Strictly Scoped: Isolated 100% under .cockpit-hero-master.frame-sport
   ========================================================================== */

/* 1. Cockpit Stage & Interior Mask: Sports Car Driver Frame Authority (1024 / 572 Aspect Ratio) */
.cockpit-hero-master.frame-sport {
    background-color: #04060A !important;
    overflow: hidden !important;
}

.cockpit-hero-master.frame-sport .cockpit-stage-wrapper {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 1520px !important;
    margin: 0 auto !important;
    padding: 0.2rem 0.65rem 0.4rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    flex: 1 !important;
    min-height: 0 !important;
}

.cockpit-hero-master.frame-sport .cockpit-stage {
    position: relative !important;
    width: min(100%, calc((100dvh - 124px) * (1024 / 572))) !important;
    max-height: calc(100dvh - 124px) !important;
    aspect-ratio: 1024 / 572 !important;
    container-type: inline-size !important;
    container-name: cockpit-stage !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.9), 0 0 30px rgba(255, 107, 0, 0.15) !important;
    background: #04060A !important;
}

.cockpit-hero-master.frame-sport .cockpit-mask-overlay {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-image: url('../images/cockpit_sport_keyed_out.png?v=driver_cockpit_funnel_v6') !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 100% 100% !important;
    pointer-events: none !important;
    z-index: 2 !important;
    display: block !important;
}

/* 2. Sports Car Dashboard Screen Vessel (Decoupled 100% Stage Overlay) */
.cockpit-hero-master.frame-sport .cockpit-dashboard-screen {
    position: absolute !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 100% !important;
    max-height: none !important;
    min-height: 0 !important;
    transform: none !important;
    transition: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    pointer-events: none !important;
    z-index: 6 !important;
    box-sizing: border-box !important;
}

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

.cockpit-hero-master.frame-sport .dashboard-display-grid {
    display: contents !important;
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* 3. Upper Windshield Sky Headline: Floating High in Clear Windshield Space (Image 1) */
.cockpit-hero-master.frame-sport .cockpit-lower-deck {
    position: absolute !important;
    top: 6.8% !important;
    bottom: auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: min(860px, 92%) !important;
    text-align: center !important;
    padding: 0 0.5rem !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    pointer-events: none !important;
    z-index: 7 !important;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@keyframes radarPing {
    0% { transform: scale(0.8); opacity: 0.9; }
    70% { transform: scale(2.4); opacity: 0; }
    100% { transform: scale(2.4); opacity: 0; }
}

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

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

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

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

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

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

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

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

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

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

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

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

/* Sub-telemetry Status Line Permanently Removed in Frame Sport */
.cockpit-hero-master.frame-sport .dispatch-telemetry-status {
    display: none !important;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Responsive Overrides for Sports Car Cockpit (Sovereign Authority across All Viewports) */
@media (min-width: 769px) and (max-width: 1024px) {
    .cockpit-hero-master.frame-sport .cockpit-stage {
        position: relative !important;
        width: min(100%, calc((100dvh - 124px) * (1024 / 572))) !important;
        max-height: calc(100dvh - 124px) !important;
        aspect-ratio: 1024 / 572 !important;
    }
    .cockpit-hero-master.frame-sport .cockpit-lower-deck {
        top: 6.8% !important;
        bottom: auto !important;
        width: 92% !important;
    }
    .cockpit-hero-master.frame-sport .cockpit-dashboard-screen {
        position: absolute !important;
        inset: 0 !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        max-width: none !important;
        height: 100% !important;
        max-height: none !important;
        transform: none !important;
    }
    .cockpit-hero-master.frame-sport .dashboard-display-left {
        top: 57.0% !important;
        left: 61.5% !important;
        transform: translateX(-50%) perspective(1100px) rotateX(2.2deg) rotateY(-2.8deg) rotateZ(-0.4deg) !important;
        transform-origin: 50% 100% !important;
        transform-style: preserve-3d !important;
        width: min(560px, 44.0cqw) !important;
        max-width: 570px !important;
    }
    .cockpit-hero-master.frame-sport .dashboard-display-right {
        top: 72.8% !important;
        left: 49.6% !important;
        transform: translateX(-50%) perspective(900px) rotateX(4.5deg) !important;
        transform-origin: 50% 0% !important;
        width: clamp(180px, 21.2cqw, 320px) !important;
        max-width: none !important;
        height: auto !important;
    }
}

@media (max-width: 960px) {
    .cockpit-hero-master.frame-sport .cockpit-stage {
        position: relative !important;
        width: min(100%, calc((100dvh - 124px) * (1024 / 572))) !important;
        max-height: calc(100dvh - 124px) !important;
        aspect-ratio: 1024 / 572 !important;
    }
    .cockpit-hero-master.frame-sport .cockpit-dashboard-screen {
        position: absolute !important;
        inset: 0 !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        max-width: none !important;
        height: 100% !important;
        max-height: none !important;
        transform: none !important;
    }
    .cockpit-hero-master.frame-sport .dashboard-display-left {
        top: 57.0% !important;
        left: 61.5% !important;
        transform: translateX(-50%) perspective(1100px) rotateX(2.2deg) rotateY(-2.8deg) rotateZ(-0.4deg) !important;
        transform-origin: 50% 100% !important;
        transform-style: preserve-3d !important;
        width: min(560px, 44.0cqw) !important;
        max-width: 570px !important;
    }
    .cockpit-hero-master.frame-sport .dashboard-display-right {
        top: 72.8% !important;
        left: 49.6% !important;
        transform: translateX(-50%) perspective(900px) rotateX(4.5deg) !important;
        transform-origin: 50% 0% !important;
        width: clamp(180px, 21.2cqw, 320px) !important;
        max-width: none !important;
        height: auto !important;
    }
}

/* Mobile & Resized Viewport Architecture (<= 768px):
   Maintains absolute 1024/572 sports cockpit geometry with fluid cqw proportional scaling */
@media (max-width: 768px) {
    .cockpit-hero-master.frame-sport .cockpit-stage-wrapper {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0.15rem 0.25rem !important;
    }
    .cockpit-hero-master.frame-sport .cockpit-stage {
        position: relative !important;
        width: min(100%, calc((100dvh - 82px) * (1024 / 572))) !important;
        max-height: calc(100dvh - 82px) !important;
        aspect-ratio: 1024 / 572 !important;
        display: block !important;
    }
    .cockpit-hero-master.frame-sport .cockpit-mask-overlay {
        display: block !important;
    }
    .cockpit-hero-master.frame-sport .cockpit-dashboard-screen {
        position: absolute !important;
        inset: 0 !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        max-width: none !important;
        height: 100% !important;
        max-height: none !important;
        transform: none !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    .cockpit-hero-master.frame-sport .dashboard-display-left {
        top: 57.0% !important;
        left: 61.5% !important;
        transform: translateX(-50%) perspective(1100px) rotateX(2.2deg) rotateY(-2.8deg) rotateZ(-0.4deg) !important;
        transform-origin: 50% 100% !important;
        transform-style: preserve-3d !important;
        width: min(560px, 44.0cqw) !important;
        max-width: 570px !important;
    }
    .cockpit-hero-master.frame-sport .dashboard-display-right {
        top: 72.8% !important;
        left: 49.6% !important;
        transform: translateX(-50%) perspective(900px) rotateX(4.5deg) !important;
        transform-origin: 50% 0% !important;
        width: clamp(180px, 21.2cqw, 320px) !important;
        max-width: none !important;
        height: auto !important;
    }
}