/* =========================================================
   AG BODY SHOP — HOME PAGE
========================================================= */


/* =========================================================
   =========================================================
   STAGE 02 — HOME HERO / BEFORE & AFTER
   =========================================================
========================================================= */


/* =========================================================
   01 — HOME PAGE FOUNDATION
========================================================= */

.home-main {

    position:
        relative;

    width:
        100%;
}


.home-slide {

    position:
        relative;

    width:
        100%;
}


/* =========================================================
   02 — HERO BASE

   backgroundslide1.webp در پروژه وجود ندارد؛
   بنابراین پس‌زمینه کاملاً با Gradient ساخته می‌شود.
========================================================= */

.s1-hero {

    --split:
        50%;

    position:
        relative;

    width:
        100%;

    height:
        100svh;

    min-height:
        720px;

    overflow:
        hidden;

    isolation:
        isolate;

    color:
        #ffffff;

        background-image:

    linear-gradient(
        180deg,
        rgba(2, 5, 7, .13) 0%,
        rgba(2, 5, 7, .02) 45%,
        rgba(2, 5, 7, .28) 100%
    ),

    url("../img/backgroundslide1.webp");

background-size:
    cover;

background-position:
    center;

background-repeat:
    no-repeat;
}


/* =========================================================
   03 — WARM / COOL ENVIRONMENTAL LIGHT
========================================================= */

.s1-hero::before {

    content:
        "";

    position:
        absolute;

    z-index:
        0;

    inset:
        0;

    pointer-events:
        none;

    background:

        radial-gradient(
            ellipse at 18% 72%,
            rgba(180, 24, 24, .16),
            transparent 37%
        ),

        radial-gradient(
            ellipse at 82% 72%,
            rgba(30, 100, 180, .15),
            transparent 37%
        ),

        linear-gradient(
            90deg,
            rgba(255, 255, 255, .018),
            transparent 32%,
            transparent 68%,
            rgba(255, 255, 255, .018)
        );
}


/* =========================================================
   04 — VIGNETTE
========================================================= */

.s1-hero::after {

    content:
        "";

    position:
        absolute;

    z-index:
        1;

    inset:
        0;

    pointer-events:
        none;

    background:

        radial-gradient(
            ellipse at center,
            transparent 43%,
            rgba(0, 0, 0, .36) 100%
        );
}


/* =========================================================
   05 — HERO COPY

   Header در نسخه وردپرسی خارج از Hero و به‌صورت Absolute
   قرار دارد. Padding بالا فضای واقعی Header را جبران می‌کند.
========================================================= */

.s1-copy {

    position:
        relative;

    z-index:
        30;

    width:

        min(
            1150px,
            calc(100% - 40px)
        );

    margin:
        0 auto;

    padding-top:

        clamp(
            155px,
            18vh,
            190px
        );

    text-align:
        center;
}


/* =========================================================
   06 — EYEBROW
========================================================= */

.s1-eyebrow {

    margin:
        0 0 12px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex-wrap:
        wrap;

    gap:
        9px;

    color:
        rgba(255, 255, 255, .68);

    font-family:
        var(--font-body);

    font-size:
        12px;

    font-weight:
        300;

    line-height:
        1.4;

    letter-spacing:
        4px;
}


.s1-eyebrow-separator {

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


/* =========================================================
   07 — MAIN TITLE
========================================================= */

.s1-title {

    margin:
        0;

    color:
        var(--color-yellow);

    font-family:
        var(--font-title);

    font-size:

        clamp(
            34px,
            3.2vw,
            52px
        );

    font-weight:
        400;

    line-height:
        1.06;

    text-shadow:

        0 3px 18px
        rgba(0, 0, 0, .66);
}


/* =========================================================
   08 — DESCRIPTION
========================================================= */

.s1-description {

    width:

        min(
            980px,
            94%
        );

    margin:

        22px
        auto
        0;

    color:
        rgba(255, 255, 255, .88);

    font-family:
        var(--font-body);

    font-size:

        clamp(
            16px,
            1.05vw,
            18px
        );

    font-weight:
        300;

    line-height:
        1.55;

    letter-spacing:
        .32px;

    text-transform:
        uppercase;

    text-shadow:

        0 2px 8px
        rgba(0, 0, 0, .72);
}


/* =========================================================
   09 — HERO ACTIONS
========================================================= */

.s1-actions {

    margin-top:
        34px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex-wrap:
        wrap;

    gap:
        16px;
}


.s1-button {

    min-width:
        180px;

    min-height:
        48px;

    padding:

        0
        27px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        30px;

    font-family:
        var(--font-title);

    font-size:
        17px;

    font-weight:
        400;

    line-height:
        1;

    text-align:
        center;

    transition:

        color .22s ease,
        background .22s ease,
        border-color .22s ease,
        transform .22s ease;
}


.s1-button:hover {

    transform:
        translateY(-2px);
}


.s1-button-primary {

    color:
        #111416;

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


.s1-button-primary:hover {

    color:
        #111416;

    background:
        var(--color-yellow-hover);
}


.s1-button-secondary {

    color:
        #ffffff;

    background:
        rgba(4, 7, 10, .38);

    border:

        1px solid
        rgba(255, 255, 255, .60);

    backdrop-filter:
        blur(7px);

    -webkit-backdrop-filter:
        blur(7px);
}


.s1-button-secondary:hover {

    color:
        #111416;

    background:
        rgba(255, 255, 255, .90);

    border-color:
        rgba(255, 255, 255, .90);
}


/* =========================================================
   10 — BEFORE / AFTER ROOT
========================================================= */

.s1-compare {

    --split:
        50%;

    position:
        absolute;

    z-index:
        20;

    left:
        50%;

    bottom:
        28px;

    width:

        min(
            785px,
            58vw
        );

    height:

        clamp(
            300px,
            43vh,
            445px
        );

    transform:
        translateX(-50%);

    user-select:
        none;

    touch-action:
        pan-y;

    overscroll-behavior-x:
        contain;

    cursor:
        ew-resize;
}


.s1-compare.is-dragging {

    cursor:
        grabbing;
}


/* =========================================================
   11 — STACKED VEHICLE IMAGES
========================================================= */

.s1-car {

    position:
        absolute;

    inset:
        0;

    display:
        block;

    width:
        100%;

    max-width:
        none;

    height:
        100%;

    object-fit:
        contain;

    object-position:
        center bottom;

    pointer-events:
        none;

    user-select:
        none;
}


.s1-car-after {

    z-index:
        1;
}


.s1-car-before {

    z-index:
        2;

    clip-path:

        inset(
            0
            calc(100% - var(--split))
            0
            0
        );

    will-change:
        clip-path;
}


/* =========================================================
   12 — DIVIDER
========================================================= */

.s1-divider {

    position:
        absolute;

    z-index:
        10;

    left:
        var(--split);

    top:
        5%;

    bottom:
        0;

    width:
        2px;

    transform:
        translateX(-50%);

    pointer-events:
        none;

    background:

        linear-gradient(
            180deg,
            transparent,
            rgba(255, 255, 255, .95) 12%,
            rgba(255, 255, 255, .95) 88%,
            transparent
        );

    box-shadow:

        0 0 12px
        rgba(255, 255, 255, .22);

    will-change:
        left;
}


/* =========================================================
   13 — COMPARISON HANDLE
========================================================= */

.s1-handle {

    position:
        absolute;

    z-index:
        15;

    left:
        var(--split);

    top:
        56%;

    width:
        58px;

    height:
        38px;

    padding:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    transform:

        translate(
            -50%,
            -50%
        );

    color:
        #ffffff;

    background:
        rgba(8, 10, 12, .66);

    border:

        1px solid
        rgba(255, 255, 255, .72);

    border-radius:
        24px;

    backdrop-filter:
        blur(9px);

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

    box-shadow:

        0 5px 22px
        rgba(0, 0, 0, .38);

    cursor:
        ew-resize;

    touch-action:
        pan-y;

    will-change:
        left;

    transition:

        background .2s ease,
        border-color .2s ease,
        box-shadow .2s ease,
        transform .2s ease;
}


.s1-handle:hover,
.s1-handle:focus-visible {

    background:
        rgba(231, 185, 0, .88);

    border-color:
        #ffffff;

    box-shadow:

        0 7px 26px
        rgba(0, 0, 0, .45);
}


.s1-handle:focus-visible {

    outline:

        2px solid
        #ffffff;

    outline-offset:
        4px;
}


.s1-handle-left,
.s1-handle-right {

    width:
        10px;

    height:
        10px;

    border-top:
        2px solid currentColor;

    border-left:
        2px solid currentColor;
}


.s1-handle-left {

    transform:
        rotate(-45deg);
}


.s1-handle-right {

    transform:
        rotate(135deg);
}


/* =========================================================
   14 — TABLET / MOBILE
========================================================= */

@media(max-width:860px) {

    .s1-hero {

        height:
            100svh;

        min-height:
            780px;
    }


    .s1-copy {

        width:
            calc(100% - 28px);

        padding-top:
            140px;
    }


    .s1-eyebrow {

        margin-bottom:
            12px;

        gap:
            7px;

        font-size:
            11px;

        letter-spacing:
            2.6px;
    }


    .s1-title {

        font-size:

            clamp(
                30px,
                7.4vw,
                39px
            );

        line-height:
            1.08;
    }


    .s1-description {

        width:
            96%;

        margin-top:
            22px;

        font-size:
            14px;

        line-height:
            1.55;

        letter-spacing:
            .18px;
    }


    .s1-actions {

        gap:
            10px;

        margin-top:
            32px;
    }


    .s1-button {

        min-width:
            0;

        min-height:
            43px;

        padding:

            0
            19px;

        font-size:
            14px;
    }


    .s1-compare {

        width:

            min(
                92vw,
                620px
            );

        height:

            clamp(
                270px,
                37vh,
                370px
            );

        bottom:
            82px;
    }


    .s1-divider {

        top:
            4%;
    }


    .s1-handle {

        width:
            56px;
    
        height:
            40px;
    
        top:
            53%;
    }
    
    
    /*
     * محدوده لمس نامرئی بزرگ‌تر از ظاهر دکمه است.
     * ظاهر Handle تغییر محسوسی نمی‌کند ولی گرفتن آن
     * با انگشت بسیار راحت‌تر می‌شود.
     */
    
    .s1-handle::after {
    
        content:
            "";
    
        position:
            absolute;
    
        inset:
    
            -14px
            -18px;
    
        border-radius:
            999px;
    }

}


/* =========================================================
   15 — SMALL MOBILE
========================================================= */

@media(max-width:480px) {

    .s1-hero {

        min-height:
            760px;
    }


    .s1-copy {

        padding-top:
            132px;
    }


    .s1-title {

        font-size:
            32px;
    }


    .s1-description {

        font-size:
            13.5px;
    }


    .s1-actions {

        margin-top:
            29px;
    }


    .s1-button {

        min-height:
            41px;

        padding:

            0
            16px;

        font-size:
            13px;
    }


    .s1-compare {

        width:
            94vw;

        height:
            34vh;

        min-height:
            260px;

        bottom:
            82px;
    }

}


/* =========================================================
   16 — SHORT DESKTOP SCREENS
========================================================= */

@media
(min-width:861px)
and
(max-height:850px) {

    .s1-copy {

        padding-top:
            135px;
    }


    .s1-description {

        margin-top:
            16px;
    }


    .s1-actions {

        margin-top:
            22px;
    }


    .s1-compare {

        height:

            clamp(
                280px,
                42vh,
                385px
            );

        bottom:
            16px;
    }

}


/* =========================================================
   17 — REDUCED MOTION
========================================================= */

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

    .s1-button,
    .s1-handle {

        transition:
            none;
    }

}


/* =========================================================
   ABOUT — JUSTIFIED MAIN COPY
========================================================= */

.s2-about-description {
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    overflow-wrap: break-word;
}

.s2-about-description p {
    text-align: inherit;
}

@media (max-width: 767px) {

    .s2-about-description {
        text-align: left;
        hyphens: none;
    }

}

/* =========================================================
   01 — SHARED HOME SECTION TYPOGRAPHY

   این دو کلاس در مراحل بعد برای Services و بخش‌های دیگر
   صفحه اصلی نیز استفاده خواهند شد.
========================================================= */

.section-title {

    margin:
        0 0
        clamp(
            13px,
            1.8vh,
            20px
        );

    color:
        var(--color-yellow);

    font-family:
        var(--font-title);

    font-size:
        clamp(
            38px,
            2.7vw,
            50px
        );

    font-weight:
        400;

    line-height:
        1;
}


.section-description {

    width:
        min(
            1420px,
            95%
        );

    margin:
        0;

    color:
        rgba(255, 255, 255, .82);

    font-family:
        var(--font-body);

    font-size:
        clamp(
            16px,
            1.05vw,
            18px
        );

    font-weight:
        300;

    line-height:
        1.5;

    text-transform:
        uppercase;
}

/* =========================================================
   RICH TEXT CONTENT
========================================================= */

.ag-rich-text > *:first-child {
    margin-top: 0;
}

.ag-rich-text > *:last-child {
    margin-bottom: 0;
}

.ag-rich-text p:empty {
    display: none;
}

/* =========================================================
   02 — ABOUT BASE
========================================================= */

.s2-about {

    --page-padding:
        clamp(
            28px,
            5vw,
            92px
        );

    position:
        relative;

    width:
        100%;

    height:
        100svh;

    min-height:
        820px;

    overflow:
        hidden;

    padding:

        clamp(
            30px,
            4.2vh,
            52px
        )

        var(--page-padding)

        0;

    color:
        #15181c;

    background:
        #ffffff;
}


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

.s2-about-inner {

    position:
        relative;

    z-index:
        5;

    width:
        min(
            1480px,
            100%
        );

    margin:
        0 auto;
}


/* =========================================================
   04 — ABOUT COPY
========================================================= */

.s2-about-copy {

    position:
        relative;

    z-index:
        5;

    width:
        min(
            54%,
            840px
        );
}


/* =========================================================
   05 — TITLE
========================================================= */

.s2-about-title {

    position:
        relative;

    z-index:
        5;
}


.s2-about-title a {

    display:
        inline-block;

    color:
        inherit;

    transition:

        color .24s ease,
        transform .24s ease;
}


.s2-about-title a:hover {

    color:
        #ad8900;

    transform:
        translateX(3px);
}


.s2-about-title a:focus-visible {

    outline:
        2px solid
        var(--color-yellow);

    outline-offset:
        5px;
}


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

.s2-about
.section-description.s2-about-description {

    width:
        100%;

    margin:
        0;

    color:
        #35393c;

    opacity:
        1;

    text-shadow:
        none;
}


/* =========================================================
   07 — DISCOVER OUR STORY
========================================================= */

.s2-about-story {

    width:
        max-content;

    margin-top:
        clamp(
            24px,
            3.2vh,
            34px
        );

    display:
        inline-flex;

    align-items:
        center;

    gap:
        18px;

    color:
        #b18c00;

    font-family:
        var(--font-body);

    font-size:
        12px;

    font-weight:
        700;

    line-height:
        1;

    letter-spacing:
        1.25px;

    white-space:
        nowrap;

    transition:
        color .25s ease;
}


.s2-about-story svg {

    display:
        block;

    width:
        52px;

    height:
        18px;

    overflow:
        visible;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.35;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

    transition:
        transform .28s ease;
}


.s2-about-story:hover {

    color:
        #17191b;
}


.s2-about-story:hover svg {

    transform:
        translateX(8px);
}


.s2-about-story:focus-visible {

    outline:
        2px solid
        var(--color-yellow);

    outline-offset:
        5px;
}


/* =========================================================
   08 — WORKSHOP VISUAL
========================================================= */

.s2-about-visual {

    position:
        absolute;

    z-index:
        1;

    top:
        0;

    right:
        0;

    width:
        clamp(
            600px,
            47vw,
            880px
        );

    margin:
        0;

    pointer-events:
        none;
}


.s2-about-image {

    display:
        block;

    width:
        100%;

    max-width:
        none;

    height:
        auto;

    margin:
        0;

    object-fit:
        contain;

    object-position:
        right top;

    user-select:
        none;

    filter:

        contrast(1.02)
        saturate(.96);
}


/* =========================================================
   09 — BENEFITS FEATURE ZONE
========================================================= */

.s2-about-feature-zone {

    position:
        static;

    width:
        min(
            1480px,
            100%
        );

    margin:

        clamp(
            52px,
            6.5vh,
            76px
        )

        auto
        0;
}


.s2-about-benefits-wrap {

    position:
        relative;

    z-index:
        5;

    width:
        min(
            54%,
            840px
        );
}


/* =========================================================
   10 — BENEFITS GRID
========================================================= */

.s2-about-benefits {

    display:
        grid;

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

    column-gap:
        clamp(
            34px,
            4vw,
            68px
        );

    row-gap:
        25px;
}


/* =========================================================
   11 — BENEFIT ITEM
========================================================= */

.s2-about-benefit {

    position:
        relative;

    min-width:
        0;

    min-height:
        96px;

    padding:
        14px 12px 13px 0;

    display:
        grid;

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

    align-items:
        start;

    gap:
        14px;

    border-top:
        1px solid
        rgba(20, 23, 25, .13);

    transition:

        padding-left .27s ease,
        transform .27s ease,
        border-color .27s ease,
        background .27s ease;
}


.s2-about-benefit::before {

    content:
        "";

    position:
        absolute;

    left:
        0;

    top:
        -1px;

    width:
        0;

    height:
        1px;

    background:
        var(--color-yellow);

    transition:
        width .3s ease;
}


.s2-about-benefit:hover {

    padding-left:
        7px;

    transform:
        translateY(-2px);

    border-color:
        transparent;

    background:
        rgba(231, 185, 0, .035);
}


.s2-about-benefit:hover::before {

    width:
        100%;
}


.s2-about-benefit:focus-visible {

    outline:
        2px solid
        var(--color-yellow);

    outline-offset:
        4px;
}


/* =========================================================
   12 — BENEFIT ICON
========================================================= */

.s2-about-benefit-icon {

    width:
        37px;

    height:
        37px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        #858a8d;

    transition:

        color .25s ease,
        transform .25s ease;
}


.s2-about-benefit-icon svg {

    display:
        block;

    width:
        34px;

    height:
        34px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.45;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


.s2-about-benefit:hover
.s2-about-benefit-icon {

    color:
        #ad8900;

    transform:
        translateY(-2px);
}


/* =========================================================
   13 — BENEFIT CONTENT
========================================================= */

.s2-about-benefit-content {

    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;

    gap:
        7px;
}


.s2-about-benefit-title {

    color:
        #ad8900;

    font-family:
        var(--font-title);

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

    font-weight:
        400;

    line-height:
        1.18;

    text-transform:
        uppercase;

    transition:
        color .25s ease;
}


.s2-about-benefit:hover
.s2-about-benefit-title {

    color:
        #17191b;
}


.s2-about-benefit-text {

    max-width:
        255px;

    color:
        #74797c;

    font-family:
        var(--font-body);

    font-size:
        clamp(
            12.5px,
            .82vw,
            14px
        );

    font-weight:
        300;

    line-height:
        1.48;
}


/* =========================================================
   14 — VEHICLE BRANDS SECTION
========================================================= */

.s2-about-brands {

    position:
        relative;

    z-index:
        10;

    width:
        min(
            1480px,
            100%
        );

    margin:

        clamp(
            48px,
            6vh,
            68px
        )

        auto
        0;

    padding-top:
        14px;

    border-top:
        1px solid
        rgba(20, 23, 25, .13);
}


/* =========================================================
   15 — BRANDS HEADING
========================================================= */

.s2-about-brands-heading {

    display:
        flex;

    align-items:
        center;

    gap:
        17px;
}


.s2-about-brands-title {

    flex:
        0 0 auto;

    margin:
        0;

    color:
        #2b2f32;

    font-family:
        var(--font-body);

    font-size:
        12px;

    font-weight:
        700;

    line-height:
        1;

    letter-spacing:
        2.1px;

    text-transform:
        uppercase;
}


.s2-about-brands-title a,
.s2-about-brands-title span {

    position:
        relative;

    display:
        inline-block;

    color:
        #2b2f32;
}


.s2-about-brands-title a {

    transition:
        color .25s ease;
}


.s2-about-brands-title a::after {

    content:
        "";

    position:
        absolute;

    left:
        0;

    bottom:
        -6px;

    width:
        0;

    height:
        1px;

    background:
        var(--color-yellow);

    transition:
        width .28s ease;
}


.s2-about-brands-title a:hover {

    color:
        #a78300;
}


.s2-about-brands-title a:hover::after {

    width:
        100%;
}


.s2-about-brands-title a:focus-visible {

    outline:
        2px solid
        var(--color-yellow);

    outline-offset:
        5px;
}


.s2-about-brands-line {

    flex:
        1;

    height:
        1px;

    background:

        linear-gradient(
            90deg,
            rgba(20, 23, 25, .14),
            transparent
        );
}


/* =========================================================
   16 — MARQUEE VIEWPORT
========================================================= */

.s2-about-brands-viewport {

    --s2-brand-size:
        125px;

    --s2-brand-gap:
        30px;

    --s2-brand-loop-gap:
        30px;

    width:
        100%;

    margin-top:
        8px;

    overflow:
        hidden;

    touch-action:
        pan-y;
}


.s2-about-brands-track {

    display:
        flex;

    align-items:
        center;

    gap:
        var(--s2-brand-loop-gap);

    width:
        max-content;

    will-change:
        transform;
}


.s2-about-brands-group {

    flex:
        0 0 auto;

    width:
        max-content;

    display:
        flex;

    align-items:
        center;

    gap:
        var(--s2-brand-gap);
}


/* =========================================================
   17 — BRAND ITEM
========================================================= */

.s2-about-brand-item {

    flex:
        0 0
        var(--s2-brand-size);

    width:
        var(--s2-brand-size);

    height:
        var(--s2-brand-size);

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;
}


.s2-about-brand-logo {

    display:
        block;

    width:
        var(--s2-brand-size);

    height:
        var(--s2-brand-size);

    max-width:
        none;

    object-fit:
        contain;

    transform:
        translateY(2px);

    opacity:
        .52;

    filter:

        grayscale(1)
        saturate(0)
        contrast(.9)
        brightness(.88);

    transition:

        opacity .32s ease,
        filter .32s ease,
        transform .32s ease;
}


/* =========================================================
   18 — BRAND HOVER
========================================================= */

@media(hover:hover) {

    .s2-about-brand-item:hover
    .s2-about-brand-logo {

        opacity:
            1;

        filter:
            none;

        transform:

            translateY(-1px)
            scale(1.04);
    }

}


@media
(hover:none)
and
(pointer:coarse) {

    .s2-about-brand-item:active
    .s2-about-brand-logo {

        opacity:
            1;

        filter:
            none;

        transform:

            translateY(-5px)
            scale(1.035);
    }

}


/* =========================================================
   19 — MARQUEE ANIMATION
========================================================= */

.s2-about-brands-viewport.is-marquee
.s2-about-brands-track {

    animation:

        s2AboutBrandsMarquee

        var(
            --s2-brand-duration,
            82s
        )

        linear
        infinite;
}


.s2-about-brands-viewport.is-marquee:hover
.s2-about-brands-track,

.s2-about-brands-viewport.is-marquee:focus-within
.s2-about-brands-track {

    animation-play-state:
        paused;
}


@keyframes s2AboutBrandsMarquee {

    from {

        transform:
            translate3d(
                0,
                0,
                0
            );
    }


    to {

        transform:
            translate3d(
                var(
                    --s2-brand-distance,
                    -1200px
                ),
                0,
                0
            );
    }

}


/* =========================================================
   20 — MEDIUM DESKTOP
========================================================= */

@media
(min-width:981px)
and
(max-width:1180px) {

    .s2-about-copy {

        width:
            52%;
    }


    .s2-about-visual {

        width:
            clamp(
                500px,
                45vw,
                650px
            );
    }

}


/* =========================================================
   21 — SHORT DESKTOP
========================================================= */

@media
(min-width:981px)
and
(max-height:850px) {

    .s2-about {

        min-height:
            760px;

        padding-top:
            24px;
    }


    .s2-about-visual {

        width:
            clamp(
                520px,
                43vw,
                720px
            );
    }


    .s2-about-brands {

        margin-top:
            60px;

        padding-top:
            10px;
    }


    .s2-about-brands-viewport {

        --s2-brand-size:
            100px;

        margin-top:
            8px;
    }

}


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

@media(max-width:980px) {

    .s2-about {

        height:
            auto;

        min-height:
            auto;

        overflow:
            hidden;

        padding:
            27px 18px 0;
    }


    .s2-about-inner {

        width:
            100%;

        margin:
            0;
    }


    .s2-about-copy {

        width:
            100%;

        max-width:
            none;
    }


    .s2-about
    .section-description.s2-about-description {

        width:
            100%;

        margin:
            0;

        color:
            #35393c;

        font-size:
            15px;

        line-height:
            1.55;

        opacity:
            1;

        text-shadow:
            none;
    }


    .s2-about-feature-zone {

        position:
            relative;

        width:
            100%;

        min-height:
            356px;

        margin-top:
            42px;

        display:
            grid;

        grid-template-columns:

            minmax(0, 1fr)

            clamp(
                135px,
                39vw,
                190px
            );

        align-items:
            end;

        gap:
            4px;

        overflow:
            hidden;
    }


    .s2-about-benefits-wrap {

        position:
            relative;

        z-index:
            4;

        width:
            100%;

        margin:
            0;
    }


    .s2-about-benefits {

        width:
            100%;

        grid-template-columns:
            1fr;

        column-gap:
            0;

        row-gap:
            6px;
    }


    .s2-about-benefit {

        min-height:
            79px;

        padding:
            11px 3px 11px 0;

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

        gap:
            10px;
    }


    .s2-about-benefit:hover {

        padding-left:
            4px;
    }


    .s2-about-benefit-icon {

        width:
            30px;

        height:
            30px;
    }


    .s2-about-benefit-icon svg {

        width:
            28px;

        height:
            28px;
    }


    .s2-about-benefit-title {

        font-size:
            14px;
    }


    .s2-about-benefit-text {

        max-width:
            none;

        font-size:
            12px;

        line-height:
            1.42;
    }


    .s2-about-visual {

        position:
            relative;

        z-index:
            1;

        top:
            auto;

        right:
            auto;

        width:
            100%;

        height:
            100%;

        min-height:
            0;

        margin:
            0;

        align-self:
            stretch;

        overflow:
            visible;

        pointer-events:
            none;
    }


    .s2-about-image {

        position:
            absolute;

        right:
            -45%;

        bottom:
            0;

        width:
            165%;

        max-width:
            none;

        height:
            auto;

        margin:
            0;

        object-fit:
            contain;

        object-position:
            right bottom;
    }

}


/* =========================================================
   23 — MOBILE
========================================================= */

@media(max-width:860px) {

    .section-title {

        font-size:
            clamp(
                32px,
                9vw,
                42px
            );
    }


    .s2-about-title {

        margin-bottom:
            17px;
    }


    .s2-about-story {

        margin-top:
            23px;

        gap:
            15px;

        font-size:
            11px;

        letter-spacing:
            1.1px;
    }


    .s2-about-story svg {

        width:
            46px;
    }


    .s2-about-brands {

        width:
            100%;

        margin-top:
            27px;

        padding-top:
            13px;
    }


    .s2-about-brands-title {

        font-size:
            11px;

        letter-spacing:
            1.7px;
    }


    .s2-about-brands-viewport {

        --s2-brand-size:
            clamp(
                92px,
                24vw,
                150px
            );

        --s2-brand-gap:
            clamp(
                20px,
                4.5vw,
                30px
            );

        --s2-brand-loop-gap:
            clamp(
                20px,
                4.5vw,
                30px
            );

        margin-top:
            8px;
    }


    .s2-about-brand-logo {

        transform:
            translateY(-3px);

        opacity:
            .57;
    }

}


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

@media(max-width:540px) {

    .s2-about-feature-zone {

        min-height:
            338px;

        margin-top:
            37px;

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

        gap:
            0;
    }


    .s2-about-benefit {

        min-height:
            76px;
    }


    .s2-about-benefit-title {

        font-size:
            13.5px;
    }


    .s2-about-benefit-text {

        font-size:
            11.5px;
    }


    .s2-about-image {

        right:
            -55%;

        width:
            180%;
    }

}


@media(max-width:480px) {

    .s2-about {

        padding-top:
            27px;
    }


    .s2-about
    .section-description.s2-about-description {

        font-size:
            14px;

        line-height:
            1.55;
    }

}


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

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

    .s2-about-brands-viewport {

        overflow-x:
            auto;

        scrollbar-width:
            none;

        touch-action:
            pan-x;
    }


    .s2-about-brands-viewport::-webkit-scrollbar {

        display:
            none;
    }


    .s2-about-brands-track {

        animation:
            none !important;
    }


    .s2-about-brand-logo,
    .s2-about-story,
    .s2-about-story svg,
    .s2-about-benefit {

        transition:
            none;
    }

}
/* =========================================================
   =========================================================
   STAGE 04 — HOME SERVICES PREVIEW
   =========================================================
========================================================= */


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

.services-section {

    --page-padding:

        clamp(
            28px,
            5vw,
            92px
        );

    --card-gap:

        clamp(
            12px,
            1.15vw,
            20px
        );

    position:
        relative;

    width:
        100%;

    height:
        100svh;

    min-height:
        820px;

    overflow:
        hidden;

    padding:

        clamp(
            30px,
            4.2vh,
            52px
        )

        var(--page-padding)

        0;

    color:
        #ffffff;

    background:

        radial-gradient(
            ellipse at 50% 76%,
            rgba(90, 100, 112, .18),
            transparent 40%
        ),

        radial-gradient(
            ellipse at 50% 37%,
            rgba(70, 78, 88, .08),
            transparent 52%
        ),

        linear-gradient(
            180deg,
            #15181c 0%,
            #0d1013 54%,
            #06080a 100%
        );
}


.services-section::after {

    content:
        "";

    position:
        absolute;

    z-index:
        500;

    inset:
        0;

    pointer-events:
        none;

    box-shadow:

        inset
        0 0 105px
        rgba(0, 0, 0, .30);
}


/* =========================================================
   02 — HEADER
========================================================= */

.services-section
.section-header {

    position:
        relative;

    z-index:
        100;

    width:
        min(1480px, 100%);

    margin:
        0 auto;
}


.services-section
.section-title a {

    color:
        inherit;

    transition:
        color .22s ease;
}


.services-section
.section-title a:hover {

    color:
        var(--color-yellow-hover);
}


.services-section
.section-description {

    color:
        rgba(255, 255, 255, .82);
}


/* =========================================================
   03 — SLIDER STAGE
========================================================= */

.services-stage {

    position:
        relative;

    z-index:
        20;

    width:
        min(1600px, 100%);

    height:

        clamp(
            580px,
            70svh,
            690px
        );

    margin:

        clamp(
            27px,
            3.5vh,
            42px
        )

        auto
        0;

    padding:

        0

        clamp(
            44px,
            4vw,
            70px
        );
}


/* =========================================================
   04 — VIEWPORT / TRACK
========================================================= */

.services-viewport {

    position:
        relative;

    width:
        100%;

    height:
        100%;

    overflow:
        hidden;

    touch-action:
        pan-y;

    cursor:
        grab;
}


.services-viewport.is-dragging {

    cursor:
        grabbing;
}


.services-track {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        var(--card-gap);

    width:
        max-content;

    height:
        100%;

    transform:
        translate3d(0, 0, 0);

    will-change:
        transform;

    transition:

        transform
        .7s
        cubic-bezier(.22, .76, .18, 1);
}


.services-viewport.is-dragging
.services-track {

    transition:
        none;
}


/* =========================================================
   05 — SERVICE ITEM
========================================================= */

.service-item {

    position:
        relative;

    flex:
        0 0

        clamp(
            225px,
            18vw,
            310px
        );

    width:

        clamp(
            225px,
            18vw,
            310px
        );

    height:

        clamp(
            430px,
            62vh,
            520px
        );
}


/* =========================================================
   06 — CARD FRAME
========================================================= */

.service-shell {

    position:
        absolute;

    inset:
        0;

    clip-path:

        polygon(
            14% 0,
            100% 0,
            85% 100%,
            0 100%
        );

    background:

        linear-gradient(
            155deg,
            #686d71 0%,
            #1b1e20 17%,
            #484c50 39%,
            #777d81 57%,
            #171a1c 80%,
            #585d61 100%
        );

    filter:

        drop-shadow(
            0 22px 25px
            rgba(0, 0, 0, .45)
        );
}


.service-card {

    position:
        absolute;

    inset:
        2px;

    overflow:
        hidden;

    clip-path:

        polygon(
            14% 0,
            100% 0,
            85% 100%,
            0 100%
        );

    background:
        #121518;
}


/* =========================================================
   07 — SERVICE IMAGE
========================================================= */

.service-photo {

    position:
        absolute;

    inset:
        0;

    display:
        block;

    background-image:
        var(--service-image);

    background-size:
        cover;

    background-position:
        center;

    background-repeat:
        no-repeat;

    filter:

        brightness(.78)
        contrast(1.06)
        saturate(.82);

    transform:
        scale(1.03);

    transition:

        transform .58s ease,
        filter .58s ease;
}


.service-photo-overlay {

    position:
        absolute;

    inset:
        0;

    background:

        linear-gradient(
            90deg,
            rgba(0, 0, 0, .22),
            rgba(0, 0, 0, .04) 45%,
            rgba(0, 0, 0, .42) 100%
        ),

        linear-gradient(
            180deg,
            rgba(0, 0, 0, .12) 0%,
            transparent 24%,
            transparent 72%,
            rgba(0, 0, 0, .20) 100%
        );
}


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

.service-title-rail {

    position:
        absolute;

    z-index:
        15;

    top:

        clamp(
            15px,
            2vh,
            24px
        );

    right:

        clamp(
            25px,
            .9vw,
            30px
        );

    transform:
        rotate(5.6deg);

    transform-origin:
        top right;

    pointer-events:
        none;
}


.service-title {

    position:
        absolute;

    top:
        0;

    right:
        0;

    width:
        max-content;

    transform:
        rotate(-90deg);

    transform-origin:
        top right;

    white-space:
        nowrap;

    color:
        #ffffff;

    font-family:
        var(--font-title);

    font-size:

        clamp(
            17px,
            1.1vw,
            20px
        );

    font-weight:
        400;

    line-height:
        1;

    text-transform:
        uppercase;

    text-shadow:

        0 2px 4px
        rgba(0, 0, 0, 1),

        0 0 11px
        rgba(0, 0, 0, .94);
}


/* =========================================================
   09 — CARD HOVER
========================================================= */

.service-item:hover {

    z-index:
        30;
}


.service-item:hover
.service-photo {

    transform:

        scale(1.09)
        translateX(-2%);

    filter:

        brightness(1.06)
        contrast(1.05)
        saturate(.95);
}


/* =========================================================
   10 — SLIDER ARROWS
========================================================= */

.slider-arrow {

    position:
        absolute;

    z-index:
        110;

    top:
        45%;

    width:

        clamp(
            32px,
            3vw,
            50px
        );

    height:
        72px;

    padding:
        0;

    transform:
        translateY(-50%);

    background:
        transparent;

    border:
        0;

    cursor:
        pointer;

    transition:

        transform .2s ease,
        opacity .2s ease;
}


.slider-prev {

    left:
        0;
}


.slider-next {

    right:
        0;
}


.slider-arrow:hover:not(:disabled) {

    transform:

        translateY(-50%)
        scale(1.08);
}


.slider-arrow:disabled {

    opacity:
        .25;

    cursor:
        default;
}


.chevron {

    position:
        absolute;

    left:
        50%;

    top:
        50%;

    width:
        28px;

    height:
        52px;

    transform:
        translate(-50%, -50%);
}


.chevron-thick,
.chevron-thin {

    position:
        absolute;

    display:
        block;

    border-top-style:
        solid;

    border-left-style:
        solid;
}


.chevron-thick {

    width:
        27px;

    height:
        27px;

    top:
        12px;

    border-top-width:
        3px;

    border-left-width:
        3px;

    border-color:
        #ffffff;
}


.chevron-thin {

    width:
        21px;

    height:
        21px;

    top:
        15px;

    border-top-width:
        1px;

    border-left-width:
        1px;

    border-color:
        rgba(255, 255, 255, .62);
}


.slider-prev
.chevron-thick {

    left:
        5px;

    transform:
        rotate(-45deg);
}


.slider-prev
.chevron-thin {

    left:
        11px;

    transform:
        rotate(-45deg);
}


.slider-next
.chevron-thick {

    right:
        5px;

    transform:
        rotate(135deg);
}


.slider-next
.chevron-thin {

    right:
        11px;

    transform:
        rotate(135deg);
}


/* =========================================================
   11 — FLOOR LIGHT
========================================================= */

.floor-light {

    position:
        absolute;

    z-index:
        10;

    left:
        50%;

    bottom:
        0;

    width:
        min(920px, 72vw);

    height:
        115px;

    transform:
        translateX(-50%);

    pointer-events:
        none;

    background:

        radial-gradient(
            ellipse,
            rgba(195, 205, 215, .14),
            transparent 68%
        );

    filter:
        blur(20px);
}


/* =========================================================
   12 — DECORATIVE CAR
========================================================= */

.hero-car {

    position:
        absolute;

    z-index:
        80;

    left:
        50%;

    bottom:

        clamp(
            55px,
            7vh,
            85px
        );

    width:

        clamp(
            620px,
            44vw,
            760px
        );

    aspect-ratio:
        1808 / 705;

    opacity:
        1;

    transform:

        translate3d(
            -50%,
            0,
            0
        )

        scale(1);

    transform-origin:
        center 86%;

    pointer-events:
        none;

    will-change:
        transform,
        opacity;
}


/*
 * بدون JavaScript ماشین در مرکز دیده می‌شود.
 * با فعال‌بودن JavaScript تا شروع انیمیشن مخفی است.
 */

html.js
.hero-car {

    opacity:
        0;
}


.car-main {

    position:
        absolute;

    z-index:
        5;

    inset:
        0;

    display:
        block;

    width:
        100%;

    height:
        100%;

    max-width:
        none;

    filter:

        brightness(.86)
        contrast(1.07)
        saturate(.75);

    user-select:
        none;
}


.car-shadow {

    position:
        absolute;

    z-index:
        1;

    left:
        52%;

    bottom:
        -4%;

    width:
        77%;

    height:
        19%;

    opacity:
        .48;

    transform:
        translateX(-50%);

    border-radius:
        50%;

    background:

        radial-gradient(
            ellipse,
            rgba(0, 0, 0, .96),
            rgba(0, 0, 0, .52) 48%,
            transparent 73%
        );

    filter:
        blur(11px);
}


.car-glow {

    position:
        absolute;

    z-index:
        0;

    left:
        50%;

    bottom:
        -14%;

    width:
        108%;

    height:
        34%;

    opacity:
        .65;

    transform:
        translateX(-50%);

    background:

        radial-gradient(
            ellipse,
            rgba(215, 225, 235, .14),
            transparent 68%
        );

    filter:
        blur(20px);
}


/* =========================================================
   13 — TABLET
========================================================= */

@media(max-width:1050px) {

    .services-section {

        --page-padding:

            clamp(
                22px,
                4vw,
                48px
            );

        min-height:
            800px;
    }


    .services-stage {

        height:

            clamp(
                570px,
                68svh,
                640px
            );
    }


    .hero-car {

        width:

            clamp(
                540px,
                62vw,
                650px
            );
    }

}


/* =========================================================
   14 — MOBILE
========================================================= */

@media(max-width:680px) {

    .services-section {

        height:
            auto;

        min-height:
            760px;

        padding:

            34px
            16px
            70px;
    }


    .services-section
    .section-description {

        width:
            100%;

        font-size:
            14px;

        line-height:
            1.55;
    }


    .services-stage {

        height:
            500px;

        margin-top:
            30px;

        padding:

            0
            35px;
    }


    .service-item {

        flex-basis:
            min(72vw, 280px);

        width:
            min(72vw, 280px);

        height:
            410px;
    }


    .slider-arrow {

        top:
            43%;

        width:
            34px;
    }


    .hero-car {

        width:
            min(560px, 92vw);

        bottom:
            20px;
    }


    .floor-light {

        width:
            92vw;

        bottom:
            0;
    }

}


/* =========================================================
   15 — REDUCED MOTION
========================================================= */

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

    .services-track,
    .service-photo,
    .hero-car {

        transition:
            none !important;
    }


    html.js
    .services-section
    .hero-car {

        opacity:
            1;

        visibility:
            visible;

        transform:

            translate3d(
                -50%,
                0,
                0
            )

            scale(1);
    }

}
/* =========================================================
   WHEEL OVERLAYS
========================================================= */

.wheel-layer {

    position:
        absolute;

    z-index:
        9;

    overflow:
        hidden;

    border-radius:
        50%;

    opacity:
        0;

    pointer-events:
        none;
}


/* چرخ جلو */

.front-wheel {

    left:
        40.87389%;

    top:
        52.76596%;

    width:
        10.50885%;

    height:
        39.57447%;
}


/* چرخ عقب */

.rear-wheel {

    left:
        88.82743%;

    top:
        49.21986%;

    width:
        6.41593%;

    height:
        31.34752%;
}


.wheel-layer::before {

    content:
        "";

    position:
        absolute;

    z-index:
        0;

    inset:
        0;

    border-radius:
        50%;

    background:
        #08090a;
}


.wheel-layer canvas {

    position:
        relative;

    z-index:
        1;

    display:
        block;

    width:
        100%;

    height:
        100%;
}

/* =========================================================
   =========================================================
   STAGE 05 — REPAIR PROCESS + CUSTOMER REVIEWS
   =========================================================
========================================================= */


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

.s4-process-reviews {

    --s4-yellow:
        var(--color-yellow, #e7b900);

    --s4-yellow-dark:
        #aa8600;

    --s4-ink:
        #17191b;

    --s4-text:
        #4d5256;

    --s4-muted:
        #787e82;

    --s4-line:
        rgba(20, 23, 25, .14);

    --s4-panel:
        #181b1e;

    --s4-panel-light:
        #25292d;

    --s4-page-padding:

        clamp(
            28px,
            5vw,
            92px
        );

    position:
        relative;

    width:
        100%;

    height:
        100svh;

    min-height:
        820px;

    overflow:
        hidden;

    padding:

        clamp(
            30px,
            4.2vh,
            52px
        )

        var(--s4-page-padding)

        clamp(
            28px,
            4vh,
            48px
        );

    color:
        var(--s4-ink);

    background:
        #ffffff;
}


.s4-process-reviews::before {

    content:
        "";

    position:
        absolute;

    left:
        -180px;

    bottom:
        -280px;

    width:
        620px;

    height:
        620px;

    border-radius:
        50%;

    background:

        radial-gradient(
            circle,
            rgba(231, 185, 0, .07),
            transparent 68%
        );

    pointer-events:
        none;
}


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

.s4-shell {

    position:
        relative;

    z-index:
        2;

    width:
        min(1480px, 100%);

    height:
        100%;

    margin:
        0 auto;
}


.s4-layout {

    width:
        100%;

    height:
        100%;

    display:
        grid;

    grid-template-columns:

        minmax(0, 1.58fr)

        minmax(340px, .82fr);

    gap:

        clamp(
            34px,
            4.2vw,
            72px
        );

    align-items:
        stretch;
}


/* =========================================================
   03 — PROCESS COLUMN
========================================================= */

.s4-process-column {

    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;
}


.s4-process-header {

    position:
        relative;

    z-index:
        5;

    width:
        min(840px, 100%);
}


/* =========================================================
   04 — PROCESS HEADING
========================================================= */

.s4-process-reviews
.section-title.s4-title {

    margin:
        0 0 17px;

    color:
        var(--s4-yellow);

    font-family:
        var(--font-title);

    font-size:

        clamp(
            38px,
            2.7vw,
            50px
        );

    font-weight:
        400;

    line-height:
        1;

    letter-spacing:
        -.3px;
}


.s4-title a {

    display:
        inline-block;

    color:
        inherit;

    transition:

        color .25s ease,
        transform .25s ease;
}


.s4-title a:hover {

    color:
        var(--s4-ink);

    transform:
        translateX(3px);
}


.s4-title a:focus-visible {

    outline:
        2px solid
        var(--s4-yellow);

    outline-offset:
        5px;
}


.s4-process-reviews
.section-description.s4-description {

    width:
        min(820px, 100%);

    margin:
        0;

    color:
        var(--s4-text);

    font-size:

        clamp(
            15px,
            1vw,
            17px
        );

    line-height:
        1.52;

    text-shadow:
        none;
}


/* =========================================================
   05 — PROCESS MAP
========================================================= */

.s4-process-map {

    position:
        relative;

    width:
        100%;

    min-height:
        470px;

    margin-top:

        clamp(
            29px,
            4vh,
            44px
        );

    display:
        grid;

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

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

    grid-template-areas:

        "step1 step2 step3"

        "step5 step4 empty";

    align-items:
        center;

    column-gap:
        clamp(18px, 2.4vw, 40px);

    row-gap:
        42px;
}


/* =========================================================
   06 — PROCESS ROUTE
========================================================= */

.s4-process-route {

    position:
        absolute;

    z-index:
        0;

    inset:
        0;

    width:
        100%;

    height:
        100%;

    overflow:
        visible;

    pointer-events:
        none;
}


.s4-route-base,
.s4-route-progress {

    fill:
        none;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


.s4-route-base {

    stroke:
        rgba(20, 23, 25, .12);

    stroke-width:
        2;
}


.s4-route-progress {

    stroke:
        var(--s4-yellow);

    stroke-width:
        2.4;

    stroke-dasharray:
        1;

    stroke-dashoffset:
        1;

    filter:

        drop-shadow(
            0 0 4px
            rgba(231, 185, 0, .25)
        );

    transition:

        stroke-dashoffset
        1.6s
        cubic-bezier(.22, .76, .18, 1);
}


.s4-process-reviews.is-visible
.s4-route-progress {

    stroke-dashoffset:
        0;
}


/* =========================================================
   07 — PROCESS STEP POSITIONS
========================================================= */

.s4-step-1 {

    grid-area:
        step1;
}


.s4-step-2 {

    grid-area:
        step2;
}


.s4-step-3 {

    grid-area:
        step3;
}


.s4-step-4 {

    grid-area:
        step4;
}


.s4-step-5 {

    grid-area:
        step5;
}


/* =========================================================
   08 — PROCESS STEP
========================================================= */

.s4-process-step {

    position:
        relative;

    z-index:
        3;

    width:
        100%;

    min-height:
        150px;

    padding:
        20px 18px;

    display:
        grid;

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

    align-items:
        start;

    gap:
        15px;

    opacity:
        1;

    transform:
        none;

    background:
        rgba(255, 255, 255, .94);

    border:

        1px solid
        rgba(20, 23, 25, .10);

    box-shadow:

        0 17px 38px
        rgba(25, 29, 33, .065);

    transition:

        opacity .55s ease,
        transform .55s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}


.js
.s4-process-reviews
.s4-process-step {

    opacity:
        0;

    transform:
        translateY(18px);
}


.js
.s4-process-reviews.is-visible
.s4-process-step {

    opacity:
        1;

    transform:
        translateY(0);
}


.s4-process-reviews.is-visible
.s4-step-1 {

    transition-delay:
        .12s;
}


.s4-process-reviews.is-visible
.s4-step-2 {

    transition-delay:
        .25s;
}


.s4-process-reviews.is-visible
.s4-step-3 {

    transition-delay:
        .38s;
}


.s4-process-reviews.is-visible
.s4-step-4 {

    transition-delay:
        .51s;
}


.s4-process-reviews.is-visible
.s4-step-5 {

    transition-delay:
        .64s;
}


.s4-process-step:hover {

    transform:
        translateY(-4px);

    border-color:
        rgba(184, 146, 0, .24);

    box-shadow:

        0 22px 45px
        rgba(25, 29, 33, .095);
}


/* =========================================================
   09 — STEP ICON
========================================================= */

.s4-step-icon {

    width:
        54px;

    height:
        54px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        var(--s4-yellow-dark);

    background:
        rgba(231, 185, 0, .075);

    border:

        1px solid
        rgba(184, 146, 0, .18);

    border-radius:
        50%;
}


.s4-step-icon svg {

    width:
        31px;

    height:
        31px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.55;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


/* =========================================================
   10 — STEP CONTENT
========================================================= */

.s4-step-content {

    min-width:
        0;
}


.s4-step-number {

    display:
        block;

    margin-bottom:
        6px;

    color:
        var(--s4-yellow-dark);

    font-family:
        var(--font-body);

    font-size:
        10px;

    font-weight:
        700;

    line-height:
        1;

    letter-spacing:
        1.4px;
}


.s4-step-title {

    margin:
        0;

    color:
        var(--s4-ink);

    font-family:
        var(--font-title);

    font-size:

        clamp(
            16px,
            1.05vw,
            19px
        );

    font-weight:
        400;

    line-height:
        1.15;
}


.s4-step-text {

    max-width:
        245px;

    margin-top:
        8px;

    color:
        var(--s4-muted);

    font-family:
        var(--font-body);

    font-size:

        clamp(
            12px,
            .78vw,
            13.5px
        );

    font-weight:
        300;

    line-height:
        1.48;
}


/* =========================================================
   11 — PROCESS LINK
========================================================= */

.s4-process-link {

    width:
        max-content;

    margin-top:
        auto;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        17px;

    color:
        var(--s4-yellow-dark);

    font-family:
        var(--font-body);

    font-size:
        12px;

    font-weight:
        700;

    line-height:
        1;

    letter-spacing:
        1px;

    text-transform:
        uppercase;
}


.s4-process-link svg {

    width:
        58px;

    height:
        18px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.4;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

    transition:
        transform .25s ease;
}


.s4-process-link:hover {

    color:
        var(--s4-ink);
}


.s4-process-link:hover svg {

    transform:
        translateX(7px);
}


.s4-process-link:focus-visible {

    outline:
        2px solid
        var(--s4-yellow);

    outline-offset:
        5px;
}


/* =========================================================
   12 — REVIEWS PANEL
========================================================= */

.s4-reviews-panel {

    position:
        relative;

    min-width:
        0;

    height:
        100%;

    min-height:
        650px;

    overflow:
        hidden;

    padding:

        clamp(
            38px,
            3.4vw,
            54px
        )

        clamp(
            28px,
            2.8vw,
            44px
        )

        34px;

    display:
        flex;

    flex-direction:
        column;

    color:
        #ffffff;

    background:

        radial-gradient(
            circle at 18% 7%,
            rgba(231, 185, 0, .10),
            transparent 32%
        ),

        linear-gradient(
            150deg,
            var(--s4-panel-light),
            var(--s4-panel) 58%,
            #101316
        );

    clip-path:

        polygon(
            10% 0,
            100% 0,
            100% 92%,
            90% 100%,
            0 100%,
            0 8%
        );

    box-shadow:

        0 30px 72px
        rgba(0, 0, 0, .20);

    touch-action:
        pan-y;
}


.s4-reviews-panel:focus-visible {

    outline:
        2px solid
        var(--s4-yellow);

    outline-offset:
        -6px;
}


/* =========================================================
   13 — DECORATIVE QUOTE
========================================================= */

.s4-review-decoration {

    position:
        absolute;

    z-index:
        0;

    top:
        -30px;

    right:
        18px;

    color:
        rgba(255, 255, 255, .035);

    font-family:
        Georgia, serif;

    font-size:
        220px;

    line-height:
        1;

    pointer-events:
        none;
}


/* =========================================================
   14 — REVIEWS HEADER
========================================================= */

.s4-reviews-header {

    position:
        relative;

    z-index:
        2;
}


.s4-reviews-kicker {

    display:
        block;

    margin-bottom:
        14px;

    color:
        var(--s4-yellow);

    font-family:
        var(--font-body);

    font-size:
        10px;

    font-weight:
        700;

    line-height:
        1;

    letter-spacing:
        2px;

    text-transform:
        uppercase;
}


.s4-reviews-title {

    margin:
        0;

    color:
        #ffffff;

    font-family:
        var(--font-title);

    font-size:

        clamp(
            30px,
            2.25vw,
            40px
        );

    font-weight:
        400;

    line-height:
        1.05;
}


.s4-reviews-title a {

    color:
        inherit;

    transition:
        color .22s ease;
}


.s4-reviews-title a:hover {

    color:
        var(--s4-yellow);
}


.s4-reviews-title a:focus-visible {

    outline:
        2px solid
        var(--s4-yellow);

    outline-offset:
        5px;
}


.s4-reviews-description {

    max-width:
        410px;

    margin-top:
        16px;

    color:
        rgba(255, 255, 255, .58);

    font-family:
        var(--font-body);

    font-size:
        13.5px;

    font-weight:
        300;

    line-height:
        1.55;
}


/* =========================================================
   15 — REVIEW SLIDES
========================================================= */

.s4-review-slides {

    position:
        relative;

    z-index:
        3;

    flex:
        1;

    min-height:
        290px;

    margin-top:

        clamp(
            36px,
            5vh,
            56px
        );
}


.s4-review-slide {

    position:
        absolute;

    inset:
        0;

    display:
        flex;

    flex-direction:
        column;

    opacity:
        0;

    visibility:
        hidden;

    pointer-events:
        none;

    transform:
        translateX(24px);

    transition:

        opacity .38s ease,
        visibility .38s ease,
        transform .42s ease;
}


.s4-review-slide.is-active {

    opacity:
        1;

    visibility:
        visible;

    pointer-events:
        auto;

    transform:
        translateX(0);
}


/* =========================================================
   16 — REVIEW CONTENT
========================================================= */

.s4-review-stars {

    color:
        var(--s4-yellow);

    font-size:
        15px;

    line-height:
        1;

    letter-spacing:
        5px;
}


.s4-review-quote {

    max-width:
        490px;

    margin:

        clamp(
            24px,
            3.2vh,
            35px
        )

        0
        0;

    color:
        rgba(255, 255, 255, .92);

    font-family:
        var(--font-title);

    font-size:

        clamp(
            20px,
            1.5vw,
            27px
        );

    font-weight:
        400;

    line-height:
        1.48;
}


.s4-review-customer {

    margin-top:
        auto;

    display:
        flex;

    align-items:
        center;

    gap:
        14px;
}


.s4-review-avatar {

    width:
        45px;

    height:
        45px;

    flex:
        0 0 45px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        #111416;

    background:
        var(--s4-yellow);

    border-radius:
        50%;

    font-family:
        var(--font-body);

    font-size:
        11px;

    font-weight:
        700;
}


.s4-review-meta {

    display:
        grid;

    gap:
        4px;
}


.s4-review-meta strong {

    color:
        #ffffff;

    font-family:
        var(--font-body);

    font-size:
        14px;

    font-weight:
        700;
}


.s4-review-meta span {

    color:
        rgba(255, 255, 255, .48);

    font-family:
        var(--font-body);

    font-size:
        12px;
}


/* =========================================================
   17 — REVIEW CONTROLS
========================================================= */

.s4-review-controls {

    position:
        relative;

    z-index:
        5;

    margin-top:
        29px;

    padding-top:
        22px;

    display:
        grid;

    grid-template-columns:
        auto 1fr auto;

    align-items:
        center;

    gap:
        20px;

    border-top:

        1px solid
        rgba(255, 255, 255, .10);
}


.s4-review-arrows {

    display:
        flex;

    align-items:
        center;

    gap:
        8px;
}


.s4-review-arrow {

    width:
        38px;

    height:
        38px;

    padding:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        rgba(255, 255, 255, .74);

    background:
        transparent;

    border:

        1px solid
        rgba(255, 255, 255, .16);

    border-radius:
        50%;

    cursor:
        pointer;

    transition:

        color .22s ease,
        background .22s ease,
        border-color .22s ease;
}


.s4-review-arrow:hover {

    color:
        #111416;

    background:
        var(--s4-yellow);

    border-color:
        var(--s4-yellow);
}


.s4-review-arrow:focus-visible {

    outline:
        2px solid
        var(--s4-yellow);

    outline-offset:
        3px;
}


.s4-review-arrow svg {

    width:
        18px;

    height:
        18px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.7;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


/* =========================================================
   18 — REVIEW DOTS / COUNTER
========================================================= */

.s4-review-dots {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;
}


.s4-review-dot {

    width:
        7px;

    height:
        7px;

    padding:
        0;

    background:
        rgba(255, 255, 255, .25);

    border:
        0;

    border-radius:
        50%;

    cursor:
        pointer;

    transition:

        width .22s ease,
        background .22s ease;
}


.s4-review-dot.is-active {

    width:
        25px;

    background:
        var(--s4-yellow);

    border-radius:
        999px;
}


.s4-review-dot:focus-visible {

    outline:
        2px solid
        var(--s4-yellow);

    outline-offset:
        4px;
}


.s4-review-counter {

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    color:
        rgba(255, 255, 255, .48);

    font-family:
        var(--font-body);

    font-size:
        11px;

    font-weight:
        700;

    letter-spacing:
        .7px;
}


.s4-review-current {

    color:
        var(--s4-yellow);
}


.s4-review-divider {

    width:
        21px;

    height:
        1px;

    background:
        rgba(255, 255, 255, .20);
}


/* =========================================================
   19 — ALL REVIEWS LINK
========================================================= */

.s4-reviews-link {

    position:
        relative;

    z-index:
        5;

    width:
        max-content;

    margin-top:
        25px;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    color:
        rgba(255, 255, 255, .70);

    font-family:
        var(--font-body);

    font-size:
        11px;

    font-weight:
        700;

    line-height:
        1;

    letter-spacing:
        1px;

    text-transform:
        uppercase;

    transition:
        color .22s ease;
}


.s4-reviews-link:hover {

    color:
        var(--s4-yellow);
}


.s4-reviews-link:focus-visible {

    outline:
        2px solid
        var(--s4-yellow);

    outline-offset:
        5px;
}


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

@media(max-width:980px) {

    .s4-process-reviews {

        height:
            auto;

        min-height:
            auto;

        overflow:
            hidden;

        padding:
            30px 18px 42px;
    }


    .s4-shell {

        height:
            auto;
    }


    .s4-layout {

        height:
            auto;

        grid-template-columns:
            1fr;

        gap:
            48px;
    }


    .s4-process-reviews
    .section-title.s4-title {

        margin-bottom:
            16px;

        font-size:
            clamp(36px, 10vw, 47px);
    }


    .s4-process-reviews
    .section-description.s4-description {

        width:
            100%;

        font-size:
            14px;

        line-height:
            1.55;
    }


    /* Mobile Vertical Process */

    .s4-process-map {

        min-height:
            0;

        margin-top:
            38px;

        padding-left:
            0;

        display:
            grid;

        grid-template-columns:
            1fr;

        grid-template-rows:
            none;

        grid-template-areas:
            none;

        row-gap:
            13px;
    }


    .s4-process-map::before {

        content:
            "";

        position:
            absolute;

        z-index:
            0;

        left:
            27px;

        top:
            25px;

        bottom:
            25px;

        width:
            1px;

        background:

            linear-gradient(
                180deg,
                var(--s4-yellow),
                rgba(231, 185, 0, .18)
            );
    }


    .s4-process-route {

        display:
            none;
    }


    .s4-process-step,
    .s4-step-1,
    .s4-step-2,
    .s4-step-3,
    .s4-step-4,
    .s4-step-5 {

        grid-area:
            auto;

        justify-self:
            stretch;

        max-width:
            none;

        width:
            100%;

        min-height:
            96px;

        padding:
            15px 15px 15px 8px;

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

        background:
            rgba(255, 255, 255, .97);
    }


    .s4-process-step:hover {

        transform:
            none;
    }


    .s4-step-title {

        font-size:
            16px;
    }


    .s4-step-text {

        max-width:
            520px;

        font-size:
            12.5px;
    }


    .s4-process-link {

        margin-top:
            28px;
    }


    /* Mobile Review Panel */

    .s4-reviews-panel {

        height:
            auto;

        min-height:
            610px;

        padding:
            35px 25px 34px;

        clip-path:
            none;

        border-radius:
            2px;
    }

}


/* =========================================================
   21 — SMALL MOBILE
========================================================= */

@media(max-width:560px) {

    .s4-reviews-panel {

        min-height:
            590px;

        padding:
            31px 21px 29px;
    }


    .s4-reviews-title {

        font-size:
            32px;
    }


    .s4-reviews-description {

        font-size:
            13px;
    }


    .s4-review-slides {

        min-height:
            280px;

        margin-top:
            34px;
    }


    .s4-review-quote {

        font-size:
            21px;

        line-height:
            1.46;
    }


    .s4-review-controls {

        grid-template-columns:
            auto 1fr;

        gap:
            15px;
    }


    .s4-review-counter {

        display:
            none;
    }


    .s4-review-dots {

        justify-content:
            flex-end;
    }

}


/* =========================================================
   22 — REDUCED MOTION
========================================================= */

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

    .s4-route-progress,
    .s4-process-step,
    .s4-review-slide,
    .s4-process-link svg {

        transition:
            none !important;
    }


    .js
    .s4-process-reviews
    .s4-process-step {

        opacity:
            1;

        transform:
            none;
    }


    .s4-route-progress {

        stroke-dashoffset:
            0;
    }

}
/* =========================================================
   =========================================================
   STAGE 06 — NEWS & ARTICLES + FAQ
   =========================================================
========================================================= */


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

.s5-insights {

    --s5-yellow:
        var(--color-yellow, #e7b900);

    --s5-yellow-hover:
        var(--color-yellow-hover, #f2c600);

    --s5-text:
        rgba(255, 255, 255, .88);

    --s5-muted:
        rgba(255, 255, 255, .60);

    --s5-soft:
        rgba(255, 255, 255, .42);

    --s5-line:
        rgba(255, 255, 255, .115);

    --s5-panel:
        #171a1e;

    --s5-page-padding:
        clamp(28px, 5vw, 92px);

    position:
        relative;

    width:
        100%;

    height:
        100svh;

    min-height:
        820px;

    overflow:
        hidden;

    padding:
        clamp(30px, 4.2vh, 52px)
        var(--s5-page-padding)
        clamp(28px, 4vh, 48px);

    color:
        #ffffff;

    background:

        radial-gradient(
            ellipse at 50% 76%,
            rgba(90, 100, 112, .18),
            transparent 40%
        ),

        radial-gradient(
            ellipse at 50% 37%,
            rgba(70, 78, 88, .08),
            transparent 52%
        ),

        linear-gradient(
            180deg,
            #15181c 0%,
            #0d1013 54%,
            #06080a 100%
        );

    isolation:
        isolate;
}


.s5-insights,
.s5-insights *,
.s5-insights *::before,
.s5-insights *::after {

    box-sizing:
        border-box;
}


.s5-insights h2,
.s5-insights h3,
.s5-insights p {

    margin:
        0;

    padding:
        0;
}


/* Gold ambient light */

.s5-insights::before {

    content:
        "";

    position:
        absolute;

    z-index:
        0;

    left:
        -180px;

    top:
        -230px;

    width:
        650px;

    height:
        650px;

    border-radius:
        50%;

    pointer-events:
        none;

    background:

        radial-gradient(
            circle,
            rgba(231, 185, 0, .075),
            rgba(231, 185, 0, .018) 38%,
            transparent 70%
        );
}


/* Vignette */

.s5-insights::after {

    content:
        "";

    position:
        absolute;

    z-index:
        50;

    inset:
        0;

    pointer-events:
        none;

    box-shadow:

        inset
        0 0 105px
        rgba(0, 0, 0, .30);
}


/* =========================================================
   02 — MAIN LAYOUT
========================================================= */

.s5-shell {

    position:
        relative;

    z-index:
        2;

    width:
        min(1480px, 100%);

    height:
        100%;

    margin:
        0 auto;
}


.s5-layout {

    width:
        100%;

    height:
        100%;

    display:
        grid;

    grid-template-columns:

        minmax(0, 1.52fr)
        minmax(340px, .78fr);

    gap:
        clamp(34px, 4vw, 68px);

    align-items:
        stretch;
}


.s5-news,
.s5-faq {

    min-width:
        0;
}


/* =========================================================
   03 — SHARED HEADERS
========================================================= */

.s5-header {

    position:
        relative;

    z-index:
        3;
}


.s5-title {

    margin:
        0;

    color:
        var(--s5-yellow);

    font-family:
        var(--font-title);

    font-size:
        clamp(35px, 2.5vw, 47px);

    font-weight:
        400;

    line-height:
        1.04;
}


.s5-title a {

    display:
        inline-block;

    color:
        inherit;

    transition:

        color .22s ease,
        transform .22s ease;
}


.s5-title a:hover {

    color:
        #ffffff;

    transform:
        translateX(3px);
}


.s5-title a:focus-visible {

    outline:
        2px solid
        var(--s5-yellow);

    outline-offset:
        5px;
}


.s5-description {

    max-width:
        700px;

    margin-top:
        16px !important;

    color:
        var(--s5-muted);

    font-family:
        var(--font-body);

    font-size:
        clamp(13.5px, .9vw, 15px);

    font-weight:
        300;

    line-height:
        1.62;
}


/* =========================================================
   04 — NEWS COLUMN
========================================================= */

.s5-news {

    display:
        flex;

    flex-direction:
        column;

    min-height:
        0;
}


/* =========================================================
   05 — NEWS CAROUSEL
========================================================= */

.s5-news-carousel {

    flex:
        1;

    min-height:
        0;

    margin-top:
        clamp(27px, 3.6vh, 40px);

    display:
        flex;

    flex-direction:
        column;
}


.s5-news-viewport {

    position:
        relative;

    flex:
        1;

    width:
        100%;

    min-height:
        450px;

    overflow:
        hidden;

    border:
        1px solid
        rgba(255, 255, 255, .10);

    background:
        #15191d;

    box-shadow:

        0 22px 58px
        rgba(0, 0, 0, .22);

    touch-action:
        pan-y;
}


.s5-news-viewport:focus-visible {

    outline:
        2px solid
        var(--s5-yellow);

    outline-offset:
        4px;
}


.s5-news-track {

    display:
        flex;

    width:
        100%;

    height:
        100%;

    transform:
        translate3d(0, 0, 0);

    transition:

        transform
        .68s
        cubic-bezier(.22, .76, .18, 1);

    will-change:
        transform;
}


.s5-news-slide {

    flex:
        0 0 100%;

    width:
        100%;

    min-width:
        100%;

    height:
        100%;
}


/* =========================================================
   06 — ARTICLE CARD
========================================================= */

.s5-news-card {

    position:
        relative;

    display:
        block;

    width:
        100%;

    height:
        100%;

    min-height:
        450px;

    overflow:
        hidden;

    color:
        #ffffff;

    background:
        #15191d;

    isolation:
        isolate;
}


.s5-news-card::before {

    content:
        "";

    position:
        absolute;

    z-index:
        5;

    left:
        0;

    top:
        0;

    width:
        0;

    height:
        2px;

    background:
        var(--s5-yellow);

    transition:
        width .35s ease;
}


.s5-news-card:hover::before,
.s5-news-card:focus-visible::before {

    width:
        100%;
}


.s5-news-card:focus-visible {

    outline:
        2px solid
        var(--s5-yellow);

    outline-offset:
        -5px;
}


/* =========================================================
   07 — ARTICLE IMAGE
========================================================= */

.s5-news-image {

    position:
        absolute;

    z-index:
        0;

    inset:
        0;

    display:
        block;

    width:
        100%;

    height:
        100%;

    max-width:
        none;

    object-fit:
        cover;

    transform:
        scale(1.01);

    filter:

        brightness(.86)
        contrast(1.04)
        saturate(.88);

    transition:

        transform
        .75s
        cubic-bezier(.22, .76, .18, 1),

        filter .45s ease;
}


.s5-news-card:hover
.s5-news-image,

.s5-news-card:focus-visible
.s5-news-image {

    transform:
        scale(1.06);

    filter:

        brightness(.98)
        contrast(1.04)
        saturate(.94);
}


/* =========================================================
   08 — ARTICLE OVERLAY
========================================================= */

.s5-news-overlay {

    position:
        absolute;

    z-index:
        1;

    inset:
        0;

    pointer-events:
        none;

    background:

        linear-gradient(
            90deg,
            rgba(4, 7, 10, .96) 0%,
            rgba(4, 7, 10, .82) 37%,
            rgba(4, 7, 10, .26) 70%,
            rgba(4, 7, 10, .14) 100%
        ),

        linear-gradient(
            180deg,
            rgba(0, 0, 0, .12),
            rgba(0, 0, 0, .18)
        );
}


/* =========================================================
   09 — ARTICLE CONTENT
========================================================= */

.s5-news-content {

    position:
        relative;

    z-index:
        3;

    width:
        min(710px, 78%);

    min-height:
        450px;

    padding:
        clamp(34px, 4vw, 58px);

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;
}


.s5-news-meta {

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        11px 18px;
}


.s5-news-category {

    color:
        var(--s5-yellow);

    font-family:
        var(--font-body);

    font-size:
        11px;

    font-weight:
        700;

    line-height:
        1;

    letter-spacing:
        1px;

    text-transform:
        uppercase;
}


.s5-news-meta time,
.s5-news-date {

    color:
        rgba(255, 255, 255, .66);

    font-family:
        var(--font-body);

    font-size:
        11px;

    font-weight:
        600;

    line-height:
        1;

    letter-spacing:
        .8px;

    text-transform:
        uppercase;
}


.s5-news-heading {

    max-width:
        620px;

    margin-top:
        20px !important;

    color:
        #ffffff;

    font-family:
        var(--font-title);

    font-size:
        clamp(30px, 2.5vw, 42px);

    font-weight:
        400;

    line-height:
        1.12;
}


.s5-news-summary {

    max-width:
        570px;

    margin-top:
        17px !important;

    color:
        rgba(255, 255, 255, .72);

    font-family:
        var(--font-body);

    font-size:
        clamp(13.5px, .9vw, 15px);

    font-weight:
        300;

    line-height:
        1.6;
}


.s5-news-read {

    margin-top:
        24px;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        11px;

    color:
        rgba(255, 255, 255, .89);

    font-family:
        var(--font-body);

    font-size:
        11px;

    font-weight:
        700;

    line-height:
        1;

    letter-spacing:
        1.2px;

    text-transform:
        uppercase;
}


.s5-news-read svg {

    width:
        23px;

    height:
        14px;

    fill:
        none;

    stroke:
        var(--s5-yellow);

    stroke-width:
        1.5;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

    transition:
        transform .25s ease;
}


.s5-news-card:hover
.s5-news-read svg,

.s5-news-card:focus-visible
.s5-news-read svg {

    transform:
        translateX(6px);
}


/* =========================================================
   10 — NEWS CONTROLS
========================================================= */

.s5-news-bottom {

    flex:
        0 0 auto;

    margin-top:
        18px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        24px;
}


.s5-news-controls {

    display:
        flex;

    align-items:
        center;

    gap:
        13px;
}


.s5-news-arrow {

    width:
        42px;

    height:
        42px;

    padding:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        rgba(255, 255, 255, .72);

    background:
        transparent;

    border:
        1px solid
        rgba(255, 255, 255, .16);

    border-radius:
        50%;

    cursor:
        pointer;

    transition:

        color .22s ease,
        background .22s ease,
        border-color .22s ease,
        transform .22s ease;
}


.s5-news-arrow:hover {

    color:
        #111416;

    background:
        var(--s5-yellow);

    border-color:
        var(--s5-yellow);

    transform:
        translateY(-2px);
}


.s5-news-arrow:focus-visible {

    outline:
        2px solid
        var(--s5-yellow);

    outline-offset:
        3px;
}


.s5-news-arrow svg {

    width:
        18px;

    height:
        18px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.7;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


/* =========================================================
   11 — NEWS DOTS
========================================================= */

.s5-news-dots {

    display:
        flex;

    align-items:
        center;

    gap:
        8px;
}


.s5-news-dot {

    width:
        7px;

    height:
        7px;

    padding:
        0;

    background:
        rgba(255, 255, 255, .25);

    border:
        0;

    border-radius:
        50%;

    cursor:
        pointer;

    transition:

        width .22s ease,
        background .22s ease;
}


.s5-news-dot.is-active {

    width:
        24px;

    background:
        var(--s5-yellow);

    border-radius:
        999px;
}


.s5-news-dot:focus-visible {

    outline:
        2px solid
        var(--s5-yellow);

    outline-offset:
        4px;
}


/* =========================================================
   12 — SHARED FOOTER LINK
========================================================= */

.s5-footer-link {

    width:
        max-content;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        16px;

    color:
        rgba(255, 255, 255, .72);

    font-family:
        var(--font-body);

    font-size:
        11px;

    font-weight:
        700;

    line-height:
        1;

    letter-spacing:
        1px;

    text-transform:
        uppercase;

    transition:
        color .22s ease;
}


.s5-footer-link svg {

    width:
        58px;

    height:
        18px;

    fill:
        none;

    stroke:
        var(--s5-yellow);

    stroke-width:
        1.4;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

    transition:
        transform .25s ease;
}


.s5-footer-link:hover {

    color:
        #ffffff;
}


.s5-footer-link:hover svg {

    transform:
        translateX(7px);
}


.s5-footer-link:focus-visible {

    outline:
        2px solid
        var(--s5-yellow);

    outline-offset:
        5px;
}


/* =========================================================
   13 — FAQ PANEL
========================================================= */

.s5-faq {

    position:
        relative;

    min-width:
        0;

    height:
        100%;

    min-height:
        690px;

    padding:
        clamp(35px, 3vw, 48px)
        clamp(25px, 2.5vw, 39px)
        30px;

    display:
        flex;

    flex-direction:
        column;

    overflow:
        hidden;

    background:

        radial-gradient(
            circle at 100% 0%,
            rgba(231, 185, 0, .075),
            transparent 33%
        ),

        linear-gradient(
            150deg,
            #24282c,
            var(--s5-panel) 62%,
            #101316
        );

    border:
        1px solid
        rgba(255, 255, 255, .09);

    clip-path:

        polygon(
            9% 0,
            100% 0,
            100% 93%,
            92% 100%,
            0 100%,
            0 7%
        );

    box-shadow:

        0 28px 68px
        rgba(0, 0, 0, .21);
}


.s5-faq .s5-title {

    color:
        #ffffff;

    font-size:
        clamp(29px, 2vw, 37px);

    line-height:
        1.07;
}


.s5-faq .s5-title a:hover {

    color:
        var(--s5-yellow);
}


.s5-faq .s5-description {

    max-width:
        440px;

    font-size:
        13px;
}


/* =========================================================
   14 — FAQ LIST
========================================================= */

.s5-faq-list {

    margin-top:
        clamp(27px, 3.8vh, 40px);

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


.s5-faq-item {

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


.s5-faq-item h3 {

    margin:
        0;
}


/* =========================================================
   15 — FAQ TRIGGER
========================================================= */

.s5-faq-trigger {

    width:
        100%;

    min-height:
        68px;

    padding:
        14px 0;

    display:
        grid;

    grid-template-columns:

        29px
        minmax(0, 1fr)
        32px;

    align-items:
        center;

    gap:
        11px;

    color:
        #ffffff;

    background:
        transparent;

    border:
        0;

    text-align:
        left;

    cursor:
        pointer;
}


.s5-faq-trigger:focus-visible {

    outline:
        2px solid
        var(--s5-yellow);

    outline-offset:
        -3px;
}


.s5-faq-number {

    color:
        var(--s5-yellow);

    font-family:
        var(--font-body);

    font-size:
        10px;

    font-weight:
        700;

    line-height:
        1;

    letter-spacing:
        .8px;
}


.s5-faq-question {

    color:
        rgba(255, 255, 255, .88);

    font-family:
        var(--font-title);

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

    font-weight:
        400;

    line-height:
        1.25;

    transition:
        color .22s ease;
}


/* =========================================================
   16 — FAQ ICON
========================================================= */

.s5-faq-icon {

    position:
        relative;

    width:
        32px;

    height:
        32px;

    border:
        1px solid
        rgba(255, 255, 255, .15);

    border-radius:
        50%;

    transition:

        color .22s ease,
        background .22s ease,
        border-color .22s ease,
        transform .3s ease;
}


.s5-faq-icon::before,
.s5-faq-icon::after {

    content:
        "";

    position:
        absolute;

    left:
        50%;

    top:
        50%;

    width:
        11px;

    height:
        1px;

    transform:
        translate(-50%, -50%);

    background:
        currentColor;

    transition:
        transform .28s ease;
}


.s5-faq-icon::after {

    transform:

        translate(-50%, -50%)
        rotate(90deg);
}


.s5-faq-trigger:hover
.s5-faq-question,

.s5-faq-trigger[aria-expanded="true"]
.s5-faq-question {

    color:
        var(--s5-yellow);
}


.s5-faq-trigger:hover
.s5-faq-icon,

.s5-faq-trigger[aria-expanded="true"]
.s5-faq-icon {

    color:
        #111416;

    background:
        var(--s5-yellow);

    border-color:
        var(--s5-yellow);
}


.s5-faq-trigger[aria-expanded="true"]
.s5-faq-icon {

    transform:
        rotate(180deg);
}


.s5-faq-trigger[aria-expanded="true"]
.s5-faq-icon::after {

    transform:

        translate(-50%, -50%)
        rotate(0deg);
}


/* =========================================================
   17 — FAQ ANSWER

   بدون JavaScript همه پاسخ‌ها قابل مشاهده‌اند.
========================================================= */

.s5-faq-panel {

    display:
        block;
}


.s5-faq-panel-inner {

    min-height:
        0;

    overflow:
        hidden;
}


.s5-faq-answer {

    margin:
        0;

    padding:
        0 42px 21px 40px;

    color:
        var(--s5-muted);

    font-family:
        var(--font-body);

    font-size:
        clamp(12px, .76vw, 13.25px);

    font-weight:
        300;

    line-height:
        1.6;
}


/*
   Accordion فقط بعد از Initialise شدن JavaScript فعال می‌شود.
*/

.js
.s5-insights.s5-js-ready
.s5-faq-panel {

    display:
        grid;

    grid-template-rows:
        0fr;

    opacity:
        0;

    visibility:
        hidden;

    transition:

        grid-template-rows .34s ease,
        opacity .27s ease,
        visibility .34s ease;
}


.js
.s5-insights.s5-js-ready
.s5-faq-item.is-open
.s5-faq-panel {

    grid-template-rows:
        1fr;

    opacity:
        1;

    visibility:
        visible;
}


.s5-faq
.s5-footer-link {

    margin-top:
        auto;

    padding-top:
        25px;
}


/* =========================================================
   18 — ENTRANCE ANIMATION
========================================================= */

.s5-insights
.s5-animate {

    opacity:
        1;

    transform:
        none;
}


.js
.s5-insights
.s5-animate {

    opacity:
        0;

    transform:
        translateY(18px);

    transition:

        opacity .62s ease,
        transform .62s ease;
}


.js
.s5-insights.is-visible
.s5-animate {

    opacity:
        1;

    transform:
        translateY(0);
}


.js
.s5-insights.is-visible
.s5-news-carousel {

    transition-delay:
        .10s;
}


.js
.s5-insights.is-visible
.s5-faq-list {

    transition-delay:
        .17s;
}


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

@media(max-width:1100px) {

    .s5-layout {

        grid-template-columns:

            minmax(0, 1.35fr)
            minmax(330px, .85fr);

        gap:
            32px;
    }


    .s5-news-content {

        width:
            86%;
    }

}


/* =========================================================
   20 — STACKED TABLET / MOBILE
========================================================= */

@media(max-width:980px) {

    .s5-insights {

        height:
            auto;

        min-height:
            auto;

        overflow:
            hidden;

        padding:
            31px 18px 44px;
    }


    .s5-shell {

        height:
            auto;
    }


    .s5-layout {

        height:
            auto;

        grid-template-columns:
            1fr;

        gap:
            48px;
    }


    .s5-news-carousel {

        min-height:
            0;
    }


    .s5-news-viewport,
    .s5-news-card,
    .s5-news-content {

        min-height:
            520px;
    }


    .s5-faq {

        height:
            auto;

        min-height:
            620px;

        padding:
            36px 27px 31px;

        clip-path:
            none;
    }

}


/* =========================================================
   21 — MOBILE
========================================================= */

@media(max-width:680px) {

    .s5-title {

        font-size:
            clamp(32px, 9vw, 41px);
    }


    .s5-description {

        font-size:
            14px;

        line-height:
            1.58;
    }


    .s5-news-carousel {

        margin-top:
            27px;
    }


    .s5-news-viewport,
    .s5-news-card,
    .s5-news-content {

        min-height:
            500px;
    }


    .s5-news-content {

        width:
            100%;

        padding:
            28px 23px;

        justify-content:
            flex-end;
    }


    .s5-news-overlay {

        background:

            linear-gradient(
                180deg,
                rgba(5, 8, 11, .16) 0%,
                rgba(5, 8, 11, .36) 37%,
                rgba(5, 8, 11, .96) 100%
            );
    }


    .s5-news-category,
    .s5-news-meta time,
    .s5-news-date {

        font-size:
            11px;
    }


    .s5-news-heading {

        margin-top:
            15px !important;

        font-size:
            clamp(25px, 7.2vw, 31px);

        line-height:
            1.14;
    }


    .s5-news-summary {

        margin-top:
            12px !important;

        font-size:
            14px;

        line-height:
            1.55;
    }


    .s5-news-read {

        margin-top:
            17px;

        font-size:
            11px;
    }


    .s5-news-bottom {

        margin-top:
            16px;

        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            20px;
    }


    .s5-news-controls {

        width:
            100%;

        justify-content:
            space-between;
    }


    .s5-news-bottom
    .s5-footer-link {

        font-size:
            11px;
    }


    .s5-faq {

        min-height:
            600px;

        padding:
            32px 21px 28px;
    }


    .s5-faq .s5-title {

        font-size:
            32px;
    }


    .s5-faq-trigger {

        min-height:
            72px;

        grid-template-columns:

            27px
            minmax(0, 1fr)
            32px;

        gap:
            8px;
    }


    .s5-faq-question {

        font-size:
            17px;

        line-height:
            1.34;
    }


    .s5-faq-answer {

        padding:
            0 38px 21px 35px;

        font-size:
            14px;

        line-height:
            1.65;
    }


    .s5-faq
    .s5-footer-link {

        width:
            100%;

        font-size:
            10px;
    }

}


/* =========================================================
   22 — VERY SMALL MOBILE
========================================================= */

@media(max-width:390px) {

    .s5-news-dots {

        gap:
            6px;
    }


    .s5-news-dot.is-active {

        width:
            18px;
    }


    .s5-footer-link {

        gap:
            10px;
    }


    .s5-footer-link svg {

        width:
            45px;
    }


    .s5-faq-trigger {

        grid-template-columns:

            24px
            minmax(0, 1fr)
            30px;
    }


    .s5-faq-question {

        font-size:
            16px;
    }

}


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

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

    .s5-news-track,
    .s5-news-image,
    .s5-news-card::before,
    .s5-news-read svg,
    .s5-news-arrow,
    .s5-news-dot,
    .s5-faq-icon,
    .s5-faq-panel,
    .s5-animate {

        transition:
            none !important;
    }


    .js
    .s5-insights
    .s5-animate {

        opacity:
            1;

        transform:
            none;
    }

}

/* =========================================================
   ACF RICH TEXT CONTENT
========================================================= */

.ag-rich-text > *:first-child {
    margin-top: 0;
}

.ag-rich-text > *:last-child {
    margin-bottom: 0;
}

.ag-rich-text p {
    color: inherit;
    font: inherit;
}

.ag-rich-text p + p {
    margin-top: 0.75em;
}

.ag-rich-text p:empty {
    display: none;
}

.ag-rich-text a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.ag-rich-text ul,
.ag-rich-text ol {
    margin: 0.75em 0 0;
    padding-left: 1.25em;
}