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

body {
    margin: 0;
    background-color: #fffffb;
    overflow-x: hidden;
}

/* --- HEADER --- */
#main-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;

    /* FIXED THINNER HEIGHT (No shrinking animation) */
    height: 6vh;
    min-height: 50px;

    /* Initial State: Transparent */
    background: transparent;
    box-shadow: none;

    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 3%;
    /* Increased to 3% for better visual balance */

    /* Only animate the background color/shadow, NOT the height */
    transition: background-color 0.4s ease, box-shadow 0.4s ease;
}

/* --- HEADER LINKS HOVER EFFECT --- */

.header-link {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: auto;
    cursor: pointer;
    text-decoration: none;
    border: none;
    position: relative;

    /* We handle the transition for the underline here */
    transition: all 0.3s ease;
}

.header-link::after {
    content: '';
    position: absolute;
    bottom: 30%;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(to right, #9694d4 0%, #74a0b6 35%, #e4e4e3 100%);
    opacity: var(--underline-opacity, 0);
    transition: opacity 0.3s ease;
    z-index: 1;
}

.header-link:hover {
    opacity: 1;
}

#main-header.scrolled-past-hero {
    background: rgba(255, 255, 251, 0.95);
    box-shadow: 0 0 4px 0 black;
}

/* Show underlines when scrolled (portfolio page) */
#main-header.scrolled-past-hero .header-link::after {
    opacity: 1;
}

.header-box {
    height: 100%;
    display: flex;
    align-items: center;
}

.left-box {
    justify-content: flex-start;
    flex: 1;
}

.center-box {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    justify-content: center;
    text-align: center;
    height: 100%;
    /* Ensure it takes full height */
}

.right-box {
    justify-content: flex-end;
    flex: 1;
}

/* --- IMAGES ADAPTED TO NEW THIN HEADER --- */
/* Replaced with text styles */

.header-text-left,
.header-text-right {
    font-family: 'aileron', sans-serif;
    font-size: 14px;
    letter-spacing: 1px;
    color: black;
    opacity: 0;
    transition: opacity 0.3s ease, background-size 0.3s ease;
    white-space: nowrap;
    position: relative;
    z-index: 2;
    background: linear-gradient(to right, #9694d4 0%, #74a0b6 35%, #e4e4e3 100%);
    background-size: 0% 100%;
    background-repeat: no-repeat;
    background-position: left center;
    padding: 2px 6px;
}

.header-link:hover .header-text-left,
.header-link:hover .header-text-right {
    background-size: 100% 100%;
    color: black;
}

/* Hide the underline when hovered because the highlight covers it */
.header-link:hover::after {
    opacity: 0 !important;
}

/* Keep old IDs for backward compatibility but hide them */
#header-icon,
#header-text {
    display: none;
}

/* --- LOGO CSS UPDATE --- */
#header-logo {
    height: 60%;
    width: auto;
    transform-origin: center;

    /* HARDWARE ACCELERATION */
    will-change: transform;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    image-rendering: -webkit-optimize-contrast;

    /* NEW: STRONGER, TIGHTER GLOW */
    /* We stack two shadows to make the white "pop" without being wide */
    filter: drop-shadow(0px 0px 3px rgba(255, 255, 255, 1)) drop-shadow(0px 0px 5px rgba(255, 255, 255, 1));

    transition: filter 0.3s ease;
}

/* When scrolled past hero, remove the glow */
#main-header.scrolled-past-hero #header-logo {
    filter: drop-shadow(0px 0px 0px transparent);
}

/* --- LOGO LINK CLICKABILITY --- */
#logo-link {
    pointer-events: none;
    cursor: default;
}

#main-header.scrolled-past-hero #logo-link {
    pointer-events: auto;
    cursor: pointer;
}


/* --- HERO SECTION --- */
#hero {
    position: relative;
    height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* No z-index here - let header be on top for clickability */
}

#hero h1 {
    margin: 0;
    padding: 0;
    width: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 10000;
    /* Only the image content goes above header */
    pointer-events: none;
    /* Don't block clicks on header links */
}

#hero-main-img {
    width: 71.25%;
    /* Reduced by 5% from 75% */
    height: auto;
    max-width: 1400px;
    display: block;
    margin: 0 auto;
    pointer-events: none;
    /* Don't block clicks on header links */
}

/* --- SCROLL ARROW --- */
.scroll-indicator {
    position: absolute;
    bottom: 30px;
    left: 50%;
    width: 20px;
    height: 20px;
    transform: translateX(-50%) rotate(45deg);
    animation: bounce 2s infinite;
    cursor: pointer;
    transition: transform 0.3s ease;
    z-index: 10001;
    /* Above hero image */
}

/* Create the two gradient lines of the arrow using pseudo-elements */
.scroll-indicator::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, #9694d4 0%, #74a0b6 35%, #e4e4e3 100%);
    /* Horizontal gradient - desaturated */
    clip-path: polygon(0% 100%, 100% 100%, 100% calc(100% - 2.5px), 0% calc(100% - 2.5px));
    /* Bottom border only */
}

.scroll-indicator::before {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, #9694d4 0%, #74a0b6 35%, #e4e4e3 100%);
    /* Horizontal gradient (same as horizontal line) - desaturated */
    clip-path: polygon(100% 0%, 100% 100%, calc(100% - 2.5px) 100%, calc(100% - 2.5px) 0%);
    /* Right border only */
}

.scroll-indicator:hover {
    transform: translateX(-50%) rotate(45deg) scale(1.2);
}

@keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateX(-50%) rotate(45deg) translate(0, 0);
    }

    40% {
        transform: translateX(-50%) rotate(45deg) translate(-10px, -10px);
    }

    60% {
        transform: translateX(-50%) rotate(45deg) translate(-5px, -5px);
    }
}

/* --- STANDARD SECTIONS --- */
.standard-section {
    width: 100%;
    /* Responsive padding: scales with viewport width, minimum 40px to prevent overlap */
    /* Increased top padding more to center content better when scrolling */
    padding: clamp(80px, 10vw, 130px) 0 clamp(40px, 6vw, 90px) 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.standard-section h2 {
    margin: 0;
    padding: 0;
    width: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
}

.standard-section picture {
    width: 100%;
    display: flex;
    justify-content: center;
}

.centered-visual {
    width: 70%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* --- DESKTOP 1:1 SCALING FOR SPECIFIC IMAGES --- */
/* Align widths with WE MAKE BACKPACKS image (71.25%) */
/* Align widths with WE MAKE BACKPACKS image (71.25%) */
#world-img,
#best-in-class-img {
    width: 71.25%;
    height: auto;
    max-width: 100%;
}

/* SHAPES image: 10% larger than others (71.25% * 1.1 = ~78.4%) */
#shapes-img {
    width: 78.4%;
    height: auto;
    max-width: 100%;
}

/* Customer and supplier logos: original size */
#customer-logos {
    width: 72%;
    height: auto;
    max-width: 100%;
    /* Prevent overflow */
}

#supplier-logos {
    width: 72%;
    height: auto;
    max-width: 100%;
    display: block;
}

/* Add spacing below suppliers section */
#suppliers-section {
    margin-top: -10vh;
    margin-bottom: clamp(40px, 6vw, 90px);
    /* Match spacing between other sections */
}

/* Specific padding adjustments for individual sections */
#customers-section {
    padding-top: clamp(30px, 12vw, 20px);
    /* Reduced from standard top padding */
    padding-bottom: clamp(160px, 12vw, 180px);
    /* Reduced by 40px from previous value */
}

#best-in-class-section {
    padding-top: clamp(80px, 10vw, 130px);
    /* Restored to standard top padding to match other sections */
    margin-top: -10vh;
    /* Negative margin to reduce space after 100vh split section */
}

/* --- FULL SCREEN SECTIONS --- */
.full-screen-section {
    position: relative;
    min-height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- SPLIT SECTION --- */
#split-section {
    flex-direction: row;
    justify-content: center;
    /* Changed from space-between to center */
    gap: 5%;
    /* Add controlled gap instead of space-between */
    padding: 0 5%;
    height: 100vh;
    overflow: hidden;
}

.split-left,
.split-right {
    width: 45%;
    height: 100%;
    display: flex;
    align-items: center;
}

.split-left {
    justify-content: flex-start;
    /* Align content to top to match right side */
    align-items: flex-start;
    /* Align content to the left */
    flex-direction: column;
    /* Stack image and text */
    padding-left: 8%;
    /* Align with customer logos */
    gap: 20px;
    /* Space between image and contact link */
}

/* Desktop Contact Link Positioning - No effects */
.split-left .contact-link {
    width: auto;
    height: auto;
    /* Override height: 100% from .header-link */
    display: inline-block;
    margin: 0;
    position: relative;
    /* Ensure pseudo-elements are positioned relative to this link */
    align-self: flex-start;
    text-decoration: none;
    color: black;
    font-family: 'aileron', sans-serif;
    font-size: 14px;
    letter-spacing: 1px;
}

/* Remove hover effects for contact in split section - REMOVED to restore effects */
/* .split-left .contact-link:hover { background: none; } */

/* Remove highlight gradient from contact text in split section - REMOVED to restore effects */
/* .split-left .contact-link .header-text-left { background: none !important; padding: 0 !important; } */

/* Remove underline for contact in split section - REMOVED to restore effects */
/* .split-left .contact-link::after { display: none; } */

.split-right {
    justify-content: flex-end;
    align-items: flex-start;
    /* Align to top */
}

/* SPLIT images: 1:1 scaling on desktop */
#concept-img,
#service-img {
    width: auto;
    height: auto;
    max-height: 85vh;
    max-width: 100%;
}

/* Align "From concept" image with "Vision & brief" text on desktop */
@media (min-width: 769px) {
    #concept-img {
        margin-top: 1.3vw;
    }
}

/* --- GALLERY CSS (Responsive Gaps + No Slide Animation) --- */
#gallery-section {
    width: 100%;
    padding: 8.5vw 0 5% 0;
    /* Proportional top padding (~120px at 1500px width) */
    background-color: #fffffb;
    display: flex;
    justify-content: center;
}

.masonry-container {
    width: 90%;
    max-width: 1800px;
}

.masonry-grid {
    /* Default: 5 Columns for large screens */
    column-count: 5;
    column-gap: 2vw;
    /* Proportional spacing (Doubled again from 1vw) */
    width: 100%;
}

.gallery-item {
    display: inline-block;
    /* Fixes top alignment issues in some browsers */
    vertical-align: top;
    width: 100%;
    break-inside: avoid;
    /* Prevent images from being cut */
    -webkit-column-break-inside: avoid;

    /* Match the column gap */
    margin-bottom: 2vw;
    /* Doubled again from 1vw */
    margin-top: 0;

    /* ANIMATION: FADE ONLY (No Movement) */
    opacity: 0;
    transition: opacity 1.0s ease-out;
}

/* --- RESPONSIVE ADJUSTMENTS --- */
/* No specific mobile overrides needed as vw scales down automatically */

/* Reveal Class */
.gallery-item.is-visible {
    opacity: 1;
    /* Removed transform reset */
}

/* --- ZOOM WRAPPER & LENS REMOVED --- */
.gallery-item img {
    width: 100%;
    height: auto;
    display: block;
    cursor: default;
    /* Ensure standard cursor */
}


/* --- CONTACT --- */
/* Contact section removed from main flow, style applies to link inside split section */

.contact-link {
    width: auto;
    /* Auto width for text */
    display: inline-block;
    /* Inline block to wrap text */
    text-align: left;
    /* Left align text */
    transition: transform 0.2s ease;
    cursor: pointer;
    text-decoration: none;
    /* Remove default underline */
    position: relative;
    /* For pseudo-elements */
}

.contact-link:hover {
    /* Removed transform: scale(1.05); */
    opacity: 1;
    /* Ensure full opacity */
}

/* Ensure the underline for contact link is visible by default since it's not in header */
/* Ensure the underline for contact link is visible by default since it's not in header */
/* Ensure the underline for contact link is visible by default since it's not in header */
.contact-link.header-link::after {
    opacity: 1 !important;
    /* Force visibility */
    bottom: -3px;
    /* Lowered to match header spacing */
    z-index: 1;
    /* Ensure visibility */
}

/* Remove old image styles */
.contact-link img {
    display: none;
}

#spacer {
    min-height: 50px;
}

/* --- VISIBILITY UTILITIES --- */
.mobile-only {
    display: none !important;
}

@media (max-width: 768px) {
    .desktop-only {
        display: none !important;
    }

    .mobile-only {
        display: flex !important;
        /* Restore flex for contact section */
    }
}



/* --- MOBILE --- */
@media (max-width: 768px) {
    #header-text {
        display: none;
    }

    /* Removed .header-box and .left-box overrides to keep desktop alignment (edges) */

    /* Raise scroll indicator on mobile */
    .scroll-indicator {
        bottom: 140px;
    }

    #header-icon {
        height: 25%;
    }

    #header-logo {
        height: 35%;
    }

    #hero-main-img {
        width: 90%;
    }

    .centered-visual,
    #world-img {
        width: 85%;
    }

    /* Customer logos: 72% width on mobile (increased from 60%) */
    #customer-logos {
        width: 85%;
    }

    /* Supplier logos: 72% width on mobile (increased from 60%) */
    #supplier-logos {
        width: 85%;
    }


    /* Reduce padding for standard sections on mobile */
    .standard-section {
        padding: 40px 0;
    }

    /* Reduce customers section bottom padding on mobile */
    #customers-section {
        padding-bottom: 0px;
        /* Reduced to achieve 20px gap before split section */
        margin-bottom: 70px;
    }

    /* Add 10px extra space after WORLD section on mobile */
    #world-section {
        margin-bottom: 10px;
    }

    /* SHAPES SECTION: Full Screen on Mobile */
    #shapes-section {
        min-height: 100vh;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Ensure the mobile shapes image is large enough */
    #shapes-section #shapes-img {
        width: 72%;
        /* Adjust as needed for visual balance */
        max-width: 100%;
        margin-top: -20px;
    }

    #split-section {
        height: auto;
        flex-direction: column;
        padding: 0;
        /* Remove padding, let children handle spacing */
        gap: 0px;
        margin-top: -45px;
        /* Reset to 0, spacing controlled by customers padding-bottom */
    }

    .split-left,
    .split-right {
        width: 100%;
        height: auto;
        justify-content: center;
        align-items: center;
        /* Center items on mobile */
        padding: 20px 0;
        /* Each element gets 20px top/bottom = 40px total between them */
    }

    /* Adjust split-left padding for proper spacing */
    .split-left {
        padding-top: 20px;
        /* 20px from customers */
        padding-bottom: 0;
        /* No bottom padding, service handles spacing */
    }

    /* Adjust split-right padding for proper spacing */
    .split-right {
        padding-top: 20px;
        /* 20px from concept image */
        padding-bottom: 0;
        /* No bottom padding, contact handles spacing */
    }

    #concept-img {
        width: 75%;
    }

    #service-img {
        width: 80%;
        /* Slightly increased size */
    }

    /* Reset negative margins on mobile to prevent overlap */
    #suppliers-section {
        margin-top: -20px;
    }

    /* Reduce padding for Best in Class section on mobile */
    #best-in-class-section {
        padding-top: 20px;
        /* Reduced from desktop clamp value */
        margin-top: 10px;
        /* 40px from contact section */
    }

    /* Ensure Best in Class image matches World image width (90%) */
    #best-in-class-img {
        width: 85%;
    }

    /* Contact link in split section on mobile - HIDDEN via desktop-only class */
    /* .contact-link styles here apply to the mobile-only section below */
    /* Contact link in split section on mobile - HIDDEN via desktop-only class */
    /* .contact-link styles here apply to the mobile-only section below */
    /* Contact link in split section on mobile - HIDDEN via desktop-only class */
    /* .contact-link styles here apply to the mobile-only section below */
    .contact-link {
        width: auto;
        /* Auto width for correct underline length */
        text-align: center;
        margin-top: 0;
        /* Reset margin to fix visual order */
        margin-bottom: 60px;
        display: inline-block;
        /* Ensure it wraps text */
    }

    /* Adjust underline position on mobile */
    .contact-link.header-link::after {
        bottom: -1px;
        /* Raised by 2px from -3px to -1px */
    }

    /* Adjust CONTACT section spacing on mobile */
    #contact-section {
        padding-top: 0;
        /* Spacing handled by challenges section margin */
        display: flex;
        justify-content: center;
        width: 100%;
    }

    /* CHALLENGES SECTION (Mobile Only) */
    #challenges-section {
        margin-top: -20px;
        /* Reset to positive margin for proper spacing */
        margin-bottom: 20px;
        /* 20px from contact */
        display: flex;
        justify-content: center;
        width: 100%;
    }

    #challenges-img {
        width: 72%;
        height: auto;
    }

    .masonry-container {
        width: 95%;
    }

    /* PORTFOLIO: 2 Columns on Mobile */
    .masonry-grid {
        column-count: 2;
        /* Changed from 5 to 2 */
        column-gap: 4vw;
        /* Proportional gap for mobile */
    }

    .gallery-item {
        margin-bottom: 4vw;
        /* Match column gap */
    }

    /* Fix Gallery Top Padding on Mobile */
    #gallery-section {
        /* Header is ~50px-60px. Side gap is 2.5vw.
           We want visual spacing to match side gap.
           So padding-top = HeaderHeight + SideGap */
        padding-top: calc(70px + 2.5vw);
        padding-bottom: 40px;
    }

    .magnifier-lens {
        display: none !important;
    }

    .zoom-wrapper {
        cursor: auto;
    }
}

/* --- 3D BACKPACK SECTION --- */