/* RESET */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


/* BODY */

body {
    font-family: "Inter", sans-serif;

    background-color: #050a0f;

    color: white;
}


/* =========================================
   HOME HERO - NEW DESIGN
========================================= */

.pd-home-banner {
    position: relative;
    width: 100%;
    min-height: 720px;

    display: flex;
    align-items: stretch;

    background-color: #04101b;

    /* USE YOUR EXISTING HERO IMAGE PATH */
    background-image:
        linear-gradient(
            90deg,
            rgba(2, 10, 17, 0.98) 0%,
            rgba(2, 10, 17, 0.87) 32%,
            rgba(2, 10, 17, 0.35) 70%,
            rgba(2, 10, 17, 0.15) 100%
        ),
        url("images/home-bg.webp");

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

/* =========================================
   INNER CONTAINER
========================================= */

.pd-home-banner-inner {
    position: relative;
    z-index: 1;

    width: 90%;
    max-width: 1510px;
    min-height: 720px;

    margin: 0 auto;
    padding: 95px 0 45px;

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

/* =========================================
   MAIN CONTENT
========================================= */

.pd-home-banner-content {
    width: 100%;
    max-width: 900px;
}

/* =========================================
   HEADLINE
========================================= */

.pd-home-banner-title {
    margin: 0 0 36px;
    padding: 0;

    color: #ffffff;

    font-size: clamp(46px, 4.2vw, 76px);
    font-weight: 700;

    line-height: 1.08;
    letter-spacing: -2px;
}

/* BLUE THIRD LINE */

.pd-home-banner-title span {
    color: #4d9cff;
}

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

.pd-home-banner-description {
    max-width: 650px;
}

.pd-home-banner-description p {
    margin: 0 0 24px;

    color: #b4c2cf;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.85;
}

.pd-home-banner-description p:last-child {
    margin-bottom: 0;
}

/* =========================================
   BOTTOM CATEGORIES
========================================= */

.pd-home-banner-categories {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    width: fit-content;
    max-width: 100%;

    gap: 30px;

    padding-top: 28px;

    border-top: 1px solid rgba(110, 160, 195, 0.3);
}

.pd-home-banner-categories span {
    color: #a0b5c7;

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

    letter-spacing: 1.7px;
    white-space: nowrap;
}

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

@media (max-width: 900px) {

    .pd-home-banner {
        min-height: 650px;
        background-position: 60% center;
    }

    .pd-home-banner-inner {
        min-height: 650px;
        padding: 80px 0 40px;
    }

    .pd-home-banner-title {
        font-size: clamp(42px, 6vw, 60px);
    }

    .pd-home-banner-content {
        max-width: 700px;
    }
}

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

@media (max-width: 600px) {

    .pd-home-banner {
        min-height: 650px;

        background-position: 65% center;
    }

    .pd-home-banner-inner {
        width: 88%;
        min-height: 650px;
        padding: 65px 0 30px;
    }

    .pd-home-banner-title {
        font-size: clamp(34px, 8vw, 46px);
        line-height: 1.13;
        letter-spacing: -1px;
        margin-bottom: 28px;
    }

    .pd-home-banner-description p {
        font-size: 13px;
        line-height: 1.8;
        margin-bottom: 15px;
    }

    .pd-home-banner-categories {
        gap: 14px 20px;
        padding-top: 20px;
    }

    .pd-home-banner-categories span {
        font-size: 9px;
        letter-spacing: 1px;
    }
}


/* =========================================
   OUR EXPERTISE — ENGINEERING INDEX
========================================= */

.expertise {
    width: 100%;
    padding: 80px 8%;
    background: #07111d;
}

.expertise-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}


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

.expertise-header {
    display: grid;
    grid-template-columns: 1fr 0.8fr;
    gap: 80px;

    align-items: end;

    margin-bottom: 45px;
}

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

    margin: 0 0 16px;

    color: #5fa8ff;

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

    letter-spacing: 3px;
}

.expertise-label::before {
    content: "";

    width: 30px;
    height: 2px;

    background: #2f80ed;
}

.expertise-header h2 {
    margin: 0;

    color: #ffffff;

    font-size: 42px;
    line-height: 1.08;

    letter-spacing: -1.3px;
}

.expertise-header h2 span {
    color: #5fa8ff;
}

.expertise-intro {
    max-width: 440px;

    margin: 0 0 3px;

    color: #8496a8;

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


/* =========================================
   LIST
========================================= */

.expertise-list {
    width: 100%;

    border-top: 1px solid #203548;
}

.expertise-item {
    position: relative;

    display: grid;

    grid-template-columns:
        70px
        minmax(260px, 1fr)
        minmax(300px, 1.2fr)
        45px;

    gap: 30px;

    align-items: center;

    min-height: 125px;

    padding: 24px 15px;

    color: inherit;
    text-decoration: none;

    border-bottom: 1px solid #203548;

    overflow: hidden;

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


/* BLUE HOVER BACKGROUND */

.expertise-item::before {
    content: "";

    position: absolute;

    inset: 0;

    background: linear-gradient(
        90deg,
        rgba(47, 128, 237, 0.12),
        rgba(47, 128, 237, 0.025)
    );

    opacity: 0;

    transition: opacity 0.3s ease;

    pointer-events: none;
}

.expertise-item:hover::before {
    opacity: 1;
}

.expertise-item:hover {
    padding-left: 25px;
}


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

.expertise-number {
    position: relative;
    z-index: 2;

    color: #5fa8ff;

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

    letter-spacing: 1px;
}


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

.expertise-name {
    position: relative;
    z-index: 2;
}

.expertise-name > span {
    display: block;

    margin-bottom: 7px;

    color: #61778b;

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

    letter-spacing: 2px;

    transition: color 0.3s ease;
}

.expertise-name h3 {
    margin: 0;

    color: #ffffff;

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

    line-height: 1.3;

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

.expertise-item:hover .expertise-name > span {
    color: #5fa8ff;
}

.expertise-item:hover .expertise-name h3 {
    color: #7ab8ff;
}


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

.expertise-item > p {
    position: relative;
    z-index: 2;

    max-width: 420px;

    margin: 0;

    color: #7e91a3;

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

    transition: color 0.3s ease;
}

.expertise-item:hover > p {
    color: #aebdca;
}


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

.expertise-arrow {
    position: relative;
    z-index: 2;

    justify-self: end;

    color: #526b81;

    font-size: 20px;
    font-weight: 300;

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

.expertise-item:hover .expertise-arrow {
    color: #5fa8ff;

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


/* =========================================
   FOOTER LINK
========================================= */

.expertise-footer {
    display: flex;
    justify-content: flex-end;

    margin-top: 25px;
}

.expertise-footer a {
    color: #ffffff;

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

    text-decoration: none;

    padding-bottom: 5px;

    border-bottom: 1px solid #2f80ed;

    transition: 0.3s ease;
}

.expertise-footer a span {
    display: inline-block;

    margin-left: 7px;

    transition: transform 0.3s ease;
}

.expertise-footer a:hover {
    color: #5fa8ff;
}

.expertise-footer a:hover span {
    transform: translateX(4px);
}


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

@media (max-width: 950px) {

    .expertise {
        padding: 70px 6%;
    }

    .expertise-header {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .expertise-intro {
        max-width: 550px;
    }

    .expertise-item {
        grid-template-columns:
            50px
            minmax(220px, 1fr)
            1fr
            35px;

        gap: 20px;
    }

}


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

@media (max-width: 650px) {

    .expertise {
        padding: 60px 5%;
    }

    .expertise-header {
        margin-bottom: 35px;
    }

    .expertise-header h2 {
        font-size: 34px;
    }

    .expertise-item {
        grid-template-columns: 38px 1fr 30px;

        gap: 12px;

        min-height: auto;

        padding: 22px 5px;
    }

    .expertise-item:hover {
        padding-left: 10px;
    }

    .expertise-name {
        grid-column: 2;
    }

    .expertise-name h3 {
        font-size: 16px;
    }

    .expertise-item > p {
        grid-column: 2 / 4;

        max-width: 100%;

        font-size: 11px;

        margin-top: -3px;
    }

    .expertise-arrow {
        grid-column: 3;
        grid-row: 1;

        align-self: center;
    }

}


/* =========================================
   ABOUT PERENCANA
========================================= */

.company-about {
    position: relative;

    width: 100%;

    padding: 75px 8% 85px;

    background: #000000;

    overflow: hidden;
}


/* =========================================
   LAYOUT
========================================= */


.company-content {
    display: grid;

    grid-template-columns: 0.95fr 1.45fr;

    gap: 50px;

    align-items: center;

    min-height: 430px;
}



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

.company-text {
    max-width: 520px;
}


.company-label {
    color: #5fa8ff !important;

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

    letter-spacing: 3px;

    margin-bottom: 20px !important;
}


.company-label::before {
    content: "";

    display: inline-block;

    width: 28px;
    height: 2px;

    margin-right: 12px;

    background: #5fa8ff;

    vertical-align: middle;
}


.company-text h2 {
    color: #ffffff;

    font-size: 42px;
    line-height: 1.08;

    letter-spacing: -1.3px;

    margin-bottom: 25px;
}


.company-text h2 span {
    display: block;

    color: #5fa8ff;
}


.company-text > p:not(.company-label) {
    color: #9aabbb;

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

    margin-bottom: 14px;
}


.company-link {
    display: inline-block;

    margin-top: 10px;

    padding-bottom: 5px;

    color: #ffffff;

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

    text-decoration: none;

    border-bottom: 1px solid #2f80ed;

    transition: 0.3s;
}


.company-link:hover {
    color: #5fa8ff;
}


/* =========================================
   ABOUT IMAGE
========================================= */

.company-image {
    position: relative;

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

    align-items: center;
    gap: 28px;

    min-height: 0;
}

/* COMPANY BUILDING PHOTOGRAPH */

.company-image > img {
    display: block;

    width: 100%;
    height: auto;
    max-height: 420px;

    object-fit: contain;
    border-radius: 5px;
}

/* BLUE CORNER FRAME */

.company-image::before {
    content: "";

    position: absolute;
    top: -13px;
    left: -13px;

    width: 65px;
    height: 65px;

    border-top: 2px solid #2f80ed;
    border-left: 2px solid #2f80ed;

    pointer-events: none;
    z-index: 2;
}



/* =========================================
   FEATURE BOX
========================================= */


/* =========================================
   MINIMAL CAPABILITY INFORMATION
========================================= */

.company-feature-box {
    position: static;

    width: 100%;

    right: auto;
    bottom: auto;

    padding: 0;
    margin: 0;

    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

/* INDIVIDUAL CAPABILITIES */

.company-feature {
    display: flex;
    align-items: flex-start;

    gap: 12px;

    padding: 16px 0;

    border-bottom: 1px solid #203246;
}

.company-feature:first-child {
    padding-top: 0;
}

.company-feature:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

/* NUMBER 01, 02, 03 */

.company-feature > span {
    flex-shrink: 0;

    color: #5fa8ff;

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

    padding-top: 3px;
}

/* CAPABILITY TITLE */

.company-feature h3 {
    color: #ffffff;

    font-size: 14px;
    font-weight: 600;
    line-height: 1.45;

    margin: 0 0 7px;
}

/* DESCRIPTION */

.company-feature p {
    color: #9aabbb;

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

    margin: 0;
}


/* ABOUT PERENCANA - RESPONSIVE */

@media (max-width: 1100px) {

    .company-content {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .company-text {
        max-width: 700px;
    }

    .company-image {
        grid-template-columns: 1.1fr 0.9fr;
        gap: 30px;
    }
}

@media (max-width: 700px) {

    .company-about {
        padding: 55px 6% 65px;
    }

    .company-content {
        gap: 35px;
        min-height: 0;
    }

    .company-text h2 {
        font-size: 34px;
    }

    .company-image {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .company-image > img {
        width: 100%;
        max-height: none;
    }

    .company-feature {
        padding: 15px 0;
    }

    .company-feature p {
        font-size: 12px;
    }
}


/* =========================================
   FEATURED PROJECTS
========================================= */

.projects {
    width: 100%;
    padding: 85px 8%;

    background: #050a0f;
}

.projects-container {
    width: 100%;
    max-width: 1200px;

    margin: 0 auto;
}


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

.projects-header {
    display: grid;

    grid-template-columns: 1fr 0.8fr;

    gap: 80px;

    align-items: end;

    margin-bottom: 40px;
}


.projects-label {
    display: flex;
    align-items: center;

    gap: 12px;

    margin: 0 0 16px;

    color: #5fa8ff;

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

    letter-spacing: 3px;
}


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

    width: 30px;
    height: 2px;

    background: #2f80ed;
}


.projects-heading h2 {
    margin: 0;

    color: #ffffff;

    font-size: 42px;
    line-height: 1.08;

    letter-spacing: -1.3px;
}


.projects-heading h2 span {
    display: block;

    color: #5fa8ff;
}


.projects-intro {
    max-width: 430px;

    margin: 0 0 3px;

    color: #8496a8;

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


/* =========================================
   PROJECT SHOWCASE
========================================= */

.projects-showcase {
    display: grid;

    grid-template-columns: 1.45fr 0.85fr;

    gap: 14px;

    height: 590px;
}


/* =========================================
   COMMON PROJECT STYLE
========================================= */

.project-featured,
.project-small {
    position: relative;

    display: block;

    overflow: hidden;

    color: inherit;

    text-decoration: none;

    background: #071c33;
}


.project-featured {
    border-radius: 5px 0 0 5px;
}


.projects-side {
    display: grid;

    grid-template-rows: 1fr 1fr;

    gap: 14px;
}


.project-small:first-child {
    border-radius: 0 5px 0 0;
}


.project-small:last-child {
    border-radius: 0 0 5px 0;
}


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

.project-featured > img,
.project-small > img {
    position: absolute;

    width: 100%;
    height: 100%;

    inset: 0;

    object-fit: cover;

    transition:
        transform 0.7s ease,
        filter 0.5s ease;
}


/* =========================================
   DARK OVERLAY
========================================= */

.project-shade {
    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            to top,
            rgba(2, 8, 15, 0.96) 0%,
            rgba(2, 9, 17, 0.62) 42%,
            rgba(2, 9, 17, 0.12) 78%
        );

    transition: 0.4s ease;
}


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

.project-number {
    position: absolute;

    top: 22px;
    left: 24px;

    z-index: 3;

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

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

    letter-spacing: 1px;
}


/* =========================================
   PROJECT CONTENT
========================================= */

.project-content {
    position: absolute;

    z-index: 3;

    left: 30px;
    right: 30px;
    bottom: 30px;
}


.project-category {
    margin: 0 0 10px;

    color: #5fa8ff;

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

    letter-spacing: 2.2px;
}


.project-content h3 {
    max-width: 480px;

    margin: 0;

    color: #ffffff;

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

    line-height: 1.2;

    letter-spacing: -0.5px;
}


/* MAIN PROJECT DESCRIPTION */

.project-featured .project-description {
    max-width: 480px;

    margin: 13px 0 0;

    color: #a7b5c2;

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


/* =========================================
   SMALL PROJECT
========================================= */

.project-small .project-content {
    left: 22px;
    right: 45px;
    bottom: 22px;
}


.project-small .project-content h3 {
    max-width: 320px;

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


.project-small .project-number {
    top: 18px;
    left: 20px;
}


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

.project-meta {
    display: flex;

    gap: 45px;

    margin-top: 22px;
}


.project-meta span {
    display: flex;

    flex-direction: column;

    gap: 5px;

    color: #64788b;

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

    letter-spacing: 1.5px;
}


.project-meta strong {
    color: #c8d3dc;

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

    letter-spacing: 0;
}


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

.project-arrow {
    position: absolute;

    top: 20px;
    right: 22px;

    z-index: 4;

    display: flex;

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

    width: 34px;
    height: 34px;

    color: #ffffff;

    font-size: 16px;

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

    border-radius: 50%;

    transition: 0.3s ease;
}


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

.project-featured:hover > img,
.project-small:hover > img {
    transform: scale(1.045);

    filter: brightness(1.06);
}


.project-featured:hover .project-arrow,
.project-small:hover .project-arrow {
    color: #ffffff;

    background: #2f80ed;

    border-color: #2f80ed;

    transform: rotate(45deg);
}


.project-featured:hover .project-shade,
.project-small:hover .project-shade {
    background:
        linear-gradient(
            to top,
            rgba(2, 8, 15, 0.97) 0%,
            rgba(3, 20, 38, 0.58) 48%,
            rgba(3, 20, 38, 0.08) 80%
        );
}


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

.projects-bottom {
    display: flex;

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

    gap: 30px;

    margin-top: 25px;
}


.projects-bottom p {
    margin: 0;

    color: #65798c;

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


.projects-bottom a {
    color: #ffffff;

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

    text-decoration: none;

    padding-bottom: 5px;

    border-bottom: 1px solid #2f80ed;

    transition: 0.3s ease;
}


.projects-bottom a span {
    display: inline-block;

    margin-left: 7px;

    transition: transform 0.3s ease;
}


.projects-bottom a:hover {
    color: #5fa8ff;
}


.projects-bottom a:hover span {
    transform: translateX(4px);
}


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

@media (max-width: 950px) {

    .projects {
        padding: 70px 6%;
    }


    .projects-header {
        grid-template-columns: 1fr;

        gap: 20px;
    }


    .projects-intro {
        max-width: 550px;
    }


    .projects-showcase {
        grid-template-columns: 1fr;

        height: auto;
    }


    .project-featured {
        height: 500px;

        border-radius: 5px;
    }


    .projects-side {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;

        height: 280px;
    }


    .project-small:first-child,
    .project-small:last-child {
        border-radius: 5px;
    }

}


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

@media (max-width: 650px) {

    .projects {
        padding: 60px 5%;
    }


    .projects-heading h2 {
        font-size: 34px;
    }


    .project-featured {
        height: 430px;
    }


    .projects-side {
        display: grid;

        grid-template-columns: 1fr;

        height: auto;
    }


    .project-small {
        height: 260px;

        border-radius: 5px !important;
    }


    .project-content {
        left: 20px;
        right: 20px;
        bottom: 22px;
    }


    .project-content h3 {
        font-size: 21px;
    }


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


    .project-meta {
        gap: 25px;
    }


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

        flex-direction: column;
    }

}

/* =========================================
   PROJECT CTA
========================================= */

.project-cta {
    width: 100%;
    padding: 65px 8%;
    box-sizing: border-box;

    background: linear-gradient(
        110deg,
        #071b2d 0%,
        #071521 55%,
        #050b11 100%
    );

    border-top: 1px solid #183b58;
    border-bottom: 1px solid #183b58;
}

.project-cta-container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 80px;
}


/* LEFT CONTENT */

.project-cta-content {
    max-width: 760px;

    padding-left: 38px;
    border-left: 4px solid #2f80ed;
}

.project-cta-label {
    display: block;
    margin-bottom: 18px;

    color: #5fa8ff;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
}

.project-cta-content h2 {
    margin: 0 0 16px;

    color: #ffffff;

    /* smaller than current version */
    font-size: clamp(32px, 2.4vw, 40px);
    line-height: 1.15;
    font-weight: 700;
}

.project-cta-content p {
    max-width: 650px;
    margin: 0;

    color: #8fa2b5;

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

.project-cta-label {
    display: block;
    margin-bottom: 16px;

    color: #5fa8ff;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 3px;
}


/* BUTTON */

.project-cta-btn {
    width: 250px;
    min-height: 68px;
    padding: 0 20px 0 26px;

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

    flex-shrink: 0;

    background: #2366ad;
    border: 1px solid #3988dc;
    border-radius: 5px;

    color: #ffffff;
    text-decoration: none;

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

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

.project-cta-arrow {
    width: 34px;
    height: 34px;

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

    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;

    font-size: 18px;

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


/* HOVER */

.project-cta-btn:hover {
    background: #2f80ed;
    border-color: #5fa8ff;
    transform: translateY(-2px);
}

.project-cta-btn:hover .project-cta-arrow {
    background: rgba(255, 255, 255, 0.1);
    transform: translateX(3px);
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 900px) {

    .project-cta {
        padding: 55px 6%;
    }

    .project-cta-container {
        flex-direction: column;
        align-items: flex-start;
        gap: 35px;
    }

    .project-cta-content {
        padding-left: 25px;
    }

    .project-cta-btn {
        width: 100%;
        max-width: 300px;
    }
}


@media (max-width: 600px) {

    .project-cta {
        padding: 45px 5%;
    }

    .project-cta-content h2 {
        font-size: 32px;
    }

    .project-cta-content p {
        font-size: 14px;
    }

    .project-cta-label {
        font-size: 10px;
    }
}


/* =========================================
   PERENCANA DINGIN - 3 COLUMN FOOTER
========================================= */

.pd-footer {
    width: 100%;
    background: #030a10;
    border-top: 1px solid #17334a;
    padding: 60px 8% 0;
    color: #ffffff;
}

.pd-footer-container {
    width: 100%;
    max-width: 1250px;
    margin: 0 auto;
}

/* MAIN GRID */

.pd-footer-grid {
    display: grid;
    grid-template-columns: 1.3fr 0.8fr 1fr;
    column-gap: 90px;
    row-gap: 40px;
    align-items: start;
    padding-bottom: 55px;
}

/* =========================================
   COMPANY INFORMATION
========================================= */

.pd-footer-brand {
    max-width: 330px;
}

.pd-footer-logo {
    display: inline-block;
    margin-bottom: 22px;
}

.pd-footer-logo img {
    display: block;
    width: 160px;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    object-position: left center;
}

.pd-footer-brand p {
    max-width: 310px;
    margin: 0 0 18px;
    color: #91a5b7;
    font-size: 13px;
    line-height: 1.85;
}

.pd-footer-tagline {
    display: block;
    color: #5fa8ff;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.7;
}

/* =========================================
   FOOTER HEADINGS
========================================= */

.pd-footer-column h3 {
    position: relative;
    margin: 0 0 28px;
    padding-bottom: 15px;

    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
}

.pd-footer-column h3::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;

    width: 28px;
    height: 2px;
    background: #4d9cff;
}

/* =========================================
   QUICK LINKS
========================================= */

.pd-footer-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 13px;
}

.pd-footer-links a {
    color: #91a5b7;
    font-size: 13px;
    line-height: 1.6;
    text-decoration: none;
    transition: color 0.2s ease;
}

.pd-footer-links a:hover {
    color: #4d9cff;
}

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

.pd-footer-contact strong {
    display: block;
    margin-bottom: 14px;

    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
}

.pd-footer-contact p {
    margin: 0 0 18px;
    color: #91a5b7;
    font-size: 13px;
    line-height: 1.85;
}

.pd-footer-email {
    display: inline-block;
    color: #4d9cff;
    font-size: 13px;
    text-decoration: none;
    overflow-wrap: anywhere;
    transition: color 0.2s ease;
}

.pd-footer-email:hover {
    color: #ffffff;
}

.pd-footer-contact-link {
    display: block;
    width: fit-content;

    margin-top: 23px;
    padding-bottom: 7px;

    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.8px;

    text-decoration: none;
    border-bottom: 1px solid #4d9cff;
    transition: color 0.2s ease;
}

.pd-footer-contact-link:hover {
    color: #4d9cff;
}

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

.pd-footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;

    padding: 25px 0 30px;
    border-top: 1px solid #1a3041;
}

.pd-footer-bottom p,
.pd-footer-bottom span {
    margin: 0;
    color: #71889c;
    font-size: 11px;
    line-height: 1.7;
}

/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 1000px) {

    .pd-footer-grid {
        grid-template-columns: 1fr 1fr;
        column-gap: 50px;
    }

    .pd-footer-brand {
        grid-column: 1 / -1;
        max-width: 430px;
    }

}

@media (max-width: 600px) {

    .pd-footer {
        padding: 50px 6% 0;
    }

    .pd-footer-grid {
        grid-template-columns: 1fr;
        gap: 35px;
        padding-bottom: 40px;
    }

    .pd-footer-brand {
        grid-column: auto;
        max-width: 100%;
    }

    .pd-footer-column h3 {
        margin-bottom: 22px;
    }

    .pd-footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

}


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

.project-filter-panel {
    max-width: 1200px;
    margin: 0 auto 35px;

    padding: 22px 0;

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

    gap: 40px;

    border-top: 1px solid #173957;
    border-bottom: 1px solid #173957;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.filter-title {
    color: #5fa8ff;

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

    letter-spacing: 2px;
}


/* YEAR + CATEGORY BUTTON CONTAINERS */

.project-year-filter,
.project-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}


/* ALL FILTER BUTTONS */

.year-filter,
.project-filter {
    min-height: 38px;

    padding: 8px 14px;

    background: transparent;

    border: 1px solid #25445f;
    border-radius: 4px;

    color: #8498aa;

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

    cursor: pointer;

    transition: 0.25s ease;
}


/* HOVER */

.year-filter:hover,
.project-filter:hover {
    color: #ffffff;

    border-color: #2f80ed;
}


/* ACTIVE */

.year-filter.active,
.project-filter.active {
    background: #2f80ed;

    border-color: #2f80ed;

    color: #ffffff;
}


/* MOBILE */

@media (max-width: 950px) {

    .project-filter-panel {
        flex-direction: column;
        align-items: flex-start;

        gap: 22px;
    }

}


/* HOVER */

.year-filter:hover,
.project-filter:hover {
    color: #ffffff;

    border-color: #2f80ed;
}


/* ACTIVE */

.year-filter.active,
.project-filter.active {
    background: #2f80ed;

    border-color: #2f80ed;

    color: #ffffff;
}


/* MOBILE */

@media (max-width: 950px) {

    .project-filter-panel {
        flex-direction: column;
        align-items: flex-start;

        gap: 22px;
    }

}


/* =========================================
   WHO WE ARE
========================================= */

.who-we-are {
    padding: 85px 8%;

    background: #000000;
}


.who-container {
    max-width: 1200px;

    margin: 0 auto;

    display: grid;

    grid-template-columns: 0.9fr 1.1fr;

    gap: 75px;

    align-items: center;
}


.who-content {
    max-width: 520px;
}


.who-content h2 {
    color: #ffffff;

    font-size: 42px;
    line-height: 1.1;

    letter-spacing: -1.2px;

    margin-bottom: 25px;
}


.who-content h2 span {
    display: block;

    color: #2f80ed;
}


.who-description {
    color: #687989;

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

    margin-bottom: 15px;
}


/* IMAGE */

.who-image {
    position: relative;
}


.who-image img {
    display: block;

    width: 100%;
    height: 430px;

    object-fit: cover;

    border-radius: 5px;
}


.who-image::before {
    content: "";

    position: absolute;

    top: -14px;
    left: -14px;

    width: 75px;
    height: 75px;

    border-top: 2px solid #2f80ed;
    border-left: 2px solid #2f80ed;

    z-index: 2;
}


.who-image-label {
    position: absolute;

    left: 25px;
    bottom: 25px;

    padding: 16px 20px;

    background: rgba(5, 17, 31, 0.93);

    border: 1px solid #193b5b;

    border-radius: 4px;
}


.who-image-label span {
    color: #5fa8ff;

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

    letter-spacing: 2px;
}


.who-image-label p {
    color: #ffffff;

    font-size: 12px;

    margin: 5px 0 0;
}

/* ==========================================================
    COMPANY JOURNEY
========================================================== */

.about3-journey {
    width: 100%;
    padding: 75px 8% 85px;

    box-sizing: border-box;

    background: #050a0f;

    border-top: 1px solid #13283a;
    border-bottom: 1px solid #13283a;
}


.about3-journey-wrap {
    width: 100%;
    max-width: 1200px;

    margin: 0 auto;
}

.about3-journey {
    background:
        linear-gradient(
            rgba(3, 10, 17, 0.65),
            rgba(3, 10, 17, 0.75)
        ),
        url("images/milestones-background.webp");


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

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

.about3-journey-header {
    max-width: 650px;

    margin-bottom: 55px;
}


.about3-section-label {
    display: flex;
    align-items: center;

    gap: 14px;

    margin-bottom: 18px;
}


.about3-section-label > span {
    width: 30px;
    height: 2px;

    background: #2f80ed;
}


.about3-section-label p {
    margin: 0;

    color: #5fa8ff;

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

    letter-spacing: 3px;
}


.about3-journey-header h2 {
    margin: 0 0 14px;

    color: #ffffff;

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

    line-height: 1.15 !important;
}


.about3-journey-header h2 span {
    color: #2f80ed;
}


.about3-journey-header > p {
    max-width: 590px;

    margin: 0;

    color: #8193a5;

    font-size: 13px !important;

    line-height: 1.7 !important;
}


/* =========================================
   TIMELINE
========================================= */

.about3-timeline {
    position: relative;

    width: 100%;

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

    padding-top: 0;
}


/* HORIZONTAL LINE */

.about3-timeline::before {
    content: "";

    position: absolute;

    top: 7px;
    left: 7px;
    right: 7px;

    height: 1px;

    background: #29445b;

    z-index: 0;
}


/* =========================================
   MILESTONE
========================================= */

.about3-milestone {
    position: relative;

    padding-top: 31px;
    padding-right: 12px;

    min-width: 0;
}


/* DOT */

.about3-dot {
    position: absolute;

    top: 0;
    left: 0;

    width: 14px;
    height: 14px;

    box-sizing: border-box;

    background: #050a0f;

    border: 2px solid #2f80ed;
    border-radius: 50%;

    z-index: 2;

    transition:
        background .25s ease,
        box-shadow .25s ease;
}


/* YEAR */

.about3-milestone strong {
    display: block;

    margin-bottom: 7px;

    color: #5fa8ff;

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

    line-height: 1.2 !important;
}


/* DESCRIPTION */

.about3-milestone p {
    margin: 0;

    color: #74899b;

    font-size: 10px !important;

    line-height: 1.5 !important;
}


/* HOVER */

.about3-milestone:hover .about3-dot {
    background: #2f80ed;

    box-shadow:
        0 0 0 5px rgba(47, 128, 237, .12);
}


.about3-milestone:hover p {
    color: #c4d0da;
}


/* =========================================
   PRESENT
========================================= */

.about3-current .about3-dot {
    background: #2f80ed;

    box-shadow:
        0 0 0 5px rgba(47, 128, 237, .12);
}


.about3-current strong {
    color: #ffffff;

    font-size: 11px !important;

    letter-spacing: 1px;
}


.about3-current p {
    color: #9badbc;
}


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

@media (max-width: 900px) {

    .about3-timeline {
        grid-template-columns: repeat(5, 1fr);

        row-gap: 35px;
    }


    .about3-timeline::before {
        display: none;
    }


    .about3-milestone {
        padding:
            25px
            15px
            0
            0;
    }

}


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

@media (max-width: 600px) {

    .about3-journey {
        padding: 60px 5%;
    }


    .about3-journey-header {
        margin-bottom: 40px;
    }


    .about3-journey-header h2 {
        font-size: 31px !important;
    }


    .about3-timeline {
        display: block;
    }


    .about3-milestone {
        min-height: 70px;

        padding:
            0
            0
            28px
            35px;
    }


    /* vertical line */

    .about3-milestone::before {
        content: "";

        position: absolute;

        top: 14px;
        bottom: -2px;
        left: 6px;

        width: 1px;

        background: #29445b;
    }


    .about3-milestone:last-child::before {
        display: none;
    }


    .about3-dot {
        top: 0;
        left: 0;
    }

}


/* ==========================================================
   TRUST & RECOGNITION V4 - COMPACT DESIGN
========================================================== */

.trust3-section {
    position: relative;
    width: 100%;
    padding: 50px 8% 55px;
    box-sizing: border-box;

    background: url("images/trust-background.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    overflow: hidden;
}

/* DARK BACKGROUND OVERLAY */

.trust3-overlay {
    position: absolute;
    inset: 0;

    background: linear-gradient(
        90deg,
        rgba(3, 10, 18, 0.93) 0%,
        rgba(4, 15, 27, 0.88) 50%,
        rgba(4, 15, 27, 0.82) 100%
    );

    z-index: 0;
}

/* MAIN CONTAINER */

.trust3-container {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1510px;
    margin: 0 auto;
}

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

.trust3-header {
    max-width: 680px;
    margin-bottom: 30px;
}

.trust3-label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.trust3-label span {
    width: 25px;
    height: 2px;
    background: #2f80ed;
}

.trust3-label p {
    margin: 0;
    color: #5fa8ff;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 2px;
}

.trust3-header h2 {
    margin: 0 0 12px;
    color: #ffffff;

    font-size: 32px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
}

.trust3-header h2 span {
    display: block;
    color: #2f80ed;
}

.trust3-intro {
    max-width: 600px;
    margin: 0;
    color: #aebdcc;

    font-size: 13px !important;
    font-weight: 400;
    line-height: 1.6 !important;
}

/* ==========================================================
   GROUP LAYOUT
========================================================== */

.trust3-group {
    display: grid;
    grid-template-columns: 235px minmax(0, 1fr);
    gap: 35px;
    align-items: center;

    padding: 22px 0;

    border-top: 1px solid rgba(95, 168, 255, 0.18);
}

.trust3-group:last-child {
    border-bottom: 1px solid rgba(95, 168, 255, 0.18);
}

/* ==========================================================
   LEFT INFORMATION
========================================================== */

.trust3-number {
    display: block;
    margin-bottom: 7px;

    color: #5fa8ff;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px;
}

.trust3-info h3 {
    margin: 0 0 7px;

    color: #ffffff;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
}

.trust3-info p {
    max-width: 235px;
    margin: 0;

    color: #aebdcc;
    font-size: 12px !important;
    font-weight: 400;
    line-height: 1.6 !important;
}

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

.trust3-logos {
    display: grid;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-width: 0;
}

/* CERTIFICATES & CLIENTS */

.trust3-five {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

/* INDUSTRY AFFILIATES */

.trust3-affiliate {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    max-width: 100%;
}

/* UNIVERSITY PARTNERS */

.trust3-universities {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    max-width: 100%;
}

/* ==========================================================
   LOGO BOXES - CONSISTENT SIZE
========================================================== */

.trust3-logo,
.trust3-logo-wide {
    width: 100%;
    height: 70px;
    box-sizing: border-box;

    padding: 10px 12px;

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

    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 5px;

    overflow: hidden;

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

/* LOGO IMAGES */

.trust3-logo img,
.trust3-logo-wide img {
    display: block;

    width: 100%;
    height: 100%;

    max-width: 100%;
    max-height: 100%;

    object-fit: contain;
    object-position: center;
}

/* HOVER */

.trust3-logo:hover,
.trust3-logo-wide:hover {
    transform: translateY(-2px);
    background: #ffffff;
    border-color: #5fa8ff;
}

/* UNIVERSITY GROUP BACKGROUND */

.trust3-university-group {
    background: linear-gradient(
        90deg,
        rgba(47, 128, 237, 0.035),
        transparent 65%
    );
}

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

@media (max-width: 900px) {

    .trust3-section {
        padding: 45px 6% 50px;
    }

    .trust3-group {
        grid-template-columns: 190px minmax(0, 1fr);
        gap: 22px;
        padding: 20px 0;
    }

    .trust3-five,
    .trust3-affiliate,
    .trust3-universities {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .trust3-logo,
    .trust3-logo-wide {
        height: 65px;
        padding: 9px 10px;
    }

    .trust3-info p {
        max-width: 190px;
    }
}

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

@media (max-width: 650px) {

    .trust3-section {
        padding: 40px 5% 45px;
    }

    .trust3-header {
        margin-bottom: 25px;
    }

    .trust3-header h2 {
        font-size: 28px !important;
    }

    .trust3-group {
        grid-template-columns: 1fr;
        gap: 15px;
        padding: 22px 0;
    }

    .trust3-info h3 {
        font-size: 17px !important;
    }

    .trust3-info p {
        max-width: 100%;
        font-size: 12px !important;
    }

    .trust3-five,
    .trust3-affiliate,
    .trust3-universities {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
    }

    .trust3-logo,
    .trust3-logo-wide {
        height: 64px;
        padding: 9px;
    }
}



/* =========================================
   OUR EXPERTISE - BACKGROUND IMAGE
========================================= */

.expertise {
    position: relative;

    background:
        linear-gradient(
            rgba(4, 12, 22, 0.45),
            rgba(4, 12, 22, 0.55)
        ),
        url("images/ktm-background.webp");

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

    padding: 60px 8%;
}

/* =========================================
   VISION & MISSION 
========================================= */

.vm-section {
    padding: 55px 8%;
    background: #071c33;
}

.vm-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}


/* HEADER */

.vm-header {
    max-width: 520px;
    margin-bottom: 28px;
}

.vm-header .section-label {
    color: #5fa8ff;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2.5px;
    margin-bottom: 10px;
}

.vm-header h2 {
    color: #ffffff;
    font-size: 32px;
    line-height: 1.1;
    letter-spacing: -0.8px;
    margin-bottom: 10px;
}

.vm-header h2 span {
    color: #5fa8ff;
}

.vm-header > p:last-child {
    color: #8fa2b5;
    font-size: 12px;
    line-height: 1.6;
}


/* ROWS */

.vm-row {
    display: grid;
    grid-template-columns: 45px 0.9fr 1.1fr;
    gap: 25px;
    align-items: start;

    padding: 22px 0;

    border-top: 1px solid #173957;

    transition: 0.3s ease;
}

.vm-row:last-child {
    border-bottom: 1px solid #173957;
}


/* NUMBER */

.vm-number {
    color: #5fa8ff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    padding-top: 3px;
}


/* TITLE */

.vm-title > p {
    color: #7890a7;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;

    margin-bottom: 7px;
}

.vm-title h3 {
    color: #ffffff;

    font-size: 19px;
    line-height: 1.3;

    margin: 0;
}

.vm-title h3 span {
    display: block;
    color: #5fa8ff;
}


/* DESCRIPTION */

.vm-description p {
    max-width: 480px;

    color: #aebdca;

    font-size: 16px;
    line-height: 1.7;

    margin: 0;
}


/* HOVER */

.vm-row:hover {
    padding-left: 8px;
    background: rgba(47, 128, 237, 0.04);
}


/* MOBILE */

@media (max-width: 700px) {

    .vm-section {
        padding: 45px 5%;
    }

    .vm-header h2 {
        font-size: 28px;
    }

    .vm-row {
        grid-template-columns: 30px 1fr;
        gap: 12px;
        padding: 20px 0;
    }

    .vm-description {
        grid-column: 2;
        padding-top: 0;
    }

    .vm-title h3 {
        font-size: 16px;
    }
}



/* =========================================
   CORE BUSINESS + CORE VALUES
========================================= */

.cbv-section {
    width: 100%;
    padding: 85px 5%;
    box-sizing: border-box;

    background:
        linear-gradient(
            rgba(3, 12, 24, 0.75),
            rgba(3, 12, 24, 0.85)
        ),
        url("images/background-core-business.webp");

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


.cbv-container {
    width: 100%;
    max-width: 1510px;

    margin: 0 auto;
}


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

.cbv-header {
    max-width: 900px;
    margin-bottom: 55px;
}

.cbv-header h2 {
    margin: 0 0 25px;

    color: #ffffff;
    font-size: clamp(38px, 4vw, 54px) !important;
    font-weight: 700;
    line-height: 1.12 !important;
    letter-spacing: -1.5px;
}

.cbv-header > p:last-child {
    max-width: 750px;
    margin: 0;

    color: #aebdcc;
    font-size: 15px !important;
    line-height: 1.85 !important;
}

.cbv-label {
    display: block;
    margin: 0 0 25px !important;

    color: #5fa8ff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 3px !important;
    line-height: 1.5;
    text-transform: uppercase;
}


/* =========================================
   SLIDER
========================================= */

.cbv-slider {
    position: relative;

    width: 100%;

    padding: 0 55px 45px;

    box-sizing: border-box;
}

.cbv-window {
    width: 100%;
    overflow: hidden;
}


.cbv-track {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;

    width: 100%;

    transform: translateX(0);

    transition: transform 0.6s ease;
}


.cbv-slide {
    display: block;

    flex: 0 0 100% !important;

    width: 100% !important;
    min-width: 100% !important;

    box-sizing: border-box;
}


/* =========================================
   SLIDE LABEL
========================================= */

.cbv-slide-label {
    display: flex;
    align-items: center;

    gap: 12px;

    margin-bottom: 18px;
}


.cbv-slide-label span {
    color: #5fa8ff;

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


.cbv-slide-label p {
    margin: 0;

    color: #8496a8;

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

    letter-spacing: 2px;
}


/* =========================================
   CORE BUSINESS
========================================= */

.cbv-business-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.cbv-business-card {
    position: relative;

    min-height: 270px;
    padding: 35px;

    box-sizing: border-box;
    background: #081827;

    border: 1px solid #173249;
    border-radius: 4px;

    overflow: hidden;
}


.cbv-business-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 45px;
    height: 2px;

    background: #2f80ed;

    transition: width 0.3s ease;
}


.cbv-business-card:hover::before {
    width: 100%;
}


.cbv-number {
    display: block;

    margin-bottom: 28px;

    color: #5fa8ff;

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


.cbv-business-card h3 {
    margin: 0 0 12px;

    color: #ffffff;

    font-size: 20px !important;
}


.cbv-business-card > p {
    max-width: 550px;

    margin: 0 0 24px;

    color: #a7b8ca;

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

/* TAGS */

.cbv-tags {
    display: flex;
    flex-wrap: wrap;

    gap: 7px;
}


.cbv-tags span {
    padding: 6px 9px;

    color: #8dbdf5;

    background: rgba(47, 128, 237, 0.08);

    border: 1px solid rgba(47, 128, 237, 0.2);
    border-radius: 2px;

    font-size: 9px !important;
}


/* =========================================
   CORE VALUES
========================================= */

.cbv-values-grid {
    display: grid;

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

    gap: 10px 14px;
}


.cbv-value {
    display: grid;

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

    gap: 12px;

    min-height: 88px;

    padding: 16px 18px;

    box-sizing: border-box;

    background: #081827;

    border: 1px solid #173249;
    border-radius: 3px;
}


.cbv-value-last {
    grid-column: 1 / -1;
}


.cbv-value > span {
    color: #5fa8ff;

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


.cbv-value h3 {
    margin: 0 0 5px;

    color: #ffffff;

    font-size: 14px !important;
}


.cbv-value p {
    margin: 0;

    color: #7f92a4;

    font-size: 11px !important;
    line-height: 1.5 !important;
}


/* =========================================
   MIDDLE ARROWS
========================================= */

.cbv-arrow {
    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    z-index: 20;

    width: 42px;
    height: 42px;

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

    padding: 0;

    color: #9eb1c3;

    background: #07131f;

    border: 1px solid #29465f;
    border-radius: 50%;

    cursor: pointer;

    transition: 0.25s ease;
}


.cbv-prev {
    left: 5px;
}


.cbv-next {
    right: 5px;
}


.cbv-arrow:hover {
    color: #ffffff;

    background: #2f80ed;

    border-color: #2f80ed;
}


/* =========================================
   DOTS
========================================= */

.cbv-dots {
    position: absolute;

    left: 50%;
    bottom: 5px;

    transform: translateX(-50%);

    display: flex;
    gap: 7px;
}


.cbv-dot {
    width: 7px;
    height: 7px;

    padding: 0;

    border: 0;
    border-radius: 50%;

    background: #35495c;

    cursor: pointer;

    transition: 0.3s ease;
}


.cbv-dot.active {
    width: 22px;

    border-radius: 10px;

    background: #2f80ed;
}


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

@media (max-width: 750px) {

    .cbv-section {
        padding: 60px 5%;
    }


    .cbv-slider {
        padding: 0 48px 35px;
    }


    .cbv-business-grid,
    .cbv-values-grid {
        grid-template-columns: 1fr;
    }


    .cbv-value-last {
        grid-column: auto;
    }


    .cbv-business-card {
        min-height: auto;
    }

}

@media (max-width: 750px) {
    .cbv-section {
        padding: 60px 5%;
    }

    .cbv-container {
        max-width: 100%;
    }

    .cbv-header {
        margin-bottom: 35px;
    }

    .cbv-header h2 {
        font-size: 36px !important;
    }

    .cbv-slider {
        padding: 0 48px 35px;
    }

    .cbv-business-grid,
    .cbv-values-grid {
        grid-template-columns: 1fr;
    }

    .cbv-business-card {
        min-height: auto;
        padding: 25px;
    }

    .cbv-value-last {
        grid-column: auto;
    }
}

/* =========================================
   SIMPLE FOOTER
========================================= */

.simple-footer {
    width: 100%;
    padding: 20px 8%;

    background: #050a0f;
    border-top: 1px solid #173957;

    text-align: center;
}
.simple-footer p {
    margin: 0;

    color: #718294;

    font-size: 2px;
    letter-spacing: 0.3px;
}

/* =========================================
   BACK TO TOP — ALL PAGES
========================================= */

.back-to-top {
    position: fixed;
    right: 30px;
    bottom: 30px;

    width: 46px;
    height: 46px;

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

    padding: 0;

    background: #071c33;
    border: 1px solid #2f80ed;
    border-radius: 50%;

    cursor: pointer;

    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);

    transition: 
        opacity .3s ease,
        visibility .3s ease,
        transform .3s ease,
        background .3s ease;

    z-index: 9999;
}

.back-to-top.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover {
    background: #2f80ed;
    transform: translateY(-3px);
}


/* Arrow */

.back-to-top-icon {
    display: block;

    width: 9px;
    height: 9px;

    border-top: 2px solid #ffffff;
    border-left: 2px solid #ffffff;

    transform: rotate(45deg);

    margin-top: 5px;
}


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

.contact-card-page {
    min-height: calc(100vh - 90px);

    padding: 65px 8%;

    display: flex;
    align-items: center;

    background:
        radial-gradient(
            circle at 85% 15%,
            rgba(47, 128, 237, 0.10),
            transparent 35%
        ),
        #050d16;
}

.contact-card-page {
    min-height: calc(100vh - 90px);
    padding: 65px 8%;

    display: flex;
    align-items: center;

    background:
        linear-gradient(
            rgba(3, 12, 24, 0.76),
            rgba(3, 12, 24, 0.88)
        ),
        url("images/contact-background.webp");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* =========================================
   MAIN CARD
========================================= */

.contact-card {
    width: 100%;
    max-width: 1200px;

    margin: 0 auto;

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

    background: #071c33;

    border: 1px solid #173957;

    border-radius: 8px;

    overflow: hidden;

    box-shadow:
        0 25px 70px rgba(0, 0, 0, 0.35);
}


/* =========================================
   MAP
========================================= */

.contact-map {
    position: relative;

    min-height: 680px;

    background: #06111d;
}


.contact-map iframe {
    width: 100%;
    height: 100%;

    min-height: 680px;

    border: 0;

    filter:
        grayscale(1)
        invert(0.92)
        contrast(0.85);

    opacity: 0.72;
}


/* DARK MAP OVERLAY */

.contact-map::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(5, 13, 22, 0.72),
            rgba(5, 13, 22, 0.08) 60%
        );

    pointer-events: none;
}


/* MAP BUTTON */

.map-overlay {
    position: absolute;

    left: 28px;
    right: 28px;
    bottom: 28px;

    z-index: 3;

    padding: 18px 20px;

    background: rgba(5, 17, 31, 0.90);

    border: 1px solid rgba(95, 168, 255, 0.25);

    backdrop-filter: blur(8px);

    border-radius: 5px;
}


.map-overlay p {
    color: #ffffff;

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

    letter-spacing: 1.5px;

    margin: 0 0 8px;
}


.map-overlay a {
    color: #5fa8ff;

    font-size: 12px !important;
    font-weight: 600;

    text-decoration: none;
}


.map-overlay a:hover {
    color: #ffffff;
}


/* =========================================
   RIGHT SIDE
========================================= */

.contact-card-content {
    padding: 45px 45px 40px;
}


/* HEADER */

.contact-card-label {
    color: #5fa8ff;

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

    letter-spacing: 3px;

    margin: 0 0 12px;
}


.contact-card-heading h1 {
    color: #ffffff;

    font-size: 40px !important;
    line-height: 1.08 !important;

    letter-spacing: -1px;

    margin: 0 0 14px;
}


.contact-card-heading h1 span {
    display: block;

    color: #5fa8ff;
}


.contact-card-heading > p:last-child {
    max-width: 520px;

    color: #91a5b8;

    font-size: 14px !important;
    line-height: 1.7;

    margin: 0;
}


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

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

    gap: 0 30px;

    margin: 32px 0;
}


.contact-card-detail {
    padding: 16px 0;

    border-top: 1px solid #1b3d59;
}


.contact-card-detail span {
    display: block;

    color: #6e8ba5;

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

    letter-spacing: 1.8px;

    margin-bottom: 7px;
}


.contact-card-detail p {
    color: #e6edf3;

    font-size: 13px !important;
    line-height: 1.6;

    margin: 0;
}


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

.contact-card-form {
    padding-top: 5px;
}


.contact-card-row {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 15px;
}


.contact-card-field {
    margin-bottom: 15px;
}


.contact-card-field label {
    display: block;

    color: #b7c5d1;

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

    margin-bottom: 6px;
}


.contact-card-field input,
.contact-card-field textarea {
    width: 100%;

    padding: 12px 13px;

    background: #06131f;

    border: 1px solid #21415d;

    border-radius: 3px;

    color: #ffffff;

    font-family: inherit;
    font-size: 13px !important;

    outline: none;

    transition: 0.25s ease;
}


.contact-card-field textarea {
    min-height: 110px;

    resize: vertical;
}


.contact-card-field input::placeholder,
.contact-card-field textarea::placeholder {
    color: #5f7487;
}


.contact-card-field input:focus,
.contact-card-field textarea:focus {
    border-color: #2f80ed;

    background: #071b2c;

    box-shadow:
        0 0 0 3px rgba(47, 128, 237, 0.08);
}


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

.contact-card-submit {
    display: inline-flex;

    align-items: center;

    gap: 28px;

    padding: 12px 18px;

    background: #2f80ed;

    border: none;

    border-radius: 3px;

    color: #ffffff;

    font-size: 12px !important;
    font-weight: 600;

    cursor: pointer;

    transition: 0.3s ease;
}


.contact-card-submit span {
    font-size: 16px !important;
}


.contact-card-submit:hover {
    background: #5fa8ff;

    transform: translateY(-2px);
}


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

@media (max-width: 900px) {

    .contact-card-page {
        padding: 50px 6%;
    }

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

    .contact-map {
        min-height: 350px;
    }

    .contact-map iframe {
        min-height: 350px;
    }
}


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

@media (max-width: 600px) {

    .contact-card-page {
        padding: 30px 5%;
    }

    .contact-card-content {
        padding: 32px 22px;
    }

    .contact-card-heading h1 {
        font-size: 32px !important;
    }

    .contact-card-details {
        grid-template-columns: 1fr;
    }

    .contact-card-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .contact-map {
        min-height: 280px;
    }

    .contact-map iframe {
        min-height: 280px;
    }

}

/* =====================================================
   MINIMAL PROJECT ARCHIVE
===================================================== */


/* PROJECT ARCHIVE - RAILWAY BACKGROUND */

.archive-minimal {
    position: relative;
    isolation: isolate;
    padding: 65px 8% 100px;
    background: #050d16;
    overflow: hidden;
}

.archive-minimal::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 750px;
    z-index: -1;
    pointer-events: none;

    background:
        linear-gradient(
            to bottom,
            #050d16 0%,
            rgba(5, 13, 22, 0.98) 20%,
            rgba(5, 13, 22, 0.92) 45%,
            rgba(5, 13, 22, 0.85) 70%,
            rgba(5, 13, 22, 0.85) 100%
        ),
        url("images/background-core-business.webp");

    background-size: 100% 100%, cover;
    background-position: center, center bottom;
    background-repeat: no-repeat;
}

.archive-minimal-wrap {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
}


.archive-minimal-wrap {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .archive-minimal::before {
        height: 450px;
        background-position: 65% bottom;
    }
}



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

.archive-minimal-heading {
    margin-bottom: 45px;
}


.archive-minimal-heading > p {
    margin: 0 0 10px;

    color: #5fa8ff;

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

    letter-spacing: 3px;
}


.archive-minimal-heading h2 {
    margin: 0;

    color: #ffffff;

    font-size: 38px !important;
    line-height: 1.1;
}


.archive-minimal-heading h2 span {
    color: #5fa8ff;
}


.archive-heading-line {
    width: 100%;
    height: 1px;

    margin-top: 25px;

    background: #173957;
}


/* =====================================================
   MAIN LAYOUT
===================================================== */

.archive-minimal-layout {
    display: grid;

    grid-template-columns: 125px 1fr;

    gap: 55px;
}


/* =====================================================
   YEARS
===================================================== */

.archive-year-nav {
    display: flex;
    flex-direction: column;

    align-items: flex-start;
}


.archive-nav-label {
    margin: 0 0 16px;

    color: #506a80;

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

    letter-spacing: 2px;
}


.archive-year-link {
    position: relative;

    width: 100%;

    padding: 9px 0;

    background: transparent;

    border: 0;

    color: #657c90;

    font-family: inherit;

    font-size: 12px !important;
    font-weight: 600;

    text-align: left;

    cursor: pointer;

    transition: .2s ease;
}


.archive-year-link:hover {
    color: #ffffff;

    padding-left: 8px;
}


.archive-year-link.active {
    padding-left: 17px;

    color: #5fa8ff;
}


.archive-year-link.active::before {
    content: "";

    position: absolute;

    left: 0;
    top: 50%;

    width: 9px;
    height: 1px;

    background: #2f80ed;
}


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

.archive-content {
    min-width: 0;
}


/* TOP */

.archive-top {
    display: flex;

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

    margin-bottom: 28px;
}


.archive-top p {
    margin: 0 0 4px;

    color: #60778b;

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

    letter-spacing: 2px;
}


.archive-top h3 {
    margin: 0;

    color: #ffffff;

    font-size: 31px !important;
    line-height: 1;
}


.archive-top > span {
    color: #526a7e;

    font-size: 8px !important;
}


/* =====================================================
   TEXT CATEGORY NAVIGATION
===================================================== */

.archive-type-nav {
    display: flex;

    gap: 30px;

    margin-bottom: 48px;

    border-bottom: 1px solid #173957;
}


.archive-type-link {
    position: relative;

    padding: 0 0 13px;

    background: transparent;

    border: 0;

    color: #6d8193;

    font-family: inherit;

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

    cursor: pointer;

    transition: .2s ease;
}


.archive-type-link:hover {
    color: #ffffff;
}


.archive-type-link.active {
    color: #5fa8ff;
}


.archive-type-link.active::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: -1px;

    height: 2px;

    background: #2f80ed;
}


/* =====================================================
   CATEGORY TITLE
===================================================== */

.archive-section-title {
    margin-bottom: 10px;
}


.archive-section-title > p {
    margin: 0 0 7px;

    color: #5fa8ff;

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

    letter-spacing: 2px;
}


.archive-section-title > div {
    display: flex;

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


.archive-section-title h4 {
    margin: 0;

    color: #ffffff;

    font-size: 24px !important;
}


.archive-section-title span {
    color: #62778a;

    font-size: 7px !important;

    letter-spacing: 1px;
}


.archive-section-title strong {
    color: #ffffff;

    margin-right: 4px;
}


/* =====================================================
   PROJECT LIST
===================================================== */

.archive-list {
    border-top: 1px solid #173957;
}


/* ONE PROJECT */

.archive-item {
    display: grid;

    grid-template-columns: 35px 1fr 90px 25px;

    gap: 15px;

    align-items: center;

    min-height: 105px;

    padding: 18px 0;

    border-bottom: 1px solid #122a3e;

    transition: .2s ease;
}


.archive-item:hover {
    padding-left: 8px;

    background: rgba(7, 28, 51, .22);
}


/* NUMBER */

.archive-item-number {
    color: #45647d;

    font-size: 8px !important;
    font-weight: 700;
}


/* TEXT */

.archive-item-content span {
    color: #5fa8ff;

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

    letter-spacing: 1.5px;
}


.archive-item-content h5 {
    margin: 5px 0;

    color: #ffffff;

    font-size: 14px !important;
    font-weight: 600;
}


.archive-item-content p {
    max-width: 580px;

    margin: 0;

    color: #687e91;

    font-size: 9px !important;
    line-height: 1.6;
}


/* YEAR */

.archive-item-year {
    color: #60768a;

    font-size: 9px !important;

    text-align: right;
}


/* ARROW */

.archive-item-arrow {
    color: #527089;

    font-size: 13px;

    transition: .2s ease;
}


.archive-item:hover .archive-item-arrow {
    color: #5fa8ff;

    transform: translateX(3px);
}


/* =====================================================
   EMPTY
===================================================== */

.archive-list-empty {
    padding: 45px 0;

    color: #607589;

    font-size: 10px !important;

    border-bottom: 1px solid #173957;
}


/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 700px) {

    .archive-minimal {
        padding: 50px 5% 70px;
    }


    .archive-minimal-layout {
        display: block;
    }


    .archive-year-nav {
        display: flex;
        flex-direction: row;

        flex-wrap: wrap;

        gap: 7px;

        margin-bottom: 35px;
    }


    .archive-nav-label {
        width: 100%;
    }


    .archive-year-link {
        width: auto;

        padding: 7px 10px;

        border: 1px solid #173957;
    }


    .archive-year-link.active {
        padding-left: 10px;

        border-color: #2f80ed;
    }


    .archive-year-link.active::before {
        display: none;
    }


    .archive-type-nav {
        gap: 18px;

        overflow-x: auto;
    }


    .archive-item {
        grid-template-columns: 25px 1fr 20px;
    }


    .archive-item-year {
        display: none;
    }

}

/* =====================================================
   PROJECT ARCHIVE TYPOGRAPHY
   MATCH ABOUT US PAGE
===================================================== */

/* Everything uses the website's main font */
.archive-minimal,
.archive-minimal button,
.archive-minimal p,
.archive-minimal span,
.archive-minimal strong,
.archive-minimal h1,
.archive-minimal h2,
.archive-minimal h3,
.archive-minimal h4,
.archive-minimal h5 {
    font-family: inherit !important;
}


/* =========================================
   MAIN ARCHIVE HEADING
========================================= */

.archive-minimal-heading > p {
    color: #5fa8ff;

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

    letter-spacing: 3px;

    text-transform: uppercase;
}


.archive-minimal-heading h2 {
    color: #ffffff;

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

    line-height: 1.15 !important;

    letter-spacing: -0.5px;
}


.archive-minimal-heading h2 span {
    color: #2f80ed;
}


/* =========================================
   YEAR NAVIGATION
========================================= */

.archive-nav-label {
    color: #5fa8ff;

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

    letter-spacing: 2.5px;
}


.archive-year-link {
    color: #7f93a6;

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

    letter-spacing: 0;
}


.archive-year-link:hover {
    color: #ffffff;
}


.archive-year-link.active {
    color: #5fa8ff;

    font-weight: 600 !important;
}


/* =========================================
   SELECTED YEAR
========================================= */

.archive-top p {
    color: #5fa8ff;

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

    letter-spacing: 2.5px;
}


.archive-top h3 {
    color: #ffffff;

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

    line-height: 1.15 !important;
}


.archive-top > span {
    color: #7f93a6;

    font-size: 13px !important;
    font-weight: 400 !important;
}


/* =========================================
   PROJECT / MAINTENANCE / ENGINEERING / EVENT
========================================= */

.archive-type-link {
    color: #8496a8;

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

    letter-spacing: 0;
}


.archive-type-link:hover {
    color: #ffffff;
}


.archive-type-link.active {
    color: #5fa8ff;

    font-weight: 600 !important;
}


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

.archive-section-title > p {
    color: #5fa8ff;

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

    letter-spacing: 2.5px;

    text-transform: uppercase;
}


.archive-section-title h4 {
    color: #ffffff;

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

    line-height: 1.2 !important;
}


.archive-section-title span {
    color: #7f93a6;

    font-size: 10px !important;
    font-weight: 500 !important;
}


/* =========================================
   PROJECT LIST
========================================= */

.archive-item-number {
    color: #5fa8ff;

    font-size: 10px !important;
    font-weight: 700 !important;
}


.archive-item-content > span {
    color: #5fa8ff;

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

    letter-spacing: 2px;

    text-transform: uppercase;
}


.archive-item-content h5 {
    margin: 7px 0 8px;

    color: #ffffff;

    font-size: 18px !important;
    font-weight: 600 !important;

    line-height: 1.35 !important;
}


.archive-item-content p {
    color: #7f93a6;

    font-size: 14px !important;
    font-weight: 400 !important;

    line-height: 1.7 !important;
}


.archive-item-year {
    color: #7f93a6;

    font-size: 12px !important;
    font-weight: 500 !important;
}


.archive-item-arrow {
    color: #5fa8ff;

    font-size: 16px !important;
}

/* ==========================================================
   WHO WE ARE
========================================================== */

.about2-overview {
    padding: 85px 8% 90px;

    background: #050a0f;
}


.about2-container {
    width: 100%;
    max-width: 1200px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(0, .88fr)
        minmax(0, 1.12fr);

    gap: 85px;

    align-items: center;
}



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

.about2-overview-content {
    max-width: 530px;
}


.about2-section-label {
    display: flex;
    align-items: center;

    gap: 15px;

    margin-bottom: 20px;
}


.about2-section-label > span {
    width: 28px;
    height: 2px;

    background: #2f80ed;
}


.about2-section-label p {
    margin: 0;

    color: #5fa8ff;

    font-family: inherit;

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

    letter-spacing: 3px;
}


/* HEADING */

.about2-overview-content h2 {
    margin: 0 0 27px;

    color: #ffffff;

    font-family: inherit;

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

    line-height: 1.15 !important;

    letter-spacing: -.5px;
}


.about2-overview-content h2 span {
    display: block;

    color: #2f80ed;
}


/* BODY TEXT */

.about2-overview-content > p {
    margin: 0 0 17px;

    color: #7f93a6;

    font-family: inherit;

    font-size: 14px !important;
    font-weight: 400;

    line-height: 1.75 !important;
}


.about2-overview-content > p:last-child {
    margin-bottom: 0;
}



/* ==========================================================
   RIGHT IMAGE
========================================================== */

.about2-overview-visual {
    position: relative;

    height: 440px;

    border: 1px solid #173957;

    overflow: hidden;

    background: #07131f;
}


/* BLUE CORNER DETAIL */

.about2-image-line {
    position: absolute;

    top: -1px;
    left: -1px;

    width: 75px;
    height: 75px;

    border-top: 2px solid #2f80ed;
    border-left: 2px solid #2f80ed;

    z-index: 3;

    pointer-events: none;
}


/* IMAGE */

.about2-overview-visual > img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    opacity: .78;

    transition:
        transform .5s ease,
        opacity .5s ease;
}


.about2-overview-visual:hover > img {
    transform: scale(1.025);

    opacity: .9;
}



/* ==========================================================
   IMAGE CAPTION
========================================================== */

.about2-image-caption {
    position: absolute;

    left: 25px;
    bottom: 25px;

    min-width: 300px;

    padding: 16px 20px;

    background: rgba(5, 17, 31, .92);

    border: 1px solid #22527b;

    border-radius: 4px;

    backdrop-filter: blur(8px);
}


.about2-image-caption span {
    display: block;

    margin-bottom: 6px;

    color: #5fa8ff;

    font-family: inherit;

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

    letter-spacing: 2px;
}


.about2-image-caption p {
    margin: 0;

    color: #ffffff;

    font-family: inherit;

    font-size: 14px !important;
    font-weight: 500 !important;
}



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

@media (max-width: 900px) {

    .about2-container {
        grid-template-columns: 1fr;

        gap: 50px;
    }


    .about2-overview-content {
        max-width: 650px;
    }


    .about2-overview-visual {
        height: 400px;
    }

}



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

@media (max-width: 600px) {

    .about2-hero {
        min-height: 390px;

        padding: 60px 5%;
    }


    .about2-hero h1 {
        font-size: 40px !important;
    }


    .about2-overview {
        padding: 65px 5%;
    }


    .about2-overview-content h2 {
        font-size: 31px !important;
    }


    .about2-overview-visual {
        height: 320px;
    }


    .about2-image-caption {
        left: 15px;
        right: 15px;
        bottom: 15px;

        min-width: 0;
    }

}

/* ==========================================================
   ABOUT V2 — VISION & MISSION
========================================================== */

.about2-vm {
    padding: 80px 8%;

    background: #050a0f;
}


.about2-vm-wrap {
    width: 100%;
    max-width: 1200px;

    margin: 0 auto;
}


.about2-vm-heading {
    margin-bottom: 45px;
}


.about2-vm-heading h2 {
    margin: 0;

    color: #ffffff;

    font-family: inherit;

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

    line-height: 1.15 !important;
}


.about2-vm-heading h2 span {
    color: #2f80ed;
}


/* TWO COLUMNS */

.about2-vm-grid {
    display: grid;

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

    border-top: 1px solid #1c354a;
    border-bottom: 1px solid #1c354a;
}


.about2-vm-item {
    display: grid;

    grid-template-columns: 55px 1fr;

    gap: 25px;

    padding: 38px 45px 40px 0;
}


.about2-vm-item + .about2-vm-item {
    padding-left: 45px;

    border-left: 1px solid #1c354a;
}


/* NUMBER */

.about2-vm-number {
    color: #345a78;

    font-family: inherit;

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

    letter-spacing: 1px;
}


/* SMALL LABEL */

.about2-vm-label {
    margin: 0 0 10px;

    color: #5fa8ff;

    font-family: inherit;

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

    letter-spacing: 2.5px;
}


/* TITLE */

.about2-vm-item h3 {
    max-width: 380px;

    margin: 0 0 16px;

    color: #ffffff;

    font-family: inherit;

    font-size: 22px !important;
    font-weight: 600 !important;

    line-height: 1.35 !important;
}


/* DESCRIPTION */

.about2-vm-text {
    max-width: 440px;

    margin: 0;

    color: #7f93a6;

    font-family: inherit;

    font-size: 13px !important;
    font-weight: 400;

    line-height: 1.75 !important;
}


/* MOBILE */

@media (max-width: 700px) {

    .about2-vm {
        padding: 65px 5%;
    }


    .about2-vm-heading h2 {
        font-size: 31px !important;
    }


    .about2-vm-grid {
        grid-template-columns: 1fr;
    }


    .about2-vm-item,
    .about2-vm-item + .about2-vm-item {
        padding: 30px 0;

        border-left: 0;
    }


    .about2-vm-item + .about2-vm-item {
        border-top: 1px solid #1c354a;
    }

}

/* =========================================
   VISION & MISSION POINTS
========================================= */

.about2-vm-points {
    list-style: none;
    margin: 22px 0 0;
    padding: 0;
}

.about2-vm-points li {
    position: relative;

    margin-bottom: 15px;
    padding: 0 0 15px 24px;

    color: #7f93a6;

    font-family: inherit;
    font-size: 13px !important;
    font-weight: 400;

    line-height: 1.65 !important;

    border-bottom: 1px solid #14293a;
}

.about2-vm-points li:last-child {
    margin-bottom: 0;
    padding-bottom: 0;

    border-bottom: 0;
}


/* BLUE MARKER */

.about2-vm-points li::before {
    content: "";

    position: absolute;

    top: 8px;
    left: 0;

    width: 7px;
    height: 7px;

    border: 1px solid #2f80ed;

    transform: rotate(45deg);
}


/* HOVER */

.about2-vm-points li {
    transition: color .25s ease;
}

.about2-vm-points li:hover {
    color: #d1dbe4;
}

/* ==========================================================
   ABOUT V2 — CORE BUSINESS
========================================================== */

.about2-business {
    padding: 80px 8% 90px;
    background: #07111b;
}

.about2-business-wrap {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}


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

.about2-business-header {
    margin-bottom: 50px;
}

.about2-business-heading {
    display: grid;
    grid-template-columns: 1fr 0.8fr;
    gap: 80px;
    align-items: end;
}

.about2-business-heading h2 {
    max-width: 550px;
    margin: 0;

    color: #ffffff;

    font-family: inherit;
    font-size: 38px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
}

.about2-business-heading h2 span {
    display: block;
    color: #2f80ed;
}

.about2-business-heading > p {
    max-width: 480px;
    margin: 0;

    color: #7f93a6;

    font-family: inherit;
    font-size: 13px !important;
    font-weight: 400;
    line-height: 1.7 !important;
}


/* =========================================
   BUSINESS LIST
========================================= */

.about2-business-list {
    border-top: 1px solid #1c354a;
}


/* ONE ROW */

.about2-business-row {
    display: grid;

    grid-template-columns:
        45px
        minmax(250px, 0.9fr)
        minmax(300px, 1.1fr)
        30px;

    gap: 30px;

    align-items: center;

    min-height: 125px;

    padding: 25px 5px;

    border-bottom: 1px solid #1c354a;

    transition:
        padding .25s ease,
        background .25s ease;
}


/* HOVER */

.about2-business-row:hover {
    padding-left: 15px;
    padding-right: 15px;

    background: rgba(47, 128, 237, .035);
}


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

.about2-business-number {
    color: #3f607a;

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

    letter-spacing: 1px;
}


/* =========================================
   BUSINESS NAME
========================================= */

.about2-business-name > p {
    margin: 0 0 7px;

    color: #5fa8ff;

    font-family: inherit;
    font-size: 8px !important;
    font-weight: 700 !important;

    letter-spacing: 2px;
}

.about2-business-name h3 {
    margin: 0;

    color: #ffffff;

    font-family: inherit;
    font-size: 18px !important;
    font-weight: 600 !important;

    line-height: 1.35 !important;
}


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

.about2-business-description {
    max-width: 480px;
    margin: 0;

    color: #74899c;

    font-family: inherit;
    font-size: 12px !important;
    font-weight: 400;

    line-height: 1.7 !important;
}


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

.about2-business-arrow {
    color: #496b85;

    font-size: 17px !important;

    text-align: right;

    transition:
        color .25s ease,
        transform .25s ease;
}

.about2-business-row:hover .about2-business-arrow {
    color: #5fa8ff;

    transform: translateX(4px);
}


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

@media (max-width: 850px) {

    .about2-business-heading {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .about2-business-row {
        grid-template-columns:
            35px
            minmax(200px, 1fr)
            1fr
            20px;

        gap: 20px;
    }

}


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

@media (max-width: 650px) {

    .about2-business {
        padding: 65px 5%;
    }

    .about2-business-heading h2 {
        font-size: 31px !important;
    }

    .about2-business-header {
        margin-bottom: 35px;
    }

    .about2-business-row {
        grid-template-columns: 30px 1fr 20px;

        gap: 15px;

        min-height: 0;

        padding: 23px 0;
    }

    .about2-business-name {
        grid-column: 2;
    }

    .about2-business-description {
        grid-column: 2;

        margin-top: -5px;
    }

    .about2-business-arrow {
        grid-column: 3;
        grid-row: 1 / 3;
    }

}

/* ==========================================================
   ABOUT V2 — CORE BUSINESS CARDS
========================================================== */

.about2-business-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 14px;
}


/* CARD */

.about2-business-card {
    position: relative;

    min-height: 285px;

    padding: 25px 23px 20px;

    display: flex;
    flex-direction: column;

    background:
        linear-gradient(
            145deg,
            #091b2c 0%,
            #071522 100%
        );

    border: 1px solid #173957;
    border-radius: 5px;

    overflow: hidden;

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


/* BLUE TOP DETAIL */

.about2-business-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 45px;
    height: 2px;

    background: #2f80ed;

    transition: width .3s ease;
}


/* HOVER */

.about2-business-card:hover {
    transform: translateY(-5px);

    border-color: #2f80ed;

    background:
        linear-gradient(
            145deg,
            #0a2136 0%,
            #071827 100%
        );
}


.about2-business-card:hover::before {
    width: 100%;
}


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

.about2-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 35px;
}


.about2-card-top > span {
    color: #49677f;

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


.about2-card-top p {
    margin: 0;

    color: #5fa8ff;

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

    letter-spacing: 1.5px;

    text-align: right;
}


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

.about2-business-card h3 {
    margin: 0 0 15px;

    color: #ffffff;

    font-family: inherit;

    font-size: 18px !important;
    font-weight: 600 !important;

    line-height: 1.35 !important;
}


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

.about2-card-text {
    margin: 0 0 25px;

    color: #788da0;

    font-family: inherit;

    font-size: 12px !important;
    font-weight: 400;

    line-height: 1.7 !important;
}


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

.about2-card-bottom {
    margin-top: auto;

    padding-top: 15px;

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

    border-top: 1px solid #173957;
}


.about2-card-bottom > span:first-child {
    color: #526d83;

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

    letter-spacing: 1.5px;
}


.about2-card-arrow {
    color: #5fa8ff;

    font-size: 16px !important;

    transition: transform .25s ease;
}


.about2-business-card:hover .about2-card-arrow {
    transform: translateX(4px);
}


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

@media (max-width: 950px) {

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

}


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

@media (max-width: 550px) {

    .about2-business-cards {
        grid-template-columns: 1fr;
    }


    .about2-business-card {
        min-height: 245px;
    }

}


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

body {
    font-family: "Inter", sans-serif;
    font-size: 15px;
    background-color: #050a0f;
    color: white;
}

p {
    font-size: 14px;
    line-height: 1.7;
}

h1 {
    font-size: 50px;
    line-height: 1.08;
}

h2 {
    font-size: 36px;
    line-height: 1.15;
}

h3 {
    font-size: 18px;
    line-height: 1.3;
}


/* =========================================
   PROJECT DETAILS PAGE
========================================= */

.pd-container {
    width: 84%;
    max-width: 1200px;
    margin: 0 auto;
}

.pd-hero {
    padding: 75px 0 55px;
    background: linear-gradient(135deg, #071c33, #050a0f);
    border-bottom: 1px solid #163a5f;
}

.pd-back {
    display: inline-block;
    margin-bottom: 40px;
    color: #a8bfd7;
    text-decoration: none;
    font-size: 13px;
    transition: color .3s;
}

.pd-back:hover {
    color: #2f80ed;
}

.pd-label {
    margin-bottom: 14px;
    color: #2f80ed;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.pd-hero h1 {
    max-width: 850px;
    margin: 0 0 22px;
    font-size: clamp(30px, 3vw, 44px);
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
}

.pd-intro {
    max-width: 750px;
    color: #aab9c9;
    font-size: 14px;
    line-height: 1.8;
}

/* MAIN PROJECT IMAGE */

.pd-image-section {
    padding: 55px 0;
    background: #050a0f;
}

#pd-main-image {
    display: block;
    width: 100%;
    max-height: 550px;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 8px;
}

/* PROJECT INFORMATION */

.pd-information {
    padding: 45px 0 85px;
    background: #050a0f;
}

.pd-info-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.8fr) minmax(260px, 1fr);
    gap: 90px;
    align-items: start;
}

.pd-description h2,
.pd-gallery-section h2 {
    margin: 0 0 25px;
    color: #fff;
    font-size: 34px;
    font-weight: 700;
}

.pd-description h2 span,
.pd-gallery-section h2 span {
    color: #2f80ed;
}

.pd-description > p:not(.pd-label) {
    color: #aab9c9;
    font-size: 14px;
    line-height: 1.9;
}

.pd-description h3 {
    margin-top: 35px;
    margin-bottom: 18px;
    font-size: 19px;
    color: #fff;
}

.pd-description ul {
    padding-left: 20px;
    color: #aab9c9;
    font-size: 14px;
    line-height: 2;
}

.pd-description li::marker {
    color: #2f80ed;
}

/* PROJECT FACTS */

.pd-facts {
    padding: 30px;
    border: 1px solid #1b354d;
    border-radius: 8px;
    background: #091726;
}

.pd-facts h3 {
    margin: 0 0 25px;
    font-size: 17px;
    color: #fff;
}

.pd-fact {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 0;
    border-top: 1px solid #1c3044;
}

.pd-fact span {
    color: #7990a6;
    font-size: 12px;
}

.pd-fact strong {
    color: #fff;
    font-size: 14px;
    font-weight: 600;
}

/* GALLERY */

.pd-gallery-section {
    padding: 75px 0 90px;
    background: #07111d;
    border-top: 1px solid #163a5f;
}

.pd-gallery {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: 35px;
}

.pd-gallery img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 5px;
    transition: transform .3s;
}

.pd-gallery img:hover {
    transform: scale(1.02);
}

/* BOTTOM CTA */

.pd-bottom {
    padding: 55px 0;
    background: #071c33;
    border-top: 1px solid #163a5f;
}

.pd-bottom .pd-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
}

.pd-bottom h2 {
    margin: 0;
    font-size: 25px;
    color: #fff;
}

.pd-button {
    display: inline-block;
    padding: 14px 22px;
    background: #2f80ed;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 4px;
}

.pd-button:hover {
    background: #1c65c2;
}

/* RESPONSIVE */

@media (max-width: 768px) {
    .pd-container {
        width: 90%;
    }

    .pd-hero {
        padding: 55px 0;
    }

    .pd-info-layout {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .pd-gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pd-bottom .pd-container {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 480px) {
    .pd-gallery {
        grid-template-columns: 1fr;
    }
}

.project-title-link {
    color: inherit;
    text-decoration: none;
    font: inherit;
    transition: color 0.3s ease;
}

.project-title-link:hover {
    color: #2f80ed;
}

/* PROJECT HIGHLIGHTS - FIX LARGE GAPS */

.pd-gallery-section .pd-gallery {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 18px;
    row-gap: 18px;
    align-items: start;
    align-content: start;
    grid-auto-rows: auto;
    margin-top: 35px;
}

.pd-gallery-section .pd-gallery > * {
    min-width: 0;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    align-self: start;
}

.pd-gallery-section .pd-gallery img {
    display: block;
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: 5px;
}

@media (max-width: 768px) {
    .pd-gallery-section .pd-gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    .pd-gallery-section .pd-gallery {
        grid-template-columns: 1fr;
    }
}


/* PROJECT HIGHLIGHTS - REMOVE EXCESS EMPTY SPACE */

.pd-gallery-section {
    height: auto !important;
    min-height: 0 !important;
    padding: 65px 0 75px;
}

.pd-gallery-section .pd-container {
    height: auto !important;
    min-height: 0 !important;
}

.pd-gallery-section #pd-gallery {
    height: auto !important;
    min-height: 0 !important;

    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: 220px;

    gap: 18px;
    align-content: start;
    margin-top: 35px;
}

.pd-gallery-section #pd-gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 768px) {
    .pd-gallery-section #pd-gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    .pd-gallery-section #pd-gallery {
        grid-template-columns: 1fr;
    }
}


/* =========================================
   PROJECT PHOTO VIEWER - NEW DESIGN
========================================= */

.pd-gallery img {
    cursor: zoom-in;
}

/* FULL SCREEN */

.pd-lightbox {
    position: fixed;
    inset: 0;
    z-index: 99999;

    display: none;
    flex-direction: column;

    background: #080d14;
    font-family: "Inter", sans-serif;
}

.pd-lightbox.active {
    display: flex;
}

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

.pd-viewer-header {
    height: 85px;
    min-height: 85px;
    padding: 0 5%;

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

    background: #071c33;
    border-bottom: 1px solid #1a354e;
}

.pd-viewer-brand img {
    width: 145px;
    height: 60px;
    object-fit: contain;
    display: block;
}

.pd-viewer-actions {
    display: flex;
    align-items: center;
    gap: 25px;
}

.pd-viewer-title {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    color: #8ea8c1;
}

.pd-lightbox-close {
    position: static;

    width: 42px;
    height: 42px;

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

    border: 1px solid #29465f;
    border-radius: 50%;

    background: #10263d;
    color: white;

    font-size: 27px;
    cursor: pointer;
    transition: 0.3s;
}

.pd-lightbox-close:hover {
    background: #2f80ed;
    border-color: #2f80ed;
}

/* =========================================
   CENTER PHOTO
========================================= */

.pd-viewer-stage {
    flex: 1;
    min-height: 0;

    display: grid;
    grid-template-columns: 70px minmax(0, 1fr) 70px;
    align-items: center;

    gap: 22px;
    width: min(92%, 1400px);
    margin: 0 auto;
}

.pd-viewer-photo {
    display: flex;
    align-items: center;
    justify-content: center;

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

    padding: 25px 0;
}

#pd-lightbox-image {
    display: block;

    width: auto;
    height: auto;

    max-width: 100%;
    max-height: 100%;

    object-fit: contain;
    border-radius: 5px;
}

/* ARROWS */

.pd-lightbox-arrow {
    position: static;
    transform: none;

    width: 48px;
    height: 48px;

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

    justify-self: center;

    border: 1px solid #29465f;
    border-radius: 50%;

    background: #10263d;
    color: white;

    font-size: 22px;
    cursor: pointer;
    transition: 0.3s;
}

.pd-lightbox-arrow:hover {
    background: #2f80ed;
    border-color: #2f80ed;
}

/* =========================================
   BOTTOM INDICATOR
========================================= */

.pd-viewer-bottom {
    height: 75px;
    min-height: 75px;

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

    gap: 10px;

    border-top: 1px solid #1a354e;
    background: #080d14;
}

.pd-viewer-indicator {
    width: 45px;
    height: 3px;
    border-radius: 3px;
    background: #2f80ed;
}

.pd-lightbox-counter {
    position: static;
    transform: none;

    font-size: 12px;
    font-weight: 500;
    letter-spacing: 2px;

    color: #9fb4c9;
}

/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 768px) {

    .pd-viewer-header {
        height: 70px;
        min-height: 70px;
        padding: 0 20px;
    }

    .pd-viewer-brand img {
        width: 110px;
        height: 50px;
    }

    .pd-viewer-title {
        display: none;
    }

    .pd-viewer-stage {
        width: 100%;
        grid-template-columns: 42px minmax(0, 1fr) 42px;
        gap: 5px;
        padding: 0 8px;
        box-sizing: border-box;
    }

    .pd-viewer-photo {
        padding: 15px 0;
    }

    .pd-lightbox-arrow {
        width: 35px;
        height: 35px;
        font-size: 17px;
    }

    .pd-viewer-bottom {
        height: 65px;
        min-height: 65px;
    }
}

/* =========================================
   BACK TO TOP - PROJECT DETAILS
========================================= */

#backToTop {
    position: fixed;
    bottom: 30px;
    right: 30px;

    width: 45px;
    height: 45px;

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

    background: #123b61;
    color: #ffffff;

    border: 1px solid #3478b9;
    border-radius: 50%;

    font-size: 22px;
    cursor: pointer;

    z-index: 9999;

    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);

    transition: all 0.3s ease;
}

/* Visible when scrolling */
#backToTop.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Hover */
#backToTop:hover {
    background: #2f80ed;
    border-color: #5fa8ff;
    transform: translateY(-4px);
}

/* Mobile */
@media (max-width: 600px) {
    #backToTop {
        width: 40px;
        height: 40px;
        bottom: 20px;
        right: 20px;
        font-size: 19px;
    }
}


/* =========================================
   PERENCANA - SERVICES PAGE
========================================= */

:root {
    --svc-bg: #03090e;
    --svc-bg-alt: #07131e;
    --svc-navy: #0b2135;
    --svc-blue: #4d9cff;
    --svc-text: #ffffff;
    --svc-muted: #8b9daf;
    --svc-border: #1a3245;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--svc-bg);
    color: var(--svc-text);
    font-family: Arial, Helvetica, sans-serif;
}

.svc-container {
    width: 90%;
    max-width: 1280px;
    margin: 0 auto;
}

.svc-eyebrow {
    display: block;
    color: var(--svc-blue);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
}

.svc-container h1,
.svc-container h2,
.svc-container h3,
.svc-container p {
    margin-top: 0;
}

.svc-container h2 {
    font-size: clamp(26px, 2.5vw, 36px);
    line-height: 1.2;
    font-weight: 700;
}

.svc-container h2 span {
    color: var(--svc-blue);
}


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

.pd-navbar {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(3, 9, 14, 0.97);
    border-bottom: 1px solid var(--svc-border);
    backdrop-filter: blur(12px);
}

.pd-nav-inner {
    width: 84%;
    max-width: 1280px;
    min-height: 76px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 35px;
}

.pd-nav-brand img {
    display: block;
    width: 125px;
    height: 58px;
    object-fit: contain;
}

.pd-nav-links {
    display: flex;
    align-items: center;
    gap: 30px;
}

.pd-nav-links a {
    color: #a6b5c3;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: color .25s;
}

.pd-nav-links a:hover,
.pd-nav-links a.active {
    color: var(--svc-blue);
}

.pd-menu-toggle {
    display: none;
    color: white;
    background: none;
    border: 0;
    font-size: 24px;
    cursor: pointer;
}

/* =========================================
   NAVBAR - RIGHT BACKGROUND IMAGE FADE
========================================= */

.pd-navbar {
    position: sticky;
    top: 0;
    z-index: 1000;
    isolation: isolate;
    background: #03090e;
    overflow: hidden;
}

/* BACKGROUND IMAGE */

.pd-navbar::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;

    width: 75%;
    height: 100%;

    background-image: url("images/nav-bg.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /* FADE FROM TRANSPARENT LEFT TO VISIBLE RIGHT */
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        rgba(0, 0, 0, 0.25) 25%,
        rgba(0, 0, 0, 0.7) 55%,
        black 100%
    );

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

    opacity: 0.45;
    z-index: -1;
    pointer-events: none;
}

/* KEEP NAVBAR CONTENT ABOVE IMAGE */

.pd-nav-inner {
    position: relative;
    z-index: 1;
}

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

.svc-hero {
    padding: 105px 0 55px;
    background:
        radial-gradient(ellipse at 85% 15%,
            rgba(29, 88, 145, .22),
            transparent 48%),
        linear-gradient(125deg, #091d30, #03090e 75%);
    border-bottom: 1px solid var(--svc-border);
}

.svc-hero h1 {
    max-width: 1510px;
    margin: 22px 0 22px;
    font-size: clamp(36px, 4.4vw, 62px);
    line-height: 1.1;
    letter-spacing: -1.5px;
}

.svc-hero h1 span {
    display: block;
    color: var(--svc-blue);
}

.svc-hero p {
    max-width: 620px;
    color: #a0b2c2;
    font-size: 15px;
    line-height: 1.8;
}

.svc-hero-bottom {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 35px;
    margin-top: 60px;
    padding-top: 25px;
    border-top: 1px solid var(--svc-border);
}

.svc-hero-bottom span {
    color: #718ba2;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
}


/* =========================================
   INTRODUCTION
========================================= */

.svc-intro {
    padding: 90px 0;
    background: var(--svc-bg);
}

.svc-intro-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 100px;
    align-items: start;
}

.svc-intro h2 {
    margin-top: 20px;
}

.svc-intro h2 span {
    display: block;
}

.svc-intro-text p {
    color: var(--svc-muted);
    font-size: 14px;
    line-height: 1.9;
    margin-bottom: 18px;
}

/* =========================================
   ENGINEERING PROCESS
========================================= */

.svc-process {
    padding: 95px 0;
    background: var(--svc-bg);
}

.svc-process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.svc-process-item {
    padding-top: 22px;
    border-top: 2px solid #2f80ed;
}

.svc-process-item > span {
    color: var(--svc-blue);
    font-size: 12px;
    font-weight: 700;
}

.svc-process-item h3 {
    margin: 20px 0 12px;
    font-size: 19px;
}

.svc-process-item p {
    color: var(--svc-muted);
    font-size: 12px;
    line-height: 1.8;
}


/* =========================================
   SYSTEMS SUPPORTED
========================================= */

.svc-systems {
    padding: 95px 0;
    background: #091a29;
}

.svc-systems-grid {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 100px;
}

.svc-systems h2 {
    margin: 20px 0;
}

.svc-systems-grid > div:first-child > p {
    max-width: 380px;
    color: var(--svc-muted);
    font-size: 14px;
    line-height: 1.8;
}

.svc-system-item {
    display: grid;
    grid-template-columns: 35px 1fr 20px;
    align-items: center;
    gap: 15px;
    min-height: 80px;
    border-bottom: 1px solid #294055;
}

.svc-system-item:first-child {
    border-top: 1px solid #294055;
}

.svc-system-item span {
    color: var(--svc-blue);
    font-size: 12px;
}

.svc-system-item h3 {
    margin: 0;
    color: #dce6ef;
    font-size: 15px;
    font-weight: 500;
}

/* =========================================
   SYSTEMS SUPPORTED - BACKGROUND IMAGE
========================================= */

.svc-systems {
    position: relative;
    padding: 95px 0;

    background:
        linear-gradient(
            90deg,
            rgba(3, 9, 14, 0.96) 0%,
            rgba(5, 18, 30, 0.90) 50%,
            rgba(7, 25, 42, 0.78) 100%
        ),
        url("images/contact-background.webp");

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

/* KEEP CONTENT ABOVE BACKGROUND */

.svc-systems > .svc-container {
    position: relative;
    z-index: 1;
}



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

.svc-project-link {
    padding: 75px 0;
    background: var(--svc-bg);
}

.svc-project-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.svc-project-inner h2 {
    margin: 14px 0;
}

.svc-project-inner p {
    margin: 0;
    color: var(--svc-muted);
    font-size: 13px;
}

.svc-outline-button {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 35px;
    padding: 17px 22px;
    border: 1px solid #3478b9;
    color: white;
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    transition: background .25s;
}

.svc-outline-button:hover {
    background: #123b61;
}


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

.svc-cta {
    padding: 65px 0;
    background: linear-gradient(110deg, #071b2d, #050b11);
    border-top: 1px solid #183b58;
    border-bottom: 1px solid #183b58;
}

.svc-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 65px;
}

.svc-cta-content {
    max-width: 700px;
    padding-left: 30px;
    border-left: 3px solid #2f80ed;
}

.svc-cta h2 {
    margin: 15px 0;
    font-size: clamp(28px, 2.4vw, 40px);
}

.svc-cta p {
    margin: 0;
    color: var(--svc-muted);
    font-size: 13px;
    line-height: 1.7;
}

.svc-cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 35px;
    min-width: 235px;
    padding: 21px 25px;
    background: #2366ad;
    border: 1px solid #3988dc;
    border-radius: 4px;
    color: white;
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    transition: background .25s, transform .25s;
}

.svc-cta-button:hover {
    background: #2f80ed;
    transform: translateY(-2px);
}


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

.pd-footer {
    padding: 58px 8% 0;
    background: #03090e;
    border-top: 1px solid #17364f;
}

.pd-footer-inner {
    max-width: 1280px;
    margin: 0 auto;
}

.pd-footer-top {
    display: grid;
    grid-template-columns: 1.35fr .7fr 1fr 1.15fr;
    gap: 55px;
    padding-bottom: 45px;
}

.pd-footer-logo {
    display: block;
    width: 165px;
    height: 90px;
    overflow: hidden;
    margin-bottom: 15px;
}

.pd-footer .pd-footer-logo img {
    display: block !important;
    width: 165px !important;
    height: 90px !important;
    max-width: 165px !important;
    max-height: 90px !important;
    object-fit: contain !important;
    transform: none !important;
}

.pd-footer-brand > p {
    max-width: 230px;
    color: #718598;
    font-size: 12px;
    line-height: 1.7;
}

.pd-footer-title {
    margin: 0 0 22px;
    color: white;
    font-size: 13px;
    font-weight: 700;
}

.pd-footer-title::after {
    content: "";
    display: block;
    width: 24px;
    height: 2px;
    margin-top: 9px;
    background: #2f80ed;
}

.pd-footer-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 11px;
}

.pd-footer-links a {
    color: #7f92a5;
    font-size: 12px;
    text-decoration: none;
}

.pd-footer-links a:hover {
    color: white;
}

.pd-footer-contact strong {
    display: block;
    margin-bottom: 11px;
    font-size: 12px;
}

.pd-footer-contact address {
    margin-bottom: 15px;
    color: #7f92a5;
    font-size: 12px;
    font-style: normal;
    line-height: 1.7;
}

.pd-footer-email {
    color: var(--svc-blue);
    font-size: 12px;
    text-decoration: none;
}

.pd-footer-bottom {
    padding: 25px 0;
    border-top: 1px solid #162633;
}

.pd-footer-bottom p {
    margin: 0;
    color: #607487;
    font-size: 10px;
}


/* =========================================
   BACK TO TOP
========================================= */

#svc-back-top {
    position: fixed;
    right: 28px;
    bottom: 28px;
    z-index: 999;
    width: 43px;
    height: 43px;
    border: 1px solid #3478b9;
    border-radius: 50%;
    background: #123b61;
    color: white;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: .3s ease;
}

#svc-back-top.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

#svc-back-top:hover {
    background: #2f80ed;
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 1000px) {
    .svc-intro-grid,
    .svc-systems-grid {
        gap: 50px;
    }

    .svc-service-row {
        gap: 40px;
    }

    .pd-footer-top {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 800px) {
    .pd-menu-toggle {
        display: block;
    }

    .pd-nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        padding: 25px 8%;
        background: #03090e;
        border-bottom: 1px solid #17364f;
        flex-direction: column;
        align-items: flex-start;
        gap: 22px;
    }

    .pd-nav-links.open {
        display: flex;
    }

    .svc-intro-grid,
    .svc-service-row,
    .svc-systems-grid {
        grid-template-columns: 1fr;
    }

    .svc-reverse .svc-service-image {
        order: 0;
    }

    .svc-process-grid {
        grid-template-columns: 1fr 1fr;
    }

    .svc-cta-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 30px;
    }
}

@media (max-width: 600px) {
    .svc-container,
    .pd-nav-inner {
        width: 88%;
    }

    .svc-hero {
        padding: 75px 0 40px;
    }

    .svc-hero h1 {
        font-size: 36px;
    }

    .svc-hero-bottom {
        margin-top: 40px;
        gap: 14px 20px;
    }

    .svc-intro,
    .svc-services,
    .svc-process,
    .svc-systems {
        padding: 65px 0;
    }

    .svc-section-heading {
        display: block;
        margin-bottom: 35px;
    }

    .svc-section-heading > p {
        margin-top: 15px;
    }

    .svc-service-row {
        gap: 25px;
        padding: 30px 0;
    }

    .svc-service-image {
        height: 240px;
    }

    .svc-process-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .svc-project-inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .svc-cta {
        padding: 50px 0;
    }

    .svc-cta-content {
        padding-left: 20px;
    }

    .pd-footer {
        padding: 45px 6% 0;
    }

    .pd-footer-top {
        grid-template-columns: 1fr;
        gap: 35px;
    }
}

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

    .svc-service-image img,
    #svc-back-top,
    .svc-cta-button {
        transition: none;
    }
}


/* NAVBAR LOGO SIZE */

.pd-nav-brand {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.pd-nav-brand img {
    width: 165px;
    height: 70px;
    max-width: none;
    object-fit: contain;
    display: block;
}

/* Keep navbar compact */
.pd-nav-inner {
    min-height: 90px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Mobile */
@media (max-width: 768px) {
    .pd-nav-brand img {
        width: 140px;
        height: 60px;
    }

    .pd-nav-inner {
        min-height: 75px;
    }
}


/* =========================================
   ABOUT US - HERO SECTION
========================================= */

.pd2-hero {
    position: relative;
    width: 100%;
    min-height: 620px;

    display: flex;
    align-items: stretch;

    background:
        linear-gradient(
            90deg,
            rgba(3, 9, 14, 0.96) 0%,
            rgba(3, 9, 14, 0.88) 25%,
            rgba(3, 9, 14, 0.55) 55%,
            rgba(3, 9, 14, 0.12) 100%
        ),
        url("images/about-hero.webp");

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

    overflow: hidden;
}

/* =========================================
   MAIN CONTAINER
========================================= */

.pd2-hero > .pd2-container {
    width: 90%;
    max-width: 1510px;
    min-height: 620px;

    margin: 0 auto;
    padding: 95px 0 45px;

    display: flex;
    flex-direction: column;
}

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

.pd2-main {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
    min-width: 0;
}

/* =========================================
   LEFT SIDE - TEXT
========================================= */

.pd2-intro {
    max-width: 650px;
}

.pd2-intro h1 {
    margin: 0 0 30px;

    color: #ffffff;
    font-size: clamp(42px, 4.2vw, 66px);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -1.5px;
}

.pd2-intro h1 span {
    color: #4d9cff;
}

.pd2-intro p {
    max-width: 590px;
    margin: 0;

    color: #b4c3d0;
    font-size: 15px;
    line-height: 1.9;
}

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

@media (max-width: 1000px) {

    .pd2-hero {
        min-height: 560px;
        background-position: 60% center;
    }

    .pd2-hero > .pd2-container {
        min-height: 560px;
        padding: 85px 0 40px;
    }

    .pd2-intro {
        max-width: 600px;
    }

    .pd2-intro h1 {
        font-size: clamp(40px, 5vw, 56px);
    }
}

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

@media (max-width: 600px) {

    .pd2-hero {
        min-height: 550px;

        background:
            linear-gradient(
                90deg,
                rgba(3, 9, 14, 0.96),
                rgba(3, 9, 14, 0.75)
            ),
            url("images/about-hero.webp");

        background-size: cover;
        background-position: 65% center;
    }

    .pd2-hero > .pd2-container {
        width: 88%;
        min-height: 550px;
        padding: 75px 0 35px;
    }

    .pd2-intro h1 {
        font-size: 36px;
        letter-spacing: -1px;
    }

    .pd2-intro p {
        font-size: 14px;
        line-height: 1.8;
    }

    .pd2-hero .home-hero-categories {
        gap: 15px 20px;
        margin-top: 50px;
    }

}



/* =========================================
   SERVICES HERO - FULL SCREEN DESIGN
========================================= */

.svc-hero {
    position: relative;
    min-height: 720px;
    padding: 110px 0 90px;

    display: flex;
    align-items: center;

    background:
        linear-gradient(
            90deg,
            rgba(2, 9, 16, 0.98) 0%,
            rgba(3, 12, 22, 0.94) 25%,
            rgba(4, 15, 27, 0.80) 45%,
            rgba(5, 18, 32, 0.35) 70%,
            rgba(5, 18, 32, 0.12) 100%
        ),
        url("images/service-bg.webp");

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

    border-bottom: 1px solid var(--svc-border);
}

/* HERO CONTAINER */

.svc-hero > .svc-container {
    width: 90%;
    max-width: 1510px;
    margin: 0 auto;
}

/* HERO HEADING */

.svc-hero h1 {
    max-width: 850px;
    margin: 0 0 32px;

    color: #ffffff;
    font-size: clamp(40px, 4vw, 64px);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -1.5px;
}

.svc-hero h1 span {
    display: block;
    color: #4d9cff;
}

/* HERO DESCRIPTION */

.services-hero-description {
    max-width: 650px;
}

.services-hero-description p {
    margin: 0 0 28px;
    color: #b3c0cd;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.9;
}

/* MOBILE */

@media (max-width: 768px) {
      
    .svc-hero {
        min-height: 720px;
        padding: 110px 0 90px;
        display: flex;
        align-items: center;
    }


    .svc-hero h1 {
        font-size: clamp(36px, 8vw, 52px);
        letter-spacing: -1px;
    }

    .services-hero-description p {
        font-size: 14px;
        line-height: 1.8;
    }
}



/* =========================================
   HOME HERO - VISUAL REFINEMENT
========================================= */

.home-hero {
    min-height: 620px;

    background:
        linear-gradient(
            90deg,
            rgba(3, 9, 14, 0.94) 0%,
            rgba(3, 9, 14, 0.82) 25%,
            rgba(3, 9, 14, 0.45) 50%,
            rgba(3, 9, 14, 0.08) 100%
        ),
        url("images/home-bg.webp");

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

/* CONTENT ALIGNMENT */

.home-hero-left {
    min-height: 620px;
    padding-top: 100px;
    padding-bottom: 50px;
}

/* HEADING */

.home-hero-content {
    max-width: 570px;
}

.home-hero-content h1 {
    font-size: clamp(42px, 4vw, 62px);
    line-height: 1.12;
    margin-bottom: 28px;
}

/* DESCRIPTION */

.home-hero-content p {
    max-width: 480px;
    font-size: 15px;
    line-height: 1.85;
    color: #c0cbd5;
}

/* BOTTOM CATEGORIES */

.home-hero-categories {
    max-width: 570px;
    margin-top: 60px;
    padding-top: 22px;
    border-top: 1px solid rgba(130, 169, 200, 0.25);
}

/* MOBILE */

@media (max-width: 768px) {
    .home-hero,
    .home-hero-left {
        min-height: 560px;
    }

    .home-hero {
        background-position: 65% center;
    }

    .home-hero-left {
        padding: 75px 7% 35px;
    }

    .home-hero-content h1 {
        font-size: clamp(36px, 7vw, 44px);
    }

    .home-hero-content p {
        font-size: 14px;
    }
}

/* =========================================
   RESEARCH & DEVELOPMENT
========================================= */

.rnd-section {
    width: 100%;
    background: #061426;
    padding: 80px 8%;
    overflow: hidden;
}

.rnd-container {
    width: 100%;
    max-width: 1260px;
    margin: 0 auto;
}

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

.rnd-header {
    max-width: 750px;
    margin-bottom: 38px;
}

.rnd-label {
    display: block;
    color: #4d9cff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2.5px;
    margin-bottom: 16px;
}

.rnd-header h2 {
    color: #ffffff;
    font-size: clamp(30px, 3vw, 42px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -1px;
    margin: 0 0 16px;
}

.rnd-header h2 span {
    color: #4d9cff;
}

.rnd-intro {
    max-width: 700px;
    color: #91a5b8;
    font-size: 14px;
    line-height: 1.8;
    margin: 0;
}

/* =========================================
   SECTION INDEX
========================================= */

.rnd-section-index {
    display: flex;
    align-items: center;
    gap: 12px;

    margin-bottom: 18px;

    color: #8195a8;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
}

.rnd-section-index span {
    color: #4d9cff;
}

/* =========================================
   PORTAL SHOWCASE
========================================= */

.rnd-showcase {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

/* PORTAL PANEL */

.rnd-project {
    position: relative;
    min-width: 0;

    background: #091b2b;
    border: 1px solid #1b3952;
    border-radius: 4px;

    overflow: hidden;
}

/* BLUE TOP ACCENT */

.rnd-project::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;

    width: 48px;
    height: 2px;

    background: #4d9cff;
    z-index: 2;
}

/* =========================================
   PORTAL IMAGE
========================================= */

.rnd-image {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #07111d;
}

.rnd-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* =========================================
   PORTAL INFORMATION
========================================= */

.rnd-project-info {
    padding: 24px 28px 28px;
}

.rnd-number {
    display: block;
    color: #4d9cff;
    font-size: 11px;
    font-weight: 700;
    margin-bottom: 16px;
}

.rnd-project-info h3 {
    color: #ffffff;
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 12px;
}

.rnd-project-info p {
    color: #91a5b8;
    font-size: 13px;
    line-height: 1.75;
    margin: 0 0 20px;
}

/* =========================================
   PORTAL TAGS
========================================= */

.rnd-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.rnd-tags span {
    color: #8db8dc;
    background: rgba(18, 58, 94, 0.28);

    border: 1px solid #204668;
    border-radius: 2px;

    padding: 6px 10px;

    font-size: 10px;
    font-weight: 500;
}

/* =========================================
   PLATFORM LINK
========================================= */

.rnd-link {
    display: inline-block;
    margin-top: 18px;

    color: #4d9cff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-decoration: none;
}

.rnd-link:hover {
    color: #ffffff;
}


.platform-details-link {
    display: inline-block;
    margin-left: 25px;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-decoration: none;
    transition: color 0.2s ease;
}

.platform-details-link:hover {
    color: #4d9cff;
}

@media (max-width: 600px) {
    .platform-details-link {
        margin-left: 0;
        margin-top: 12px;
    }
}


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

@media (max-width: 1000px) {

    .rnd-section {
        padding: 70px 6%;
    }

    .rnd-project-info {
        padding: 22px;
    }
}

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

@media (max-width: 650px) {

    .rnd-section {
        padding: 55px 6%;
    }

    .rnd-header {
        margin-bottom: 30px;
    }

    .rnd-header h2 {
        font-size: 32px;
    }

    .rnd-intro {
        font-size: 13px;
    }

    .rnd-showcase {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .rnd-project-info {
        padding: 20px;
    }

    .rnd-project-info h3 {
        font-size: 20px;
    }
}


/* =========================================
   R&D CAPABILITIES VISUAL
========================================= */

.rnd-capabilities {
    width: 100%;
    max-width: 1260px;
    margin: 45px auto 0;
    padding-top: 24px;
    border-top: 1px solid rgba(100, 151, 190, 0.2);
}

.rnd-capabilities-heading {
    margin-bottom: 15px;
}

.rnd-capabilities-heading span {
    color: #4d9cff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
}

.rnd-capabilities-visual {
    width: 100%;
    overflow-x: auto;
    scrollbar-width: thin;
}

.rnd-capabilities-visual img {
    display: block;
    width: 100%;
    min-width: 900px;
    height: auto;
}

/* MOBILE */

@media (max-width: 650px) {
    .rnd-capabilities {
        margin-top: 35px;
        padding-top: 20px;
    }
}


/* =========================================
   R&D CAPABILITIES - COMPACT
========================================= */

.rnd-capabilities {
    width: 100%;
    max-width: 1260px;

    margin: 25px auto 0;
    padding: 18px 0 0;

    border-top: 1px solid rgba(100, 151, 190, 0.2);
}

/* SMALL HEADING */

.rnd-capabilities-heading {
    margin: 0 0 8px;
}

.rnd-capabilities-heading span {
    color: #4d9cff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
}

/* FLOWCHART CONTAINER */

.rnd-capabilities-visual {
    width: 100%;
    height: 170px;

    display: flex;
    align-items: center;

    overflow-x: auto;
    overflow-y: hidden;

    scrollbar-width: thin;
}

/* FLOWCHART IMAGE */

.rnd-capabilities-visual img {
    display: block;
    width: 100%;
    min-width: 900px;
    height: auto;

    flex-shrink: 0;
}

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

@media (max-width: 650px) {

    .rnd-capabilities {
        margin-top: 20px;
        padding-top: 15px;
    }

    .rnd-capabilities-visual {
        height: 145px;
    }

    .rnd-capabilities-visual img {
        min-width: 900px;
    }
}


/* HERO DESCRIPTION PARAGRAPH SPACING */

.services-hero-description p {
  margin: 0;
  line-height: 1.8;
}

.services-hero-description p + p {
  margin-top: 20px;
}


/* =========================================
   OUR CAPABILITIES
========================================= */

.cap-section {
    width: 100%;
    background: #071426;
    padding: 20px 8% 25px;
}


.cap-container {
    width: 100%;
    max-width: 1260px;
    margin: 0 auto;
}

/* SECTION LABEL */

.cap-heading {
    margin-bottom: 22px;
}

.cap-heading span {
    color: #4d9cff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
}


/* FLOWCHART */

.cap-scroll {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
}

.cap-flowchart {
    position: relative;
    width: 100%;
    min-width: 950px;
    aspect-ratio: 2048 / 270;
}

.cap-flowchart-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}


/* INVISIBLE HOVER AREAS */

.cap-hotspots {
    position: absolute;
    inset: 0;

    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr));
}

.cap-item {
    display: block;
    width: 100%;
    height: 100%;

    padding: 0;
    margin: 0;

    border: none;
    background: transparent;
    cursor: help;
}

.cap-item:focus-visible {
    outline: 2px solid #4d9cff;
    outline-offset: -3px;
}

/* =========================================
   FLOATING INFORMATION BOX
========================================= */

.cap-floating-tooltip {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;

    width: 340px;
    max-width: calc(100vw - 24px);

    padding: 22px 24px;

    background: #0b1d2e;
    border: 1px solid #294963;
    border-top: 2px solid #4d9cff;
    border-radius: 8px;

    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.45);

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

    transition: opacity 0.15s ease;
}

.cap-floating-tooltip.active {
    opacity: 1;
    visibility: visible;
}

/* SMALL LABEL */

.cap-tooltip-label {
    display: block;
    color: #4d9cff;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.5px;

    margin-bottom: 13px;
}

/* TITLE */

.cap-floating-tooltip h3 {
    color: #ffffff;
    font-size: 19px;
    font-weight: 700;
    margin: 0 0 10px;
}

/* DESCRIPTION */

.cap-floating-tooltip p {
    color: #a8bacb;
    font-size: 13px;
    line-height: 1.75;
    margin: 0;
}

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

@media (max-width: 650px) {

    .cap-section {
        padding: 30px 6% 35px;
    }

    .cap-flowchart {
        min-width: 950px;
    }

    .cap-floating-tooltip {
        width: 300px;
        padding: 18px 20px;
    }

    .cap-floating-tooltip h3 {
        font-size: 17px;
    }

    .cap-floating-tooltip p {
        font-size: 12px;
    }
}


/* =========================================
   HOME - DIGITAL INNOVATION
========================================= */

.home-digital {
    width: 100%;
    background: #07111d;
    padding: 75px 8%;
}

.home-digital-container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
}

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

.home-digital-header {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 70px;
    align-items: end;
    margin-bottom: 45px;
}

.home-digital-label {
    display: block;
    color: #4d9cff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2.5px;
    margin-bottom: 18px;
}

.home-digital-heading h2 {
    color: #ffffff;
    font-size: clamp(30px, 3vw, 43px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -1px;
    margin: 0;
}

.home-digital-heading h2 span {
    display: block;
    color: #4d9cff;
}

.home-digital-intro {
    color: #a3b5c7;
    font-size: 14px;
    line-height: 1.9;
    margin: 0;
}

/* =========================================
   THREE FOCUS AREAS
========================================= */

.home-digital-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 35px;

    padding: 28px 0 30px;

    border-top: 1px solid rgba(100, 151, 190, 0.25);
    border-bottom: 1px solid rgba(100, 151, 190, 0.25);
}

.home-digital-item {
    padding-right: 20px;
}

.home-digital-item:not(:last-child) {
    border-right: 1px solid rgba(100, 151, 190, 0.2);
}

.home-digital-number {
    display: block;
    color: #4d9cff;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 18px;
}

.home-digital-item h3 {
    color: #ffffff;
    font-size: 19px;
    font-weight: 600;
    margin: 0 0 12px;
}

.home-digital-item p {
    color: #9eafc0;
    font-size: 13px;
    line-height: 1.8;
    margin: 0;
}

/* =========================================
   FOOTER / LINK
========================================= */

.home-digital-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 25px;
    margin-top: 25px;
}

.home-digital-platforms {
    color: #8198ad;
    font-size: 12px;
}

.home-digital-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    color: #4d9cff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-decoration: none;

    padding-bottom: 7px;
    border-bottom: 1px solid #4d9cff;
}

.home-digital-link:hover {
    color: #ffffff;
    border-bottom-color: #ffffff;
}

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

@media (max-width: 1000px) {

    .home-digital {
        padding: 65px 6%;
    }

    .home-digital-header {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-bottom: 35px;
    }

    .home-digital-intro {
        max-width: 650px;
    }

    .home-digital-grid {
        gap: 20px;
    }

}

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

@media (max-width: 650px) {

    .home-digital {
        padding: 55px 6%;
    }

    .home-digital-heading h2 {
        font-size: 30px;
    }

    .home-digital-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .home-digital-item {
        padding: 0 0 22px;
        border-right: none !important;
    }

    .home-digital-item:not(:last-child) {
        border-bottom: 1px solid rgba(100, 151, 190, 0.2);
    }

    .home-digital-number {
        margin-bottom: 12px;
    }

    .home-digital-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

}
#research-development {
    scroll-margin-top: 110px;
}


/* ==========================================
   ENGINEERING SERVICES
   TECHNICAL BLUEPRINT EXPLORER
========================================== */

.svc-services {
  position: relative;
  padding: 110px 0;
  background: #061321;
  overflow: hidden;
  isolation: isolate;
}

/* Blueprint background */
.svc-services::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  background-image:
    linear-gradient(
      rgba(74, 151, 220, 0.045) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(74, 151, 220, 0.045) 1px,
      transparent 1px
    );

  background-size: 42px 42px;
}

.svc-services .svc-container {
  position: relative;
  z-index: 1;
}

/* SECTION HEADING */

.svc-services .svc-section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 55px;
}

.svc-services .svc-section-heading h2 {
  color: #fff;
  font-size: clamp(30px, 3.4vw, 48px);
  line-height: 1.15;
  letter-spacing: -1.5px;
  margin: 12px 0 0;
}

.svc-services .svc-section-heading h2 span {
  color: #4d9cff;
}

.svc-services .svc-section-heading p {
  max-width: 340px;
  color: #9aafc3;
  font-size: 14px;
  line-height: 1.8;
  margin: 0;
}

/* MAIN EXPLORER */

.eng-explorer {
  display: grid;
  grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.5fr);
  gap: 28px;
  align-items: stretch;
}

/* LEFT NAVIGATION */

.eng-navigation {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: rgba(7, 23, 39, 0.94);
  border: 1px solid #20374b;
}

.eng-tab {
  width: 100%;
  min-height: 91px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 14px;

  padding: 20px 22px;
  border: none;
  border-bottom: 1px solid #20374b;

  background: transparent;
  color: #b7c6d5;
  font: inherit;
  text-align: left;
  cursor: pointer;

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

.eng-tab:hover {
  background: #10283e;
  color: #fff;
}

.eng-tab.active {
  background: #143450;
  color: #fff;
  box-shadow: inset 3px 0 0 #4d9cff;
}

.eng-tab:focus-visible {
  outline: 2px solid #80baff;
  outline-offset: -4px;
}

.eng-tab-number {
  font-size: 13px;
  font-weight: 600;
  color: #4d9cff;
  letter-spacing: 1px;
}

.eng-tab-name {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
}

.eng-tab-arrow {
  font-size: 18px;
  color: #64849f;
  text-align: right;
}

.eng-tab.active .eng-tab-arrow {
  color: #4d9cff;
}

.eng-navigation-footer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
  padding: 26px 22px;
  color: #63849d;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.5px;
}

/* RIGHT DISPLAY */

.eng-display {
  min-width: 0;
  border: 1px solid #29435b;
  background: #0b1d2f;
}

.eng-display-top,
.eng-display-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 16px 24px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: #7fa4c2;
}

.eng-display-top {
  border-bottom: 1px solid #29435b;
}

.eng-display-top span:first-child {
  color: #4d9cff;
}

.eng-display-bottom {
  border-top: 1px solid #29435b;
}

/* IMAGE */

.eng-image-wrap {
  position: relative;
  height: 310px;
  margin: 22px 24px 0;
  overflow: hidden;
  background: #132a3f;
}

.eng-image-wrap img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.eng-image-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(3, 13, 24, 0.45),
    transparent 55%
  );
}

.eng-image-index {
  position: absolute;
  bottom: 20px;
  left: 22px;
  z-index: 2;

  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #fff;
}

/* TECHNICAL CORNER MARKERS */

.eng-corner {
  position: absolute;
  z-index: 3;
  width: 20px;
  height: 20px;
  pointer-events: none;
}

.eng-corner-tl {
  top: 10px;
  left: 10px;
  border-top: 2px solid #5caaff;
  border-left: 2px solid #5caaff;
}

.eng-corner-tr {
  top: 10px;
  right: 10px;
  border-top: 2px solid #5caaff;
  border-right: 2px solid #5caaff;
}

.eng-corner-bl {
  bottom: 10px;
  left: 10px;
  border-bottom: 2px solid #5caaff;
  border-left: 2px solid #5caaff;
}

.eng-corner-br {
  bottom: 10px;
  right: 10px;
  border-bottom: 2px solid #5caaff;
  border-right: 2px solid #5caaff;
}

/* SERVICE CONTENT */

.eng-details {
  padding: 32px 30px 38px;
}

.eng-category {
  display: inline-block;
  color: #4d9cff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  margin-bottom: 14px;
}

.eng-details h3 {
  margin: 0 0 18px;
  color: #fff;
  font-size: clamp(25px, 2.6vw, 35px);
  line-height: 1.2;
  letter-spacing: -0.8px;
}

.eng-details > p {
  max-width: 680px;
  color: #b0c0ce;
  font-size: 14px;
  line-height: 1.9;
  margin: 0 0 28px;
}

/* SCOPE OF WORK */

.eng-scope {
  padding-top: 24px;
  border-top: 1px solid #29435b;
}

.eng-scope-label {
  display: block;
  margin-bottom: 17px;
  color: #7397b5;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.8px;
}

.eng-scope ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.eng-scope li {
  position: relative;
  padding-left: 19px;
  color: #d1deea;
  font-size: 13px;
  line-height: 1.65;
}

.eng-scope li::before {
  content: "+";
  position: absolute;
  left: 0;
  top: 0;
  color: #4d9cff;
  font-weight: 700;
}

/* RESPONSIVE */

@media (max-width: 900px) {
  .eng-explorer {
    grid-template-columns: 1fr;
  }

  .eng-navigation {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .eng-tab {
    min-height: 75px;
    border-right: 1px solid #20374b;
  }

  .eng-navigation-footer {
    grid-column: 1 / -1;
  }
}

@media (max-width: 600px) {
  .svc-services {
    padding: 70px 0;
  }

  .svc-services .svc-section-heading {
    display: block;
    margin-bottom: 32px;
  }

  .svc-services .svc-section-heading p {
    margin-top: 16px;
  }

  .eng-navigation {
    grid-template-columns: 1fr;
  }

  .eng-tab {
    min-height: 64px;
    padding: 15px 18px;
  }

  .eng-navigation-footer {
    padding: 18px;
  }

  .eng-image-wrap {
    height: 230px;
    margin: 15px 15px 0;
  }

  .eng-details {
    padding: 25px 20px 30px;
  }

  .eng-scope ul {
    grid-template-columns: 1fr;
  }

  .eng-display-top,
  .eng-display-bottom {
    padding: 14px 16px;
    font-size: 9px;
  }
}


/* =========================================
   ENGINEERING PROCESS - SPACING FIX
========================================= */

.svc-process .svc-section-heading {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 45px;
}

.svc-process .svc-section-heading h2 {
    margin-bottom: 0;
}

.svc-process .svc-section-heading p {
    margin: 0;
    max-width: 650px;
    font-size: 15px;
    line-height: 1.8;
    color: #aebdca;
}

.svc-process .svc-process-grid {
    margin-top: 0;
}


/* =========================================
   DIGITAL PLATFORM ARTICLE DETAILS
========================================= */

.portal-article-page {
    --portal-bg: #050d16;
    --portal-surface: #071426;
    --portal-blue: #4d9cff;
    --portal-muted: #a5b9cb;
    --portal-line: #1b3549;

    background: var(--portal-bg);
    color: #ffffff;
}

.portal-article-page *,
.portal-article-page *::before,
.portal-article-page *::after {
    box-sizing: border-box;
}

/* MAIN CONTAINER */

.portal-article-shell {
    width: min(88%, 1200px);
    margin: 0 auto;
}

/* =========================================
   ARTICLE HERO
========================================= */

.portal-article-hero {
    padding: 76px 0 74px;

    background: linear-gradient(
        120deg,
        #050d16 18%,
        #0a1e32 100%
    );

    border-bottom: 1px solid var(--portal-line);
}

/* BREADCRUMB */

.portal-article-breadcrumb {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;

    margin-bottom: 50px;

    color: #7792a9;
    font-size: 12px;
}

.portal-article-breadcrumb a {
    color: #a5b9cb;
    text-decoration: none;
}

.portal-article-breadcrumb a:hover {
    color: var(--portal-blue);
}

/* LABEL */

.portal-article-eyebrow {
    margin: 0 0 17px;

    color: var(--portal-blue);

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;

    text-transform: uppercase;
}

/* TITLE */

.portal-article-hero h1 {
    font-size: clamp(38px, 5vw, 66px);
    line-height: 1.08;
    letter-spacing: -2px;
    font-weight: 700;

    margin: 0 0 20px;
    color: #ffffff;
}

/* SUBTITLE */

.portal-article-subtitle {
    max-width: 780px;

    font-size: clamp(17px, 1.8vw, 22px);
    font-weight: 600;
    line-height: 1.45;

    color: #d5e4f0;
    margin: 0 0 18px;
}

/* INTRODUCTION */

.portal-article-lead {
    max-width: 750px;

    font-size: 15px;
    line-height: 1.85;

    color: #aabed0;
    margin: 0;
}

/* ARTICLE METADATA */

.portal-article-header-meta {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;

    margin-top: 34px;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.1px;

    color: #7d9ab1;
}

.portal-article-meta-dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--portal-blue);
}

/* =========================================
   ARTICLE CONTENT
========================================= */

.portal-article-reading {
    padding: 74px 0 95px;
}

.portal-article-layout {
    display: grid;

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

    gap: clamp(50px, 7vw, 115px);
    align-items: start;
}

.portal-article-story {
    min-width: 0;
}

/* EACH ARTICLE SECTION */

.portal-article-block {
    margin-bottom: 58px;
    scroll-margin-top: 115px;
}

.portal-article-block:last-child {
    margin-bottom: 0;
}

/* NUMBER */

.portal-article-section-number {
    display: inline-block;

    color: var(--portal-blue);

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;

    margin-bottom: 14px;
}

/* SECTION HEADINGS */

.portal-article-block h2 {
    color: #ffffff;

    font-size: clamp(23px, 2.4vw, 31px);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.6px;

    margin: 0 0 19px;
}

/* PARAGRAPHS */

.portal-article-block p {
    color: var(--portal-muted);

    font-size: 14px;
    line-height: 1.95;

    margin: 0 0 16px;
}

.portal-article-block p:last-child {
    margin-bottom: 0;
}

/* BENEFIT LIST */

.portal-article-bullets {
    display: grid;

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

    gap: 12px 26px;

    list-style: none;

    padding: 5px 0 0;
    margin: 20px 0 0;
}

.portal-article-bullets li {
    position: relative;

    padding-left: 18px;

    color: #b7c9d9;

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

.portal-article-bullets li::before {
    content: "";

    position: absolute;
    top: 9px;
    left: 0;

    width: 6px;
    height: 6px;

    background: var(--portal-blue);
}

/* =========================================
   SIDEBAR
========================================= */

.portal-article-aside-inner {
    position: sticky;
    top: 120px;

    border-left: 1px solid #254157;

    padding-left: 24px;
}

.portal-article-aside h2 {
    margin: 0 0 19px;

    color: var(--portal-blue);

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.7px;
}

/* TABLE OF CONTENTS */

.portal-article-toc {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.portal-article-toc a {
    color: #a9bfd1;

    font-size: 12px;
    line-height: 1.55;

    text-decoration: none;
}

.portal-article-toc a:hover,
.portal-article-toc a:focus-visible {
    color: var(--portal-blue);
}

/* PLATFORM LINK */

.portal-article-aside-link {
    border-top: 1px solid var(--portal-line);

    margin-top: 29px;
    padding-top: 22px;
}

.portal-article-aside-link p {
    color: #8da5b8;

    font-size: 12px;
    margin: 0 0 11px;
}

.portal-article-aside-link a {
    color: var(--portal-blue);

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.4px;

    text-decoration: none;
}

.portal-article-aside-link a:hover {
    color: #ffffff;
}

/* =========================================
   RELATED ARTICLE
========================================= */

.portal-article-related {
    border-top: 1px solid var(--portal-line);
    border-bottom: 1px solid var(--portal-line);

    padding: 49px 0;

    background: #071522;
}

.portal-article-related-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 45px;
}

.portal-article-related h2 {
    color: #ffffff;

    font-size: clamp(22px, 2.4vw, 32px);
    line-height: 1.25;

    margin: 0 0 12px;
}

.portal-article-related h2 span {
    color: var(--portal-blue);
}

.portal-article-related p:not(.portal-article-eyebrow) {
    color: #a5b9cb;

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

    max-width: 650px;
    margin: 0;
}

.portal-article-related-link {
    flex-shrink: 0;

    color: var(--portal-blue);

    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.5px;

    text-decoration: none;
}

.portal-article-related-link:hover {
    color: #ffffff;
}

/* BACK TO R&D */

.portal-article-end-link {
    width: min(88%, 1200px);

    margin: 0 auto;
    padding: 34px 0 50px;
}

.portal-article-end-link a {
    color: #a9bed0;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.6px;

    text-decoration: none;
}

.portal-article-end-link a:hover {
    color: var(--portal-blue);
}

/* =========================================
   ARTICLE FOOTER
========================================= */

.portal-article-footer {
    background: #030b12;

    border-top: 1px solid #193148;

    color: #ffffff;

    padding: 46px 0;
}

.portal-article-footer-inner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 35px;
}

.portal-article-footer strong {
    font-size: 13px;
}

.portal-article-footer p {
    font-size: 12px;
    line-height: 1.8;

    max-width: 350px;

    color: #8da4b8;

    margin: 13px 0 0;
}

.portal-article-footer nav {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.portal-article-footer nav a {
    font-size: 12px;
    color: #acc0d2;
    text-decoration: none;
}

.portal-article-footer nav a:hover {
    color: #4d9cff;
}

/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 900px) {

    .portal-article-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 50px;
    }

    .portal-article-aside-inner {
        position: static;
    }

}

@media (max-width: 650px) {

    .portal-article-hero {
        padding: 50px 0 60px;
    }

    .portal-article-breadcrumb {
        margin-bottom: 38px;
    }

    .portal-article-reading {
        padding: 55px 0 70px;
    }

    .portal-article-block {
        margin-bottom: 46px;
    }

    .portal-article-bullets {
        grid-template-columns: 1fr;
    }

    .portal-article-related-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .portal-article-footer-inner {
        flex-direction: column;
    }

}


/* =========================================
   PORTAL ARTICLE PHOTO GALLERY
========================================= */

/* WIDER RIGHT SIDEBAR */

.portal-article-layout {
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 60px;
}

/* LET GALLERY FOLLOW SIDEBAR CONTENT */

.portal-article-aside-inner {
    position: static;
}

/* GALLERY CONTAINER */

.portal-photo-gallery {
    margin-top: 38px;
    padding-top: 22px;
    border-top: 1px solid #1b3549;
}

/* GALLERY HEADING */

.portal-photo-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;
    margin-bottom: 16px;
}

.portal-photo-heading span:first-child {
    color: #4d9cff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.portal-photo-heading span:last-child {
    color: #849bb0;
    font-size: 10px;
}

/* PHOTO GRID */

.portal-photo-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

/* IMAGE BUTTONS */

.portal-photo-item {
    display: block;
    min-width: 0;
    padding: 0;
    margin: 0;

    background: #0b1d2e;
    border: 1px solid #213e58;
    border-radius: 5px;

    overflow: hidden;
    cursor: pointer;
}

/* FIRST IMAGE FEATURED */

.portal-photo-item:first-child {
    grid-column: span 2;
}

/* IMAGE SIZE */

.portal-photo-item img {
    display: block;
    width: 100%;
    height: 125px;
    object-fit: cover;

    transition: transform 0.25s ease;
}

.portal-photo-item:first-child img {
    height: 205px;
}

/* HOVER EFFECT */

.portal-photo-item:hover {
    border-color: #4d9cff;
}

.portal-photo-item:hover img {
    transform: scale(1.035);
}

/* CAPTION */

.portal-photo-caption {
    margin-top: 13px;

    color: #7f98ac;
    font-size: 11px;
    line-height: 1.6;
}

/* =========================================
   FULL SCREEN LIGHTBOX
========================================= */

.portal-photo-open {
    overflow: hidden;
}

.portal-photo-lightbox {
    position: fixed;
    inset: 0;
    z-index: 99999;

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

    gap: 18px;
    padding: 55px 25px;

    background: rgba(2, 8, 15, 0.94);
}

.portal-photo-lightbox.active {
    display: flex;
}

/* LARGE PHOTO */

.portal-photo-full {
    margin: 0;
    max-width: min(100%, 1100px);
    min-width: 0;

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

    gap: 16px;
}

.portal-photo-full img {
    display: block;
    max-width: 100%;
    max-height: 76vh;

    width: auto;
    height: auto;

    object-fit: contain;
    border-radius: 5px;
}

.portal-photo-full figcaption {
    color: #b7c9d8;
    text-align: center;
    font-size: 12px;
    line-height: 1.6;
}

/* CLOSE BUTTON */

.portal-photo-close {
    position: absolute;
    top: 22px;
    right: 30px;

    border: none;
    background: none;

    color: #ffffff;
    font-size: 34px;
    cursor: pointer;
}

/* NEXT AND PREVIOUS BUTTONS */

.portal-photo-prev,
.portal-photo-next {
    flex-shrink: 0;

    width: 42px;
    height: 42px;

    background: #0b1d2e;
    border: 1px solid #294963;
    border-radius: 50%;

    color: #ffffff;
    font-size: 18px;
    cursor: pointer;
}

.portal-photo-prev:hover,
.portal-photo-next:hover,
.portal-photo-close:hover {
    color: #4d9cff;
}

/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 1050px) {
    .portal-article-layout {
        grid-template-columns: minmax(0, 1fr) 280px;
        gap: 35px;
    }
}

@media (max-width: 900px) {
    .portal-article-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .portal-photo-gallery {
        max-width: 550px;
    }

    .portal-photo-item:first-child img {
        height: 260px;
    }

    .portal-photo-item img {
        height: 170px;
    }
}

@media (max-width: 600px) {
    .portal-photo-gallery {
        max-width: 100%;
    }

    .portal-photo-item:first-child img {
        height: 200px;
    }

    .portal-photo-item img {
        height: 120px;
    }

    .portal-photo-lightbox {
        padding: 55px 8px;
        gap: 5px;
    }

    .portal-photo-prev,
    .portal-photo-next {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }

    .portal-photo-close {
        right: 15px;
    }
}


/* =========================================
   OUR EXPERTISE - DESCRIPTION
========================================= */

.expertise .section-header p.expertise-description {
    font-family: inherit !important;
    font-size: 15px !important;
    font-weight: 400 !important;

    line-height: 1.7 !important;
    letter-spacing: normal !important;

    color: #aebdcc !important;

    max-width: 530px;
    margin: 0;
}

/* MOBILE */

@media (max-width: 650px) {
    .expertise .section-header p.expertise-description {
        font-size: 14px !important;
        line-height: 1.65 !important;
    }
}


/* HOME BANNER TAGLINE */

.pd-home-banner-tagline {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 28px;
    font-style: italic;
    font-weight: 400;
    color: #ffffff;
    line-height: 1.4;

    margin: 0 0 20px;
}

/* MOBILE */
@media (max-width: 650px) {
    .pd-home-banner-tagline {
        font-size: 20px;
    }
}


/* PROJECT INSTALLATION IMAGE */

.project-installation-image {
    width: 100%;
    height: 560px;
    object-fit: cover;
    object-position: center 20%;
    border-radius: 8px;
}


/* =========================================
   NAVBAR - DIGITAL PLATFORM LINKS
========================================= */

.pd-nav-platforms {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 15px;
}

/* PLATFORM LINK */

.pd-nav-platform-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    padding: 9px 11px;

    background: rgba(77, 156, 255, 0.08);
    border: 1px solid rgba(77, 156, 255, 0.25);
    border-radius: 5px;

    color: #ffffff;
    text-decoration: none;

    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.7px;
    white-space: nowrap;

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

/* PLATFORM ICON */

.pd-nav-platform-link svg {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    color: #5fa8ff;
}

/* HOVER */

.pd-nav-platform-link:hover {
    background: rgba(77, 156, 255, 0.18);
    border-color: #5fa8ff;
    color: #ffffff;
}

/* KEYBOARD ACCESSIBILITY */

.pd-nav-platform-link:focus-visible {
    outline: 2px solid #5fa8ff;
    outline-offset: 3px;
}

/* TABLET / MOBILE */

@media (max-width: 900px) {
    .pd-nav-platforms {
        gap: 8px;
        margin: 12px 0 0;
    }
}

@media (max-width: 650px) {
    .pd-nav-platforms {
        justify-content: flex-start;
    }

    .pd-nav-platform-link {
        padding: 10px 12px;
    }
}


/* =========================================
   NAVBAR - DIGITAL PLATFORM BUTTONS
========================================= */

.pd-nav-platforms {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 15px;
}

/* ORIGINAL RECTANGULAR BUTTON */

.pd-nav-platform-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    padding: 7px 12px;


    /* BRIGHTER BACKGROUND */
    background: rgba(77, 156, 255, 0.20);

    /* BRIGHTER BLUE BORDER */
    border: 1px solid rgba(77, 156, 255, 0.65);
    border-radius: 5px;

    color: #ffffff;
    text-decoration: none;

    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    white-space: nowrap;

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

/* ACTUAL PORTAL LOGOS */

.pd-nav-platform-link .pd-platform-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
    display: block;
    flex-shrink: 0;
}

/* HOVER */

.pd-nav-platform-link:hover {
    background: rgba(77, 156, 255, 0.18);
    border-color: #5fa8ff;
    color: #ffffff;
}

/* MOBILE */

@media (max-width: 900px) {
    .pd-nav-platforms {
        margin: 12px 0 0;
    }
}


/* =========================================
   DIGITAL PLATFORM - VIEW DETAILS SPACING
========================================= */

.platform-view-details {
    display: inline-flex;
    align-items: center;

    margin-top: 24px !important;

    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.8px;

    color: #ffffff;
    text-decoration: none;
}

/* R1: Accessible contact-form feedback and invisible spam trap. */
.contact-honeypot { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; opacity: 0 !important; pointer-events: none !important; left: -10000px !important; }
.contact-form-notice { padding: 13px 16px; margin: 0 0 18px; border-radius: 6px; font-size: 14px; line-height: 1.5; border: 1px solid rgba(110, 161, 195, .5); background: rgba(7, 28, 51, .55); color: #f2f7fc; }
.contact-form-notice.is-success { border-color: rgba(76, 190, 150, .65); }
.contact-form-notice.is-error { border-color: rgba(240, 162, 103, .7); }

/* R2 enquiry UI feedback: complements the original contact-card design */
.contact-form-notice { display: flex; gap: 13px; align-items: flex-start; scroll-margin-top: 105px; padding: 17px 18px; border-width: 1px; }
.contact-form-notice.is-success { background: rgba(13, 75, 61, .9); border-color: #66d5af; }
.contact-form-notice.is-warning { background: rgba(111, 78, 26, .85); border-color: #f0c276; }
.contact-form-notice.is-error { background: rgba(94, 39, 39, .85); border-color: #f69b98; }
.contact-feedback-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; font-size: 18px; font-weight: 800; color: #061b2d; background: #a8ecce; }
.contact-form-notice.is-warning .contact-feedback-icon { background: #f0c276; }
.contact-form-notice.is-error .contact-feedback-icon { background: #f69b98; }
.contact-feedback-content { display: flex; flex-direction: column; gap: 3px; overflow-wrap: anywhere; }
.contact-feedback-content strong { font-size: 15px; color: white; }
.contact-feedback-content span { font-size: 13px; color: #e4ebf4; }
.contact-card-submit:disabled { opacity: .75; cursor: wait; }
.contact-form-privacy { margin: 13px 0 0; font-size: 11px; color: #99b7d3; line-height: 1.5; }