/* =========================================================
   PEONA
   PREMIUM EDITORIAL BEAUTY SYSTEM
========================================================= */

:root {

    --ivory: #F6EEE8;
    --nude: #E8D9D0;
    --champagne: #C9A58E;
    --rose: #B99886;
    --taupe: #8C7468;

    --espresso: #332823;
    --black: #181514;

    --white: #fffaf7;

    --serif:
        "Cormorant Garamond",
        Georgia,
        serif;

    --sans:
        "DM Sans",
        Arial,
        sans-serif;

    --ease:
        cubic-bezier(.2,.7,.2,1);

    --slow:
        cubic-bezier(.16,1,.3,1);
}

/* =========================================================
   DARK THEME
========================================================= */

body.dark-mode {

    --ivory: #1D1816;
    --nude: #29221F;
    --champagne: #B99A86;
    --rose: #94766A;
    --taupe: #B7A39A;

    --espresso: #F3EAE3;
    --black: #100E0D;
    --white: #FFF8F3;
}

/* =========================================================
   THEME TRANSITION
========================================================= */

body,
.site-header,
.mobile-navigation,
.service-card,
.about,
.services,
.nail-art,
.studio,
.instagram,
.location-copy,
.booking,
footer,
.booking-modal-panel,
.editorial-item,
.featured-art,
.featured-art-copy {

    transition:
        background-color .6s var(--ease),
        color .6s var(--ease),
        border-color .6s var(--ease);
}

body.dark-mode .theme-sun {

    opacity: 0;

    transform:
        rotate(90deg)
        scale(.5);
}

body.dark-mode .theme-moon {

    opacity: 1;

    transform:
        rotate(0deg)
        scale(1);
}

body.dark-mode .site-header.scrolled {

    background:
        rgba(29,24,22,.88);

    box-shadow:
        0 1px 0
        rgba(246,238,232,.08);
}

body.dark-mode .theme-toggle {

    border-color:
        rgba(246,238,232,.22);

    color:
        var(--espresso);
}

body.dark-mode .service-grid {

    background:
        rgba(246,238,232,.12);

    border-color:
        rgba(246,238,232,.12);
}

body.dark-mode .service {

    background:
        var(--nude);

    border-color:
        rgba(246,238,232,.12);
}

body.dark-mode .service:hover {

    background:
        #312824;
}

body.dark-mode .service-card {

    background:
        var(--nude);
}

body.dark-mode .service-card:hover {

    background:
        #312824;
}

body.dark-mode .service-card-bottom,
body.dark-mode .art-details,
body.dark-mode .studio-meta,
body.dark-mode .location-details {

    border-color:
        rgba(246,238,232,.16);
}

body.dark-mode .nail-art {

    background:
        #1D1816;
}

body.dark-mode .featured-art {

    background:
        #29221F;
}

body.dark-mode .editorial-item {

    background:
        #29221F;
}

body.dark-mode .nail-art-intro > p,
body.dark-mode .nail-art-footer p {

    color:
        #B7A39A;
}

body.dark-mode .instagram {

    background:
        #29221F;
}

body.dark-mode .instagram-item::after {

    background:
        rgba(0,0,0,.25);
}


body.dark-mode .location-map iframe {

    filter:
        grayscale(1)
        invert(.88)
        contrast(.85)
        brightness(.72);
}


body.dark-mode .booking-modal-backdrop {

    background:
        rgba(0,0,0,.72);
}

body.dark-mode .booking-modal-panel {

    background:
        #211B19;
}

body.dark-mode .form-field input,
body.dark-mode .form-field select,
body.dark-mode .form-field textarea {

    color:
        var(--espresso);

    border-color:
        rgba(246,238,232,.2);
}

body.dark-mode .form-field input::placeholder,
body.dark-mode .form-field textarea::placeholder {

    color:
        rgba(246,238,232,.45);
}

body.dark-mode .booking-summary {

    background:
        #2D2522;
}

body.dark-mode .mobile-navigation {

    background:
        #1D1816;

    color:
        var(--espresso);
}

html.dark-preload body {

    background:
        #1D1816;

    color:
        #F3EAE3;
}

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

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    margin: 0;

    min-width: 320px;

    background:
        var(--ivory);

    color:
        var(--espresso);

    font-family:
        var(--sans);

    font-weight:
        300;

    line-height:
        1.6;

    overflow-x:
        hidden;
}

body.modal-open {
    overflow:
        hidden;
}

img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
select,
textarea {
    font: inherit;
}

button {
    cursor: pointer;
}

::selection {
    background: var(--champagne);
    color: var(--black);
}


/* =========================================================
   CUSTOM CURSOR
========================================================= */

.cursor {
    display: none;

    position: fixed;

    z-index: 10000;

    pointer-events: none;

    border-radius: 50%;

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

@media
(hover: hover)
and (pointer: fine) {

    .cursor {
        display: block;
    }

    body,
    a,
    button,
    input,
    select,
    textarea {
        cursor: none;
    }

    .cursor-dot {
        width: 6px;
        height: 6px;

        background:
            var(--espresso);
    }

    .cursor-outline {
        width: 34px;
        height: 34px;

        border:
            1px solid
            rgba(51,40,35,.5);

        transition:
            width .3s var(--ease),
            height .3s var(--ease),
            background .3s,
            border-color .3s;
    }

    body.cursor-hover
    .cursor-outline {

        width: 58px;
        height: 58px;

        background:
            rgba(201,165,142,.14);

        border-color:
            var(--champagne);
    }
}

/* =====================================================
   NAIL ART LIGHTBOX FIX
===================================================== */


.image-lightbox{

    position:fixed;

    inset:0;

    width:100vw;
    height:100vh;


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


    display:flex;

    justify-content:center;

    align-items:center;


    opacity:0;

    visibility:hidden;


    pointer-events:none;


    transition:
    opacity .35s ease;


    z-index:999999;


}



.image-lightbox.active{

    opacity:1;

    visibility:visible;

    pointer-events:auto;

}




.lightbox-image{

    max-width:90vw;

    max-height:90vh;


    object-fit:contain;


    border-radius:20px;


    transform:
    scale(.85);


    transition:
    transform .35s ease;


}




.image-lightbox.active 
.lightbox-image{


    transform:
    scale(1);


}




.lightbox-close{

    position:absolute;


    top:30px;

    right:40px;


    z-index:2;


    width:50px;

    height:50px;


    border-radius:50%;


    border:none;


    background:white;


    color:black;


    font-size:30px;


    cursor:pointer;


}

/* =========================================================
   PRELOADER
========================================================= */

.preloader {

    position: fixed;

    inset: 0;

    z-index: 9999;

    display: grid;

    place-items: center;

    background:
        var(--espresso);

    color:
        var(--ivory);

    transition:
        opacity .9s var(--slow),
        visibility .9s;
}

.preloader.loaded {

    opacity: 0;

    visibility: hidden;

    pointer-events: none;
}

.preloader-inner {

    width:
        min(360px, 70vw);

    text-align:
        center;
}

.preloader-logo {

    font-family:
        var(--serif);

    font-size:
        clamp(
            3.5rem,
            8vw,
            6rem
        );

    line-height:
        .8;

    letter-spacing:
        .15em;
}

.preloader-sub {

    margin-top:
        17px;

    font-size:
        .55rem;

    letter-spacing:
        .3em;

    opacity:
        .65;
}

.preloader-progress {

    margin-top:
        35px;

    width:
        100%;

    height:
        1px;

    background:
        rgba(246,238,232,.2);

    overflow:
        hidden;
}

.preloader-progress span {

    display:
        block;

    height:
        100%;

    background:
        var(--ivory);

    transform:
        scaleX(0);

    transform-origin:
        left;

    animation:
        loading 1.8s var(--ease)
        forwards;
}

@keyframes loading {

    to {
        transform:
            scaleX(1);
    }

}


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

.header-actions {

    justify-self: end;

    display: flex;

    align-items: center;

    gap: 24px;
}


/* =========================================================
   DARK MODE TOGGLE
========================================================= */

.theme-toggle {

    position: relative;

    width: 42px;
    height: 42px;

    display: flex;

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

    border: 1px solid
        rgba(51,40,35,.25);

    border-radius: 50%;

    background: transparent;

    color: var(--espresso);

    overflow: hidden;

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

.theme-toggle:hover {

    transform: rotate(12deg);

    border-color:
        var(--champagne);

    background:
        rgba(201,165,142,.10);
}

.theme-icon {

    position: absolute;

    font-size: 1rem;

    line-height: 1;

    transition:
        opacity .35s var(--ease),
        transform .5s var(--ease);
}

.theme-sun {

    opacity: 1;

    transform:
        rotate(0deg)
        scale(1);
}

.theme-moon {

    opacity: 0;

    transform:
        rotate(-90deg)
        scale(.5);
}

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

.site-header {

    position:
        fixed;

    top:
        0;

    left:
        0;

    width:
        100%;

    z-index:
        1000;

    padding:
        26px 5vw;

    display:
        grid;

    grid-template-columns:
        1fr auto 1fr;

    align-items:
        center;

    transition:
        background .45s,
        padding .45s,
        box-shadow .45s;
}

.site-header.scrolled {

    padding-top:
        16px;

    padding-bottom:
        16px;

    background:
        rgba(246,238,232,.92);

    backdrop-filter:
        blur(18px);

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

    box-shadow:
        0 1px 0
        rgba(51,40,35,.08);
}

.site-logo {

    font-family:
        var(--serif);

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

    line-height:
        1;

    letter-spacing:
        .16em;
}

.desktop-nav {

    display:
        flex;

    align-items:
        center;

    gap:
        clamp(
            22px,
            3vw,
            38px
        );
}

.desktop-nav a {

    position:
        relative;

    font-size:
        .62rem;

    text-transform:
        uppercase;

    letter-spacing:
        .15em;

    white-space:
        nowrap;
}

.desktop-nav a::after {

    content:
        "";

    position:
        absolute;

    left:
        0;

    bottom:
        -7px;

    width:
        0;

    height:
        1px;

    background:
        var(--espresso);

    transition:
        width .35s var(--ease);
}

.desktop-nav a:hover::after {

    width:
        100%;
}

.header-book {

    justify-self:
        end;

    padding-bottom:
        5px;

    border-bottom:
        1px solid
        var(--espresso);

    font-size:
        .6rem;

    text-transform:
        uppercase;

    letter-spacing:
        .13em;

    white-space:
        nowrap;
}


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

.menu-toggle {

    display:
        none;

    position:
        relative;

    z-index:
        1100;

    width:
        40px;

    height:
        40px;

    border:
        0;

    background:
        transparent;

    flex-direction:
        column;

    justify-content:
        center;

    align-items:
        flex-end;

    gap:
        6px;
}

.menu-toggle span {

    width:
        25px;

    height:
        1px;

    background:
        var(--espresso);

    transition:
        transform .35s,
        width .35s;
}

.menu-toggle.active span:first-child {

    transform:
        translateY(3.5px)
        rotate(45deg);
}

.menu-toggle.active span:last-child {

    transform:
        translateY(-3.5px)
        rotate(-45deg);
}

.mobile-navigation {

    display:
        none;
}


/* =========================================================
   GLOBAL
========================================================= */

.section {

    padding:
        clamp(
            100px,
            12vw,
            185px
        )
        7vw;
}

.section-marker {

    margin-bottom:
        clamp(
            45px,
            6vw,
            80px
        );

    color:
        var(--taupe);

    font-size:
        .58rem;

    letter-spacing:
        .22em;

    text-transform:
        uppercase;
}

.eyebrow {

    font-size:
        .58rem;

    letter-spacing:
        .22em;

    text-transform:
        uppercase;
}

.under-link {

    width:
        fit-content;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        12px;

    margin-top:
        30px;

    padding-bottom:
        5px;

    border-bottom:
        1px solid
        var(--espresso);

    font-size:
        .62rem;

    text-transform:
        uppercase;

    letter-spacing:
        .13em;
}

.under-link span {

    display:
        inline-block;

    transition:
        transform .35s var(--ease);
}

.under-link:hover span {

    transform:
        translate(4px, -4px);
}


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

img[loading="lazy"] {

    opacity:
        0;

    transition:
        opacity .8s var(--slow);
}

img[loading="lazy"].image-loaded {

    opacity:
        1;
}


/*
   Jangan sembunyikan gambar jika
   browser sudah menyimpannya di cache.
*/

img[loading="lazy"].image-loaded,
img[loading="lazy"]:not([src]) {

    opacity:
        1;
}

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

.hero {

    position:
        relative;

    min-height:
        100svh;

    display:
        grid;

    grid-template-columns:
        minmax(0, 46%)
        minmax(0, 54%);
}

.hero-copy {

    padding:
        clamp(
            130px,
            19vh,
            220px
        )
        7vw
        100px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;
}

.hero-title {

    margin:
        34px 0;

    font-family:
        var(--serif);

    font-size:
        clamp(
            5rem,
            9vw,
            10rem
        );

    font-weight:
        400;

    line-height:
        .72;

    letter-spacing:
        -.06em;

    will-change:
        transform;
}

.hero-title span {

    display:
        block;

    margin-left:
        .9em;

    font-style:
        italic;
}

.hero-description {

    max-width:
        390px;

    margin:
        0 0 25px;

    font-size:
        .82rem;
}

.hero-visual {

    min-width:
        0;

    padding:
        7vh 5vw 5vh 0;
}

.hero-frame {

    position:
        relative;

    height:
        100%;

    min-height:
        700px;

    overflow:
        hidden;

    background:
        var(--nude);
}

.hero-frame img {

    transform:
        scale(1.035);

    transition:
        transform 1.5s var(--slow);
}

.hero-frame:hover img {

    transform:
        scale(1.065);
}

.hero-video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center center; }

.hero-overlay {

    position:
        absolute;

    inset:
        0;
    z-index: 2;
    background:
        linear-gradient(
            180deg,
            transparent 60%,
            rgba(51,40,35,.28)
        );

    pointer-events:
        none;
}

.hero-image-meta {

    position:
        absolute;

    left:
        28px;

    right:
        28px;

    bottom:
        25px;

    display:
        flex;

    justify-content:
        space-between;
    z-index: 3;
    color:
        white;

    font-size:
        .53rem;

    letter-spacing:
        .18em;
}

.hero-stamp {

    position:
        absolute;

    left:
        1.7vw;

    bottom:
        55px;

    writing-mode:
        vertical-rl;

    transform:
        rotate(180deg);

    font-size:
        .52rem;

    letter-spacing:
        .22em;
}

.hero-scroll {

    position:
        absolute;

    right:
        4vw;

    bottom:
        30px;

    font-size:
        .53rem;

    letter-spacing:
        .18em;
}

.hero-scroll span {

    margin-left:
        12px;
}

/* =========================================================
   TESTIMONIALS
========================================================= */

.testimonials {

    background:
        var(--ivory);

    overflow:
        hidden;
}

.testimonials-header {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        flex-end;

    gap:
        50px;

    margin-bottom:
        90px;
}

.testimonials-header h2 {

    margin:
        28px 0 0;

    font-family:
        var(--serif);

    font-size:
        clamp(
            4rem,
            7vw,
            7.5rem
        );

    font-weight:
        400;

    line-height:
        .76;

    letter-spacing:
        -.055em;
}

.testimonials-header h2 em {

    display:
        block;

    text-align:
        right;

    font-style:
        italic;
}

.testimonials-header > p {

    max-width:
        300px;

    margin:
        0;

    font-size:
        .72rem;

    color:
        var(--taupe);
}


/* =========================================================
   TESTIMONIAL STAGE
========================================================= */

.testimonial-stage {

    position:
        relative;

    display:
        grid;

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

    align-items:
        center;

    min-height:
        520px;

    border-top:
        1px solid
        rgba(51,40,35,.2);

    border-bottom:
        1px solid
        rgba(51,40,35,.2);
}

.testimonial-viewport {

    position:
        relative;

    min-width:
        0;

    min-height:
        520px;

    overflow:
        hidden;
}

.testimonial {

    position:
        absolute;

    inset:
        0;

    padding:
        60px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        space-between;

    opacity:
        0;

    visibility:
        hidden;

    transform:
        translateY(25px);

    transition:
        opacity .65s var(--ease),
        transform .65s var(--ease),
        visibility .65s;
}

.testimonial.active {

    opacity:
        1;

    visibility:
        visible;

    transform:
        translateY(0);
}

.testimonial-index {

    font-size:
        .55rem;

    letter-spacing:
        .18em;

    color:
        var(--taupe);
}

.testimonial-quote {

    position:
        relative;

    max-width:
        900px;

    margin:
        auto;
}

.quote-small {

    display:
        block;

    margin-bottom:
        20px;

    font-family:
        var(--serif);

    font-size:
        4rem;

    line-height:
        .5;

    opacity:
        .45;
}

.testimonial blockquote {

    margin:
        0;

    font-family:
        var(--serif);

    font-size:
        clamp(
            2.8rem,
            5vw,
            5.7rem
        );

    font-weight:
        400;

    line-height:
        .84;

    letter-spacing:
        -.04em;
}

.testimonial-author {

    display:
        flex;

    flex-direction:
        column;

    gap:
        4px;
}

.testimonial-author strong {

    font-size:
        .57rem;

    letter-spacing:
        .15em;

    font-weight:
        400;
}

.testimonial-author span {

    color:
        var(--taupe);

    font-size:
        .53rem;

    letter-spacing:
        .1em;
}


/* =========================================================
   TESTIMONIAL ARROWS
========================================================= */

.testimonial-arrow {

    width:
        48px;

    height:
        48px;

    margin:
        auto;

    border:
        1px solid
        rgba(51,40,35,.22);

    border-radius:
        50%;

    background:
        transparent;

    color:
        var(--espresso);

    transition:
        background .35s var(--ease),
        color .35s var(--ease),
        transform .35s var(--ease);
}

.testimonial-arrow:hover {

    background:
        var(--espresso);

    color:
        var(--ivory);

    transform:
        scale(1.05);
}


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

.testimonial-progress {

    width:
        min(500px, 80%);

    margin:
        25px auto 0;

    display:
        flex;

    align-items:
        center;

    gap:
        15px;

    font-size:
        .52rem;

    letter-spacing:
        .1em;

    color:
        var(--taupe);
}

.progress-line {

    position:
        relative;

    flex:
        1;

    height:
        1px;

    background:
        rgba(51,40,35,.2);

    overflow:
        hidden;
}

.progress-line span {

    position:
        absolute;

    left:
        0;

    top:
        0;

    width:
        33.333%;

    height:
        100%;

    background:
        var(--espresso);

    transition:
        width .6s var(--ease);
}
/* =========================================================
   FAQ
========================================================= */

.faq {

    background:
        var(--nude);
}

.faq-grid {

    display:
        grid;

    grid-template-columns:
        minmax(280px,.7fr)
        minmax(0,1.3fr);

    gap:
        clamp(
            50px,
            10vw,
            150px
        );
}

.faq-intro {

    position:
        sticky;

    top:
        120px;

    align-self:
        start;
}

.faq-intro h2 {

    margin:
        30px 0;

    font-family:
        var(--serif);

    font-size:
        clamp(
            4rem,
            7vw,
            7rem
        );

    font-weight:
        400;

    line-height:
        .76;

    letter-spacing:
        -.055em;
}

.faq-intro h2 em {

    display:
        block;

    text-align:
        right;

    font-style:
        italic;
}

.faq-intro > p {

    max-width:
        330px;

    margin:
        0;

    font-size:
        .73rem;
}


/* =========================================================
   FAQ LIST
========================================================= */

.faq-list {

    border-top:
        1px solid
        rgba(51,40,35,.25);
}

.faq-item {

    border-bottom:
        1px solid
        rgba(51,40,35,.25);
}

.faq-question {

    width:
        100%;

    min-height:
        92px;

    padding:
        20px 0;

    border:
        0;

    background:
        transparent;

    color:
        var(--espresso);

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        30px;

    text-align:
        left;

    font-family:
        var(--serif);

    font-size:
        clamp(
            1.45rem,
            2.2vw,
            2.1rem
        );

    line-height:
        1;

    transition:
        padding .35s var(--ease);
}

.faq-question:hover {

    padding-left:
        10px;

    padding-right:
        10px;
}

.faq-icon {

    flex:
        0 0 auto;

    width:
        32px;

    height:
        32px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid
        rgba(51,40,35,.25);

    border-radius:
        50%;

    font-family:
        var(--sans);

    font-size:
        .9rem;

    font-weight:
        300;

    transition:
        transform .45s var(--ease),
        background .35s,
        color .35s;
}

.faq-item.open .faq-icon {

    transform:
        rotate(45deg);

    background:
        var(--espresso);

    color:
        var(--ivory);
}

.faq-answer {

    display:
        grid;

    grid-template-rows:
        0fr;

    transition:
        grid-template-rows .55s var(--ease);
}

.faq-answer > div {

    overflow:
        hidden;

    max-width:
        600px;

    font-size:
        .7rem;

    line-height:
        1.8;

    color:
        var(--taupe);
}

.faq-item.open .faq-answer {

    grid-template-rows:
        1fr;
}

.faq-item.open .faq-answer > div {

    padding:
        0 50px 30px 0;
}

/* =========================================================
   TESTIMONIALS + FAQ RESPONSIVE
========================================================= */

@media (max-width: 767px) {

    /* TESTIMONIALS */

    .testimonials-header {

        display:
            block;

        margin-bottom:
            55px;
    }

    .testimonials-header h2 {

        font-size:
            clamp(
                4rem,
                17vw,
                6rem
            );
    }

    .testimonials-header > p {

        margin-top:
            35px;
    }

    .testimonial-stage {

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

        min-height:
            500px;
    }

    .testimonial-viewport {

        min-height:
            500px;
    }

    .testimonial {

        padding:
            35px 20px;
    }

    .testimonial blockquote {

        font-size:
            clamp(
                2.5rem,
                10vw,
                4rem
            );
    }

    .testimonial-arrow {

        width:
            38px;

        height:
            38px;

        font-size:
            .75rem;
    }


    /* FAQ */

    .faq-grid {

        grid-template-columns:
            1fr;

        gap:
            65px;
    }

    .faq-intro {

        position:
            static;
    }

    .faq-intro h2 {

        font-size:
            clamp(
                4rem,
                17vw,
                6rem
            );
    }

    .faq-question {

        min-height:
            82px;

        font-size:
            1.45rem;

        gap:
            15px;
    }

    .faq-question:hover {

        padding-left:
            0;

        padding-right:
            0;
    }

    .faq-icon {

        width:
            30px;

        height:
            30px;
    }

    .faq-item.open .faq-answer > div {

        padding:
            0 35px 28px 0;
    }

}


@media (max-width: 420px) {

    .testimonial-stage {

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

    .testimonial {

        padding:
            30px 12px;
    }

    .testimonial blockquote {

        font-size:
            2.35rem;
    }

    .testimonial-progress {

        width:
            90%;
    }

    .faq-question {

        font-size:
            1.3rem;
    }

}
/* =========================================================
   ABOUT
========================================================= */

.about-grid {

    display:
        grid;

    grid-template-columns:
        minmax(0, 1.25fr)
        minmax(280px, .75fr);

    gap:
        clamp(
            50px,
            10vw,
            150px
        );
}

.about-heading h2 {

    margin:
        0;

    font-family:
        var(--serif);

    font-size:
        clamp(
            4rem,
            7.2vw,
            7.8rem
        );

    font-weight:
        400;

    line-height:
        .8;

    letter-spacing:
        -.055em;
}

.about-heading em {

    display:
        block;

    text-align:
        right;

    font-style:
        italic;
}

.about-content {

    max-width:
        410px;

    padding-top:
        10px;
}

.about-lead {

    margin-top:
        0;

    font-family:
        var(--serif);

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

    line-height:
        1.1;
}


/* =========================================================
   MANIFESTO
========================================================= */

.manifesto {

    position:
        relative;

    min-height:
        80svh;

    padding:
        100px 7vw;

    display:
        grid;

    place-items:
        center;

    text-align:
        center;

    overflow:
        hidden;

    background:
        var(--espresso);

    color:
        var(--ivory);
}

.manifesto-orb {

    position:
        absolute;

    width:
        min(40vw, 520px);

    aspect-ratio:
        1;

    border-radius:
        50%;

    right:
        -10%;

    top:
        10%;

    background:
        radial-gradient(
            circle,
            rgba(201,165,142,.26),
            transparent 65%
        );

    filter:
        blur(10px);
}

.manifesto-content {

    position:
        relative;

    z-index:
        1;
}

.manifesto h2 {

    max-width:
        1100px;

    margin:
        40px auto;

    font-family:
        var(--serif);

    font-size:
        clamp(
            4rem,
            8.5vw,
            9.5rem
        );

    font-weight:
        400;

    line-height:
        .76;

    letter-spacing:
        -.055em;
}

.manifesto h2 em {

    font-style:
        italic;
}

.manifesto p {

    font-size:
        .7rem;

    letter-spacing:
        .08em;
}


/* =========================================================
   SERVICES
========================================================= */

.services {

    background:
        var(--nude);
}

.services-heading {

    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(220px, .35fr);

    gap:
        9vw;

    align-items:
        end;

    margin-bottom:
        80px;
}

.services-heading h2 {

    margin:
        0;

    font-family:
        var(--serif);

    font-size:
        clamp(
            4rem,
            7vw,
            7.5rem
        );

    font-weight:
        400;

    line-height:
        .77;

    letter-spacing:
        -.055em;
}

.services-heading h2 em {

    display:
        block;

    text-align:
        right;

    font-style:
        italic;
}

.services-heading p {

    margin:
        0;

    max-width:
        280px;

    font-size:
        .73rem;
}

.service-grid {

    display:
        grid;

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

    gap:
        1px;

    background:
        rgba(51,40,35,.22);

    border:
        1px solid
        rgba(51,40,35,.22);
}

.service-card {

    min-height:
        410px;

    padding:
        28px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        space-between;

    background:
        var(--nude);

    transition:
        background .5s var(--ease),
        transform .5s var(--ease);
}

.service-card:hover {

    background:
        #eadbd3;

    transform:
        translateY(-5px);
}

.service-card-top {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    font-size:
        .56rem;

    letter-spacing:
        .15em;
}

.service-arrow {

    font-size:
        1.1rem;

    transition:
        transform .4s var(--ease);
}

.service-card:hover .service-arrow {

    transform:
        translate(
            4px,
            -4px
        );
}

.service-badge {

    padding:
        5px 9px;

    border:
        1px solid
        rgba(51,40,35,.35);

    font-size:
        .48rem;

    letter-spacing:
        .16em;
}

.service-card-body {

    padding:
        50px 0 20px;
}

.service-card h3 {

    margin:
        0 0 25px;

    max-width:
        480px;

    font-family:
        var(--serif);

    font-size:
        clamp(
            3rem,
            4.5vw,
            5rem
        );

    font-weight:
        400;

    line-height:
        .76;

    letter-spacing:
        -.045em;
}

.service-card h3 em {

    display:
        block;

    text-align:
        right;

    font-style:
        italic;
}

.service-card p {

    max-width:
        380px;

    margin:
        0;

    font-size:
        .68rem;
}

.service-card-bottom {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        end;

    gap:
        15px;

    padding-top:
        20px;

    border-top:
        1px solid
        rgba(51,40,35,.22);

    font-size:
        .53rem;

    letter-spacing:
        .08em;
}

.service-card-bottom strong {

    display:
        block;

    margin-top:
        4px;

    font-weight:
        400;
}


/* =========================================================
   NAIL ART
========================================================= */

.nail-art {

    padding:
        clamp(
            100px,
            12vw,
            180px
        )
        7vw;

    background:
        var(--ivory);
}

.nail-art-header {

    display:
        grid;

    grid-template-columns:
        minmax(160px,.25fr)
        minmax(0,1fr);

    gap:
        10vw;

    margin-bottom:
        110px;
}

.nail-art-intro {

    max-width:
        760px;
}

.nail-art-intro h2 {

    margin:
        30px 0;

    font-family:
        var(--serif);

    font-size:
        clamp(
            4rem,
            8vw,
            8.5rem
        );

    font-weight:
        400;

    line-height:
        .74;

    letter-spacing:
        -.055em;
}

.nail-art-intro h2 em {

    display:
        block;

    text-align:
        right;

    font-style:
        italic;
}

.nail-art-intro > p {

    max-width:
        450px;

    margin:
        0 0 0 auto;

    font-size:
        .76rem;
}


/* =========================================================
   FEATURED ART
========================================================= */

.featured-art {

    display:
        grid;

    grid-template-columns:
        minmax(0, 1.48fr)
        minmax(340px, .72fr);

    min-height:
        760px;

    background:
        var(--nude);

    overflow:
        hidden;
}

.hero-frame,
.featured-art-media,
.editorial-image,
.studio-media,
.instagram-item {

    background:
        linear-gradient(
            135deg,
            var(--nude),
            var(--ivory)
        );
}
.featured-art-media {

    position:
        relative;

    min-width:
        0;

    overflow:
        hidden;
}

.featured-art-media img {

    transform:
        scale(1.04);

    transition:
        transform 1.2s var(--slow);
}

.featured-art-media:hover img {

    transform:
        scale(1.065);
}

.featured-art-counter,
.featured-art-label {

    position:
        absolute;

    bottom:
        25px;

    color:
        white;

    font-size:
        .53rem;

    letter-spacing:
        .17em;
}

.featured-art-counter {

    left:
        28px;
}

.featured-art-label {

    right:
        28px;
}

.featured-art-copy {

    padding:
        clamp(50px,7vw,105px)
        clamp(35px,6vw,90px);

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;
}

.art-kicker {

    font-size:
        .53rem;

    letter-spacing:
        .18em;
}

.featured-art-copy h3 {

    margin:
        35px 0;

    font-family:
        var(--serif);

    font-size:
        clamp(
            4rem,
            6vw,
            7rem
        );

    font-weight:
        400;

    line-height:
        .75;

    letter-spacing:
        -.045em;
}

.featured-art-copy h3 em {

    display:
        block;

    text-align:
        right;

    font-style:
        italic;
}

.featured-art-copy > p {

    max-width:
        360px;

    margin:
        0 0 0 auto;

    font-size:
        .72rem;
}

.art-details {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        30px;

    margin-top:
        50px;

    padding-top:
        23px;

    border-top:
        1px solid
        rgba(51,40,35,.25);
}

.art-details div {

    display:
        flex;

    flex-direction:
        column;

    gap:
        5px;
}

.art-details span {

    font-size:
        .5rem;

    letter-spacing:
        .15em;

    color:
        var(--taupe);
}

.art-details strong {

    font-size:
        .62rem;

    font-weight:
        400;
}


/* =========================================================
   EDITORIAL GALLERY
========================================================= */

.editorial-gallery {

    margin-top:
        20px;

    display:
        grid;

    grid-template-columns:
        minmax(0, 1.2fr)
        minmax(0, .8fr);

    grid-template-rows:
        auto auto auto;

    gap:
        20px;
}

.editorial-item {

    position:
        relative;

    min-width:
        0;

    min-height:
        460px;

    overflow:
        hidden;

    background:
        var(--nude);
}

.editorial-item-large {

    grid-row:
        span 2;

    min-height:
        730px;
}

.editorial-item-wide {

    min-height:
        360px;
}

.editorial-item-last {

    grid-column:
        2;

    min-height:
        360px;
}

.editorial-image {

    position:
        absolute;

    inset:
        0;

    overflow:
        hidden;
}

.editorial-image::after {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            180deg,
            transparent 58%,
            rgba(51,40,35,.3)
        );
}

.editorial-image img {

    transition:
        transform 1s var(--slow),
        filter .6s var(--ease);
}

.editorial-item:hover
.editorial-image img {

    transform:
        scale(1.05);

    filter:
        saturate(.82);
}

.editorial-caption {

    position:
        absolute;

    left:
        23px;

    right:
        23px;

    bottom:
        20px;

    z-index:
        2;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    color:
        white;

    font-size:
        .55rem;

    letter-spacing:
        .12em;

    text-transform:
        uppercase;
}

.editorial-caption strong {

    font-family:
        var(--serif);

    font-size:
        1.4rem;

    font-weight:
        400;

    text-transform:
        none;

    letter-spacing:
        0;
}

.nail-art-footer {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        end;

    gap:
        30px;

    margin-top:
        45px;
}

.nail-art-footer p {

    max-width:
        350px;

    margin:
        0;

    color:
        var(--taupe);

    font-size:
        .68rem;
}


/* =========================================================
   EDITORIAL QUOTE
========================================================= */

.editorial-quote {

    min-height:
        78svh;

    padding:
        100px 7vw;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    text-align:
        center;

    background:
        var(--rose);

    color:
        var(--espresso);
}

.quote-symbol {

    font-family:
        var(--serif);

    font-size:
        8rem;

    line-height:
        .25;

    opacity:
        .35;
}

.editorial-quote blockquote {

    width:
        100%;

    max-width:
        1050px;

    margin:
        55px 0;

    font-family:
        var(--serif);

    font-size:
        clamp(
            4rem,
            7vw,
            8rem
        );

    font-weight:
        400;

    line-height:
        .78;

    letter-spacing:
        -.055em;
}

.editorial-quote > span {

    font-size:
        .54rem;

    letter-spacing:
        .22em;
}

.editorial-image::after{

    pointer-events:none;

}


/* =========================================================
   STUDIO
========================================================= */

.studio-grid {

    display:
        grid;

    grid-template-columns:
        minmax(0, 1.1fr)
        minmax(300px, .9fr);

    min-height:
        700px;
}

.studio-media {

    overflow:
        hidden;
}

.studio-media img {

    transition:
        transform 1.1s var(--slow);
}

.studio-media:hover img {

    transform:
        scale(1.035);
}

.studio-copy {

    padding:
        clamp(50px,7vw,110px);

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;
}

.studio-copy h2 {

    margin:
        30px 0;

    font-family:
        var(--serif);

    font-size:
        clamp(
            4rem,
            6.5vw,
            7rem
        );

    font-weight:
        400;

    line-height:
        .76;

    letter-spacing:
        -.05em;
}

.studio-copy h2 em {

    display:
        block;

    text-align:
        right;

    font-style:
        italic;
}

.studio-copy > p {

    max-width:
        420px;

    font-size:
        .76rem;
}

.studio-meta {

    display:
        grid;

    grid-template-columns:
        1fr;

    gap:
        18px;

    margin-top:
        50px;

    padding-top:
        22px;

    border-top:
        1px solid
        rgba(51,40,35,.22);
}

.studio-meta div {

    display:
        flex;

    flex-direction:
        column;

    gap:
        4px;
}

.studio-meta span {

    color:
        var(--taupe);

    font-size:
        .5rem;

    letter-spacing:
        .15em;
}

.studio-meta strong {

    font-size:
        .65rem;

    font-weight:
        400;
}


/* =========================================================
   INSTAGRAM
========================================================= */

.instagram {

    background:
        var(--nude);
}

.instagram-heading {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        end;

    gap:
        40px;

    margin-bottom:
        70px;
}

.instagram-heading h2 {

    margin:
        0;

    font-family:
        var(--serif);

    font-size:
        clamp(
            4rem,
            7vw,
            7rem
        );

    font-weight:
        400;

    line-height:
        .75;

    letter-spacing:
        -.05em;
}

.instagram-heading h2 em {

    font-style:
        italic;
}

.instagram-grid {

    display:
        grid;

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

    gap:
        10px;
}

.instagram-item {

    position:
        relative;

    aspect-ratio:
        1;

    overflow:
        hidden;

    background:
        var(--ivory);
}

.instagram-item::after {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:
        rgba(51,40,35,.16);

    opacity:
        0;

    transition:
        opacity .4s;
}

.instagram-item:hover::after {

    opacity:
        1;
}

.instagram-item img {

    transition:
        transform .9s var(--slow);
}

.instagram-item:hover img {

    transform:
        scale(1.06);
}

.instagram-item > span {

    position:
        absolute;

    z-index:
        2;

    right:
        15px;

    bottom:
        12px;

    color:
        white;

    font-size:
        .9rem;

    opacity:
        0;

    transform:
        translate(5px,5px);

    transition:
        opacity .35s,
        transform .35s;
}

.instagram-item:hover > span {

    opacity:
        1;

    transform:
        translate(0,0);
}


/* =========================================================
   LOCATION
========================================================= */

.location {

    display:
        grid;

    grid-template-columns:
        minmax(0, 1.1fr)
        minmax(320px, .9fr);

    min-height:
        700px;
}

.location-map {

    min-height:
        700px;

    background:
        var(--nude);
}

.location-map iframe {

    width:
        100%;

    height:
        100%;

    min-height:
        700px;

    border:
        0;

    filter:
        grayscale(1)
        sepia(.1);
}

.location-copy {

    padding:
        clamp(50px,7vw,110px);

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;
}

.location-copy h2 {

    margin:
        30px 0;

    font-family:
        var(--serif);

    font-size:
        clamp(
            4rem,
            6.5vw,
            7rem
        );

    font-weight:
        400;

    line-height:
        .76;

    letter-spacing:
        -.05em;
}

.location-copy h2 em {

    display:
        block;

    text-align:
        right;

    font-style:
        italic;
}

.location-copy > p {

    max-width:
        390px;

    font-size:
        .76rem;
}

.location-details {

    margin-top:
        45px;

    padding-top:
        22px;

    border-top:
        1px solid
        rgba(51,40,35,.22);

    display:
        flex;

    flex-direction:
        column;

    gap:
        6px;
}

.location-details span {

    color:
        var(--taupe);

    font-size:
        .5rem;

    letter-spacing:
        .15em;
}

.location-details strong {

    font-size:
        .67rem;

    font-weight:
        400;
}

.location-details small {

    color:
        var(--taupe);

    font-size:
        .58rem;
}


/* =========================================================
   BOOKING
========================================================= */

.booking {

    padding:
        clamp(
            110px,
            12vw,
            190px
        )
        7vw;

    background:
        var(--champagne);

    text-align:
        center;
}

.booking-inner {

    max-width:
        1200px;

    margin:
        auto;
}

.booking-intro h2 {

    margin:
        50px 0 25px;

    font-family:
        var(--serif);

    font-size:
        clamp(
            4.5rem,
            9vw,
            10rem
        );

    font-weight:
        400;

    line-height:
        .73;

    letter-spacing:
        -.06em;
}

.booking-intro h2 em {

    font-style:
        italic;
}

.booking-intro p {

    margin:
        0 auto 35px;

    max-width:
        380px;

    font-size:
        .72rem;
}

.booking-button {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        17px;

    padding:
        18px 26px;

    border:
        0;

    background:
        var(--espresso);

    color:
        var(--ivory);

    font-size:
        .6rem;

    text-transform:
        uppercase;

    letter-spacing:
        .15em;

    transition:
        transform .4s var(--ease),
        background .4s var(--ease);
}

.booking-button:hover {

    transform:
        translateY(-4px);

    background:
        var(--black);
}


/* =========================================================
   BOOKING MODAL
========================================================= */

.booking-modal {

    position:
        fixed;

    inset:
        0;

    z-index:
        5000;

    visibility:
        hidden;

    opacity:
        0;

    transition:
        opacity .45s var(--ease),
        visibility .45s;
}

.booking-modal.open {

    visibility:
        visible;

    opacity:
        1;
}

.booking-modal-backdrop {

    position:
        absolute;

    inset:
        0;

    background:
        rgba(24,21,20,.58);

    backdrop-filter:
        blur(10px);
}

.booking-modal-panel {

    position:
        absolute;

    right:
        0;

    top:
        0;

    width:
        min(650px, 100%);

    height:
        100%;

    overflow:
        auto;

    padding:
        70px
        clamp(25px,5vw,70px);

    background:
        var(--ivory);

    transform:
        translateX(100%);

    transition:
        transform .65s var(--slow);
}

.booking-modal.open
.booking-modal-panel {

    transform:
        translateX(0);
}

.modal-close {

    position:
        absolute;

    top:
        24px;

    right:
        25px;

    width:
        42px;

    height:
        42px;

    border:
        1px solid
        rgba(51,40,35,.25);

    border-radius:
        50%;

    background:
        transparent;

    font-size:
        1.4rem;

    line-height:
        1;
}

.modal-heading h2 {

    margin:
        30px 0 50px;

    font-family:
        var(--serif);

    font-size:
        clamp(
            4rem,
            7vw,
            6.5rem
        );

    font-weight:
        400;

    line-height:
        .75;

    letter-spacing:
        -.05em;
}

.modal-heading h2 em {

    display:
        block;

    text-align:
        right;

    font-style:
        italic;
}

.form-grid {

    display:
        grid;

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

    gap:
        30px 18px;
}

.form-field {

    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;

    gap:
        9px;
}

.form-field.full {

    grid-column:
        1 / -1;
}

.form-field > span {

    font-size:
        .5rem;

    letter-spacing:
        .16em;

    color:
        var(--taupe);
}

.form-field input,
.form-field select,
.form-field textarea {

    width:
        100%;

    padding:
        12px 0;

    border:
        0;

    border-bottom:
        1px solid
        rgba(51,40,35,.25);

    border-radius:
        0;

    outline:
        none;

    background:
        transparent;

    color:
        var(--espresso);

    font-size:
        .75rem;
}

.form-field textarea {

    resize:
        vertical;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {

    border-color:
        var(--espresso);
}

.booking-summary {

    margin-top:
        45px;

    padding:
        20px;

    background:
        var(--nude);

    display:
        flex;

    flex-direction:
        column;

    gap:
        4px;
}

.booking-summary span {

    font-size:
        .48rem;

    letter-spacing:
        .15em;

    color:
        var(--taupe);
}

.booking-summary strong {

    font-family:
        var(--serif);

    font-size:
        1.5rem;

    font-weight:
        400;
}

.submit-booking {

    width:
        100%;

    margin-top:
        18px;

    padding:
        17px 20px;

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    gap:
        15px;

    border:
        0;

    background:
        var(--espresso);

    color:
        var(--ivory);

    font-size:
        .58rem;

    text-transform:
        uppercase;

    letter-spacing:
        .14em;

    transition:
        background .3s,
        transform .3s;
}

.submit-booking:hover {

    background:
        var(--black);

    transform:
        translateY(-2px);
}

.booking-note {

    margin:
        14px 0 0;

    text-align:
        center;

    color:
        var(--taupe);

    font-size:
        .55rem;
}


/* =========================================================
   FOOTER
========================================================= */

footer {

    padding:
        clamp(
            80px,
            10vw,
            150px
        )
        7vw
        25px;

    background:
        var(--black);

    color:
        var(--ivory);
}

.footer-top {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        flex-end;

    gap:
        30px;
}

.footer-logo {

    font-family:
        var(--serif);

    font-size:
        clamp(
            7rem,
            18vw,
            18rem
        );

    line-height:
        .62;

    letter-spacing:
        .02em;
}

.footer-side {

    text-align:
        right;

    padding-bottom:
        10px;
}

.footer-side > span {

    font-size:
        .54rem;

    letter-spacing:
        .22em;
}

.footer-side p {

    margin:
        12px 0 0;

    color:
        rgba(246,238,232,.55);

    font-size:
        .63rem;
}

.footer-bottom {

    margin-top:
        100px;

    padding-top:
        18px;

    border-top:
        1px solid
        rgba(246,238,232,.2);

    display:
        flex;

    justify-content:
        space-between;

    gap:
        20px;

    font-size:
        .54rem;

    letter-spacing:
        .07em;
}


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

.reveal {

    opacity:
        0;

    transform:
        translateY(45px);

    transition:
        opacity 1s var(--slow),
        transform 1s var(--slow);
}

.reveal.visible {

    opacity:
        1;

    transform:
        translateY(0);
}


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

@media (max-width: 1100px) {

    .header-book {
        display:
            none;
    }

    .site-header {

        grid-template-columns:
            1fr auto auto;
    }

    .hero-title {

        font-size:
            clamp(
                4rem,
                8.5vw,
                7rem
            );
    }

    .featured-art {

        grid-template-columns:
            minmax(0,1.15fr)
            minmax(300px,.85fr);

        min-height:
            620px;
    }

    .service-card {

        min-height:
            390px;
    }

    .studio-grid {

        min-height:
            600px;
    }
}


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

@media (max-width: 767px) {

    html {
        scroll-padding-top:
            80px;
    }

    .site-header {

        display:
            flex;

        justify-content:
            space-between;

        padding:
            20px 6vw;
    }

    .desktop-nav,
    .header-book {

        display:
            none;
    }

    .menu-toggle {

        display:
            flex;
    }


    /* MOBILE NAV */

    .mobile-navigation {

        position:
            fixed;

        inset:
            0;

        z-index:
            1050;

        display:
            block;

        background:
            var(--ivory);

        transform:
            translateX(100%);

        transition:
            transform .65s var(--slow);
    }

    .mobile-navigation.open {

        transform:
            translateX(0);
    }

    .mobile-nav-inner {

        height:
            100%;

        padding:
            110px 10vw 40px;

        display:
            flex;

        flex-direction:
            column;

        justify-content:
            center;

        align-items:
            flex-start;
    }

    .mobile-nav-label {

        margin-bottom:
            35px;

        color:
            var(--taupe);

        font-size:
            .52rem;

        letter-spacing:
            .2em;
    }

    .mobile-nav-inner a {

        padding:
            6px 0;

        font-family:
            var(--serif);

        font-size:
            clamp(
                2.7rem,
                11vw,
                4rem
            );

        line-height:
            1;

        letter-spacing:
            -.02em;
    }


    /* HERO */

    .hero {

        display:
            block;

        min-height:
            auto;
    }

    .hero-copy {

        min-height:
            82svh;

        padding:
            130px 7vw 70px;
    }

    .hero-title {

        font-size:
            clamp(
                4.2rem,
                18vw,
                6.5rem
            );
    }

    .hero-description {

        max-width:
            320px;

        font-size:
            .72rem;
    }

    .hero-visual {

        height:
            88svh;

        padding:
            0 7vw 60px;
    }

    .hero-frame {

        min-height:
            0;

        height:
            100%;
    }

    .hero-image-meta {

        left:
            18px;

        right:
            18px;

        bottom:
            18px;

        flex-direction:
            column;

        align-items:
            flex-end;

        gap:
            5px;
    }

    .hero-stamp,
    .hero-scroll {

        display:
            none;
    }


    /* GENERAL */

    .section {

        padding:
            95px 7vw;
    }


    /* ABOUT */

    .about-grid {

        grid-template-columns:
            1fr;

        gap:
            55px;
    }

    .about-heading h2 {

        font-size:
            clamp(
                4rem,
                17vw,
                6.5rem
            );
    }


    /* MANIFESTO */

    .manifesto {

        min-height:
            68svh;

        padding:
            90px 7vw;
    }

    .manifesto h2 {

        font-size:
            clamp(
                3.6rem,
                16vw,
                6rem
            );
    }


    /* SERVICES */

    .services-heading {

        grid-template-columns:
            1fr;

        gap:
            35px;
    }

    .services-heading h2 {

        font-size:
            clamp(
                4rem,
                17vw,
                6.5rem
            );
    }

    .service-grid {

        grid-template-columns:
            1fr;
    }

    .service-card {

        min-height:
            360px;

        padding:
            23px;
    }


    /* NAIL ART */

    .nail-art {

        padding:
            95px 7vw;
    }

    .nail-art-header {

        grid-template-columns:
            1fr;

        gap:
            45px;

        margin-bottom:
            70px;
    }

    .nail-art-intro h2 {

        font-size:
            clamp(
                4rem,
                17vw,
                6.5rem
            );
    }

    .nail-art-intro > p {

        margin:
            0;

        max-width:
            350px;
    }

    .featured-art {

        display:
            block;

        min-height:
            auto;
    }

    .featured-art-media {

        height:
            105vw;

        max-height:
            640px;
    }

    .featured-art-copy {

        padding:
            70px 8vw;
    }

    .featured-art-copy h3 {

        font-size:
            clamp(
                4rem,
                17vw,
                6.5rem
            );
    }

    .editorial-gallery {

        grid-template-columns:
            1fr;

        gap:
            15px;
    }

    .editorial-item,
    .editorial-item-large,
    .editorial-item-wide,
    .editorial-item-last {

        grid-column:
            auto;

        grid-row:
            auto;

        min-height:
            105vw;

        max-height:
            650px;
    }

    .nail-art-footer {

        display:
            block;
    }


    /* QUOTE */

    .editorial-quote {

        min-height:
            65svh;

        padding:
            90px 7vw;
    }

    .editorial-quote blockquote {

        font-size:
            clamp(
                3.2rem,
                15vw,
                6rem
            );
    }


    /* STUDIO */

    .studio-grid {

        grid-template-columns:
            1fr;

        min-height:
            0;
    }

    .studio-media {

        height:
            105vw;

        max-height:
            650px;
    }

    .studio-copy {

        padding:
            75px 0;
    }

    .studio-copy h2 {

        font-size:
            clamp(
                4rem,
                17vw,
                6.5rem
            );
    }


    /* INSTAGRAM */

    .instagram-heading {

        display:
            block;
    }

    .instagram-heading h2 {

        font-size:
            clamp(
                4rem,
                17vw,
                6.5rem
            );
    }

    .instagram-grid {

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

    .instagram-item:last-child {

        display:
            none;
    }


    /* LOCATION */

    .location {

        grid-template-columns:
            1fr;
    }

    .location-map {

        min-height:
            75vw;

        height:
            75vw;
    }

    .location-map iframe {

        min-height:
            100%;

        height:
            100%;
    }

    .location-copy {

        padding:
            80px 7vw;
    }

    .location-copy h2 {

        font-size:
            clamp(
                4rem,
                17vw,
                6.5rem
            );
    }


    /* BOOKING */

    .booking {

        padding:
            95px 7vw;
    }

    .booking-intro h2 {

        font-size:
            clamp(
                4rem,
                17vw,
                7rem
            );
    }

    .booking-button {

        width:
            100%;

        justify-content:
            center;
    }


    /* MODAL */

    .booking-modal-panel {

        width:
            100%;

        padding:
            85px 7vw 40px;
    }

    .form-grid {

        grid-template-columns:
            1fr;
    }

    .form-field.full {

        grid-column:
            auto;
    }


    /* FOOTER */

    .footer-top {

        display:
            block;
    }

    .footer-logo {

        font-size:
            clamp(
                6rem,
                25vw,
                10rem
            );
    }

    .footer-side {

        margin-top:
            35px;

        text-align:
            right;
    }

    .footer-bottom {

        flex-direction:
            column;

        align-items:
            flex-start;

        gap:
            12px;

        margin-top:
            70px;
    }

}


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

@media (max-width: 420px) {

    .hero-title {

        font-size:
            4rem;
    }

    .about-heading h2,
    .services-heading h2,
    .nail-art-intro h2,
    .featured-art-copy h3,
    .studio-copy h2,
    .location-copy h2,
    .booking-intro h2 {

        font-size:
            3.7rem;
    }

    .service-card h3 {

        font-size:
            2.9rem;
    }

    .editorial-quote blockquote {

        font-size:
            3.1rem;
    }

    .instagram-grid {

        gap:
            6px;
    }

}


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

@media
(max-width: 900px)
and (orientation: landscape)
and (max-height: 600px) {

    .hero {

        display:
            grid;

        grid-template-columns:
            50% 50%;
    }

    .hero-copy {

        min-height:
            100svh;

        padding:
            100px 7vw 50px;
    }

    .hero-title {

        font-size:
            clamp(
                3.4rem,
                9vw,
                5.8rem
            );
    }

    .hero-visual {

        height:
            100svh;

        padding:
            70px 4vw 30px 0;
    }

}


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

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

    html {
        scroll-behavior:
            auto;
    }

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

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;

        scroll-behavior:
            auto !important;
    }

    .reveal {

        opacity:
            1;

        transform:
            none;
    }

}