/* General Body & Font Styles */
body {
    font-family: 'Raleway', sans-serif;
    margin: 0;
    background-color: #ecf0ef;
    color: #4A4A4A;
    font-weight: 300;
}

/* Header Styles */
header {
    max-width: 1650px;
    margin: 0 auto;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2.5rem 5%;
}

.logo-link {
    font-family: 'Montserrat', sans-serif;
    text-decoration: none;
    color: #000000;
    font-size: 18px;
    font-weight: 450;
    letter-spacing: 0.25em;
    margin-top: 0.5rem;
    line-height: 1.4;
}

/* Hide mobile-only elements on desktop */
.logo-mobile {
    display: none;
}
.desktop-only-portfolio {
    display: flex;
    align-items: baseline;
}

/* Desktop Navigation */
.desktop-nav {
    display: flex;
    gap: 2rem;
    align-items: center;
    margin-top: 0.5rem;
}

.nav-link {
    text-decoration: none;
    color: #000000;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.2em;
    white-space: nowrap;
    transition: color 0.3s ease;
}

.nav-link:hover {
    color: #888;
}

/* Hamburger & Mobile Menu */
.hamburger-menu { display: none; cursor: pointer; flex-direction: column; gap: 4px; }
.hamburger-menu .line { width: 25px; height: 2px; background-color: #2D2D2D; }
.mobile-menu-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #B5BFB9; z-index: 1000; display: flex; flex-direction: column; justify-content: center; align-items: center; transform: translateX(100%); transition: transform 0.3s ease-in-out; }
.mobile-menu-overlay.active { transform: translateX(0); }
.mobile-nav { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; width: 80%; }
.mobile-menu-overlay .nav-link { color: #2D2D2D; font-size: 20px; }
.close-btn { position: absolute; top: 2rem; right: 5%; font-size: 2.5rem; color: #2D2D2D; cursor: pointer; }

/* Main Content Styles */
main { max-width: 1650px; margin: 0 auto; padding: 0 5%; box-sizing: border-box; }
.intro-section { display: flex; gap: 2rem; padding: 5rem 0; align-items: center; }
.intro-heading { flex: 1; }
.intro-heading h2 { font-family: 'Raleway', sans-serif; font-size: 40px; font-weight: 300; line-height: 1.2; }
.intro-text { flex: 1; line-height: 1.8; }

/* Gallery Grid Styles (for Masonry) */
.photo-grid {
    margin: 0 auto;
    padding: 0 0 5%;
}
.photo-grid:after { content: ''; display: block; clear: both; }
.grid-sizer, .grid-item { width: 25%; }
.grid-item { padding: 0.5rem; box-sizing: border-box; float: left; }
.grid-item img { width: 100%; height: auto; display: block; cursor: pointer; }

/* CTA, Instagram */
.cta-section { background-color: #B5BFB9; text-align: center; padding: 4rem 2rem; margin: 3rem 0; }
.cta-section h2 { font-family: 'Raleway', sans-serif; font-size: 2.2rem; font-weight: 300; margin-bottom: 1rem; }
.cta-section p { max-width: 600px; margin: 0 auto 2rem auto; line-height: 1.8; }
.cta-button { text-decoration: none; color: #2D2D2D; border: 1px solid #2D2D2D; padding: 1rem 2rem; text-transform: uppercase; font-size: 13px; letter-spacing: 0.1em; transition: background-color 0.3s, color 0.3s; }
.cta-button:hover { background-color: #2D2D2D; color: #F8F8F8; }

/* --- DESKTOP INSTAGRAM FEED STYLES --- */
.instagram-feed { 
    padding: 3rem 0; 
}
.insta-header { 
    display: flex; /* Changed to flexbox */
    justify-content: space-between; /* Pushes items to ends */
    align-items: center; 
    margin-bottom: 2rem; 
}
.social-icons-insta { 
    display: flex; /* Use flexbox for icons */
    align-items: center;
    gap: 1.5rem; /* Space between icons */
}
.social-icons-insta a {
    font-size: 1.8rem; /* Make icons larger */
    color: #4A4A4A; 
    margin-left: 0; /* Remove old margin */
    text-decoration: none; 
    transition: color 0.3s ease; 
}
.social-icons-insta a:hover { 
    color: #888; 
}

.insta-follow-link, .insta-handle-link { 
    text-decoration: none; 
    color: #4A4A4A; 
    transition: color 0.3s ease; 
}
.insta-follow-link {
    text-transform: uppercase; 
    font-size: 12px; 
    letter-spacing: 0.1em;
}
.insta-handle-link {
    font-size: 1.5rem; 
    text-transform: none; 
    letter-spacing: normal;
}
.insta-follow-link:visited, .insta-handle-link:visited { color: #4A4A4A; }
.insta-follow-link:hover, .insta-handle-link:hover { color: #888; }


/* Footer Styles */
footer {
    max-width: 1650px;
    margin: 0 auto;
    padding: 4rem 5% 2rem 5%;
    font-size: 12px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}
.footer-nav { display: flex; justify-content: center; gap: 1.8rem; align-items: center; }
.back-to-top { color: #4A4A4A; font-size: 1.2rem; }
.footer-social { display: none; }

/* Lightbox Styles */
#lightbox-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.98); z-index: 2000; display: flex; justify-content: center; align-items: center; padding: 20px; box-sizing: border-box; opacity: 0; visibility: hidden; transition: opacity 0.4s ease-in-out, visibility 0s 0.4s; }
#lightbox-overlay.active { opacity: 1; visibility: visible; transition: opacity 0.4s ease-in-out; }
#lightbox-image { max-width: 90%; max-height: 90%; object-fit: contain; transform: scale(0.85); opacity: 0; transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.4s ease-in-out; }
#lightbox-overlay.active #lightbox-image { transform: scale(1); opacity: 1; }
#lightbox-image.zoomed { cursor: grab; }
.lightbox-close, .lightbox-prev, .lightbox-next { position: absolute; color: #4A4A4A; cursor: pointer; font-size: 2rem; user-select: none; transition: color 0.2s; }
.lightbox-close { top: 20px; right: 30px; font-size: 2.5rem; }
.lightbox-prev, .lightbox-next { top: 50%; transform: translateY(-50%); padding: 1rem; }
.lightbox-prev { left: 20px; }
.lightbox-next { right: 20px; }
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover { color: #2D2D2D; }

/* --- HOMEPAGE SPECIFIC STYLES --- */
.hero { margin-top: 2rem; }
.hero img { width: 100%; aspect-ratio: 1113 / 542; object-fit: cover; object-position: 50% 25%; display: block; }
.tagline { text-align: center; padding: 5rem 1rem; }
.tagline h2 { font-family: 'Lato', sans-serif; font-size: 2.5rem; font-weight: 300; line-height: 1.5; color: #4A4A4A; letter-spacing: 0.02em; }
.portfolio-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8rem; padding-bottom: 6rem; }
.portfolio-item { text-align: center; text-decoration: none; color: #4A4A4A; transition: transform 0.3s ease; }
.portfolio-item:hover { transform: scale(1.03); }
.portfolio-item img { width: 100%; aspect-ratio: 289 / 396; object-fit: cover; display: block; }
.portfolio-item h3 { font-family: 'Lato', sans-serif; font-weight: 400; font-size: 1.2rem; margin: 1.25rem 0 0.25rem; }
.portfolio-item p { font-size: 0.9rem; color: #888; margin: 0; text-transform: uppercase; letter-spacing: 0.1em; }
.info-blocks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8rem; padding-bottom: 6rem; }
.info-block { background-color: #B5BFB9; text-align: center; text-decoration: none; color: #2D2D2D; transition: background-color 0.3s ease; aspect-ratio: 8 / 5; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.info-block:hover { background-color: #a8b2ad; }
.info-block h3 { font-family: 'Lato', sans-serif; font-weight: 400; font-size: 1.5rem; margin: 0 0 0.5rem; }
.info-block p { margin: 0; text-transform: uppercase; font-size: 0.8rem; letter-spacing: 0.1em; }

/* --- DESKTOP DROPDOWN (HOVER) STYLES --- */
.dropdown { position: relative; display: flex; align-items: center; }
.dropdown-content {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #B5BFB9;
    min-width: 180px; 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    padding: 12px 0;
    margin-top: 15px;
    transition: opacity 0.2s ease, visibility 0s 0.2s;
    max-height: 1000px;
}
.dropdown:hover .dropdown-content { visibility: visible; opacity: 1; transition: opacity 0.2s ease; }
.dropdown-content a {
    color: #2D2D2D;
    padding: 10px 32px;      
    text-decoration: none;
    display: block;
    text-align: center;
    font-size: 13px;
    text-transform: capitalize;
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 0.1em;
}
.dropdown-content a:hover { background-color: #a8b2ad; }

/* --- FOOTER UPWARD DROPDOWN --- */
.footer-dropdown .dropdown-content {
    bottom: 100%;
    top: auto;
    margin-top: 0;
    margin-bottom: 15px;
}

/* --- ACCORDION MENU (GENERAL) STYLES --- */
.nav-accordion { text-align: center; }
.accordion-header { display: flex; justify-content: center; align-items: baseline; }
.accordion-header .nav-link { padding-right: 0.5em; }
.accordion-content a { display: block; padding: 8px 0; text-decoration: none; color: #4A4A4A; font-size: 12px; letter-spacing: 0.2em; text-transform: capitalize; }
.accordion-content a:hover { color: #000000; }

/* --- RESPONSIVE STYLES --- */
@media (max-width: 1200px) {
    .grid-sizer, .grid-item { width: 33.333%; }
}
@media (max-width: 992px) {
    .intro-section { flex-direction: column; text-align: center; }
}
@media (max-width: 768px) {
    .desktop-nav, .logo-desktop, .info-blocks, .instagram-feed { 
        display: none; 
    }
    
    .logo-mobile { 
        display: block; 
        text-align: left; 
    }
    .hamburger-menu { 
        display: flex; 
    }
    .mobile-social-icons {
        display: flex;
        justify-content: center;
        gap: 3rem;
        font-size: 1.5rem;
        margin: 3rem 0;
    }
    
    .intro-heading h2 { font-size: 2rem; }
    .tagline h2 { font-size: 1.8rem; }
    
    .portfolio-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
        
    footer { 
        flex-direction: column; 
        align-items: center; 
        gap: 2rem; 
        padding-bottom: 3rem; 
    }
    .footer-social { 
        display: flex; 
        gap: 2rem; 
        font-size: 1.5rem; 
        order: 1; 
    }
    .footer-social a, .footer-social a:visited { 
        color: #000000; 
    }
    .footer-nav {
        order: 2;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
        width: 100%;
    }
    footer > span { 
        order: 3; 
    }
    .back-to-top { 
        order: 4; 
    }
    
    .hero img { aspect-ratio: auto; object-position: center; }
    .grid-sizer, .grid-item { width: 50%; }
    .lightbox-prev, .lightbox-next { font-size: 1.5rem; padding: 0.5rem; }
    .lightbox-prev { left: 10px; }
    .lightbox-next { right: 10px; }

    .accordion-header { cursor: pointer; }
    .accordion-toggle { display: inline-block; font-size: 0; }
    
    /* --- MAIN MOBILE NAV MENU ACCORDION --- */
    .mobile-nav .accordion-header {
        justify-content: center;
    }
    .mobile-nav .nav-accordion { width: 100%; }
    .mobile-nav .accordion-content {
        text-align: center;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s ease-out;
    }
    .mobile-nav .nav-accordion.open .accordion-content {
        max-height: 300px;
    }
    .mobile-nav .accordion-content a { font-size: 16px; color: #2D2D2D; padding: 10px 0; }
    .mobile-nav .accordion-toggle::before {
        content: ' +';
        font-size: 20px;
        font-family: 'Raleway', sans-serif;
        letter-spacing: 0.2em;
    }
    .mobile-nav .nav-accordion.open .accordion-toggle::before {
        content: ' —';
    }
}

/* --- PREVENT IMAGE SAVE ON MOBILE --- */
.hero img,
.portfolio-item img,
.photo-grid img,
#lightbox-image {
    -webkit-touch-callout: none;
    user-select: none;
}