/* =========================================================
   AL-SHAMALI & WARIS CO. K.S.C.C.
   MAIN WEBSITE STYLESHEET
   ========================================================= */


/* =========================================================
   GLOBAL
   ========================================================= */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    color: #17231e;
    background: #ffffff;
}

body,
button,
input,
textarea {
    font-family:
        Arial,
        Helvetica,
        sans-serif;
}

img {
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    cursor: pointer;
}

.wrap {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}


/* =========================================================
   TOP BAR
   ========================================================= */

.top {
    background: #05291d;
    color: #dce9e2;

    font-size: 11px;
}

.top .wrap {
    min-height: 34px;

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

    gap: 20px;
}

.top button {
    padding: 5px 0;

    background: transparent;

    border: 0;

    color: #ffffff;

    font-size: 11px;
}

/* =========================================================
   PREMIUM HEADER
   ========================================================= */

.siteHeader {
    position: relative;
    z-index: 100;

    width: 100%;

    background: #ffffff;

    border-bottom: 1px solid rgba(5, 41, 29, 0.08);
}


/* =========================================================
   TOP BAR
   ========================================================= */

.top {
    position: relative;

    background:
        linear-gradient(
            90deg,
            #03271b 0%,
            #063d29 55%,
            #075536 100%
        );

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

.topInner {
    min-height: 36px;

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

    align-items: center;

    gap: 30px;
}


/* LEFT SIDE */

.topInfo {
    display: flex;
    align-items: center;

    gap: 11px;

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

    letter-spacing: 0.45px;
}

.topLocation {
    color: #ffffff;
}

.topDivider {
    width: 1px;
    height: 11px;

    display: block;

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


/* CENTER */

.top-message {
    color: rgba(255, 255, 255, 0.72);

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

    letter-spacing: 1.4px;

    text-transform: uppercase;
}


/* LANGUAGE */

.languageButton {
    justify-self: end;

    display: inline-flex;
    align-items: center;

    gap: 7px;

    padding: 6px 0;

    background: transparent;

    border: 0;

    color: #ffffff;

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

    transition:
        color 0.2s ease,
        opacity 0.2s ease;
}

.languageButton span {
    font-size: 10px;

    opacity: 0.65;
}

.languageButton:hover {
    color: #7be0ad;
}


/* =========================================================
   MAIN NAVIGATION BACKGROUND
   ========================================================= */

.mainNav {
    position: relative;

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

    box-shadow:
        0 5px 25px
        rgba(5, 41, 29, 0.035);
}


/* =========================================================
   NAVIGATION CONTAINER
   ========================================================= */

.nav {
    min-height: 88px;

    display: flex;
    align-items: center;

    gap: 28px;
}


/* =========================================================
   LOGO
   ========================================================= */

.brand {
    flex-shrink: 0;

    display: flex;
    align-items: center;

    margin-right: auto;
}

.brand img {
    display: block;

    width: auto;
    height: 70px;

    max-width: 295px;

    object-fit: contain;

    transition: transform 0.25s ease;
}

.brand:hover img {
    transform: translateY(-1px);
}


/* =========================================================
   DESKTOP NAVIGATION
   ========================================================= */

.nav nav {
    display: flex;
    align-items: center;

    gap: 28px;

    margin-left: auto;
}

.nav nav a {
    position: relative;

    min-height: 88px;

    display: flex;
    align-items: center;

    color: #263a32;

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

    letter-spacing: 0.15px;

    transition: color 0.25s ease;
}

.nav nav a:hover,
.nav nav a.active {
    color: #075c36;
}


/* NAV UNDERLINE */

.nav nav a::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: 0;

    width: 0;
    height: 3px;

    background: #075c36;

    transform: translateX(-50%);

    transition: width 0.25s ease;
}

.nav nav a:hover::after {
    width: 22px;
}

.nav nav a.active::after {
    width: 28px;
}


/* =========================================================
   INQUIRY BUTTON
   ========================================================= */

.quote {
    position: relative;

    flex-shrink: 0;

    min-height: 46px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 9px;

    margin-left: 4px;

    padding: 0 17px 0 19px;

    overflow: hidden;

    background: #075c36;
    color: #ffffff;

    border: 1px solid #075c36;

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

    letter-spacing: 0.25px;

    transition:
        background 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.quote:hover {
    background: #03492a;

    border-color: #03492a;

    transform: translateY(-2px);

    box-shadow:
        0 9px 22px
        rgba(5, 70, 42, 0.18);
}


/* INQUIRY COUNT */

.quote i {
    min-width: 20px;
    height: 20px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0 5px;

    background: #ffffff;
    color: #075c36;

    border-radius: 20px;

    font-size: 9px;
    font-style: normal;
    font-weight: 800;
}


/* ARROW */

.quoteArrow {
    display: inline-block;

    margin-left: 2px;

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

    transition: transform 0.25s ease;
}

.quote:hover .quoteArrow {
    transform: translateX(3px);
}


/* =========================================================
   MOBILE MENU BUTTON
   ========================================================= */

.menuButton {
    width: 42px;
    height: 42px;

    display: none;

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

    gap: 5px;

    margin-left: auto;

    padding: 0;

    background: transparent;

    border:
        1px solid
        rgba(5, 41, 29, 0.13);

    border-radius: 2px;
}

.menuButton span {
    width: 18px;
    height: 2px;

    display: block;

    background: #073e29;

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


/* OPEN MENU ICON */

.menuButton.active span:nth-child(1) {
    transform:
        translateY(7px)
        rotate(45deg);
}

.menuButton.active span:nth-child(2) {
    opacity: 0;
}

.menuButton.active span:nth-child(3) {
    transform:
        translateY(-7px)
        rotate(-45deg);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1000px) {

    .topInner {
        grid-template-columns: 1fr auto;
    }

    .top-message {
        display: none;
    }


    .nav {
        min-height: 80px;
    }


    .brand img {
        height: 62px;

        max-width: 245px;
    }


    .nav nav {
        gap: 18px;
    }


    .nav nav a {
        min-height: 80px;

        font-size: 11px;
    }


    .quote {
        min-height: 43px;

        padding: 0 14px;

        gap: 7px;
    }

}


/* =========================================================
   MOBILE NAVIGATION
   ========================================================= */

@media (max-width: 850px) {

    .siteHeader {
        z-index: 200;
    }


    .topInner {
        min-height: 34px;
    }


    .topInfo {
        font-size: 9px;
    }


    .nav {
        position: relative;

        min-height: 76px;
    }


    .brand img {
        height: 58px;

        max-width: 220px;
    }


    .quote {
        display: none;
    }


    .menuButton {
        display: flex;
    }


    .nav nav {
        position: absolute;

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

        z-index: 100;

        display: none;

        flex-direction: column;
        align-items: stretch;

        gap: 0;

        margin: 0;

        padding: 10px 20px 22px;

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

        border-top:
            1px solid
            rgba(5, 41, 29, 0.08);

        box-shadow:
            0 20px 35px
            rgba(5, 41, 29, 0.12);
    }


    .nav nav.open {
        display: flex;
    }


    .nav nav a {
        min-height: auto;

        width: 100%;

        padding: 15px 4px;

        border-bottom:
            1px solid
            rgba(5, 41, 29, 0.07);

        font-size: 12px;
    }


    .nav nav a:last-child {
        border-bottom: 0;
    }


    .nav nav a::after {
        display: none;
    }


    .nav nav a.active {
        padding-left: 12px;

        background:
            linear-gradient(
                90deg,
                rgba(7, 92, 54, 0.07),
                transparent
            );

        border-left: 2px solid #075c36;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 550px) {

    .topInner {
        min-height: 35px;

        gap: 10px;
    }


    .topInfo {
        gap: 7px;

        font-size: 8px;
    }


    .topDivider {
        height: 9px;
    }


    .languageButton {
        font-size: 10px;
    }


    .nav {
        min-height: 70px;
    }


    .brand img {
        height: 51px;

        max-width: 190px;
    }


    .nav nav {
        top: 70px;

        padding-left: 14px;
        padding-right: 14px;
    }


    .menuButton {
        width: 39px;
        height: 39px;
    }

}

/* =========================================================
   PREMIUM HERO
   ========================================================= */

.hero {
    position: relative;
    overflow: hidden;

    background:
        linear-gradient(
            115deg,
            #ffffff 0%,
            #fbfdfc 40%,
            #eef6f2 100%
        );
}


/* SUBTLE TECHNICAL BACKGROUND */

.heroPattern {
    position: absolute;
    inset: 0;
    z-index: 0;

    opacity: 0.22;

    background-image:
        linear-gradient(
            rgba(7, 92, 54, 0.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(7, 92, 54, 0.035) 1px,
            transparent 1px
        );

    background-size: 55px 55px;

    pointer-events: none;
}


/* =========================================================
   HERO GRID
   ========================================================= */

.heroGrid {
    position: relative;
    z-index: 2;

    min-height: 670px;

    display: grid;
    grid-template-columns: 0.92fr 1.08fr;

    align-items: center;

    gap: 35px;
}


/* =========================================================
   LEFT CONTENT
   ========================================================= */

.heroContent {
    position: relative;
    z-index: 5;

    padding: 70px 0;
}


/* SMALL LABEL */

.heroLabel {
    display: flex;
    align-items: center;

    gap: 13px;

    margin-bottom: 25px;
}

.heroLabelLine {
    width: 35px;
    height: 2px;

    flex-shrink: 0;

    background: #075c36;
}

.heroLabelText {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 10px;

    color: #075c36;

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

    letter-spacing: 1.5px;
}

.heroLabelText i {
    width: 3px;
    height: 3px;

    display: inline-block;

    background: #78a18e;

    border-radius: 50%;
}


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

.hero h1 {
    margin: 0;

    color: #10251c;

    font-size: clamp(48px, 4.6vw, 66px);
    line-height: 0.98;

    font-weight: 700;

    letter-spacing: -3px;
}

.hero h1 em {
    color: #087344;

    font-style: normal;
}


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

.heroDescription {
    position: relative;

    max-width: 520px;

    margin: 30px 0 0;

    padding-left: 18px;

    color: #607169;

    border-left: 2px solid #8bb9a3;

    font-size: 14px;
    line-height: 1.8;
}


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

.heroButtons {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 12px;

    margin-top: 31px;
}

.heroPrimaryButton,
.heroSecondaryButton {
    min-height: 49px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 18px;

    padding: 0 21px;

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

    transition:
        background 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


/* PRIMARY BUTTON */

.heroPrimaryButton {
    background: #075c36;
    color: #ffffff;

    border: 1px solid #075c36;

    box-shadow:
        0 9px 24px
        rgba(7, 92, 54, 0.14);
}

.heroPrimaryButton:hover {
    background: #03492a;

    border-color: #03492a;

    transform: translateY(-2px);

    box-shadow:
        0 13px 28px
        rgba(7, 92, 54, 0.19);
}


/* SECONDARY BUTTON */

.heroSecondaryButton {
    background: rgba(255, 255, 255, 0.75);

    color: #173d2d;

    border:
        1px solid
        rgba(7, 92, 54, 0.25);
}

.heroSecondaryButton:hover {
    background: #ffffff;

    border-color: #075c36;

    transform: translateY(-2px);
}


/* BUTTON ARROWS */

.heroPrimaryButton i,
.heroSecondaryButton i {
    font-size: 15px;
    font-style: normal;

    transition: transform 0.25s ease;
}

.heroPrimaryButton:hover i,
.heroSecondaryButton:hover i {
    transform: translateX(3px);
}


/* =========================================================
   HERO STATS
   ========================================================= */

.heroStats {
    display: flex;
    align-items: stretch;

    margin-top: 45px;
}

.heroStat {
    min-width: 135px;

    display: flex;
    align-items: center;

    gap: 10px;

    padding: 0 22px;

    border-right:
        1px solid
        rgba(7, 92, 54, 0.15);
}

.heroStat:first-child {
    padding-left: 0;
}

.heroStat:last-child {
    border-right: 0;
}

.heroStat strong {
    color: #0b3021;

    font-size: 27px;
    line-height: 1;

    letter-spacing: -1px;
}

.heroStat strong span {
    color: #087344;

    font-size: 17px;
}

.heroStat small {
    color: #728078;

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

    line-height: 1.45;

    letter-spacing: 0.8px;
}


/* =========================================================
   RIGHT HERO VISUAL
   ========================================================= */

.heroVisual {
    position: relative;

    align-self: stretch;

    min-height: 670px;

    /*
       Extends the image to the right edge of the browser
       while keeping the content inside .wrap.
    */

    margin-right:
        calc(
            (100vw - min(1180px, calc(100vw - 40px)))
            / -2
        );
}


/* =========================================================
   HERO IMAGE
   ========================================================= */

.heroImage {
    position: absolute;

    inset: 0;

    overflow: hidden;

    background: #dce7e1;
}

.heroImage img {
    width: 100%;
    height: 100%;

    display: block;

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

    transform: scale(1.01);

    transition: transform 1.2s ease;
}

.heroVisual:hover .heroImage img {
    transform: scale(1.035);
}


/* =========================================================
   IMPORTANT: LEFT IMAGE FADE
   ========================================================= */

.heroImage::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 2;

    background:
        linear-gradient(
            90deg,
            #ffffff 0%,
            rgba(255, 255, 255, 0.97) 8%,
            rgba(255, 255,255, 0.84) 19%,
            rgba(255, 255, 255, 0.52) 34%,
            rgba(255, 255, 255, 0.18) 52%,
            rgba(255, 255, 255, 0) 68%
        );

    pointer-events: none;
}


/* CINEMATIC BOTTOM SHADE */

.heroImage::after {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            0deg,
            rgba(3, 32, 22, 0.30) 0%,
            rgba(3, 32, 22, 0.08) 28%,
            transparent 55%
        );

    pointer-events: none;
}


/* =========================================================
   IMAGE INFORMATION CARD
   ========================================================= */

.heroImageOverlay {
    position: absolute;

    right: 35px;
    bottom: 35px;

    z-index: 5;

    min-width: 295px;

    display: flex;
    align-items: flex-start;

    gap: 18px;

    padding: 20px 22px;

    background:
        rgba(3, 42, 28, 0.88);

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

    backdrop-filter: blur(8px);

    color: #ffffff;

    box-shadow:
        0 18px 45px
        rgba(0, 0, 0, 0.16);
}

.overlayNumber {
    padding-top: 2px;

    color: #74d9a4 !important;

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

    letter-spacing: 1px;
}

.heroImageOverlay div {
    padding-left: 16px;

    border-left:
        1px solid
        rgba(255, 255, 255, 0.18);
}

.heroImageOverlay strong {
    display: block;

    margin-bottom: 7px;

    color: #ffffff;

    font-size: 17px;
    line-height: 1.05;

    letter-spacing: 0.3px;
}

.heroImageOverlay div > span {
    color: rgba(255, 255, 255, 0.66);

    font-size: 9px;

    letter-spacing: 0.25px;
}


/* =========================================================
   ESTABLISHED BADGE
   ========================================================= */

.heroEstablished {
    position: absolute;

    top: 42px;
    right: 35px;

    z-index: 5;

    display: flex;
    align-items: center;

    gap: 8px;

    padding: 10px 13px;

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

    border:
        1px solid
        rgba(7, 92, 54, 0.10);

    box-shadow:
        0 10px 30px
        rgba(5, 41, 29, 0.08);
}

.heroEstablished span {
    color: #718078;

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

    letter-spacing: 1px;
}

.heroEstablished strong {
    color: #075c36;

    font-size: 13px;
}


/* =========================================================
   BOTTOM ACCENT
   ========================================================= */

.heroBottomLine {
    position: absolute;

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

    z-index: 10;

    height: 3px;

    background:
        linear-gradient(
            90deg,
            #075c36 0%,
            #075c36 18%,
            #80c8a4 18%,
            #80c8a4 27%,
            rgba(7, 92, 54, 0.08) 27%,
            rgba(7, 92, 54, 0.08) 100%
        );
}


/* =========================================================
   HERO RESPONSIVE - TABLET
   ========================================================= */

@media (max-width: 1050px) {

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

        gap: 20px;
    }

    .hero h1 {
        font-size: clamp(45px, 5vw, 58px);
    }

    .heroStat {
        min-width: auto;

        padding: 0 14px;
    }

    .heroVisual {
        margin-right: -20px;
    }

}


/* =========================================================
   HERO RESPONSIVE - MOBILE / TABLET
   ========================================================= */

@media (max-width: 850px) {

    .heroGrid {
        min-height: auto;

        grid-template-columns: 1fr;

        gap: 0;
    }

    .heroContent {
        padding: 65px 0 50px;
    }

    .hero h1 {
        max-width: 650px;

        font-size: clamp(47px, 9vw, 62px);
    }

    .heroDescription {
        max-width: 570px;
    }

    .heroVisual {
        min-height: 470px;

        margin-right: -20px;
        margin-left: -20px;
    }

    .heroImage::before {
        background:
            linear-gradient(
                180deg,
                #ffffff 0%,
                rgba(255, 255, 255, 0.65) 8%,
                rgba(255, 255, 255, 0) 30%
            );
    }

    .heroImageOverlay {
        right: 25px;
        bottom: 25px;
    }

    .heroEstablished {
        top: 25px;
        right: 25px;
    }

}


/* =========================================================
   HERO RESPONSIVE - SMALL MOBILE
   ========================================================= */

@media (max-width: 550px) {

    .heroPattern {
        opacity: 0.15;
    }

    .heroContent {
        padding: 50px 0 40px;
    }

    .heroLabel {
        margin-bottom: 20px;
    }

    .heroLabelLine {
        width: 24px;
    }

    .heroLabelText {
        gap: 6px;

        font-size: 7px;

        letter-spacing: 0.9px;
    }

    .hero h1 {
        font-size: clamp(39px, 12vw, 51px);

        line-height: 1;

        letter-spacing: -2px;
    }

    .heroDescription {
        margin-top: 25px;

        padding-left: 14px;

        font-size: 13px;
    }

    .heroButtons {
        align-items: stretch;

        margin-top: 27px;
    }

    .heroPrimaryButton,
    .heroSecondaryButton {
        min-height: 47px;

        padding: 0 16px;

        gap: 13px;
    }

    .heroStats {
        width: 100%;

        margin-top: 37px;
    }

    .heroStat {
        flex: 1;

        display: block;

        padding: 0 10px;
    }

    .heroStat:first-child {
        padding-left: 0;
    }

    .heroStat strong {
        display: block;

        margin-bottom: 7px;

        font-size: 23px;
    }

    .heroStat small {
        font-size: 7px;

        letter-spacing: 0.5px;
    }

    .heroVisual {
        min-height: 380px;
    }

    .heroImageOverlay {
        right: 16px;
        bottom: 16px;

        min-width: 0;
        width: calc(100% - 32px);

        padding: 17px;
    }

    .heroImageOverlay strong {
        font-size: 15px;
    }

    .heroEstablished {
        top: 16px;
        right: 16px;
    }

}

/* =========================================================
   PREMIUM TRUST / INDUSTRIES STRIP
   ========================================================= */

.trust {
    position: relative;
    z-index: 5;

    background: #ffffff;

    border-bottom:
        1px solid
        rgba(7, 92, 54, 0.10);

    box-shadow:
        0 12px 35px
        rgba(5, 41, 29, 0.035);
}


/* MAIN GRID */

.trustInner {
    min-height: 98px;

    display: grid;

    grid-template-columns:
        1.35fr
        repeat(5, 1fr);

    align-items: stretch;
}


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

.trustIntro {
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding-right: 35px;
}

.trustIntro span {
    display: block;

    margin-bottom: 7px;

    color: #789087;

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

    letter-spacing: 2px;
}

.trustIntro strong {
    color: #123c2d;

    font-size: 16px;
    font-weight: 700;
}


/* =========================================================
   INDUSTRY ITEMS
   ========================================================= */

.trustItem {
    position: relative;

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

    gap: 7px;

    padding: 0 20px;

    border-left:
        1px solid
        rgba(7, 92, 54, 0.10);

    transition:
        background 0.25s ease,
        padding-left 0.25s ease;
}


/* SMALL NUMBER */

.trustItem span {
    color: #7aa18e;

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

    letter-spacing: 1px;
}


/* INDUSTRY NAME */

.trustItem strong {
    color: #29483b;

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

    line-height: 1.35;

    transition: color 0.25s ease;
}


/* GREEN ACCENT */

.trustItem::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 0;
    height: 3px;

    background: #087344;

    transition: width 0.3s ease;
}


/* HOVER */

.trustItem:hover {
    padding-left: 24px;

    background:
        linear-gradient(
            180deg,
            rgba(7, 92, 54, 0.015),
            rgba(7, 92, 54, 0.055)
        );
}

.trustItem:hover strong {
    color: #075c36;
}

.trustItem:hover::after {
    width: 100%;
}


/* =========================================================
   TRUST RESPONSIVE - TABLET
   ========================================================= */

@media (max-width: 1000px) {

    .trustInner {
        grid-template-columns:
            1.2fr
            repeat(5, 1fr);
    }

    .trustIntro {
        padding-right: 20px;
    }

    .trustItem {
        padding-left: 14px;
        padding-right: 10px;
    }

    .trustItem:hover {
        padding-left: 17px;
    }

    .trustItem strong {
        font-size: 10px;
    }

}


/* =========================================================
   TRUST RESPONSIVE - MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .trustInner {
        min-height: auto;

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

    .trustIntro {
        grid-column: 1 / -1;

        padding: 25px 0 20px;

        border-bottom:
            1px solid
            rgba(7, 92, 54, 0.10);
    }

    .trustItem {
        min-height: 78px;

        padding: 15px 18px;

        border-left: 0;

        border-bottom:
            1px solid
            rgba(7, 92, 54, 0.08);
    }

    .trustItem:nth-child(even) {
        border-right:
            1px solid
            rgba(7, 92, 54, 0.08);
    }

    .trustItem:hover {
        padding-left: 21px;
    }

}


/* =========================================================
   TRUST RESPONSIVE - SMALL MOBILE
   ========================================================= */

@media (max-width: 430px) {

    .trustIntro strong {
        font-size: 15px;
    }

    .trustItem {
        min-height: 72px;

        padding-left: 14px;
        padding-right: 10px;
    }

    .trustItem strong {
        font-size: 10px;
    }

}

/* =========================================================
   GENERAL SECTION
   ========================================================= */

.section {
    padding: 90px 0;
}

/* =========================================================
   PREMIUM PRODUCTS SECTION
   ========================================================= */

.productsSection {
    position: relative;
    overflow: hidden;

    padding: 105px 0 100px;

    background: #ffffff;
}


/* SUBTLE BACKGROUND DETAIL */

.productsSection::before {
    content: "";

    position: absolute;

    top: 0;
    right: -180px;

    width: 520px;
    height: 520px;

    border:
        1px solid
        rgba(7, 92, 54, 0.045);

    border-radius: 50%;

    pointer-events: none;
}


/* =========================================================
   PRODUCTS INTRO
   ========================================================= */

.productsIntro {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns: 1.1fr 0.9fr;

    align-items: end;

    gap: 80px;

    margin-bottom: 50px;
}


/* LABEL */

.productsLabel {
    display: flex;
    align-items: center;

    gap: 12px;

    margin-bottom: 18px;
}

.productsLabel > span {
    width: 32px;
    height: 2px;

    display: block;

    background: #087344;
}

.productsLabel strong {
    color: #087344;

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

    letter-spacing: 2px;
}


/* MAIN HEADING */

.productsIntro h2 {
    margin: 0;

    color: #10251c;

    font-size: clamp(37px, 4vw, 52px);
    line-height: 1.06;

    letter-spacing: -1.8px;
}

.productsIntro h2 em {
    color: #087344;

    font-style: normal;
}


/* RIGHT INTRO */

.productsIntroRight {
    max-width: 480px;

    justify-self: end;
}

.productsIntroRight > p {
    margin: 0 0 22px;

    color: #697870;

    font-size: 13px;
    line-height: 1.75;
}


/* FEATURE LABELS */

.productsFeatures {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 10px;
}

.productsFeatures span {
    color: #365548;

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

    letter-spacing: 0.35px;

    text-transform: uppercase;
}

.productsFeatures i {
    width: 3px;
    height: 3px;

    display: block;

    background: #75a38d;

    border-radius: 50%;
}


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

.productGrid {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns: repeat(4, 1fr);

    gap: 18px;
}


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

.productCard {
    position: relative;

    min-width: 0;

    overflow: hidden;

    background: #ffffff;

    border:
        1px solid
        rgba(7, 92, 54, 0.12);

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

.productCard:hover {
    transform: translateY(-7px);

    border-color:
        rgba(7, 92, 54, 0.28);

    box-shadow:
        0 22px 50px
        rgba(5, 41, 29, 0.10);
}


/* =========================================================
   PRODUCT IMAGE
   ========================================================= */

.productImage {
    position: relative;

    height: 245px;

    display: block;

    overflow: hidden;

    background: #edf3f0;
}

.productImage img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform 0.65s ease,
        filter 0.35s ease;
}

.productCard:hover .productImage img {
    transform: scale(1.055);
}


/* IMAGE GRADIENT */

.productImage::after {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            180deg,
            rgba(3, 38, 25, 0.03) 35%,
            rgba(3, 38, 25, 0.62) 100%
        );

    opacity: 0.75;

    transition: opacity 0.35s ease;

    pointer-events: none;
}

.productCard:hover .productImage::after {
    opacity: 0.95;
}


/* PRODUCT NUMBER */

.productNumber {
    position: absolute;

    top: 17px;
    left: 17px;

    z-index: 3;

    width: 34px;
    height: 34px;

    display: grid;
    place-items: center;

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

    color: #075c36;

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

    letter-spacing: 0.5px;
}


/* VIEW PRODUCT */

.productView {
    position: absolute;

    left: 18px;
    right: 18px;
    bottom: 17px;

    z-index: 3;

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

    color: #ffffff;

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

    letter-spacing: 1px;

    text-transform: uppercase;

    opacity: 0;

    transform: translateY(10px);

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

.productView i {
    font-size: 15px;
    font-style: normal;
}

.productCard:hover .productView {
    opacity: 1;

    transform: translateY(0);
}


/* =========================================================
   PRODUCT CONTENT
   ========================================================= */

.productContent {
    padding: 23px 21px 20px;
}


/* CATEGORY */

.productCategory {
    display: block;

    margin-bottom: 10px;

    color: #087344;

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

    letter-spacing: 1.35px;
}


/* TITLE */

.productContent h3 {
    margin: 0 0 11px;

    color: #16392b;

    font-size: 18px;
    line-height: 1.25;

    letter-spacing: -0.3px;
}


/* DESCRIPTION */

.productContent > p {
    min-height: 63px;

    margin: 0;

    color: #69766f;

    font-size: 11px;
    line-height: 1.65;
}


/* =========================================================
   PRODUCT ACTIONS
   ========================================================= */

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

    gap: 12px;

    margin-top: 19px;

    padding-top: 16px;

    border-top:
        1px solid
        rgba(7, 92, 54, 0.10);
}


/* DETAILS */

.productDetails {
    display: inline-flex;
    align-items: center;

    gap: 7px;

    color: #354d43;

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

    transition: color 0.25s ease;
}

.productDetails span {
    color: #087344;

    font-size: 13px;

    transition: transform 0.25s ease;
}

.productDetails:hover {
    color: #075c36;
}

.productDetails:hover span {
    transform: translateX(3px);
}


/* ADD TO INQUIRY */

.productActions .add {
    margin: 0;

    padding: 0;

    background: transparent;

    border: 0;

    color: #087344;

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

    white-space: nowrap;

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

.productActions .add:hover {
    color: #03492a;

    transform: translateX(2px);
}


/* =========================================================
   PRODUCTS BOTTOM
   ========================================================= */

.productsBottom {
    position: relative;
    z-index: 2;

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

    gap: 30px;

    margin-top: 42px;

    padding-top: 27px;

    border-top:
        1px solid
        rgba(7, 92, 54, 0.12);
}

.productsBottom > p {
    margin: 0;

    color: #718078;

    font-size: 11px;
    line-height: 1.6;
}


/* VIEW ALL */

.productsViewAll {
    min-height: 47px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 24px;

    padding: 0 20px;

    background: #08271c;
    color: #ffffff;

    border: 1px solid #08271c;

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

    transition:
        background 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.productsViewAll i {
    font-size: 14px;
    font-style: normal;

    transition: transform 0.25s ease;
}

.productsViewAll:hover {
    background: #075c36;

    border-color: #075c36;

    transform: translateY(-2px);

    box-shadow:
        0 10px 25px
        rgba(7, 92, 54, 0.16);
}

.productsViewAll:hover i {
    transform: translateX(3px);
}


/* =========================================================
   PRODUCTS RESPONSIVE - TABLET
   ========================================================= */

@media (max-width: 1050px) {

    .productsIntro {
        gap: 45px;
    }

    .productGrid {
        grid-template-columns:
            repeat(2, 1fr);

        gap: 22px;
    }

    .productImage {
        height: 285px;
    }

    .productContent > p {
        min-height: auto;
    }

}


/* =========================================================
   PRODUCTS RESPONSIVE - SMALL TABLET
   ========================================================= */

@media (max-width: 750px) {

    .productsSection {
        padding-top: 80px;
        padding-bottom: 80px;
    }

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

        align-items: start;

        gap: 25px;

        margin-bottom: 38px;
    }

    .productsIntroRight {
        max-width: 560px;

        justify-self: start;
    }

    .productsIntro h2 br {
        display: none;
    }

}


/* =========================================================
   PRODUCTS RESPONSIVE - MOBILE
   ========================================================= */

@media (max-width: 550px) {

    .productsSection {
        padding-top: 65px;
        padding-bottom: 65px;
    }

    .productsIntro h2 {
        font-size: 36px;

        letter-spacing: -1.2px;
    }

    .productsFeatures {
        gap: 8px;
    }

    .productsFeatures span {
        font-size: 8px;
    }

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

        gap: 18px;
    }

    .productImage {
        height: 270px;
    }

    .productContent {
        padding: 22px 19px 19px;
    }

    .productContent > p {
        font-size: 12px;
    }

    .productView {
        opacity: 1;

        transform: none;
    }

    .productsBottom {
        align-items: flex-start;
        flex-direction: column;

        gap: 20px;

        margin-top: 32px;
    }

    .productsViewAll {
        min-height: 48px;
    }

}

/* =========================================================
   PREMIUM ABOUT SECTION
   ========================================================= */

.about {
    position: relative;
    overflow: hidden;

    padding: 110px 0;

    background:
        linear-gradient(
            120deg,
            #f5f9f7 0%,
            #ffffff 58%,
            #f8fbf9 100%
        );
}


/* SUBTLE BACKGROUND DETAIL */

.about::before {
    content: "";

    position: absolute;

    left: -190px;
    bottom: -260px;

    width: 500px;
    height: 500px;

    border:
        1px solid
        rgba(7, 92, 54, 0.055);

    border-radius: 50%;

    pointer-events: none;
}


/* =========================================================
   ABOUT GRID
   ========================================================= */

.aboutGrid {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns: 1.02fr 0.98fr;

    align-items: center;

    gap: 85px;
}


/* =========================================================
   ABOUT VISUAL
   ========================================================= */

.aboutVisual {
    position: relative;

    min-height: 610px;
}


/* FACTORY IMAGE */

.factoryImage {
    position: absolute;

    top: 0;
    left: 0;
    right: 35px;
    bottom: 45px;

    overflow: hidden;

    background: #dfe8e3;
}

.factoryImage img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform 1s ease;
}

.aboutVisual:hover .factoryImage img {
    transform: scale(1.025);
}


/* IMAGE SHADE */

.factoryShade {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(3, 35, 24, 0.02) 35%,
            rgba(3, 35, 24, 0.30) 100%
        );

    pointer-events: none;
}


/* =========================================================
   ESTABLISHED BADGE
   ========================================================= */

.aboutEstablished {
    position: absolute;

    top: 30px;
    left: -24px;

    z-index: 4;

    width: 112px;
    height: 126px;

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

    padding: 18px;

    background: #075c36;
    color: #ffffff;

    box-shadow:
        0 18px 40px
        rgba(4, 52, 32, 0.18);
}

.aboutEstablished span {
    margin-bottom: 7px;

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

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

    letter-spacing: 1.4px;
}

.aboutEstablished strong {
    font-size: 29px;
    line-height: 1;

    letter-spacing: -1px;
}

.aboutEstablished small {
    margin-top: 8px;

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

    font-size: 8px;

    letter-spacing: 0.7px;
}


/* =========================================================
   SHUAIBA FACILITY CARD
   ========================================================= */

.facilityCard {
    position: absolute;

    right: 0;
    bottom: 0;

    z-index: 5;

    min-width: 245px;

    display: flex;
    align-items: center;

    gap: 18px;

    padding: 21px 23px;

    background: #ffffff;

    border:
        1px solid
        rgba(7, 92, 54, 0.11);

    box-shadow:
        0 20px 45px
        rgba(5, 41, 29, 0.11);
}

.facilityYear {
    color: #087344;

    font-size: 25px;
    font-weight: 800;

    letter-spacing: -1px;
}

.facilityCard > div {
    padding-left: 17px;

    border-left:
        1px solid
        rgba(7, 92, 54, 0.14);
}

.facilityCard small {
    display: block;

    margin-bottom: 5px;

    color: #7b8b83;

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

    letter-spacing: 1px;
}

.facilityCard strong {
    display: block;

    color: #163c2d;

    font-size: 13px;
}


/* =========================================================
   ABOUT CONTENT
   ========================================================= */

.aboutContent {
    position: relative;

    padding: 15px 0;
}


/* LABEL */

.aboutLabel {
    display: flex;
    align-items: center;

    gap: 12px;

    margin-bottom: 20px;
}

.aboutLabel > span {
    width: 32px;
    height: 2px;

    display: block;

    background: #087344;
}

.aboutLabel strong {
    color: #087344;

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

    letter-spacing: 1.8px;
}


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

.aboutContent h2 {
    margin: 0 0 27px;

    color: #10251c;

    font-size: clamp(39px, 4vw, 53px);
    line-height: 1.05;

    letter-spacing: -2px;
}

.aboutContent h2 em {
    color: #087344;

    font-style: normal;
}


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

.aboutLead {
    max-width: 540px;

    margin: 0 0 17px;

    color: #344c41;

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

    line-height: 1.75;
}

.aboutDescription {
    max-width: 540px;

    margin: 0;

    color: #728078;

    font-size: 12px;

    line-height: 1.75;
}


/* =========================================================
   ABOUT POINTS
   ========================================================= */

.aboutPoints {
    display: grid;
    grid-template-columns: repeat(2, 1fr);

    gap: 0;

    margin-top: 35px;

    border-top:
        1px solid
        rgba(7, 92, 54, 0.12);

    border-left:
        1px solid
        rgba(7, 92, 54, 0.12);
}

.aboutPoint {
    min-height: 105px;

    display: flex;

    gap: 13px;

    padding: 18px 16px;

    border-right:
        1px solid
        rgba(7, 92, 54, 0.12);

    border-bottom:
        1px solid
        rgba(7, 92, 54, 0.12);

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

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

.aboutPoint:hover {
    background: #ffffff;

    transform: translateY(-2px);
}


/* NUMBER */

.aboutPoint > span {
    flex-shrink: 0;

    color: #83a695;

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

    letter-spacing: 0.5px;
}


/* POINT TITLE */

.aboutPoint strong {
    display: block;

    margin-bottom: 6px;

    color: #173d2e;

    font-size: 11px;
    line-height: 1.3;
}


/* POINT DESCRIPTION */

.aboutPoint small {
    display: block;

    color: #7a8780;

    font-size: 9px;

    line-height: 1.55;
}


/* =========================================================
   ABOUT BOTTOM ACTION
   ========================================================= */

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

    gap: 30px;

    margin-top: 32px;
}


/* DISCOVER BUTTON */

.aboutButton {
    min-height: 49px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 25px;

    padding: 0 21px;

    background: #08271c;
    color: #ffffff;

    border: 1px solid #08271c;

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

    transition:
        background 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.aboutButton i {
    font-size: 14px;
    font-style: normal;

    transition: transform 0.25s ease;
}

.aboutButton:hover {
    background: #075c36;

    border-color: #075c36;

    transform: translateY(-2px);

    box-shadow:
        0 10px 25px
        rgba(7, 92, 54, 0.15);
}

.aboutButton:hover i {
    transform: translateX(3px);
}


/* EXPERIENCE */

.aboutExperience {
    display: flex;
    align-items: center;

    gap: 10px;

    padding-left: 20px;

    border-left:
        1px solid
        rgba(7, 92, 54, 0.15);
}

.aboutExperience strong {
    color: #087344;

    font-size: 27px;
    line-height: 1;

    letter-spacing: -1px;
}

.aboutExperience span {
    color: #78867f;

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

    line-height: 1.4;

    letter-spacing: 0.7px;
}


/* =========================================================
   ABOUT RESPONSIVE - TABLET
   ========================================================= */

@media (max-width: 1050px) {

    .aboutGrid {
        gap: 55px;
    }

    .aboutVisual {
        min-height: 550px;
    }

    .aboutEstablished {
        left: -10px;
    }

}


/* =========================================================
   ABOUT RESPONSIVE - SMALL TABLET
   ========================================================= */

@media (max-width: 850px) {

    .about {
        padding: 85px 0;
    }

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

        gap: 65px;
    }

    .aboutVisual {
        width: 100%;
        min-height: 560px;
    }

    .factoryImage {
        right: 30px;
    }

    .aboutContent {
        max-width: 680px;

        padding: 0;
    }

    .aboutLead,
    .aboutDescription {
        max-width: 620px;
    }

}


/* =========================================================
   ABOUT RESPONSIVE - MOBILE
   ========================================================= */

@media (max-width: 550px) {

    .about {
        padding: 70px 0;
    }

    .aboutGrid {
        gap: 50px;
    }

    .aboutVisual {
        min-height: 430px;
    }

    .factoryImage {
        right: 15px;
        bottom: 38px;
    }

    .aboutEstablished {
        top: 18px;
        left: -5px;

        width: 94px;
        height: 108px;

        padding: 14px;
    }

    .aboutEstablished strong {
        font-size: 24px;
    }

    .facilityCard {
        min-width: 215px;

        padding: 17px 18px;
    }

    .facilityYear {
        font-size: 21px;
    }

    .aboutContent h2 {
        font-size: 37px;

        letter-spacing: -1.4px;
    }

    .aboutPoints {
        grid-template-columns: 1fr;
    }

    .aboutPoint {
        min-height: auto;

        padding: 17px 15px;
    }

    .aboutPoint small {
        font-size: 10px;
    }

    .aboutAction {
        align-items: flex-start;
        flex-direction: column;

        gap: 24px;
    }

    .aboutExperience {
        padding-left: 0;

        border-left: 0;
    }

}
/* =========================================================
   PREMIUM SERVICES SECTION
   ========================================================= */

.servicesSection {
    position: relative;
    overflow: hidden;

    padding: 105px 0 90px;

    background: #0a2c20;
}


/* SUBTLE BACKGROUND GRID */

.servicesSection::before {
    content: "";

    position: absolute;
    inset: 0;

    opacity: 0.13;

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

    background-size: 60px 60px;

    pointer-events: none;
}


/* SOFT BACKGROUND GLOW */

.servicesSection::after {
    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    top: -260px;
    right: -180px;

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

    border-radius: 50%;

    pointer-events: none;
}


/* =========================================================
   SERVICES HEADER
   ========================================================= */

.servicesHeader {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns: 1.1fr 0.9fr;

    align-items: end;

    gap: 80px;

    margin-bottom: 48px;
}


/* LABEL */

.servicesLabel {
    display: flex;
    align-items: center;

    gap: 12px;

    margin-bottom: 18px;
}

.servicesLabel > span {
    width: 32px;
    height: 2px;

    display: block;

    background: #70d49f;
}

.servicesLabel strong {
    color: #8dd9b1;

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

    letter-spacing: 2px;
}


/* HEADING */

.servicesHeading h2 {
    margin: 0;

    color: #ffffff;

    font-size: clamp(38px, 4vw, 53px);
    line-height: 1.05;

    letter-spacing: -2px;
}

.servicesHeading h2 em {
    color: #83d7aa;

    font-style: normal;
}


/* HEADER RIGHT */

.servicesHeaderRight {
    max-width: 475px;

    justify-self: end;
}

.servicesHeaderRight > p {
    margin: 0 0 22px;

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

    font-size: 13px;
    line-height: 1.75;
}


/* EXPLORE SERVICES LINK */

.servicesExplore {
    display: inline-flex;
    align-items: center;

    gap: 13px;

    color: #ffffff;

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

    padding-bottom: 6px;

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

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

.servicesExplore span {
    color: #7ed4a6;

    font-size: 14px;

    transition: transform 0.25s ease;
}

.servicesExplore:hover {
    color: #8dd9b1;

    border-color: #8dd9b1;
}

.servicesExplore:hover span {
    transform: translateX(4px);
}


/* =========================================================
   SERVICES GRID
   ========================================================= */

.servicesGrid {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns: repeat(4, 1fr);

    gap: 16px;
}


/* =========================================================
   SERVICE CARD
   ========================================================= */

.serviceCard {
    min-width: 0;

    overflow: hidden;

    background: #ffffff;

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

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}

.serviceCard:hover {
    transform: translateY(-7px);

    box-shadow:
        0 24px 55px
        rgba(0, 0, 0, 0.22);
}


/* =========================================================
   SERVICE IMAGE
   ========================================================= */

.serviceImage {
    position: relative;

    height: 300px;

    display: block;

    overflow: hidden;

    background: #173d2f;
}

.serviceImage img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform 0.75s ease,
        filter 0.4s ease;
}

.serviceCard:hover .serviceImage img {
    transform: scale(1.055);
}


/* IMAGE SHADE */

.serviceImageShade {
    position: absolute;
    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            180deg,
            rgba(3, 31, 21, 0.03) 25%,
            rgba(3, 31, 21, 0.18) 55%,
            rgba(3, 31, 21, 0.78) 100%
        );

    transition: background 0.35s ease;

    pointer-events: none;
}

.serviceCard:hover .serviceImageShade {
    background:
        linear-gradient(
            180deg,
            rgba(3, 31, 21, 0.02) 20%,
            rgba(3, 31, 21, 0.12) 50%,
            rgba(3, 31, 21, 0.88) 100%
        );
}


/* SERVICE NUMBER */

.serviceNumber {
    position: absolute;

    top: 18px;
    left: 18px;

    z-index: 3;

    width: 37px;
    height: 37px;

    display: grid;
    place-items: center;

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

    color: #075c36;

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

    letter-spacing: 0.5px;
}


/* VIEW SERVICE */

.serviceImageLink {
    position: absolute;

    left: 19px;
    right: 19px;
    bottom: 18px;

    z-index: 3;

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

    color: #ffffff;

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

    letter-spacing: 1px;

    text-transform: uppercase;

    opacity: 0;

    transform: translateY(10px);

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

.serviceImageLink i {
    color: #8fe0b6;

    font-size: 15px;
    font-style: normal;
}

.serviceCard:hover .serviceImageLink {
    opacity: 1;

    transform: translateY(0);
}


/* =========================================================
   SERVICE CONTENT
   ========================================================= */

.serviceContent {
    min-height: 220px;

    display: flex;
    flex-direction: column;

    padding: 23px 21px 20px;
}


/* CATEGORY */

.serviceCategory {
    display: block;

    margin-bottom: 10px;

    color: #087344;

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

    letter-spacing: 1.25px;
}


/* TITLE */

.serviceContent h3 {
    margin: 0 0 11px;

    color: #153a2b;

    font-size: 18px;
    line-height: 1.25;

    letter-spacing: -0.3px;
}


/* DESCRIPTION */

.serviceContent p {
    margin: 0;

    color: #6d7973;

    font-size: 11px;
    line-height: 1.65;
}


/* LEARN MORE */

.serviceLink {
    margin-top: auto;
    padding-top: 18px;

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

    border-top:
        1px solid
        rgba(7, 92, 54, 0.10);

    color: #344f43;

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

    transition: color 0.25s ease;
}

.serviceLink span {
    color: #087344;

    font-size: 14px;

    transition: transform 0.25s ease;
}

.serviceLink:hover {
    color: #075c36;
}

.serviceLink:hover span {
    transform: translateX(4px);
}


/* =========================================================
   SERVICES BOTTOM STRIP
   ========================================================= */

.servicesBottom {
    position: relative;
    z-index: 2;

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

    flex-wrap: wrap;

    gap: 19px;

    margin-top: 43px;

    padding-top: 27px;

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

.servicesBottom span {
    color:
        rgba(255, 255, 255, 0.60);

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

    letter-spacing: 1.6px;
}

.servicesBottom i {
    width: 4px;
    height: 4px;

    background: #69c996;

    border-radius: 50%;
}


/* =========================================================
   SERVICES RESPONSIVE - TABLET
   ========================================================= */

@media (max-width: 1050px) {

    .servicesHeader {
        gap: 45px;
    }

    .servicesGrid {
        grid-template-columns:
            repeat(2, 1fr);

        gap: 20px;
    }

    .serviceImage {
        height: 330px;
    }

    .serviceContent {
        min-height: 195px;
    }

}


/* =========================================================
   SERVICES RESPONSIVE - SMALL TABLET
   ========================================================= */

@media (max-width: 750px) {

    .servicesSection {
        padding-top: 80px;
        padding-bottom: 75px;
    }

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

        align-items: start;

        gap: 25px;

        margin-bottom: 38px;
    }

    .servicesHeaderRight {
        max-width: 560px;

        justify-self: start;
    }

    .servicesHeading h2 br {
        display: none;
    }

}


/* =========================================================
   SERVICES RESPONSIVE - MOBILE
   ========================================================= */

@media (max-width: 550px) {

    .servicesSection {
        padding-top: 68px;
        padding-bottom: 65px;
    }

    .servicesHeading h2 {
        font-size: 37px;

        letter-spacing: -1.4px;
    }

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

        gap: 18px;
    }

    .serviceImage {
        height: 285px;
    }

    .serviceContent {
        min-height: 200px;

        padding: 22px 19px 19px;
    }

    .serviceContent p {
        font-size: 12px;
    }

    /*
       Mobile has no hover, so keep
       View Service visible.
    */

    .serviceImageLink {
        opacity: 1;

        transform: none;
    }

    .servicesBottom {
        justify-content: flex-start;

        gap: 12px 15px;

        margin-top: 32px;
    }

    .servicesBottom span {
        font-size: 7px;
    }

}
/* =========================================================
   PREMIUM SECTORS SECTION
   ========================================================= */

.sectors {
    position: relative;
    overflow: hidden;

    padding: 105px 0 90px;

    background:
        linear-gradient(
            180deg,
            #f6faf8 0%,
            #ffffff 100%
        );
}


/* SUBTLE BACKGROUND DETAIL */

.sectors::before {
    content: "";

    position: absolute;

    top: -230px;
    left: -210px;

    width: 520px;
    height: 520px;

    border:
        1px solid
        rgba(7, 92, 54, 0.05);

    border-radius: 50%;

    pointer-events: none;
}


/* =========================================================
   SECTORS HEADER
   ========================================================= */

.sectorsHeader {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns: 1.08fr 0.92fr;

    align-items: end;

    gap: 80px;

    margin-bottom: 48px;
}


/* LABEL */

.sectorsLabel {
    display: flex;
    align-items: center;

    gap: 12px;

    margin-bottom: 18px;
}

.sectorsLabel > span {
    width: 32px;
    height: 2px;

    display: block;

    background: #087344;
}

.sectorsLabel strong {
    color: #087344;

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

    letter-spacing: 2px;
}


/* HEADING */

.sectorsHeader h2 {
    margin: 0;

    color: #10251c;

    font-size: clamp(38px, 4vw, 53px);
    line-height: 1.05;

    letter-spacing: -2px;
}

.sectorsHeader h2 em {
    color: #087344;

    font-style: normal;
}


/* RIGHT SIDE */

.sectorsHeaderRight {
    max-width: 480px;

    justify-self: end;
}

.sectorsHeaderRight > p {
    margin: 0 0 21px;

    color: #6c7a73;

    font-size: 13px;
    line-height: 1.75;
}


/* EXPLORE PROJECTS */

.sectorsExplore {
    display: inline-flex;
    align-items: center;

    gap: 13px;

    padding-bottom: 6px;

    color: #173d2e;

    border-bottom:
        1px solid
        rgba(7, 92, 54, 0.25);

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

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

.sectorsExplore span {
    color: #087344;

    font-size: 14px;

    transition: transform 0.25s ease;
}

.sectorsExplore:hover {
    color: #087344;

    border-color: #087344;
}

.sectorsExplore:hover span {
    transform: translateX(4px);
}


/* =========================================================
   EDITORIAL SECTOR GRID
   ========================================================= */

.sectorsGrid {
    position: relative;
    z-index: 2;

    display: grid;

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

    grid-template-rows:
        255px
        255px
        225px;

    gap: 14px;
}


/* =========================================================
   GENERAL SECTOR ITEM
   ========================================================= */

.sectorItem {
    position: relative;

    min-width: 0;
    min-height: 0;

    display: block;

    overflow: hidden;

    background: #183d2f;
}


/* FEATURED OIL & GAS */

.sectorFeatured {
    grid-column: 1;
    grid-row: 1 / 3;
}


/* GOVERNMENT */

.sectorItem:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
}


/* INFRASTRUCTURE */

.sectorItem:nth-child(3) {
    grid-column: 3;
    grid-row: 1;
}


/* COMMERCIAL */

.sectorItem:nth-child(4) {
    grid-column: 2;
    grid-row: 2;
}


/* INDUSTRIAL */

.sectorItem:nth-child(5) {
    grid-column: 3;
    grid-row: 2;
}


/* PRIVATE SECTOR */

.sectorItem:nth-child(6) {
    grid-column: 1 / 4;
    grid-row: 3;
}


/* =========================================================
   SECTOR IMAGES
   ========================================================= */

.sectorItem > img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform 0.8s ease,
        filter 0.4s ease;
}

.sectorItem:hover > img {
    transform: scale(1.045);
}


/* PRIVATE SECTOR IMAGE POSITION */

.sectorItem:nth-child(6) > img {
    object-position: center 55%;
}


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

.sectorShade {
    position: absolute;
    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            180deg,
            rgba(2, 29, 19, 0.06) 15%,
            rgba(2, 29, 19, 0.18) 48%,
            rgba(2, 29, 19, 0.82) 100%
        );

    transition: background 0.35s ease;

    pointer-events: none;
}

.sectorItem:hover .sectorShade {
    background:
        linear-gradient(
            180deg,
            rgba(2, 29, 19, 0.03) 10%,
            rgba(2, 29, 19, 0.14) 43%,
            rgba(2, 29, 19, 0.90) 100%
        );
}


/* =========================================================
   SECTOR NUMBER
   ========================================================= */

.sectorNumber {
    position: absolute;

    top: 17px;
    left: 17px;

    z-index: 3;

    width: 34px;
    height: 34px;

    display: grid;
    place-items: center;

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

    color: #075c36;

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

    letter-spacing: 0.4px;
}


/* =========================================================
   SECTOR CONTENT
   ========================================================= */

.sectorContent {
    position: absolute;

    left: 20px;
    right: 55px;
    bottom: 19px;

    z-index: 3;
}

.sectorContent > span {
    display: block;

    margin-bottom: 7px;

    color: #9ce0ba;

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

    letter-spacing: 1.3px;
}

.sectorContent h3 {
    margin: 0;

    color: #ffffff;

    font-size: 20px;
    line-height: 1.15;

    letter-spacing: -0.3px;
}


/* FEATURED TITLE */

.sectorFeatured .sectorContent h3 {
    font-size: 30px;

    letter-spacing: -0.7px;
}


/* FEATURED DESCRIPTION */

.sectorContent p {
    display: none;
}

.sectorFeatured .sectorContent p {
    max-width: 390px;

    display: block;

    margin: 12px 0 0;

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

    font-size: 10px;
    line-height: 1.65;
}


/* =========================================================
   ARROW
   ========================================================= */

.sectorArrow {
    position: absolute;

    right: 18px;
    bottom: 18px;

    z-index: 3;

    width: 34px;
    height: 34px;

    display: grid;
    place-items: center;

    color: #ffffff;

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

    font-size: 13px;

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

.sectorItem:hover .sectorArrow {
    background: #ffffff;
    color: #075c36;

    border-color: #ffffff;

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


/* =========================================================
   PRIVATE SECTOR - WIDE FEATURE
   ========================================================= */

.sectorItem:nth-child(6) .sectorContent {
    max-width: 450px;
}

.sectorItem:nth-child(6) .sectorContent h3 {
    font-size: 25px;
}


/* =========================================================
   SECTORS BOTTOM
   ========================================================= */

.sectorsBottom {
    position: relative;
    z-index: 2;

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

    align-items: center;

    gap: 22px;

    margin-top: 31px;
}

.sectorsBottom > span {
    color: #087344;

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

    letter-spacing: 1.6px;
}

.sectorsBottom > div {
    height: 1px;

    background:
        rgba(7, 92, 54, 0.13);
}

.sectorsBottom p {
    margin: 0;

    color: #7a8780;

    font-size: 9px;
}


/* =========================================================
   SECTORS RESPONSIVE - TABLET
   ========================================================= */

@media (max-width: 1050px) {

    .sectorsHeader {
        gap: 45px;
    }

    .sectorsGrid {
        grid-template-columns:
            1.2fr
            1fr
            1fr;

        grid-template-rows:
            235px
            235px
            210px;
    }

}


/* =========================================================
   SECTORS RESPONSIVE - SMALL TABLET
   ========================================================= */

@media (max-width: 800px) {

    .sectors {
        padding-top: 85px;
        padding-bottom: 75px;
    }

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

        align-items: start;

        gap: 25px;

        margin-bottom: 38px;
    }

    .sectorsHeaderRight {
        max-width: 580px;

        justify-self: start;
    }

    .sectorsHeader h2 br {
        display: none;
    }


    /* TWO-COLUMN EDITORIAL GRID */

    .sectorsGrid {
        grid-template-columns:
            repeat(2, 1fr);

        grid-template-rows:
            370px
            230px
            230px
            250px;
    }

    .sectorFeatured {
        grid-column: 1 / 3;
        grid-row: 1;
    }

    .sectorItem:nth-child(2) {
        grid-column: 1;
        grid-row: 2;
    }

    .sectorItem:nth-child(3) {
        grid-column: 2;
        grid-row: 2;
    }

    .sectorItem:nth-child(4) {
        grid-column: 1;
        grid-row: 3;
    }

    .sectorItem:nth-child(5) {
        grid-column: 2;
        grid-row: 3;
    }

    .sectorItem:nth-child(6) {
        grid-column: 1 / 3;
        grid-row: 4;
    }

}


/* =========================================================
   SECTORS RESPONSIVE - MOBILE
   ========================================================= */

@media (max-width: 550px) {

    .sectors {
        padding-top: 68px;
        padding-bottom: 65px;
    }

    .sectorsHeader h2 {
        font-size: 37px;

        letter-spacing: -1.4px;
    }


    /* SINGLE COLUMN */

    .sectorsGrid {
        display: grid;

        grid-template-columns: 1fr;

        grid-template-rows: none;

        gap: 12px;
    }

    .sectorFeatured,
    .sectorItem:nth-child(2),
    .sectorItem:nth-child(3),
    .sectorItem:nth-child(4),
    .sectorItem:nth-child(5),
    .sectorItem:nth-child(6) {
        grid-column: 1;
        grid-row: auto;
    }


    /* FEATURE */

    .sectorFeatured {
        height: 370px;
    }


    /* OTHER SECTORS */

    .sectorItem:not(.sectorFeatured) {
        height: 230px;
    }


    /* PRIVATE SECTOR */

    .sectorItem:nth-child(6) {
        height: 250px;
    }


    /* CONTENT */

    .sectorContent {
        left: 17px;
        right: 52px;
        bottom: 17px;
    }

    .sectorFeatured .sectorContent h3 {
        font-size: 27px;
    }

    .sectorItem:nth-child(6) .sectorContent h3 {
        font-size: 21px;
    }


    /* BOTTOM */

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

        gap: 10px;

        margin-top: 25px;
    }

    .sectorsBottom > div {
        width: 50px;
    }

}
/* =========================================================
   PREMIUM RFQ / CTA
   ========================================================= */

.cta {
    position: relative;
    overflow: hidden;

    padding: 82px 0 0;

    background:
        linear-gradient(
            110deg,
            #075c36 0%,
            #075c36 42%,
            #064f31 70%,
            #043d28 100%
        );

    color: #ffffff;
}


/* =========================================================
   TECHNICAL ARTWORK
   ========================================================= */

.ctaArtwork {
    position: absolute;

    right: -20px;
    bottom: -25px;

    z-index: 1;

    width: 54%;
    max-width: 900px;
    height: auto;

    object-fit: contain;
    object-position: right bottom;

    opacity: 0.22;

    pointer-events: none;
    user-select: none;
}


/* SOFT FADE OVER ARTWORK */

.cta::after {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 2;

    background:
        linear-gradient(
            90deg,
            rgba(7, 92, 54, 1) 0%,
            rgba(7, 92, 54, 0.97) 25%,
            rgba(7, 92, 54, 0.76) 48%,
            rgba(4, 61, 40, 0.22) 78%,
            rgba(4, 61, 40, 0.05) 100%
        );

    pointer-events: none;
}


/* =========================================================
   SUBTLE TECHNICAL GRID
   ========================================================= */

.ctaPattern {
    position: absolute;
    inset: 0;

    z-index: 0;

    opacity: 0.12;

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

    background-size: 55px 55px;

    pointer-events: none;
}


/* =========================================================
   CTA CONTENT
   ========================================================= */

.ctaContent {
    position: relative;
    z-index: 5;

    display: grid;
    grid-template-columns: 1.25fr 0.75fr;

    align-items: center;

    gap: 80px;

    min-height: 280px;

    padding-bottom: 70px;
}


/* =========================================================
   LEFT TEXT
   ========================================================= */

.ctaText {
    max-width: 720px;
}


/* LABEL */

.ctaLabel {
    display: flex;
    align-items: center;

    gap: 12px;

    margin-bottom: 19px;
}

.ctaLabel > span {
    width: 32px;
    height: 2px;

    display: block;

    background: #8fe0b6;
}

.ctaLabel strong {
    color: #a3e6c1;

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

    letter-spacing: 2px;
}


/* HEADING */

.ctaText h2 {
    margin: 0;

    max-width: 700px;

    color: #ffffff;

    font-size: clamp(35px, 3.7vw, 50px);
    line-height: 1.06;

    letter-spacing: -1.8px;
}

.ctaText h2 em {
    color: #9ce1bb;

    font-style: normal;
}


/* DESCRIPTION */

.ctaText > p {
    max-width: 530px;

    margin: 22px 0 0;

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

    font-size: 12px;
    line-height: 1.75;
}


/* =========================================================
   CTA ACTION
   ========================================================= */

.ctaAction {
    position: relative;

    justify-self: end;

    width: 100%;
    max-width: 285px;

    padding: 26px;

    background:
        rgba(3, 43, 28, 0.42);

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

    backdrop-filter: blur(6px);
}

.ctaActionLabel {
    display: block;

    margin-bottom: 18px;

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

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

    line-height: 1.5;

    letter-spacing: 1.3px;
}


/* =========================================================
   VIEW INQUIRY BUTTON
   ========================================================= */

.ctaButton {
    width: 100%;
    min-height: 52px;

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

    gap: 20px;

    padding: 0 19px;

    background: #ffffff;
    color: #075c36;

    border: 1px solid #ffffff;

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

    cursor: pointer;

    transition:
        background 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.ctaButton i {
    font-size: 15px;
    font-style: normal;

    transition: transform 0.25s ease;
}

.ctaButton:hover {
    background: #0a2c20;
    color: #ffffff;

    border-color:
        rgba(255, 255, 255, 0.30);

    transform: translateY(-2px);

    box-shadow:
        0 12px 28px
        rgba(0, 0, 0, 0.15);
}

.ctaButton:hover i {
    transform: translateX(4px);
}


/* =========================================================
   CTA BOTTOM STRIP
   ========================================================= */

.ctaBottom {
    position: relative;
    z-index: 5;

    min-height: 58px;

    display: flex;
    align-items: center;

    gap: 18px;

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

.ctaBottom span {
    color:
        rgba(255, 255, 255, 0.54);

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

    letter-spacing: 1.4px;
}

.ctaBottom i {
    width: 3px;
    height: 3px;

    flex-shrink: 0;

    background: #8cd9af;

    border-radius: 50%;
}


/* =========================================================
   CTA RESPONSIVE - TABLET
   ========================================================= */

@media (max-width: 900px) {

    .cta {
        padding-top: 70px;
    }

    .ctaContent {
        grid-template-columns:
            1.1fr 0.9fr;

        gap: 45px;

        padding-bottom: 60px;
    }

    .ctaArtwork {
        width: 70%;

        right: -15%;

        opacity: 0.17;
    }

}


/* =========================================================
   CTA RESPONSIVE - SMALL TABLET
   ========================================================= */

@media (max-width: 700px) {

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

        align-items: start;

        gap: 38px;
    }

    .ctaAction {
        justify-self: start;

        max-width: 320px;
    }

    .ctaArtwork {
        width: 95%;

        right: -38%;
        bottom: 0;

        opacity: 0.13;
    }

    .cta::after {
        background:
            linear-gradient(
                90deg,
                rgba(7, 92, 54, 0.98) 0%,
                rgba(7, 92, 54, 0.91) 55%,
                rgba(4, 61, 40, 0.55) 100%
            );
    }

}


/* =========================================================
   CTA RESPONSIVE - MOBILE
   ========================================================= */

@media (max-width: 550px) {

    .cta {
        padding-top: 60px;
    }

    .ctaContent {
        gap: 32px;

        padding-bottom: 48px;
    }

    .ctaLabel strong {
        font-size: 8px;

        letter-spacing: 1.5px;
    }

    .ctaText h2 {
        font-size: 36px;

        letter-spacing: -1.3px;
    }

    .ctaText h2 br {
        display: none;
    }

    .ctaText > p {
        font-size: 11px;
    }

    .ctaAction {
        max-width: 100%;

        padding: 20px;
    }

    .ctaArtwork {
        width: 125%;

        right: -65%;

        opacity: 0.10;
    }

    .ctaBottom {
        min-height: auto;

        flex-wrap: wrap;

        gap: 10px 13px;

        padding: 18px 0;
    }

    .ctaBottom span {
        font-size: 6px;

        letter-spacing: 1px;
    }

}


/* =========================================================
   INQUIRY PANEL
   ========================================================= */

.panel {
    position: fixed;

    inset: 0;

    z-index: 100;

    padding: 50px 20px;

    overflow-y: auto;

    background:
        rgba(6, 26, 18, 0.88);
}

.hidden {
    display: none;
}

.modal {
    position: relative;

    width: 100%;
    max-width: 700px;

    margin: 0 auto;

    padding: 40px;

    background: #ffffff;

    box-shadow:
        0 30px 80px
        rgba(0, 0, 0, 0.25);
}

.modal #close {
    position: absolute;

    top: 12px;
    right: 15px;

    width: 36px;
    height: 36px;

    display: grid;
    place-items: center;

    background: transparent;

    border: 0;

    color: #17231e;

    font-size: 30px;
}

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

    gap: 20px;

    padding: 12px 0;

    border-bottom:
        1px solid #dddddd;
}


/* =========================================================
   FORM
   ========================================================= */

.modal form {
    margin-top: 25px;
}

.modal input,
.modal textarea {
    width: 100%;

    margin: 5px 0;

    padding: 13px;

    background: #ffffff;

    border:
        1px solid #dce5e0;

    outline: none;

    color: #17231e;

    font-size: 13px;
}

.modal input:focus,
.modal textarea:focus {
    border-color: #075c36;

    box-shadow:
        0 0 0 3px
        rgba(7, 92, 54, 0.08);
}

.modal textarea {
    min-height: 120px;

    resize: vertical;
}

.submit {
    margin-top: 10px;

    padding: 14px 20px;

    background: #075c36;
    color: #ffffff;

    border: 0;

    font-size: 13px;
    font-weight: 700;
}
/* =========================================================
   PREMIUM FOOTER
   ========================================================= */

.siteFooter {
    position: relative;
    overflow: hidden;

    padding: 78px 0 0;

    background:
        linear-gradient(
            135deg,
            #06271c 0%,
            #082f22 55%,
            #052419 100%
        );

    color: #ffffff;
}


/* =========================================================
   OPTIONAL FOOTER ARTWORK
   ========================================================= */

.footerArtwork {
    position: absolute;

    right: -40px;
    bottom: 20px;

    z-index: 0;

    width: 48%;
    max-width: 760px;
    height: auto;

    object-fit: contain;

    opacity: 0.055;

    pointer-events: none;
    user-select: none;
}


/* SUBTLE BACKGROUND GRID */

.siteFooter::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 0;

    opacity: 0.08;

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

    background-size: 60px 60px;

    pointer-events: none;
}


/* =========================================================
   MAIN FOOTER GRID
   ========================================================= */

.foot {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        1.55fr
        0.72fr
        0.72fr
        1.05fr;

    gap: 65px;

    padding-bottom: 65px;
}


/* =========================================================
   COMPANY / BRAND
   ========================================================= */

.footerBrand {
    max-width: 320px;
}


/* LOGO */

.footerLogo {
    display: inline-block;

    margin-bottom: 24px;
}

.footerLogo img {
    width: 205px;
    max-width: 100%;
    height: auto;

    display: block;
}


/* COMPANY DESCRIPTION */

.footerDescription {
    max-width: 270px;

    margin: 0 0 12px;

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

    font-size: 11px;
    line-height: 1.7;
}


/* SINCE */

.footerSince {
    margin: 0;

    color: #9ddfba;

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

    letter-spacing: 0.2px;
}


/* KUWAIT / UAE */

.footerMarkets {
    display: flex;
    align-items: center;

    gap: 11px;

    margin-top: 27px;
}

.footerMarkets span {
    color:
        rgba(255, 255, 255, 0.47);

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

    letter-spacing: 1.5px;
}

.footerMarkets i {
    width: 3px;
    height: 3px;

    background: #78d2a2;

    border-radius: 50%;
}


/* =========================================================
   FOOTER COLUMNS
   ========================================================= */

.footerColumn {
    display: flex;
    flex-direction: column;

    align-items: flex-start;
}


/* COLUMN HEADING */

.footerColumn h4 {
    position: relative;

    margin: 3px 0 25px;

    padding-bottom: 12px;

    color: #ffffff;

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

    letter-spacing: 1.3px;

    text-transform: uppercase;
}

.footerColumn h4::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 22px;
    height: 2px;

    background: #74d5a1;
}


/* COLUMN LINKS */

.footerColumn > a:not(.footerContactLink) {
    position: relative;

    margin-bottom: 13px;

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

    font-size: 10px;
    line-height: 1.4;

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

.footerColumn > a:not(.footerContactLink):hover {
    color: #ffffff;

    transform: translateX(3px);
}


/* =========================================================
   CONTACT
   ========================================================= */

.footerContact {
    min-width: 0;
}


/* LOCATION */

.footerLocation {
    display: flex;
    align-items: center;

    gap: 13px;

    margin-bottom: 22px;
}

.footerIcon {
    width: 35px;
    height: 35px;

    flex-shrink: 0;

    display: grid;
    place-items: center;

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

    color: #8bdcaf;

    font-size: 15px;
}

.footerLocation small {
    display: block;

    margin-bottom: 4px;

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

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

    letter-spacing: 1.3px;
}

.footerLocation p {
    margin: 0;

    color: #ffffff;

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


/* =========================================================
   CONTACT BUTTON
   ========================================================= */

.footerContactLink {
    width: 100%;
    max-width: 225px;
    min-height: 44px;

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

    gap: 20px;

    padding: 0 15px;

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

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

    color: #ffffff;

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

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

.footerContactLink i {
    color: #8cddb1;

    font-size: 14px;
    font-style: normal;

    transition: transform 0.25s ease;
}

.footerContactLink:hover {
    background:
        rgba(255, 255, 255, 0.10);

    border-color:
        rgba(255, 255, 255, 0.28);

    transform: translateY(-2px);
}

.footerContactLink:hover i {
    transform: translateX(3px);
}


/* =========================================================
   COMPANY STATEMENT
   ========================================================= */

.footerStatement {
    margin-top: 27px;

    padding-left: 15px;

    border-left: 2px solid #67ca95;
}

.footerStatement > span {
    display: block;

    margin-bottom: 7px;

    color: #80d6a8;

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

    letter-spacing: 1.2px;
}

.footerStatement strong {
    display: block;

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

    font-size: 13px;
    line-height: 1.45;

    font-weight: 600;
}


/* =========================================================
   DIVIDER
   ========================================================= */

.footerDivider {
    position: relative;
    z-index: 2;

    height: 1px;

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


/* =========================================================
   FOOTER BOTTOM
   ========================================================= */

.footerBottom {
    position: relative;
    z-index: 2;

    min-height: 72px;

    display: grid;

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

    align-items: center;

    gap: 30px;
}


/* COPYRIGHT */

.footerCopyright {
    color:
        rgba(255, 255, 255, 0.39);

    font-size: 8px;
    line-height: 1.5;
}


/* =========================================================
   CENTER CAPABILITIES
   ========================================================= */

.footerBottomCenter {
    display: flex;
    align-items: center;

    justify-content: center;

    gap: 10px;
}

.footerBottomCenter span {
    color:
        rgba(255, 255, 255, 0.37);

    font-size: 6px;
    font-weight: 800;

    letter-spacing: 1.2px;
}

.footerBottomCenter i {
    width: 3px;
    height: 3px;

    background: #65c992;

    border-radius: 50%;
}


/* =========================================================
   LEGAL LINKS
   ========================================================= */

.footerBottomLinks {
    display: flex;
    align-items: center;

    justify-content: flex-end;

    gap: 20px;
}

.footerBottomLinks a {
    color:
        rgba(255, 255, 255, 0.40);

    font-size: 8px;

    transition: color 0.25s ease;
}

.footerBottomLinks a:hover {
    color: #ffffff;
}


/* =========================================================
   FOOTER RESPONSIVE - TABLET
   ========================================================= */

@media (max-width: 1000px) {

    .foot {
        grid-template-columns:
            1.4fr
            0.8fr
            0.8fr;

        gap: 50px;
    }

    .footerContact {
        grid-column: 1 / -1;

        display: grid;

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

        align-items: center;

        gap: 35px;

        padding-top: 35px;

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

    .footerContact h4 {
        display: none;
    }

    .footerLocation {
        margin-bottom: 0;
    }

    .footerStatement {
        margin-top: 0;
    }

    .footerArtwork {
        width: 65%;
    }

}


/* =========================================================
   FOOTER RESPONSIVE - SMALL TABLET
   ========================================================= */

@media (max-width: 750px) {

    .siteFooter {
        padding-top: 65px;
    }

    .foot {
        grid-template-columns:
            1.3fr
            0.7fr
            0.7fr;

        gap: 35px;

        padding-bottom: 50px;
    }

    .footerLogo img {
        width: 180px;
    }

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

        gap: 25px;
    }

    .footerStatement {
        grid-column: 1 / -1;
    }

    .footerBottom {
        grid-template-columns:
            1fr
            auto;

        gap: 20px;

        padding: 20px 0;
    }

    .footerBottomCenter {
        display: none;
    }

}


/* =========================================================
   FOOTER RESPONSIVE - MOBILE
   ========================================================= */

@media (max-width: 550px) {

    .siteFooter {
        padding-top: 55px;
    }

    .foot {
        grid-template-columns:
            repeat(2, 1fr);

        gap: 42px 25px;

        padding-bottom: 45px;
    }

    .footerBrand {
        grid-column: 1 / -1;

        max-width: 300px;
    }

    .footerLogo {
        margin-bottom: 20px;
    }

    .footerLogo img {
        width: 175px;
    }

    .footerColumn h4 {
        margin-bottom: 20px;
    }

    .footerContact {
        grid-column: 1 / -1;

        display: block;

        padding-top: 30px;
    }

    .footerContact h4 {
        display: block;
    }

    .footerLocation {
        margin-bottom: 20px;
    }

    .footerStatement {
        margin-top: 25px;
    }

    .footerArtwork {
        width: 110%;

        right: -55%;

        opacity: 0.035;
    }

    .footerBottom {
        min-height: auto;

        grid-template-columns: 1fr;

        align-items: start;

        gap: 13px;

        padding: 22px 0;
    }

    .footerBottomLinks {
        justify-content: flex-start;

        gap: 16px;
    }

}

/* =========================================================
   FINAL HOMEPAGE POLISH
   DESKTOP / LARGE SCREEN REFINEMENTS
   ========================================================= */

@media (min-width: 1100px) {

    /* -----------------------------------------------------
       GLOBAL CONTENT WIDTH
       ----------------------------------------------------- */

    .wrap {
        width: min(1240px, calc(100% - 56px));
    }


    /* -----------------------------------------------------
       TRUST BAR
       ----------------------------------------------------- */

    .trustIntro span {
        font-size: 8px;
    }

    .trustIntro strong {
        font-size: 15px;
    }

    .trustItem span {
        font-size: 8px;
    }

    .trustItem strong {
        font-size: 11px;
    }


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

    .productsIntro p {
        font-size: 13px;
        line-height: 1.7;
    }

    .productContent {
        padding: 23px 20px 20px;
    }

    .productContent > span {
        font-size: 8px;
        letter-spacing: 1.35px;
    }

    .productContent h3 {
        font-size: 17px;
        line-height: 1.25;
    }

    .productContent > p {
        font-size: 11px;
        line-height: 1.65;
    }

    .productActions a,
    .productActions button {
        font-size: 9px;
    }

    .productsBottom > span {
        font-size: 10px;
    }

    .productsViewAll {
        font-size: 10px;
    }


    /* -----------------------------------------------------
       ABOUT
       ----------------------------------------------------- */

    .aboutContent > p {
        font-size: 12px;
        line-height: 1.75;
    }

    .aboutPoints strong {
        font-size: 10px;
    }

    .aboutPoints p {
        font-size: 8px;
        line-height: 1.55;
    }


    /* -----------------------------------------------------
       SERVICES
       ----------------------------------------------------- */

    .servicesHeaderRight > p {
        font-size: 12px;
        line-height: 1.7;
    }

    .serviceContent {
        padding-left: 20px;
        padding-right: 20px;
    }

    .serviceContent > span {
        font-size: 8px;
        letter-spacing: 1.25px;
    }

    .serviceContent h3 {
        font-size: 17px;
    }

    .serviceContent > p {
        font-size: 10px;
        line-height: 1.65;
    }

    .serviceLearn {
        font-size: 9px;
    }


    /* -----------------------------------------------------
       SECTORS
       ----------------------------------------------------- */

    .sectorsHeaderRight p {
        font-size: 12px;
        line-height: 1.75;
    }

    .sectorContent > span {
        font-size: 7px;
    }

    .sectorContent h3 {
        font-size: 19px;
    }

    .sectorFeatured .sectorContent h3 {
        font-size: 27px;
    }

    .sectorFeatured .sectorContent p {
        font-size: 9px;
        line-height: 1.55;
    }


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

    .ctaText > p {
        font-size: 12px;
        line-height: 1.75;
    }

    .ctaActionLabel {
        font-size: 8px;
    }

    .ctaButton {
        font-size: 10px;
    }

    .ctaBottom span {
        font-size: 7px;
    }


    /* -----------------------------------------------------
       FOOTER
       ----------------------------------------------------- */

    .siteFooter {
        padding-top: 68px;
    }

    .foot {
        padding-bottom: 52px;
    }

    .footerDescription {
        font-size: 11px;
    }

    .footerSince {
        font-size: 10px;
    }

    .footerColumn h4 {
        font-size: 10px;
    }

    .footerColumn > a:not(.footerContactLink) {
        font-size: 10px;
    }

    .footerLocation p {
        font-size: 11px;
    }

    .footerContactLink {
        font-size: 9px;
    }

    .footerStatement strong {
        font-size: 13px;
    }

    .footerBottom {
        min-height: 62px;
    }

    .footerCopyright {
        font-size: 9px;
    }

    .footerBottomLinks a {
        font-size: 8px;
    }

}
/* =========================================================
   FINAL HOMEPAGE POLISH
   MOBILE REFINEMENTS
   ========================================================= */

@media (max-width: 550px) {

    /* -----------------------------------------------------
       GLOBAL
       ----------------------------------------------------- */

    .wrap {
        width: min(100% - 40px, 1240px);
    }


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

    .heroGrid {
        min-height: auto;
    }

    .heroContent {
        padding-top: 54px;
        padding-bottom: 38px;
    }

    .heroContent h1 {
        font-size: 47px;
        line-height: 1.03;
        letter-spacing: -2px;
    }

    .heroDescription {
        margin-top: 26px;
        font-size: 13px;
        line-height: 1.75;
    }

    .heroButtons {
        margin-top: 24px;
        gap: 10px;
    }

    .heroPrimaryButton,
    .heroSecondaryButton {
        min-height: 48px;
        padding-left: 17px;
        padding-right: 17px;
        font-size: 10px;
    }

    .heroStats {
        margin-top: 36px;
        padding-top: 20px;
    }

    .heroStat strong {
        font-size: 22px;
    }

    .heroStat small {
        font-size: 6px;
        line-height: 1.6;
    }

    .heroVisual {
        margin-top: 0;
    }


    /* -----------------------------------------------------
       TRUST BAR
       ----------------------------------------------------- */

    .trustInner {
        padding-top: 25px;
        padding-bottom: 0;
    }

    .trustIntro {
        padding-bottom: 22px;
    }

    .trustItem {
        min-height: 70px;
    }


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

    .productsSection {
        padding-top: 66px;
        padding-bottom: 65px;
    }

    .productsIntro {
        margin-bottom: 36px;
    }

    .productsIntro h2 {
        font-size: 38px;
        line-height: 1.05;
        letter-spacing: -1.4px;
    }

    .productsIntro p {
        font-size: 12px;
        line-height: 1.7;
    }

    .productGrid {
        gap: 18px;
    }

    .productContent {
        padding: 22px 20px 20px;
    }

    .productContent h3 {
        font-size: 18px;
    }

    .productContent > p {
        font-size: 11px;
        line-height: 1.65;
    }

    .productActions {
        margin-top: 20px;
        padding-top: 18px;
    }

    .productActions a,
    .productActions button {
        font-size: 9px;
    }

    .productsBottom {
        margin-top: 35px;
        padding-top: 28px;
        gap: 20px;
    }


    /* -----------------------------------------------------
       ABOUT
       ----------------------------------------------------- */

    .about {
        padding-top: 70px;
        padding-bottom: 70px;
    }

    .aboutGrid {
        gap: 62px;
    }

    .aboutContent h2 {
        font-size: 37px;
        line-height: 1.07;
        letter-spacing: -1.4px;
    }

    .aboutContent > p {
        font-size: 12px;
        line-height: 1.75;
    }

    .aboutPoints {
        margin-top: 30px;
    }

    .aboutAction {
        margin-top: 30px;
    }


    /* -----------------------------------------------------
       SERVICES
       ----------------------------------------------------- */

    .servicesSection {
        padding-top: 68px;
        padding-bottom: 68px;
    }

    .servicesHeader {
        margin-bottom: 35px;
    }

    .servicesHeader h2 {
        font-size: 38px;
        line-height: 1.05;
        letter-spacing: -1.4px;
    }

    .servicesHeaderRight > p {
        font-size: 12px;
        line-height: 1.7;
    }

    .servicesGrid {
        gap: 18px;
    }

    .serviceContent {
        padding: 22px 20px 20px;
    }

    .serviceContent h3 {
        font-size: 18px;
    }

    .serviceContent > p {
        font-size: 11px;
        line-height: 1.65;
    }


    /* -----------------------------------------------------
       SECTORS
       ----------------------------------------------------- */

    .sectors {
        padding-top: 68px;
        padding-bottom: 68px;
    }

    .sectorsHeader {
        margin-bottom: 34px;
    }

    .sectorsHeader h2 {
        font-size: 38px;
        line-height: 1.05;
        letter-spacing: -1.4px;
    }

    .sectorsHeaderRight p {
        font-size: 12px;
        line-height: 1.7;
    }

    .sectorsGrid {
        gap: 14px;
    }

    .sectorContent h3,
    .sectorFeatured .sectorContent h3 {
        font-size: 22px;
    }

    .sectorFeatured .sectorContent p {
        font-size: 9px;
        line-height: 1.5;
    }

    .sectorsBottom {
        margin-top: 27px;
    }


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

    .cta {
        padding-top: 58px;
    }

    .ctaContent {
        gap: 30px;
        padding-bottom: 44px;
    }

    .ctaText h2 {
        font-size: 37px;
        line-height: 1.05;
        letter-spacing: -1.4px;
    }

    .ctaText > p {
        font-size: 11px;
        line-height: 1.7;
    }

    .ctaAction {
        padding: 20px;
    }

    .ctaButton {
        min-height: 52px;
    }

    .ctaBottom {
        padding-top: 17px;
        padding-bottom: 17px;
    }


    /* -----------------------------------------------------
       FOOTER
       ----------------------------------------------------- */

    .siteFooter {
        padding-top: 52px;
    }

    .foot {
        gap: 35px 24px;
        padding-bottom: 38px;
    }

    .footerBrand {
        margin-bottom: 3px;
    }

    .footerDescription {
        font-size: 10px;
        line-height: 1.65;
    }

    .footerColumn > a:not(.footerContactLink) {
        font-size: 9px;
        margin-bottom: 12px;
    }

    .footerContact {
        padding-top: 28px;
    }

    .footerContactLink {
        max-width: 232px;
    }

    .footerBottom {
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .footerCopyright {
        font-size: 8px;
        line-height: 1.55;
    }

    .footerBottomLinks a {
        font-size: 7px;
    }

}

/* =========================================================
   INSTAGRAM / LATEST UPDATES
   ========================================================= */

.instagramSection {
    position: relative;
    overflow: hidden;
    padding: 90px 0 76px;
    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f7faf8 100%
        );
}


/* =========================================================
   HEADER
   ========================================================= */

.instagramHeader {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 80px;
    align-items: end;
    margin-bottom: 46px;
}

.instagramLabel {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.instagramLabel > span {
    display: block;
    width: 34px;
    height: 1px;
    background: #17724d;
}

.instagramLabel strong {
    color: #17724d;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
}

.instagramHeading h2 {
    margin: 0;
    color: #13261d;
    font-size: clamp(38px, 4vw, 55px);
    font-weight: 600;
    line-height: 1.03;
    letter-spacing: -2px;
}

.instagramHeading h2 em {
    color: #25815b;
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
}


/* =========================================================
   HEADER RIGHT
   ========================================================= */

.instagramHeaderRight {
    max-width: 390px;
    justify-self: end;
}

.instagramHeaderRight p {
    margin: 0 0 24px;
    color: #6c7972;
    font-size: 12px;
    line-height: 1.75;
}

.instagramFollow {
    display: inline-flex;
    align-items: center;
    gap: 20px;
    color: #153d2c;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-decoration: none;
    transition: gap 0.25s ease,
                color 0.25s ease;
}

.instagramFollow i {
    font-style: normal;
    font-size: 15px;
}

.instagramFollow:hover {
    gap: 25px;
    color: #25815b;
}


/* =========================================================
   FEED GRID
   ========================================================= */

.instagramGrid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.instagramPost {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #eaf1ed;
    text-decoration: none;
}


/* TEMPORARY PLACEHOLDER
   This disappears later when we connect the real feed.
*/

.instagramPlaceholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 25px;
    background:
        linear-gradient(
            145deg,
            #eef5f1 0%,
            #dcebe3 55%,
            #cbded4 100%
        );
}

.instagramPlaceholder::before {
    content: "";
    position: absolute;
    width: 150px;
    height: 150px;
    right: -45px;
    top: -45px;
    border: 1px solid rgba(20, 92, 62, 0.12);
    border-radius: 50%;
}

.instagramPlaceholder::after {
    content: "";
    position: absolute;
    width: 90px;
    height: 90px;
    right: -20px;
    top: -20px;
    border: 1px solid rgba(20, 92, 62, 0.12);
    border-radius: 50%;
}

.instagramPlaceholder span {
    position: relative;
    z-index: 1;
    margin-bottom: 8px;
    color: rgba(23, 114, 77, 0.55);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.instagramPlaceholder strong {
    position: relative;
    z-index: 1;
    color: #153d2c;
    font-size: 16px;
    font-weight: 600;
}


/* =========================================================
   POST HOVER
   ========================================================= */

.instagramOverlay {
    position: absolute;
    inset: 0;
    z-index: 3;

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

    padding: 24px;

    color: #ffffff;

    background:
        linear-gradient(
            180deg,
            rgba(8, 40, 27, 0) 30%,
            rgba(8, 40, 27, 0.88) 100%
        );

    opacity: 0;
    transition: opacity 0.3s ease;
}

.instagramOverlay span {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.instagramOverlay i {
    font-size: 17px;
    font-style: normal;
}

.instagramPost:hover .instagramOverlay {
    opacity: 1;
}


/* =========================================================
   BOTTOM LINE
   ========================================================= */

.instagramBottom {
    display: flex;
    align-items: center;
    gap: 20px;

    margin-top: 30px;
    padding-top: 24px;

    border-top: 1px solid #dfe7e2;
}

.instagramBottom > span {
    color: #17724d;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1.6px;
}

.instagramBottom > div {
    flex: 1;
    height: 1px;
    background: #e2e9e5;
}

.instagramBottom > a {
    color: #53645b;
    font-size: 9px;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.25s ease;
}

.instagramBottom > a:hover {
    color: #17724d;
}


/* =========================================================
   INSTAGRAM — TABLET
   ========================================================= */

@media (max-width: 900px) {

    .instagramSection {
        padding: 75px 0 65px;
    }

    .instagramHeader {
        grid-template-columns: 1fr;
        gap: 25px;
        margin-bottom: 38px;
    }

    .instagramHeaderRight {
        max-width: 520px;
        justify-self: start;
    }

    .instagramGrid {
        grid-template-columns: repeat(2, 1fr);
    }

}


/* =========================================================
   INSTAGRAM — MOBILE
   ========================================================= */

@media (max-width: 550px) {

    .instagramSection {
        padding: 66px 0 58px;
    }

    .instagramHeader {
        gap: 24px;
        margin-bottom: 32px;
    }

    .instagramLabel {
        margin-bottom: 15px;
    }

    .instagramLabel strong {
        font-size: 8px;
    }

    .instagramHeading h2 {
        font-size: 38px;
        line-height: 1.05;
        letter-spacing: -1.4px;
    }

    .instagramHeaderRight p {
        font-size: 12px;
        line-height: 1.7;
        margin-bottom: 20px;
    }

    .instagramGrid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .instagramPlaceholder {
        padding: 16px;
    }

    .instagramPlaceholder span {
        font-size: 7px;
    }

    .instagramPlaceholder strong {
        font-size: 12px;
    }

    .instagramOverlay {
        padding: 15px;
    }

    .instagramOverlay span {
        font-size: 7px;
    }

    .instagramBottom {
        gap: 12px;
        margin-top: 24px;
        padding-top: 20px;
    }

    .instagramBottom > span {
        font-size: 6px;
        letter-spacing: 1px;
    }

    .instagramBottom > a {
        font-size: 7px;
        white-space: nowrap;
    }

}

/* =========================================================
   ABOUT PAGE
   PREMIUM HERO
========================================================= */

.aboutPageHero {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(
            135deg,
            #f8fbf9 0%,
            #f2f7f4 55%,
            #eaf3ee 100%
        );
}


/* SUBTLE TECHNICAL BACKGROUND */

.aboutHeroPattern {
    position: absolute;
    inset: 0;
    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(20, 84, 61, 0.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(20, 84, 61, 0.035) 1px,
            transparent 1px
        );

    background-size: 70px 70px;

    mask-image:
        linear-gradient(
            to right,
            transparent,
            rgba(0, 0, 0, 0.55),
            transparent
        );
}


/* =========================================================
   MAIN GRID
========================================================= */

.aboutHeroGrid {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns: 0.92fr 1.08fr;
    align-items: stretch;

    min-height: 650px;
}


/* =========================================================
   LEFT CONTENT
========================================================= */

.aboutHeroContent {
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding:
        82px
        72px
        72px
        0;
}


/* LABEL */

.aboutHeroLabel {
    display: flex;
    align-items: center;
    gap: 13px;

    margin-bottom: 25px;
}

.aboutHeroLabel > span {
    display: block;

    width: 36px;
    height: 1px;

    background: #1b7453;
}

.aboutHeroLabel strong {
    color: #1b7453;

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

    letter-spacing: 2.1px;
}


/* HEADING */

.aboutHeroContent h1 {
    margin: 0;

    color: #163b2e;

    font-size: clamp(48px, 4.6vw, 72px);
    font-weight: 600;

    line-height: 0.99;
    letter-spacing: -3px;
}

.aboutHeroContent h1 em {
    color: #23835f;

    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
}


/* INTRODUCTION */

.aboutHeroLead {
    max-width: 510px;

    margin:
        30px
        0
        0;

    color: #64756e;

    font-size: 13px;
    line-height: 1.85;
}


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

.aboutHeroActions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 12px;

    margin-top: 31px;
}


.aboutHeroPrimary,
.aboutHeroSecondary {
    min-height: 50px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 28px;

    padding:
        0
        20px;

    text-decoration: none;

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

    letter-spacing: 0.4px;

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


.aboutHeroPrimary {
    color: #ffffff;
    background: #176647;

    border: 1px solid #176647;
}

.aboutHeroPrimary:hover {
    background: #0e5138;
    border-color: #0e5138;

    transform: translateY(-2px);
}


.aboutHeroSecondary {
    color: #174d38;

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

    border: 1px solid rgba(22, 91, 65, 0.23);
}

.aboutHeroSecondary:hover {
    background: #ffffff;

    transform: translateY(-2px);
}


.aboutHeroPrimary i,
.aboutHeroSecondary i {
    font-style: normal;
    font-size: 13px;
}


/* =========================================================
   COMPANY FACTS
========================================================= */

.aboutHeroFacts {
    display: grid;
    grid-template-columns:
        repeat(3, 1fr);

    max-width: 520px;

    margin-top: 46px;
    padding-top: 22px;

    border-top:
        1px solid rgba(20, 82, 60, 0.16);
}


.aboutHeroFact {
    display: flex;
    align-items: center;

    gap: 11px;

    padding-right: 15px;
}


.aboutHeroFact:not(:first-child) {
    padding-left: 18px;

    border-left:
        1px solid rgba(20, 82, 60, 0.13);
}


.aboutHeroFact strong {
    color: #174d38;

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

    line-height: 1;
}


.aboutHeroFact strong span {
    color: #25825f;

    font-size: 14px;
}


.aboutHeroFact > span {
    color: #718078;

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

    line-height: 1.55;
    letter-spacing: 1.15px;
}


/* =========================================================
   RIGHT VISUAL
========================================================= */

.aboutHeroVisual {
    position: relative;

    min-width: 0;
}


.aboutHeroImage {
    position: absolute;
    inset: 0;

    overflow: hidden;
}


.aboutHeroImage img {
    display: block;

    width: 100%;
    height: 100%;

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


.aboutHeroImageShade {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(18, 56, 43, 0.10) 0%,
            transparent 34%
        ),
        linear-gradient(
            0deg,
            rgba(8, 40, 29, 0.22) 0%,
            transparent 45%
        );
}


/* =========================================================
   JOURNEY BADGE
========================================================= */

.aboutHeroYear {
    position: absolute;

    top: 0;
    right: 0;

    width: 150px;
    min-height: 155px;

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

    padding: 25px;

    color: #ffffff;
    background: #155e43;

    z-index: 3;
}


.aboutHeroYear small {
    margin-bottom: 12px;

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

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

    letter-spacing: 1.7px;
}


.aboutHeroYear strong {
    font-size: 35px;
    font-weight: 500;

    line-height: 1;
}


.aboutHeroYear span {
    margin-top: 7px;

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

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

    letter-spacing: 1.2px;
}


/* =========================================================
   CAPABILITY CARD
========================================================= */

.aboutHeroCapability {
    position: absolute;

    left: 0;
    bottom: 0;

    z-index: 3;

    width: 260px;

    display: flex;
    flex-direction: column;

    padding:
        25px
        27px;

    color: #ffffff;

    background:
        rgba(12, 64, 45, 0.94);

    backdrop-filter: blur(10px);
}


.aboutHeroCapability > span {
    margin-bottom: 14px;

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

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

    letter-spacing: 1.7px;
}


.aboutHeroCapability strong {
    position: relative;

    padding:
        7px
        0
        7px
        15px;

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

    letter-spacing: 0.2px;
}


.aboutHeroCapability strong::before {
    content: "";

    position: absolute;

    left: 0;
    top: 50%;

    width: 5px;
    height: 1px;

    background: #8bc4aa;
}


/* =========================================================
   BOTTOM INDUSTRY STRIP
========================================================= */

.aboutHeroBottom {
    position: relative;
    z-index: 3;

    background: #123e2e;

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


.aboutHeroBottomInner {
    min-height: 54px;

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

    gap: 25px;
}


.aboutHeroBottomInner span {
    color: rgba(255, 255, 255, 0.64);

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

    letter-spacing: 1.45px;

    white-space: nowrap;
}


.aboutHeroBottomInner i {
    display: block;

    width: 3px;
    height: 3px;

    border-radius: 50%;

    background: #5fa587;
}

/* =========================================================
   ABOUT PAGE — OUR STORY
========================================================= */

.aboutStory {
    position: relative;
    overflow: hidden;

    padding: 105px 0 95px;

    background: #ffffff;
}


/* =========================================================
   HEADER
========================================================= */

.aboutStoryHeader {
    display: grid;
    grid-template-columns: 1fr 0.9fr;

    gap: 100px;

    align-items: end;

    margin-bottom: 65px;
}


.aboutStoryLabel {
    display: flex;
    align-items: center;

    gap: 13px;

    margin-bottom: 20px;
}


.aboutStoryLabel > span {
    width: 34px;
    height: 1px;

    background: #21805d;
}


.aboutStoryLabel strong {
    color: #21805d;

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

    letter-spacing: 2px;
}


.aboutStoryHeading h2 {
    margin: 0;

    color: #173e30;

    font-size: clamp(42px, 4vw, 60px);
    font-weight: 600;

    line-height: 1.03;
    letter-spacing: -2.3px;
}


.aboutStoryHeading h2 em {
    color: #278160;

    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
}


.aboutStoryIntro {
    max-width: 510px;

    padding-bottom: 5px;
}


.aboutStoryIntro p {
    margin: 0;

    color: #6a7972;

    font-size: 11px;
    line-height: 1.8;
}


.aboutStoryIntro .aboutStoryLead {
    margin-bottom: 15px;

    color: #405c50;

    font-size: 12px;
}


/* =========================================================
   STORY GRID
========================================================= */

.aboutStoryGrid {
    display: grid;

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

    gap: 72px;

    align-items: stretch;
}


/* =========================================================
   STORY IMAGE
========================================================= */

.aboutStoryVisual {
    position: relative;

    min-height: 640px;
}


.aboutStoryImage {
    position: absolute;
    inset: 0;

    overflow: hidden;
}


.aboutStoryImage img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


.aboutStoryShade {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            0deg,
            rgba(8, 46, 32, 0.72) 0%,
            rgba(8, 46, 32, 0.12) 50%,
            rgba(8, 46, 32, 0.04) 100%
        );
}


/* IMAGE TEXT */

.aboutStoryImageInfo {
    position: absolute;

    left: 34px;
    bottom: 35px;

    z-index: 2;

    color: #ffffff;
}


.aboutStoryImageInfo span {
    display: block;

    margin-bottom: 12px;

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

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

    letter-spacing: 1.8px;
}


.aboutStoryImageInfo strong {
    font-size: 24px;
    font-weight: 500;

    line-height: 1.18;
}


/* EXPERIENCE BOX */

.aboutStoryExperience {
    position: absolute;

    top: 0;
    right: 0;

    z-index: 3;

    width: 145px;
    min-height: 140px;

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

    padding: 23px;

    background: #176647;
    color: #ffffff;
}


.aboutStoryExperience strong {
    font-size: 32px;
    font-weight: 500;

    line-height: 1;
}


.aboutStoryExperience strong span {
    color: #8fd1b1;

    font-size: 17px;
}


.aboutStoryExperience small {
    margin-top: 9px;

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

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

    line-height: 1.6;
    letter-spacing: 1.4px;
}


/* =========================================================
   TIMELINE
========================================================= */

.aboutTimeline {
    position: relative;

    display: flex;
    flex-direction: column;
}


.timelineItem {
    position: relative;

    display: grid;

    grid-template-columns:
        25px
        100px
        1fr;

    gap: 20px;

    min-height: 145px;

    padding:
        8px
        0
        28px;
}


.timelineItem:not(:last-child) {
    border-bottom:
        1px solid rgba(20, 75, 55, 0.10);

    margin-bottom: 26px;
}


/* TIMELINE LINE */

.timelineMarker {
    position: relative;

    display: flex;
    justify-content: center;
}


.timelineMarker::after {
    content: "";

    position: absolute;

    top: 17px;
    bottom: -55px;

    width: 1px;

    background:
        rgba(26, 104, 75, 0.18);
}


.timelineItem:last-child
.timelineMarker::after {
    display: none;
}


.timelineMarker span {
    position: relative;
    z-index: 2;

    display: block;

    width: 9px;
    height: 9px;

    margin-top: 4px;

    border-radius: 50%;

    background: #ffffff;

    border:
        2px solid #247d5d;

    box-shadow:
        0 0 0 5px #eef6f2;
}


/* YEAR */

.timelineYear {
    color: #174d38;

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

    line-height: 1;
}


.timelineYearText {
    padding-top: 3px;

    font-size: 10px;

    letter-spacing: 1.5px;
}


/* CONTENT */

.timelineContent {
    max-width: 480px;
}


.timelineContent > span {
    display: block;

    margin-bottom: 8px;

    color: #29805f;

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

    letter-spacing: 1.55px;
}


.timelineContent h3 {
    margin:
        0
        0
        9px;

    color: #173e30;

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

    line-height: 1.25;
}


.timelineContent p {
    margin: 0;

    color: #718078;

    font-size: 10px;
    line-height: 1.75;
}


/* 2007 FEATURE */

.timelineFeatured {
    margin-left: -18px;
    margin-right: -18px;

    padding:
        22px
        18px
        28px;

    background: #f3f8f5;
}


.timelineFeatured .timelineYear {
    color: #20805d;
}


.timelineFeatured .timelineMarker span {
    background: #21805d;

    border-color: #21805d;
}


/* =========================================================
   BOTTOM STATEMENT
========================================================= */

.aboutStoryBottom {
    display: grid;

    grid-template-columns:
        auto
        1fr
        minmax(280px, 0.8fr)
        auto;

    align-items: center;

    gap: 20px;

    margin-top: 58px;
    padding-top: 24px;

    border-top:
        1px solid rgba(20, 76, 55, 0.12);
}


.aboutStoryBottom > span,
.aboutStoryBottom > strong {
    color: #1e7355;

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

    letter-spacing: 1.5px;
}


.aboutStoryBottom > div {
    height: 1px;

    background:
        rgba(27, 102, 75, 0.16);
}


.aboutStoryBottom p {
    margin: 0;

    color: #718078;

    font-size: 9px;
    line-height: 1.6;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 950px) {

    .aboutStoryHeader {
        gap: 55px;
    }


    .aboutStoryGrid {
        grid-template-columns:
            0.85fr
            1.15fr;

        gap: 42px;
    }


    .aboutStoryVisual {
        min-height: 620px;
    }


    .timelineItem {
        grid-template-columns:
            22px
            80px
            1fr;

        gap: 14px;
    }


    .timelineYear {
        font-size: 20px;
    }

}


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

@media (max-width: 700px) {

    .aboutStory {
        padding:
            70px
            0;
    }


    .aboutStoryHeader {
        display: block;

        margin-bottom: 42px;
    }


    .aboutStoryHeading h2 {
        font-size: 38px;

        line-height: 1.05;
        letter-spacing: -1.4px;
    }


    .aboutStoryIntro {
        max-width: none;

        margin-top: 27px;
    }


    .aboutStoryIntro p {
        font-size: 11px;
    }


    .aboutStoryGrid {
        display: block;
    }


    /* IMAGE */

    .aboutStoryVisual {
        min-height: 470px;

        margin-bottom: 55px;
    }


    .aboutStoryImageInfo {
        left: 24px;
        bottom: 27px;
    }


    .aboutStoryImageInfo strong {
        font-size: 21px;
    }


    .aboutStoryExperience {
        width: 125px;
        min-height: 125px;

        padding: 20px;
    }


    .aboutStoryExperience strong {
        font-size: 28px;
    }


    /* TIMELINE */

    .timelineItem {
        grid-template-columns:
            20px
            67px
            1fr;

        gap: 12px;

        min-height: auto;

        padding-bottom: 25px;
    }


    .timelineItem:not(:last-child) {
        margin-bottom: 23px;
    }


    .timelineYear {
        font-size: 18px;
    }


    .timelineYearText {
        font-size: 8px;
    }


    .timelineContent h3 {
        font-size: 16px;
    }


    .timelineContent p {
        font-size: 9.5px;
    }


    .timelineFeatured {
        margin-left: -10px;
        margin-right: -10px;

        padding:
            20px
            10px
            25px;
    }


    /* BOTTOM */

    .aboutStoryBottom {
        grid-template-columns:
            auto
            1fr
            auto;

        gap: 13px;

        margin-top: 38px;
    }


    .aboutStoryBottom p {
        grid-column:
            1 / -1;

        grid-row: 2;

        max-width: 290px;

        font-size: 8px;
    }

}

/* =========================================================
   ABOUT HERO — TABLET
========================================================= */

@media (max-width: 1000px) {

    .aboutHeroGrid {
        grid-template-columns:
            1fr
            0.95fr;

        min-height: 590px;
    }

    .aboutHeroContent {
        padding:
            65px
            45px
            60px
            0;
    }

    .aboutHeroContent h1 {
        font-size: 52px;
    }

    .aboutHeroFacts {
        grid-template-columns:
            repeat(3, 1fr);
    }

    .aboutHeroFact {
        display: block;
    }

    .aboutHeroFact > span {
        display: block;

        margin-top: 7px;
    }

}


/* =========================================================
   ABOUT HERO — MOBILE
========================================================= */

@media (max-width: 700px) {

    .aboutHeroGrid {
        display: flex;
        flex-direction: column;

        min-height: auto;
    }


    .aboutHeroContent {
        padding:
            55px
            0
            42px;
    }


    .aboutHeroLabel {
        margin-bottom: 20px;
    }


    .aboutHeroContent h1 {
        font-size: 46px;

        line-height: 1.02;
        letter-spacing: -2px;
    }


    .aboutHeroLead {
        margin-top: 24px;

        font-size: 12px;
        line-height: 1.75;
    }


    .aboutHeroActions {
        margin-top: 25px;
    }


    .aboutHeroPrimary,
    .aboutHeroSecondary {
        min-height: 48px;

        gap: 20px;

        padding:
            0
            16px;

        font-size: 9px;
    }


    .aboutHeroFacts {
        max-width: none;

        margin-top: 35px;
        padding-top: 20px;
    }


    .aboutHeroFact {
        display: block;

        padding-right: 10px;
    }


    .aboutHeroFact:not(:first-child) {
        padding-left: 12px;
    }


    .aboutHeroFact strong {
        font-size: 20px;
    }


    .aboutHeroFact > span {
        display: block;

        margin-top: 7px;

        font-size: 5.5px;
    }


    /* IMAGE */

    .aboutHeroVisual {
        min-height: 440px;

        margin:
            0
            -20px;
    }


    .aboutHeroYear {
        width: 125px;
        min-height: 125px;

        padding: 20px;
    }


    .aboutHeroYear strong {
        font-size: 29px;
    }


    .aboutHeroCapability {
        width: 230px;

        padding:
            21px
            23px;
    }


    /* BOTTOM */

    .aboutHeroBottomInner {
        justify-content: flex-start;

        min-height: 50px;

        gap: 15px;

        overflow: hidden;
    }


    .aboutHeroBottomInner span {
        font-size: 6px;
    }


    /* NEXT SECTION */

    .aboutStoryPlaceholder {
        padding:
            70px
            0;
    }


    .aboutStoryPlaceholder h2 {
        font-size: 38px;

        line-height: 1.05;
        letter-spacing: -1.4px;
    }

}

/* =========================================================
   ABOUT PAGE — SHUAIBA FACILITY
========================================================= */

.shuaibaSection {
    position: relative;
    overflow: hidden;

    padding: 100px 0 82px;

    background: #f2f7f4;
}


.shuaibaGrid {
    display: grid;

    grid-template-columns:
        minmax(0, 0.82fr)
        minmax(0, 1.18fr);

    min-height: 620px;

    background: #ffffff;

    box-shadow:
        0 24px 70px rgba(19, 65, 48, 0.07);
}


/* =========================================================
   LEFT CONTENT
========================================================= */

.shuaibaContent {
    position: relative;

    padding:
        66px
        58px
        58px;

    background: #123f2f;
    color: #ffffff;
}


/* LABEL */

.shuaibaLabel {
    display: flex;
    align-items: center;

    gap: 13px;

    margin-bottom: 24px;
}


.shuaibaLabel > span {
    display: block;

    width: 34px;
    height: 1px;

    background: #7fc2a3;
}


.shuaibaLabel strong {
    color: #8ec9ad;

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

    letter-spacing: 1.8px;
}


/* HEADING */

.shuaibaContent h2 {
    margin: 0;

    color: #ffffff;

    font-size: clamp(38px, 3.3vw, 52px);
    font-weight: 600;

    line-height: 1.04;
    letter-spacing: -2px;
}


.shuaibaContent h2 em {
    color: #8dd2b1;

    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
}


/* TEXT */

.shuaibaLead {
    max-width: 470px;

    margin:
        28px
        0
        0;

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

    font-size: 12px;
    line-height: 1.8;
}


.shuaibaDescription {
    max-width: 470px;

    margin:
        14px
        0
        0;

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

    font-size: 10px;
    line-height: 1.75;
}


/* =========================================================
   CAPABILITIES
========================================================= */

.shuaibaCapabilities {
    margin-top: 36px;

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


.shuaibaCapability {
    display: grid;

    grid-template-columns:
        36px
        1fr;

    gap: 13px;

    padding:
        18px
        0;

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


.shuaibaCapability > span {
    padding-top: 2px;

    color: #73b998;

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

    letter-spacing: 1px;
}


.shuaibaCapability strong {
    display: block;

    color: #ffffff;

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


.shuaibaCapability p {
    max-width: 330px;

    margin:
        6px
        0
        0;

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

    font-size: 8px;
    line-height: 1.6;
}


/* =========================================================
   RIGHT IMAGE
========================================================= */

.shuaibaVisual {
    position: relative;

    min-width: 0;
    overflow: hidden;
}


.shuaibaImage {
    position: absolute;
    inset: 0;

    overflow: hidden;
}


.shuaibaImage img {
    display: block;

    width: 100%;
    height: 100%;

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


.shuaibaImageShade {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            0deg,
            rgba(7, 43, 30, 0.30) 0%,
            transparent 46%
        );
}


/* =========================================================
   YEAR CARD
========================================================= */

.shuaibaYear {
    position: absolute;

    top: 0;
    right: 0;

    z-index: 3;

    width: 145px;
    min-height: 155px;

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

    padding: 23px;

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

    backdrop-filter: blur(10px);
}


.shuaibaYear > span {
    color: #7c8c84;

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

    letter-spacing: 1.6px;
}


.shuaibaYear strong {
    margin-top: 9px;

    color: #176447;

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

    line-height: 1;
}


.shuaibaYear small {
    margin-top: 9px;

    color: #708078;

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

    line-height: 1.55;
    letter-spacing: 1.3px;
}


/* =========================================================
   IMAGE CARD
========================================================= */

.shuaibaImageCard {
    position: absolute;

    left: 0;
    bottom: 0;

    z-index: 3;

    width: 295px;
    min-height: 120px;

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

    gap: 25px;

    padding:
        24px
        27px;

    color: #ffffff;

    background:
        rgba(12, 62, 44, 0.94);

    backdrop-filter: blur(9px);
}


.shuaibaImageCard span {
    display: block;

    margin-bottom: 8px;

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

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

    letter-spacing: 1.5px;
}


.shuaibaImageCard strong {
    font-size: 16px;
    font-weight: 500;

    line-height: 1.3;
}


.shuaibaImageCard i {
    padding-bottom: 3px;

    color: #92d2b4;

    font-size: 16px;
    font-style: normal;
}


/* =========================================================
   BOTTOM STRIP
========================================================= */

.shuaibaBottom {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 26px;

    min-height: 64px;

    padding:
        0
        25px;

    background: #ffffff;

    border:
        1px solid rgba(20, 77, 56, 0.08);

    border-top: 0;
}


.shuaibaBottom span {
    color: #597068;

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

    letter-spacing: 1.25px;

    white-space: nowrap;
}


.shuaibaBottom i {
    display: block;

    width: 3px;
    height: 3px;

    flex: 0 0 auto;

    border-radius: 50%;

    background: #65a889;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 950px) {

    .shuaibaSection {
        padding:
            80px
            0
            70px;
    }


    .shuaibaGrid {
        grid-template-columns:
            0.95fr
            1.05fr;

        min-height: 600px;
    }


    .shuaibaContent {
        padding:
            52px
            38px
            45px;
    }


    .shuaibaContent h2 {
        font-size: 40px;
    }


    .shuaibaBottom {
        gap: 15px;
    }


    .shuaibaBottom span {
        font-size: 6px;
    }

}


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

@media (max-width: 700px) {

    .shuaibaSection {
        padding:
            65px
            0;
    }


    .shuaibaGrid {
        display: flex;
        flex-direction: column;

        min-height: auto;
    }


    .shuaibaContent {
        padding:
            43px
            26px
            40px;
    }


    .shuaibaContent h2 {
        font-size: 36px;

        line-height: 1.06;
        letter-spacing: -1.4px;
    }


    .shuaibaLead {
        font-size: 11px;
    }


    .shuaibaDescription {
        font-size: 9.5px;
    }


    .shuaibaCapabilities {
        margin-top: 30px;
    }


    .shuaibaVisual {
        min-height: 430px;
    }


    .shuaibaYear {
        width: 120px;
        min-height: 125px;

        padding: 19px;
    }


    .shuaibaYear strong {
        font-size: 29px;
    }


    .shuaibaImageCard {
        width: 245px;
        min-height: 105px;

        padding:
            20px
            22px;
    }


    .shuaibaImageCard strong {
        font-size: 14px;
    }


    .shuaibaBottom {
        justify-content: flex-start;

        min-height: 54px;

        gap: 14px;

        overflow: hidden;

        padding:
            0
            18px;
    }


    .shuaibaBottom span {
        font-size: 5.5px;
    }

}

/* =========================================================
   ABOUT PAGE — MISSION & VISION
========================================================= */

.purposeSection {
    position: relative;
    overflow: hidden;

    padding: 105px 0 95px;

    background: #fbfcfb;
}


/* =========================================================
   HEADER
========================================================= */

.purposeHeader {
    display: grid;

    grid-template-columns:
        1fr
        0.65fr;

    align-items: end;

    gap: 100px;

    margin-bottom: 58px;
}


.purposeLabel {
    display: flex;
    align-items: center;

    gap: 13px;

    margin-bottom: 20px;
}


.purposeLabel > span {
    display: block;

    width: 34px;
    height: 1px;

    background: #21805d;
}


.purposeLabel strong {
    color: #21805d;

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

    letter-spacing: 2px;
}


.purposeHeader h2 {
    margin: 0;

    color: #173e30;

    font-size: clamp(42px, 4vw, 60px);
    font-weight: 600;

    line-height: 1.03;
    letter-spacing: -2.3px;
}


.purposeHeader h2 em {
    color: #278160;

    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
}


.purposeHeader > p {
    max-width: 430px;

    margin:
        0
        0
        4px;

    color: #6e7e76;

    font-size: 11px;
    line-height: 1.8;
}


/* =========================================================
   CARDS
========================================================= */

.purposeGrid {
    display: grid;

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

    gap: 20px;
}


.purposeCard {
    position: relative;

    min-height: 430px;

    display: flex;
    flex-direction: column;

    padding:
        32px
        38px
        30px;

    border:
        1px solid rgba(22, 79, 57, 0.12);

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


.purposeCard:hover {
    transform: translateY(-4px);

    box-shadow:
        0 22px 55px rgba(19, 65, 48, 0.08);

    border-color:
        rgba(30, 119, 86, 0.22);
}


/* MISSION */

.purposeMission {
    background: #ffffff;
}


/* VISION */

.purposeVision {
    background: #edf5f1;
}


/* =========================================================
   CARD TOP
========================================================= */

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

    padding-bottom: 24px;

    border-bottom:
        1px solid rgba(22, 79, 57, 0.10);
}


.purposeNumber {
    color: #8c9b94;

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

    letter-spacing: 1.4px;
}


.purposeType {
    color: #1e7958;

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

    letter-spacing: 1.8px;
}


/* =========================================================
   CARD CONTENT
========================================================= */

.purposeCardContent {
    flex: 1;

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

    padding:
        42px
        0
        36px;
}


.purposeAccent {
    display: block;

    width: 28px;
    height: 2px;

    margin-bottom: 22px;

    background: #25815f;
}


.purposeCardContent h3 {
    margin: 0;

    color: #173e30;

    font-size: clamp(27px, 2.4vw, 36px);
    font-weight: 600;

    line-height: 1.1;
    letter-spacing: -1.2px;
}


.purposeCardContent h3 em {
    color: #278160;

    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
}


.purposeCardContent p {
    max-width: 480px;

    margin:
        24px
        0
        0;

    color: #687a71;

    font-size: 11px;
    line-height: 1.8;
}


/* =========================================================
   CARD BOTTOM
========================================================= */

.purposeCardBottom {
    display: flex;
    align-items: center;

    flex-wrap: wrap;

    gap: 13px;

    padding-top: 20px;

    border-top:
        1px solid rgba(22, 79, 57, 0.10);
}


.purposeCardBottom span {
    color: #526b60;

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

    letter-spacing: 1.35px;
}


.purposeCardBottom i {
    display: block;

    width: 3px;
    height: 3px;

    border-radius: 50%;

    background: #69aa8c;
}


/* =========================================================
   BOTTOM STATEMENT
========================================================= */

.purposeStatement {
    display: grid;

    grid-template-columns:
        auto
        1fr
        minmax(320px, 0.65fr);

    align-items: center;

    gap: 22px;

    margin-top: 42px;
    padding-top: 23px;

    border-top:
        1px solid rgba(21, 77, 56, 0.11);
}


.purposeStatement > span {
    color: #1f7958;

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

    letter-spacing: 1.6px;
}


.purposeStatement > div {
    height: 1px;

    background:
        rgba(26, 101, 74, 0.13);
}


.purposeStatement p {
    margin: 0;

    color: #718078;

    font-size: 8px;
    line-height: 1.65;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 950px) {

    .purposeSection {
        padding:
            80px
            0;
    }


    .purposeHeader {
        gap: 55px;
    }


    .purposeCard {
        min-height: 420px;

        padding:
            29px
            30px
            27px;
    }


    .purposeCardContent h3 {
        font-size: 29px;
    }

}


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

@media (max-width: 700px) {

    .purposeSection {
        padding:
            70px
            0;
    }


    .purposeHeader {
        display: block;

        margin-bottom: 38px;
    }


    .purposeHeader h2 {
        font-size: 38px;

        line-height: 1.05;
        letter-spacing: -1.4px;
    }


    .purposeHeader > p {
        max-width: none;

        margin-top: 25px;

        font-size: 10.5px;
    }


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

        gap: 15px;
    }


    .purposeCard {
        min-height: 380px;

        padding:
            27px
            24px
            25px;
    }


    .purposeCardContent {
        padding:
            35px
            0
            30px;
    }


    .purposeCardContent h3 {
        font-size: 28px;

        line-height: 1.1;
    }


    .purposeCardContent p {
        font-size: 10px;
    }


    .purposeStatement {
        grid-template-columns:
            auto
            1fr;

        gap: 14px;

        margin-top: 35px;
    }


    .purposeStatement p {
        grid-column:
            1 / -1;

        max-width: 300px;

        font-size: 8px;
    }

}

/* =========================================================
   ABOUT PAGE — CORE VALUES
========================================================= */

.valuesSection {
    position: relative;
    overflow: hidden;

    padding: 100px 0 78px;

    background: #123f2f;
    color: #ffffff;
}


/* SUBTLE BACKGROUND DETAIL */

.valuesPattern {
    position: absolute;
    inset: 0;

    pointer-events: none;

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

    background-size: 75px 75px;

    mask-image:
        linear-gradient(
            to right,
            transparent,
            rgba(0, 0, 0, 0.75),
            transparent
        );
}


.valuesSection > .wrap {
    position: relative;
    z-index: 2;
}


/* =========================================================
   HEADER
========================================================= */

.valuesHeader {
    display: grid;

    grid-template-columns:
        1fr
        0.65fr;

    align-items: end;

    gap: 100px;

    margin-bottom: 62px;
}


.valuesLabel {
    display: flex;
    align-items: center;

    gap: 13px;

    margin-bottom: 20px;
}


.valuesLabel > span {
    display: block;

    width: 34px;
    height: 1px;

    background: #86c9aa;
}


.valuesLabel strong {
    color: #8bcaae;

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

    letter-spacing: 2px;
}


.valuesHeader h2 {
    margin: 0;

    color: #ffffff;

    font-size: clamp(42px, 4vw, 60px);
    font-weight: 600;

    line-height: 1.03;
    letter-spacing: -2.3px;
}


.valuesHeader h2 em {
    color: #8dd1b2;

    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
}


.valuesHeader > p {
    max-width: 430px;

    margin:
        0
        0
        4px;

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

    font-size: 10px;
    line-height: 1.8;
}


/* =========================================================
   VALUES GRID
========================================================= */

.valuesGrid {
    display: grid;

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

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

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


.valueItem {
    position: relative;

    min-height: 340px;

    display: flex;
    flex-direction: column;

    padding:
        29px
        28px
        30px;

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


.valueItem:not(:last-child) {
    border-right:
        1px solid rgba(255, 255, 255, 0.12);
}


.valueItem:hover {
    background:
        rgba(255, 255, 255, 0.045);
}


/* =========================================================
   NUMBER / LINE
========================================================= */

.valueTop {
    display: flex;
    align-items: center;

    gap: 13px;
}


.valueNumber {
    color: #82c5a6;

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

    letter-spacing: 1.2px;
}


.valueLine {
    width: 24px;
    height: 1px;

    background:
        rgba(132, 200, 169, 0.45);
}


/* =========================================================
   VALUE CONTENT
========================================================= */

.valueItem h3 {
    margin:
        58px
        0
        17px;

    color: #ffffff;

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

    letter-spacing: -0.8px;
}


.valueItem p {
    max-width: 235px;

    margin: 0;

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

    font-size: 9px;
    line-height: 1.75;
}


.valueKeyword {
    margin-top: auto;
    padding-top: 35px;

    color: #8cc9ae;

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

    letter-spacing: 1.45px;
}


/* SMALL ACCENT */

.valueItem::after {
    content: "";

    position: absolute;

    left: 28px;
    bottom: -1px;

    width: 0;
    height: 2px;

    background: #8dd1b2;

    transition: width 0.3s ease;
}


.valueItem:hover::after {
    width: 42px;
}


/* =========================================================
   BOTTOM
========================================================= */

.valuesBottom {
    display: grid;

    grid-template-columns:
        auto
        1fr
        auto;

    align-items: center;

    gap: 20px;

    margin-top: 27px;
}


.valuesBottom span,
.valuesBottom strong {
    color: rgba(255, 255, 255, 0.47);

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

    letter-spacing: 1.5px;
}


.valuesBottom strong {
    color: #8bc8ac;
}


.valuesBottom > div {
    height: 1px;

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


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 950px) {

    .valuesSection {
        padding:
            80px
            0
            70px;
    }


    .valuesHeader {
        gap: 55px;
    }


    .valuesGrid {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .valueItem {
        min-height: 300px;
    }


    .valueItem:nth-child(2) {
        border-right: 0;
    }


    .valueItem:nth-child(-n+2) {
        border-bottom:
            1px solid rgba(255, 255, 255, 0.12);
    }

}


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

@media (max-width: 700px) {

    .valuesSection {
        padding:
            70px
            0
            58px;
    }


    .valuesHeader {
        display: block;

        margin-bottom: 40px;
    }


    .valuesHeader h2 {
        font-size: 38px;

        line-height: 1.05;
        letter-spacing: -1.4px;
    }


    .valuesHeader > p {
        max-width: none;

        margin-top: 25px;

        font-size: 10px;
    }


    .valuesGrid {
        grid-template-columns: 1fr;
    }


    .valueItem {
        min-height: 245px;

        padding:
            26px
            5px
            25px;
    }


    .valueItem:not(:last-child),
    .valueItem:nth-child(2) {
        border-right: 0;

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


    .valueItem h3 {
        margin:
            37px
            0
            14px;

        font-size: 25px;
    }


    .valueItem p {
        max-width: 310px;

        font-size: 9px;
    }


    .valueKeyword {
        padding-top: 25px;
    }


    .valueItem::after {
        left: 5px;
    }


    .valuesBottom {
        grid-template-columns:
            auto
            1fr;

        gap: 14px;

        margin-top: 24px;
    }


    .valuesBottom strong {
        grid-column:
            1 / -1;

        font-size: 6px;
    }

}

/* =========================================================
   ABOUT PAGE — LEADERSHIP
========================================================= */

.leadershipSection {
    padding: 105px 0 95px;

    background: #f7faf8;
}


/* =========================================================
   HEADER
========================================================= */

.leadershipHeader {
    display: grid;

    grid-template-columns:
        1fr
        0.65fr;

    align-items: end;

    gap: 100px;

    margin-bottom: 55px;
}


.leadershipLabel {
    display: flex;
    align-items: center;

    gap: 13px;

    margin-bottom: 20px;
}


.leadershipLabel > span {
    width: 34px;
    height: 1px;

    background: #21805d;
}


.leadershipLabel strong {
    color: #21805d;

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

    letter-spacing: 2px;
}


.leadershipHeader h2 {
    margin: 0;

    color: #173e30;

    font-size: clamp(42px, 4vw, 60px);
    font-weight: 600;

    line-height: 1.03;
    letter-spacing: -2.3px;
}


.leadershipHeader h2 em {
    color: #278160;

    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
}


.leadershipHeader > p {
    max-width: 430px;

    margin: 0 0 4px;

    color: #6d7d75;

    font-size: 10px;
    line-height: 1.8;
}


/* =========================================================
   LEADERSHIP GRID
========================================================= */

.leadershipGrid {
    display: grid;

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

    gap: 18px;
}


/* =========================================================
   LEADER CARD
========================================================= */

.leaderCard {
    min-width: 0;

    background: #ffffff;

    border:
        1px solid rgba(20, 78, 57, 0.10);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


.leaderCard:hover {
    transform: translateY(-5px);

    box-shadow:
        0 22px 50px rgba(18, 64, 47, 0.08);
}


/* =========================================================
   PHOTO AREA
========================================================= */

.leaderPhoto {
    position: relative;

    overflow: hidden;

    aspect-ratio: 4 / 4.8;

    background: #eaf2ee;
}


.leaderPhoto > img {
    display: block;

    width: 100%;
    height: 100%;

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


/* PLACEHOLDER */

.leaderPlaceholder {
    position: absolute;
    inset: 0;

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

    background:
        linear-gradient(
            145deg,
            #edf5f1,
            #dcebe4
        );
}


.leaderPlaceholder::before {
    content: "";

    position: absolute;

    width: 135px;
    height: 135px;

    border-radius: 50%;

    border:
        1px solid rgba(28, 112, 81, 0.12);
}


.leaderInitials {
    position: relative;
    z-index: 2;

    color: #1e7254;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 32px;
    font-weight: 400;
}


.leaderPlaceholder small {
    position: relative;
    z-index: 2;

    margin-top: 8px;

    color: #82968c;

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

    letter-spacing: 2px;
}


/* NUMBER */

.leaderNumber {
    position: absolute;

    top: 18px;
    left: 18px;

    z-index: 3;

    min-width: 31px;
    height: 31px;

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

    color: #ffffff;

    background: #176647;

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


/* =========================================================
   LEADER INFO
========================================================= */

.leaderInfo {
    min-height: 145px;

    padding:
        23px
        21px
        21px;
}


.leaderRole {
    display: block;

    margin-bottom: 10px;

    color: #25805e;

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

    letter-spacing: 1.35px;
}


.leaderInfo h3 {
    min-height: 46px;

    margin: 0;

    color: #173e30;

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

    line-height: 1.3;
}


.leaderLine {
    width: 28px;
    height: 1px;

    margin-top: 18px;

    background: #71aa90;

    transition: width 0.3s ease;
}


.leaderCard:hover .leaderLine {
    width: 55px;
}


/* =========================================================
   BOTTOM
========================================================= */

.leadershipBottom {
    display: grid;

    grid-template-columns:
        auto
        1fr
        minmax(340px, 0.7fr);

    align-items: center;

    gap: 22px;

    margin-top: 42px;
    padding-top: 24px;

    border-top:
        1px solid rgba(21, 78, 57, 0.11);
}


.leadershipBottom > span {
    color: #207957;

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

    letter-spacing: 1.6px;
}


.leadershipBottom > div {
    height: 1px;

    background:
        rgba(26, 101, 74, 0.13);
}


.leadershipBottom p {
    margin: 0;

    color: #718078;

    font-size: 8px;
    line-height: 1.65;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 950px) {

    .leadershipSection {
        padding: 80px 0;
    }


    .leadershipHeader {
        gap: 55px;
    }


    .leadershipGrid {
        grid-template-columns:
            repeat(2, 1fr);

        gap: 18px;
    }


    .leaderPhoto {
        aspect-ratio: 4 / 4.4;
    }

}


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

@media (max-width: 700px) {

    .leadershipSection {
        padding: 70px 0;
    }


    .leadershipHeader {
        display: block;

        margin-bottom: 38px;
    }


    .leadershipHeader h2 {
        font-size: 38px;

        line-height: 1.05;
        letter-spacing: -1.4px;
    }


    .leadershipHeader > p {
        max-width: none;

        margin-top: 25px;

        font-size: 10px;
    }


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

        gap: 16px;
    }


    .leaderPhoto {
        aspect-ratio: 4 / 4;
    }


    .leaderInfo {
        min-height: auto;

        padding: 22px 20px;
    }


    .leaderInfo h3 {
        min-height: auto;

        font-size: 18px;
    }


    .leadershipBottom {
        grid-template-columns:
            auto
            1fr;

        gap: 14px;

        margin-top: 35px;
    }


    .leadershipBottom p {
        grid-column: 1 / -1;

        max-width: 310px;

        font-size: 8px;
    }

}

/* =========================================================
   ABOUT PAGE — MANAGEMENT & KEY TEAMS
========================================================= */

.managementSection {
    position: relative;

    padding: 100px 0 90px;

    background: #ffffff;
}


/* =========================================================
   HEADER
========================================================= */

.managementHeader {
    display: grid;

    grid-template-columns:
        1fr
        0.65fr;

    align-items: end;

    gap: 100px;

    margin-bottom: 60px;
}


.managementLabel {
    display: flex;
    align-items: center;

    gap: 13px;

    margin-bottom: 20px;
}


.managementLabel > span {
    width: 34px;
    height: 1px;

    background: #21805d;
}


.managementLabel strong {
    color: #21805d;

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

    letter-spacing: 2px;
}


.managementHeader h2 {
    margin: 0;

    color: #173e30;

    font-size: clamp(42px, 4vw, 60px);
    font-weight: 600;

    line-height: 1.03;
    letter-spacing: -2.3px;
}


.managementHeader h2 em {
    color: #278160;

    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
}


.managementHeader > p {
    max-width: 430px;

    margin: 0 0 4px;

    color: #6e7e76;

    font-size: 10px;
    line-height: 1.8;
}


/* =========================================================
   MANAGEMENT GROUPS
========================================================= */

.managementGroup {
    display: grid;

    grid-template-columns:
        250px
        1fr;

    gap: 50px;

    padding: 38px 0;

    border-top:
        1px solid rgba(20, 77, 56, 0.11);
}


.managementGroupLast {
    border-bottom:
        1px solid rgba(20, 77, 56, 0.11);
}


/* =========================================================
   GROUP TITLE
========================================================= */

.managementGroupTitle {
    display: flex;

    gap: 18px;
}


.managementGroupTitle > span {
    color: #23805d;

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

    letter-spacing: 1px;
}


.managementGroupTitle small {
    display: block;

    margin-bottom: 9px;

    color: #8a9a92;

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

    letter-spacing: 1.5px;
}


.managementGroupTitle h3 {
    margin: 0;

    color: #173e30;

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

    line-height: 1.3;
}


/* =========================================================
   TEAM GRID
========================================================= */

.managementGrid {
    display: grid;

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

    gap: 12px;
}


/* =========================================================
   TEAM CARD
========================================================= */

.managementItem {
    position: relative;

    min-height: 135px;

    display: flex;
    flex-direction: column;

    padding: 21px 20px;

    background: #f6f9f7;

    border:
        1px solid rgba(20, 78, 57, 0.08);

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


.managementItem:hover {
    transform: translateY(-3px);

    background: #eef6f2;

    border-color:
        rgba(31, 122, 88, 0.18);
}


.managementItem > span {
    display: block;

    margin-bottom: 14px;

    color: #27805f;

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

    letter-spacing: 1.4px;
}


.managementItem > strong {
    color: #183f31;

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

    line-height: 1.35;
}


.managementItem > small {
    margin-top: auto;

    padding-top: 17px;

    color: #84938c;

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

    line-height: 1.7;
    letter-spacing: 1.25px;
}


/* =========================================================
   TRADING & SALES
========================================================= */

.managementSalesGrid {
    grid-template-columns:
        1fr
        1fr
        1.35fr;
}


/* =========================================================
   TEAM FEATURE CARD
========================================================= */

.managementTeamItem {
    background: #174f3a;
}


.managementTeamItem:hover {
    background: #174f3a;
}


.managementTeamItem > span {
    color: #8ec9ae;
}


.managementTeamItem > strong {
    color: #ffffff;

    font-size: 15px;
}


.managementTeamItem p {
    margin: 12px 0 0;

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

    font-size: 8px;
    line-height: 1.65;
}


/* =========================================================
   BOTTOM STATEMENT
========================================================= */

.managementBottom {
    display: grid;

    grid-template-columns:
        auto
        1fr
        auto;

    align-items: center;

    gap: 20px;

    margin-top: 27px;
}


.managementBottom span,
.managementBottom strong {
    color: #75877e;

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

    letter-spacing: 1.5px;
}


.managementBottom strong {
    color: #247b5a;
}


.managementBottom > div {
    height: 1px;

    background:
        rgba(24, 95, 69, 0.12);
}


/* =========================================================
   MANAGEMENT — TABLET
========================================================= */

@media (max-width: 950px) {

    .managementSection {
        padding: 80px 0;
    }


    .managementHeader {
        grid-template-columns:
            1fr
            0.7fr;

        gap: 55px;
    }


    .managementGroup {
        grid-template-columns:
            190px
            1fr;

        gap: 30px;
    }


    .managementGrid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .managementSalesGrid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .managementTeamItem {
        grid-column:
            1 / -1;
    }

}


/* =========================================================
   MANAGEMENT — MOBILE
========================================================= */

@media (max-width: 700px) {

    .managementSection {
        padding: 70px 0;
    }


    .managementHeader {
        display: block;

        margin-bottom: 38px;
    }


    .managementHeader h2 {
        font-size: 38px;

        line-height: 1.05;
        letter-spacing: -1.4px;
    }


    .managementHeader > p {
        max-width: none;

        margin-top: 25px;

        font-size: 10px;
    }


    .managementGroup {
        display: block;

        padding: 32px 0;
    }


    .managementGroupTitle {
        margin-bottom: 25px;
    }


    .managementGrid,
    .managementSalesGrid {
        grid-template-columns: 1fr;

        gap: 10px;
    }


    .managementTeamItem {
        grid-column: auto;
    }


    .managementItem {
        min-height: 120px;
    }


    .managementBottom {
        grid-template-columns:
            auto
            1fr;

        gap: 14px;
    }


    .managementBottom strong {
        grid-column:
            1 / -1;

        font-size: 6px;
    }

}


/* =========================================================
   MANAGEMENT — SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .managementSection {
        padding: 60px 0;
    }


    .managementHeader h2 {
        font-size: 33px;

        letter-spacing: -1px;
    }


    .managementLabel strong {
        font-size: 7px;

        letter-spacing: 1.5px;
    }


    .managementGroupTitle h3 {
        font-size: 17px;
    }


    .managementItem {
        padding: 20px 18px;
    }


    .managementItem > strong {
        font-size: 13px;
    }


    .managementBottom {
        margin-top: 22px;
    }

}

/* =========================================================
   ABOUT PAGE — COMPANY STRENGTH
========================================================= */

.companyStrength {
    position: relative;

    overflow: hidden;

    padding:
        100px
        0
        85px;

    background:
        linear-gradient(
            135deg,
            #0d3d2b 0%,
            #124a35 55%,
            #0b3526 100%
        );
}


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

.companyStrengthPattern {
    position: absolute;

    top: -180px;
    right: -150px;

    width: 600px;
    height: 600px;

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

    border-radius: 50%;

    pointer-events: none;
}


.companyStrengthPattern::before,
.companyStrengthPattern::after {
    content: "";

    position: absolute;

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

    border-radius: 50%;
}


.companyStrengthPattern::before {
    inset: 90px;
}


.companyStrengthPattern::after {
    inset: 190px;
}


.companyStrengthInner {
    position: relative;

    z-index: 2;
}


/* =========================================================
   HEADER
========================================================= */

.companyStrengthHeader {
    display: grid;

    grid-template-columns:
        1fr
        0.62fr;

    align-items: end;

    gap: 100px;

    margin-bottom: 65px;
}


.companyStrengthLabel {
    display: flex;
    align-items: center;

    gap: 13px;

    margin-bottom: 20px;
}


.companyStrengthLabel > span {
    width: 34px;
    height: 1px;

    background: #82bea3;
}


.companyStrengthLabel strong {
    color: #82bea3;

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

    letter-spacing: 2px;
}


.companyStrengthHeader h2 {
    margin: 0;

    color: #ffffff;

    font-size:
        clamp(42px, 4vw, 60px);

    font-weight: 600;

    line-height: 1.03;

    letter-spacing: -2.3px;
}


.companyStrengthHeader h2 em {
    color: #9ccbb6;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-weight: 400;
}


.companyStrengthHeader > p {
    max-width: 420px;

    margin:
        0
        0
        5px;

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

    font-size: 10px;

    line-height: 1.8;
}


/* =========================================================
   STATISTICS
========================================================= */

.companyStrengthStats {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

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

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


.strengthStat {
    min-height: 230px;

    display: flex;
    flex-direction: column;

    justify-content: space-between;

    padding:
        35px
        32px
        30px;

    border-right:
        1px solid rgba(255, 255, 255, 0.11);
}


.strengthStat:first-child {
    padding-left: 0;
}


.strengthStat:last-child {
    border-right: 0;
}


.strengthNumber {
    display: block;

    color: #ffffff;

    font-size:
        clamp(54px, 5vw, 76px);

    font-weight: 500;

    line-height: 1;

    letter-spacing: -4px;
}


.strengthNumber > span {
    position: relative;

    top: -24px;

    margin-left: 4px;

    color: #87c3a8;

    font-size: 20px;

    letter-spacing: 0;
}


.strengthYear {
    font-size:
        clamp(48px, 4.5vw, 67px);
}


.strengthStatInfo {
    display: flex;
    flex-direction: column;

    gap: 8px;
}


.strengthStatInfo strong {
    color: #ffffff;

    font-size: 13px;
    font-weight: 500;
}


.strengthStatInfo small {
    color:
        rgba(255, 255, 255, 0.38);

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

    line-height: 1.5;

    letter-spacing: 1.3px;
}


/* =========================================================
   CLOSING STATEMENT
========================================================= */

.companyStrengthClosing {
    display: grid;

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

    align-items: center;

    gap: 35px;

    padding-top: 45px;
}


/* ESTABLISHED */

.strengthEstablished {
    display: flex;
    flex-direction: column;
}


.strengthEstablished small {
    margin-bottom: 5px;

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

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

    letter-spacing: 1.4px;
}


.strengthEstablished strong {
    color: #ffffff;

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

    letter-spacing: -1px;
}


/* VERTICAL LINE */

.strengthClosingLine {
    width: 1px;
    height: 58px;

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


/* STATEMENT */

.strengthClosingText span {
    display: block;

    margin-bottom: 8px;

    color: #83bfa4;

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

    letter-spacing: 1.5px;
}


.strengthClosingText h3 {
    margin: 0;

    color: #ffffff;

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

    line-height: 1.25;
}


.strengthClosingText h3 em {
    color: #9ccbb6;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-weight: 400;
}


/* RIGHT MARK */

.strengthClosingMark {
    min-width: 115px;

    padding-left: 25px;

    border-left:
        1px solid rgba(255, 255, 255, 0.11);
}


.strengthClosingMark span,
.strengthClosingMark small {
    display: block;

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

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

    letter-spacing: 1.5px;
}


.strengthClosingMark strong {
    display: block;

    margin:
        4px
        0;

    color: #ffffff;

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

    letter-spacing: 1px;
}


/* =========================================================
   COMPANY STRENGTH — TABLET
========================================================= */

@media (max-width: 950px) {

    .companyStrength {
        padding:
            80px
            0
            70px;
    }


    .companyStrengthHeader {
        grid-template-columns:
            1fr
            0.7fr;

        gap: 50px;

        margin-bottom: 50px;
    }


 .companyStrengthStats {
    grid-template-columns: repeat(2, 1fr);
}


    .strengthStat {
        min-height: 205px;

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


    .strengthStat:nth-child(2) {
        border-right: 0;
    }


    .strengthStat:nth-child(3),
    .strengthStat:nth-child(4) {
        border-bottom: 0;
    }


    .strengthStat:first-child,
    .strengthStat:nth-child(3) {
        padding-left: 0;
    }


    .companyStrengthClosing {
        grid-template-columns:
            auto
            1px
            1fr;

        gap: 25px;
    }


    .strengthClosingMark {
        display: none;
    }

}


/* =========================================================
   COMPANY STRENGTH — MOBILE
========================================================= */

@media (max-width: 700px) {

    .companyStrength {
        padding:
            70px
            0
            60px;
    }


    .companyStrengthPattern {
        width: 450px;
        height: 450px;

        right: -260px;
    }


    .companyStrengthHeader {
        display: block;

        margin-bottom: 42px;
    }


    .companyStrengthHeader h2 {
        font-size: 38px;

        line-height: 1.05;

        letter-spacing: -1.4px;
    }


    .companyStrengthHeader > p {
        max-width: none;

        margin-top: 25px;
    }


    .companyStrengthStats {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .strengthStat {
        min-height: 175px;

        padding:
            26px
            20px
            24px;
    }


    .strengthStat:first-child,
    .strengthStat:nth-child(3) {
        padding-left: 0;
    }


    .strengthNumber {
        font-size: 48px;

        letter-spacing: -2.5px;
    }


    .strengthYear {
        font-size: 42px;
    }


    .strengthNumber > span {
        top: -17px;

        font-size: 15px;
    }


    .strengthStatInfo strong {
        font-size: 11px;
    }


    .companyStrengthClosing {
        grid-template-columns:
            auto
            1px
            1fr;

        gap: 18px;

        padding-top: 35px;
    }


    .strengthClosingText h3 {
        font-size: 15px;
    }


    .strengthClosingMark {
        display: none;
    }

}


/* =========================================================
   COMPANY STRENGTH — SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .companyStrength {
        padding:
            60px
            0
            55px;
    }


    .companyStrengthHeader h2 {
        font-size: 33px;

        letter-spacing: -1px;
    }


    .companyStrengthStats {
        grid-template-columns: 1fr;
    }


    .strengthStat,
    .strengthStat:first-child,
    .strengthStat:nth-child(3) {
        min-height: 145px;

        padding:
            24px
            0;

        border-right: 0;

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


    .strengthStat:last-child {
        border-bottom: 0;
    }


    .strengthNumber {
        font-size: 48px;
    }


    .strengthYear {
        font-size: 43px;
    }


    .companyStrengthClosing {
        grid-template-columns:
            auto
            1fr;

        gap:
            20px
            25px;
    }


    .strengthClosingLine {
        display: none;
    }


    .strengthClosingText {
        padding-left: 20px;

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


    .strengthClosingText h3 {
        font-size: 14px;
    }

}


/* =========================================================
   SERVICES PAGE — HERO
========================================================= */

.servicesHero {
    position: relative;
    overflow: hidden;

    min-height: 650px;

    padding: 105px 0 0;

    background:
        linear-gradient(
            135deg,
            #fafcfb 0%,
            #f1f6f3 58%,
            #e7f0eb 100%
        );
}


/* =========================================================
   BACKGROUND DETAIL
========================================================= */

.servicesHeroPattern {
    position: absolute;

    top: -210px;
    right: -160px;

    width: 650px;
    height: 650px;

    border: 1px solid rgba(25, 91, 66, 0.055);

    border-radius: 50%;

    pointer-events: none;
}


.servicesHeroPattern::before,
.servicesHeroPattern::after {
    content: "";

    position: absolute;

    border: 1px solid rgba(25, 91, 66, 0.055);

    border-radius: 50%;
}


.servicesHeroPattern::before {
    inset: 100px;
}


.servicesHeroPattern::after {
    inset: 205px;
}


/* =========================================================
   HERO LAYOUT
========================================================= */

.servicesHeroInner {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(330px, 0.72fr);

    gap: 90px;

    align-items: center;
}


/* =========================================================
   LEFT CONTENT
========================================================= */

.servicesHeroLabel {
    display: flex;
    align-items: center;

    gap: 13px;

    margin-bottom: 23px;
}


.servicesHeroLabel > span {
    width: 35px;
    height: 1px;

    background: #25815f;
}


.servicesHeroLabel strong {
    color: #25815f;

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

    letter-spacing: 2px;
}


.servicesHeroContent h1 {
    max-width: 720px;

    margin: 0;

    color: #173e30;

    font-size: clamp(48px, 4.6vw, 70px);
    font-weight: 600;

    line-height: 1.02;

    letter-spacing: -3px;
}


.servicesHeroContent h1 em {
    color: #278160;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-weight: 400;
}


.servicesHeroIntro {
    max-width: 570px;

    margin: 30px 0 0;

    color: #687a71;

    font-size: 11px;

    line-height: 1.9;
}


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

.servicesHeroActions {
    display: flex;
    align-items: center;

    gap: 12px;

    margin-top: 35px;
}


.servicesPrimaryBtn,
.servicesSecondaryBtn {
    min-height: 48px;

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

    gap: 32px;

    padding: 0 22px;

    text-decoration: none;

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

    letter-spacing: 0.7px;

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


.servicesPrimaryBtn {
    color: #ffffff;

    background: #176544;

    border: 1px solid #176544;
}


.servicesPrimaryBtn:hover {
    transform: translateY(-2px);

    background: #0f5137;

    border-color: #0f5137;
}


.servicesSecondaryBtn {
    color: #205b45;

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

    border: 1px solid rgba(23, 89, 64, 0.19);
}


.servicesSecondaryBtn:hover {
    transform: translateY(-2px);

    background: #ffffff;

    border-color: rgba(23, 89, 64, 0.28);
}


.servicesPrimaryBtn i,
.servicesSecondaryBtn i {
    font-style: normal;

    font-size: 12px;
}


/* =========================================================
   RIGHT CAPABILITY PANEL
========================================================= */

.servicesHeroCapabilities {
    position: relative;

    background: #164d39;

    box-shadow:
        0 24px 60px rgba(18, 63, 46, 0.12);
}


.servicesCapabilityTop {
    min-height: 52px;

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

    padding: 0 25px;

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


.servicesCapabilityTop span,
.servicesCapabilityTop small {
    color: rgba(255, 255, 255, 0.48);

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

    letter-spacing: 1.5px;
}


/* =========================================================
   CAPABILITY ITEMS
========================================================= */

.servicesCapabilityItem {
    min-height: 132px;

    display: grid;

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

    align-items: center;

    gap: 18px;

    padding: 22px 25px;

    color: inherit;

    text-decoration: none;

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

    transition:
        background 0.25s ease,
        padding-left 0.25s ease;
}


.servicesCapabilityItem:last-child {
    border-bottom: 0;
}


.servicesCapabilityItem:hover {
    padding-left: 30px;

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


.servicesCapabilityNumber {
    align-self: start;

    padding-top: 5px;

    color: #7fbea2;

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


.servicesCapabilityItem small {
    display: block;

    margin-bottom: 8px;

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

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

    letter-spacing: 1.3px;
}


.servicesCapabilityItem strong {
    color: #ffffff;

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

    line-height: 1.12;
}


.servicesCapabilityItem i {
    color: #8cc5aa;

    font-size: 14px;

    font-style: normal;
}


/* =========================================================
   BOTTOM INFORMATION STRIP
========================================================= */

.servicesHeroBottom {
    position: relative;
    z-index: 2;

    display: grid;

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

    align-items: center;

    gap: 25px;

    min-height: 67px;

    margin-top: 75px;

    border-top:
        1px solid rgba(24, 84, 62, 0.11);
}


.servicesHeroBottom span,
.servicesHeroBottom strong {
    color: #7a8982;

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

    letter-spacing: 1.4px;
}


.servicesHeroBottom strong {
    color: #26785a;
}


.servicesHeroBottom > div {
    height: 1px;

    background:
        rgba(24, 84, 62, 0.10);
}


/* =========================================================
   SERVICES HERO — TABLET
========================================================= */

@media (max-width: 950px) {

    .servicesHero {
        min-height: auto;

        padding-top: 80px;
    }


    .servicesHeroInner {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(300px, 0.78fr);

        gap: 50px;
    }


    .servicesHeroContent h1 {
        font-size: 50px;

        letter-spacing: -2px;
    }


    .servicesHeroBottom {
        margin-top: 60px;
    }

}


/* =========================================================
   SERVICES HERO — MOBILE
========================================================= */

@media (max-width: 700px) {

    .servicesHero {
        padding-top: 65px;
    }


    .servicesHeroInner {
        display: block;
    }


    .servicesHeroContent h1 {
        font-size: 40px;

        line-height: 1.04;

        letter-spacing: -1.5px;
    }


    .servicesHeroIntro {
        max-width: none;

        font-size: 10px;
    }


    .servicesHeroActions {
        flex-direction: column;

        align-items: stretch;
    }


    .servicesPrimaryBtn,
    .servicesSecondaryBtn {
        width: 100%;
    }


    .servicesHeroCapabilities {
        margin-top: 50px;
    }


    .servicesCapabilityItem {
        min-height: 110px;
    }


    .servicesCapabilityItem strong {
        font-size: 19px;
    }


    .servicesHeroBottom {
        grid-template-columns:
            auto
            1fr
            auto;

        gap: 15px;

        margin-top: 45px;
    }


    .servicesHeroBottom > div:nth-of-type(2),
    .servicesHeroBottom strong {
        display: none;
    }

}


/* =========================================================
   SERVICES HERO — SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .servicesHero {
        padding-top: 55px;
    }


    .servicesHeroContent h1 {
        font-size: 34px;

        letter-spacing: -1px;
    }


    .servicesHeroCapabilities {
        margin-top: 40px;
    }


    .servicesCapabilityItem {
        min-height: 105px;

        padding: 20px 18px;
    }


    .servicesCapabilityTop {
        padding: 0 18px;
    }


    .servicesHeroBottom {
        grid-template-columns:
            auto
            1fr;

        min-height: 60px;
    }


    .servicesHeroBottom > div,
    .servicesHeroBottom span:nth-of-type(2),
    .servicesHeroBottom strong {
        display: none;
    }

}

/* =========================================================
   SERVICES PAGE — SERVICE OVERVIEW
========================================================= */

.serviceOverview {
    position: relative;

    padding: 105px 0 90px;

    background: #ffffff;
}


/* =========================================================
   HEADER
========================================================= */

.serviceOverviewHeader {
    display: grid;

    grid-template-columns:
        1fr
        0.62fr;

    align-items: end;

    gap: 100px;

    margin-bottom: 62px;
}


.serviceOverviewLabel {
    display: flex;
    align-items: center;

    gap: 13px;

    margin-bottom: 20px;
}


.serviceOverviewLabel > span {
    width: 34px;
    height: 1px;

    background: #21805d;
}


.serviceOverviewLabel strong {
    color: #21805d;

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

    letter-spacing: 2px;
}


.serviceOverviewHeader h2 {
    margin: 0;

    color: #173e30;

    font-size: clamp(42px, 4vw, 60px);
    font-weight: 600;

    line-height: 1.03;

    letter-spacing: -2.3px;
}


.serviceOverviewHeader h2 em {
    color: #278160;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-weight: 400;
}


.serviceOverviewHeader > p {
    max-width: 430px;

    margin: 0 0 4px;

    color: #6e7e76;

    font-size: 10px;

    line-height: 1.8;
}


/* =========================================================
   SERVICES GRID
========================================================= */

.serviceOverviewGrid {
    display: grid;

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

    border-top:
        1px solid rgba(20, 77, 56, 0.12);

    border-bottom:
        1px solid rgba(20, 77, 56, 0.12);
}


/* =========================================================
   SERVICE ITEM
========================================================= */

.serviceOverviewItem {
    min-height: 440px;

    display: flex;
    flex-direction: column;

    padding: 30px 30px 27px;

    color: inherit;

    text-decoration: none;

    background: #ffffff;

    border-right:
        1px solid rgba(20, 77, 56, 0.12);

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


.serviceOverviewItem:last-child {
    border-right: 0;
}


.serviceOverviewItem:hover {
    background: #f4f8f6;
}


/* =========================================================
   FEATURED MIDDLE ITEM
========================================================= */

.serviceOverviewFeatured {
    background: #f0f6f3;
}


.serviceOverviewFeatured:hover {
    background: #eaf3ee;
}


/* =========================================================
   ITEM TOP
========================================================= */

.serviceOverviewTop {
    display: flex;
    align-items: center;
    justify-content: space-between;
}


.serviceOverviewTop > span {
    color: #23805d;

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


.serviceOverviewTop small {
    color: #6e8177;

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

    letter-spacing: 1.5px;
}


/* =========================================================
   ITEM CONTENT
========================================================= */

.serviceOverviewContent {
    margin-top: 78px;
}


.serviceOverviewLine {
    width: 31px;
    height: 2px;

    margin-bottom: 24px;

    background: #278160;
}


.serviceOverviewContent h3 {
    margin: 0;

    color: #173e30;

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

    line-height: 1.12;

    letter-spacing: -1px;
}


.serviceOverviewContent h3 em {
    color: #278160;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-weight: 400;
}


.serviceOverviewContent p {
    max-width: 320px;

    margin: 23px 0 0;

    color: #718179;

    font-size: 9px;

    line-height: 1.8;
}


/* =========================================================
   ITEM BOTTOM
========================================================= */

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

    margin-top: auto;

    padding-top: 25px;

    border-top:
        1px solid rgba(20, 77, 56, 0.09);
}


.serviceOverviewBottom span {
    color: #6e8177;

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

    letter-spacing: 1.25px;
}


.serviceOverviewBottom i {
    color: #278160;

    font-size: 13px;

    font-style: normal;

    transition: transform 0.25s ease;
}


.serviceOverviewItem:hover
.serviceOverviewBottom i {
    transform: translate(3px, -3px);
}


/* =========================================================
   BOTTOM STATEMENT
========================================================= */

.serviceOverviewStatement {
    display: grid;

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

    align-items: center;

    gap: 22px;

    margin-top: 30px;
}


.serviceOverviewStatement span,
.serviceOverviewStatement strong,
.serviceOverviewStatement p {
    margin: 0;

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

    letter-spacing: 1.4px;
}


.serviceOverviewStatement span {
    color: #7e8e86;
}


.serviceOverviewStatement strong {
    color: #247b5a;
}


.serviceOverviewStatement p {
    color: #8b9992;
}


.serviceOverviewStatement > div {
    height: 1px;

    background:
        rgba(24, 95, 69, 0.12);
}


/* =========================================================
   SERVICE OVERVIEW — TABLET
========================================================= */

@media (max-width: 950px) {

    .serviceOverview {
        padding: 80px 0;
    }


    .serviceOverviewHeader {
        gap: 55px;

        margin-bottom: 50px;
    }


    .serviceOverviewGrid {
        grid-template-columns:
            repeat(3, 1fr);
    }


    .serviceOverviewItem {
        min-height: 400px;

        padding: 25px 22px;
    }


    .serviceOverviewContent {
        margin-top: 60px;
    }


    .serviceOverviewContent h3 {
        font-size: 22px;
    }

}


/* =========================================================
   SERVICE OVERVIEW — MOBILE
========================================================= */

@media (max-width: 700px) {

    .serviceOverview {
        padding: 70px 0;
    }


    .serviceOverviewHeader {
        display: block;

        margin-bottom: 40px;
    }


    .serviceOverviewHeader h2 {
        font-size: 38px;

        line-height: 1.05;

        letter-spacing: -1.4px;
    }


    .serviceOverviewHeader > p {
        max-width: none;

        margin-top: 25px;
    }


    .serviceOverviewGrid {
        grid-template-columns: 1fr;
    }


    .serviceOverviewItem {
        min-height: 330px;

        padding: 27px 24px;

        border-right: 0;

        border-bottom:
            1px solid rgba(20, 77, 56, 0.12);
    }


    .serviceOverviewItem:last-child {
        border-bottom: 0;
    }


    .serviceOverviewContent {
        margin-top: 45px;
    }


    .serviceOverviewContent h3 {
        font-size: 25px;
    }


    .serviceOverviewContent p {
        max-width: 420px;
    }


    .serviceOverviewStatement {
        grid-template-columns:
            auto
            1fr
            auto;

        gap: 15px;
    }


    .serviceOverviewStatement p {
        display: none;
    }

}


/* =========================================================
   SERVICE OVERVIEW — SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .serviceOverview {
        padding: 60px 0;
    }


    .serviceOverviewHeader h2 {
        font-size: 33px;

        letter-spacing: -1px;
    }


    .serviceOverviewItem {
        min-height: 310px;

        padding: 24px 20px;
    }


    .serviceOverviewContent {
        margin-top: 38px;
    }


    .serviceOverviewContent h3 {
        font-size: 23px;
    }


    .serviceOverviewStatement {
        grid-template-columns:
            auto
            1fr;
    }


    .serviceOverviewStatement strong {
        display: none;
    }

}

/* =========================================================
   SERVICES PAGE — ELECTRICAL TRADING
========================================================= */

.electricalTrading {
    position: relative;
    padding: 105px 0;
    overflow: hidden;
    background: #f3f7f5;
}


/* =========================================================
   MAIN GRID
========================================================= */

.electricalTradingGrid {
    display: grid;
    grid-template-columns: 0.93fr 1.07fr;
    align-items: stretch;
    gap: 0;
}


/* =========================================================
   LEFT VISUAL
========================================================= */

.electricalTradingVisual {
    position: relative;
    min-height: 680px;
    overflow: hidden;
    background: #dfe9e4;
}


.electricalTradingImage {
    position: absolute;
    inset: 0;
}


.electricalTradingImage img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}


.electricalTradingImageShade {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(7, 47, 33, 0.04) 30%,
            rgba(7, 47, 33, 0.36) 100%
        );
}


/* =========================================================
   SERVICE BADGE
========================================================= */

.electricalTradingBadge {
    position: absolute;
    z-index: 3;

    top: 0;
    left: 0;

    width: 150px;
    min-height: 170px;

    display: flex;
    flex-direction: column;

    padding: 24px;

    background: #176544;
}


.electricalTradingBadge small {
    color: rgba(255, 255, 255, 0.50);

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

    letter-spacing: 1.5px;
}


.electricalTradingBadge strong {
    margin-top: 18px;

    color: #ffffff;

    font-size: 38px;
    font-weight: 400;

    line-height: 1;
}


.electricalTradingBadge span {
    margin-top: auto;

    color: #8ed0b0;

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

    line-height: 1.6;

    letter-spacing: 1.3px;
}


/* =========================================================
   IMAGE BOTTOM CARD
========================================================= */

.electricalTradingImageCard {
    position: absolute;
    z-index: 3;

    left: 0;
    bottom: 0;

    width: 65%;

    padding: 25px 27px;

    background: #164d39;
}


.electricalTradingImageCard small {
    display: block;

    margin-bottom: 10px;

    color: #79b99d;

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

    letter-spacing: 1.4px;
}


.electricalTradingImageCard strong {
    color: #ffffff;

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

    line-height: 1.35;
}


/* =========================================================
   RIGHT CONTENT
========================================================= */

.electricalTradingContent {
    min-height: 680px;

    display: flex;
    flex-direction: column;

    padding: 65px 65px 45px;

    background: #ffffff;
}


.electricalTradingLabel {
    display: flex;
    align-items: center;

    gap: 13px;

    margin-bottom: 22px;
}


.electricalTradingLabel > span {
    width: 33px;
    height: 1px;

    background: #23805d;
}


.electricalTradingLabel strong {
    color: #23805d;

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

    letter-spacing: 1.7px;
}


.electricalTradingContent h2 {
    max-width: 570px;

    margin: 0;

    color: #173e30;

    font-size: clamp(40px, 3.5vw, 54px);
    font-weight: 600;

    line-height: 1.03;

    letter-spacing: -2px;
}


.electricalTradingContent h2 em {
    color: #278160;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-weight: 400;
}


.electricalTradingIntro {
    max-width: 560px;

    margin: 28px 0 0;

    color: #4f685d;

    font-size: 11px;

    line-height: 1.85;
}


.electricalTradingText {
    max-width: 560px;

    margin: 14px 0 0;

    color: #7a8982;

    font-size: 9px;

    line-height: 1.8;
}


/* =========================================================
   CAPABILITIES
========================================================= */

.electricalTradingCapabilities {
    margin-top: 38px;

    border-top:
        1px solid rgba(20, 77, 56, 0.11);
}


.electricalTradingCapability {
    display: grid;

    grid-template-columns:
        40px
        1fr;

    gap: 18px;

    padding: 20px 0;

    border-bottom:
        1px solid rgba(20, 77, 56, 0.11);
}


.electricalTradingCapability > span {
    padding-top: 3px;

    color: #28815f;

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


.electricalTradingCapability strong {
    display: block;

    color: #173e30;

    font-size: 13px;
    font-weight: 600;
}


.electricalTradingCapability p {
    max-width: 430px;

    margin: 6px 0 0;

    color: #7c8b84;

    font-size: 8px;

    line-height: 1.65;
}


/* =========================================================
   BOTTOM
========================================================= */

.electricalTradingBottom {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 30px;

    margin-top: auto;
    padding-top: 28px;
}


.electricalTradingBottom small {
    display: block;

    margin-bottom: 7px;

    color: #89968f;

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

    letter-spacing: 1.3px;
}


.electricalTradingBottom strong {
    color: #357158;

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

    letter-spacing: 1.1px;
}


.electricalTradingBottom a {
    min-width: 150px;
    min-height: 44px;

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

    gap: 25px;

    padding: 0 17px;

    color: #ffffff;

    background: #176544;

    text-decoration: none;

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

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


.electricalTradingBottom a:hover {
    transform: translateY(-2px);

    background: #104f37;
}


.electricalTradingBottom i {
    font-style: normal;

    font-size: 11px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 950px) {

    .electricalTrading {
        padding: 80px 0;
    }


    .electricalTradingGrid {
        grid-template-columns:
            0.9fr
            1.1fr;
    }


    .electricalTradingVisual {
        min-height: 650px;
    }


    .electricalTradingContent {
        min-height: 650px;

        padding:
            50px
            40px
            38px;
    }


    .electricalTradingContent h2 {
        font-size: 42px;

        letter-spacing: -1.5px;
    }

}


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

@media (max-width: 700px) {

    .electricalTrading {
        padding: 70px 0;
    }


    .electricalTradingGrid {
        display: block;
    }


    .electricalTradingVisual {
        min-height: 500px;
    }


    .electricalTradingBadge {
        width: 125px;
        min-height: 145px;

        padding: 20px;
    }


    .electricalTradingBadge strong {
        font-size: 32px;
    }


    .electricalTradingImageCard {
        width: 78%;
    }


    .electricalTradingContent {
        min-height: auto;

        padding:
            45px
            28px
            35px;
    }


    .electricalTradingContent h2 {
        font-size: 38px;

        line-height: 1.05;

        letter-spacing: -1.4px;
    }


    .electricalTradingBottom {
        margin-top: 30px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .electricalTrading {
        padding: 60px 0;
    }


    .electricalTradingVisual {
        min-height: 420px;
    }


    .electricalTradingImageCard {
        width: 85%;

        padding: 20px;
    }


    .electricalTradingContent {
        padding:
            38px
            20px
            30px;
    }


    .electricalTradingContent h2 {
        font-size: 33px;

        letter-spacing: -1px;
    }


    .electricalTradingBottom {
        display: block;
    }


    .electricalTradingBottom a {
        width: 100%;

        margin-top: 22px;
    }

}

/* =========================================================
   SERVICES PAGE — ELECTRICAL CONTRACTING
========================================================= */

.electricalContracting {
    position: relative;
    padding: 105px 0;
    overflow: hidden;
    background: #ffffff;
}


/* =========================================================
   MAIN GRID
========================================================= */

.electricalContractingGrid {
    display: grid;
    grid-template-columns: 1.03fr 0.97fr;
    align-items: stretch;
}


/* =========================================================
   LEFT CONTENT
========================================================= */

.electricalContractingContent {
    min-height: 700px;

    display: flex;
    flex-direction: column;

    padding: 65px 65px 45px;

    background: #164d39;
}


/* LABEL */

.electricalContractingLabel {
    display: flex;
    align-items: center;

    gap: 13px;

    margin-bottom: 25px;
}


.electricalContractingLabel > span {
    width: 33px;
    height: 1px;

    background: #77c5a2;
}


.electricalContractingLabel strong {
    color: #8dd0b1;

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

    letter-spacing: 1.7px;
}


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

.electricalContractingTitle {
    position: relative;
}


.electricalContractingTitle > span {
    display: block;

    margin-bottom: 15px;

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

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

    letter-spacing: 1px;
}


.electricalContractingTitle h2 {
    max-width: 600px;

    margin: 0;

    color: #ffffff;

    font-size: clamp(40px, 3.5vw, 54px);
    font-weight: 600;

    line-height: 1.03;

    letter-spacing: -2px;
}


.electricalContractingTitle h2 em {
    color: #8bd0af;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-weight: 400;
}


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

.electricalContractingIntro {
    max-width: 570px;

    margin: 28px 0 0;

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

    font-size: 11px;

    line-height: 1.85;
}


.electricalContractingText {
    max-width: 570px;

    margin: 14px 0 0;

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

    font-size: 9px;

    line-height: 1.8;
}


/* =========================================================
   CAPABILITIES
========================================================= */

.contractingCapabilities {
    display: grid;

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

    margin-top: 38px;

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

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


.contractingCapability {
    display: grid;

    grid-template-columns:
        30px
        1fr;

    gap: 12px;

    min-height: 125px;

    padding: 20px;

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

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


.contractingCapability > span {
    padding-top: 2px;

    color: #78c5a2;

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


.contractingCapability strong {
    display: block;

    color: #ffffff;

    font-size: 12px;
    font-weight: 600;
}


.contractingCapability p {
    margin: 7px 0 0;

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

    font-size: 7.5px;

    line-height: 1.65;
}


/* =========================================================
   CONTENT BOTTOM
========================================================= */

.electricalContractingBottom {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 30px;

    margin-top: auto;

    padding-top: 28px;
}


.electricalContractingBottom small {
    display: block;

    margin-bottom: 7px;

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

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

    letter-spacing: 1.3px;
}


.electricalContractingBottom strong {
    color: #87c9aa;

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

    letter-spacing: 1.1px;
}


.electricalContractingBottom a {
    min-width: 150px;
    min-height: 44px;

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

    gap: 25px;

    padding: 0 17px;

    color: #164d39;

    background: #ffffff;

    text-decoration: none;

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

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


.electricalContractingBottom a:hover {
    transform: translateY(-2px);

    background: #edf6f1;
}


.electricalContractingBottom i {
    font-style: normal;

    font-size: 11px;
}


/* =========================================================
   RIGHT VISUAL
========================================================= */

.electricalContractingVisual {
    position: relative;

    min-height: 700px;

    overflow: hidden;

    background: #dce7e2;
}


.electricalContractingImage {
    position: absolute;

    inset: 0;
}


.electricalContractingImage img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


.electricalContractingShade {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(5, 39, 27, 0.03) 20%,
            rgba(5, 39, 27, 0.42) 100%
        );
}


/* =========================================================
   PROJECT BADGE
========================================================= */

.contractingProjectBadge {
    position: absolute;

    z-index: 3;

    top: 0;
    right: 0;

    width: 145px;
    min-height: 170px;

    display: flex;
    flex-direction: column;

    padding: 24px;

    background: #ffffff;
}


.contractingProjectBadge small {
    color: #83938b;

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

    letter-spacing: 1.4px;
}


.contractingProjectBadge strong {
    margin-top: 18px;

    color: #176544;

    font-size: 38px;
    font-weight: 400;

    line-height: 1;
}


.contractingProjectBadge span {
    margin-top: auto;

    color: #47826a;

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

    line-height: 1.55;

    letter-spacing: 1.2px;
}


/* =========================================================
   VISUAL BOTTOM CARD
========================================================= */

.contractingVisualCard {
    position: absolute;

    z-index: 3;

    left: 0;
    bottom: 0;

    width: 72%;

    padding: 26px 28px;

    background: rgba(13, 67, 47, 0.96);
}


.contractingVisualCard > small {
    display: block;

    margin-bottom: 11px;

    color: #79bd9e;

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

    letter-spacing: 1.4px;
}


.contractingVisualCard > strong {
    color: #ffffff;

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

    line-height: 1.4;
}


.contractingVisualLine {
    display: flex;
    align-items: center;

    gap: 10px;

    margin-top: 18px;

    padding-top: 15px;

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


.contractingVisualLine span {
    color: rgba(255, 255, 255, 0.55);

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

    letter-spacing: 1px;
}


.contractingVisualLine i {
    width: 3px;
    height: 3px;

    border-radius: 50%;

    background: #76c29f;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 950px) {

    .electricalContracting {
        padding: 80px 0;
    }


    .electricalContractingGrid {
        grid-template-columns:
            1.08fr
            0.92fr;
    }


    .electricalContractingContent {
        min-height: 670px;

        padding:
            50px
            40px
            38px;
    }


    .electricalContractingVisual {
        min-height: 670px;
    }


    .electricalContractingTitle h2 {
        font-size: 42px;

        letter-spacing: -1.5px;
    }


    .contractingCapability {
        min-height: 120px;

        padding: 17px;
    }

}


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

@media (max-width: 700px) {

    .electricalContracting {
        padding: 70px 0;
    }


    .electricalContractingGrid {
        display: flex;
        flex-direction: column;
    }


    .electricalContractingContent {
        min-height: auto;

        padding:
            45px
            28px
            38px;
    }


    .electricalContractingTitle h2 {
        font-size: 38px;

        line-height: 1.05;

        letter-spacing: -1.4px;
    }


    .contractingCapabilities {
        grid-template-columns: 1fr;
    }


    .contractingCapability {
        min-height: auto;
    }


    .electricalContractingBottom {
        margin-top: 30px;
    }


    .electricalContractingVisual {
        min-height: 500px;
    }


    .contractingProjectBadge {
        width: 125px;
        min-height: 145px;

        padding: 20px;
    }


    .contractingProjectBadge strong {
        font-size: 32px;
    }


    .contractingVisualCard {
        width: 82%;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .electricalContracting {
        padding: 60px 0;
    }


    .electricalContractingContent {
        padding:
            38px
            20px
            32px;
    }


    .electricalContractingTitle h2 {
        font-size: 33px;

        letter-spacing: -1px;
    }


    .electricalContractingBottom {
        display: block;
    }


    .electricalContractingBottom a {
        width: 100%;

        margin-top: 22px;
    }


    .electricalContractingVisual {
        min-height: 430px;
    }


    .contractingVisualCard {
        width: 88%;

        padding: 21px;
    }


    .contractingVisualLine {
        flex-wrap: wrap;
    }

}

/* =========================================================
   SERVICES PAGE — METAL FABRICATION
========================================================= */

.metalFabrication {
    position: relative;
    padding: 110px 0 95px;
    overflow: hidden;
    background: #f4f7f5;
}


/* =========================================================
   HEADER
========================================================= */

.metalFabricationHeader {
    display: grid;
    grid-template-columns: 1fr 0.55fr;
    align-items: end;
    gap: 90px;

    margin-bottom: 55px;
}


.metalFabricationLabel {
    display: flex;
    align-items: center;
    gap: 13px;

    margin-bottom: 20px;
}


.metalFabricationLabel > span {
    width: 34px;
    height: 1px;

    background: #21805d;
}


.metalFabricationLabel strong {
    color: #21805d;

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

    letter-spacing: 1.8px;
}


.metalFabricationHeader h2 {
    margin: 0;

    color: #173e30;

    font-size: clamp(42px, 4vw, 60px);
    font-weight: 600;

    line-height: 1.03;

    letter-spacing: -2.3px;
}


.metalFabricationHeader h2 em {
    color: #278160;

    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
}


.metalFabricationHeaderRight {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;

    gap: 25px;

    padding-bottom: 5px;
}


.metalFabricationHeaderRight > span {
    color: #23805d;

    font-size: 13px;
    font-weight: 700;
}


.metalFabricationHeaderRight p {
    max-width: 390px;

    margin: 0;

    color: #6f8077;

    font-size: 10px;

    line-height: 1.8;
}


/* =========================================================
   MAIN VISUAL
========================================================= */

.metalFabricationVisual {
    position: relative;

    height: 520px;

    overflow: hidden;

    background: #dce5e1;
}


.metalFabricationVisual > img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


.metalFabricationShade {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(7, 48, 34, 0.05) 30%,
            rgba(7, 48, 34, 0.12) 65%,
            rgba(7, 48, 34, 0.40) 100%
        );
}


/* =========================================================
   FACILITY BADGE
========================================================= */

.metalFacilityBadge {
    position: absolute;

    z-index: 3;

    top: 0;
    right: 0;

    width: 175px;
    min-height: 190px;

    display: flex;
    flex-direction: column;

    padding: 25px;

    background: #176544;
}


.metalFacilityBadge small {
    color: #8dceb0;

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

    letter-spacing: 1.4px;
}


.metalFacilityBadge strong {
    margin-top: 20px;

    color: #ffffff;

    font-size: 42px;
    font-weight: 400;

    line-height: 1;
}


.metalFacilityBadge span {
    margin-top: auto;

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

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

    line-height: 1.6;

    letter-spacing: 1.3px;
}


/* =========================================================
   VISUAL STATEMENT
========================================================= */

.metalVisualStatement {
    position: absolute;

    z-index: 3;

    left: 0;
    bottom: 0;

    min-width: 390px;

    padding: 28px 32px;

    background: rgba(20, 74, 54, 0.96);
}


.metalVisualStatement small {
    display: block;

    margin-bottom: 11px;

    color: #80c3a5;

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

    letter-spacing: 1.4px;
}


.metalVisualStatement strong {
    color: #ffffff;

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

    line-height: 1.35;
}


.metalVisualStatement strong em {
    color: #8fd0b1;

    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
}


/* =========================================================
   LOWER CONTENT
========================================================= */

.metalFabricationLower {
    display: grid;
    grid-template-columns: 0.72fr 1.28fr;

    margin-top: 0;

    border-left: 1px solid rgba(21, 79, 57, 0.11);
    border-bottom: 1px solid rgba(21, 79, 57, 0.11);
}


/* INTRO */

.metalFabricationIntro {
    padding: 50px 45px;

    border-right: 1px solid rgba(21, 79, 57, 0.11);
}


.metalFabricationIntro > span {
    display: block;

    margin-bottom: 17px;

    color: #278160;

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

    letter-spacing: 1.5px;
}


.metalFabricationIntro h3 {
    margin: 0;

    color: #173e30;

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

    line-height: 1.12;

    letter-spacing: -0.8px;
}


.metalFabricationIntro p {
    max-width: 380px;

    margin: 22px 0 0;

    color: #75867e;

    font-size: 9px;

    line-height: 1.8;
}


.metalFabricationIntro a {
    width: 165px;
    min-height: 45px;

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

    margin-top: 32px;

    padding: 0 17px;

    color: #ffffff;

    background: #176544;

    text-decoration: none;

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

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


.metalFabricationIntro a:hover {
    transform: translateY(-2px);

    background: #104f37;
}


.metalFabricationIntro a i {
    font-style: normal;

    font-size: 11px;
}


/* =========================================================
   CAPABILITIES
========================================================= */

.metalFabricationCapabilities {
    display: grid;

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


.metalFabricationItem {
    display: grid;

    grid-template-columns: 32px 1fr;

    gap: 14px;

    min-height: 210px;

    padding: 36px 30px;

    background: #ffffff;

    border-top: 1px solid rgba(21, 79, 57, 0.11);
    border-right: 1px solid rgba(21, 79, 57, 0.11);
}


.metalFabricationItem > span {
    color: #298261;

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


.metalFabricationItem small {
    display: block;

    margin-bottom: 15px;

    color: #719084;

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

    letter-spacing: 1.3px;
}


.metalFabricationItem strong {
    display: block;

    color: #173e30;

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

    line-height: 1.2;
}


.metalFabricationItem p {
    max-width: 280px;

    margin: 18px 0 0;

    color: #819089;

    font-size: 8px;

    line-height: 1.7;
}


/* DARK FINAL ITEM */

.metalFabricationItemDark {
    background: #17563f;
}


.metalFabricationItemDark > span {
    color: #88c8aa;
}


.metalFabricationItemDark small {
    color: #85c5a7;
}


.metalFabricationItemDark strong {
    color: #ffffff;
}


.metalFabricationItemDark p {
    color: rgba(255, 255, 255, 0.52);
}


/* =========================================================
   BOTTOM LINE
========================================================= */

.metalFabricationBottom {
    display: grid;

    grid-template-columns:
        auto
        1fr
        auto;

    align-items: center;

    gap: 20px;

    margin-top: 28px;
}


.metalFabricationBottom span {
    color: #7c8d85;

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

    letter-spacing: 1.5px;
}


.metalFabricationBottom > div {
    height: 1px;

    background: rgba(24, 95, 69, 0.13);
}


.metalFabricationBottom strong {
    color: #247b5a;

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

    letter-spacing: 1.3px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 950px) {

    .metalFabrication {
        padding: 85px 0 80px;
    }


    .metalFabricationHeader {
        grid-template-columns: 1fr 0.6fr;

        gap: 50px;
    }


    .metalFabricationVisual {
        height: 470px;
    }


    .metalFabricationLower {
        grid-template-columns: 0.8fr 1.2fr;
    }


    .metalFabricationIntro {
        padding: 40px 30px;
    }


    .metalFabricationItem {
        padding: 30px 22px;

        min-height: 200px;
    }

}


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

@media (max-width: 700px) {

    .metalFabrication {
        padding: 70px 0;
    }


    .metalFabricationHeader {
        display: block;

        margin-bottom: 38px;
    }


    .metalFabricationHeader h2 {
        font-size: 38px;

        line-height: 1.05;

        letter-spacing: -1.4px;
    }


    .metalFabricationHeaderRight {
        margin-top: 27px;
    }


    .metalFabricationVisual {
        height: 480px;
    }


    .metalFacilityBadge {
        width: 140px;
        min-height: 155px;

        padding: 20px;
    }


    .metalFacilityBadge strong {
        font-size: 34px;
    }


    .metalVisualStatement {
        min-width: 0;
        width: 82%;

        padding: 24px;
    }


    .metalFabricationLower {
        display: block;
    }


    .metalFabricationIntro {
        padding: 40px 28px;

        border-right: 1px solid rgba(21, 79, 57, 0.11);
    }


    .metalFabricationCapabilities {
        grid-template-columns: 1fr 1fr;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .metalFabrication {
        padding: 60px 0;
    }


    .metalFabricationHeader h2 {
        font-size: 33px;

        letter-spacing: -1px;
    }


    .metalFabricationVisual {
        height: 420px;
    }


    .metalVisualStatement {
        width: 88%;

        padding: 21px;
    }


    .metalVisualStatement strong {
        font-size: 17px;
    }


    .metalFabricationIntro {
        padding: 35px 20px;
    }


    .metalFabricationCapabilities {
        grid-template-columns: 1fr;
    }


    .metalFabricationItem {
        min-height: 175px;

        padding: 28px 22px;
    }


    .metalFabricationBottom {
        grid-template-columns: auto 1fr;

        gap: 14px;
    }


    .metalFabricationBottom strong {
        grid-column: 1 / -1;
    }

}

/* =========================================================
   SERVICES PAGE — SERVICE STRENGTH
========================================================= */

.serviceStrength {
    position: relative;
    padding: 105px 0 95px;
    overflow: hidden;
    background: #ffffff;
}


/* =========================================================
   HEADER
========================================================= */

.serviceStrengthHeader {
    display: grid;
    grid-template-columns: 1fr 0.55fr;
    align-items: end;
    gap: 100px;

    margin-bottom: 60px;
}


.serviceStrengthLabel {
    display: flex;
    align-items: center;
    gap: 13px;

    margin-bottom: 20px;
}


.serviceStrengthLabel > span {
    width: 34px;
    height: 1px;

    background: #21805d;
}


.serviceStrengthLabel strong {
    color: #21805d;

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

    letter-spacing: 1.8px;
}


.serviceStrengthHeading h2 {
    margin: 0;

    color: #173e30;

    font-size: clamp(42px, 4vw, 60px);
    font-weight: 600;

    line-height: 1.03;

    letter-spacing: -2.3px;
}


.serviceStrengthHeading h2 em {
    color: #278160;

    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
}


.serviceStrengthIntro {
    padding-bottom: 5px;
}


.serviceStrengthIntro p {
    max-width: 410px;

    margin: 0;

    color: #6f8077;

    font-size: 10px;

    line-height: 1.8;
}


.serviceStrengthIntro > span {
    display: block;

    margin-top: 20px;

    color: #25805e;

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

    letter-spacing: 1.6px;
}


/* =========================================================
   STRENGTH GRID
========================================================= */

.serviceStrengthGrid {
    display: grid;

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

    border-top:
        1px solid rgba(20, 77, 56, 0.12);

    border-left:
        1px solid rgba(20, 77, 56, 0.12);
}


.serviceStrengthItem {
    min-height: 390px;

    display: flex;
    flex-direction: column;

    padding: 30px 28px;

    background: #f7f9f8;

    border-right:
        1px solid rgba(20, 77, 56, 0.12);

    border-bottom:
        1px solid rgba(20, 77, 56, 0.12);

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


.serviceStrengthItem:hover {
    transform: translateY(-4px);

    background: #f0f6f3;
}


/* TOP */

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

    gap: 20px;
}


.serviceStrengthTop > span {
    color: #29815f;

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


.serviceStrengthTop small {
    color: #789087;

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

    letter-spacing: 1.3px;
}


/* NUMBER */

.serviceStrengthNumber {
    display: block;

    margin-top: 65px;

    color: #176544;

    font-size: 58px;
    font-weight: 400;

    line-height: 1;

    letter-spacing: -2px;
}


.serviceStrengthNumber span {
    margin-left: 2px;

    color: #2b8b66;

    font-size: 24px;
}


/* ICON / 03 */

.serviceStrengthIcon {
    width: 68px;
    height: 68px;

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

    margin-top: 55px;

    color: #176544;

    border:
        1px solid rgba(23, 101, 68, 0.22);

    border-radius: 50%;

    font-size: 17px;
    font-weight: 500;
}


/* TEXT */

.serviceStrengthItem h3 {
    margin: 27px 0 0;

    color: #173e30;

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

    line-height: 1.25;

    letter-spacing: -0.3px;
}


.serviceStrengthItem p {
    margin: auto 0 0;

    padding-top: 28px;

    color: #7c8c84;

    font-size: 8px;

    line-height: 1.7;
}


/* =========================================================
   FEATURED CARD
========================================================= */

.serviceStrengthFeatured {
    background: #17563f;
}


.serviceStrengthFeatured:hover {
    background: #17563f;
}


.serviceStrengthFeatured .serviceStrengthTop > span,
.serviceStrengthFeatured .serviceStrengthTop small {
    color: #86c6a8;
}


.serviceStrengthFeatured .serviceStrengthNumber {
    color: #ffffff;
}


.serviceStrengthFeatured h3 {
    color: #ffffff;
}


.serviceStrengthFeatured p {
    color: rgba(255, 255, 255, 0.52);
}


/* =========================================================
   BOTTOM
========================================================= */

.serviceStrengthBottom {
    display: grid;

    grid-template-columns:
        auto
        1fr
        auto;

    align-items: center;

    gap: 30px;

    margin-top: 35px;
}


.serviceStrengthBottomLabel small {
    display: block;

    margin-bottom: 7px;

    color: #8a9891;

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

    letter-spacing: 1.4px;
}


.serviceStrengthBottomLabel strong {
    color: #1f7757;

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

    letter-spacing: 1.2px;
}


.serviceStrengthLine {
    height: 1px;

    background: rgba(22, 91, 65, 0.14);
}


.serviceStrengthSteps {
    display: flex;
    align-items: center;

    gap: 13px;
}


.serviceStrengthSteps span {
    display: flex;
    align-items: center;

    gap: 6px;

    color: #6f8379;

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

    letter-spacing: 1px;
}


.serviceStrengthSteps b {
    color: #26805e;

    font-size: 6px;
}


.serviceStrengthSteps i {
    width: 16px;
    height: 1px;

    background: rgba(28, 105, 76, 0.25);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 950px) {

    .serviceStrength {
        padding: 85px 0 80px;
    }


    .serviceStrengthHeader {
        gap: 55px;
    }


    .serviceStrengthGrid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .serviceStrengthItem {
        min-height: 340px;
    }

}


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

@media (max-width: 700px) {

    .serviceStrength {
        padding: 70px 0;
    }


    .serviceStrengthHeader {
        display: block;

        margin-bottom: 40px;
    }


    .serviceStrengthHeading h2 {
        font-size: 38px;

        line-height: 1.05;

        letter-spacing: -1.4px;
    }


    .serviceStrengthIntro {
        margin-top: 27px;
    }


    .serviceStrengthIntro p {
        max-width: none;
    }


    .serviceStrengthGrid {
        grid-template-columns: 1fr 1fr;
    }


    .serviceStrengthItem {
        min-height: 320px;

        padding: 25px 22px;
    }


    .serviceStrengthNumber {
        margin-top: 45px;

        font-size: 48px;
    }


    .serviceStrengthIcon {
        margin-top: 42px;
    }


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

        gap: 20px;
    }


    .serviceStrengthLine {
        width: 100%;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .serviceStrength {
        padding: 60px 0;
    }


    .serviceStrengthHeading h2 {
        font-size: 33px;

        letter-spacing: -1px;
    }


    .serviceStrengthGrid {
        grid-template-columns: 1fr;
    }


    .serviceStrengthItem {
        min-height: 300px;
    }


    .serviceStrengthNumber {
        margin-top: 40px;
    }


    .serviceStrengthSteps {
        justify-content: space-between;

        gap: 8px;
    }


    .serviceStrengthSteps i {
        flex: 1;
    }

}

/* =========================================================
   CONTACT PAGE — HERO
========================================================= */

.contactHero {
    position: relative;
    overflow: hidden;
    padding: 110px 0 0;
    background:
        linear-gradient(135deg, #fbfcfb 0%, #f1f7f4 100%);
}

.contactHeroPattern {
    position: absolute;
    width: 620px;
    height: 620px;
    right: -150px;
    top: -180px;
    border: 1px solid rgba(24, 104, 75, 0.07);
    border-radius: 50%;
}

.contactHeroPattern::before,
.contactHeroPattern::after {
    content: "";
    position: absolute;
    border: 1px solid rgba(24, 104, 75, 0.055);
    border-radius: 50%;
}

.contactHeroPattern::before {
    inset: 85px;
}

.contactHeroPattern::after {
    inset: 180px;
}

.contactHeroGrid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.05fr 0.75fr;
    align-items: center;
    gap: 110px;
    min-height: 540px;
}

.contactHeroLabel {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 25px;
}

.contactHeroLabel > span {
    width: 36px;
    height: 1px;
    background: #24815e;
}

.contactHeroLabel strong {
    color: #237b5a;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 2px;
}

.contactHeroContent h1 {
    margin: 0;
    color: #164936;
    font-size: clamp(54px, 5vw, 78px);
    font-weight: 600;
    line-height: 0.98;
    letter-spacing: -3px;
}

.contactHeroContent h1 em {
    color: #278761;
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
}

.contactHeroContent > p {
    max-width: 620px;
    margin: 35px 0 0;
    color: #667a70;
    font-size: 11px;
    line-height: 1.9;
}

.contactHeroActions {
    display: flex;
    gap: 12px;
    margin-top: 37px;
}

.contactHeroPrimary,
.contactHeroSecondary {
    min-width: 205px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    padding: 0 23px;
    text-decoration: none;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.7px;
    transition:
        transform 0.25s ease,
        background 0.25s ease;
}

.contactHeroPrimary {
    color: #ffffff;
    background: #176b4b;
}

.contactHeroPrimary:hover {
    background: #12583d;
    transform: translateY(-2px);
}

.contactHeroSecondary {
    color: #17513c;
    background: rgba(255,255,255,0.45);
    border: 1px solid rgba(23, 81, 60, 0.18);
}

.contactHeroSecondary:hover {
    background: #ffffff;
    transform: translateY(-2px);
}


/* RIGHT PANEL */

.contactHeroPanel {
    background: #15563f;
    box-shadow: 0 25px 60px rgba(16, 66, 48, 0.12);
}

.contactHeroPanelTop {
    height: 68px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 29px;
    border-bottom: 1px solid rgba(255,255,255,0.11);
}

.contactHeroPanelTop span,
.contactHeroPanelTop small {
    color: rgba(255,255,255,0.55);
    font-size: 6px;
    font-weight: 700;
    letter-spacing: 1.6px;
}

.contactHeroOption {
    position: relative;
    min-height: 145px;
    display: grid;
    grid-template-columns: 38px 1fr auto;
    align-items: center;
    gap: 22px;
    padding: 26px 29px;
    border-bottom: 1px solid rgba(255,255,255,0.09);
}

.contactHeroOption:last-child {
    border-bottom: 0;
}

.contactHeroOptionAccent {
    background: rgba(255,255,255,0.055);
}

.contactHeroNumber {
    align-self: start;
    color: #73b999;
    font-size: 7px;
    font-weight: 700;
}

.contactHeroOption small {
    display: block;
    margin-bottom: 10px;
    color: #71ae91;
    font-size: 6px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.contactHeroOption strong {
    display: block;
    color: #ffffff;
    font-size: 23px;
    font-weight: 500;
    line-height: 1.02;
}

.contactHeroOption i {
    color: #7fc5a4;
    font-size: 15px;
    font-style: normal;
}


/* BOTTOM STRIP */

.contactHeroBottom {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns:
        auto 1fr
        auto 1fr
        auto 1fr
        auto;
    align-items: center;
    gap: 27px;
    min-height: 95px;
    margin-top: 55px;
    border-top: 1px solid rgba(21, 82, 60, 0.11);
}

.contactHeroBottom > span {
    height: 1px;
    background: rgba(23, 89, 65, 0.1);
}

.contactHeroBottom div {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.contactHeroBottom small {
    color: #899a92;
    font-size: 5.5px;
    font-weight: 700;
    letter-spacing: 1.4px;
}

.contactHeroBottom strong {
    color: #1d6c4e;
    font-size: 7px;
    font-weight: 700;
    letter-spacing: 1px;
}


/* =========================================================
   CONTACT HERO — TABLET
========================================================= */

@media (max-width: 950px) {

    .contactHero {
        padding-top: 80px;
    }

    .contactHeroGrid {
        grid-template-columns: 1fr 0.8fr;
        gap: 55px;
        min-height: auto;
    }

    .contactHeroContent h1 {
        font-size: 55px;
    }

    .contactHeroActions {
        flex-direction: column;
        max-width: 280px;
    }

    .contactHeroPrimary,
    .contactHeroSecondary {
        width: 100%;
    }

    .contactHeroOption {
        min-height: 125px;
    }

}


/* =========================================================
   CONTACT HERO — MOBILE
========================================================= */

@media (max-width: 700px) {

    .contactHero {
        padding-top: 65px;
    }

    .contactHeroPattern {
        width: 470px;
        height: 470px;
        right: -270px;
        top: -80px;
    }

    .contactHeroGrid {
        display: block;
    }

    .contactHeroContent h1 {
        font-size: 45px;
        line-height: 1;
        letter-spacing: -1.8px;
    }

    .contactHeroContent > p {
        margin-top: 28px;
        font-size: 10px;
        line-height: 1.8;
    }

    .contactHeroActions {
        max-width: none;
        margin-top: 32px;
    }

    .contactHeroPrimary,
    .contactHeroSecondary {
        width: 100%;
        min-width: 0;
        height: 52px;
    }

    .contactHeroPanel {
        margin-top: 42px;
    }

    .contactHeroPanelTop {
        height: 58px;
        padding: 0 20px;
    }

    .contactHeroOption {
        min-height: 118px;
        padding: 22px 20px;
        grid-template-columns: 28px 1fr auto;
        gap: 14px;
    }

    .contactHeroOption strong {
        font-size: 20px;
    }

    .contactHeroBottom {
        grid-template-columns: 1fr 1fr;
        gap: 0;
        margin-top: 35px;
        padding: 22px 0;
    }

    .contactHeroBottom > span {
        display: none;
    }

    .contactHeroBottom div {
        min-height: 60px;
        justify-content: center;
        padding: 10px 15px;
        border-bottom: 1px solid rgba(21, 82, 60, 0.08);
    }

}


/* =========================================================
   CONTACT PAGE — LOCATIONS
========================================================= */

.locationsSection {
    position: relative;
    padding: 125px 0 100px;
    background: #ffffff;
}


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

.locationsIntro {
    display: grid;
    grid-template-columns: 1fr 0.55fr;
    align-items: end;
    gap: 100px;
    margin-bottom: 80px;
}

.locationsEyebrow {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
}

.locationsEyebrow span {
    width: 36px;
    height: 1px;
    background: #27815f;
}

.locationsEyebrow strong {
    color: #247b5a;
    font-size: 7px;
    font-weight: 700;
    letter-spacing: 2px;
}

.locationsIntroTitle h2 {
    margin: 0;
    color: #174a37;
    font-size: clamp(43px, 4vw, 64px);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -2.5px;
}

.locationsIntroTitle h2 em {
    color: #288762;
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
}

.locationsIntroText {
    max-width: 430px;
    padding-bottom: 5px;
}

.locationsIntroText > span {
    display: block;
    margin-bottom: 17px;
    color: #287d5d;
    font-size: 7px;
    font-weight: 700;
    letter-spacing: 1.7px;
}

.locationsIntroText p {
    margin: 0;
    color: #74867d;
    font-size: 10px;
    line-height: 1.9;
}


/* =========================================================
   COUNTRY
========================================================= */

.locationCountry {
    margin-top: 20px;
}

.locationCountryUae {
    margin-top: 95px;
}

.locationCountryHead {
    min-height: 105px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding: 0 4px;
    border-top: 1px solid #dce6e1;
}

.locationCountryName {
    display: flex;
    align-items: center;
    gap: 27px;
}

.locationCountryNumber {
    color: #2a8562;
    font-size: 9px;
    font-weight: 700;
}

.locationCountryName small {
    display: block;
    margin-bottom: 5px;
    color: #899991;
    font-size: 5.5px;
    font-weight: 700;
    letter-spacing: 1.6px;
}

.locationCountryName h3 {
    margin: 0;
    color: #174b38;
    font-size: 27px;
    font-weight: 500;
    letter-spacing: -0.8px;
}

.locationCountryCount {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.locationCountryCount strong {
    color: #1e7454;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 28px;
    font-weight: 400;
}

.locationCountryCount span {
    color: #87978f;
    font-size: 5.5px;
    font-weight: 700;
    letter-spacing: 1.5px;
}


/* =========================================================
   LOCATION GRID
========================================================= */

.locationGrid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid #dce6e1;
    border-left: 1px solid #dce6e1;
}

.locationCard {
    position: relative;
    min-height: 285px;
    display: flex;
    flex-direction: column;
    padding: 25px 25px 0;
    background: #ffffff;
    border-right: 1px solid #dce6e1;
    border-bottom: 1px solid #dce6e1;
    overflow: hidden;
    transition:
        background 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.locationCard::before {
    content: "";
    position: absolute;
    width: 130px;
    height: 130px;
    right: -65px;
    top: -65px;
    border: 1px solid rgba(37, 127, 92, 0.08);
    border-radius: 50%;
}

.locationCard::after {
    content: "";
    position: absolute;
    width: 70px;
    height: 70px;
    right: -35px;
    top: -35px;
    border: 1px solid rgba(37, 127, 92, 0.07);
    border-radius: 50%;
}

.locationCard:hover {
    z-index: 2;
    background: #f8fbf9;
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(21, 82, 60, 0.07);
}


/* FEATURED CARD */

.locationCardFeatured {
    background: #175b43;
}

.locationCardFeatured::before,
.locationCardFeatured::after {
    border-color: rgba(255,255,255,0.08);
}

.locationCardFeatured:hover {
    background: #145039;
}

.locationCardFeatured .locationCardTop span,
.locationCardFeatured .locationCardTop small,
.locationCardFeatured .locationCardBody small {
    color: rgba(255,255,255,0.55);
}

.locationCardFeatured .locationCardBody h4 {
    color: #ffffff;
}

.locationCardFeatured > a {
    color: rgba(255, 255, 255, 0.85);
    border-top-color: rgba(255, 255, 255, 0.18);
}

.locationCardFeatured > a i {
    color: #9bd4b8;
}

.locationCardFeatured > a i {
    color: #8bc8aa;
}




/* =========================================================
   CARD CONTENT
========================================================= */

.locationCardTop {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.locationCardTop span,
.locationCardTop small {
    color: #8b9a93;
    font-size: 5.5px;
    font-weight: 700;
    letter-spacing: 1.3px;
}

.locationCardTop span {
    color: #2b805f;
}

.locationCardBody {
    position: relative;
    z-index: 2;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 35px 0 30px;
}

.locationCardBody small {
    display: block;
    margin-bottom: 11px;
    color: #8b9a93;
    font-size: 5.5px;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: 1.2px;
}

.locationCardBody h4 {
    margin: 0;
    color: #194f3b;
    font-size: 23px;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.7px;
}
 

/* =========================================================
   MAP BUTTON
========================================================= */

.locationCard > a {
    position: relative;
    z-index: 2;
    min-height: 59px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    color: #256f54;
    border-top: 1px solid rgba(26, 87, 64, 0.12);
    text-decoration: none;
    font-size: 6.5px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.locationCard > a i {
    color: #2b8662;
    font-size: 13px;
    font-style: normal;
    transition: transform 0.2s ease;
}

.locationCard > a:hover i {
    transform: translate(3px, -3px);
}


/* =========================================================
   BOTTOM SIGNATURE
========================================================= */

.locationsSignature {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 28px;
    padding-top: 34px;
}

.locationsSignature > span,
.locationsSignature > strong {
    color: #87978f;
    font-size: 5.5px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.locationsSignature > div {
    height: 1px;
    background: #e0e8e4;
}

.locationsSignature > strong {
    color: #236f52;
}

.locationsSignature i {
    margin: 0 8px;
    color: #a4b1ab;
    font-style: normal;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 950px) {

    .locationsSection {
        padding: 95px 0 80px;
    }

    .locationsIntro {
        grid-template-columns: 1fr 0.65fr;
        gap: 55px;
        margin-bottom: 65px;
    }

    .locationGrid {
        grid-template-columns: repeat(2, 1fr);
    }

    .locationCard {
        min-height: 270px;
    }

    .locationCountryUae {
        margin-top: 75px;
    }

}


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

@media (max-width: 700px) {

    .locationsSection {
        padding: 75px 0 60px;
    }

    .locationsIntro {
        display: block;
        margin-bottom: 55px;
    }

    .locationsIntroTitle h2 {
        font-size: 40px;
        line-height: 1.03;
        letter-spacing: -1.7px;
    }

    .locationsIntroTitle h2 br {
        display: none;
    }

    .locationsIntroText {
        max-width: none;
        margin-top: 30px;
    }

    .locationsIntroText p {
        font-size: 9.5px;
    }


    /* COUNTRY HEADER */

    .locationCountryHead {
        min-height: 90px;
    }

    .locationCountryName {
        gap: 17px;
    }

    .locationCountryName h3 {
        font-size: 23px;
    }

    .locationCountryCount strong {
        font-size: 23px;
    }


    /* CARDS */

    .locationGrid {
        grid-template-columns: 1fr;
    }

    .locationCard {
        min-height: 215px;
        padding: 22px 22px 0;
    }

    .locationCardBody {
        padding: 30px 0 25px;
    }

    .locationCardBody h4 {
        font-size: 22px;
    }

    .locationCard > a {
        min-height: 56px;
    }

    .locationCountryUae {
        margin-top: 65px;
    }


    /* BOTTOM */

    .locationsSignature {
        grid-template-columns: auto 1fr;
        gap: 18px;
        padding-top: 27px;
    }

    .locationsSignature > strong {
        grid-column: 1 / -1;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .locationsIntroTitle h2 {
        font-size: 37px;
    }

    .locationCountryName h3 {
        font-size: 20px;
    }

    .locationCountryCount {
        gap: 6px;
    }

    .locationCountryCount strong {
        font-size: 21px;
    }

    .locationCountryCount span {
        font-size: 5px;
    }

}

/* =========================================================
   CONTACT PAGE — MAIN INQUIRY FORM
========================================================= */

.contactFormSection {
    position: relative;
    padding: 120px 0;
    overflow: hidden;
    background:
        linear-gradient(
            135deg,
            #123f30 0%,
            #175740 55%,
            #196348 100%
        );
}

.contactFormSection::before {
    content: "";
    position: absolute;
    width: 650px;
    height: 650px;
    left: -300px;
    bottom: -390px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 50%;
}

.contactFormSection::after {
    content: "";
    position: absolute;
    width: 400px;
    height: 400px;
    left: -175px;
    bottom: -265px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 50%;
}

.contactFormGrid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 0.78fr 1.22fr;
    gap: 90px;
    align-items: stretch;
}


/* =========================================================
   LEFT INFORMATION
========================================================= */

.contactFormInfo {
    padding: 30px 0;
}

.contactFormEyebrow {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 26px;
}

.contactFormEyebrow span {
    width: 35px;
    height: 1px;
    background: #79ba9b;
}

.contactFormEyebrow strong {
    color: #8bc6aa;
    font-size: 7px;
    font-weight: 700;
    letter-spacing: 2px;
}

.contactFormInfo h2 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(44px, 4vw, 62px);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -2.5px;
}

.contactFormInfo h2 em {
    color: #9bcdb5;
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
}

.contactFormIntro {
    max-width: 480px;
    margin: 31px 0 0;
    color: rgba(255, 255, 255, 0.62);
    font-size: 10px;
    line-height: 1.9;
}


/* CAPABILITIES */

.contactFormCapabilities {
    margin-top: 55px;
    border-top: 1px solid rgba(255, 255, 255, 0.13);
}

.contactFormCapability {
    min-height: 82px;
    display: grid;
    grid-template-columns: 40px 1fr;
    align-items: center;
    gap: 17px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.13);
}

.contactFormCapability > span {
    color: #77b99a;
    font-size: 7px;
    font-weight: 700;
}

.contactFormCapability small {
    display: block;
    margin-bottom: 6px;
    color: rgba(255, 255, 255, 0.42);
    font-size: 5.5px;
    font-weight: 700;
    letter-spacing: 1.4px;
}

.contactFormCapability strong {
    color: #ffffff;
    font-size: 12px;
    font-weight: 500;
}


/* SUPPORT */

.contactFormSupport {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 22px;
    margin-top: 37px;
}

.contactFormSupport > span {
    height: 1px;
    background: rgba(255, 255, 255, 0.12);
}

.contactFormSupport div {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.contactFormSupport small {
    color: rgba(255, 255, 255, 0.4);
    font-size: 5px;
    font-weight: 700;
    letter-spacing: 1.4px;
}

.contactFormSupport strong {
    color: #9ac9b3;
    font-size: 7px;
    font-weight: 700;
    letter-spacing: 0.7px;
}


/* =========================================================
   FORM PANEL
========================================================= */

.contactFormPanel {
    padding: 48px 50px 50px;
    background: #ffffff;
    box-shadow: 0 30px 70px rgba(5, 34, 24, 0.18);
}

.contactFormPanelHead {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 30px;
    padding-bottom: 29px;
    margin-bottom: 4px;
    border-bottom: 1px solid #e1e8e4;
}

.contactFormPanelHead small {
    display: block;
    margin-bottom: 10px;
    color: #27805e;
    font-size: 5.5px;
    font-weight: 700;
    letter-spacing: 1.6px;
}

.contactFormPanelHead h3 {
    margin: 0;
    color: #174b38;
    font-size: 27px;
    font-weight: 500;
    letter-spacing: -0.8px;
}

.contactFormPanelHead > span {
    color: #9aa8a1;
    font-size: 6px;
    font-weight: 700;
    letter-spacing: 1.2px;
}


/* =========================================================
   FIELDS
========================================================= */

.contactFieldRow {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 27px;
}

.contactField {
    padding-top: 28px;
}

.contactField label {
    display: block;
    margin-bottom: 11px;
    color: #60746a;
    font-size: 5.5px;
    font-weight: 700;
    letter-spacing: 1.3px;
}

.contactField input,
.contactField select,
.contactField textarea {
    width: 100%;
    border: 0;
    border-bottom: 1px solid #cedbd5;
    border-radius: 0;
    outline: 0;
    padding: 0 0 13px;
    color: #193f31;
    background: transparent;
    font-family: inherit;
    font-size: 10px;
    transition: border-color 0.2s ease;
}

.contactField input {
    height: 36px;
}

.contactField select {
    height: 49px;
    cursor: pointer;
}

.contactField textarea {
    min-height: 105px;
    padding-top: 4px;
    resize: vertical;
    line-height: 1.7;
}

.contactField input::placeholder,
.contactField textarea::placeholder {
    color: #a3afa9;
}

.contactField input:focus,
.contactField select:focus,
.contactField textarea:focus {
    border-bottom-color: #27815e;
}


/* =========================================================
   SUBMIT AREA
========================================================= */

.contactFormSubmit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 35px;
    margin-top: 38px;
    padding-top: 27px;
    border-top: 1px solid #e1e8e4;
}

.contactFormSubmit p {
    max-width: 310px;
    margin: 0;
    color: #8a9992;
    font-size: 6.5px;
    line-height: 1.7;
}

.contactFormSubmit button {
    min-width: 180px;
    height: 53px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    padding: 0 20px;
    border: 0;
    color: #ffffff;
    background: #176b4b;
    cursor: pointer;
    font-family: inherit;
    font-size: 7px;
    font-weight: 700;
    letter-spacing: 0.7px;
    transition:
        background 0.25s ease,
        transform 0.25s ease;
}

.contactFormSubmit button:hover {
    background: #12583e;
    transform: translateY(-2px);
}

.contactFormSubmit button i {
    font-size: 13px;
    font-style: normal;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 950px) {

    .contactFormSection {
        padding: 90px 0;
    }

    .contactFormGrid {
        grid-template-columns: 0.8fr 1.2fr;
        gap: 45px;
    }

    .contactFormPanel {
        padding: 40px 35px;
    }

    .contactFieldRow {
        gap: 20px;
    }

}


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

@media (max-width: 700px) {

    .contactFormSection {
        padding: 70px 0;
    }

    .contactFormGrid {
        display: block;
    }

    .contactFormInfo {
        padding: 0;
    }

    .contactFormInfo h2 {
        font-size: 40px;
        letter-spacing: -1.8px;
    }

    .contactFormIntro {
        font-size: 9.5px;
    }

    .contactFormCapabilities {
        margin-top: 40px;
    }

    .contactFormPanel {
        margin-top: 50px;
        padding: 34px 25px 30px;
    }

    .contactFormPanelHead h3 {
        font-size: 24px;
    }

    .contactFieldRow {
        display: block;
    }

    .contactField {
        padding-top: 25px;
    }

    .contactField input,
    .contactField select,
    .contactField textarea {
        font-size: 10px;
    }

    .contactFormSubmit {
        align-items: stretch;
        flex-direction: column;
        gap: 20px;
    }

    .contactFormSubmit p {
        max-width: none;
    }

    .contactFormSubmit button {
        width: 100%;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .contactFormInfo h2 {
        font-size: 37px;
    }

    .contactFormPanel {
        padding-left: 20px;
        padding-right: 20px;
    }

}


/* =========================================================
   PRODUCTS HERO
========================================================= */

.productsHero {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(
            120deg,
            #f8fbf9 0%,
            #f1f7f3 58%,
            #e8f1ec 100%
        );
    border-bottom: 1px solid #dce7e0;
}

.productsHeroPattern {
    position: absolute;
    width: 620px;
    height: 620px;
    right: -180px;
    top: -220px;
    border: 1px solid rgba(15, 91, 60, 0.08);
    border-radius: 50%;
    pointer-events: none;
}

.productsHeroPattern::before,
.productsHeroPattern::after {
    content: "";
    position: absolute;
    border: 1px solid rgba(15, 91, 60, 0.07);
    border-radius: 50%;
}

.productsHeroPattern::before {
    width: 470px;
    height: 470px;
    inset: 74px;
}

.productsHeroPattern::after {
    width: 320px;
    height: 320px;
    inset: 149px;
}


.productsHeroGrid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.08fr 0.92fr;
    min-height: 600px;
}


/* LEFT SIDE */

.productsHeroContent {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 80px 80px 80px 0;
}

.productsHeroLabel {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 28px;
}

.productsHeroLabel span {
    width: 36px;
    height: 2px;
    background: #0f5b3c;
}

.productsHeroLabel strong {
    font-size: 12px;
    line-height: 1;
    letter-spacing: 2.2px;
    color: #0f5b3c;
}

.productsHeroContent h1 {
    margin: 0;
    max-width: 760px;
    font-size: clamp(46px, 5vw, 76px);
    line-height: 0.98;
    letter-spacing: -3px;
    color: #101c17;
}

.productsHeroContent h1 em {
    color: #0f5b3c;
    font-weight: 500;
}

.productsHeroContent p {
    max-width: 670px;
    margin: 30px 0 0;
    font-size: 17px;
    line-height: 1.75;
    color: #53635b;
}

.productsHeroActions {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 38px;
}

.productsHeroPrimary,
.productsHeroSecondary {
    min-height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    padding: 0 22px;
    border: 1px solid #0f5b3c;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
    cursor: pointer;
    text-decoration: none;
    transition:
        background 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease;
}

.productsHeroPrimary {
    background: #0f5b3c;
    color: #ffffff;
}

.productsHeroPrimary:hover {
    background: #0a472f;
    border-color: #0a472f;
}

.productsHeroSecondary {
    background: transparent;
    color: #0f5b3c;
}

.productsHeroSecondary:hover {
    background: #0f5b3c;
    color: #ffffff;
}

.productsHeroPrimary i,
.productsHeroSecondary i {
    font-style: normal;
    font-size: 17px;
}


/* RIGHT INDEX */

.productsHeroIndex {
    align-self: center;
    background: #103d2e;
    color: #ffffff;
    box-shadow: 0 28px 70px rgba(18, 53, 40, 0.15);
}

.productsHeroIndexHead {
    min-height: 64px;
    padding: 0 26px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255,255,255,0.13);
}

.productsHeroIndexHead span {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.8px;
    color: #b7d5c6;
}

.productsHeroIndexHead small {
    font-size: 10px;
    letter-spacing: 1.5px;
    color: rgba(255,255,255,0.5);
}

.productsHeroIndexRow {
    min-height: 92px;
    display: grid;
    grid-template-columns: 52px 1fr 24px;
    align-items: center;
    gap: 14px;
    padding: 18px 26px;
    border-bottom: 1px solid rgba(255,255,255,0.11);
}

.productsHeroIndexNumber {
    font-size: 12px;
    letter-spacing: 1px;
    color: #7fb69a;
}

.productsHeroIndexRow strong {
    font-size: 18px;
    line-height: 1.25;
    font-weight: 600;
}

.productsHeroIndexRow i {
    font-size: 15px;
    font-style: normal;
    color: #8cc5a8;
}

.productsHeroIndexFeatured {
    min-height: 112px;
    background: #0b2f23;
}

.productsHeroIndexFeatured small {
    display: block;
    margin-bottom: 6px;
    font-size: 9px;
    letter-spacing: 1.5px;
    color: #8cc5a8;
}


/* BOTTOM INFORMATION STRIP */

.productsHeroBottom {
    position: relative;
    z-index: 2;
    min-height: 86px;
    display: grid;
    grid-template-columns:
        auto 1fr
        auto 1fr
        auto 1fr
        auto;
    align-items: center;
    gap: 26px;
    border-top: 1px solid #d8e5dd;
}

.productsHeroBottom > span {
    height: 1px;
    background: #d4e1d9;
}

.productsHeroBottom div {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.productsHeroBottom small {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1.7px;
    color: #84938b;
}

.productsHeroBottom strong {
    font-size: 10px;
    letter-spacing: 1.2px;
    color: #0f5b3c;
}


/* =========================================================
   PRODUCTS HERO RESPONSIVE
========================================================= */

@media (max-width: 1050px) {

    .productsHeroGrid {
        grid-template-columns: 1fr 0.9fr;
    }

    .productsHeroContent {
        padding-right: 45px;
    }

    .productsHeroContent h1 {
        letter-spacing: -2px;
    }

}


@media (max-width: 850px) {

    .productsHeroGrid {
        grid-template-columns: 1fr;
        padding-top: 65px;
        padding-bottom: 65px;
    }

    .productsHeroContent {
        padding: 0 0 55px;
    }

    .productsHeroContent h1 {
        max-width: 650px;
    }

    .productsHeroIndex {
        width: 100%;
    }

    .productsHeroBottom {
        grid-template-columns: 1fr 1fr;
        gap: 0;
        padding-top: 22px;
        padding-bottom: 22px;
    }

    .productsHeroBottom > span {
        display: none;
    }

    .productsHeroBottom div {
        padding: 16px 0;
    }

}


@media (max-width: 560px) {

    .productsHeroGrid {
        padding-top: 48px;
        padding-bottom: 48px;
    }

    .productsHeroLabel {
        margin-bottom: 22px;
    }

    .productsHeroContent h1 {
        font-size: 42px;
        line-height: 1.02;
        letter-spacing: -1.7px;
    }

    .productsHeroContent p {
        margin-top: 24px;
        font-size: 15px;
        line-height: 1.7;
    }

    .productsHeroActions {
        flex-direction: column;
        align-items: stretch;
        margin-top: 30px;
    }

    .productsHeroPrimary,
    .productsHeroSecondary {
        width: 100%;
    }

    .productsHeroIndexRow {
        grid-template-columns: 42px 1fr 20px;
        padding-left: 20px;
        padding-right: 20px;
    }

    .productsHeroIndexRow strong {
        font-size: 16px;
    }

    .productsHeroBottom {
        grid-template-columns: 1fr;
    }

    .productsHeroBottom div {
        border-bottom: 1px solid #dce7e0;
    }

    .productsHeroBottom div:last-child {
        border-bottom: 0;
    }

}

/* =========================================================
   PRODUCT CATEGORIES / CATALOGUE
========================================================= */

.productCategories {
    padding: 110px 0 120px;
    background: #ffffff;
    border-bottom: 1px solid #e1e8e4;
}


/* =========================================================
   SECTION INTRO
========================================================= */

.productCategoriesIntro {
    margin-bottom: 55px;
}

.productCategoriesEyebrow {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
}

.productCategoriesEyebrow span {
    width: 36px;
    height: 2px;
    flex-shrink: 0;
    background: #0f5b3c;
}

.productCategoriesEyebrow strong {
    font-size: 11px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 2px;
    color: #0f5b3c;
}

.productCategoriesIntroGrid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 80px;
    align-items: end;
}

.productCategoriesIntroGrid h2 {
    margin: 0;
    max-width: 720px;

    font-size: clamp(42px, 4.5vw, 66px);
    line-height: 1;
    letter-spacing: -2.5px;

    color: #101c17;
}

.productCategoriesIntroGrid h2 em {
    color: #0f5b3c;
    font-weight: 500;
}

.productCategoriesIntroText {
    padding-bottom: 4px;
}

.productCategoriesIntroText > span {
    display: block;
    margin-bottom: 15px;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.8px;

    color: #0f5b3c;
}

.productCategoriesIntroText p {
    margin: 0;
    max-width: 520px;

    font-size: 15px;
    line-height: 1.75;

    color: #68766f;
}


/* =========================================================
   MAIN CATALOGUE
========================================================= */

.productCatalogue {
    width: 100%;
    display: grid;

    grid-template-columns:
        minmax(300px, 330px)
        minmax(0, 1fr);

    border: 1px solid #dce5e0;
    background: #ffffff;
}


/* =========================================================
   LEFT CATEGORY NAVIGATION
========================================================= */

.productCategoryNav {
    min-width: 0;

    background: #f4f8f5;

    border-right: 1px solid #dce5e0;
}

.productCategoryNavHead {
    min-height: 72px;
    padding: 0 24px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;

    background: #103d2e;
}

.productCategoryNavHead span {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.7px;

    color: #ffffff;
}

.productCategoryNavHead small {
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 1.5px;

    color: #8fc2a8;
}

.productCategoryButton {
    width: 100%;
    min-height: 66px;

    padding: 12px 20px;

    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 18px;
    align-items: center;
    gap: 10px;

    border: 0;
    border-bottom: 1px solid #dce5e0;

    background: transparent;
    color: #26342e;

    font: inherit;
    text-align: left;

    cursor: pointer;

    transition:
        background 0.2s ease,
        color 0.2s ease;
}

.productCategoryButton > span {
    font-size: 10px;
    letter-spacing: 0.8px;

    color: #8a9991;
}

.productCategoryButton strong {
    min-width: 0;

    font-size: 13px;
    line-height: 1.3;
    font-weight: 600;

    white-space: normal;
    word-break: normal;
    overflow-wrap: normal;
}

.productCategoryButton i {
    justify-self: end;

    font-size: 14px;
    font-style: normal;

    color: #0f5b3c;

    transition: transform 0.2s ease;
}

.productCategoryButton:hover {
    background: #eaf2ed;
}

.productCategoryButton:hover i {
    transform: translateX(3px);
}

.productCategoryButton.active {
    background: #0f5b3c;
    color: #ffffff;
}

.productCategoryButton.active > span {
    color: #8bc2a5;
}

.productCategoryButton.active i {
    color: #a8d7bd;
}


/* =========================================================
   RIGHT CATEGORY DISPLAY
========================================================= */

.productCategoryDisplay {
    width: 100%;
    min-width: 0;

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #fbfdfc 100%
        );
}

.productCategoryPanel {
    display: none;

    width: 100%;
    min-width: 0;
    min-height: 100%;
}

.productCategoryPanel.active {
    display: block;
}


/* =========================================================
   PANEL HEADER
========================================================= */

.productCategoryPanelHead {
    min-height: 126px;

    padding: 30px 36px;

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

    border-bottom: 1px solid #dce5e0;
}

.productCategoryPanelHead > div {
    min-width: 0;
}

.productCategoryPanelHead small {
    display: block;

    margin-bottom: 9px;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.7px;

    color: #0f5b3c;
}

.productCategoryPanelHead h3 {
    margin: 0;

    font-size: clamp(27px, 3vw, 40px);
    line-height: 1.05;
    letter-spacing: -1.3px;

    color: #101c17;
}

.productCategoryPanelHead > span {
    flex-shrink: 0;

    padding: 8px 11px;

    border: 1px solid #cbdad1;

    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1.4px;

    color: #6c7d74;
}


/* =========================================================
   PRODUCT ITEMS GRID
========================================================= */

.productItemsGrid {
    width: 100%;
    min-width: 0;

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


/* =========================================================
   INDIVIDUAL PRODUCT ITEM
========================================================= */

.productItem {
    position: relative;

    width: 100%;
    min-width: 0;
    min-height: 92px;

    padding: 20px 22px;

    display: grid;

    /*
       IMPORTANT:
       minmax(0, 1fr) prevents the product name
       from collapsing into a very narrow column.
    */

    grid-template-columns:
        34px
        minmax(0, 1fr)
        28px;

    align-items: center;
    gap: 12px;

    border: 0;
    border-right: 1px solid #e0e7e3;
    border-bottom: 1px solid #e0e7e3;

    background: #ffffff;
    color: #1a2922;

    font: inherit;
    text-align: left;

    cursor: pointer;

    overflow: hidden;

    transition:
        background 0.2s ease,
        color 0.2s ease;
}


/* Remove right border from second column */

.productItem:nth-child(even) {
    border-right: 0;
}


/* Product number */

.productItem > span {
    min-width: 0;

    font-size: 9px;
    line-height: 1;
    letter-spacing: 1px;

    color: #8a9991;
}


/* Product name */

.productItem strong {
    display: block;

    width: 100%;
    min-width: 0;
    max-width: none;

    font-size: 15px;
    line-height: 1.35;
    font-weight: 600;

    white-space: normal;
    word-break: normal;
    overflow-wrap: normal;

    color: inherit;
}


/* Plus button */

.productItem i {
    width: 28px;
    height: 28px;

    flex-shrink: 0;

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

    justify-self: end;

    border: 1px solid #c9d8d0;

    font-size: 16px;
    line-height: 1;
    font-style: normal;
    font-weight: 400;

    color: #0f5b3c;

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

.productItem:hover {
    background: #f1f7f3;
}

.productItem:hover i {
    background: #0f5b3c;
    border-color: #0f5b3c;

    color: #ffffff;

    transform: rotate(90deg);
}


/* Existing JS temporarily adds this */

.productItem.added {
    background: #edf6f0;
    color: #0f5b3c;
}


/* =========================================================
   PRODUCT PANEL FOOTER
========================================================= */

.productPanelFoot {
    min-height: 86px;

    padding: 18px 28px 18px 36px;

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

    background: #f6f9f7;
}

.productPanelFoot p {
    margin: 0;
    max-width: 420px;

    font-size: 12px;
    line-height: 1.6;

    color: #6e7d75;
}

.productViewInquiry {
    min-height: 42px;

    padding: 0 16px;

    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;

    border: 1px solid #0f5b3c;

    background: transparent;
    color: #0f5b3c;

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

    cursor: pointer;

    transition:
        background 0.2s ease,
        color 0.2s ease;
}

.productViewInquiry i {
    font-style: normal;
}

.productViewInquiry:hover {
    background: #0f5b3c;
    color: #ffffff;
}


/* =========================================================
   MANUFACTURING PANEL
========================================================= */

.productManufacturingPanel {
    background:
        linear-gradient(
            135deg,
            #f7faf8 0%,
            #edf5f0 100%
        );
}

.productManufacturingMessage {
    position: relative;

    min-height: 460px;

    padding: 60px 55px;

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

    overflow: hidden;
}

.productManufacturingMessage::after {
    content: "11";

    position: absolute;

    right: 25px;
    bottom: -65px;

    font-size: 260px;
    line-height: 1;
    font-weight: 700;

    color: rgba(15, 91, 60, 0.045);

    pointer-events: none;
}

.productManufacturingMessage > span {
    position: relative;
    z-index: 1;

    margin-bottom: 18px;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.8px;

    color: #0f5b3c;
}

.productManufacturingMessage h4 {
    position: relative;
    z-index: 1;

    margin: 0;

    max-width: 650px;

    font-size: clamp(32px, 4vw, 50px);
    line-height: 1.05;
    letter-spacing: -1.7px;

    color: #14231c;
}

.productManufacturingMessage p {
    position: relative;
    z-index: 1;

    max-width: 530px;

    margin: 24px 0 0;

    font-size: 14px;
    line-height: 1.75;

    color: #64736b;
}

.productManufacturingMessage a {
    position: relative;
    z-index: 1;

    width: fit-content;
    min-height: 48px;

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

    display: inline-flex;
    align-items: center;
    gap: 30px;

    border: 1px solid #0f5b3c;

    color: #0f5b3c;
    text-decoration: none;

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

    transition:
        background 0.2s ease,
        color 0.2s ease;
}

.productManufacturingMessage a i {
    font-style: normal;
}

.productManufacturingMessage a:hover {
    background: #0f5b3c;
    color: #ffffff;
}


/* =========================================================
   PRODUCT CATALOGUE RESPONSIVE — TABLET
========================================================= */

@media (max-width: 1050px) {

    .productCatalogue {
        grid-template-columns:
            minmax(250px, 280px)
            minmax(0, 1fr);
    }

    .productCategoriesIntroGrid {
        gap: 50px;
    }

    .productItem {
        padding-left: 18px;
        padding-right: 18px;

        grid-template-columns:
            30px
            minmax(0, 1fr)
            28px;
    }

}


/* =========================================================
   PRODUCT CATALOGUE RESPONSIVE — SMALL TABLET
========================================================= */

@media (max-width: 850px) {

    .productCategories {
        padding: 80px 0 90px;
    }

    .productCategoriesIntroGrid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .productCategoriesIntroText p {
        max-width: 650px;
    }


    /* Category nav moves above products */

    .productCatalogue {
        grid-template-columns: 1fr;
    }

    .productCategoryNav {
        border-right: 0;
        border-bottom: 1px solid #dce5e0;

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

    .productCategoryNavHead {
        grid-column: 1 / -1;
    }

    .productCategoryButton {
        border-right: 1px solid #dce5e0;
    }

    .productCategoryButton:nth-of-type(even) {
        border-right: 0;
    }

}


/* =========================================================
   PRODUCT CATALOGUE RESPONSIVE — MOBILE
========================================================= */

@media (max-width: 600px) {

    .productCategories {
        padding: 65px 0 75px;
    }

    .productCategoriesIntro {
        margin-bottom: 38px;
    }

    .productCategoriesIntroGrid h2 {
        font-size: 40px;
        line-height: 1.02;
        letter-spacing: -1.6px;
    }


    /* Categories become one column */

    .productCategoryNav {
        display: block;
    }

    .productCategoryButton {
        border-right: 0;
    }


    /* Panel heading */

    .productCategoryPanelHead {
        min-height: 112px;

        padding: 24px 20px;

        align-items: flex-start;
    }

    .productCategoryPanelHead h3 {
        font-size: 28px;
    }

    .productCategoryPanelHead > span {
        margin-top: 2px;
    }


    /* Products become one column */

    .productItemsGrid {
        grid-template-columns: 1fr;
    }

    .productItem,
    .productItem:nth-child(even) {
        border-right: 0;
    }

    .productItem {
        min-height: 78px;

        padding: 16px 18px;

        grid-template-columns:
            30px
            minmax(0, 1fr)
            28px;
    }

    .productItem strong {
        font-size: 14px;
    }


    /* Inquiry footer */

    .productPanelFoot {
        padding: 20px;

        align-items: stretch;
        flex-direction: column;
    }

    .productViewInquiry {
        width: 100%;
        justify-content: space-between;
    }


    /* Manufacturing */

    .productManufacturingMessage {
        min-height: 390px;

        padding: 45px 24px;
    }

    .productManufacturingMessage::after {
        font-size: 190px;
    }

}


/* =========================================================
   PRODUCT CATALOGUE RESPONSIVE — SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

    .productCategoriesIntroGrid h2 {
        font-size: 35px;
    }

    .productCategoryPanelHead {
        flex-direction: column;
        gap: 15px;
    }

    .productCategoryPanelHead > span {
        align-self: flex-start;
    }

    .productItem {
        grid-template-columns:
            26px
            minmax(0, 1fr)
            28px;

        gap: 10px;
    }

}

/* =========================================================
   PRODUCTS PAGE — BRANDS WE SUPPLY
========================================================= */

.productBrands {
    position: relative;
    padding: 110px 0 100px;
    background: #f6f8f7;
    border-top: 1px solid #e1e8e4;
}


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

.productBrandsIntro {
    margin-bottom: 55px;
}

.productBrandsEyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;
}

.productBrandsEyebrow span {
    width: 34px;
    height: 2px;
    background: #0d6747;
}

.productBrandsEyebrow strong {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: #0d6747;
}

.productBrandsIntroGrid {
    display: grid;
    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(320px, 0.85fr);
    gap: 80px;
    align-items: end;
}

.productBrandsIntroGrid h2 {
    margin: 0;
    font-size: clamp(38px, 4.2vw, 62px);
    line-height: 1.02;
    letter-spacing: -0.045em;
    color: #12251d;
}

.productBrandsIntroGrid h2 em {
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
    color: #0d6747;
}

.productBrandsIntroText {
    padding-left: 26px;
    border-left: 1px solid #ccd9d2;
}

.productBrandsIntroText > span {
    display: block;
    margin-bottom: 13px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.17em;
    color: #0d6747;
}

.productBrandsIntroText p {
    max-width: 480px;
    margin: 0;
    font-size: 15px;
    line-height: 1.75;
    color: #66766f;
}


/* =========================================================
   BRAND GRID
========================================================= */

.productBrandsGrid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    background: #dfe7e3;
    gap: 1px;
    border: 1px solid #dfe7e3;
}

.productBrandItem {
    position: relative;
    min-width: 0;
    height: 150px;
    padding: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    overflow: hidden;
    transition:
        background 0.25s ease,
        transform 0.25s ease;
}

.productBrandItem::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: #0d6747;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.25s ease;
}

.productBrandItem img {
    display: block;
    width: auto;
    height: auto;
    max-width: 82%;
    max-height: 68px;
    object-fit: contain;
    filter: saturate(0.88);
    transition:
        transform 0.25s ease,
        filter 0.25s ease;
}


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

.productBrandItem:hover {
    background: #fbfcfb;
}

.productBrandItem:hover::after {
    transform: scaleX(1);
}

.productBrandItem:hover img {
    transform: scale(1.045);
    filter: saturate(1);
}


/* =========================================================
   BOTTOM INFORMATION
========================================================= */

.productBrandsBottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    padding: 25px 0 0;
}

.productBrandsBottom > span {
    flex: 0 0 auto;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.16em;
    color: #0d6747;
}

.productBrandsBottom p {
    max-width: 560px;
    margin: 0;
    font-size: 12px;
    line-height: 1.6;
    text-align: right;
    color: #78877f;
}


/* =========================================================
   RESPONSIVE — LAPTOP / TABLET
========================================================= */

@media (max-width: 1100px) {

    .productBrands {
        padding: 90px 0;
    }

    .productBrandsIntroGrid {
        gap: 50px;
    }

    .productBrandsGrid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .productBrandItem {
        height: 145px;
    }

}


/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media (max-width: 850px) {

    .productBrands {
        padding: 80px 0;
    }

    .productBrandsIntro {
        margin-bottom: 42px;
    }

    .productBrandsIntroGrid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .productBrandsIntroText {
        max-width: 620px;
    }

    .productBrandsGrid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .productBrandItem {
        height: 135px;
        padding: 24px;
    }

    .productBrandItem img {
        max-width: 84%;
        max-height: 62px;
    }

}


/* =========================================================
   RESPONSIVE — MOBILE
========================================================= */

@media (max-width: 600px) {

    .productBrands {
        padding: 65px 0 60px;
    }

    .productBrandsIntro {
        margin-bottom: 34px;
    }

    .productBrandsEyebrow {
        margin-bottom: 18px;
    }

    .productBrandsEyebrow strong {
        font-size: 10px;
    }

    .productBrandsIntroGrid h2 {
        font-size: 38px;
        line-height: 1.04;
    }

    .productBrandsIntroText {
        padding-left: 18px;
    }

    .productBrandsIntroText p {
        font-size: 14px;
        line-height: 1.7;
    }

    .productBrandsGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .productBrandItem {
        height: 120px;
        padding: 20px;
    }

    .productBrandItem img {
        max-width: 86%;
        max-height: 55px;
    }

    .productBrandsBottom {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
        padding-top: 20px;
    }

    .productBrandsBottom p {
        max-width: 100%;
        text-align: left;
    }

}


/* =========================================================
   RESPONSIVE — SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

    .productBrandsIntroGrid h2 {
        font-size: 34px;
    }

    .productBrandItem {
        height: 108px;
        padding: 17px;
    }

    .productBrandItem img {
        max-width: 88%;
        max-height: 48px;
    }

}

/* =========================================================
   PRODUCTS PAGE — SPECIFIC PRODUCT CTA
========================================================= */

.productSpecificCta {
    position: relative;
    padding: 0 0 110px;
    background: #f6f8f7;
}

.productSpecificCtaBox {
    position: relative;
    display: grid;
    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(340px, 0.85fr);
    min-height: 390px;
    overflow: hidden;
    background: #0b4d38;
}


/* =========================================================
   LEFT CONTENT
========================================================= */

.productSpecificCtaContent {
    position: relative;
    z-index: 2;
    padding: 65px 70px;
}

.productSpecificCtaContent::after {
    content: "";
    position: absolute;
    width: 360px;
    height: 360px;
    left: -180px;
    bottom: -230px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    pointer-events: none;
}

.productSpecificCtaLabel {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 28px;
}

.productSpecificCtaLabel span {
    width: 32px;
    height: 2px;
    background: #d7b46a;
}

.productSpecificCtaLabel strong {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.17em;
    color: #d7b46a;
}

.productSpecificCtaContent h2 {
    margin: 0;
    max-width: 650px;
    font-size: clamp(42px, 4.4vw, 64px);
    line-height: 1.02;
    letter-spacing: -0.045em;
    color: #ffffff;
}

.productSpecificCtaContent h2 em {
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
    color: #d9e8e1;
}

.productSpecificCtaContent p {
    max-width: 560px;
    margin: 27px 0 0;
    font-size: 15px;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.67);
}


/* =========================================================
   RIGHT ACTION
========================================================= */

.productSpecificCtaAction {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 50px;
    background: #093f2f;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.productSpecificCtaAction::before {
    content: "";
    position: absolute;
    width: 330px;
    height: 330px;
    top: -190px;
    right: -170px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 50%;
}

.productSpecificCtaNumber {
    position: relative;
    z-index: 2;
    align-self: flex-end;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: rgba(255, 255, 255, 0.38);
}

.productSpecificCtaActionContent {
    position: relative;
    z-index: 2;
}

.productSpecificCtaActionContent small {
    display: block;
    margin-bottom: 18px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: rgba(255, 255, 255, 0.52);
}


/* =========================================================
   CTA BUTTON
========================================================= */

.productSpecificCtaButton {
    width: 100%;
    min-height: 72px;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;

    border: 0;
    background: #ffffff;
    color: #123428;

    font: inherit;
    cursor: pointer;

    transition:
        background 0.25s ease,
        color 0.25s ease;
}

.productSpecificCtaButton span {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.productSpecificCtaButton i {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    background: #0d6747;
    color: #ffffff;

    font-size: 17px;
    font-style: normal;

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

.productSpecificCtaButton:hover {
    background: #f2f6f4;
}

.productSpecificCtaButton:hover i {
    transform: translateX(4px);
    background: #084d37;
}


/* =========================================================
   BOTTOM STRIP
========================================================= */

.productSpecificCtaBottom {
    min-height: 62px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;

    padding: 0 25px;

    background: #ffffff;

    border-right: 1px solid #dfe7e3;
    border-bottom: 1px solid #dfe7e3;
    border-left: 1px solid #dfe7e3;
}

.productSpecificCtaBottom span {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: #66766f;
}

.productSpecificCtaBottom i {
    width: 3px;
    height: 3px;
    flex: 0 0 auto;

    border-radius: 50%;
    background: #0d6747;
}


/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media (max-width: 900px) {

    .productSpecificCta {
        padding-bottom: 90px;
    }

    .productSpecificCtaBox {
        grid-template-columns: 1fr;
    }

    .productSpecificCtaContent {
        padding: 55px;
    }

    .productSpecificCtaAction {
        min-height: 220px;
        padding: 38px 55px;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        border-left: 0;
    }

    .productSpecificCtaNumber {
        position: absolute;
        top: 38px;
        right: 55px;
    }

    .productSpecificCtaActionContent {
        margin-top: auto;
    }

}


/* =========================================================
   RESPONSIVE — MOBILE
========================================================= */

@media (max-width: 600px) {

    .productSpecificCta {
        padding-bottom: 65px;
    }

    .productSpecificCtaContent {
        padding: 45px 26px;
    }

    .productSpecificCtaLabel {
        margin-bottom: 23px;
    }

    .productSpecificCtaLabel strong {
        font-size: 9px;
        line-height: 1.5;
    }

    .productSpecificCtaContent h2 {
        font-size: 39px;
    }

    .productSpecificCtaContent p {
        margin-top: 23px;
        font-size: 14px;
    }

    .productSpecificCtaAction {
        min-height: 200px;
        padding: 32px 26px;
    }

    .productSpecificCtaNumber {
        top: 32px;
        right: 26px;
    }

    .productSpecificCtaButton {
        min-height: 66px;
        padding: 0 18px;
    }

    .productSpecificCtaBottom {
        min-height: auto;
        padding: 20px;
        flex-wrap: wrap;
        gap: 12px 16px;
    }

}


/* =========================================================
   RESPONSIVE — SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

    .productSpecificCtaContent h2 {
        font-size: 35px;
    }

}


/* =========================================================
   PRODUCTS PAGE — FINAL MOBILE RESPONSIVE OVERRIDES
   Add at the VERY BOTTOM of style.css
========================================================= */

@media (max-width: 600px) {

    /* ---------------------------------------------------------
       GLOBAL MOBILE WIDTH
    --------------------------------------------------------- */

    .wrap {
        width: calc(100% - 32px);
    }


    /* ---------------------------------------------------------
       HEADER
    --------------------------------------------------------- */

    .topInfo .topDivider,
    .topInfo span:last-child {
        display: none;
    }

    .brand img {
        height: 46px;
        max-width: 170px;
    }

    .nav {
        min-height: 66px;
    }

    .nav nav {
        top: 66px;
    }


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

    .productsHeroGrid {
        display: block;
        min-height: 0;

        padding-top: 44px;
        padding-bottom: 38px;
    }

    .productsHeroContent {
        width: 100%;
        padding: 0 0 38px;
    }

    .productsHeroLabel {
        gap: 10px;
        margin-bottom: 20px;
    }

    .productsHeroLabel span {
        width: 25px;
    }

    .productsHeroLabel strong {
        font-size: 9px;
        letter-spacing: 1.5px;
    }

    .productsHeroContent h1 {
        max-width: 100%;

        font-size: 39px;
        line-height: 1.02;
        letter-spacing: -1.6px;
    }

    .productsHeroContent p {
        max-width: 100%;

        margin-top: 21px;

        font-size: 14px;
        line-height: 1.7;
    }


    /* HERO BUTTONS */

    .productsHeroActions {
        width: 100%;

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

        gap: 10px;

        margin-top: 27px;
    }

    .productsHeroPrimary,
    .productsHeroSecondary {
        width: 100%;
        min-height: 50px;

        justify-content: space-between;

        padding-left: 18px;
        padding-right: 18px;
    }


    /* PRODUCT RANGE PANEL */

    .productsHeroIndex {
        width: 100%;
        max-width: none;
    }

    .productsHeroIndexHead {
        padding-left: 18px;
        padding-right: 18px;
    }

    .productsHeroIndexRow {
        min-height: 70px;

        grid-template-columns:
            32px
            minmax(0, 1fr)
            18px;

        gap: 8px;

        padding-left: 18px;
        padding-right: 18px;
    }

    .productsHeroIndexRow strong {
        min-width: 0;

        font-size: 14px;
        line-height: 1.3;
    }


    /* HERO BOTTOM INFO */

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

        padding: 0;
    }

    .productsHeroBottom div {
        min-height: 72px;

        justify-content: center;

        padding: 13px 12px;

        border-bottom: 1px solid #dce7e0;
    }

    .productsHeroBottom div:nth-child(odd) {
        border-right: 1px solid #dce7e0;
    }

    .productsHeroBottom small {
        font-size: 7px;
        letter-spacing: 1.1px;
    }

    .productsHeroBottom strong {
        font-size: 9px;
        line-height: 1.4;
    }


    /* ---------------------------------------------------------
       PRODUCT CATEGORIES INTRO
    --------------------------------------------------------- */

    .productCategories {
        padding-top: 62px;
        padding-bottom: 70px;
    }

    .productCategoriesIntro {
        margin-bottom: 34px;
    }

    .productCategoriesEyebrow {
        gap: 10px;
        margin-bottom: 18px;
    }

    .productCategoriesEyebrow span {
        width: 26px;
    }

    .productCategoriesEyebrow strong {
        font-size: 9px;
        letter-spacing: 1.5px;
    }

    .productCategoriesIntroGrid {
        display: block;
    }

    .productCategoriesIntroGrid h2 {
        max-width: 100%;

        font-size: 36px;
        line-height: 1.03;
        letter-spacing: -1.4px;
    }

    .productCategoriesIntroText {
        margin-top: 22px;
    }


    /* ---------------------------------------------------------
       CATALOGUE
    --------------------------------------------------------- */

    .productCatalogue {
        display: block;
        width: 100%;
    }


    /* ---------------------------------------------------------
       MOBILE CATEGORY SELECTOR

       Instead of 11 tall rows, categories become horizontally
       scrollable buttons.
    --------------------------------------------------------- */

    .productCategoryNav {
        width: 100%;

        display: flex;
        align-items: stretch;

        overflow-x: auto;
        overflow-y: hidden;

        border-right: 0;
        border-bottom: 1px solid #dce5e0;

        scrollbar-width: none;

        -webkit-overflow-scrolling: touch;
    }

    .productCategoryNav::-webkit-scrollbar {
        display: none;
    }

    .productCategoryNavHead {
        display: none;
    }

    .productCategoryButton {
        flex: 0 0 auto;

        width: auto;
        min-width: 145px;
        min-height: 62px;

        padding: 13px 16px;

        border-right: 1px solid #dce5e0;
        border-bottom: 0;

        white-space: normal;
    }

    .productCategoryButton:nth-of-type(even) {
        border-right: 1px solid #dce5e0;
    }

    .productCategoryButton:last-child {
        border-right: 0;
    }

    .productCategoryButton span {
        flex-shrink: 0;
    }


    /* ACTIVE CATEGORY */

    .productCategoryButton.active {
        position: relative;
    }

    .productCategoryButton.active::after {
        content: "";

        position: absolute;

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

        height: 3px;

        background: #ffffff;
    }


    /* ---------------------------------------------------------
       PRODUCT PANEL
    --------------------------------------------------------- */

    .productCategoryDisplay {
        width: 100%;
        min-width: 0;
    }

    .productCategoryPanel {
        width: 100%;
        min-width: 0;
    }

    .productCategoryPanelHead {
        min-height: 0;

        padding: 23px 18px;

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

        gap: 16px;
    }

    .productCategoryPanelHead h3 {
        min-width: 0;

        font-size: 25px;
        line-height: 1.08;
    }

    .productCategoryPanelHead > span {
        flex-shrink: 0;
    }


    /* ---------------------------------------------------------
       PRODUCTS — ONE PER ROW
    --------------------------------------------------------- */

    .productItemsGrid {
        grid-template-columns: 1fr;
    }

    .productItem,
    .productItem:nth-child(even) {
        width: 100%;
        min-width: 0;
        min-height: 74px;

        grid-template-columns:
            28px
            minmax(0, 1fr)
            32px;

        gap: 10px;

        padding: 15px 16px;

        border-right: 0;
    }

    .productItem strong {
        min-width: 0;

        font-size: 14px;
        line-height: 1.35;

        white-space: normal;
    }

    .productItem i {
        justify-self: end;
    }


    /* INQUIRY FOOTER */

    .productPanelFoot {
        padding: 18px;

        flex-direction: column;
        align-items: stretch;

        gap: 15px;
    }

    .productViewInquiry {
        width: 100%;
        min-height: 48px;

        justify-content: space-between;
    }


    /* ---------------------------------------------------------
       BRANDS
    --------------------------------------------------------- */

    .productBrands {
        padding-top: 62px;
        padding-bottom: 58px;
    }

    .productBrandsIntro {
        margin-bottom: 32px;
    }

    .productBrandsIntroGrid {
        display: block;
    }

    .productBrandsIntroGrid h2 {
        font-size: 35px;
        line-height: 1.04;
        letter-spacing: -1.3px;
    }

    .productBrandsIntroText {
        margin-top: 24px;

        padding-left: 15px;
    }

    .productBrandsGrid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .productBrandItem {
        height: 105px;
        padding: 16px;
    }

    .productBrandItem img {
        max-width: 88%;
        max-height: 48px;
    }

    .productBrandsBottom {
        flex-direction: column;
        align-items: flex-start;

        gap: 9px;
    }

    .productBrandsBottom p {
        text-align: left;
    }


    /* ---------------------------------------------------------
       SPECIFIC PRODUCT CTA
    --------------------------------------------------------- */

    .productSpecificCta {
        padding-bottom: 60px;
    }

    .productSpecificCtaBox {
        display: block;
        min-height: 0;
    }

    .productSpecificCtaContent {
        padding: 40px 22px;
    }

    .productSpecificCtaLabel {
        margin-bottom: 21px;
    }

    .productSpecificCtaLabel strong {
        font-size: 8px;
        line-height: 1.5;
        letter-spacing: 0.13em;
    }

    .productSpecificCtaContent h2 {
        font-size: 35px;
        line-height: 1.04;
    }

    .productSpecificCtaContent p {
        margin-top: 21px;

        font-size: 14px;
        line-height: 1.7;
    }

    .productSpecificCtaAction {
        min-height: 170px;

        padding: 28px 22px;

        border-left: 0;
        border-top:
            1px solid
            rgba(255, 255, 255, 0.10);
    }

    .productSpecificCtaNumber {
        top: 28px;
        right: 22px;
    }

    .productSpecificCtaButton {
        min-height: 62px;

        padding-left: 17px;
        padding-right: 13px;
    }

    .productSpecificCtaBottom {
        padding: 18px 15px;

        justify-content: flex-start;

        gap: 10px 13px;
    }


    /* ---------------------------------------------------------
       INQUIRY MODAL MOBILE SAFETY
    --------------------------------------------------------- */

    .panel {
        padding: 14px;
    }

    .panel .modal {
        width: 100%;
        max-width: 100%;
        max-height: calc(100vh - 28px);

        overflow-y: auto;
    }

}


/* =========================================================
   VERY SMALL PHONES
========================================================= */

@media (max-width: 390px) {

    .wrap {
        width: calc(100% - 26px);
    }

    .productsHeroContent h1 {
        font-size: 36px;
    }

    .productCategoriesIntroGrid h2,
    .productBrandsIntroGrid h2,
    .productSpecificCtaContent h2 {
        font-size: 33px;
    }

    .productCategoryButton {
        min-width: 138px;
    }

    .productBrandItem {
        height: 100px;
    }

}

/* =========================================================
   PRODUCTS MOBILE — FINAL BRAND LOGO SIZE
========================================================= */

@media (max-width: 600px) {

    .productBrandItem {
        height: 115px;
        padding: 12px 14px;
    }

    .productBrandItem img {
        max-width: 92%;
        max-height: 70px;
        width: auto;
        height: auto;
        object-fit: contain;
    }

}

/* ==========================================
   PUBLIC PRODUCTS — PREMIUM IMAGE CARDS
========================================== */

.productCardGrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.productCard {
    background: #ffffff;
    border: 1px solid #e5ebe7;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: 0.3s ease;
}

.productCard:hover {
    transform: translateY(-4px);
    border-color: #b5cfc0;
    box-shadow: 0 12px 30px rgba(0, 60, 35, 0.08);
}

.productCardImage {
    aspect-ratio: 4 / 3;
    background: #f5f8f6;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.productCardImage img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 16px;
}

.productCardPlaceholder {
    color: #7c9084;
    font-size: 13px;
    text-align: center;
}

.productCardBody {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.productCardBrand {
    color: #60816d;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.productCardTitle {
    font-size: 17px;
    font-weight: 700;
    color: #153e2b;
    margin: 0 0 10px;
}

.productCardDescription {
    color: #68766e;
    font-size: 13px;
    line-height: 1.7;
    margin-bottom: 20px;
}

.productCardActions {
    display: flex;
    gap: 10px;
    margin-top: auto;
}

.productCardActions a,
.productCardActions button {
    flex: 1;
    padding: 11px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
}

.productCardDetails {
    color: #195337;
    background: #eef5f0;
    text-decoration: none;
}

.productCardInquiry {
    background: #195337;
    color: #ffffff;
    border: 0;
}

@media (max-width: 1100px) {
    .productCardGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .productCardGrid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================
   PRODUCT DETAILS — IMAGE GALLERY
========================================== */

.productGallery {
    width: 100%;
    max-width: 650px;
    margin-bottom: 35px;
}

.productGalleryMain {
    width: 100%;
    aspect-ratio: 4 / 3;
    background: #f5f8f6;
    border: 1px solid #e5ebe7;
    border-radius: 18px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.productGalleryMain img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 24px;
    display: block;
}

.productGalleryThumbnails {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 15px;
}

.productGalleryThumb {
    width: 90px;
    height: 75px;
    padding: 6px;
    background: #ffffff;
    border: 1px solid #e5ebe7;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    transition: 0.2s ease;
}

.productGalleryThumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.productGalleryThumb:hover,
.productGalleryThumb.active {
    border-color: #195337;
    box-shadow: 0 0 0 1px #195337;
}

@media (max-width: 600px) {
    .productGalleryMain {
        aspect-ratio: 1 / 1;
    }

    .productGalleryMain img {
        padding: 15px;
    }

    .productGalleryThumb {
        width: 70px;
        height: 65px;
    }
}

/* ==========================================
   PRODUCT DETAILS — TWO COLUMN LAYOUT
========================================== */

.productDetailsPage {
    max-width: 1250px;
    margin: 70px auto;
    padding: 30px 24px;
}

.productDetailsLayout {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 55px;
    align-items: start;
}

.productDetailsMedia,
.productDetailsInfo {
    min-width: 0;
}

.productDetailsMedia .productGallery {
    max-width: 100%;
    margin-bottom: 0;
}

.productDetailsEyebrow {
    display: inline-block;
    color: #1b6847;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
    margin-bottom: 18px;
}

.productDetailsBrand {
    color: #668474;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 12px;
}

.productDetailsTitle {
    color: #153e2b;
    font-size: clamp(28px, 3vw, 42px);
    line-height: 1.2;
    font-weight: 800;
    margin: 0 0 22px;
}

.productDetailsDescription {
    color: #65746b;
    font-size: 15px;
    line-height: 1.9;
    margin-bottom: 28px;
}

.productDetailsActions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}

.productDetailsBack {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 20px;
    border: 1px solid #d8e4dc;
    border-radius: 9px;
    color: #195337;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    transition: 0.2s ease;
}

.productDetailsBack:hover {
    background: #eef5f0;
    border-color: #195337;
}

.productDetailsNoImage {
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f8f6;
    border: 1px solid #e5ebe7;
    border-radius: 18px;
    color: #7c9084;
    font-size: 14px;
}

@media (max-width: 850px) {
    .productDetailsLayout {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .productDetailsPage {
        margin: 30px auto;
        padding: 20px 16px;
    }
}

/* PRODUCT DETAILS — FULL DESCRIPTION */

.productDetailsFullDescription {
    margin-top: 30px;
    padding-top: 25px;
    border-top: 1px solid #e5ebe7;
}

.productDetailsFullDescription h2 {
    color: #153e2b;
    font-size: 19px;
    font-weight: 700;
    margin-bottom: 14px;
}

.productDetailsFullDescription p {
    color: #65746b;
    font-size: 14px;
    line-height: 1.9;
    margin: 0;
}

/* ==========================================
   PRODUCT DETAILS — SPECIFICATIONS
========================================== */

.productDetailsSpecifications {
    margin-top: 28px;
    padding-top: 25px;
    border-top: 1px solid #e5ebe7;
}

.productDetailsSpecifications h2 {
    color: #153e2b;
    font-size: 19px;
    font-weight: 700;
    margin: 0 0 16px;
}

.productDetailsSpecificationsContent {
    background: #f5f8f6;
    border: 1px solid #e5ebe7;
    border-radius: 12px;
    padding: 20px;
    color: #53675b;
    font-size: 14px;
    line-height: 2;
    overflow-wrap: anywhere;
}

/* ==========================================
   PRODUCT DETAILS — AVAILABLE VARIANTS
========================================== */

.productDetailsVariants {
    margin-top: 28px;
    padding-top: 25px;
    border-top: 1px solid #e5ebe7;
}

.productDetailsVariants h2 {
    color: #153e2b;
    font-size: 19px;
    font-weight: 700;
    margin: 0 0 16px;
}

.productDetailsVariantsContent {
    background: #f5f8f6;
    border: 1px solid #e5ebe7;
    border-radius: 12px;
    padding: 20px;
    color: #53675b;
    font-size: 14px;
    line-height: 2;
    overflow-wrap: anywhere;
}

/* ==========================================
   PRODUCT DETAILS — TECHNICAL DOWNLOADS
========================================== */

.productDetailsDownloads {
    margin-top: 28px;
    padding-top: 25px;
    border-top: 1px solid #e5ebe7;
}

.productDetailsDownloads h2 {
    color: #153e2b;
    font-size: 19px;
    font-weight: 700;
    margin: 0 0 18px;
}

.productDownloadItem {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    padding: 16px;
    border: 1px solid #e5ebe7;
    border-radius: 12px;
    background: #f8faf9;
    margin-bottom: 12px;
}

.productDownloadInfo {
    display: flex;
    align-items: center;
    gap: 12px;
}

.productDownloadIcon {
    background: #e8f3ec;
    color: #195337;
    border-radius: 8px;
    padding: 12px 10px;
    font-size: 11px;
    font-weight: 800;
}

.productDownloadInfo strong {
    display: block;
    color: #153e2b;
    font-size: 13px;
    overflow-wrap: anywhere;
}

.productDownloadInfo small {
    display: block;
    color: #7b8b80;
    font-size: 11px;
    margin-top: 4px;
}

.productDownloadActions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.productDownloadActions a {
    display: inline-block;
    padding: 10px 13px;
    border: 1px solid #cbded2;
    border-radius: 7px;
    color: #195337;
    background: #ffffff;
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    transition: 0.2s ease;
}

.productDownloadActions a:hover {
    background: #195337;
    color: #ffffff;
}

@media (max-width: 600px) {
    .productDownloadItem {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* ==========================================
   PRODUCT DETAILS — INQUIRY BUTTON
========================================== */

.productDetailsInquiryButton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 24px;
    background: #195337;
    color: #ffffff;
    border: 1px solid #195337;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.2s ease;
}

.productDetailsInquiryButton:hover {
    background: #123e29;
}

.productDetailsInquiryButton.added {
    background: #e8f3ec;
    color: #195337;
    border-color: #195337;
}

/* ==========================================
   CAPABILITIES — MANUFACTURING SECTION
========================================== */

.capManufacturing {
    padding: 110px 0;
    background: #f4f7f5;
}

.capManufacturingGrid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 75px;
    align-items: center;
}

/* FACTORY IMAGE */

.capManufacturingVisual {
    position: relative;
    overflow: hidden;
    min-height: 480px;
    background: #e5ebe7;
}

.capManufacturingVisual img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 480px;
    object-fit: cover;
    transition: transform 0.7s ease;
}

.capManufacturingVisual:hover img {
    transform: scale(1.035);
}

/* CONTENT */

.capManufacturingContent h2 {
    margin: 24px 0;
    color: #123b2c;
    font-size: clamp(32px, 3.5vw, 52px);
    line-height: 1.15;
    letter-spacing: -1.5px;
}

.capManufacturingContent h2 em {
    color: #6d9181;
    font-weight: 400;
}

.capManufacturingContent > p {
    max-width: 520px;
    margin-bottom: 32px;
    color: #65756c;
    font-size: 15px;
    line-height: 1.9;
}

/* CAPABILITY FEATURES */

.capManufacturingFeatures {
    margin-bottom: 36px;
    border-top: 1px solid #dce5df;
}

.capManufacturingFeatures > div {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 18px 0;
    border-bottom: 1px solid #dce5df;
}

.capManufacturingFeatures span {
    color: #7d9b8b;
    font-size: 12px;
    font-weight: 700;
}

.capManufacturingFeatures strong {
    color: #173d2f;
    font-size: 15px;
    font-weight: 600;
}

/* RESPONSIVE */

@media (max-width: 900px) {

    .capManufacturing {
        padding: 75px 0;
    }

    .capManufacturingGrid {
        grid-template-columns: 1fr;
        gap: 42px;
    }

    .capManufacturingVisual,
    .capManufacturingVisual img {
        min-height: 350px;
    }
}

@media (max-width: 600px) {

    .capManufacturing {
        padding: 55px 0;
    }

    .capManufacturingVisual,
    .capManufacturingVisual img {
        min-height: 260px;
    }

    .capManufacturingContent h2 {
        letter-spacing: -0.8px;
    }
}

/* ==========================================
   CAPABILITIES — INDUSTRIAL APPLICATIONS
========================================== */

.capIndustries {
    padding: 110px 0;
    background: #ffffff;
}

.capIndustriesHeader {
    max-width: 760px;
    margin-bottom: 48px;
}

.capIndustriesHeader h2 {
    margin: 24px 0 18px;
    color: #123b2c;
    font-size: clamp(34px, 4vw, 56px);
    line-height: 1.12;
    letter-spacing: -1.5px;
}

.capIndustriesHeader h2 em {
    color: #6d9181;
    font-weight: 400;
}

.capIndustriesHeader > p {
    max-width: 520px;
    color: #65756c;
    font-size: 15px;
    line-height: 1.9;
}

/* INDUSTRY GRID */

.capIndustriesGrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.capIndustryItem {
    position: relative;
    min-height: 330px;
    overflow: hidden;
    background: #123b2c;
    isolation: isolate;
}

.capIndustryItem img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease;
}

.capIndustryItem::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(8, 34, 24, 0.04) 15%,
        rgba(8, 34, 24, 0.88) 100%
    );
    z-index: 1;
}

.capIndustryItem:hover img {
    transform: scale(1.06);
}

.capIndustryContent {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    padding: 30px;
}

.capIndustryContent span {
    display: block;
    margin-bottom: 12px;
    color: #c2d9cd;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.capIndustryContent h3 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(22px, 2vw, 29px);
    font-weight: 600;
    line-height: 1.2;
}

/* RESPONSIVE */

@media (max-width: 900px) {
    .capIndustries {
        padding: 75px 0;
    }

    .capIndustriesGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .capIndustries {
        padding: 55px 0;
    }

    .capIndustriesHeader {
        margin-bottom: 32px;
    }

    .capIndustriesHeader h2 {
        letter-spacing: -0.8px;
    }

    .capIndustriesGrid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .capIndustryItem {
        min-height: 280px;
    }

    .capIndustryContent {
        padding: 24px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .capIndustryItem img {
        transition: none;
    }
}