/* ========================================================= */
/*                                                         */
/*               ARS GLOBAL VISUAL DNA                     */
/*          SHARED DESIGN SYSTEM — ALL ARS PAGES           */
/*                                                         */
/*  ARS HERITAGE GROUP • ARS DESIGN • ARS COMPANY          */
/*  ARS BRAIN • ROSE AI • ZHR NAJI • ALL FUTURE PAGES      */
/*                                                         */
/* ========================================================= */




/* ========================================================= */
/* 01 — GLOBAL COLOR DNA                                    */
/* ========================================================= */

:root{

    /* ----------------------------------------------------- */
    /* CORE BLACK                                             */
    /* ----------------------------------------------------- */

    --ars-black:
        #000000;

    --ars-black-deep:
        #010101;

    --ars-black-surface:
        #030405;


    /* ----------------------------------------------------- */
    /* DEEP NAVY                                              */
    /* ----------------------------------------------------- */

    --ars-navy-deep:
        #020712;

    --ars-navy:
        #06101f;

    --ars-navy-soft:
        #0a1728;


    /* ----------------------------------------------------- */
    /* GOLD                                                   */
    /* ----------------------------------------------------- */

    --ars-gold:
        #c49a4a;

    --ars-gold-light:
        #e6c77a;

    --ars-gold-bright:
        #f3d995;

    --ars-gold-dark:
        #8d6729;


    /* ----------------------------------------------------- */
    /* BRONZE                                                 */
    /* ----------------------------------------------------- */

    --ars-bronze:
        #8f6238;

    --ars-bronze-light:
        #b4875a;

    --ars-bronze-dark:
        #4a2e1c;


    /* ----------------------------------------------------- */
    /* WHITE                                                  */
    /* ----------------------------------------------------- */

    --ars-white:
        #ffffff;

    --ars-white-soft:
        #f4f1e8;

    --ars-white-muted:
        #c8c6bf;


    /* ----------------------------------------------------- */
    /* TECHNOLOGY BLUE                                        */
    /* ----------------------------------------------------- */

    --ars-blue:
        #174b82;

    --ars-blue-light:
        #4d91d1;

    --ars-blue-glow:
        rgba(45,130,220,.35);


    /* ----------------------------------------------------- */
    /* ENERGY RED                                             */
    /* ----------------------------------------------------- */

    --ars-red:
        #7d2024;

    --ars-red-light:
        #bd4b4f;

    --ars-red-glow:
        rgba(180,50,55,.22);


    /* ----------------------------------------------------- */
    /* ENERGY YELLOW                                          */
    /* ----------------------------------------------------- */

    --ars-yellow:
        #d7ad3f;

    --ars-yellow-light:
        #f1d36e;

    --ars-yellow-glow:
        rgba(235,190,65,.25);


    /* ----------------------------------------------------- */
    /* EARTH BROWN                                            */
    /* ----------------------------------------------------- */

    --ars-brown:
        #4a3020;

    --ars-brown-light:
        #806047;


    /* ----------------------------------------------------- */
    /* GLOBAL TEXT                                            */
    /* ----------------------------------------------------- */

    --ars-text:
        #f4f1e8;

    --ars-text-soft:
        rgba(244,241,232,.78);

    --ars-text-muted:
        rgba(244,241,232,.56);


    /* ----------------------------------------------------- */
    /* GLOBAL BORDERS                                         */
    /* ----------------------------------------------------- */

    --ars-border:
        rgba(255,255,255,.10);

    --ars-border-gold:
        rgba(196,154,74,.40);

    --ars-border-gold-bright:
        rgba(230,199,122,.70);


    /* ----------------------------------------------------- */
    /* GLOBAL GLASS                                           */
    /* ----------------------------------------------------- */

    --ars-glass-dark:
        rgba(2,7,15,.76);

    --ars-glass-navy:
        rgba(5,15,29,.68);

    --ars-glass-light:
        rgba(255,255,255,.075);

    --ars-glass-gold:
        rgba(196,154,74,.10);


    /* ----------------------------------------------------- */
    /* GLOBAL SHADOWS                                         */
    /* ----------------------------------------------------- */

    --ars-shadow-black:
        0 25px 80px rgba(0,0,0,.70);

    --ars-shadow-gold:
        0 20px 70px rgba(160,115,35,.18);

    --ars-shadow-blue:
        0 20px 70px rgba(25,85,150,.16);

    --ars-shadow-red:
        0 20px 70px rgba(130,25,30,.12);

}


/* ========================================================= */
/* 02 — GLOBAL RESET                                         */
/* ========================================================= */

html{

    width:100%;

    min-height:100%;

    margin:0;

    padding:0;

    background:
        #000000;

    overflow-x:hidden;

    scroll-behavior:smooth;

}


body{

    width:100%;

    min-height:100vh;

    margin:0;

    padding:0;

    background:
        #000000;

    color:
        var(--ars-text);

    overflow-x:hidden;

    font-family:

        "Inter",
        "Segoe UI",
        Arial,
        sans-serif;

    -webkit-font-smoothing:
        antialiased;

    text-rendering:
        optimizeLegibility;

}


*,
*::before,
*::after{

    box-sizing:
        border-box;

}


img,
video,
svg,
canvas{

    display:
        block;

    max-width:
        100%;

}


a{

    color:
        inherit;

    text-decoration:
        none;

}


button,
a{

    -webkit-tap-highlight-color:
        transparent;

}


/* ========================================================= */
/* 03 — GLOBAL PAGE BACKGROUND                               */
/* ========================================================= */

body{

    position:
        relative;

    background:

        radial-gradient(
            circle at 50% 0%,
            rgba(20,38,65,.16),
            transparent 32%
        ),

        radial-gradient(
            circle at 15% 35%,
            rgba(196,154,74,.035),
            transparent 30%
        ),

        radial-gradient(
            circle at 85% 70%,
            rgba(23,75,130,.035),
            transparent 32%
        ),

        #000000;

}


/* ========================================================= */
/* 04 — CINEMATIC GLOBAL LIGHT FIELD                         */
/* ========================================================= */

body::before{

    content:"";

    position:
        fixed;

    inset:
        -35%;

    z-index:
        0;

    pointer-events:
        none;

    background:

        radial-gradient(
            ellipse at 25% 20%,
            rgba(196,154,74,.055),
            transparent 28%
        ),

        radial-gradient(
            ellipse at 75% 60%,
            rgba(23,75,130,.045),
            transparent 32%
        ),

        radial-gradient(
            ellipse at 50% 100%,
            rgba(125,32,36,.025),
            transparent 28%
        );

    animation:

        arsGlobalAtmosphere
        22s
        ease-in-out
        infinite
        alternate;

}


@keyframes arsGlobalAtmosphere{

    0%{

        transform:
            translate3d(-2%,-1%,0)
            scale(1);

        opacity:
            .55;

    }

    50%{

        transform:
            translate3d(2%,2%,0)
            scale(1.04);

        opacity:
            .85;

    }

    100%{

        transform:
            translate3d(-1%,3%,0)
            scale(1.08);

        opacity:
            .65;

    }

}


/* ========================================================= */
/* 05 — GLOBAL PAGE ROOT                                     */
/* ========================================================= */

section,
header,
footer,
main,
nav{

    position:
        relative;

    max-width:
        100%;

}


.ars-group-page,
.ars-company-page,
.ars-design-page,
.ars-brain-page,
.ars-future-page{

    position:
        relative;

    z-index:
        1;

    width:
        100%;

    max-width:
        100%;

    overflow:
        hidden;

}


/* ========================================================= */
/* 06 — GLOBAL CONTAINER                                     */
/* ========================================================= */

.container{

    width:
        min(1400px, 90%);

    max-width:
        100%;

    margin-left:
        auto;

    margin-right:
        auto;

    position:
        relative;

    z-index:
        2;

}


/* ========================================================= */
/* 07 — GLOBAL SECTION                                      */
/* ========================================================= */

section{

    width:
        100%;

    padding:

        clamp(
            90px,
            9vw,
            170px
        )
        0;

    isolation:
        isolate;

}


/* ========================================================= */
/* 08 — GLOBAL SECTION HEADER                                */
/* ========================================================= */

.section-header{

    position:
        relative;

    z-index:
        3;

    width:
        100%;

    max-width:
        1000px;

    margin:

        0
        auto
        70px;

    text-align:
        center;

}


.section-label{

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    margin-bottom:
        20px;

    padding:

        8px
        18px;

    border:

        1px
        solid
        var(--ars-border-gold);

    border-radius:
        999px;

    color:
        var(--ars-gold-light);

    background:

        rgba(5,12,22,.55);

    backdrop-filter:
        blur(14px);

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

    box-shadow:

        0
        0
        25px
        rgba(196,154,74,.05);

    font-size:
        .70rem;

    letter-spacing:
        .18em;

    text-transform:
        uppercase;

}


.section-header h2{

    margin:
        0;

    color:
        var(--ars-white-soft);

    font-size:

        clamp(
            2rem,
            4vw,
            4rem
        );

    line-height:
        1.12;

    letter-spacing:
        -.025em;

}


.section-header p{

    max-width:
        780px;

    margin:

        25px
        auto
        0;

    color:
        var(--ars-text-soft);

    line-height:
        1.9;

}


/* ========================================================= */
/* 09 — UNIVERSAL ARS GLASS SYSTEM                           */
/* ========================================================= */

.ars-glass{

    position:
        relative;

    overflow:
        hidden;

    border:

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

    background:

        linear-gradient(
            135deg,
            rgba(255,255,255,.075),
            rgba(255,255,255,.025)
        );

    backdrop-filter:

        blur(24px)
        saturate(125%);

    -webkit-backdrop-filter:

        blur(24px)
        saturate(125%);

    box-shadow:

        var(--ars-shadow-black),

        inset
        0
        1px
        0
        rgba(255,255,255,.10);

    transition:

        transform .6s cubic-bezier(.2,.8,.2,1),

        border-color .5s ease,

        box-shadow .5s ease,

        background .5s ease;

}


/* ========================================================= */
/* 10 — GLASS LIGHT REFLECTION                               */
/* ========================================================= */

.ars-glass::before{

    content:
        "";

    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

    background:

        linear-gradient(
            115deg,
            transparent 20%,
            rgba(255,255,255,.09) 45%,
            transparent 70%
        );

    transform:
        translateX(-120%);

    transition:
        transform 1.2s ease;

}


.ars-glass:hover::before{

    transform:
        translateX(120%);

}


/* ========================================================= */
/* 11 — GLASS HOVER                                         */
/* ========================================================= */

.ars-glass:hover{

    transform:
        translateY(-10px);

    border-color:
        var(--ars-border-gold-bright);

    box-shadow:

        0
        30px
        90px
        rgba(0,0,0,.78),

        0
        0
        35px
        rgba(196,154,74,.10),

        inset
        0
        1px
        0
        rgba(255,255,255,.18);

}


/* ========================================================= */
/* 12 — GLASS VARIANTS                                      */
/* ========================================================= */

.ars-glass-dark{

    background:

        linear-gradient(
            135deg,
            rgba(0,0,0,.88),
            rgba(4,9,17,.72)
        );

}


.ars-glass-navy{

    background:

        linear-gradient(
            135deg,
            rgba(5,15,29,.82),
            rgba(2,7,14,.65)
        );

    border-color:

        rgba(38,91,145,.25);

}


.ars-glass-gold{

    background:

        linear-gradient(
            135deg,
            rgba(196,154,74,.16),
            rgba(5,13,24,.70)
        );

    border-color:

        rgba(196,154,74,.32);

}


.ars-glass-bronze{

    background:

        linear-gradient(
            135deg,
            rgba(143,98,56,.16),
            rgba(3,7,12,.75)
        );

    border-color:

        rgba(143,98,56,.30);

}


.ars-glass-blue{

    background:

        linear-gradient(
            135deg,
            rgba(23,75,130,.16),
            rgba(2,8,17,.76)
        );

    border-color:

        rgba(77,145,209,.22);

}


.ars-glass-red{

    background:

        linear-gradient(
            135deg,
            rgba(125,32,36,.13),
            rgba(3,7,12,.78)
        );

    border-color:

        rgba(189,75,79,.20);

}


.ars-glass-bright{

    background:

        linear-gradient(
            135deg,
            rgba(255,255,255,.13),
            rgba(255,255,255,.035)
        );

}


.ars-glass-flat{

    box-shadow:

        inset
        0
        1px
        0
        rgba(255,255,255,.08);

}


.ars-glass-floating{

    box-shadow:

        0
        30px
        100px
        rgba(0,0,0,.75),

        0
        0
        40px
        rgba(196,154,74,.08);

}


/* ========================================================= */
/* 13 — GOLD TYPOGRAPHY                                     */
/* ========================================================= */

.gold-text{

    background:

        linear-gradient(
            120deg,
            var(--ars-gold-dark),
            var(--ars-gold-light),
            var(--ars-gold),
            var(--ars-gold-bright)
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color:
        transparent;

}


h1,
h2,
h3,
h4{

    text-wrap:
        balance;

}


h1,
h2,
h3{

    color:
        var(--ars-white-soft);

}


/* ========================================================= */
/* 14 — UNIVERSAL ARS BUTTONS                               */
/* ========================================================= */

.btn-primary,
.btn-secondary{

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        52px;

    padding:

        0
        28px;

    border-radius:
        999px;

    font-size:
        .84rem;

    font-weight:
        600;

    letter-spacing:
        .04em;

    transition:

        transform .4s ease,

        box-shadow .4s ease,

        background .4s ease,

        border-color .4s ease;

}


.btn-primary{

    color:
        #090909;

    background:

        linear-gradient(
            135deg,
            #9e742c,
            #e5c477,
            #b7842e
        );

    box-shadow:

        0
        10px
        35px
        rgba(196,154,74,.20);

}


.btn-secondary{

    color:
        var(--ars-gold-light);

    border:

        1px
        solid
        var(--ars-border-gold);

    background:

        rgba(4,11,20,.60);

    backdrop-filter:
        blur(14px);

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

}


.btn-primary:hover,
.btn-secondary:hover{

    transform:
        translateY(-4px);

    box-shadow:

        0
        15px
        45px
        rgba(196,154,74,.28);

}


/* ========================================================= */
/* 15 — GOLD CINEMATIC SCROLL INDICATOR                     */
/* ========================================================= */

.ars-scroll-line{

    position:
        fixed;

    right:
        24px;

    top:
        50%;

    width:
        2px;

    height:
        100px;

    transform:
        translateY(-50%);

    z-index:
        100;

    pointer-events:
        none;

    background:

        linear-gradient(
            180deg,
            transparent,
            var(--ars-gold-light),
            transparent
        );

    opacity:
        .65;

    animation:

        arsScrollGlow
        2.5s
        ease-in-out
        infinite;

}


@keyframes arsScrollGlow{

    0%,
    100%{

        opacity:
            .30;

        box-shadow:
            0
            0
            5px
            rgba(230,199,122,.15);

    }

    50%{

        opacity:
            1;

        box-shadow:
            0
            0
            22px
            rgba(230,199,122,.70);

    }

}


/* ========================================================= */
/* 16 — UNIVERSAL FOCUS                                     */
/* ========================================================= */

a:focus-visible,
button:focus-visible{

    outline:

        2px
        solid
        var(--ars-gold-light);

    outline-offset:
        5px;

}


/* ========================================================= */
/* 17 — RESPONSIVE DNA                                      */
/* ========================================================= */

@media (max-width:1024px){

    .container{

        width:
            90%;

    }

    section{

        padding:
            100px 0;

    }

}


@media (max-width:768px){

    .container{

        width:
            90%;

    }

    section{

        padding:
            80px 0;

    }

    .section-header{

        margin-bottom:
            50px;

    }

    .section-header h2{

        font-size:

            clamp(
                1.8rem,
                8vw,
                3rem
            );

    }

    .btn-primary,
    .btn-secondary{

        width:
            100%;

    }

}


@media (max-width:480px){

    .container{

        width:
            92%;

    }

    section{

        padding:
            70px 0;

    }

    .section-label{

        font-size:
            .62rem;

        letter-spacing:
            .12em;

    }

}


/* ========================================================= */
/* 18 — MOBILE OVERFLOW PROTECTION                          */
/* ========================================================= */

@media (max-width:768px){

    html,
    body{

        width:
            100%;

        max-width:
            100%;

        overflow-x:
            hidden;

    }

    .ars-glass{

        max-width:
            100%;

        min-width:
            0;

    }

}


/* ========================================================= */
/* 19 — REDUCED MOTION                                      */
/* ========================================================= */

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

    *,
    *::before,
    *::after{

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        scroll-behavior:
            auto !important;

        transition-duration:
            .01ms !important;

    }

}
/* ========================================================= */
/* ARS COLLECTION — PREMIUM 3D DIGITAL AUTOMOTIVE UNIVERSE */
/* FILE: ars-collection.css                                  */
/* VERSION: ARS COLLECTION V1 — FOUNDATION                   */
/* ========================================================= */


/* ========================================================= */
/* 01. ARS COLLECTION — GLOBAL FOUNDATION                    */
/* ========================================================= */

.ars-collection-page{

    --ars-black:#050607;
    --ars-black-deep:#020304;
    --ars-black-soft:#0a0c0f;

    --ars-white:#f5f3ee;
    --ars-white-soft:rgba(245,243,238,.72);
    --ars-white-muted:rgba(245,243,238,.48);

    --ars-gold:#c49a55;
    --ars-gold-light:#e4c27d;
    --ars-gold-deep:#8e6a34;

    --ars-glass:rgba(255,255,255,.055);
    --ars-glass-strong:rgba(255,255,255,.085);
    --ars-glass-border:rgba(255,255,255,.14);

    --ars-line:rgba(196,154,85,.42);

    --ars-shadow:
        0 30px 90px rgba(0,0,0,.48);

    --ars-shadow-deep:
        0 50px 140px rgba(0,0,0,.72);

    --ars-radius-sm:12px;
    --ars-radius-md:20px;
    --ars-radius-lg:30px;
    --ars-radius-xl:42px;

    --ars-container:1440px;

    --ars-ease:cubic-bezier(.22,1,.36,1);
    --ars-ease-soft:cubic-bezier(.16,1,.3,1);

    position:relative;

    width:100%;
    min-height:100vh;

    overflow:hidden;

    color:var(--ars-white);

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(196,154,85,.10),
            transparent 32%
        ),
        linear-gradient(
            180deg,
            var(--ars-black-deep) 0%,
            var(--ars-black) 48%,
            #07090b 100%
        );

    isolation:isolate;

}


/* ========================================================= */
/* 01.1 — GLOBAL BOX MODEL                                  */
/* ========================================================= */

.ars-collection-page *,
.ars-collection-page *::before,
.ars-collection-page *::after{

    box-sizing:border-box;

}


/* ========================================================= */
/* 01.2 — GLOBAL MEDIA                                      */
/* ========================================================= */

.ars-collection-page img,
.ars-collection-page video,
.ars-collection-page canvas{

    display:block;

    max-width:100%;

}


/* ========================================================= */
/* 01.3 — GLOBAL LINKS                                      */
/* ========================================================= */

.ars-collection-page a{

    color:inherit;

    text-decoration:none;

}


/* ========================================================= */
/* 01.4 — GLOBAL BUTTONS                                    */
/* ========================================================= */

.ars-collection-page button{

    font:inherit;

    color:inherit;

    border:0;

    outline:0;

    cursor:pointer;

}


/* ========================================================= */
/* 02. ARS COLLECTION — CONTAINER SYSTEM                    */
/* ========================================================= */

.ars-collection-page .container{

    position:relative;

    width:min(
        calc(100% - 80px),
        var(--ars-container)
    );

    margin-inline:auto;

    z-index:5;

}


/* ========================================================= */
/* 02.1 — SECTION BASE                                      */
/* ========================================================= */

.ars-collection-page section{

    position:relative;

    width:100%;

    isolation:isolate;

}


/* ========================================================= */
/* 02.2 — SECTION SPACING                                   */
/* ========================================================= */

.ars-collection-page
.featured-collection,
.ars-collection-page
.ars-products,
.ars-collection-page
.ars-projects,
.ars-collection-page
.design-studio,
.ars-collection-page
.future-vision,
.ars-collection-page
.signature-collection,
.ars-collection-page
.collection-hub,
.ars-collection-page
.collection-gallery,
.ars-collection-page
.ars-experience,
.ars-collection-page
.collection-final{

    padding:
        150px
        0;

}


/* ========================================================= */
/* 03. ARS COLLECTION — GLOBAL BACKGROUND ATMOSPHERE         */
/* ========================================================= */

.ars-collection-page::before{

    content:"";

    position:fixed;

    inset:0;

    pointer-events:none;

    z-index:-3;

    background:

        radial-gradient(
            circle at 12% 18%,
            rgba(196,154,85,.055),
            transparent 24%
        ),

        radial-gradient(
            circle at 88% 38%,
            rgba(255,255,255,.025),
            transparent 26%
        ),

        radial-gradient(
            circle at 50% 90%,
            rgba(196,154,85,.045),
            transparent 30%
        );

}


/* ========================================================= */
/* 03.1 — ATMOSPHERIC GRID                                  */
/* ========================================================= */

.ars-collection-page::after{

    content:"";

    position:fixed;

    inset:0;

    pointer-events:none;

    z-index:-2;

    opacity:.12;

    background-image:

        linear-gradient(
            rgba(255,255,255,.025) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,.025) 1px,
            transparent 1px
        );

    background-size:
        80px 80px;

    mask-image:
        linear-gradient(
            to bottom,
            black,
            transparent 70%
        );

}


/* ========================================================= */
/* 04. ARS COLLECTION — TYPOGRAPHY SYSTEM                   */
/* ========================================================= */

.ars-collection-page
.section-heading{

    position:relative;

    max-width:900px;

    margin:
        0
        auto
        80px;

    text-align:center;

}


/* ========================================================= */
/* 04.1 — SECTION LABEL                                    */
/* ========================================================= */

.ars-collection-page
.section-label{

    display:inline-flex;

    align-items:center;

    gap:14px;

    margin-bottom:22px;

    color:var(--ars-gold-light);

    font-size:
        clamp(
            .65rem,
            .6vw,
            .82rem
        );

    font-weight:600;

    letter-spacing:
        .32em;

    text-transform:
        uppercase;

}


/* ========================================================= */
/* 04.2 — SECTION LABEL LINE                               */
/* ========================================================= */

.ars-collection-page
.section-label::before,
.ars-collection-page
.section-label::after{

    content:"";

    width:34px;

    height:1px;

    background:

        linear-gradient(
            90deg,
            transparent,
            var(--ars-gold)
        );

}


.ars-collection-page
.section-label::after{

    transform:
        rotate(180deg);

}


/* ========================================================= */
/* 04.3 — SECTION HEADING                                  */
/* ========================================================= */

.ars-collection-page
.section-heading h2{

    margin:0;

    color:var(--ars-white);

    font-size:
        clamp(
            2.4rem,
            5vw,
            5.8rem
        );

    font-weight:500;

    line-height:.98;

    letter-spacing:
        -.045em;

}


/* ========================================================= */
/* 04.4 — SECTION DESCRIPTION                              */
/* ========================================================= */

.ars-collection-page
.section-heading p{

    max-width:720px;

    margin:
        28px
        auto
        0;

    color:
        var(--ars-white-soft);

    font-size:
        clamp(
            .95rem,
            1.2vw,
            1.15rem
        );

    line-height:
        1.9;

}


/* ========================================================= */
/* 05. ARS COLLECTION — GLASSMORPHISM SYSTEM               */
/* ========================================================= */

.ars-collection-page
.ars-glass{

    position:relative;

    background:

        linear-gradient(
            135deg,
            rgba(255,255,255,.095),
            rgba(255,255,255,.025)
        );

    border:
        1px solid
        var(--ars-glass-border);

    box-shadow:
        var(--ars-shadow);

    backdrop-filter:
        blur(24px)
        saturate(135%);

    -webkit-backdrop-filter:
        blur(24px)
        saturate(135%);

}


/* ========================================================= */
/* 05.1 — GLASS INNER LIGHT                                */
/* ========================================================= */

.ars-collection-page
.ars-glass::before{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    border-radius:
        inherit;

    background:

        linear-gradient(
            120deg,
            rgba(255,255,255,.11),
            transparent 24%,
            transparent 72%,
            rgba(196,154,85,.045)
        );

    opacity:.65;

}


/* ========================================================= */
/* 05.2 — GLASS EDGE                                        */
/* ========================================================= */

.ars-collection-page
.ars-glass::after{

    content:"";

    position:absolute;

    inset:1px;

    pointer-events:none;

    border-radius:
        inherit;

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

}


/* ========================================================= */
/* 06. ARS COLLECTION — BUTTON SYSTEM                      */
/* ========================================================= */

.ars-collection-page
.btn-primary,
.ars-collection-page
.btn-secondary,
.ars-collection-page
.btn-outline{

    position:relative;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-height:54px;

    padding:
        0
        28px;

    overflow:hidden;

    border-radius:
        999px;

    font-size:
        .78rem;

    font-weight:600;

    letter-spacing:
        .14em;

    text-transform:
        uppercase;

    transition:

        transform
        .5s
        var(--ars-ease),

        color
        .5s
        var(--ars-ease),

        background
        .5s
        var(--ars-ease),

        border-color
        .5s
        var(--ars-ease);

}


/* ========================================================= */
/* 06.1 — BUTTON LIGHT SWEEP                               */
/* ========================================================= */

.ars-collection-page
.btn-primary::before,
.ars-collection-page
.btn-secondary::before,
.ars-collection-page
.btn-outline::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:80%;

    height:100%;

    transform:
        skewX(-22deg);

    background:

        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.25),
            transparent
        );

    transition:
        left
        .8s
        var(--ars-ease);

}


/* ========================================================= */
/* 06.2 — BUTTON HOVER                                     */
/* ========================================================= */

.ars-collection-page
.btn-primary:hover::before,
.ars-collection-page
.btn-secondary:hover::before,
.ars-collection-page
.btn-outline:hover::before{

    left:140%;

}


.ars-collection-page
.btn-primary:hover,
.ars-collection-page
.btn-secondary:hover,
.ars-collection-page
.btn-outline:hover{

    transform:
        translateY(-4px);

}


/* ========================================================= */
/* 06.3 — PRIMARY BUTTON                                   */
/* ========================================================= */

.ars-collection-page
.btn-primary{

    color:
        #090807;

    background:

        linear-gradient(
            135deg,
            var(--ars-gold-light),
            var(--ars-gold),
            var(--ars-gold-deep)
        );

    box-shadow:

        0
        12px
        40px
        rgba(196,154,85,.18);

}


/* ========================================================= */
/* 06.4 — SECONDARY BUTTON                                 */
/* ========================================================= */

.ars-collection-page
.btn-secondary{

    color:
        var(--ars-white);

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

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

}


/* ========================================================= */
/* 06.5 — OUTLINE BUTTON                                   */
/* ========================================================= */

.ars-collection-page
.btn-outline{

    color:
        var(--ars-gold-light);

    background:
        transparent;

    border:
        1px solid
        rgba(196,154,85,.45);

}


/* ========================================================= */
/* 07. ARS COLLECTION — GLOBAL RESPONSIVE FOUNDATION        */
/* ========================================================= */

@media
(max-width:1100px){

    .ars-collection-page
    .container{

        width:
            min(
                calc(100% - 48px),
                var(--ars-container)
            );

    }

    .ars-collection-page
    section{

        padding-top:
            110px;

        padding-bottom:
            110px;

    }

}


/* ========================================================= */
/* 07.1 — TABLET                                          */
/* ========================================================= */

@media
(max-width:768px){

    .ars-collection-page
    .container{

        width:
            calc(100% - 36px);

    }

    .ars-collection-page
    .section-heading{

        margin-bottom:
            55px;

    }

    .ars-collection-page
    .section-heading h2{

        font-size:
            clamp(
                2rem,
                10vw,
                3.6rem
            );

    }

    .ars-collection-page
    .section-heading p{

        line-height:
            1.75;

    }

}


/* ========================================================= */
/* 07.2 — MOBILE                                           */
/* ========================================================= */

@media
(max-width:480px){

    .ars-collection-page
    .container{

        width:
            calc(100% - 28px);

    }

    .ars-collection-page
    section{

        padding-top:
            80px;

        padding-bottom:
            80px;

    }

    .ars-collection-page
    .section-label{

        letter-spacing:
            .22em;

    }

    .ars-collection-page
    .btn-primary,
    .ars-collection-page
    .btn-secondary,
    .ars-collection-page
    .btn-outline{

        width:100%;

    }

}


/* ========================================================= */
/* 08. ARS COLLECTION — REDUCED MOTION                     */
/* ========================================================= */

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

    .ars-collection-page *,
    .ars-collection-page *::before,
    .ars-collection-page *::after{

        animation-duration:
            .01ms
            !important;

        animation-iteration-count:
            1
            !important;

        scroll-behavior:
            auto
            !important;

        transition-duration:
            .01ms
            !important;

    }

}
/* ========================================================= */
/* 09. ARS COLLECTION — PREMIUM 3D HERO SYSTEM             */
/* ========================================================= */


/* ========================================================= */
/* 09.1 — HERO ROOT                                        */
/* ========================================================= */

.ars-collection-page
.collection-hero{

    position:relative;

    min-height:
        100svh;

    height:
        max(
            900px,
            100svh
        );

    display:flex;

    align-items:center;

    overflow:hidden;

    background:

        radial-gradient(
            circle at 50% 48%,
            rgba(196,154,85,.18),
            transparent 22%
        ),

        radial-gradient(
            circle at 50% 70%,
            rgba(255,255,255,.035),
            transparent 38%
        ),

        linear-gradient(
            180deg,
            #020304 0%,
            #050607 55%,
            #020304 100%
        );

}


/* ========================================================= */
/* 09.2 — HERO BACKGROUND                                   */
/* ========================================================= */

.ars-collection-page
.collection-background{

    position:absolute;

    inset:0;

    z-index:0;

    pointer-events:none;

    background:

        radial-gradient(
            ellipse at 50% 50%,
            transparent 0%,
            rgba(0,0,0,.18) 48%,
            rgba(0,0,0,.72) 100%
        );

}


/* ========================================================= */
/* 09.3 — HERO ATMOSPHERIC LIGHT                           */
/* ========================================================= */

.ars-collection-page
.collection-background::before{

    content:"";

    position:absolute;

    top:
        5%;

    left:
        50%;

    width:
        70vw;

    height:
        70vw;

    transform:
        translateX(-50%);

    border-radius:
        50%;

    background:

        radial-gradient(
            circle,
            rgba(196,154,85,.075),
            transparent 62%
        );

    filter:
        blur(20px);

    animation:
        arsCollectionHeroBreath
        8s
        ease-in-out
        infinite;

}


/* ========================================================= */
/* 09.4 — HERO GRID                                         */
/* ========================================================= */

.ars-collection-page
.collection-background::after{

    content:"";

    position:absolute;

    inset:0;

    opacity:
        .28;

    background-image:

        linear-gradient(
            rgba(196,154,85,.035)
            1px,
            transparent
            1px
        ),

        linear-gradient(
            90deg,
            rgba(196,154,85,.035)
            1px,
            transparent
            1px
        );

    background-size:
        100px
        100px;

    mask-image:

        radial-gradient(
            ellipse at center,
            black 0%,
            transparent 72%
        );

}


/* ========================================================= */
/* 09.5 — HERO OVERLAY                                     */
/* ========================================================= */

.ars-collection-page
.collection-overlay{

    position:absolute;

    inset:0;

    z-index:2;

    pointer-events:none;

    background:

        linear-gradient(
            90deg,
            rgba(2,3,4,.96) 0%,
            rgba(2,3,4,.68) 17%,
            transparent 42%,
            transparent 70%,
            rgba(2,3,4,.72) 100%
        ),

        linear-gradient(
            180deg,
            rgba(2,3,4,.88) 0%,
            transparent 24%,
            transparent 72%,
            rgba(2,3,4,.95) 100%
        );

}


/* ========================================================= */
/* 10. ARS COLLECTION — HERO CONTAINER                     */
/* ========================================================= */

.ars-collection-page
.collection-hero
.container{

    position:relative;

    z-index:5;

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

    height:
        100%;

}


/* ========================================================= */
/* 10.1 — HERO WRAPPER                                     */
/* ========================================================= */

.ars-collection-page
.collection-wrapper{

    position:relative;

    width:100%;

    height:100%;

    display:flex;

    align-items:center;

}


/* ========================================================= */
/* 10.2 — HERO CONTENT                                    */
/* ========================================================= */

.ars-collection-page
.collection-content{

    position:relative;

    z-index:15;

    width:
        min(
            500px,
            36vw
        );

    margin-top:
        30px;

    animation:

        arsCollectionHeroContentIn
        1.4s
        var(--ars-ease)
        both;

}


/* ========================================================= */
/* 10.3 — HERO SECTION LABEL                              */
/* ========================================================= */

.ars-collection-page
.collection-content
.section-label{

    position:relative;

    animation:

        arsCollectionLabelIn
        1s
        .2s
        var(--ars-ease)
        both;

}


/* ========================================================= */
/* 10.4 — HERO TITLE                                      */
/* ========================================================= */

.ars-collection-page
.collection-content
h1{

    margin:
        12px
        0
        26px;

    max-width:
        650px;

    color:
        var(--ars-white);

    font-size:

        clamp(
            3.8rem,
            6.3vw,
            7.8rem
        );

    font-weight:
        500;

    line-height:
        .88;

    letter-spacing:
        -.065em;

    text-wrap:
        balance;

    text-shadow:

        0
        10px
        60px
        rgba(0,0,0,.65);

    animation:

        arsCollectionTitleReveal
        1.3s
        .35s
        var(--ars-ease)
        both;

}


/* ========================================================= */
/* 10.5 — HERO DESCRIPTION                                */
/* ========================================================= */

.ars-collection-page
.collection-content
> p{

    max-width:
        470px;

    margin:
        0
        0
        34px;

    color:
        var(--ars-white-soft);

    font-size:
        1rem;

    line-height:
        1.85;

    animation:

        arsCollectionParagraphReveal
        1.2s
        .55s
        var(--ars-ease)
        both;

}


/* ========================================================= */
/* 10.6 — HERO BUTTONS                                    */
/* ========================================================= */

.ars-collection-page
.collection-buttons{

    display:flex;

    flex-wrap:wrap;

    gap:
        12px;

    animation:

        arsCollectionButtonsReveal
        1.2s
        .72s
        var(--ars-ease)
        both;

}


/* ========================================================= */
/* 11. ARS COLLECTION — 3D VEHICLE STAGE                  */
/* ========================================================= */

.ars-collection-page
.collection-showcase{

    position:absolute;

    top:
        50%;

    right:
        -4%;

    width:
        78%;

    height:
        88%;

    transform:
        translateY(-50%);

    z-index:8;

    perspective:
        1800px;

}


/* ========================================================= */
/* 11.1 — 3D HERO DISPLAY                                 */
/* ========================================================= */

.ars-collection-page
.hero-display{

    position:absolute;

    top:
        50%;

    left:
        50%;

    width:
        min(
            1000px,
            70vw
        );

    height:
        min(
            700px,
            58vw
        );

    transform:

        translate(
            -50%,
            -50%
        )

        rotateX(
            1deg
        );

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:visible;

    border:
        0;

    background:
        transparent;

    box-shadow:
        none;

    backdrop-filter:
        none;

    -webkit-backdrop-filter:
        none;

    animation:

        arsCollectionVehicleStageIn
        1.8s
        .2s
        var(--ars-ease)
        both;

}


/* ========================================================= */
/* 11.2 — HERO VEHICLE IMAGE / 3D CANVAS                  */
/* ========================================================= */

.ars-collection-page
.hero-display
img,
.ars-collection-page
.hero-display
canvas{

    position:relative;

    width:
        100%;

    height:
        100%;

    object-fit:
        contain;

    transform:

        translateZ(
            80px
        )

        scale(
            1.08
        );

    filter:

        drop-shadow(
            0
            35px
            55px
            rgba(0,0,0,.72)
        )

        drop-shadow(
            0
            0
            45px
            rgba(196,154,85,.10)
        );

    animation:

        arsCollectionVehicleFloat
        7s
        ease-in-out
        infinite;

}


/* ========================================================= */
/* 11.3 — VEHICLE FLOOR LIGHT                             */
/* ========================================================= */

.ars-collection-page
.hero-display::before{

    content:"";

    position:absolute;

    left:
        50%;

    bottom:
        11%;

    width:
        70%;

    height:
        12%;

    transform:
        translateX(-50%);

    border-radius:
        50%;

    background:

        radial-gradient(
            ellipse,
            rgba(196,154,85,.38),
            rgba(196,154,85,.10)
            38%,
            transparent
            72%
        );

    filter:
        blur(24px);

    animation:

        arsCollectionFloorPulse
        5s
        ease-in-out
        infinite;

}


/* ========================================================= */
/* 11.4 — VEHICLE LIGHT TRAIL                             */
/* ========================================================= */

.ars-collection-page
.hero-display::after{

    content:"";

    position:absolute;

    left:
        12%;

    right:
        12%;

    bottom:
        16%;

    height:
        1px;

    background:

        linear-gradient(
            90deg,
            transparent,
            rgba(196,154,85,.0),
            rgba(196,154,85,.65),
            rgba(255,255,255,.28),
            rgba(196,154,85,.65),
            transparent
        );

    filter:
        blur(.5px);

    opacity:
        .65;

    animation:

        arsCollectionEnergySweep
        4.5s
        ease-in-out
        infinite;

}


/* ========================================================= */
/* 12. ARS COLLECTION — FLOATING GLASS CARDS               */
/* ========================================================= */

.ars-collection-page
.floating-card{

    position:absolute;

    z-index:25;

    display:flex;

    align-items:center;

    min-width:
        210px;

    min-height:
        58px;

    padding:
        0
        22px;

    color:
        var(--ars-white-soft);

    font-size:
        .72rem;

    font-weight:
        600;

    letter-spacing:
        .13em;

    text-transform:
        uppercase;

    border-radius:
        999px;

    overflow:hidden;

    cursor:pointer;

    transition:

        transform
        .5s
        var(--ars-ease),

        border-color
        .5s
        var(--ars-ease),

        background
        .5s
        var(--ars-ease);

}


/* ========================================================= */
/* 12.1 — FLOATING CARD INDICATOR                          */
/* ========================================================= */

.ars-collection-page
.floating-card::before{

    content:"";

    width:
        7px;

    height:
        7px;

    margin-right:
        12px;

    border-radius:
        50%;

    background:
        var(--ars-gold-light);

    box-shadow:

        0
        0
        0
        0
        rgba(196,154,85,.45);

    animation:

        arsCollectionHotspotPulse
        2.4s
        infinite;

}


/* ========================================================= */
/* 12.2 — FLOATING CARD HOVER                             */
/* ========================================================= */

.ars-collection-page
.floating-card:hover{

    transform:
        translateY(-8px)
        scale(1.03);

    background:

        linear-gradient(
            135deg,
            rgba(196,154,85,.16),
            rgba(255,255,255,.045)
        );

    border-color:
        rgba(196,154,85,.42);

}


/* ========================================================= */
/* 12.3 — FLOATING CARD 01                                */
/* ========================================================= */

.ars-collection-page
.floating-1{

    top:
        20%;

    right:
        9%;

    animation:

        arsCollectionFloatCardOne
        6s
        ease-in-out
        infinite;

}


/* ========================================================= */
/* 12.4 — FLOATING CARD 02                                */
/* ========================================================= */

.ars-collection-page
.floating-2{

    top:
        52%;

    right:
        1%;

    animation:

        arsCollectionFloatCardTwo
        7s
        ease-in-out
        infinite;

}


/* ========================================================= */
/* 12.5 — FLOATING CARD 03                                */
/* ========================================================= */

.ars-collection-page
.floating-3{

    bottom:
        18%;

    right:
        14%;

    animation:

        arsCollectionFloatCardThree
        6.5s
        ease-in-out
        infinite;

}


/* ========================================================= */
/* 13. ARS COLLECTION — HERO STATS                        */
/* ========================================================= */

.ars-collection-page
.collection-stats{

    display:grid;

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

    gap:
        10px;

    margin-top:
        48px;

    max-width:
        620px;

    animation:

        arsCollectionStatsReveal
        1.2s
        .9s
        var(--ars-ease)
        both;

}


/* ========================================================= */
/* 13.1 — STAT BOX                                        */
/* ========================================================= */

.ars-collection-page
.stat-box{

    min-height:
        92px;

    padding:
        18px;

    border-radius:
        var(--ars-radius-sm);

    transition:

        transform
        .5s
        var(--ars-ease),

        border-color
        .5s
        var(--ars-ease);

}


/* ========================================================= */
/* 13.2 — STAT HOVER                                      */
/* ========================================================= */

.ars-collection-page
.stat-box:hover{

    transform:
        translateY(-6px);

    border-color:
        rgba(196,154,85,.35);

}


/* ========================================================= */
/* 13.3 — STAT TITLE                                      */
/* ========================================================= */

.ars-collection-page
.stat-box
h3{

    margin:
        0
        0
        8px;

    color:
        var(--ars-white);

    font-size:
        .76rem;

    font-weight:
        600;

    letter-spacing:
        .08em;

    text-transform:
        uppercase;

}


/* ========================================================= */
/* 13.4 — STAT SUBTITLE                                   */
/* ========================================================= */

.ars-collection-page
.stat-box
span{

    color:
        var(--ars-white-muted);

    font-size:
        .68rem;

}


/* ========================================================= */
/* 14. ARS COLLECTION — HERO ANIMATION KEYFRAMES           */
/* ========================================================= */

@keyframes arsCollectionHeroBreath{

    0%,
    100%{

        transform:
            translateX(-50%)
            scale(.92);

        opacity:
            .55;

    }

    50%{

        transform:
            translateX(-50%)
            scale(1.08);

        opacity:
            1;

    }

}


/* ========================================================= */
/* 14.1 — HERO CONTENT IN                                 */
/* ========================================================= */

@keyframes arsCollectionHeroContentIn{

    from{

        opacity:0;

        transform:
            translate3d(
                -70px,
                30px,
                0
            );

    }

    to{

        opacity:1;

        transform:
            translate3d(
                0,
                0,
                0
            );

    }

}


/* ========================================================= */
/* 14.2 — LABEL IN                                        */
/* ========================================================= */

@keyframes arsCollectionLabelIn{

    from{

        opacity:0;

        transform:
            translateY(
                20px
            );

    }

    to{

        opacity:1;

        transform:
            translateY(
                0
            );

    }

}



/* ========================================================= */
/* 14.3 — TITLE REVEAL                                    */
/* ========================================================= */

@keyframes arsCollectionTitleReveal{

    from{

        opacity:0;

        clip-path:
            inset(
                0
                0
                100%
                0
            );

        transform:
            translateY(
                40px
            );

    }

    to{

        opacity:1;

        clip-path:
            inset(
                0
                0
                0
                0
            );

        transform:
            translateY(
                0
            );

    }

}


/* ========================================================= */
/* 14.4 — PARAGRAPH REVEAL                                */
/* ========================================================= */

@keyframes arsCollectionParagraphReveal{

    from{

        opacity:0;

        transform:
            translateY(
                25px
            );

    }

    to{

        opacity:1;

        transform:
            translateY(
                0
            );

    }

}


/* ========================================================= */
/* 14.5 — BUTTON REVEAL                                   */
/* ========================================================= */

@keyframes arsCollectionButtonsReveal{

    from{

        opacity:0;

        transform:
            translateY(
                25px
            );

    }

    to{

        opacity:1;

        transform:
            translateY(
                0
            );

    }

}


/* ========================================================= */
/* 14.6 — VEHICLE STAGE IN                               */
/* ========================================================= */

@keyframes arsCollectionVehicleStageIn{

    from{

        opacity:0;

        transform:

            translate(
                -50%,
                -50%
            )

            scale(.88)

            rotateX(
                8deg
            );

    }

    to{

        opacity:1;

        transform:

            translate(
                -50%,
                -50%
            )

            scale(1)

            rotateX(
                1deg
            );

    }

}


/* ========================================================= */
/* 14.7 — VEHICLE FLOAT                                  */
/* ========================================================= */

@keyframes arsCollectionVehicleFloat{

    0%,
    100%{

        transform:

            translateZ(
                80px
            )

            translateY(
                0
            )

            scale(
                1.08
            );

    }

    50%{

        transform:

            translateZ(
                80px
            )

            translateY(
                -14px
            )

            scale(
                1.095
            );

    }

}


/* ========================================================= */
/* 14.8 — FLOOR PULSE                                    */
/* ========================================================= */

@keyframes arsCollectionFloorPulse{

    0%,
    100%{

        transform:
            translateX(-50%)
            scaleX(.88);

        opacity:
            .45;

    }

    50%{

        transform:
            translateX(-50%)
            scaleX(1.08);

        opacity:
            .85;

    }

}


/* ========================================================= */
/* 14.9 — ENERGY SWEEP                                   */
/* ========================================================= */

@keyframes arsCollectionEnergySweep{

    0%{

        opacity:
            .1;

        transform:
            scaleX(.35);

    }

    50%{

        opacity:
            .85;

        transform:
            scaleX(1);

    }

    100%{

        opacity:
            .1;

        transform:
            scaleX(.35);

    }

}


/* ========================================================= */
/* 14.10 — HOTSPOT PULSE                                 */
/* ========================================================= */

@keyframes arsCollectionHotspotPulse{

    0%{

        box-shadow:

            0
            0
            0
            0
            rgba(196,154,85,.45);

    }

    70%{

        box-shadow:

            0
            0
            0
            9px
            rgba(196,154,85,0);

    }

    100%{

        box-shadow:

            0
            0
            0
            0
            rgba(196,154,85,0);

    }

}


/* ========================================================= */
/* 14.11 — FLOAT CARD ONE                                */
/* ========================================================= */

@keyframes arsCollectionFloatCardOne{

    0%,
    100%{

        transform:
            translate3d(
                0,
                0,
                0
            );

    }

    50%{

        transform:
            translate3d(
                -8px,
                -14px,
                20px
            );

    }

}


/* ========================================================= */
/* 14.12 — FLOAT CARD TWO                                */
/* ========================================================= */

@keyframes arsCollectionFloatCardTwo{

    0%,
    100%{

        transform:
            translate3d(
                0,
                0,
                0
            );

    }

    50%{

        transform:
            translate3d(
                8px,
                12px,
                20px
            );

    }

}


/* ========================================================= */
/* 14.13 — FLOAT CARD THREE                              */
/* ========================================================= */

@keyframes arsCollectionFloatCardThree{

    0%,
    100%{

        transform:
            translate3d(
                0,
                0,
                0
            );

    }

    50%{

        transform:
            translate3d(
                -12px,
                8px,
                20px
            );

    }

}


/* ========================================================= */
/* 14.14 — STATS REVEAL                                  */
/* ========================================================= */

@keyframes arsCollectionStatsReveal{

    from{

        opacity:0;

        transform:
            translateY(
                35px
            );

    }

    to{

        opacity:1;

        transform:
            translateY(
                0
            );

    }

}


/* ========================================================= */
/* 15. ARS COLLECTION — HERO RESPONSIVE                   */
/* ========================================================= */

@media
(max-width:1100px){

    .ars-collection-page
    .collection-hero{

        min-height:
            1050px;

        height:
            auto;

        padding:
            120px
            0
            80px;

    }

    .ars-collection-page
    .collection-wrapper{

        flex-direction:
            column;

        justify-content:
            center;

    }

    .ars-collection-page
    .collection-content{

        width:
            100%;

        max-width:
            760px;

        text-align:
            center;

        margin:
            0
            auto;

    }

    .ars-collection-page
    .collection-content
    > p{

        margin-inline:
            auto;

    }

    .ars-collection-page
    .collection-buttons{

        justify-content:
            center;

    }

    .ars-collection-page
    .collection-stats{

        margin-inline:
            auto;

    }

    .ars-collection-page
    .collection-showcase{

        position:
            relative;

        top:
            auto;

        right:
            auto;

        width:
            100%;

        height:
            580px;

        transform:
            none;

        margin-top:
            30px;

    }

}


/* ========================================================= */
/* 15.1 — TABLET HERO                                    */
/* ========================================================= */

@media
(max-width:768px){

    .ars-collection-page
    .collection-hero{

        min-height:
            1000px;

    }

    .ars-collection-page
    .collection-content
    h1{

        font-size:
            clamp(
                3rem,
                13vw,
                5.5rem
            );

    }

    .ars-collection-page
    .hero-display{

        width:
            110vw;

        height:
            520px;

    }

    .ars-collection-page
    .floating-card{

        min-width:
            auto;

        padding:
            0
            16px;

        font-size:
            .58rem;

    }

    .ars-collection-page
    .floating-1{

        top:
            12%;

        right:
            4%;

    }

    .ars-collection-page
    .floating-2{

        top:
            48%;

        right:
            0;

    }

    .ars-collection-page
    .floating-3{

        bottom:
            12%;

        right:
            6%;

    }

}


/* ========================================================= */
/* 15.2 — MOBILE HERO                                    */
/* ========================================================= */

@media
(max-width:480px){

    .ars-collection-page
    .collection-hero{

        min-height:
            920px;

        padding-top:
            90px;

    }

    .ars-collection-page
    .collection-content
    h1{

        font-size:
            clamp(
                2.8rem,
                15vw,
                4.4rem
            );

    }

    .ars-collection-page
    .collection-buttons{

        flex-direction:
            column;

    }

    .ars-collection-page
    .collection-stats{

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

        margin-top:
            35px;

    }

    .ars-collection-page
    .collection-showcase{

        height:
            470px;

        margin-top:
            0;

    }

    .ars-collection-page
    .hero-display{

        width:
            130vw;

        height:
            430px;

    }

    .ars-collection-page
    .floating-card{

        transform:
            scale(.82);

    }

    .ars-collection-page
    .floating-card:hover{

        transform:
            scale(.86)
            translateY(-5px);

    }

}


/* ========================================================= */
/* 15.3 — HERO REDUCED MOTION                             */
/* ========================================================= */

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

    .ars-collection-page
    .collection-background::before,
    .ars-collection-page
    .hero-display
    img,
    .ars-collection-page
    .hero-display
    canvas,
    .ars-collection-page
    .hero-display::before,
    .ars-collection-page
    .hero-display::after,
    .ars-collection-page
    .floating-card,
    .ars-collection-page
    .floating-card::before{

        animation:
            none
            !important;

    }

}
/* ========================================================= */
/* 16. ARS COLLECTION — 3D VEHICLE HOTSPOT SYSTEM           */
/* ========================================================= */


/* ========================================================= */
/* 16.1 — HOTSPOT LAYER                                    */
/* ========================================================= */

.ars-collection-page
.vehicle-hotspot-layer{

    position:absolute;

    inset:0;

    z-index:30;

    pointer-events:none;

    transform-style:preserve-3d;

}


/* ========================================================= */
/* 16.2 — VEHICLE HOTSPOT                                 */
/* ========================================================= */

.ars-collection-page
.vehicle-hotspot{

    position:absolute;

    display:flex;

    align-items:center;

    justify-content:center;

    width:18px;

    height:18px;

    border-radius:50%;

    pointer-events:auto;

    cursor:pointer;

    background:

        radial-gradient(
            circle,
            #fff 0%,
            var(--ars-gold-light) 24%,
            var(--ars-gold) 48%,
            transparent 72%
        );

    box-shadow:

        0 0 0 1px
        rgba(255,255,255,.45),

        0 0 16px
        rgba(196,154,85,.75),

        0 0 42px
        rgba(196,154,85,.35);

    transform:

        translate(-50%,-50%);

    transition:

        transform
        .5s
        var(--ars-ease),

        filter
        .5s
        var(--ars-ease);

}


/* ========================================================= */
/* 16.3 — HOTSPOT OUTER RING                              */
/* ========================================================= */

.ars-collection-page
.vehicle-hotspot::before{

    content:"";

    position:absolute;

    inset:-10px;

    border:

        1px solid
        rgba(196,154,85,.55);

    border-radius:50%;

    animation:

        arsCollectionHotspotRing
        2.8s
        ease-out
        infinite;

}


/* ========================================================= */
/* 16.4 — HOTSPOT INNER CORE                              */
/* ========================================================= */

.ars-collection-page
.vehicle-hotspot::after{

    content:"";

    position:absolute;

    width:5px;

    height:5px;

    border-radius:50%;

    background:#fff;

    box-shadow:

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

}


/* ========================================================= */
/* 16.5 — HOTSPOT HOVER                                   */
/* ========================================================= */

.ars-collection-page
.vehicle-hotspot:hover{

    transform:

        translate(-50%,-50%)
        scale(1.45);

    filter:

        brightness(1.35);

}


/* ========================================================= */
/* 17. ARS COLLECTION — HOTSPOT POSITIONS                  */
/* ========================================================= */


/* ========================================================= */
/* 17.1 — FRONT DISPLAY                                   */
/* ========================================================= */

.ars-collection-page
.hotspot-display{

    top:43%;

    left:57%;

}


/* ========================================================= */
/* 17.2 — FRONT CAMERA                                    */
/* ========================================================= */

.ars-collection-page
.hotspot-front-camera{

    top:47%;

    left:39%;

}


/* ========================================================= */
/* 17.3 — SIDE CAMERA                                     */
/* ========================================================= */

.ars-collection-page
.hotspot-side-camera{

    top:50%;

    left:25%;

}


/* ========================================================= */
/* 17.4 — DIGITAL MIRROR                                  */
/* ========================================================= */

.ars-collection-page
.hotspot-mirror{

    top:44%;

    left:30%;

}


/* ========================================================= */
/* 17.5 — WHEEL / TPMS                                    */
/* ========================================================= */

.ars-collection-page
.hotspot-wheel{

    top:64%;

    left:28%;

}


/* ========================================================= */
/* 17.6 — ROOF SENSOR                                     */
/* ========================================================= */

.ars-collection-page
.hotspot-roof{

    top:30%;

    left:53%;

}


/* ========================================================= */
/* 17.7 — REAR DISPLAY                                    */
/* ========================================================= */

.ars-collection-page
.hotspot-rear-display{

    top:48%;

    left:75%;

}


/* ========================================================= */
/* 17.8 — INTERIOR / BRAIN                                */
/* ========================================================= */

.ars-collection-page
.hotspot-brain{

    top:46%;

    left:51%;

}


/* ========================================================= */
/* 18. ARS COLLECTION — ENERGY CONNECTION SYSTEM           */
/* ========================================================= */

.ars-collection-page
.vehicle-energy-lines{

    position:absolute;

    inset:0;

    z-index:20;

    width:100%;

    height:100%;

    pointer-events:none;

    overflow:visible;

}


/* ========================================================= */
/* 18.1 — ENERGY PATH                                     */
/* ========================================================= */

.ars-collection-page
.energy-path{

    fill:none;

    stroke:

        url(
            "#arsGoldEnergy"
        );

    stroke-width:1.5;

    stroke-linecap:round;

    stroke-dasharray:
        8
        12;

    filter:

        drop-shadow(
            0
            0
            6px
            rgba(196,154,85,.55)
        );

    animation:

        arsCollectionEnergyFlow
        3.5s
        linear
        infinite;

}


/* ========================================================= */
/* 18.2 — ENERGY PATH SECONDARY                            */
/* ========================================================= */

.ars-collection-page
.energy-path-secondary{

    fill:none;

    stroke:

        rgba(255,255,255,.16);

    stroke-width:1;

    stroke-dasharray:
        2
        14;

    animation:

        arsCollectionEnergySecondary
        5s
        linear
        infinite;

}


/* ========================================================= */
/* 18.3 — ENERGY NODE                                     */
/* ========================================================= */

.ars-collection-page
.energy-node{

    fill:

        var(--ars-gold-light);

    filter:

        drop-shadow(
            0
            0
            7px
            rgba(196,154,85,.8)
        );

    animation:

        arsCollectionNodePulse
        2s
        ease-in-out
        infinite;

}


/* ========================================================= */
/* 19. ARS COLLECTION — INTERACTIVE FEATURE CARDS          */
/* ========================================================= */

.ars-collection-page
.collection-feature-card{

    position:absolute;

    z-index:35;

    width:
        280px;

    min-height:
        150px;

    padding:
        22px;

    border-radius:
        var(--ars-radius-md);

    opacity:0;

    visibility:hidden;

    transform:

        translateY(
            20px
        )
        scale(.94);

    pointer-events:none;

    transition:

        opacity
        .5s
        var(--ars-ease),

        visibility
        .5s
        var(--ars-ease),

        transform
        .5s
        var(--ars-ease);

}


/* ========================================================= */
/* 19.1 — FEATURE CARD ACTIVE                             */
/* ========================================================= */

.ars-collection-page
.collection-feature-card.is-active{

    opacity:1;

    visibility:visible;

    transform:

        translateY(0)
        scale(1);

    pointer-events:auto;

}


/* ========================================================= */
/* 19.2 — FEATURE CATEGORY                                */
/* ========================================================= */

.ars-collection-page
.collection-feature-card
.feature-category{

    display:block;

    margin-bottom:9px;

    color:

        var(--ars-gold-light);

    font-size:

        .62rem;

    font-weight:

        600;

    letter-spacing:

        .22em;

    text-transform:

        uppercase;

}


/* ========================================================= */
/* 19.3 — FEATURE TITLE                                   */
/* ========================================================= */

.ars-collection-page
.collection-feature-card
h3{

    margin:

        0
        0
        10px;

    font-size:

        1.15rem;

    font-weight:

        500;

}


/* ========================================================= */
/* 19.4 — FEATURE DESCRIPTION                             */
/* ========================================================= */

.ars-collection-page
.collection-feature-card
p{

    margin:0;

    color:

        var(--ars-white-muted);

    font-size:

        .78rem;

    line-height:

        1.7;

}


/* ========================================================= */
/* 19.5 — FEATURE CARD CTA                                */
/* ========================================================= */

.ars-collection-page
.collection-feature-card
a{

    display:inline-flex;

    margin-top:

        18px;

    color:

        var(--ars-gold-light);

    font-size:

        .68rem;

    font-weight:

        600;

    letter-spacing:

        .12em;

    text-transform:

        uppercase;

}


/* ========================================================= */
/* 20. ARS COLLECTION — VEHICLE INTERACTION STATES         */
/* ========================================================= */

.ars-collection-page
.collection-showcase.is-interacting
.hero-display
img,
.ars-collection-page
.collection-showcase.is-interacting
.hero-display
canvas{

    filter:

        drop-shadow(
            0
            40px
            70px
            rgba(0,0,0,.78)
        )

        drop-shadow(
            0
            0
            70px
            rgba(196,154,85,.20)
        );

}


/* ========================================================= */
/* 20.1 — VEHICLE FOCUS MODE                              */
/* ========================================================= */

.ars-collection-page
.collection-showcase.is-focused{

    z-index:50;

}


/* ========================================================= */
/* 20.2 — VEHICLE FOCUS DIM                               */
/* ========================================================= */

.ars-collection-page
.collection-showcase.is-focused
.floating-card:not(.is-active){

    opacity:.28;

    filter:

        blur(2px);

}


/* ========================================================= */
/* 21. ARS COLLECTION — PREMIUM ENERGY ANIMATION           */
/* ========================================================= */

@keyframes arsCollectionEnergyFlow{

    0%{

        stroke-dashoffset:

            0;

        opacity:

            .25;

    }

    50%{

        opacity:

            1;

    }

    100%{

        stroke-dashoffset:

            -80;

        opacity:

            .25;

    }

}


/* ========================================================= */
/* 21.1 — SECONDARY ENERGY FLOW                           */
/* ========================================================= */

@keyframes arsCollectionEnergySecondary{

    0%{

        stroke-dashoffset:

            0;

    }

    100%{

        stroke-dashoffset:

            120;

    }

}


/* ========================================================= */
/* 21.2 — NODE PULSE                                      */
/* ========================================================= */

@keyframes arsCollectionNodePulse{

    0%,
    100%{

        opacity:

            .45;

        transform:

            scale(.75);

    }

    50%{

        opacity:

            1;

        transform:

            scale(1.25);

    }

}


/* ========================================================= */
/* 21.3 — HOTSPOT RING                                    */
/* ========================================================= */

@keyframes arsCollectionHotspotRing{

    0%{

        opacity:

            .9;

        transform:

            scale(.45);

    }

    70%{

        opacity:

            0;

        transform:

            scale(1.6);

    }

    100%{

        opacity:

            0;

        transform:

            scale(1.8);

    }

}


/* ========================================================= */
/* 22. ARS COLLECTION — 3D DEPTH LAYERS                   */
/* ========================================================= */

.ars-collection-page
.collection-showcase{

    transform-style:

        preserve-3d;

}


/* ========================================================= */
/* 22.1 — DEPTH LIGHT                                     */
/* ========================================================= */

.ars-collection-page
.collection-showcase::before{

    content:"";

    position:absolute;

    inset:

        10%;

    z-index:

        0;

    border-radius:

        50%;

    background:

        radial-gradient(
            ellipse,
            rgba(196,154,85,.12),
            transparent 65%
        );

    filter:

        blur(45px);

    transform:

        translateZ(
            -120px
        );

    animation:

        arsCollectionDepthLight
        8s
        ease-in-out
        infinite;

}


/* ========================================================= */
/* 22.2 — DEPTH LIGHT ANIMATION                            */
/* ========================================================= */

@keyframes arsCollectionDepthLight{

    0%,
    100%{

        transform:

            translateZ(
                -120px
            )
            scale(.9);

        opacity:

            .55;

    }

    50%{

        transform:

            translateZ(
                -80px
            )
            scale(1.12);

        opacity:

            1;

    }

}


/* ========================================================= */
/* 23. ARS COLLECTION — HOTSPOT RESPONSIVE                 */
/* ========================================================= */

@media
(max-width:1100px){

    .ars-collection-page
    .vehicle-hotspot{

        width:
            15px;

        height:
            15px;

    }

    .ars-collection-page
    .collection-feature-card{

        width:
            240px;

    }

}


/* ========================================================= */
/* 23.1 — TABLET HOTSPOTS                                 */
/* ========================================================= */

@media
(max-width:768px){

    .ars-collection-page
    .vehicle-hotspot{

        width:
            14px;

        height:
            14px;

    }

    .ars-collection-page
    .collection-feature-card{

        width:
            min(
                260px,
                calc(
                    100vw - 40px
                )
            );

    }

    .ars-collection-page
    .vehicle-energy-lines{

        opacity:
            .65;

    }

}


/* ========================================================= */
/* 23.2 — MOBILE HOTSPOTS                                 */
/* ========================================================= */

@media
(max-width:480px){

    .ars-collection-page
    .vehicle-hotspot{

        width:
            12px;

        height:
            12px;

    }

    .ars-collection-page
    .vehicle-hotspot::before{

        inset:
            -7px;

    }

    .ars-collection-page
    .vehicle-energy-lines{

        opacity:
            .35;

    }

}


/* ========================================================= */
/* 23.3 — REDUCED MOTION                                  */
/* ========================================================= */

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

    .ars-collection-page
    .vehicle-hotspot::before,
    .ars-collection-page
    .energy-path,
    .ars-collection-page
    .energy-path-secondary,
    .ars-collection-page
    .energy-node,
    .ars-collection-page
    .collection-showcase::before{

        animation:
            none
            !important;

    }

}
/* ========================================================= */
/* 24. ARS COLLECTION — PREMIUM 3D VEHICLE SHOWCASE         */
/* ========================================================= */


/* ========================================================= */
/* 24.1 — SHOWCASE ROOT                                    */
/* ========================================================= */

.ars-collection-page
.collection-showcase{

    position:relative;

    width:100%;

    min-height:
        720px;

    display:flex;

    align-items:center;

    justify-content:center;

    perspective:
        1800px;

    perspective-origin:
        50% 45%;

    transform-style:
        preserve-3d;

}


/* ========================================================= */
/* 24.2 — 3D VEHICLE STAGE                                */
/* ========================================================= */

.ars-collection-page
.vehicle-stage{

    position:relative;

    width:
        min(
            100%,
            1100px
        );

    height:
        650px;

    display:flex;

    align-items:center;

    justify-content:center;

    transform-style:
        preserve-3d;

    transition:

        transform
        1.2s
        cubic-bezier(
            .16,
            1,
            .3,
            1
        );

}


/* ========================================================= */
/* 24.3 — VEHICLE 3D OBJECT                               */
/* ========================================================= */

.ars-collection-page
.vehicle-3d{

    position:relative;

    width:
        92%;

    max-width:
        1050px;

    transform:

        translateZ(
            120px
        );

    transform-style:
        preserve-3d;

    will-change:
        transform;

    transition:

        transform
        .9s
        cubic-bezier(
            .16,
            1,
            .3,
            1
        );

}


/* ========================================================= */
/* 24.4 — VEHICLE IMAGE                                   */
/* ========================================================= */

.ars-collection-page
.vehicle-3d
img{

    display:block;

    width:100%;

    height:auto;

    object-fit:contain;

    user-select:none;

    -webkit-user-drag:none;

    filter:

        contrast(
            1.05
        )

        saturate(
            .92
        )

        brightness(
            .9
        )

        drop-shadow(
            0
            35px
            45px
            rgba(
                0,
                0,
                0,
                .78
            )
        )

        drop-shadow(
            0
            0
            70px
            rgba(
                196,
                154,
                85,
                .16
            )
        );

    transform:

        translateZ(
            30px
        );

    transition:

        filter
        .8s
        ease,

        transform
        .8s
        ease;

}


/* ========================================================= */
/* 24.5 — VEHICLE HOVER                                   */
/* ========================================================= */

.ars-collection-page
.vehicle-stage:hover
.vehicle-3d{

    transform:

        translateZ(
            150px
        )
        scale(
            1.025
        );

}


.ars-collection-page
.vehicle-stage:hover
.vehicle-3d
img{

    filter:

        contrast(
            1.08
        )

        saturate(
            1
        )

        brightness(
            .98
        )

        drop-shadow(
            0
            45px
            55px
            rgba(
                0,
                0,
                0,
                .82
            )
        )

        drop-shadow(
            0
            0
            95px
            rgba(
                196,
                154,
                85,
                .23
            )
        );

}


/* ========================================================= */
/* 25. ARS COLLECTION — VEHICLE FLOOR                      */
/* ========================================================= */


/* ========================================================= */
/* 25.1 — FLOOR PLATFORM                                  */
/* ========================================================= */

.ars-collection-page
.vehicle-floor{

    position:absolute;

    left:50%;

    bottom:
        12%;

    width:
        72%;

    height:
        110px;

    transform:

        translateX(
            -50%
        )

        rotateX(
            78deg
        )

        translateZ(
            -80px
        );

    transform-style:
        preserve-3d;

    background:

        radial-gradient(
            ellipse at center,
            rgba(
                196,
                154,
                85,
                .22
            ),
            rgba(
                196,
                154,
                85,
                .06
            )
            35%,
            transparent
            72%
        );

    filter:

        blur(
            3px
        );

    opacity:
        .8;

}


/* ========================================================= */
/* 25.2 — FLOOR ENERGY RING                               */
/* ========================================================= */

.ars-collection-page
.vehicle-floor::before{

    content:"";

    position:absolute;

    inset:
        18%
        8%;

    border:
        1px solid
        rgba(
            196,
            154,
            85,
            .35
        );

    border-radius:
        50%;

    box-shadow:

        0 0 25px
        rgba(
            196,
            154,
            85,
            .16
        );

    animation:

        arsCollectionFloorPulse
        4s
        ease-in-out
        infinite;

}


/* ========================================================= */
/* 25.3 — FLOOR INNER RING                                */
/* ========================================================= */

.ars-collection-page
.vehicle-floor::after{

    content:"";

    position:absolute;

    inset:
        32%
        22%;

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

    border-radius:
        50%;

    animation:

        arsCollectionFloorRotate
        12s
        linear
        infinite;

}


/* ========================================================= */
/* 25.4 — FLOOR PULSE                                     */
/* ========================================================= */

@keyframes arsCollectionFloorPulse{

    0%,
    100%{

        opacity:
            .35;

        transform:
            scale(
                .92
            );

    }

    50%{

        opacity:
            .9;

        transform:
            scale(
                1.06
            );

    }

}


/* ========================================================= */
/* 25.5 — FLOOR ROTATION                                  */
/* ========================================================= */

@keyframes arsCollectionFloorRotate{

    from{

        transform:
            rotate(
                0deg
            );

    }

    to{

        transform:
            rotate(
                360deg
            );

    }

}


/* ========================================================= */
/* 26. ARS COLLECTION — VEHICLE LIGHT SYSTEM              */
/* ========================================================= */


/* ========================================================= */
/* 26.1 — AMBIENT LIGHT                                   */
/* ========================================================= */

.ars-collection-page
.vehicle-light{

    position:absolute;

    pointer-events:none;

    border-radius:
        50%;

    background:

        radial-gradient(
            circle,
            rgba(
                255,
                255,
                255,
                .7
            ),
            rgba(
                196,
                154,
                85,
                .35
            ),
            transparent
            70%
        );

    filter:
        blur(
            18px
        );

    opacity:
        .35;

    mix-blend-mode:
        screen;

}


/* ========================================================= */
/* 26.2 — FRONT LIGHT                                    */
/* ========================================================= */

.ars-collection-page
.vehicle-light-front{

    top:
        38%;

    left:
        22%;

    width:
        170px;

    height:
        45px;

    transform:
        rotate(
            -8deg
        );

    animation:

        arsCollectionLightSweep
        5s
        ease-in-out
        infinite;

}


/* ========================================================= */
/* 26.3 — REAR LIGHT                                     */
/* ========================================================= */

.ars-collection-page
.vehicle-light-rear{

    top:
        43%;

    right:
        18%;

    width:
        150px;

    height:
        35px;

    transform:
        rotate(
            8deg
        );

    animation:

        arsCollectionRearLight
        4.5s
        ease-in-out
        infinite;

}


/* ========================================================= */
/* 26.4 — LIGHT SWEEP                                    */
/* ========================================================= */

@keyframes arsCollectionLightSweep{

    0%,
    100%{

        opacity:
            .2;

        transform:
            rotate(
                -8deg
            )
            scaleX(
                .8
            );

    }

    50%{

        opacity:
            .75;

        transform:
            rotate(
                -8deg
            )
            scaleX(
                1.15
            );

    }

}


/* ========================================================= */
/* 26.5 — REAR LIGHT ANIMATION                            */
/* ========================================================= */

@keyframes arsCollectionRearLight{

    0%,
    100%{

        opacity:
            .15;

    }

    50%{

        opacity:
            .65;

    }

}


/* ========================================================= */
/* 27. ARS COLLECTION — VEHICLE ROTATION CONTROL           */
/* ========================================================= */


/* ========================================================= */
/* 27.1 — ROTATION BUTTON CONTAINER                        */
/* ========================================================= */

.ars-collection-page
.vehicle-controls{

    position:absolute;

    left:50%;

    bottom:
        4%;

    z-index:
        60;

    display:flex;

    align-items:center;

    gap:
        10px;

    transform:
        translateX(
            -50%
        );

}


/* ========================================================= */
/* 27.2 — ROTATION BUTTON                                 */
/* ========================================================= */

.ars-collection-page
.vehicle-control{

    width:
        46px;

    height:
        46px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:
        1px solid
        rgba(
            196,
            154,
            85,
            .28
        );

    border-radius:
        50%;

    background:
        rgba(
            10,
            10,
            10,
            .55
        );

    backdrop-filter:
        blur(
            14px
        );

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

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

    cursor:pointer;

    transition:

        transform
        .4s
        ease,

        border-color
        .4s
        ease,

        background
        .4s
        ease,

        color
        .4s
        ease;

}


/* ========================================================= */
/* 27.3 — ROTATION BUTTON HOVER                           */
/* ========================================================= */

.ars-collection-page
.vehicle-control:hover{

    transform:
        translateY(
            -4px
        );

    border-color:
        rgba(
            196,
            154,
            85,
            .75
        );

    background:
        rgba(
            196,
            154,
            85,
            .12
        );

    color:
        var(--ars-gold-light);

}


/* ========================================================= */
/* 27.4 — ROTATION ACTIVE                                 */
/* ========================================================= */

.ars-collection-page
.vehicle-control.active{

    border-color:
        var(--ars-gold);

    box-shadow:

        0 0 20px
        rgba(
            196,
            154,
            85,
            .2
        );

    color:
        var(--ars-gold-light);

}


/* ========================================================= */
/* 28. ARS COLLECTION — VEHICLE LABEL                     */
/* ========================================================= */


/* ========================================================= */
/* 28.1 — VEHICLE IDENTITY                                */
/* ========================================================= */

.ars-collection-page
.vehicle-identity{

    position:absolute;

    left:
        7%;

    bottom:
        12%;

    z-index:
        45;

    max-width:
        300px;

    pointer-events:none;

}


/* ========================================================= */
/* 28.2 — VEHICLE LABEL                                   */
/* ========================================================= */

.ars-collection-page
.vehicle-identity
.vehicle-label{

    display:block;

    margin-bottom:
        10px;

    color:
        var(--ars-gold-light);

    font-size:
        .62rem;

    letter-spacing:
        .28em;

    text-transform:
        uppercase;

}


/* ========================================================= */
/* 28.3 — VEHICLE NAME                                    */
/* ========================================================= */

.ars-collection-page
.vehicle-identity
h3{

    margin:
        0;

    color:
        #fff;

    font-size:
        clamp(
            1.4rem,
            2vw,
            2rem
        );

    font-weight:
        500;

    letter-spacing:
        .04em;

}


/* ========================================================= */
/* 28.4 — VEHICLE DESCRIPTION                             */
/* ========================================================= */

.ars-collection-page
.vehicle-identity
p{

    margin:
        10px
        0
        0;

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

    font-size:
        .75rem;

    line-height:
        1.7;

}


/* ========================================================= */
/* 29. ARS COLLECTION — 3D CAMERA DEPTH                   */
/* ========================================================= */


/* ========================================================= */
/* 29.1 — CAMERA PARALLAX                                 */
/* ========================================================= */

.ars-collection-page
.collection-showcase
.vehicle-stage{

    animation:

        arsCollectionVehicleFloat
        7s
        ease-in-out
        infinite;

}


/* ========================================================= */
/* 29.2 — VEHICLE FLOAT                                   */
/* ========================================================= */

@keyframes arsCollectionVehicleFloat{

    0%,
    100%{

        transform:
            translateY(
                0
            )
            rotateX(
                0deg
            );

    }

    50%{

        transform:
            translateY(
                -9px
            )
            rotateX(
                .4deg
            );

    }

}


/* ========================================================= */
/* 30. ARS COLLECTION — RESPONSIVE VEHICLE SYSTEM          */
/* ========================================================= */


/* ========================================================= */
/* 30.1 — LARGE TABLET                                    */
/* ========================================================= */

@media
(max-width:1100px){

    .ars-collection-page
    .collection-showcase{

        min-height:
            620px;

    }

    .ars-collection-page
    .vehicle-stage{

        height:
            560px;

    }

    .ars-collection-page
    .vehicle-3d{

        width:
            96%;

    }

    .ars-collection-page
    .vehicle-identity{

        left:
            4%;

        bottom:
            10%;

    }

}


/* ========================================================= */
/* 30.2 — TABLET                                         */
/* ========================================================= */

@media
(max-width:768px){

    .ars-collection-page
    .collection-showcase{

        min-height:
            540px;

    }

    .ars-collection-page
    .vehicle-stage{

        height:
            480px;

    }

    .ars-collection-page
    .vehicle-floor{

        bottom:
            10%;

        width:
            85%;

    }

    .ars-collection-page
    .vehicle-identity{

        left:
            50%;

        bottom:
            12%;

        text-align:
            center;

        transform:
            translateX(
                -50%
            );

    }

    .ars-collection-page
    .vehicle-controls{

        bottom:
            3%;

    }

}


/* ========================================================= */
/* 30.3 — MOBILE                                          */
/* ========================================================= */

@media
(max-width:480px){

    .ars-collection-page
    .collection-showcase{

        min-height:
            470px;

    }

    .ars-collection-page
    .vehicle-stage{

        height:
            400px;

    }

    .ars-collection-page
    .vehicle-3d{

        width:
            108%;

    }

    .ars-collection-page
    .vehicle-floor{

        bottom:
            15%;

        width:
            100%;

    }

    .ars-collection-page
    .vehicle-identity{

        bottom:
            14%;

        width:
            90%;

    }

    .ars-collection-page
    .vehicle-identity
    p{

        display:
            none;

    }

    .ars-collection-page
    .vehicle-control{

        width:
            40px;

        height:
            40px;

    }

}


/* ========================================================= */
/* 30.4 — REDUCED MOTION                                  */
/* ========================================================= */

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

    .ars-collection-page
    .collection-showcase
    .vehicle-stage{

        animation:
            none;

    }

    .ars-collection-page
    .vehicle-floor::before,
    .ars-collection-page
    .vehicle-floor::after,
    .ars-collection-page
    .vehicle-light-front,
    .ars-collection-page
    .vehicle-light-rear{

        animation:
            none;

    }

}
/* ========================================================= */
/* 31. ARS COLLECTION — 3D FEATURE CONNECTION SYSTEM         */
/* ========================================================= */


/* ========================================================= */
/* 31.1 — FEATURE CONNECTION CONTAINER                      */
/* ========================================================= */

.ars-collection-page
.collection-feature-connections{

    position:absolute;

    inset:0;

    z-index:32;

    pointer-events:none;

    overflow:visible;

}


/* ========================================================= */
/* 31.2 — CONNECTION LINE                                   */
/* ========================================================= */

.ars-collection-page
.feature-connection{

    position:absolute;

    height:1px;

    transform-origin:left center;

    background:

        linear-gradient(
            90deg,
            rgba(196,154,85,.9),
            rgba(196,154,85,.5) 45%,
            transparent
        );

    box-shadow:

        0 0 8px
        rgba(196,154,85,.45);

    opacity:.7;

}


/* ========================================================= */
/* 31.3 — CONNECTION ENERGY PULSE                          */
/* ========================================================= */

.ars-collection-page
.feature-connection::after{

    content:"";

    position:absolute;

    top:50%;

    left:0;

    width:5px;

    height:5px;

    border-radius:50%;

    background:

        #fff;

    box-shadow:

        0 0 10px
        rgba(196,154,85,1),

        0 0 22px
        rgba(196,154,85,.7);

    transform:
        translateY(-50%);

    animation:

        arsCollectionConnectionFlow
        2.4s
        linear
        infinite;

}


/* ========================================================= */
/* 31.4 — CONNECTION FLOW                                  */
/* ========================================================= */

@keyframes arsCollectionConnectionFlow{

    0%{

        left:0;

        opacity:0;

    }

    15%{

        opacity:1;

    }

    85%{

        opacity:1;

    }

    100%{

        left:100%;

        opacity:0;

    }

}


/* ========================================================= */
/* 32. ARS COLLECTION — FEATURE DATA CARDS                  */
/* ========================================================= */


/* ========================================================= */
/* 32.1 — DATA CARD BASE                                   */
/* ========================================================= */

.ars-collection-page
.feature-data-card{

    position:absolute;

    width:
        250px;

    min-height:
        145px;

    padding:
        22px;

    z-index:40;

    border:

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

    border-radius:
        18px;

    background:

        linear-gradient(
            145deg,
            rgba(255,255,255,.09),
            rgba(255,255,255,.025)
        );

    backdrop-filter:
        blur(22px)
        saturate(130%);

    -webkit-backdrop-filter:
        blur(22px)
        saturate(130%);

    box-shadow:

        0 20px 55px
        rgba(0,0,0,.35),

        inset 0 1px 0
        rgba(255,255,255,.12);

    opacity:0;

    transform:

        translateY(20px)
        translateZ(40px)
        scale(.94);

    visibility:hidden;

    transition:

        opacity
        .55s
        cubic-bezier(.16,1,.3,1),

        transform
        .65s
        cubic-bezier(.16,1,.3,1),

        visibility
        .55s
        ease;

}


/* ========================================================= */
/* 32.2 — DATA CARD ACTIVE                                */
/* ========================================================= */

.ars-collection-page
.feature-data-card.active{

    opacity:1;

    visibility:visible;

    transform:

        translateY(0)
        translateZ(40px)
        scale(1);

}


/* ========================================================= */
/* 32.3 — DATA CARD GOLD EDGE                              */
/* ========================================================= */

.ars-collection-page
.feature-data-card::before{

    content:"";

    position:absolute;

    left:0;

    top:18px;

    bottom:18px;

    width:2px;

    border-radius:2px;

    background:

        linear-gradient(
            180deg,
            transparent,
            var(--ars-gold),
            transparent
        );

    box-shadow:

        0 0 12px
        rgba(196,154,85,.6);

}


/* ========================================================= */
/* 32.4 — DATA CARD LABEL                                 */
/* ========================================================= */

.ars-collection-page
.feature-data-card
.card-label{

    display:block;

    margin-bottom:8px;

    color:

        var(--ars-gold-light);

    font-size:.58rem;

    font-weight:600;

    letter-spacing:.22em;

    text-transform:uppercase;

}


/* ========================================================= */
/* 32.5 — DATA CARD TITLE                                 */
/* ========================================================= */

.ars-collection-page
.feature-data-card
h4{

    margin:0 0 9px;

    color:#fff;

    font-size:1.05rem;

    font-weight:500;

}


/* ========================================================= */
/* 32.6 — DATA CARD DESCRIPTION                           */
/* ========================================================= */

.ars-collection-page
.feature-data-card
p{

    margin:0;

    color:

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

    font-size:.72rem;

    line-height:1.7;

}


/* ========================================================= */
/* 32.7 — DATA CARD SPECIFICATION                         */
/* ========================================================= */

.ars-collection-page
.feature-data-specs{

    display:flex;

    flex-wrap:wrap;

    gap:6px;

    margin-top:15px;

}


.ars-collection-page
.feature-data-specs
span{

    padding:

        5px
        8px;

    border:

        1px solid
        rgba(196,154,85,.22);

    border-radius:

        999px;

    color:

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

    font-size:

        .55rem;

    letter-spacing:

        .08em;

    text-transform:

        uppercase;

}


/* ========================================================= */
/* 33. ARS COLLECTION — VEHICLE FEATURE NAVIGATION          */
/* ========================================================= */


/* ========================================================= */
/* 33.1 — FEATURE NAVIGATION                               */
/* ========================================================= */

.ars-collection-page
.vehicle-feature-nav{

    position:absolute;

    right:5%;

    top:50%;

    z-index:55;

    display:flex;

    flex-direction:column;

    gap:9px;

    transform:
        translateY(-50%);

}


/* ========================================================= */
/* 33.2 — NAVIGATION ITEM                                  */
/* ========================================================= */

.ars-collection-page
.feature-nav-item{

    position:relative;

    display:flex;

    align-items:center;

    gap:10px;

    min-width:145px;

    padding:

        10px
        12px;

    border:

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

    border-radius:

        10px;

    background:

        rgba(8,8,8,.35);

    backdrop-filter:
        blur(15px);

    color:

        rgba(255,255,255,.55);

    font-size:

        .62rem;

    letter-spacing:

        .08em;

    cursor:pointer;

    transition:

        color
        .4s
        ease,

        border-color
        .4s
        ease,

        background
        .4s
        ease,

        transform
        .4s
        ease;

}


/* ========================================================= */
/* 33.3 — NAVIGATION DOT                                  */
/* ========================================================= */

.ars-collection-page
.feature-nav-item
.nav-dot{

    width:7px;

    height:7px;

    flex-shrink:0;

    border-radius:50%;

    background:

        rgba(255,255,255,.3);

    transition:

        background
        .4s
        ease,

        box-shadow
        .4s
        ease;

}


/* ========================================================= */
/* 33.4 — NAVIGATION ACTIVE                               */
/* ========================================================= */

.ars-collection-page
.feature-nav-item.active{

    color:#fff;

    border-color:

        rgba(196,154,85,.5);

    background:

        rgba(196,154,85,.08);

    transform:

        translateX(-6px);

}


.ars-collection-page
.feature-nav-item.active
.nav-dot{

    background:

        var(--ars-gold-light);

    box-shadow:

        0 0 12px
        rgba(196,154,85,.9);

}


/* ========================================================= */
/* 33.5 — NAVIGATION HOVER                                */
/* ========================================================= */

.ars-collection-page
.feature-nav-item:hover{

    color:#fff;

    border-color:

        rgba(196,154,85,.32);

    transform:

        translateX(-4px);

}


/* ========================================================= */
/* 34. ARS COLLECTION — FEATURE TOOLTIP                    */
/* ========================================================= */


/* ========================================================= */
/* 34.1 — TOOLTIP                                          */
/* ========================================================= */

.ars-collection-page
.feature-tooltip{

    position:absolute;

    z-index:70;

    padding:

        9px
        13px;

    border-radius:

        8px;

    background:

        rgba(8,8,8,.78);

    border:

        1px solid
        rgba(196,154,85,.25);

    backdrop-filter:

        blur(15px);

    color:

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

    font-size:

        .6rem;

    letter-spacing:

        .08em;

    white-space:

        nowrap;

    opacity:0;

    pointer-events:none;

    transform:

        translateY(6px);

    transition:

        opacity
        .3s
        ease,

        transform
        .3s
        ease;

}


.ars-collection-page
.feature-nav-item:hover
.feature-tooltip{

    opacity:1;

    transform:

        translateY(0);

}


/* ========================================================= */
/* 35. ARS COLLECTION — SYSTEM STATUS HUD                  */
/* ========================================================= */


/* ========================================================= */
/* 35.1 — HUD CONTAINER                                   */
/* ========================================================= */

.ars-collection-page
.collection-system-hud{

    position:absolute;

    left:4%;

    top:7%;

    z-index:50;

    width:
        220px;

    padding:
        16px;

    border:

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

    border-radius:
        14px;

    background:

        rgba(5,5,5,.38);

    backdrop-filter:

        blur(18px);

    box-shadow:

        inset 0 1px 0
        rgba(255,255,255,.08),

        0 15px 40px
        rgba(0,0,0,.25);

}


/* ========================================================= */
/* 35.2 — HUD HEADER                                      */
/* ========================================================= */

.ars-collection-page
.system-hud-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-bottom:

        14px;

}


/* ========================================================= */
/* 35.3 — HUD TITLE                                       */
/* ========================================================= */

.ars-collection-page
.system-hud-header
span{

    color:

        rgba(255,255,255,.55);

    font-size:

        .56rem;

    letter-spacing:

        .2em;

    text-transform:

        uppercase;

}


/* ========================================================= */
/* 35.4 — HUD LIVE STATUS                                 */
/* ========================================================= */

.ars-collection-page
.hud-live{

    display:flex;

    align-items:center;

    gap:6px;

    color:

        var(--ars-gold-light);

    font-size:

        .55rem;

    letter-spacing:

        .1em;

}


.ars-collection-page
.hud-live::before{

    content:"";

    width:6px;

    height:6px;

    border-radius:50%;

    background:

        #9ee6b2;

    box-shadow:

        0 0 10px
        rgba(158,230,178,.8);

    animation:

        arsCollectionLivePulse
        1.8s
        ease-in-out
        infinite;

}


/* ========================================================= */
/* 35.5 — HUD DATA ROW                                    */
/* ========================================================= */

.ars-collection-page
.hud-data-row{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:

        8px
        0;

    border-bottom:

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

}


.ars-collection-page
.hud-data-row:last-child{

    border-bottom:0;

}


.ars-collection-page
.hud-data-row
label{

    color:

        rgba(255,255,255,.42);

    font-size:

        .58rem;

}


.ars-collection-page
.hud-data-row
strong{

    color:

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

    font-size:

        .6rem;

    font-weight:

        500;

}


/* ========================================================= */
/* 35.6 — HUD LIVE ANIMATION                              */
/* ========================================================= */

@keyframes arsCollectionLivePulse{

    0%,
    100%{

        opacity:.35;

        transform:scale(.75);

    }

    50%{

        opacity:1;

        transform:scale(1);

    }

}


/* ========================================================= */
/* 36. ARS COLLECTION — 3D DATA PARTICLES                  */
/* ========================================================= */


/* ========================================================= */
/* 36.1 — PARTICLE FIELD                                  */
/* ========================================================= */

.ars-collection-page
.collection-particle-field{

    position:absolute;

    inset:0;

    z-index:8;

    pointer-events:none;

    overflow:hidden;

}


/* ========================================================= */
/* 36.2 — PARTICLE                                        */
/* ========================================================= */

.ars-collection-page
.collection-particle{

    position:absolute;

    width:

        var(--particle-size,2px);

    height:

        var(--particle-size,2px);

    border-radius:50%;

    background:

        rgba(255,255,255,.65);

    box-shadow:

        0 0 8px
        rgba(196,154,85,.55);

    opacity:

        var(--particle-opacity,.4);

    animation:

        arsCollectionParticleFloat
        var(--particle-duration,8s)
        ease-in-out
        infinite;

    animation-delay:

        var(--particle-delay,0s);

}


/* ========================================================= */
/* 36.3 — PARTICLE FLOAT                                  */
/* ========================================================= */

@keyframes arsCollectionParticleFloat{

    0%{

        transform:

            translate3d(
                0,
                25px,
                0
            );

        opacity:0;

    }

    20%{

        opacity:

            var(--particle-opacity,.4);

    }

    80%{

        opacity:

            var(--particle-opacity,.4);

    }

    100%{

        transform:

            translate3d(
                20px,
                -90px,
                40px
            );

        opacity:0;

    }

}


/* ========================================================= */
/* 37. ARS COLLECTION — FEATURE CARD POSITIONS             */
/* ========================================================= */


/* ========================================================= */
/* 37.1 — DISPLAY CARD                                    */
/* ========================================================= */

.ars-collection-page
.feature-card-display{

    top:
        18%;

    right:
        7%;

}


/* ========================================================= */
/* 37.2 — SAFETY CARD                                     */
/* ========================================================= */

.ars-collection-page
.feature-card-safety{

    top:
        58%;

    right:
        3%;

}


/* ========================================================= */
/* 37.3 — LUXURY CARD                                     */
/* ========================================================= */

.ars-collection-page
.feature-card-luxury{

    bottom:
        10%;

    left:
        10%;

}


/* ========================================================= */
/* 37.4 — CAMERA CARD                                     */
/* ========================================================= */

.ars-collection-page
.feature-card-camera{

    top:
        28%;

    left:
        3%;

}


/* ========================================================= */
/* 37.5 — SENSOR CARD                                     */
/* ========================================================= */

.ars-collection-page
.feature-card-sensor{

    bottom:
        22%;

    right:
        20%;

}


/* ========================================================= */
/* 37.6 — ARS BRAIN CARD                                  */
/* ========================================================= */

.ars-collection-page
.feature-card-brain{

    top:
        10%;

    left:
        34%;

}


/* ========================================================= */
/* 38. ARS COLLECTION — SYSTEM SCAN                        */
/* ========================================================= */


/* ========================================================= */
/* 38.1 — SCAN LINE                                       */
/* ========================================================= */

.ars-collection-page
.collection-scan-line{

    position:absolute;

    left:
        8%;

    right:
        8%;

    height:
        1px;

    z-index:
        25;

    background:

        linear-gradient(
            90deg,
            transparent,
            rgba(196,154,85,.65),
            transparent
        );

    box-shadow:

        0 0 18px
        rgba(196,154,85,.45);

    opacity:
        0;

    animation:

        arsCollectionScan
        8s
        ease-in-out
        infinite;

}


/* ========================================================= */
/* 38.2 — SCAN ANIMATION                                  */
/* ========================================================= */

@keyframes arsCollectionScan{

    0%{

        top:
            12%;

        opacity:0;

    }

    12%{

        opacity:.6;

    }

    50%{

        opacity:.8;

    }

    88%{

        opacity:.6;

    }

    100%{

        top:
            88%;

        opacity:0;

    }

}


/* ========================================================= */
/* 39. ARS COLLECTION — MOBILE DATA SYSTEM                 */
/* ========================================================= */

@media
(max-width:900px){

    .ars-collection-page
    .vehicle-feature-nav{

        right:
            3%;

    }

    .ars-collection-page
    .feature-nav-item{

        min-width:
            120px;

        padding:
            8px
            10px;

        font-size:
            .55rem;

    }

    .ars-collection-page
    .collection-system-hud{

        left:
            3%;

        top:
            4%;

        width:
            190px;

    }

}


/* ========================================================= */
/* 39.1 — MOBILE FEATURE CARDS                            */
/* ========================================================= */

@media
(max-width:768px){

    .ars-collection-page
    .collection-feature-connections{

        display:none;

    }

    .ars-collection-page
    .feature-data-card{

        width:
            min(
                270px,
                calc(
                    100vw - 40px
                )
            );

    }

    .ars-collection-page
    .vehicle-feature-nav{

        display:none;

    }

    .ars-collection-page
    .collection-system-hud{

        width:
            170px;

        transform:
            scale(.85);

        transform-origin:
            top left;

    }

}


/* ========================================================= */
/* 39.2 — SMALL MOBILE                                   */
/* ========================================================= */

@media
(max-width:480px){

    .ars-collection-page
    .collection-system-hud{

        display:none;

    }

    .ars-collection-page
    .feature-data-card{

        padding:
            18px;

    }

}


/* ========================================================= */
/* 39.3 — REDUCED MOTION                                  */
/* ========================================================= */

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

    .ars-collection-page
    .feature-connection::after,
    .ars-collection-page
    .hud-live::before,
    .ars-collection-page
    .collection-particle,
    .ars-collection-page
    .collection-scan-line{

        animation:none;

    }

}
/* ========================================================= */
/* 40. ARS COLLECTION — PREMIUM GLASS INTERFACE SYSTEM       */
/* ========================================================= */


/* ========================================================= */
/* 40.1 — GLOBAL GLASS FOUNDATION                           */
/* ========================================================= */

.ars-collection-page
.ars-glass{

    position:relative;

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

    background:

        linear-gradient(
            135deg,
            rgba(
                255,
                255,
                255,
                .095
            ),
            rgba(
                255,
                255,
                255,
                .025
            )
        );

    backdrop-filter:

        blur(
            22px
        )
        saturate(
            135%
        );

    -webkit-backdrop-filter:

        blur(
            22px
        )
        saturate(
            135%
        );

    box-shadow:

        0
        24px
        70px
        rgba(
            0,
            0,
            0,
            .28
        ),

        inset
        0
        1px
        0
        rgba(
            255,
            255,
            255,
            .12
        );

    transition:

        transform
        .65s
        cubic-bezier(
            .16,
            1,
            .3,
            1
        ),

        border-color
        .5s
        ease,

        box-shadow
        .5s
        ease,

        background
        .5s
        ease;

}


/* ========================================================= */
/* 40.2 — GLASS LIGHT REFLECTION                           */
/* ========================================================= */

.ars-collection-page
.ars-glass::before{

    content:"";

    position:absolute;

    inset:
        0;

    pointer-events:none;

    border-radius:
        inherit;

    background:

        linear-gradient(
            115deg,
            rgba(
                255,
                255,
                255,
                .14
            ),
            transparent
            22%,
            transparent
            72%,
            rgba(
                196,
                154,
                85,
                .045
            )
        );

    opacity:
        .65;

    transition:

        opacity
        .5s
        ease;

}


/* ========================================================= */
/* 40.3 — GLASS HOVER                                     */
/* ========================================================= */

.ars-collection-page
.ars-glass:hover{

    border-color:

        rgba(
            196,
            154,
            85,
            .32
        );

    background:

        linear-gradient(
            135deg,
            rgba(
                255,
                255,
                255,
                .115
            ),
            rgba(
                196,
                154,
                85,
                .035
            )
        );

    box-shadow:

        0
        30px
        90px
        rgba(
            0,
            0,
            0,
            .38
        ),

        0
        0
        35px
        rgba(
            196,
            154,
            85,
            .07
        ),

        inset
        0
        1px
        0
        rgba(
            255,
            255,
            255,
            .16
        );

}


/* ========================================================= */
/* 40.4 — GLASS HOVER REFLECTION                           */
/* ========================================================= */

.ars-collection-page
.ars-glass:hover::before{

    opacity:
        1;

}


/* ========================================================= */
/* 41. ARS COLLECTION — FEATURED COLLECTION CARDS          */
/* ========================================================= */


/* ========================================================= */
/* 41.1 — FEATURED GRID                                   */
/* ========================================================= */

.ars-collection-page
.featured-grid{

    display:grid;

    grid-template-columns:

        repeat(
            12,
            minmax(
                0,
                1fr
            )
        );

    gap:
        22px;

    perspective:
        1400px;

}


/* ========================================================= */
/* 41.2 — FEATURED CARD                                   */
/* ========================================================= */

.ars-collection-page
.featured-card{

    position:relative;

    min-height:
        280px;

    padding:
        28px;

    overflow:hidden;

    border-radius:
        22px;

    transform-style:
        preserve-3d;

    animation:

        arsCollectionCardReveal
        .9s
        both;

}


/* ========================================================= */
/* 41.3 — LARGE FEATURED CARD                             */
/* ========================================================= */

.ars-collection-page
.featured-large{

    grid-column:
        span 7;

    grid-row:
        span 2;

    min-height:
        580px;

}


/* ========================================================= */
/* 41.4 — STANDARD FEATURED CARD                          */
/* ========================================================= */

.ars-collection-page
.featured-card:not(
    .featured-large
){

    grid-column:
        span 5;

}


/* ========================================================= */
/* 41.5 — FEATURED IMAGE                                  */
/* ========================================================= */

.ars-collection-page
.featured-image{

    position:absolute;

    inset:
        0;

    overflow:hidden;

    border-radius:
        inherit;

}


/* ========================================================= */
/* 41.6 — FEATURED IMAGE OVERLAY                           */
/* ========================================================= */

.ars-collection-page
.featured-image::after{

    content:"";

    position:absolute;

    inset:
        0;

    background:

        linear-gradient(
            180deg,
            transparent
            25%,
            rgba(
                0,
                0,
                0,
                .82
            )
        );

}


/* ========================================================= */
/* 41.7 — FEATURED IMAGE SCALE                            */
/* ========================================================= */

.ars-collection-page
.featured-image
img{

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transition:

        transform
        1.2s
        cubic-bezier(
            .16,
            1,
            .3,
            1
        ),

        filter
        .8s
        ease;

}


/* ========================================================= */
/* 41.8 — FEATURED IMAGE HOVER                            */
/* ========================================================= */

.ars-collection-page
.featured-card:hover
.featured-image
img{

    transform:
        scale(
            1.075
        );

    filter:

        saturate(
            1.08
        )
        contrast(
            1.04
        );

}


/* ========================================================= */
/* 41.9 — FEATURED CONTENT                                */
/* ========================================================= */

.ars-collection-page
.featured-content{

    position:absolute;

    left:
        30px;

    right:
        30px;

    bottom:
        30px;

    z-index:
        5;

    transform:
        translateZ(
            40px
        );

}


/* ========================================================= */
/* 41.10 — FEATURED CATEGORY                             */
/* ========================================================= */

.ars-collection-page
.featured-category{

    display:block;

    margin-bottom:
        10px;

    color:
        var(--ars-gold-light);

    font-size:
        .58rem;

    letter-spacing:
        .24em;

    text-transform:
        uppercase;

}


/* ========================================================= */
/* 41.11 — FEATURED TITLE                                 */
/* ========================================================= */

.ars-collection-page
.featured-content
h3{

    margin:
        0 0 12px;

    color:
        #fff;

    font-size:
        clamp(
            1.6rem,
            3vw,
            2.6rem
        );

    font-weight:
        500;

}


/* ========================================================= */
/* 41.12 — FEATURED DESCRIPTION                           */
/* ========================================================= */

.ars-collection-page
.featured-content
p{

    max-width:
        650px;

    margin:
        0 0 18px;

    color:

        rgba(
            255,
            255,
            255,
            .62
        );

    line-height:
        1.8;

    font-size:
        .82rem;

}


/* ========================================================= */
/* 41.13 — FEATURED LINK                                  */
/* ========================================================= */

.ars-collection-page
.featured-link{

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    color:

        var(--ars-gold-light);

    font-size:
        .68rem;

    letter-spacing:
        .1em;

    text-transform:
        uppercase;

    transition:

        gap
        .4s
        ease,

        color
        .4s
        ease;

}


.ars-collection-page
.featured-link:hover{

    gap:
        15px;

    color:
        #fff;

}


/* ========================================================= */
/* 42. ARS COLLECTION — FEATURED ICON SYSTEM               */
/* ========================================================= */


/* ========================================================= */
/* 42.1 — ICON                                            */
/* ========================================================= */

.ars-collection-page
.featured-icon{

    width:
        58px;

    height:
        58px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:
        25px;

    border-radius:
        18px;

    border:
        1px solid
        rgba(
            196,
            154,
            85,
            .25
        );

    background:

        rgba(
            196,
            154,
            85,
            .07
        );

    font-size:
        1.35rem;

    box-shadow:

        0
        0
        25px
        rgba(
            196,
            154,
            85,
            .08
        );

    transform:
        translateZ(
            30px
        );

    transition:

        transform
        .6s
        cubic-bezier(
            .16,
            1,
            .3,
            1
        ),

        background
        .4s
        ease;

}


.ars-collection-page
.featured-card:hover
.featured-icon{

    transform:

        translateZ(
            50px
        )
        rotateY(
            12deg
        )
        rotateX(
            8deg
        );

    background:

        rgba(
            196,
            154,
            85,
            .13
        );

}


/* ========================================================= */
/* 42.2 — FEATURED CARD TEXT                              */
/* ========================================================= */

.ars-collection-page
.featured-card
h3{

    margin:
        0 0 12px;

    color:
        #fff;

    font-size:
        1.25rem;

    font-weight:
        500;

}


.ars-collection-page
.featured-card
p{

    margin:
        0 0 20px;

    color:

        rgba(
            255,
            255,
            255,
            .55
        );

    font-size:
        .76rem;

    line-height:
        1.75;

}


/* ========================================================= */
/* 42.3 — FEATURED CARD LINK                              */
/* ========================================================= */

.ars-collection-page
.featured-card
a{

    color:

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

    font-size:
        .65rem;

    letter-spacing:
        .1em;

    text-transform:
        uppercase;

    transition:

        color
        .35s
        ease;

}


.ars-collection-page
.featured-card
a:hover{

    color:

        var(--ars-gold-light);

}


/* ========================================================= */
/* 43. ARS COLLECTION — PRODUCTS SYSTEM                    */
/* ========================================================= */


/* ========================================================= */
/* 43.1 — PRODUCT NAVIGATION                              */
/* ========================================================= */

.ars-collection-page
.product-navigation{

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:
        9px;

    margin:
        40px
        0;

}


/* ========================================================= */
/* 43.2 — PRODUCT FILTER                                  */
/* ========================================================= */

.ars-collection-page
.product-filter{

    position:relative;

    padding:
        11px
        20px;

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

    border-radius:
        999px;

    background:

        rgba(
            255,
            255,
            255,
            .025
        );

    color:

        rgba(
            255,
            255,
            255,
            .55
        );

    font-size:
        .62rem;

    letter-spacing:
        .08em;

    cursor:pointer;

    transition:

        color
        .35s
        ease,

        border-color
        .35s
        ease,

        background
        .35s
        ease,

        transform
        .35s
        ease;

}


.ars-collection-page
.product-filter:hover{

    color:#fff;

    border-color:

        rgba(
            196,
            154,
            85,
            .35
        );

    transform:
        translateY(
            -2px
        );

}


.ars-collection-page
.product-filter.active{

    color:#fff;

    border-color:

        rgba(
            196,
            154,
            85,
            .55
        );

    background:

        rgba(
            196,
            154,
            85,
            .1
        );

    box-shadow:

        0
        0
        22px
        rgba(
            196,
            154,
            85,
            .08
        );

}


/* ========================================================= */
/* 43.3 — PRODUCTS GRID                                   */
/* ========================================================= */

.ars-collection-page
.products-grid{

    display:grid;

    grid-template-columns:

        repeat(
            3,
            minmax(
                0,
                1fr
            )
        );

    gap:
        22px;

}


/* ========================================================= */
/* 43.4 — PRODUCT CARD                                    */
/* ========================================================= */

.ars-collection-page
.product-card{

    position:relative;

    min-height:
        430px;

    padding:
        22px;

    overflow:hidden;

    border-radius:
        20px;

    transform-style:
        preserve-3d;

    transition:

        transform
        .65s
        cubic-bezier(
            .16,
            1,
            .3,
            1
        );

}


.ars-collection-page
.product-card:hover{

    transform:

        translateY(
            -10px
        )
        rotateX(
            2deg
        )
        rotateY(
            -2deg
        );

}


/* ========================================================= */
/* 43.5 — PRODUCT IMAGE                                   */
/* ========================================================= */

.ars-collection-page
.product-image{

    position:relative;

    height:
        230px;

    margin:
        -22px
        -22px
        22px;

    overflow:hidden;

    background:

        radial-gradient(
            circle at center,
            rgba(
                196,
                154,
                85,
                .12
            ),
            transparent
            70%
        );

}


.ars-collection-page
.product-image
img{

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transition:

        transform
        .9s
        cubic-bezier(
            .16,
            1,
            .3,
            1
        );

}


.ars-collection-page
.product-card:hover
.product-image
img{

    transform:
        scale(
            1.08
        );

}


/* ========================================================= */
/* 43.6 — PRODUCT BADGE                                   */
/* ========================================================= */

.ars-collection-page
.product-badge{

    position:absolute;

    top:
        18px;

    left:
        18px;

    z-index:
        10;

    padding:

        7px
        12px;

    border:

        1px solid
        rgba(
            196,
            154,
            85,
            .5
        );

    border-radius:
        999px;

    background:

        rgba(
            8,
            8,
            8,
            .55
        );

    backdrop-filter:
        blur(
            10px
        );

    color:

        var(--ars-gold-light);

    font-size:
        .52rem;

    letter-spacing:
        .16em;

}


/* ========================================================= */
/* 43.7 — PRODUCT CONTENT                                 */
/* ========================================================= */

.ars-collection-page
.product-card
h3{

    margin:
        0 0 10px;

    color:
        #fff;

    font-size:
        1.25rem;

    font-weight:
        500;

}


.ars-collection-page
.product-card
p{

    margin:
        0 0 18px;

    color:

        rgba(
            255,
            255,
            255,
            .55
        );

    font-size:
        .74rem;

    line-height:
        1.7;

}


/* ========================================================= */
/* 43.8 — PRODUCT SPEC LIST                               */
/* ========================================================= */

.ars-collection-page
.product-card
ul{

    display:flex;

    flex-wrap:wrap;

    gap:
        7px;

    padding:
        0;

    margin:
        0
        0
        22px;

    list-style:none;

}


.ars-collection-page
.product-card
li{

    padding:

        6px
        9px;

    border:

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

    border-radius:
        6px;

    color:

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

    font-size:
        .52rem;

    letter-spacing:
        .06em;

}


/* ========================================================= */
/* 43.9 — PRODUCT ACTIONS                                */
/* ========================================================= */

.ars-collection-page
.product-actions{

    display:flex;

    gap:
        12px;

}


.ars-collection-page
.product-actions
a{

    flex:1;

    padding:
        11px;

    text-align:center;

    border:

        1px solid
        rgba(
            196,
            154,
            85,
            .22
        );

    border-radius:
        8px;

    color:

        rgba(
            255,
            255,
            255,
            .7
        );

    font-size:
        .58rem;

    transition:

        background
        .35s
        ease,

        color
        .35s
        ease,

        border-color
        .35s
        ease;

}


.ars-collection-page
.product-actions
a:hover{

    color:#fff;

    background:

        rgba(
            196,
            154,
            85,
            .1
        );

    border-color:

        rgba(
            196,
            154,
            85,
            .5
        );

}


/* ========================================================= */
/* 44. ARS COLLECTION — COMING SOON SYSTEM                 */
/* ========================================================= */


/* ========================================================= */
/* 44.1 — COMING OVERLAY                                  */
/* ========================================================= */

.ars-collection-page
.coming-overlay{

    position:absolute;

    inset:
        0;

    z-index:
        20;

    display:flex;

    align-items:center;

    justify-content:center;

    background:

        rgba(
            5,
            5,
            5,
            .38
        );

    backdrop-filter:

        blur(
            2px
        );

    color:

        var(--ars-gold-light);

    font-size:
        .58rem;

    letter-spacing:
        .25em;

    text-transform:
        uppercase;

    pointer-events:none;

}


/* ========================================================= */
/* 44.2 — COMING BADGE                                   */
/* ========================================================= */

.ars-collection-page
.coming-badge{

    position:absolute;

    top:
        18px;

    right:
        18px;

    z-index:
        25;

    padding:

        7px
        11px;

    border:

        1px solid
        rgba(
            196,
            154,
            85,
            .28
        );

    border-radius:
        999px;

    background:

        rgba(
            196,
            154,
            85,
            .06
        );

    color:

        rgba(
            255,
            255,
            255,
            .65
        );

    font-size:
        .5rem;

    letter-spacing:
        .16em;

}


/* ========================================================= */
/* 44.3 — CARD REVEAL                                    */
/* ========================================================= */

@keyframes arsCollectionCardReveal{

    from{

        opacity:
            0;

        transform:

            translateY(
                35px
            )
            rotateX(
                8deg
            );

    }

    to{

        opacity:
            1;

        transform:

            translateY(
                0
            )
            rotateX(
                0
            );

    }

}


/* ========================================================= */
/* 45. ARS COLLECTION — RESPONSIVE COLLECTION GRID          */
/* ========================================================= */


/* ========================================================= */
/* 45.1 — TABLET                                         */
/* ========================================================= */

@media
(max-width:900px){

    .ars-collection-page
    .featured-grid{

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

    }

    .ars-collection-page
    .featured-large{

        grid-column:
            span 2;

        grid-row:
            auto;

        min-height:
            500px;

    }

    .ars-collection-page
    .featured-card:not(
        .featured-large
    ){

        grid-column:
            span 1;

    }

    .ars-collection-page
    .products-grid{

        grid-template-columns:

            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );

    }

}


/* ========================================================= */
/* 45.2 — MOBILE                                         */
/* ========================================================= */

@media
(max-width:600px){

    .ars-collection-page
    .featured-grid{

        grid-template-columns:
            1fr;

    }

    .ars-collection-page
    .featured-large,
    .ars-collection-page
    .featured-card:not(
        .featured-large
    ){

        grid-column:
            span 1;

    }

    .ars-collection-page
    .featured-large{

        min-height:
            430px;

    }

    .ars-collection-page
    .products-grid{

        grid-template-columns:
            1fr;

    }

    .ars-collection-page
    .product-navigation{

        justify-content:
            flex-start;

        overflow-x:
            auto;

        flex-wrap:
            nowrap;

        padding-bottom:
            8px;

    }

    .ars-collection-page
    .product-filter{

        flex-shrink:
            0;

    }

}


/* ========================================================= */
/* 45.3 — REDUCED MOTION                                  */
/* ========================================================= */

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

    .ars-collection-page
    .featured-card{

        animation:
            none;

    }

}
/* ========================================================= */
/* 46. ARS COLLECTION — ENGINEERING PROJECTS SYSTEM         */
/* ========================================================= */


/* ========================================================= */
/* 46.1 — PROJECTS GRID                                    */
/* ========================================================= */

.ars-collection-page
.projects-grid{

    display:grid;

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

    gap:
        22px;

    perspective:
        1600px;

}


/* ========================================================= */
/* 46.2 — PROJECT CARD                                    */
/* ========================================================= */

.ars-collection-page
.project-card{

    position:relative;

    grid-column:
        span 4;

    min-height:
        390px;

    overflow:hidden;

    border-radius:
        22px;

    transform-style:
        preserve-3d;

    transition:

        transform
        .75s
        cubic-bezier(
            .16,
            1,
            .3,
            1
        ),

        border-color
        .45s
        ease,

        box-shadow
        .45s
        ease;

}


/* ========================================================= */
/* 46.3 — FEATURED PROJECT                                 */
/* ========================================================= */

.ars-collection-page
.featured-project{

    grid-column:
        span 8;

    min-height:
        560px;

}


/* ========================================================= */
/* 46.4 — PROJECT HOVER                                   */
/* ========================================================= */

.ars-collection-page
.project-card:hover{

    transform:

        translateY(
            -12px
        )
        rotateX(
            2deg
        )
        rotateY(
            -2deg
        );

    border-color:

        rgba(
            196,
            154,
            85,
            .34
        );

    box-shadow:

        0
        35px
        100px
        rgba(
            0,
            0,
            0,
            .42
        ),

        0
        0
        45px
        rgba(
            196,
            154,
            85,
            .07
        );

}


/* ========================================================= */
/* 46.5 — PROJECT IMAGE                                   */
/* ========================================================= */

.ars-collection-page
.project-image{

    position:relative;

    width:
        100%;

    height:
        230px;

    overflow:hidden;

}


/* ========================================================= */
/* 46.6 — FEATURED PROJECT IMAGE                          */
/* ========================================================= */

.ars-collection-page
.featured-project
.project-image{

    height:
        100%;

    position:absolute;

    inset:
        0;

}


/* ========================================================= */
/* 46.7 — PROJECT IMAGE ELEMENT                            */
/* ========================================================= */

.ars-collection-page
.project-image
img{

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transition:

        transform
        1.2s
        cubic-bezier(
            .16,
            1,
            .3,
            1
        ),

        filter
        .8s
        ease;

}


/* ========================================================= */
/* 46.8 — PROJECT IMAGE ATMOSPHERE                         */
/* ========================================================= */

.ars-collection-page
.project-image::after{

    content:"";

    position:absolute;

    inset:
        0;

    background:

        linear-gradient(
            180deg,
            transparent
            20%,
            rgba(
                0,
                0,
                0,
                .86
            )
        );

    pointer-events:
        none;

}


/* ========================================================= */
/* 46.9 — PROJECT IMAGE HOVER                             */
/* ========================================================= */

.ars-collection-page
.project-card:hover
.project-image
img{

    transform:
        scale(
            1.09
        );

    filter:

        saturate(
            1.12
        )
        contrast(
            1.05
        );

}


/* ========================================================= */
/* 46.10 — PROJECT INFO                                   */
/* ========================================================= */

.ars-collection-page
.project-info{

    position:absolute;

    left:
        30px;

    right:
        30px;

    bottom:
        30px;

    z-index:
        5;

    transform:
        translateZ(
            45px
        );

}


/* ========================================================= */
/* 46.11 — PROJECT STATUS                                 */
/* ========================================================= */

.ars-collection-page
.project-status{

    display:inline-flex;

    align-items:center;

    gap:
        8px;

    margin-bottom:
        12px;

    color:

        var(--ars-gold-light);

    font-size:
        .55rem;

    letter-spacing:
        .2em;

    text-transform:
        uppercase;

}


/* ========================================================= */
/* 46.12 — STATUS LIGHT                                   */
/* ========================================================= */

.ars-collection-page
.project-status::before{

    content:"";

    width:
        6px;

    height:
        6px;

    border-radius:
        50%;

    background:

        var(--ars-gold-light);

    box-shadow:

        0
        0
        14px
        rgba(
            196,
            154,
            85,
            .7
        );

    animation:

        arsProjectStatusPulse
        2s
        infinite;

}


@keyframes arsProjectStatusPulse{

    0%,
    100%{

        opacity:
            .45;

        transform:
            scale(
                .8
            );

    }

    50%{

        opacity:
            1;

        transform:
            scale(
                1.25
            );

    }

}


/* ========================================================= */
/* 46.13 — PROJECT TITLE                                  */
/* ========================================================= */

.ars-collection-page
.project-card
h3{

    margin:
        0 0 12px;

    color:
        #fff;

    font-size:
        1.2rem;

    font-weight:
        500;

    letter-spacing:
        -.01em;

}


/* ========================================================= */
/* 46.14 — PROJECT DESCRIPTION                            */
/* ========================================================= */

.ars-collection-page
.project-card
p{

    margin:
        0 0 18px;

    color:

        rgba(
            255,
            255,
            255,
            .56
        );

    font-size:
        .73rem;

    line-height:
        1.75;

}


/* ========================================================= */
/* 46.15 — PROJECT TAGS                                   */
/* ========================================================= */

.ars-collection-page
.project-tags{

    display:flex;

    flex-wrap:wrap;

    gap:
        7px;

    margin-bottom:
        20px;

}


.ars-collection-page
.project-tags
span{

    padding:

        6px
        9px;

    border:

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

    border-radius:
        6px;

    background:

        rgba(
            255,
            255,
            255,
            .025
        );

    color:

        rgba(
            255,
            255,
            255,
            .52
        );

    font-size:
        .5rem;

    letter-spacing:
        .08em;

}


/* ========================================================= */
/* 46.16 — PROJECT BUTTONS                                */
/* ========================================================= */

.ars-collection-page
.project-buttons{

    display:flex;

    gap:
        10px;

}


.ars-collection-page
.project-buttons
a{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:
        120px;

    padding:

        10px
        14px;

    border:

        1px solid
        rgba(
            196,
            154,
            85,
            .25
        );

    border-radius:
        8px;

    color:

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

    font-size:
        .56rem;

    letter-spacing:
        .06em;

    transition:

        background
        .35s
        ease,

        border-color
        .35s
        ease,

        color
        .35s
        ease,

        transform
        .35s
        ease;

}


.ars-collection-page
.project-buttons
a:hover{

    color:
        #fff;

    background:

        rgba(
            196,
            154,
            85,
            .1
        );

    border-color:

        rgba(
            196,
            154,
            85,
            .55
        );

    transform:
        translateY(
            -2px
        );

}


/* ========================================================= */
/* 46.17 — STANDARD PROJECT CONTENT                       */
/* ========================================================= */

.ars-collection-page
.project-card:not(
    .featured-project
)
> h3{

    padding:

        0
        22px;

}


.ars-collection-page
.project-card:not(
    .featured-project
)
> p{

    padding:

        0
        22px;

}


.ars-collection-page
.project-card:not(
    .featured-project
)
> a{

    display:inline-block;

    margin:

        0
        22px
        24px;

    color:

        var(--ars-gold-light);

    font-size:
        .6rem;

    letter-spacing:
        .1em;

    text-transform:
        uppercase;

    transition:

        letter-spacing
        .35s
        ease;

}


.ars-collection-page
.project-card:not(
    .featured-project
)
> a:hover{

    letter-spacing:
        .16em;

}


/* ========================================================= */
/* 47. ARS COLLECTION — PROJECT TOOLBAR                    */
/* ========================================================= */


/* ========================================================= */
/* 47.1 — PROJECT TABS                                    */
/* ========================================================= */

.ars-collection-page
.projects-toolbar{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:
        10px;

    margin:
        38px
        0
        42px;

}


/* ========================================================= */
/* 47.2 — PROJECT TAB                                     */
/* ========================================================= */

.ars-collection-page
.project-tab{

    position:relative;

    min-width:
        100px;

    padding:

        11px
        18px;

    border:

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

    border-radius:
        999px;

    background:

        rgba(
            255,
            255,
            255,
            .025
        );

    color:

        rgba(
            255,
            255,
            255,
            .5
        );

    font-size:
        .58rem;

    letter-spacing:
        .08em;

    cursor:pointer;

    transition:

        color
        .35s
        ease,

        border-color
        .35s
        ease,

        background
        .35s
        ease,

        transform
        .35s
        ease;

}


.ars-collection-page
.project-tab:hover{

    color:
        #fff;

    border-color:

        rgba(
            196,
            154,
            85,
            .3
        );

    transform:
        translateY(
            -2px
        );

}


.ars-collection-page
.project-tab.active{

    color:
        #fff;

    border-color:

        rgba(
            196,
            154,
            85,
            .55
        );

    background:

        rgba(
            196,
            154,
            85,
            .1
        );

    box-shadow:

        0
        0
        25px
        rgba(
            196,
            154,
            85,
            .08
        );

}


/* ========================================================= */
/* 47.3 — ACTIVE TAB ENERGY LINE                          */
/* ========================================================= */

.ars-collection-page
.project-tab.active::after{

    content:"";

    position:absolute;

    left:
        25%;

    right:
        25%;

    bottom:
        -5px;

    height:
        1px;

    background:

        linear-gradient(
            90deg,
            transparent,
            var(--ars-gold-light),
            transparent
        );

    box-shadow:

        0
        0
        12px
        rgba(
            196,
            154,
            85,
            .65
        );

}


/* ========================================================= */
/* 48. ARS COLLECTION — PROJECT HIGHLIGHT                  */
/* ========================================================= */


/* ========================================================= */
/* 48.1 — HIGHLIGHT CONTAINER                             */
/* ========================================================= */

.ars-collection-page
.projects-highlight{

    display:grid;

    grid-template-columns:
        1.5fr
        1fr;

    align-items:center;

    gap:
        50px;

    margin-top:
        55px;

    padding:
        42px;

    border-radius:
        24px;

}


/* ========================================================= */
/* 48.2 — HIGHLIGHT TITLE                                 */
/* ========================================================= */

.ars-collection-page
.highlight-left
h3{

    margin:
        0 0 14px;

    color:
        #fff;

    font-size:
        clamp(
            1.35rem,
            2.5vw,
            2rem
        );

    font-weight:
        500;

}


/* ========================================================= */
/* 48.3 — HIGHLIGHT TEXT                                  */
/* ========================================================= */

.ars-collection-page
.highlight-left
p{

    max-width:
        700px;

    margin:
        0;

    color:

        rgba(
            255,
            255,
            255,
            .54
        );

    font-size:
        .76rem;

    line-height:
        1.85;

}


/* ========================================================= */
/* 48.4 — HIGHLIGHT ACTIONS                              */
/* ========================================================= */

.ars-collection-page
.highlight-right{

    display:flex;

    justify-content:flex-end;

    flex-wrap:wrap;

    gap:
        10px;

}


.ars-collection-page
.highlight-right
a{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:

        12px
        18px;

    border:

        1px solid
        rgba(
            196,
            154,
            85,
            .28
        );

    border-radius:
        9px;

    color:

        rgba(
            255,
            255,
            255,
            .7
        );

    font-size:
        .56rem;

    letter-spacing:
        .07em;

    transition:

        color
        .35s
        ease,

        background
        .35s
        ease,

        border-color
        .35s
        ease,

        transform
        .35s
        ease;

}


.ars-collection-page
.highlight-right
a:hover{

    color:
        #fff;

    background:

        rgba(
            196,
            154,
            85,
            .1
        );

    border-color:

        rgba(
            196,
            154,
            85,
            .55
        );

    transform:
        translateY(
            -3px
        );

}


/* ========================================================= */
/* 49. ARS COLLECTION — PROJECT RESPONSIVE SYSTEM            */
/* ========================================================= */


/* ========================================================= */
/* 49.1 — TABLET                                         */
/* ========================================================= */

@media
(max-width:1000px){

    .ars-collection-page
    .project-card{

        grid-column:
            span 6;

    }

    .ars-collection-page
    .featured-project{

        grid-column:
            span 12;

        min-height:
            500px;

    }

    .ars-collection-page
    .projects-highlight{

        grid-template-columns:
            1fr;

        gap:
            28px;

    }

    .ars-collection-page
    .highlight-right{

        justify-content:
            flex-start;

    }

}


/* ========================================================= */
/* 49.2 — MOBILE                                         */
/* ========================================================= */

@media
(max-width:650px){

    .ars-collection-page
    .project-card,
    .ars-collection-page
    .featured-project{

        grid-column:
            span 12;

    }

    .ars-collection-page
    .featured-project{

        min-height:
            440px;

    }

    .ars-collection-page
    .project-info{

        left:
            22px;

        right:
            22px;

        bottom:
            22px;

    }

    .ars-collection-page
    .projects-highlight{

        padding:
            28px;

        border-radius:
            20px;

    }

    .ars-collection-page
    .projects-toolbar{

        justify-content:
            flex-start;

        overflow-x:
            auto;

        flex-wrap:
            nowrap;

        padding-bottom:
            8px;

    }

    .ars-collection-page
    .project-tab{

        flex-shrink:
            0;

    }

}


/* ========================================================= */
/* 49.3 — REDUCED MOTION                                  */
/* ========================================================= */

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

    .ars-collection-page
    .project-status::before{

        animation:
            none;

    }

}
/* ========================================================= */
/* 50. ARS COLLECTION — DESIGN STUDIO SYSTEM                */
/* ========================================================= */


/* ========================================================= */
/* 50.1 — DESIGN GRID                                      */
/* ========================================================= */

.ars-collection-page
.design-grid{

    display:grid;

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

    gap:
        22px;

    perspective:
        1600px;

}


/* ========================================================= */
/* 50.2 — DESIGN CARD                                     */
/* ========================================================= */

.ars-collection-page
.design-card{

    position:relative;

    grid-column:
        span 4;

    min-height:
        300px;

    padding:
        28px;

    overflow:hidden;

    border-radius:
        22px;

    transform-style:
        preserve-3d;

    transition:

        transform
        .7s
        cubic-bezier(
            .16,
            1,
            .3,
            1
        ),

        border-color
        .45s
        ease,

        box-shadow
        .45s
        ease;

}


/* ========================================================= */
/* 50.3 — DESIGN MAIN CARD                                */
/* ========================================================= */

.ars-collection-page
.design-main{

    grid-column:
        span 8;

    grid-row:
        span 2;

    min-height:
        650px;

    padding:
        0;

}


/* ========================================================= */
/* 50.4 — DESIGN CARD HOVER                               */
/* ========================================================= */

.ars-collection-page
.design-card:hover{

    transform:

        translateY(
            -12px
        )
        rotateX(
            2deg
        )
        rotateY(
            -2deg
        );

    border-color:

        rgba(
            196,
            154,
            85,
            .35
        );

    box-shadow:

        0
        35px
        100px
        rgba(
            0,
            0,
            0,
            .42
        ),

        0
        0
        45px
        rgba(
            196,
            154,
            85,
            .07
        );

}


/* ========================================================= */
/* 50.5 — DESIGN IMAGE                                    */
/* ========================================================= */

.ars-collection-page
.design-image{

    position:absolute;

    inset:
        0;

    overflow:hidden;

}


/* ========================================================= */
/* 50.6 — DESIGN IMAGE ATMOSPHERE                          */
/* ========================================================= */

.ars-collection-page
.design-image::after{

    content:"";

    position:absolute;

    inset:
        0;

    background:

        linear-gradient(
            180deg,
            transparent
            20%,
            rgba(
                0,
                0,
                0,
                .9
            )
        );

    pointer-events:
        none;

}


/* ========================================================= */
/* 50.7 — DESIGN IMAGE ELEMENT                            */
/* ========================================================= */

.ars-collection-page
.design-image
img{

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transition:

        transform
        1.3s
        cubic-bezier(
            .16,
            1,
            .3,
            1
        ),

        filter
        .8s
        ease;

}


/* ========================================================= */
/* 50.8 — DESIGN IMAGE HOVER                              */
/* ========================================================= */

.ars-collection-page
.design-main:hover
.design-image
img{

    transform:
        scale(
            1.08
        );

    filter:

        saturate(
            1.12
        )
        contrast(
            1.05
        );

}


/* ========================================================= */
/* 50.9 — DESIGN CONTENT                                  */
/* ========================================================= */

.ars-collection-page
.design-content{

    position:absolute;

    left:
        36px;

    right:
        36px;

    bottom:
        36px;

    z-index:
        5;

    transform:
        translateZ(
            50px
        );

}


/* ========================================================= */
/* 50.10 — DESIGN CATEGORY                                */
/* ========================================================= */

.ars-collection-page
.design-content
> span{

    display:block;

    margin-bottom:
        12px;

    color:

        var(--ars-gold-light);

    font-size:
        .56rem;

    letter-spacing:
        .22em;

    text-transform:
        uppercase;

}


/* ========================================================= */
/* 50.11 — DESIGN MAIN TITLE                              */
/* ========================================================= */

.ars-collection-page
.design-content
h3{

    margin:
        0 0 14px;

    color:
        #fff;

    font-size:
        clamp(
            1.7rem,
            3vw,
            2.8rem
        );

    font-weight:
        500;

}


/* ========================================================= */
/* 50.12 — DESIGN MAIN TEXT                               */
/* ========================================================= */

.ars-collection-page
.design-content
p{

    max-width:
        650px;

    margin:
        0 0 22px;

    color:

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

    font-size:
        .78rem;

    line-height:
        1.8;

}


/* ========================================================= */
/* 50.13 — DESIGN BUTTONS                                 */
/* ========================================================= */

.ars-collection-page
.design-buttons{

    display:flex;

    flex-wrap:wrap;

    gap:
        10px;

}


.ars-collection-page
.design-buttons
a{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:

        11px
        17px;

    border:

        1px solid
        rgba(
            196,
            154,
            85,
            .3
        );

    border-radius:
        8px;

    color:

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

    font-size:
        .56rem;

    letter-spacing:
        .07em;

    transition:

        background
        .35s
        ease,

        color
        .35s
        ease,

        border-color
        .35s
        ease,

        transform
        .35s
        ease;

}


.ars-collection-page
.design-buttons
a:hover{

    color:
        #fff;

    background:

        rgba(
            196,
            154,
            85,
            .1
        );

    border-color:

        rgba(
            196,
            154,
            85,
            .55
        );

    transform:
        translateY(
            -3px
        );

}


/* ========================================================= */
/* 51. ARS COLLECTION — DESIGN ICON SYSTEM                 */
/* ========================================================= */


/* ========================================================= */
/* 51.1 — DESIGN ICON                                    */
/* ========================================================= */

.ars-collection-page
.design-icon{

    position:relative;

    width:
        64px;

    height:
        64px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:
        28px;

    border-radius:
        20px;

    border:

        1px solid
        rgba(
            196,
            154,
            85,
            .22
        );

    background:

        linear-gradient(
            135deg,
            rgba(
                196,
                154,
                85,
                .12
            ),
            rgba(
                255,
                255,
                255,
                .025
            )
        );

    box-shadow:

        0
        0
        30px
        rgba(
            196,
            154,
            85,
            .06
        );

    font-size:
        1.45rem;

    transform:
        translateZ(
            35px
        );

    transition:

        transform
        .65s
        cubic-bezier(
            .16,
            1,
            .3,
            1
        ),

        border-color
        .4s
        ease,

        box-shadow
        .4s
        ease;

}


/* ========================================================= */
/* 51.2 — DESIGN ICON ENERGY                              */
/* ========================================================= */

.ars-collection-page
.design-icon::before{

    content:"";

    position:absolute;

    inset:
        -7px;

    border-radius:
        inherit;

    border:
        1px solid
        rgba(
            196,
            154,
            85,
            .08
        );

    transform:
        rotate(
            45deg
        );

    transition:

        transform
        .7s
        ease,

        opacity
        .5s
        ease;

    opacity:
        .6;

}


.ars-collection-page
.design-card:hover
.design-icon{

    transform:

        translateZ(
            55px
        )
        rotateY(
            12deg
        )
        rotateX(
            8deg
        );

    border-color:

        rgba(
            196,
            154,
            85,
            .55
        );

    box-shadow:

        0
        0
        40px
        rgba(
            196,
            154,
            85,
            .12
        );

}


.ars-collection-page
.design-card:hover
.design-icon::before{

    transform:
        rotate(
            135deg
        );

    opacity:
        1;

}


/* ========================================================= */
/* 51.3 — DESIGN STANDARD TITLE                           */
/* ========================================================= */

.ars-collection-page
.design-card
h3{

    margin:
        0 0 12px;

    color:
        #fff;

    font-size:
        1.18rem;

    font-weight:
        500;

}


/* ========================================================= */
/* 51.4 — DESIGN STANDARD TEXT                            */
/* ========================================================= */

.ars-collection-page
.design-card
p{

    margin:
        0 0 20px;

    color:

        rgba(
            255,
            255,
            255,
            .52
        );

    font-size:
        .73rem;

    line-height:
        1.75;

}


/* ========================================================= */
/* 51.5 — DESIGN LINK                                    */
/* ========================================================= */

.ars-collection-page
.design-card
> a{

    display:inline-flex;

    align-items:center;

    gap:
        7px;

    color:

        rgba(
            255,
            255,
            255,
            .65
        );

    font-size:
        .58rem;

    letter-spacing:
        .09em;

    text-transform:
        uppercase;

    transition:

        color
        .35s
        ease,

        gap
        .35s
        ease;

}


.ars-collection-page
.design-card
> a:hover{

    color:

        var(--ars-gold-light);

    gap:
        13px;

}


/* ========================================================= */
/* 52. ARS COLLECTION — DESIGN FOOTER                     */
/* ========================================================= */


/* ========================================================= */
/* 52.1 — DESIGN FOOTER                                  */
/* ========================================================= */

.ars-collection-page
.design-footer{

    display:grid;

    grid-template-columns:
        1.5fr
        1fr;

    align-items:center;

    gap:
        50px;

    margin-top:
        55px;

    padding:
        42px;

    border-radius:
        24px;

}


/* ========================================================= */
/* 52.2 — DESIGN FOOTER TITLE                            */
/* ========================================================= */

.ars-collection-page
.design-footer
h3{

    margin:
        0 0 14px;

    color:
        #fff;

    font-size:
        clamp(
            1.3rem,
            2.5vw,
            2rem
        );

    font-weight:
        500;

}


/* ========================================================= */
/* 52.3 — DESIGN FOOTER TEXT                             */
/* ========================================================= */

.ars-collection-page
.design-footer
p{

    max-width:
        720px;

    margin:
        0;

    color:

        rgba(
            255,
            255,
            255,
            .53
        );

    font-size:
        .76rem;

    line-height:
        1.85;

}


/* ========================================================= */
/* 52.4 — DESIGN ACTIONS                                 */
/* ========================================================= */

.ars-collection-page
.design-actions{

    display:flex;

    justify-content:flex-end;

    flex-wrap:wrap;

    gap:
        10px;

}


.ars-collection-page
.design-actions
a{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:

        12px
        18px;

    border:

        1px solid
        rgba(
            196,
            154,
            85,
            .28
        );

    border-radius:
        9px;

    color:

        rgba(
            255,
            255,
            255,
            .7
        );

    font-size:
        .56rem;

    letter-spacing:
        .06em;

    transition:

        color
        .35s
        ease,

        background
        .35s
        ease,

        border-color
        .35s
        ease,

        transform
        .35s
        ease;

}


.ars-collection-page
.design-actions
a:hover{

    color:
        #fff;

    background:

        rgba(
            196,
            154,
            85,
            .1
        );

    border-color:

        rgba(
            196,
            154,
            85,
            .55
        );

    transform:
        translateY(
            -3px
        );

}


/* ========================================================= */
/* 53. ARS COLLECTION — DESIGN RESPONSIVE                  */
/* ========================================================= */


/* ========================================================= */
/* 53.1 — TABLET                                         */
/* ========================================================= */

@media
(max-width:1000px){

    .ars-collection-page
    .design-card{

        grid-column:
            span 6;

    }

    .ars-collection-page
    .design-main{

        grid-column:
            span 12;

        grid-row:
            auto;

        min-height:
            540px;

    }

    .ars-collection-page
    .design-footer{

        grid-template-columns:
            1fr;

        gap:
            28px;

    }

    .ars-collection-page
    .design-actions{

        justify-content:
            flex-start;

    }

}


/* ========================================================= */
/* 53.2 — MOBILE                                         */
/* ========================================================= */

@media
(max-width:650px){

    .ars-collection-page
    .design-card,
    .ars-collection-page
    .design-main{

        grid-column:
            span 12;

    }

    .ars-collection-page
    .design-main{

        min-height:
            460px;

    }

    .ars-collection-page
    .design-content{

        left:
            24px;

        right:
            24px;

        bottom:
            24px;

    }

    .ars-collection-page
    .design-footer{

        padding:
            28px;

        border-radius:
            20px;

    }

}


/* ========================================================= */
/* 53.3 — REDUCED MOTION                                  */
/* ========================================================= */

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

    .ars-collection-page
    .design-card,
    .ars-collection-page
    .design-icon,
    .ars-collection-page
    .design-image
    img{

        transition:
            none;

    }

}
/* ========================================================= */
/* 54. ARS COLLECTION — FUTURE VISION SYSTEM                */
/* ========================================================= */


/* ========================================================= */
/* 54.1 — FUTURE HERO                                      */
/* ========================================================= */

.ars-collection-page
.future-hero{

    display:grid;

    grid-template-columns:
        1fr
        1fr;

    min-height:
        620px;

    overflow:hidden;

    border-radius:
        28px;

    position:relative;

    transform-style:
        preserve-3d;

}


/* ========================================================= */
/* 54.2 — FUTURE HERO LEFT                                 */
/* ========================================================= */

.ars-collection-page
.future-left{

    position:relative;

    z-index:
        3;

    display:flex;

    flex-direction:column;

    justify-content:center;

    padding:
        70px;

    background:

        radial-gradient(
            circle at 20% 40%,
            rgba(
                196,
                154,
                85,
                .12
            ),
            transparent 35%
        );

}


/* ========================================================= */
/* 54.3 — FUTURE HERO TITLE                                */
/* ========================================================= */

.ars-collection-page
.future-left
h3{

    margin:
        0 0 18px;

    color:
        #fff;

    font-size:
        clamp(
            2rem,
            4vw,
            4.2rem
        );

    line-height:
        1.05;

    font-weight:
        500;

    letter-spacing:
        -.04em;

}


/* ========================================================= */
/* 54.4 — FUTURE HERO TEXT                                 */
/* ========================================================= */

.ars-collection-page
.future-left
p{

    max-width:
        620px;

    margin:
        0 0 30px;

    color:

        rgba(
            255,
            255,
            255,
            .56
        );

    font-size:
        .82rem;

    line-height:
        1.9;

}


/* ========================================================= */
/* 54.5 — FUTURE BUTTONS                                   */
/* ========================================================= */

.ars-collection-page
.future-buttons{

    display:flex;

    flex-wrap:wrap;

    gap:
        10px;

}


.ars-collection-page
.future-buttons
a{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:

        13px
        20px;

    border:

        1px solid
        rgba(
            196,
            154,
            85,
            .32
        );

    border-radius:
        9px;

    color:

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

    font-size:
        .57rem;

    letter-spacing:
        .08em;

    transition:

        transform
        .35s
        ease,

        background
        .35s
        ease,

        color
        .35s
        ease,

        border-color
        .35s
        ease;

}


.ars-collection-page
.future-buttons
a:hover{

    transform:
        translateY(
            -3px
        );

    color:
        #fff;

    background:

        rgba(
            196,
            154,
            85,
            .11
        );

    border-color:

        rgba(
            196,
            154,
            85,
            .6
        );

}


/* ========================================================= */
/* 54.6 — FUTURE HERO RIGHT                                */
/* ========================================================= */

.ars-collection-page
.future-right{

    position:relative;

    min-height:
        620px;

    overflow:hidden;

}


/* ========================================================= */
/* 54.7 — FUTURE HERO IMAGE                                */
/* ========================================================= */

.ars-collection-page
.future-right
img{

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transform:
        scale(
            1.05
        );

    animation:

        arsFutureHeroFloat
        12s
        ease-in-out
        infinite
        alternate;

}


/* ========================================================= */
/* 54.8 — FUTURE IMAGE ATMOSPHERE                          */
/* ========================================================= */

.ars-collection-page
.future-right::before{

    content:"";

    position:absolute;

    z-index:
        2;

    inset:
        0;

    background:

        linear-gradient(
            90deg,
            rgba(
                10,
                10,
                10,
                .95
            ),
            transparent 55%
        );

}


.ars-collection-page
.future-right::after{

    content:"";

    position:absolute;

    z-index:
        3;

    inset:
        0;

    background:

        radial-gradient(
            circle at 70% 45%,
            rgba(
                196,
                154,
                85,
                .14
            ),
            transparent 35%
        );

    mix-blend-mode:
        screen;

}


@keyframes arsFutureHeroFloat{

    0%{

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

    }

    100%{

        transform:
            scale(
                1.12
            )
            translate3d(
                -12px,
                -8px,
                0
            );

    }

}


/* ========================================================= */
/* 55. ARS COLLECTION — FUTURE TECHNOLOGY GRID              */
/* ========================================================= */


/* ========================================================= */
/* 55.1 — FUTURE GRID                                     */
/* ========================================================= */

.ars-collection-page
.future-grid{

    display:grid;

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

    gap:
        22px;

    margin-top:
        28px;

}


/* ========================================================= */
/* 55.2 — FUTURE CARD                                     */
/* ========================================================= */

.ars-collection-page
.future-card{

    position:relative;

    min-height:
        260px;

    padding:
        30px;

    overflow:hidden;

    border-radius:
        22px;

    transform-style:
        preserve-3d;

    transition:

        transform
        .7s
        cubic-bezier(
            .16,
            1,
            .3,
            1
        ),

        border-color
        .4s
        ease,

        box-shadow
        .4s
        ease;

}


.ars-collection-page
.future-card:hover{

    transform:

        translateY(
            -10px
        )
        rotateX(
            2deg
        )
        rotateY(
            -2deg
        );

    border-color:

        rgba(
            196,
            154,
            85,
            .35
        );

    box-shadow:

        0
        30px
        80px
        rgba(
            0,
            0,
            0,
            .4
        );

}


/* ========================================================= */
/* 55.3 — FUTURE CARD ENERGY                              */
/* ========================================================= */

.ars-collection-page
.future-card::before{

    content:"";

    position:absolute;

    width:
        180px;

    height:
        180px;

    top:
        -90px;

    right:
        -70px;

    border-radius:
        50%;

    background:

        radial-gradient(
            circle,
            rgba(
                196,
                154,
                85,
                .14
            ),
            transparent 70%
        );

    filter:
        blur(
            8px
        );

    transition:

        transform
        .8s
        ease;

}


.ars-collection-page
.future-card:hover::before{

    transform:
        scale(
            1.8
        );

}


/* ========================================================= */
/* 55.4 — FUTURE CARD TITLE                               */
/* ========================================================= */

.ars-collection-page
.future-card
h3{

    position:relative;

    z-index:
        2;

    margin:
        45px 0 12px;

    color:
        #fff;

    font-size:
        1.15rem;

    font-weight:
        500;

}


/* ========================================================= */
/* 55.5 — FUTURE CARD TEXT                                */
/* ========================================================= */

.ars-collection-page
.future-card
p{

    position:relative;

    z-index:
        2;

    margin:
        0 0 20px;

    color:

        rgba(
            255,
            255,
            255,
            .5
        );

    font-size:
        .72rem;

    line-height:
        1.8;

}


/* ========================================================= */
/* 55.6 — FUTURE CARD LINK                                */
/* ========================================================= */

.ars-collection-page
.future-card
> span{

    position:relative;

    z-index:
        2;

    color:

        var(--ars-gold-light);

    font-size:
        .55rem;

    letter-spacing:
        .1em;

    text-transform:
        uppercase;

}


/* ========================================================= */
/* 55.7 — COMING SOON BADGE                               */
/* ========================================================= */

.ars-collection-page
.future-card
.coming-badge{

    position:absolute;

    top:
        22px;

    right:
        22px;

    padding:

        6px
        9px;

    border:

        1px solid
        rgba(
            196,
            154,
            85,
            .25
        );

    border-radius:
        5px;

    background:

        rgba(
            196,
            154,
            85,
            .06
        );

    color:

        rgba(
            255,
            255,
            255,
            .5
        );

    font-size:
        .45rem;

    letter-spacing:
        .12em;

}


/* ========================================================= */
/* 56. ARS COLLECTION — FUTURE ROADMAP                     */
/* ========================================================= */


/* ========================================================= */
/* 56.1 — ROADMAP CONTAINER                               */
/* ========================================================= */

.ars-collection-page
.roadmap{

    margin-top:
        28px;

    padding:
        50px;

    border-radius:
        24px;

    overflow:hidden;

}


/* ========================================================= */
/* 56.2 — ROADMAP TITLE                                   */
/* ========================================================= */

.ars-collection-page
.roadmap-title{

    text-align:center;

    max-width:
        700px;

    margin:
        0 auto 55px;

}


.ars-collection-page
.roadmap-title
h3{

    margin:
        0 0 12px;

    color:
        #fff;

    font-size:
        1.7rem;

    font-weight:
        500;

}


.ars-collection-page
.roadmap-title
p{

    margin:
        0;

    color:

        rgba(
            255,
            255,
            255,
            .5
        );

    font-size:
        .73rem;

    line-height:
        1.8;

}


/* ========================================================= */
/* 56.3 — ROADMAP STEPS                                  */
/* ========================================================= */

.ars-collection-page
.roadmap-steps{

    position:relative;

    display:grid;

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

    gap:
        20px;

}


/* ========================================================= */
/* 56.4 — ROADMAP ENERGY LINE                             */
/* ========================================================= */

.ars-collection-page
.roadmap-steps::before{

    content:"";

    position:absolute;

    top:
        31px;

    left:
        10%;

    right:
        10%;

    height:
        1px;

    background:

        linear-gradient(
            90deg,
            transparent,
            rgba(
                196,
                154,
                85,
                .45
            ),
            transparent
        );

}


/* ========================================================= */
/* 56.5 — ROADMAP STEP                                    */
/* ========================================================= */

.ars-collection-page
.roadmap-step{

    position:relative;

    z-index:
        2;

    text-align:center;

}


.ars-collection-page
.step-number{

    width:
        62px;

    height:
        62px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:
        0 auto 18px;

    border-radius:
        50%;

    border:

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

    background:

        rgba(
            12,
            12,
            12,
            .92
        );

    color:

        rgba(
            255,
            255,
            255,
            .45
        );

    font-size:
        .65rem;

    letter-spacing:
        .08em;

    box-shadow:

        0
        0
        0
        0
        rgba(
            196,
            154,
            85,
            0
        );

    transition:

        transform
        .5s
        ease,

        color
        .4s
        ease,

        border-color
        .4s
        ease,

        box-shadow
        .5s
        ease;

}


.ars-collection-page
.roadmap-step:hover
.step-number{

    transform:
        translateY(
            -6px
        );

    color:

        var(--ars-gold-light);

    border-color:

        rgba(
            196,
            154,
            85,
            .55
        );

    box-shadow:

        0
        0
        35px
        rgba(
            196,
            154,
            85,
            .12
        );

}


/* ========================================================= */
/* 56.6 — ACTIVE ROADMAP STEP                             */
/* ========================================================= */

.ars-collection-page
.roadmap-step.active
.step-number{

    color:
        #fff;

    border-color:

        rgba(
            196,
            154,
            85,
            .65
        );

    background:

        radial-gradient(
            circle,
            rgba(
                196,
                154,
                85,
                .18
            ),
            rgba(
                12,
                12,
                12,
                .96
            )
        );

    box-shadow:

        0
        0
        40px
        rgba(
            196,
            154,
            85,
            .14
        );

    animation:

        arsRoadmapPulse
        3s
        ease-in-out
        infinite;

}


@keyframes arsRoadmapPulse{

    0%,
    100%{

        box-shadow:

            0
            0
            25px
            rgba(
                196,
                154,
                85,
                .08
            );

    }

    50%{

        box-shadow:

            0
            0
            50px
            rgba(
                196,
                154,
                85,
                .2
            );

    }

}


/* ========================================================= */
/* 56.7 — ROADMAP STEP TITLE                              */
/* ========================================================= */

.ars-collection-page
.roadmap-step
h4{

    margin:
        0;

    color:

        rgba(
            255,
            255,
            255,
            .65
        );

    font-size:
        .67rem;

    font-weight:
        500;

    letter-spacing:
        .03em;

}


/* ========================================================= */
/* 57. ARS COLLECTION — FUTURE RESPONSIVE                  */
/* ========================================================= */


/* ========================================================= */
/* 57.1 — TABLET                                         */
/* ========================================================= */

@media
(max-width:1000px){

    .ars-collection-page
    .future-hero{

        grid-template-columns:
            1fr;

    }

    .ars-collection-page
    .future-left{

        min-height:
            500px;

        padding:
            55px;

    }

    .ars-collection-page
    .future-right{

        min-height:
            480px;

    }

    .ars-collection-page
    .future-grid{

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

    }

    .ars-collection-page
    .roadmap-steps{

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

        row-gap:
            35px;

    }

    .ars-collection-page
    .roadmap-steps::before{

        display:
            none;

    }

}


/* ========================================================= */
/* 57.2 — MOBILE                                         */
/* ========================================================= */

@media
(max-width:650px){

    .ars-collection-page
    .future-left{

        min-height:
            430px;

        padding:
            32px;

    }

    .ars-collection-page
    .future-right{

        min-height:
            360px;

    }

    .ars-collection-page
    .future-grid{

        grid-template-columns:
            1fr;

    }

    .ars-collection-page
    .future-card{

        min-height:
            230px;

        padding:
            26px;

    }

    .ars-collection-page
    .roadmap{

        padding:
            30px
            22px;

    }

    .ars-collection-page
    .roadmap-steps{

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

    }

}


/* ========================================================= */
/* 57.3 — REDUCED MOTION                                  */
/* ========================================================= */

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

    .ars-collection-page
    .future-right
    img{

        animation:
            none;

    }

    .ars-collection-page
    .roadmap-step.active
    .step-number{

        animation:
            none;

    }

}
/* ========================================================= */
/* 58. ARS COLLECTION — SIGNATURE COLLECTION SYSTEM         */
/* ========================================================= */


/* ========================================================= */
/* 58.1 — SIGNATURE SHOWCASE                               */
/* ========================================================= */

.ars-collection-page
.signature-showcase{

    display:grid;

    grid-template-columns:
        1.25fr
        1fr;

    min-height:
        620px;

    position:relative;

    overflow:hidden;

    border-radius:
        30px;

    transform-style:
        preserve-3d;

}


/* ========================================================= */
/* 58.2 — SIGNATURE IMAGE                                  */
/* ========================================================= */

.ars-collection-page
.signature-image{

    position:relative;

    min-height:
        620px;

    overflow:hidden;

}


.ars-collection-page
.signature-image::before{

    content:"";

    position:absolute;

    z-index:
        2;

    inset:
        0;

    background:

        linear-gradient(
            90deg,
            transparent 45%,
            rgba(
                8,
                8,
                8,
                .88
            )
        );

}


.ars-collection-page
.signature-image::after{

    content:"";

    position:absolute;

    z-index:
        3;

    inset:
        0;

    background:

        radial-gradient(
            circle at 40% 50%,
            rgba(
                196,
                154,
                85,
                .13
            ),
            transparent 42%
        );

    pointer-events:
        none;

}


.ars-collection-page
.signature-image
img{

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transition:

        transform
        1.4s
        cubic-bezier(
            .16,
            1,
            .3,
            1
        ),

        filter
        1s
        ease;

}


.ars-collection-page
.signature-showcase:hover
.signature-image
img{

    transform:
        scale(
            1.08
        );

    filter:

        saturate(
            1.12
        )
        contrast(
            1.06
        );

}


/* ========================================================= */
/* 58.3 — SIGNATURE CONTENT                                */
/* ========================================================= */

.ars-collection-page
.signature-content{

    position:relative;

    z-index:
        4;

    display:flex;

    flex-direction:column;

    justify-content:center;

    padding:
        70px;

    background:

        radial-gradient(
            circle at 70% 35%,
            rgba(
                196,
                154,
                85,
                .11
            ),
            transparent 38%
        );

}


.ars-collection-page
.signature-content
> span{

    margin-bottom:
        15px;

    color:

        var(--ars-gold-light);

    font-size:
        .56rem;

    letter-spacing:
        .24em;

}


.ars-collection-page
.signature-content
h3{

    margin:
        0 0 20px;

    color:
        #fff;

    font-size:
        clamp(
            2rem,
            4vw,
            4rem
        );

    line-height:
        1.05;

    font-weight:
        500;

    letter-spacing:
        -.04em;

}


.ars-collection-page
.signature-content
p{

    max-width:
        560px;

    margin:
        0 0 30px;

    color:

        rgba(
            255,
            255,
            255,
            .53
        );

    font-size:
        .8rem;

    line-height:
        1.9;

}


/* ========================================================= */
/* 58.4 — SIGNATURE ACTIONS                               */
/* ========================================================= */

.ars-collection-page
.signature-actions{

    display:flex;

    flex-wrap:wrap;

    gap:
        10px;

}


.ars-collection-page
.signature-actions
a{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:

        13px
        20px;

    border:

        1px solid
        rgba(
            196,
            154,
            85,
            .32
        );

    border-radius:
        9px;

    color:

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

    font-size:
        .56rem;

    letter-spacing:
        .07em;

    transition:

        transform
        .35s
        ease,

        background
        .35s
        ease,

        color
        .35s
        ease,

        border-color
        .35s
        ease;

}


.ars-collection-page
.signature-actions
a:hover{

    transform:
        translateY(
            -4px
        );

    color:
        #fff;

    background:

        rgba(
            196,
            154,
            85,
            .11
        );

    border-color:

        rgba(
            196,
            154,
            85,
            .62
        );

}


/* ========================================================= */
/* 59. ARS COLLECTION — SIGNATURE GRID                     */
/* ========================================================= */


/* ========================================================= */
/* 59.1 — SIGNATURE GRID                                  */
/* ========================================================= */

.ars-collection-page
.signature-grid{

    display:grid;

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

    gap:
        22px;

    margin-top:
        28px;

}


/* ========================================================= */
/* 59.2 — SIGNATURE CARD                                  */
/* ========================================================= */

.ars-collection-page
.signature-card{

    position:relative;

    min-height:
        270px;

    padding:
        32px;

    overflow:hidden;

    border-radius:
        22px;

    transform-style:
        preserve-3d;

    transition:

        transform
        .7s
        cubic-bezier(
            .16,
            1,
            .3,
            1
        ),

        border-color
        .4s
        ease,

        box-shadow
        .5s
        ease;

}


.ars-collection-page
.signature-card:hover{

    transform:

        translateY(
            -12px
        )
        rotateX(
            2deg
        )
        rotateY(
            -2deg
        );

    border-color:

        rgba(
            196,
            154,
            85,
            .4
        );

    box-shadow:

        0
        35px
        90px
        rgba(
            0,
            0,
            0,
            .45
        );

}


/* ========================================================= */
/* 59.3 — SIGNATURE CARD LIGHT                            */
/* ========================================================= */

.ars-collection-page
.signature-card::before{

    content:"";

    position:absolute;

    width:
        220px;

    height:
        220px;

    top:
        -120px;

    right:
        -100px;

    border-radius:
        50%;

    background:

        radial-gradient(
            circle,
            rgba(
                196,
                154,
                85,
                .13
            ),
            transparent 70%
        );

    filter:
        blur(
            8px
        );

    transition:

        transform
        .8s
        ease;

}


.ars-collection-page
.signature-card:hover::before{

    transform:
        scale(
            1.7
        );

}


/* ========================================================= */
/* 59.4 — SIGNATURE CARD TITLE                            */
/* ========================================================= */

.ars-collection-page
.signature-card
h3{

    position:relative;

    z-index:
        2;

    margin:
        45px 0 12px;

    color:
        #fff;

    font-size:
        1.15rem;

    font-weight:
        500;

}


/* ========================================================= */
/* 59.5 — SIGNATURE CARD TEXT                             */
/* ========================================================= */

.ars-collection-page
.signature-card
p{

    position:relative;

    z-index:
        2;

    margin:
        0 0 20px;

    color:

        rgba(
            255,
            255,
            255,
            .5
        );

    font-size:
        .72rem;

    line-height:
        1.8;

}


/* ========================================================= */
/* 59.6 — SIGNATURE CARD LINK                             */
/* ========================================================= */

.ars-collection-page
.signature-card
> span{

    position:relative;

    z-index:
        2;

    color:

        var(--ars-gold-light);

    font-size:
        .55rem;

    letter-spacing:
        .1em;

    text-transform:
        uppercase;

}


/* ========================================================= */
/* 59.7 — SIGNATURE COMING SOON                           */
/* ========================================================= */

.ars-collection-page
.signature-card
.coming-badge{

    position:absolute;

    top:
        20px;

    right:
        20px;

    padding:

        6px
        9px;

    border:

        1px solid
        rgba(
            196,
            154,
            85,
            .25
        );

    border-radius:
        5px;

    background:

        rgba(
            196,
            154,
            85,
            .05
        );

    color:

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

    font-size:
        .45rem;

    letter-spacing:
        .12em;

}


/* ========================================================= */
/* 60. ARS COLLECTION — SIGNATURE FOOTER                   */
/* ========================================================= */


/* ========================================================= */
/* 60.1 — SIGNATURE FOOTER                                */
/* ========================================================= */

.ars-collection-page
.signature-footer{

    display:grid;

    grid-template-columns:
        1.4fr
        1fr;

    align-items:center;

    gap:
        45px;

    margin-top:
        28px;

    padding:
        45px;

    border-radius:
        24px;

}


/* ========================================================= */
/* 60.2 — SIGNATURE FOOTER TITLE                          */
/* ========================================================= */

.ars-collection-page
.signature-footer
h3{

    margin:
        0 0 12px;

    color:
        #fff;

    font-size:
        clamp(
            1.4rem,
            2.5vw,
            2rem
        );

    font-weight:
        500;

}


/* ========================================================= */
/* 60.3 — SIGNATURE FOOTER TEXT                           */
/* ========================================================= */

.ars-collection-page
.signature-footer
p{

    max-width:
        720px;

    margin:
        0;

    color:

        rgba(
            255,
            255,
            255,
            .52
        );

    font-size:
        .75rem;

    line-height:
        1.85;

}


/* ========================================================= */
/* 60.4 — SIGNATURE BUTTONS                               */
/* ========================================================= */

.ars-collection-page
.signature-buttons{

    display:flex;

    justify-content:flex-end;

    flex-wrap:wrap;

    gap:
        10px;

}


.ars-collection-page
.signature-buttons
a{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:

        12px
        18px;

    border:

        1px solid
        rgba(
            196,
            154,
            85,
            .3
        );

    border-radius:
        9px;

    color:

        rgba(
            255,
            255,
            255,
            .7
        );

    font-size:
        .55rem;

    letter-spacing:
        .06em;

    transition:

        transform
        .35s
        ease,

        color
        .35s
        ease,

        background
        .35s
        ease,

        border-color
        .35s
        ease;

}


.ars-collection-page
.signature-buttons
a:hover{

    transform:
        translateY(
            -3px
        );

    color:
        #fff;

    background:

        rgba(
            196,
            154,
            85,
            .1
        );

    border-color:

        rgba(
            196,
            154,
            85,
            .58
        );

}


/* ========================================================= */
/* 61. ARS COLLECTION — SIGNATURE RESPONSIVE                */
/* ========================================================= */


/* ========================================================= */
/* 61.1 — TABLET                                         */
/* ========================================================= */

@media
(max-width:1000px){

    .ars-collection-page
    .signature-showcase{

        grid-template-columns:
            1fr;

    }

    .ars-collection-page
    .signature-image{

        min-height:
            520px;

    }

    .ars-collection-page
    .signature-content{

        min-height:
            480px;

        padding:
            55px;

    }

    .ars-collection-page
    .signature-grid{

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

    }

    .ars-collection-page
    .signature-footer{

        grid-template-columns:
            1fr;

    }

    .ars-collection-page
    .signature-buttons{

        justify-content:
            flex-start;

    }

}


/* ========================================================= */
/* 61.2 — MOBILE                                         */
/* ========================================================= */

@media
(max-width:650px){

    .ars-collection-page
    .signature-image{

        min-height:
            380px;

    }

    .ars-collection-page
    .signature-content{

        min-height:
            430px;

        padding:
            32px;

    }

    .ars-collection-page
    .signature-grid{

        grid-template-columns:
            1fr;

    }

    .ars-collection-page
    .signature-card{

        min-height:
            240px;

        padding:
            26px;

    }

    .ars-collection-page
    .signature-footer{

        padding:
            30px
            24px;

    }

}


/* ========================================================= */
/* 61.3 — REDUCED MOTION                                  */
/* ========================================================= */

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

    .ars-collection-page
    .signature-image
    img{

        transition:
            none;

    }

}
/* ========================================================= */
/* 62. ARS COLLECTION — COLLECTION HUB SYSTEM               */
/* ========================================================= */


/* ========================================================= */
/* 62.1 — HUB GRID                                         */
/* ========================================================= */

.ars-collection-page
.hub-grid{

    display:grid;

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

    gap:
        22px;

    perspective:
        1800px;

}


/* ========================================================= */
/* 62.2 — HUB CARD                                         */
/* ========================================================= */

.ars-collection-page
.hub-card{

    position:relative;

    display:flex;

    flex-direction:column;

    justify-content:flex-end;

    min-height:
        310px;

    padding:
        32px;

    overflow:hidden;

    border-radius:
        24px;

    text-decoration:
        none;

    transform-style:
        preserve-3d;

    transition:

        transform
        .7s
        cubic-bezier(
            .16,
            1,
            .3,
            1
        ),

        border-color
        .45s
        ease,

        box-shadow
        .45s
        ease;

}


/* ========================================================= */
/* 62.3 — HUB CARD LIGHT FIELD                             */
/* ========================================================= */

.ars-collection-page
.hub-card::before{

    content:"";

    position:absolute;

    width:
        260px;

    height:
        260px;

    top:
        -130px;

    right:
        -100px;

    border-radius:
        50%;

    background:

        radial-gradient(
            circle,
            rgba(
                196,
                154,
                85,
                .16
            ),
            transparent 68%
        );

    filter:
        blur(
            10px
        );

    transition:

        transform
        .9s
        cubic-bezier(
            .16,
            1,
            .3,
            1
        );

}


.ars-collection-page
.hub-card:hover::before{

    transform:
        scale(
            1.7
        );

}


/* ========================================================= */
/* 62.4 — HUB CARD ENERGY GRID                             */
/* ========================================================= */

.ars-collection-page
.hub-card::after{

    content:"";

    position:absolute;

    inset:
        0;

    background:

        linear-gradient(
            135deg,
            transparent 45%,
            rgba(
                196,
                154,
                85,
                .05
            ) 50%,
            transparent 55%
        );

    background-size:
        300%
        300%;

    opacity:
        0;

    transition:

        opacity
        .5s
        ease,

        background-position
        1s
        ease;

    pointer-events:
        none;

}


.ars-collection-page
.hub-card:hover::after{

    opacity:
        1;

    background-position:
        100%
        100%;

}


/* ========================================================= */
/* 62.5 — HUB CARD HOVER                                  */
/* ========================================================= */

.ars-collection-page
.hub-card:hover{

    transform:

        translateY(
            -14px
        )
        rotateX(
            3deg
        )
        rotateY(
            -3deg
        );

    border-color:

        rgba(
            196,
            154,
            85,
            .4
        );

    box-shadow:

        0
        35px
        100px
        rgba(
            0,
            0,
            0,
            .45
        ),

        0
        0
        50px
        rgba(
            196,
            154,
            85,
            .06
        );

}


/* ========================================================= */
/* 62.6 — HUB ICON                                         */
/* ========================================================= */

.ars-collection-page
.hub-icon{

    position:relative;

    z-index:
        3;

    width:
        68px;

    height:
        68px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:
        auto;

    border-radius:
        21px;

    border:

        1px solid
        rgba(
            196,
            154,
            85,
            .22
        );

    background:

        linear-gradient(
            135deg,
            rgba(
                196,
                154,
                85,
                .1
            ),
            rgba(
                255,
                255,
                255,
                .025
            )
        );

    box-shadow:

        inset
        0
        1px
        rgba(
            255,
            255,
            255,
            .06
        ),

        0
        0
        35px
        rgba(
            196,
            154,
            85,
            .06
        );

    font-size:
        1.45rem;

    transform:
        translateZ(
            45px
        );

    transition:

        transform
        .7s
        cubic-bezier(
            .16,
            1,
            .3,
            1
        ),

        border-color
        .4s
        ease,

        box-shadow
        .4s
        ease;

}


.ars-collection-page
.hub-card:hover
.hub-icon{

    transform:

        translateZ(
            70px
        )
        rotateY(
            12deg
        )
        rotateX(
            8deg
        );

    border-color:

        rgba(
            196,
            154,
            85,
            .6
        );

    box-shadow:

        0
        0
        45px
        rgba(
            196,
            154,
            85,
            .14
        );

}


/* ========================================================= */
/* 62.7 — HUB TITLE                                        */
/* ========================================================= */

.ars-collection-page
.hub-card
h3{

    position:relative;

    z-index:
        3;

    margin:
        0 0 12px;

    color:
        #fff;

    font-size:
        1.2rem;

    font-weight:
        500;

    transform:
        translateZ(
            35px
        );

}


/* ========================================================= */
/* 62.8 — HUB DESCRIPTION                                  */
/* ========================================================= */

.ars-collection-page
.hub-card
p{

    position:relative;

    z-index:
        3;

    margin:
        0 0 22px;

    color:

        rgba(
            255,
            255,
            255,
            .52
        );

    font-size:
        .72rem;

    line-height:
        1.8;

    transform:
        translateZ(
            25px
        );

}


/* ========================================================= */
/* 62.9 — HUB LINK                                         */
/* ========================================================= */

.ars-collection-page
.hub-card
> span{

    position:relative;

    z-index:
        3;

    color:

        var(--ars-gold-light);

    font-size:
        .56rem;

    letter-spacing:
        .1em;

    text-transform:
        uppercase;

    transform:
        translateZ(
            30px
        );

    transition:

        letter-spacing
        .35s
        ease;

}


.ars-collection-page
.hub-card:hover
> span{

    letter-spacing:
        .17em;

}


/* ========================================================= */
/* 63. ARS COLLECTION — COLLECTION BANNER                   */
/* ========================================================= */


/* ========================================================= */
/* 63.1 — COLLECTION BANNER                               */
/* ========================================================= */

.ars-collection-page
.collection-banner{

    position:relative;

    display:grid;

    grid-template-columns:
        1.5fr
        1fr;

    align-items:center;

    gap:
        50px;

    margin-top:
        28px;

    padding:
        52px;

    overflow:hidden;

    border-radius:
        26px;

}


/* ========================================================= */
/* 63.2 — BANNER ATMOSPHERE                                */
/* ========================================================= */

.ars-collection-page
.collection-banner::before{

    content:"";

    position:absolute;

    width:
        500px;

    height:
        500px;

    top:
        -280px;

    left:
        30%;

    border-radius:
        50%;

    background:

        radial-gradient(
            circle,
            rgba(
                196,
                154,
                85,
                .13
            ),
            transparent 70%
        );

    filter:
        blur(
            20px
        );

    pointer-events:
        none;

}


/* ========================================================= */
/* 63.3 — BANNER CONTENT                                  */
/* ========================================================= */

.ars-collection-page
.banner-content{

    position:relative;

    z-index:
        2;

}


.ars-collection-page
.banner-content
h2{

    margin:
        0 0 15px;

    color:
        #fff;

    font-size:
        clamp(
            1.8rem,
            3vw,
            3rem
        );

    line-height:
        1.1;

    font-weight:
        500;

    letter-spacing:
        -.03em;

}


.ars-collection-page
.banner-content
p{

    max-width:
        760px;

    margin:
        0;

    color:

        rgba(
            255,
            255,
            255,
            .52
        );

    font-size:
        .76rem;

    line-height:
        1.85;

}


/* ========================================================= */
/* 63.4 — BANNER ACTIONS                                  */
/* ========================================================= */

.ars-collection-page
.banner-actions{

    position:relative;

    z-index:
        2;

    display:flex;

    justify-content:flex-end;

    flex-wrap:wrap;

    gap:
        10px;

}


.ars-collection-page
.banner-actions
a{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:

        12px
        18px;

    border:

        1px solid
        rgba(
            196,
            154,
            85,
            .28
        );

    border-radius:
        9px;

    color:

        rgba(
            255,
            255,
            255,
            .7
        );

    font-size:
        .55rem;

    letter-spacing:
        .07em;

    text-decoration:
        none;

    transition:

        transform
        .35s
        ease,

        color
        .35s
        ease,

        background
        .35s
        ease,

        border-color
        .35s
        ease;

}


.ars-collection-page
.banner-actions
a:hover{

    transform:
        translateY(
            -3px
        );

    color:
        #fff;

    background:

        rgba(
            196,
            154,
            85,
            .1
        );

    border-color:

        rgba(
            196,
            154,
            85,
            .58
        );

}


/* ========================================================= */
/* 64. ARS COLLECTION — HUB RESPONSIVE                     */
/* ========================================================= */


/* ========================================================= */
/* 64.1 — TABLET                                           */
/* ========================================================= */

@media
(max-width:1000px){

    .ars-collection-page
    .hub-grid{

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

    }

    .ars-collection-page
    .collection-banner{

        grid-template-columns:
            1fr;

        gap:
            30px;

        padding:
            42px;

    }

    .ars-collection-page
    .banner-actions{

        justify-content:
            flex-start;

    }

}


/* ========================================================= */
/* 64.2 — MOBILE                                           */
/* ========================================================= */

@media
(max-width:650px){

    .ars-collection-page
    .hub-grid{

        grid-template-columns:
            1fr;

    }

    .ars-collection-page
    .hub-card{

        min-height:
            270px;

        padding:
            28px;

    }

    .ars-collection-page
    .collection-banner{

        padding:
            30px
            24px;

        border-radius:
            20px;

    }

    .ars-collection-page
    .banner-actions{

        display:grid;

        grid-template-columns:
            1fr;

    }

    .ars-collection-page
    .banner-actions
    a{

        width:
            100%;

    }

}


/* ========================================================= */
/* 64.3 — REDUCED MOTION                                  */
/* ========================================================= */

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

    .ars-collection-page
    .hub-card,
    .ars-collection-page
    .hub-icon{

        transition:
            none;

    }

}
/* ========================================================= */
/* 65. ARS COLLECTION — VISUAL GALLERY SYSTEM               */
/* ========================================================= */


/* ========================================================= */
/* 65.1 — GALLERY GRID                                     */
/* ========================================================= */

.ars-collection-page
.gallery-grid{

    display:grid;

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

    grid-auto-rows:
        260px;

    gap:
        20px;

    perspective:
        1800px;

}


/* ========================================================= */
/* 65.2 — GALLERY ITEM                                     */
/* ========================================================= */

.ars-collection-page
.gallery-item{

    position:relative;

    overflow:hidden;

    border-radius:
        22px;

    transform-style:
        preserve-3d;

    transition:

        transform
        .75s
        cubic-bezier(
            .16,
            1,
            .3,
            1
        ),

        border-color
        .4s
        ease,

        box-shadow
        .5s
        ease;

}


.ars-collection-page
.gallery-item:hover{

    transform:

        translateY(
            -10px
        )
        rotateX(
            2deg
        )
        rotateY(
            -2deg
        );

    border-color:

        rgba(
            196,
            154,
            85,
            .4
        );

    box-shadow:

        0
        35px
        90px
        rgba(
            0,
            0,
            0,
            .5
        );

}


/* ========================================================= */
/* 65.3 — LARGE GALLERY ITEM                              */
/* ========================================================= */

.ars-collection-page
.gallery-large{

    grid-column:
        span 2;

    grid-row:
        span 2;

}


/* ========================================================= */
/* 65.4 — GALLERY IMAGE                                    */
/* ========================================================= */

.ars-collection-page
.gallery-item
img{

    position:absolute;

    inset:
        0;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transition:

        transform
        1.2s
        cubic-bezier(
            .16,
            1,
            .3,
            1
        ),

        filter
        .8s
        ease;

}


.ars-collection-page
.gallery-item:hover
img{

    transform:
        scale(
            1.1
        );

    filter:

        saturate(
            1.12
        )
        contrast(
            1.08
        );

}


/* ========================================================= */
/* 65.5 — IMAGE ATMOSPHERE                                 */
/* ========================================================= */

.ars-collection-page
.gallery-item::before{

    content:"";

    position:absolute;

    z-index:
        2;

    inset:
        0;

    background:

        linear-gradient(
            180deg,
            transparent 25%,
            rgba(
                0,
                0,
                0,
                .82
            )
        );

    opacity:
        .72;

    transition:

        opacity
        .5s
        ease;

}


.ars-collection-page
.gallery-item:hover::before{

    opacity:
        .92;

}


/* ========================================================= */
/* 65.6 — GALLERY ENERGY SWEEP                             */
/* ========================================================= */

.ars-collection-page
.gallery-item::after{

    content:"";

    position:absolute;

    z-index:
        3;

    top:
        -120%;

    left:
        -30%;

    width:
        45%;

    height:
        340%;

    background:

        linear-gradient(
            90deg,
            transparent,
            rgba(
                255,
                255,
                255,
                .1
            ),
            transparent
        );

    transform:
        rotate(
            22deg
        );

    opacity:
        0;

    pointer-events:
        none;

}


.ars-collection-page
.gallery-item:hover::after{

    opacity:
        1;

    animation:

        arsGallerySweep
        1.2s
        ease
        forwards;

}


@keyframes arsGallerySweep{

    0%{

        left:
            -60%;

    }

    100%{

        left:
            130%;

    }

}


/* ========================================================= */
/* 65.7 — GALLERY INFORMATION                              */
/* ========================================================= */

.ars-collection-page
.gallery-info{

    position:absolute;

    z-index:
        5;

    right:
        24px;

    bottom:
        22px;

    left:
        24px;

    transform:
        translateZ(
            35px
        );

}


.ars-collection-page
.gallery-info
h3{

    margin:
        0 0 7px;

    color:
        #fff;

    font-size:
        .95rem;

    font-weight:
        500;

}


.ars-collection-page
.gallery-info
span{

    color:

        var(--ars-gold-light);

    font-size:
        .5rem;

    letter-spacing:
        .13em;

    text-transform:
        uppercase;

}


/* ========================================================= */
/* 65.8 — VIDEO GALLERY                                    */
/* ========================================================= */

.ars-collection-page
.gallery-video{

    display:flex;

    align-items:center;

    justify-content:center;

    background:

        radial-gradient(
            circle at center,
            rgba(
                196,
                154,
                85,
                .12
            ),
            transparent 60%
        );

}


.ars-collection-page
.video-placeholder{

    position:relative;

    z-index:
        4;

    display:flex;

    align-items:center;

    justify-content:center;

    width:
        72px;

    height:
        72px;

    border:

        1px solid
        rgba(
            196,
            154,
            85,
            .45
        );

    border-radius:
        50%;

    background:

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

    color:

        var(--ars-gold-light);

    font-size:
        1rem;

    cursor:
        pointer;

    box-shadow:

        0
        0
        35px
        rgba(
            196,
            154,
            85,
            .12
        );

    transition:

        transform
        .5s
        cubic-bezier(
            .16,
            1,
            .3,
            1
        ),

        background
        .4s
        ease,

        box-shadow
        .4s
        ease;

}


.ars-collection-page
.gallery-video:hover
.video-placeholder{

    transform:
        scale(
            1.15
        );

    background:

        rgba(
            196,
            154,
            85,
            .12
        );

    box-shadow:

        0
        0
        60px
        rgba(
            196,
            154,
            85,
            .2
        );

}


/* ========================================================= */
/* 66. ARS COLLECTION — MEDIA PREVIEW                      */
/* ========================================================= */


/* ========================================================= */
/* 66.1 — MEDIA PREVIEW GRID                              */
/* ========================================================= */

.ars-collection-page
.media-preview{

    display:grid;

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

    gap:
        20px;

    margin-top:
        28px;

}


/* ========================================================= */
/* 66.2 — MEDIA CARD                                      */
/* ========================================================= */

.ars-collection-page
.media-card{

    position:relative;

    min-height:
        230px;

    padding:
        30px;

    overflow:hidden;

    border-radius:
        20px;

    transform-style:
        preserve-3d;

    transition:

        transform
        .65s
        cubic-bezier(
            .16,
            1,
            .3,
            1
        ),

        border-color
        .4s
        ease,

        box-shadow
        .4s
        ease;

}


.ars-collection-page
.media-card:hover{

    transform:

        translateY(
            -10px
        )
        rotateX(
            2deg
        )
        rotateY(
            -2deg
        );

    border-color:

        rgba(
            196,
            154,
            85,
            .35
        );

    box-shadow:

        0
        30px
        80px
        rgba(
            0,
            0,
            0,
            .45
        );

}


/* ========================================================= */
/* 66.3 — MEDIA ICON                                      */
/* ========================================================= */

.ars-collection-page
.media-icon{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    width:
        58px;

    height:
        58px;

    margin-bottom:
        35px;

    border:

        1px solid
        rgba(
            196,
            154,
            85,
            .2
        );

    border-radius:
        17px;

    background:

        rgba(
            196,
            154,
            85,
            .055
        );

    font-size:
        1.2rem;

    transform:
        translateZ(
            40px
        );

    transition:

        transform
        .6s
        ease,

        border-color
        .4s
        ease;

}


.ars-collection-page
.media-card:hover
.media-icon{

    transform:

        translateZ(
            65px
        )
        rotateY(
            12deg
        );

    border-color:

        rgba(
            196,
            154,
            85,
            .55
        );

}


/* ========================================================= */
/* 66.4 — MEDIA TITLE                                     */
/* ========================================================= */

.ars-collection-page
.media-card
h3{

    margin:
        0 0 10px;

    color:
        #fff;

    font-size:
        1rem;

    font-weight:
        500;

}


/* ========================================================= */
/* 66.5 — MEDIA DESCRIPTION                               */
/* ========================================================= */

.ars-collection-page
.media-card
p{

    margin:
        0 0 20px;

    color:

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

    font-size:
        .68rem;

    line-height:
        1.75;

}


/* ========================================================= */
/* 66.6 — MEDIA LINK                                      */
/* ========================================================= */

.ars-collection-page
.media-card
a{

    color:

        var(--ars-gold-light);

    font-size:
        .54rem;

    letter-spacing:
        .1em;

    text-decoration:
        none;

    transition:

        letter-spacing
        .3s
        ease;

}


.ars-collection-page
.media-card
a:hover{

    letter-spacing:
        .16em;

}


/* ========================================================= */
/* 67. ARS COLLECTION — GALLERY RESPONSIVE                 */
/* ========================================================= */


/* ========================================================= */
/* 67.1 — TABLET                                           */
/* ========================================================= */

@media
(max-width:1000px){

    .ars-collection-page
    .gallery-grid{

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

    }

    .ars-collection-page
    .gallery-large{

        grid-column:
            span 2;

    }

    .ars-collection-page
    .media-preview{

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

    }

}


/* ========================================================= */
/* 67.2 — MOBILE                                           */
/* ========================================================= */

@media
(max-width:650px){

    .ars-collection-page
    .gallery-grid{

        grid-template-columns:
            1fr;

        grid-auto-rows:
            240px;

    }

    .ars-collection-page
    .gallery-large{

        grid-column:
            span 1;

        grid-row:
            span 1;

    }

    .ars-collection-page
    .media-preview{

        grid-template-columns:
            1fr;

    }

    .ars-collection-page
    .gallery-info{

        right:
            18px;

        bottom:
            18px;

        left:
            18px;

    }

}


/* ========================================================= */
/* 






/* ========================================================= */
/*                                                         */
/*       END OF ARS GLOBAL VISUAL DNA                      */
/*       START OF ARS COMPANY UNIQUE DESIGN                */
/*                                                         */
/* ========================================================= */