:root {
    --peach: #FDBA74;
    --peach-hover: #fbbf85;
    --text-dark: #222;
    --text-body: #4a4a4a;

    --font-primary: 'Josefin Sans', sans-serif;

    --anim-duration: 1.2s;
    --anim-ease: cubic-bezier(0.25, 1, 0.5, 1);
}

/* 1. GLOBAL RESET & FIX */
html, body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    height: 100%; /* Critical for locking the layout */
    /* This stops the whole page from "rubber-banding" on Mac/iOS */
    overflow: hidden;
}

*, *::before, *::after {
    box-sizing: inherit;
}

body {
    font-family: var(--font-primary);
    color: var(--text-body);
    line-height: 1.6;
}

/* 2. MAIN CONTAINER: Use Dynamic Viewport Height */
.split-container {
    display: flex;
    /* Fallback for older browsers */
    height: 100vh;
    /* Fix for iPad/Mobile address bars */
    height: 100dvh;
    width: 100%;
    overflow: hidden; /* Ensures no double scrollbars */
}

/* 3. IMAGE SECTION: Fixed and Unmovable */
.image-section {
    flex: 0 0 30%;
    height: 100%;
    position: relative;
    background-color: #f0f0f0;

    clip-path: inset(0 100% 0 0);
    animation: unwrapLeft var(--anim-duration) var(--anim-ease) forwards;
}

.image-section img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center; /* Keeps face visible if cropped */
    display: block;
}

/* 4. TEXT SECTION: Independent Scrolling */
.text-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    /* Center vertical content if it's short, but allow scroll if long */
    justify-content: center;

    /* CRITICAL FIXES FOR SCROLLING */
    height: 100%;       /* Match the container height */
    overflow-y: auto;   /* Allow ONLY this side to scroll */
    -webkit-overflow-scrolling: touch; /* Smooth momentum scrolling on iOS */

    padding: 12rem 16rem; /* Your custom padding */
    background-color: #fff;

    opacity: 0;
    animation: fadeIn 0.8s ease-out forwards;
    animation-delay: 0.5s;
}

/* Typography */
.main-title {
    font-weight: 700;
    font-size: 3.5rem;
    color: var(--text-dark);
    margin-bottom: 4rem;
    letter-spacing: -1px;
}

.subtitle {
    font-weight: 700;
    font-size: 2.25rem;
    color: var(--text-dark);
    margin-bottom: 1.5rem;
}

strong, b {
    font-weight: 600;
}

p {
    font-family: var(--font-primary); /* Ensuring Josefin Sans everywhere */
    font-size: 1.2rem;
    margin-bottom: 2rem;
    color: var(--text-body);
}

.intro-text {
    font-size: 1.2rem;
    color: #333;
}

a {
    color: var(--text-dark);
    text-decoration: underline;
    font-weight: 600;
    text-underline-offset: 3px;
}

/* Button */
.cta-button {
    display: inline-block;
    background-color: var(--peach);
    color: #000;
    text-decoration: none;
    padding: 16px 42px;
    font-weight: 700;
    border-radius: 4px;
    margin-top: 2.5rem;
    transition: transform 0.2s ease, background-color 0.3s ease;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    /* Prevent button from stretching full width in flex container */
    align-self: flex-start;
}

.cta-button:hover {
    background-color: var(--peach-hover);
    transform: translateY(-2px);
    text-decoration: none;
}

/* --- Animations --- */

@keyframes unwrapLeft {
    0% { clip-path: inset(0 100% 0 0); }
    100% { clip-path: inset(0 0 0 0); }
}

@keyframes unwrapTop {
    0% { clip-path: inset(0 0 100% 0); }
    100% { clip-path: inset(0 0 0 0); }
}

@keyframes fadeIn {
    to { opacity: 1; }
}

/* --- Responsive Adjustments --- */

/* Tablet (Landscape) & Small Laptops */
@media (max-width: 1200px) {
    .text-section {
        /* 1. Reduce padding drastically to give text breathing room */
        padding: 6rem 5rem;

        justify-content: flex-start;
    }

    /* Optional: Ensure the title doesn't stick to the very top */
    .main-title {
        margin-top: 2rem;
    }
}

/* iPad Mini / Tablets */
@media (max-width: 1024px) {
    .text-section {
        padding: 4rem 4rem;
    }
    .image-section {
        flex: 0 0 40%; /* Give image more space on tablet */
    }
}

/* Mobile Phones */
@media (max-width: 768px) {
    /* UNLOCK SCROLLING FOR PHONES */
    html, body {
        height: auto;
        overflow: auto;
    }

    .split-container {
        flex-direction: column;
        height: auto;
        min-height: 100dvh;
        overflow: visible;
    }

    .image-section {
        flex: none;
        width: 100%;
        height: 40vh;

        clip-path: inset(0 0 100% 0);
        animation: unwrapTop var(--anim-duration) var(--anim-ease) forwards;
    }

    .text-section {
        height: auto;
        overflow-y: visible;
        padding: 3rem 2rem;
    }

    .main-title {
        font-size: 3rem;
        margin-bottom: 2rem;
    }

    .cta-button {
        align-self: center; /* Center button on mobile */
    }
}