/* Basic Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Helvetica', 'Arial', sans-serif;
    /* Fallback to Arial */
    width: 100vw;
    height: 100vh;
    /* Fallback */
    height: 100dvh;
    /* Dynamic viewport height for mobile */
    overflow: hidden;
    /* Prevent scrolling on desktop if content fits */
    color: #fff;
    /* Default text color white for video background */
}

/* Video Background */
.video-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-color: #000;
    /* Fallback color */
}

.video-background video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Optional Overlay for readability */
.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    /* Slight dark overlay */
    z-index: 1;
}

/* Content Wrapper */
.content-wrapper {
    position: relative;
    z-index: 2;
    /* Sit above the video overlay */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* Header top, Footer bottom, Main middle */
    height: 100vh;
    /* Fallback */
    height: 100dvh;
    /* Fix for mobile address bars */
    width: 100%;
    padding: 20px;
    /* General padding */
}

/* Header */
header {
    display: flex;
    justify-content: center;
    /* Center logo by default */
    padding-top: 120px;
    /* Increased top margin */
    flex: 0 0 auto;
}

.logo {
    max-width: 200px;
    /* Constraint for logo size */
    height: auto;
    display: block;
}

/* Hero Section */
.hero {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    /* Horizontally center */
    align-items: center;
    /* Vertically center */
    position: relative;
    width: 100%;
}

.hero-content {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 15vh;
    /* Fixed height relative to viewport as requested */
    width: auto;
}

/* Stack Icon behind Payoff */
.hero-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 100%;
    /* Fill the 20vh container */
    width: auto;
    /* Maintain aspect ratio */
    opacity: 0.8;
    /* Slight transparency if needed */
    z-index: 1;
}

.hero-payoff {
    position: relative;
    z-index: 2;
    /* Text on top of icon */
    height: 60%;
    /* Proportion relative to container */
    width: auto;
}

/* Footer */
footer {
    flex: 0 0 auto;
    text-align: center;
    padding-bottom: 120px;
    /* Increased bottom margin as requested */
    font-size: 14px;
    font-weight: 400;
    /* Regular */
    line-height: 1.1;
    /* Reduced interline */
    text-transform: uppercase;
    /* All caps */
    letter-spacing: 1px;
    /* Slight spacing for all-caps elegance */
}

.footer-text {
    max-width: 800px;
    margin: 0 auto;
}

.email-link {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .content-wrapper {
        padding: 15px;
    }

    header {
        padding-top: 60px;
        /* Reduced for mobile */
    }

    .logo {
        max-width: 150px;
    }

    .hero-icon,
    .hero-payoff {
        max-width: 100%;
        /* Ensure they don't overflow */
        object-fit: contain;
        /* Maintain aspect ratio */
        height: auto;
        /* Let height adjust to maintain ratio if width constrained */
    }

    .hero-content {
        /* On mobile, we might need to rely on width or height differently. 
            User said "Constrain the center images proportion so they do not distort".
            The previous fixed height 15vh might be too small or cause distortion if width is forced.
            We'll keep 15vh but ensure object-fit. */
        height: 15vh;
    }

    /* Specific override to ensure height % works but ratio is kept */
    .hero-icon {
        height: 100%;
        width: auto;
    }

    .hero-payoff {
        height: 60%;
        width: auto;
    }

    footer {
        font-size: 10px;
        /* Reduced for mobile */
        padding-bottom: 60px;
        /* Reduced padding for mobile */
    }
}