@font-face {
    font-family: 'Neue Haas';
    src: url('./NHaasGroteskTXPro-55Rg.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Neue Haas';
    src: url('./NHaasGroteskTXPro-75Bd.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

    /* --- CUSTOM STYLES --- */
    :root {
        --primary-green: #2c3e30; 
        --accent-green: #6b8c42;  
        --bg-sand: #f4f7f8;       
        --bg-sand-light: #faffff;      
        --text-dark: #1d282f;
        --rose: #ffd7d7;
    }

    body {
        font-family: 'Neue Haas';
    font-weight: normal;
        color: var(--text-dark);
        background-color: var(--bg-sand);
    }
    
    /* --- THE BOXED WRAPPER --- */
    .site-wrapper {
        max-width: 1200px;
        margin: 0 auto;
        background-color: var(--bg-sand-light);
        min-height: 100vh;
    }

    h1, h2, h3, h4, h5, .navbar-brand {
        font-weight: bold;
    }

    /* --- HERO SECTION --- */
    .hero-section {
        background-size: cover;
        background-position: center;
        height: 85vh; 
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }

    .cover-image {
        background-image: 
            url('cover-small.jpg');
    }

    .wordmark {
        width: 90%;
        height: auto;
        box-sizing: border-box;
        z-index: 2;
    }

    .video-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;  
            z-index: 1;
        }

    /* 2. Desktop Wide Image */
    @media (min-width: 768px) {
        .hero-section {
            align-items: flex-end;
            justify-content: flex-start;
            background-position: left bottom;
        }
        .cover-image {
            background-image: 
                url('cover.jpg');
        }

        .wordmark {
            padding-left: 90px; 
            padding-bottom: 70px;
            width: 55%;
            height: auto;
            box-sizing: border-box;
        }
    }

    .hero-content {
        text-align: center;
        color: white;
        max-width: 800px;
        padding: 20px; 
    }

    .hero-content h1 {
        font-size: clamp(2.5rem, 5vw, 4rem); 
        margin-bottom: 1rem;
        text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
    }

    .hero-content p {
        font-size: 1.25rem;
        font-weight: 300;
    }
    
    @media (min-width: 768px) {
        .hero-content p { font-size: 1.5rem; }
    }

    /* --- NAVBAR STYLING (Standard Scroll) --- */
    .navbar {
        background-color: #ffffff;
        /* Simple border to separate it from the content below */
        border-bottom: 1px solid #e0e0e0; 
        padding: 1rem 2rem;
    }

    .navbar-toggler:focus {
        box-shadow: none;
    }

    .navbar-toggler {
        border: none;
    }

    .navbar-toggler-icon {
        background-image: url('menu-icon.svg');
        background-size: cover; 
    }

    .navbar-brand {
        color: var(--primary-green) !important;
        letter-spacing: -0.5px;
        font-size: 1.5rem;
        margin-right: 3rem; 
    }

    .nav-link {
        color: var(--text-dark) !important;
        font-weight: 600;
        text-transform: uppercase;
        font-size: 0.85rem;
        letter-spacing: 1px;
        padding-right: 1.5rem !important;
    }

    .nav-link:hover {
        color: var(--accent-green) !important;
    }

    /* Description Section */
    .description-section {
        padding: 4rem 1rem 6rem 1rem; 
    }

    h2 {
        padding-top: 30px;
    }

    .divider {
        height: 4px;
        width: 180px;
        background-color: var(--accent-green);
        margin-bottom: 2rem;
    }

    .paragraph-separator {
  width: 100%;
  /* Starts at 200px on mobile, grows with the screen, maxes out at 350px on desktop */
  height: clamp(400px, 30vw, 600px);
  overflow: hidden;
}

.paragraph-separator img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Acts like background-size: cover but for actual <img> tags */
}

    /* Footer */
    footer {
        background-color: var(--rose);
        /* color: white; */
        padding: 4rem 0;
    margin-top: auto;
    }

.footer-logo {
    font-weight: bold;
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
}

.footer-subtext {
    font-size: 1.0rem;
}

.footer-nav {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

    
    .footer-nav a {
        color: var(--text-dark);
        text-decoration: underline;
    transition: color 0.2s ease;
    }

    /* 1. Hide the ugly default scrollbar on mobile */
    .hide-scrollbar::-webkit-scrollbar {
    display: none;
    }
    .hide-scrollbar {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
    }

    /* 2. Add Scroll Snapping so images lock into place when swiping */
    .scroll-snap-container {
    scroll-snap-type: x mandatory;
    /* Smooth scrolling on iOS */
    -webkit-overflow-scrolling: touch; 
    }

    .scroll-snap-item {
    /* Aligns the left edge of the image to the left edge of the container */
    scroll-snap-align: start; 
    }

    /* 1. The Wrapper (Creates the shape) */
.footer-newsletter {
  display: flex;
  max-width: 400px; /* Prevents it from getting too wide on desktop */
  background-color: #ffffff;
  border: 1px solid #d1d5db; /* A very subtle light gray border */
  border-radius: 6px; /* Softly rounded corners */
  overflow: hidden; /* Crucial: Keeps the button inside the rounded corners */
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* 2. The Input Field */
.footer-newsletter input {
  flex-grow: 1; /* Tells the input to take up all remaining space */
  padding: 8px 16px;
  border: none; /* We remove the input's border because the wrapper has one */
  outline: none; /* Removes the default browser glow */
  font-size: 14px; /* 16px prevents iOS devices from auto-zooming */
  color: #374151; /* Dark gray is softer to read than pure black */
}

/* 3. The Button */
.footer-newsletter button {
  padding: 8px 12px;
  background-color: #dca1a1; /* Dark, high-contrast button */
  color: #ffffff;
  border: none;
  font-size: 14px;
  font-weight: 600; /* Semi-bold to make the action clear */
  cursor: pointer;
  transition: background-color 0.2s ease; /* Smooth hover effect */
}

/* Button Hover State */
.footer-newsletter button:hover {
  background-color: #374151; /* Slightly lighter gray on hover */
}

/* 4. The Focus State (Accessibility & Polish) */
/* :focus-within applies to the wrapper when the input inside is clicked */
.footer-newsletter:focus-within {
  border-color: #7a7a7a; /* Changes the border to blue */
  box-shadow: 0 0 0 3px rgba(103, 103, 103, 0.2); /* Creates a soft blue glow */
}