/* --- 1. Global & Link Jump Fixes --- */
html {
    scroll-behavior: smooth;
    /* This replaces .anchor-offset and handles the jump offset perfectly */
    scroll-padding-top: 56px; 
}

html, body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    /* Match nav color to hide tiny sub-pixel gaps on scroll */
    background-color: #212529; 
}

/* --- 2. The Fixed Navbar --- */
.navbar {
    position: fixed !important;
    top: 0;
    width: 100%;
    z-index: 2000; /* High enough to clear all parallax layers */
    height: 56px;
}

/* --- 3. The Parallax Engine (Don't touch - this is your working logic) --- */
.parallax-window {
    position: relative;
    height: 60vh;
    overflow: hidden;
    clip-path: inset(0 0 0 0);
}

/* Force the Hero Header to be taller */
header.parallax-window {
    height: 100vh;
}

.header-hero {
    height: 100vh; /* Or 80vh, whichever you prefer */
    background-size: cover;
    
    /* This centers the image horizontally and pushes the vertical 
       alignment up slightly (40%) so you see more of the top/middle area. */
    background-position: center 40%; 
    
    background-attachment: fixed;
    margin: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.parallax-img {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
    backface-visibility: hidden;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 30%;
    background-image: inherit;
    backface-visibility: hidden;
}

/* --- 4. The Content Panes --- */
.text-pane {
    position: relative;
    z-index: 10;
    background: white;
    padding: 100px 0;
    /* Added this to prevent the "White Bar" margin collapse */
    border-top: 1px solid transparent; 
}

/* --- 5. Animations & Fallbacks --- */
@media only screen and (max-device-width: 1366px) {
    .parallax-window {
        background-attachment: scroll;
    }
}

.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
    visibility: hidden;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}