/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --image-border-radius: 8px;
}

body {
    font-family: 'Inter', sans-serif;
    color: #000;
    background-color: #fff;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overscroll-behavior-x: none;
    overflow-x: hidden;
}

.logo img {
    width: 48px;
    height: 48px;
}

.main-container {
    max-width: 1440px;
    /* Standard desktop width */
    margin: 0 auto;
    padding: 40px;
}

@media (min-width: 2048px) {
    .main-container {
        max-width: 1920px;
        /* Allow content to move further left on 2k+ screens */
        padding: 60px;
    }
}

/* Header */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    position: fixed;
    top: 32px;
    /* Match container top padding */
    left: 50%;
    transform: translateX(-50%);

    /* Width logic: Full viewport width minus container padding (40px * 2) */
    width: calc(100% - 80px);
    max-width: 1360px;
    /* 1440px container - 80px padding */

    z-index: 100;
    /* Ensure high z-index */
    pointer-events: none;
    /* Let clicks pass through empty space if needed, but usually header items need clicks. 
                             Actually, better not to disable pointer events on the container unless absolutely sure. 
                             Let's keep it clickable. */
}

/* Ensure children are clickable if we did use pointer-events: none, but standard header usually blocks. */
header>* {
    pointer-events: auto;
}

.logo svg {
    width: 40px;
    height: 40px;
}

nav {
    display: flex;
    gap: 32px;
}

.nav-link {
    text-decoration: none;
    color: #000;
    font-size: 16px;
    font-weight: 500;
    /* Slightly lighter for a cleaner minimal look */
    position: relative;
    display: inline-block;
    overflow: hidden;
    padding: 2px 0;
    letter-spacing: 0.02em;
}

.nav-link .nav-primary,
.nav-link .nav-secondary {
    display: flex;
    transition: transform 0.6s cubic-bezier(0.8, 0, 0.2, 1);
}

.nav-link .nav-secondary {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
}

.nav-link .nav-primary span,
.nav-link .nav-secondary span {
    display: inline-block;
    transition: transform 0.6s cubic-bezier(0.8, 0, 0.2, 1);
    transition-delay: calc(var(--i) * 0.02s);
}

.nav-link:hover .nav-primary span {
    transform: translateY(-100%);
}

.nav-link:hover .nav-secondary span {
    transform: translateY(-100%);
}


/* Hero Section */
.hero {
    width: 100%;
    height: 60vh;
    /* min-height: 800px; */
    /* Large vertical space as per design */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    position: relative;
    box-sizing: border-box;
}

.hero-content {
    max-width: 828px;
    /* Constraint from Figma node */
    display: flex;
    flex-direction: column;
    gap: 16px;
    /* Gap between text elements */
    z-index: 10;
    /* Ensure text is above potential background */
}

.intro-text {
    font-size: 24px;
    line-height: 29px;
    margin-bottom: 0px;
    /* Handled by flex gap */
    color: #000;
}

h1 {
    font-size: 56px;
    /* Increased for impact */
    line-height: 1.1;
    /* Tight line height */
    font-weight: 700;
    margin-bottom: 0px;
    /* Handled by flex gap */
    letter-spacing: -0.02em;
}

.sub-text {
    font-size: 24px;
    line-height: 29px;
    color: #000;
    /* font-weight: 500; */
    /* margin-top: 16px;
    Additional spacing if needed, or rely on gap */
}

/* Carousel Section Interaction Styles */
.carousel-interaction-wrapper {
    /* Break out of the .main-container to be full width */
    width: 99.5vw;
    margin-left: calc(50% - 50vw);
    position: relative;
    user-select: none;
    /* Prevent text selection during drag */
    overscroll-behavior-x: none;
}

.carousel-interaction-wrapper.is-dragging {
    cursor: grabbing !important;
}

.carousel-interaction-wrapper.is-dragging .carousel-item {
    cursor: grabbing !important;
}

.sticky-view-port {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    /* Optional: Ensure it doesn't overlap header/footer awkwardly if transparency is involved */
}

.carousel-container {
    display: flex;
    gap: 8px;
    padding-bottom: 0;
    /* Clear previous padding */
    width: max-content;
    /* Allow it to be purely horizontal */
    /* Remove native scroll since we rely on transform */
    overflow-x: visible;

    /* Optional: Add padding-left so the first item aligns with the grid initially 
       instead of touching the screen edge. 
       Main container padding is 40px (desktop) or 120px (design). 
       Let's use a safe padding. */
    padding-left: max(40px, calc((100vw - 1440px) / 2 + 40px));
    padding-right: 40px;
    /* Symmetry */
}

/* Link wrapper for cards */
.card-link {
    text-decoration: none;
    color: inherit;
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    gap: 8px;
}

.carousel-item {
    flex: 0 0 auto;
    width: 620px;
    position: relative;
    /* Custom Cursor: Big Bold Plus Sign (48x48, 4px thick) */
    /* cursor: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='22' y='0' width='4' height='48' fill='white'/%3E%3Crect x='0' y='22' width='48' height='4' fill='white'/%3E%3C/svg%3E") 24 24, pointer; */
    cursor: pointer;
    overflow: visible;
    /* Allow text below to show */
    display: flex;
    flex-direction: column;
    gap: 8px;
    opacity: var(--item-opacity, 0);
    transform: translateY(var(--item-y, 100px));
    transition: filter 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Focus Effect: Saturate/Desaturate other items when track is hovered */
.carousel-container:hover .carousel-item {
    filter: saturate(.2);
}

.carousel-container .carousel-item:hover {
    filter: saturate(1);
    opacity: 1;
}

/* Card image container */
.card-image {
    width: 100%;
    height: 620px;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
    will-change: transform;
}

.card-bg {
    position: absolute;
    inset: -30px;
    /* Increased bleed for parallax */
    background-size: cover;
    background-position: center;
    background-image: inherit;
    /* filter: saturate(.8); */
    transform: translateX(var(--bg-tx, 0px)) scale(1.02);
    /* Start zoomed in */
    transition: transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
    z-index: 0;
    will-change: transform, filter;
}

/* Unified Hover state */
.carousel-item:hover .card-bg {
    transform: translateX(var(--bg-tx, 0px)) scale(1.0);
    /* Zoom out to 1.0 */
    filter: saturate(1.2);
}


.card-overlay {
    position: absolute;
    inset: 0;
    background: transparent;
    /* Removed overlay as per request */
    z-index: 1;
}


.card-content {
    padding: 12px 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 8px;
    z-index: 2;
    pointer-events: none;
    color: rgba(0, 0, 0, 0.6);
}

.card-title {
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    color: #000;
    margin: 0;
}

.card-subtitle {
    font-size: 19px;
    font-weight: 400;
    line-height: 1;
    color: rgba(0, 0, 0, 0.6);
    margin: 0;
}

/* Already handled in .carousel-item:hover .card-image above */

/* Footer / Contact Block */
.footer {
    padding: 0;
    margin-bottom: 0;
    margin-top: 0;
    /* Clear previous margin */
    /* min-height: 100vh; */
    /* Full viewport height */
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Vertical center */
    align-items: center;
    /* Horizontal center */
    position: relative;
    /* background-color: #fff; */
    z-index: 10;
}

.contact-block {
    /* background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px) saturate(1.8);
    -webkit-backdrop-filter: blur(20px) saturate(1.8);
    border-radius: 20px;
    padding: 120px 40px;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.8);*/
    text-align: center;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    position: relative;
    z-index: 10;

}

.contact-block h2 {
    font-size: 36px;
    /* Display Small size */
    font-weight: 400;
    /* Regular */
    line-height: 44px;
    margin-bottom: 0;
}

.footer-links {
    display: flex;
    justify-content: center;
    gap: 4px;
    flex-wrap: wrap;
}

.pill-btn {
    text-decoration: none;
    color: #fff;
    background-color: #000;
    padding: 12px 24px;
    border-radius: 100px;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: opacity 0.2s;
}

.pill-btn:hover {
    opacity: 0.8;
}

.icon {
    font-size: 16px;
}

.topo-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}

#topoCanvas {
    position: absolute;
    /* top: -80px; */
    left: 0;
    width: 100%;
    height: 100%;
}

.topo-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0) 60%,
            rgba(255, 255, 255, 0.8) 85%,
            rgba(255, 255, 255, 1) 100%);
    z-index: 1;
    /* Above canvas */
}

/* Responsive adjustments */
@media (max-width: 768px) {

    .logo img {
        width: 40px;
        height: 40px;
    }

    .main-container {
        padding: 8px;
        /* Matches iPhone 13 mini frame padding */
    }

    /* Header */
    header {
        top: 0;
        width: 100%;
        padding: 16px 32px;
        background: linear-gradient(180deg, #ffffff, transparent) 100%;
        /* backdrop-filter: blur(8px); */
    }

    nav {
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 24px;
    }

    .nav-link {
        font-size: 16px;
    }

    /* Hero Section */
    .hero {
        min-height: auto;
        padding: 276px 24px 0 24px;
        align-items: flex-start;
        height: 66vh;
        position: relative;
        top: 40px;
    }

    h1 {
        font-size: 32px;
        /* Reduced for mobile */
        word-break: break-word;
    }

    .intro-text,
    .sub-text {
        font-size: 18px;
        line-height: 1.5;
    }

    /* Carousel */
    .carousel-item {
        width: 66vw;
        /* Responsive large card */
        max-width: 320px;
        gap: 8px;
    }

    .card-image {
        height: 60vh;
        /* max-height: 400px; */
        /* Keep it square-ish */
    }

    /* Focus Effect: Saturate/Desaturate other items when track is hovered */
    .carousel-container:hover .carousel-item {
        filter: saturate(1);
    }

    .carousel-container .carousel-item:hover {
        filter: saturate(1);
        opacity: 1;
    }

    /* Adjust content for mobile */
    .card-content {
        padding: 4px;
        gap: 4px;
    }

    .card-title {
        font-size: 18px;
        line-height: 1.2;
    }

    .card-subtitle {
        font-size: 14px;
        line-height: 1.2;
    }

    .carousel-container {
        gap: 4px;
        padding-top: 5vh;
    }

    /* Footer */
    .footer {
        margin-bottom: 40px;
    }

    .contact-block {
        padding: 64px 24px;
        /* Reduced padding */
        gap: 32px;
    }

    .contact-block h2 {
        font-size: 28px;
        line-height: 1.3;
    }

    /* On mobile, fallback to horizontal scroll might be better UX, 
       sticky scroll can be annoying on small screens. 
       But keeping requested functionality for now. */
}

/* 2k and Above Screens */
@media (min-width: 2048px) {
    h1 {
        font-size: 80px;
        line-height: 1;
    }

    .intro-text,
    .sub-text {
        font-size: 32px;
        line-height: 1.2;
    }

    .hero-content {
        max-width: 1200px;
        gap: 24px;
    }

    .hero {
        min-height: 900px;
    }

    header {
        max-width: 1800px;
        /* 1920px container - 120px padding */
    }

    .carousel-container {
        padding-left: max(60px, calc((100vw - 1920px) / 2 + 60px));
    }
}