/* --- 1. DESIGN TOKENS --- */
:root {
    --side-padding: 80px;
    --primary-brown: #44362d;
    --bg-light: #f9f6f3;
    --bg-accent: #F4F1EC;
    --font-heading: 'Montserrat', sans-serif;
    --font-body: 'Inter', sans-serif;
    --max-width: 1440px;
}

/* --- 2. BASE RESET --- */
* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
}

body { 
    font-family: var(--font-body); 
    color: var(--primary-brown); 
    background-color: var(--bg-light); 
    overflow-x: hidden; 
    line-height: 1.5;
}

/* --- 3. GLOBAL LAYOUT (CENTERING LOGIC) --- */
section {
    width: 100%;
    display: flex;
    justify-content: center;
}

.container {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    display: block; /* Standard block for grid/flex children */
    position: relative;
}

/* --- 4. NAVIGATION --- */

.nav-left {
    display: flex;
    align-items: center;
}

.logo-link {
    display: flex;
    text-decoration: none;
}

.header-logo {
    /* Adjust height to match your navbar's visual balance */
    height: 120px; 
    width: auto;
    display: block;
    object-fit: contain;
}

/* Ensure the logo scales down for mobile if needed */
@media screen and (max-width: 768px) {
    .header-logo {
        height: 120px; 
    }
} 
.navbar { 
    width: 100%; 
    display: flex; 
    justify-content: center; 
    padding: 34px 0; 
    background: transparent; 
    position: absolute; 
    top: 0; 
    z-index: 100; 
}

.navbar .container { 
    display: flex;
    justify-content: space-between; 
    align-items: center; 
    padding: 0 var(--side-padding); 
}

.brand-name { font-family: var(--font-heading); font-size: 32px; font-weight: 600; }
.thin { font-weight: 200; }

.nav-center ul { display: flex; gap: 40px; list-style: none; }
.nav-center a { text-decoration: none; color: var(--primary-brown); font-size: 20px; transition: 0.3s; }
.nav-center a:hover { opacity: 0.7; }

.logo-alt { font-family: var(--font-heading); font-size: 36px; font-weight: 600; }
.nav-toggle, .nav-toggle-label, .mobile-only { display: none; }
.nav-toggle, .nav-toggle-label {
    display: none;
}

/* --- 5. HERO SECTION --- */
.hero { 
    min-height: 100vh; 
    background: url('assets/images/background2.webp') no-repeat center center/cover; 
    align-items: center; 
}

.hero-content {
    /* Reduce side padding to give text more breathing room */
    padding-left: var(--side-padding, 40px); 
    padding-right: var(--side-padding, 40px);
    
    /* Ensure the text box isn't too narrow */
    max-width: 800px; 
    
    /* Align to the left if that is your design intent */
    text-align: left;
    margin-left: 0;
}

h1 { font-family: var(--font-heading); font-size: 52px; line-height: 1.1; margin-bottom: 30px; }
.hero-content p { font-size: 24px; line-height: 1.5; margin-bottom: 40px; }

/* --- 6. UNIVERSAL BUTTON --- */
.btn-primary { 
    background: var(--primary-brown); 
    color: white; 
    border: none; 
    padding: 18px 36px; 
    font-size: 18px; 
    font-weight: 500;
    cursor: pointer; 
    transition: 0.3s ease; 
}

.btn-primary:hover { 
    opacity: 0.9; 
    transform: translateY(-2px); 
}

/* --- 7. SECTION 2: WHAT WE DO --- */
.what-we-do { background-color: var(--bg-light); }

.what-we-do .container { 
    display: grid; 
    grid-template-columns: 750px 1fr; 
}

.wwd-image-col img { 
    width: 750px; 
    height: 960px; 
    object-fit: cover; 
    display: block; 
}

.wwd-content-col { 
    padding: 60px 20px 60px 40px; /* Added 40px left padding for spacing */
    display: flex; 
    flex-direction: column; 
    justify-content: space-between; 
}

.subheading { font-size: 16px; font-style: italic; color: #888; text-transform: uppercase; letter-spacing: 1px; }
h2 { font-family: var(--font-heading); font-size: 42px; margin: 16px 0; line-height: 1.2; }

.services-grid { 
    display: grid; 
    grid-template-columns: 305px 305px; 
    margin-top: 40px; 
}

.service-box { 
    width: 305px; 
    height: 305px; 
    padding: 40px; 
    border: 1px solid var(--primary-brown); 
    transition: 0.4s ease; 
    margin: 0 -1px -1px 0; 
}

.service-box:hover { background: var(--primary-brown); color: white; }
.learn-more { display: block; margin-top: 20px; color: inherit; text-decoration: underline; opacity: 0; transition: 0.3s; }
.service-box:hover .learn-more { opacity: 1; }

/* --- 8. SECTION 3: MEET CASTELLA (SLIDER) --- */
.meet-castella { background-color: var(--bg-light); height: 840px; }

.meet-castella .container { 
    display: flex;
    align-items: center; 
    padding: 0 var(--side-padding); 
    gap: 80px; /* Spacing between text and gallery */
}

.castella-content { 
    flex: 0 0 550px; 
}

.castella-content h3 { font-size: 32px; font-weight: 400; margin-bottom: 30px; }
.castella-content p { margin-bottom: 20px; font-size: 18px; }

.gallery-container { 
    flex: 1; 
    position: relative; 
    height: 528px; 
}

.gallery-track { position: relative; width: 100%; height: 100%; }

.gallery-item { 
    position: absolute; 
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1); 
    border-radius: 40px; 
    overflow: hidden; 
}

.gallery-item img { width: 100%; height: 100%; object-fit: cover; }

.gallery-item.active { width: 462px; height: 528px; left: 0; z-index: 3; opacity: 1; }
.gallery-item.next { width: 327px; height: 374px; left: 492px; z-index: 2; opacity: 1; }
.gallery-item.hidden { opacity: 0; left: 850px; width: 327px; height: 374px; }
.gallery-item.exit { transform: translateX(-150px); opacity: 0; }

.slider-controls { display: flex; gap: 15px; margin-top: 40px; }
.control-btn { 
    width: 50px; height: 50px; border-radius: 50%; 
    border: 1px solid var(--primary-brown); background: none; 
    cursor: pointer; font-size: 20px; transition: 0.3s;
}
.control-btn:hover { background: var(--primary-brown); color: white; }

/* --- 9. SECTION 4: GLOBAL REPUTATION --- */
.global-reputation { 
    background: linear-gradient(to right, #ffffff 50%, var(--bg-accent) 50%); 
}

.global-reputation .container { 
    display: grid;
    grid-template-columns: 826px 1fr; 
    height: 678px; 
    column-gap: 60px; /* Spacing between image and text */
}

.reputation-image img { width: 826px; height: 678px; object-fit: cover; display: block; }

.reputation-content { 
    background-color: var(--bg-accent); 
    padding: 0 60px 0 20px; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
}

.content-wrapper { max-width: 540px; }
.description-lead { font-weight: 600; margin-bottom: 15px; font-size: 18px; }
.description-body { font-size: 18px; margin-bottom: 40px; opacity: 0.9; }

/* --- 10. MOBILE RESPONSIVE --- */
@media screen and (max-width: 1100px) {
    :root { --side-padding: 40px; }
    
    .container { padding: 0 var(--side-padding); }

    /* --- Navigation Mobile Fix --- */
.nav-center {
    display: none; /* Hide desktop links */
}

/* --- 1. Show the Toggle Label --- */
    .nav-toggle-label {
        display: block;
        position: relative;
        width: 30px;
        height: 20px;
        cursor: pointer;
        z-index: 1001; /* Ensure it stays above everything */
    }

    /* --- 2. Create the 3 Burger Lines --- */
    .nav-toggle-label span,
    .nav-toggle-label span::before,
    .nav-toggle-label span::after {
        display: block;
        background: var(--primary-brown);
        height: 2px;
        width: 100%;
        border-radius: 2px;
        position: absolute;
        transition: 0.3s ease-in-out;
    }

    .nav-toggle-label span { top: 9px; } /* Middle line */
    .nav-toggle-label span::before { content: ""; top: -8px; } /* Top line */
    .nav-toggle-label span::after { content: ""; top: 8px; } /* Bottom line */

    /* --- 3. Hide the Original Nav Center --- */
    .nav-center {
    display: flex !important; /* Force it to exist */
    position: fixed;
    top: 0;
    right: -100%; /* Start off-screen */
    width: 100%;
    height: 100vh;
    background-color: #C9AB86;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: 0.5s ease-in-out;
    z-index: 1000; /* Must be below the burger label but above the page */
}

    .nav-center ul {
    display: flex;
    flex-direction: column;
    gap: 40px;
    list-style: none;
    text-align: center;
}

.nav-center ul li a {
    font-size: 28px; /* Larger text for mobile touch */
    font-weight: 500;
    font-family: var(--font-heading);
    text-decoration: none;
    color: var(--primary-brown);
}
.nav-toggle-label {
    z-index: 1001; /* Higher than .nav-center so you can click it to close */
}

    /* --- 4. The Toggle Logic --- */
    .nav-toggle:checked ~ .nav-center {
    right: 0; /* Slide into view */
}

    /* Turn Burger into X when open */
    .nav-toggle:checked + .nav-toggle-label span { background: transparent; }
    .nav-toggle:checked + .nav-toggle-label span::before { transform: rotate(45deg); top: 0; }
    .nav-toggle:checked + .nav-toggle-label span::after { transform: rotate(-45deg); top: 0; }

    /* Hide desktop-only elements */
    .desktop-only { display: none; }
    .mobile-only { display: block; }

    /* Section 2 */
    .what-we-do .container { grid-template-columns: 1fr; }
    .wwd-image-col img { width: 100%; height: 500px; }
    .wwd-content-col { padding: 60px 0; }

    /* Section 3 */
    /* --- Section 3: Mobile Swipe Gallery --- */
    .meet-castella {
      height: auto !important; /* Allow section to grow with content */
      padding: 60px 0;
      overflow: hidden;
    }

    .meet-castella .container {
      flex-direction: column !important; /* Forces gallery BELOW the text */
      align-items: center;
      gap: 40px;
      padding: 0;
    }

    .castella-content {
    flex: none !important;
    width: 100%;
    max-width: 100%;
    padding: 0 var(--side-padding);
    text-align: center; /* Better flow for mobile/tablet */
    }

    .gallery-container {
      width: 100%;
      height: auto !important;
      overflow-x: auto; /* Enables the horizontal swipe */
      padding: 0 var(--side-padding) 40px;
      scroll-snap-type: x mandatory;
      display: block !important; /* Ensures visibility */
      -webkit-overflow-scrolling: touch;
    }

    .gallery-track {
    display: flex !important; /* Side-by-side images */
    flex-direction: row !important;
    position: static !important;
    width: max-content;
    gap: 20px;
    }

    .gallery-item {
    position: relative !important; /* Vital: breaks the desktop stacking */
    width: 300px !important; /* Adjust size for tablet/mobile */
    height: 380px !important;
    flex-shrink: 0;
    opacity: 1 !important; /* Ensures images are visible */
    left: auto !important;
    top: auto !important;
    transform: none !important;
    scroll-snap-align: center;
    visibility: visible !important;
    }
    /* Hide desktop controls on mobile */
    .slider-controls {
        display: none;
    }

    /* Section 4 */
    .global-reputation { background: var(--bg-accent); }
    .global-reputation .container { grid-template-columns: 1fr; height: auto; column-gap: 0; }
    .reputation-image img { width: 100%; height: 450px; }
    .reputation-content { padding: 80px 0; align-items: center; text-align: center; }
}

@media screen and (max-width: 768px) {
    :root { --side-padding: 24px; }
    h1 { font-size: 38px; }
    h2 { font-size: 32px; }

    .services-grid { grid-template-columns: 1fr; }
    .service-box { 
        width: 100%;
        height: auto; /* Remove the fixed 305px height */
        min-height: 150px; /* Set to roughly half of your desktop 305px */
        padding: 24px; /* Smaller padding gives more room for text */
        display: flex;
        flex-direction: column;
        justify-content: center; /* Centers text vertically in the smaller box */ }

     .service-box p {
        font-size: 16px; 
        line-height: 1.4;
    }
    
    .learn-more {
        margin-top: 10px;
        font-size: 14px;
    } 
    
    .navbar .container { padding: 0 24px; }
    .nav-center { display: none; } /* Add burger menu logic here if needed */
    .hero {
        /* Change to your mobile-specific image */
        background-image: url('assets/images/mobilebackground1.png'); 
        
        /* 'center center' or 'top center' helps keep the subject visible */
        background-position: center center; 
        
        /* Ensures the background doesn't stretch and looks sharp */
        background-attachment: scroll; 
    }
}


/* --- FOOTER RE-DESIGN --- */
.main-footer {
    background-color: #1a1a1b;
    color: #ffffff;
    padding: 100px 0 40px;
    width: 100%;
    display: flex;
    justify-content: center; /* Centers the footer container */
}

.main-footer .container {
    width: 100%;
    max-width: var(--max-width); /* Keeps alignment consistent with the site */
    margin: 0 auto;
    padding: 0 var(--side-padding); /* Prevents touching screen edges */
    display: flex;
    flex-direction: column;
}

.footer-grid {
    display: grid;
    /* Increased first column to create gap between Logo and Menu */
    grid-template-columns: 3fr 1fr 1fr; 
    gap: 60px;
    margin-bottom: 60px;
}

.footer-brand {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.footer-logo { 
    font-size: 52px; 
    font-family: var(--font-heading); 
    font-weight: 600;
}

.footer-tagline { 
    font-size: 42px; 
    line-height: 1.1; 
    opacity: 0.6; 
    max-width: 500px; 
    font-family: var(--font-heading);
}

.footer-label { 
    display: block; 
    color: #747474; 
    font-size: 14px; 
    margin-bottom: 24px; 
    letter-spacing: 1px; 
    font-weight: 600;
}

/* Contacts moved to bottom via Flexbox or Grid placement */
.footer-contacts {
    margin-top: 40px; /* Pushes it down */
    margin-bottom: 40px;
}

.footer-links ul { list-style: none; }
.footer-links ul li { margin-bottom: 14px; }
.footer-links a { 
    color: #ffffff; 
    text-decoration: none; 
    opacity: 0.7; 
    transition: 0.3s; 
    font-size: 16px; 
}
.footer-links a:hover { opacity: 1; color: #ff5c5c; }

.social-links {
    display: flex;
    gap: 24px;
    margin-top: 20px;
}

.social-links a { color: #ffffff; font-size: 20px; opacity: 0.8; transition: 0.3s; }
.social-links a:hover { opacity: 1; transform: translateY(-3px); }

.footer-bottom { 
    border-top: 1px solid rgba(255,255,255,0.1); 
    padding-top: 40px;
    display: flex; 
    justify-content: space-between; 
    font-size: 14px; 
    opacity: 0.5; 
}

/* --- MOBILE FOOTER FIX --- */
@media screen and (max-width: 1100px) {
    .footer-grid {
        grid-template-columns: 1fr; /* Stack everything on mobile */
        gap: 50px;
    }
    .footer-logo { font-size: 36px; }
    .footer-tagline { font-size: 28px; }
}

@media screen and (max-width: 768px) {
    /* Target the main heading */
    .hero-content h1, 
    .hero-content .main-title { 
        font-size: 28px !important; /* Reduced from desktop size */
        line-height: 1.2 !important; /* Adds space between overlapping lines */
        margin-bottom: 15px;
    }

    /* Target the sub-text paragraph */
    .hero-content p {
        font-size: 16px !important;
        line-height: 1.4;
        margin-bottom: 25px;
    }

    /* Ensure the container has enough top padding so it doesn't hit the logo */
    .hero-content {
        padding-top: 100px; 
        padding-left: 20px;
        padding-right: 20px;
    }
}