* {
    box-sizing: border-box;
}

html {
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    min-width: 320px;
    background: var(--color-background);
    color: var(--color-text);
    font-family: var(--font-body);
    overflow-x: hidden;
}

/* ========================================
   Background
======================================== */

.background {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    background: var(--color-background);

    animation:
        hero-reveal
        3.6s
        cubic-bezier(0.16, 1, 0.3, 1)
        both;
}

@keyframes hero-reveal {
    from {
        opacity: 0;
        filter: blur(5px);
        transform: scale(1.08);
    }

    60% {
        opacity: 1;
    }

    to {
        opacity: 1;
        filter: blur(0);
        transform: scale(1);
    }
}

.background::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--color-image-overlay);
}

.background img {
    --background-position: -50vh;

    position: absolute;
    top: 0;
    left: 50%;

    width: 100vw;
    height: auto;
    min-height: 150vh;

    object-fit: cover;
    object-position: center top;

    transform:
        translate(
            -50%,
            var(--background-position)
        );

    transform-origin: center top;
    will-change: transform;
    user-select: none;
}

/* ========================================
   Main page
======================================== */

.page {
    position: relative;
    z-index: 1;
}

/* ========================================
   Full-screen sections
======================================== */

.section {
    min-height: 100svh;

    display: flex;
    align-items: center;

    padding:
        clamp(5rem, 10vh, 9rem)
        var(--page-padding);
}

/* ========================================
   Content
======================================== */

.content {
    width: min(
        100%,
        var(--content-width)
    );

    text-shadow: var(--content-shadow);

    animation:
        content-reveal
        1.4s
        cubic-bezier(0.16, 1, 0.3, 1)
        0.15s
        both;
}

@keyframes content-reveal {
    from {
        opacity: 0;
        transform: translateY(1.5rem);
        filter: blur(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

.section--right .content {
    margin-left: auto;
    margin-right: 0;

    text-align: right;
}

.section--left .content {
    margin-left: 0;
    margin-right: auto;

    text-align: left;
}

/* ========================================
   Main heading
======================================== */

h1 {
    margin: 0;

    font-family: var(--font-display);
    font-weight: 400;

    letter-spacing: -0.025em;
    line-height: 0.95;

    font-size:
        clamp(
            3rem,
            6vw,
            5.5rem
        );
}

/* ========================================
   Small heading
======================================== */

.eyebrow {
    margin: 1.5rem 0 0;

    color: var(--color-accent);

    font-size: 1rem;
    font-weight: 700;

    letter-spacing: 0.18em;
    line-height: 1.2;
}

/* ========================================
   Body text
======================================== */

.description {
    width: 100%;
    max-width: 34rem;

    margin-top: 2rem;
    margin-bottom: 0;

    color: var(--color-text-muted);

    font-size:
        clamp(
            1rem,
            1.5vw,
            1.2rem
        );

    line-height: 1.7;
}

.section--right .description {
    margin-left: auto;
    margin-right: 0;
}

.section--left .description {
    margin-left: 0;
    margin-right: auto;
}

/* ========================================
   Page transition overlay (wipe)
======================================== */

.page-transition-overlay {
    position: fixed;
    inset: 0;
    z-index: 10;

    background: var(--color-background);

    /* Hidden below the viewport by default; JS drives the transform
       so a single element can wipe in on exit and wipe out on entry. */
    transform: translateY(100%);

    pointer-events: none;
    will-change: transform;
}

/* When a page is arrived at via the in-app nav transition, the
   overlay must already be covering the screen at first paint —
   not moved into place by JS after DOMContentLoaded, which is too
   late and lets the content flash into view first. This CSS rule
   guarantees the covered state from the very first frame; JS only
   ever animates it away from here via inline style (which always
   wins over this rule, no matter the timing). */
html.is-navigating .page-transition-overlay {
    transform: translateY(0);
}

/* ========================================
   Suppress the refresh-only intro animation
   when a page is arrived at via the in-app
   nav transition instead of a real load.
======================================== */

html.is-navigating .background,
html.is-navigating .page,
html.is-navigating .content {
    animation: none;

    opacity: 1;
    filter: none;
    transform: none;
}

/* ========================================
   Scroll sentinel

   A marker pinned to the true bottom edge of
   the page's content, observed via
   IntersectionObserver in script.js — when
   it's on screen, the user has reached the
   bottom, no matter the page's length.

   Positioned absolutely (relative to .page,
   which is already position: relative) so it
   never adds to the page's own height. As a
   normal in-flow element it would add its own
   height to the scrollable area, which is
   enough on a short page to make it "just
   barely" scrollable — a jarring 1px snap
   instead of no scroll at all.
======================================== */

.scroll-sentinel {
    position: absolute;
    left: 0;
    bottom: 0;

    width: 1px;
    height: 1px;

    pointer-events: none;
}

/* ========================================
   Bottom menu
======================================== */

.bottom-menu {
    position: fixed;

    left: 0;
    right: 0;
    bottom: 0;

    z-index: 2;

    display: flex;
    justify-content: center;

    gap: clamp(1.5rem, 4vw, 3rem);

    padding: 1.25rem var(--page-padding);

    background: rgba(8, 7, 8, 0.55);

    backdrop-filter: blur(8px);

    transform: translateY(100%);

    transition: transform 0.4s ease;

    pointer-events: none;
}

.bottom-menu.is-visible {
    transform: translateY(0);
    pointer-events: auto;
}

.bottom-menu a {
    color: var(--color-text-muted);

    font-size: 1rem;
    font-weight: 700;

    letter-spacing: 0.14em;
    text-decoration: none;

    transition: color 0.2s ease;
}

.bottom-menu a:hover {
    color: var(--color-accent);
}

/* ========================================
   Mobile
======================================== */

@media (max-width: 700px) {
    .section {
        align-items: flex-end;
    }

    .section--right .content,
    .section--left .content {
        margin-left: 0;
        margin-right: 0;

        text-align: left;
    }

    .section--right .description,
    .section--left .description {
        margin-left: 0;
        margin-right: 0;
    }

    h1 {
        font-size:
            clamp(
                2.2rem,
                10vw,
                3rem
            );
    }
}

/* ========================================
   Reduced motion
======================================== */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .background img {
        transform:
            translate(
                -50%,
                -50vh
            );
    }

    .background,
    .page,
    .content {
        animation: none;

        opacity: 1;
        filter: none;
        transform: none;
    }
}

/* ========================================
   Team section
======================================== */

.team-section {
    position: relative;

    width: min(
        100%,
        76rem
    );

    margin: 0 auto;

    padding:
        8rem
        var(--page-padding)
        10rem;
}


/* ========================================
   Team heading
======================================== */

.team-heading {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(16rem, 26rem);

    gap: 4rem;

    align-items: end;

    margin-bottom: 4rem;

    text-shadow: var(--content-shadow);
}

.team-heading h2 {
    margin: 0.75rem 0 0;

    font-family: var(--font-display);
    font-size:
        clamp(
            2.5rem,
            5vw,
            4.5rem
        );

    font-weight: 400;

    letter-spacing: -0.035em;
    line-height: 0.95;
}

/* ========================================
   Team grid
======================================== */

.team-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        clamp(1.5rem, 3vw, 3rem);

    text-shadow: var(--content-shadow);
}


/* ========================================
   Person card
======================================== */

.person-card {
    position: relative;

    min-width: 0;

    overflow: hidden;

    background:
        rgba(8, 7, 8, 0.42);

    border:
        1px solid
        rgba(244, 238, 233, 0.14);

    backdrop-filter: blur(12px);

    transition:
        transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.4s ease,
        background 0.4s ease;
}

.person-card:hover {
    transform: translateY(-0.5rem);

    border-color:
        rgba(213, 155, 127, 0.45);

    background:
        rgba(8, 7, 8, 0.58);
}


/* ========================================
   Person image
======================================== */

.person-image {
    position: relative;

    aspect-ratio: 4 / 5;

    overflow: hidden;

    background: #121012;
}

.person-image::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to bottom,
            transparent 55%,
            rgba(8, 7, 8, 0.28)
        );

    pointer-events: none;
}

.person-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    filter: saturate(0.82);

    transform: scale(1.001);

    transition:
        transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),
        filter 0.6s ease;
}

.person-card:hover .person-image img {
    transform: scale(1.045);

    filter: saturate(1);
}


/* ========================================
   Person information
======================================== */

.person-info {
    display: flex;

    justify-content: space-between;
    align-items: flex-start;

    gap: 1.5rem;

    padding:
        1.35rem
        1.4rem
        1.5rem;
}

.person-info h3 {
    margin: 0;

    color: var(--color-text);

    font-family: var(--font-display);

    font-size:
        clamp(
            1.35rem,
            2vw,
            1.75rem
        );

    font-weight: 400;

    letter-spacing: -0.02em;
}

/* ========================================
   Subtle card reveal
======================================== */

.person-card {
    animation:
        person-reveal
        1s
        cubic-bezier(0.16, 1, 0.3, 1)
        both;
}

.person-card:nth-child(1) {
    animation-delay: 0.1s;
}

.person-card:nth-child(2) {
    animation-delay: 0.18s;
}

.person-card:nth-child(3) {
    animation-delay: 0.26s;
}

.person-card:nth-child(4) {
    animation-delay: 0.34s;
}

@keyframes person-reveal {
    from {
        opacity: 0;
        transform: translateY(2rem);
        filter: blur(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}


/* ========================================
   Mobile
======================================== */

@media (max-width: 700px) {

    .team-section {
        padding-top: 6rem;
        padding-bottom: 7rem;
    }

    .team-heading {
        grid-template-columns: 1fr;

        gap: 1.5rem;

        margin-bottom: 2.75rem;
    }

    .team-intro {
        max-width: 30rem;
    }

    .team-grid {
        grid-template-columns: 1fr;

        gap: 1.5rem;
    }

    .person-image {
        aspect-ratio: 4 / 5;
    }
}


/* ========================================
   Reduced motion
======================================== */

@media (prefers-reduced-motion: reduce) {

    .person-card,
    .person-image img {
        animation: none;
        transition: none;
    }

    .person-card:hover {
        transform: none;
    }

    .person-card:hover .person-image img {
        transform: none;
    }
}