/* --- Reset & Base --- */
:root {
    /* --- New Color Palette --- */
    --primary: #3B82F6;      /* Harmony Blue (Trust) */
    --secondary: #1E3A8A;    /* Deep Navy (Authority) */
    --accent: #F472B6;       /* Warm Coral (Connection) */
    --bg-color: #F9FAFB;     /* Soft Cream (Cleanliness) */
    --text-body: #6B7280;    /* Subtle Gray (Clarity) */
    --white: #ffffff;
}

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

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-color);
    color: var(--text-body);
    line-height: 1.6;
    /* Ensures the page takes up the full window */
    height: 100vh;
    width: 100vw;
    overflow: hidden; /* Prevents main page scrollbar */
}

/* --- Navigation ---
.navbar {
    padding: 1.5rem 5%;
    max-width: 1400px;
    margin: 0 auto;
    position: absolute;  Sits on top of the layout 
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
}

.logo { 
    font-weight: 800; 
    font-size: 1.5rem; 
     Authority Color 
    color: var(--secondary); 
    letter-spacing: -0.02em;
} */

.logo { 
    /* Sets the height to match standard navbar proportions 
       (approx 60px based on the visual weight of the reference image).
    */
    height: 60px; 
    
    /* Auto width ensures the image doesn't get stretched/squished */
    width: auto; 
    
    /* Ensures the image respects the container layout */
    display: block; 
    
    font-weight: 800; 
    font-size: 1.5rem; 
     /* Authority Color  */
    color: var(--secondary); 
    letter-spacing: -0.02em;
}

/* Optional: Update navbar alignment to handle the image height nicely */
.navbar {
    padding: 1rem 5%; /* Slightly reduced top/bottom padding since image is taller */
    max-width: 1400px;
    margin: 0 auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    display: flex;       /* Ensures vertical centering */
    align-items: center; /* Vertically centers the logo */
}

/* --- Split Layout --- */
.hero-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 5%;
    /* Full Viewport Height */
    height: 100vh; 
    display: flex;
    align-items: center;
}

.hero-split {
    display: grid;
    /* Text is 1 part, Form is 1.3 parts (Wider) */
    grid-template-columns: 1fr 1.3fr; 
    gap: 4rem;
    align-items: center;
    width: 100%;
    margin-top: 2rem; /* Offset slightly for the fixed navbar */
}

/* --- Text Side (Left) --- */
.badge {
    /* Using the Accent (Coral) for connection/warmth */
    background-color: rgba(244, 114, 182, 0.1);
    color: var(--accent);
    padding: 0.4rem 0.8rem;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    display: inline-block;
    margin-bottom: 1rem;
}

.hero-text h1 {
    font-size: 3.5rem;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    letter-spacing: -0.03em;
    /* Authority Color */
    color: var(--secondary);
}

.hero-text .highlight { 
    /* Trust Color */
    color: var(--primary);
    position: relative;
}

/* Optional: Underline the highlight with the accent color */
.hero-text .highlight::after {
    content: '';
    position: absolute;
    bottom: 5px;
    left: 0;
    width: 100%;
    height: 8px;
    background-color: var(--accent);
    opacity: 0.2;
    z-index: -1;
}

.hero-text p {
    font-size: 1.15rem;
    /* Clarity Color */
    color: var(--text-body);
    margin-bottom: 2rem;
    max-width: 90%;
}

.trust-badges {
    display: flex;
    gap: 1.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--secondary); /* Using Navy for trust badges */
    opacity: 0.8;
}

/* --- Form Side (Right) --- */
.hero-form-wrapper {
    background: var(--white);
    padding: 0; 
    border-radius: 16px;
    /* Clean, subtle border using the Trust Blue but very faint */
    border: 1px solid rgba(59, 130, 246, 0.15);
    /* Soft shadow for depth */
    box-shadow: 
        0 20px 25px -5px rgba(30, 58, 138, 0.1), /* Deep Navy shadow */
        0 8px 10px -6px rgba(30, 58, 138, 0.1);
    overflow: hidden; 
    position: relative;

    /* Height fills 88% of the page */
    height: 88vh; 
    width: 100%;
}

.google-form-frame {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

/* --- Mobile Responsive --- */
@media (max-width: 900px) {
    body {
        overflow-y: auto; /* Allow scrolling on mobile */
        height: auto;
    }
    
    .navbar { position: relative; }

    .hero-container {
        height: auto;
        min-height: 100vh;
        padding: 2rem 5%;
        display: block;
    }

    .hero-split {
        grid-template-columns: 1fr; 
        gap: 2rem;
        margin-top: 0;
    }

    .hero-text { text-align: center; margin-bottom: 2rem; }
    .hero-text p { margin: 0 auto 2rem auto; }
    .trust-badges { justify-content: center; }
    .hero-text h1 { font-size: 2.5rem; }
    
    .hero-form-wrapper {
        /* On mobile, give it a fixed height that fits nicely */
        height: 75vh; 
    }
}