/* ========================================================
   COILHOOK ABOUT PAGE V2
   PART 1: BASE + BUTTONS + HERO
   ACG Industrial Engineering UI
   ======================================================== */

.ab-page {
    --ab-blue: #0c53a5;
    --ab-blue-deep: #06417d;
    --ab-navy: #022041;
    --ab-navy-deep: #011629;
    --ab-text: #314457;
    --ab-muted: #697887;
    --ab-line: #c7d1db;
    --ab-soft: #edf2f6;
    --ab-soft-light: #f7f9fc;
    --ab-white: #ffffff;

    width: 100%;
    overflow: hidden;
    color: var(--ab-text);
    background: #ffffff;

    font-family:
        Shabnam,
        Tahoma,
        Arial,
        sans-serif;
}

.ab-page *,
.ab-page *::before,
.ab-page *::after {
    box-sizing: border-box;
}

.ab-page a {
    text-decoration: none;
}

.ab-page img {
    max-width: 100%;
}

.ab-shell {
    width: min(
        100%,
        1540px
    );

    margin-inline: auto;

    padding-inline:
        clamp(
            20px,
            4.8vw,
            88px
        );
}

.ab-section {
    padding-block:
        clamp(
            90px,
            8vw,
            140px
        );
}

.ab-kicker {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    color: var(--ab-blue);

    font-family:
        Inter,
        Montserrat,
        Arial,
        sans-serif;

    font-size: 12px;
    font-weight: 950;
    line-height: 1.5;
    letter-spacing: 0.085em;

    direction: ltr;
    text-transform: uppercase;
}

.ab-kicker::before {
    content: "";

    width: 44px;
    height: 2px;

    background: currentColor;
}

.ab-kicker--light {
    color: #8cc8f8;
}

.ab-section-head {
    max-width: 720px;
}

.ab-section-head--wide {
    max-width: 930px;

    margin-bottom:
        clamp(
            42px,
            5vw,
            70px
        );
}

.ab-section-head h2,
.ab-engineering h2,
.ab-industries h2,
.ab-mission h2,
.ab-gallery h2,
.ab-final h2 {
    margin: 14px 0 0;

    color: var(--ab-navy);

    font-size:
        clamp(
            31px,
            3.4vw,
            53px
        );

    font-weight: 950;
    line-height: 1.42;
    letter-spacing: -0.035em;
}

.ab-section-head p,
.ab-engineering p,
.ab-industries p,
.ab-mission p,
.ab-gallery p,
.ab-final p {
    margin: 15px 0 0;

    color: var(--ab-muted);

    font-size: 15px;
    font-weight: 550;
    line-height: 2.1;
}

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

.ab-btn {
    min-height: 53px;

    padding-inline: 25px;

    border: 1px solid transparent;
    border-radius: 2px;

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

    color: var(--ab-navy);
    background: #ffffff;

    font-size: 13px;
    font-weight: 900;

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

.ab-btn:hover,
.ab-btn:focus-visible {
    transform: translateY(-3px);
}

.ab-btn--primary {
    color: #ffffff;
    border-color: var(--ab-blue);
    background: var(--ab-blue);

    box-shadow:
        0 15px 35px
        rgba(
            12,
            83,
            165,
            0.22
        );
}

.ab-btn--primary:hover,
.ab-btn--primary:focus-visible {
    border-color: var(--ab-navy);
    background: var(--ab-navy);
}

.ab-btn--outline {
    color: var(--ab-navy);

    border-color:
        rgba(
            2,
            32,
            65,
            0.28
        );

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

.ab-btn--outline:hover,
.ab-btn--outline:focus-visible {
    color: var(--ab-blue);
    border-color: var(--ab-blue);
    background: #ffffff;
}

.ab-btn--light {
    color: var(--ab-navy);
    border-color: #ffffff;
    background: #ffffff;
}

.ab-btn--transparent {
    color: #ffffff;

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

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

.ab-btn--transparent:hover,
.ab-btn--transparent:focus-visible {
    color: var(--ab-navy);
    border-color: #ffffff;
    background: #ffffff;
}

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

.ab-hero {
    position: relative;
    min-height: 820px;

    overflow: hidden;
    isolation: isolate;

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

    background:
        linear-gradient(
            112deg,
            #e9eef2 0%,
            #f8fafc 45%,
            #ffffff 100%
        );
}

.ab-hero::before {
    content: "";

    position: absolute;
    z-index: 5;

    top: 0;
    right: 0;

    width: 5px;
    height: 100%;

    background: var(--ab-blue);
}

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

    position: absolute;
    z-index: 5;

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

    height: 3px;

    background:
        linear-gradient(
            90deg,
            var(--ab-blue) 0 33%,
            rgba(
                2,
                32,
                65,
                0.15
            ) 33%
        );
}

.ab-hero__technical-bg {
    position: absolute;
    z-index: 0;

    inset: 0;

    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(
                2,
                32,
                65,
                0.04
            )
            1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(
                2,
                32,
                65,
                0.04
            )
            1px,
            transparent 1px
        );

    background-size:
        92px 92px,
        92px 92px;
}

.ab-hero__technical-bg::before {
    content: "ENGINEERING BEYOND MOTION";

    position: absolute;

    top: 34px;
    left: 2vw;

    color:
        rgba(
            2,
            32,
            65,
            0.035
        );

    font-family:
        Inter,
        Montserrat,
        Arial,
        sans-serif;

    font-size:
        clamp(
            60px,
            8.5vw,
            150px
        );

    font-weight: 950;
    line-height: 1;
    letter-spacing: -0.06em;

    white-space: nowrap;
    direction: ltr;
}

.ab-hero__grid {
    position: relative;
    z-index: 3;

    min-height: 690px;

    padding-top:
        clamp(
            85px,
            7vw,
            120px
        );

    padding-bottom:
        clamp(
            45px,
            5vw,
            75px
        );

    display: grid;

    grid-template-columns:
        minmax(
            500px,
            1.03fr
        )
        minmax(
            470px,
            0.97fr
        );

    grid-template-areas:
        "visual content";

    align-items: center;

    gap:
        clamp(
            60px,
            7vw,
            125px
        );

    direction: ltr;
}

.ab-hero__content {
    grid-area: content;

    max-width: 760px;

    direction: rtl;
}

.ab-eyebrow {
    min-height: 38px;

    padding-inline: 15px;

    border:
        1px solid
        rgba(
            12,
            83,
            165,
            0.24
        );

    border-radius: 2px;

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

    gap: 9px;

    color: var(--ab-blue-deep);

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

    font-family:
        Inter,
        Montserrat,
        Arial,
        sans-serif;

    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.055em;

    direction: ltr;
}

.ab-eyebrow i {
    color: var(--ab-blue);
}

.ab-hero h1 {
    max-width: 740px;

    margin:
        25px 0 0;

    color: var(--ab-navy);

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

    font-weight: 950;
    line-height: 1.38;
    letter-spacing: -0.045em;
}

.ab-hero h1 strong {
    display: block;

    color: var(--ab-blue);

    font-weight: 950;
}

.ab-hero h1::after {
    content: "";

    display: block;

    width: 100px;
    height: 4px;

    margin-top: 20px;

    background: var(--ab-blue);
}

.ab-hero__lead {
    max-width: 700px;

    margin:
        24px 0 0;

    color: #263d53;

    font-size:
        clamp(
            18px,
            1.55vw,
            24px
        );

    font-weight: 850;
    line-height: 1.95;
}

.ab-hero__desc {
    max-width: 710px;

    margin:
        14px 0 0;

    color: var(--ab-muted);

    font-size: 15px;
    font-weight: 550;
    line-height: 2.1;
}

.ab-hero__actions {
    margin-top: 30px;

    display: flex;
    flex-wrap: wrap;

    gap: 10px;
}

.ab-keywords {
    max-width: 710px;

    margin-top: 33px;
    padding-top: 22px;

    border-top:
        1px solid
        var(--ab-line);

    display: flex;
    flex-wrap: wrap;

    gap: 7px;
}

.ab-keywords span {
    min-height: 31px;

    padding-inline: 10px;

    border:
        1px solid
        rgba(
            2,
            32,
            65,
            0.14
        );

    border-radius: 2px;

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

    color: #5d6d7d;

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

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

/* ========================================================
   HERO PRODUCT RENDER
   ======================================================== */

.ab-hero__visual {
    grid-area: visual;

    position: relative;

    min-height: 620px;

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

    direction: ltr;
}

.ab-product-stage {
    position: relative;

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

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

    background: transparent;
    box-shadow: none;
}

.ab-product-stage::before,
.ab-product-stage::after {
    content: "";

    position: absolute;
    z-index: 0;

    pointer-events: none;
}

.ab-product-stage::before {
    top: 7%;
    bottom: 7%;
    left: 50%;

    width: 1px;

    background:
        linear-gradient(
            transparent,
            rgba(
                12,
                83,
                165,
                0.22
            ),
            transparent
        );
}

.ab-product-stage::after {
    top: 50%;
    right: 7%;
    left: 7%;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(
                12,
                83,
                165,
                0.22
            ),
            transparent
        );
}

.ab-product-stage__axis {
    position: absolute;
    z-index: 1;

    top: 13%;
    left: 12%;

    width: 34px;
    height: 34px;

    border-top:
        1px solid
        rgba(
            12,
            83,
            165,
            0.4
        );

    border-left:
        1px solid
        rgba(
            12,
            83,
            165,
            0.4
        );
}

.ab-product-stage img {
    position: relative;
    z-index: 3;

    display: block;

    width:
        min(
            100%,
            670px
        );

    height: auto;
    max-height: 620px;

    object-fit: contain;

    border: 0;
    outline: 0;

    background: transparent;
    box-shadow: none;

    transform:
        perspective(1300px)
        rotateY(-3deg)
        rotateX(1deg)
        translateY(-5px);

    filter:
        drop-shadow(
            0 8px 8px
            rgba(
                2,
                32,
                65,
                0.17
            )
        )
        drop-shadow(
            0 23px 22px
            rgba(
                2,
                32,
                65,
                0.24
            )
        )
        drop-shadow(
            0 40px 36px
            rgba(
                2,
                32,
                65,
                0.16
            )
        );

    transition:
        transform 0.34s ease,
        filter 0.34s ease;
}

.ab-product-stage:hover img {
    transform:
        perspective(1300px)
        rotateY(-1deg)
        rotateX(0)
        translateY(-14px)
        scale(1.025);

    filter:
        drop-shadow(
            0 9px 9px
            rgba(
                2,
                32,
                65,
                0.19
            )
        )
        drop-shadow(
            0 27px 25px
            rgba(
                2,
                32,
                65,
                0.27
            )
        )
        drop-shadow(
            0 45px 40px
            rgba(
                2,
                32,
                65,
                0.18
            )
        );
}

.ab-product-note {
    position: absolute;
    z-index: 4;

    min-width: 160px;

    padding:
        13px 15px;

    border:
        1px solid
        rgba(
            2,
            32,
            65,
            0.17
        );

    border-radius: 2px;

    color: var(--ab-navy);

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

    box-shadow:
        0 16px 40px
        rgba(
            2,
            32,
            65,
            0.1
        );

    direction: ltr;
}

.ab-product-note span {
    display: block;

    color: var(--ab-blue);

    font-family:
        Inter,
        Montserrat,
        Arial,
        sans-serif;

    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.08em;
}

.ab-product-note strong {
    display: block;

    margin-top: 4px;

    font-family:
        Inter,
        Montserrat,
        Arial,
        sans-serif;

    font-size: 13px;
    font-weight: 850;
}

.ab-product-note--capacity {
    top: 18%;
    right: 1%;
}

.ab-product-note--safety {
    left: 1%;
    bottom: 20%;
}

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

.ab-hero__metrics {
    position: relative;
    z-index: 4;

    padding-bottom: 34px;

    display: grid;

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

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

.ab-hero__metrics > div {
    min-height: 83px;

    padding:
        20px 24px;

    border-left:
        1px solid
        var(--ab-line);

    display: flex;
    align-items: center;

    gap: 14px;
}

.ab-hero__metrics > div:last-child {
    border-left: 0;
}

.ab-hero__metrics strong {
    color: var(--ab-blue);

    font-family:
        Inter,
        Montserrat,
        Arial,
        sans-serif;

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

    direction: ltr;
}

.ab-hero__metrics span {
    color: #536577;

    font-size: 12px;
    font-weight: 850;
}

/* ========================================================
   PART 1 RESPONSIVE
   ======================================================== */

@media (max-width: 1120px) {
    .ab-hero {
        min-height: auto;
    }

    .ab-hero__grid {
        min-height: auto;

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

        grid-template-areas:
            "content"
            "visual";

        gap: 40px;

        direction: rtl;
    }

    .ab-hero__content {
        max-width: 900px;
    }

    .ab-hero__visual,
    .ab-product-stage {
        min-height: 520px;
    }

    .ab-product-stage img {
        max-height: 520px;
    }
}

@media (max-width: 800px) {
    .ab-shell {
        padding-inline: 20px;
    }

    .ab-section {
        padding-block: 76px;
    }

    .ab-hero__grid {
        padding-top: 68px;
        padding-bottom: 45px;
    }

    .ab-hero h1 {
        font-size:
            clamp(
                35px,
                8.6vw,
                48px
            );
    }

    .ab-hero__lead {
        font-size: 18px;
    }

    .ab-hero__actions {
        width: 100%;

        flex-direction: column;
    }

    .ab-btn {
        width: 100%;
    }

    .ab-hero__visual,
    .ab-product-stage {
        min-height: 410px;
    }

    .ab-product-stage img {
        max-height: 410px;

        transform: none;
    }

    .ab-product-stage:hover img {
        transform:
            translateY(-7px)
            scale(1.015);
    }

    .ab-product-note {
        display: none;
    }

    .ab-hero__metrics {
        grid-template-columns:
            minmax(0, 1fr);
    }

    .ab-hero__metrics > div {
        border-left: 0;

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

@media (max-width: 560px) {
    .ab-shell {
        padding-inline: 16px;
    }

    .ab-section {
        padding-block: 64px;
    }

    .ab-hero::before {
        width: 3px;
    }

    .ab-hero__technical-bg::before {
        display: none;
    }

    .ab-hero__grid {
        padding-top: 55px;
        padding-bottom: 35px;

        gap: 25px;
    }

    .ab-eyebrow {
        min-height: 34px;

        padding-inline: 11px;

        font-size: 8px;
    }

    .ab-hero h1 {
        margin-top: 19px;

        font-size:
            clamp(
                31px,
                9vw,
                39px
            );

        line-height: 1.5;
    }

    .ab-hero h1::after {
        width: 72px;
        height: 3px;

        margin-top: 16px;
    }

    .ab-hero__lead {
        margin-top: 18px;

        font-size: 16px;
    }

    .ab-hero__desc {
        font-size: 13px;
    }

    .ab-keywords {
        display: none;
    }

    .ab-hero__visual,
    .ab-product-stage {
        min-height: 335px;
    }

    .ab-product-stage img {
        max-height: 335px;
    }

    .ab-hero__metrics {
        padding-bottom: 0;
    }

    .ab-hero__metrics > div {
        min-height: 68px;

        padding:
            15px 5px;
    }
}

/* END COILHOOK ABOUT PAGE V2 PART 1 */

/* ========================================================
   ABOUT PAGE V2 PART 2
   INTRO + ENGINEERING + CAPABILITIES + INDUSTRIES
   ======================================================== */

/* ========================================================
   COMPANY INTRODUCTION
   ======================================================== */

.ab-intro {
    position: relative;
    overflow: hidden;

    background:
        linear-gradient(
            rgba(2, 32, 65, 0.032)
            1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(2, 32, 65, 0.032)
            1px,
            transparent 1px
        ),
        #ffffff;

    background-size:
        84px 84px,
        84px 84px,
        auto;
}

.ab-intro::before {
    content: "COMPANY";

    position: absolute;
    top: 38px;
    left: 2vw;

    color:
        rgba(
            2,
            32,
            65,
            0.028
        );

    font-family:
        Inter,
        Montserrat,
        Arial,
        sans-serif;

    font-size:
        clamp(
            75px,
            11vw,
            180px
        );

    font-weight: 950;
    line-height: 1;
    letter-spacing: -0.065em;

    direction: ltr;
    pointer-events: none;
}

.ab-intro__grid {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(
            360px,
            0.82fr
        )
        minmax(
            0,
            1.18fr
        );

    align-items: start;

    gap:
        clamp(
            60px,
            8vw,
            135px
        );
}

.ab-intro .ab-section-head {
    position: sticky;
    top: 135px;

    padding-right: 25px;

    border-right:
        4px solid
        var(--ab-blue);
}

.ab-intro .ab-section-head h2 {
    margin-top: 15px;
}

.ab-intro__content {
    position: relative;

    padding:
        clamp(
            34px,
            4.6vw,
            65px
        );

    border:
        1px solid
        var(--ab-line);

    border-radius: 2px;

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

    box-shadow:
        0 24px 65px
        rgba(
            2,
            32,
            65,
            0.075
        );
}

.ab-intro__content::before {
    content: "";

    position: absolute;
    top: -1px;
    right: -1px;

    width: 105px;
    height: 4px;

    background: var(--ab-blue);
}

.ab-intro__content::after {
    content: "";

    position: absolute;
    left: 18px;
    bottom: 18px;

    width: 38px;
    height: 38px;

    border-left:
        1px solid
        rgba(
            12,
            83,
            165,
            0.28
        );

    border-bottom:
        1px solid
        rgba(
            12,
            83,
            165,
            0.28
        );
}

.ab-intro__content p {
    margin: 0;

    color: #53677a;

    font-size: 15px;
    font-weight: 550;
    line-height: 2.25;
}

.ab-intro__content p + p {
    margin-top: 20px;
    padding-top: 20px;

    border-top:
        1px solid
        rgba(
            2,
            32,
            65,
            0.1
        );
}

.ab-intro__content .ab-intro__lead {
    color: var(--ab-navy);

    font-size:
        clamp(
            18px,
            1.55vw,
            23px
        );

    font-weight: 850;
    line-height: 2;
}

/* ========================================================
   CUSTOM ENGINEERING
   ======================================================== */

.ab-engineering {
    position: relative;
    overflow: hidden;
    isolation: isolate;

    color: #ffffff;

    background:
        linear-gradient(
            112deg,
            #01172c 0%,
            #022041 52%,
            #063c71 100%
        );
}

.ab-engineering::before {
    content: "";

    position: absolute;
    z-index: -1;

    inset: 0;

    opacity: 0.55;

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

    background-size:
        88px 88px,
        88px 88px;
}

.ab-engineering::after {
    content: "C-HOOK ENGINEERING";

    position: absolute;
    z-index: -1;

    left: 2vw;
    bottom: -12px;

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

    font-family:
        Inter,
        Montserrat,
        Arial,
        sans-serif;

    font-size:
        clamp(
            72px,
            10vw,
            170px
        );

    font-weight: 950;
    line-height: 1;
    letter-spacing: -0.065em;

    white-space: nowrap;
    direction: ltr;
}

.ab-engineering__grid {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(
            380px,
            0.82fr
        )
        minmax(
            0,
            1.18fr
        );

    align-items: center;

    gap:
        clamp(
            60px,
            7vw,
            120px
        );
}

.ab-engineering__content {
    position: relative;

    padding-right: 28px;

    border-right:
        4px solid
        #2c91e8;
}

.ab-engineering h2 {
    color: #ffffff;
}

.ab-engineering p {
    max-width: 630px;

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

.ab-engineering__parameters {
    display: grid;

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

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

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

.ab-engineering__parameters > div {
    position: relative;

    min-height: 112px;

    padding:
        25px 27px;

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

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

    display: flex;
    align-items: center;

    gap: 17px;

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

    transition:
        background-color 0.24s ease,
        transform 0.24s ease;
}

.ab-engineering__parameters > div::after {
    content: "";

    position: absolute;
    right: 0;
    bottom: -1px;

    width: 0;
    height: 3px;

    background: #40a4f4;

    transition:
        width 0.28s ease;
}

.ab-engineering__parameters > div:hover {
    z-index: 2;

    background:
        rgba(
            12,
            83,
            165,
            0.26
        );

    transform: translateY(-4px);
}

.ab-engineering__parameters > div:hover::after {
    width: 100%;
}

.ab-engineering__parameters span {
    flex: 0 0 auto;

    color:
        rgba(
            140,
            200,
            248,
            0.75
        );

    font-family:
        Inter,
        Montserrat,
        Arial,
        sans-serif;

    font-size: 13px;
    font-weight: 950;

    direction: ltr;
}

.ab-engineering__parameters strong {
    color: #ffffff;

    font-size: 13px;
    font-weight: 850;
    line-height: 1.8;
}

/* ========================================================
   ENGINEERING CAPABILITIES
   ======================================================== */

.ab-capabilities {
    position: relative;
    overflow: hidden;

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

.ab-capabilities::before {
    content: "";

    position: absolute;
    top: 0;
    right: 0;

    width: 32%;
    height: 4px;

    background: var(--ab-blue);
}

.ab-capability-grid {
    display: grid;

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

    border-top:
        1px solid
        var(--ab-line);

    border-right:
        1px solid
        var(--ab-line);

    box-shadow:
        0 24px 70px
        rgba(
            2,
            32,
            65,
            0.075
        );
}

.ab-capability-card {
    position: relative;
    overflow: hidden;

    min-height: 305px;

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

    border-left:
        1px solid
        var(--ab-line);

    border-bottom:
        1px solid
        var(--ab-line);

    color: var(--ab-text);

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

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

.ab-capability-card::before {
    content: "";

    position: absolute;
    top: 0;
    right: 0;

    width: 0;
    height: 4px;

    background: var(--ab-blue);

    transition:
        width 0.3s ease;
}

.ab-capability-card::after {
    content: "";

    position: absolute;
    right: -35px;
    bottom: -35px;

    width: 115px;
    height: 115px;

    border:
        1px solid
        rgba(
            12,
            83,
            165,
            0.09
        );

    transform: rotate(45deg);

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

.ab-capability-card:hover {
    z-index: 3;

    color: #ffffff;
    background: var(--ab-navy);

    transform: translateY(-8px);

    box-shadow:
        0 28px 65px
        rgba(
            2,
            32,
            65,
            0.22
        );
}

.ab-capability-card:hover::before {
    width: 100%;
}

.ab-capability-card:hover::after {
    border-color:
        rgba(
            255,
            255,
            255,
            0.12
        );

    transform:
        rotate(45deg)
        scale(1.18);
}

.ab-capability-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ab-capability-card__top > span {
    color:
        rgba(
            2,
            32,
            65,
            0.28
        );

    font-family:
        Inter,
        Montserrat,
        Arial,
        sans-serif;

    font-size: 13px;
    font-weight: 950;

    direction: ltr;

    transition: color 0.25s ease;
}

.ab-capability-card__top i {
    width: 52px;
    height: 52px;

    border:
        1px solid
        rgba(
            12,
            83,
            165,
            0.18
        );

    border-radius: 2px;

    display: grid;
    place-items: center;

    color: var(--ab-blue);
    background: #edf4fa;

    font-size: 19px;

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

.ab-capability-card:hover
.ab-capability-card__top > span {
    color:
        rgba(
            255,
            255,
            255,
            0.38
        );
}

.ab-capability-card:hover
.ab-capability-card__top i {
    color: var(--ab-blue);
    border-color: #ffffff;
    background: #ffffff;
}

.ab-capability-card h3 {
    position: relative;
    z-index: 2;

    margin:
        42px 0 0;

    color: var(--ab-navy);

    font-size:
        clamp(
            18px,
            1.45vw,
            23px
        );

    font-weight: 950;
    line-height: 1.7;

    transition: color 0.25s ease;
}

.ab-capability-card p {
    position: relative;
    z-index: 2;

    margin:
        12px 0 0;

    color: #667789;

    font-size: 13px;
    font-weight: 550;
    line-height: 2;

    transition: color 0.25s ease;
}

.ab-capability-card:hover h3 {
    color: #ffffff;
}

.ab-capability-card:hover p {
    color:
        rgba(
            255,
            255,
            255,
            0.7
        );
}

/* ========================================================
   COVERED INDUSTRIES
   ======================================================== */

.ab-industries {
    position: relative;
    overflow: hidden;

    background:
        linear-gradient(
            rgba(2, 32, 65, 0.035)
            1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(2, 32, 65, 0.035)
            1px,
            transparent 1px
        ),
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f0f4f7 100%
        );

    background-size:
        76px 76px,
        76px 76px,
        cover;
}

.ab-industries::after {
    content: "INDUSTRIES";

    position: absolute;
    left: 2vw;
    bottom: -12px;

    color:
        rgba(
            2,
            32,
            65,
            0.025
        );

    font-family:
        Inter,
        Montserrat,
        Arial,
        sans-serif;

    font-size:
        clamp(
            80px,
            12vw,
            190px
        );

    font-weight: 950;
    line-height: 1;
    letter-spacing: -0.07em;

    direction: ltr;
    pointer-events: none;
}

.ab-industries__grid {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(
            350px,
            0.72fr
        )
        minmax(
            0,
            1.28fr
        );

    align-items: center;

    gap:
        clamp(
            60px,
            8vw,
            130px
        );
}

.ab-industries__content {
    padding-right: 25px;

    border-right:
        4px solid
        var(--ab-blue);
}

.ab-industries__content p {
    max-width: 570px;
}

.ab-industry-list {
    display: grid;

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

    gap: 13px;
}

.ab-industry-list > div {
    position: relative;

    min-height: 74px;

    padding:
        16px 20px;

    border:
        1px solid
        var(--ab-line);

    border-radius: 2px;

    display: flex;
    align-items: center;

    gap: 13px;

    color: var(--ab-navy);

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

    box-shadow:
        0 10px 28px
        rgba(
            2,
            32,
            65,
            0.055
        );

    font-size: 13px;
    font-weight: 850;

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

.ab-industry-list > div::after {
    content: "";

    position: absolute;
    right: 0;
    bottom: -1px;

    width: 47px;
    height: 3px;

    background: var(--ab-blue);

    transition: width 0.28s ease;
}

.ab-industry-list > div:hover {
    color: #ffffff;
    border-color: var(--ab-blue);
    background: var(--ab-blue);

    transform: translateY(-5px);

    box-shadow:
        0 20px 45px
        rgba(
            12,
            83,
            165,
            0.2
        );
}

.ab-industry-list > div:hover::after {
    width: 100%;
    background: #ffffff;
}

.ab-industry-list i {
    flex: 0 0 36px;

    width: 36px;
    height: 36px;

    border:
        1px solid
        rgba(
            12,
            83,
            165,
            0.19
        );

    border-radius: 2px;

    display: grid;
    place-items: center;

    color: var(--ab-blue);
    background: #edf4fa;

    font-size: 11px;

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

.ab-industry-list > div:hover i {
    color: var(--ab-blue);
    border-color: #ffffff;
    background: #ffffff;
}

/* ========================================================
   ABOUT PART 2 RESPONSIVE
   ======================================================== */

@media (max-width: 1120px) {
    .ab-intro__grid,
    .ab-engineering__grid,
    .ab-industries__grid {
        grid-template-columns:
            minmax(0, 1fr);

        gap: 48px;
    }

    .ab-intro .ab-section-head {
        position: relative;
        top: auto;

        max-width: 850px;
    }

    .ab-engineering__content,
    .ab-industries__content {
        max-width: 850px;
    }

    .ab-capability-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }
}

@media (max-width: 800px) {
    .ab-intro::before,
    .ab-engineering::after,
    .ab-industries::after {
        display: none;
    }

    .ab-intro__content {
        padding:
            32px 25px;
    }

    .ab-engineering__parameters,
    .ab-industry-list {
        grid-template-columns:
            minmax(0, 1fr);
    }

    .ab-capability-card {
        min-height: 280px;
    }
}

@media (max-width: 650px) {
    .ab-capability-grid {
        grid-template-columns:
            minmax(0, 1fr);
    }
}

@media (max-width: 560px) {
    .ab-intro__grid,
    .ab-engineering__grid,
    .ab-industries__grid {
        gap: 34px;
    }

    .ab-intro .ab-section-head,
    .ab-engineering__content,
    .ab-industries__content {
        padding-right: 17px;

        border-right-width: 3px;
    }

    .ab-intro__content {
        padding:
            27px 20px;
    }

    .ab-intro__content p {
        font-size: 13px;
    }

    .ab-intro__content
    .ab-intro__lead {
        font-size: 17px;
    }

    .ab-engineering__parameters > div {
        min-height: 82px;

        padding:
            18px 17px;
    }

    .ab-capability-card {
        min-height: auto;

        padding:
            27px 21px 31px;
    }

    .ab-capability-card h3 {
        margin-top: 28px;
    }

    .ab-industry-list > div {
        min-height: 65px;

        padding:
            13px 14px;
    }
}

/* END ABOUT PAGE V2 PART 2 */

/* ========================================================
   ABOUT PAGE V2 PART 3
   STANDARDS + MISSION + INDUSTRIAL GALLERY
   ======================================================== */

/* ========================================================
   INTERNATIONAL STANDARDS
   ======================================================== */

.ab-standards {
    position: relative;
    overflow: hidden;
    isolation: isolate;

    background:
        linear-gradient(
            rgba(2, 32, 65, 0.032)
            1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(2, 32, 65, 0.032)
            1px,
            transparent 1px
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f4f7f9 100%
        );

    background-size:
        88px 88px,
        88px 88px,
        cover;
}

.ab-standards::before {
    content: "";

    position: absolute;
    top: 0;
    right: 0;

    width: 36%;
    height: 4px;

    background: var(--ab-blue);
}

.ab-standards::after {
    content: "STANDARDS";

    position: absolute;
    z-index: -1;

    left: 2vw;
    bottom: -12px;

    color:
        rgba(
            2,
            32,
            65,
            0.025
        );

    font-family:
        Inter,
        Montserrat,
        Arial,
        sans-serif;

    font-size:
        clamp(
            82px,
            12vw,
            190px
        );

    font-weight: 950;
    line-height: 1;
    letter-spacing: -0.075em;

    direction: ltr;
    white-space: nowrap;

    pointer-events: none;
}

.ab-standards .ab-section-head {
    position: relative;
    z-index: 2;

    padding-right: 25px;

    border-right:
        4px solid
        var(--ab-blue);
}

.ab-standard-grid {
    position: relative;
    z-index: 2;

    display: grid;

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

    border-top:
        1px solid
        var(--ab-line);

    border-right:
        1px solid
        var(--ab-line);

    box-shadow:
        0 24px 65px
        rgba(
            2,
            32,
            65,
            0.07
        );
}

.ab-standard-grid > div {
    position: relative;
    overflow: hidden;

    min-height: 148px;

    padding:
        25px 18px;

    border-left:
        1px solid
        var(--ab-line);

    border-bottom:
        1px solid
        var(--ab-line);

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

    color: var(--ab-navy);

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

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

.ab-standard-grid > div::before {
    content: "";

    position: absolute;
    top: 0;
    right: 0;

    width: 0;
    height: 4px;

    background: var(--ab-blue);

    transition:
        width 0.28s ease;
}

.ab-standard-grid > div::after {
    content: "";

    position: absolute;
    right: -34px;
    bottom: -34px;

    width: 92px;
    height: 92px;

    border:
        1px solid
        rgba(
            12,
            83,
            165,
            0.11
        );

    transform: rotate(45deg);

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

.ab-standard-grid > div:hover {
    z-index: 3;

    color: #ffffff;
    background: var(--ab-navy);

    transform: translateY(-7px);

    box-shadow:
        0 24px 55px
        rgba(
            2,
            32,
            65,
            0.2
        );
}

.ab-standard-grid > div:hover::before {
    width: 100%;
}

.ab-standard-grid > div:hover::after {
    border-color:
        rgba(
            255,
            255,
            255,
            0.13
        );

    transform:
        rotate(45deg)
        scale(1.2);
}

.ab-standard-grid span {
    position: relative;
    z-index: 2;

    max-width: 180px;

    text-align: center;

    font-family:
        Inter,
        Montserrat,
        Shabnam,
        Arial,
        sans-serif;

    font-size:
        clamp(
            15px,
            1.3vw,
            20px
        );

    font-weight: 950;
    line-height: 1.65;

    direction: ltr;
}

/* ========================================================
   ACG MISSION
   ======================================================== */

.ab-mission {
    position: relative;
    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #edf2f6 0%,
            #f8fafc 47%,
            #ffffff 100%
        );
}

.ab-mission::before {
    content: "";

    position: absolute;
    top: 0;
    bottom: 0;
    left: 8%;

    width: 1px;

    background:
        linear-gradient(
            transparent,
            rgba(
                12,
                83,
                165,
                0.18
            ),
            transparent
        );
}

.ab-mission__grid {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(
            0,
            1.13fr
        )
        minmax(
            370px,
            0.87fr
        );

    grid-template-areas:
        "media content";

    align-items: center;

    gap:
        clamp(
            55px,
            7vw,
            120px
        );

    direction: ltr;
}

.ab-mission__media {
    grid-area: media;

    position: relative;
    overflow: hidden;

    min-height:
        clamp(
            430px,
            38vw,
            610px
        );

    margin: 0;

    border:
        1px solid
        #b9c6d1;

    border-radius: 2px;

    background: var(--ab-navy);

    box-shadow:
        0 30px 75px
        rgba(
            2,
            32,
            65,
            0.16
        );
}

.ab-mission__media::before {
    content: "";

    position: absolute;
    z-index: 2;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            transparent 42%,
            rgba(
                1,
                22,
                41,
                0.88
            ) 100%
        );

    pointer-events: none;
}

.ab-mission__media::after {
    content: "";

    position: absolute;
    z-index: 3;

    top: 18px;
    right: 18px;
    bottom: 18px;
    left: 18px;

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

    pointer-events: none;
}

.ab-mission__media img {
    width: 100%;
    height: 100%;

    position: absolute;
    inset: 0;

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

    transform: scale(1.01);

    filter:
        contrast(1.04)
        saturate(0.94);

    transition:
        transform 0.6s ease,
        filter 0.6s ease;
}

.ab-mission__media:hover img {
    transform: scale(1.055);

    filter:
        contrast(1.08)
        saturate(1.02);
}

.ab-mission__media figcaption {
    position: absolute;
    z-index: 4;

    right: 42px;
    bottom: 39px;
    left: 42px;

    color: #ffffff;

    direction: ltr;
}

.ab-mission__media figcaption span {
    display: block;

    color: #8cc8f8;

    font-family:
        Inter,
        Montserrat,
        Arial,
        sans-serif;

    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.105em;
}

.ab-mission__media figcaption strong {
    display: block;

    margin-top: 7px;

    font-family:
        Inter,
        Montserrat,
        Arial,
        sans-serif;

    font-size:
        clamp(
            19px,
            1.8vw,
            27px
        );

    font-weight: 900;
}

.ab-mission__content {
    grid-area: content;

    direction: rtl;

    padding-right: 27px;

    border-right:
        4px solid
        var(--ab-blue);
}

.ab-mission__lead {
    color: var(--ab-navy) !important;

    font-size:
        clamp(
            18px,
            1.5vw,
            23px
        ) !important;

    font-weight: 850 !important;
    line-height: 2 !important;
}

.ab-mission__content p + p {
    margin-top: 20px;
    padding-top: 20px;

    border-top:
        1px solid
        rgba(
            2,
            32,
            65,
            0.11
        );
}

.ab-mission__values {
    margin-top: 32px;

    display: flex;
    flex-wrap: wrap;

    gap: 8px;
}

.ab-mission__values span {
    min-height: 38px;

    padding-inline: 15px;

    border:
        1px solid
        rgba(
            12,
            83,
            165,
            0.22
        );

    border-radius: 2px;

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

    color: var(--ab-blue-deep);

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

    font-family:
        Inter,
        Montserrat,
        Arial,
        sans-serif;

    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.055em;

    direction: ltr;
}

/* ========================================================
   INDUSTRIAL FACTORY GALLERY
   ======================================================== */

.ab-gallery {
    position: relative;
    overflow: hidden;
    isolation: isolate;

    padding:
        clamp(
            100px,
            8vw,
            145px
        )
        0
        clamp(
            105px,
            8vw,
            150px
        );

    background:
        radial-gradient(
            circle,
            rgba(
                12,
                83,
                165,
                0.095
            )
            1px,
            transparent 1.6px
        ),
        linear-gradient(
            rgba(
                2,
                32,
                65,
                0.038
            )
            1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(
                2,
                32,
                65,
                0.038
            )
            1px,
            transparent 1px
        ),
        linear-gradient(
            180deg,
            #f8fafc 0%,
            #eaf0f4 100%
        );

    background-size:
        24px 24px,
        96px 96px,
        96px 96px,
        cover;
}

.ab-gallery::before {
    content: "";

    position: absolute;
    top: 0;
    right: 0;

    width: 35%;
    height: 4px;

    background: var(--ab-blue);
}

.ab-gallery::after {
    content: "";

    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(
                2,
                32,
                65,
                0.22
            ),
            transparent
        );
}

.ab-gallery__watermark {
    position: absolute;
    z-index: 0;

    top: 32px;
    left: 2vw;

    color:
        rgba(
            2,
            32,
            65,
            0.04
        );

    font-family:
        Inter,
        Montserrat,
        Arial,
        sans-serif;

    font-size:
        clamp(
            68px,
            9.8vw,
            168px
        );

    font-weight: 950;
    line-height: 1;
    letter-spacing: -0.07em;

    direction: ltr;
    white-space: nowrap;

    pointer-events: none;
}

.ab-gallery__head {
    position: relative;
    z-index: 2;

    width:
        min(
            calc(100% - 80px),
            1365px
        );

    margin:
        0 auto 48px;

    padding-right: 25px;

    border-right:
        4px solid
        var(--ab-blue);
}

.ab-gallery__head h2 {
    max-width: 920px;
}

.ab-gallery__head p {
    max-width: 790px;
}

.ab-gallery__stage {
    position: relative;
    z-index: 2;

    margin-top: 46px;
    padding-block: 14px;

    direction: ltr;
}

.ab-gallery__stage::before,
.ab-gallery__stage::after {
    content: "";

    position: absolute;
    z-index: 1;

    right: 4vw;
    left: 4vw;

    height: 1px;

    pointer-events: none;
}

.ab-gallery__stage::before {
    top: 0;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(
                12,
                83,
                165,
                0.3
            ),
            transparent
        );
}

.ab-gallery__stage::after {
    bottom: 0;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(
                2,
                32,
                65,
                0.18
            ),
            transparent
        );
}

.ab-gallery__rail {
    width: 100%;

    overflow-x: auto;
    overflow-y: hidden;

    display: flex;
    align-items: stretch;

    gap: 24px;

    padding:
        18px
        clamp(
            25px,
            4vw,
            70px
        )
        29px;

    scroll-behavior: smooth;
    scroll-snap-type: x proximity;

    cursor: grab;

    scrollbar-width: thin;
    scrollbar-color:
        var(--ab-blue)
        rgba(
            2,
            32,
            65,
            0.08
        );

    user-select: none;
    touch-action: pan-y;
}

.ab-gallery__rail:active {
    cursor: grabbing;
}

.ab-gallery__rail::-webkit-scrollbar {
    height: 7px;
}

.ab-gallery__rail::-webkit-scrollbar-track {
    background:
        rgba(
            2,
            32,
            65,
            0.07
        );
}

.ab-gallery__rail::-webkit-scrollbar-thumb {
    background: var(--ab-blue);
}

.ab-gallery__slide {
    flex: 0 0 auto;

    height: 440px;

    margin: 0;

    scroll-snap-align: center;
}

.ab-gallery__slide--slim {
    width: 25vw;
    min-width: 350px;
}

.ab-gallery__slide--normal {
    width: 32vw;
    min-width: 450px;
}

.ab-gallery__slide--wide {
    width: 43vw;
    min-width: 610px;
}

.ab-gallery__frame {
    position: relative;
    overflow: hidden;

    width: 100%;
    height: 100%;

    padding: 0;

    border:
        1px solid
        #becad4;

    border-radius: 2px;

    display: block;

    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #e9eef2 100%
        );

    box-shadow:
        0 20px 48px
        rgba(
            2,
            32,
            65,
            0.13
        );

    cursor: zoom-in;

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

.ab-gallery__frame::before {
    content: "";

    position: absolute;
    z-index: 2;

    inset: 17px;

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

    pointer-events: none;
}

.ab-gallery__frame::after {
    content: "";

    position: absolute;
    z-index: 3;

    right: 0;
    bottom: 0;

    width: 78px;
    height: 4px;

    background: var(--ab-blue);

    transition:
        width 0.28s ease;
}

.ab-gallery__frame:hover,
.ab-gallery__frame:focus-visible {
    border-color:
        rgba(
            12,
            83,
            165,
            0.72
        );

    transform: translateY(-7px);

    box-shadow:
        0 31px 72px
        rgba(
            2,
            32,
            65,
            0.19
        );
}

.ab-gallery__frame:hover::after,
.ab-gallery__frame:focus-visible::after {
    width: 100%;
}

.ab-gallery__frame img {
    display: block;

    width: 100%;
    height: 100%;

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

    filter:
        contrast(1.03)
        saturate(0.94);

    transition:
        transform 0.48s ease,
        filter 0.48s ease;
}

.ab-gallery__frame:hover img,
.ab-gallery__frame:focus-visible img {
    transform: scale(1.055);

    filter:
        contrast(1.08)
        saturate(1.02);
}

/*
 * تصویر افقی اول بدون برش شدید نمایش داده شود.
 */

.ab-gallery__frame[data-index="0"] {
    background:
        linear-gradient(
            rgba(
                2,
                32,
                65,
                0.034
            )
            1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(
                2,
                32,
                65,
                0.034
            )
            1px,
            transparent 1px
        ),
        #ffffff;

    background-size:
        55px 55px,
        55px 55px,
        auto;
}

.ab-gallery__frame[data-index="0"] img {
    padding:
        clamp(
            18px,
            2vw,
            32px
        );

    object-fit: contain;

    filter:
        drop-shadow(
            0 8px 9px
            rgba(
                2,
                32,
                65,
                0.14
            )
        )
        drop-shadow(
            0 22px 24px
            rgba(
                2,
                32,
                65,
                0.18
            )
        );
}

.ab-gallery__frame[data-index="0"]:hover img,
.ab-gallery__frame[data-index="0"]:focus-visible img {
    transform:
        translateY(-5px)
        scale(1.025);
}

/* ========================================================
   GALLERY CONTROLS
   ======================================================== */

.ab-gallery__nav {
    position: absolute;
    z-index: 6;

    top: 50%;

    width: 64px;
    height: 64px;

    padding: 0;

    border:
        1px solid
        rgba(
            2,
            32,
            65,
            0.19
        );

    border-radius: 2px;

    display: grid;
    place-items: center;

    color: var(--ab-navy);

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

    box-shadow:
        0 18px 45px
        rgba(
            2,
            32,
            65,
            0.2
        );

    transform: translateY(-50%);

    cursor: pointer;

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

.ab-gallery__nav::before {
    content: "";

    position: absolute;

    inset: 6px;

    border:
        1px solid
        rgba(
            12,
            83,
            165,
            0.13
        );

    pointer-events: none;
}

.ab-gallery__nav:hover,
.ab-gallery__nav:focus-visible {
    color: #ffffff;
    border-color: var(--ab-blue);
    background: var(--ab-blue);

    transform:
        translateY(-50%)
        scale(1.04);

    box-shadow:
        0 23px 52px
        rgba(
            12,
            83,
            165,
            0.31
        );
}

.ab-gallery__nav svg {
    width: 24px;
    height: 24px;

    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: square;
    stroke-linejoin: miter;
}

.ab-gallery__nav--prev {
    left: 25px;
}

.ab-gallery__nav--next {
    right: 25px;
}

/* ========================================================
   ABOUT PART 3 RESPONSIVE
   ======================================================== */

@media (min-width: 1500px) {
    .ab-gallery__slide {
        height: 480px;
    }

    .ab-gallery__slide--slim {
        min-width: 400px;
    }

    .ab-gallery__slide--normal {
        min-width: 520px;
    }

    .ab-gallery__slide--wide {
        min-width: 680px;
    }
}

@media (
    min-width: 1121px
)
and (
    max-width: 1380px
) {
    .ab-gallery__slide {
        height: 405px;
    }

    .ab-gallery__slide--slim {
        width: 28vw;
        min-width: 325px;
    }

    .ab-gallery__slide--normal {
        width: 36vw;
        min-width: 410px;
    }

    .ab-gallery__slide--wide {
        width: 48vw;
        min-width: 545px;
    }
}

@media (max-width: 1120px) {
    .ab-standard-grid {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );
    }

    .ab-mission__grid {
        grid-template-columns:
            minmax(0, 1fr);

        grid-template-areas:
            "content"
            "media";

        gap: 48px;

        direction: rtl;
    }

    .ab-mission__content {
        max-width: 850px;
    }

    .ab-gallery__head {
        width:
            calc(100% - 48px);
    }

    .ab-gallery__slide {
        height: 355px;
    }

    .ab-gallery__slide--slim {
        width: 37vw;
        min-width: 305px;
    }

    .ab-gallery__slide--normal {
        width: 49vw;
        min-width: 400px;
    }

    .ab-gallery__slide--wide {
        width: 62vw;
        min-width: 510px;
    }
}

@media (max-width: 800px) {
    .ab-standards::after,
    .ab-gallery__watermark {
        display: none;
    }

    .ab-standard-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    .ab-mission__media {
        min-height: 420px;
    }

    .ab-gallery {
        padding:
            82px 0 90px;
    }

    .ab-gallery__head {
        width:
            calc(100% - 40px);

        margin-bottom: 34px;

        padding-right: 18px;
    }

    .ab-gallery__stage {
        margin-top: 31px;
    }

    .ab-gallery__rail {
        gap: 16px;

        padding:
            14px
            18px
            24px;
    }

    .ab-gallery__slide {
        height: 315px;
    }

    .ab-gallery__slide--slim {
        width: 59vw;
        min-width: 315px;
    }

    .ab-gallery__slide--normal {
        width: 73vw;
        min-width: 395px;
    }

    .ab-gallery__slide--wide {
        width: 83vw;
        min-width: 445px;
    }

    .ab-gallery__nav {
        width: 54px;
        height: 54px;
    }

    .ab-gallery__nav--prev {
        left: 8px;
    }

    .ab-gallery__nav--next {
        right: 8px;
    }
}

@media (max-width: 560px) {
    .ab-standards .ab-section-head,
    .ab-mission__content {
        padding-right: 17px;

        border-right-width: 3px;
    }

    .ab-standard-grid {
        grid-template-columns:
            minmax(0, 1fr);
    }

    .ab-standard-grid > div {
        min-height: 92px;
    }

    .ab-mission__media {
        min-height: 330px;
    }

    .ab-mission__media figcaption {
        right: 28px;
        bottom: 27px;
        left: 28px;
    }

    .ab-mission__values {
        gap: 6px;
    }

    .ab-gallery {
        padding:
            70px 0 78px;
    }

    .ab-gallery__head {
        width:
            calc(100% - 32px);

        margin-inline: 16px;

        padding-right: 14px;
    }

    .ab-gallery__rail {
        gap: 14px;

        padding:
            12px
            12px
            22px;
    }

    .ab-gallery__slide,
    .ab-gallery__slide--slim,
    .ab-gallery__slide--normal,
    .ab-gallery__slide--wide {
        width: 88vw;
        min-width: 88vw;
        height: 290px;
    }

    .ab-gallery__frame[data-index="0"] img {
        padding: 17px;
    }

    .ab-gallery__nav {
        width: 48px;
        height: 48px;
    }

    .ab-gallery__nav svg {
        width: 19px;
        height: 19px;
    }

    .ab-gallery__nav--prev {
        left: 6px;
    }

    .ab-gallery__nav--next {
        right: 6px;
    }
}

/* END ABOUT PAGE V2 PART 3 */

/* ========================================================
   ABOUT PAGE V2 PART 4
   FINAL CTA + LIGHTBOX + FINAL RESPONSIVE
   ======================================================== */

/* ========================================================
   FINAL CALL TO ACTION
   ======================================================== */

.ab-final {
    position: relative;
    overflow: hidden;
    isolation: isolate;

    padding-block:
        clamp(
            95px,
            8vw,
            145px
        );

    color: #ffffff;

    background:
        linear-gradient(
            112deg,
            #011629 0%,
            #022041 52%,
            #06417d 100%
        );
}

.ab-final::before {
    content: "";

    position: absolute;
    z-index: -1;

    inset: 0;

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

    background-size:
        88px 88px,
        88px 88px;
}

.ab-final::after {
    content: "TECHNICAL CONSULTATION";

    position: absolute;
    z-index: -1;

    left: 2vw;
    bottom: -12px;

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

    font-family:
        Inter,
        Montserrat,
        Arial,
        sans-serif;

    font-size:
        clamp(
            64px,
            9.5vw,
            155px
        );

    font-weight: 950;
    line-height: 1;
    letter-spacing: -0.065em;

    white-space: nowrap;
    direction: ltr;

    pointer-events: none;
}

.ab-final__content {
    position: relative;
    z-index: 2;

    max-width: 1040px;

    margin-inline: auto;

    text-align: center;
}

.ab-final__content > span {
    display: inline-flex;
    align-items: center;

    gap: 12px;

    color: #8cc8f8;

    font-family:
        Inter,
        Montserrat,
        Arial,
        sans-serif;

    font-size: 11px;
    font-weight: 950;
    letter-spacing: 0.09em;

    direction: ltr;
    text-transform: uppercase;
}

.ab-final__content > span::before,
.ab-final__content > span::after {
    content: "";

    width: 42px;
    height: 1px;

    background: currentColor;
}

.ab-final h2 {
    max-width: 920px;

    margin:
        18px auto 0;

    color: #ffffff;

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

    line-height: 1.45;
}

.ab-final p {
    max-width: 760px;

    margin:
        18px auto 0;

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

    font-size: 15px;
    line-height: 2.15;
}

.ab-final__actions {
    margin-top: 36px;

    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    gap: 10px;
}

/* ========================================================
   ABOUT LIGHTBOX
   ======================================================== */

.ab-lightbox {
    position: fixed;
    z-index: 99999;

    inset: 0;

    padding:
        78px
        clamp(
            55px,
            7vw,
            120px
        )
        62px;

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

    visibility: hidden;
    opacity: 0;

    color: #ffffff;

    background:
        rgba(
            1,
            14,
            27,
            0.96
        );

    backdrop-filter:
        blur(10px);

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

.ab-lightbox.is-open {
    visibility: visible;
    opacity: 1;
}

.ab-lightbox::before {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

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

    background-size:
        90px 90px,
        90px 90px;
}

.ab-lightbox__image-wrap {
    position: relative;
    z-index: 2;

    width:
        min(
            100%,
            1440px
        );

    height:
        min(
            82vh,
            900px
        );

    overflow: auto;

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

    border-radius: 2px;

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

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

    box-shadow:
        0 35px 100px
        rgba(
            0,
            0,
            0,
            0.42
        );

    cursor: zoom-in;
}

.ab-lightbox__image-wrap::before {
    content: "";

    position: absolute;
    z-index: 1;

    inset: 16px;

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

    pointer-events: none;
}

.ab-lightbox__image {
    position: relative;
    z-index: 2;

    display: block;

    width: 100%;
    height: 100%;

    max-width: none;
    max-height: none;

    object-fit: contain;

    transition:
        width 0.28s ease,
        height 0.28s ease,
        transform 0.28s ease;
}

.ab-lightbox__image-wrap.is-zoomed {
    display: block;

    cursor: zoom-out;
}

.ab-lightbox__image-wrap.is-zoomed
.ab-lightbox__image {
    width: 150%;
    height: 150%;

    object-fit: contain;
    transform-origin: center;
}

.ab-lightbox__close,
.ab-lightbox__prev,
.ab-lightbox__next {
    position: absolute;
    z-index: 5;

    width: 58px;
    height: 58px;

    padding: 0;

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

    border-radius: 2px;

    display: grid;
    place-items: center;

    color: #ffffff;

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

    font-family:
        Arial,
        sans-serif;

    cursor: pointer;

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

.ab-lightbox__close:hover,
.ab-lightbox__close:focus-visible,
.ab-lightbox__prev:hover,
.ab-lightbox__prev:focus-visible,
.ab-lightbox__next:hover,
.ab-lightbox__next:focus-visible {
    color: var(--ab-navy);
    border-color: #ffffff;
    background: #ffffff;
}

.ab-lightbox__close {
    top: 18px;
    right: 20px;

    font-size: 32px;
    line-height: 1;
}

.ab-lightbox__prev,
.ab-lightbox__next {
    top: 50%;

    font-size: 40px;

    transform:
        translateY(-50%);
}

.ab-lightbox__prev:hover,
.ab-lightbox__prev:focus-visible,
.ab-lightbox__next:hover,
.ab-lightbox__next:focus-visible {
    transform:
        translateY(-50%)
        scale(1.04);
}

.ab-lightbox__prev {
    left: 20px;
}

.ab-lightbox__next {
    right: 20px;
}

.ab-lightbox__hint {
    position: absolute;
    z-index: 5;

    bottom: 19px;
    left: 50%;

    padding:
        8px 14px;

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

    border-radius: 2px;

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

    background:
        rgba(
            0,
            0,
            0,
            0.22
        );

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

    transform:
        translateX(-50%);

    white-space: nowrap;
}

/* ========================================================
   ACCESSIBILITY AND FOCUS
   ======================================================== */

.ab-page a:focus-visible,
.ab-page button:focus-visible,
.ab-gallery__rail:focus-visible {
    outline:
        3px solid
        rgba(
            12,
            83,
            165,
            0.34
        );

    outline-offset: 3px;
}

.ab-lightbox button:focus-visible {
    outline:
        3px solid
        rgba(
            255,
            255,
            255,
            0.36
        );

    outline-offset: 3px;
}

/* ========================================================
   FINAL RESPONSIVE REFINEMENTS
   ======================================================== */

@media (min-width: 1680px) {
    .ab-shell {
        width: min(
            100%,
            1640px
        );
    }

    .ab-hero__grid {
        grid-template-columns:
            minmax(
                560px,
                1.04fr
            )
            minmax(
                530px,
                0.96fr
            );
    }

    .ab-product-stage img {
        width:
            min(
                100%,
                730px
            );

        max-height: 680px;
    }
}

@media (
    min-width: 1121px
)
and (
    max-width: 1380px
) {
    .ab-shell {
        padding-inline:
            clamp(
                30px,
                4vw,
                58px
            );
    }

    .ab-hero__grid {
        grid-template-columns:
            minmax(
                430px,
                0.96fr
            )
            minmax(
                470px,
                1.04fr
            );

        gap: 50px;
    }

    .ab-hero h1 {
        font-size:
            clamp(
                39px,
                3.65vw,
                52px
            );
    }

    .ab-product-stage img {
        max-height: 560px;
    }

    .ab-product-note {
        min-width: 145px;
    }
}

@media (max-width: 1120px) {
    .ab-final__content {
        max-width: 900px;
    }

    .ab-lightbox {
        padding:
            75px
            70px
            58px;
    }

    .ab-lightbox__image-wrap {
        height:
            min(
                78vh,
                760px
            );
    }
}

@media (max-width: 800px) {
    .ab-final {
        padding-block: 82px;
    }

    .ab-final__actions {
        width: 100%;

        flex-direction: column;
    }

    .ab-final__actions .ab-btn {
        width: 100%;
    }

    .ab-final::after {
        display: none;
    }

    .ab-lightbox {
        padding:
            70px
            18px
            60px;
    }

    .ab-lightbox__image-wrap {
        width: 100%;

        height:
            min(
                73vh,
                650px
            );
    }

    .ab-lightbox__close,
    .ab-lightbox__prev,
    .ab-lightbox__next {
        width: 50px;
        height: 50px;
    }

    .ab-lightbox__close {
        top: 11px;
        right: 12px;
    }

    .ab-lightbox__prev {
        left: 5px;
    }

    .ab-lightbox__next {
        right: 5px;
    }
}

@media (max-width: 560px) {
    .ab-final {
        padding-block: 70px;
    }

    .ab-final__content > span {
        font-size: 9px;
    }

    .ab-final__content > span::before,
    .ab-final__content > span::after {
        width: 25px;
    }

    .ab-final h2 {
        font-size:
            clamp(
                29px,
                8.5vw,
                39px
            );
    }

    .ab-final p {
        font-size: 13px;
    }

    .ab-lightbox {
        padding:
            64px
            8px
            54px;
    }

    .ab-lightbox__image-wrap {
        height: 68vh;
    }

    .ab-lightbox__image-wrap::before {
        inset: 8px;
    }

    .ab-lightbox__close,
    .ab-lightbox__prev,
    .ab-lightbox__next {
        width: 44px;
        height: 44px;
    }

    .ab-lightbox__close {
        font-size: 27px;
    }

    .ab-lightbox__prev,
    .ab-lightbox__next {
        font-size: 32px;
    }

    .ab-lightbox__hint {
        bottom: 14px;

        font-size: 9px;
    }
}

@media (max-width: 380px) {
    .ab-shell {
        padding-inline: 13px;
    }

    .ab-hero h1 {
        font-size: 29px;
    }

    .ab-hero__visual,
    .ab-product-stage {
        min-height: 290px;
    }

    .ab-product-stage img {
        max-height: 285px;
    }

    .ab-gallery__slide,
    .ab-gallery__slide--slim,
    .ab-gallery__slide--normal,
    .ab-gallery__slide--wide {
        width: 90vw;
        min-width: 90vw;
        height: 260px;
    }

    .ab-lightbox__image-wrap {
        height: 65vh;
    }
}

/* ========================================================
   REDUCED MOTION
   ======================================================== */

@media (
    prefers-reduced-motion:
    reduce
) {
    .ab-page *,
    .ab-page *::before,
    .ab-page *::after {
        scroll-behavior: auto !important;

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;
    }
}

/* END ABOUT PAGE V2 PART 4 */

/* ========================================================
   ABOUT LIGHTBOX SCROLL LOCK
   ======================================================== */

html.ab-lightbox-lock,
body.ab-lightbox-lock {
    overflow: hidden !important;
}

.ab-gallery__rail.is-dragging,
.ab-gallery__rail.is-dragging * {
    cursor: grabbing !important;
}

.ab-gallery__rail.is-dragging
.ab-gallery__frame {
    pointer-events: none;
}

/* END ABOUT LIGHTBOX SCROLL LOCK */