/* =========================================================
   ECSI — PROJECTS HERO
   Elisha & Charles Solutions Inc.

   Design:
   Premium / Architectural / Engineering
   Dark / Minimal / Editorial
========================================================= */


/* =========================================================
   01 — HERO BASE
========================================================= */

.projects-hero {
    position: relative;
    isolation: isolate;

    width: 100%;
    min-height: 100svh;

    display: flex;
    align-items: center;

    overflow: hidden;

    background: #0B2545;
    color: #EEF4ED;
}


/* =========================================================
   02 — BACKGROUND IMAGE
========================================================= */

.projects-hero-bg {
    position: absolute;
    inset: 0;
    z-index: -3;

    background-image:
        url("../images/projects/projects-hero.jpg");

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;

    transform: scale(1.02);

    animation:
        projectsHeroZoom 16s ease-out forwards;
}


/* =========================================================
   03 — DARK OVERLAY
========================================================= */

.projects-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: -2;

    background:
        linear-gradient(
            90deg,
            rgba(11, 37, 69, 0.94) 0%,
            rgba(11, 37, 69, 0.78) 38%,
            rgba(11, 37, 69, 0.40) 70%,
            rgba(11, 37, 69, 0.60) 100%
        );

    pointer-events: none;
}


/* =========================================================
   04 — SUBTLE BOTTOM GRADIENT
========================================================= */

.projects-hero::after {
    content: "";

    position: absolute;
    inset: auto 0 0;

    height: 35%;

    z-index: -1;

    background:
        linear-gradient(
            to top,
            rgba(11, 37, 69, 0.82),
            transparent
        );

    pointer-events: none;
}


/* =========================================================
   05 — TECHNICAL VERTICAL LINE
========================================================= */

.projects-hero-line {
    position: absolute;

    top: 0;
    bottom: 0;
    left: clamp(24px, 7vw, 120px);

    width: 1px;

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(141, 169, 196, 0.35) 20%,
            rgba(141, 169, 196, 0.35) 80%,
            transparent
        );

    pointer-events: none;
}


/* =========================================================
   06 — CONTAINER
========================================================= */

.projects-hero-container {
    position: relative;

    width: min(100%, 1440px);

    min-height: 100svh;

    margin: 0 auto;

    padding:
        clamp(110px, 12vh, 150px)
        clamp(28px, 7vw, 120px)
        clamp(50px, 7vh, 90px);

    display: flex;
    flex-direction: column;
    justify-content: space-between;
}


/* =========================================================
   07 — TOP META
========================================================= */

.projects-hero-top {
    width: 100%;

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

    gap: 30px;
}


/* =========================================================
   08 — COMPANY / PROJECT LABEL
========================================================= */

.projects-hero-label {
    display: flex;
    align-items: center;
    gap: 12px;

    font-size: 10px;
    font-weight: 600;

    letter-spacing: 0.18em;
    text-transform: uppercase;

    color: rgba(238, 244, 237, 0.82);
}


.projects-hero-label-line {
    display: block;

    width: 34px;
    height: 1px;

    background: rgba(141, 169, 196, 0.7);
}


.projects-hero-label-divider {
    color: rgba(141, 169, 196, 0.45);
}


/* =========================================================
   09 — PROJECT INDEX
========================================================= */

.projects-hero-index {
    display: flex;
    align-items: baseline;
    gap: 7px;

    font-size: 10px;
    letter-spacing: 0.14em;

    color: rgba(141, 169, 196, 0.7);
}


.projects-hero-index strong {
    font-size: 14px;
    font-weight: 600;

    color: #EEF4ED;
}


/* =========================================================
   10 — MAIN CONTENT
========================================================= */

.projects-hero-content {
    width: min(100%, 850px);

    margin-top: auto;
    margin-bottom: auto;

    padding-top: clamp(50px, 8vh, 100px);
}


/* =========================================================
   11 — EYEBROW
========================================================= */

.projects-hero-eyebrow {
    display: inline-block;

    margin-bottom: 22px;

    font-size: 11px;
    font-weight: 600;

    letter-spacing: 0.22em;
    text-transform: uppercase;

    color: rgba(141, 169, 196, 0.8);
}


/* =========================================================
   12 — HERO TITLE
========================================================= */

.projects-hero-title {
    max-width: 900px;

    margin: 0;

    font-size:
        clamp(
            52px,
            7.5vw,
            112px
        );

    line-height: 0.94;

    font-weight: 500;

    letter-spacing: -0.055em;

    text-wrap: balance;

    color: #EEF4ED;
}


.projects-hero-title span {
    display: block;

    font-weight: 700;

    color: #EEF4ED;
}


/* =========================================================
   13 — DESCRIPTION
========================================================= */

.projects-hero-description {
    max-width: 610px;

    margin:
        clamp(28px, 4vh, 42px)
        0
        0;

    font-size:
        clamp(15px, 1.15vw, 18px);

    line-height: 1.75;

    font-weight: 400;

    color: rgba(238, 244, 237, 0.72);
}


/* =========================================================
   14 — ACTIONS
========================================================= */

.projects-hero-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 24px;

    margin-top: 36px;
}


/* =========================================================
   15 — PRIMARY BUTTON
========================================================= */

.projects-hero-primary {
    display: inline-flex;
    align-items: center;

    gap: 18px;

    min-height: 54px;

    padding: 0 8px 0 22px;

    text-decoration: none;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 0.14em;
    text-transform: uppercase;

    color: #EEF4ED;

    border: 1px solid rgba(141, 169, 196, 0.45);

    transition:
        background 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease;
}


.projects-hero-primary-icon {
    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    background: #8DA9C4;

    color: #0B2545;

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


.projects-hero-primary:hover {
    background: rgba(141, 169, 196, 0.12);

    border-color: #8DA9C4;

    transform: translateY(-2px);
}


.projects-hero-primary:hover
.projects-hero-primary-icon {
    background: #EEF4ED;

    transform: translateY(3px);
}


/* =========================================================
   16 — SECONDARY LINK
========================================================= */

.projects-hero-secondary {
    display: inline-flex;
    align-items: center;

    gap: 10px;

    padding: 10px 0;

    text-decoration: none;

    font-size: 11px;
    font-weight: 600;

    letter-spacing: 0.14em;
    text-transform: uppercase;

    color: rgba(238, 244, 237, 0.72);

    border-bottom:
        1px solid rgba(141, 169, 196, 0.4);

    transition:
        color 0.3s ease,
        border-color 0.3s ease;
}


.projects-hero-secondary i {
    font-size: 10px;
}


.projects-hero-secondary:hover {
    color: #EEF4ED;

    border-color: #8DA9C4;
}


/* =========================================================
   17 — BOTTOM INFORMATION
========================================================= */

.projects-hero-bottom {
    display: flex;
    align-items: center;

    width: 100%;

    padding-top: 28px;

    border-top:
        1px solid rgba(141, 169, 196, 0.3);
}


/* =========================================================
   18 — FEATURED STAT
========================================================= */

.projects-hero-stat {
    display: flex;
    align-items: center;

    gap: 18px;
}


.projects-hero-stat-number {
    font-size: 28px;
    line-height: 1;

    font-weight: 300;

    letter-spacing: -0.04em;

    color: #EEF4ED;
}


.projects-hero-stat-label {
    display: block;

    margin-bottom: 4px;

    font-size: 9px;
    font-weight: 600;

    letter-spacing: 0.18em;
    text-transform: uppercase;

    color: rgba(141, 169, 196, 0.65);
}


.projects-hero-stat strong {
    display: block;

    font-size: 11px;
    font-weight: 600;

    letter-spacing: 0.1em;

    color: rgba(238, 244, 237, 0.9);
}


/* =========================================================
   19 — BOTTOM DIVIDER
========================================================= */

.projects-hero-bottom-divider {
    width: 1px;
    height: 42px;

    margin:
        0
        clamp(28px, 4vw, 60px);

    background:
        rgba(141, 169, 196, 0.35);
}


/* =========================================================
   20 — SERVICE INFORMATION
========================================================= */

.projects-hero-services {
    display: flex;
    flex-direction: column;

    gap: 8px;
}


.projects-hero-service-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 8px 20px;
}


.projects-hero-service-list span {
    position: relative;

    font-size: 9px;
    font-weight: 600;

    letter-spacing: 0.13em;
    text-transform: uppercase;

    color: rgba(238, 244, 237, 0.75);
}


.projects-hero-service-list span:not(:last-child)::after {
    content: "·";

    position: absolute;

    right: -13px;

    color: rgba(141, 169, 196, 0.45);
}


/* =========================================================
   21 — SCROLL INDICATOR
========================================================= */

.projects-hero-scroll {
    position: absolute;

    right: clamp(28px, 4vw, 70px);
    bottom: clamp(35px, 5vh, 60px);

    display: flex;
    align-items: center;

    gap: 14px;

    writing-mode: vertical-rl;

    text-decoration: none;

    font-size: 9px;
    font-weight: 600;

    letter-spacing: 0.2em;
    text-transform: uppercase;

    color: rgba(141, 169, 196, 0.7);

    transition:
        color 0.3s ease;
}


.projects-hero-scroll-line {
    width: 1px;
    height: 55px;

    background:
        linear-gradient(
            to bottom,
            rgba(141, 169, 196, 0.25),
            #8DA9C4
        );

    animation:
        projectsScrollLine 2s ease-in-out infinite;
}


.projects-hero-scroll i {
    font-size: 10px;
}


.projects-hero-scroll:hover {
    color: #EEF4ED;
}


/* =========================================================
   22 — ANIMATIONS
========================================================= */

@keyframes projectsHeroZoom {

    from {
        transform: scale(1.02);
    }

    to {
        transform: scale(1.08);
    }

}


@keyframes projectsScrollLine {

    0%,
    100% {
        opacity: 0.35;
        transform: scaleY(0.65);
        transform-origin: top;
    }

    50% {
        opacity: 1;
        transform: scaleY(1);
        transform-origin: top;
    }

}


/* =========================================================
   23 — TABLET
========================================================= */

@media (max-width: 900px) {

    .projects-hero-container {
        padding:
            110px
            40px
            50px;
    }


    .projects-hero-line {
        left: 24px;
    }


    .projects-hero-content {
        max-width: 720px;
    }


    .projects-hero-title {
        font-size:
            clamp(48px, 9vw, 82px);
    }


    .projects-hero-scroll {
        right: 22px;
    }

}


/* =========================================================
   24 — MOBILE
========================================================= */

@media (max-width: 640px) {

    .projects-hero {
        min-height: 100svh;
    }


    .projects-hero-container {
        min-height: 100svh;

        padding:
            100px
            22px
            35px;
    }


    .projects-hero-line {
        left: 12px;
    }


    .projects-hero-top {
        align-items: flex-start;
    }


    .projects-hero-label {
        gap: 7px;

        font-size: 8px;

        letter-spacing: 0.12em;
    }


    .projects-hero-label-line {
        width: 22px;
    }


    .projects-hero-index {
        font-size: 8px;
    }


    .projects-hero-index strong {
        font-size: 11px;
    }


    .projects-hero-content {
        padding-top: 40px;
    }


    .projects-hero-eyebrow {
        margin-bottom: 16px;

        font-size: 8px;

        letter-spacing: 0.18em;
    }


    .projects-hero-title {
        font-size:
            clamp(46px, 14vw, 68px);

        line-height: 0.94;

        letter-spacing: -0.06em;
    }


    .projects-hero-description {
        max-width: 100%;

        margin-top: 24px;

        font-size: 14px;

        line-height: 1.65;
    }


    .projects-hero-actions {
        align-items: flex-start;
        flex-direction: column;

        gap: 18px;

        margin-top: 28px;
    }


    .projects-hero-primary {
        min-height: 50px;
    }


    .projects-hero-bottom {
        align-items: flex-start;
    }


    .projects-hero-stat {
        gap: 12px;
    }


    .projects-hero-stat-number {
        font-size: 22px;
    }


    .projects-hero-bottom-divider {
        height: 34px;

        margin:
            0
            18px;
    }


    .projects-hero-services {
        display: none;
    }


    .projects-hero-scroll {
        right: 10px;
        bottom: 30px;

        font-size: 7px;
    }


    .projects-hero-scroll-line {
        height: 38px;
    }

}


/* =========================================================
   25 — REDUCED MOTION
========================================================= */

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

    .projects-hero-bg,
    .projects-hero-scroll-line {
        animation: none;
    }

    .projects-hero-primary,
    .projects-hero-primary-icon,
    .projects-hero-secondary,
    .projects-hero-scroll {
        transition: none;
    }

}

/* =========================================================
   ECSI — PROJECT INTRODUCTION
   Elisha & Charles Solutions Inc.

   Design:
   Editorial / Architectural / Premium
========================================================= */


/* =========================================================
   01 — SECTION BASE
========================================================= */

.projects-intro {
    position: relative;
    isolation: isolate;

    width: 100%;

    padding:
        clamp(100px, 12vw, 180px)
        0
        clamp(70px, 9vw, 120px);

    background: #EEF4ED;

    color: #0B2545;

    overflow: hidden;
}


/* =========================================================
   02 — SUBTLE BACKGROUND DETAIL
========================================================= */

.projects-intro::before {
    content: "";

    position: absolute;

    top: 0;
    right: 0;

    width: min(35vw, 500px);
    height: 1px;

    background: rgba(141, 169, 196, 0.45);

    pointer-events: none;
}


.projects-intro::after {
    content: "";

    position: absolute;

    top: 0;
    right: clamp(30px, 8vw, 120px);

    width: 1px;
    height: 45%;

    background:
        linear-gradient(
            to bottom,
            rgba(141, 169, 196, 0.45),
            transparent
        );

    pointer-events: none;
}


/* =========================================================
   03 — CONTAINER
========================================================= */

.projects-intro .container {
    width: min(100%, 1440px);

    margin: 0 auto;

    padding:
        0
        clamp(24px, 7vw, 120px);
}


/* =========================================================
   04 — MAIN GRID
========================================================= */

.projects-intro-grid {
    display: grid;

    grid-template-columns:
        minmax(120px, 0.35fr)
        minmax(0, 1.65fr);

    gap:
        clamp(40px, 8vw, 130px);

    align-items: start;
}


/* =========================================================
     — INDEX
========================================================= */

.projects-intro-index {
    position: relative;

    display: flex;
    flex-direction: column;

    gap: 16px;

    padding-top: 8px;
}


.projects-intro-index-number {
    font-size:
        clamp(42px, 4vw, 58px);

    line-height: 1;

    font-weight: 300;

    letter-spacing: -0.05em;

    color: #0B2545;
}


.projects-intro-index-line {
    width: 42px;
    height: 1px;

    background: #134074;
}


.projects-intro-index-label {
    font-size: 9px;
    font-weight: 700;

    letter-spacing: 0.2em;
    text-transform: uppercase;

    color: #8DA9C4;
}


/* =========================================================
   06 — CONTENT
========================================================= */

.projects-intro-content {
    max-width: 920px;
}


/* =========================================================
   07 — EYEBROW
========================================================= */

.projects-intro-eyebrow {
    display: block;

    margin-bottom: 24px;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 0.22em;
    text-transform: uppercase;

    color: #8DA9C4;
}


/* =========================================================
   08 — TITLE
========================================================= */

.projects-intro-title {
    max-width: 900px;

    margin: 0;

    font-size:
        clamp(
            50px,
            7vw,
            100px
        );

    line-height: 0.94;

    font-weight: 500;

    letter-spacing: -0.06em;

    color: #0B2545;
}


.projects-intro-title span {
    display: block;

    font-weight: 700;
}


/* =========================================================
   09 — DESCRIPTION
========================================================= */

.projects-intro-description {
    display: grid;

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

    gap:
        clamp(25px, 5vw, 80px);

    max-width: 820px;

    margin-top:
        clamp(45px, 6vw, 75px);

    padding-top: 28px;

    border-top:
        1px solid rgba(141, 169, 196, 0.4);
}


.projects-intro-description p {
    margin: 0;

    font-size:
        clamp(14px, 1.05vw, 17px);

    line-height: 1.8;

    color: #13315C;
}


.projects-intro-description p + p {
    color: rgba(19, 49, 92, 0.72);
}


/* =========================================================
   10 — PROJECT SCOPE
========================================================= */

.projects-intro-scope {
    display: grid;

    grid-template-columns:
        160px
        1fr;

    gap: 30px;

    max-width: 820px;

    margin-top: 55px;

    padding-top: 24px;

    border-top:
        1px solid rgba(141, 169, 196, 0.4);
}


.projects-intro-scope-label {
    font-size: 9px;
    font-weight: 700;

    letter-spacing: 0.18em;
    text-transform: uppercase;

    color: #8DA9C4;
}


.projects-intro-scope-list {
    display: flex;
    flex-wrap: wrap;

    gap: 12px 30px;
}


.projects-intro-scope-list span {
    position: relative;

    font-size: 11px;
    font-weight: 600;

    letter-spacing: 0.08em;
    text-transform: uppercase;

    color: #0B2545;
}


.projects-intro-scope-list span:not(:last-child)::after {
    content: "·";

    position: absolute;

    right: -18px;

    color: #8DA9C4;
}


/* =========================================================
   11 — BOTTOM STATEMENT
========================================================= */

.projects-intro-bottom {
    display: grid;

    grid-template-columns:
        1fr
        minmax(300px, 650px)
        auto;

    align-items: center;

    gap: 30px;

    margin-top:
        clamp(90px, 11vw, 160px);

    padding-top: 28px;

    border-top:
        1px solid rgba(141, 169, 196, 0.4);
}


.projects-intro-bottom-line {
    width: 100%;
    height: 1px;

    background: #134074;
}


.projects-intro-bottom p {
    margin: 0;

    font-size:
        clamp(15px, 1.25vw, 19px);

    line-height: 1.55;

    font-weight: 500;

    letter-spacing: -0.01em;

    color: #0B2545;
}


.projects-intro-bottom-number {
    white-space: nowrap;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 0.18em;
    text-transform: uppercase;

    color: #8DA9C4;
}


/* =========================================================
   12 — TABLET
========================================================= */

@media (max-width: 900px) {

    .projects-intro {
        padding:
            100px
            0
            80px;
    }


    .projects-intro .container {
        padding:
            0
            40px;
    }


    .projects-intro-grid {
        grid-template-columns:
            100px
            minmax(0, 1fr);

        gap: 45px;
    }


    .projects-intro-title {
        font-size:
            clamp(48px, 9vw, 78px);
    }


    .projects-intro-bottom {
        grid-template-columns:
            1fr
            2fr;
    }


    .projects-intro-bottom-line {
        display: none;
    }


    .projects-intro-bottom-number {
        justify-self: end;
    }

}


/* =========================================================
   13 — MOBILE
========================================================= */

@media (max-width: 640px) {

    .projects-intro {
        padding:
            80px
            0
            65px;
    }


    .projects-intro .container {
        padding:
            0
            22px;
    }


    .projects-intro::after {
        right: 18px;
    }


    .projects-intro-grid {
        display: block;
    }


    /* Index */

    .projects-intro-index {
        display: flex;
        flex-direction: row;
        align-items: center;

        gap: 10px;

        margin-bottom: 45px;

        padding: 0;
    }


    .projects-intro-index-number {
        font-size: 30px;
    }


    .projects-intro-index-line {
        width: 25px;
    }


    .projects-intro-index-label {
        font-size: 8px;
    }


    /* Content */

    .projects-intro-eyebrow {
        margin-bottom: 18px;

        font-size: 8px;
    }


    .projects-intro-title {
        font-size:
            clamp(45px, 14vw, 64px);

        line-height: 0.95;
    }


    /* Description */

    .projects-intro-description {
        display: block;

        margin-top: 38px;

        padding-top: 22px;
    }


    .projects-intro-description p {
        font-size: 14px;

        line-height: 1.7;
    }


    .projects-intro-description p + p {
        margin-top: 18px;
    }


    /* Scope */

    .projects-intro-scope {
        display: block;

        margin-top: 38px;

        padding-top: 20px;
    }


    .projects-intro-scope-label {
        display: block;

        margin-bottom: 18px;
    }


    .projects-intro-scope-list {
        display: grid;

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

        gap: 14px 20px;
    }


    .projects-intro-scope-list span {
        font-size: 9px;
    }


    .projects-intro-scope-list span::after {
        display: none;
    }


    /* Bottom */

    .projects-intro-bottom {
        display: block;

        margin-top: 75px;

        padding-top: 22px;
    }


    .projects-intro-bottom-line {
        display: block;

        width: 40px;

        margin-bottom: 20px;
    }


    .projects-intro-bottom p {
        font-size: 15px;
    }


    .projects-intro-bottom-number {
        display: block;

        margin-top: 22px;

        font-size: 8px;
    }

}


/* =========================================================
   14 — REDUCED MOTION
========================================================= */

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

    .projects-intro * {
        scroll-behavior: auto;
    }

}
/* =========================================================
   ECSI — FEATURED NEW UNIT INSTALLATION
   Elisha & Charles Solutions Inc.

   Design:
   Editorial / Architectural / Premium Portfolio
========================================================= */


/* =========================================================
   01 — SECTION BASE
========================================================= */

.featured-installation {
    position: relative;
    isolation: isolate;

    width: 100%;

    padding:
        clamp(100px, 11vw, 170px)
        0
        clamp(80px, 9vw, 130px);

    background: #ffffff;

    color: #111519;

    overflow: hidden;
}


/* =========================================================
   02 — CONTAINER
========================================================= */

.featured-installation .container {
    width: min(100%, 1440px);

    margin: 0 auto;

    padding:
        0
        clamp(24px, 7vw, 120px);
}


/* =========================================================
   03 — SECTION HEADER
========================================================= */

.featured-installation-header {
    display: grid;

    grid-template-columns:
        minmax(100px, 0.35fr)
        minmax(0, 1.25fr)
        minmax(260px, 0.7fr);

    gap:
        clamp(35px, 6vw, 90px);

    align-items: end;

    margin-bottom:
        clamp(70px, 9vw, 125px);
}


/* =========================================================
   04 — SECTION INDEX
========================================================= */

.featured-installation-index {
    display: flex;
    flex-direction: column;

    gap: 15px;

    align-self: start;
}


.featured-installation-number {
    font-size:
        clamp(42px, 4vw, 58px);

    line-height: 1;

    font-weight: 300;

    letter-spacing: -0.05em;

    color: #15191d;
}


.featured-installation-index-line {
    width: 42px;
    height: 1px;

    background: #161a1e;
}


.featured-installation-index-label {
    font-size: 9px;
    font-weight: 700;

    letter-spacing: 0.2em;
    text-transform: uppercase;

    color: #7b8085;
}


/* =========================================================
   05 — HEADING
========================================================= */

.featured-installation-heading {
    max-width: 760px;
}


.featured-installation-eyebrow {
    display: block;

    margin-bottom: 20px;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 0.2em;
    text-transform: uppercase;

    color: #777d82;
}


.featured-installation-heading h2 {
    margin: 0;

    font-size:
        clamp(
            48px,
            6vw,
            88px
        );

    line-height: 0.95;

    font-weight: 500;

    letter-spacing: -0.06em;

    color: #101418;
}


.featured-installation-heading h2 span {
    display: block;

    font-weight: 700;
}


/* =========================================================
   06 — HEADER DESCRIPTION
========================================================= */

.featured-installation-intro {
    max-width: 400px;

    margin: 0;

    padding-bottom: 5px;

    font-size:
        clamp(14px, 1.05vw, 17px);

    line-height: 1.75;

    color: #686e74;
}


/* =========================================================
   07 — PROJECT
========================================================= */

.featured-project {
    display: grid;

    grid-template-columns:
        minmax(0, 1.25fr)
        minmax(320px, 0.75fr);

    align-items: center;

    gap:
        clamp(40px, 7vw, 110px);

    margin-bottom:
        clamp(110px, 14vw, 210px);
}


/* =========================================================
   08 — REVERSE PROJECT
========================================================= */

.featured-project-reverse {
    grid-template-columns:
        minmax(320px, 0.75fr)
        minmax(0, 1.25fr);
}


.featured-project-reverse .featured-project-image {
    order: 2;
}


.featured-project-reverse .featured-project-content {
    order: 1;
}


/* =========================================================
   09 — PROJECT IMAGE
========================================================= */

.featured-project-image {
    position: relative;

    min-height:
        clamp(420px, 43vw, 650px);

    overflow: hidden;

    background: #e8eaec;
}


.featured-project-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform 0.8s cubic-bezier(.2,.7,.2,1);
}


.featured-project:hover
.featured-project-image img {
    transform: scale(1.045);
}


/* =========================================================
   10 — IMAGE OVERLAY
========================================================= */

.featured-project-image-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(5, 8, 11, 0.42),
            transparent 45%
        );

    pointer-events: none;
}


/* =========================================================
   11 — IMAGE LABEL
========================================================= */

.featured-project-image-label {
    position: absolute;

    top: 24px;
    left: 24px;

    padding:
        9px
        13px;

    background:
        rgba(10, 13, 16, 0.78);

    backdrop-filter: blur(8px);

    -webkit-backdrop-filter: blur(8px);

    font-size: 8px;
    font-weight: 700;

    letter-spacing: 0.16em;
    text-transform: uppercase;

    color: #ffffff;
}


/* =========================================================
   12 — PROJECT CONTENT
========================================================= */

.featured-project-content {
    max-width: 530px;
}


/* =========================================================
   13 — PROJECT TOP
========================================================= */

.featured-project-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 28px;

    padding-bottom: 18px;

    border-bottom:
        1px solid #d9dcdf;
}


.featured-project-number {
    font-size: 13px;
    font-weight: 600;

    letter-spacing: 0.08em;

    color: #171b1f;
}


.featured-project-type {
    font-size: 9px;
    font-weight: 700;

    letter-spacing: 0.18em;
    text-transform: uppercase;

    color: #7a8086;
}


/* =========================================================
   14 — PROJECT TITLE
========================================================= */

.featured-project-content h3 {
    margin: 0;

    font-size:
        clamp(
            38px,
            4.2vw,
            64px
        );

    line-height: 0.98;

    font-weight: 500;

    letter-spacing: -0.05em;

    color: #111519;
}


.featured-project-content h3 span {
    display: block;

    font-weight: 700;
}


/* =========================================================
   15 — PROJECT DESCRIPTION
========================================================= */

.featured-project-content > p {
    max-width: 500px;

    margin:
        30px
        0
        0;

    font-size:
        clamp(14px, 1vw, 16px);

    line-height: 1.8;

    color: #666c72;
}


/* =========================================================
   16 — PROJECT META
========================================================= */

.featured-project-meta {
    display: grid;

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

    gap: 18px;

    margin-top: 42px;

    padding-top: 24px;

    border-top:
        1px solid #d9dcdf;
}


.featured-project-meta div {
    min-width: 0;
}


.featured-project-meta span {
    display: block;

    margin-bottom: 7px;

    font-size: 8px;
    font-weight: 700;

    letter-spacing: 0.15em;
    text-transform: uppercase;

    color: #92979c;
}


.featured-project-meta strong {
    display: block;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 0.07em;
    text-transform: uppercase;

    color: #252a2f;
}


/* =========================================================
   17 — PROJECT LINK
========================================================= */

.featured-project-link {
    display: inline-flex;
    align-items: center;

    gap: 18px;

    margin-top: 38px;

    padding-bottom: 10px;

    border-bottom:
        1px solid #171b1f;

    text-decoration: none;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 0.14em;
    text-transform: uppercase;

    color: #171b1f;

    transition:
        gap 0.3s ease,
        color 0.3s ease;
}


.featured-project-link i {
    font-size: 11px;

    transition:
        transform 0.3s ease;
}


.featured-project-link:hover {
    gap: 24px;
}


.featured-project-link:hover i {
    transform: translateX(4px);
}


/* =========================================================
   18 — PORTFOLIO FOOTER
========================================================= */

.featured-installation-footer {
    display: grid;

    grid-template-columns:
        1fr
        auto;

    align-items: center;

    gap: 40px;

    padding-top: 34px;

    border-top:
        1px solid #cfd3d6;
}


.featured-installation-footer-copy span {
    display: block;

    margin-bottom: 8px;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 0.18em;
    text-transform: uppercase;

    color: #7e8489;
}


.featured-installation-footer-copy p {
    max-width: 600px;

    margin: 0;

    font-size: 14px;

    line-height: 1.7;

    color: #62686e;
}


.featured-installation-footer-link {
    display: inline-flex;
    align-items: center;

    gap: 20px;

    white-space: nowrap;

    padding:
        15px
        0;

    border-bottom:
        1px solid #171b1f;

    text-decoration: none;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 0.14em;
    text-transform: uppercase;

    color: #171b1f;

    transition:
        gap 0.3s ease;
}


.featured-installation-footer-link:hover {
    gap: 27px;
}


.featured-installation-footer-link i {
    font-size: 11px;
}


/* =========================================================
   19 — TABLET
========================================================= */

@media (max-width: 1000px) {

    .featured-installation .container {
        padding:
            0
            40px;
    }


    .featured-installation-header {
        grid-template-columns:
            100px
            minmax(0, 1fr);

        gap: 35px;
    }


    .featured-installation-intro {
        grid-column: 2;

        max-width: 600px;
    }


    .featured-project,
    .featured-project-reverse {
        grid-template-columns:
            minmax(0, 1fr);

        gap: 40px;
    }


    .featured-project-reverse .featured-project-image {
        order: 1;
    }


    .featured-project-reverse .featured-project-content {
        order: 2;
    }


    .featured-project-content {
        max-width: 700px;
    }


    .featured-project-image {
        min-height: 520px;
    }

}


/* =========================================================
   20 — MOBILE
========================================================= */

@media (max-width: 640px) {

    .featured-installation {
        padding:
            80px
            0
            70px;
    }


    .featured-installation .container {
        padding:
            0
            22px;
    }


    /* Header */

    .featured-installation-header {
        display: block;

        margin-bottom: 65px;
    }


    .featured-installation-index {
        flex-direction: row;
        align-items: center;

        gap: 10px;

        margin-bottom: 40px;
    }


    .featured-installation-number {
        font-size: 30px;
    }


    .featured-installation-index-line {
        width: 25px;
    }


    .featured-installation-index-label {
        font-size: 8px;
    }


    .featured-installation-eyebrow {
        margin-bottom: 17px;

        font-size: 8px;
    }


    .featured-installation-heading h2 {
        font-size:
            clamp(44px, 13vw, 62px);

        line-height: 0.95;
    }


    .featured-installation-intro {
        margin-top: 28px;

        font-size: 14px;

        line-height: 1.7;
    }


    /* Projects */

    .featured-project,
    .featured-project-reverse {
        display: flex;
        flex-direction: column;

        gap: 32px;

        margin-bottom: 85px;
    }


    .featured-project-reverse .featured-project-image,
    .featured-project-reverse .featured-project-content {
        order: initial;
    }


    .featured-project-image {
        width: 100%;

        min-height: 390px;
    }


    .featured-project-image-label {
        top: 16px;
        left: 16px;

        padding:
            8px
            10px;

        font-size: 7px;
    }


    .featured-project-content {
        width: 100%;
    }


    .featured-project-top {
        margin-bottom: 22px;

        padding-bottom: 14px;
    }


    .featured-project-number {
        font-size: 11px;
    }


    .featured-project-type {
        font-size: 8px;
    }


    .featured-project-content h3 {
        font-size:
            clamp(36px, 11vw, 52px);
    }


    .featured-project-content > p {
        margin-top: 22px;

        font-size: 14px;

        line-height: 1.7;
    }


    .featured-project-meta {
        grid-template-columns:
            1fr
            1fr;

        gap:
            20px 15px;

        margin-top: 30px;

        padding-top: 20px;
    }


    .featured-project-meta div:last-child {
        grid-column: 1 / -1;
    }


    .featured-project-meta span {
        font-size: 7px;
    }


    .featured-project-meta strong {
        font-size: 8px;
    }


    .featured-project-link {
        margin-top: 30px;

        font-size: 9px;
    }


    /* Footer */

    .featured-installation-footer {
        display: block;

        padding-top: 25px;
    }


    .featured-installation-footer-copy p {
        font-size: 13px;
    }


    .featured-installation-footer-link {
        margin-top: 28px;

        font-size: 9px;
    }

}


/* =========================================================
   21 — REDUCED MOTION
========================================================= */

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

    .featured-project-image img,
    .featured-project-link,
    .featured-project-link i,
    .featured-installation-footer-link {
        transition: none;
    }

}
/* =========================================================
   ECSI — PMS / PREVENTIVE MAINTENANCE
   Elisha & Charles Solutions Inc.

   Design:
   Technical / Clean / Editorial / Premium
========================================================= */


/* =========================================================
   01 — SECTION BASE
========================================================= */

.pms-section {
    position: relative;
    isolation: isolate;

    width: 100%;

    padding:
        clamp(100px, 11vw, 165px)
        0
        clamp(80px, 9vw, 130px);

    background: #EEF4ED;

    color: #0B2545;

    overflow: hidden;
}


/* =========================================================
   02 — CONTAINER
========================================================= */

.pms-section .container {
    width: min(100%, 1440px);

    margin: 0 auto;

    padding:
        0
        clamp(24px, 7vw, 120px);
}


/* =========================================================
   03 — HEADER
========================================================= */

.pms-header {
    display: grid;

    grid-template-columns:
        minmax(100px, 0.3fr)
        minmax(0, 1.25fr)
        minmax(260px, 0.7fr);

    gap:
        clamp(35px, 6vw, 90px);

    align-items: end;

    margin-bottom:
        clamp(60px, 8vw, 105px);
}


/* =========================================================
   04 — HEADER INDEX
========================================================= */

.pms-header-index {
    display: flex;
    flex-direction: column;

    align-self: start;

    gap: 14px;
}


.pms-header-number {
    font-size:
        clamp(42px, 4vw, 58px);

    line-height: 1;

    font-weight: 300;

    letter-spacing: -0.05em;

    color: #0B2545;
}


.pms-header-line {
    width: 40px;
    height: 1px;

    background: #134074;
}


.pms-header-label {
    font-size: 9px;
    font-weight: 700;

    letter-spacing: 0.2em;
    text-transform: uppercase;

    color: #8DA9C4;
}


/* =========================================================
   05 — HEADER MAIN
========================================================= */

.pms-eyebrow {
    display: block;

    margin-bottom: 18px;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 0.2em;
    text-transform: uppercase;

    color: #8DA9C4;
}


.pms-header-main h2 {
    margin: 0;

    font-size:
        clamp(48px, 6vw, 88px);

    line-height: 0.94;

    font-weight: 500;

    letter-spacing: -0.06em;

    color: #0B2545;
}


.pms-header-main h2 span {
    display: block;

    font-weight: 700;
}


/* =========================================================
   06 — HEADER DESCRIPTION
========================================================= */

.pms-header-description p {
    max-width: 410px;

    margin: 0;

    padding-bottom: 4px;

    font-size:
        clamp(14px, 1vw, 16px);

    line-height: 1.8;

    color: #13315C;
}


/* =========================================================
   07 — INTRO STRIP
========================================================= */

.pms-intro-strip {
    display: grid;

    grid-template-columns:
        minmax(150px, 0.35fr)
        minmax(0, 1.25fr)
        auto;

    align-items: center;

    gap: 35px;

    padding:
        24px
        0;

    border-top:
        1px solid rgba(141, 169, 196, 0.4);

    border-bottom:
        1px solid rgba(141, 169, 196, 0.4);

    margin-bottom:
        clamp(60px, 8vw, 110px);
}


.pms-intro-label {
    display: flex;
    flex-direction: column;

    gap: 6px;
}


.pms-intro-label span {
    font-size: 9px;

    color: #8DA9C4;
}


.pms-intro-label strong {
    font-size: 9px;
    font-weight: 700;

    letter-spacing: 0.14em;
    text-transform: uppercase;

    color: #0B2545;
}


.pms-intro-strip > p {
    max-width: 650px;

    margin: 0;

    font-size: 13px;

    line-height: 1.7;

    color: #13315C;
}


.pms-intro-status {
    display: flex;
    align-items: center;

    gap: 9px;

    white-space: nowrap;

    font-size: 8px;
    font-weight: 700;

    letter-spacing: 0.14em;
    text-transform: uppercase;

    color: #8DA9C4;
}


.pms-status-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #134074;
}


/* =========================================================
   08 — FEATURED PROJECT
========================================================= */

.pms-featured {
    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(350px, 0.85fr);

    align-items: stretch;

    gap: 0;

    margin-bottom:
        clamp(70px, 9vw, 120px);

    background: #ffffff;
}


/* =========================================================
   09 — FEATURED IMAGE
========================================================= */

.pms-featured-image {
    position: relative;

    min-height:
        clamp(480px, 48vw, 690px);

    overflow: hidden;

    background: #13315C;
}


.pms-featured-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform 0.8s cubic-bezier(.2,.7,.2,1);
}


.pms-featured:hover
.pms-featured-image img {
    transform: scale(1.04);
}


/* =========================================================
   10 — IMAGE OVERLAY
========================================================= */

.pms-image-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(11, 37, 69, 0.55),
            transparent 50%
        );

    pointer-events: none;
}


/* =========================================================
   11 — IMAGE TAG
========================================================= */

.pms-image-tag {
    position: absolute;

    top: 24px;
    left: 24px;

    padding:
        9px
        13px;

    background:
        rgba(11, 37, 69, 0.85);

    backdrop-filter: blur(8px);

    -webkit-backdrop-filter: blur(8px);

    font-size: 8px;
    font-weight: 700;

    letter-spacing: 0.17em;
    text-transform: uppercase;

    color: #EEF4ED;
}


.pms-image-number {
    position: absolute;

    right: 25px;
    bottom: 22px;

    font-size:
        clamp(50px, 6vw, 90px);

    line-height: 1;

    font-weight: 300;

    letter-spacing: -0.06em;

    color: rgba(238, 244, 237, 0.85);
}


/* =========================================================
   12 — FEATURED CONTENT
========================================================= */

.pms-featured-content {
    display: flex;
    flex-direction: column;

    justify-content: center;

    padding:
        clamp(40px, 5vw, 75px);
}


/* =========================================================
   13 — PROJECT HEADING
========================================================= */

.pms-project-heading > span {
    display: block;

    margin-bottom: 18px;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 0.18em;
    text-transform: uppercase;

    color: #8DA9C4;
}


.pms-project-heading h3 {
    margin: 0;

    font-size:
        clamp(38px, 4vw, 62px);

    line-height: 0.98;

    font-weight: 400;

    letter-spacing: -0.05em;

    color: #0B2545;
}


.pms-project-heading h3 strong {
    display: block;

    font-weight: 700;
}


/* =========================================================
   14 — FEATURED DESCRIPTION
========================================================= */

.pms-featured-description {
    max-width: 500px;

    margin:
        30px
        0
        0;

    font-size: 14px;

    line-height: 1.8;

    color: #13315C;
}


/* =========================================================
   15 — FEATURED DETAILS
========================================================= */

.pms-featured-details {
    display: grid;

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

    gap: 20px;

    margin-top: 45px;

    padding-top: 25px;

    border-top:
        1px solid rgba(141, 169, 196, 0.4);
}


.pms-featured-details div {
    min-width: 0;
}


.pms-featured-details span {
    display: block;

    margin-bottom: 15px;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 0.14em;

    color: #8DA9C4;
}


.pms-featured-details strong {
    display: block;

    margin-bottom: 9px;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    color: #0B2545;
}


.pms-featured-details p {
    margin: 0;

    font-size: 11px;

    line-height: 1.6;

    color: #13315C;
}


/* =========================================================
   16 — SECONDARY PROJECT GRID
========================================================= */

.pms-project-grid {
    display: grid;

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

    gap:
        clamp(25px, 4vw, 55px);

    margin-bottom:
        clamp(80px, 10vw, 135px);
}


/* =========================================================
   17 — SECONDARY CARD
========================================================= */

.pms-project-card {
    display: grid;

    grid-template-columns:
        minmax(180px, 0.7fr)
        minmax(0, 1fr);

    background: #ffffff;

    border:
        1px solid rgba(141, 169, 196, 0.35);
}


.pms-project-image {
    position: relative;

    min-height: 330px;

    overflow: hidden;

    background: #13315C;
}


.pms-project-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform 0.7s cubic-bezier(.2,.7,.2,1);
}


.pms-project-card:hover
.pms-project-image img {
    transform: scale(1.05);
}


.pms-project-image > span {
    position: absolute;

    top: 17px;
    left: 17px;

    font-size: 11px;
    font-weight: 700;

    color: #EEF4ED;

    text-shadow:
        0 2px 8px rgba(11, 37, 69, 0.5);
}


/* =========================================================
   18 — SECONDARY CONTENT
========================================================= */

.pms-project-card-content {
    display: flex;
    flex-direction: column;

    justify-content: center;

    padding:
        clamp(28px, 3vw, 45px);
}


.pms-project-card-type {
    display: block;

    margin-bottom: 18px;

    font-size: 8px;
    font-weight: 700;

    letter-spacing: 0.16em;
    text-transform: uppercase;

    color: #8DA9C4;
}


.pms-project-card-content h3 {
    margin: 0;

    font-size:
        clamp(28px, 3vw, 42px);

    line-height: 1;

    font-weight: 400;

    letter-spacing: -0.045em;

    color: #0B2545;
}


.pms-project-card-content h3 span {
    display: block;

    font-weight: 700;
}


.pms-project-card-content > p {
    margin:
        22px
        0
        0;

    font-size: 12px;

    line-height: 1.75;

    color: #13315C;
}


/* =========================================================
   19 — PROJECT LINK
========================================================= */

.pms-project-link {
    display: inline-flex;
    align-items: center;

    align-self: flex-start;

    gap: 14px;

    margin-top: 30px;

    padding-bottom: 8px;

    border-bottom:
        1px solid #134074;

    text-decoration: none;

    font-size: 8px;
    font-weight: 700;

    letter-spacing: 0.14em;
    text-transform: uppercase;

    color: #0B2545;

    transition:
        gap 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease;
}


.pms-project-link:hover {
    gap: 20px;

    color: #13315C;

    border-color: #8DA9C4;
}


/* =========================================================
   20 — PMS COVERAGE
========================================================= */

.pms-coverage {
    display: grid;

    grid-template-columns:
        minmax(260px, 0.65fr)
        minmax(0, 1.35fr);

    gap:
        clamp(50px, 8vw, 120px);

    padding:
        clamp(60px, 7vw, 95px)
        0;

    border-top:
        1px solid rgba(141, 169, 196, 0.4);

    border-bottom:
        1px solid rgba(141, 169, 196, 0.4);

    margin-bottom:
        clamp(60px, 7vw, 90px);
}


/* =========================================================
   21 — COVERAGE HEADING
========================================================= */

.pms-coverage-heading > span {
    display: block;

    margin-bottom: 20px;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 0.18em;
    text-transform: uppercase;

    color: #8DA9C4;
}


.pms-coverage-heading h3 {
    margin: 0;

    font-size:
        clamp(35px, 4vw, 56px);

    line-height: 0.98;

    font-weight: 400;

    letter-spacing: -0.05em;

    color: #0B2545;
}


.pms-coverage-heading h3 strong {
    display: block;

    font-weight: 700;
}


/* =========================================================
   22 — COVERAGE LIST
========================================================= */

.pms-coverage-list {
    display: grid;

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

    gap: 0;

    border-top:
        1px solid rgba(141, 169, 196, 0.35);
}


.pms-coverage-item {
    display: grid;

    grid-template-columns:
        35px
        1fr;

    gap: 15px;

    padding:
        22px
        0;

    border-bottom:
        1px solid rgba(141, 169, 196, 0.35);
}


.pms-coverage-item:nth-child(odd) {
    margin-right: 25px;
}


.pms-coverage-item:nth-child(even) {
    padding-left: 25px;

    border-left:
        1px solid rgba(141, 169, 196, 0.35);
}


.pms-coverage-item > span {
    font-size: 9px;

    color: #8DA9C4;
}


.pms-coverage-item strong {
    display: block;

    margin-bottom: 6px;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 0.1em;
    text-transform: uppercase;

    color: #0B2545;
}


.pms-coverage-item p {
    margin: 0;

    font-size: 11px;

    line-height: 1.6;

    color: #13315C;
}


/* =========================================================
   23 — FOOTER CTA
========================================================= */

.pms-footer {
    display: grid;

    grid-template-columns:
        1fr
        auto;

    align-items: center;

    gap: 40px;

    padding-top: 30px;
}


.pms-footer-copy > span {
    display: block;

    margin-bottom: 8px;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 0.18em;
    text-transform: uppercase;

    color: #8DA9C4;
}


.pms-footer-copy p {
    max-width: 650px;

    margin: 0;

    font-size: 13px;

    line-height: 1.7;

    color: #13315C;
}


.pms-footer-link {
    display: inline-flex;
    align-items: center;

    gap: 20px;

    white-space: nowrap;

    padding:
        15px
        0;

    border-bottom:
        1px solid #134074;

    text-decoration: none;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 0.14em;
    text-transform: uppercase;

    color: #0B2545;

    transition:
        gap 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease;
}


.pms-footer-link:hover {
    gap: 28px;

    color: #13315C;

    border-color: #8DA9C4;
}


/* =========================================================
   24 — TABLET
========================================================= */

@media (max-width: 1000px) {

    .pms-section .container {
        padding:
            0
            40px;
    }


    .pms-header {
        grid-template-columns:
            100px
            minmax(0, 1fr);

        gap: 35px;
    }


    .pms-header-description {
        grid-column: 2;
    }


    .pms-intro-strip {
        grid-template-columns:
            150px
            minmax(0, 1fr);
    }


    .pms-intro-status {
        display: none;
    }


    .pms-featured {
        grid-template-columns:
            1fr;
    }


    .pms-featured-image {
        min-height: 520px;
    }


    .pms-featured-content {
        padding: 50px;
    }


    .pms-project-card {
        grid-template-columns:
            1fr;
    }


    .pms-project-image {
        min-height: 350px;
    }


    .pms-coverage {
        grid-template-columns:
            1fr;
    }

}


/* =========================================================
   25 — MOBILE
========================================================= */

@media (max-width: 640px) {

    .pms-section {
        padding:
            80px
            0
            70px;
    }


    .pms-section .container {
        padding:
            0
            22px;
    }


    /* Header */

    .pms-header {
        display: block;

        margin-bottom: 55px;
    }


    .pms-header-index {
        flex-direction: row;
        align-items: center;

        gap: 10px;

        margin-bottom: 38px;
    }


    .pms-header-number {
        font-size: 30px;
    }


    .pms-header-line {
        width: 25px;
    }


    .pms-header-label {
        font-size: 8px;
    }


    .pms-eyebrow {
        font-size: 8px;

        margin-bottom: 16px;
    }


    .pms-header-main h2 {
        font-size:
            clamp(44px, 13vw, 62px);

        line-height: 0.94;
    }


    .pms-header-description {
        margin-top: 28px;
    }


    .pms-header-description p {
        font-size: 14px;

        line-height: 1.7;
    }


    /* Intro */

    .pms-intro-strip {
        display: block;

        padding:
            20px
            0;

        margin-bottom: 55px;
    }


    .pms-intro-label {
        flex-direction: row;
        align-items: center;

        gap: 10px;

        margin-bottom: 15px;
    }


    .pms-intro-strip > p {
        font-size: 12px;

        line-height: 1.7;
    }


    /* Featured */

    .pms-featured {
        display: block;

        margin-bottom: 60px;
    }


    .pms-featured-image {
        min-height: 390px;
    }


    .pms-image-tag {
        top: 16px;
        left: 16px;

        font-size: 7px;
    }


    .pms-image-number {
        right: 16px;
        bottom: 15px;

        font-size: 55px;
    }


    .pms-featured-content {
        padding: 35px 24px 40px;
    }


    .pms-project-heading > span {
        font-size: 8px;
    }


    .pms-project-heading h3 {
        font-size:
            clamp(35px, 11vw, 50px);
    }


    .pms-featured-description {
        margin-top: 22px;

        font-size: 13px;

        line-height: 1.7;
    }


    .pms-featured-details {
        grid-template-columns:
            1fr;

        gap: 22px;

        margin-top: 30px;
    }


    /* Secondary Projects */

    .pms-project-grid {
        grid-template-columns:
            1fr;

        gap: 25px;

        margin-bottom: 70px;
    }


    .pms-project-card {
        display: block;
    }


    .pms-project-image {
        min-height: 280px;
    }


    .pms-project-card-content {
        padding: 28px 24px 32px;
    }


    .pms-project-card-content h3 {
        font-size: 32px;
    }


    /* Coverage */

    .pms-coverage {
        display: block;

        padding:
            55px
            0;

        margin-bottom: 55px;
    }


    .pms-coverage-heading {
        margin-bottom: 35px;
    }


    .pms-coverage-heading h3 {
        font-size: 36px;
    }


    .pms-coverage-list {
        display: block;
    }


    .pms-coverage-item,
    .pms-coverage-item:nth-child(odd),
    .pms-coverage-item:nth-child(even) {
        margin: 0;

        padding:
            18px
            0;

        border-left: 0;
    }


    /* Footer */

    .pms-footer {
        display: block;
    }


    .pms-footer-copy p {
        font-size: 12px;
    }


    .pms-footer-link {
        margin-top: 25px;

        font-size: 8px;
    }

}


/* =========================================================
   26 — REDUCED MOTION
========================================================= */

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

    .pms-featured-image img,
    .pms-project-image img,
    .pms-project-link,
    .pms-footer-link {
        transition: none;
    }

}
/* =========================================================
   ECSI — PROJECT EXPERIENCE
   Elisha & Charles Solutions Inc.

   Design:
   Architectural / Editorial / Minimal / Premium
========================================================= */


/* =========================================================
   01 — SECTION BASE
========================================================= */

.project-experience {
    position: relative;
    isolation: isolate;

    width: 100%;

    padding:
        clamp(100px, 11vw, 165px)
        0
        clamp(80px, 9vw, 125px);

    background: #ffffff;

    color: #111519;

    overflow: hidden;
}


/* =========================================================
   02 — CONTAINER
========================================================= */

.project-experience .container {
    width: min(100%, 1440px);

    margin: 0 auto;

    padding:
        0
        clamp(24px, 7vw, 120px);
}


/* =========================================================
   03 — HEADER
========================================================= */

.project-experience-header {
    display: grid;

    grid-template-columns:
        minmax(100px, 0.3fr)
        minmax(0, 1.2fr)
        minmax(260px, 0.7fr);

    gap:
        clamp(35px, 6vw, 90px);

    align-items: end;

    margin-bottom:
        clamp(65px, 8vw, 110px);
}


/* =========================================================
   04 — HEADER INDEX
========================================================= */

.project-experience-index {
    display: flex;
    flex-direction: column;

    align-self: start;

    gap: 14px;
}


.project-experience-number {
    font-size:
        clamp(42px, 4vw, 58px);

    line-height: 1;

    font-weight: 300;

    letter-spacing: -0.05em;

    color: #171c20;
}


.project-experience-line {
    width: 40px;
    height: 1px;

    background: #1b2024;
}


.project-experience-label {
    font-size: 9px;
    font-weight: 700;

    letter-spacing: 0.2em;
    text-transform: uppercase;

    color: #858b90;
}


/* =========================================================
   05 — HEADER HEADING
========================================================= */

.project-experience-eyebrow {
    display: block;

    margin-bottom: 18px;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 0.2em;
    text-transform: uppercase;

    color: #777d82;
}


.project-experience-heading h2 {
    margin: 0;

    font-size:
        clamp(48px, 6vw, 88px);

    line-height: 0.94;

    font-weight: 400;

    letter-spacing: -0.06em;

    color: #101418;
}


.project-experience-heading h2 span {
    display: block;

    font-weight: 700;
}


/* =========================================================
   06 — HEADER INTRO
========================================================= */

.project-experience-intro {
    max-width: 410px;

    margin: 0;

    padding-bottom: 4px;

    font-size:
        clamp(14px, 1vw, 16px);

    line-height: 1.8;

    color: #686f75;
}


/* =========================================================
   07 — EXPERIENCE GRID
========================================================= */

.project-experience-grid {
    display: grid;

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

    gap: 1px;

    background: #cfd3d6;

    border:
        1px solid #cfd3d6;
}


/* =========================================================
   08 — EXPERIENCE ITEM
========================================================= */

.experience-item {
    position: relative;

    min-height:
        clamp(330px, 31vw, 450px);

    display: flex;
    flex-direction: column;

    justify-content: space-between;

    padding:
        clamp(30px, 4vw, 55px);

    background: #f7f8f8;

    overflow: hidden;

    transition:
        background 0.35s ease;
}


.experience-item:hover {
    background: #111519;

    color: #ffffff;
}


/* =========================================================
   09 — FEATURED ITEM
========================================================= */

.experience-item-featured {
    background: #eceeef;
}


/* =========================================================
   10 — NUMBER
========================================================= */

.experience-item-number {
    position: relative;

    z-index: 2;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 0.12em;

    color: #858b90;

    transition:
        color 0.35s ease;
}


.experience-item:hover
.experience-item-number {
    color: rgba(255, 255, 255, 0.5);
}


/* =========================================================
   11 — CONTENT
========================================================= */

.experience-item-content {
    position: relative;

    z-index: 2;

    max-width: 500px;
}


.experience-item-type {
    display: block;

    margin-bottom: 15px;

    font-size: 8px;
    font-weight: 700;

    letter-spacing: 0.18em;
    text-transform: uppercase;

    color: #8b9196;

    transition:
        color 0.35s ease;
}


.experience-item:hover
.experience-item-type {
    color: rgba(255, 255, 255, 0.48);
}


/* =========================================================
   12 — ITEM TITLE
========================================================= */

.experience-item h3 {
    margin: 0;

    font-size:
        clamp(34px, 4vw, 58px);

    line-height: 0.95;

    font-weight: 500;

    letter-spacing: -0.05em;

    color: #151a1e;

    transition:
        color 0.35s ease;
}


.experience-item:hover h3 {
    color: #ffffff;
}


/* =========================================================
   13 — ITEM DESCRIPTION
========================================================= */

.experience-item p {
    max-width: 440px;

    margin:
        22px
        0
        0;

    font-size: 13px;

    line-height: 1.75;

    color: #6d7479;

    transition:
        color 0.35s ease;
}


.experience-item:hover p {
    color: rgba(255, 255, 255, 0.62);
}


/* =========================================================
   14 — ICON
========================================================= */

.experience-item-icon {
    position: absolute;

    right:
        clamp(28px, 4vw, 55px);

    bottom:
        clamp(28px, 4vw, 55px);

    width: 58px;
    height: 58px;

    display: grid;
    place-items: center;

    border:
        1px solid #cbd0d3;

    font-size: 17px;

    color: #737a80;

    transition:
        border-color 0.35s ease,
        color 0.35s ease,
        transform 0.35s ease;
}


.experience-item:hover
.experience-item-icon {
    border-color:
        rgba(255, 255, 255, 0.28);

    color: #ffffff;

    transform:
        translateY(-4px);
}


/* =========================================================
   15 — ARROW
========================================================= */

.experience-item-arrow {
    position: absolute;

    top:
        clamp(28px, 4vw, 55px);

    right:
        clamp(28px, 4vw, 55px);

    font-size: 12px;

    color: #8b9196;

    transition:
        color 0.35s ease,
        transform 0.35s ease;
}


.experience-item:hover
.experience-item-arrow {
    color: #ffffff;

    transform:
        translate(3px, -3px);
}


/* =========================================================
   16 — STATEMENT
========================================================= */

.project-experience-statement {
    display: grid;

    grid-template-columns:
        90px
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap:
        clamp(30px, 5vw, 75px);

    margin-top:
        clamp(70px, 9vw, 120px);

    padding:
        35px
        0;

    border-top:
        1px solid #cfd3d6;

    border-bottom:
        1px solid #cfd3d6;
}


/* =========================================================
   17 — STATEMENT MARK
========================================================= */

.experience-statement-mark {
    display: flex;
    align-items: flex-end;

    gap: 5px;

    height: 45px;
}


.experience-statement-mark span {
    display: block;

    width: 4px;

    background: #171c20;
}


.experience-statement-mark span:nth-child(1) {
    height: 25%;
}


.experience-statement-mark span:nth-child(2) {
    height: 60%;
}


.experience-statement-mark span:nth-child(3) {
    height: 100%;
}


/* =========================================================
   18 — STATEMENT CONTENT
========================================================= */

.experience-statement-content > span {
    display: block;

    margin-bottom: 10px;

    font-size: 8px;
    font-weight: 700;

    letter-spacing: 0.18em;
    text-transform: uppercase;

    color: #858b90;
}


.experience-statement-content p {
    max-width: 700px;

    margin: 0;

    font-size:
        clamp(14px, 1.1vw, 17px);

    line-height: 1.7;

    color: #51585e;
}


/* =========================================================
   19 — STATEMENT NUMBER
========================================================= */

.experience-statement-number {
    font-size:
        clamp(45px, 5vw, 75px);

    line-height: 1;

    font-weight: 300;

    letter-spacing: -0.06em;

    color: #d4d8da;
}


/* =========================================================
   20 — FOOTER
========================================================= */

.project-experience-footer {
    display: flex;
    align-items: center;

    gap: 18px;

    padding-top: 28px;

    font-size: 8px;
    font-weight: 700;

    letter-spacing: 0.16em;
    text-transform: uppercase;

    color: #8a9095;
}


.project-experience-footer-line {
    width: 50px;
    height: 1px;

    background: #bfc4c7;
}


/* =========================================================
   21 — TABLET
========================================================= */

@media (max-width: 1000px) {

    .project-experience .container {
        padding:
            0
            40px;
    }


    .project-experience-header {
        grid-template-columns:
            100px
            minmax(0, 1fr);

        gap: 35px;
    }


    .project-experience-intro {
        grid-column: 2;

        max-width: 600px;
    }


    .experience-item {
        min-height: 350px;
    }


    .project-experience-statement {
        grid-template-columns:
            60px
            minmax(0, 1fr)
            auto;
    }

}


/* =========================================================
   22 — MOBILE
========================================================= */

@media (max-width: 640px) {

    .project-experience {
        padding:
            80px
            0
            70px;
    }


    .project-experience .container {
        padding:
            0
            22px;
    }


    /* Header */

    .project-experience-header {
        display: block;

        margin-bottom: 55px;
    }


    .project-experience-index {
        flex-direction: row;
        align-items: center;

        gap: 10px;

        margin-bottom: 38px;
    }


    .project-experience-number {
        font-size: 30px;
    }


    .project-experience-line {
        width: 25px;
    }


    .project-experience-label {
        font-size: 8px;
    }


    .project-experience-eyebrow {
        margin-bottom: 16px;

        font-size: 8px;
    }


    .project-experience-heading h2 {
        font-size:
            clamp(44px, 13vw, 62px);

        line-height: 0.94;
    }


    .project-experience-intro {
        margin-top: 28px;

        font-size: 14px;

        line-height: 1.7;
    }


    /* Grid */

    .project-experience-grid {
        grid-template-columns: 1fr;
    }


    .experience-item {
        min-height: 340px;

        padding:
            28px
            24px;
    }


    .experience-item h3 {
        font-size:
            clamp(38px, 11vw, 52px);
    }


    .experience-item p {
        max-width: 300px;

        font-size: 12px;

        line-height: 1.7;
    }


    .experience-item-icon {
        right: 24px;
        bottom: 24px;

        width: 48px;
        height: 48px;

        font-size: 15px;
    }


    .experience-item-arrow {
        top: 28px;
        right: 24px;
    }


    /* Statement */

    .project-experience-statement {
        display: block;

        margin-top: 65px;

        padding:
            28px
            0;
    }


    .experience-statement-mark {
        margin-bottom: 25px;
    }


    .experience-statement-content > span {
        font-size: 7px;
    }


    .experience-statement-content p {
        font-size: 13px;

        line-height: 1.7;
    }


    .experience-statement-number {
        margin-top: 25px;

        font-size: 45px;
    }


    /* Footer */

    .project-experience-footer {
        flex-wrap: wrap;

        gap: 10px;

        font-size: 7px;

        line-height: 1.5;
    }


    .project-experience-footer-line {
        width: 25px;
    }

}


/* =========================================================
   23 — REDUCED MOTION
========================================================= */

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

    .experience-item,
    .experience-item-icon,
    .experience-item-arrow {
        transition: none;
    }

}
/* =========================================================
   ECSI — FINAL PROJECT CTA
   Elisha & Charles Solutions Inc.

   Design:
   Premium / Architectural / Dark / Editorial
========================================================= */


/* =========================================================
   01 — SECTION BASE
========================================================= */

.projects-final-cta {
    position: relative;
    isolation: isolate;

    width: 100%;
    min-height: 760px;

    display: flex;
    align-items: center;

    padding:
        clamp(90px, 10vw, 150px)
        0
        45px;

    background: #0d1114;

    color: #ffffff;

    overflow: hidden;
}


/* =========================================================
   02 — BACKGROUND
========================================================= */

.projects-final-cta-bg {
    position: absolute;
    inset: 0;

    z-index: -3;

    background:
        linear-gradient(
            115deg,
            #0a0e11 0%,
            #11171b 45%,
            #080b0e 100%
        );
}


/* =========================================================
   03 — TECHNICAL GRID
========================================================= */

.projects-final-cta-grid {
    position: absolute;
    inset: 0;

    z-index: -2;

    opacity: 0.12;

    background-image:
        linear-gradient(
            rgba(255,255,255,0.12) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,0.12) 1px,
            transparent 1px
        );

    background-size:
        90px 90px;

    mask-image:
        linear-gradient(
            90deg,
            transparent 0%,
            #000 35%,
            #000 70%,
            transparent 100%
        );
}


/* =========================================================
   04 — OVERLAY
========================================================= */

.projects-final-cta-overlay {
    position: absolute;
    inset: 0;

    z-index: -1;

    background:
        radial-gradient(
            circle at 72% 45%,
            rgba(255,255,255,0.07),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            rgba(0,0,0,0.15),
            rgba(0,0,0,0.45)
        );
}


/* =========================================================
   05 — CONTAINER
========================================================= */

.projects-final-cta-container {
    position: relative;

    width: min(100%, 1440px);

    min-height: 670px;

    margin: 0 auto;

    padding:
        0
        clamp(24px, 7vw, 120px);

    display: flex;
    flex-direction: column;

    justify-content: space-between;
}


/* =========================================================
   06 — TOP BAR
========================================================= */

.projects-final-cta-top {
    display: flex;

    align-items: center;

    justify-content: space-between;

    width: 100%;
}


/* =========================================================
   07 — INDEX
========================================================= */

.projects-final-cta-index {
    display: flex;

    align-items: center;

    gap: 14px;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 0.18em;
    text-transform: uppercase;

    color: rgba(255,255,255,0.58);
}


.projects-final-cta-index > span:first-child {
    font-size: 13px;

    color: #ffffff;
}


.projects-final-cta-index i {
    width: 35px;
    height: 1px;

    display: block;

    background:
        rgba(255,255,255,0.35);
}


/* =========================================================
   08 — STATUS
========================================================= */

.projects-final-cta-status {
    display: flex;

    align-items: center;

    gap: 9px;

    font-size: 8px;
    font-weight: 700;

    letter-spacing: 0.18em;

    color:
        rgba(255,255,255,0.5);
}


.projects-final-cta-status-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #ffffff;

    box-shadow:
        0 0 0 5px
        rgba(255,255,255,0.06);
}


/* =========================================================
   09 — MAIN CONTENT
========================================================= */

.projects-final-cta-content {
    width: 100%;

    max-width: 1050px;

    margin:
        80px
        0
        90px;
}


/* =========================================================
   10 — EYEBROW
========================================================= */

.projects-final-cta-eyebrow {
    display: block;

    margin-bottom: 24px;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 0.22em;
    text-transform: uppercase;

    color:
        rgba(255,255,255,0.5);
}


/* =========================================================
   11 — MAIN HEADING
========================================================= */

.projects-final-cta-content h2 {
    margin: 0;

    max-width: 1000px;

    font-size:
        clamp(64px, 9vw, 132px);

    line-height: 0.86;

    font-weight: 300;

    letter-spacing: -0.07em;

    color: #ffffff;
}


.projects-final-cta-content h2 span {
    display: block;

    font-weight: 700;

    color:
        rgba(255,255,255,0.72);
}


/* =========================================================
   12 — DESCRIPTION
========================================================= */

.projects-final-cta-content p {
    max-width: 580px;

    margin:
        38px
        0
        0;

    font-size:
        clamp(14px, 1.1vw, 17px);

    line-height: 1.8;

    color:
        rgba(255,255,255,0.56);
}


/* =========================================================
   13 — ACTIONS
========================================================= */

.projects-final-cta-actions {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 18px;

    margin-top: 38px;
}


/* =========================================================
   14 — PRIMARY BUTTON
========================================================= */

.projects-final-cta-primary {
    display: inline-flex;

    align-items: center;

    gap: 25px;

    min-height: 58px;

    padding:
        0
        8px
        0
        25px;

    text-decoration: none;

    background: #ffffff;

    color: #111519;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 0.08em;
    text-transform: uppercase;

    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;
}


.projects-final-cta-button-icon {
    width: 48px;
    height: 48px;

    display: grid;
    place-items: center;

    background: #111519;

    color: #ffffff;

    font-size: 12px;

    transition:
        transform 0.3s ease;
}


.projects-final-cta-primary:hover {
    background: #e8ebed;

    transform:
        translateY(-3px);
}


.projects-final-cta-primary:hover
.projects-final-cta-button-icon {
    transform:
        translateX(4px);
}


/* =========================================================
   15 — SECONDARY BUTTON
========================================================= */

.projects-final-cta-secondary {
    display: inline-flex;

    align-items: center;

    gap: 12px;

    min-height: 58px;

    padding:
        0
        24px;

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

    text-decoration: none;

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

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 0.1em;
    text-transform: uppercase;

    transition:
        border-color 0.3s ease,
        color 0.3s ease,
        background 0.3s ease;
}


.projects-final-cta-secondary:hover {
    border-color:
        rgba(255,255,255,0.55);

    color: #ffffff;

    background:
        rgba(255,255,255,0.05);
}


.projects-final-cta-secondary i {
    font-size: 10px;
}


/* =========================================================
   16 — DECORATIVE MARK
========================================================= */

.projects-final-cta-mark {
    position: absolute;

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

    top: 50%;

    transform:
        translateY(-50%);

    width:
        clamp(150px, 20vw, 300px);

    height:
        clamp(150px, 20vw, 300px);

    display: flex;

    align-items: center;

    justify-content: center;

    gap:
        clamp(5px, 0.8vw, 12px);

    opacity: 0.18;

    pointer-events: none;
}


.projects-final-cta-mark span {
    display: block;

    width:
        clamp(5px, 0.5vw, 9px);

    background: #ffffff;

    transform-origin: center;
}


.projects-final-cta-mark span:nth-child(1) {
    height: 25%;
}


.projects-final-cta-mark span:nth-child(2) {
    height: 48%;
}


.projects-final-cta-mark span:nth-child(3) {
    height: 78%;
}


.projects-final-cta-mark span:nth-child(4) {
    height: 100%;
}


.projects-final-cta-mark span:nth-child(5) {
    height: 62%;
}


/* =========================================================
   17 — BOTTOM
========================================================= */

.projects-final-cta-bottom {
    display: grid;

    grid-template-columns:
        1fr
        auto
        1fr;

    align-items: end;

    gap: 30px;

    padding-top: 28px;

    border-top:
        1px solid
        rgba(255,255,255,0.13);
}


/* =========================================================
   18 — COMPANY
========================================================= */

.projects-final-cta-company {
    display: flex;

    flex-direction: column;

    gap: 3px;

    font-size: 8px;

    letter-spacing: 0.18em;

    color:
        rgba(255,255,255,0.45);
}


.projects-final-cta-company strong {
    font-size: 9px;

    font-weight: 700;

    color:
        rgba(255,255,255,0.8);
}


/* =========================================================
   19 — SERVICES
========================================================= */

.projects-final-cta-services {
    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: 10px;

    font-size: 7px;
    font-weight: 700;

    letter-spacing: 0.13em;

    color:
        rgba(255,255,255,0.38);
}


.projects-final-cta-services i {
    width: 3px;
    height: 3px;

    border-radius: 50%;

    background:
        rgba(255,255,255,0.3);
}


/* =========================================================
   20 — BACK TO TOP
========================================================= */

.projects-final-cta-top-link {
    justify-self: end;

    display: inline-flex;

    align-items: center;

    gap: 10px;

    text-decoration: none;

    font-size: 8px;
    font-weight: 700;

    letter-spacing: 0.15em;

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

    transition:
        color 0.3s ease;
}


.projects-final-cta-top-link:hover {
    color: #ffffff;
}


.projects-final-cta-top-link i {
    font-size: 10px;
}


/* =========================================================
   21 — TABLET
========================================================= */

@media (max-width: 1000px) {

    .projects-final-cta {
        min-height: 700px;
    }


    .projects-final-cta-container {
        min-height: 610px;
    }


    .projects-final-cta-content {
        max-width: 800px;
    }


    .projects-final-cta-content h2 {
        font-size:
            clamp(58px, 10vw, 100px);
    }


    .projects-final-cta-mark {
        right: 35px;

        opacity: 0.1;
    }


    .projects-final-cta-bottom {
        grid-template-columns:
            1fr
            1fr;
    }


    .projects-final-cta-services {
        justify-content: flex-end;
    }


    .projects-final-cta-top-link {
        grid-column: 2;

        grid-row: 1;

        justify-self: end;
    }

}


/* =========================================================
   22 — MOBILE
========================================================= */

@media (max-width: 640px) {

    .projects-final-cta {
        min-height: 720px;

        padding:
            70px
            0
            28px;
    }


    .projects-final-cta-container {
        min-height: 620px;

        padding:
            0
            22px;
    }


    /* Top */

    .projects-final-cta-top {
        align-items: flex-start;
    }


    .projects-final-cta-index {
        gap: 9px;

        font-size: 7px;
    }


    .projects-final-cta-index > span:first-child {
        font-size: 11px;
    }


    .projects-final-cta-index i {
        width: 20px;
    }


    .projects-final-cta-status {
        font-size: 7px;
    }


    .projects-final-cta-status-dot {
        width: 5px;
        height: 5px;
    }


    /* Content */

    .projects-final-cta-content {
        margin:
            70px
            0
            65px;
    }


    .projects-final-cta-eyebrow {
        margin-bottom: 20px;

        font-size: 8px;
    }


    .projects-final-cta-content h2 {
        font-size:
            clamp(54px, 15vw, 78px);

        line-height: 0.88;
    }


    .projects-final-cta-content p {
        margin-top: 28px;

        max-width: 330px;

        font-size: 13px;

        line-height: 1.7;
    }


    /* Actions */

    .projects-final-cta-actions {
        align-items: stretch;

        flex-direction: column;

        gap: 10px;

        margin-top: 30px;
    }


    .projects-final-cta-primary,
    .projects-final-cta-secondary {
        width: 100%;

        justify-content: space-between;
    }


    /* Decorative mark */

    .projects-final-cta-mark {
        top: 43%;

        right: -25px;

        width: 170px;
        height: 170px;

        opacity: 0.07;
    }


    /* Bottom */

    .projects-final-cta-bottom {
        display: flex;

        flex-direction: column;

        align-items: flex-start;

        gap: 22px;

        padding-top: 22px;
    }


    .projects-final-cta-services {
        justify-content: flex-start;

        gap: 7px;

        line-height: 1.8;

        font-size: 6px;
    }


    .projects-final-cta-top-link {
        align-self: flex-end;

        margin-top: -5px;

        font-size: 7px;
    }

}


/* =========================================================
   23 — VERY SMALL SCREENS
========================================================= */

@media (max-width: 380px) {

    .projects-final-cta-content h2 {
        font-size: 50px;
    }


    .projects-final-cta-content p {
        font-size: 12px;
    }


    .projects-final-cta-primary,
    .projects-final-cta-secondary {
        font-size: 9px;
    }

}


/* =========================================================
   24 — REDUCED MOTION
========================================================= */

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

    .projects-final-cta-primary,
    .projects-final-cta-primary:hover,
    .projects-final-cta-button-icon,
    .projects-final-cta-secondary,
    .projects-final-cta-top-link {
        transition: none;
        transform: none;
    }

}
 /* =========================================================
   04 — FEATURED PREVENTIVE MAINTENANCE
   ELISHA & CHARLES SOLUTIONS INC.
   Editorial Project Showcase
========================================================= */

.featured-pms {
    position: relative;
    padding: 140px 0;
    background: #f5f5f3;
    color: #111;
    overflow: hidden;
}


/* =========================================================
   CONTAINER
========================================================= */

.featured-pms .container {
    width: min(1380px, calc(100% - 60px));
    margin: 0 auto;
}


/* =========================================================
   SECTION HEADER
========================================================= */

.featured-pms-header {
    display: grid;
    grid-template-columns: 0.7fr 2fr 1.3fr;
    gap: 60px;
    align-items: end;
    margin-bottom: 100px;
    padding-bottom: 35px;
    border-bottom: 1px solid rgba(17, 17, 17, 0.15);
}


/* =========================================================
   SECTION INDEX
========================================================= */

.featured-pms-index {
    display: flex;
    align-items: center;
    gap: 16px;
}

.featured-pms-number {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.featured-pms-index-line {
    width: 45px;
    height: 1px;
    background: #111;
}

.featured-pms-index-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: #666;
}


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

.featured-pms-eyebrow {
    display: block;
    margin-bottom: 18px;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2em;

    color: #777;
}

.featured-pms-heading h2 {
    margin: 0;

    max-width: 760px;

    font-size: clamp(42px, 5vw, 78px);
    line-height: 0.98;
    font-weight: 500;
    letter-spacing: -0.04em;
}

.featured-pms-heading h2 span {
    display: block;
    color: #888;
}


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

.featured-pms-intro {
    max-width: 430px;

    margin: 0;

    font-size: 15px;
    line-height: 1.8;

    color: #666;
}


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

.featured-pms-project {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);

    min-height: 600px;

    margin-bottom: 100px;

    background: #fff;
}


/* =========================================================
   REVERSE PROJECT
========================================================= */

.featured-pms-project-reverse {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
}

.featured-pms-project-reverse .featured-pms-image {
    order: 2;
}

.featured-pms-project-reverse .featured-pms-content {
    order: 1;
}


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

.featured-pms-image {
    position: relative;

    min-height: 600px;

    overflow: hidden;

    background: #ddd;
}

.featured-pms-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

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


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

.featured-pms-project:hover .featured-pms-image img {
    transform: scale(1.045);
}


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

.featured-pms-image-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.05) 0%,
            rgba(0, 0, 0, 0.1) 45%,
            rgba(0, 0, 0, 0.55) 100%
        );

    pointer-events: none;
}


/* =========================================================
   IMAGE LABEL
========================================================= */

.featured-pms-image-label {
    position: absolute;

    left: 30px;
    bottom: 28px;

    padding: 9px 14px;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.18em;

    color: #fff;

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

    background: rgba(0, 0, 0, 0.2);

    backdrop-filter: blur(8px);
}


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

.featured-pms-content {
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 80px;
}


/* =========================================================
   PROJECT TOP
========================================================= */

.featured-pms-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 45px;

    padding-bottom: 18px;

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

.featured-pms-project-number {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
}

.featured-pms-project-type {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.18em;

    color: #777;
}


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

.featured-pms-content h3 {
    margin: 0 0 25px;

    font-size: clamp(32px, 3.2vw, 54px);
    line-height: 1;
    font-weight: 500;

    letter-spacing: -0.035em;
}

.featured-pms-content h3 span {
    display: block;
    color: #888;
}


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

.featured-pms-content > p {
    max-width: 560px;

    margin: 0 0 45px;

    font-size: 14px;
    line-height: 1.85;

    color: #666;
}


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

.featured-pms-meta {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 25px;

    margin-bottom: 45px;
}

.featured-pms-meta div {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.featured-pms-meta span {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.16em;

    color: #999;
}

.featured-pms-meta strong {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;

    color: #222;
}


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

.featured-pms-link {
    display: inline-flex;
    align-items: center;
    gap: 16px;

    width: fit-content;

    padding-bottom: 10px;

    color: #111;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;

    text-decoration: none;

    border-bottom: 1px solid #111;

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

.featured-pms-link i {
    font-size: 11px;

    transition:
        transform 0.3s ease;
}

.featured-pms-link:hover {
    gap: 22px;
    opacity: 0.6;
}

.featured-pms-link:hover i {
    transform: translateX(4px);
}


/* =========================================================
   PMS FOOTER
========================================================= */

.featured-pms-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 50px;

    padding: 50px 0 0;

    border-top: 1px solid rgba(17, 17, 17, 0.15);
}


/* =========================================================
   FOOTER COPY
========================================================= */

.featured-pms-footer-copy span {
    display: block;

    margin-bottom: 12px;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.2em;

    color: #777;
}

.featured-pms-footer-copy p {
    max-width: 600px;

    margin: 0;

    font-size: 14px;
    line-height: 1.7;

    color: #666;
}


/* =========================================================
   FOOTER LINK
========================================================= */

.featured-pms-footer-link {
    display: inline-flex;
    align-items: center;
    gap: 18px;

    flex-shrink: 0;

    padding: 18px 24px;

    color: #fff;

    background: #111;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;

    text-decoration: none;

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

.featured-pms-footer-link i {
    transition: transform 0.3s ease;
}

.featured-pms-footer-link:hover {
    background: #333;
    transform: translateY(-3px);
}

.featured-pms-footer-link:hover i {
    transform: translateX(4px);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    .featured-pms {
        padding: 110px 0;
    }

    .featured-pms-header {
        grid-template-columns: 1fr;
        gap: 25px;
        margin-bottom: 70px;
    }

    .featured-pms-intro {
        max-width: 650px;
    }

    .featured-pms-project,
    .featured-pms-project-reverse {
        grid-template-columns: 1fr 1fr;
        min-height: 520px;
    }

    .featured-pms-image {
        min-height: 520px;
    }

    .featured-pms-content {
        padding: 55px;
    }

    .featured-pms-meta {
        gap: 15px;
    }
}


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

@media (max-width: 768px) {

    .featured-pms {
        padding: 80px 0;
    }

    .featured-pms .container {
        width: min(100% - 36px, 600px);
    }


    /* HEADER */

    .featured-pms-header {
        gap: 22px;

        margin-bottom: 55px;
        padding-bottom: 25px;
    }

    .featured-pms-index {
        gap: 12px;
    }

    .featured-pms-index-line {
        width: 30px;
    }

    .featured-pms-heading h2 {
        font-size: clamp(38px, 11vw, 58px);
    }

    .featured-pms-intro {
        font-size: 14px;
        line-height: 1.75;
    }


    /* PROJECT */

    .featured-pms-project,
    .featured-pms-project-reverse {
        display: flex;
        flex-direction: column;

        margin-bottom: 55px;
    }


    .featured-pms-project-reverse .featured-pms-image,
    .featured-pms-project-reverse .featured-pms-content {
        order: initial;
    }


    /* IMAGE */

    .featured-pms-image {
        min-height: 360px;
        height: 360px;
    }


    /* CONTENT */

    .featured-pms-content {
        padding: 40px 28px 45px;
    }


    .featured-pms-top {
        margin-bottom: 32px;
    }

    .featured-pms-content h3 {
        font-size: 38px;
        margin-bottom: 20px;
    }

    .featured-pms-content > p {
        margin-bottom: 35px;

        font-size: 13px;
        line-height: 1.8;
    }


    /* META */

    .featured-pms-meta {
        grid-template-columns: 1fr;

        gap: 18px;

        margin-bottom: 35px;
    }

    .featured-pms-meta div {
        display: grid;
        grid-template-columns: 110px 1fr;
        gap: 12px;
        align-items: center;
    }


    /* FOOTER */

    .featured-pms-footer {
        flex-direction: column;
        align-items: flex-start;

        gap: 30px;

        padding-top: 35px;
    }

    .featured-pms-footer-link {
        width: 100%;
        justify-content: space-between;
    }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .featured-pms {
        padding: 65px 0;
    }

    .featured-pms .container {
        width: calc(100% - 28px);
    }

    .featured-pms-number {
        font-size: 12px;
    }

    .featured-pms-index-label {
        font-size: 8px;
    }

    .featured-pms-heading h2 {
        font-size: 39px;
    }

    .featured-pms-image {
        height: 280px;
        min-height: 280px;
    }

    .featured-pms-image-label {
        left: 18px;
        bottom: 18px;

        padding: 8px 11px;

        font-size: 8px;
    }

    .featured-pms-content {
        padding: 32px 22px 38px;
    }

    .featured-pms-top {
        margin-bottom: 27px;
    }

    .featured-pms-content h3 {
        font-size: 32px;
    }

    .featured-pms-meta div {
        grid-template-columns: 1fr;
        gap: 5px;
    }

    .featured-pms-footer-copy p {
        font-size: 13px;
    }

    .featured-pms-footer-link {
        padding: 16px 18px;
        font-size: 9px;
    }
}
/* =========================================================
   05 — BEYOND THE PROJECT
   ELISHA & CHARLES SOLUTIONS INC.
   Full-Width Statement / Service Transition
========================================================= */

.projects-statement {
    position: relative;

    min-height: 850px;

    padding: 130px 0 90px;

    overflow: hidden;

    background: #0B2545;
    color: #EEF4ED;
}


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

.projects-statement-bg {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            135deg,
            #0B2545 0%,
            #13315C 45%,
            #0B2545 100%
        );

    z-index: 0;
}


/* =========================================================
   TECHNICAL GRID
========================================================= */

.projects-statement-bg::before {
    content: "";

    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(141, 169, 196, 0.08) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(141, 169, 196, 0.08) 1px,
            transparent 1px
        );

    background-size: 80px 80px;

    opacity: 0.55;
}


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

.projects-statement-overlay {
    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            circle at 75% 35%,
            rgba(141, 169, 196, 0.12),
            transparent 38%
        );

    z-index: 1;

    pointer-events: none;
}


/* =========================================================
   TECHNICAL VERTICAL LINE
========================================================= */

.projects-statement-line {
    position: absolute;

    top: 0;
    bottom: 0;
    left: 50%;

    width: 1px;

    background: rgba(141, 169, 196, 0.2);

    z-index: 2;

    pointer-events: none;
}


/* =========================================================
   CONTAINER
========================================================= */

.projects-statement .container {
    position: relative;
    z-index: 3;

    width: min(1380px, calc(100% - 60px));

    margin: 0 auto;
}


/* =========================================================
   TOP META
========================================================= */

.projects-statement-top {
    display: flex;

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

    padding-bottom: 28px;

    margin-bottom: 110px;

    border-bottom: 1px solid rgba(141, 169, 196, 0.3);
}


/* =========================================================
   INDEX
========================================================= */

.projects-statement-index {
    display: flex;

    align-items: center;

    gap: 16px;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 0.2em;

    color: rgba(141, 169, 196, 0.75);
}

.projects-statement-number {
    font-size: 13px;

    color: #EEF4ED;
}

.projects-statement-index-line {
    width: 48px;
    height: 1px;

    background: rgba(141, 169, 196, 0.6);
}


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

.projects-statement-meta {
    font-size: 9px;

    font-weight: 700;

    letter-spacing: 0.18em;

    color: rgba(141, 169, 196, 0.55);
}


/* =========================================================
   MAIN CONTENT
========================================================= */

.projects-statement-content {
    max-width: 1050px;

    margin-bottom: 100px;
}


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

.projects-statement-eyebrow {
    display: block;

    margin-bottom: 25px;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 0.2em;

    color: rgba(141, 169, 196, 0.7);
}


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

.projects-statement-title {
    max-width: 1000px;

    margin: 0 0 40px;

    font-size: clamp(58px, 8vw, 120px);

    line-height: 0.9;

    font-weight: 500;

    letter-spacing: -0.055em;

    color: #EEF4ED;
}

.projects-statement-title span {
    display: block;

    color: rgba(141, 169, 196, 0.65);
}


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

.projects-statement-description {
    max-width: 680px;

    margin: 0;

    font-size: 16px;

    line-height: 1.9;

    color: rgba(238, 244, 237, 0.68);
}


/* =========================================================
   SERVICE LIFECYCLE
========================================================= */

.projects-statement-services {
    display: grid;

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

    margin-bottom: 100px;

    border-top: 1px solid rgba(141, 169, 196, 0.3);
    border-bottom: 1px solid rgba(141, 169, 196, 0.3);
}


/* =========================================================
   SERVICE ITEM
========================================================= */

.projects-statement-service {
    display: flex;

    align-items: flex-start;

    gap: 20px;

    min-height: 150px;

    padding: 35px 30px;

    border-right: 1px solid rgba(141, 169, 196, 0.2);

    transition:
        background 0.35s ease,
        padding 0.35s ease;
}

.projects-statement-service:first-child {
    padding-left: 0;
}

.projects-statement-service:last-child {
    border-right: none;
}


/* =========================================================
   SERVICE NUMBER
========================================================= */

.projects-statement-service > span {
    flex-shrink: 0;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 0.1em;

    color: rgba(141, 169, 196, 0.55);
}


/* =========================================================
   SERVICE CONTENT
========================================================= */

.projects-statement-service div {
    display: flex;

    flex-direction: column;

    gap: 10px;
}

.projects-statement-service strong {
    font-size: 14px;

    font-weight: 600;

    line-height: 1.3;

    color: #EEF4ED;
}

.projects-statement-service small {
    font-size: 8px;

    font-weight: 700;

    letter-spacing: 0.14em;

    color: rgba(141, 169, 196, 0.55);
}


/* =========================================================
   SERVICE HOVER
========================================================= */

.projects-statement-service:hover {
    background: rgba(141, 169, 196, 0.08);

    padding-left: 35px;
}

.projects-statement-service:first-child:hover {
    padding-left: 5px;
}


/* =========================================================
   BOTTOM
========================================================= */

.projects-statement-bottom {
    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 60px;
}


/* =========================================================
   BOTTOM COPY
========================================================= */

.projects-statement-bottom-copy {
    max-width: 700px;
}

.projects-statement-bottom-label {
    display: block;

    margin-bottom: 20px;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 0.2em;

    color: rgba(141, 169, 196, 0.55);
}

.projects-statement-bottom-copy p {
    margin: 0;

    font-size: clamp(24px, 3vw, 42px);

    line-height: 1.1;

    font-weight: 400;

    letter-spacing: -0.025em;

    color: #EEF4ED;
}


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

.projects-statement-action {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 20px;

    flex-shrink: 0;

    padding: 20px 26px;

    color: #0B2545;

    background: #EEF4ED;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 0.12em;

    text-decoration: none;

    transition:
        transform 0.3s ease,
        background 0.3s ease,
        color 0.3s ease;
}

.projects-statement-action i {
    transition:
        transform 0.3s ease;
}

.projects-statement-action:hover {
    transform: translateY(-4px);

    background: #8DA9C4;

    color: #0B2545;
}

.projects-statement-action:hover i {
    transform: translateX(5px);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    .projects-statement {
        padding: 110px 0 80px;
    }

    .projects-statement-top {
        margin-bottom: 80px;
    }

    .projects-statement-content {
        margin-bottom: 80px;
    }

    .projects-statement-title {
        font-size: clamp(55px, 8vw, 90px);
    }

    .projects-statement-services {
        grid-template-columns: repeat(2, 1fr);

        margin-bottom: 80px;
    }

    .projects-statement-service {
        border-bottom: 1px solid rgba(141, 169, 196, 0.2);
    }

    .projects-statement-service:nth-child(2) {
        border-right: none;
    }

    .projects-statement-service:nth-child(3),
    .projects-statement-service:nth-child(4) {
        border-bottom: none;
    }

    .projects-statement-service:nth-child(3) {
        padding-left: 0;
    }

    .projects-statement-bottom {
        align-items: flex-start;
    }
}


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

@media (max-width: 768px) {

    .projects-statement {
        min-height: auto;

        padding: 80px 0 65px;
    }

    .projects-statement .container {
        width: min(100% - 36px, 600px);
    }


    /* TOP */

    .projects-statement-top {
        flex-direction: column;

        align-items: flex-start;

        gap: 18px;

        margin-bottom: 65px;

        padding-bottom: 22px;
    }

    .projects-statement-meta {
        font-size: 8px;
    }


    /* VERTICAL LINE */

    .projects-statement-line {
        left: 24px;

        opacity: 0.5;
    }


    /* CONTENT */

    .projects-statement-content {
        margin-bottom: 65px;
    }

    .projects-statement-eyebrow {
        font-size: 8px;

        line-height: 1.5;

        margin-bottom: 20px;
    }

    .projects-statement-title {
        font-size: clamp(48px, 13vw, 72px);

        line-height: 0.92;

        margin-bottom: 30px;
    }

    .projects-statement-description {
        font-size: 14px;

        line-height: 1.8;
    }


    /* SERVICES */

    .projects-statement-services {
        grid-template-columns: 1fr;

        margin-bottom: 65px;
    }

    .projects-statement-service,
    .projects-statement-service:first-child,
    .projects-statement-service:nth-child(3) {
        min-height: auto;

        padding: 25px 0;

        border-right: none;

        border-bottom: 1px solid rgba(141, 169, 196, 0.2);
    }

    .projects-statement-service:last-child {
        border-bottom: none;
    }

    .projects-statement-service:hover,
    .projects-statement-service:first-child:hover {
        padding-left: 8px;
    }


    /* BOTTOM */

    .projects-statement-bottom {
        flex-direction: column;

        align-items: flex-start;

        gap: 35px;
    }

    .projects-statement-bottom-copy p {
        font-size: 29px;

        line-height: 1.1;
    }


    /* CTA */

    .projects-statement-action {
        width: 100%;

        justify-content: space-between;

        padding: 18px 20px;
    }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .projects-statement {
        padding: 65px 0 55px;
    }

    .projects-statement .container {
        width: calc(100% - 28px);
    }

    .projects-statement-title {
        font-size: 46px;
    }

    .projects-statement-description {
        font-size: 13px;
    }

    .projects-statement-bottom-copy p {
        font-size: 26px;
    }

    .projects-statement-service strong {
        font-size: 13px;
    }

    .projects-statement-action {
        font-size: 9px;
    }
}
/* =========================================================
   06 — SYSTEM PERFORMANCE & CARE
   ELISHA & CHARLES SOLUTIONS INC.
   Technical Maintenance & Support
========================================================= */

.pms-section {
    position: relative;

    padding: 140px 0;

    background: #f4f4f1;

    color: #111;

    overflow: hidden;
}


/* =========================================================
   CONTAINER
========================================================= */

.pms-section .container {
    width: min(1380px, calc(100% - 60px));

    margin: 0 auto;
}


/* =========================================================
   HEADER
========================================================= */

.pms-header {
    display: grid;

    grid-template-columns:
        0.65fr
        2fr
        1.25fr;

    gap: 60px;

    align-items: end;

    margin-bottom: 90px;

    padding-bottom: 35px;

    border-bottom: 1px solid rgba(17, 17, 17, 0.15);
}


/* =========================================================
   HEADER INDEX
========================================================= */

.pms-header-index {
    display: flex;

    align-items: center;

    gap: 15px;
}

.pms-header-number {
    font-size: 14px;

    font-weight: 700;

    letter-spacing: 0.08em;
}

.pms-header-line {
    width: 45px;

    height: 1px;

    background: #111;
}

.pms-header-label {
    font-size: 9px;

    font-weight: 700;

    letter-spacing: 0.18em;

    color: #777;
}


/* =========================================================
   HEADER MAIN
========================================================= */

.pms-eyebrow {
    display: block;

    margin-bottom: 18px;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 0.2em;

    color: #777;
}

.pms-header-main h2 {
    margin: 0;

    max-width: 780px;

    font-size: clamp(45px, 5.5vw, 78px);

    line-height: 0.95;

    font-weight: 500;

    letter-spacing: -0.045em;
}

.pms-header-main h2 span {
    display: block;

    color: #888;
}


/* =========================================================
   HEADER DESCRIPTION
========================================================= */

.pms-header-description p {
    max-width: 430px;

    margin: 0;

    font-size: 14px;

    line-height: 1.85;

    color: #666;
}


/* =========================================================
   INTRO STRIP
========================================================= */

.pms-intro-strip {
    display: grid;

    grid-template-columns:
        0.65fr
        2fr
        1.25fr;

    gap: 60px;

    align-items: center;

    margin-bottom: 90px;

    padding: 30px 0;

    border-top: 1px solid rgba(17, 17, 17, 0.1);

    border-bottom: 1px solid rgba(17, 17, 17, 0.1);
}


/* =========================================================
   INTRO LABEL
========================================================= */

.pms-intro-label {
    display: flex;

    align-items: center;

    gap: 15px;
}

.pms-intro-label span {
    font-size: 10px;

    font-weight: 700;

    color: #999;
}

.pms-intro-label strong {
    font-size: 9px;

    font-weight: 700;

    letter-spacing: 0.16em;
}


/* =========================================================
   INTRO TEXT
========================================================= */

.pms-intro-strip > p {
    max-width: 650px;

    margin: 0;

    font-size: 14px;

    line-height: 1.75;

    color: #666;
}


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

.pms-intro-status {
    display: flex;

    justify-content: flex-end;

    align-items: center;

    gap: 10px;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 0.15em;

    color: #777;
}

.pms-status-dot {
    width: 7px;

    height: 7px;

    border-radius: 50%;

    background: #111;

    box-shadow:
        0 0 0 5px rgba(17, 17, 17, 0.08);
}


/* =========================================================
   SERVICE PROCESS
========================================================= */

.pms-service-process {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    margin-bottom: 110px;

    border-top: 1px solid rgba(17, 17, 17, 0.15);

    border-bottom: 1px solid rgba(17, 17, 17, 0.15);
}


/* =========================================================
   PROCESS ITEM
========================================================= */

.pms-process-item {
    position: relative;

    min-height: 340px;

    padding: 38px 35px;

    border-right: 1px solid rgba(17, 17, 17, 0.12);

    transition:
        background 0.35s ease,
        transform 0.35s ease;
}

.pms-process-item:first-child {
    padding-left: 0;
}

.pms-process-item:last-child {
    border-right: none;
}


/* =========================================================
   PROCESS NUMBER
========================================================= */

.pms-process-number {
    margin-bottom: 80px;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 0.12em;

    color: #999;
}


/* =========================================================
   PROCESS CONTENT
========================================================= */

.pms-process-content > span {
    display: block;

    margin-bottom: 14px;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 0.18em;

    color: #999;
}

.pms-process-content h3 {
    margin: 0 0 18px;

    font-size: 32px;

    line-height: 1;

    font-weight: 500;

    letter-spacing: -0.035em;
}

.pms-process-content p {
    max-width: 240px;

    margin: 0;

    font-size: 12px;

    line-height: 1.75;

    color: #666;
}


/* =========================================================
   PROCESS ARROW
========================================================= */

.pms-process-item > i {
    position: absolute;

    right: 30px;

    bottom: 32px;

    font-size: 11px;

    color: #aaa;

    transition:
        transform 0.35s ease,
        color 0.35s ease;
}


/* =========================================================
   PROCESS HOVER
========================================================= */

.pms-process-item:hover {
    background: #fff;

    transform: translateY(-4px);
}

.pms-process-item:hover > i {
    transform: translateX(6px);

    color: #111;
}


/* =========================================================
   COVERAGE
========================================================= */

.pms-coverage {
    display: grid;

    grid-template-columns: 0.85fr 1.15fr;

    gap: 100px;

    margin-bottom: 100px;

    padding: 70px 0;

    border-top: 1px solid rgba(17, 17, 17, 0.15);

    border-bottom: 1px solid rgba(17, 17, 17, 0.15);
}


/* =========================================================
   COVERAGE HEADING
========================================================= */

.pms-coverage-heading > span {
    display: block;

    margin-bottom: 20px;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 0.2em;

    color: #888;
}

.pms-coverage-heading h3 {
    max-width: 480px;

    margin: 0 0 25px;

    font-size: clamp(38px, 4vw, 58px);

    line-height: 0.98;

    font-weight: 500;

    letter-spacing: -0.045em;
}

.pms-coverage-heading h3 strong {
    display: block;

    font-weight: 500;

    color: #888;
}

.pms-coverage-heading > p {
    max-width: 440px;

    margin: 0;

    font-size: 13px;

    line-height: 1.8;

    color: #666;
}


/* =========================================================
   COVERAGE LIST
========================================================= */

.pms-coverage-list {
    border-top: 1px solid rgba(17, 17, 17, 0.12);
}


/* =========================================================
   COVERAGE ITEM
========================================================= */

.pms-coverage-item {
    display: grid;

    grid-template-columns: 50px 1fr;

    gap: 20px;

    align-items: start;

    padding: 22px 0;

    border-bottom: 1px solid rgba(17, 17, 17, 0.1);
}

.pms-coverage-item > span {
    font-size: 9px;

    font-weight: 700;

    letter-spacing: 0.1em;

    color: #aaa;
}

.pms-coverage-item strong {
    display: block;

    margin-bottom: 7px;

    font-size: 13px;

    font-weight: 600;
}

.pms-coverage-item p {
    margin: 0;

    font-size: 11px;

    line-height: 1.6;

    color: #777;
}


/* =========================================================
   FOOTER
========================================================= */

.pms-footer {
    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 60px;

    padding-top: 50px;

    border-top: 1px solid rgba(17, 17, 17, 0.15);
}


/* =========================================================
   FOOTER COPY
========================================================= */

.pms-footer-copy {
    max-width: 700px;
}

.pms-footer-copy > span {
    display: block;

    margin-bottom: 18px;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 0.2em;

    color: #888;
}

.pms-footer-copy p {
    margin: 0;

    font-size: clamp(22px, 2.6vw, 38px);

    line-height: 1.15;

    letter-spacing: -0.025em;
}


/* =========================================================
   FOOTER ACTIONS
========================================================= */

.pms-footer-actions {
    display: flex;

    align-items: center;

    gap: 12px;

    flex-shrink: 0;
}


/* =========================================================
   PRIMARY CTA
========================================================= */

.pms-footer-link {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 18px;

    padding: 18px 24px;

    color: #fff;

    background: #111;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 0.12em;

    text-decoration: none;

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

.pms-footer-link i {
    transition:
        transform 0.3s ease;
}

.pms-footer-link:hover {
    transform: translateY(-3px);

    background: #333;
}

.pms-footer-link:hover i {
    transform: translateX(5px);
}


/* =========================================================
   SECONDARY CTA
========================================================= */

.pms-footer-secondary {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 15px;

    padding: 17px 20px;

    color: #111;

    background: transparent;

    border: 1px solid rgba(17, 17, 17, 0.2);

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 0.1em;

    text-decoration: none;

    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;
}

.pms-footer-secondary:hover {
    color: #fff;

    background: #111;

    transform: translateY(-3px);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    .pms-section {
        padding: 110px 0;
    }

    .pms-header {
        grid-template-columns: 1fr;

        gap: 25px;

        margin-bottom: 70px;
    }

    .pms-intro-strip {
        grid-template-columns: 1fr;

        gap: 25px;

        margin-bottom: 70px;
    }

    .pms-intro-status {
        justify-content: flex-start;
    }

    .pms-service-process {
        grid-template-columns: repeat(2, 1fr);

        margin-bottom: 80px;
    }

    .pms-process-item:nth-child(2) {
        border-right: none;
    }

    .pms-process-item:nth-child(1),
    .pms-process-item:nth-child(2) {
        border-bottom: 1px solid rgba(17, 17, 17, 0.12);
    }

    .pms-coverage {
        grid-template-columns: 1fr;

        gap: 60px;

        margin-bottom: 80px;
    }

    .pms-footer {
        align-items: flex-start;
    }

    .pms-footer-actions {
        flex-direction: column;

        align-items: stretch;
    }
}


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

@media (max-width: 768px) {

    .pms-section {
        padding: 80px 0;
    }

    .pms-section .container {
        width: min(100% - 36px, 600px);
    }


    /* HEADER */

    .pms-header {
        gap: 22px;

        margin-bottom: 55px;

        padding-bottom: 25px;
    }

    .pms-header-index {
        gap: 12px;
    }

    .pms-header-line {
        width: 30px;
    }

    .pms-header-main h2 {
        font-size: clamp(40px, 11vw, 58px);
    }

    .pms-header-description p {
        font-size: 13px;

        line-height: 1.8;
    }


    /* INTRO */

    .pms-intro-strip {
        gap: 20px;

        margin-bottom: 60px;

        padding: 25px 0;
    }

    .pms-intro-strip > p {
        font-size: 13px;

        line-height: 1.75;
    }


    /* PROCESS */

    .pms-service-process {
        grid-template-columns: 1fr;

        margin-bottom: 65px;
    }

    .pms-process-item,
    .pms-process-item:first-child {
        min-height: auto;

        padding: 28px 0;

        border-right: none;

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

    .pms-process-item:last-child {
        border-bottom: none;
    }

    .pms-process-number {
        margin-bottom: 35px;
    }

    .pms-process-content h3 {
        font-size: 29px;
    }

    .pms-process-content p {
        max-width: 100%;

        font-size: 12px;
    }

    .pms-process-item > i {
        right: 5px;

        bottom: 28px;
    }


    /* COVERAGE */

    .pms-coverage {
        gap: 45px;

        margin-bottom: 60px;

        padding: 50px 0;
    }

    .pms-coverage-heading h3 {
        font-size: 39px;
    }

    .pms-coverage-heading > p {
        font-size: 12px;
    }


    /* FOOTER */

    .pms-footer {
        flex-direction: column;

        align-items: flex-start;

        gap: 35px;

        padding-top: 35px;
    }

    .pms-footer-copy p {
        font-size: 27px;
    }

    .pms-footer-actions {
        width: 100%;

        flex-direction: column;

        gap: 10px;
    }

    .pms-footer-link,
    .pms-footer-secondary {
        width: 100%;

        justify-content: space-between;
    }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .pms-section {
        padding: 65px 0;
    }

    .pms-section .container {
        width: calc(100% - 28px);
    }

    .pms-header-main h2 {
        font-size: 39px;
    }

    .pms-intro-label strong {
        font-size: 8px;
    }

    .pms-process-content h3 {
        font-size: 27px;
    }

    .pms-coverage-heading h3 {
        font-size: 34px;
    }

    .pms-footer-copy p {
        font-size: 24px;
    }

    .pms-footer-link,
    .pms-footer-secondary {
        padding: 16px 18px;

        font-size: 8px;
    }
}
/* =========================================================
   07 — BUILDING EXPERIENCE
   ELISHA & CHARLES SOLUTIONS INC.
   Building Applications / Project Experience
========================================================= */

.project-experience {
    position: relative;

    padding: 145px 0;

    background: #ffffff;

    color: #111;

    overflow: hidden;
}


/* =========================================================
   CONTAINER
========================================================= */

.project-experience .container {
    width: min(1380px, calc(100% - 60px));

    margin: 0 auto;
}


/* =========================================================
   SECTION HEADER
========================================================= */

.project-experience-header {
    display: grid;

    grid-template-columns:
        0.65fr
        2fr
        1.25fr;

    gap: 60px;

    align-items: end;

    margin-bottom: 85px;

    padding-bottom: 35px;

    border-bottom: 1px solid rgba(17, 17, 17, 0.14);
}


/* =========================================================
   INDEX
========================================================= */

.project-experience-index {
    display: flex;

    align-items: center;

    gap: 15px;
}

.project-experience-number {
    font-size: 14px;

    font-weight: 700;

    letter-spacing: 0.08em;
}

.project-experience-line {
    width: 45px;

    height: 1px;

    background: #111;
}

.project-experience-label {
    font-size: 9px;

    font-weight: 700;

    letter-spacing: 0.17em;

    color: #777;
}


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

.project-experience-eyebrow {
    display: block;

    margin-bottom: 18px;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 0.2em;

    color: #777;
}

.project-experience-heading h2 {
    max-width: 760px;

    margin: 0;

    font-size: clamp(48px, 5.5vw, 78px);

    line-height: 0.95;

    font-weight: 500;

    letter-spacing: -0.05em;
}

.project-experience-heading h2 span {
    display: block;

    color: #8b8b8b;
}


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

.project-experience-intro {
    max-width: 440px;

    margin: 0;

    font-size: 14px;

    line-height: 1.85;

    color: #666;
}


/* =========================================================
   EXPERIENCE GRID
========================================================= */

.project-experience-grid {
    display: grid;

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

    border-top: 1px solid rgba(17, 17, 17, 0.14);

    border-left: 1px solid rgba(17, 17, 17, 0.14);

    margin-bottom: 90px;
}


/* =========================================================
   EXPERIENCE ITEM
========================================================= */

.experience-item {
    position: relative;

    min-height: 390px;

    padding: 38px 40px;

    border-right: 1px solid rgba(17, 17, 17, 0.14);

    border-bottom: 1px solid rgba(17, 17, 17, 0.14);

    overflow: hidden;

    transition:
        background 0.4s ease,
        color 0.4s ease;
}


/* =========================================================
   FEATURED ITEM
========================================================= */

.experience-item-featured {
    background: #111;

    color: #fff;
}

.experience-item-featured .experience-item-type,
.experience-item-featured .experience-item-number,
.experience-item-featured .experience-item-content p {
    color: rgba(255, 255, 255, 0.55);
}

.experience-item-featured .experience-item-icon {
    color: rgba(255, 255, 255, 0.08);
}


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

.experience-item-number {
    font-size: 10px;

    font-weight: 700;

    letter-spacing: 0.12em;

    color: #999;

    transition: color 0.3s ease;
}


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

.experience-item-content {
    position: relative;

    z-index: 2;

    max-width: 470px;

    margin-top: 105px;
}

.experience-item-type {
    display: block;

    margin-bottom: 14px;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 0.2em;

    color: #999;
}

.experience-item-content h3 {
    margin: 0 0 18px;

    font-size: clamp(35px, 4vw, 54px);

    line-height: 0.95;

    font-weight: 500;

    letter-spacing: -0.04em;
}

.experience-item-content p {
    max-width: 390px;

    margin: 0;

    font-size: 12px;

    line-height: 1.8;

    color: #666;
}


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

.experience-item-icon {
    position: absolute;

    right: 35px;

    bottom: 30px;

    font-size: 85px;

    line-height: 1;

    color: rgba(17, 17, 17, 0.045);

    transition:
        transform 0.5s ease,
        color 0.5s ease;
}


/* =========================================================
   ARROW
========================================================= */

.experience-item-arrow {
    position: absolute;

    top: 35px;

    right: 35px;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 36px;

    height: 36px;

    border: 1px solid rgba(17, 17, 17, 0.15);

    font-size: 10px;

    color: #555;

    transition:
        transform 0.35s ease,
        background 0.35s ease,
        color 0.35s ease;
}

.experience-item-featured .experience-item-arrow {
    border-color: rgba(255, 255, 255, 0.2);

    color: #fff;
}


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

.experience-item:not(.experience-item-featured):hover {
    background: #f4f4f1;
}

.experience-item:hover .experience-item-icon {
    transform: translate(-10px, -10px) scale(1.08);

    color: rgba(17, 17, 17, 0.09);
}

.experience-item:hover .experience-item-arrow {
    transform: translate(4px, -4px);

    background: #111;

    color: #fff;

    border-color: #111;
}


/* =========================================================
   FEATURED HOVER
========================================================= */

.experience-item-featured:hover {
    background: #181818;
}

.experience-item-featured:hover .experience-item-icon {
    transform: translate(-10px, -10px) scale(1.08);

    color: rgba(255, 255, 255, 0.12);
}


/* =========================================================
   EXPERIENCE STATEMENT
========================================================= */

.project-experience-statement {
    display: grid;

    grid-template-columns:
        90px
        1fr
        90px;

    gap: 40px;

    align-items: center;

    margin-bottom: 75px;

    padding: 55px 0;

    border-top: 1px solid rgba(17, 17, 17, 0.14);

    border-bottom: 1px solid rgba(17, 17, 17, 0.14);
}


/* =========================================================
   STATEMENT MARK
========================================================= */

.experience-statement-mark {
    display: flex;

    align-items: center;

    gap: 6px;
}

.experience-statement-mark span {
    display: block;

    width: 7px;

    height: 35px;

    background: #111;
}

.experience-statement-mark span:nth-child(2) {
    height: 24px;
}

.experience-statement-mark span:nth-child(3) {
    height: 14px;
}


/* =========================================================
   STATEMENT CONTENT
========================================================= */

.experience-statement-content > span {
    display: block;

    margin-bottom: 15px;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 0.2em;

    color: #888;
}

.experience-statement-content p {
    max-width: 850px;

    margin: 0;

    font-size: clamp(18px, 2vw, 27px);

    line-height: 1.4;

    letter-spacing: -0.015em;

    color: #333;
}


/* =========================================================
   STATEMENT NUMBER
========================================================= */

.experience-statement-number {
    text-align: right;

    font-size: 70px;

    line-height: 1;

    font-weight: 300;

    letter-spacing: -0.05em;

    color: #e4e4e1;
}


/* =========================================================
   FOOTER
========================================================= */

.project-experience-footer {
    display: flex;

    align-items: center;

    gap: 25px;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 0.16em;

    color: #888;
}

.project-experience-footer-line {
    flex: 1;

    height: 1px;

    background: rgba(17, 17, 17, 0.12);
}


/* =========================================================
   LARGE TABLET
========================================================= */

@media (max-width: 1100px) {

    .project-experience {
        padding: 110px 0;
    }

    .project-experience-header {
        grid-template-columns: 1fr;

        gap: 25px;

        margin-bottom: 70px;
    }

    .project-experience-grid {
        margin-bottom: 70px;
    }

    .experience-item {
        min-height: 350px;
    }

    .experience-item-content {
        margin-top: 80px;
    }

    .project-experience-statement {
        grid-template-columns:
            60px
            1fr
            60px;

        gap: 25px;
    }
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 768px) {

    .project-experience {
        padding: 85px 0;
    }

    .project-experience .container {
        width: min(100% - 36px, 600px);
    }


    /* HEADER */

    .project-experience-header {
        gap: 22px;

        margin-bottom: 55px;

        padding-bottom: 25px;
    }

    .project-experience-line {
        width: 30px;
    }

    .project-experience-heading h2 {
        font-size: clamp(40px, 11vw, 58px);
    }

    .project-experience-intro {
        font-size: 13px;

        line-height: 1.8;
    }


    /* GRID */

    .project-experience-grid {
        grid-template-columns: 1fr;

        margin-bottom: 60px;
    }

    .experience-item {
        min-height: 330px;

        padding: 30px;
    }

    .experience-item-content {
        margin-top: 75px;
    }

    .experience-item-content h3 {
        font-size: 39px;
    }

    .experience-item-content p {
        max-width: 100%;

        font-size: 12px;
    }

    .experience-item-icon {
        right: 25px;

        bottom: 25px;

        font-size: 65px;
    }


    /* STATEMENT */

    .project-experience-statement {
        grid-template-columns: 45px 1fr;

        gap: 20px;

        margin-bottom: 55px;

        padding: 40px 0;
    }

    .experience-statement-number {
        display: none;
    }

    .experience-statement-content p {
        font-size: 18px;

        line-height: 1.5;
    }


    /* FOOTER */

    .project-experience-footer {
        flex-wrap: wrap;

        gap: 12px;

        line-height: 1.5;
    }

    .project-experience-footer-line {
        min-width: 40px;
    }
}


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

@media (max-width: 480px) {

    .project-experience {
        padding: 70px 0;
    }

    .project-experience .container {
        width: calc(100% - 28px);
    }


    .project-experience-heading h2 {
        font-size: 39px;
    }


    .experience-item {
        min-height: 310px;

        padding: 25px;
    }

    .experience-item-content {
        margin-top: 65px;
    }

    .experience-item-content h3 {
        font-size: 34px;
    }

    .experience-item-content p {
        font-size: 11px;

        line-height: 1.7;
    }

    .experience-item-icon {
        right: 20px;

        bottom: 20px;

        font-size: 55px;
    }

    .experience-item-arrow {
        top: 25px;

        right: 25px;

        width: 32px;

        height: 32px;
    }


    .project-experience-statement {
        grid-template-columns: 35px 1fr;

        gap: 15px;

        padding: 35px 0;
    }

    .experience-statement-mark {
        gap: 4px;
    }

    .experience-statement-mark span {
        width: 5px;

        height: 27px;
    }

    .experience-statement-mark span:nth-child(2) {
        height: 19px;
    }

    .experience-statement-mark span:nth-child(3) {
        height: 11px;
    }

    .experience-statement-content > span {
        font-size: 8px;

        line-height: 1.5;
    }

    .experience-statement-content p {
        font-size: 16px;

        line-height: 1.55;
    }


    .project-experience-footer {
        font-size: 7px;

        letter-spacing: 0.12em;
    }
}
/* =========================================================
   08 — FINAL PROJECT CTA
   ELISHA & CHARLES SOLUTIONS INC.
   Final Project Enquiry
========================================================= */

.projects-final-cta {
    position: relative;

    min-height: 760px;

    display: flex;

    align-items: center;

    padding: 120px 0;

    background: #0b0b0b;

    color: #fff;

    overflow: hidden;
}


/* =========================================================
   CONTAINER
========================================================= */

.projects-final-cta-container {
    position: relative;

    z-index: 5;

    width: min(1380px, calc(100% - 60px));

    margin: 0 auto;
}


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

.projects-final-cta-bg {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            115deg,
            rgba(255,255,255,0.035),
            transparent 35%
        );

    pointer-events: none;
}


/* =========================================================
   TECHNICAL GRID
========================================================= */

.projects-final-cta-grid {
    position: absolute;

    inset: 0;

    background-image:
        linear-gradient(
            rgba(255,255,255,0.045) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,0.045) 1px,
            transparent 1px
        );

    background-size: 80px 80px;

    opacity: 0.45;

    mask-image:
        linear-gradient(
            to bottom,
            transparent,
            #000 20%,
            #000 80%,
            transparent
        );

    pointer-events: none;
}


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

.projects-final-cta-overlay {
    position: absolute;

    inset: 0;

    background:
        radial-gradient(
            circle at 75% 45%,
            rgba(255,255,255,0.07),
            transparent 28%
        ),
        linear-gradient(
            90deg,
            rgba(11,11,11,0.98),
            rgba(11,11,11,0.78)
        );

    pointer-events: none;
}


/* =========================================================
   TOP META
========================================================= */

.projects-final-cta-top {
    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 100px;

    padding-bottom: 25px;

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


/* =========================================================
   INDEX
========================================================= */

.projects-final-cta-index {
    display: flex;

    align-items: center;

    gap: 16px;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 0.18em;

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

.projects-final-cta-index > span:first-child {
    color: #fff;

    font-size: 13px;

    letter-spacing: 0.08em;
}

.projects-final-cta-index i {
    width: 45px;

    height: 1px;

    display: block;

    background: rgba(255,255,255,0.45);
}


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

.projects-final-cta-status {
    display: flex;

    align-items: center;

    gap: 11px;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 0.17em;

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

.projects-final-cta-status-dot {
    width: 7px;

    height: 7px;

    border-radius: 50%;

    background: #fff;

    box-shadow:
        0 0 0 5px rgba(255,255,255,0.08);
}


/* =========================================================
   MAIN CONTENT
========================================================= */

.projects-final-cta-content {
    max-width: 900px;

    margin-bottom: 120px;
}


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

.projects-final-cta-eyebrow {
    display: block;

    margin-bottom: 24px;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 0.22em;

    color: rgba(255,255,255,0.48);
}


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

.projects-final-cta-content h2 {
    margin: 0 0 30px;

    font-size: clamp(65px, 9vw, 135px);

    line-height: 0.86;

    font-weight: 500;

    letter-spacing: -0.065em;
}

.projects-final-cta-content h2 span {
    display: block;

    color: rgba(255,255,255,0.42);
}


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

.projects-final-cta-content > p {
    max-width: 650px;

    margin: 0 0 42px;

    font-size: 14px;

    line-height: 1.9;

    color: rgba(255,255,255,0.6);
}


/* =========================================================
   ACTIONS
========================================================= */

.projects-final-cta-actions {
    display: flex;

    align-items: center;

    gap: 14px;
}


/* =========================================================
   PRIMARY BUTTON
========================================================= */

.projects-final-cta-primary {
    display: inline-flex;

    align-items: center;

    gap: 30px;

    min-height: 58px;

    padding: 0 8px 0 25px;

    color: #111;

    background: #fff;

    text-decoration: none;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 0.13em;

    transition:
        transform 0.35s ease,
        background 0.35s ease;
}

.projects-final-cta-primary:hover {
    transform: translateY(-4px);

    background: #e9e9e6;
}


/* =========================================================
   PRIMARY ICON
========================================================= */

.projects-final-cta-button-icon {
    width: 43px;

    height: 43px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #111;

    color: #fff;

    transition:
        transform 0.35s ease;
}

.projects-final-cta-primary:hover
.projects-final-cta-button-icon {
    transform: translateX(5px);
}


/* =========================================================
   SECONDARY BUTTON
========================================================= */

.projects-final-cta-secondary {
    display: inline-flex;

    align-items: center;

    gap: 15px;

    min-height: 58px;

    padding: 0 24px;

    color: #fff;

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

    text-decoration: none;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 0.12em;

    transition:
        background 0.35s ease,
        border-color 0.35s ease,
        transform 0.35s ease;
}

.projects-final-cta-secondary:hover {
    background: rgba(255,255,255,0.08);

    border-color: rgba(255,255,255,0.5);

    transform: translateY(-4px);
}

.projects-final-cta-secondary i {
    font-size: 9px;

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


/* =========================================================
   TECHNICAL MARK
========================================================= */

.projects-final-cta-mark {
    position: absolute;

    right: 7%;

    top: 50%;

    display: flex;

    align-items: flex-end;

    gap: 9px;

    transform: translateY(-50%);

    opacity: 0.45;

    pointer-events: none;
}

.projects-final-cta-mark span {
    display: block;

    width: 9px;

    height: 100px;

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

    transform-origin: bottom;

    animation:
        projectsCtaPulse 4s ease-in-out infinite;
}

.projects-final-cta-mark span:nth-child(1) {
    height: 45px;
}

.projects-final-cta-mark span:nth-child(2) {
    height: 85px;

    animation-delay: 0.15s;
}

.projects-final-cta-mark span:nth-child(3) {
    height: 145px;

    animation-delay: 0.3s;
}

.projects-final-cta-mark span:nth-child(4) {
    height: 110px;

    animation-delay: 0.45s;
}

.projects-final-cta-mark span:nth-child(5) {
    height: 180px;

    animation-delay: 0.6s;
}


/* =========================================================
   MARK ANIMATION
========================================================= */

@keyframes projectsCtaPulse {

    0%,
    100% {
        transform: scaleY(1);
    }

    50% {
        transform: scaleY(0.82);
    }

}


/* =========================================================
   BOTTOM INFORMATION
========================================================= */

.projects-final-cta-bottom {
    display: grid;

    grid-template-columns:
        1fr
        1.5fr
        auto;

    align-items: center;

    gap: 40px;

    padding-top: 28px;

    border-top: 1px solid rgba(255,255,255,0.14);
}


/* =========================================================
   COMPANY
========================================================= */

.projects-final-cta-company {
    display: flex;

    flex-direction: column;

    gap: 4px;
}

.projects-final-cta-company span {
    font-size: 9px;

    font-weight: 600;

    letter-spacing: 0.18em;

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

.projects-final-cta-company strong {
    font-size: 9px;

    font-weight: 700;

    letter-spacing: 0.18em;

    color: #fff;
}


/* =========================================================
   SERVICE LIST
========================================================= */

.projects-final-cta-services {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 14px;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 0.13em;

    color: rgba(255,255,255,0.42);
}

.projects-final-cta-services i {
    width: 3px;

    height: 3px;

    border-radius: 50%;

    background: rgba(255,255,255,0.35);
}


/* =========================================================
   BACK TO TOP
========================================================= */

.projects-final-cta-top-link {
    display: inline-flex;

    align-items: center;

    gap: 12px;

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

    text-decoration: none;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 0.15em;

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

.projects-final-cta-top-link:hover {
    color: #fff;

    transform: translateY(-3px);
}

.projects-final-cta-top-link i {
    display: flex;

    align-items: center;

    justify-content: center;

    width: 30px;

    height: 30px;

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

    font-size: 9px;
}


/* =========================================================
   LARGE TABLET
========================================================= */

@media (max-width: 1100px) {

    .projects-final-cta {
        min-height: auto;

        padding: 110px 0;
    }

    .projects-final-cta-content {
        max-width: 780px;

        margin-bottom: 100px;
    }

    .projects-final-cta-content h2 {
        font-size: clamp(60px, 9vw, 100px);
    }

    .projects-final-cta-mark {
        right: 4%;

        opacity: 0.25;
    }

    .projects-final-cta-bottom {
        grid-template-columns:
            1fr
            1fr;
    }

    .projects-final-cta-services {
        justify-content: flex-end;
    }

    .projects-final-cta-top-link {
        grid-column: 2;

        justify-self: end;
    }
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 768px) {

    .projects-final-cta {
        padding: 85px 0;
    }

    .projects-final-cta-container {
        width: min(100% - 36px, 600px);
    }


    /* TOP */

    .projects-final-cta-top {
        margin-bottom: 65px;

        padding-bottom: 20px;
    }

    .projects-final-cta-index {
        gap: 11px;

        font-size: 8px;
    }

    .projects-final-cta-index i {
        width: 28px;
    }

    .projects-final-cta-status {
        font-size: 7px;
    }


    /* CONTENT */

    .projects-final-cta-content {
        margin-bottom: 80px;
    }

    .projects-final-cta-eyebrow {
        margin-bottom: 18px;

        font-size: 8px;
    }

    .projects-final-cta-content h2 {
        margin-bottom: 25px;

        font-size: clamp(50px, 14vw, 80px);
    }

    .projects-final-cta-content > p {
        max-width: 100%;

        margin-bottom: 32px;

        font-size: 13px;

        line-height: 1.8;
    }


    /* ACTIONS */

    .projects-final-cta-actions {
        flex-direction: column;

        align-items: stretch;

        gap: 10px;
    }

    .projects-final-cta-primary,
    .projects-final-cta-secondary {
        width: 100%;

        justify-content: space-between;
    }


    /* MARK */

    .projects-final-cta-mark {
        top: 47%;

        right: 8%;

        opacity: 0.13;

        transform:
            translateY(-50%)
            scale(0.7);
    }


    /* BOTTOM */

    .projects-final-cta-bottom {
        display: flex;

        flex-direction: column;

        align-items: flex-start;

        gap: 25px;
    }

    .projects-final-cta-services {
        justify-content: flex-start;

        flex-wrap: wrap;

        gap: 10px;
    }

    .projects-final-cta-top-link {
        align-self: flex-end;
    }
}


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

@media (max-width: 480px) {

    .projects-final-cta {
        padding: 70px 0;
    }

    .projects-final-cta-container {
        width: calc(100% - 28px);
    }


    /* TOP */

    .projects-final-cta-top {
        align-items: flex-start;

        gap: 20px;
    }

    .projects-final-cta-index {
        flex-wrap: wrap;

        line-height: 1.5;
    }

    .projects-final-cta-status {
        white-space: nowrap;
    }


    /* CONTENT */

    .projects-final-cta-content h2 {
        font-size: 48px;

        letter-spacing: -0.055em;
    }

    .projects-final-cta-content > p {
        font-size: 12px;

        line-height: 1.75;
    }


    /* BUTTONS */

    .projects-final-cta-primary,
    .projects-final-cta-secondary {
        min-height: 54px;

        font-size: 8px;
    }

    .projects-final-cta-primary {
        padding-left: 20px;
    }

    .projects-final-cta-button-icon {
        width: 39px;

        height: 39px;
    }


    /* MARK */

    .projects-final-cta-mark {
        right: 2%;

        transform:
            translateY(-50%)
            scale(0.55);
    }


    /* BOTTOM */

    .projects-final-cta-company span,
    .projects-final-cta-company strong {
        font-size: 8px;
    }

    .projects-final-cta-services {
        font-size: 7px;

        line-height: 1.7;
    }

    .projects-final-cta-top-link {
        align-self: flex-start;

        font-size: 7px;
    }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

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

    .projects-final-cta-mark span {
        animation: none;
    }

    .projects-final-cta-primary,
    .projects-final-cta-secondary,
    .projects-final-cta-top-link,
    .projects-final-cta-button-icon {
        transition: none;
    }
}