:root {
    --bg-color: #EBEBEB;
    --text-color: #1A1A1A;
    --accent-color: #000000;
    --white: #FFFFFF;
    --font-primary: 'Inter', sans-serif;
    --font-accent: 'Playfair Display', serif;
}

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

body, html {
    height: 100%;
    width: 100%;
    font-family: var(--font-primary);
    background-color: var(--bg-color);
    color: var(--text-color);
    overflow: hidden;
}

/* Split Layout */
.split-layout {
    display: flex;
    height: 100vh;
    width: 100vw;
}

/* Left Panel */
.left-panel {
    position: relative;
    flex: 1;
    height: 100%;
    overflow: hidden;
}

.logo {
    position: absolute;
    top: 40px;
    left: 40px;
    z-index: 10;
}

.logo img {
    height: 18px; /* Adjusted height for the logo */
    width: auto;
}

/* Carousel Styles */
.carousel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.carousel-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
    z-index: 1;
}

.carousel-slide.active {
    opacity: 1;
    z-index: 2;
    animation: lightZoom 30s linear infinite; /* Very slow and linear for continuous feel */
}

@keyframes lightZoom {
    from { transform: scale(1); }
    to { transform: scale(1.2); }
}

.side-footer {
    position: absolute;
    bottom: 40px;
    left: 40px;
    z-index: 10;
}

.side-footer p {
    font-size: 0.6375rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    color: var(--white);
}

/* Right Panel */
.right-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--bg-color);
    padding: 40px;
    position: relative;
}

.content-wrapper {
    text-align: center;
}

.title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2.2rem, 5vw, 3.5rem); /* Adjusted for Cormorant scale */
    font-weight: 500;
    letter-spacing: 0.05em;
    margin-bottom: 40px;
    line-height: 1.1;
    font-style: italic;
    text-transform: none; /* Let the font's natural elegance show without all-caps if possible, or keep caps? User didn't specify. I'll try uppercase first to match previous style but with Garamond. Actually, Cormorant Garamond looks better in normal case for elegance. I'll remove text-transform. */
}

.subtitle {
    font-size: 0.765rem;
    font-weight: 400;
    letter-spacing: 0.3em;
    margin-bottom: 60px;
    opacity: 0.8;
}

.cta-icons {
    display: flex;
    flex-direction: row;
    gap: 20px;
    justify-content: center;
    margin-top: 20px;
}

.icon-link {
    display: block;
    width: 114px; /* Increased by 20% from 94px */
    height: auto;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.icon-link img {
    width: 100%;
    height: auto;
    display: block;
}

.icon-link:hover {
    transform: translateY(-5px);
    opacity: 0.9;
}

/* Bottom Footer */
.bottom-footer {
    position: absolute;
    bottom: 40px;
    right: 40px;
}

.footer-links {
    display: flex;
    gap: 10px;
    align-items: center;
}

.footer-links a {
    text-decoration: none;
    color: var(--text-color);
    font-size: 0.6375rem;
    letter-spacing: 0.15em;
    transition: opacity 0.3s ease;
}

.footer-links a:hover {
    opacity: 0.6;
}

.separator {
    font-size: 0.6375rem;
    opacity: 0.4;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .title {
        font-size: 2.125rem;
    }
}

@media (max-width: 768px) {
    body, html {
        overflow: auto;
    }
    
    .split-layout {
        flex-direction: column;
        height: 100vh;
        overflow-y: auto;
    }
    
    .left-panel {
        height: 60vh; /* Increased from 40vh */
        width: 100%;
        flex: none;
    }
    
    .right-panel {
        height: 40vh; /* Reduced from 60vh to minimize white space */
        width: 100%;
        flex: none;
        padding: 30px 20px; /* Reduced padding */
        display: flex;
        flex-direction: column;
        justify-content: center; /* Center content vertically in the smaller area */
        background-color: var(--bg-color);
    }
    
    .title {
        font-size: 1.7rem;
    }
    
    .bottom-footer {
        position: static;
        margin-top: 40px;
    }
    
    .logo {
        top: 20px;
        left: 50%;
        transform: translateX(-50%);
    }

    .logo img {
        height: 10px;
    }

    .side-footer {
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        text-align: center;
    }

    .side-footer p {
        font-size: 0.47rem; /* Reduced by 15% from 0.55rem */
    }

    .content-wrapper {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .subtitle {
        margin-bottom: 40px;
    }

    .cta-icons {
        flex-direction: row;
        gap: 10px;
        margin-top: 0;
        margin-bottom: 20px;
    }

    .icon-link {
        width: 102px; /* Increased by 30% from 78px */
    }

    .footer-links {
        justify-content: center;
    }
}