/* ================= Hero Section Block ================= */
.hero-section.front-hero { 
    position: relative; 
    background-size: cover; 
    background-position: center; 
    min-height: 700px; 
    display: flex; 
    align-items: center; 
}

.hero-section .hero-vimeo-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
}

.hero-section .hero-vimeo-embed {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 100vh;
    min-width: 100%;
    min-height: 100%;
    transform: translate(-50%, -50%);
    object-fit: cover;
    pointer-events: none;
}

@media (min-aspect-ratio: 16/9) {
    .hero-section .hero-vimeo-embed {
        height: 56.25vw;
    }
}

@media (max-aspect-ratio: 16/9) {
    .hero-section .hero-vimeo-embed {
        width: 177.78vh;
    }
}

.hero-section .hero-overlay { 
    position: absolute; 
    inset: 0;
    z-index: 1;
}

.hero-section .hero-container { 
    position: relative; 
    width: 100%;
    z-index: 2;
}

.hero-section .hero-content-left { 
    display: flex; 
    justify-content: flex-start; 
}

.hero-section .hero-text { 
    color: #fff; 
}

.hero-section .hero-glass { 
    max-width: 560px; 
    margin-left: 3%; 
    padding: 24px 28px; 
    background: rgba(0,0,0,.6); 
    border-radius: 16px; 
    backdrop-filter: blur(2px); 
}

.hero-section .hero-kicker { 
    font-family: 'Averia Serif Libre', sans-serif; 
    font-weight: 700; 
    font-size: 1.6rem; 
    line-height: 1; 
    color: #cb3638; 
    margin: 0 0 8px; 
    text-transform: none; 
    letter-spacing: 0; 
    text-shadow: 2px 2px 3px #000000;
}

.hero-section .hero-kicker-home { 
    font-family: 'Averia Serif Libre', sans-serif; 
    font-weight: 700; 
    font-size: 1.6rem; 
    line-height: 1; 
    color: #fff; 
    margin: 0 0 8px; 
    text-transform: none; 
    letter-spacing: 0; 
    text-shadow: 2px 2px 3px #000000;
}
.hero-section .hero-title-stack { 
    display: block; 
    line-height: 1; 
    margin: 0 0 10px;
}

.hero-section .hero-title-large { 
    display: block; 
    font-size: 64px; 
    font-weight: 900; 
    letter-spacing: 1px; 
    color: #cb3638;
}

.hero-section .hero-title-large.accent { 
    color: #cb3638; 
}

.hero-section .hero-subtitle { 
    font-family: 'Averia Serif Libre', sans-serif; 
    font-weight: 700; 
    font-size: 1.6rem; 
    line-height: 1; 
    color: #fff; 
    margin: 0 0 20px; 
    text-transform: none; 
    letter-spacing: 0; 
    text-shadow: 2px 2px 3px #000000;
}

.hero-section .hero-order-button { 
    display: inline-flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    gap: 2px; 
    padding: 16px 32px; 
    background: #cb3638; 
    color: #fff; 
    text-decoration: none; 
    border-radius: 999px; 
    box-shadow: 0 6px 20px rgba(0,0,0,.25); 
    font-weight: 900; 
    font-size: 1.8rem; 
    line-height: 1; 
    letter-spacing: normal; 
    word-spacing: normal; 
    text-transform: uppercase;
}

.hero-section .hero-order-button .btn-title { 
    font-weight: 900; 
    letter-spacing: normal; 
}

.hero-section .hero-order-button .btn-sub { 
    display: block; 
    font-size: 80%; 
    opacity: .95; 
    text-transform: uppercase; 
}

.hero-section .hero-order-button:hover { 
    background: #a92e2f; 
}

/* Responsive Design */
@media (max-width: 1024px) {
    .hero-section.front-hero { 
        min-height: 480px; 
    }
    
    .hero-section .hero-glass { 
        margin-left: 4%; 
        max-width: 520px; 
    }
    
    .hero-section .hero-title-large { 
        font-size: 48px; 
    }
}

@media (max-width: 768px) {
    .hero-section.front-hero { 
        min-height: 420px; 
    }
    
    .hero-section .hero-glass { 
        margin-left: 4%; 
        padding: 18px 20px; 
        max-width: 92%; 
    }
    
    .hero-section .hero-title-large { 
        font-size: 40px; 
    }
    
    .hero-section .hero-subtitle { 
        font-family: 'Averia Serif Libre', sans-serif; 
        font-weight: 700; 
        font-size: 1.4rem; 
        line-height: 1; 
    }
}

/* Animation Keyframes */
@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
