body {
    font-family: system-ui, sans-serif;
    position: relative;
}

/* Background SVG positioned at top left */
.landing-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: url('/images/landing_bg_tl.svg') top left no-repeat;
    background-size: auto;
    z-index: 1;
    pointer-events: none;
    /* Smooth transitions for responsive changes */
    transition: transform 0.3s ease-out;
}

/* Background SVG positioned at bottom right */
.landing-bg-br {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100vh;
    background: url('/images/landing_bg_br.svg') bottom right no-repeat;
    background-size: auto;
    z-index: 1;
    pointer-events: none;
    /* Smooth transitions for responsive changes */
    transition: transform 0.3s ease-out;
}

/* Smooth, calculated responsive behavior for background SVGs */
@media (max-width: 1200px) {
    .landing-bg {
        /* Move left image MORE to the left to hide more */
        transform: translateX(calc(0px - 5vw));
    }
    
    .landing-bg-br {
        /* Move right image MORE to the right to hide more */
        transform: translateX(calc(0px + 5vw));
    }
}

@media (max-width: 992px) {
    .landing-bg {
        /* Progressive hiding: more left movement */
        transform: translateX(calc(-104px - 10vw));
    }
    
    .landing-bg-br {
        /* Progressive hiding: more right movement */
        transform: translateX(calc(52px + 10vw));
    }
}

@media (max-width: 768px) {
    .landing-bg {
        /* Significant hiding for tablet/mobile */
        transform: translateX(calc(-216px - 15vw));
    }
    
    .landing-bg-br {
        /* Significant hiding for tablet/mobile */
        transform: translateX(calc(108px + 15vw));
    }
}

@media (max-width: 576px) {
    .landing-bg {
        /* Almost completely hidden on mobile */
        transform: translateX(calc(-312px - 20vw));
    }
    
    .landing-bg-br {
        /* Almost completely hidden on mobile */
        transform: translateX(calc(156px + 20vw));
    }
}


.hero {
    position: relative;
    background: url('/images/hero-riseohana.png') center/cover no-repeat;
    min-height: 80vh; /* Make it taller - 80% of viewport height */
    width: 100vw; /* Full viewport width */
    margin-left: calc(-50vw + 50%); /* Break out of container */
    padding: 8rem 1rem; /* Increased padding for more height */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    z-index: 0; /* Ensure hero is above the background SVG */
}

    .hero .overlay {
        position: absolute;
        inset: 0;
        background: 
            /* Top gradient blend */
            linear-gradient(to bottom, var(--primitives-tan, #E8E3DA) 0%, transparent 20%),
            /* Bottom gradient blend */
            linear-gradient(to top, var(--primitives-tan, #E8E3DA) 0%, transparent 20%),
            /* Original lightening overlay */
            rgba(255,255,255,.55);
        backdrop-filter: blur(1px);
    }

    .hero > * {
        position: relative;
        z-index: 1;
    }