.contact-studios{
    padding:88px 0 84px;
    background:#fffdfb;
    overflow:hidden
}

.contact-studios-heading{
    max-width:860px;
    text-align:center
}

.contact-studios-heading>p{
    margin:0 0 11px;
    color:#cc909b;
    font-family:var(--script);
    font-size:clamp(34px,2.8vw,40px);
    line-height:1;
    font-weight:500
}

.contact-studios-heading h2{
    max-width:820px;
    margin:0 auto;
    color:#4d3d42;
    font-size:clamp(36px,3.3vw,52px);
    line-height:1;
    letter-spacing:-.032em;
    font-weight:500
}

.contact-studios-heading h2 span{
    display:block;
    margin-top:8px;
    color:#d98c97;
    font-family:var(--script);
    font-size:.96em;
    line-height:.96;
    font-weight:400
}

.contact-studios-strip{
    display:flex;
    position:relative;
    width:100%;
    height:clamp(520px,46vw,680px);
    margin-top:46px;
    overflow:hidden;
    background:#45363b;
    isolation:isolate
}

.contact-studio{
    position:relative;
    flex:1 1 0;
    min-width:0;
    overflow:hidden;
    margin-left:-56px;
    transition:flex-grow .75s cubic-bezier(.22,1,.36,1),flex-basis .75s cubic-bezier(.22,1,.36,1);
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 56px,#000 calc(100% - 56px),transparent);
    mask-image:linear-gradient(90deg,transparent,#000 56px,#000 calc(100% - 56px),transparent);
}

.contact-studio:first-child{
    margin-left:0;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent);
    mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent);
}

.contact-studio:last-child{
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 56px);
    mask-image:linear-gradient(90deg,transparent,#000 56px);
}

.contact-studio.is-collapsed{
    flex:0 1 clamp(150px,15vw,200px);
}

.contact-studio-expand{
    position:absolute;
    inset:0;
    z-index:4;
    display:flex;
    align-items:center;
    justify-content:center;
    border:0;
    padding:0;
    background:transparent;
    color:#fff;
    cursor:pointer;
}

.contact-studio-expand span{
    opacity:0;
    font:500 clamp(32px,3.2vw,48px)/1 var(--serif);
    writing-mode:vertical-rl;
    transform:rotate(180deg);
    text-shadow:0 2px 12px rgba(37,20,27,.5);
    transition:opacity .3s ease;
}

.contact-studio-expand:focus-visible{
    outline:2px solid #f3b3be;
    outline-offset:-12px;
}

.contact-studio.is-collapsed .contact-studio-expand span{opacity:1}
.contact-studio.is-collapsed .contact-studio-content,
.contact-studio.is-collapsed .contact-studio-map-toggle{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
}

.contact-studio-media.is-map-visible .contact-studio-expand{pointer-events:none}

.contact-studio-media{
    position:absolute;
    inset:0;
    overflow:hidden;
    isolation:isolate;
    background:#ead9d8;
    outline:none
}

.contact-studio-media>img{
    position:absolute;
    inset:0;
    z-index:1;
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    opacity:1;
    transform:scale(1.002);
    transition:
        opacity .42s ease,
        transform 1s cubic-bezier(.22,1,.36,1)
}

.contact-studio-map-layer{
    position:absolute;
    z-index:2;
    inset:0;
    width:100%;
    height:100%;
    overflow:hidden;
    background:#ead9d8;
    opacity:1;
    pointer-events:none;
    will-change:clip-path;
    transition:clip-path .9s cubic-bezier(.22,1,.36,1)
}

.contact-studio:not(:last-child) .contact-studio-map-layer{
    clip-path:circle(0 at 42px 42px)
}

.contact-studio:last-child .contact-studio-map-layer{
    clip-path:circle(0 at calc(100% - 42px) 42px)
}

.contact-studio-map-layer iframe{
    position:absolute;
    top:0;
    bottom:0;
    display:block;
    width:100%;
    max-width:none;
    height:100%;
    min-height:100%;
    margin:0;
    padding:0;
    border:0;
    filter:saturate(.8) contrast(.96)
}

.contact-studio:not(:last-child) .contact-studio-map-layer iframe{
    left:0;
    right:auto
}

.contact-studio:last-child .contact-studio-map-layer iframe{
    left:auto;
    right:0
}

.contact-studio-media.is-map-visible .contact-studio-map-layer{
    pointer-events:auto
}

.contact-studio:not(:last-child) .contact-studio-media.is-map-visible .contact-studio-map-layer{
    clip-path:circle(160vmax at 42px 42px)
}

.contact-studio:last-child .contact-studio-media.is-map-visible .contact-studio-map-layer{
    clip-path:circle(160vmax at calc(100% - 42px) 42px)
}

.contact-studio-media-overlay{
    position:absolute;
    inset:0;
    z-index:3;
    pointer-events:none;
    background:
        linear-gradient(
            180deg,
            rgba(37,20,27,.05) 0%,
            rgba(37,20,27,.08) 34%,
            rgba(37,20,27,.32) 67%,
            rgba(37,20,27,.78) 100%
        );
    transition:opacity .34s ease
}

.contact-studio-content{
    position:absolute;
    z-index:5;
    bottom:0;
    display:flex;
    width:100%;
    padding:0 clamp(22px,2.5vw,48px) clamp(34px,4vw,62px);
    flex-direction:column;
    color:#fff;
    pointer-events:none;
    transition:
        opacity .28s ease,
        visibility .28s ease
}

.contact-studio:not(:last-child) .contact-studio-content{
    left:0;
    align-items:flex-start;
    text-align:left
}

.contact-studio:last-child .contact-studio-content{
    right:0;
    align-items:flex-end;
    text-align:right
}



.contact-studio-heading{
    width:100%
}

.contact-studio-heading span{
    display:block;
    margin-bottom:6px;
    color:rgba(255,255,255,.78);
    font-family:var(--small);
    font-size:10px;
    line-height:1;
    font-weight:700;
    letter-spacing:.15em;
    text-transform:uppercase
}

.contact-studio-heading h3{
    margin:0;
    color:#fff;
    font-family:var(--serif);
    font-size:clamp(50px,5vw,78px);
    line-height:.88;
    font-weight:500;
    letter-spacing:-.035em
}

.contact-studio-address{
    display:flex;
    align-items:flex-start;
    gap:10px;
    max-width:420px;
    margin-top:20px;
    color:rgba(255,255,255,.9)
}

.contact-studio:last-child .contact-studio-address{
    flex-direction:row-reverse
}

.contact-studio-address i{
    margin-top:4px;
    color:#efabb7;
    font-size:14px
}

.contact-studio-address a{color:inherit;text-decoration:none;pointer-events:auto}
.contact-studio-address a:hover{text-decoration:underline}
.contact-studio-description{font-size:14px;line-height:1.55;margin:12px 0 0}
.contact-studio-address p{
    margin:0;
    font-size:14px;
    line-height:1.55
}

.contact-studio-actions{
    flex-wrap:wrap;
    position:relative;
    z-index:8;
    display:flex;
    align-items:center;
    gap:18px;
    margin-top:23px;
    pointer-events:auto
}

.contact-studio:last-child .contact-studio-actions{
    justify-content:flex-end
}

.contact-studio-actions .btn{
    position:relative;
    z-index:2;
    display:inline-flex;
    min-height:44px;
    padding:0 21px;
    align-items:center;
    justify-content:center;
    border:0;
    border-radius:999px;
    background:#e993a3;
    color:#fff;
    cursor:pointer;
    font-size:12px;
    font-weight:700;
    text-decoration:none;
    pointer-events:auto;
    transition:
        background-color .22s ease,
        transform .22s ease
}

.contact-studio-actions .btn:hover{
    background:#d98293;
    transform:translateY(-2px)
}

.contact-studio-map-link{
    position:relative;
    z-index:2;
    display:inline-flex;
    align-items:center;
    gap:7px;
    color:#fff;
    cursor:pointer;
    font-size:12px;
    line-height:1.3;
    font-weight:600;
    text-decoration:none;
    pointer-events:auto;
    transition:opacity .2s ease
}

.contact-studio-map-link:hover{
    opacity:.72
}

.contact-studio-map-link i{
    font-size:10px
}

.contact-studio-soon{
    width:max-content;
    color:#f3b3be;
    font-family:var(--script);
    font-size:32px;
    line-height:1
}

.contact-studio-map-toggle{
    position:absolute;
    z-index:7;
    top:24px;
    width:52px;
    height:52px;
    display:grid;
    place-items:center;
    padding:0;
    border:1px solid rgba(255,255,255,.54);
    border-radius:50%;
    background:rgba(52,30,37,.28);
    color:#fff;
    cursor:pointer;
    -webkit-backdrop-filter:blur(9px);
    backdrop-filter:blur(9px);
    transition:
        background-color .25s ease,
        transform .25s ease,
        opacity .25s ease,
        visibility .25s ease
}

.contact-studio:not(:last-child) .contact-studio-map-toggle{
    left:clamp(22px,3vw,48px)
}

.contact-studio:last-child .contact-studio-map-toggle{
    right:clamp(22px,3vw,48px)
}

.contact-studio-map-toggle:hover,
.contact-studio-map-toggle:focus-visible{
    background:rgba(233,147,163,.9);
    transform:scale(1.04)
}

.contact-studio-map-hand{
    position:relative;
    z-index:3;
    width:25px;
    height:25px;
    fill:none;
    stroke:#fff;
    stroke-width:1.65;
    stroke-linecap:round;
    stroke-linejoin:round;
    animation:contactStudioHandTap 2.25s ease-in-out infinite
}

.contact-studio-map-ripple{
    position:absolute;
    z-index:1;
    inset:8px;
    border:1px solid rgba(255,255,255,.48);
    border-radius:50%;
    opacity:0;
    pointer-events:none;
    animation:contactStudioMapRipple 2.25s ease-out infinite
}

.contact-studio-map-ripple--two{
    animation-delay:.48s
}

.contact-studio-media.is-map-visible>img{
    opacity:0;
    transform:scale(1.035)
}

.contact-studio-media.is-map-visible .contact-studio-media-overlay{
    opacity:0
}

.contact-studio-media.is-map-visible .contact-studio-content{
    opacity:0;
    visibility:hidden;
    pointer-events:none
}

.contact-studio-media.is-map-visible .contact-studio-map-toggle{
    background:#d98293;
}

@keyframes contactStudioHandTap{
    0%,
    32%,
    100%{
        transform:translateY(0) scale(1)
    }

    43%{
        transform:translateY(2px) scale(.93)
    }

    54%{
        transform:translateY(0) scale(1)
    }
}

@keyframes contactStudioMapRipple{
    0%,
    31%{
        opacity:0;
        transform:scale(.72)
    }

    42%{
        opacity:.68
    }

    72%,
    100%{
        opacity:0;
        transform:scale(1.65)
    }
}

@media(max-width:900px){
    .contact-studios{
        padding:72px 0 0
    }

    .contact-studios-heading{
        max-width:760px
    }

    .contact-studios-strip{
        display:block;
        height:auto;
        margin-top:40px
    }

    .contact-studio{
        width:100%;
        height:430px;
        margin-left:0;
        margin-top:-32px;
        transition:height .65s cubic-bezier(.22,1,.36,1);
        -webkit-mask-image:linear-gradient(180deg,transparent,#000 32px,#000 calc(100% - 32px),transparent);
        mask-image:linear-gradient(180deg,transparent,#000 32px,#000 calc(100% - 32px),transparent);
    }

    .contact-studio:first-child{
        margin-top:0;
        -webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 32px),transparent);
        mask-image:linear-gradient(180deg,#000 calc(100% - 32px),transparent);
    }

    .contact-studio:last-child{
        -webkit-mask-image:linear-gradient(180deg,transparent,#000 32px);
        mask-image:linear-gradient(180deg,transparent,#000 32px);
    }

    .contact-studio.is-collapsed{height:120px}
    .contact-studio.is-expanded{height:430px}
    .contact-studio-expand span{writing-mode:horizontal-tb;transform:none;font-size:34px}

    .contact-studio-map-layer iframe{
        inset:0;
        width:100%;
        height:100%
    }

    .contact-studio:not(:last-child) .contact-studio-map-layer iframe,
    .contact-studio:last-child .contact-studio-map-layer iframe{
        left:0;
        right:0
    }

    .contact-studio-content{
        width:min(88%,560px)
    }
}

@media(max-width:620px){
    .contact-studios{
        padding:62px 0 0
    }

    .contact-studios-heading{
        padding-inline:20px
    }

    .contact-studios-heading>p{
        font-size:34px
    }

    .contact-studios-heading h2{
        font-size:clamp(34px,9.8vw,43px);
        line-height:1
    }

    .contact-studios-heading h2 span{
        margin-top:7px
    }

    .contact-studios-strip{
        margin-top:34px
    }

    .contact-studio{
        height:400px
    }


    .contact-studio-content{
        width:100%;
        padding:0 22px 28px
    }

    .contact-studio:not(:last-child) .contact-studio-content,
    .contact-studio:last-child .contact-studio-content{
        right:auto;
        left:0;
        align-items:flex-start;
        text-align:left
    }

    .contact-studio:last-child .contact-studio-address{
        flex-direction:row
    }

    .contact-studio-heading h3{
        font-size:46px
    }

    .contact-studio-address{
        max-width:320px;
        margin-top:15px
    }

    .contact-studio-address p{
        font-size:13px
    }

    .contact-studio-actions,
    .contact-studio:last-child .contact-studio-actions{
        justify-content:flex-start;
        flex-wrap:wrap;
        gap:12px 16px;
        margin-top:18px
    }

    .contact-studio-actions .btn{
        min-height:42px;
        padding:0 18px
    }

    .contact-studio-map-link{
        font-size:11px
    }

    .contact-studio-soon{
        font-size:28px
    }

    .contact-studio-map-toggle{
        top:16px;
        width:48px;
        height:48px
    }

    .contact-studio:not(:last-child) .contact-studio-map-toggle{
        left:16px
    }

    .contact-studio:last-child .contact-studio-map-toggle{
        right:16px
    }

    .contact-studio-map-hand{
        width:23px;
        height:23px
    }
}

@media(hover:none){
    .contact-studio-media.is-map-visible .contact-studio-map-layer{
        pointer-events:auto
    }

    .contact-studio:not(:last-child) .contact-studio-media.is-map-visible .contact-studio-map-layer{
        clip-path:circle(160vmax at 42px 42px)
    }

    .contact-studio:last-child .contact-studio-media.is-map-visible .contact-studio-map-layer{
        clip-path:circle(160vmax at calc(100% - 42px) 42px)
    }
}

@media(prefers-reduced-motion:reduce){
    .contact-studio{
        transition:none!important
    }

    .contact-studio-map-layer{
        transition:none!important
    }

    .contact-studio-map-hand,
    .contact-studio-map-ripple{
        animation:none!important
    }

    .contact-studio-map-ripple{
        display:none
    }
}