/* Hero Section — Immersive Full Viewport Height */
.hero-1 {
    position: relative;
    isolation: isolate;
    /* Fill the entire viewport; svh adapts to mobile browser chrome */
    min-height: 100vh;
    min-height: fill-available;
}

.hero-1::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("/static/img/hero-bg.e460ee3fce2f.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: -2;
}

.hero-1::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.20) 0%,
        rgba(0, 0, 0, 0.10) 50%,
        rgba(0, 0, 0, 0.10) 100%
    );
    z-index: -1;
    pointer-events: none;
}
.hero-1 .container {
    position: relative;
    z-index: 1;
}

/* Hero content should blend into page background */
.hero-1 .btn-light {
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
    color: #111 !important;
    backdrop-filter: blur(10px);
}

.hero-1 .btn-outline-light {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    color: #fff !important;
}

.hero-1 .btn-outline-light:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.8) !important;
}

/* Fallback for image-loaded background when using <img> method */
.hero-1-bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
}
.hero-1-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.20) 0%,
        rgba(0, 0, 0, 0.10) 50%,
        rgba(244, 244, 242, 0.95) 100%
    );
    z-index: -1;
}

/* Hero transitions */
@media (prefers-reduced-motion: no-preference) {
    .hero-1 {
        animation: heroFadeIn 0.8s ease-out;
    }
}

@keyframes heroFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}