/* --- Base Reset & Typography --- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: #faf9f8; /* Elegant off-white */
    color: #1a1a1a;
    line-height: 1.5;
}

/* --- Layout Structure --- */
.split-layout {
    display: flex;
    min-height: 100vh;
    width: 100%;
}

.left-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 3rem 4rem;
    position: relative;
    z-index: 2;
}

.right-panel {
    flex: 1;
    background-color: #222;
    overflow: hidden;
    position: relative;
}

/* --- Image Styling --- */
.hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    object-position: right center; 
    
    /* These two lines zoom the image in by 15% to push that center seam out of the frame */
    transform: scale(1.15); 
    transform-origin: right center; 
}

/* --- Logo Styling --- */
.logo-container {
    margin-bottom: auto; /* Pushes content down to vertical center */
}

.brand-logo {
    max-width: 121px; /* Increased by 10% from 110px */
    height: auto;
    min-height: 40px; 
}

/* --- Content & Typography --- */
.content-container {
    max-width: 600px;
    margin-top: 2rem;
    margin-bottom: auto;
    margin-left: 20%; /* Pushes the text 50% to the right */
}

/* Overline / Kicker Text */
.overline {
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #444;
    margin-bottom: 2rem;
}

.highlight {
    color: #8a3479; /* Brand Purple */
}

.accent-line {
    width: 50px;
    height: 2px;
    background-color: #8a3479;
    margin-top: 14px;
}

/* Main Catchy Headline using Playfair */
h1 {
    font-family: 'Playfair Display', serif;
    font-size: 4.5rem; 
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -1px;
    color: #111;
    margin-bottom: 2.5rem;
}

/* The requested purple quote with the side line */
.quote-text {
    font-family: 'Playfair Display', serif;
    font-size: 1.8rem;
    font-style: italic;
    color: #8a3479;
    line-height: 1.3;
    margin-bottom: 2.5rem;
    padding-left: 1.5rem; /* Adds breathing room between the line and text */
    border-left: 3px solid #8a3479; /* The vertical line */
}

/* Subtext & Link */
.subtext {
    font-size: 1rem;
    font-weight: 500;
    color: #555;
}

.contact-link {
    color: #8a3479;
    font-weight: 700;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: border-color 0.3s ease;
}

.contact-link:hover {
    border-color: #8a3479;
}

/* --- Responsive Design --- */
@media (max-width: 1200px) {
    h1 {
        font-size: 3.5rem;
    }
    .quote-text {
        font-size: 1.5rem;
    }
}

/* --- Responsive Design for Mobile/Tablets --- */
@media (max-width: 768px) {
    .split-layout {
        position: relative;
        display: block; 
    }

    .left-panel {
        padding: 2rem 1.5rem;
        min-height: 100vh;
        background-color: rgba(250, 249, 248, 0.85); 
        z-index: 2;
        
        /* Flexbox rules to perfectly center the container */
        display: flex;
        flex-direction: column;
        justify-content: center; 
        align-items: center; 
    }

    /* Position the logo at the top left so it doesn't push the text down */
    .logo-container {
        position: absolute;
        top: 2rem;
        left: 1.5rem;
        margin-bottom: 0;
    }

    .right-panel {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1; 
    }

    /* Reset margins and center the text inside */
    .content-container {
        margin: 0; 
        width: 100%;
        text-align: center; /* Centers the actual text */
    }

    /* Center the accent line under the overline */
    .accent-line {
        margin: 14px auto 0 auto; 
    }

    /* Adjust the quote style for centered text */
    .quote-text {
        font-size: 1.3rem;
        margin-bottom: 1.5rem;
        padding-left: 0; /* Remove left padding */
        border-left: none; /* Remove left border as it looks awkward when centered */
    }

    /* Optimize Text Sizes */
    h1 {
        font-size: 2.8rem;
        margin-bottom: 1.5rem;
        line-height: 1.1;
    }
    
    .overline {
        font-size: 0.75rem;
        margin-bottom: 1rem;
        letter-spacing: 1.5px;
    }

    .subtext {
        font-size: 0.95rem;
    }

    .brand-logo {
        max-width: 90px;
    }
}