/* ==========================================================
   DESSEIN ART
   COMPLETE CSS
   SCREEN 1 + SCREEN 2 + SCREEN 3
   ========================================================== */


/* ==========================================================
   SCREEN 1 — CINEMATIC HERO
   ========================================================== */


/* ==========================================================
   VARIABLES
   ========================================================== */

#dessein-art-hero {

    --da-zoom: 1;

    --da-start-opacity: 1;
    --da-start-y: 0px;

    --da-art-container: 0;
    --da-art-y: 8px;
    --da-art-scale: .985;

    --da-shadow: 0;

    --da-s1: 0;
    --da-s2: 0;
    --da-s3: 0;
    --da-s4: 0;
    --da-s5: 0;
    --da-s6: 0;

    --da-final-art: 0;

    --da-final-opacity: 0;
    --da-final-y: 24px;
    --da-final-events: none;

    --da-scroll-opacity: 1;

    --da-shade: .10;
}


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

.da-hero {

    position: relative;

    width: 100vw;
    height: 320vh;

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

    background: #151310;
}


/* ==========================================================
   FIXED SCENE
   ========================================================== */

.da-sticky {

    position: absolute;

    top: 0;
    left: 0;

    width: 100vw;

    height: 100vh;
    height: 100svh;

    overflow: hidden;

    background: #151310;

    z-index: 20;
}


.da-sticky.da-is-fixed {

    position: fixed;

    top: 0;
    left: 0;
}


.da-sticky.da-is-ended {

    position: absolute;

    top: auto;
    bottom: 0;
    left: 0;
}


/* ==========================================================
   SCENE
   ========================================================== */

.da-scene {

    position: absolute;

    left: 50%;
    top: 50%;

    width: max(100vw, 150vh);
    height: max(66.6667vw, 100vh);

    transform:
        translate(-50%, -50%)
        scale(var(--da-zoom, 1));

    transform-origin: 50% 43%;

    will-change: transform;
}


/* ==========================================================
   ROOM
   ========================================================== */

.da-room {

    position: absolute;

    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

    max-width: none !important;

    object-fit: fill;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
}


/* ==========================================================
   ART CONTAINER
   ========================================================== */

.da-art {

    position: absolute;

    left: 43.05%;
    top: 22.5%;

    width: 18.5%;
    height: 38%;

    z-index: 3;

    overflow: visible;

    opacity: var(--da-art-container, 0);

    transform:
        translateY(var(--da-art-y, 8px))
        scale(var(--da-art-scale, .985));

    transform-origin: center center;

    pointer-events: none;

    will-change:
        opacity,
        transform;

    --da-art-image:
        url("https://dessein.ru/wp-content/uploads/2026/09/dessein-art-painting.webp");
}


/* ==========================================================
   CANVAS SHADOW
   ========================================================== */

.da-art-shadow {

    position: absolute;

    inset: 0;

    z-index: 0;

    border: 0 !important;
    outline: 0 !important;

    background: transparent;

    box-shadow:
        0 14px 34px rgba(0,0,0,.17),
        0 4px 12px rgba(0,0,0,.10);

    opacity:
        calc(var(--da-final-art, 0) * .72);

    pointer-events: none;
}


/* ==========================================================
   COMMON ART IMAGE
   ========================================================== */

.da-stroke,
.da-art-final {

    position: absolute;

    inset: 0;

    margin: 0;
    padding: 0;

    border: 0 !important;
    outline: 0 !important;

    background-image:
        var(--da-art-image);

    background-position:
        center center !important;

    background-size:
        100% 100% !important;

    background-repeat:
        no-repeat !important;
}


/* ==========================================================
   BRUSH STROKES
   ========================================================== */

.da-stroke {

    z-index: 2;

    filter:
        saturate(.94)
        contrast(1.03);

    transform: none;

    will-change: opacity;

    -webkit-mask-size:
        100% 100% !important;

    mask-size:
        100% 100% !important;

    -webkit-mask-position:
        center center !important;

    mask-position:
        center center !important;

    -webkit-mask-repeat:
        no-repeat !important;

    mask-repeat:
        no-repeat !important;
}


.da-stroke-1 {

    opacity:
        calc(var(--da-s1, 0) * .96);

    -webkit-mask-image:
        url("https://dessein.ru/wp-content/dessein-art/images/da-brush-1.webp");

    mask-image:
        url("https://dessein.ru/wp-content/dessein-art/images/da-brush-1.webp");
}


.da-stroke-2 {

    opacity:
        calc(var(--da-s2, 0) * .96);

    -webkit-mask-image:
        url("https://dessein.ru/wp-content/dessein-art/images/da-brush-2.webp");

    mask-image:
        url("https://dessein.ru/wp-content/dessein-art/images/da-brush-2.webp");
}


.da-stroke-3 {

    opacity:
        calc(var(--da-s3, 0) * .96);

    -webkit-mask-image:
        url("https://dessein.ru/wp-content/dessein-art/images/da-brush-3.webp");

    mask-image:
        url("https://dessein.ru/wp-content/dessein-art/images/da-brush-3.webp");
}


.da-stroke-4 {

    opacity:
        calc(var(--da-s4, 0) * .96);

    -webkit-mask-image:
        url("https://dessein.ru/wp-content/dessein-art/images/da-brush-4.webp");

    mask-image:
        url("https://dessein.ru/wp-content/dessein-art/images/da-brush-4.webp");
}


.da-stroke-5 {

    opacity:
        calc(var(--da-s5, 0) * .96);

    -webkit-mask-image:
        url("https://dessein.ru/wp-content/dessein-art/images/da-brush-5.webp");

    mask-image:
        url("https://dessein.ru/wp-content/dessein-art/images/da-brush-5.webp");
}


.da-stroke-6 {

    opacity:
        calc(var(--da-s6, 0) * .96);

    -webkit-mask-image:
        url("https://dessein.ru/wp-content/dessein-art/images/da-brush-6.webp");

    mask-image:
        url("https://dessein.ru/wp-content/dessein-art/images/da-brush-6.webp");
}


/* ==========================================================
   FINAL PAINTING
   ========================================================== */

.da-art-final {

    z-index: 3;

    opacity:
        var(--da-final-art, 0);

    border: 0 !important;
    outline: 0 !important;

    box-shadow: none;

    will-change: opacity;
}


/* ==========================================================
   CINEMATIC SHADE
   ========================================================== */

.da-shade {

    position: absolute;

    inset: 0;

    z-index: 4;

    pointer-events: none;

    background:

        radial-gradient(
            ellipse at 18% 72%,
            rgba(12,10,8,.34) 0%,
            rgba(12,10,8,.16) 32%,
            transparent 58%
        ),

        linear-gradient(
            90deg,
            rgba(12,10,8,.20) 0%,
            rgba(12,10,8,.03) 48%,
            rgba(12,10,8,.08) 100%
        );

    opacity:
        var(--da-shade, .10);
}


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

.da-copy {

    position: absolute;

    left: 7vw;

    z-index: 10;

    color: #fff;
}


.da-kicker {

    margin: 0 0 22px 0;

    padding: 0;

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

    font-size: 11px;

    line-height: 1;

    letter-spacing: .34em;

    text-transform: uppercase;
}


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

.da-copy-start {

    top: 50%;

    width:
        min(850px, 72vw);

    transform:
        translateY(
            calc(
                -50% +
                var(--da-start-y, 0px)
            )
        );

    opacity:
        var(--da-start-opacity, 1);

    pointer-events: none;
}


#dessein-art-hero .da-copy-start h1 {

    max-width: 820px;

    margin: 0 !important;
    padding: 0 !important;

    color: #fff !important;

    font-size:
        clamp(
            42px,
            5.6vw,
            92px
        ) !important;

    line-height:
        .99 !important;

    font-weight:
        300 !important;

    letter-spacing:
        -.035em !important;
}


/* ==========================================================
   FINAL TEXT
   ========================================================== */

.da-copy-final {

    left: 7vw;

    bottom: 9vh;

    width:
        min(620px, 42vw);

    transform:
        translateY(
            var(--da-final-y, 24px)
        );

    opacity:
        var(--da-final-opacity, 0);

    pointer-events:
        var(--da-final-events, none);
}


#dessein-art-hero .da-copy-final h2 {

    max-width: 620px;

    margin: 0 !important;
    padding: 0 !important;

    color: #fff !important;

    font-size:
        clamp(
            18px,
            3.25vw,
            48px
        ) !important;

    line-height:
        1.05 !important;

    font-weight:
        300 !important;

    letter-spacing:
        -.035em !important;
}


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

.da-button {

    display: inline-flex;

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

    margin-top: 34px;

    padding:
        14px 24px;

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

    color:
        #fff !important;

    text-decoration:
        none !important;

    font-size:
        12px;

    line-height:
        1;

    letter-spacing:
        .08em;

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

    backdrop-filter:
        blur(7px);

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

    transition:
        background .3s ease,
        color .3s ease,
        border-color .3s ease;
}


.da-button:hover {

    background:
        #fff;

    border-color:
        #fff;

    color:
        #181512 !important;
}


/* ==========================================================
   SCROLL HINT
   ========================================================== */

.da-scroll-hint {

    position: absolute;

    left: 7vw;
    bottom: 28px;

    z-index: 10;

    display: flex;

    align-items: center;

    gap: 13px;

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

    font-size:
        9px;

    line-height:
        1;

    letter-spacing:
        .28em;

    opacity:
        var(--da-scroll-opacity, 1);

    pointer-events: none;
}


.da-scroll-hint i {

    position: relative;

    display: block;

    width: 55px;
    height: 1px;

    overflow: hidden;

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


.da-scroll-hint i::after {

    content: "";

    position: absolute;

    top: 0;
    left: -20px;

    width: 20px;
    height: 1px;

    background: #fff;

    animation:
        daScrollHint
        2s
        ease-in-out
        infinite;
}


@keyframes daScrollHint {

    0% {
        left: -20px;
    }

    65%,
    100% {
        left: 55px;
    }
}


/* ==========================================================
   SCREEN 1 — MOBILE
   ========================================================== */

@media (max-width: 768px) {

    .da-hero {

        height: 250svh;
    }


    .da-copy {

        left: 7vw;

        width: 86vw;
    }


    .da-copy-start {

        top: auto;

        bottom: 12vh;

        transform:
            translateY(
                var(--da-start-y, 0px)
            );
    }


    #dessein-art-hero .da-copy-start h1 {

        max-width: 86vw;

        font-size:
            clamp(
                38px,
                11vw,
                58px
            ) !important;

        line-height:
            .98 !important;
    }


    .da-copy-final {

        bottom: 12vh;

        width: 86vw;
    }


    #dessein-art-hero .da-copy-final h2 {

        max-width: 86vw;

        font-size:
            clamp(
                24px,
                7.5vw,
                38px
            ) !important;

        line-height:
            1.06 !important;
    }


    .da-button {

        margin-top: 24px;

        padding:
            13px 18px;
    }


    .da-scroll-hint {

        left: 7vw;
        bottom: 22px;
    }

}


/* ==========================================================
   SCREEN 1 — REDUCED MOTION
   ========================================================== */

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

    .da-hero {

        height: 100svh;
    }


    .da-sticky {

        position: relative;
    }


    .da-scene {

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


    .da-art {

        opacity: 1;

        transform: none;
    }


    .da-stroke {

        display: none;
    }


    .da-art-final {

        opacity: 1;
    }


    .da-copy-start {

        display: none;
    }


    .da-copy-final {

        opacity: 1;

        transform: none;

        pointer-events: auto;
    }


    .da-scroll-hint {

        display: none;
    }

}



/* ==========================================================
   SCREEN 2 — PALETTE
   ========================================================== */

#dessein-art-palette {

    position: relative;

    width: 100%;

    overflow: hidden;

    background: #f2eee8;

    color: #1e1a17;
}


/* ==========================================================
   SCREEN 2 — INNER
   ========================================================== */

#dessein-art-palette .da-palette-inner {

    width:
        min(1380px, 92vw);

    margin:
        0 auto;

    padding:
        120px 0 140px;
}


/* ==========================================================
   SCREEN 2 — COPY
   ========================================================== */

#dessein-art-palette .da-palette-copy {

    position: relative;

    z-index: 3;

    max-width: 760px;

    margin-bottom: 70px;
}


#dessein-art-palette .da-palette-kicker {

    margin-bottom: 18px;

    font-size: 11px;

    line-height: 1;

    letter-spacing: .30em;

    text-transform: uppercase;

    color:
        rgba(30,26,23,.52);
}


#dessein-art-palette .da-palette-copy h2 {

    margin:
        0 0 24px !important;

    padding:
        0 !important;

    font-size:
        clamp(
            42px,
            5vw,
            78px
        ) !important;

    line-height:
        .98 !important;

    font-weight:
        300 !important;

    letter-spacing:
        -.04em !important;

    color:
        #1e1a17 !important;
}


#dessein-art-palette .da-palette-copy p {

    margin: 0;

    font-size:
        clamp(
            18px,
            1.6vw,
            25px
        );

    line-height: 1.35;

    font-weight: 300;

    color:
        rgba(30,26,23,.66);
}


/* ==========================================================
   SCREEN 2 — VISUAL
   ========================================================== */

#dessein-art-palette .da-palette-visual {

    position: relative;

    width: 100%;

    min-height: 760px;

    overflow: hidden;

    isolation: isolate;

    background:
        #d9d0c6;
}


#dessein-art-palette .da-palette-room {

    position: absolute;

    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: cover;

    border: 0 !important;

    filter:
        saturate(.88)
        contrast(.96)
        brightness(.94);
}


/* ==========================================================
   SCREEN 2 — VISUAL OVERLAY
   ========================================================== */

#dessein-art-palette .da-palette-visual::after {

    content: "";

    position: absolute;

    inset: 0;

    z-index: 1;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(242,238,232,.26) 0%,
            rgba(242,238,232,.02) 45%,
            rgba(20,18,16,.08) 100%
        );
}


/* ==========================================================
   SCREEN 2 — SOURCE POINTS
   ========================================================== */

#dessein-art-palette .da-source {

    position: absolute;

    z-index: 6;

    display: flex;

    align-items: center;

    gap: 10px;

    opacity: 0;

    transform:
        translateY(10px);

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

    font-size: 11px;

    line-height: 1;

    letter-spacing: .16em;

    text-transform: uppercase;

    will-change:
        opacity,
        transform;
}


#dessein-art-palette .da-source span {

    display: block;

    flex:
        0 0 12px;

    width: 12px;

    height: 12px;

    box-sizing: border-box;

    border-radius: 50%;

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

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

    box-shadow:
        0 0 0 5px rgba(255,255,255,.12),
        0 0 18px rgba(255,255,255,.22);

    transition:
        background-color .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}


#dessein-art-palette .da-source em {

    display: block;

    font-style: normal;

    opacity: .92;
}


/* ==========================================================
   SCREEN 2 — SOURCE POSITIONS
   ========================================================== */

#dessein-art-palette .da-source-1 {

    left: 50%;

    top: 18%;
}


#dessein-art-palette .da-source-2 {

    left: 29%;

    top: 38%;
}


#dessein-art-palette .da-source-3 {

    left: 73%;

    top: 44%;
}


#dessein-art-palette .da-source-4 {

    left: 19%;

    top: 70%;
}


#dessein-art-palette .da-source-5 {

    left: 62%;

    top: 24%;
}


/* ==========================================================
   SCREEN 2 — PALETTE
   ========================================================== */

#dessein-art-palette .da-palette-swatches {

    position: absolute;

    right: 34px;

    bottom: 34px;

    z-index: 10;

    display: flex;

    gap: 8px;

    padding: 10px;

    background:
        rgba(20,18,16,.25);

    backdrop-filter:
        blur(10px);

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


#dessein-art-palette .da-swatch {

    width: 62px;

    height: 62px;

    opacity: .26;

    transform:
        scale(.94);

    transform-origin:
        center;

    filter:
        saturate(.55)
        brightness(.88);

    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.20);

    will-change:
        opacity,
        transform,
        filter;
}


#dessein-art-palette .da-swatch-1 {

    background:
        #d9d1c4;
}


#dessein-art-palette .da-swatch-2 {

    background:
        #afa397;
}


#dessein-art-palette .da-swatch-3 {

    background:
        #766456;
}


#dessein-art-palette .da-swatch-4 {

    background:
        #4e4138;
}


#dessein-art-palette .da-swatch-5 {

    background:
        #b58a4b;
}


/* ==========================================================
   SCREEN 2 — FLYING PARTICLES
   ========================================================== */

#dessein-art-palette .da-palette-particle {

    position: absolute;

    left: 0;

    top: 0;

    width: 14px;

    height: 14px;

    margin:
        -7px 0 0 -7px;

    z-index: 20;

    border-radius: 50%;

    pointer-events: none;

    opacity: 0;

    box-shadow:
        0 0 0 6px rgba(255,255,255,.14),
        0 0 26px rgba(255,255,255,.48);

    will-change:
        transform,
        opacity;
}


/* ==========================================================
   SCREEN 2 — FINAL PHRASE
   ========================================================== */

#dessein-art-palette .da-palette-final {

    max-width: 900px;

    margin:
        72px 0 0 auto;

    text-align: right;

    opacity: 0;

    transform:
        translateY(30px);

    will-change:
        opacity,
        transform;
}


#dessein-art-palette .da-palette-final p {

    margin: 0;

    font-size:
        clamp(
            28px,
            3vw,
            48px
        );

    line-height: 1.08;

    font-weight: 300;

    letter-spacing:
        -.025em;

    color:
        rgba(30,26,23,.74);
}


#dessein-art-palette .da-palette-final strong {

    display: block;

    margin-top: 8px;

    font-weight: 400;

    color:
        #1e1a17;
}


/* ==========================================================
   SCREEN 2 — MOBILE
   ========================================================== */

@media (max-width: 768px) {

    #dessein-art-palette .da-palette-inner {

        width: 88vw;

        padding:
            84px 0 96px;
    }


    #dessein-art-palette .da-palette-copy {

        margin-bottom: 42px;
    }


    #dessein-art-palette .da-palette-copy h2 {

        font-size:
            clamp(
                38px,
                10vw,
                58px
            ) !important;
    }


    #dessein-art-palette .da-palette-copy p {

        font-size:
            18px;
    }


    #dessein-art-palette .da-palette-visual {

        min-height:
            620px;
    }


    #dessein-art-palette .da-source {

        font-size:
            9px;
    }


    #dessein-art-palette .da-source span {

        flex:
            0 0 10px;

        width:
            10px;

        height:
            10px;
    }


    #dessein-art-palette .da-palette-swatches {

        right: 14px;

        left: 14px;

        bottom: 14px;

        justify-content:
            space-between;
    }


    #dessein-art-palette .da-swatch {

        width:
            calc((100% - 32px) / 5);

        height:
            48px;
    }


    #dessein-art-palette .da-palette-final {

        margin-top:
            48px;

        text-align:
            left;
    }


    #dessein-art-palette .da-palette-final p {

        font-size:
            clamp(
                28px,
                8vw,
                42px
            );
    }

}


/* ==========================================================
   SCREEN 3 — CONFIGURATOR
   FINAL CLEAN VERSION
   ========================================================== */

#dessein-art-configurator {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #171513;
    color: #f4f0e9;
}


/* ==========================================================
   SCREEN 3 — INNER
   ========================================================== */

#dessein-art-configurator .da-config-inner {
    width: min(1380px, 92vw);
    margin: 0 auto;
    padding: 130px 0 150px;
}


/* ==========================================================
   SCREEN 3 — HEADER
   ========================================================== */

#dessein-art-configurator .da-config-head {
    max-width: 850px;
    margin-bottom: 72px;
}

#dessein-art-configurator .da-config-kicker {
    margin-bottom: 20px;
    font-size: 11px;
    line-height: 1;
    letter-spacing: .32em;
    text-transform: uppercase;
    color: rgba(244,240,233,.52);
}

#dessein-art-configurator .da-config-head h2 {
    max-width: 820px;
    margin: 0 0 28px !important;
    padding: 0 !important;
    color: #f4f0e9 !important;
    font-size: clamp(44px, 5vw, 78px) !important;
    line-height: .98 !important;
    font-weight: 300 !important;
    letter-spacing: -.04em !important;
}

#dessein-art-configurator .da-config-head p {
    max-width: 680px;
    margin: 0;
    color: rgba(244,240,233,.62);
    font-size: clamp(18px, 1.5vw, 24px);
    line-height: 1.4;
    font-weight: 300;
}


/* ==========================================================
   SCREEN 3 — STAGE
   IMAGE ABOVE / CONTROLS BELOW
   ========================================================== */

#dessein-art-configurator .da-config-stage {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 0;
    background: #1b1815;
}


/* ==========================================================
   SCREEN 3 — ROOM
   ========================================================== */

#dessein-art-configurator .da-config-room {
    position: relative;
    width: 100%;
    height: 660px;
    min-width: 0;
    overflow: hidden;
    background: #29241f;
}

#dessein-art-configurator .da-config-room > img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    object-fit: cover;
    filter:
        saturate(.88)
        contrast(.97)
        brightness(.91);
}

#dessein-art-configurator .da-config-room::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        linear-gradient(
            90deg,
            rgba(10,8,7,.10) 0%,
            transparent 40%,
            rgba(10,8,7,.08) 100%
        );
}


/* ==========================================================
   SCREEN 3 — ART ON WALL
   JS changes width / top / aspect-ratio / image
   ========================================================== */

#dessein-art-configurator .da-config-art {
    position: absolute;
    left: 51.5%;
    top: 49%;
    width: 15%;
    height: auto;
    aspect-ratio: 2 / 3;
    z-index: 3;
    transform: translate(-50%, -50%);
    transform-origin: center center;
    pointer-events: none;
    transition:
        width .55s cubic-bezier(.22,.61,.36,1),
        top .55s cubic-bezier(.22,.61,.36,1),
        aspect-ratio .55s cubic-bezier(.22,.61,.36,1);
}

#dessein-art-configurator .da-config-art-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-image:
        url("https://dessein.ru/wp-content/uploads/2026/09/dessein-art-painting.webp");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    box-shadow:
        0 18px 40px rgba(0,0,0,.22),
        0 5px 12px rgba(0,0,0,.14);
    transition:
        opacity .28s ease,
        filter .48s ease,
        box-shadow .48s ease;
    will-change:
        opacity,
        filter;
}


/* ==========================================================
   SCREEN 3 — HORIZONTAL CONTROL PANEL
   ========================================================== */

#dessein-art-configurator .da-config-panel {
    position: relative;
    z-index: 5;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-template-areas: "size palette character" !important;
    grid-auto-flow: column !important;
    grid-auto-rows: auto !important;
    align-items: start !important;
    gap: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 26px 30px 28px !important;
    border-top: 1px solid rgba(255,255,255,.09);
    background: #1b1815;
}


/* ==========================================================
   SCREEN 3 — GROUPS
   ========================================================== */

#dessein-art-configurator .da-config-group {
    position: relative;
    min-width: 0;
    margin: 0;
    padding: 0 28px;
    box-sizing: border-box;
}

#dessein-art-configurator .da-config-group:first-child {
    padding-left: 0;
}

#dessein-art-configurator .da-config-group:last-child {
    padding-right: 0;
}


/* Explicit desktop placement — protects against theme/legacy rules */
#dessein-art-configurator .da-config-panel > .da-config-size-group {
    grid-area: size !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
}

#dessein-art-configurator .da-config-panel > .da-config-group:nth-child(2) {
    grid-area: palette !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
}

#dessein-art-configurator .da-config-panel > .da-config-group:nth-child(3) {
    grid-area: character !important;
    grid-column: 3 !important;
    grid-row: 1 !important;
}

#dessein-art-configurator .da-config-group + .da-config-group {
    border-left: 1px solid rgba(255,255,255,.09);
}

#dessein-art-configurator .da-config-label {
    display: block;
    height: 14px;
    margin: 0 0 22px;
    padding: 0;
    text-align: left !important;
    color: rgba(244,240,233,.68);
    font-size: 10px;
    line-height: 14px;
    font-weight: 400;
    letter-spacing: .28em;
    text-transform: uppercase;
}


/* ==========================================================
   SCREEN 3 — SIZE LABEL + FORMAT
   ========================================================== */

#dessein-art-configurator .da-config-size-group {
    position: relative;
}

#dessein-art-configurator .da-config-label-line {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    gap: 18px !important;

    width: 100% !important;
    height: 14px !important;
    min-height: 14px !important;
    max-height: 14px !important;

    margin: 0 0 22px !important;
    padding: 0 !important;

    overflow: visible !important;
}

#dessein-art-configurator
.da-config-label-line > .da-config-label {
    order: 1 !important;
    flex: 0 0 auto !important;

    display: block !important;

    width: auto !important;
    height: 14px !important;

    margin: 0 !important;
    padding: 0 !important;

    line-height: 14px !important;

    text-align: left !important;
}


/* ==========================================================
   SCREEN 3 — FORMAT SWITCH
   ========================================================== */

#dessein-art-configurator
.da-config-label-line > .da-format-options {
    order: 2 !important;

    position: static !important;

    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;

    gap: 14px !important;

    width: auto !important;
    min-width: 0 !important;

    height: 14px !important;
    min-height: 14px !important;
    max-height: 14px !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;

    transform: none !important;
}

#dessein-art-configurator .da-format-options button {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;

    gap: 6px !important;

    width: auto !important;
    min-width: 0 !important;

    height: 14px !important;
    min-height: 14px !important;
    max-height: 14px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    outline: none !important;

    background: transparent !important;

    color: rgba(244,240,233,.36);

    font-family: inherit;
    font-size: 10px !important;
    line-height: 14px !important;
    font-weight: 300;

    text-align: left !important;
    white-space: nowrap !important;

    vertical-align: top !important;

    cursor: pointer;

    transition: color .25s ease;
}

#dessein-art-configurator .da-format-options button:hover {
    color: rgba(244,240,233,.72);
}

#dessein-art-configurator .da-format-options button.is-active {
    color: #f4f0e9;
}

#dessein-art-configurator .da-format-icon {
    display: block !important;

    box-sizing: border-box;

    flex: 0 0 auto !important;

    border: 1px solid currentColor;

    opacity: .75;

    transition:
        border-color .25s ease,
        opacity .25s ease;
}

#dessein-art-configurator .da-format-icon-vertical {
    width: 8px !important;
    height: 12px !important;
}

#dessein-art-configurator .da-format-icon-horizontal {
    width: 13px !important;
    height: 8px !important;
}

#dessein-art-configurator
.da-format-options button.is-active .da-format-icon {
    border-color: #c99b55;
    opacity: 1;
}

#dessein-art-configurator .da-format-name,
#dessein-art-configurator .da-format-options button > .da-format-name {
    display: inline-block !important;

    width: auto !important;
    height: 14px !important;
    min-height: 14px !important;
    max-height: 14px !important;

    margin: 0 !important;
    padding: 0 !important;

    font-family: inherit !important;
    font-size: 10px !important;
    line-height: 14px !important;
    font-weight: 300 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;

    white-space: nowrap !important;
    vertical-align: top !important;

    transform: none !important;
}


/* ==========================================================
   SCREEN 3 — OPTIONS
   ========================================================== */

#dessein-art-configurator .da-config-size-group > .da-config-options {
    margin-top: 0 !important;
    transform: none !important;
}


#dessein-art-configurator .da-config-options {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 20px;
    width: 100%;
    margin: 0;
    padding: 0;
}

#dessein-art-configurator .da-config-options button {
    position: relative;
    flex: 0 0 auto;
    width: auto;
    min-height: 0;
    margin: 0;
    padding: 0 0 9px;
    border: 0;
    border-bottom: 1px solid transparent;
    outline: none;
    background: transparent;
    color: rgba(244,240,233,.42);
    text-align: left;
    white-space: nowrap;
    font-family: inherit;
    font-size: 13px;
    line-height: 18px;
    font-weight: 300;
    cursor: pointer;
    transition:
        color .25s ease,
        border-color .25s ease;
}

#dessein-art-configurator
.da-config-options button::before {
    display: none;
    content: none;
}

#dessein-art-configurator
.da-config-options button:hover {
    color: rgba(244,240,233,.78);
}

#dessein-art-configurator
.da-config-options button.is-active {
    padding-left: 0;
    color: #f4f0e9;
    border-bottom-color: #c99b55;
}


/* ==========================================================
   SCREEN 3 — NOTE
   ========================================================== */

#dessein-art-configurator .da-config-note {
    max-width: 930px;
    margin: 84px 0 0 auto;
    color: rgba(244,240,233,.46);
    text-align: right;
    font-size: clamp(28px, 3vw, 48px);
    line-height: 1.08;
    font-weight: 300;
    letter-spacing: -.028em;
}

#dessein-art-configurator .da-config-note strong {
    display: block;
    margin-top: 8px;
    color: #f4f0e9;
    font-weight: 400;
}


/* ==========================================================
   SCREEN 3 — DESKTOP ALIGNMENT POLISH
   ========================================================== */

@media (min-width: 1101px) {

    #dessein-art-configurator .da-config-panel {
        padding-top: 28px !important;
        padding-bottom: 28px !important;
    }

    #dessein-art-configurator .da-config-panel > .da-config-group {
        min-height: 66px;
    }

    #dessein-art-configurator .da-config-size-group .da-config-label-line,
    #dessein-art-configurator .da-config-panel > .da-config-group:nth-child(2) > .da-config-label,
    #dessein-art-configurator .da-config-panel > .da-config-group:nth-child(3) > .da-config-label {
        margin-bottom: 22px;
    }

    #dessein-art-configurator .da-config-size-group .da-config-options,
    #dessein-art-configurator .da-config-panel > .da-config-group:nth-child(2) .da-config-options,
    #dessein-art-configurator .da-config-panel > .da-config-group:nth-child(3) .da-config-options {
        min-height: 27px;
        align-items: flex-start;
    }
}

/* ==========================================================
   SCREEN 3 — TABLET
   ========================================================== */

@media (max-width: 1100px) {

    #dessein-art-configurator .da-config-inner {
        width: min(1380px, 94vw);
    }

    #dessein-art-configurator .da-config-room {
        height: 600px;
    }

    #dessein-art-configurator .da-config-panel {
        padding: 24px 24px 26px;
    }

    #dessein-art-configurator .da-config-group {
        padding: 0 20px;
    }

    #dessein-art-configurator .da-config-options {
        gap: 14px;
    }

    #dessein-art-configurator .da-config-options button {
        font-size: 12px;
    }

    #dessein-art-configurator .da-format-name {
        display: none !important;
    }

    #dessein-art-configurator .da-format-options {
        gap: 12px;
    }
}


/* ==========================================================
   SCREEN 3 — MOBILE
   ========================================================== */

@media (max-width: 768px) {

    #dessein-art-configurator .da-config-inner {
        width: 88vw;
        padding: 86px 0 100px;
    }

    #dessein-art-configurator .da-config-head {
        margin-bottom: 44px;
    }

    #dessein-art-configurator .da-config-head h2 {
        font-size:
            clamp(
                38px,
                10vw,
                58px
            ) !important;
    }

    #dessein-art-configurator .da-config-room {
        height: 58svh;
        min-height: 480px;
    }

    #dessein-art-configurator .da-config-panel {
        display: block !important;
        padding: 28px 22px 32px !important;
    }

    #dessein-art-configurator .da-config-panel > .da-config-group {
        grid-area: auto !important;
        grid-column: auto !important;
        grid-row: auto !important;
    }

    #dessein-art-configurator .da-config-group {
        padding: 0;
    }

    #dessein-art-configurator .da-config-group + .da-config-group {
        margin-top: 24px;
        padding-top: 22px;
        border-left: 0;
        border-top: 1px solid rgba(255,255,255,.09);
    }

    #dessein-art-configurator .da-config-label-line {
        grid-template-columns: auto 1fr;
        min-height: 14px;
        padding-right: 0;
    }

    #dessein-art-configurator .da-format-options {
        position: static;
        justify-self: end;
    }

    #dessein-art-configurator .da-format-name {
        display: none !important;
    }

    #dessein-art-configurator .da-config-options {
        flex-wrap: wrap;
        gap: 8px 18px;
    }

    #dessein-art-configurator .da-config-options button {
        font-size: 13px;
    }

    #dessein-art-configurator .da-config-note {
        margin-top: 54px;
        text-align: left;
        font-size:
            clamp(
                28px,
                8vw,
                42px
            );
    }
}


/* ==========================================================
   SCREEN 3 — REDUCED MOTION
   ========================================================== */

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

    #dessein-art-configurator .da-config-art,
    #dessein-art-configurator .da-config-art-image {
        transition: none !important;
    }
}

/* ==========================================================
   DESSEIN ART — SCREEN 4
   FROM SPACE TO ART
   ========================================================== */

#dessein-art-object {
    position: relative;

    width: 100%;
    height: 280vh;

    overflow: hidden;

    background: #11100f;
    color: #f4f0e9;
}


/* ==========================================================
   PINNED SCREEN
   JS will control fixed / ended states
   ========================================================== */

#dessein-art-object .da-object-sticky {
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100vh;

    overflow: hidden;

    background: #11100f;

    --do-room-opacity: 1;
    --do-room-scale: 1;

    --do-shade: 0;

    --do-art-left: 50%;
    --do-art-top: 48%;
    --do-art-width: 15%;
    --do-art-scale: 1;
    --do-art-shadow: .18;

    --do-copy-opacity: 0;
    --do-copy-y: 34px;

    --do-index-opacity: .18;
}


/* fixed state — later JS */

#dessein-art-object
.da-object-sticky.da-is-fixed {
    position: fixed;

    top: 0;
    left: 0;

    z-index: 30;
}


/* end of scene */

#dessein-art-object
.da-object-sticky.da-is-ended {
    position: absolute;

    top: auto;
    bottom: 0;

    left: 0;
}


/* ==========================================================
   INTERIOR
   ========================================================== */

#dessein-art-object .da-object-scene {
    position: absolute;
    inset: 0;

    overflow: hidden;
}


#dessein-art-object .da-object-room {
    position: absolute;
    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: cover;

    opacity: var(--do-room-opacity);

    transform:
        scale(
            var(--do-room-scale)
        );

    transform-origin: center center;

    filter:
        saturate(.88)
        contrast(.97)
        brightness(.92);

    will-change:
        transform,
        opacity;
}


/* ==========================================================
   CINEMATIC DARKENING
   ========================================================== */

#dessein-art-object .da-object-shade {
    position: absolute;
    inset: 0;

    z-index: 2;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 67% 48%,
            rgba(17,16,15,.04) 0%,
            rgba(17,16,15,.20) 44%,
            rgba(17,16,15,.72) 100%
        ),
        #11100f;

    opacity:
        var(--do-shade);

    will-change:
        opacity;
}


/* ==========================================================
   ARTWORK
   ========================================================== */

#dessein-art-object .da-object-art {
    position: absolute;

    z-index: 4;

    left:
        var(--do-art-left);

    top:
        var(--do-art-top);

    width:
        var(--do-art-width);

    height: auto;

    aspect-ratio: 2 / 3;

    transform:
        translate(-50%, -50%)
        scale(
            var(--do-art-scale)
        );

    transform-origin:
        center center;

    pointer-events: none;

    will-change:
        left,
        top,
        width,
        transform;
}


#dessein-art-object .da-object-art-image {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    background-image:
        url("https://dessein.ru/wp-content/uploads/2026/09/dessein-art-painting.webp");

    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;

    box-shadow:
        0 24px 60px
        rgba(
            0,
            0,
            0,
            var(--do-art-shadow)
        );

    will-change:
        box-shadow,
        filter;
}


/* ==========================================================
   COPY
   ========================================================== */

#dessein-art-object .da-object-copy {
    position: absolute;

    z-index: 5;

    left: 8.5vw;
    top: 50%;

    width: min(600px, 40vw);

    opacity:
        var(--do-copy-opacity);

    transform:
        translateY(
            calc(
                -50% +
                var(--do-copy-y)
            )
        );

    will-change:
        opacity,
        transform;
}


/* kicker */

#dessein-art-object .da-object-kicker {
    margin-bottom: 24px;

    color:
        rgba(244,240,233,.50);

    font-size: 10px;

    line-height: 1;

    letter-spacing: .32em;

    text-transform: uppercase;
}


/* title */

#dessein-art-object
.da-object-copy h2 {
    margin: 0 0 30px !important;
    padding: 0 !important;

    color: #f4f0e9 !important;

    font-size:
        clamp(
            42px,
            4.7vw,
            76px
        ) !important;

    line-height:
        .98 !important;

    font-weight:
        300 !important;

    letter-spacing:
        -.04em !important;
}


/* paragraph */

#dessein-art-object
.da-object-copy p {
    max-width: 540px;

    margin: 0;

    color:
        rgba(244,240,233,.58);

    font-size:
        clamp(
            17px,
            1.35vw,
            22px
        );

    line-height: 1.48;

    font-weight: 300;
}


/* ==========================================================
   STATEMENT
   ========================================================== */

#dessein-art-object .da-object-statement {
    margin-top: 46px;

    padding-top: 24px;

    border-top:
        1px solid
        rgba(244,240,233,.16);

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

    line-height: 1.45;
}


#dessein-art-object
.da-object-statement span {
    display: block;

    margin-bottom: 7px;

    color:
        rgba(244,240,233,.42);
}


#dessein-art-object
.da-object-statement strong {
    display: block;

    color: #f4f0e9;

    font-weight: 400;
}


/* ==========================================================
   SCREEN NUMBER
   ========================================================== */

#dessein-art-object .da-object-index {
    position: absolute;

    z-index: 5;

    right: 4vw;
    bottom: 34px;

    color:
        rgba(
            244,
            240,
            233,
            var(--do-index-opacity)
        );

    font-size: 11px;

    line-height: 1;

    letter-spacing: .24em;
}


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

@media (max-width: 1100px) {

    #dessein-art-object {
        height: 260vh;
    }


    #dessein-art-object
    .da-object-sticky {
        --do-art-width: 18%;
    }


    #dessein-art-object
    .da-object-copy {
        left: 6vw;

        width:
            min(
                540px,
                46vw
            );
    }

}


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

@media (max-width: 768px) {

    #dessein-art-object {
        height: 230vh;
    }


    #dessein-art-object
    .da-object-sticky {
        height: 100svh;

        --do-art-left: 50%;
        --do-art-top: 34%;
        --do-art-width: 31%;
    }


    #dessein-art-object
    .da-object-copy {
        left: 7vw;
        top: auto;
        bottom: 9vh;

        width: 86vw;

        transform:
            translateY(
                var(--do-copy-y)
            );
    }


    #dessein-art-object
    .da-object-copy h2 {
        margin-bottom:
            20px !important;

        font-size:
            clamp(
                36px,
                10vw,
                54px
            ) !important;
    }


    #dessein-art-object
    .da-object-copy p {
        max-width: 100%;

        font-size: 16px;
    }


    #dessein-art-object
    .da-object-statement {
        margin-top: 28px;
        padding-top: 18px;
    }


    #dessein-art-object
    .da-object-index {
        right: 7vw;
        bottom: 24px;
    }

}


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

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

    #dessein-art-object
    .da-object-room,

    #dessein-art-object
    .da-object-art,

    #dessein-art-object
    .da-object-copy {

        will-change: auto;
    }

}

/* ==========================================================
   DESSEIN ART — SCREEN 5
   PROCESS
   FULL FINAL CSS
   ========================================================== */

#dessein-art-process {
    position: relative;

    width: 100%;

    overflow: hidden;

    background: #f1ede6;

    color: #191715;
}


/* ==========================================================
   INNER
   ========================================================== */

#dessein-art-process .da-process-inner {
    position: relative;

    width: min(
        1240px,
        calc(100% - 12vw)
    );

    margin: 0 auto;

    padding:
        clamp(110px, 11vw, 180px)
        0
        clamp(120px, 12vw, 200px);
}


/* ==========================================================
   HEADER
   ========================================================== */

#dessein-art-process .da-process-head {
    max-width: 900px;

    margin-bottom:
        clamp(90px, 10vw, 150px);
}


#dessein-art-process .da-process-kicker {
    margin-bottom: 28px;

    color: rgba(25,23,21,.42);

    font-size: 10px;

    line-height: 1;

    letter-spacing: .32em;

    text-transform: uppercase;
}


#dessein-art-process .da-process-head h2 {
    display: block !important;

    width: 100% !important;

    max-width: 880px !important;

    margin: 0 0 34px !important;

    padding: 0 !important;

    color: #191715 !important;

    font-size:
        clamp(
            48px,
            5.4vw,
            86px
        ) !important;

    line-height: .98 !important;

    font-weight: 300 !important;

    letter-spacing: -.045em !important;

    white-space: normal !important;

    word-break: normal !important;

    overflow-wrap: normal !important;
}


#dessein-art-process .da-process-head p {
    display: block !important;

    width: 100% !important;

    max-width: 580px !important;

    margin: 0 !important;

    padding: 0 !important;

    color: rgba(25,23,21,.52);

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

    line-height: 1.5;

    font-weight: 300;

    white-space: normal !important;

    word-break: normal !important;

    overflow-wrap: normal !important;
}


/* ==========================================================
   PROCESS LAYOUT
   ========================================================== */

#dessein-art-process .da-process-layout {
    position: relative;

    width: 100%;

    margin-left:
        clamp(
            70px,
            8vw,
            120px
        );

    box-sizing: border-box;
}


/* ==========================================================
   VERTICAL LINE
   ========================================================== */

#dessein-art-process .da-process-line {
    position: absolute;

    top: 0;
    bottom: 0;
    left: 0;

    width: 1px;

    overflow: hidden;

    background:
        rgba(25,23,21,.12);
}


#dessein-art-process .da-process-line-progress {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 0%;

    background: #b58a4a;

    transform-origin: top center;
}


/* ==========================================================
   STEP
   ========================================================== */

#dessein-art-process .da-process-step {
    position: relative;

    display: grid !important;

    grid-template-columns:
        150px
        minmax(0, 760px) !important;

    column-gap:
        clamp(
            55px,
            6vw,
            90px
        ) !important;

    justify-content: start !important;

    align-items: start !important;

    width: 100% !important;

    max-width: none !important;

    min-height:
        clamp(
            300px,
            32vw,
            470px
        );

    padding:
        0
        0
        clamp(
            70px,
            8vw,
            120px
        );

    margin: 0 !important;

    box-sizing: border-box !important;

    float: none !important;

    opacity: .28;

    transform:
        translateY(24px);

    transition:
        opacity .45s ease,
        transform .55s cubic-bezier(.22,.61,.36,1);
}


#dessein-art-process .da-process-step:last-child {
    padding-bottom: 0;
}


#dessein-art-process .da-process-step.is-active {
    opacity: 1;

    transform:
        translateY(0);
}


/* ==========================================================
   STEP MARKER
   ========================================================== */

#dessein-art-process .da-process-step::before {
    content: "";

    position: absolute;

    left: -5px;
    top: 7px;

    width: 9px;
    height: 9px;

    box-sizing: border-box;

    border:
        1px solid
        rgba(25,23,21,.30);

    border-radius: 50%;

    background: #f1ede6;

    transition:
        border-color .35s ease,
        background-color .35s ease,
        box-shadow .35s ease;
}


#dessein-art-process
.da-process-step.is-active::before {
    border-color: #b58a4a;

    background: #b58a4a;

    box-shadow:
        0 0 0 5px
        rgba(181,138,74,.10);
}


/* ==========================================================
   NUMBER
   ========================================================== */

#dessein-art-process .da-process-number {
    grid-column: 1 !important;
    grid-row: 1 !important;

    display: block !important;

    width: 100% !important;

    max-width: none !important;

    margin: -8px 0 0 !important;

    padding: 0 !important;

    color:
        rgba(25,23,21,.12);

    font-size:
        clamp(
            70px,
            8vw,
            126px
        );

    line-height: .9;

    font-weight: 300;

    letter-spacing: -.05em;

    float: none !important;

    transition:
        color .45s ease;
}


#dessein-art-process
.da-process-step.is-active
.da-process-number {
    color:
        rgba(181,138,74,.34);
}


/* ==========================================================
   CONTENT
   ========================================================== */

#dessein-art-process .da-process-content {
    grid-column: 2 !important;
    grid-row: 1 !important;

    display: block !important;

    width: 100% !important;

    min-width: 0 !important;

    max-width: 760px !important;

    margin: 0 !important;

    padding: 8px 0 0 !important;

    box-sizing: border-box !important;

    float: none !important;
}


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

#dessein-art-process .da-process-label {
    display: block !important;

    width: auto !important;

    max-width: none !important;

    margin: 0 0 22px !important;

    padding: 0 !important;

    color:
        rgba(25,23,21,.38);

    font-size: 10px;

    line-height: 1;

    letter-spacing: .28em;

    text-transform: uppercase;

    white-space: nowrap !important;

    float: none !important;

    transition:
        color .35s ease;
}


#dessein-art-process
.da-process-step.is-active
.da-process-label {
    color: #b58a4a;
}


/* ==========================================================
   STEP TITLE
   ========================================================== */

#dessein-art-process
.da-process-content h3 {
    display: block !important;

    width: 100% !important;

    max-width: 720px !important;

    margin: 0 0 26px !important;

    padding: 0 !important;

    color: #191715 !important;

    font-size:
        clamp(
            34px,
            3.3vw,
            54px
        ) !important;

    line-height: 1.04 !important;

    font-weight: 300 !important;

    letter-spacing: -.035em !important;

    white-space: normal !important;

    word-break: normal !important;

    overflow-wrap: normal !important;
}


/* ==========================================================
   STEP TEXT
   ========================================================== */

#dessein-art-process
.da-process-content p {
    display: block !important;

    width: 100% !important;

    max-width: 650px !important;

    margin: 0 !important;

    padding: 0 !important;

    color:
        rgba(25,23,21,.50);

    font-size:
        clamp(
            17px,
            1.25vw,
            21px
        );

    line-height: 1.55;

    font-weight: 300;

    white-space: normal !important;

    word-break: normal !important;

    overflow-wrap: normal !important;
}


/* ==========================================================
   FINAL MESSAGE
   ========================================================== */

#dessein-art-process .da-process-final {
    display: block !important;

    width: 100% !important;

    max-width: 860px !important;

    margin:
        clamp(
            120px,
            13vw,
            200px
        )
        0
        0
        auto !important;

    padding-top: 34px;

    border-top:
        1px solid
        rgba(25,23,21,.14);

    text-align: right;

    box-sizing: border-box !important;
}


#dessein-art-process .da-process-final span {
    display: block !important;

    width: 100% !important;

    margin: 0 0 14px !important;

    padding: 0 !important;

    color:
        rgba(25,23,21,.38);

    font-size:
        clamp(
            24px,
            2.4vw,
            38px
        );

    line-height: 1.2;

    font-weight: 300;

    white-space: normal !important;

    word-break: normal !important;
}


#dessein-art-process .da-process-final strong {
    display: block !important;

    width: 100% !important;

    margin: 0 !important;

    padding: 0 !important;

    color: #191715;

    font-size:
        clamp(
            32px,
            3.4vw,
            54px
        );

    line-height: 1.08;

    font-weight: 300;

    white-space: normal !important;

    word-break: normal !important;
}


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

@media (max-width: 1000px) {

    #dessein-art-process
    .da-process-inner {
        width:
            min(
                88vw,
                1000px
            );
    }


    #dessein-art-process
    .da-process-layout {
        margin-left: 55px;
    }


    #dessein-art-process
    .da-process-step {
        grid-template-columns:
            110px
            minmax(0, 1fr) !important;

        column-gap:
            45px !important;
    }


    #dessein-art-process
    .da-process-content {
        max-width: 650px !important;
    }


    #dessein-art-process
    .da-process-content h3 {
        max-width: 620px !important;
    }


    #dessein-art-process
    .da-process-content p {
        max-width: 580px !important;
    }

}


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

@media (max-width: 700px) {

    #dessein-art-process
    .da-process-inner {
        width: 86vw;

        padding:
            90px
            0
            110px;
    }


    #dessein-art-process
    .da-process-head {
        margin-bottom: 80px;
    }


    #dessein-art-process
    .da-process-head h2 {
        max-width: 100% !important;

        font-size:
            clamp(
                42px,
                12vw,
                60px
            ) !important;
    }


    #dessein-art-process
    .da-process-head p {
        max-width: 100% !important;

        font-size: 17px;
    }


    #dessein-art-process
    .da-process-layout {
        margin-left: 18px;
    }


    #dessein-art-process
    .da-process-step {
        display: block !important;

        width: 100% !important;

        min-height: auto;

        padding:
            0
            0
            90px
            42px !important;
    }


    #dessein-art-process
    .da-process-number {
        display: block !important;

        width: 100% !important;

        margin:
            0
            0
            28px !important;

        font-size: 58px;
    }


    #dessein-art-process
    .da-process-content {
        display: block !important;

        width: 100% !important;

        max-width: none !important;

        margin: 0 !important;

        padding: 0 !important;
    }


    #dessein-art-process
    .da-process-label {
        white-space: normal !important;

        margin-bottom: 18px !important;
    }


    #dessein-art-process
    .da-process-content h3 {
        width: 100% !important;

        max-width: none !important;

        font-size:
            clamp(
                30px,
                9vw,
                42px
            ) !important;
    }


    #dessein-art-process
    .da-process-content p {
        width: 100% !important;

        max-width: none !important;

        font-size: 16px;
    }


    #dessein-art-process
    .da-process-step::before {
        left: -4px;
        top: 5px;
    }


    #dessein-art-process
    .da-process-final {
        max-width: 100% !important;

        margin-top: 90px !important;

        text-align: left;
    }


    #dessein-art-process
    .da-process-final span {
        font-size:
            clamp(
                22px,
                7vw,
                32px
            );
    }


    #dessein-art-process
    .da-process-final strong {
        font-size:
            clamp(
                30px,
                9vw,
                42px
            );
    }

}


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

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

    #dessein-art-process
    .da-process-step {
        transition: none;
    }


    #dessein-art-process
    .da-process-number,
    #dessein-art-process
    .da-process-label,
    #dessein-art-process
    .da-process-step::before {
        transition: none;
    }

}

/* ==========================================================
   DESSEIN ART — SCREEN 6
   SCALE & COMPOSITION
   FULL CSS
   ========================================================== */

#dessein-art-scale {
    position: relative;

    width: 100%;
    height: 400vh;

    overflow: hidden;

    background: #151311;
    color: #f4f0e9;
}


/* ==========================================================
   PINNED SCREEN
   JS подключим следующим шагом
   ========================================================== */

#dessein-art-scale .da-scale-sticky {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 100vh;

    overflow: hidden;

    background: #151311;

    box-sizing: border-box;
}


/* состояние закрепления для будущего JS */

#dessein-art-scale
.da-scale-sticky.da-is-fixed {
    position: fixed;

    top: 0;
    left: 0;

    z-index: 30;
}


/* финальное положение */

#dessein-art-scale
.da-scale-sticky.da-is-ended {
    position: absolute;

    top: auto;
    bottom: 0;
    left: 0;
}


/* ==========================================================
   INTERIOR
   ========================================================== */

#dessein-art-scale .da-scale-scene {
    position: absolute;

    inset: 0;

    overflow: hidden;
}


#dessein-art-scale .da-scale-room {
    position: absolute;

    inset: 0;

    display: block !important;

    width: 100% !important;
    height: 100% !important;

    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: cover;

    transform: scale(1.015);

    transform-origin: center center;

    filter:
        saturate(.86)
        contrast(.98)
        brightness(.82);

    box-sizing: border-box;
}


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

#dessein-art-scale .da-scale-shade {
    position: absolute;

    inset: 0;

    z-index: 2;

    pointer-events: none;

    background:

        linear-gradient(
            90deg,
            rgba(18,16,14,.88) 0%,
            rgba(18,16,14,.66) 20%,
            rgba(18,16,14,.20) 42%,
            rgba(18,16,14,.04) 60%,
            rgba(18,16,14,.16) 100%
        ),

        linear-gradient(
            0deg,
            rgba(18,16,14,.72) 0%,
            rgba(18,16,14,.08) 38%,
            rgba(18,16,14,.05) 100%
        );
}


/* ==========================================================
   ARTWORK — COMMON
   ========================================================== */

#dessein-art-scale .da-scale-art {
    position: absolute;

    z-index: 4;

    left: 53%;
    top: 43.5%;

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

    transform-origin: center center;

    pointer-events: none;

    box-sizing: border-box;

    will-change:
        opacity,
        transform,
        width;
}


/* ==========================================================
   01 — SINGLE
   ========================================================== */

#dessein-art-scale .da-scale-single {
    width: 15%;

    aspect-ratio: 3 / 2;

    opacity: 1;
}


#dessein-art-scale .da-scale-single-image {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    background-image:
        url("https://dessein.ru/wp-content/uploads/2026/09/dessein-art-painting-horizontal.webp");

    background-size: 100% 100%;

    background-position: center;

    background-repeat: no-repeat;

    box-shadow:
        0 20px 45px
        rgba(0,0,0,.20);
}


/* ==========================================================
   02 — LARGE
   ========================================================== */

#dessein-art-scale .da-scale-large {
    width: 26%;

    aspect-ratio: 3 / 2;

    opacity: 0;

    transform:
        translate(-50%, -50%)
        scale(.94);
}


#dessein-art-scale .da-scale-large-image {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    background-image:
        url("https://dessein.ru/wp-content/uploads/2026/09/dessein-art-painting-horizontal.webp");

    background-size: 100% 100%;

    background-position: center;

    background-repeat: no-repeat;

    box-shadow:
        0 28px 65px
        rgba(0,0,0,.27);
}


/* ==========================================================
   COMMON MULTI-PANEL
   ========================================================== */

#dessein-art-scale .da-scale-panel {
    position: relative;

    display: block;

    min-width: 0;
    min-height: 0;

    background-image:
        url("https://dessein.ru/wp-content/uploads/2026/09/dessein-art-painting-horizontal.webp");

    background-repeat: no-repeat;

    box-shadow:
        0 24px 55px
        rgba(0,0,0,.24);
}


/* ==========================================================
   03 — DIPTYCH
   ========================================================== */

#dessein-art-scale .da-scale-diptych {
    display: grid !important;

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

    gap:
        clamp(
            8px,
            .8vw,
            14px
        );

    width: 29%;

    aspect-ratio: 3 / 2;

    opacity: 0;

    transform:
        translate(-50%, -50%)
        scale(.94);
}


#dessein-art-scale
.da-scale-diptych-panel-1 {
    background-size: 200% 100%;

    background-position:
        left center;
}


#dessein-art-scale
.da-scale-diptych-panel-2 {
    background-size: 200% 100%;

    background-position:
        right center;
}


/* ==========================================================
   04 — TRIPTYCH
   ========================================================== */

#dessein-art-scale .da-scale-triptych {
    display: grid !important;

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

    gap:
        clamp(
            7px,
            .7vw,
            12px
        );

    width: 34%;

    aspect-ratio: 3 / 2;

    opacity: 0;

    transform:
        translate(-50%, -50%)
        scale(.94);
}


#dessein-art-scale
.da-scale-triptych-panel-1 {
    background-size: 300% 100%;

    background-position:
        left center;
}


#dessein-art-scale
.da-scale-triptych-panel-2 {
    background-size: 300% 100%;

    background-position:
        center center;
}


#dessein-art-scale
.da-scale-triptych-panel-3 {
    background-size: 300% 100%;

    background-position:
        right center;
}


/* ==========================================================
   MAIN COPY
   ========================================================== */

#dessein-art-scale .da-scale-copy {
    position: absolute;

    z-index: 6;

    left: 6.7vw;
    top: 25%;

    display: block !important;

    width: min(390px, 27vw) !important;

    max-width: 390px !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;
}


/* ==========================================================
   KICKER
   ========================================================== */

#dessein-art-scale .da-scale-kicker {
    display: block !important;

    margin: 0 0 24px !important;
    padding: 0 !important;

    color:
        rgba(244,240,233,.47);

    font-size: 10px;

    line-height: 1;

    font-weight: 300;

    letter-spacing: .30em;

    text-transform: uppercase;

    white-space: normal !important;
}


/* ==========================================================
   TITLE
   ========================================================== */

#dessein-art-scale
.da-scale-copy h2 {
    display: block !important;

    width: 100% !important;

    max-width: 390px !important;

    margin: 0 0 27px !important;

    padding: 0 !important;

    color: #f4f0e9 !important;

    font-size:
        clamp(
            44px,
            4.25vw,
            68px
        ) !important;

    line-height: .98 !important;

    font-weight: 300 !important;

    letter-spacing: -.045em !important;

    white-space: normal !important;

    word-break: normal !important;

    overflow-wrap: normal !important;
}


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

#dessein-art-scale
.da-scale-copy p {
    display: block !important;

    width: 100% !important;

    max-width: 350px !important;

    margin: 0 !important;

    padding: 0 !important;

    color:
        rgba(244,240,233,.52);

    font-size:
        clamp(
            16px,
            1.15vw,
            19px
        );

    line-height: 1.52;

    font-weight: 300;

    white-space: normal !important;

    word-break: normal !important;

    overflow-wrap: normal !important;
}


/* ==========================================================
   STATE AREA
   ========================================================== */

#dessein-art-scale .da-scale-states {
    position: absolute;

    z-index: 6;

    left: 6.7vw;
    bottom: 8.5vh;

    display: block !important;

    width: min(430px, 30vw) !important;
    height: 145px;

    max-width: 430px !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;
}


/* ==========================================================
   STATE
   ========================================================== */

#dessein-art-scale .da-scale-state {
    position: absolute;

    inset: 0;

    display: grid !important;

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

    column-gap: 20px;

    align-items: start;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    opacity: 0;

    visibility: hidden;

    transform:
        translateY(18px);

    box-sizing: border-box !important;

    pointer-events: none;
}


#dessein-art-scale
.da-scale-state.is-active {
    opacity: 1;

    visibility: visible;

    transform:
        translateY(0);
}


/* ==========================================================
   STATE NUMBER
   ========================================================== */

#dessein-art-scale
.da-scale-state-number {
    display: block !important;

    width: 100% !important;

    margin: 0 !important;

    padding: 4px 0 0 !important;

    color:
        rgba(201,155,85,.82);

    font-size: 12px;

    line-height: 1;

    letter-spacing: .10em;
}


/* ==========================================================
   STATE CONTENT
   ========================================================== */

#dessein-art-scale
.da-scale-state-content {
    display: block !important;

    width: 100% !important;

    min-width: 0 !important;

    max-width: 340px !important;

    margin: 0 !important;

    padding: 0 !important;

    box-sizing: border-box !important;
}


#dessein-art-scale
.da-scale-state-label {
    display: block !important;

    width: 100% !important;

    margin: 0 0 10px !important;

    padding: 0 !important;

    color:
        rgba(201,155,85,.82);

    font-size: 9px;

    line-height: 1;

    letter-spacing: .25em;

    text-transform: uppercase;

    white-space: normal !important;
}


#dessein-art-scale
.da-scale-state-content strong {
    display: block !important;

    width: 100% !important;

    margin: 0 0 8px !important;

    padding: 0 !important;

    color: #f4f0e9;

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

    line-height: 1.18;

    font-weight: 300;

    white-space: normal !important;

    word-break: normal !important;
}


#dessein-art-scale
.da-scale-state-content span {
    display: block !important;

    width: 100% !important;

    margin: 0 !important;

    padding: 0 !important;

    color:
        rgba(244,240,233,.43);

    font-size:
        clamp(
            14px,
            1vw,
            17px
        );

    line-height: 1.42;

    font-weight: 300;

    white-space: normal !important;

    word-break: normal !important;
}


/* ==========================================================
   PROGRESS
   ========================================================== */

#dessein-art-scale .da-scale-progress {
    position: absolute;

    z-index: 6;

    right: 5vw;
    bottom: 5.2vh;

    display: flex !important;

    align-items: center;

    gap: 18px;

    width: 180px;

    box-sizing: border-box;
}


#dessein-art-scale
.da-scale-progress-line {
    position: relative;

    flex: 1 1 auto;

    height: 1px;

    overflow: hidden;

    background:
        rgba(244,240,233,.18);
}


#dessein-art-scale
.da-scale-progress-fill {
    position: absolute;

    top: 0;
    left: 0;

    width: 25%;
    height: 100%;

    background: #c99b55;

    transform-origin: left center;
}


#dessein-art-scale
.da-scale-progress-number {
    flex: 0 0 auto;

    color:
        rgba(244,240,233,.55);

    font-size: 9px;

    line-height: 1;

    letter-spacing: .17em;

    white-space: nowrap;
}


/* ==========================================================
   SCREEN INDEX
   ========================================================== */

#dessein-art-scale .da-scale-index {
    position: absolute;

    z-index: 6;

    right: 4.4vw;
    top: 24px;

    color:
        rgba(244,240,233,.14);

    font-size: 10px;

    line-height: 1;

    letter-spacing: .26em;
}


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

@media (max-width: 1100px) {

    #dessein-art-scale {
        height: 380vh;
    }


    #dessein-art-scale
    .da-scale-copy {
        left: 5.5vw;

        width: 32vw !important;
    }


    #dessein-art-scale
    .da-scale-states {
        left: 5.5vw;

        width: 34vw !important;
    }


    #dessein-art-scale
    .da-scale-single {
        width: 18%;
    }


    #dessein-art-scale
    .da-scale-large {
        width: 30%;
    }


    #dessein-art-scale
    .da-scale-diptych {
        width: 33%;
    }


    #dessein-art-scale
    .da-scale-triptych {
        width: 38%;
    }

}


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

@media (max-width: 760px) {

    #dessein-art-scale {
        height: 350vh;
    }


    #dessein-art-scale
    .da-scale-sticky {
        height: 100svh;
    }


    #dessein-art-scale
    .da-scale-room {
        object-position: 58% center;
    }


    #dessein-art-scale
    .da-scale-shade {
        background:

            linear-gradient(
                0deg,
                rgba(18,16,14,.94) 0%,
                rgba(18,16,14,.70) 33%,
                rgba(18,16,14,.12) 62%,
                rgba(18,16,14,.12) 100%
            );
    }


    #dessein-art-scale
    .da-scale-copy {
        left: 7vw;
        top: 8vh;

        width: 86vw !important;

        max-width: 86vw !important;
    }


    #dessein-art-scale
    .da-scale-copy h2 {
        max-width: 90% !important;

        margin-bottom: 18px !important;

        font-size:
            clamp(
                38px,
                11vw,
                54px
            ) !important;
    }


    #dessein-art-scale
    .da-scale-copy p {
        max-width: 90% !important;

        font-size: 15px;
    }


    #dessein-art-scale
    .da-scale-art {
        left: 50%;
        top: 45%;
    }


    #dessein-art-scale
    .da-scale-single {
        width: 42%;
    }


    #dessein-art-scale
    .da-scale-large {
        width: 66%;
    }


    #dessein-art-scale
    .da-scale-diptych {
        width: 72%;
    }


    #dessein-art-scale
    .da-scale-triptych {
        width: 78%;
    }


    #dessein-art-scale
    .da-scale-states {
        left: 7vw;
        bottom: 7vh;

        width: 82vw !important;
        height: 130px;

        max-width: 82vw !important;
    }


    #dessein-art-scale
    .da-scale-state {
        grid-template-columns:
            42px
            minmax(0, 1fr);

        column-gap: 14px;
    }


    #dessein-art-scale
    .da-scale-state-content {
        max-width: none !important;
    }


    #dessein-art-scale
    .da-scale-progress {
        right: 7vw;
        bottom: 3vh;

        width: 140px;
    }


    #dessein-art-scale
    .da-scale-index {
        right: 7vw;
        top: 20px;
    }

}


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

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

    #dessein-art-scale
    .da-scale-art,

    #dessein-art-scale
    .da-scale-state {

        will-change: auto;
    }

}

/* ==========================================================
   DESSEIN ART — SCREEN 7
   MATERIAL & TEXTURE
   FULL CSS
   ========================================================== */

#dessein-art-texture {
    position: relative;

    width: 100%;
    height: 400vh;

    overflow: hidden;

    background: #12100e;

    color: #f3eee7;
}


/* ==========================================================
   PINNED SCREEN
   ========================================================== */

#dessein-art-texture .da-texture-sticky {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 100vh;

    overflow: hidden;

    background: #12100e;

    box-sizing: border-box;

    --dt-art-left: 66%;
    --dt-art-top: 50%;
    --dt-art-width: 74vw;
    --dt-art-scale: 1;

    --dt-light-x: 18%;
    --dt-light-opacity: .15;

    --dt-grain-opacity: .18;

    --dt-detail-opacity: .55;
}


/* JS pin states */

#dessein-art-texture
.da-texture-sticky.da-is-fixed {
    position: fixed;

    top: 0;
    left: 0;

    z-index: 30;
}


#dessein-art-texture
.da-texture-sticky.da-is-ended {
    position: absolute;

    top: auto;
    bottom: 0;
    left: 0;
}


/* ==========================================================
   BACKGROUND
   ========================================================== */

#dessein-art-texture .da-texture-bg {
    position: absolute;

    inset: 0;

    z-index: 0;

    background:

        radial-gradient(
            circle at 72% 48%,
            rgba(101,72,43,.15) 0%,
            rgba(18,16,14,0) 46%
        ),

        linear-gradient(
            110deg,
            #161310 0%,
            #100e0c 48%,
            #0b0a09 100%
        );
}


/* ==========================================================
   VISUAL AREA
   ========================================================== */

#dessein-art-texture .da-texture-visual {
    position: absolute;

    inset: 0;

    z-index: 2;

    overflow: hidden;
}


/* ==========================================================
   ARTWORK
   ========================================================== */

#dessein-art-texture .da-texture-art {
    position: absolute;

    left: var(--dt-art-left);
    top: var(--dt-art-top);

    width: var(--dt-art-width);

    aspect-ratio: 3 / 2;

    transform:
        translate(-50%, -50%)
        scale(var(--dt-art-scale));

    transform-origin: center center;

    overflow: hidden;

    box-shadow:
        0 45px 110px
        rgba(0,0,0,.38);

    will-change:
        transform,
        left,
        top,
        width;

    box-sizing: border-box;
}


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

#dessein-art-texture .da-texture-art-image {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    background-image:
        url("https://dessein.ru/wp-content/uploads/2026/09/dessein-art-painting-horizontal.webp");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    filter:
        saturate(1.03)
        contrast(1.04)
        brightness(.95);

    transform:
        scale(1.035);

    transform-origin: center center;
}


/* ==========================================================
   MOVING LIGHT
   ========================================================== */

#dessein-art-texture .da-texture-light {
    position: absolute;

    inset: -15%;

    z-index: 3;

    pointer-events: none;

    opacity:
        var(--dt-light-opacity);

    background:

        linear-gradient(
            112deg,

            transparent 0%,

            transparent
            calc(var(--dt-light-x) - 18%),

            rgba(255,246,224,.03)
            calc(var(--dt-light-x) - 10%),

            rgba(255,239,208,.30)
            var(--dt-light-x),

            rgba(255,248,226,.08)
            calc(var(--dt-light-x) + 10%),

            transparent
            calc(var(--dt-light-x) + 22%),

            transparent 100%
        );

    mix-blend-mode: screen;

    will-change:
        opacity,
        background;
}


/* ==========================================================
   SURFACE / GRAIN
   ========================================================== */

#dessein-art-texture .da-texture-grain {
    position: absolute;

    inset: 0;

    z-index: 4;

    pointer-events: none;

    opacity:
        var(--dt-grain-opacity);

    background-image:

        radial-gradient(
            circle at 20% 30%,
            rgba(255,255,255,.20) 0 1px,
            transparent 1.4px
        ),

        radial-gradient(
            circle at 70% 65%,
            rgba(0,0,0,.20) 0 1px,
            transparent 1.6px
        ),

        radial-gradient(
            circle at 45% 70%,
            rgba(255,255,255,.10) 0 1px,
            transparent 1.5px
        );

    background-size:
        8px 8px,
        11px 11px,
        14px 14px;

    mix-blend-mode: soft-light;
}


/* ==========================================================
   DETAIL LINE
   ========================================================== */

#dessein-art-texture .da-texture-detail-line {
    position: absolute;

    z-index: 5;

    right: 15vw;
    top: 26vh;

    width: 1px;
    height: 23vh;

    opacity:
        var(--dt-detail-opacity);

    background:
        linear-gradient(
            to bottom,
            rgba(201,155,85,0),
            rgba(201,155,85,.72),
            rgba(201,155,85,0)
        );
}


/* ==========================================================
   MARKER
   ========================================================== */

#dessein-art-texture .da-texture-marker {
    position: absolute;

    z-index: 6;

    right: calc(15vw - 5px);
    top: calc(49vh - 5px);

    width: 11px;
    height: 11px;

    border:
        1px solid
        rgba(201,155,85,.70);

    border-radius: 50%;

    box-sizing: border-box;

    opacity:
        var(--dt-detail-opacity);
}


#dessein-art-texture .da-texture-marker span {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 3px;
    height: 3px;

    border-radius: 50%;

    background: #c99b55;

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


/* ==========================================================
   LEFT DARK GRADIENT
   ========================================================== */

#dessein-art-texture::after {
    content: "";

    position: absolute;

    inset: 0;

    z-index: 4;

    pointer-events: none;

    background:

        linear-gradient(
            90deg,
            rgba(14,12,10,.98) 0%,
            rgba(14,12,10,.90) 19%,
            rgba(14,12,10,.56) 32%,
            rgba(14,12,10,.12) 48%,
            rgba(14,12,10,0) 69%
        ),

        linear-gradient(
            0deg,
            rgba(12,10,9,.55) 0%,
            transparent 32%
        );
}


/* ==========================================================
   MAIN COPY
   ========================================================== */

#dessein-art-texture .da-texture-copy {
    position: absolute;

    z-index: 7;

    left: 6.7vw;
    top: 18vh;

    display: block !important;

    width: min(440px, 31vw) !important;
    max-width: 440px !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;
}


/* ==========================================================
   KICKER
   ========================================================== */

#dessein-art-texture .da-texture-kicker {
    display: block !important;

    margin: 0 0 25px !important;
    padding: 0 !important;

    color:
        rgba(201,155,85,.72);

    font-size: 10px;

    line-height: 1;

    font-weight: 300;

    letter-spacing: .30em;

    text-transform: uppercase;
}


/* ==========================================================
   TITLE
   ========================================================== */

#dessein-art-texture
.da-texture-copy h2 {
    display: block !important;

    width: 100% !important;
    max-width: 440px !important;

    margin: 0 0 29px !important;
    padding: 0 !important;

    color: #f3eee7 !important;

    font-size:
        clamp(
            44px,
            4.35vw,
            70px
        ) !important;

    line-height: .99 !important;

    font-weight: 300 !important;

    letter-spacing: -.045em !important;

    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
}


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

#dessein-art-texture
.da-texture-copy p {
    display: block !important;

    width: 100% !important;
    max-width: 390px !important;

    margin: 0 !important;
    padding: 0 !important;

    color:
        rgba(243,238,231,.48);

    font-size:
        clamp(
            16px,
            1.15vw,
            19px
        );

    line-height: 1.52;

    font-weight: 300;

    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
}


/* ==========================================================
   STATES CONTAINER
   ========================================================== */

#dessein-art-texture .da-texture-states {
    position: absolute;

    z-index: 7;

    left: 6.7vw;
    bottom: 8vh;

    display: block !important;

    width: min(455px, 32vw) !important;
    max-width: 455px !important;

    height: 145px;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;
}


/* ==========================================================
   STATE
   ========================================================== */

#dessein-art-texture .da-texture-state {
    position: absolute;

    inset: 0;

    display: grid !important;

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

    column-gap: 20px;

    align-items: start;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    opacity: 0;

    visibility: hidden;

    transform:
        translateY(18px);

    pointer-events: none;

    box-sizing: border-box !important;
}


#dessein-art-texture
.da-texture-state.is-active {
    opacity: 1;

    visibility: visible;

    transform:
        translateY(0);
}


/* ==========================================================
   STATE NUMBER
   ========================================================== */

#dessein-art-texture
.da-texture-state-number {
    display: block !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 4px 0 0 !important;

    color:
        rgba(201,155,85,.82);

    font-size: 12px;

    line-height: 1;

    font-weight: 300;

    letter-spacing: .1em;
}


/* ==========================================================
   STATE CONTENT
   ========================================================== */

#dessein-art-texture
.da-texture-state-content {
    display: block !important;

    width: 100% !important;

    min-width: 0 !important;

    max-width: 365px !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;
}


#dessein-art-texture
.da-texture-state-label {
    display: block !important;

    width: 100% !important;

    margin: 0 0 10px !important;
    padding: 0 !important;

    color:
        rgba(201,155,85,.82);

    font-size: 9px;

    line-height: 1;

    font-weight: 300;

    letter-spacing: .25em;

    text-transform: uppercase;
}


#dessein-art-texture
.da-texture-state-content strong {
    display: block !important;

    width: 100% !important;

    margin: 0 0 8px !important;
    padding: 0 !important;

    color: #f3eee7;

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

    line-height: 1.18;

    font-weight: 300;

    white-space: normal !important;
    word-break: normal !important;
}


#dessein-art-texture
.da-texture-state-content span {
    display: block !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    color:
        rgba(243,238,231,.43);

    font-size:
        clamp(
            14px,
            1vw,
            17px
        );

    line-height: 1.42;

    font-weight: 300;

    white-space: normal !important;
    word-break: normal !important;
}


/* ==========================================================
   PROGRESS
   ========================================================== */

#dessein-art-texture .da-texture-progress {
    position: absolute;

    z-index: 7;

    right: 5vw;
    bottom: 5vh;

    display: flex !important;

    align-items: center;

    gap: 18px;

    width: 180px;
}


#dessein-art-texture
.da-texture-progress-line {
    position: relative;

    flex: 1 1 auto;

    height: 1px;

    overflow: hidden;

    background:
        rgba(243,238,231,.16);
}


#dessein-art-texture
.da-texture-progress-fill {
    position: absolute;

    top: 0;
    left: 0;

    width: 25%;
    height: 100%;

    background: #c99b55;

    transform-origin: left center;
}


#dessein-art-texture
.da-texture-progress-number {
    flex: 0 0 auto;

    color:
        rgba(243,238,231,.52);

    font-size: 9px;

    line-height: 1;

    letter-spacing: .17em;

    white-space: nowrap;
}


/* ==========================================================
   SCREEN INDEX
   ========================================================== */

#dessein-art-texture .da-texture-index {
    position: absolute;

    z-index: 7;

    right: 4.4vw;
    top: 24px;

    color:
        rgba(243,238,231,.13);

    font-size: 10px;

    line-height: 1;

    letter-spacing: .26em;
}


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

@media (max-width: 1100px) {

    #dessein-art-texture {
        height: 380vh;
    }


    #dessein-art-texture
    .da-texture-copy {
        left: 5.5vw;

        width: 35vw !important;
    }


    #dessein-art-texture
    .da-texture-states {
        left: 5.5vw;

        width: 36vw !important;
    }


    #dessein-art-texture
    .da-texture-sticky {
        --dt-art-left: 69%;
        --dt-art-width: 78vw;
    }

}


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

@media (max-width: 760px) {

    #dessein-art-texture {
        height: 350vh;
    }


    #dessein-art-texture
    .da-texture-sticky {
        height: 100svh;

        --dt-art-left: 50%;
        --dt-art-top: 45%;
        --dt-art-width: 120vw;
    }


    #dessein-art-texture::after {
        background:

            linear-gradient(
                0deg,
                rgba(12,10,9,.96) 0%,
                rgba(12,10,9,.80) 34%,
                rgba(12,10,9,.12) 66%,
                rgba(12,10,9,.04) 100%
            );
    }


    #dessein-art-texture
    .da-texture-copy {
        left: 7vw;
        top: 7vh;

        width: 86vw !important;
        max-width: 86vw !important;
    }


    #dessein-art-texture
    .da-texture-copy h2 {
        max-width: 92% !important;

        margin-bottom: 18px !important;

        font-size:
            clamp(
                38px,
                11vw,
                54px
            ) !important;
    }


    #dessein-art-texture
    .da-texture-copy p {
        max-width: 90% !important;

        font-size: 15px;
    }


    #dessein-art-texture
    .da-texture-detail-line,
    #dessein-art-texture
    .da-texture-marker {
        display: none;
    }


    #dessein-art-texture
    .da-texture-states {
        left: 7vw;
        bottom: 7vh;

        width: 82vw !important;
        max-width: 82vw !important;

        height: 130px;
    }


    #dessein-art-texture
    .da-texture-state {
        grid-template-columns:
            42px
            minmax(0, 1fr);

        column-gap: 14px;
    }


    #dessein-art-texture
    .da-texture-state-content {
        max-width: none !important;
    }


    #dessein-art-texture
    .da-texture-progress {
        right: 7vw;
        bottom: 3vh;

        width: 140px;
    }


    #dessein-art-texture
    .da-texture-index {
        right: 7vw;
        top: 20px;
    }

}


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

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

    #dessein-art-texture
    .da-texture-art,

    #dessein-art-texture
    .da-texture-state {

        will-change: auto;
    }

}

/* ==========================================================
   DESSEIN ART — SCREEN 8
   FINAL CTA
   FULL CSS
   ========================================================== */

#dessein-art-contact {
    position: relative;

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

    overflow: hidden;

    background: #100e0d;
    color: #f4f0e9;
}


/* ==========================================================
   INNER
   ========================================================== */

#dessein-art-contact .da-contact-inner {
    position: relative;

    display: grid !important;

    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(420px, 1.1fr);

    align-items: center;

    gap:
        clamp(
            70px,
            8vw,
            150px
        );

    width: min(
        1380px,
        88vw
    );

    min-height: 100vh;

    margin: 0 auto;

    padding:
        clamp(95px, 10vh, 140px)
        0
        clamp(85px, 9vh, 130px);

    box-sizing: border-box !important;
}


/* ==========================================================
   BACKGROUND ATMOSPHERE
   ========================================================== */

#dessein-art-contact::before {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:

        radial-gradient(
            circle at 72% 48%,
            rgba(201,155,85,.10) 0%,
            rgba(201,155,85,.035) 25%,
            transparent 52%
        ),

        linear-gradient(
            110deg,
            #151210 0%,
            #100e0d 48%,
            #0c0b0a 100%
        );
}


/* ==========================================================
   LARGE 08
   ========================================================== */

#dessein-art-contact .da-contact-number {
    position: absolute;

    z-index: 1;

    right: -1vw;
    top: 4vh;

    margin: 0;
    padding: 0;

    color:
        rgba(244,240,233,.025);

    font-size:
        clamp(
            210px,
            29vw,
            460px
        );

    line-height: .8;

    font-weight: 300;

    letter-spacing: -.08em;

    pointer-events: none;

    user-select: none;
}


/* ==========================================================
   COPY
   ========================================================== */

#dessein-art-contact .da-contact-copy {
    position: relative;

    z-index: 5;

    display: block !important;

    width: 100% !important;
    max-width: 590px !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;
}


/* ==========================================================
   KICKER
   ========================================================== */

#dessein-art-contact .da-contact-kicker {
    display: block !important;

    margin: 0 0 29px !important;
    padding: 0 !important;

    color: #c99b55;

    font-size: 10px;

    line-height: 1;

    font-weight: 300;

    letter-spacing: .34em;

    text-transform: uppercase;
}


/* ==========================================================
   TITLE
   ========================================================== */

#dessein-art-contact
.da-contact-copy h2 {
    display: block !important;

    width: 100% !important;
    max-width: 590px !important;

    margin: 0 0 36px !important;
    padding: 0 !important;

    color: #f4f0e9 !important;

    font-size:
        clamp(
            48px,
            5.25vw,
            82px
        ) !important;

    line-height: .97 !important;

    font-weight: 300 !important;

    letter-spacing: -.048em !important;

    white-space: normal !important;

    word-break: normal !important;
    overflow-wrap: normal !important;
}


/* ==========================================================
   FIRST TEXT
   ========================================================== */

#dessein-art-contact
.da-contact-copy > p {
    display: block !important;

    width: 100% !important;

    max-width: 510px !important;

    margin: 0 0 12px !important;
    padding: 0 !important;

    color:
        rgba(244,240,233,.40);

    font-size:
        clamp(
            17px,
            1.3vw,
            21px
        );

    line-height: 1.5;

    font-weight: 300;

    white-space: normal !important;

    word-break: normal !important;
}


/* ==========================================================
   LEAD
   ========================================================== */

#dessein-art-contact
.da-contact-copy
.da-contact-lead {
    max-width: 535px !important;

    margin-top: 23px !important;

    color:
        rgba(244,240,233,.70) !important;

    font-size:
        clamp(
            19px,
            1.55vw,
            25px
        ) !important;

    line-height: 1.45 !important;
}


/* ==========================================================
   ACTIONS
   ========================================================== */

#dessein-art-contact .da-contact-actions {
    display: flex !important;

    flex-direction: column;

    align-items: flex-start;

    gap: 19px;

    width: 100% !important;

    margin:
        clamp(
            44px,
            5vw,
            68px
        )
        0
        0 !important;

    padding: 0 !important;
}


/* ==========================================================
   CTA BUTTON
   ========================================================== */

#dessein-art-contact .da-contact-button {
    position: relative;

    display: inline-flex !important;

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

    min-height: 58px;

    margin: 0 !important;

    padding:
        0
        30px !important;

    border:
        1px solid
        rgba(201,155,85,.76) !important;

    background:
        rgba(201,155,85,.04) !important;

    color: #f4f0e9 !important;

    font-size: 12px !important;

    line-height: 1.2 !important;

    font-weight: 300 !important;

    letter-spacing: .08em !important;

    text-decoration: none !important;

    text-transform: none !important;

    white-space: nowrap;

    box-sizing: border-box !important;

    overflow: hidden;

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


#dessein-art-contact
.da-contact-button::before {
    content: "";

    position: absolute;

    inset: 0;

    background: #c99b55;

    transform:
        translateX(-102%);

    transition:
        transform .42s
        cubic-bezier(.22,.61,.36,1);

    z-index: -1;
}


#dessein-art-contact
.da-contact-button:hover {
    color: #15110d !important;

    border-color: #c99b55 !important;

    transform:
        translateY(-2px);
}


#dessein-art-contact
.da-contact-button:hover::before {
    transform:
        translateX(0);
}


/* ==========================================================
   NOTE
   ========================================================== */

#dessein-art-contact .da-contact-note {
    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    color:
        rgba(244,240,233,.30);

    font-size: 10px;

    line-height: 1.4;

    font-weight: 300;

    letter-spacing: .16em;

    text-transform: uppercase;
}


/* ==========================================================
   ARTWORK
   ========================================================== */

#dessein-art-contact .da-contact-art {
    position: relative;

    z-index: 4;

    justify-self: end;

    width:
        min(
            46vw,
            690px
        );

    aspect-ratio: 3 / 2;

    box-sizing: border-box;

    transform:
        translateY(-1vh);
}


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

#dessein-art-contact .da-contact-art-image {
    position: absolute;

    inset: 0;

    z-index: 2;

    width: 100%;
    height: 100%;

    background-image:
        url("https://dessein.ru/wp-content/uploads/2026/09/dessein-art-painting-horizontal.webp");

    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;

    filter:
        saturate(1.04)
        contrast(1.04)
        brightness(.98);

    box-shadow:
        0 50px 120px
        rgba(0,0,0,.44);

    box-sizing: border-box;
}


/* ==========================================================
   ART GLOW
   ========================================================== */

#dessein-art-contact .da-contact-art-glow {
    position: absolute;

    z-index: 1;

    left: 8%;
    right: 8%;

    top: 8%;
    bottom: -10%;

    background:
        rgba(201,155,85,.16);

    filter:
        blur(75px);

    opacity: .45;

    pointer-events: none;
}


/* ==========================================================
   FINE BORDER AROUND ART
   ========================================================== */

#dessein-art-contact
.da-contact-art::after {
    content: "";

    position: absolute;

    z-index: 3;

    inset: 0;

    pointer-events: none;

    border:
        1px solid
        rgba(244,240,233,.09);

    box-sizing: border-box;
}


/* ==========================================================
   SIGNATURE
   ========================================================== */

#dessein-art-contact .da-contact-signature {
    position: absolute;

    z-index: 5;

    right: 0;
    bottom:
        clamp(
            32px,
            4vh,
            50px
        );

    display: flex !important;

    align-items: center;

    gap: 15px;

    margin: 0 !important;
    padding: 0 !important;
}


#dessein-art-contact
.da-contact-signature span {
    display: block !important;

    color:
        rgba(244,240,233,.25);

    font-size: 8px;

    line-height: 1;

    letter-spacing: .26em;

    font-weight: 300;
}


#dessein-art-contact
.da-contact-signature strong {
    display: block !important;

    color:
        rgba(244,240,233,.66);

    font-size: 10px;

    line-height: 1;

    letter-spacing: .24em;

    font-weight: 400;
}


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

@media (max-width: 1100px) {

    #dessein-art-contact
    .da-contact-inner {

        grid-template-columns:
            minmax(0, .95fr)
            minmax(360px, 1.05fr);

        gap: 55px;

        width: 88vw;
    }


    #dessein-art-contact
    .da-contact-art {

        width:
            min(
                48vw,
                590px
            );
    }


    #dessein-art-contact
    .da-contact-copy h2 {

        font-size:
            clamp(
                44px,
                5.6vw,
                66px
            ) !important;
    }

}


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

@media (max-width: 760px) {

    #dessein-art-contact {
        min-height: auto;
    }


    #dessein-art-contact
    .da-contact-inner {

        display: flex !important;

        flex-direction: column;

        align-items: stretch;

        width: 86vw;

        min-height: auto;

        gap: 58px;

        padding:
            90px
            0
            95px;
    }


    #dessein-art-contact
    .da-contact-number {

        right: -10vw;
        top: 4vh;

        font-size: 66vw;
    }


    #dessein-art-contact
    .da-contact-copy {

        max-width: none !important;
    }


    #dessein-art-contact
    .da-contact-copy h2 {

        max-width: 100% !important;

        margin-bottom: 28px !important;

        font-size:
            clamp(
                42px,
                12vw,
                60px
            ) !important;
    }


    #dessein-art-contact
    .da-contact-copy > p {

        max-width: 100% !important;

        font-size: 17px;
    }


    #dessein-art-contact
    .da-contact-copy
    .da-contact-lead {

        max-width: 100% !important;

        font-size: 19px !important;
    }


    #dessein-art-contact
    .da-contact-actions {

        margin-top: 40px !important;
    }


    #dessein-art-contact
    .da-contact-button {

        width: 100%;

        min-height: 60px;

        padding:
            0
            18px !important;

        white-space: normal;

        text-align: center;
    }


    #dessein-art-contact
    .da-contact-art {

        order: 2;

        width: 100%;

        transform: none;
    }


    #dessein-art-contact
    .da-contact-signature {

        position: relative;

        right: auto;
        bottom: auto;

        order: 3;

        justify-content: flex-end;

        width: 100%;

        margin-top: 8px !important;
    }

}


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

@media (max-width: 420px) {

    #dessein-art-contact
    .da-contact-inner {

        width: 88vw;

        padding:
            78px
            0
            80px;
    }


    #dessein-art-contact
    .da-contact-copy h2 {

        font-size:
            clamp(
                38px,
                11.5vw,
                50px
            ) !important;
    }


    #dessein-art-contact
    .da-contact-note {

        font-size: 9px;

        letter-spacing: .12em;
    }

}


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

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

    #dessein-art-contact
    .da-contact-button,

    #dessein-art-contact
    .da-contact-button::before {

        transition: none;
    }

}

/* ==========================================================
   DESSEIN ART — SCREEN 8
   DESKTOP LAYOUT FIX
   ========================================================== */

@media (min-width: 761px) {

    #dessein-art-contact .da-contact-inner {
        display: grid !important;

        grid-template-columns:
            minmax(480px, 0.92fr)
            minmax(520px, 1.08fr) !important;

        grid-template-rows: 1fr !important;

        align-items: center !important;

        column-gap:
            clamp(
                80px,
                7vw,
                130px
            ) !important;

        width: min(
            1380px,
            86vw
        ) !important;

        min-height: 100vh !important;

        padding:
            120px
            0
            90px !important;

        box-sizing: border-box !important;
    }


    /* ======================================================
       LEFT COLUMN
       ====================================================== */

    #dessein-art-contact .da-contact-copy {
        grid-column: 1 !important;
        grid-row: 1 !important;

        align-self: center !important;
        justify-self: start !important;

        position: relative !important;

        width: 100% !important;
        max-width: 600px !important;

        margin: 0 !important;
        padding: 0 !important;

        float: none !important;
    }


    /* ======================================================
       RIGHT COLUMN — ART
       ====================================================== */

    #dessein-art-contact .da-contact-art {
        grid-column: 2 !important;
        grid-row: 1 !important;

        align-self: center !important;
        justify-self: end !important;

        position: relative !important;

        display: block !important;

        width:
            min(
                45vw,
                670px
            ) !important;

        max-width: 670px !important;

        margin: 0 !important;
        padding: 0 !important;

        float: none !important;

        aspect-ratio: 3 / 2 !important;

        transform:
            translateY(0) !important;
    }


    #dessein-art-contact .da-contact-art-image {
        position: absolute !important;

        inset: 0 !important;

        display: block !important;

        width: 100% !important;
        height: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        max-width: none !important;
    }


    /* ======================================================
       TITLE — DO NOT LET THE THEME COMPRESS IT
       ====================================================== */

    #dessein-art-contact
    .da-contact-copy h2 {

        width: 100% !important;
        max-width: 600px !important;

        margin:
            0
            0
            34px !important;

        white-space: normal !important;

        word-break: normal !important;
        overflow-wrap: normal !important;
    }


    /* ======================================================
       SIGNATURE
       ====================================================== */

    #dessein-art-contact .da-contact-signature {
        position: absolute !important;

        right: 0 !important;
        bottom: 36px !important;
    }

}


/* ==========================================================
   LARGE DESKTOP
   ========================================================== */

@media (min-width: 1300px) {

    #dessein-art-contact .da-contact-copy h2 {
        font-size:
            clamp(
                54px,
                4.7vw,
                76px
            ) !important;
    }

}

/* ==========================================================
   DESSEIN ART — REMOVE GAPS BETWEEN SCENES
   ========================================================== */

section[id^="dessein-art-"] {
    display: block !important;

    margin-top: 0 !important;
    margin-bottom: 0 !important;
}


/* если сцены идут непосредственно друг за другом */

section[id^="dessein-art-"]
+
section[id^="dessein-art-"] {

    margin-top: 0 !important;
}

/* ==========================================================
   DESSEIN ART — SCREEN 3
   MOBILE FIX
   ========================================================== */

@media (max-width: 760px) {

    /* ======================================================
       SECTION
       ====================================================== */

    #dessein-art-configurator {
        overflow: hidden !important;
    }


    #dessein-art-configurator .da-config-inner {
        width: 100% !important;
        max-width: none !important;

        margin: 0 !important;

        padding:
            72px
            0
            90px !important;
    }


    /* ======================================================
       HEADER
       ====================================================== */

    #dessein-art-configurator .da-config-head {
        width: 86vw !important;
        max-width: none !important;

        margin:
            0
            auto
            38px !important;
    }


    #dessein-art-configurator .da-config-head h2 {
        width: 100% !important;
        max-width: none !important;

        font-size:
            clamp(
                38px,
                10vw,
                50px
            ) !important;

        line-height: 1.02 !important;

        white-space: normal !important;

        word-break: normal !important;
    }


    #dessein-art-configurator .da-config-head p {
        width: 100% !important;
        max-width: none !important;

        font-size: 15px !important;

        line-height: 1.5 !important;
    }


    /* ======================================================
       STAGE
       ====================================================== */

    #dessein-art-configurator .da-config-stage {
        display: block !important;

        width: 100% !important;
        max-width: none !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    /* ======================================================
       ROOM

       Главное исправление:
       интерьер получает полноценную высоту,
       а картина остаётся внутри него.
       ====================================================== */

    #dessein-art-configurator .da-config-room {
        position: relative !important;

        display: block !important;

        width: 100% !important;

        height: 56svh !important;
        min-height: 440px !important;
        max-height: 560px !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: hidden !important;

        background: #171513;

        box-sizing: border-box !important;
    }


    #dessein-art-configurator .da-config-room > img {
        position: absolute !important;

        inset: 0 !important;

        display: block !important;

        width: 100% !important;
        height: 100% !important;

        max-width: none !important;

        margin: 0 !important;
        padding: 0 !important;

        object-fit: cover !important;

        /*
         * На вертикальном экране немного смещаем
         * кадр к центральной стене.
         */
        object-position: 52% 48% !important;
    }


    /* ======================================================
       ART
       ====================================================== */

    #dessein-art-configurator .da-config-art {
        position: absolute !important;

        z-index: 4 !important;

        margin: 0 !important;
        padding: 0 !important;

        pointer-events: none !important;
    }


    #dessein-art-configurator .da-config-art-image {
        width: 100% !important;
        height: 100% !important;

        margin: 0 !important;
        padding: 0 !important;
    }


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

    #dessein-art-configurator .da-config-panel {
        display: grid !important;

        grid-template-columns: 1fr !important;
        grid-template-areas:
            "size"
            "palette"
            "character" !important;

        gap: 0 !important;

        width: 100% !important;
        max-width: none !important;

        margin: 0 !important;

        padding:
            18px
            7vw
            28px !important;

        box-sizing: border-box !important;

        background: #1b1815 !important;
    }


    /* ======================================================
       GROUPS
       ====================================================== */

    #dessein-art-configurator .da-config-group {
        display: block !important;

        width: 100% !important;
        max-width: none !important;

        margin: 0 !important;

        padding:
            18px
            0
            20px !important;

        box-sizing: border-box !important;

        border-top:
            1px solid
            rgba(244,240,233,.08);
    }


    #dessein-art-configurator
    .da-config-group:first-child {
        border-top: 0;
    }


    /* ======================================================
       SIZE + FORMAT LINE
       ====================================================== */

    #dessein-art-configurator .da-config-label-line {
        display: flex !important;

        align-items: center !important;
        justify-content: space-between !important;

        flex-wrap: wrap !important;

        gap:
            12px
            18px !important;

        width: 100% !important;

        margin:
            0
            0
            15px !important;
    }


    #dessein-art-configurator .da-config-label {
        margin: 0 !important;

        font-size: 9px !important;

        line-height: 1 !important;

        letter-spacing: .25em !important;
    }


    /* ======================================================
       FORMAT SWITCH
       ====================================================== */

    #dessein-art-configurator .da-format-options {
        display: flex !important;

        align-items: center !important;

        flex-wrap: nowrap !important;

        gap: 16px !important;

        width: auto !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    #dessein-art-configurator
    .da-format-options button {
        display: inline-flex !important;

        align-items: center !important;

        gap: 6px !important;

        width: auto !important;

        height: 26px !important;
        min-height: 26px !important;
        max-height: 26px !important;

        margin: 0 !important;
        padding: 0 !important;

        font-size: 9px !important;

        line-height: 26px !important;

        white-space: nowrap !important;
    }


    /* вертикальный значок */

    #dessein-art-configurator
    .da-format-options
    button[data-value="vertical"]::before {
        width: 7px !important;
        height: 11px !important;
    }


    /* горизонтальный значок */

    #dessein-art-configurator
    .da-format-options
    button[data-value="horizontal"]::before {
        width: 12px !important;
        height: 7px !important;
    }


    /* ======================================================
       OPTIONS
       ====================================================== */

    #dessein-art-configurator .da-config-options {
        display: flex !important;

        align-items: center !important;

        flex-wrap: wrap !important;

        gap:
            8px
            20px !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    #dessein-art-configurator
    .da-config-options button {
        display: inline-flex !important;

        align-items: center !important;

        width: auto !important;

        min-width: 0 !important;

        min-height: 30px !important;

        margin: 0 !important;

        padding:
            0
            0
            4px !important;

        font-size: 11px !important;

        line-height: 1.2 !important;

        white-space: nowrap !important;
    }


    /* ======================================================
       FINAL NOTE
       ====================================================== */

    #dessein-art-configurator .da-config-note {
        width: 86vw !important;
        max-width: none !important;

        margin:
            48px
            auto
            0 !important;

        padding: 0 !important;

        font-size: 20px !important;

        line-height: 1.35 !important;

        text-align: left !important;
    }


    #dessein-art-configurator
    .da-config-note strong {
        display: block !important;

        margin-top: 8px !important;
    }

}

/* ==========================================================
   DESSEIN ART — SCREEN 3
   MOBILE — REMOVE EMPTY GAP
   ========================================================== */

@media (max-width: 760px) {

    /* полностью снимаем десктопную высоту сцены */

    #dessein-art-configurator .da-config-stage {
        position: relative !important;

        display: block !important;

        width: 100% !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: visible !important;

        transform: none !important;
    }


    /* интерьер */

    #dessein-art-configurator .da-config-room {
        position: relative !important;

        width: 100% !important;

        height: 56svh !important;
        min-height: 0 !important;
        max-height: 560px !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: hidden !important;

        transform: none !important;
    }


    /* панель должна идти СРАЗУ после изображения */

    #dessein-art-configurator .da-config-panel {
        position: relative !important;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        inset: auto !important;

        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        margin: 0 !important;

        transform: none !important;

        clear: both !important;
        float: none !important;
    }


    /* защита от скрытых отступов темы */

    #dessein-art-configurator
    .da-config-room + .da-config-panel {
        margin-top: 0 !important;
    }

}

/* ==========================================================
   DESSEIN ART — SCREEN 3
   MOBILE — WORDPRESS IMAGE WRAPPER FIX
   ========================================================== */

@media (max-width: 760px) {

    /* сама область интерьера */

    #dessein-art-configurator .da-config-room {
        position: relative !important;

        width: 100% !important;

        height: 440px !important;
        min-height: 440px !important;
        max-height: 440px !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: hidden !important;

        background: #171513 !important;
    }


    /* WordPress автоматически создаёт этот P */

    #dessein-art-configurator .da-config-room > p {
        position: absolute !important;

        inset: 0 !important;

        display: block !important;

        width: 100% !important;
        height: 100% !important;

        max-width: none !important;

        margin: 0 !important;
        padding: 0 !important;

        border: 0 !important;

        overflow: hidden !important;

        line-height: 0 !important;
    }


    /* само изображение внутри P */

    #dessein-art-configurator .da-config-room > p > img,

    #dessein-art-configurator .da-config-room img {
        position: absolute !important;

        inset: 0 !important;

        display: block !important;

        width: 100% !important;
        height: 100% !important;

        min-width: 100% !important;
        min-height: 100% !important;

        max-width: none !important;
        max-height: none !important;

        margin: 0 !important;
        padding: 0 !important;

        object-fit: cover !important;
        object-position: 52% 50% !important;

        border: 0 !important;
    }


    /* панель сразу после интерьера */

    #dessein-art-configurator .da-config-panel {
        position: relative !important;

        inset: auto !important;

        width: 100% !important;

        height: auto !important;
        min-height: 0 !important;

        margin: 0 !important;

        transform: none !important;
    }

}

/* ==========================================================
   DESSEIN ART — SCREEN 6
   MOBILE FINAL LAYOUT FIX
   ========================================================== */

@media (max-width: 760px) {

    /* ======================================================
       MAIN COPY
       ====================================================== */

    #dessein-art-scale .da-scale-copy {
        left: 7vw !important;
        top: 6.5vh !important;

        width: 86vw !important;
        max-width: 86vw !important;
    }


    #dessein-art-scale .da-scale-copy h2 {
        max-width: 88% !important;

        margin-bottom: 16px !important;

        font-size:
            clamp(
                36px,
                10.5vw,
                50px
            ) !important;

        line-height: .98 !important;
    }


    #dessein-art-scale .da-scale-copy p {
        max-width: 78% !important;

        font-size: 14px !important;

        line-height: 1.42 !important;
    }


    /* ======================================================
       ARTWORK
       немного опускаем,
       чтобы оно не входило в верхний текст
       ====================================================== */

    #dessein-art-scale .da-scale-art {
        left: 50% !important;
        top: 48% !important;
    }


    /* ======================================================
       STATE TEXT
       поднимаем выше от нижнего края
       ====================================================== */

    #dessein-art-scale .da-scale-states {
        left: 7vw !important;

        bottom: 12.5vh !important;

        width: 70vw !important;
        max-width: 70vw !important;

        height: 120px !important;
    }


    #dessein-art-scale .da-scale-state {
        grid-template-columns:
            34px
            minmax(0, 1fr) !important;

        column-gap: 10px !important;
    }


    #dessein-art-scale .da-scale-state-content {
        width: 100% !important;
        max-width: none !important;
    }


    #dessein-art-scale .da-scale-state-label {
        margin-bottom: 8px !important;

        font-size: 8px !important;
    }


    #dessein-art-scale .da-scale-state-content strong {
        margin-bottom: 7px !important;

        font-size: 16px !important;

        line-height: 1.18 !important;
    }


    #dessein-art-scale .da-scale-state-content span {
        font-size: 13px !important;

        line-height: 1.42 !important;
    }


    /* ======================================================
       PROGRESS

       Переносим влево, чтобы кнопка поддержки ?
       больше его не закрывала.
       ====================================================== */

    #dessein-art-scale .da-scale-progress {
        left: 7vw !important;
        right: auto !important;

        bottom: 3.5vh !important;

        width: 118px !important;

        gap: 10px !important;
    }


    #dessein-art-scale .da-scale-progress-number {
        font-size: 8px !important;
    }


    /* ======================================================
       SCREEN NUMBER 06
       ====================================================== */

    #dessein-art-scale .da-scale-index {
        right: 6vw !important;
        top: 16px !important;
    }

}

/* ==========================================================
   DESSEIN ART — SCREEN 7
   MOBILE FINAL LAYOUT FIX
   ========================================================== */

@media (max-width: 760px) {

    /* ======================================================
       MAIN COPY
       ====================================================== */

    #dessein-art-texture .da-texture-copy {
        left: 7vw !important;
        top: 4vh !important;

        width: 86vw !important;
        max-width: 86vw !important;
    }


    #dessein-art-texture
    .da-texture-copy h2 {

        width: 100% !important;
        max-width: 88% !important;

        margin-bottom: 15px !important;

        font-size:
            clamp(
                36px,
                10.5vw,
                50px
            ) !important;

        line-height: .98 !important;
    }


    #dessein-art-texture
    .da-texture-copy p {

        width: 100% !important;
        max-width: 78% !important;

        font-size: 13px !important;

        line-height: 1.42 !important;
    }


    /* ======================================================
       ARTWORK

       На мобильном фиксируем горизонтальное положение
       по центру и опускаем произведение ниже текста.

       Масштабирование из JS продолжает работать.
       ====================================================== */

    #dessein-art-texture .da-texture-art {
        left: 50% !important;
        top: 56% !important;
    }


    /* ======================================================
       STATES
       ====================================================== */

    #dessein-art-texture .da-texture-states {
        left: 7vw !important;

        bottom: 12.5vh !important;

        width: 70vw !important;
        max-width: 70vw !important;

        height: 120px !important;
    }


    #dessein-art-texture .da-texture-state {
        grid-template-columns:
            34px
            minmax(0, 1fr) !important;

        column-gap: 10px !important;
    }


    #dessein-art-texture
    .da-texture-state-content {

        width: 100% !important;
        max-width: none !important;
    }


    #dessein-art-texture
    .da-texture-state-label {

        margin-bottom: 8px !important;

        font-size: 8px !important;
    }


    #dessein-art-texture
    .da-texture-state-content strong {

        margin-bottom: 7px !important;

        font-size: 16px !important;

        line-height: 1.18 !important;
    }


    #dessein-art-texture
    .da-texture-state-content span {

        font-size: 13px !important;

        line-height: 1.42 !important;
    }


    /* ======================================================
       PROGRESS
       переносим в левый нижний угол
       ====================================================== */

    #dessein-art-texture .da-texture-progress {
        left: 7vw !important;
        right: auto !important;

        bottom: 3.5vh !important;

        width: 118px !important;

        gap: 10px !important;
    }


    #dessein-art-texture
    .da-texture-progress-number {

        font-size: 8px !important;
    }


    /* ======================================================
       SCREEN NUMBER 07
       ====================================================== */

    #dessein-art-texture .da-texture-index {
        right: 6vw !important;
        top: 16px !important;
    }

}

/* ==========================================================
   DESSEIN ART — SCREEN 8
   MOBILE FINAL COMPOSITION
   ========================================================== */

@media (max-width: 760px) {

    /* ======================================================
       WHOLE FINAL
       ====================================================== */

    #dessein-art-contact .da-contact-inner {
        display: flex !important;

        flex-direction: column !important;
        align-items: stretch !important;

        width: 86vw !important;

        min-height: auto !important;

        gap: 30px !important;

        padding:
            62px
            0
            62px !important;

        box-sizing: border-box !important;
    }


    /* ======================================================
       BACKGROUND 08
       ====================================================== */

    #dessein-art-contact .da-contact-number {
        right: -8vw !important;
        top: 1vh !important;

        font-size: 58vw !important;

        opacity: .85;
    }


    /* ======================================================
       COPY
       ====================================================== */

    #dessein-art-contact .da-contact-copy {
        width: 100% !important;
        max-width: none !important;
    }


    #dessein-art-contact
    .da-contact-copy h2 {

        max-width: 100% !important;

        margin-bottom: 23px !important;

        font-size:
            clamp(
                38px,
                10.7vw,
                48px
            ) !important;

        line-height: .98 !important;
    }


    #dessein-art-contact
    .da-contact-copy > p {

        max-width: 100% !important;

        margin-bottom: 8px !important;

        font-size: 15px !important;

        line-height: 1.45 !important;
    }


    #dessein-art-contact
    .da-contact-copy
    .da-contact-lead {

        max-width: 100% !important;

        margin-top: 18px !important;

        font-size: 17px !important;

        line-height: 1.43 !important;
    }


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

    #dessein-art-contact .da-contact-actions {
        gap: 14px !important;

        margin-top: 30px !important;
    }


    #dessein-art-contact .da-contact-button {
        width: auto !important;

        min-height: 54px !important;

        padding:
            0
            18px !important;

        font-size: 10px !important;
    }


    #dessein-art-contact .da-contact-note {
        font-size: 8px !important;

        letter-spacing: .13em !important;
    }


    /* ======================================================
       ARTWORK

       Подтягиваем произведение ближе к CTA.
       ====================================================== */

    #dessein-art-contact .da-contact-art {
        order: 2 !important;

        position: relative !important;

        display: block !important;

        width: 100% !important;
        max-width: none !important;

        margin:
            4px
            0
            0 !important;

        padding: 0 !important;

        aspect-ratio: 3 / 2 !important;

        transform: none !important;
    }


    #dessein-art-contact
    .da-contact-art-image {

        position: absolute !important;

        inset: 0 !important;

        width: 100% !important;
        height: 100% !important;
    }


    /* ======================================================
       SIGNATURE
       ====================================================== */

    #dessein-art-contact .da-contact-signature {
        position: relative !important;

        right: auto !important;
        bottom: auto !important;

        order: 3 !important;

        justify-content: flex-end !important;

        width: 100% !important;

        margin:
            2px
            0
            0 !important;

        padding: 0 !important;
    }

}

/* ==========================================================
   DESSEIN ART — SCREEN 1
   MOBILE FINAL COMPOSITION
   ========================================================== */

@media (max-width: 760px) {

    /* Основная область картины */

    #dessein-art-hero .da-art {
        left: 50% !important;
        top: 42% !important;

        width: 44vw !important;

        transform:
            translate(-50%, -50%)
            translateY(var(--da-art-y))
            scale(var(--da-art-scale)) !important;
    }


    /* Начальный текст */

    #dessein-art-hero .da-copy-start {
        left: 7vw !important;

        width: 80vw !important;
        max-width: 80vw !important;

        bottom: 8vh !important;
    }


    #dessein-art-hero .da-copy-start h1 {
        font-size:
            clamp(
                36px,
                10.5vw,
                50px
            ) !important;

        line-height: 1.02 !important;
    }


    /* Финальный текст */

    #dessein-art-hero .da-copy-final {
        left: 7vw !important;
        right: auto !important;

        top: auto !important;
        bottom: 5.5vh !important;

        width: 82vw !important;
        max-width: 82vw !important;

        text-align: left !important;
    }


    #dessein-art-hero .da-copy-final h2 {
        width: 100% !important;
        max-width: none !important;

        margin-bottom: 18px !important;

        font-size:
            clamp(
                25px,
                7.2vw,
                34px
            ) !important;

        line-height: 1.08 !important;
    }


    #dessein-art-hero .da-copy-final .da-kicker {
        margin-bottom: 10px !important;

        font-size: 8px !important;

        letter-spacing: .24em !important;
    }


    #dessein-art-hero .da-button {
        min-height: 44px !important;

        padding:
            0
            16px !important;

        font-size: 9px !important;
    }


    /* Подсказка ЛИСТАЙТЕ */

    #dessein-art-hero .da-scroll-hint {
        right: 6vw !important;
        bottom: 3vh !important;

        font-size: 8px !important;
    }

}

/* ==========================================================
   DESSEIN ART
   REAL MOBILE DEVICES — SCENE 4 + SCENE 7
   Prevent artwork / text overlap
   ========================================================== */

@media (max-width: 760px) {

    /* ======================================================
       SCREEN 4
       ART ABOVE / COPY BELOW
       ====================================================== */

    #dessein-art-object .da-object-sticky {
        height: 100svh !important;
    }


    /* вертикальная работа */

    #dessein-art-object
    .da-object-art[data-format="vertical"] {

        top:
            min(
                var(--do-art-top),
                27svh
            ) !important;

        width:
            max(
                var(--do-art-width),
                32vw
            ) !important;
    }


    /* горизонтальная работа */

    #dessein-art-object
    .da-object-art[data-format="horizontal"] {

        top:
            min(
                var(--do-art-top),
                29svh
            ) !important;

        width:
            max(
                var(--do-art-width),
                46vw
            ) !important;
    }


    /* текст опускаем немного ниже */

    #dessein-art-object .da-object-copy {
        top: auto !important;

        bottom: 4svh !important;

        left: 7vw !important;

        width: 86vw !important;
        max-width: 86vw !important;
    }


    #dessein-art-object
    .da-object-copy h2 {

        font-size:
            clamp(
                34px,
                9.5vw,
                46px
            ) !important;

        line-height: 1 !important;
    }


    #dessein-art-object
    .da-object-copy p {

        font-size: 14px !important;

        line-height: 1.42 !important;
    }


    #dessein-art-object
    .da-object-statement {

        margin-top: 24px !important;

        padding-top: 16px !important;
    }

/* ==========================================================
   DESSEIN ART — SCREEN 4
   REAL MOBILE — LOWER ARTWORK
   ========================================================== */

@media (max-width: 760px) {

    #dessein-art-object
    .da-object-art[data-format="vertical"] {
        top: 33svh !important;
    }

    #dessein-art-object
    .da-object-art[data-format="horizontal"] {
        top: 34svh !important;
    }

}


/* iPhone 11 и другие невысокие экраны */

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

    #dessein-art-object
    .da-object-art[data-format="vertical"] {
        top: 32svh !important;
    }

    #dessein-art-object
    .da-object-art[data-format="horizontal"] {
        top: 33svh !important;
    }

}

    /* ======================================================
       SCREEN 7
       TEXT ABOVE / ART CENTRE / STATE BELOW
       ====================================================== */

    #dessein-art-texture .da-texture-sticky {
        height: 100svh !important;
    }


    #dessein-art-texture .da-texture-copy {
        top: 3svh !important;
    }


    #dessein-art-texture
    .da-texture-copy h2 {

        font-size:
            clamp(
                34px,
                9.5vw,
                46px
            ) !important;

        line-height: .99 !important;

        margin-bottom: 13px !important;
    }


    #dessein-art-texture
    .da-texture-copy p {

        max-width: 80% !important;

        font-size: 12.5px !important;

        line-height: 1.4 !important;
    }


    /*
     * JS продолжает управлять масштабированием,
     * но больше не может сделать работу слишком большой.
     */

    #dessein-art-texture
    .da-texture-art {

        left: 50% !important;

        top: 57svh !important;

        width:
            min(
                var(--dt-art-width),
                78vw
            ) !important;
    }


    /* описание текущего состояния */

    #dessein-art-texture
    .da-texture-states {

        bottom: 11svh !important;

        width: 70vw !important;
        max-width: 70vw !important;
    }


    #dessein-art-texture
    .da-texture-state-content strong {

        font-size: 15px !important;

        line-height: 1.17 !important;
    }


    #dessein-art-texture
    .da-texture-state-content span {

        font-size: 12px !important;

        line-height: 1.38 !important;
    }

}


/* ==========================================================
   SHORT MOBILE SCREENS
   дополнительные ограничения для низких экранов
   ========================================================== */

@media
(max-width: 760px)
and
(max-height: 820px) {

    /* SCREEN 4 */

    #dessein-art-object
    .da-object-art[data-format="vertical"] {

        top: 24svh !important;

        width:
            max(
                var(--do-art-width),
                32vw
            ) !important;
    }


    #dessein-art-object
    .da-object-art[data-format="horizontal"] {

        top: 25svh !important;

        width:
            max(
                var(--do-art-width),
                46vw
            ) !important;
    }


    #dessein-art-object
    .da-object-copy {

        bottom: 3svh !important;
    }


    #dessein-art-object
    .da-object-copy h2 {

        font-size:
            clamp(
                31px,
                8.8vw,
                40px
            ) !important;
    }



    /* SCREEN 7 */

    #dessein-art-texture
    .da-texture-art {

        top: 54svh !important;

        width:
            min(
                var(--dt-art-width),
                70vw
            ) !important;
    }


    #dessein-art-texture
    .da-texture-copy h2 {

        font-size:
            clamp(
                31px,
                8.8vw,
                40px
            ) !important;
    }


    #dessein-art-texture
    .da-texture-states {

        bottom: 10svh !important;
    }

}

/* ==========================================================
   DESSEIN ART — SCREEN 6
   REAL MOBILE — STATE TEXT OVERLAP FIX
   ========================================================== */

@media (max-width: 760px) {

    #dessein-art-scale .da-scale-state {
        opacity: 0 !important;
        visibility: hidden !important;

        transform:
            translateY(10px) !important;

        transition:
            opacity .22s ease,
            transform .28s ease !important;
    }


    #dessein-art-scale
    .da-scale-state.is-active {

        opacity: 1 !important;
        visibility: visible !important;

        transform:
            translateY(0) !important;
    }

}

/* ==========================================================
   DESSEIN ART — SCREEN 6
   REAL MOBILE — ART BELOW INTRO TEXT
   ========================================================== */

@media (max-width: 760px) {

    #dessein-art-scale .da-scale-art {
        top: 53svh !important;
    }

}


/* iPhone 11 и другие относительно невысокие экраны */

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

    #dessein-art-scale .da-scale-art {
        top: 51.5svh !important;
    }

}

@media (max-width: 760px) {

    #dessein-art-object
    .da-object-art[data-format="vertical"] {
        top: 36svh !important;
    }

    #dessein-art-object
    .da-object-art[data-format="horizontal"] {
        top: 36svh !important;
    }

}