/* public/assets/js/homepage/top.css */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@400;500;600;700;800&display=swap');

/* Core Layout & Background */
.hero-section-wrapper {
    background: transparent;
    font-family: 'Inter', sans-serif;
    min-height: 75vh;
    width: 100%;
    max-width: 100%;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    /*padding: 5rem 0 12rem 0;*/
    margin-bottom: 2rem;
    overflow: hidden !important;
}

.hero-video-bg {
    position: absolute; top: 0; left: 0; 
    width: 160%; height: 100%; 
    z-index: 1; overflow: hidden;
}

.hero-video-bg video {
    width: 100%; height: 100%; object-fit: cover;
}

/* Container holding the video and overlay */
.hero-video-bg-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: hidden;
}

/* The actual video element */
.hero-video-element {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translateX(-50%) translateY(-50%);
    object-fit: cover;
}

/* The Uniform Filter Overlay (Transparent for clean studio background) */
.hero-video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    z-index: 2; 
    pointer-events: none; 
}

/* The fallback background image element when no hero_video is set */
.hero-image-bg-element {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.hero-hud-container {
    z-index: 3;
}

/* Grid Line Framework (Architectural Graphite for Daylight Studio) */
.hero-grid-h { position: absolute; left: -25px; right: -25px; height: 1px !important; background: rgba(13, 42, 28, 0.14); z-index: 4; }
.hero-grid-h-top { top: -12px; }
.hero-grid-h-bottom { bottom: -12px; }

.hero-tick-h { position: absolute; top: 0; width: 1px !important; height: 6px !important; background: rgba(13, 42, 28, 0.38); }
.hero-tick-h.top-tick { transform: translateY(-2px); }

.hero-grid-v { position: absolute; top: -25px; bottom: -25px; width: 1px !important; background: rgba(13, 42, 28, 0.14); z-index: 4; }
.hero-grid-v-left { left: -12px; }
.hero-grid-v-right { right: -12px; left: auto !important; } 

.hero-tick-v { position: absolute; left: 0; width: 6px !important; height: 1px !important; background: rgba(13, 42, 28, 0.38); }
.hero-grid-v-right .hero-tick-v { left: auto !important; right: 0; }

/* Razor-Sharp Dual-Zone Optical Glass Console */
.hero-glass-console {
    position: relative;
    z-index: 5;
    background: linear-gradient(
        90deg, 
        rgba(255, 255, 255, 0.20) 0%, 
        rgba(255, 255, 255, 0.10) 65%,
        rgba(255, 255, 255, 0.02) 100%
    );
    /* Base 2.5px blur visible on the right 1/3 over the vehicle */
    backdrop-filter: blur(2.5px) saturate(110%);
    -webkit-backdrop-filter: blur(2.5px) saturate(110%);
    border-top: 1px solid rgba(255, 255, 255, 0.95);
    border-left: 1px solid rgba(255, 255, 255, 0.85);
    border-right: 1px solid rgba(13, 42, 28, 0.18);
    border-bottom: 1px solid rgba(13, 42, 28, 0.22);
    border-radius: 0 !important;
    box-shadow: 
        0 18px 36px -15px rgba(13, 42, 28, 0.10),
        inset 0 1px 2px 0 rgba(255, 255, 255, 0.95),
        inset 1px 0 2px 0 rgba(255, 255, 255, 0.75),
        inset 0 -1px 1px 0 rgba(13, 42, 28, 0.08);
    overflow: visible;
}

/* Left 3/4 Frosted Zone (10px blur masked out before the right 1/3 vehicle overlap) */
.hero-glass-console::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    pointer-events: none;
    backdrop-filter: blur(10px) saturate(120%) contrast(103%);
    -webkit-backdrop-filter: blur(10px) saturate(120%) contrast(103%);
    -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 65%, rgba(0,0,0,0) 82%);
    mask-image: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 65%, rgba(0,0,0,0) 82%);
}

/* Keep console children above the ::before blur layer */
.hero-glass-console > * {
    position: relative;
    z-index: 2;
}

/* Typography & Text Shadows (Clean Studio Dark Mode) */
.text-shadow-crisp { text-shadow: none; }

.hero-overline-braces { 
    color: #0D2A1C; 
    font-weight: 700; letter-spacing: 0.05em; 
    font-family: 'Inter', sans-serif; 
    font-size: 15px; 
    -webkit-font-smoothing: antialiased; 
}

.hero-overline {
    color: #1B4F3B; 
    font-weight: 700; letter-spacing: 0.05em; 
    font-family: 'Inter', sans-serif; 
    font-size: 12.5px; 
    -webkit-font-smoothing: antialiased; 
    text-shadow: none;
}

.hero-heading { 
    color: #111614; 
    letter-spacing: -0.02em; 
    font-family: 'Outfit', sans-serif; 
    font-size: 2.35rem; 
    line-height: 1.25; 
    text-shadow: none; 
    -webkit-font-smoothing: antialiased; 
    font-weight: 500; 
}

.hero-heading-bold {
    color: #111614;
    font-weight: 700; 
}

.hero-subheading { 
    color: #26302C !important;
    font-family: 'Inter', sans-serif;
    font-weight: 500; 
    letter-spacing: 0.01em; 
    font-size: 20px; 
    text-shadow: none; 
    -webkit-font-smoothing: antialiased; 
    display: none !important;
}

.hero-body { 
    color: #26302C !important;
    font-family: 'Inter', sans-serif;
    font-weight: 500; 
    letter-spacing: 0.3px; 
    font-size: 17px; 
    line-height: 23px; 
    text-shadow: none; 
    -webkit-font-smoothing: antialiased; 
}

.hero-cta-btn { 
    background-color: #0D2A1C; border: 1px solid #1B4F3B; height: 48px; font-weight: 700; 
    border-radius: 0 !important;
    padding: 0 32px; letter-spacing: 0.08em; font-size: 14px; 
    color: #F4F5F0 !important; text-transform: uppercase;
    font-family: 'Outfit', sans-serif;
    transition: all 0.3s ease; box-shadow: none !important;
    cursor: pointer;
}

.hero-cta-btn:hover {
    background-color: #1B4F3B !important; transform: translateY(-2px);
    border-color: #0D2A1C !important; color: #FFFFFF !important;
}

.hero-glass-console .hero-pointer-matrix,
.hero-pointer-matrix {
    position: absolute; 
    bottom: 20px; 
    right: 20px; 
    z-index: 2;
    color: rgba(13, 42, 28, 0.45); 
    font-family: 'Inter', sans-serif; 
    font-size: 12px; 
    font-weight: 700;
}

.desk-readout {
    position: relative; 
    margin-top: 35px; 
    margin-left: 4px; 
    font-size: 11px; 
    z-index: 5;
    font-family: 'Inter', sans-serif; 
    color: #3E4A44; 
    text-transform: uppercase; 
    letter-spacing: 0.08em; 
    line-height: 1.75;
    font-weight: 600;
    text-shadow: none;
    -webkit-font-smoothing: antialiased;
}

.desk-readout .text-white {
    color: #0D1411 !important;
    font-weight: 700 !important;
    text-shadow: none;
}

.desk-readout-highlight { 
    color: #1B4F3B; 
    font-weight: 800; 
    text-shadow: none; 
}

/* ================= APPLICATION MODAL OVERLAY (ALABASTER + PEEKING CAR) ================= */
.application-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #F4F5F0; /* Alabaster Baseline */
    background-size: 80% !important;
    background-position: -180% center !important;
    background-repeat: no-repeat;
    font-family: 'Inter', sans-serif;
    z-index: 9998;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 15px;
    overflow-y: auto;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
}

.application-modal-overlay.modal-active {
    opacity: 1;
    pointer-events: auto;
}

.application-modal-close-trigger {
    position: fixed;
    top: 24px;
    right: 32px;
    background: #0D2A1C;
    color: #F4F5F0;
    border: 1px solid #1B4F3B;
    border-radius: 0 !important;
    width: 42px;
    height: 42px;
    font-size: 24px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10000;
    transition: background-color 0.2s ease;
    outline: none !important;
}

.application-modal-close-trigger:hover {
    background: #1B4F3B;
}

/* Desktop */
@media (min-width: 992px) {

.pr-4, .px-4 {
    padding-right: 0px !important;
    padding-left: 0px !important;
    /*margin-right: 9px !important;
    margin-left: -18px !important;*/
}

}

/* Responsive Background Overrides to maintain framing on smaller screens */
@media (max-width: 991px) {
    .hero-section-wrapper {
        width: 100vw !important; position: relative !important;
        left: 50% !important; right: 50% !important;
        margin-left: -50vw !important; margin-right: -50vw !important;
        max-width: 100vw !important; min-height: auto !important; 
        padding: 3rem 0 6rem 0 !important; margin-bottom: 0 !important;
    }
    
    .hero-overline { font-size: 12px; }
    .hero-heading { font-size: 2rem; }
    .hero-body { font-size: 14px; line-height: 20px; }
    .hero-cta-btn { font-size: 12px; }
    
    .hero-grid-h { left: -15px; right: -15px; }
    .hero-grid-v { top: -15px; bottom: -15px; }
    
    .desk-readout { margin-top: 25px; font-size: 10px; letter-spacing: 0.06em; margin-left: 0; padding-left: 5px; }

    .application-modal-overlay {
        background-size: 200% !important;
        background-position: -43% center !important; 
    }

    .form-glass-card {
        width: 100% !important;
    }
}

@media (max-width: 767px) {
    .application-modal-overlay {
        background-size: 200% !important;
        background-position: -43% center !important; 
    }

    .form-glass-card {
        width: 100% !important;
    }
}

/* Isolated Step Animation Classes */
.mandate-form-step-hidden {
    display: none !important;
}

.mandate-form-step-active {
    display: block !important;
    animation: mandateSlideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes mandateSlideIn {
    from { opacity: 0; transform: translateX(15px); }
    to { opacity: 1; transform: translateX(0); }
}

/* Solid Brutalist Form Chassis */
.form-glass-card {
    background: #0D2A1C !important; /* Solid Deeper Reserve */
    backdrop-filter: none !important;   
    -webkit-backdrop-filter: none !important;
    border: 1px solid #1B4F3B !important; /* Sharp Muted Forest Border */
    border-radius: 0 !important; /* Zero-radius brutalism */
    box-shadow: none !important; /* Purged all drop shadows */
}

/* Modal Header Block Typography ("Never Yell" Title Case Enforcement) */
.modal-header-eyebrow {
    color: rgba(244, 245, 240, 0.7);
    font-weight: 700;
    letter-spacing: 0.05em;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    -webkit-font-smoothing: antialiased;
}

.modal-header-eyebrow-braces {
    color: #1B4F3B;
    font-weight: 700;
    font-size: 14px;
}

.modal-header-title {
    font-family: 'Outfit', sans-serif;
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #F4F5F0;
    line-height: 1.2;
    margin-top: 5px;
    padding-bottom: 5px;
    text-transform: none;
}

.modal-header-subheading {
    font-family: 'Inter', sans-serif;
    font-size: 13.5px;
    line-height: 1.6;
    color: rgba(244, 245, 240, 0.8);
    font-weight: 400;
}

/* PERFECTED, ALIGNED TEXT INPUTS */
.input-architect-group {
    position: relative;
}

.input-architect-group .premium-glass-input {
    height: 50px !important; 
    padding: 22px 16px 4px 16px !important; 
    background-color: rgba(244, 245, 240, 0.05) !important; /* Flat muted Alabaster fill */
    backdrop-filter: none !important;
    border: 1px solid rgba(244, 245, 240, 0.5) !important; /* High-contrast Alabaster border */
    border-radius: 0 !important; /* Zero-radius brutalism */
    font-size: 14px !important; 
    color: #F4F5F0 !important; /* Alabaster text */
    font-family: 'Inter', sans-serif !important;
    font-weight: 500 !important;
    line-height: 1.2 !important; 
    box-sizing: border-box !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    transition: all 0.3s ease !important;
    box-shadow: none !important;
}

/* Blocks native autofill */
.input-architect-group .premium-glass-input:-webkit-autofill,
.input-architect-group .premium-glass-input:-webkit-autofill:hover, 
.input-architect-group .premium-glass-input:-webkit-autofill:focus, 
.input-architect-group .premium-glass-input:-webkit-autofill:active {
    transition: background-color 9999s ease-in-out 0s !important;
    -webkit-text-fill-color: #F4F5F0 !important;
}

.input-architect-group .premium-glass-input::placeholder {
    color: rgba(244, 245, 240, 0.4) !important;
}

/* Select specific spacing */
.input-architect-group .custom-select {
    padding: 22px 36px 4px 16px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23F4F5F0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

.input-architect-group .custom-select option {
    color: #0D2A1C; /* Dark options for readability in native dropdowns */
}

/* Text Input Label Alignment */
.internal-label-text, 
.internal-label-select {
    position: absolute;
    top: 10px; 
    left: 17px; 
    font-family: 'Inter', sans-serif;
    font-size: 9px; 
    color: #F4F5F0; /* Stark Alabaster for absolute high contrast */
    text-shadow: none; 
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    pointer-events: none;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    z-index: 2;
}

.premium-glass-input:focus {
    background-color: rgba(244, 245, 240, 0.1) !important;
    border-color: #F4F5F0 !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Brutalist Solid Action Button */
.executive-btn {
    font-family: 'Outfit', sans-serif !important;
    background: #F4F5F0 !important; /* Solid Alabaster */
    color: #0D2A1C !important; /* Deeper Reserve Text */
    border: none !important;
    border-radius: 0 !important; /* Zero-radius brutalism */
    height: 52px !important; 
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    box-shadow: none !important;
    transition: background-color 0.3s ease, color 0.3s ease !important;
    text-shadow: none !important;
}

.executive-btn:hover:not(:disabled) {
    background: #1B4F3B !important; /* Muted Forest Hover */
    color: #F4F5F0 !important; /* Alabaster Text */
    transform: none !important;
    box-shadow: none !important;
}

.executive-btn:disabled {
    opacity: 0.8 !important;
    cursor: not-allowed !important;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ================= INTEGRATED CONFIRMATION STEP STYLES ================= */
.mandate-modal-body {
    color: rgba(244, 245, 240, 0.85);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.7;
    font-weight: 400;
}

.mandate-modal-body strong {
    color: #F4F5F0;
    font-weight: 700;
}

.mandate-modal-body a {
    color: #F4F5F0 !important;
    text-decoration: underline !important;
    font-weight: 700 !important;
}

.mandate-modal-body a:hover {
    opacity: 0.85;
}