/* =========================================================
   ADMITH LEGACY
   PROJECTS PAGE — COMPLETE PAGE STYLESHEET
========================================================= */


/* =========================================================
   01. PAGE FOUNDATION
========================================================= */

.projects-page {

    position: relative;

    width: 100%;

    overflow: hidden;

    background: #ffffff;

    color: #111111;

}


/*
Prevent accidental horizontal overflow
caused by decorative elements or wide grids.
*/

.projects-page * {

    box-sizing: border-box;

}


.projects-page img {

    display: block;

    max-width: 100%;

}


/* =========================================================
   02. PROJECTS HERO
========================================================= */

.projects-hero {

    position: relative;

    display: flex;

    align-items: center;

    min-height: 680px;

    padding-top: 130px;

    padding-bottom: 96px;

    overflow: hidden;

    background:

        radial-gradient(
            circle at 10% 20%,
            rgba(
                91,
                183,
                128,
                0.10
            ) 0%,

            transparent 35%
        ),

        radial-gradient(
            circle at 90% 75%,
            rgba(
                150,
                20,
                20,
                0.06
            ) 0%,

            transparent 35%
        ),

        linear-gradient(
            135deg,
            #f8fbf9 0%,
            #ffffff 50%,
            #fbf8f8 100%
        );

}


/*
Subtle technical grid.
*/

.projects-hero-grid {

    position: absolute;

    inset: 0;

    z-index: 0;

    pointer-events: none;

    opacity: 0.45;

    background-image:

        linear-gradient(
            rgba(
                0,
                0,
                0,
                0.035
            ) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(
                0,
                0,
                0,
                0.035
            ) 1px,
            transparent 1px
        );

    background-size:
        72px 72px;

    mask-image:
        linear-gradient(
            to bottom,
            black 0%,
            rgba(
                0,
                0,
                0,
                0.7
            ) 55%,
            transparent 100%
        );

}


/*
Large decorative glow.
*/

.projects-hero::before {

    content: "";

    position: absolute;

    top: -240px;

    right: -160px;

    width: 600px;

    height: 600px;

    border-radius: 50%;

    background:

        radial-gradient(
            circle,
            rgba(
                91,
                183,
                128,
                0.13
            ) 0%,

            rgba(
                91,
                183,
                128,
                0.04
            ) 45%,

            transparent 72%
        );

    filter: blur(20px);

    pointer-events: none;

}


/*
Second decorative glow.
*/

.projects-hero::after {

    content: "";

    position: absolute;

    bottom: -300px;

    left: -200px;

    width: 600px;

    height: 600px;

    border-radius: 50%;

    background:

        radial-gradient(
            circle,
            rgba(
                150,
                20,
                20,
                0.07
            ) 0%,

            transparent 70%
        );

    filter: blur(25px);

    pointer-events: none;

}


/* =========================================================
   HERO CONTENT
========================================================= */

.projects-hero
.container {

    position: relative;

    z-index: 2;

}


.projects-hero-content {

    width: 100%;

    max-width: 980px;

}


/* =========================================================
   HERO LABEL
========================================================= */

.projects-label {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 28px;

    color: #5bb780;

    font-family:
        "DM Sans",
        sans-serif;

    font-size: 0.75rem;

    font-weight: 700;

    letter-spacing: 0.18em;

    line-height: 1;

    text-transform: uppercase;

}


.projects-label::before {

    content: "";

    width: 36px;

    height: 2px;

    background: #5bb780;

}


/* =========================================================
   HERO HEADING
========================================================= */

.projects-hero h1 {

    max-width: 950px;

    margin: 0;

    color: #111111;

    font-family:
        "Manrope",
        sans-serif;

    font-size: clamp(
        3.5rem,
        7vw,
        7.5rem
    );

    font-weight: 700;

    letter-spacing: -0.055em;

    line-height: 0.98;

}


.projects-hero h1 span {

    display: inline-block;

    color: #5bb780;

}


/* =========================================================
   HERO DESCRIPTION
========================================================= */

.projects-hero p {

    max-width: 680px;

    margin-top: 34px;

    margin-bottom: 0;

    color: #5f6b7a;

    font-family:
        "DM Sans",
        sans-serif;

    font-size: 1.08rem;

    line-height: 1.75;

}


/* =========================================================
   HERO BUTTONS
========================================================= */

.projects-hero-actions {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 16px;

    margin-top: 38px;

}


.projects-hero-actions
.btn {

    min-height: 54px;

    padding:
        15px
        26px;

}


/* =========================================================
   03. PORTFOLIO INTRODUCTION
========================================================= */

.projects-introduction {

    position: relative;

    padding-top: 120px;

    padding-bottom: 110px;

    background: #ffffff;

}


.projects-intro-grid {

    display: grid;

    grid-template-columns:
        minmax(
            0,
            1.05fr
        )
        minmax(
            0,
            0.95fr
        );

    gap: 100px;

    align-items: start;

}


/* =========================================================
   INTRO HEADING
========================================================= */

.projects-intro-heading {

    position: sticky;

    top: 120px;

}


.projects-intro-heading
.section-label {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 24px;

    color: #5bb780;

    font-family:
        "DM Sans",
        sans-serif;

    font-size: 0.75rem;

    font-weight: 700;

    letter-spacing: 0.16em;

    text-transform: uppercase;

}


.projects-intro-heading
.section-label::before {

    content: "";

    width: 30px;

    height: 2px;

    background: #5bb780;

}


.projects-intro-heading h2 {

    max-width: 720px;

    margin: 0;

    color: #111111;

    font-family:
        "Manrope",
        sans-serif;

    font-size: clamp(
        2.8rem,
        5vw,
        5.5rem
    );

    font-weight: 700;

    letter-spacing: -0.055em;

    line-height: 1.02;

}


/* =========================================================
   INTRO CONTENT
========================================================= */

.projects-intro-content {

    padding-top: 12px;

}


.projects-intro-content p {

    max-width: 620px;

    margin: 0 0 34px;

    color: #5f6b7a;

    font-family:
        "DM Sans",
        sans-serif;

    font-size: 1rem;

    line-height: 1.85;

}


.projects-intro-content p:last-child {

    margin-bottom: 0;

}


/* =========================================================
   04. PORTFOLIO PROJECTS
========================================================= */

.portfolio-project {

    position: relative;

    padding-top: 120px;

    padding-bottom: 120px;

}


/*
Subtle alternating backgrounds.
*/

.portfolio-nnobae {

    background:

        linear-gradient(
            135deg,
            #f8fbf9 0%,
            #ffffff 60%
        );

}


.portfolio-africartmall {

    background: #ffffff;

}


.portfolio-yensom {

    background:

        linear-gradient(
            135deg,
            #ffffff 0%,
            #fbf8f8 100%
        );

}


/* =========================================================
   PROJECT GRID
========================================================= */

.portfolio-project-grid {

    display: grid;

    grid-template-columns:
        minmax(
            0,
            1.1fr
        )
        minmax(
            0,
            0.9fr
        );

    gap: 100px;

    align-items: center;

}


/*
Reverse the visual order.

HTML remains unchanged.

This gives:

Image | Content

Content | Image

Image | Content
*/

.portfolio-project-grid.reverse
.portfolio-project-media {

    order: 2;

}


.portfolio-project-grid.reverse
.portfolio-project-content {

    order: 1;

}


/* =========================================================
   PROJECT MEDIA
========================================================= */

.portfolio-project-media {

    position: relative;

    width: 100%;

}


.portfolio-image-frame {

    position: relative;

    width: 100%;

    min-height: 620px;

    overflow: hidden;

    border-radius: 28px;

    background: #111111;

    box-shadow:

        0 24px 70px
        rgba(
            0,
            0,
            0,
            0.12
        );

}


.portfolio-image-frame::before {

    content: "";

    position: absolute;

    inset: 0;

    z-index: 1;

    pointer-events: none;

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

    border-radius: inherit;

}


.portfolio-image-frame img {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center;

    transition:

        transform
        0.8s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );

}


/* =========================================================
   IMAGE HOVER
========================================================= */

.portfolio-image-frame:hover img {

    transform:
        scale(
            1.045
        );

}


/* =========================================================
   IMAGE OVERLAY
========================================================= */

.portfolio-image-overlay {

    position: absolute;

    left: 0;

    right: 0;

    bottom: 0;

    z-index: 2;

    display: flex;

    align-items: flex-end;

    min-height: 190px;

    padding: 32px;

    background:

        linear-gradient(
            to top,
            rgba(
                0,
                0,
                0,
                0.78
            ) 0%,

            rgba(
                0,
                0,
                0,
                0.35
            ) 55%,

            transparent 100%
        );

    pointer-events: none;

}


.portfolio-image-overlay span {

    display: inline-flex;

    align-items: center;

    min-height: 36px;

    padding:
        9px
        16px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.20
        );

    border-radius: 999px;

    background:
        rgba(
            255,
            255,
            255,
            0.10
        );

    backdrop-filter:
        blur(10px);

    color: #ffffff;

    font-family:
        "DM Sans",
        sans-serif;

    font-size: 0.72rem;

    font-weight: 600;

    letter-spacing: 0.08em;

    text-transform: uppercase;

}


/* =========================================================
   05. PROJECT CONTENT
========================================================= */

.portfolio-project-content {

    width: 100%;

    max-width: 620px;

}


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

.project-meta {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 18px;

    margin-bottom: 34px;

}


.project-index {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 42px;

    height: 42px;

    border-radius: 50%;

    background:
        rgba(
            91,
            183,
            128,
            0.10
        );

    color: #5bb780;

    font-family:
        "DM Sans",
        sans-serif;

    font-size: 0.8rem;

    font-weight: 700;

}


.project-category {

    color: #5f6b7a;

    font-family:
        "DM Sans",
        sans-serif;

    font-size: 0.8rem;

    font-weight: 600;

    letter-spacing: 0.03em;

}


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

.portfolio-project-content h2 {

    margin: 0;

    color: #111111;

    font-family:
        "Manrope",
        sans-serif;

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

    font-weight: 700;

    letter-spacing: -0.06em;

    line-height: 0.98;

}


/* =========================================================
   PROJECT SUBTITLE
========================================================= */

.portfolio-project-content h3 {

    max-width: 520px;

    margin:
        22px
        0
        28px;

    color: #383838;

    font-family:
        "Manrope",
        sans-serif;

    font-size: clamp(
        1.3rem,
        2vw,
        1.8rem
    );

    font-weight: 600;

    letter-spacing: -0.025em;

    line-height: 1.25;

}


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

.portfolio-project-content p {

    max-width: 580px;

    margin:
        0
        0
        24px;

    color: #5f6b7a;

    font-family:
        "DM Sans",
        sans-serif;

    font-size: 0.98rem;

    line-height: 1.8;

}


/* =========================================================
   PROJECT TAGS
========================================================= */

.project-tags {

    display: flex;

    flex-wrap: wrap;

    gap: 9px;

    margin-top: 34px;

}


.project-tags span {

    display: inline-flex;

    align-items: center;

    min-height: 38px;

    padding:
        9px
        15px;

    border:
        1px solid
        rgba(
            0,
            0,
            0,
            0.08
        );

    border-radius: 999px;

    background:
        rgba(
            255,
            255,
            255,
            0.72
        );

    color: #383838;

    font-family:
        "DM Sans",
        sans-serif;

    font-size: 0.74rem;

    font-weight: 600;

    white-space: nowrap;

    transition:

        background
        0.25s
        ease,

        border-color
        0.25s
        ease,

        transform
        0.25s
        ease;

}


.project-tags span:hover {

    border-color:
        rgba(
            91,
            183,
            128,
            0.35
        );

    background:
        rgba(
            91,
            183,
            128,
            0.08
        );

    transform:
        translateY(
            -2px
        );

}


/* =========================================================
   PROJECT LINK
========================================================= */

.project-link {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    margin-top: 38px;

    color: #111111;

    font-family:
        "DM Sans",
        sans-serif;

    font-size: 0.9rem;

    font-weight: 700;

    text-decoration: none;

    transition:
        color
        0.25s
        ease;

}


.project-link span {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 38px;

    height: 38px;

    border-radius: 50%;

    background: #111111;

    color: #ffffff;

    font-size: 1.1rem;

    transition:

        transform
        0.3s
        ease,

        background
        0.3s
        ease;

}


.project-link:hover {

    color: #5bb780;

}


.project-link:hover span {

    transform:
        translateX(
            5px
        );

    background: #5bb780;

}


/* =========================================================
   06. FUTURE PRODUCTS
========================================================= */

.future-products {

    position: relative;

    padding-top: 140px;

    padding-bottom: 140px;

    background:

        linear-gradient(
            135deg,
            #111111 0%,
            #191919 55%,
            #101010 100%
        );

    color: #ffffff;

    overflow: hidden;

}


/*
Decorative green glow.
*/

.future-products::before {

    content: "";

    position: absolute;

    top: -250px;

    right: -180px;

    width: 600px;

    height: 600px;

    border-radius: 50%;

    background:

        radial-gradient(
            circle,
            rgba(
                91,
                183,
                128,
                0.16
            ) 0%,

            transparent 70%
        );

    filter: blur(30px);

    pointer-events: none;

}


/* =========================================================
   FUTURE PRODUCTS HEADING
========================================================= */

.future-products-heading {

    position: relative;

    z-index: 2;

    max-width: 760px;

    margin-bottom: 70px;

}


.future-products-heading
.section-label {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 24px;

    color: #5bb780;

    font-family:
        "DM Sans",
        sans-serif;

    font-size: 0.75rem;

    font-weight: 700;

    letter-spacing: 0.16em;

    text-transform: uppercase;

}


.future-products-heading
.section-label::before {

    content: "";

    width: 30px;

    height: 2px;

    background: #5bb780;

}


.future-products-heading h2 {

    max-width: 720px;

    margin: 0 0 24px;

    color: #ffffff;

    font-family:
        "Manrope",
        sans-serif;

    font-size: clamp(
        2.8rem,
        5vw,
        5.5rem
    );

    font-weight: 700;

    letter-spacing: -0.055em;

    line-height: 1.02;

}


.future-products-heading p {

    max-width: 620px;

    margin: 0;

    color:
        rgba(
            255,
            255,
            255,
            0.65
        );

    font-family:
        "DM Sans",
        sans-serif;

    font-size: 1rem;

    line-height: 1.8;

}


/* =========================================================
   FUTURE PRODUCT GRID
========================================================= */

.future-products-grid {

    position: relative;

    z-index: 2;

    display: grid;

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

    gap: 20px;

}


/* =========================================================
   FUTURE PRODUCT CARD
========================================================= */

.future-product-card {

    position: relative;

    min-height: 420px;

    padding: 36px;

    overflow: hidden;

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

    border-radius: 24px;

    background:

        linear-gradient(
            145deg,
            rgba(
                255,
                255,
                255,
                0.07
            ),
            rgba(
                255,
                255,
                255,
                0.025
            )
        );

    transition:

        transform
        0.35s
        ease,

        border-color
        0.35s
        ease,

        background
        0.35s
        ease;

}


.future-product-card:hover {

    transform:
        translateY(
            -8px
        );

    border-color:
        rgba(
            91,
            183,
            128,
            0.45
        );

    background:

        linear-gradient(
            145deg,
            rgba(
                91,
                183,
                128,
                0.10
            ),
            rgba(
                255,
                255,
                255,
                0.035
            )
        );

}


/* =========================================================
   PRODUCT NUMBER
========================================================= */

.future-product-number {

    display: block;

    color:
        rgba(
            255,
            255,
            255,
            0.40
        );

    font-family:
        "DM Sans",
        sans-serif;

    font-size: 0.75rem;

    font-weight: 700;

    letter-spacing: 0.12em;

}


/* =========================================================
   PRODUCT ICON
========================================================= */

.future-product-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 64px;

    height: 64px;

    margin-top: 60px;

    margin-bottom: 34px;

    border:
        1px solid
        rgba(
            91,
            183,
            128,
            0.30
        );

    border-radius: 18px;

    background:
        rgba(
            91,
            183,
            128,
            0.08
        );

    color: #5bb780;

    font-size: 2rem;

    line-height: 1;

}


.future-product-card h3 {

    margin: 0 0 16px;

    color: #ffffff;

    font-family:
        "Manrope",
        sans-serif;

    font-size: 1.45rem;

    font-weight: 700;

    letter-spacing: -0.025em;

}


.future-product-card p {

    max-width: 360px;

    margin: 0;

    color:
        rgba(
            255,
            255,
            255,
            0.60
        );

    font-family:
        "DM Sans",
        sans-serif;

    font-size: 0.92rem;

    line-height: 1.7;

}


/* =========================================================
   PRODUCT STATUS
========================================================= */

.future-product-status {

    position: absolute;

    left: 36px;

    bottom: 34px;

    display: inline-flex;

    align-items: center;

    gap: 9px;

    color:
        rgba(
            255,
            255,
            255,
            0.55
        );

    font-family:
        "DM Sans",
        sans-serif;

    font-size: 0.72rem;

    font-weight: 600;

    letter-spacing: 0.08em;

    text-transform: uppercase;

}


.future-product-status::before {

    content: "";

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background: #5bb780;

    box-shadow:
        0 0 0 5px
        rgba(
            91,
            183,
            128,
            0.10
        );

}


/* =========================================================
   07. INNOVATION APPROACH
========================================================= */

.innovation-approach {

    position: relative;

    padding-top: 130px;

    padding-bottom: 130px;

    background: #ffffff;

}


.innovation-approach-grid {

    display: grid;

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

    gap: 100px;

    align-items: start;

}


/* =========================================================
   APPROACH HEADING
========================================================= */

.innovation-approach-heading
.section-label {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 24px;

    color: #5bb780;

    font-family:
        "DM Sans",
        sans-serif;

    font-size: 0.75rem;

    font-weight: 700;

    letter-spacing: 0.16em;

    text-transform: uppercase;

}


.innovation-approach-heading
.section-label::before {

    content: "";

    width: 30px;

    height: 2px;

    background: #5bb780;

}


.innovation-approach-heading h2 {

    max-width: 700px;

    margin: 0;

    color: #111111;

    font-family:
        "Manrope",
        sans-serif;

    font-size: clamp(
        2.8rem,
        5vw,
        5.5rem
    );

    font-weight: 700;

    letter-spacing: -0.055em;

    line-height: 1.02;

}


/* =========================================================
   APPROACH CONTENT
========================================================= */

.innovation-approach-content {

    padding-top: 48px;

}


.innovation-approach-content p {

    max-width: 560px;

    margin:
        0
        0
        28px;

    color: #5f6b7a;

    font-family:
        "DM Sans",
        sans-serif;

    font-size: 1rem;

    line-height: 1.85;

}


/* =========================================================
   08. FINAL CTA
========================================================= */

.projects-cta {

    position: relative;

    padding-top: 150px;

    padding-bottom: 150px;

    overflow: hidden;

    background:

        radial-gradient(
            circle at 50% 0%,
            rgba(
                91,
                183,
                128,
                0.14
            ) 0%,

            transparent 45%
        ),

        linear-gradient(
            135deg,
            #f6faf7 0%,
            #ffffff 55%,
            #faf7f7 100%
        );

}


.projects-cta::before {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background-image:

        linear-gradient(
            rgba(
                0,
                0,
                0,
                0.025
            ) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(
                0,
                0,
                0,
                0.025
            ) 1px,
            transparent 1px
        );

    background-size:
        72px 72px;

    mask-image:

        linear-gradient(
            to bottom,
            transparent,
            black 25%,
            black 75%,
            transparent
        );

}


.projects-cta-inner {

    position: relative;

    z-index: 2;

    max-width: 900px;

    margin:
        0
        auto;

    text-align: center;

}


.projects-cta-inner
.section-label {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 26px;

    color: #5bb780;

    font-family:
        "DM Sans",
        sans-serif;

    font-size: 0.75rem;

    font-weight: 700;

    letter-spacing: 0.16em;

    text-transform: uppercase;

}


.projects-cta-inner
.section-label::before,

.projects-cta-inner
.section-label::after {

    content: "";

    width: 28px;

    height: 2px;

    background: #5bb780;

}


.projects-cta-inner h2 {

    max-width: 800px;

    margin:
        0
        auto
        26px;

    color: #111111;

    font-family:
        "Manrope",
        sans-serif;

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

    font-weight: 700;

    letter-spacing: -0.06em;

    line-height: 1;

}


.projects-cta-inner p {

    max-width: 650px;

    margin:
        0
        auto
        38px;

    color: #5f6b7a;

    font-family:
        "DM Sans",
        sans-serif;

    font-size: 1rem;

    line-height: 1.8;

}


/* =========================================================
   09. LARGE TABLET
========================================================= */

@media (max-width: 1100px) {


    .projects-hero {

        min-height: 680px;

        padding-top: 130px;

        padding-bottom: 100px;

    }


    .projects-hero h1 {

        font-size: clamp(
            3.2rem,
            7vw,
            6rem
        );

    }


    .projects-intro-grid,

    .innovation-approach-grid {

        gap: 60px;

    }


    .portfolio-project-grid {

        gap: 60px;

    }


    .portfolio-image-frame {

        min-height: 540px;

    }


    .future-product-card {

        padding: 30px;

    }


    .future-product-status {

        left: 30px;

        bottom: 30px;

    }

}


/* =========================================================
   10. TABLET
========================================================= */

@media (max-width: 900px) {


    /* -----------------------------------------
       HERO
    ----------------------------------------- */

    .projects-hero {

        min-height: 620px;

        padding-top: 120px;

        padding-bottom: 90px;

    }


    .projects-hero h1 {

        font-size: clamp(
            3rem,
            9vw,
            5rem
        );

    }


    /* -----------------------------------------
       INTRO
    ----------------------------------------- */

    .projects-introduction {

        padding-top: 90px;

        padding-bottom: 90px;

    }


    .projects-intro-grid {

        grid-template-columns:
            1fr;

        gap: 45px;

    }


    .projects-intro-heading {

        position: static;

    }


    .projects-intro-heading h2 {

        max-width: 680px;

    }


    /* -----------------------------------------
       PROJECTS
    ----------------------------------------- */

    .portfolio-project {

        padding-top: 90px;

        padding-bottom: 90px;

    }


    .portfolio-project-grid {

        grid-template-columns:
            1fr;

        gap: 55px;

    }


    /*
    Reset visual order on tablet.
    */

    .portfolio-project-grid.reverse
    .portfolio-project-media,

    .portfolio-project-grid.reverse
    .portfolio-project-content {

        order: initial;

    }


    .portfolio-project-media {

        width: 100%;

    }


    .portfolio-image-frame {

        min-height: 560px;

    }


    .portfolio-project-content {

        max-width: 760px;

    }


    /* -----------------------------------------
       FUTURE PRODUCTS
    ----------------------------------------- */

    .future-products {

        padding-top: 100px;

        padding-bottom: 100px;

    }


    .future-products-grid {

        grid-template-columns:
            1fr;

    }


    .future-product-card {

        min-height: 360px;

    }


    /* -----------------------------------------
       APPROACH
    ----------------------------------------- */

    .innovation-approach {

        padding-top: 100px;

        padding-bottom: 100px;

    }


    .innovation-approach-grid {

        grid-template-columns:
            1fr;

        gap: 45px;

    }


    .innovation-approach-content {

        padding-top: 0;

    }


    /* -----------------------------------------
       CTA
    ----------------------------------------- */

    .projects-cta {

        padding-top: 110px;

        padding-bottom: 110px;

    }

}


/* =========================================================
   11. MOBILE
========================================================= */

@media (max-width: 600px) {


    /* -----------------------------------------
       PAGE
    ----------------------------------------- */

    .projects-page {

        overflow-x: hidden;

    }


    /* -----------------------------------------
       HERO
    ----------------------------------------- */

    .projects-hero {

        min-height: auto;

        padding-top: 100px;

        padding-bottom: 75px;

    }


    .projects-hero h1 {

        font-size: clamp(
            2.8rem,
            13vw,
            4.5rem
        );

        letter-spacing: -0.055em;

        line-height: 1.02;

    }


    .projects-hero p {

        margin-top: 26px;

        font-size: 0.96rem;

        line-height: 1.7;

    }


    .projects-hero-actions {

        flex-direction: column;

        align-items: stretch;

        gap: 12px;

        margin-top: 30px;

    }


    .projects-hero-actions
    .btn {

        width: 100%;

        justify-content: center;

        text-align: center;

    }


    /* -----------------------------------------
       INTRO
    ----------------------------------------- */

    .projects-introduction {

        padding-top: 75px;

        padding-bottom: 75px;

    }


    .projects-intro-grid {

        gap: 35px;

    }


    .projects-intro-heading
    .section-label {

        margin-bottom: 18px;

    }


    .projects-intro-heading h2 {

        font-size: clamp(
            2.5rem,
            11vw,
            4rem
        );

    }


    .projects-intro-content {

        padding-top: 0;

    }


    .projects-intro-content p {

        font-size: 0.94rem;

        line-height: 1.75;

    }


    /* -----------------------------------------
       PROJECTS
    ----------------------------------------- */

    .portfolio-project {

        padding-top: 70px;

        padding-bottom: 70px;

    }


    .portfolio-project-grid {

        gap: 42px;

    }


    .portfolio-image-frame {

        min-height: 420px;

        border-radius: 20px;

    }


    .portfolio-image-overlay {

        min-height: 150px;

        padding: 22px;

    }


    .portfolio-image-overlay span {

        min-height: 32px;

        padding:
            8px
            12px;

        font-size: 0.64rem;

    }


    .project-meta {

        gap: 12px;

        margin-bottom: 24px;

    }


    .project-index {

        width: 38px;

        height: 38px;

    }


    .project-category {

        font-size: 0.72rem;

    }


    .portfolio-project-content h2 {

        font-size: clamp(
            2.8rem,
            15vw,
            4.5rem
        );

    }


    .portfolio-project-content h3 {

        margin-top: 18px;

        margin-bottom: 22px;

        font-size: 1.25rem;

    }


    .portfolio-project-content p {

        font-size: 0.92rem;

        line-height: 1.75;

    }


    .project-tags {

        gap: 7px;

        margin-top: 28px;

    }


    .project-tags span {

        min-height: 34px;

        padding:
            8px
            12px;

        font-size: 0.68rem;

    }


    .project-link {

        margin-top: 30px;

    }


    /* -----------------------------------------
       FUTURE PRODUCTS
    ----------------------------------------- */

    .future-products {

        padding-top: 80px;

        padding-bottom: 80px;

    }


    .future-products-heading {

        margin-bottom: 45px;

    }


    .future-products-heading h2 {

        font-size: clamp(
            2.5rem,
            11vw,
            4rem
        );

    }


    .future-product-card {

        min-height: 360px;

        padding: 26px;

        border-radius: 20px;

    }


    .future-product-icon {

        width: 56px;

        height: 56px;

        margin-top: 50px;

        margin-bottom: 28px;

    }


    .future-product-status {

        left: 26px;

        bottom: 26px;

    }


    /* -----------------------------------------
       APPROACH
    ----------------------------------------- */

    .innovation-approach {

        padding-top: 80px;

        padding-bottom: 80px;

    }


    .innovation-approach-heading h2 {

        font-size: clamp(
            2.5rem,
            11vw,
            4rem
        );

    }


    .innovation-approach-content p {

        font-size: 0.94rem;

        line-height: 1.75;

    }


    /* -----------------------------------------
       CTA
    ----------------------------------------- */

    .projects-cta {

        padding-top: 90px;

        padding-bottom: 90px;

    }


    .projects-cta-inner h2 {

        font-size: clamp(
            2.8rem,
            13vw,
            4.5rem
        );

    }


    .projects-cta-inner p {

        font-size: 0.94rem;

        line-height: 1.75;

    }

}


/* =========================================================
   12. SMALL MOBILE
========================================================= */

@media (max-width: 400px) {


    .projects-hero {

        padding-top: 85px;

        padding-bottom: 60px;

    }


    .projects-hero h1 {

        font-size: 2.7rem;

    }


    .projects-intro-heading h2,

    .future-products-heading h2,

    .innovation-approach-heading h2 {

        font-size: 2.45rem;

    }


    .portfolio-image-frame {

        min-height: 360px;

    }


    .portfolio-project-content h2 {

        font-size: 2.8rem;

    }


    .future-product-card {

        min-height: 340px;

    }

}


/* =========================================================
   13. ACCESSIBILITY
========================================================= */

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


    .projects-page *,

    .projects-page *::before,

    .projects-page *::after {

        scroll-behavior: auto !important;

        transition-duration: 0.01ms !important;

        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;

    }

}
/* =========================================================
   PROJECT LINK — REMOVE GLOBAL DUPLICATE ARROW
========================================================= */

.projects-page .project-link::after {
    content: none !important;
    display: none !important;
}