/* YXE Web Studios — Portfolio | Same card gallery system as homepage Chapter 04 */
:root{--navy:#030b13;--white:#f7fbff;--sky:#42bdff;--header:76px;--text:#f7fbff}
*,*::before,*::after{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:var(--header)}
body{margin:0;overflow-x:clip;background:#02060b;color:#f7fbff;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}img{display:block;max-width:100%}
.skip-link{position:fixed;top:-100px;left:15px;z-index:11000;background:white;color:#001625;padding:12px}.skip-link:focus{top:12px}
/* ONE YXE NAVIGATION DESIGN — keeps the site's established markup */
.site-header{position:fixed;inset:0 0 auto;z-index:9000;height:var(--header);display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 clamp(20px,3.5vw,68px);background:rgba(3,11,19,.97);border-bottom:1px solid rgba(255,255,255,.09);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);color:#fff}
.site-header .brand{display:inline-flex;align-items:center;flex:0 0 auto}.site-header .brand img{width:190px;height:auto;max-height:56px;object-fit:contain}
.site-header nav{display:flex;align-items:center;gap:clamp(12px,1.65vw,30px);min-width:0}
.site-header nav>a:not(.header-cta),.site-header .nav-dropdown-toggle{font-family:inherit;font-size:10px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;line-height:1.4;white-space:nowrap;color:#e9f1f8;transition:color .2s}
.site-header nav>a:hover,.site-header .nav-dropdown-toggle:hover,.site-header [aria-current="page"]{color:var(--sky)!important}
.site-header .header-cta{display:inline-flex;align-items:center;gap:17px;border:1px solid rgba(255,255,255,.38);border-radius:50px;padding:13px 18px;font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;transition:background .25s,color .25s}
.site-header .header-cta:hover{background:#fff;color:var(--navy)}
.nav-dropdown{position:relative;display:flex;align-items:center}
.nav-dropdown-toggle{display:inline-flex;align-items:center;gap:8px;padding:0;margin:0;border:0;background:none;appearance:none}
.dropdown-arrow{font-size:9px;letter-spacing:0;transition:transform .3s}
.nav-dropdown:hover .dropdown-arrow,.nav-dropdown.is-open .dropdown-arrow{transform:rotate(180deg)}
.nav-dropdown-menu{position:absolute;top:calc(100% + 19px);left:50%;width:250px;padding:12px;border:1px solid rgba(255,255,255,.1);border-radius:12px;background:rgba(5,12,20,.97);box-shadow:0 20px 55px rgba(0,0,0,.3);opacity:0;visibility:hidden;transform:translate(-50%,10px);transition:opacity .3s,transform .3s,visibility .3s;z-index:100}
.nav-dropdown-menu::before{content:"";position:absolute;left:0;right:0;top:-21px;height:21px}
.site-header .nav-dropdown-menu a{display:block;padding:12px 14px;color:#e9f1f8;font-size:12px;text-decoration:none;letter-spacing:0;text-transform:none;border-radius:7px;white-space:normal}
.site-header .nav-dropdown-menu a:hover,.site-header .nav-dropdown-menu a:focus-visible{background:rgba(0,166,251,.12);color:#00a6fb}
.nav-dropdown:hover .nav-dropdown-menu,.nav-dropdown:focus-within .nav-dropdown-menu,.nav-dropdown.is-open .nav-dropdown-menu{opacity:1;visibility:visible;transform:translate(-50%,0)}
.mobile-menu-toggle{display:none}


/* Original index.php Chapter 04 portfolio visual selectors */
.portfolio-chapter {

    position: relative;

    height: 560vh;

    background:
        #02060b;

    color:
        var(--text);

}
/* =========================================================
   YXE WEB STUDIOS
   MOBILE NAVIGATION
========================================================= */

/* Hide mobile elements on desktop */

.site-header .mobile-menu-toggle,
.site-header .mobile-navigation {
    display: none;
}


/* =========================================================
   MOBILE BREAKPOINT
========================================================= */

@media (max-width: 900px) {

    /* HEADER */

    .site-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;

        z-index: 9999;

        display: flex;
        align-items: center;
        justify-content: space-between;

        min-height: 76px;
        padding: 0 20px;

        background: rgba(4, 9, 15, 0.96);
        border-bottom: 1px solid rgba(255,255,255,0.08);
    }

    /* LOGO */

    .site-header .brand {
        position: relative;
        z-index: 10002;

        display: flex;
        align-items: center;
        flex-shrink: 0;
    }

    .site-header .brand img {
        display: block;
        width: 150px;
        height: auto;
        max-width: 100%;
    }

    /* HIDE DESKTOP NAVIGATION */

    .site-header .desktop-nav {
        display: none !important;
    }


    /* =====================================================
       HAMBURGER BUTTON
    ====================================================== */

    .site-header .mobile-menu-toggle {
        position: relative;
        z-index: 10002;

        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;

        gap: 6px;

        width: 46px;
        height: 46px;

        padding: 0;

        background: rgba(255,255,255,0.04);
        border: 1px solid rgba(255,255,255,0.15);
        border-radius: 4px;

        cursor: pointer;
    }

    .mobile-menu-toggle span {
        display: block;

        width: 22px;
        height: 2px;

        background: #ffffff;

        transition:
            transform 0.3s ease,
            opacity 0.3s ease;
    }

    /* HAMBURGER TO X */

    .mobile-menu-toggle.is-active span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .mobile-menu-toggle.is-active span:nth-child(2) {
        opacity: 0;
    }

    .mobile-menu-toggle.is-active span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }


    /* =====================================================
       FULL-SCREEN MOBILE MENU
    ====================================================== */

    .site-header .mobile-navigation {
        position: fixed;

        top: 76px;
        left: 0;
        right: 0;
        bottom: 0;

        z-index: 10000;

        display: block;

        background: #04090f;

        overflow-y: auto;
        overscroll-behavior: contain;

        opacity: 0;
        visibility: hidden;
        pointer-events: none;

        transform: translateY(-12px);

        transition:
            opacity 0.3s ease,
            visibility 0.3s ease,
            transform 0.3s ease;
    }

    .site-header .mobile-navigation.is-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
    }

    .mobile-navigation-inner {
        width: min(600px, calc(100% - 40px));
        margin: 0 auto;

        padding: 35px 0 60px;
    }

    .mobile-navigation-label {
        display: block;

        margin-bottom: 24px;

        color: #00bbef;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.18em;
    }


    /* =====================================================
       MAIN MOBILE LINKS
    ====================================================== */

    .mobile-nav-link {
        display: flex;
        align-items: center;
        gap: 20px;

        width: 100%;
        padding: 14px 0;

        border-bottom: 1px solid rgba(255,255,255,0.12);

        color: #ffffff;

        font-family: 'Barlow Condensed', sans-serif;
        font-size: clamp(30px, 7vw, 42px);
        font-weight: 700;
        line-height: 1.1;

        text-decoration: none;
        text-transform: uppercase;
    }

    .mobile-nav-link > span {
        color: #00bbef;

        font-family: Arial, sans-serif;
        font-size: 11px;
        font-weight: 700;
    }

    .mobile-nav-link b {
        margin-left: auto;
        color: #00bbef;
        font-size: 22px;
    }


    /* =====================================================
       MOBILE SERVICES
    ====================================================== */

    .mobile-nav-services {
        display: flex;
        flex-direction: column;

        padding: 22px 0;

        border-bottom: 1px solid rgba(255,255,255,0.12);
    }

    .mobile-nav-section {
        margin-bottom: 14px;

        color: #00bbef;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.15em;
    }

    .mobile-nav-services a {
        display: block;

        padding: 9px 0 9px 22px;

        color: #d1d9df;

        font-size: 15px;
        font-weight: 500;

        text-decoration: none;

        border-left: 1px solid rgba(0,187,239,0.25);
    }

    .mobile-nav-services a:hover {
        color: #00bbef;
        border-left-color: #00bbef;
    }


    /* =====================================================
       MOBILE CTA
    ====================================================== */

    .mobile-nav-cta {
        display: flex;
        align-items: center;
        justify-content: space-between;

        margin-top: 30px;
        padding: 18px 22px;

        background: #00bbef;
        color: #041018;

        font-size: 12px;
        font-weight: 800;
        letter-spacing: 0.1em;

        text-decoration: none;
    }

    .mobile-nav-cta span {
        font-size: 22px;
    }

    .mobile-navigation-footer {
        margin-top: 35px;

        color: #64727c;
        font-size: 10px;
        letter-spacing: 0.14em;
    }

}

/* PREVENT BACKGROUND SCROLLING */

body.mobile-menu-open {
    overflow: hidden;
}

/* REDUCED MOTION */

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

    .mobile-menu-toggle span,
    .mobile-navigation {
        transition: none !important;
    }

}

/* ================================================================
   STICKY SCENE
   ================================================================ */

.portfolio-scene {

    position: sticky;

    top: 0;

    width: 100%;

    height: 100vh;

    min-height: 700px;

    overflow: hidden;

    background:
        #02060b;

}


/* ================================================================
   SUBTLE BACKGROUND
   ================================================================ */

.portfolio-scene::before {

    content: "";

    position: absolute;

    inset: 0;

    z-index: 0;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 72% 52%,
            rgba(8,125,255,.075),
            transparent 42%
        ),
        linear-gradient(
            180deg,
            #02060b 0%,
            #03080e 100%
        );

}


/* ================================================================
   PORTFOLIO INTRO
   LEFT SIDE
   ================================================================ */

.portfolio-intro {

    position: absolute;

    z-index: 30;

    left: clamp(
        50px,
        7vw,
        125px
    );

    top: 50%;

    width: clamp(
        300px,
        23vw,
        420px
    );

    transform:
        translateY(-50%);

}


/* ================================================================
   EYEBROW
   ================================================================ */

.portfolio-intro .eyebrow {

    display: block;

    margin-bottom:
        28px;

    font-size:
        11px;

    line-height:
        1;

    font-weight:
        700;

    letter-spacing:
        .22em;

    text-transform:
        uppercase;

    color:
        #087dff;

}


/* ================================================================
   INTRO TITLE
   ================================================================ */

.portfolio-intro h2 {

    margin:
        0;

    font-size:
        clamp(
            64px,
            7vw,
            125px
        );

    line-height:
        .82;

    font-weight:
        850;

    letter-spacing:
        -.075em;

    color:
        #eef7ff;

}


/* BLUE WORD
   ================================================================ */

.portfolio-intro h2 em {

    font-style:
        normal;

    color:
        #087dff;

}


/* ================================================================
   INTRO PARAGRAPH
   ================================================================ */

.portfolio-intro p {

    margin:
        38px 0 0;

    max-width:
        360px;

    font-size:
        15px;

    line-height:
        1.7;

    font-weight:
        400;

    color:
        #71869a;

}


/* ================================================================
   PROJECT PANEL
   ================================================================ */

/*
   IMPORTANT:

   The JavaScript moves these panels using:

   translate3d(xvw, 0, 0)

   So the panel itself is positioned at the center of
   the gallery and JS handles the horizontal movement.
*/

.project-panel {

    position: relative;

    z-index: 10;

    left: 50%;

    top: 50%;

    width:
        clamp(
            560px,
            36.5vw,
            680px
        );

    transform:
        translate3d(
            105vw,
            0,
            0
        );

    opacity:
        0;

    pointer-events:
        none;

    will-change:
        transform,
        opacity;

}
/* ================================================================
   PORTFOLIO — CLICKABLE PROJECT LINKS
   ================================================================ */

/* Project panels must allow interaction */
.portfolio-scene .project-panel {
    pointer-events: auto;
}

/* Anything decorative should NOT block clicks */
.portfolio-scene .project-image-shade {
    pointer-events: none;
}

/* Project copy must sit above the image */
.portfolio-scene .project-copy {
    position: relative;
    z-index: 20;
    pointer-events: auto;
}

/* Project links */
.portfolio-scene .project-copy a {
    position: relative;
    z-index: 30;
    pointer-events: auto;
    cursor: pointer;
}

/* Make the entire project card capable of receiving interaction */
.portfolio-scene .project-panel a {
    pointer-events: auto;
    cursor: pointer;
}

/* Don't let decorative pseudo-elements block links */
.portfolio-scene .project-panel::before,
.portfolio-scene .project-panel::after {
    pointer-events: none;
}

/* Image itself should never steal the click */
.portfolio-scene .project-image-wrap,
.portfolio-scene .project-image-wrap img {
    pointer-events: none;
}

/* ================================================================
   ACTIVE / VISIBLE PROJECT
   ================================================================ */

.project-panel.is-active {

    pointer-events:
        auto;

}


/* ================================================================
   PROJECT IMAGE
   ================================================================ */

.project-image-wrap {

    position: relative;

    width: 100%;

    height:
        clamp(
            400px,
            57vh,
            510px
        );

    overflow: hidden;

    border-radius:
        14px;

    background:
        #07101a;

    border:
        1px solid
        rgba(
            139,
            199,
            240,
            .14
        );

    box-shadow:
        0 30px 90px
        rgba(
            0,
            0,
            0,
            .38
        );

}


/* ================================================================
   PROJECT IMAGE
   ================================================================ */

.project-image-wrap img {

    position: absolute;

    inset: -3%;

    width:
        106%;

    height:
        106%;

    display:
        block;

    object-fit:
        absolute;

    object-position:
        center;

    transform:
        translate3d(
            0,
            0,
            0
        )
        scale(
            1.045
        );

    will-change:
        transform;

    filter:
        saturate(.92)
        contrast(1.03);

}


/* ================================================================
   IMAGE SHADE
   ================================================================ */

.project-image-shade {

    position: absolute;

    inset: 0;

    z-index: 2;

    pointer-events:
        none;

    background:
        linear-gradient(
            180deg,
            rgba(
                2,
                6,
                11,
                .02
            )
            45%,

            rgba(
                2,
                6,
                11,
                .28
            )
            100%
        );

}


/* ================================================================
   PROJECT META
   ================================================================ */

.project-meta {

    display:
        flex;

    align-items:
        center;

    gap:
        18px;

    margin-top:
        20px;

    min-height:
        20px;

    opacity:
        0;

}


/* ================================================================
   PROJECT NUMBER
   ================================================================ */

.project-number {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        34px;

    height:
        34px;

    border:
        1px solid
        rgba(
            139,
            199,
            240,
            .18
        );

    border-radius:
        50%;

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        .04em;

    color:
        #9aabbc;

}


/* ================================================================
   PROJECT CATEGORY
   ================================================================ */

.project-category {

    font-size:
        10px;

    line-height:
        1;

    font-weight:
        700;

    letter-spacing:
        .18em;

    color:
        #087dff;

}


/* ================================================================
   PROJECT COPY
   ================================================================ */

.project-copy {

    position:
        relative;

    margin-top:
        13px;

    max-width:
        620px;

    opacity:
        0;

    will-change:
        transform,
        opacity;

}


/* ================================================================
   PROJECT TITLE
   ================================================================ */

.project-copy h3 {

    margin:
        0;

    font-size:
        clamp(
            34px,
            3vw,
            52px
        );

    line-height:
        .92;

    font-weight:
        850;

    letter-spacing:
        -.055em;

    color:
        #eef7ff;

}


/* ================================================================
   PROJECT DESCRIPTION
   ================================================================ */

.project-copy p {

    margin:
        14px 0 0;

    max-width:
        500px;

    font-size:
        14px;

    line-height:
        1.6;

    color:
        #71869a;

}


/* ================================================================
   PROJECT COUNTER
   RIGHT SIDE
   ================================================================ */

.project-counter {

    position:
        fixed;

    z-index:
        40;

    right:
        clamp(
            45px,
            7vw,
            120px
        );

    top:
        50%;

    transform:
        translateY(-50%);

    display:
        flex;

    align-items:
        baseline;

    gap:
        5px;

    pointer-events:
        none;

}


/* ================================================================
   CURRENT NUMBER
   ================================================================ */

.project-counter strong {

    font-size:
        clamp(
            32px,
            3vw,
            52px
        );

    line-height:
        1;

    font-weight:
        800;

    letter-spacing:
        -.06em;

    color:
        #eef7ff;

}


/* ================================================================
   TOTAL
   ================================================================ */

.project-counter span {

    font-size:
        11px;

    font-weight:
        600;

    letter-spacing:
        .08em;

    color:
        #637588;

}


/* ================================================================
   PORTFOLIO PROGRESS
   ================================================================ */

.portfolio-progress {

    position:
        absolute;

    z-index:
        50;

    left:
        6vw;

    right:
        6vw;

    bottom:
        28px;

    height:
        1px;

    background:
        rgba(
            139,
            199,
            240,
            .12
        );

    overflow:
        hidden;

}


/* ================================================================
   PROGRESS FILL
   ================================================================ */

.portfolio-progress span {

    display:
        block;

    width:
        0%;

    height:
        100%;

    background:
        #087dff;

    box-shadow:
        0 0 14px
        rgba(
            8,
            125,
            255,
            .55
        );

    will-change:
        width;

}


/* ================================================================
   SCROLL INSTRUCTION
   ================================================================ */

.portfolio-instruction {

    position:
        absolute;

    z-index:
        50;

    right:
        6vw;

    bottom:
        42px;

    display:
        flex;

    align-items:
        center;

    gap:
        14px;

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        .18em;

    color:
        #627487;

}


/* ================================================================
   SCROLL LABEL
   ================================================================ */

.portfolio-instruction span {

    color:
        #8a9bad;

}


/* ================================================================
   SCROLL LINE
   ================================================================ */

.portfolio-instruction i {

    display:
        block;

    width:
        42px;

    height:
        1px;

    background:
        rgba(
            139,
            199,
            240,
            .25
        );

}


/* ================================================================
   EXPLORE TEXT
   ================================================================ */

.portfolio-instruction b {

    font-weight:
        700;

    color:
        #087dff;

}


/* ================================================================
   DESKTOP POSITIONING
   ================================================================ */


/* Three independent scroll-driven galleries: Web Design, Branding, Applications */
.portfolio-chapter{height:auto;background:#02060b;isolation:isolate}
.category-gallery{height:var(--gallery-height,520vh);position:relative;background:#02060b}
.category-gallery--branding{background:#05111c}.category-gallery--applications{background:#030b16}
.portfolio-scene{position:sticky;top:var(--header);height:calc(100svh - var(--header));min-height:0;overflow:hidden}
.category-gallery .portfolio-intro{z-index:30;pointer-events:none}
.category-gallery .portfolio-intro p{color:#a9c0d4}
.portfolio-intro .eyebrow{color:#4ebdff}
.category-eyebrow{font-size:10px;letter-spacing:.2em;color:#75bcf0;font-weight:700}
.category-count{display:block;margin-top:18px;font-size:11px;letter-spacing:.2em;color:#86a6c1}
.project-panel{position:absolute;top:50%;left:0;opacity:1;visibility:visible;pointer-events:auto;transition:none}
.portfolio-scene .project-panel{pointer-events:auto}
.project-image-wrap{position:relative;overflow:hidden}
.project-image-wrap img{width:100%;height:100%;object-fit:absolute;display:block}
.project-live-link{display:inline-flex;gap:15px;align-items:center;margin-top:14px;padding-bottom:7px;border-bottom:1px solid rgba(90,194,255,.6);font-size:10px;letter-spacing:.13em;text-transform:uppercase}
.project-live-link:hover{color:#62caff}
.portfolio-progress{z-index:60}.portfolio-instruction{z-index:60}
.gallery-topline{position:absolute;top:24px;left:clamp(24px,7vw,125px);right:clamp(24px,7vw,125px);display:flex;justify-content:space-between;font-size:10px;letter-spacing:.18em;color:#8eacbf;z-index:65}
.gallery-fallback{display:none}
.portfolio-intro h2{font-size:clamp(57px,7vw,120px)}
.portfolio-intro p{font-size:15px}
.portfolio-end{padding:100px max(24px,8vw);display:flex;justify-content:space-between;gap:30px;align-items:center;background:#e9f4fa;color:#071c2d}
.portfolio-end h2{font-size:clamp(42px,5vw,85px);line-height:1;letter-spacing:-.07em;margin:0}
.portfolio-end a{padding:18px 26px;border:1px solid #061b2d;border-radius:50px;white-space:nowrap;font-size:12px;font-weight:700}
.portfolio-end a:hover{background:#063553;color:#fff}
@media(max-width:1150px){.site-header nav{gap:12px}.site-header nav>a:not(.header-cta),.site-header .nav-dropdown-toggle{font-size:9px;letter-spacing:.1em}.site-header .header-cta{gap:7px;padding:12px;font-size:9px}.site-header .brand img{width:155px}}
@media(max-width:850px){:root{--header:72px}.mobile-menu-toggle{display:flex;width:46px;height:42px;align-items:center;justify-content:center;gap:5px;flex-direction:column;background:transparent;border:1px solid rgba(255,255,255,.25);border-radius:5px;color:#fff}.mobile-menu-toggle span{display:block;width:21px;height:1.5px;background:currentColor}.site-header nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;max-height:calc(100dvh - var(--header));overflow:auto;padding:15px 22px 26px;background:#05111e;border-bottom:1px solid rgba(255,255,255,.15)}.site-header nav.is-open{display:flex}.site-header nav>a:not(.header-cta),.site-header .nav-dropdown-toggle{display:flex;width:100%;font-size:12px;letter-spacing:.14em;padding:15px 0}.nav-dropdown{display:block;width:100%}.nav-dropdown-toggle{justify-content:space-between}.site-header .nav-dropdown-menu{position:static;width:100%;display:none;visibility:visible;opacity:1;transform:none;border:0;box-shadow:none;background:#102536;margin:0 0 10px;padding:7px}.nav-dropdown-menu::before{display:none}.site-header .nav-dropdown:not(.is-open) .nav-dropdown-menu{display:none}.site-header .nav-dropdown.is-open .nav-dropdown-menu{display:block;transform:none}.site-header .header-cta{justify-content:space-between;margin-top:10px}.portfolio-intro{left:5vw;top:22%;transform:none;width:90vw}.portfolio-intro h2{font-size:clamp(42px,9vw,70px)}.portfolio-intro p{max-width:360px;margin-top:15px}.gallery-topline{left:6vw;right:6vw}.portfolio-end{flex-direction:column;align-items:flex-start}}
@media(max-width:550px){.portfolio-intro{top:10%;left:6vw;width:88vw}.portfolio-intro h2{font-size:clamp(37px,11vw,60px)}.portfolio-intro p{font-size:13px}.portfolio-scene{height:calc(100svh - var(--header))}.project-panel .project-copy h3{font-size:clamp(22px,6vw,36px)}.project-panel .project-copy p{font-size:12px;line-height:1.45}.project-image-wrap{height:43%}.project-panel .project-counter{display:none}.portfolio-instruction{display:none}.category-gallery{height:var(--gallery-height,410vh)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.project-panel,.project-image-wrap img{transition:none!important}}

/* ================================================================
   V3 FIX — COMPLETE PROJECT INFORMATION IS VISIBLE
   The homepage's Chapter 04 CSS intentionally starts .project-meta and
   .project-copy at opacity:0, expecting the homepage's JS to reveal them.
   The standalone portfolio JS only animates cards horizontally, so this
   page must explicitly show those elements.
   ================================================================ */
.category-gallery .project-panel .project-meta,
.category-gallery .project-panel .project-copy {
    opacity: 1;
    visibility: visible;
    transform: none;
}

/* Keep image, project name, details and website link in one card. */
.category-gallery .project-panel {
    display: flex;
    flex-direction: column;
    height: min(76vh, 690px);
    max-height: calc(100svh - var(--header) - 76px);
    min-height: 0;
    z-index: 12;
    padding: 0;
    overflow: visible;
}
.category-gallery .project-panel .project-image-wrap {
    width: 100%;
    height: auto;
    flex: 1 1 auto;
    min-height: 0;
    border-radius: 12px;
}
.category-gallery .project-panel .project-image-wrap img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: absolute;
}
.category-gallery .project-panel .project-meta {
    flex: 0 0 auto;
    display: flex;
    margin-top: 11px;
    min-height: 28px;
    gap: 12px;
}
.category-gallery .project-panel .project-number {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    font-size: 9px;
}
.category-gallery .project-panel .project-copy {
    flex: 0 0 auto;
    margin-top: 9px;
    width: 100%;
    max-width: 100%;
    padding: 0 1px 4px;
}
.category-gallery .project-panel .project-copy h3 {
    margin: 0;
    font-size: clamp(24px, 2.45vw, 40px);
    line-height: 1.03;
    letter-spacing: -.055em;
}
.category-gallery .project-panel .project-copy p {
    margin: 8px 0 0;
    max-width: 100%;
    font-size: clamp(12px, .9vw, 14px);
    line-height: 1.48;
    color: #b3c5d5;
}
.category-gallery .project-panel .project-live-link {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
    padding: 5px 0 7px;
    border-bottom: 1px solid #42bdff;
    color: #cdeeff;
    font-weight: 750;
    line-height: 1.2;
    letter-spacing: .13em;
    text-transform: uppercase;
    pointer-events: auto;
}
.category-gallery .project-panel .project-live-link:hover,
.category-gallery .project-panel .project-live-link:focus-visible {
    color: white;
    border-color: white;
}
.category-gallery .project-panel .project-counter {
    display: none; /* card already includes number and category; prevent overlap */
}
.category-gallery .project-panel .project-placeholder {
    height: 100%;
}
/* Bring nearest card in front and allow only that one to catch links. */
.category-gallery .project-panel { pointer-events: none; }
.category-gallery .project-panel.is-active { pointer-events: auto; z-index: 25; }
.category-gallery .project-panel:not(.is-active) a { pointer-events: none; }
@media (max-width: 850px) {
    .category-gallery .project-panel {
        height: min(61vh, 590px);
        max-height: calc(100svh - var(--header) - 130px);
    }
    .category-gallery .project-panel .project-copy h3 {font-size: clamp(22px, 5vw, 30px)}
    .category-gallery .project-panel .project-copy p {font-size: 12px;line-height: 1.35}
    .category-gallery .project-panel .project-live-link {font-size: 9px;margin-top: 8px}
}
@media (max-width: 550px) {
    .category-gallery .portfolio-intro {top: 7%;}
    .category-gallery .project-panel {
        height: min(60vh, 530px);
        max-height: calc(100svh - var(--header) - 145px);
    }
    .category-gallery .project-panel .project-image-wrap {
        height: auto;
        min-height: 90px;
    }
    .category-gallery .project-panel .project-meta {margin-top: 7px;min-height: 24px}
    .category-gallery .project-panel .project-number {width: 24px;height: 24px;flex-basis: 24px}
    .category-gallery .project-panel .project-copy {margin-top: 6px}
    .category-gallery .project-panel .project-copy h3 {font-size: clamp(19px, 5vw, 25px)}
    .category-gallery .project-panel .project-copy p {margin-top: 5px;font-size: 11px;line-height: 1.3}
    .category-gallery .project-panel .project-live-link {font-size: 9px}
}