/* =========================================================
   ERABYTE – HOME SERVICES
   ---------------------------------------------------------
   V7

   INTRO HIERARCHY:
   CORE SERVICES
   WHAT WE DO
   INTERFACES / SYSTEMS / IDENTITY

   Uses same visual hierarchy as Featured Work:
   PROJECT / 01
   ANVIOLHOMES
   FOR ANVIOLMEDIA
   ========================================================= */


/* =========================================================
   ROOT
   ========================================================= */

.eb-services {

    --eb-services-bg:
        #050814;

    --eb-services-white:
        rgba(255,255,255,.98);

    --eb-services-gap:
        0px;

    --eb-active-grow:
        2.8;


    --eb-panel-slant:
        clamp(
            62px,
            5vw,
            92px
        );


    --eb-panel-overlap:
        clamp(
            50px,
            4.15vw,
            76px
        );


    /*
     * Same rhythm as Featured Work project identity.
     */

    --eb-services-identity-gap:
        12px;


    position:
        relative;


    width:
        100vw;


    max-width:
        none;


    margin-left:
        calc(50% - 50vw);


    margin-right:
        calc(50% - 50vw);


    padding:
        clamp(115px,10vw,170px)
        0
        clamp(120px,11vw,180px);


    box-sizing:
        border-box;


    overflow:
        hidden;


    background:
        var(--eb-services-bg);


    color:
        var(--eb-services-white);


    font-family:
        "Saira",
        system-ui,
        sans-serif;
}


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

.eb-services__intro {

    width:
        min(
            1580px,
            calc(100% - 9vw)
        );


    margin:
        0
        auto
        clamp(
            42px,
            4.4vw,
            66px
        );
}


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

.eb-services__identity {

    display:
        flex;


    flex-direction:
        column;


    align-items:
        flex-start;


    gap:
        var(--eb-services-identity-gap);


    margin:
        0;


    padding:
        0;
}


/* =========================================================
   CORE SERVICES
   ---------------------------------------------------------
   Same role as PROJECT / 01.
   ========================================================= */

html body
.eb-services
.eb-services__kicker {

    display:
        block;


    margin:
        0 !important;


    padding:
        0 !important;


    color:
        rgba(
            255,
            255,
            255,
            0.74
        ) !important;


    font-family:
        "Saira",
        system-ui,
        sans-serif !important;


    font-size:
        clamp(
            0.72rem,
            0.76vw,
            0.86rem
        ) !important;


    font-style:
        normal !important;


    font-weight:
        500 !important;


    line-height:
        1 !important;


    letter-spacing:
        0.16em !important;


    text-transform:
        uppercase !important;


    text-shadow:
        none !important;
}


/* =========================================================
   WHAT WE DO
   ---------------------------------------------------------
   Exact ANVIOLHOMES typography.
   ========================================================= */

html body
.eb-services
.eb-services__identity
h2#eb-services-title.eb-services__title {

    display:
        block !important;


    margin:
        0 !important;


    padding:
        0 !important;


    background:
        transparent !important;


    border:
        0 !important;


    box-shadow:
        none !important;


    color:
        rgba(
            255,
            255,
            255,
            0.97
        ) !important;


    font-family:
        "Saira",
        system-ui,
        sans-serif !important;


    font-size:
        clamp(
            1.72rem,
            1.90vw,
            2.20rem
        ) !important;


    font-style:
        normal !important;


    font-weight:
        500 !important;


    line-height:
        1 !important;


    letter-spacing:
        0.065em !important;


    text-transform:
        uppercase !important;


    text-decoration:
        none !important;


    text-shadow:
        none !important;


    transform:
        none !important;
}


/* =========================================================
   INTERFACES / SYSTEMS / IDENTITY
   ---------------------------------------------------------
   Same role as FOR ANVIOLMEDIA.
   ========================================================= */

html body
.eb-services
.eb-services__descriptor {

    display:
        block;


    margin:
        0 !important;


    padding:
        0 !important;


    color:
        rgba(
            255,
            255,
            255,
            0.54
        ) !important;


    font-family:
        "Saira",
        system-ui,
        sans-serif !important;


    font-size:
        clamp(
            0.66rem,
            0.70vw,
            0.79rem
        ) !important;


    font-style:
        normal !important;


    font-weight:
        500 !important;


    line-height:
        1 !important;


    letter-spacing:
        0.12em !important;


    text-transform:
        uppercase !important;


    text-shadow:
        none !important;
}


/* =========================================================
   PANEL CONTAINER
   ========================================================= */

.eb-services__panels {

    position:
        relative;


    display:
        flex;


    align-items:
        stretch;


    gap:
        0;


    width:
        min(
            1680px,
            calc(100% - 4vw)
        );


    height:
        clamp(
            610px,
            68svh,
            820px
        );


    margin:
        0
        auto;


    overflow:
        visible;
}


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

.eb-services__panel {

    position:
        relative;


    flex:
        1 1 0;


    min-width:
        0;


    height:
        100%;


    overflow:
        hidden;


    isolation:
        isolate;


    background:
        #08111f;


    clip-path:
        polygon(
            var(--eb-panel-slant) 0,

            100% 0,

            calc(
                100%
                -
                var(--eb-panel-slant)
            )
            100%,

            0 100%
        );


    opacity:
        0;


    transform:
        translate3d(
            0,
            22px,
            0
        );


    transition:

        flex-grow
        620ms
        cubic-bezier(
            .16,
            1,
            .3,
            1
        ),

        opacity
        220ms
        ease,

        transform
        650ms
        cubic-bezier(
            .16,
            1,
            .3,
            1
        );
}


/* =========================================================
   PANEL OVERLAP
   ========================================================= */

.eb-services__panel
+
.eb-services__panel {

    margin-left:
        calc(
            -1
            *
            var(--eb-panel-overlap)
        );
}


/* =========================================================
   STACK ORDER
   ========================================================= */

.eb-services__panel:nth-child(1) {
    z-index: 1;
}

.eb-services__panel:nth-child(2) {
    z-index: 2;
}

.eb-services__panel:nth-child(3) {
    z-index: 3;
}

.eb-services__panel:nth-child(4) {
    z-index: 4;
}

.eb-services__panel:nth-child(5) {
    z-index: 5;
}


/* =========================================================
   REVEAL
   ========================================================= */

.eb-services.is-visible
.eb-services__panel {

    opacity:
        1;


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


/* =========================================================
   ACTIVE WIDTH
   ========================================================= */

.eb-services.has-active
.eb-services__panel {

    flex-grow:
        1;
}


.eb-services.has-active
.eb-services__panel.is-active {

    flex-grow:
        var(--eb-active-grow);


    z-index:
        20;
}


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

.eb-services__visual {

    position:
        absolute;


    inset:
        -2%;


    z-index:
        0;


    pointer-events:
        none;


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


    background-repeat:
        no-repeat;


    background-position:
        var(
            --eb-service-position,
            center
        );


    background-size:
        cover;


    transform:
        translate3d(
            0,
            0,
            0
        )
        scale(1.02);


    transition:
        transform
        620ms
        cubic-bezier(
            .16,
            1,
            .3,
            1
        );
}


/* =========================================================
   DEFAULT SHADE
   ========================================================= */

.eb-services__shade {

    position:
        absolute;


    inset:
        0;


    z-index:
        1;


    pointer-events:
        none;


    background:
        linear-gradient(
            to top,

            rgba(5,8,20,.88)
            0%,

            rgba(5,8,20,.58)
            31%,

            rgba(5,8,20,.22)
            62%,

            rgba(5,8,20,.10)
            100%
        );


    transition:
        background
        260ms
        ease;
}


/* =========================================================
   ACTIVE PANEL MUTE
   ========================================================= */

.eb-services__panel.is-active
.eb-services__shade {

    background:

        linear-gradient(
            90deg,

            rgba(5,8,20,.97)
            0%,

            rgba(5,8,20,.94)
            38%,

            rgba(5,8,20,.88)
            70%,

            rgba(5,8,20,.79)
            100%
        ),

        linear-gradient(
            to top,

            rgba(5,8,20,.95)
            0%,

            rgba(5,8,20,.82)
            50%,

            rgba(5,8,20,.64)
            100%
        );
}


/* =========================================================
   COLLAPSED SHADE
   ========================================================= */

.eb-services.has-active
.eb-services__panel:not(
    .is-active
)
.eb-services__shade {

    background:
        rgba(
            5,
            8,
            20,
            .76
        );
}


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

.eb-services
button.eb-services__trigger,

.eb-services
button.eb-services__trigger:hover,

.eb-services
button.eb-services__trigger:focus,

.eb-services
button.eb-services__trigger:focus-visible,

.eb-services
button.eb-services__trigger:active {

    -webkit-appearance:
        none !important;


    appearance:
        none !important;


    position:
        absolute;


    inset:
        0;


    z-index:
        4;


    display:
        block;


    width:
        100%;


    height:
        100%;


    margin:
        0 !important;


    padding:
        0 !important;


    border:
        0 !important;


    border-radius:
        0 !important;


    outline:
        0 !important;


    background:
        transparent !important;


    background-color:
        transparent !important;


    background-image:
        none !important;


    box-shadow:
        none !important;


    text-shadow:
        none !important;


    color:
        inherit !important;


    font:
        inherit !important;


    text-align:
        left;


    cursor:
        pointer;


    filter:
        none !important;


    transform:
        none !important;
}


/* =========================================================
   CLOSED PANEL HEADING
   ========================================================= */

.eb-services__panel-heading {

    position:
        absolute;


    top:
        67%;


    left:
        calc(
            var(--eb-panel-slant)
            +
            10px
        );


    right:
        calc(
            var(--eb-panel-slant)
            +
            10px
        );


    display:
        block;


    transform:
        translate3d(
            0,
            -50%,
            0
        );


    transition:

        top
        620ms
        cubic-bezier(
            .16,
            1,
            .3,
            1
        ),

        transform
        620ms
        cubic-bezier(
            .16,
            1,
            .3,
            1
        );
}


/* =========================================================
   SERVICE NAME
   ========================================================= */

.eb-services__name {

    display:
        block;


    max-width:
        100%;


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


    font-size:
        clamp(
            1.9rem,
            2.55vw,
            3.35rem
        );


    font-weight:
        500;


    line-height:
        .95;


    letter-spacing:
        -.026em;


    text-transform:
        uppercase;


    text-wrap:
        balance;


    transition:

        color
        160ms
        ease,

        font-size
        500ms
        cubic-bezier(
            .16,
            1,
            .3,
            1
        );
}


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

.eb-services.is-previewing
.eb-services__panel:not(
    .is-preview
) {

    opacity:
        .52;
}


.eb-services__panel.is-preview {

    z-index:
        10;
}


.eb-services__panel.is-preview
.eb-services__name {

    color:
        #FFFFFF;
}


.eb-services__panel.is-preview
.eb-services__visual {

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


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

.eb-services__panel.is-active
.eb-services__panel-heading {

    top:
        clamp(
            46px,
            6vh,
            72px
        );


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


.eb-services__panel.is-active
.eb-services__name {

    color:
        #FFFFFF;


    font-size:
        clamp(
            2.6rem,
            4vw,
            4.8rem
        );
}


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

.eb-services__panel.is-active
.eb-services__visual {

    transform:
        translate3d(
            2%,
            0,
            0
        )
        scale(1.045);
}


/* =========================================================
   COLLAPSED PANELS
   ========================================================= */

.eb-services.has-active
.eb-services__panel:not(
    .is-active
) {

    opacity:
        .46;
}


.eb-services.has-active
.eb-services__panel:not(
    .is-active
)
.eb-services__name {

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


    font-size:
        clamp(
            1.05rem,
            1.35vw,
            1.65rem
        );
}


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

.eb-services__details {

    position:
        absolute;


    z-index:
        5;


    top:
        clamp(
            150px,
            20vh,
            205px
        );


    left:
        calc(
            var(--eb-panel-slant)
            +
            14px
        );


    right:
        calc(
            var(--eb-panel-slant)
            +
            14px
        );


    bottom:
        clamp(
            30px,
            4vw,
            54px
        );


    display:
        flex;


    flex-direction:
        column;


    opacity:
        0;


    visibility:
        hidden;


    pointer-events:
        none;


    transform:
        translate3d(
            0,
            15px,
            0
        );


    transition:

        opacity
        260ms
        ease,

        transform
        420ms
        cubic-bezier(
            .16,
            1,
            .3,
            1
        ),

        visibility
        0s
        linear
        420ms;
}


.eb-services__panel.is-active
.eb-services__details {

    opacity:
        1;


    visibility:
        visible;


    transform:
        translate3d(
            0,
            0,
            0
        );


    transition-delay:
        170ms;
}


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

.eb-services__details-intro {

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


/* =========================================================
   DETAIL LABEL
   ========================================================= */

.eb-services__details-label {

    margin:
        0
        0
        16px;


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


    font-size:
        clamp(
            .80rem,
            .86vw,
            .98rem
        );


    font-weight:
        500;


    line-height:
        1;


    letter-spacing:
        .14em;


    text-transform:
        uppercase;
}


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

.eb-services__description {

    width:
        min(
            780px,
            100%
        );


    margin:
        0;


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


    font-size:
        clamp(
            1.20rem,
            1.45vw,
            1.62rem
        );


    font-weight:
        400;


    line-height:
        1.52;
}


/* =========================================================
   DETAIL GRID
   ========================================================= */

.eb-services__detail-grid {

    display:
        grid;


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


    gap:
        clamp(
            28px,
            4vh,
            44px
        )
        clamp(
            42px,
            5vw,
            86px
        );


    width:
        min(
            920px,
            100%
        );


    margin-top:
        clamp(
            42px,
            5vh,
            62px
        );
}


/* =========================================================
   DETAIL ITEM
   ========================================================= */

.eb-services__detail-item {

    min-width:
        0;
}


.eb-services__detail-item h3 {

    position:
        relative;


    margin:
        0
        0
        12px;


    padding-left:
        18px;


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


    font-family:
        "Saira",
        system-ui,
        sans-serif;


    font-size:
        clamp(
            .94rem,
            1.02vw,
            1.15rem
        );


    font-weight:
        500;


    line-height:
        1.2;


    letter-spacing:
        .09em;


    text-transform:
        uppercase;
}


.eb-services__detail-item h3::before {

    content:
        "";


    position:
        absolute;


    top:
        .55em;


    left:
        0;


    width:
        7px;


    height:
        1px;


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


.eb-services__detail-item p {

    margin:
        0;


    padding-left:
        18px;


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


    font-size:
        clamp(
            .98rem,
            1.06vw,
            1.14rem
        );


    font-weight:
        400;


    line-height:
        1.56;
}


/* =========================================================
   DENSE MODE
   ========================================================= */

.eb-services.is-dense:not(
    .has-active
)
.eb-services__name {

    font-size:
        clamp(
            1.2rem,
            1.65vw,
            2rem
        );
}


/* =========================================================
   THEME RESET
   ========================================================= */

.eb-services button,
.eb-services button:hover,
.eb-services button:focus,
.eb-services button:focus-visible,
.eb-services button:active {

    background:
        transparent !important;


    background-color:
        transparent !important;


    background-image:
        none !important;


    border:
        0 !important;


    border-color:
        transparent !important;


    box-shadow:
        none !important;


    color:
        inherit !important;


    text-shadow:
        none !important;


    filter:
        none !important;
}


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

@media (
    max-width:
    1100px
) {

    .eb-services {

        --eb-panel-slant:
            clamp(
                44px,
                5vw,
                62px
            );


        --eb-panel-overlap:
            clamp(
                34px,
                4vw,
                50px
            );
    }


    .eb-services__intro {

        width:
            calc(100% - 48px);
    }


    .eb-services__panels {

        width:
            calc(100% - 26px);


        height:
            700px;
    }


    .eb-services__description {

        font-size:
            1.12rem;
    }


    .eb-services__detail-item p {

        font-size:
            .94rem;
    }

}


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

@media (
    max-width:
    760px
) {

    .eb-services {

        --eb-panel-slant:
            25px;


        --eb-panel-overlap:
            0px;


        --eb-services-identity-gap:
            10px;


        padding:
            90px
            0
            110px;
    }


    .eb-services__intro {

        width:
            calc(100% - 40px);


        margin-bottom:
            36px;
    }


    html body
    .eb-services
    .eb-services__kicker {

        font-size:
            0.68rem !important;
    }


    html body
    .eb-services
    .eb-services__identity
    h2#eb-services-title.eb-services__title {

        font-size:
            1.38rem !important;
    }


    html body
    .eb-services
    .eb-services__descriptor {

        font-size:
            0.64rem !important;
    }


    .eb-services__panels {

        flex-direction:
            column;


        gap:
            8px;


        width:
            calc(100% - 24px);


        height:
            auto;
    }


    .eb-services__panel,
    .eb-services__panel
    +
    .eb-services__panel {

        flex:
            none;


        width:
            100%;


        height:
            185px;


        min-height:
            185px;


        margin-left:
            0;


        clip-path:
            polygon(
                var(--eb-panel-slant)
                0,

                100%
                0,

                calc(
                    100%
                    -
                    var(--eb-panel-slant)
                )
                100%,

                0
                100%
            );
    }


    .eb-services.has-active
    .eb-services__panel {

        height:
            140px;


        min-height:
            140px;
    }


    .eb-services.has-active
    .eb-services__panel.is-active {

        height:
            760px;


        min-height:
            760px;
    }


    .eb-services__panel-heading {

        top:
            50%;


        left:
            calc(
                var(--eb-panel-slant)
                +
                16px
            );


        right:
            calc(
                var(--eb-panel-slant)
                +
                16px
            );
    }


    .eb-services__panel.is-active
    .eb-services__panel-heading {

        top:
            36px;
    }


    .eb-services__panel.is-active
    .eb-services__name {

        font-size:
            clamp(
                2rem,
                9vw,
                3rem
            );
    }


    .eb-services__details {

        top:
            120px;


        left:
            calc(
                var(--eb-panel-slant)
                +
                14px
            );


        right:
            calc(
                var(--eb-panel-slant)
                +
                14px
            );


        bottom:
            30px;
    }


    .eb-services__description {

        font-size:
            1rem;


        line-height:
            1.54;
    }


    .eb-services__detail-grid {

        grid-template-columns:
            1fr;


        gap:
            23px;


        margin-top:
            32px;
    }


    .eb-services__detail-item p {

        font-size:
            .91rem;
    }

}


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

@media (
    max-width:
    480px
) {

    .eb-services.has-active
    .eb-services__panel.is-active {

        height:
            840px;


        min-height:
            840px;
    }

}


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

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

    .eb-services__panel,
    .eb-services__visual,
    .eb-services__shade,
    .eb-services__panel-heading,
    .eb-services__details,
    .eb-services__name {

        transition:
            none !important;
    }


    .eb-services__panel {

        opacity:
            1;


        transform:
            none;
    }

}