/* =========================================================
   DZIVHA CIVILS
   SERVICES PAGE
========================================================= */


/* =========================================================
   ACTIVE NAV
========================================================= */

.navigation .active-page {
    color: var(--color-orange);
}


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

.services-page-hero {
    padding: 88px 0 72px;

    background: #f4f6f6;

    border-bottom:
        1px solid
        var(--color-border);
}


.services-page-hero-grid {
    display: grid;

    grid-template-columns:
        1.25fr
        0.75fr;

    gap: 80px;

    align-items: end;
}


.services-kicker {
    display: inline-block;

    font-size: 11px;

    letter-spacing: 2px;

    text-transform: uppercase;

    color: var(--color-orange);
}


.services-page-title h1 {
    max-width: 760px;

    margin: 15px 0 0;

    font-size: clamp(
        42px,
        5.8vw,
        72px
    );

    font-weight: 400;

    line-height: 1.05;

    letter-spacing: -0.04em;
}


.services-page-intro {
    padding-bottom: 7px;
}


.services-page-intro > p {
    max-width: 430px;

    margin-bottom: 34px;

    color: var(--color-muted);
}


.services-page-summary {
    display: grid;

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

    gap: 20px;

    padding-top: 22px;

    border-top:
        1px solid
        var(--color-border);
}


.services-page-summary strong {
    display: block;

    margin-bottom: 4px;

    font-size: 30px;

    font-weight: 500;

    color: #174655;
}


.services-page-summary span {
    display: block;

    max-width: 120px;

    font-size: 11px;

    line-height: 1.4;

    color: var(--color-muted);
}


/* =========================================================
   MAIN SERVICES
========================================================= */

.services-page-section {
    padding: 78px 0 90px;

    background: #ffffff;
}


.services-section-heading {
    display: flex;

    align-items: end;

    justify-content: space-between;

    gap: 50px;

    margin-bottom: 42px;
}


.services-section-heading h2 {
    max-width: 560px;

    margin: 10px 0 0;

    font-size: clamp(
        32px,
        4vw,
        48px
    );

    font-weight: 400;
}


.services-section-heading p {
    max-width: 390px;

    margin-bottom: 0;

    font-size: 13px;

    color: var(--color-muted);
}


/* =========================================================
   4 / 4 / 4 DESKTOP ALIGNMENT
========================================================= */

.services-layout {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 18px;
}

.service-item:nth-child(n) {
    grid-column: span 3;
}

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

.service-item {
    position: relative;

    min-height: 292px;

    padding: 26px;

    overflow: hidden;

    border:
        1px solid
        var(--color-border);

    background: #ffffff;

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


.service-item::after {
    content: "";

    position: absolute;

    left: 0;

    bottom: 0;

    width: 0;

    height: 2px;

    background: var(--color-orange);

    transition:
        width 0.35s ease;
}


.service-item:hover {
    transform: translateY(-4px);

    border-color: #cad4d7;

    box-shadow:
        0 18px 42px
        rgba(20, 44, 54, 0.07);
}


.service-item:hover::after {
    width: 100%;
}


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

.service-icon {
    display: flex;

    align-items: center;

    justify-content: center;

    width: 46px;

    height: 46px;

    margin-bottom: 26px;

    color: #174655;

    border:
        1px solid
        #d7e0e3;

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


.service-icon svg {
    width: 24px;

    height: 24px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.7;

    stroke-linecap: round;

    stroke-linejoin: round;
}


.service-item:hover
.service-icon {
    color: #ffffff;

    background: var(--color-orange);

    border-color: var(--color-orange);

    transform: translateY(-2px);
}


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

.service-number {
    display: block;

    margin-bottom: 8px;

    font-size: 10px;

    letter-spacing: 1px;

    color: #9aa5aa;
}


.service-item h3 {
    margin-bottom: 12px;

    font-size: 20px;

    font-weight: 400;

    line-height: 1.2;
}


.service-item p {
    margin-bottom: 0;

    font-size: 13px;

    line-height: 1.65;

    color: var(--color-muted);
}


/* =========================================================
   PRINCIPLES
========================================================= */

.services-principles-section {
    padding: 76px 0;

    color: #dce5e7;

    background: var(--color-dark);
}


.services-principles-grid {
    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap: 70px;

    align-items: end;
}


.services-principles-section h2 {
    max-width: 600px;

    margin: 10px 0 0;

    font-size: clamp(
        34px,
        4.5vw,
        50px
    );

    font-weight: 400;

    color: #ffffff;
}


.services-principles {
    display: grid;

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

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


.principle {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding: 20px 0;

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


.principle:nth-child(odd) {
    padding-right: 20px;
}


.principle:nth-child(even) {
    padding-left: 20px;

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


.principle span {
    font-size: 10px;

    color: #f1a174;
}


.principle p {
    margin: 0;

    font-size: 15px;

    color: #ffffff;
}


/* =========================================================
   END CTA
========================================================= */

.services-end-cta {
    padding: 72px 0;

    color: #ffffff;

    background: var(--color-orange);
}


.services-end-cta-grid {
    display: grid;

    grid-template-columns:
        1fr
        0.7fr;

    gap: 70px;

    align-items: end;
}


.services-end-cta
.services-kicker {
    color: #ffe1d3;
}


.services-end-cta h2 {
    max-width: 620px;

    margin: 10px 0 0;

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

    font-weight: 400;

    color: #ffffff;
}


.services-end-cta p {
    max-width: 390px;

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


.services-end-link {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding-bottom: 5px;

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


.services-end-link span {
    transition:
        transform 0.2s ease;
}


.services-end-link:hover span {
    transform: translateX(5px);
}


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

@media (max-width: 900px) {

    .services-page-hero {
        padding: 65px 0 55px;
    }


    .services-page-hero-grid {
        grid-template-columns: 1fr;

        gap: 38px;
    }


    .services-page-title h1 {
        max-width: 650px;

        font-size: clamp(
            40px,
            8vw,
            60px
        );
    }


    .services-section-heading {
        align-items: flex-start;

        flex-direction: column;

        gap: 14px;
    }


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


    .service-item:nth-child(n) {
        grid-column: span 1;
    }


    .services-principles-grid {
        grid-template-columns: 1fr;

        gap: 38px;
    }


    .services-end-cta-grid {
        grid-template-columns: 1fr;

        gap: 32px;
    }

}


/* =========================================================
   MOBILE
   Pattern: 2 cards, 1 full-width, repeat.
========================================================= */

@media (max-width: 560px) {

    .services-page-hero {
        padding: 50px 0 42px;
    }


    .services-page-title h1 {
        max-width: 100%;

        font-size: 40px;

        line-height: 1.06;
    }


    .services-page-summary {
        gap: 14px;
    }


    .services-page-summary strong {
        font-size: 26px;
    }


    .services-page-section {
        padding: 52px 0 62px;
    }


    .services-section-heading {
        margin-bottom: 28px;
    }


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


    .services-layout {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 10px;
    }


    /*
        Mobile pattern:
        1 + 2 = two in row
        3 = full
        4 + 5 = two in row
        6 = full
        7 + 8 = two in row
        9 = full
        10 + 11 = two in row
    */

    .service-item:nth-child(3),
    .service-item:nth-child(6),
    .service-item:nth-child(9) {
        grid-column:
            1 /
            -1;
    }


    .service-item {
        min-height: 0;

        padding: 18px;
    }


    .service-icon {
        width: 38px;

        height: 38px;

        margin-bottom: 18px;
    }


    .service-icon svg {
        width: 20px;

        height: 20px;
    }


    .service-number {
        margin-bottom: 6px;

        font-size: 9px;
    }


    .service-item h3 {
        margin-bottom: 9px;

        font-size: 16px;

        line-height: 1.18;
    }


    .service-item p {
        font-size: 11px;

        line-height: 1.55;
    }


    /*
        Full-width mobile cards get a slightly
        more spacious horizontal composition.
    */

    .service-item:nth-child(3),
    .service-item:nth-child(6),
    .service-item:nth-child(9) {
        display: grid;

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

        column-gap: 15px;

        align-items: start;
    }


    .service-item:nth-child(3)
    .service-icon,
    .service-item:nth-child(6)
    .service-icon,
    .service-item:nth-child(9)
    .service-icon {
        grid-row:
            1 /
            span 3;

        margin-bottom: 0;
    }


    .service-item:nth-child(3)
    .service-number,
    .service-item:nth-child(6)
    .service-number,
    .service-item:nth-child(9)
    .service-number,
    .service-item:nth-child(3) h3,
    .service-item:nth-child(6) h3,
    .service-item:nth-child(9) h3,
    .service-item:nth-child(3) p,
    .service-item:nth-child(6) p,
    .service-item:nth-child(9) p {
        grid-column: 2;
    }


    .services-principles-section {
        padding: 58px 0;
    }


    .services-principles-section h2 {
        font-size: 36px;
    }


    .services-principles {
        grid-template-columns: 1fr;
    }


    .principle:nth-child(odd),
    .principle:nth-child(even) {
        padding:
            17px
            0;

        border-left: 0;
    }


    .services-end-cta {
        padding: 58px 0;
    }


    .services-end-cta h2 {
        font-size: 36px;
    }

}

/* =========================================================
   TELECOMMUNICATIONS SERVICE + FINAL MOBILE GRID
========================================================= */

.service-item-telecom {
    border-color: rgba(237, 107, 48, .38);
    background: #fff9f6;
}

.service-project-note {
    display: inline-block;
    margin-top: 16px;
    padding-top: 10px;
    font-size: 9px;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: var(--color-orange);
    border-top: 1px solid #f1d8cc;
}

@media (max-width: 900px) {
    .service-item:nth-child(n) {
        grid-column: span 1;
    }
}

@media (max-width: 560px) {
    .services-layout {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .service-item:nth-child(n) {
        display: block;
        grid-column: span 1;
    }

    .service-item:nth-child(3n) {
        grid-column: 1 / -1;
    }

    .service-item:nth-child(3n) .service-icon {
        margin-bottom: 18px;
    }
}