/* Global Layout */
body {
    font-family: var(--font-family-primary);
    background-color: var(--color-bg);
    color: var(--color-text);
}

/* Sections: Fixed positioning, full viewport */
.section {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    overflow: hidden;
}

/* Z-index stacking: higher index = covers previous sections */
#splash {
    z-index: 10;
}

#what-we-believe {
    z-index: 20;
    top: 100%; /* Start off-screen below */
}

#what-we-do {
    z-index: 30;
    top: 100%; /* Start off-screen below */
}

#work-with-us-1 {
    z-index: 40;
    top: 100%; /* Start off-screen below */
}

#work-with-us-2 {
    z-index: 50;
    top: 100%; /* Start off-screen below */
}

/* Section Grid: Base for all sections (modular 6×7 grid) */
.section-grid {
    display: grid;
    width: 100%;
    height: 100%;
    grid-template-rows: repeat(7, 1fr); /* 7 equal rows filling 100% height */
    column-gap: 0;
    row-gap: 0;
}

/* Grid Column Templates per Section */

/* Splash: 3 columns (nav absorbed into column 3) */
.splash-grid {
    grid-template-columns:
        32.7% /* Band 1: 565/1728 */
        32.7% /* Band 2: 565/1728 */
        34.6%; /* Band 3 + nav: 598/1728 */
}

/* Philosophy/What We Believe: 3 columns + nav strip track */
.philosophy-grid {
    grid-template-columns:
        32.7% /* Band 1: 565/1728 */
        32.7% /* Band 2: 565/1728 */
        31.4% /* Band 3 fg: 540/1728 */
        3.2%; /* Nav strip: 55/1728 */
}

/* What We Do: 3 columns + nav strip track */
.what-we-do-grid {
    grid-template-columns:
        32.7% /* Band 1: 565/1728 */
        32.7% /* Band 2: 565/1728 */
        31.4% /* Band 3 fg: 540/1728 */
        3.2%; /* Nav strip: 55/1728 */
}

/* Work With Us: 3 columns + nav strip track */
.work-with-us-grid {
    grid-template-columns:
        32.7% /* Band 1: 565/1728 */
        32.7% /* Band 2: 565/1728 */
        31.4% /* Band 3 fg: 540/1728 */
        3.2%; /* Nav strip: 55/1728 */
}

/* Video Placeholders: Animated gradients */
.video-placeholder {
    width: 100%;
    height: 100%;
    background-size: 200% 200%;
    animation: gradientShift 15s ease infinite;
}

.gradient-1 {
    background: var(--gradient-1);
}

.gradient-2 {
    background: var(--gradient-2);
}

.gradient-3 {
    background: var(--gradient-3);
}

.gradient-4 {
    background: var(--gradient-4);
}

.gradient-5 {
    background: var(--gradient-5);
}

@keyframes gradientShift {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}